:root{
    --ink:#12181B;
    --ink-2:#3E4A4D;
    --ink-3:#55625F;
    --line:#DCE3E1;
    --surface:#FFFFFF;
    --surface-2:#F4F7F6;
    --teal:#0A6F68;
    --teal-bright:#19C4B4;
    --teal-deep:#08211F;
    /* --teal on the pale mint of .credit-badge is 4.35:1, and that label is
       11px normal weight, so AA wants 4.5. This is the same hue darkened to
       5.36:1. --teal-deep would clear it easily but sits within a shade of
       --ink, which would erase the split between the badge number and its
       label. Only for teal text on a mint background - on white, --teal is
       already fine. */
    --teal-ink:#096058;
    --on-dark:#EEF2F1;
    --on-dark-2:#B6C1BF;
    --on-dark-3:#94A19F;
    --rail:280px;
    --pad:72px;
    --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}
  h1,h2,h3,p,figure,blockquote,ul{margin:0}
  ul{padding:0;list-style:none}
  img{max-width:100%;height:auto;display:block}
  a{color:var(--teal);text-decoration:none}
  a:hover{color:var(--ink)}
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}

  /* Read by screen readers, not drawn. The markup already used this class on
     the blank first header of the comparison tables, but the rule was never
     written - so "Measure" was rendering as visible text in a cell the design
     wants empty. Not display:none, which would take it out of the accessibility
     tree and put the table back to having an unlabelled column. */
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip:focus{left:0}

  /* ── Shell ─────────────────────────────── */
  .shell{display:flex;min-height:100vh}
  .rail{width:var(--rail);flex:none;background:var(--ink);color:var(--on-dark);padding:36px 28px}
  .rail-inner{position:sticky;top:36px;display:flex;flex-direction:column;gap:32px}
  .main{flex:1;min-width:0}

  .wordmark{font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.02em;color:var(--on-dark)}
  .wordmark:hover{color:var(--teal-bright)}
  .rail-nav-in{display:flex;flex-direction:column}
  .rail-nav a{display:block;padding:11px 0;font-weight:500;font-size:16px;color:#C3CDCB;border-bottom:1px solid rgba(238,242,241,.12);transition:color .18s ease,padding-left .18s ease}
  .rail-nav a:last-child{border-bottom:0}
  .rail-nav a:hover{color:var(--teal-bright);padding-left:8px}
  .rail-contact{display:flex;flex-direction:column;gap:10px}

  /* Burger. Hidden until the rail collapses to a bar - see the 1100 block. */
  .burger{display:none;width:44px;height:44px;padding:0;flex:none;
    align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--on-dark)}
  .burger>span,.burger>span::before,.burger>span::after{
    display:block;width:22px;height:2px;background:currentColor;transition:transform .25s ease,background .25s ease}
  .burger>span{position:relative}
  .burger>span::before,.burger>span::after{content:"";position:absolute;left:0}
  .burger>span::before{top:-7px}
  .burger>span::after{top:7px}
  .nav-open .burger>span{background:transparent}
  .nav-open .burger>span::before{transform:translateY(7px) rotate(45deg)}
  .nav-open .burger>span::after{transform:translateY(-7px) rotate(-45deg)}

  .btn{display:block;text-align:center;padding:15px;font-weight:600;font-size:14px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
  .btn-teal{background:var(--teal-bright);color:var(--teal-deep)}
  .btn-teal:hover{background:#2AD6C6;color:var(--teal-deep);transform:translateY(-2px);box-shadow:0 10px 22px rgba(25,196,180,.28)}
  .btn-ink{background:var(--ink);color:#fff}
  .btn-ink:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(18,24,27,.22)}
  .btn-ghost{border:1px solid var(--ink);color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:#fff}

  .rating{display:flex;flex-direction:column;gap:6px}
  .stars{color:var(--teal-bright);font-size:14px;letter-spacing:2px}
  .rail small,.rail .meta{font-size:14px;line-height:1.5;color:#A7B3B1}
  .rail-mail{color:#C3CDCB;word-break:break-all;transition:color .18s ease}
  .rail-mail:hover{color:var(--teal-bright)}
  .avail{display:flex;align-items:center;gap:8px;font-size:14px;color:#A7B3B1}
  .dot{width:7px;height:7px;border-radius:999px;background:var(--teal-bright);flex:none}
  @media (prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

  /* ── Sections ──────────────────────────── */
  .sec{padding:64px var(--pad);border-bottom:1px solid var(--line)}
  .sec-2{background:var(--surface-2)}
  .sec-dark{background:var(--ink);color:var(--on-dark)}
  .split{display:grid;grid-template-columns:280px 1fr;gap:56px}
  .eyebrow{font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
  h2{font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.035em}
  .lede{font-size:17px;line-height:1.6;color:var(--ink-2)}
  .sec-dark .lede,.sec-dark p{color:var(--on-dark-2)}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
  .more{font-weight:600;font-size:14px;white-space:nowrap}

  header.hero{padding:80px var(--pad) 64px;border-bottom:1px solid var(--line)}
  .hero h1{max-width:940px;font-weight:700;font-size:clamp(44px,5.4vw,82px);line-height:.99;letter-spacing:-.045em;text-wrap:pretty;margin:28px 0 32px}
  .hero-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:end}
  .hero-foot p{font-size:21px;line-height:1.6;color:var(--ink-2)}
  .hero-cta{display:flex;gap:12px}
  .hero-cta .btn{flex:1;padding:17px;font-size:15px}

  /* One row, always: wrapping put the logos on two or three ragged lines on
     anything narrow. The track runs as a marquee once the script has doubled
     the list; until then it is a plain row that scrolls by hand. */
  .trusted{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;padding:26px 0 26px var(--pad);
    border-bottom:1px solid var(--line);background:var(--surface-2);overflow:hidden}
  .trusted>p{flex:none;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .tb-track{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
  .tb-track::-webkit-scrollbar{display:none}
  .tb{display:flex;flex-wrap:nowrap;align-items:center;width:max-content}
  .tb li{flex:none;display:flex;align-items:center;padding-right:clamp(34px,5vw,64px)}
  /* the clone makes the loop seamless, so half a lap is one full pass */
  .is-marquee .tb-track{overflow:hidden}
  .is-marquee .tb{animation:tb-scroll var(--tb-dur,42s) linear infinite}
  .is-marquee .tb-track:hover .tb,.is-marquee .tb-track:focus-within .tb{animation-play-state:paused}
  @keyframes tb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .tb a{display:flex;align-items:center;gap:12px;color:var(--ink);opacity:.82;transition:opacity .2s ease}
  .tb a:hover{opacity:1;color:var(--ink)}
  .tb-img{height:40px;width:auto;display:block}
  .tb-circle{width:56px;height:56px;border-radius:50%;display:block}
  .tb-vendora{height:52px}
  .tb-lead .tb-geonet{height:44px}
  .barnes-mark{width:46px;height:46px;display:block;flex:none}
  .barnes-word{font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--ink);white-space:nowrap}

  /* JB Sparks mark, rebuilt from their own site so the hover behaviour survives */
  .jb-mark{width:40px;height:40px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;
    background:#0A0A0A;color:#FAFAF7;font-family:Archivo,var(--font);font-weight:900;font-size:15px;letter-spacing:-.02em;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .jb-mark::after{content:"";position:absolute;top:8px;right:-4px;width:13px;height:24px;background:#FF4D1F;
    clip-path:polygon(55% 0,0 55%,38% 55%,25% 100%,100% 38%,58% 38%);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .jb:hover .jb-mark{transform:rotate(-4deg) scale(1.05)}
  .jb:hover .jb-mark::after{animation:bolt-flash .6s cubic-bezier(.22,1,.36,1)}
  @keyframes bolt-flash{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.2);filter:brightness(1.5)}}
  .jb-name{font-family:Archivo,var(--font);font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}

  /* Kasto: mark and wordmark flattened into one lockup. The wordmark is set in
     Jefith, their own display face, which was a 59KB self-hosted woff2 loaded
     for a single word - the image is a tenth of that and cannot fall back to
     the wrong typeface. */
  .tb-kasto{height:42px}

  .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 44px}
  .row{padding:20px 0;border-top:1px solid var(--line);transition:padding-left .2s ease}
  .row:hover{padding-left:10px}
  .row h3{font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
  .row p{font-size:16px;line-height:1.6;color:var(--ink-2)}

  /* ── Work ──────────────────────────────────
     Base state is a plain card grid: every project's copy and links
     are in the markup and readable with no JS at all. The homepage
     script upgrades it to the deck below. */
  .wk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
  .wk-item{background:var(--surface);border:1px solid var(--line)}
  .wk-shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
  .wk-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  /* laid over the still rather than replacing it: nothing flashes if the file
     is slow, and nothing is missing if it never loads at all */
  .wk-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .wk-body{padding:20px 20px 24px}
  .wk-tag{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
  .wk-body h3{font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-.02em;margin-bottom:10px}
  .wk-body p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:16px}
  .wk-nav,.wk-queue{display:none}

  /* ── Work deck (JS on) ─────────────────────
     One project at full width; the rest fan into a queue beside the
     caption. Only .wk-shot is transformed, so the copy under it never
     moves and nothing relayouts mid-transition. The featured item is
     the one left in flow, so it alone sets the section's height -
     which is why the title and description are line-clamped. */
  .wk.is-deck{
    display:block;position:relative;
    /* Its own stacking context. The cards run to z-index 70 to layer against
       each other, and without this they compete with the sticky rail (50) and
       paint straight over the nav on mobile. */
    z-index:0;isolation:isolate;
    --thumb-w:126px;--stack-step:16px;
    --stack-w:calc(var(--thumb-w) + (var(--items) - 2) * var(--stack-step));
    --side-gap:clamp(34px,3.2vw,60px);
    /* Starting width for the card, replaced with a measured pixel value as
       soon as the script runs. It is capped on height, not width: the whole
       section - heading, card and caption - has to sit inside one screen next
       to the rail. 360px is the measured chrome: 64 top pad, 74 heading, 64
       bottom pad and a ~145 caption band. */
    --feat-w:min(100%, max(420px, calc((100svh - 360px) * (16/9))));
  }
  .is-deck .wk-item,.is-deck .wk-queue{width:var(--feat-w);max-width:100%;margin-inline:auto}
  .is-deck .wk-item{position:absolute;left:0;right:0;top:0;border:0;background:none}
  .is-deck .wk-item.is-feature{position:relative}
  .is-deck .wk-shot{
    transform-origin:0 0;border:1px solid var(--line);cursor:pointer;
    box-shadow:0 1px 2px rgba(18,24,27,.05),0 10px 22px -14px rgba(18,24,27,.34);
    transition:transform .55s cubic-bezier(.3,.7,.2,1),box-shadow .45s ease,border-color .2s ease;
  }
  .is-deck .wk-item:not(.is-feature) .wk-shot:hover{border-color:var(--ink-3)}
  .is-deck .is-feature .wk-shot{
    cursor:default;
    box-shadow:0 1px 2px rgba(18,24,27,.05),0 30px 60px -34px rgba(18,24,27,.45);
  }
  /* visibility, not opacity alone: an invisible panel still takes tab stops.
     The delay holds it visible until the fade has finished. */
  /* Every line of the caption is a line the card does not get, so all three
     parts are clamped AND floored to a fixed number of lines. The featured
     item is the only one left in flow and therefore the one setting the
     section's height: copy of uneven length would otherwise make the whole
     block jump each time the deck advanced. */
  .is-deck .wk-body{
    width:calc(100% - var(--stack-w) - 44px);padding:20px 0 0;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s;
  }
  .is-deck .is-feature .wk-body{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .is-deck .wk-tag{letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* The measures are capped in ch so the copy wraps to the same line count on
     a 620px card as on a 1400px one. Without that the floors would either
     clip the narrow case or leave dead space in the wide one. */
  .is-deck .wk-body h3{
    max-width:30ch;font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.025em;
    min-height:2.5em;margin:0 0 8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .is-deck .wk-body p:not(.wk-tag){
    max-width:62ch;font-size:clamp(15px,1.1vw,17px);line-height:1.55;
    min-height:4.65em;margin:0 0 12px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* floored so the lead card, which has no buttons, does not come out shorter
     than the rest and shift the section every time it comes round */
  .is-deck .wk-body .card-links{min-height:1.5em}

  /* Arrows sit on the feature: at full content width there is no margin
     beside it to put them in. The box is redeclared rather than measured
     so they centre on the image, not on the image plus its caption. */
  .is-deck .wk-nav{display:block;position:absolute;left:0;right:0;top:0;width:var(--feat-w);max-width:100%;
    margin-inline:auto;aspect-ratio:16/9;z-index:70;pointer-events:none}
  .wk-arrow{
    position:absolute;top:50%;margin-top:-23px;pointer-events:auto;
    width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
    display:grid;place-items:center;
    background:rgba(18,24,27,.6);color:#fff;font:400 19px/1 var(--font);
    transition:background .18s ease,transform .18s ease;
  }
  .wk-arrow:hover{background:var(--ink);color:#fff}
  .wk-prev{left:18px}
  .wk-next{right:18px}

  .is-deck .wk-queue{display:block;position:absolute;left:0;right:0;top:0;z-index:65;pointer-events:none}
  /* spacer the same shape as the feature, so the queue starts level with the caption */
  .is-deck .wk-queue::before{content:"";display:block;width:100%;aspect-ratio:16/9}
  .wk-queue-in{width:var(--stack-w);margin-left:auto;padding-top:24px;pointer-events:auto}

  /* ── Side layout ───────────────────────────
     Chosen by the script whenever a caption beside the card leaves the card
     bigger than a caption under it does. That is most of the time on a wide,
     short screen, where stacking wastes several hundred pixels of width and
     squeezes the copy into columns too narrow to hold a sentence. */
  .is-deck.is-side .wk-item{
    left:0;right:auto;width:100%;margin-inline:0;
    display:grid;grid-template-columns:var(--feat-w) minmax(0,1fr);column-gap:var(--side-gap);
  }
  .is-deck.is-side .wk-shot{grid-column:1}
  .is-deck.is-side .wk-body{grid-column:2;width:auto;display:block;padding:2px 0 0;align-self:start}
  .is-deck.is-side .wk-tag{margin-bottom:12px;letter-spacing:.16em}
  .is-deck.is-side .wk-body h3{font-size:clamp(22px,1.9vw,30px);min-height:0;-webkit-line-clamp:3;margin-bottom:14px}
  .is-deck.is-side .wk-body p:not(.wk-tag){font-size:clamp(16px,1.15vw,18px);line-height:1.6;
    min-height:0;-webkit-line-clamp:5;margin-bottom:20px}
  .is-deck.is-side .wk-nav{margin-inline:0}
  /* pinned to the foot of the card rather than following the copy, so the
     queue sits on the same baseline whatever length the description runs to */
  .is-deck.is-side .wk-queue{left:calc(var(--feat-w) + var(--side-gap));right:0;top:auto;bottom:0;width:auto}
  .is-deck.is-side .wk-queue::before{display:none}
  .is-deck.is-side .wk-queue-in{margin-left:0;padding-top:0}
  .wk-meter{display:flex;align-items:center;gap:10px;margin-bottom:13px}
  .wk-track{flex:1;height:2px;background:var(--line);overflow:hidden}
  .wk-fill{display:block;height:100%;background:var(--teal);transition:width .5s cubic-bezier(.4,0,.15,1)}
  .wk-count{font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--ink)}
  .wk-count small{font-size:inherit;font-weight:500;color:var(--ink-3)}
  /* the slots are empty boxes: the cards themselves fly into them, so the fan
     here and the plain row on mobile need no separate maths in the script */
  .wk-slots{position:relative;width:var(--stack-w);height:calc(var(--thumb-w) * 9 / 16)}
  .wk-slot{position:absolute;top:0;width:var(--thumb-w);height:100%}

  .card-links{display:flex;gap:18px;font-weight:600;font-size:14px}
  .card-links a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .18s ease,color .18s ease}
  .card-links a:hover{border-bottom-color:currentColor}
  .card-links .sub{color:var(--ink-3)}
  .card-links .sub:hover{color:var(--ink)}

  /* Comparison */
  .cmp{width:100%;border-collapse:collapse;text-align:left}
  .cmp th{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;vertical-align:bottom}
  .cmp th.win{color:var(--teal)}
  .cmp td{padding:18px 32px 18px 0;font-size:16px;line-height:1.5;border-top:1px solid var(--line);vertical-align:top}
  .cmp tbody tr:first-child td{border-top:1px solid var(--ink)}
  .cmp tbody tr:last-child td{border-bottom:1px solid var(--ink)}
  .cmp tbody tr:hover td{background:var(--surface-2)}
  .cmp td:first-child{font-weight:600;width:150px}
  .cmp td:last-child{color:var(--ink-3);padding-right:0}

  /* Steps */
  .step{display:grid;grid-template-columns:60px 200px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(238,242,241,.15);transition:padding-left .2s ease}
  .step:first-child{border-top-color:rgba(238,242,241,.25)}
  .step:last-of-type{border-bottom:1px solid rgba(238,242,241,.25)}
  .step:hover{padding-left:10px}
  .step .n{font-weight:600;font-size:15px;color:var(--teal-bright)}
  .step h3{font-weight:600;font-size:24px;letter-spacing:-.02em}
  .step p{font-size:17px;line-height:1.6}

  /* Reviews + testimonials */
  .score{display:flex;align-items:baseline;gap:12px}
  .score b{font-weight:700;font-size:44px;line-height:1;letter-spacing:-.04em}
  .score .stars{color:var(--teal)}
  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 44px}
  .quotes figure{padding:22px 0;border-top:1px solid var(--line)}
  .quotes blockquote{font-size:19px;line-height:1.5;margin-bottom:14px}
  .quotes figcaption{font-size:14px;color:var(--ink-3)}

  /* About */
  /* min() on the track floor, not a bare length: auto-fit still honours the
     minimum when the container is narrower than it, so a bare 400px keeps a
     400px column on a 390px phone and pushes the whole document sideways. */
  .about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));border-bottom:1px solid var(--line)}
  .about img{height:100%;min-height:420px;object-fit:cover}
  .about-copy{padding:64px var(--pad) 64px 56px}
  .about-copy h2{font-size:46px;letter-spacing:-.04em;margin:20px 0 22px}
  .about-copy p{font-size:19px;line-height:1.6;margin-bottom:16px}

  /* Pricing */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .tier{display:flex;flex-direction:column;padding:32px;background:var(--surface);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .tier .btn{margin-top:auto}
  .tier:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(18,24,27,.1);border-color:var(--ink)}
  .tier.pop{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
  .tier.pop:hover{box-shadow:0 22px 44px rgba(18,24,27,.28)}
  .tier-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .tier h3{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .tier.pop h3{color:var(--teal-bright)}
  .badge{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-bright);padding:5px 9px}
  .price{font-weight:700;font-size:42px;line-height:1;letter-spacing:-.04em;margin-bottom:18px}
  .tier>p.who{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:22px}
  .tier.pop p.who{color:var(--on-dark-2)}
  .tier li{padding:11px 0;border-top:1px solid var(--line);font-size:16px}
  .tier.pop li{border-top-color:rgba(238,242,241,.2)}
  .tier ul{margin-bottom:26px;border-bottom:1px solid var(--line)}
  .tier.pop ul{border-bottom-color:rgba(238,242,241,.2)}
  .credit{display:flex;align-items:stretch;gap:20px;margin-top:24px;background:#E4EEEC}
  .credit p{align-self:center;padding:18px 24px 18px 0;font-size:17px;line-height:1.6}
  .credit-badge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 22px;background:#C9E0DA;color:var(--ink);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.03em}
  .credit-badge small{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:5px}
  .linklike{font:inherit;font-weight:600;color:var(--teal);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .linklike:hover{color:var(--ink)}
  .incl summary{display:none}
  .incl ul{margin-bottom:26px}

  /* Modal */
  dialog#credit-modal{width:min(840px,calc(100vw - 48px));max-height:calc(100vh - 64px);padding:0;border:1px solid var(--ink);background:var(--surface);color:var(--ink);overflow:auto}
  dialog#credit-modal::backdrop{background:rgba(18,24,27,.55)}
  .modal-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;background:var(--ink);color:var(--on-dark)}
  .modal-head h2{font-size:24px;letter-spacing:-.03em}
  .modal-close{font:400 26px/1 var(--font);color:var(--on-dark);background:none;border:0;padding:0 4px;cursor:pointer}
  .modal-close:hover{color:var(--teal-bright)}
  .modal-body{padding:32px 36px 36px}
  .modal-body>p{font-size:18px;line-height:1.65;margin-bottom:14px;max-width:64ch}
  .modal-note{color:var(--ink-2);font-size:16px!important}
  .partners{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
  .partner{padding-top:0;margin-top:0;border-top:0}
  .partner h3{font-weight:600;font-size:19px;margin-bottom:8px}
  .partner p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
  .modal-prices{display:flex;flex-wrap:wrap;gap:10px 20px;margin:22px 0;padding:16px 20px;background:#E4EEEC;font-size:15px}
  .modal-prices b{font-weight:700}

  /* FAQ */
  .faq-item{border-top:1px solid var(--line)}
  .faq-item:last-of-type{border-bottom:1px solid var(--ink)}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font);font-weight:600;font-size:19px;line-height:1.35;color:var(--ink);transition:color .18s ease}
  .faq-q:hover{color:var(--teal)}
  .faq-q .ic{flex:none;font-size:22px;font-weight:400;color:var(--ink-3);transition:transform .28s cubic-bezier(.2,.7,.3,1),color .2s ease}
  .faq-q[aria-expanded="true"] .ic{transform:rotate(45deg);color:var(--teal)}
  .faq-a{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1)}
  .faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
  .faq-a>div{min-height:0}
  .faq-a p{padding:0 0 22px;max-width:760px;font-size:16px;line-height:1.65;color:var(--ink-2)}

  /* Contact */
  /* Same min() guard as .about above - a bare 420px floor here was the wider
     of the two, so the contact form set the horizontal scroll on every phone. */
  .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));background:var(--teal-bright);color:var(--teal-deep);border-bottom:1px solid var(--line)}
  .contact-copy{padding:64px 56px 64px var(--pad)}
  .contact-copy h2{font-size:52px;line-height:1;letter-spacing:-.045em;margin-bottom:18px}
  .contact-copy p{font-size:19px;line-height:1.6;margin-bottom:28px}
  form{padding:56px;background:var(--surface);display:flex;flex-direction:column;gap:12px}
  form label{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  form .field{display:flex;flex-direction:column;gap:6px}
  .req{color:var(--teal);text-decoration:none;font-weight:700}
  input:user-invalid,textarea:user-invalid{border-color:#B3261E}
  input,textarea,select{font:400 16px var(--font);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);padding:15px 18px;outline:none;transition:border-color .18s ease,background .18s ease;width:100%}
  select{cursor:pointer}
  input:focus,textarea:focus,select:focus{border-color:var(--teal);background:var(--surface)}
  textarea{resize:vertical;min-height:96px}
  form button{font:600 16px var(--font);color:#fff;background:var(--ink);border:0;padding:17px;cursor:pointer;margin-top:6px;transition:transform .18s ease,box-shadow .18s ease}
  form button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(18,24,27,.22)}
  .trust{font-size:14px;line-height:1.6;color:var(--ink-3)}
  .contact-mail{font-weight:600;font-size:19px;color:var(--teal-deep);border-bottom:2px solid rgba(8,33,31,.35);padding-bottom:2px;transition:border-color .18s ease}
  .contact-mail:hover{color:var(--teal-deep);border-bottom-color:var(--teal-deep)}

  /* Footer */
  footer{padding:52px var(--pad) 28px;background:var(--ink);color:var(--on-dark)}
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(238,242,241,.2)}
  .foot-grid p.brand{font-weight:700;font-size:18px;letter-spacing:-.02em;margin-bottom:12px}
  .foot-grid p.blurb{font-size:16px;line-height:1.6;color:var(--on-dark-3);max-width:260px}
  .foot-col{display:flex;flex-direction:column;gap:10px}
  .foot-col p{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:4px}
  .foot-col a{font-size:15px;color:#C3CDCB;transition:color .18s ease}
  .foot-col a:hover{color:var(--teal-bright)}
  .foot-btn{font:400 15px var(--font);color:#C3CDCB;background:none;border:0;padding:0;text-align:left;cursor:pointer;transition:color .18s ease}
  .foot-btn:hover{color:var(--teal-bright)}
  .foot-base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:20px;font-size:13px;color:var(--on-dark-3)}

  /* Reveal */
  .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}

  /* ── Tablet / mobile: rail becomes a top bar ── */
  @media (max-width:1100px){
    :root{--pad:24px}
    .shell{flex-direction:column}
    .rail{width:100%;padding:0;position:sticky;top:0;z-index:50}
    /* the rail is a sticky bar here, so an in-page link would otherwise land
       with the section's heading parked underneath it */
    .sec,.about,.contact,header.hero{scroll-margin-top:76px}
    /* Site name, burger, Start a project. Nothing else: the nav links move
       into the panel and the address and rating are on the page already. */
    .rail-inner{position:static;flex-direction:row;align-items:center;gap:14px;padding:12px 24px}
    .wordmark{margin-right:auto}
    .burger{display:flex}
    .rail .btn{padding:12px 18px}
    .rail .rating,.rail .rail-contact{display:none}

    /* Drop-down panel. 0fr → 1fr opens it to its natural height without JS
       measuring anything, and still collapses to exactly zero. */
    .rail-nav{position:absolute;left:0;right:0;top:100%;background:var(--ink);
      border-top:1px solid rgba(238,242,241,.14);border-bottom:1px solid rgba(238,242,241,.14);
      display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.3,1)}
    .nav-open .rail-nav{grid-template-rows:1fr}
    /* visibility, not just height: a link in a collapsed panel is still a tab stop */
    .rail-nav-in{min-height:0;overflow:hidden;padding:0 var(--pad);
      visibility:hidden;transition:visibility 0s linear .3s}
    .nav-open .rail-nav-in{visibility:visible;transition-delay:0s}
    .rail-nav a{padding:15px 0;font-size:17px}
    .rail-nav a:hover{padding-left:0;color:var(--teal-bright)}
    .rail-nav a:last-child{border-bottom:0}
    header.hero{padding:44px var(--pad) 36px}
    .hero h1{margin:16px 0 20px}
    .hero-foot{gap:24px}
    .hero-foot p{font-size:18px}
    .sec{padding:44px var(--pad)}
    .split{grid-template-columns:1fr;gap:24px}
    h2{font-size:32px}
    .about-copy{padding:40px var(--pad)}
    .about-copy h2{font-size:34px}
    .about img{min-height:280px}
    .contact-copy{padding:40px var(--pad)}
    .contact-copy h2{font-size:36px}
    form{padding:32px var(--pad)}
    footer{padding:40px var(--pad) 24px}
    .cmp td:first-child{width:120px}
    .tiers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

    /* Deck: the fan has nowhere to sit beside the caption, so the queue
       drops below it as an even row. The script measures the slots either
       way, so the same transition still runs. */
    .wk{gap:20px}
    /* no height cap: the caption sits under the card rather than beside it,
       so there is nothing to fit into one screen alongside it */
    .wk.is-deck{--feat-h:calc((100vw - 48px) / (16/9))}
    .is-deck .wk-item,.is-deck .wk-nav,.is-deck .wk-queue{width:100%}
    .is-deck .wk-body{width:100%;padding-top:18px;display:block}
    .is-deck .wk-body h3{font-size:21px;min-height:0;margin-bottom:10px}
    .is-deck .wk-body p:not(.wk-tag){min-height:0;-webkit-line-clamp:4;margin-bottom:16px}
    .is-deck .wk-queue{position:static}
    .is-deck .wk-queue::before{display:none}
    .wk-queue-in{width:100%;padding-top:22px}
    .wk-slots{display:flex;gap:10px;width:100%;height:auto}
    .wk-slot{position:static;width:auto;height:auto;flex:1;aspect-ratio:16/9}
    .wk-arrow{width:40px;height:40px;margin-top:-20px;font-size:17px}
    .wk-prev{left:10px}
    .wk-next{right:10px}
  }
  @media (max-width:720px){
    .rail-inner{gap:10px;padding:11px 20px}
    .rail .btn{padding:11px 15px;font-size:13px}
    .wordmark{font-size:18px}
    .hero-cta{flex-direction:column}
    .cmp thead{display:none}
    .cmp td{display:block;border-top:0;padding:4px 0}
    .cmp tbody tr{display:block;padding:14px 0;border-top:1px solid var(--line)}
    .cmp tbody tr:first-child td{border-top:0}
    .cmp td:first-child{width:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
    .cmp td:nth-child(2){font-weight:500}
    /* The head row is hidden here, which leaves a before/after table reading
       as two bare numbers. data-col carries the column name down with it. */
    .cmp td[data-col]::before{content:attr(data-col) ": ";font-weight:500;color:var(--ink-3)}
    .cmp tbody tr:last-child td{border-bottom:0}
    .wk,.tiers{grid-template-columns:1fr}
    .is-deck .wk-body h3{font-size:21px}
    .step{grid-template-columns:44px 1fr;gap:8px 16px}
    .step h3{grid-column:2}
    .step p{grid-column:2}
    .step .n{grid-row:span 2}

    /* Pricing: compact rows so all three tiers fit on one screen */
    .tiers{gap:12px}
    .tier{padding:16px 18px}
    .tier:hover{transform:none;box-shadow:none;border-color:var(--line)}
    .tier.pop:hover{border-color:var(--ink)}
    .tier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .tier-top{margin-bottom:0;flex-wrap:wrap}
    .tier-price{flex:none;text-align:right}
    .price{font-size:26px;margin-bottom:0}
    .tier>p.who{font-size:15px;margin:10px 0 0}
    .badge{font-size:9px;padding:4px 7px}
    .incl summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 0;border-top:1px solid var(--line);font-weight:600;font-size:14px;color:var(--teal);cursor:pointer;list-style:none}
    .incl summary::-webkit-details-marker{display:none}
    .incl summary::after{content:"+";font-size:19px;font-weight:400;line-height:1}
    /* U+2212 MINUS SIGN, not a hyphen: it is drawn to the same width and
       height as the bar of the "+" it replaces, where a hyphen is shorter and
       sits lower. Not an en dash either - the no-dashes rule covers those, and
       this is the character that rule would have wanted here anyway. */
    .incl[open] summary::after{content:"−"}
    .tier.pop .incl summary{border-top-color:rgba(238,242,241,.2);color:var(--teal-bright)}
    .incl ul,.tier ul{margin:0 0 4px;border-bottom:0}
    .tier li{font-size:15px;padding:9px 0}
    .tier .btn{margin-top:14px;padding:13px}
    .credit{margin-top:16px;gap:14px}
    .credit p{padding:14px 16px 14px 0;font-size:15px}
    .credit-badge{padding:12px 14px;font-size:20px}
    .credit-badge small{font-size:10px;margin-bottom:4px}
    .modal-body{padding:22px 20px}
    .modal-head{padding:18px 20px}
    .partners{grid-template-columns:1fr;gap:22px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .rv{opacity:1;transform:none}
    /* the duration override above does not clear a delay, and this one would
       leave the outgoing caption on screen for a quarter of a second */
    .is-deck .wk-body{transition-delay:0s}
  }

  /* ══════════════════════════════════════════
     BLOG
  ══════════════════════════════════════════ */

  /* Index */
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);padding:26px;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .post-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(18,24,27,.12);border-color:var(--ink)}
  .post-cat{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
  .post-card h3{font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
  .post-card p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:20px}
  .post-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-size:13px;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line)}
  .post-meta .go{font-weight:600;font-size:14px;color:var(--teal);transition:transform .2s ease}
  .post-card:hover .go{color:var(--ink)}

  /* Featured (latest) post */
  .feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--ink);background:var(--surface);
    transition:box-shadow .25s ease}
  .feature:hover{box-shadow:0 20px 44px rgba(18,24,27,.14)}
  .feature-body{padding:44px}
  .feature-body h2{font-size:36px;line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;color:var(--ink)}
  .feature-body p{font-size:18px;line-height:1.6;color:var(--ink-2);margin-bottom:24px}
  .feature-side{background:var(--ink);color:var(--on-dark);padding:44px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
  .feature-side .post-cat{color:var(--teal-bright)}
  .feature-side dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px;margin:0}
  .feature-side dt{color:var(--on-dark-3)}
  .feature-side dd{margin:0;color:var(--on-dark)}

  /* ── Article layout ──────────────────────
     Everything is flush-left after the rail, like the rest of the site.
     The article column is sized so the widest table (906px) fits without
     scrolling; body text keeps its own --measure inside it. A sticky
     sidebar occupies the space that would otherwise sit empty. */
  .main{--measure:700px;--article:920px;--aside:280px}

  .post-body{display:grid;grid-template-columns:minmax(0,var(--article));padding:0 var(--pad)}
  .post-head>*{max-width:var(--article)}
  .prose>*{max-width:var(--measure)}

  /* The sidebar only earns its place when the article can still hold its
     full width beside it - otherwise it squeezes the tables into scrolling. */
  .post-aside{display:none}
  @media (min-width:1500px){
    .post-body{grid-template-columns:minmax(0,var(--article)) minmax(200px,var(--aside));gap:56px;align-items:start}
    .post-aside{display:flex;position:sticky;top:36px;padding-top:56px;flex-direction:column;gap:28px}
  }
  .toc-h{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
    padding-bottom:12px;border-bottom:1px solid var(--ink)}
  .toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
  .toc li{counter-increment:toc;border-bottom:1px solid var(--line)}
  .toc a{display:flex;gap:10px;padding:11px 0;font-size:14px;line-height:1.45;color:var(--ink-2);transition:color .18s ease}
  .toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-weight:600;font-size:11px;color:var(--ink-3);padding-top:3px}
  .toc a:hover{color:var(--teal)}
  .toc a.here{color:var(--ink);font-weight:600}
  .toc a.here::before{color:var(--teal)}
  .aside-cta{padding:22px;background:var(--ink);color:var(--on-dark)}
  .aside-cta p{font-size:16px;line-height:1.5;color:var(--on-dark-2);margin-bottom:16px}
  .aside-cta .btn{width:100%}

  /* Post page */
  .post-head{padding:72px var(--pad) 44px;border-bottom:1px solid var(--line)}
  .crumb-row{margin-bottom:26px}
  .crumb{display:inline-block;font-weight:600;font-size:13px;color:var(--ink-3);transition:color .18s ease}
  .crumb:hover{color:var(--teal)}
  .post-head h1{font-weight:700;font-size:clamp(34px,4.4vw,60px);line-height:1.03;letter-spacing:-.04em;
    text-wrap:pretty;margin:14px 0 26px}
  .byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px;color:var(--ink-3)}
  .byline b{font-weight:600;color:var(--ink)}
  .byline .sep{color:var(--line)}

  /* Prose */
  /* Container is full width; the measure is capped per child so tables,
     which need the room, can break out to the full content width.
     A length, not ch - ch scales with font-size, which would let headings
     run far wider than the body text they sit above. */
  .prose{padding:52px 0 40px;font-size:18px;line-height:1.7;color:var(--ink-2)}
  .prose>p{margin-bottom:24px}
  .prose>p:first-child{font-size:21px;line-height:1.6;color:var(--ink)}
  .prose h2{font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin:44px 0 16px;scroll-margin-top:24px}
  .prose h3{font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:32px 0 12px}
  .prose ul{margin:0 0 24px;padding:0;list-style:none}
  .prose li{position:relative;padding-left:26px;margin-bottom:10px}
  .prose li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;background:var(--teal)}
  .prose strong{font-weight:600;color:var(--ink)}
  .prose a{border-bottom:1px solid rgba(10,111,104,.35);transition:border-color .18s ease}
  .prose a:hover{border-bottom-color:var(--ink)}
  .prose>.cost-table-wrap{max-width:var(--article);margin:0 0 32px;overflow-x:auto;border:1px solid var(--line)}
  .prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:660px}
  .prose th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
    background:var(--surface-2);padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
  .prose td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
  .prose td:first-child{font-weight:600;color:var(--ink)}
  .prose tbody tr:last-child td{border-bottom:0}
  .prose tbody tr:hover td{background:var(--surface-2)}

  /* End-of-post CTA + related */
  .post-cta{max-width:var(--measure);margin:0 0 8px;
    padding:32px;background:var(--surface-2);border-left:3px solid var(--teal)}
  .post-cta h2{font-size:24px;letter-spacing:-.025em;margin-bottom:10px}
  .post-cta p{font-size:17px;line-height:1.6;color:var(--ink-2);margin-bottom:20px}

  @media (max-width:1100px){
    .posts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
    .feature{grid-template-columns:1fr}
    .feature-body,.feature-side{padding:28px var(--pad)}
    .feature-body h2{font-size:28px}
    .post-head{padding:36px var(--pad) 28px}
    .prose{padding:32px 0 32px;font-size:17px}
    .prose>p:first-child{font-size:19px}
    .prose h2{font-size:25px;margin:34px 0 14px}
    .post-cta{padding:24px;margin-bottom:32px}
  }
  @media (max-width:720px){
    .posts{grid-template-columns:1fr}
  }

  /* ══════════════════════════════════════════
     CASE STUDIES
     Mostly assembled from components that already exist - .prose for the
     body, .cmp for the vitals table, .posts for "other case studies". Only
     the four below are new.
  ══════════════════════════════════════════ */

  /* Client / sector / scope, under the hero */
  .cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
    margin-top:36px;border-top:1px solid var(--ink)}
  .cs-meta div{padding:16px 24px 16px 0;border-bottom:1px solid var(--line)}
  .cs-meta dt{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .cs-meta dd{margin:0;font-size:16px;line-height:1.4;font-weight:500}

  .cs-shot{border:1px solid var(--line);background:var(--surface-2);overflow:hidden;
    box-shadow:0 24px 60px -30px rgba(18,24,27,.35)}
  .cs-shot img{width:100%;display:block}

  /* Sits inside .prose, so it cannot be .pull - that one is a full-width
     section with its own padding and background. */
  .pullquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--teal);
    font-weight:600;font-size:20px;line-height:1.45;letter-spacing:-.015em;color:var(--ink)}

  /* Numbered decisions. .step is the same idea but lives on a dark section. */
  .decs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 40px}
  .dec{padding:22px 0;border-top:1px solid var(--line)}
  .dec .n{display:block;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--teal);margin-bottom:8px}
  .dec h3{font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
  .dec p{font-size:16px;line-height:1.6;color:var(--ink-2)}

  /* Vitals reuse .cmp; only the value colouring is new. */
  .cmp td.val{font-weight:600}
  .cmp td.good{color:var(--teal)}
  .cmp td.poor{color:#B3261E}
  .cmp .note{font-size:13px;color:var(--ink-3)}

  @media (max-width:720px){
    .cs-meta{grid-template-columns:1fr 1fr}
    .cs-meta div{padding-right:16px}
  }

  /* ══════════════════════════════════════════
     LANDING PAGES
     Shared skeleton: hero → factbar → problem →
     what you get → case study → tiers → FAQ → CTA
  ══════════════════════════════════════════ */

  /* Fact bar - the logo strip's sibling, for claims rather than clients */
  .factbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0;padding:22px var(--pad);
    background:var(--ink);color:var(--on-dark);border-bottom:1px solid var(--line)}
  .factbar div{display:flex;flex-direction:column;gap:5px;padding:0 26px;border-right:1px solid rgba(238,242,241,.22)}
  .factbar div:first-child{padding-left:0}
  .factbar div:last-child{border-right:0;padding-right:0}
  .factbar b{font-weight:700;font-size:24px;line-height:1;letter-spacing:-.03em;color:var(--teal-bright)}
  .factbar span{font-size:13px;letter-spacing:.04em;color:var(--on-dark-2)}

  /* Pull quote */
  .pull{padding:56px var(--pad);border-bottom:1px solid var(--line);background:var(--surface-2)}
  .pull blockquote{max-width:900px;font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.3;
    letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
  .pull figcaption{font-size:15px;color:var(--ink-3)}

  /* Case study */
  .case{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .case-img{background:var(--surface-2);overflow:hidden}
  .case-img img{width:100%;height:100%;object-fit:cover;object-position:top center;min-height:420px}
  .case-body{padding:56px var(--pad);display:flex;flex-direction:column;justify-content:center}
  .case-body h2{font-size:34px;margin:14px 0 16px}
  .case-body>p{font-size:18px;line-height:1.6;color:var(--ink-2);margin-bottom:28px}
  .metrics{display:flex;flex-wrap:wrap;gap:0;margin-bottom:28px;border-top:1px solid var(--ink)}
  .metrics div{flex:1;min-width:110px;padding:18px 20px 0 0}
  .metrics b{display:block;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.04em;margin-bottom:6px}
  .metrics span{font-size:14px;color:var(--ink-3)}

  /* Single recommended tier */
  .tier-solo{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);background:var(--surface)}
  .tier-solo-head{padding:40px;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;justify-content:center}
  .tier-solo-head .badge{align-self:flex-start;margin-bottom:16px}
  .tier-solo-head .price{font-size:52px;margin-bottom:8px}
  .tier-solo-head p{font-size:16px;line-height:1.6;color:var(--on-dark-2)}
  .tier-solo-body{padding:40px}
  .tier-solo-body ul{margin-bottom:24px;border-bottom:1px solid var(--line)}
  .tier-solo-body li{padding:12px 0;border-top:1px solid var(--line);font-size:16px}

  @media (max-width:1100px){
    .factbar{gap:12px 0;padding:18px var(--pad)}
    .factbar div{padding:0 18px 0 0;border-right:0}
    .pull{padding:36px var(--pad)}
    .case,.tier-solo{grid-template-columns:1fr}
    .case-img img{min-height:220px}
    .case-body{padding:32px var(--pad)}
    .case-body h2{font-size:27px}
    .tier-solo-head,.tier-solo-body{padding:28px var(--pad)}
    .tier-solo-head .price{font-size:40px}
  }