:root{
    /* COMMITTED olive: the color carries the surface, not the trim */
    --olive:      oklch(0.255 0.042 133);
    --olive-deep: oklch(0.202 0.034 133);
    --olive-mid:  oklch(0.335 0.052 133);
    --olive-line: oklch(0.955 0.009 105 / .18);
    --olive-line-soft: oklch(0.955 0.009 105 / .09);
    --olive-wash:      oklch(0.955 0.009 105 / .035);
    --olive-wash-2:    oklch(0.955 0.009 105 / .04);
    --olive-wash-3:    oklch(0.955 0.009 105 / .05);
    --olive-veil:      oklch(0.202 0.034 133 / .96);

    --paper:      oklch(0.955 0.009 105);
    --paper-2:    oklch(0.918 0.014 105);
    --paper-3:    oklch(0.878 0.018 105);

    --ink:        oklch(0.215 0.025 130);
    --ink-soft:   oklch(0.215 0.025 130 / .72);
    --ink-faint:  oklch(0.215 0.025 130 / .66);  /* .46 failed AA at 2.9:1 on paper.
                                                .66 clears 4.5 on both paper (5.34) and
                                                paper-3 (4.77); paper-3 is the binding case. */
    --hair:       oklch(0.215 0.025 130 / .16);

    /* on-olive type */
    --on-olive:      oklch(0.945 0.012 105);
    --on-olive-soft: oklch(0.945 0.012 105 / .68);
    --on-olive-faint:oklch(0.945 0.012 105 / .42);

    /* single signal accent: voltage-tester green */
    --signal:     oklch(0.845 0.158 116);
    --signal-ink: oklch(0.47 0.115 122);

    --ff:'Archivo',system-ui,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
    --pad:clamp(20px,4.5vw,64px);
    --max:1420px;
    /* negative offset from a .wrap content edge out to the viewport edge */
    --bleed:calc(-1 * (var(--pad) + max(0px, (100vw - var(--max)) / 2)));

    /* spacing scale: four steps. rhythm comes from the jumps between them */
    --s-group:   clamp(28px,4vh,44px);    /* separation inside a section */
    --s-block:   clamp(44px,6.5vh,80px);  /* separation between blocks */
    --s-gutter:  clamp(28px,4.5vw,68px);  /* horizontal column gap */
    --s-section: clamp(74px,10.5vh,136px);
    --s-loose:   clamp(94px,14vh,184px);

    /* modular scale, 1.34 ratio */
    --t-hero: clamp(40px,6.3vw,90px);
    --t-h2:   clamp(32px,5vw,66px);
    --t-h3:   clamp(23px,2.7vw,36px);
    --t-lead: clamp(17px,1.45vw,20px);
    --t-micro:12px;
    --t-fine: 13.5px;
    --t-ui:   15px;
    --t-base: 16px;

    /* hand drawn eyebrow strokes: same hand, three passes, none of them level */
    --stroke-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2.4,7.3 C 21,5.1 38,8.0 61,6.1 C 83,4.3 101,6.8 117.6,4.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
    --stroke-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2.2,4.9 C 25,7.6 45,4.1 67,6.4 C 89,8.4 105,5.0 117.8,6.9' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
    --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5,0 V9 M0,4.5 H9' stroke='%23f4f1e8' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
    --stroke-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2.6,6.5 C 19,4.2 43,7.8 69,5.3 C 91,3.1 107,6.4 117.4,5.0' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{overflow-x:clip}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--ff);font-size:var(--t-base);font-variation-settings:'wdth' 100;position:relative}
  img{display:block;max-width:100%}
  a{color:inherit}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
  ::selection{background:var(--signal);color:var(--olive-deep)}
  :focus-visible{outline:2px solid var(--signal-ink);outline-offset:3px}

  /* skip link: offscreen until focused */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--signal);color:var(--olive-deep);
    padding:12px 18px;font-size:var(--t-ui);font-weight:700;text-decoration:none}
  .skip-link:focus{left:12px;top:12px}

  .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative}
  section{padding-top:var(--s-section);padding-bottom:var(--s-section)}
  section.loose{padding-top:var(--s-loose);padding-bottom:var(--s-loose)}

  /* the drench: olive owns roughly half the page surface */
  .drench{background:var(--olive);color:var(--on-olive)}
  .drench-deep{background:var(--olive-deep);color:var(--on-olive)}
  .drench .body,.drench-deep .body{color:var(--on-olive-soft)}

  /* Opacity only. The composition is static; nothing floats into place. */
  .reveal{opacity:0;transition:opacity .45s var(--ease)}
  .reveal.in{opacity:1}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}
    .btn > span:first-child::after{transition:none}.btn .arrow{transition:none}}

  /* type: one superfamily, width + weight carry the hierarchy */
  .display{font-weight:800;font-variation-settings:'wdth' 118;line-height:.98;letter-spacing:-.028em;text-wrap:balance}
  .label{font-size:var(--t-micro);font-weight:600;font-variation-settings:'wdth' 88;letter-spacing:.16em;text-transform:uppercase}
  .mono-n{font-variation-settings:'wdth' 118;font-weight:700;font-variant-numeric:tabular-nums}
  .body{font-size:var(--t-lead);line-height:1.66;color:var(--ink-soft);max-width:46ch}
  .stack p{font-size:clamp(16px,1.4vw,18.5px);line-height:1.55;max-width:52ch}
  .stack p + p{margin-top:5px}
  .drench .stack p,.drench-deep .stack p{color:var(--on-olive-soft)}
  .drench .stack p.turn,.drench-deep .stack p.turn{color:var(--on-olive)}
  .stack p{color:var(--ink-soft)} .stack p.turn{color:var(--ink)}

  /* alignment modifiers: the page runs left-aligned, so a centered block is an
     event. used deliberately, not for variety. */
  /* promoted section titles. sized at the title role so they mark the section
     without competing with the display type inside it. keeps the drawn stroke. */
  .sec-title{font-size:clamp(21px,2.1vw,27px);font-weight:800;font-variation-settings:'wdth' 114;
    line-height:1.12;letter-spacing:-.018em;max-width:none;margin-bottom:var(--s-group)}

  .u-mid{text-align:center}
  .u-mid h2{margin-left:auto;margin-right:auto}
  .u-mid .stack p{margin-left:auto;margin-right:auto}

  /* a drawn stroke under a single line of copy: same hand as the eyebrows.
     width:max-content keeps the stroke to the text, capped by the copy measure.
     colour follows the ground automatically. */
  .u-drawn{display:block;width:max-content;max-width:100%}
  .u-drawn::after{content:"";display:block;margin-top:10px;height:9px;background:var(--signal-ink);
    -webkit-mask-image:var(--stroke-b);mask-image:var(--stroke-b);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .drench .u-drawn::after,.drench-deep .u-drawn::after{background:var(--signal)}

  /* nav sits inside the drench */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
  .wordmark{font-weight:800;font-variation-settings:'wdth' 112;font-size:var(--t-base);letter-spacing:-.01em}
  .wordmark .dot{color:var(--signal)}
  .nav-links{display:flex;gap:30px;font-size:var(--t-fine);font-weight:500}
  .nav-links a{display:inline-flex;align-items:center;min-height:24px;color:var(--on-olive-soft);text-decoration:none;transition:color .25s}
  .nav-links a:hover{color:var(--signal)}
  .menu-toggle{display:none;font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-olive-soft);padding:6px 0}
  .mobile-menu{display:none;flex-direction:column;padding-bottom:18px}
  .mobile-menu a{font-weight:700;font-variation-settings:'wdth' 112;font-size:24px;text-decoration:none;padding:11px 0;border-bottom:1px solid var(--olive-line-soft);color:var(--on-olive)}
  .mobile-menu.open{display:flex}
  @media (max-width:680px){.nav-links{display:none}.menu-toggle{display:block}}

  /* eyebrow underline: one hand drawn stroke, three cuts so no two sit level */
  .tick{display:inline-block;color:var(--on-olive-faint);--stroke:var(--stroke-a)}
  .tick--b{--stroke:var(--stroke-b)}
  .tick--c{--stroke:var(--stroke-c)}
  .tick::after{content:"";display:block;margin-top:7px;height:9px;background:var(--signal);
    -webkit-mask-image:var(--stroke);mask-image:var(--stroke);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .tick-ink{color:var(--ink-faint)}
  .tick-ink::after{background:var(--signal-ink)}

  .btn{position:relative;display:inline-flex;align-items:center;gap:11px;background:var(--signal);color:var(--olive-deep);font-size:var(--t-ui);font-weight:700;font-variation-settings:'wdth' 104;text-decoration:none;padding:17px 30px;border-radius:1px}
  .btn .arrow{transition:transform .3s var(--ease)}
  /* the same hand that drew the eyebrows: the stroke draws itself under the label.
     bound to the label span, not the button, so it tracks the text in the full-width sticky CTA too */
  .btn > span:first-child{position:relative;display:inline-block}
  .btn > span:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:8px;
    background:var(--olive-deep);
    -webkit-mask-image:var(--stroke-a);mask-image:var(--stroke-a);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    clip-path:inset(0 100% 0 0);
    transition:clip-path .42s var(--ease)}
  .btn:hover > span:first-child::after,
  .btn:focus-visible > span:first-child::after{clip-path:inset(0 0 0 0)}
  .btn:hover .arrow{transform:translateX(4px)}
  .lnk{display:inline-flex;align-items:baseline;gap:10px;font-size:var(--t-micro);font-weight:700;font-variation-settings:'wdth' 92;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding-bottom:8px;border-bottom:2px solid var(--signal);transition:gap .3s var(--ease)}
  .lnk .arrow{color:var(--signal);transition:transform .3s var(--ease)}
  .lnk:hover{gap:16px} .lnk:hover .arrow{transform:translateX(4px)}
  .lnk-ink{border-bottom-color:var(--signal-ink)} .lnk-ink .arrow{color:var(--signal-ink)}

  /* HERO: drenched, oversized, photo as a tall inset plate */
  .hero{position:relative;padding-top:var(--s-block);padding-bottom:var(--s-section)}
  .hero::before{content:"";position:absolute;inset:-10% var(--bleed) 0 var(--bleed);z-index:0;pointer-events:none;
    background:radial-gradient(88% 62% at 50% 22%,oklch(0.335 0.052 133 / .85) 0%,oklch(0.335 0.052 133 / 0) 72%)}
  .hero > *{position:relative;z-index:1}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s-block);justify-items:center;text-align:center}
  .hero-grid > div{display:flex;flex-direction:column;align-items:center;max-width:min(100%,1050px)}
  .hero-grid .body{margin-left:auto;margin-right:auto}
  
  @media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}}
  /* hero CTA pair: filled primary + ruled secondary. the only filled button above the fold. */
  .hero-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:clamp(16px,2.2vw,32px)}
  @media (max-width:520px){.hero-cta{flex-direction:column;align-items:stretch;text-align:center}
    .hero-cta .btn{justify-content:center}.hero-cta .lnk{justify-content:center}}
  .hero h1{font-size:var(--t-hero);max-width:24ch;margin-bottom:var(--s-group)}
  .hero h1 .sig{color:var(--signal)}
  .hero .body{color:var(--on-olive-soft);margin-bottom:var(--s-group);max-width:62ch}


  /* WORK: strict spec-sheet grid on paper */
  .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-gutter);align-items:end}
  @media (max-width:900px){.work-grid{grid-template-columns:1fr;align-items:start;gap:34px}}
  .work-stat{font-size:clamp(64px,9.4vw,132px);line-height:.84;letter-spacing:-.035em;margin-bottom:14px}
  .work-stat .u{font-size:.42em;letter-spacing:-.01em;font-variation-settings:'wdth' 100;font-weight:700}
  .work-stat-label{margin-bottom:var(--s-group);color:var(--ink-faint)}
  .work-client{font-size:clamp(16px,1.6vw,20px);font-weight:800;font-variation-settings:'wdth' 104;line-height:1.1;letter-spacing:-.02em;margin-bottom:6px}
  .work-sub{font-size:var(--t-h3);font-weight:700;font-variation-settings:'wdth' 114;line-height:1.15;letter-spacing:-.018em;color:var(--signal-ink);margin-bottom:16px}
  .work-line{font-size:var(--t-base);line-height:1.62;color:var(--ink-soft);max-width:36ch;margin-bottom:26px}
  .work-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;padding-top:20px;border-top:1px solid var(--hair)}
  .work-meta .n{font-size:clamp(34px,3.2vw,44px);font-weight:700;font-variation-settings:'wdth' 114;line-height:1}
  .work-meta .l{margin-top:8px;color:var(--ink-faint)}
  .work-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-3);
    margin-right:var(--bleed)}
  .work-img img{width:100%;height:100%;object-fit:cover}
  .work-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:var(--paper);background:linear-gradient(transparent,oklch(0.202 0.034 133 / .82))}

  .problem h2{font-size:var(--t-h2);max-width:15ch;margin-bottom:var(--s-group)}

  /* SYSTEM: panel-schedule ledger, drenched */
  .sys-head{margin-bottom:var(--s-block)}
  .sys-head h2{font-size:clamp(29px,3.8vw,52px);max-width:19ch;margin:18px 0 26px}
  .flow{border-top:1px solid var(--olive-line)}
  .stage{border-bottom:1px solid var(--olive-line-soft)}
  .stage-btn{width:100%;display:grid;grid-template-columns:56px clamp(160px,17vw,230px) 1fr 28px;align-items:baseline;gap:16px;padding:24px 0;transition:background .3s}
  .stage-btn:hover{background:var(--olive-wash-2)}
  .stage .num{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;color:var(--on-olive-faint);font-variant-numeric:tabular-nums}
  .stage .name{font-size:clamp(20px,2vw,27px);font-weight:700;font-variation-settings:'wdth' 114;letter-spacing:-.015em}
  .stage .desc{font-size:var(--t-fine);color:var(--on-olive-soft)}
  .stage .plus{color:var(--on-olive-faint);font-size:18px;justify-self:end;transition:transform .35s var(--ease),color .3s}
  .stage.open .plus{transform:rotate(45deg);color:var(--signal)}
  .stage.is-paid{background:var(--olive-wash)}
  .stage.is-paid .name{color:var(--signal)}
  .stage-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
  .stage.open .stage-panel{grid-template-rows:1fr}
  .stage-panel > div{overflow:hidden}
  .stage-panel ul{list-style:none;padding:0 0 26px 72px;display:flex;flex-wrap:wrap;gap:9px 26px}
  .stage-panel li{font-size:var(--t-fine);color:var(--on-olive-soft)}
  @media (max-width:760px){
    .stage-btn{grid-template-columns:40px 1fr 26px;gap:12px}
    .stage .desc{grid-column:2/4;grid-row:2;font-size:var(--t-fine);margin-top:6px}
    /* .desc claims cols 2-4, so it wraps to row 2 and auto-placement dropped the
       indicator into row 3 col 1. pin it to the top-right cell explicitly. */
    .stage .plus{grid-column:3;grid-row:1;justify-self:end}
    .stage-panel ul{padding-left:52px;flex-direction:column}
  }
  .loop{margin-top:var(--s-block);padding-top:32px;border-top:1px solid var(--olive-line)}

  /* QUOTE */
    /* quote: the client's voice. photo removed, centred, and set in the italic cut.
     this is the only italic on the page and the only use of the italic axis that
     is already being downloaded in the font request. Archivo's italic tops out at
     weight 600, so the quote stays at 500 and is never synthesised. */
  .quote-grid{display:block;text-align:center}
  .quote-grid blockquote{font-style:italic;max-width:30ch;margin-left:auto;margin-right:auto}
  .quote-grid .attr{margin-left:auto;margin-right:auto}
  
  blockquote{font-size:clamp(21px,2.6vw,34px);font-weight:500;font-variation-settings:'wdth' 104;line-height:1.34;letter-spacing:-.016em;max-width:26ch;text-wrap:balance;margin:24px 0}
  .attr{font-size:var(--t-fine);color:var(--ink-soft);margin-bottom:26px;line-height:1.7}
  /* the attribution carries the proof link: the client's site is the deliverable,
     so it is verifiable in one click. inline in a sentence, so exempt from the
     24px target minimum. */
  .attr a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--signal-ink);
    transition:color .25s,border-color .25s}
  .attr a:hover{color:var(--signal-ink)}
  .attr strong{font-weight:700;color:var(--ink)}

  /* WHY: three ruled columns, strict grid */
  /* drafting sheet: unequal spans, dashed rules, registration marks at every corner.
     the section headline sits inside the grid and breaks it, bottom right. */
  .why{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
  .why-cell{position:relative;padding:clamp(22px,2.2vw,32px);
    border:1px dashed var(--olive-line);
    background-image:var(--mark),var(--mark),var(--mark),var(--mark);
    background-repeat:no-repeat;
    background-size:9px 9px;
    background-position:-5px -5px,calc(100% + 5px) -5px,-5px calc(100% + 5px),calc(100% + 5px) calc(100% + 5px)}
  .why-a{grid-column:1/4}
  .why-b{grid-column:4/7}
  .why-c{grid-column:1/3}
  .why-lead{grid-column:3/7;align-self:end;text-align:right;padding:clamp(22px,2.2vw,32px) clamp(4px,1vw,14px) 0 0}
  .why-lead h2{font-size:var(--t-h2);max-width:none;margin:0 0 16px}
  .why-lead p{margin-left:auto;max-width:44ch;font-size:var(--t-lead);line-height:1.55;color:var(--on-olive-soft)}
  @media (max-width:900px){
    .why{grid-template-columns:1fr}
    .why-a,.why-b,.why-c,.why-lead{grid-column:1/2}
    .why-lead{text-align:left;padding:var(--s-group) 0 0 0}
    .why-lead p{margin-left:0}
  }
  /* HOW GROWTH WORKS, wide viewports: the stages become columns.
     collapsed columns carry the name vertically; the open column takes the remaining width.
     grounds are the olive tonal steps, so photography can drop in later without a rewrite. */
  /* split composition: argument on the left, the system itself on the right.
     needs real width, so it only engages above 1100px. */
  @media (min-width:1100px){
    .sys-split{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
      gap:var(--s-gutter);align-items:center}
    .sys-head{margin-bottom:0}
    .sys-head h2{max-width:14ch}
    .sys-head .stack p{max-width:42ch}
  }

  @media (min-width:901px){
    .flow{display:flex;gap:14px;align-items:stretch;height:clamp(340px,46vh,400px);border-top:none}
    .stage{display:flex;flex-direction:column;flex:0 0 64px;overflow:hidden;border-bottom:none;border-radius:14px;background:var(--olive-mid);
      transition:flex-basis .55s var(--ease),background .45s var(--ease)}
    .stage.open{flex:1 1 0%;background:var(--olive-deep)}
    .stage.is-paid{background:var(--olive-mid)}
    .stage-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
      width:100%;height:100%;padding:22px 8px;position:relative;grid-template-columns:none;gap:0}
    .stage-btn:hover{background:var(--olive-wash-3)}
    .stage.open .stage-btn:hover{background:transparent}
    .stage .num{display:block;width:auto;text-align:center}
    .stage .plus,.stage .desc{display:none}
    .stage .name{position:static;width:auto;margin:0;
      writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(18px,1.5vw,22px)}
    .stage.open .stage-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
      padding:24px 30px;height:auto;flex:0 0 auto}
    .stage.open .num{text-align:left}
    .stage.open .name{writing-mode:horizontal-tb;transform:none;margin:16px 0 0;display:block}
    .stage.open .desc{display:block;margin-top:12px;max-width:36ch;color:var(--on-olive-soft)}
    .stage-panel{min-height:0}.stage-panel > div{overflow-y:auto}
    .stage-panel ul{padding:20px 30px 26px 30px;flex-direction:column;gap:9px}
  }

  .why h3{font-size:clamp(21px,2.1vw,27px);font-weight:800;font-variation-settings:'wdth' 114;line-height:1.12;letter-spacing:-.018em;max-width:15ch;margin-bottom:18px}

  /* FINAL */
  .final h2{font-size:var(--t-h2);max-width:13ch;margin-bottom:var(--s-group)}
  /* final CTA: a real job photo bleeding in from the right.
     the section escapes .wrap so the photo reaches the viewport edge; the copy
     keeps its measure via .wrap on the inner wrapper.

     the fade is a MASK on the image, not a cream overlay above it. an overlay has
     to match the section ground exactly or a seam shows, and there is no hex to
     match here: the browser keeps --paper as oklch in computed styles, and an
     oklch(... / 0) stop rendered fully opaque in Chrome. masking removes the
     colour-matching problem entirely, because what shows through IS the ground.

     stops are expressed against the section: ground solid to 30%, image fully
     present by 72%. the image box starts at section-30%, so within its own box
     that ramp is 0% -> 60%. */
  .final{position:relative;overflow:hidden;background:var(--paper)}
  .final-bg{position:absolute;top:0;right:0;bottom:0;left:30%;z-index:0;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 60%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 60%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%}
  .final-bg img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
  .final-inner{position:relative;z-index:2}
  /* below 900px the landscape crops to an illegible slice behind the conversion
     copy, so it is dropped entirely. */
  @media (max-width:899px){.final-bg{display:none}}
  .final .sess{color:var(--ink-faint);margin-bottom:15px}
  .final .stack{margin-bottom:var(--s-group)}

  footer{padding:30px 0 46px;font-size:var(--t-fine);color:var(--on-olive-faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer a{color:var(--on-olive-soft);text-decoration:none}
  footer a:hover{color:var(--signal)}
  @media (max-width:680px){footer{flex-direction:column;gap:10px}}

  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--olive-veil);backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .4s var(--ease)}
  .sticky-cta.show{transform:translateY(0)}
  .sticky-cta .btn{width:100%;justify-content:center}
  @media (max-width:900px){.sticky-cta{display:block}footer{padding-bottom:92px}}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */

