:root {
  --paper:#f5ebdd;
  --ink:#49382f;
  --muted:#68574b;
  --clay:#a14f38;
  --sage:#bbc4ad;
  --line:#d8cbbb;
  --white:#fff9f0
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.55 Arial,Helvetica,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
button,input,textarea {
  font:inherit
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--clay);
  outline-offset:5px
}
.wrap {
  max-width:1440px;
  margin:auto;
  padding-left:clamp(24px,7.78vw,112px);
  padding-right:clamp(24px,7.78vw,112px)
}
.preview-bar {
  background:var(--sage);
  padding:6px 24px;
  font-size:11px;
  letter-spacing:.06em;
  text-align:center
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:88px;
  position:relative
}
.header:after {
  content:"";
  position:absolute;
  bottom:0;
  left:clamp(24px,7.78vw,112px);
  right:clamp(24px,7.78vw,112px);
  border-bottom:1px solid var(--line)
}
.wordmark {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:32px;
  letter-spacing:-1px;
  white-space:nowrap
}
.header nav {
  display:flex;
  gap:clamp(24px,4vw,60px);
  font-size:15px
}
.nav-toggle {
  display:none
}
.accent,.partnership {
  color:var(--clay)
}
.accent {
  font-weight:600
}
.hero {
  padding-top:52px;
  padding-bottom:48px;
  position:relative;
  isolation:isolate;
  overflow:clip
}
.hero:before {
  content:"";
  position:absolute;
  inset:-24px -6px;
  z-index:-1;
  pointer-events:none;
  background:url('/assets/business-contours.svg') center top/cover no-repeat;
  transform:translate3d(var(--contour-pointer-x,0px),calc(var(--contour-offset,0px) + var(--contour-pointer-y,0px)),0)
}
.eyebrow {
  text-transform:uppercase;
  color:var(--clay);
  font-size:11px;
  font-weight:700;
  margin:0 0 24px
}
.hero h1 {
  font-size:clamp(48px,6.1vw,88px);
  line-height:1.07;
  letter-spacing:-2.5px;
  font-weight:400;
  max-width:850px;
  margin:0 0 32px
}
.hero h1 span {
  color:var(--clay)
}
.hero-intro {
  font-size:22px;
  line-height:1.6;
  max-width:1010px;
  color:var(--muted);
  margin-bottom:26px
}
.partnership {
  font-size:19px;
  margin:28px 0 34px
}
.actions {
  display:flex;
  align-items:center;
  gap:32px
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  background:var(--clay);
  color:var(--white);
  border-radius:6px;
  padding:16px 19px;
  font-size:16px;
  font-weight:600
}
.button:hover {
  background:#88412f;
  text-decoration:none
}
.button:active {
  background:#733725
}
.button,.header nav a,.nav-toggle,.footer a {
  transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease
}
.header nav a,.footer a {
  text-decoration-thickness:1px
}
.header nav a:hover,.footer a:hover {
  color:#88412f
}
.nav-toggle:hover {
  background:#eadcc6
}
.contact a:focus-visible,.contact button:focus-visible {
  outline-color:var(--white)
}
section[id] {
  scroll-margin-top:24px
}
.workflow {
  position:absolute;
  width:340px;
  right:7%;
  top:55px;
  pointer-events:none
}
.section {
  padding-top:52px;
  padding-bottom:64px
}
h2 {
  font-size:clamp(34px,3.2vw,47px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.6px;
  margin:0 0 26px
}
h3 {
  font-size:25px;
  line-height:1.2;
  margin:0 0 18px
}
p {
  margin-top:0;
  color:var(--muted)
}
.services {
  border-top:1px solid var(--line)
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  margin-top:40px
}
.service-grid h3 {
  min-height:60px
}
.service-grid .eyebrow {
  margin-bottom:18px
}
.connected {
  position:relative;
  isolation:isolate;
  background-color:var(--sage)
}
.connected:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url('/assets/business-sage-contours.svg');
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat
}
.connected .eyebrow,.connected .accent {
  color:#5f2f22
}
.connected .section-intro {
  color:var(--ink)
}
.section-intro {
  max-width:970px;
  font-size:20px
}
.stages {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  list-style:none;
  padding:0;
  margin:40px 0 22px
}
.stages li {
  position:relative;
  background:var(--white);
  border-radius:8px;
  padding:18px;
  font-size:16px;
  transition:background-color 160ms ease,box-shadow 160ms ease
}
.stages li:focus-within {
  background:#fffdf8;
  box-shadow:inset 0 0 0 1px #5f2f2266
}
.stages li:focus-within + li {
  box-shadow:inset 0 0 0 1px #5f2f2233
}
.stages li:focus-within:not(:last-child):after {
  color:#5f2f22
}
@media(hover:hover) and (pointer:fine) {
  .stages li:hover {
  background:#fffdf8;
  box-shadow:inset 0 0 0 1px #5f2f2266
}
.stages li:hover + li {
  box-shadow:inset 0 0 0 1px #5f2f2233
}
.stages li:hover:not(:last-child):after {
  color:#5f2f22
}
}
.stages li:not(:last-child):after {
  content:'→';
  position:absolute;
  right:-16px;
  top:32px;
  color:var(--clay);
  transition:color 160ms ease
}
.stages span {
  display:block;
  font-size:14px;
  margin-top:20px;
  color:var(--muted)
}
.connected .accent {
  font-size:15px;
  line-height:1.9
}
.example-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:38px
}
.example {
  border:1px solid var(--line);
  background:var(--white);
  border-radius:12px;
  padding:32px
}
.example--illustrated,.example--text .example-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:center
}
.example-illustration {
  display:block;
  width:100%;
  aspect-ratio:3 / 2
}
.example-illustration img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  border-radius:8px
}
.example-summary>p:last-child {
  font-size:17px;
  margin-bottom:22px
}
.example--text .example-help {
  border-top:0;
  padding-top:0
}
.example h3 {
  font-size:28px;
  min-height:0;
  text-wrap:pretty
}
.example-help {
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:17px
}
.example-help .eyebrow {
  margin-bottom:12px
}
.example ol {
  list-style:none;
  counter-reset:steps;
  padding:0;
  margin:22px 0 0
}
.example li {
  counter-increment:steps;
  background:#e5e8db;
  padding:10px 12px;
  border-radius:4px;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--clay)
}
.example li:before {
  content:'0' counter(steps) ' ';
  margin-right:8px
}
.approach {
  border-top:1px solid var(--line)
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  margin-top:30px
}
.process-grid h3 {
  font-size:22px
}
.pricing {
  padding:26px;
  background:#eadcc6;
  border-radius:12px;
  margin-top:34px
}
.pricing .eyebrow {
  margin-bottom:10px;
  color:#733725
}
.pricing h3 {
  font-size:32px
}
.pricing p {
  font-size:15px;
  margin-bottom:8px
}
.pricing .offer-intro {
  font-size:20px;
  max-width:860px;
  margin-bottom:18px
}
.pricing .offer-scope {
  font-size:17px;
  max-width:980px
}
.pricing .offer-price {
  font-size:23px;
  font-weight:700;
  color:var(--ink);
  margin-top:22px
}
.offer-examples {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  margin-top:24px
}
.offer-examples article {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white)
}
.offer-examples h4 {
  font-size:22px;
  line-height:1.25;
  margin:0 0 16px
}
.pricing .offer-examples p:not(.eyebrow):not(.offer-tool-note) {
  font-size:16px;
  margin-bottom:16px
}
.pricing .offer-tool-note {
  font-size:14px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line)
}
.pricing .offer-note {
  margin-top:20px;
  max-width:980px
}
.about {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:64px;
  row-gap:32px;
  align-items:center
}
.about-heading {
  grid-column:1 / -1
}
.about-heading h2 {
  max-width:700px;
  margin-bottom:0
}
.casey-portrait {
  display:block;
  width:100%;
  max-width:360px;
  aspect-ratio:3 / 4
}
.casey-portrait img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 4;
  border-radius:12px;
  border:1px solid var(--line)
}
.about h2 {
  max-width:700px;
  font-size:clamp(35px,3.2vw,42px)
}
.about .partnership {
  border-top:1px solid var(--line);
  padding-top:22px
}
.contact {
  background:var(--ink);
  color:var(--white)
}
.contact-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:100px
}
.contact h2 {
  font-size:clamp(38px,3.7vw,48px)
}
.contact p {
  color:#e9ddd2
}
.contact .eyebrow {
  color:var(--sage)
}
fieldset {
  border:0;
  margin:0;
  padding:0
}
label {
  display:block;
  font-size:14px;
  font-weight:700;
  margin-bottom:20px
}
input,textarea {
  display:block;
  width:100%;
  margin-top:8px;
  background:#5c4a40;
  border:1px solid #a28b7b;
  color:var(--white);
  border-radius:5px;
  padding:10px
}
fieldset button {
  width:100%;
  background:var(--sage);
  border:0;
  border-radius:5px;
  padding:12px;
  text-align:left;
  color:var(--ink)
}
fieldset:disabled {
  opacity:.75
}
.footer {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  padding-top:30px;
  padding-bottom:30px;
  font-size:13px
}
.footer span {
  margin-left:auto
}
.skip {
  position:absolute;
  left:24px;
  top:-100px;
  padding:12px;
  background:var(--white);
  z-index:10
}
.skip:focus {
  top:8px
}
@media(max-width:1150px) {
  .workflow {
  width:260px;
  right:4%;
  opacity:.75
}
.hero h1 {
  max-width:660px
}
.contact-grid {
  gap:50px
}

}
@media(max-width:900px) {
  .offer-examples {
  grid-template-columns:1fr
}
  .connected:before {
  background-size:auto 100%;
  background-position:right top;
  opacity:.45
}
  .workflow {
  position:static;
  width:100%;
  max-width:390px;
  margin-top:40px
}
.hero {
  --contour-offset:0px!important
}
.hero:before {
  background-size:auto 700px;
  background-position:right top;
  transform:none
}
.service-grid,.process-grid {
  grid-template-columns:1fr 1fr
}
.example--illustrated,.example--text .example-copy {
  grid-template-columns:1fr;
  gap:24px
}
.example {
  padding:24px
}
.example-illustration {
  max-width:600px;
  margin:auto
}
.example--text .example-help {
  border-top:1px solid var(--line);
  padding-top:22px
}
.stages {
  grid-template-columns:1fr
}
.stages li:not(:last-child):after {
  content:'↓';
  top:auto;
  bottom:-24px;
  left:50%
}
.about,.contact-grid {
  grid-template-columns:1fr;
  gap:24px
}
.header nav {
  gap:20px
}

}
@media(max-width:600px) {
  body {
  font-size:18px
}
.header {
  min-height:88px
}
.nav-toggle {
  display:block;
  border:0;
  background:transparent;
  color:var(--ink);
  padding:12px;
  min-height:44px;
  min-width:44px;
  border-radius:6px
}
.header nav {
  display:none;
  position:absolute;
  top:88px;
  left:24px;
  right:24px;
  padding:24px;
  background:var(--white);
  flex-direction:column;
  z-index:5;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 28px #49382f18
}
.header nav.is-open {
  display:flex
}
.hero {
  padding-top:38px
}
.hero h1 {
  font-size:clamp(42px,12.8vw,50px);
  letter-spacing:-1px;
  line-height:1.06
}
.hero h1 br {
  display:none
}
.hero-intro {
  font-size:18px;
  line-height:1.55;
  margin-top:32px
}
.partnership {
  font-size:17px;
  line-height:1.6
}
.actions {
  align-items:stretch;
  flex-direction:column;
  gap:22px
}
.button {
  width:100%;
  gap:14px
}
.workflow {
  max-width:342px;
  margin-top:35px
}
.section {
  padding-top:42px;
  padding-bottom:46px
}
.service-grid,.example-grid,.process-grid {
  grid-template-columns:1fr;
  gap:30px
}
.service-grid article {
  border-bottom:1px solid var(--line);
  padding-bottom:25px
}
.service-grid h3 {
  min-height:0;
  font-size:26px
}
.service-grid p:last-child {
  margin-bottom:0
}
.example {
  padding:24px
}
.example ol {
  margin-top:18px
}
.section-intro {
  font-size:18px
}
.contact h2 {
  font-size:40px
}
.about h2 {
  font-size:35px
}
.footer {
  gap:15px
}
.footer span {
  margin-left:0;
  flex-basis:100%
}
.pricing h3 {
  font-size:28px
}
.pricing {
  padding:22px
}
.offer-examples article {
  padding:18px
}
.wordmark img {
  width:44px;
  height:44px
}
.wordmark {
  font-size:29px
}
.header nav a {
  padding:8px 0
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.hero:before {
  transform:none
}
.button,.header nav a,.nav-toggle,.footer a,.stages li,.stages li:not(:last-child):after {
  transition:none
}

}

@media(hover:none), (pointer:coarse) {
  .hero:before {
  transform:none
}
}