/* Evergreen palette and type, from the brand guide v1.0 */
  :root{
    --ink:#0E4D49;        /* Evergreen: text, buttons, the front bubble */
    --ink-hover:#0A3A37;
    --mint:#DDF1E8;       /* Mint: panels, chips, icon circles */
    --peach:#FFB38A;      /* Peach: highlights, the back bubble, doodles */
    --white:#FFFFFF;
    --mist:#F3F6F4;       /* surface */
    --line:#CFE3DA;       /* borders */
    --moss:#2E5F5B;       /* body 2 */
    --alert:#B4362B;
    --todo:#FFF27A;       /* placeholder highlight, remove before launch */
    --serif:"Young Serif", Georgia, "Times New Roman", serif;
    --sans:"Atkinson Hyperlegible", Verdana, Arial, sans-serif;
    --r-field:16px; --r-panel:36px;
    --wrap:1180px; --header:80px;
    --ease:cubic-bezier(.2,.8,.2,1);   /* glide */
    --pop:cubic-bezier(.3,1.6,.5,1);   /* slight overshoot */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
  body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--peach);outline-offset:3px;border-radius:6px}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  p{margin:0 0 1em;max-width:62ch}
  h1,h2{font-family:var(--serif);font-weight:400;margin:0;line-height:1.08;letter-spacing:-0.01em}
  h2{font-size:clamp(28px,3.4vw,34px);margin-bottom:.6em;text-wrap:balance}
  h3{font-family:var(--sans);font-weight:700;font-size:23px;line-height:1.25;margin:0 0 .35em;text-wrap:balance}
  .lede{font-size:19px;color:var(--moss);max-width:58ch}
  .small{font-size:15px}
  mark.todo{background:var(--todo);color:var(--ink);padding:0 .2em;border-radius:3px}
  [hidden]{display:none!important}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* Buttons: one Evergreen button per screen; labels say what happens */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 17px/1 var(--sans);text-decoration:none;padding:16px 24px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;transition:background .15s, transform .2s, box-shadow .2s}
  .btn-primary{background:var(--ink);color:var(--white)}
  .btn-primary:hover{background:var(--ink-hover)}
  .btn-soft{background:var(--mint);color:var(--ink)}
  .btn-soft:hover{background:#CBE9DC}
  .btn-pop{background:var(--peach);color:var(--ink)}
  .btn-pop:hover{background:#FFA574}
  .text-link{font-weight:700;text-underline-offset:4px}

  /* Icons: 2px outline, round caps and joins, Evergreen on mint circles */
  .ic-circle{width:52px;height:52px;border-radius:50%;background:var(--mint);display:grid;place-items:center;flex:none;transition:background .25s, transform .25s}
  .ic-circle.pop{background:var(--peach)}
  .ic{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Status pill */
  .pill{display:inline-flex;align-items:center;gap:6px;font:700 15px/1 var(--sans);padding:7px 12px;border-radius:999px}
  .pill.done{background:var(--ink);color:var(--white)}
  .pill.done svg{width:13px;height:13px;stroke:var(--peach);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .pill.before{border:1.5px dashed var(--moss);color:var(--moss)}

  /* Header */
  header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header)}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .logo .mark{width:48px;height:42px;flex:none}
  .wm{display:flex;flex-direction:column;font-family:var(--serif);line-height:.92;white-space:nowrap}
  .wm .w1{font-size:30px;letter-spacing:-0.01em}
  .wm .w2{font-size:14.5px;padding-left:4px;margin-top:2px}
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-links a{text-decoration:none;font-size:17px}
  .nav-links a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
  .nav-links .btn{padding:12px 18px;font-size:16px}
  @media (max-width:980px){.nav-links a:not(.btn){display:none}}
  @media (max-width:420px){.logo .mark{width:40px;height:35px}.wm .w1{font-size:26px}.wm .w2{font-size:12.5px}.nav-links .btn{padding:11px 14px;font-size:15px}}

  /* ---------- Hero: the living system ---------- */
  .pin{height:260vh;position:relative}
  .stage{position:sticky;top:var(--header);height:calc(100vh - var(--header));display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:40px;max-width:1280px;margin:0 auto;padding:24px 40px 40px}
  .caps{position:relative;min-height:3.4em;font-size:clamp(38px,4.3vw,52px);margin:0 0 22px}
  .caps > span{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
  .caps > span.on{opacity:1;transform:none}
  .caps span span{display:block}
  .eyebrow{font:700 15px/1.3 var(--sans);color:var(--moss);margin:0 0 14px;text-wrap:balance}
  .hero-lede{font-size:19px;color:var(--moss);max-width:44ch;margin:0 0 28px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
  .cta-note{margin:14px 0 0;color:var(--moss);font-size:15px}
  .progress{margin-top:34px;display:flex;align-items:center;gap:14px;color:var(--moss);font-size:15px}
  .progress .bar{width:160px;height:4px;background:var(--mint);border-radius:4px;overflow:hidden}
  .progress .bar i{display:block;height:100%;width:0;background:var(--ink)}
  .canvas{height:100%;max-height:78vh;display:flex;align-items:center;justify-content:center}
  svg#net{width:100%;height:100%;overflow:visible}
  .chip rect.body{fill:var(--mist);stroke:var(--line);stroke-width:1.2;transition:fill .5s}
  .chip text{fill:var(--moss);font:400 15px var(--sans)}
  .chip.on rect.body{fill:var(--white)}
  .chip.on text{fill:var(--ink);font-weight:700}
  .chip .icon circle{fill:var(--mint)}
  .chip .ic,.allpill .ck,.chip .ck{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .chip .tick circle{fill:var(--ink)}
  .chip .ck,.allpill .ck{stroke:var(--peach);stroke-width:2.4}
  .office .shell{fill:var(--mint)}
  .office .title{font:400 25px var(--serif);fill:var(--ink)}
  .office .sub{font:400 14.5px var(--sans);fill:var(--moss)}
  .allpill rect{fill:var(--ink)}
  .allpill text{fill:var(--white);font:700 13.5px var(--sans)}
  .doodle{fill:none;stroke:var(--peach);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
  .mbubble .shape{fill:var(--mist);stroke:var(--line);stroke-width:1.2;transition:fill .6s,stroke .6s}
  .mbubble text{font:400 22px var(--serif);fill:var(--moss);transition:fill .6s}
  .mbubble.lit .shape{fill:var(--peach);stroke:var(--peach)}
  .mbubble.lit text{fill:var(--ink)}
  @media (max-width:900px){
    .pin{height:230vh}
    .stage{grid-template-columns:1fr;align-content:start;gap:8px;padding:20px 20px 88px}
    .caps{font-size:clamp(30px,8vw,38px);min-height:3.4em;margin-bottom:10px}
    .eyebrow{font-size:14px;margin-bottom:8px}
    .hero-lede{font-size:17px;margin-bottom:14px}
    .hero-actions .btn-soft,.progress{display:none}
    .canvas{max-height:48vh}
  }
  @media (max-width:600px){.chip text{font-size:18px}.chip .tick{display:none}.office .title{font-size:30px}.office .sub{font-size:18px}.allpill{display:none}.mbubble text{font-size:25px}}

  /* Sections */
  section.band{padding:96px 0}
  @media (max-width:700px){section.band{padding:64px 0}}
  .intro{max-width:760px;margin-bottom:44px}
  .panel{border-radius:var(--r-panel);padding:56px}
  @media (max-width:700px){.panel{padding:32px 22px;border-radius:28px}}

  /* Website feature */
  .feature{display:grid;grid-template-columns:auto 1fr 1.6fr;gap:28px 40px;align-items:start;background:var(--mint);border-radius:var(--r-panel);padding:40px;margin-bottom:56px}
  .feature h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin:0}
  .feature .sub{color:var(--moss);margin:8px 0 0}
  .feature p{margin:0 0 12px}
  .feature ul{margin:0;padding-left:1.1em}
  .feature li{margin:4px 0}
  @media (max-width:860px){.feature{grid-template-columns:1fr;padding:28px 22px;border-radius:28px;gap:14px}}

  /* Areas: before and after */
  .areas{border-top:2px solid var(--ink)}
  .areas-head,.area-row{display:grid;grid-template-columns:1fr 1.05fr 1.05fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
  .areas-head{padding:16px 0}
  .area-name{display:flex;align-items:center;gap:14px}
  .area-name h3{margin:0;font-size:19px}
  .area-row p{margin:0}
  .area-row .was{color:var(--moss)}
  .area-row .lbl{display:none}
  .area-row .now{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
  .badge{width:22px;height:22px;margin-top:4px}
  .badge circle{fill:var(--ink)}
  .badge path{fill:none;stroke:var(--peach);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  @media (max-width:760px){.areas-head{display:none}.area-row{grid-template-columns:1fr;gap:10px}.area-row .lbl{display:inline;font-weight:700;color:var(--ink)}}

  .yours{margin:40px 0 0;max-width:none;background:var(--mint);border-radius:24px;padding:24px 28px;font-size:17px}

  /* Case study */
  .case{background:var(--ink);color:var(--white)}
  .case h2{color:var(--white)}
  .case .lede,.case p{color:#D6EAE2}
  .case-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  .figure .num{font-family:var(--serif);font-size:clamp(64px,8vw,96px);line-height:1}
  .figure p{margin-top:10px}
  .built{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .built li{padding:14px 0;border-top:1px solid rgba(221,241,232,.25)}
  .built b{display:block;color:var(--white)}
  .built span{color:#D6EAE2;font-size:17px}
  blockquote{margin:0;font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--white)}
  blockquote footer{font-family:var(--sans);font-size:15px;color:#D6EAE2;margin-top:12px}
  .case .fits{margin:44px 0 0;padding-top:24px;border-top:1px solid rgba(221,241,232,.25);max-width:none}
  .case .fits b{color:var(--white)}
  @media (max-width:860px){.case-grid{grid-template-columns:1fr;gap:36px}}
  @media (max-width:520px){.built{grid-template-columns:1fr}}

  /* Calculator */
  .calc-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:48px;align-items:start}
  .tasks{border-top:2px solid var(--ink)}
  .task{display:grid;grid-template-columns:auto 1fr 200px 64px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
  .task input[type=checkbox]{width:24px;height:24px;accent-color:var(--ink);margin:0}
  .task label.name{font-weight:700;cursor:pointer;line-height:1.3;font-size:17px}
  .task .slider{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--moss)}
  .task input[type=range]{width:100%;accent-color:var(--ink)}
  .task.off .slider,.task.off .saved{opacity:.4}
  .task .saved{text-align:right;font-family:var(--serif);font-size:20px}
  .result{position:sticky;top:calc(var(--header) + 24px);background:var(--ink);color:var(--white);border-radius:var(--r-panel);padding:32px}
  .result small{color:#D6EAE2;font-size:15px}
  .big{font-family:var(--serif);font-size:clamp(60px,7vw,84px);line-height:1;color:var(--peach);margin:8px 0 4px}
  .big span{font-family:var(--sans);font-size:19px;color:var(--white);margin-left:8px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px;padding:18px 0;border-top:1px solid rgba(221,241,232,.25);border-bottom:1px solid rgba(221,241,232,.25)}
  .stats b{display:block;font-family:var(--serif);font-weight:400;font-size:30px}
  .stats span{font-size:15px;color:#D6EAE2}
  .result .btn{width:100%;white-space:normal}
  .result p.note{font-size:15px;color:#D6EAE2;margin:14px 0 0}
  @media (max-width:900px){.calc-grid{grid-template-columns:1fr}.result{position:static}.task{grid-template-columns:auto 1fr 56px;row-gap:6px}.task input[type=checkbox]{grid-row:1;grid-column:1}.task label.name{grid-row:1;grid-column:2}.task .saved{grid-row:1;grid-column:3}.task .slider{grid-row:2;grid-column:2 / 4}}

  /* Steps with a dotted path doodle */
  .steps-wrap{position:relative}
  .dots{position:absolute;left:26px;right:12%;top:2px;height:40px;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s ease .2s}
  .dots.drawn{clip-path:inset(0 0 0 0)}
  .dots circle{fill:var(--peach)}
  .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
  .step .n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mint);font-family:var(--serif);font-size:24px;margin-bottom:18px;position:relative}
  .step .price{display:inline-block;font-weight:700;font-size:15px;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:2px 0 12px}
  .step p{color:var(--moss);font-size:17px}
  .callout{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .callout div{background:var(--white);border-radius:24px;padding:24px 28px}
  .callout p{margin:0;max-width:none;font-size:17px}
  @media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}.dots{display:none}}
  @media (max-width:600px){.steps{grid-template-columns:1fr}.callout{grid-template-columns:1fr}}

  /* Principles */
  .principles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 56px;max-width:1000px}
  .principle{padding:22px 0;border-top:1px solid var(--line)}
  .principle h3{font-family:var(--serif);font-weight:400;font-size:24px}
  .principle p{color:var(--moss);margin:0}
  @media (max-width:760px){.principles{grid-template-columns:1fr}}

  /* About */
  .about-grid{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center}
  .about-grid .contact-line{font-weight:700}
  @media (max-width:760px){.about-grid{grid-template-columns:1fr;gap:28px}}
  .portrait{position:relative;width:100%;max-width:400px;aspect-ratio:400/440;container-type:inline-size}
  .portrait .frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  /* .photo lines up exactly with the mint bubble's body (x0 y120 320x270, rx56), so the photo's bottom corners follow its curve */
  .portrait .photo{position:absolute;left:0;top:27.27%;width:80%;height:61.36%;clip-path:inset(-60% 0 0 0 round 0 0 17.5% 17.5% / 0 0 20.74% 20.74%)}
  .portrait .photo img{position:absolute;left:50%;bottom:-19%;transform:translateX(-50%);height:143%;width:auto;max-width:none}
  @media (max-width:760px){.portrait{max-width:300px}}

  /* FAQ */
  .faq{max-width:840px;border-top:2px solid var(--ink)}
  details{border-bottom:1px solid var(--line)}
  summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-weight:700;font-size:19px;position:relative}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";position:absolute;right:6px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 8v10M8 13h10' stroke='%230E4D49' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/26px no-repeat;transition:transform .2s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--moss);padding-bottom:6px}

  /* Closing */
  .closing{background:var(--mint)}
  .display{font-family:var(--serif);font-size:clamp(52px,7vw,72px);line-height:1;margin:0 0 22px}
  .closing p:not(.display){font-size:19px;color:var(--moss)}
  .swoosh{position:relative;display:inline-block}
  .swoosh svg{position:absolute;left:-4%;bottom:-.14em;width:108%;height:auto;overflow:visible}
  .swoosh path{fill:none;stroke:var(--peach);stroke-width:7;stroke-linecap:round}
  .closing .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

  footer.site{padding:40px 0 48px;font-size:15px;color:var(--moss)}
  footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
  footer.site .links{display:flex;flex-wrap:wrap;gap:18px}
  footer.site .logo .mark{width:36px;height:32px}
  footer.site .wm .w1{font-size:22px}
  footer.site .wm .w2{font-size:11px}
  footer.site .pages{flex-basis:100%;gap:10px 22px;padding-top:18px;border-top:1px solid var(--line)}
  footer.site a{text-underline-offset:3px}

  /* Links from the homepage to the service pages */
  .more{display:block;margin-top:6px;font-weight:700;font-size:16px;text-underline-offset:4px}
  p.more{margin:14px 0 0}
  a.price{color:inherit;text-underline-offset:3px}
  .nav-links a[aria-current="page"]:not(.btn){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

  /* ---------- Inner pages ---------- */
  .page-hero{padding:56px 0 64px}
  .crumbs{font-size:15px;color:var(--moss);margin:0 0 18px}
  .crumbs a{color:var(--moss);text-underline-offset:3px}
  .crumbs span[aria-hidden]{margin:0 6px}
  .page-hero h1{font-size:clamp(40px,5.2vw,60px);margin:0 0 20px;text-wrap:balance;max-width:16ch}
  .page-hero .lede{font-size:21px;line-height:1.55;max-width:60ch}
  .page-hero .updated{font-size:15px;color:var(--moss);margin:-6px 0 20px}
  .page-hero .hero-actions{margin-top:28px}
  .page-hero .cta-note{margin:14px 0 0}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:center}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero-grid .portrait{order:-1;max-width:280px}}
  @media (max-width:700px){.page-hero{padding:36px 0 48px}.page-hero .lede{font-size:19px}}
  section.sec{padding:64px 0;border-top:1px solid var(--line)}
  section.sec.mist{background:var(--mist);border-top:0}
  section.sec.mist + section.sec{border-top:0}
  @media (max-width:700px){section.sec{padding:48px 0}}
  .prose{max-width:780px}
  .prose > :last-child{margin-bottom:0}
  .prose ul{padding-left:1.2em;margin:0 0 1em;max-width:62ch}
  .prose li{margin:8px 0}
  .prose li::marker{color:var(--moss)}
  /* Before and after, styled like the homepage rows */
  .ba{border-top:2px solid var(--ink);margin:8px 0 28px}
  .ba .areas-head,.ba .area-row{grid-template-columns:1fr 1fr}
  @media (max-width:760px){.ba .area-row{grid-template-columns:1fr}}
  /* Steps: numbered mint circles */
  ol.how{list-style:none;counter-reset:how;padding:0;margin:8px 0 0;display:grid;gap:22px;max-width:760px}
  ol.how li{counter-increment:how;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
  ol.how li::before{content:counter(how);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--white);border:1px solid var(--line);font-family:var(--serif);font-size:24px}
  section.sec:not(.mist) ol.how li::before{background:var(--mint);border:0}
  ol.how p{margin:0;padding-top:10px}
  /* Tables: rows become cards on small screens, so nothing scrolls sideways */
  .table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:17px}
  .table th{text-align:left;font-size:15px;color:var(--moss);font-weight:700;padding:12px 16px 12px 0;border-bottom:2px solid var(--ink)}
  .table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .table td:first-child{font-weight:700}
  .table td.price{white-space:nowrap}
  @media (max-width:700px){
    .table thead{display:none}
    .table,.table tbody,.table tr,.table td{display:block;width:100%}
    .table tr{padding:14px 0;border-bottom:1px solid var(--line)}
    .table td{border:0;padding:3px 0}
    .table td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";font-weight:700;color:var(--ink)}
    .table td.price{white-space:normal}
  }
  .callout-box{background:var(--mint);border-radius:24px;padding:22px 26px;margin:0 0 28px;max-width:none}
  /* Who you'll work with */
  .who{display:flex;gap:20px;align-items:center;background:var(--mist);border-radius:28px;padding:22px 26px;max-width:780px}
  .who .avatar{width:84px;height:84px;border-radius:50%;background:var(--mint);overflow:hidden;flex:none;position:relative}
  .who .avatar img{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:auto;height:118%;max-width:none}
  .who p{margin:0}
  .who h2{font-size:24px;margin:0 0 4px}
  @media (max-width:520px){.who{flex-direction:column;align-items:flex-start}}
  /* Closing panel on inner pages */
  .closing h2{font-size:clamp(34px,4.4vw,48px)}
  .faq-wrap .faq{margin-top:8px}
  /* Privacy policy */
  .legal h2{font-size:28px;line-height:1.15;margin:44px 0 10px}
  .legal .updated{color:var(--moss);font-size:15px;margin:0 0 32px}
  .legal .short{background:var(--mint);border-radius:28px;padding:26px 30px;margin:0 0 40px}
  .legal .short h2{margin-top:0}
  .legal ul{padding-left:1.2em}
  .legal li{margin:6px 0;max-width:66ch}
  .legal .muted{color:var(--moss)}
  /* Page not found */
  .notfound .mark-big{width:120px;height:104px;margin-bottom:28px}
  .notfound h1{max-width:none}
  .notfound .actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
  .notfound .go{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none;font-size:17px}
  .notfound .go a{font-weight:700;text-underline-offset:4px}

  /* Mobile booking bar */
  .mobile-cta{display:none}
  @media (max-width:700px){
    .mobile-cta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease}
    .mobile-cta.show{transform:none}
    .mobile-cta .btn{flex:1;padding:14px 10px}
    .mobile-cta .btn-soft{flex:0 0 auto}
    body{padding-bottom:78px}
  }

  /* ---------- ask russ ---------- */
  .ar-launch{position:fixed;right:20px;bottom:20px;z-index:45;display:flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 22px 9px 12px;font:700 18px/1 var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(14,77,73,.18);transition:padding .25s, transform .2s}
  .ar-launch:hover{transform:translateY(-2px)}
  .ar-launch .bub{width:44px;height:38px;flex:none;overflow:visible}
  .ar-launch .label{transition:opacity .2s}
  .ar-launch.compact{width:66px;height:66px;padding:0;justify-content:center}
  .ar-launch.compact .bub{width:42px;height:36px}
  .ar-launch.compact .label{display:none}
  .ar-launch[aria-expanded="true"]{display:none}
  .ar-nudge{position:fixed;right:20px;bottom:92px;z-index:45;max-width:290px;background:var(--peach);color:var(--ink);border-radius:20px 20px 6px 20px;padding:14px 40px 14px 18px;font-size:17px;line-height:1.4;box-shadow:0 10px 26px rgba(14,77,73,.16);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s, transform .3s}
  .ar-nudge.show{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
  .ar-nudge button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
  .ar{position:fixed;right:20px;bottom:20px;z-index:50;width:min(400px,calc(100vw - 40px));height:min(620px,calc(100vh - 110px));background:var(--white);border-radius:28px;box-shadow:0 24px 60px rgba(14,77,73,.25);display:flex;flex-direction:column;overflow:hidden;
    opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1)}
  .ar.open{opacity:1;transform:none;pointer-events:auto}
  .ar-head{display:flex;align-items:center;gap:12px;padding:16px 14px 16px 18px;background:var(--ink);color:var(--white)}
  .ar-head .bub{width:42px;height:36px;flex:none}
  .ar-head b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1}
  .ar-head small{display:block;color:#D6EAE2;font-size:14px;line-height:1.35;margin-top:4px}
  .ar-close{margin-left:auto;background:none;border:0;color:var(--white);cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
  .ar-close:hover{background:rgba(255,255,255,.12)}
  .ar-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:var(--mist)}
  .msg{max-width:86%;padding:12px 15px;border-radius:18px;font-size:17px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
  .msg.bot{background:var(--white);align-self:flex-start;border-bottom-left-radius:6px}
  .msg.me{background:var(--ink);color:var(--white);align-self:flex-end;border-bottom-right-radius:6px}
  /* Thinking: the two bubbles orbit, stay upright, and lock back into the logo */
  .think-mark{width:40px;height:35px;overflow:visible;flex:none}
  .msg.thinking{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--moss)}
  @media (prefers-reduced-motion:no-preference){
    :is(.think-mark,.spin-once) .pair{transform-box:view-box;transform-origin:60px 52px;animation:orbit 1.5s cubic-bezier(.75,0,.25,1) infinite}
    :is(.think-mark,.spin-once) .b{transform-box:fill-box;transform-origin:center;animation:upright 1.5s cubic-bezier(.75,0,.25,1) infinite}
    :is(.think-mark,.spin-once) .lock{transform-box:fill-box;transform-origin:center;animation:lock 1.5s ease-out infinite}
    .spin-once :is(.pair,.b,.lock){animation-duration:.9s;animation-iteration-count:1}
  }
  @keyframes orbit{0%{transform:rotate(0)}62%,100%{transform:rotate(360deg)}}
  @keyframes upright{0%{transform:rotate(0)}62%,100%{transform:rotate(-360deg)}}
  @keyframes lock{0%,60%{transform:scale(1)}70%{transform:scale(1.08)}80%,100%{transform:scale(1)}}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chips button{font:700 15px/1.2 var(--sans);background:var(--white);border:1.5px solid var(--ink);color:var(--ink);padding:9px 14px;border-radius:999px;cursor:pointer;text-align:left}
  .chips button:hover{background:var(--mint)}
  .handoff{display:flex;flex-wrap:wrap;gap:8px}
  .handoff a{font:700 15px/1 var(--sans);text-decoration:none;padding:12px 16px;border-radius:999px}
  .handoff .book{background:var(--peach);color:var(--ink)}
  .handoff .text{background:var(--mint);color:var(--ink)}
  /* Text Russ popover: desktop only (phones follow the sms: link straight to Messages) */
  .tp{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 24px);background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 44px rgba(14,77,73,.22);padding:20px 22px 18px;opacity:0;transform:translateY(-6px);transition:opacity .18s, transform .22s var(--ease)}
  .tp.above{transform:translateY(6px)}
  .tp.open{opacity:1;transform:none}
  .tp::before{content:"";position:absolute;left:calc(var(--ax,50%) - 8px);top:-8px;width:14px;height:14px;background:var(--white);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0;transform:rotate(45deg)}
  .tp.above::before{top:auto;bottom:-8px;transform:rotate(225deg)}
  .tp-title{font:700 17px/1.3 var(--sans);margin:0 0 2px}
  .tp-num{font:400 32px/1.2 var(--serif);margin:0 0 14px;white-space:nowrap}
  .tp-copy{width:100%;padding:13px 18px;font-size:16px}
  .tp-email{font-size:15px;line-height:1.45;color:var(--moss);margin:14px 0 0}
  .tp-email a{color:var(--ink);font-weight:700;text-underline-offset:3px}
  .tp-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center}
  .tp-close:hover{background:var(--mint)}
  @media (prefers-reduced-motion:reduce){.tp{transition:none}}
  .ar-more-wrap{position:relative;height:0;z-index:1}
  .ar-more{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:700 15px/1 var(--sans);background:var(--ink);color:var(--white);border:0;border-radius:999px;padding:10px 16px;box-shadow:0 8px 20px rgba(14,77,73,.22);cursor:pointer;white-space:nowrap}
  .ar-more:hover{background:var(--ink-hover)}
  .ar-form{display:flex;gap:10px;align-items:flex-end;padding:12px 14px 6px;background:var(--white);border-top:1px solid var(--line)}
  .ar-form textarea{flex:1;resize:none;font:400 17px/1.4 var(--sans);border:1.5px solid var(--line);border-radius:var(--r-field);padding:11px 14px;max-height:120px;color:var(--ink);background:var(--white)}
  .ar-form textarea::placeholder{color:#6E8F89}
  .ar-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--peach)}
  .ar-form button{background:var(--ink);border:0;border-radius:50%;width:46px;height:46px;flex:none;cursor:pointer;display:grid;place-items:center}
  .ar-form button:disabled{opacity:.4;cursor:default}
  .ar-note{font-size:13px;color:var(--moss);padding:2px 18px 12px;background:var(--white);margin:0;max-width:none}
  @media (max-width:700px){
    .ar-launch{bottom:88px;right:14px}
    .ar-nudge{bottom:154px;right:14px;max-width:250px}
    .ar{right:0;bottom:0;width:100vw;height:100%;border-radius:0}
    .ar-note{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  }

  /* ---------- Motion: each effect plays once. Things are only hidden before their reveal
     when JavaScript is running (html.js) and the visitor hasn't asked for reduced motion. ---------- */
  section.band{overflow-x:clip}
  @media (hover:hover){
    .btn:hover{box-shadow:0 8px 20px rgba(14,77,73,.18)}
    .area-row:hover .ic-circle,.feature:hover .ic-circle{background:var(--peach)}
  }
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .btn:hover{transform:translateY(-2px)}
    .area-row:hover .ic-circle,.feature:hover .ic-circle{transform:rotate(-8deg) scale(1.06)}
  }
  @media screen and (prefers-reduced-motion:no-preference){
    /* Fade up: section intros, website feature, principles, About text, FAQ heading */
    html.js :is(.intro h2,.intro .lede,.feature,.principle,.about-text > *,#faq h2){opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
    /* Before and after: name, then Before from the left, Handled from the right, then the badge pops */
    html.js .area-row .area-name{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
    html.js .area-row .was{opacity:0;transform:translateX(-24px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
    html.js .area-row .now{opacity:0;transform:translateX(24px);transition:opacity .6s var(--ease) calc(var(--d,0s) + .35s),transform .6s var(--ease) calc(var(--d,0s) + .35s)}
    html.js .area-row .badge{opacity:0;transform:scale(0);transition:opacity .2s calc(var(--d,0s) + .7s),transform .5s var(--pop) calc(var(--d,0s) + .7s)}
    /* Steps: numbers pop in behind the dotted path, each title block just after its number */
    html.js .step .n{opacity:0;transform:scale(.4);transition:opacity .3s calc(var(--d,0s) + .25s),transform .5s var(--pop) calc(var(--d,0s) + .25s)}
    html.js .step .n ~ *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) calc(var(--d,0s) + .4s),transform .6s var(--ease) calc(var(--d,0s) + .4s)}
    /* Portrait assembles like the logo */
    html.js .portrait :is(.pb,.mb,.photo){opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
    html.js .portrait .pb{transform:translate(40px,-20px)}
    html.js .portrait .mb{transform:translate(-40px,20px);transition-delay:.15s}
    html.js .portrait .photo{transform:translate(-10cqw,5cqw);transition-delay:.15s}
    /* Closing swoosh draws once */
    html.js .swoosh path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .3s}

    html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
    html.js .rv.in,
    html.js .in:is(.intro h2,.intro .lede,.feature,.principle,.about-text > *,#faq h2),
    html.js .area-row.in :is(.area-name,.was,.now,.badge),
    html.js .step.in :is(.n,.n ~ *),
    html.js .portrait.in :is(.pb,.mb,.photo){opacity:1;transform:none}
    html.js .closing.in .swoosh path{stroke-dashoffset:0}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}