/* client line above the title */
.cs-client{font-size:var(--t-micro);font-weight:600;font-variation-settings:'wdth' 88;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-olive-faint);
  margin-bottom:var(--s-group)}

/* at a glance: who, where, what was in scope */
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-gutter);
  margin-top:var(--s-block);padding-top:26px;border-top:1px solid var(--olive-line)}
.glance dt{font-size:var(--t-micro);font-weight:600;font-variation-settings:'wdth' 88;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-olive-faint);margin-bottom:10px}
.glance dd{margin:0;font-size:var(--t-fine);line-height:1.7;color:var(--on-olive-soft)}
@media (max-width:900px){.glance{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (max-width:520px){.glance{grid-template-columns:1fr}}

/* takeaways panel on the left, the reading column on the right */
.situation-split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--s-gutter);align-items:start}
@media (max-width:900px){.situation-split{grid-template-columns:1fr;gap:var(--s-block)}}

.takeaways .tk-title{font-size:var(--t-micro);font-weight:600;font-variation-settings:'wdth' 88;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:var(--s-group)}

/* the three headline figures: stacked, left aligned in the takeaways panel */
.figures{display:flex;flex-direction:column;gap:var(--s-group)}
.figures .n{font-size:clamp(40px,4.6vw,64px);font-weight:800;
  font-variation-settings:'wdth' 118;line-height:.95;letter-spacing:-.028em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.figures .n .u{font-size:.45em;letter-spacing:-.01em;font-variation-settings:'wdth' 100;font-weight:700}
.figures .l{margin-top:10px;color:var(--ink-faint);max-width:24ch}

/* prose column */
.prose{max-width:62ch}
.prose p{font-size:var(--t-lead);line-height:1.66;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose p{color:var(--ink-soft)}
.prose p.turn{color:var(--ink)}
.drench .prose p,.drench-deep .prose p{color:var(--on-olive-soft)}
.drench .prose p.turn,.drench-deep .prose p.turn{color:var(--on-olive)}

/* about page: bio column now, portrait alongside it once one exists */
.about-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-gutter);align-items:start;
  margin-top:var(--s-block)}
.about-split.has-portrait{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
@media (max-width:900px){.about-split.has-portrait{grid-template-columns:1fr;gap:var(--s-block)}}
.about-prose{max-width:62ch}
.about-portrait{margin:0;border-radius:14px;overflow:hidden;background:var(--olive-mid);aspect-ratio:4/5;max-width:380px;margin-left:auto}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

/* what we did: 2x2 grid so it fills the measure, separated by space not rules */
.did-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-block) var(--s-gutter);
  margin-top:var(--s-block)}
.did-grid h3{font-size:clamp(21px,2.1vw,27px);font-weight:800;font-variation-settings:'wdth' 114;
  line-height:1.15;letter-spacing:-.018em;margin-bottom:12px;max-width:20ch}
.did-grid p{font-size:var(--t-base);line-height:1.62;color:var(--on-olive-soft);max-width:46ch}
.did-grid p + p{margin-top:12px}
@media (max-width:900px){.did-grid{grid-template-columns:1fr;gap:var(--s-group)}}

/* ruled list: used for the outcome */
.cs-list{margin-top:var(--s-group);max-width:62ch}
.cs-list > div{padding:0 0 var(--s-group)}
.cs-list > div + div{padding-top:var(--s-group);border-top:1px solid var(--hair)}
.cs-list > div:last-child{padding-bottom:0}
.cs-list h3{font-size:clamp(21px,2.1vw,27px);font-weight:800;font-variation-settings:'wdth' 114;
  line-height:1.15;letter-spacing:-.018em;margin-bottom:10px}
.cs-list p{font-size:var(--t-base);line-height:1.62;color:var(--ink-soft);max-width:56ch}
.cs-list p + p{margin-top:12px}
.drench .cs-list,.drench-deep .cs-list{border-top-color:var(--olive-line)}
.drench .cs-list > div,.drench-deep .cs-list > div{border-bottom-color:var(--olive-line-soft)}
.drench .cs-list p,.drench-deep .cs-list p{color:var(--on-olive-soft)}

/* outcome: our account of the results on the left, his voice alongside it */
.outcome-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-gutter);align-items:start;
  margin-top:var(--s-group)}
@media (max-width:900px){.outcome-split{grid-template-columns:1fr;gap:var(--s-block)}}
.outcome-split .cs-list{margin-top:0;max-width:none}
.outcome-split .cs-quote{margin-top:0;max-width:none}

/* inline quote, set within a section rather than as a slab */
/* the quote is lifted onto the raised tonal step rather than ruled off. depth by
   lightness, per the flat doctrine, and the drawn stroke marks it instead of a hairline. */
.cs-quote{margin:0;padding:clamp(26px,2.6vw,38px);background:var(--olive-mid);border-radius:14px}
.cs-quote::before{content:"";display:block;width:54px;height:9px;margin-bottom:22px;
  background:var(--signal);
  -webkit-mask-image:var(--stroke-b);mask-image:var(--stroke-b);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.cs-quote blockquote{margin:0;font-size:clamp(20px,1.95vw,26px);font-style:italic;font-weight:500;
  font-variation-settings:'wdth' 104;line-height:1.45;letter-spacing:-.01em;color:var(--on-olive)}
.cs-quote .attr{margin-top:20px;margin-bottom:0;color:var(--on-olive-soft)}
.cs-quote .attr strong{color:var(--on-olive)}
/* the proof link inherits ink from the paper-ground rule, which is invisible on olive */
.drench .cs-quote .attr a,.drench-deep .cs-quote .attr a{color:var(--on-olive);
  border-bottom-color:var(--signal)}
.drench .cs-quote .attr a:hover,.drench-deep .cs-quote .attr a:hover{color:var(--signal)}

/* close */
.cs-back{margin-top:var(--s-group)}
.cs-coda{margin-top:var(--s-block);padding-top:22px;border-top:1px solid var(--olive-line)}