/* Godwit AI Labs — shared stylesheet for every page on the site.
   Palette is the official logo kit (godwitAI_source/brand-godwit/kit/README.md) and
   Docs/godwit-brand-guidelines.md, which is the authority for anything not here.
   NOTE: --grad and --grad-ui are DIFFERENT ramps, not a colour and a darkened copy.
   --grad ends on --br-300 (3.64:1) and is for the logo, artwork and backdrops.
   --grad-ui stops at --br-500 (6.44:1): use it for anything carrying white TEXT --
   buttons, tiles, .grad-text. Putting --grad under white type fails AA. */
:root{
  /* brand ramp — derived from the kit's cyan, one hue (198.2deg), dark to light.
     Two hard rules, both inherited from the palette itself.
     1. --br-300 is the kit's Cyan #0E8FC7 at 3.64:1 on white, so it NEVER carries text
        or a mark on a light ground. It is the decorative top stop. Section 6 of the
        guidelines states the same thing: cyan is an accent, not a background for
        reading. On light grounds the text-safe brand colour is --br-500 (6.44:1).
     2. The ramp is single-hue, as the two before it were: a two-hue sweep crosses
        through a muddy middle. */
  --br-900:#042432; --br-700:#074764; --br-500:#0A658D;
  --br-300:#0E8FC7;  /* the kit's Cyan — decorative top stop, never under white text */
  --grad:linear-gradient(100deg,var(--br-900) 0%,var(--br-700) 34%,var(--br-500) 68%,var(--br-300) 100%);
  /* --grad's top stop cannot sit under white text. --grad-ui stops at br-500:
     16.11 / 10.03 / 6.44 on white, all clear of AA.
     Buttons, tiles and .grad-text use this one; the logo and artwork use --grad. */
  --grad-ui:linear-gradient(100deg,#042432 0%,#074764 45%,#0A658D 100%);
  /* Links and small type. Same value as br-500 rather than one step darker: br-500 is
     already 6.44:1 here, where the outgoing lime br-500 was 4.69 and needed a separate
     darker accent to clear 13px type. */
  --accent:#0A658D; --accent-deep:#0A658D;
  /* On-dark accent — the kit's Cyan light, 7.81:1 on --dark, which is the role section 6
     assigns it. Never move it onto a light ground: it is 2.29:1 on white. */
  --accent-on-dark:#39B4E8;

  /* Neutrals sit on a cool axis derived from the kit's Ink, so they belong to the brand
     ink rather than fighting it. Luminance is matched to the outgoing ramp within 0.02
     of a contrast ratio, so nothing that passed AA stops passing — with one deliberate
     improvement: --faint is now the kit's Grey at 5.64 on --tint-2, where the outgoing
     value was 4.81 and the copper one before it 4.19. Both were under AA, and both
     carried the 13px small print. That bug is fixed rather than reproduced. */
  --ink:#101418; --ink-2:#3E4E5D; --muted:#5B6167; --faint:#5B6167;
  /* Section grounds. --tint at 1.056:1 on white is below the threshold anyone
     perceives, which is why 36 "shaded" bands read as white. These are mixes of the
     kit's Cyan toward white, so no new hue enters the palette, and they are checked
     against brand Grey (#5B6167, the 13px small print): 5.71 and 5.37, both over AA.
       --wash  1.097:1 on white -- supporting sections
       --panel 1.167:1 on white -- a block of value */
  --wash:#ECF6FB; --panel:#E0F0F8;
  --bg:#FFFFFF; --tint:#F7F9FA; --tint-2:#F1F3F6;
  --line:#E0E5EA; --line-soft:#EEF0F3;
  --dark:#101418;
  /* Scrim over the hero field. The ellipse is 1280px wide — the same as .wrap —
     so it tracks the content column at any viewport: densest where the type is,
     thinning into the margins where the field can stay vivid. */
  --scrim:radial-gradient(ellipse 1280px 116% at 50% 46%,
          rgba(16,20,24,.90) 0%, rgba(16,20,24,.66) 58%, rgba(16,20,24,.28) 100%);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Poppins","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shadow:0 1px 2px rgba(16,20,24,.04), 0 10px 30px -18px rgba(16,20,24,.28);
  --shadow-lg:0 2px 4px rgba(16,20,24,.05), 0 26px 60px -28px rgba(16,20,24,.34);
  /* ON-DARK TEXT. The dark band's greys were raw hexes scattered through the sheet --
     #8398AC twelve times, plus three one-off neighbours (#7E93A6, #6F8497, #93A3B0) that
     the hero panel introduced and nothing else used. Four values doing one job is what
     makes a palette read as improvised. Two levels: body detail, and quiet labels. */
  --on-dark:#8398AC;
  --on-dark-dim:#7E93A6;
  /* The only deep shadow on the site, for the one element that floats above the dark
     band. Declared rather than inlined so a second panel cannot invent a second one. */
  --shadow-panel:0 34px 80px -34px rgba(0,0,0,.80), inset 0 1px 0 rgba(255,255,255,.10);
  /* The three interactive elevations. These are roles, not decoration: a primary button
     at rest, the same button lifted, and the ring a focused field draws. Naming them is
     what stops the fourth one being invented slightly differently. */
  --shadow-btn:0 10px 26px -14px rgba(10,101,141,.85);
  --shadow-btn-hover:0 16px 32px -14px rgba(10,101,141,.9);
  --focus-ring:0 0 0 3px rgba(10,101,141,.16);

  /* ---- ON THE DARK BAND ----
     Four levels of text, lightest to quietest. Ten hand-typed greys did this job
     before, which is why the dark sections never quite matched each other. */
  --on-dark-soft:#CAD2DB;      /* body copy on the feature band */
  --grey-on-dark:#BBBFC2;      /* secondary copy */
  --grey-on-dark-dim:#9EA2A6;  /* captions and quiet labels */
  /* --on-dark and --on-dark-dim are declared above; together these are the set. */

  /* ---- LINES AND ACCENTS ---- */
  --line-strong:#D4DCE3;       /* the hover border; --line is the resting one */
  --accent-pale:#AFDEEF;       /* pale accent for strokes and fills on dark */

  /* ---- ERROR ----
     A real role that had no tokens at all, so its three values read as strays. */
  --danger:#A81B2E;
  --danger-line:#F8CCD3;
  --danger-wash:#FDF2F4;

  /* The hero's gradient TEXT ramp -- a third ramp beside --grad and --grad-ui, not a
     variant of either. Named here so its three stops are one decision in one place. */
  --grad-text-dark:linear-gradient(100deg,#AFDEEF 0%,#7ACBEC 44%,#2E8AB2 100%);
  --r:16px;
  --hdr:80px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
     font-size:15.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.022em; line-height:1.14; margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:6px}
/* anchor targets must clear the sticky header */
[id]{scroll-margin-top:calc(var(--hdr) + 18px)}
.skip{position:absolute; left:-9999px; top:0; background:#fff; padding:12px 18px; z-index:100;
      border:1px solid var(--line); border-radius:0 0 10px 0; font-weight:600}
.skip:focus{left:0}

.wrap{max-width:1280px; margin:0 auto; padding:0 24px; width:100%}
.narrow{max-width:760px}
/* .band is the section standard. .sec is the same rhythm without a rail —
   used on pages that have no section numbering (privacy, thank-you). */
.sec{padding:70px 0}
.sec.tight{padding:52px 0}
.grad-text{background:var(--grad-ui); -webkit-background-clip:text; background-clip:text;
           -webkit-text-fill-color:transparent; color:var(--accent-deep)}

.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600;
         letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--accent)}

h2.sec-title{font-size:clamp(27px,3.4vw,38px)}
.sec-lede{margin-top:14px; color:var(--muted); font-size:clamp(15.5px,1.5vw,17px); max-width:62ch; line-height:1.7}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
            backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
            border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
header.site.stuck{border-bottom-color:var(--line); box-shadow:var(--shadow)}
.bar{display:flex; align-items:center; gap:18px; height:var(--hdr)}
.brand{display:flex; align-items:center; flex:none; text-decoration:none}
.brand img{height:40px; width:auto}   /* v1 lockup: below ~40px the network mesh stops resolving */
nav.main{margin-left:auto; display:flex; align-items:center; gap:24px}
/* :not(.btn) matters — `nav.main a` outweighs `.btn-primary`, so without it the
   header CTA's label inherits the nav link colour and goes near-invisible. */
nav.main a:not(.btn){font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
           white-space:nowrap; transition:color .16s}
nav.main a:not(.btn):hover,nav.main a:not(.btn)[aria-current="page"]{color:var(--accent-deep)}
nav.main a:not(.btn)[aria-current="page"]{font-weight:600}
.hdr-tel{font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans);
     font-size:14.5px; font-weight:600; padding:11px 20px; border-radius:999px; text-decoration:none;
     border:1px solid transparent; cursor:pointer; white-space:nowrap;
     transition:transform .16s, box-shadow .16s, background .16s, color .16s}
.btn-primary{background:var(--grad-ui); color:#fff; box-shadow:var(--shadow-btn)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-btn-hover)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong); transform:translateY(-1px)}
.btn-lg{font-size:15.5px; padding:14px 26px}

/* Compact CTA that lives in the bar itself, so a phone visitor never has to open
   the menu to find a way to get in touch. Hidden once the full nav fits. */
/* min-height 44: the measured height was 42-43px. Clears WCAG 2.5.8 AA (24x24) either
   way, but 44x44 is the platform guidance and this is the header's only CTA. */
.bar-cta{display:none; margin-left:auto; font-size:13.5px; padding:9px 16px; min-height:44px}

/* ── the Services group ──────────────────────────────────────────────────────
   The nav used to name every service, so it grew by one item per practice and the
   company read as however many it had that week. Services now collapse into one
   group, which is why <details> is doing the work: it opens on click and on Enter
   with no JavaScript, it is keyboard-operable as shipped, and inside the mobile
   panel it is already the accordion that panel wants. site.js only adds the
   niceties browsers do not give for free — close on outside click, close on Escape.
   No :hover-only opening: that strands keyboard and touch users. */
.navgrp{position:relative}
.navgrp summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
                gap:6px; font-size:14.5px; font-weight:500; color:var(--ink-2);
                white-space:nowrap; transition:color .16s}
.navgrp summary::-webkit-details-marker{display:none}
.navgrp summary::after{content:""; width:6px; height:6px; border-right:1.6px solid currentColor;
                border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);
                transition:transform .18s}
.navgrp[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.navgrp summary:hover,.navgrp[open] summary{color:var(--accent-deep)}
/* the open panel is an overlay, so a service page must NOT open it on load; the
   summary carries the you-are-here marker instead, same treatment as a top-level link */
.navgrp.is-current summary{color:var(--accent-deep); font-weight:600}
.navgrp summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
/* ANCHORED RIGHT, not left. With left:-18px the menu grew rightward from "Services",
   which sits near the right end of a right-aligned nav, so at 1024px and 1280px its
   right edge landed 26px past the viewport and the last items were clipped off-screen.
   Anchoring to the right makes it grow inward instead, so no viewport width can push it
   out. Found by audit_responsive; pre-dates the header change, verified by A/B. */
.navmenu{position:absolute; top:calc(100% + 14px); right:-18px; left:auto; min-width:216px;
         background:#fff; border:1px solid var(--line); border-radius:14px;
         padding:8px; box-shadow:var(--shadow-lg); display:grid; gap:2px; z-index:60}
.navmenu::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
nav.main .navmenu a:not(.btn){padding:9px 12px; border-radius:9px; font-size:14.5px;
         white-space:nowrap; transition:background .14s, color .14s}
nav.main .navmenu a:not(.btn):hover{background:var(--tint); color:var(--accent-deep)}
.navtoggle{display:none; background:#fff; border:1px solid var(--line); border-radius:9px;
           /* 44x44, was 40x38. This is the ONLY navigation control below 900px, so it
              is the one target that most needs to be thumb-sized. */
           width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; flex:none}
.navtoggle span{display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; position:relative}
.navtoggle span::before,.navtoggle span::after{content:""; position:absolute; left:0; width:17px; height:1.8px;
           background:var(--ink); border-radius:2px}
.navtoggle span::before{top:-5.5px} .navtoggle span::after{top:5.5px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:70px 0 0}
.hero::before{content:""; position:absolute; inset:-160px 0 auto 0; height:620px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 380px at 12% 22%, rgba(4,36,50,.15), transparent 65%),
    radial-gradient(620px 400px at 82% 8%, rgba(10,101,141,.12), transparent 62%),
    radial-gradient(520px 340px at 52% 62%, rgba(10,101,141,.11), transparent 66%);}
.hero::after{content:""; position:absolute; inset:0 0 auto 0; height:640px; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(4,36,50,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(4,36,50,.06) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(720px 420px at 50% 18%, #000, transparent 78%);
  mask-image:radial-gradient(720px 420px at 50% 18%, #000, transparent 78%);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}
.hero.solo{padding-bottom:0}
.tagpill{display:inline-flex; align-items:flex-start; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink-2);
         background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px 7px 11px;
         box-shadow:var(--shadow)}
/* flex-start + this offset keeps the dot on the FIRST line. With align-items:center the
   dot centred against the whole block, so once the label wrapped on a narrow phone it
   floated between the two lines. 6px = (15px line box - 7px dot) / 2 + 1.5px of the
   pill's own top padding difference; measured, not assumed -- the first attempt used a
   20.6px line box calculated from font-size x body line-height and landed 0.8px low.
   The real line box is 15.0px, read off Range.getClientRects over the text node ALONE:
   ranging over the whole pill counts the dot's own rect as a line. */
.tagpill .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-deep);
              flex:none; margin-top:6px}
h1{font-size:clamp(32px,3.8vw,49px); margin:22px 0 0; letter-spacing:-.03em; line-height:1.08}
.hero .lede{margin-top:20px; font-size:clamp(16px,1.7vw,18.5px); color:var(--ink-2); max-width:54ch; line-height:1.65}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
.hero-note{margin-top:15px; font-size:13.5px; color:var(--faint)}

/* findings card */
.findings{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
          padding:22px 24px 18px; box-shadow:var(--shadow-lg)}
.fx-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      padding-bottom:13px; border-bottom:1px solid var(--line)}
.fx-h b{display:block; font-family:var(--display); font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.fx-sub{display:block; margin-top:3px; font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.fx-h .dots{display:flex; gap:5px; margin-top:5px}
.fx-h .dots i{width:6px; height:6px; border-radius:50%; display:block; background:var(--line-strong)}
/* a row reads like a line off an audit: what it is, why, what it costs */
.find{display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:16px;
      padding:13px 0; border-bottom:1px dashed var(--line-soft)}
.find:last-of-type{border-bottom:0}
.find b{font-family:var(--display); font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.find span{grid-column:1; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.5}
.find em{grid-row:1 / span 2; grid-column:2; font-style:normal; font-family:var(--display);
         font-size:15.5px; font-weight:600; color:var(--ink); text-align:right; white-space:nowrap;
         letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.find em i{display:block; font-style:normal; font-family:var(--sans); font-size:10.5px;
           font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:3px}
.fx-f{margin-top:4px; padding-top:13px; border-top:1px solid var(--line);
      font-size:12.5px; color:var(--ink-2); line-height:1.55}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
      transition:transform .18s, box-shadow .18s, border-color .18s; min-width:0}
a.card{text-decoration:none; display:block}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card h3{font-size:17.5px; letter-spacing:-.02em}
.card p{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.65}
.card .more{display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--accent-deep)}
.ico{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
     margin-bottom:15px; background:#F7F9FA; border:1px solid rgba(10,101,141,.16)}
.ico svg{width:20px; height:20px; stroke:var(--accent-deep); fill:none; stroke-width:1.7;
         stroke-linecap:round; stroke-linejoin:round}
ul.plain{list-style:none; margin:15px 0 0; padding:0; display:grid; gap:7px}
ul.plain li{position:relative; padding-left:16px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
ul.plain li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%;
                    background:var(--accent); opacity:.6}

/* ---------- money / layered ---------- */
.money{background:var(--tint); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.lay{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px;
     display:flex; flex-direction:column}
.lay .badge{align-self:flex-start; font-size:11.5px; font-weight:600; color:#fff; background:var(--accent-deep);
            border-radius:999px; padding:4px 12px; letter-spacing:.02em}
.lay h3{margin-top:14px; font-size:16.5px}
.lay p{margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.65}
.warn{margin-top:20px; display:flex; gap:15px; align-items:flex-start; background:#fff;
      border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:19px 22px}
.warn svg{width:20px; height:20px; flex:none; margin-top:3px; stroke:var(--accent); fill:none; stroke-width:1.8;
          stroke-linecap:round; stroke-linejoin:round}
.warn p{font-size:14.5px; color:var(--ink-2); line-height:1.62}
.warn b{font-weight:600; color:var(--ink)}

/* ---------- dark band ---------- */
.spot{background-color:var(--dark);
      background-image:
        var(--scrim),
        var(--hero-img, url(hero-field-svc.svg));
      background-repeat:no-repeat, no-repeat;
      background-position:center center, center top;
      background-size:auto, cover;
      color:#F1F3F6; padding:78px 0; position:relative; overflow:hidden}
.spot::before{content:""; position:absolute; inset:auto -10% -60% -10%; height:420px;
  background:radial-gradient(600px 300px at 20% 40%, rgba(4,36,50,.26), transparent 62%),
             radial-gradient(560px 300px at 80% 30%, rgba(10,101,141,.24), transparent 60%);}
.spot>*{position:relative}
.spot .eyebrow{color:var(--grey-on-dark)}
.spot h2{font-size:clamp(25px,3.1vw,34px); color:#fff}
.spot .sec-lede{color:var(--grey-on-dark); max-width:none}
/* heading and lede share the band's width rather than the lede trailing off
   under a full-width headline */
.spot-head{display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:end}
.spot-head h2{margin:0}
@media (max-width:1000px){ .spot-head{grid-template-columns:1fr; gap:18px; align-items:start} }
.spot-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
.spot-col{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); border-radius:var(--r); padding:24px}
.spot-col h3{font-size:15.5px; color:#fff; display:flex; align-items:center; gap:10px}
.spot-col h3 svg{width:19px; height:19px; stroke:var(--accent-pale); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
ul.check{list-style:none; margin:15px 0 0; padding:0; display:grid; gap:10px}
ul.check li{position:relative; padding-left:25px; font-size:14.5px; color:var(--on-dark-soft); line-height:1.58}
ul.check li::before{content:""; position:absolute; left:0; top:7px; width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28)}
ul.check li::after{content:""; position:absolute; left:4px; top:10.5px; width:4px; height:2px; border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff; transform:rotate(-45deg)}
.spot-note{margin-top:20px; background:rgba(175,222,239,.10); border:1px solid rgba(175,222,239,.24);
           border-radius:12px; padding:17px 20px; font-size:14.5px; color:var(--on-dark-soft); line-height:1.62}
.spot-note b{color:#fff; font-weight:600}

/* ---------- rules ---------- */
.rules{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px}
.rule{border-top:2px solid var(--line); padding-top:20px}
.rule h3{font-size:17.5px}
.rule p{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.65}

/* ---------- offers ---------- */
.offer{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; display:flex;
       flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s}
.offer:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.offer .dur{display:inline-flex; align-self:flex-start; font-size:11.5px; font-weight:600; letter-spacing:.05em;
            text-transform:uppercase; color:#fff; background:var(--accent-deep); border-radius:999px; padding:4px 11px}
.offer h3{margin-top:15px; font-size:17.5px}
.offer p{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.65; flex:1}
.offer .price{margin-top:16px; font-family:var(--display); font-weight:600; font-size:15.5px; color:var(--ink)}
.offer .price em{font-style:normal; font-family:var(--sans); font-weight:400; font-size:12.5px; color:var(--faint)}
.roi{margin-top:13px; font-size:12.5px; line-height:1.55; color:var(--ink-2);
     background:var(--tint); border-radius:9px; padding:9px 11px}
.roi b{font-weight:600}
.offer .out{margin-top:13px; padding-top:13px; border-top:1px dashed var(--line);
            font-size:13.5px; font-weight:600; color:var(--ink-2)}
.offer .out span{color:var(--faint); font-weight:500; display:block; font-size:11.5px; letter-spacing:.08em;
                 text-transform:uppercase; margin-bottom:3px}
.after{margin-top:20px; font-size:14.5px; color:var(--muted); line-height:1.65}

/* ---------- data-request card ----------
   Was .dpdp, a two-column "date + content" strip. This box has no date cell, so on any
   screen wider than 720px the browser dealt its heading, paragraph and form into the two
   columns and the instructions rendered in a ten-character ribbon. The mobile rule
   collapsed the grid to one column, which is why every check on a phone looked fine. */
.dsr{background:#fff; border:1px solid var(--line); border-radius:20px;
     padding:34px 36px; box-shadow:var(--shadow)}
.dsr .date{font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1;
            font-size:clamp(34px,4.4vw,50px); white-space:nowrap}
.dsr .date small{display:block; font-family:var(--sans); font-size:11.5px; font-weight:600;
                  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:10px;
                  -webkit-text-fill-color:initial; background:none}
.dsr p{font-size:14.5px; color:var(--muted); line-height:1.68}
.dsr h3{font-size:19px}
.dsr .three{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:20px 0}
.dsr .three div{border-top:2px solid var(--line); padding-top:12px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.dsr .three b{display:block; font-family:var(--display); font-weight:600; font-size:14.5px; margin-bottom:4px}

/* ---------- trust bar ---------- */
.trust{background:var(--wash); border-top:1px solid var(--line-soft);
        border-bottom:1px solid var(--line-soft)}
.trust .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-top:0; padding-bottom:44px}
.trust h3{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600}
.trust p{margin-top:10px; font-family:var(--display); font-weight:600; font-size:16.5px;
         letter-spacing:-.02em; line-height:1.35; color:var(--ink)}
.trust a{color:var(--accent); font-weight:600; text-decoration:none}
.trust .sm{font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--muted);
           margin-top:9px; line-height:1.6; letter-spacing:0}

/* ---------- contact ---------- */
.contact{background:var(--tint-2); border-top:1px solid var(--line-soft)}
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start}
.contact h2{font-size:clamp(26px,3.2vw,36px)}
.next{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px}
.next li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.6}
.next li svg{width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--accent-deep); fill:none; stroke-width:2;
             stroke-linecap:round; stroke-linejoin:round}
.orcall{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.orcall b{display:block; font-family:var(--display); font-size:14.5px; font-weight:600}
.orcall a{font-size:16.5px; font-weight:600; color:var(--ink); text-decoration:none; display:inline-block; margin-top:6px}
.orcall a:hover{color:var(--accent-deep)}

form.cf{background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--shadow-lg)}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px}
/* Inputs sit in a 690px column split two ways, so they are narrower than they look in
   isolation — at 11px padding and a 1px hairline they read as thin grey boxes. A little
   more height and a slightly deeper resting border is what makes a field look considered
   rather than default. */
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  transition:border-color .16s, box-shadow .16s}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-on-dark-dim)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field textarea{min-height:104px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--focus-ring)}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6579' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px}
.consent input{width:17px; height:17px; flex:none; margin-top:2px; accent-color:var(--accent-deep)}
.consent label{font-size:12.5px; color:var(--muted); line-height:1.55; font-weight:400}
.consent a{color:var(--accent-deep); font-weight:600}
form.cf .btn{width:100%}
.cf-note{margin-top:14px; font-size:12.5px; color:var(--faint); line-height:1.6}
.cf-msg{margin-top:14px; font-size:13.5px; border-radius:12px; padding:12px 14px; display:none; line-height:1.6}
.cf-msg.err{display:block; background:var(--danger-wash); border:1px solid var(--danger-line); color:var(--danger)}
.cf-done{display:none; text-align:center; padding:20px 6px}
.cf-done .tick{width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--grad-ui);
               display:flex; align-items:center; justify-content:center}
.cf-done .tick svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.cf-done h3{font-size:20px}
.cf-done p{margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.66}
form.cf.sent .cf-body{display:none}
form.cf.sent .cf-done{display:block}

/* ---------- prose (service + legal pages) ---------- */
.prose h2{font-size:clamp(23px,2.6vw,29px); margin-top:44px}
.prose h3{font-size:19px; margin-top:30px}
.prose p{margin-top:14px; font-size:16.5px; color:var(--ink-2); line-height:1.75}
/* the whole prose block is the measure (~70 characters) and sits centred, so the
   page doesn't read as a left-hugging column with dead space beside it */
.prose{max-width:660px; margin-left:auto; margin-right:auto}
.prose ul{margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:9px}
.prose ul li{position:relative; padding-left:20px; font-size:15.5px; color:var(--ink-2); line-height:1.7}
.prose ul li::before{content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%;
                     background:var(--accent); opacity:.65}
.prose>:first-child{margin-top:0}
.crumbs{font-size:13.5px; color:var(--faint); margin-bottom:14px}
.crumbs a{text-decoration:none; color:var(--muted)} .crumbs a:hover{color:var(--accent-deep)}
.faq{margin-top:16px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:17px 0; font-family:var(--display); font-weight:600; font-size:16.5px;
             list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:20px; color:var(--accent-deep); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px; font-size:15.5px; color:var(--muted); line-height:1.72}
.cta-band{margin-top:48px; background:var(--tint); border:1px solid var(--line); border-radius:20px;
          padding:30px 32px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.cta-band b{display:block; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em}
.cta-band p{margin-top:6px; font-size:14.5px; color:var(--muted); max-width:52ch; line-height:1.6}
.pricetag{display:inline-flex; align-items:baseline; gap:8px; margin-top:18px; font-family:var(--display);
          font-weight:600; font-size:20px; color:var(--ink)}
.pricetag em{font-style:normal; font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--faint)}

/* ---------- footer ---------- */
/* The footer is DARK. On white it was a hairline and three link columns — visually the
   page just stopped rather than closed. Dark gives the page a base, and it reuses the
   ground the heroes already establish, so the site opens and closes on the same colour.
   The logo must swap to `logo-dark.svg` (the reversed, white artwork) in the markup —
   `logo.svg` carries a #101418 wordmark that disappears here. */
footer.site{background:var(--dark); border-top:0; padding:60px 0 32px; color:var(--grey-on-dark);
            position:relative; overflow:hidden}
/* the same two radials the heroes paint, so the close is lit like the open */
footer.site::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:420px;
  pointer-events:none;
  background:radial-gradient(680px 360px at 20% 20%, rgba(4,36,50,.16), transparent 62%),
             radial-gradient(620px 340px at 84% 0%, rgba(10,101,141,.14), transparent 60%);}
footer.site>*{position:relative}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.foot img{height:44px; width:auto}
.foot .tagline{margin-top:14px; font-size:13.5px; color:var(--grey-on-dark-dim); max-width:36ch; line-height:1.6}
.foot h4{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); font-weight:600}
.foot ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px}
.foot ul a{font-size:13.5px; color:var(--on-dark-soft); text-decoration:none; transition:color .15s}
.foot ul a:hover{color:#fff}
.foot address{font-style:normal; margin-top:14px; font-size:13.5px; color:var(--on-dark-soft); line-height:1.7}
.foot address a{text-decoration:none; font-weight:600; color:#fff}
.foot-bottom{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10); display:flex;
             flex-wrap:wrap; gap:8px 20px; align-items:center; font-size:12.5px; color:var(--grey-on-dark-dim)}
.foot-bottom a{color:var(--grey-on-dark-dim); text-decoration:none; transition:color .15s}
.foot-bottom a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .g3,.rules{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.contact-grid{grid-template-columns:1fr; gap:38px}
  .spot{padding:60px 0}
  .dsr,.dsr .three{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr; gap:22px}
  .foot{grid-template-columns:1fr 1fr}
}
/* The header collapses earlier than the rest of the layout: five links plus an
   email plus a button do not fit between ~760px and 1000px, and used to push the
   CTA off the right edge (measured: 931px of content in an 834px viewport). */
@media (max-width:1080px){ .hdr-tel{display:none} }
@media (max-width:900px){
  nav.main{position:fixed; inset:var(--hdr) 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
           flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px; display:none;
           box-shadow:var(--shadow-lg)}
  nav.main.open{display:flex}
  nav.main a:not(.btn){padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:15.5px}
  nav.main .btn{margin-top:14px}
  /* the group flattens: no overlay, no shadow, just an indented list under a heading */
  .navgrp{position:static}
  .navgrp summary{padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:15.5px;
                  justify-content:space-between; width:100%}
  .navmenu{position:static; min-width:0; border:0; border-radius:0; padding:0 0 0 14px;
           box-shadow:none; background:none; gap:0}
  .navmenu::before{display:none}
  nav.main .navmenu a:not(.btn){padding:11px 0; border-radius:0; font-size:14.5px;
           color:var(--muted); border-bottom:1px solid var(--line-soft)}
  nav.main .navmenu a:not(.btn):last-child{border-bottom:0}
  .hdr-tel{display:block}          /* wanted inside the open menu, just not in the bar */
  .navtoggle{display:flex; margin-left:12px}
  .bar-cta{display:inline-flex}
  nav.main .btn-primary{display:none}   /* the bar one replaces it */
}
/* Below 480px the header carries the logo, the CTA and the menu button. It used to drop
   the CTA here on the grounds that the 192px lockup plus the pill did not fit a 390px
   phone -- true of those sizes, but the conclusion was wrong: it left every phone with no
   way to make contact that did not start with discovering the hamburger. The parts are
   resized to fit instead, measured at 360px, the narrowest width worth supporting. */
@media (max-width:479px){
  /* The CTA STAYS. It used to be hidden here, which left every phone -- 360, 375, 390,
     412, 428 are all below this breakpoint -- with a sticky header carrying a logo and a
     hamburger and no way to make contact without first discovering the menu. It is made
     to fit instead: the lockup drops to 36px (the guidelines' floor for the full
     horizontal lockup is 35px, so this is still legal) and the button tightens. */
  /* header.site, not a bare class: `.btn{white-space:normal}` further down lets long
     hero button labels wrap on a phone, and being equal specificity and later in the
     file it was overriding a plain `.bar-cta{white-space:nowrap}`. This one label must
     not wrap -- wrapped, the pill grows to 65px tall and unbalances the bar. */
  header.site .bar-cta{display:inline-flex; font-size:12.5px; padding:8px 12px;
                       letter-spacing:0; white-space:nowrap; flex:none}
  .brand img{height:36px}
  .bar{gap:10px}
  /* Measured, not guessed. At 360px the bar offers 292px to its children and they need
     303: lockup 173 + button 86 + toggle 44 + two 10px gaps. The lockup cannot give the
     11px back -- section 4 of the guidelines floors the full horizontal lockup at 35px
     and it is already at 36. So the 24px gutter does, for the header bar only; the rest
     of the page keeps its measure. */
  header.site .wrap.bar{padding-left:16px; padding-right:16px}
  /* The CTA carries margin-left:auto, which is what pushed the whole right-hand group
     to the edge. Hiding it removes that push -- a display:none flex item contributes no
     margin -- so the row packed left and the menu button sat straight after the logo,
     84px short of the right edge at 390px. The toggle takes the job over. */
  .navtoggle{margin-left:auto}
}
@media (max-width:400px){
  .bar-cta{font-size:13.5px; padding:9px 13px}
  .bar{gap:10px}
}
/* Below 360px the CTA goes back in the menu. The row needs 303px -- lockup 173, pill 86,
   toggle 44 -- and a 320px viewport offers 268 after gutters and gaps, which overflowed by
   19px and gave the page a horizontal scrollbar. The alternatives were to drop the lockup
   to the mark alone or below its 35px floor, and neither is worth it for this slice:
   320px is the 2016 iPhone SE, while every current phone is 360 or wider and keeps the
   button. Deliberate, and narrow. */
@media (max-width:359px){
  header.site .bar-cta{display:none}
  .navtoggle{margin-left:auto}
}
@media (max-width:760px){
  .sec{padding:50px 0} .sec.tight{padding:42px 0}
  .hero{padding:44px 0 0}
  .g3,.g2,.spot-grid,.two,.rules,.foot{grid-template-columns:1fr}
  .spot{padding:48px 0}
  .dsr{padding:26px 22px}
  form.cf{padding:24px 20px}
  .cta-band{padding:24px 22px}
  .d-br{display:none}
}
/* 360px is one of the commonest Android widths in India. Long button labels
   ("DPDP gap check — 2 weeks, fixed fee →") are nowrap by default and pushed the
   page 10px wider than the viewport; let them wrap down here instead. */
@media (max-width:420px){
  .btn{white-space:normal; text-align:center}
  .dsr .date{font-size:32px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }
@media print{
  header.site,nav.main,.navtoggle,form.cf,.hero::before,.hero::after{display:none}
  body{font-size:12pt} .spot{background:#fff; color:#000; border:1px solid var(--grey-on-dark-dim)}
}

/* ── the flat accent disappears on the dark band ─────────────────────────── */
.spot .eyebrow::before{background:var(--accent-pale)}

/* ── service pages ───────────────────────────────────────────────────────── */
.svc-hero{display:grid; grid-template-columns:1.12fr .88fr; gap:44px; align-items:start}
.svc-hero h1{font-size:clamp(30px,3.4vw,44px); margin-top:14px}
.svc-hero .lede{margin-top:18px; font-size:17.5px; color:var(--ink-2); line-height:1.65; max-width:52ch}

/* the card that answers "what does this cost and what do I get" without scrolling */
.summary{background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 26px 24px;
         box-shadow:var(--shadow-lg); position:sticky; top:calc(var(--hdr) + 20px)}
.summary .amt{font-family:var(--display); font-weight:700; font-size:29px; letter-spacing:-.03em;
              line-height:1.1; font-variant-numeric:tabular-nums}
.summary .amt small{display:block; font-family:var(--sans); font-size:12.5px; font-weight:500;
                    color:var(--faint); letter-spacing:0; margin-top:6px}
.summary dl{margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft);
            display:grid; grid-template-columns:auto 1fr; gap:11px 16px; font-size:13.5px}
.summary dt{color:var(--faint); white-space:nowrap}
.summary dd{margin:0; color:var(--ink-2); font-weight:500; text-align:right}
.summary .btn{width:100%; margin-top:22px}
.summary .fine{margin-top:12px; font-size:12.5px; color:var(--faint); line-height:1.55; text-align:center}

/* figures pulled out of the prose so the page has something to look at */
.figs{margin:30px 0 6px; border-top:1px solid var(--line)}
.figs div{display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:baseline;
          padding:16px 0; border-bottom:1px solid var(--line-soft)}
.figs b{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.03em;
        color:var(--accent-deep); font-variant-numeric:tabular-nums}
.figs span{font-size:14.5px; color:var(--muted); line-height:1.6}

/* "what you get" as things, not as a bullet list */
.gets{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px}
.get{border:1px solid var(--line); border-radius:14px; padding:20px 20px; background:#fff}
.get b{display:block; font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.01em}
.get p{margin-top:7px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:none}

.pull{margin:32px 0; padding:22px 26px; border-left:3px solid var(--accent-deep);
      background:var(--tint); border-radius:0 14px 14px 0}
.pull p{margin:0; font-family:var(--display); font-weight:500; font-size:17.5px; line-height:1.55;
        color:var(--ink); letter-spacing:-.015em; max-width:none}

.svc-body{max-width:1060px}
/* headings that sit outside .prose lost their rhythm when the cards broke out */
.svc-body>h2{margin-top:54px; font-size:clamp(23px,2.6vw,29px)}
.svc-body>.prose+h2{margin-top:48px}
.related{margin-top:52px; padding-top:34px; border-top:1px solid var(--line)}
.related h2{font-size:19px; margin-bottom:18px}
.relgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.relgrid a{display:block; text-decoration:none; border:1px solid var(--line); border-radius:14px;
           padding:18px 18px; transition:border-color .16s, transform .16s}
.relgrid a:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.relgrid b{display:block; font-family:var(--display); font-weight:600; font-size:14.5px}
.relgrid span{display:block; margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.55}

@media (max-width:960px){
  .svc-hero{grid-template-columns:1fr; gap:32px}
  .summary{position:static}
  .relgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .figs div{grid-template-columns:1fr; gap:4px}
  .gets,.relgrid{grid-template-columns:1fr}
  .pull{padding:18px 20px}
  .pull p{font-size:16.5px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL SYSTEM
   The page sits on a rail: a narrow left column carries the section number and
   label, the wide right column carries the content. Sections are divided by
   hairlines rather than by empty space, so the full width gets used and the
   page reads as a document rather than a stack of floating cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* type — more contrast at the top of the scale */
.display{font-family:var(--display); font-weight:600; letter-spacing:-.035em; line-height:1.02}
.t-xl{font-size:clamp(38px,5.4vw,70px)}
.t-lg{font-size:clamp(29px,3.6vw,48px)}
.lede-lg{font-size:clamp(17px,1.5vw,20px); line-height:1.6; max-width:48ch}

/* dark hero band */
/* The signal field goes on the ELEMENT background, not a ::after layer: an element
   background always paints behind every child, so there is no stacking order to get
   wrong against the ::before glows or the `.hero-dark>*` content. Order on screen ends
   up: dark ground, field, radial glows, text. SVG rather than PNG — 35KB gzipped
   against 199KB for the smallest acceptable WebP, and sharp on any display. */
/* The scrim is listed FIRST so it paints on top of the field, and both stay behind
   every child. It is an ellipse 1280px wide — the same width as `.wrap` — so it tracks
   the content column at any viewport: densest exactly where the type is, thinning in
   the margins where the field can stay vivid. Baked-in quiet zones cannot do this,
   because the image spans the viewport while the content stays 1280px and centred, so
   the zones drift apart as the window widens (measured: busyness behind the right-hand
   panel nearly doubled from 1280px to 2000px). */
/* One rule, one image slot. --hero-img is the backdrop; unset it and the vector field
   is the fallback, so a new page gets the field for free and a photo is opt-in by
   adding one class. This also retires the earlier trap where every rule that set a
   backdrop had to restate the scrim or silently lose it. */
.hero-dark{background-color:var(--dark);
           background-image:
             var(--scrim),
             var(--hero-img, url(hero-field.svg));
           background-repeat:no-repeat, no-repeat;
           background-position:center center, center top;
           background-size:auto, cover;
           color:#F1F3F6; position:relative; overflow:hidden; padding:64px 0 0}
/* service pages run a shorter hero, and get the field whose quiet zones match it */
.hero-dark.svc{--hero-img:url(hero-field-svc.svg)}
/* A hero backdrop is always the vector field. Photographs were tried here and measured
   worse than the state that prompted the legibility complaint; they live in the `.shot`
   band at the foot of this file instead. */
.hero-dark::before{content:""; position:absolute; inset:-30% -20% auto -20%; height:640px; pointer-events:none;
  background:radial-gradient(760px 420px at 22% 30%, rgba(4,36,50,.20), transparent 62%),
             radial-gradient(700px 400px at 82% 10%, rgba(10,101,141,.18), transparent 60%);}
.hero-dark>*{position:relative}
.hero-dark .crumbs{color:var(--on-dark)}
.hero-dark .crumbs a{color:#BBBFC2; text-decoration:none}
.hero-dark .crumbs a:hover{color:#fff}
.hero-dark h1{color:#fff; margin:18px 0 0; max-width:18ch}
.hero-dark .lede-lg{color:var(--grey-on-dark); margin-top:22px}
.hero-dark .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.30)}
.hero-dark .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.07)}

/* spec strip closing the hero — the four questions a buyer has, answered */
.spec{display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px;
      border-top:1px solid rgba(255,255,255,.16)}
.spec div{padding:24px 28px 26px; border-right:1px solid rgba(255,255,255,.10)}
.spec div:first-child{padding-left:0}
.spec div:last-child{border-right:0; padding-right:0}
.spec dt{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark)}
.spec dd{margin:9px 0 0; font-family:var(--display); font-weight:600; font-size:19px; color:#fff;
         letter-spacing:-.02em; line-height:1.25; font-variant-numeric:tabular-nums}
.spec dd small{display:block; font-family:var(--sans); font-size:12.5px; font-weight:400;
               color:var(--grey-on-dark-dim); letter-spacing:0; margin-top:5px}

/* the rail */
/* More air between sections. At 70px the bands ran together into one continuous column
   of text; the extra 20 gives each one a beginning. */
/* 72, was 90. Measured across the service pages, section padding was 20-25% of
   total page height -- roughly a quarter of the scroll was the gaps between
   sections. That was set when the pages carried more copy; after the paragraph
   cuts the same padding around less text reads as slack rather than air. The
   homepage uses .sec at 70px and sits at ~10%, which is the proportion this is
   moving towards. Deliberately not lower: the rail-and-body layout needs the
   separation to read as distinct sections at all. */
.band{border-top:1px solid var(--line); padding:72px 0}
.band.shade{background:var(--wash); border-top-color:var(--line-soft)}
.band .wrap{display:grid; grid-template-columns:212px minmax(0,690px); gap:56px;
            align-items:start; justify-content:center}
.rail{position:sticky; top:calc(var(--hdr) + 28px)}
.rail .num{font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.1em;
           color:var(--accent-deep)}
.rail h2{margin-top:11px; font-size:22px; letter-spacing:-.025em; line-height:1.22}
.rail p{margin-top:11px; font-size:13.5px; color:var(--muted); line-height:1.6}
.band-body>p{font-size:16.5px; line-height:1.75; color:var(--ink-2); max-width:none}
/* A paragraph that lands under a full-width block (a spread list, an outcomes
   grid, an index) used to stop at the prose measure and read as an orphaned
   fragment against the wide block above it. Anything in that position becomes a
   deliberate closing statement instead: full column width, its own rule. */
.band-body>ul.spread+p,
.band-body>.flight+p,
.band-body>.outcomes+p,
.band-body>.figs+p,
.band-body>.cols3+p,
.band-body>.offers+p,
.band-body.index>p{
  max-width:none; margin-top:30px; padding:22px 26px;
  border-left:3px solid var(--accent); background:var(--tint);
  border-radius:0 14px 14px 0;
  font-family:var(--display); font-weight:500; font-size:17.5px; line-height:1.6;
  letter-spacing:-.015em; color:var(--ink)}
.band.shade .band-body>ul.spread+p,
.band.shade .band-body>.outcomes+p,
.band.shade .band-body>.figs+p,
.band.shade .band-body>.cols3+p,
.band.shade .band-body>.offers+p{background:#fff}
/* a second paragraph after that one is ordinary prose again */
.band-body>ul.spread+p+p,
.band-body>.flight+p+p,
.band-body>.outcomes+p+p,
.band-body>.cols3+p+p,
.band-body>.offers+p+p{max-width:none; margin-top:18px; padding:0; border-left:0;
  background:none; font-family:var(--sans); font-weight:400; font-size:16.5px;
  line-height:1.75; letter-spacing:0; color:var(--ink-2)}
.band-body>p+p{margin-top:16px}
.band-body>h3{font-size:19px; margin-top:34px; letter-spacing:-.02em}
.band-body>h3:first-child{margin-top:0}
.band-body>p:first-child{margin-top:0}

/* a list that fills the column and still reads as prose */
ul.spread{counter-reset:li; list-style:none; margin:24px 0 0; padding:0;
          display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
ul.spread li{position:relative; padding:15px 0 15px 32px; border-top:1px solid var(--line-soft);
             font-size:15.5px; line-height:1.62; color:var(--ink-2)}
ul.spread li::before{content:counter(li,decimal-leading-zero); counter-increment:li;
             position:absolute; left:0; top:17px; font-family:var(--display); font-weight:700;
             font-size:11.5px; color:var(--accent); letter-spacing:.04em}
ul.spread li b{color:var(--ink); font-weight:600}
ul.spread li i{font-style:italic}
.band-body ul:not(.spread){margin:18px 0 0; padding-left:20px}
.band-body ul:not(.spread) li{font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-top:8px}

/* outcomes — cards, not a hairline grid.
   These were four text cells divided by rules. Structurally clear and completely
   undesigned: with no surface of their own they read as a table of contents rather than
   as four things worth reading. The block carries the highest load on the site — "Where
   we're useful" on the homepage and "What you walk away with" on all five service pages
   — so giving it a real surface is the single highest-leverage change in the white
   sections. Shadow is the existing --shadow token: the site already elevates .card and
   .offer, this just stops the main content blocks being the exception. */
.outcomes{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:26px;
          border-top:0}
.outcomes>div{background:#fff; border:1px solid var(--line); border-radius:16px;
              padding:24px 26px 26px; box-shadow:var(--shadow);
              transition:transform .16s, box-shadow .16s, border-color .16s}
.outcomes>div:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);
                    border-color:var(--line-strong)}
/* The last entry in the commitments grid is the one that says it is not a clause. With
   seven entries in two columns it would otherwise sit alone against an empty cell;
   spanning the row marks what is already different about it instead of leaving a hole.
   Harmless under the 760px rule below, where the grid is a single column anyway. */
.outcomes>.coda{grid-column:1/-1}
.outcomes b{display:block; font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.015em}
.outcomes p{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.65; max-width:none}

/* The commercial split, inside the card that makes the claim. This replaces the SVG bar
   chart that used to sit at the foot of section 04 on the homepage. That figure had two
   problems worth recording: its bars were 452px against 228px, which read as a to-scale
   ~33% margin claim nobody had made, and on a 390px viewport its 690-wide viewBox scaled
   to 0.496x, rendering 11.5px labels at 5.7px. Real text reflows, honours the reader's
   font-size setting, and sits against the sentence instead of 400px below it.
   The marked rows use --accent (#0A658D, 6.43:1), not --br-900: at 11.6px the deepest
   stop reads as near-black and stops looking like the brand at all.
   Rows stack rather than running term-left / value-right: the card column is ~280px at
   1440 and the pair does not fit on one line, so a two-column row wrapped on the longer
   entry and sat flush against the one that fitted. Stacked is the same height and stays
   identical at every width. The left rule is the quote line itself; the blue one is ours. */
.quote-split{margin:16px 0 0}
.quote-split>div{margin-top:9px; padding:1px 0 2px 12px; border-left:2px solid var(--line)}
.quote-split dt{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.quote-split dd{margin:3px 0 0; font-family:var(--mono); font-size:11.5px;
                letter-spacing:.01em; color:var(--faint)}
.quote-split .ours{border-left-color:#0A658D}
.quote-split .ours dt,.quote-split .ours dd{color:#0A658D}

/* FAQ as a document */
.faq2{border-top:1px solid var(--line); margin-top:8px}
.faq2 details{border-bottom:1px solid var(--line-soft)}
.faq2 summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr auto;
              gap:24px; align-items:baseline; padding:22px 0;
              font-family:var(--display); font-weight:600; font-size:17.5px; letter-spacing:-.015em}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--accent-deep); line-height:1}
.faq2 details[open] summary::after{content:"\2013"}
.faq2 details p{margin:0 0 24px; font-size:15.5px; line-height:1.75; color:var(--muted); max-width:66ch}

/* closing CTA, full bleed */
.close{background:var(--dark); color:#fff; padding:76px 0; position:relative; overflow:hidden}
.close::before{content:""; position:absolute; inset:auto -15% -70% -15%; height:420px; pointer-events:none;
  background:radial-gradient(620px 320px at 30% 40%, rgba(4,36,50,.22), transparent 62%),
             radial-gradient(600px 320px at 78% 30%, rgba(10,101,141,.20), transparent 60%);}
.close>*{position:relative}
.close .wrap{display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center}
.close h2{color:#fff; letter-spacing:-.03em; max-width:17ch}
.close p{margin-top:16px; color:var(--grey-on-dark); font-size:16.5px; line-height:1.65; max-width:54ch}
.close .btn-ghost{background:#fff; color:var(--ink); border-color:#fff}
.close .btn-ghost:hover{background:var(--line-soft); border-color:var(--line-soft)}

/* ---------- post cards (insights index) ----------
   `.wrap.full` opts a band out of the 212px rail + 690px body grid, so a listing can use
   the whole 1280 column. The insights index needed it: three posts in a 690px column is
   a short list on a page with nothing else on it. */
.band .wrap.full{display:block}
.listhead{max-width:56ch}
.listhead h2{margin-top:6px}
.listhead p{margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.7}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
          gap:24px; margin-top:34px}
.post-card{display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
           background:#fff; border:1px solid var(--line); border-radius:20px;
           box-shadow:var(--shadow);
           transition:transform .16s, box-shadow .16s, border-color .16s}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
/* the plate is 480x320; the fixed ratio stops any reflow as it loads */
.post-card picture{display:block; line-height:0}
.post-card img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;
               background:var(--dark); border-bottom:1px solid var(--line)}
.pc-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.pc-meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
         text-transform:uppercase; color:var(--accent)}
.pc-meta i{font-style:normal; color:var(--faint); margin:0 4px}
.post-card b{font-family:var(--display); font-weight:600; font-size:17.5px; line-height:1.35;
             letter-spacing:-.02em; color:var(--ink)}
.pc-dek{font-size:14.5px; line-height:1.65; color:var(--muted)}
.pc-go{margin-top:auto; padding-top:6px; font-size:13.5px; font-weight:600;
       color:var(--accent-deep)}
.pc-go i{font-style:normal; display:inline-block; transition:transform .16s}
.post-card:hover .pc-go i{transform:translateX(4px)}

/* related, as a wide index — rows are cards.
   The arrow sat in its own `auto` column at the far right of a 690px row, which left a
   long empty gutter between the text and the mark and made every row read as half
   empty. It now sits inline after the text, and the row itself carries a surface. */
.index{display:grid; gap:12px}
.index a{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
         padding:20px 22px; border:1px solid var(--line); border-radius:16px;
         background:#fff; box-shadow:var(--shadow); text-decoration:none;
         transition:transform .16s, box-shadow .16s, border-color .16s}
.index a:first-child{border-top:1px solid var(--line)}
.index a:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.index b{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em}
.index span{display:block; margin-top:5px; font-size:14.5px; color:var(--muted)}
.index i{font-style:normal; font-size:20px; color:var(--accent-deep); transition:transform .16s}
.index a:hover i{transform:translateX(4px)}
/* The three verbs over the service index. The nine rows underneath are the same nine
   rows with the same copy; what changes is that the reader is told what KIND of thing
   each group is before reading the names. Nine equal rows read as a vendor list, which
   is the one thing this section should not be.
   Every property is set explicitly rather than inherited: .index already styles b, span
   and i for the rows themselves, and i in particular is the row's 20px arrow. */
.index .vgroup{display:flex; align-items:baseline; gap:14px; margin:26px 0 4px}
.index .vgroup:first-child{margin-top:0}
.index .vgroup b{flex:0 0 auto; font-family:var(--display); font-weight:700;
                 font-size:13px; letter-spacing:.18em; text-transform:uppercase;
                 color:var(--accent-deep)}
.index .vgroup span{display:block; margin-top:0; flex:0 1 auto;
                    font-size:14px; color:var(--muted)}
.index .vgroup i{flex:1 1 auto; height:1px; min-width:16px; background:var(--line);
                 font-size:0; color:transparent; transition:none; transform:none}
@media (max-width:560px){
  /* The gloss is the first thing to go: the label is what organises the list. */
  .index .vgroup span{display:none}
}

/* .plates adds a leading artwork column to the service index. The plate is decorative
   — the row's own text says everything — so the img carries alt="". */
.index.plates a{grid-template-columns:auto 1fr auto}
.index.plates picture{display:block; line-height:0}
.index.plates img{width:150px; height:auto; border-radius:12px;
                  background:var(--dark); display:block}
@media (max-width:760px){
  .index.plates a{grid-template-columns:1fr auto}
  .index.plates picture{display:none}
}

/* .soon is a service-index row for a practice that is real but deliberately not one of
   the six sold from day one. It borrows the card, without the plate, the arrow or the
   hover lift -- a card that looks clickable and is not is worse than a plain one.
   Two kinds of row now live here, and they differ in exactly one way: IT strategy has
   nowhere to go yet, while Data and AI has a written page, so that row carries a real
   inline link. `.index a` styles every link in this grid as a full bordered card, which
   is right for the six practices and wrong here -- hence the override below. */
.index .soon{padding:20px 22px; border:1px dashed var(--line); border-radius:16px;
             background:transparent}
.index .soon b{display:block}
.index .soon p{margin:7px 0 0; font-size:14.5px; color:var(--muted); max-width:64ch}
.index .soon a{display:inline; padding:0; border:0; border-radius:0; background:none;
  box-shadow:none; transform:none; color:var(--accent); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.index .soon a:hover{color:var(--br-900)}
.index .soon .tag{display:inline-block; margin:0 0 0 10px; vertical-align:3px;
                  font-family:var(--body); font-size:10.5px; font-weight:600;
                  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep);
                  border:1px solid var(--line); border-radius:999px; padding:3px 9px}

@media (max-width:1000px){
  .band .wrap{grid-template-columns:1fr; gap:24px}
  .rail{position:static}
  .rail h2{margin-top:8px}
  .spec{grid-template-columns:repeat(2,1fr)}
  .spec div:nth-child(2){border-right:0; padding-right:0}
  .spec div:nth-child(3){padding-left:0; border-top:1px solid rgba(255,255,255,.10)}
  .spec div:nth-child(4){border-top:1px solid rgba(255,255,255,.10)}
  .close .wrap{grid-template-columns:1fr; gap:26px}
}
@media (max-width:760px){
  .band{padding:50px 0}
  ul.spread,.outcomes{grid-template-columns:1fr}
  /* .outcomes>div was a ruled row once, and on a narrow screen dropping its side padding
     and its divider made the text line up with the column. It has been a bordered card
     with its own radius and shadow for a while, so that rule left every card's text flush
     against its own border and the right edge open -- which is the first thing anybody
     notices on a phone. Keep the card; just tighten it for 390px. The !importants are
     gone too: this rule sits after the base one, so it wins on order alone and did not
     need to shout. */
  .outcomes>div{padding:20px 19px 22px}
  .spec{grid-template-columns:1fr}
  .spec div{padding:18px 0 !important; border-right:0; border-top:1px solid rgba(255,255,255,.10)}
  .spec div:first-child{border-top:0}
  .hero-dark{padding:42px 0 0}
  .close{padding:54px 0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE — converted to the editorial system.
   Every shadowed card is gone; blocks are divided by hairlines and sit directly
   on the band. One language across the whole site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the home hero is now dark, like every service hero */
.hero-dark .hero-grid{align-items:start; gap:56px; padding-bottom:66px}
.hero-dark .tagpill{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:var(--on-dark-soft)}
.hero-dark .tagpill .dot{background:var(--accent-pale)}
.hero-dark .grad-text{background:var(--grad-text-dark);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#39B4E8}
.hero-dark .hero-note{color:var(--on-dark); margin-top:16px}
.hero-dark h1{max-width:15ch}

/* ── the hero findings panel ──────────────────────────────────────────────────
   ONE BLOCK, ON PURPOSE. This panel used to be defined across five: a base, an accent
   override, two mobile blocks and a set of fake window chrome, each added on top of the
   last. That is why it had no single voice -- every layer solved its own problem and the
   result read as a template.

   THE IDEA. It is a findings sheet, so it is set like one rather than dressed up as an
   application window. The value takes a fixed left column and is right-aligned, so the
   figures line up into a spine the eye can run down; the hairlines cross the full width;
   the title and its one line of detail sit in the second column. Nothing imitates a UI.

   THE MATERIAL IS LIGHT, NOT ORNAMENT. A hairline border, a faint top-down wash, an
   inset highlight along the top edge so the card reads as catching light from above, and
   one wide soft shadow to lift it off the band. Those four together are what makes a
   flat rectangle look expensive; a border-radius and a blur do not. */
.fx{border:1px solid rgba(255,255,255,.10); border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.05) 0%,
                                       rgba(255,255,255,.014) 45%,
                                       rgba(255,255,255,.006) 100%);
    padding:24px 28px 22px;
    box-shadow:var(--shadow-panel)}

/* A COLUMN, not a space-between row. The practice list is ~350px and the title
   needs ~265px in a 484px panel, so as a row the list took its width and the title
   was squeezed to three lines. They stack; both get the full width. */
.fx-head{display:flex; flex-direction:column; align-items:flex-start; gap:9px;
         padding:0 0 15px; border-bottom:1px solid rgba(255,255,255,.13)}
.fx-head b{font-family:var(--display); font-weight:600; font-size:14.5px; color:#fff;
           letter-spacing:-.015em}
/* Spaced small caps rather than the mono run-on this used to be: it is a list of
   practices, which is a label, and mono made it look like console output. */
.fx-head span{font-family:var(--sans); font-size:10.5px; font-weight:500;
              text-transform:uppercase; letter-spacing:.13em; color:var(--on-dark-dim);
              white-space:normal; line-height:1.5}

/* 96px is sized to the longest value, "2 numbers", at this weight -- not guessed. The
   column is fixed rather than auto so a later wording change moves the text, never the
   spine. */
.fx-row{display:grid; grid-template-columns:96px 1fr; column-gap:24px;
        padding:13px 0; border-top:1px solid rgba(255,255,255,.075)}
.fx-row:first-of-type{border-top:0; padding-top:15px}
.fx-row b{grid-column:2; grid-row:1; font-family:var(--display); font-weight:600;
          font-size:14.5px; line-height:1.35; color:#F1F3F6; letter-spacing:-.012em}
.fx-row span{grid-column:2; grid-row:2; margin-top:3px; font-size:12.5px;
             line-height:1.5; color:var(--on-dark)}
.fx-row em{grid-column:1; grid-row:1 / span 2; align-self:start; text-align:left;
           font-style:normal; font-family:var(--display); font-weight:600; font-size:16.5px;
           line-height:1.3; color:var(--accent-on-dark); letter-spacing:-.03em;
           font-variant-numeric:tabular-nums; white-space:nowrap}
/* INLINE, and never wrapping. As a block under the number this was a second
   ragged column: "FROM DOMAIN ADMIN" and "A MONTH, IN PEOPLE" each broke to two
   lines under 96px and made three of the six rows taller than the rest. The unit is
   now a short suffix on the figure itself and the detail sentence carries the
   nuance. nowrap is safe because nothing here exceeds four characters. */
.fx-row em i{margin-left:4px; font-style:normal; font-family:var(--sans); font-size:10.5px;
             font-weight:500; letter-spacing:.02em; text-transform:none;
             color:var(--on-dark-dim); white-space:nowrap}

.fx-foot{margin-top:16px; padding-top:15px;
         border-top:1px solid rgba(255,255,255,.13);
         font-size:12.5px; color:var(--on-dark); line-height:1.6}
.fx-foot b{color:#fff; font-weight:600}

/* On a phone the two columns stack: value, then heading, then detail. Nothing here is
   nowrap except the value itself, which is at most nine characters, so no later wording
   change can push this panel off the side of the screen -- which is exactly what the
   previous version did at 390px, and .hero-dark clips, so it was amputated rather than
   scrollable. */
@media (max-width:700px){
  .fx{padding:20px 18px 18px; border-radius:16px}
  .fx-head{flex-direction:column; align-items:flex-start; gap:7px; padding-bottom:14px}
  .fx-head span{white-space:normal; line-height:1.5}
  .fx-row{grid-template-columns:1fr; column-gap:0; padding:15px 0}
  .fx-row b{grid-column:1; grid-row:2}
  .fx-row span{grid-column:1; grid-row:3; margin-top:4px}
  .fx-row em{grid-column:1; grid-row:1; text-align:left; margin-bottom:7px;
             font-size:22px; letter-spacing:-.025em; white-space:normal}
  .fx-row em i{font-size:11.5px}
}

/* three columns divided by rules — replaces the shadowed .lay cards */
/* Same treatment as .outcomes: each entry becomes a card rather than a ruled row, so an
   ordered argument reads as three deliberate steps instead of a list that ran on. The
   tag column stays, because the order IS the point of this block. */
.cols3{border-top:0; display:grid; gap:14px}
.cols3>div{display:grid; grid-template-columns:128px 1fr; gap:4px 26px;
           padding:22px 26px 24px; border-bottom:0;
           background:#fff; border:1px solid var(--line); border-radius:16px;
           box-shadow:var(--shadow);
           transition:transform .16s, box-shadow .16s, border-color .16s}
.cols3>div:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.cols3 .tag{grid-column:1; grid-row:1 / span 2; padding-top:5px; font-size:10.5px; font-weight:600;
            letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.cols3 h3{grid-column:2; font-size:19px; letter-spacing:-.02em}
.cols3 p{grid-column:2; margin-top:8px; font-size:15.5px; color:var(--muted); line-height:1.68}

/* the priced engagements — same treatment, price set large */
.offers{border-top:1px solid var(--line)}
.offers>div{display:grid; grid-template-columns:1fr auto; gap:2px 36px;
            padding:24px 0 26px; border-bottom:1px solid var(--line-soft)}
.offers .when{grid-column:1; font-size:10.5px; font-weight:600; letter-spacing:.14em;
              text-transform:uppercase; color:var(--accent)}
.offers h3{grid-column:1; margin-top:8px; font-size:20px; letter-spacing:-.025em}
.offers>div>p{grid-column:1; margin-top:9px; font-size:15.5px; color:var(--muted); line-height:1.65}
.offers .amt{grid-column:2; grid-row:1 / span 3; align-self:start; text-align:right;
             font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em;
             font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.offers .amt em{display:block; font-style:normal; font-family:var(--sans); font-weight:400;
                font-size:12.5px; color:var(--faint); margin-top:5px}
.offers .got{grid-column:1 / -1; margin-top:16px; padding-top:13px;
             border-top:1px dashed var(--line); font-size:13.5px; color:var(--ink-2);
             font-weight:500; line-height:1.55}
.offers .got span{display:inline-block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
                  color:var(--faint); font-weight:600; margin-right:10px}

/* DPDP, laid straight onto the band */
.deadline{display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:start;
          border-top:1px solid var(--line); padding-top:30px}
.deadline .when{font-family:var(--display); font-weight:700; letter-spacing:-.04em; line-height:.95;
                font-size:clamp(40px,4.6vw,62px); white-space:nowrap}
/* nowrap on .when is there so the big figure never breaks mid-number; the caption must
   opt out of it, or a caption longer than the old "DPDP full compliance" renders as one
   unbreakable line and pushes the whole page into a horizontal scroll on a phone. */
.deadline .when small{display:block; font-family:var(--sans); font-size:10.5px; font-weight:600;
                      letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:14px;
                      -webkit-text-fill-color:initial; background:none;
                      white-space:normal; max-width:24ch; line-height:1.5}
.deadline p{font-size:16.5px; line-height:1.72; color:var(--ink-2); max-width:62ch}
.deadline .three{margin:24px 0 26px; border-top:1px solid var(--line-soft)}
.deadline .three div{display:grid; grid-template-columns:170px 1fr; gap:22px; padding:14px 0;
                     border-bottom:1px solid var(--line-soft); font-size:14.5px;
                     color:var(--muted); line-height:1.6}
.deadline .three b{font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink)}

/* contact becomes a band, so its rhythm matches the rest */
.band .cf{box-shadow:none; border-radius:0; border:0; border-top:1px solid var(--line);
          padding:26px 0 0; background:none}
.band .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.band .orcall{border-top:1px solid var(--line-soft)}

/* the trust strip, aligned to the spec pattern */
.trust>.wrap>div{padding:30px 34px 0 0; border-top:1px solid var(--line);
                  border-right:1px solid var(--line-soft)}
.trust>.wrap>div:last-child{border-right:0; padding-right:0}

@media (max-width:1000px){
  .deadline,.deadline .three{grid-template-columns:1fr}
  .cols3>div{grid-template-columns:1fr; gap:6px}
  .cols3 .tag{grid-row:auto; padding-top:0}
  .cols3 h3,.cols3 p{grid-column:1}
  .offers>div{grid-template-columns:1fr}
  .offers .amt{grid-column:1; grid-row:auto; text-align:left; margin-top:14px}
  .deadline{gap:22px}
  .deadline .three div{padding-right:0; border-top:1px solid var(--line-soft); margin-top:-1px}
  .band .contact-grid{grid-template-columns:1fr; gap:34px}
  .trust>.wrap>div{border-right:0; padding-right:0}
  .trust .wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-dark .hero-grid{gap:36px}
}


/* ═══ FIGURES ═══════════════════════════════════════════════════════════════
   Drawings rather than photography — see godwitAI_source figs.py for why.
   Stroke-based so they stay legible at any size and read as engineering
   documents rather than decoration. */
.svc-top{display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center}
.svc-top .lede-lg{max-width:none}   /* fill the hero column, no trailing rag */
.fig{margin:0; max-width:560px}
.fig svg{width:100%; height:auto; display:block}
.fig figcaption{margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--grey-on-dark-dim);
                letter-spacing:.02em}
/* on dark */
.fig .ln{stroke:rgba(255,255,255,.22); fill:none; stroke-width:1.25}
.fig .ln-a{stroke:var(--accent-pale); fill:none; stroke-width:1.5}
.fig .ln-b{stroke:#0E8FC7; fill:none; stroke-width:1.5}
.fig .bx{fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.20); stroke-width:1}
.fig .bx-a{fill:rgba(175,222,239,.14); stroke:rgba(175,222,239,.55); stroke-width:1}
.fig .nd{fill:var(--accent-pale)}
.fig .tx{fill:var(--on-dark-soft); font:500 11.5px var(--sans)}
.fig .tx-d{fill:var(--on-dark-dim); font:400 10.5px var(--sans)}
.fig .tx-n{fill:#fff; font:600 13px var(--display); letter-spacing:-.02em}
.fig .dash{stroke-dasharray:3 4}
/* on light — the homepage figures use this, so the set has to be complete */
.fig.on-light .ln{stroke:var(--line)} .fig.on-light .bx{fill:#fff; stroke:var(--line)}
.fig.on-light .tx{fill:var(--ink-2)} .fig.on-light .tx-d{fill:var(--muted)}
.fig.on-light .tx-n{fill:var(--ink)} .fig.on-light .ln-a{stroke:var(--br-900)}
/* these three were missing: the dark values are the pale on-dark accents, which on
   white are too light to carry a node, a stroke or a filled panel */
.fig.on-light .ln-b{stroke:var(--br-500)}
.fig.on-light .nd{fill:var(--br-900)}
.fig.on-light .bx-a{fill:rgba(4,36,50,.06); stroke:rgba(4,36,50,.42)}
.fig.on-light figcaption{color:var(--faint)}
/* a figure set full-width in a band, rather than beside a hero */
.fig.wide{max-width:none}
.band-body>.fig{margin-top:34px; padding-top:30px; border-top:1px solid var(--line)}

/* ---------- figures on a phone ----------
   These drawings set their type in viewBox units, so the whole thing scales with the
   container — including the labels. Every figure on the site was squeezed to about half
   size on a 390px screen: the 520-unit drawings rendered their 11.5px labels at 7.6px,
   the 690-unit ones at 5.7px. Bumping only the font sizes is not available, because the
   boxes were sized around the text and it would overflow them; scaling the whole drawing
   up keeps the geometry exactly as drawn.
   So below 900px the drawing holds a legible size and the reader pans it instead, which
   is the ordinary treatment for a technical diagram that genuinely needs its width. The
   figcaption stays outside the scroller so it still wraps as prose.
   The edge shadows are the background-attachment trick: the two `local` layers are
   painted in the surface colour and travel with the content, so each shadow shows only
   while there is more drawing to pan to, and both fade out at the ends. No JS, and no
   state to get wrong. Light and dark need separate stops because the masking layer has
   to match the surface it sits on.
   min-width:0 on the figure and the scroller matters: both sit inside grid containers
   (.svc-top, .spot-fig) where the default min-width:auto refuses to shrink below the
   content, so the drawing pushed the whole column wide and the PAGE scrolled sideways
   instead of the figure. The svg takes an explicit width rather than a min-width for the
   same reason — a min-width still counts toward the parent's intrinsic size. */
.fig,.fig-scroll{min-width:0}
.fig{max-width:min(560px,100%)}
.fig-scroll{overflow-x:auto; overscroll-behavior-x:contain}
@media (max-width:900px){
  /* .band-body is the grid item on the article pages, and a scroll container does NOT
     zero its own min-content contribution — only the grid item's automatic minimum can
     be released. Without this the drawing widened the column and the page scrolled
     sideways instead of the figure. On the service pages the figure is itself the grid
     item, which the .fig rule above already covers. */
  .band-body{min-width:0}
  .fig-scroll{padding-bottom:10px}
  .fig-scroll svg{width:600px; max-width:none}
  .fig.wide .fig-scroll svg{width:720px}
  .fig-scroll{
    background:
      linear-gradient(to right,  var(--dark) 24px, rgba(16,20,24,0)) left center,
      linear-gradient(to left,   var(--dark) 24px, rgba(16,20,24,0)) right center,
      radial-gradient(farthest-side at 0 50%,    rgba(255,255,255,.22), rgba(255,255,255,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.22), rgba(255,255,255,0)) right center;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 13px 100%, 13px 100%;
    background-attachment:local, local, scroll, scroll;}
  .fig.on-light .fig-scroll{
    background:
      linear-gradient(to right,  #fff 24px, rgba(255,255,255,0)) left center,
      linear-gradient(to left,   #fff 24px, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%,    rgba(16,20,24,.16), rgba(16,20,24,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(16,20,24,.16), rgba(16,20,24,0)) right center;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 13px 100%, 13px 100%;
    background-attachment:local, local, scroll, scroll;}
}

/* the topology sits beside the two network columns */
.spot-fig{margin-top:34px; padding-top:32px; border-top:1px solid rgba(255,255,255,.14);
          display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:56px;
          align-items:center}
.spot-fig .fig{justify-self:end; width:100%}
.spot-fig p{font-size:15.5px; color:var(--grey-on-dark); line-height:1.72; max-width:44ch}
.spot-fig p b{color:#fff; font-weight:600}

@media (max-width:1000px){
  .svc-top{grid-template-columns:1fr; gap:34px}
  .fig{max-width:520px}
  .spot-fig{grid-template-columns:1fr; gap:26px}
}

/* ---------- the dark/light seam ----------
   Every transition on the site was the same hard full-width switch between --dark and
   white, which made the page read as slabs stacked on each other. A single luminous
   hairline drawn from the brand ramp turns each one into a deliberate edge. It is one
   pixel and it fades out at both ends, so it reads as light catching the seam rather
   than as a rule someone drew. All three carry position:relative already. */
.hero-dark::after,.spot::after,.close::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(175,222,239,.00) 8%,
             rgba(175,222,239,.55) 26%, rgba(122,203,236,.60) 50%,
             rgba(57,180,232,.55) 74%, rgba(57,180,232,.00) 92%, transparent 100%);}

/* ── lead-magnet checklist ────────────────────────────────────────────── */
/* Each section is a card. Twenty-four checks in one ruled column was a wall: correct,
   complete, and impossible to see progress through. Grouped into seven surfaces it reads
   as something you can work down in passes, which is how the list is meant to be used. */
.checklist .cl-sec{margin-bottom:20px; background:#fff; border:1px solid var(--line);
                   border-radius:16px; padding:24px 26px 20px; box-shadow:var(--shadow)}
.checklist .cl-sec:last-child{margin-bottom:0}
.checklist .cl-sec h2{font-size:19px; letter-spacing:-.02em; padding-bottom:10px;
                      border-bottom:1px solid var(--line)}
.checklist .cl-note{margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.6}
.checklist .cl-list{list-style:none; margin:14px 0 0; padding:0}
.checklist .cl-list li{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-soft)}
.checklist .cl-list li:last-child{border-bottom:0}
.checklist .cl-box{flex:none; width:15px; height:15px; margin-top:3px; border-radius:2px;
                   border:1.5px solid var(--accent); background:#fff}
.checklist .cl-list b{display:block; font-family:var(--display); font-weight:600; font-size:15.5px;
                      letter-spacing:-.01em}
.checklist .cl-list p{margin-top:5px; font-size:14.5px; color:var(--muted); line-height:1.6; max-width:none}
.cl-closing{margin-top:26px; padding:20px 24px; border-left:3px solid var(--accent);
            background:var(--tint); border-radius:0 14px 14px 0;
            font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.6;
            letter-spacing:-.015em; color:var(--ink)}
.get-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.get-side h3{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
             font-weight:600}
.get-side ul{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.get-side li{display:flex; justify-content:space-between; gap:18px; align-items:baseline;
             padding:11px 0; border-bottom:1px solid var(--line-soft)}
.get-side li b{font-family:var(--display); font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.get-side li span{font-size:12.5px; color:var(--faint); white-space:nowrap}
.get-side>p{margin-top:18px; font-size:13.5px; color:var(--muted); line-height:1.6}
@media (max-width:760px){ .get-grid{grid-template-columns:1fr; gap:32px} }

/* ── insights posts ───────────────────────────────────────────────────── */
.post>p{font-size:16.5px; line-height:1.78; color:var(--ink-2); margin-top:18px; max-width:none}
.post>p:first-child{margin-top:0}
.post>h2{font-size:22px; letter-spacing:-.025em; margin-top:40px; padding-bottom:10px;
         border-bottom:1px solid var(--line)}
.post>ul{list-style:none; margin:20px 0 0; padding:0}
.post>ul li{position:relative; padding:13px 0 13px 22px; border-bottom:1px solid var(--line-soft);
            font-size:16.5px; line-height:1.7; color:var(--ink-2)}
.post>ul li:last-child{border-bottom:0}
.post>ul li::before{content:""; position:absolute; left:0; top:22px; width:6px; height:6px;
                    border-radius:50%; background:var(--accent); opacity:.65}
.post b{color:var(--ink); font-weight:600}

/* ── article table of contents in the rail ────────────────────────────── */
.toc{counter-reset:t; list-style:none; margin:14px 0 0; padding:0}
.toc li{counter-increment:t; position:relative; padding:7px 0 7px 22px;
        border-top:1px solid var(--line-soft)}
.toc li:first-child{border-top:0}
.toc li::before{content:counter(t,decimal-leading-zero); position:absolute; left:0; top:9px;
                font-family:var(--display); font-weight:700; font-size:10.5px;
                color:var(--accent); letter-spacing:.04em}
.toc a{font-size:13.5px; line-height:1.5; color:var(--ink-2); text-decoration:none;
       display:block; transition:color .15s}
.toc a:hover{color:var(--accent-deep)}
.rail-meta{margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
           font-size:12.5px; color:var(--faint)}

/* ── analytics consent ────────────────────────────────────────────────── */
.c9-consent{position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
            background:#fff; border:1px solid var(--line); border-radius:16px;
            box-shadow:var(--shadow-lg);
            opacity:0; transform:translateY(14px); transition:opacity .24s, transform .24s}
.c9-consent.in{opacity:1; transform:none}
.c9-consent-in{max-width:1280px; margin:0 auto; padding:20px 24px;
               display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:center}
.c9-consent p{font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:76ch}
.c9-consent a{color:var(--accent-deep); font-weight:600}
.c9-consent-b{display:flex; gap:10px; flex-wrap:wrap}
.c9-consent .btn{font-size:13.5px; padding:10px 18px}
@media (max-width:760px){
  .c9-consent{left:10px; right:10px; bottom:10px}
  .c9-consent-in{grid-template-columns:1fr; gap:14px; padding:18px 18px}
  .c9-consent-b .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){ .c9-consent{transition:none} }

/* On a phone the 1280px ellipse is far wider than the viewport, so the whole
   screen would sit in the scrim's densest core and the field would vanish.
   Sizing it in % instead keeps the same shape relative to the screen. */
@media (max-width:820px){
  :root{--scrim:radial-gradient(ellipse 150% 116% at 50% 46%,
         rgba(16,20,24,.84) 0%, rgba(16,20,24,.60) 60%, rgba(16,20,24,.30) 100%);}
}

/* No photography on this site — see art/README.md. It was tried on five pages and
   pulled: generic stock reads as cheap next to the site's own drawn figures, and it
   undercuts a voice whose whole claim is "no deck, no discovery workshop". The imagery
   here is the vector field, the plates and the inline .fig diagrams, which are one
   drawing system with the logo. */

/* ---------- section grounds by content weight ---------- */

/* Tier 2: a block of value. The hairline is the kit's Cyan at low alpha -- enough to
   register as a deliberate step up, not enough to read as a rule. */
.band.panel{background:var(--panel); border-top:1px solid rgba(14,143,199,.20)}
.band.panel .band-body>.offers+p{background:#fff}

/* Tier 3: the heaviest section on the page. Same ink + scrim + signal field as the hero,
   so it reads as a return to the hero's register rather than as a new colour.
   Every inherited type colour MUST be restated: --muted is 2.95:1 on this ground and
   --ink-2 is 2.16:1, so anything left alone would be invisible rather than merely low
   contrast. The on-dark values are the artwork palette's, all measured over #101418:
   paper 17.23, var(--on-dark-soft) 12.11, var(--on-dark) 6.21, cyan-light 7.81. */
.band.feature{background-color:var(--dark);
  background-image:var(--scrim), var(--hero-img, url(hero-field-svc.svg));
  background-repeat:no-repeat, no-repeat;
  background-position:center center, center top;
  background-size:auto, cover;
  border-top:0; color:var(--tint)}
.band.feature .rail .num{color:#39B4E8}
.band.feature .rail h2,
.band.feature .band-body>h3,
.band.feature .band-body b{color:var(--tint)}
.band.feature .rail p{color:var(--on-dark)}
.band.feature .band-body>p,
.band.feature .band-body ul:not(.spread) li{color:var(--on-dark-soft)}
.band.feature .offers{border-top-color:rgba(255,255,255,.16)}
.band.feature .offers>div{border-bottom-color:rgba(255,255,255,.10)}
.band.feature .offers .when{color:#39B4E8}
.band.feature .offers>div>p{color:var(--on-dark-soft)}
.band.feature .offers .amt,
.band.feature .amt{color:var(--tint)}
.band.feature .amt em, .band.feature .amt small,
.band.feature .when small, .band.feature .got span{color:var(--on-dark)}
.band.feature .got{color:var(--on-dark-soft); border-top-color:rgba(255,255,255,.18)}
/* `.band-body>.offers+p` sets its OWN background:#fff, so on the dark ground the
   inverted text landed on a white block and measured 1.45:1 -- invisible, not merely
   low. Restated as the translucent panel the dark hero already uses for .spot-note. */
.band.feature .band-body>.offers+p{background:rgba(175,222,239,.10);
  border:1px solid rgba(175,222,239,.24); border-left-width:1px; border-radius:14px;
  padding:18px 22px; color:var(--on-dark-soft)}
.band.feature .band-body>.offers+p b{color:var(--tint)}
.band.feature .band-body>.fig{border-top-color:rgba(255,255,255,.14)}
.band.feature .outcomes>div{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); box-shadow:none}
.band.feature .outcomes>div:hover{border-color:rgba(175,222,239,.34); box-shadow:none}
.band.feature .outcomes>div b{color:var(--tint)}
.band.feature .outcomes>div p{color:var(--on-dark-soft)}
.band.feature a{color:var(--accent-pale)}


/* ---------------------------------------------------------------------------
   Section 04, "A short engagement, a fixed fee".

   A prospect read this section as a rate card, and that was the correct reading
   of what was on screen. Five bright display-weight rupee figures ran down the
   right-hand column, brighter and larger than the service names beside them, so
   the eye took the price column before any of the offers. Then two more kinds of
   money followed in the SAME treatment: the worked example's "Rs 10 lakh a
   month" and "Rs 24 lakh a year" -- which are the BUYER's spend and saving --
   were bold var(--tint), identical to the fee figures directly above them. Seven
   rupee figures, three meanings, one language. The worst misread available was
   the one the prospect had: that the firm charges Rs 10 lakh a month.

   The prices themselves stay. Publishing them is a real differentiator in a
   market where everyone quotes on request, and it is the same position as "you
   see the OEM quote" elsewhere on the site. What changes is that each figure now
   says which kind of money it is.
   --------------------------------------------------------------------------- */

/* The offer name leads, the fee follows. It was 24px paper against a 20px name,
   so the number outranked the thing being sold -- for a firm with no track
   record, a reader met "from Rs 8,00,000" before knowing what it buys. */
.band.feature .offers .amt{font-size:20px; color:var(--on-dark-soft)}
.offers .amt .lbl{display:block; font-family:var(--sans); font-weight:600;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark); margin-bottom:5px}

/* The rail says once, in words, what the column is. */
.band.feature .rail .rail-note{margin-top:14px; font-size:13.5px; line-height:1.6;
  color:var(--on-dark)}
.band.feature .rail .rail-note b{color:var(--on-dark-soft); font-weight:600}

/* Your money. Cyan, never paper -- the fee figures are the only paper-white
   numbers in the section now, so a glance separates them. */
.band.feature .band-body>.offers+p.yours{background:rgba(175,222,239,.10);
  border:1px solid rgba(175,222,239,.24); border-radius:14px; padding:16px 22px 18px;
  color:var(--on-dark-soft)}
.band.feature .band-body>p.yours b{color:#39B4E8; font-weight:600}

/* Ongoing, not a one-off. Its own label, so the monthly figure cannot be read as
   a sixth project fee -- it used to sit in plain body prose, which both hid the
   only recurring-revenue offer and added to the wall of numbers. */
.band.feature .band-body>.offers+p+p.ongoing{max-width:none; margin-top:14px;
  padding:16px 22px 18px; border:1px dashed rgba(255,255,255,.20); border-radius:14px;
  background:none; font-family:var(--sans); font-weight:400; font-size:15.5px;
  line-height:1.66; letter-spacing:0; color:var(--on-dark-soft)}
/* Same colour as the fee column, because that is what it is -- a fee, just a
   recurring one. Paper-white here made the monthly figure the brightest number in
   the whole section, outranking the five headline fees. */
.band.feature .band-body>p.ongoing b{color:var(--on-dark-soft); font-weight:600}

/* Both labels: the same micro-caps as "YOU GET", so they read as part of the
   section's own system rather than as added signage. */
.band.feature .band-body>p.yours>span,
.band.feature .band-body>p.ongoing>span{display:block; font-family:var(--sans);
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark); margin-bottom:8px}

/* The godwit flight banner in the homepage name section. Full band width rather than the
   .fig measure: .fig is capped at 560px because it holds inline SVG diagrams read at
   prose width, and this is a picture that carries the section's whole argument. */
.flight{margin:28px 0 6px; max-width:none}
.flight picture{display:block}
.flight img{display:block; width:100%; height:auto; border-radius:16px;
            background:var(--dark)}
.flight figcaption{margin-top:13px; font-family:var(--mono); font-size:11.5px;
                   color:var(--muted); letter-spacing:.02em; max-width:62ch}
.flight-facts{list-style:none; margin:18px 0 0; padding:0; display:grid;
              grid-template-columns:repeat(3,1fr); gap:2px; border-top:1px solid var(--line)}
.flight-facts li{padding:14px 18px 14px 0}
.flight-facts b{display:block; font-family:var(--display); font-weight:600; font-size:20px;
                letter-spacing:-.02em; color:var(--ink)}
.flight-facts span{display:block; margin-top:3px; font-size:13.5px; color:var(--muted);
                   line-height:1.45}
@media (max-width:620px){
  /* Three columns at 360px gives each fact about 100px, which breaks "no food, no water,
     no rest" onto four lines. One column reads properly and costs nothing. */
  .flight-facts{grid-template-columns:1fr; gap:0}
  .flight-facts li{padding:11px 0; border-bottom:1px solid var(--line)}
  .flight-facts li:last-child{border-bottom:0}
}

/* A contextual call to action in the sticky rail of each service-page section. Measured
   before it existed: 5 to 8 sections per page sat more than a full screen from the
   nearest CTA, worst case 4.4 screens. Quiet by design -- it is a link, not a button,
   because it appears in every section and a row of buttons down the page would shout. */
.rail-cta{display:inline-flex; align-items:center; gap:7px; margin-top:18px;
          font-size:13.5px; font-weight:500; color:var(--accent); text-decoration:none;
          border-top:1px solid var(--line); padding-top:14px}
.rail-cta span{transition:transform .18s}
.rail-cta:hover{color:var(--br-700)}
.rail-cta:hover span{transform:translateX(3px)}
.band.feature .rail-cta{color:var(--accent-on-dark); border-top-color:rgba(255,255,255,.16)}
@media(max-width:1000px){
  /* The rail stops being sticky here and stacks above the content, so the link would
     repeat down the page instead of following the reader. The header CTA covers this. */
  .rail-cta{display:none}
}


/* ── scroll reveal ───────────────────────────────────────────────────────────
   Applied by script only, so nothing is hidden when JavaScript does not run. Restrained
   on purpose: 12px of travel and 460ms, one-way. A page where everything slides a long
   way reads as a template, not as a considered piece of work. */
.rv{opacity:0; transform:translateY(12px)}
.rv-in{opacity:1; transform:none;
       transition:opacity .46s cubic-bezier(.22,.61,.36,1),
                  transform .46s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none}
  .rv-in{transition:none}
}

/* ── phone-first figures (.fig.fit) ──────────────────────────────────────────
   Opts out of the 600px pin that makes the 520-unit diagrams scroll sideways on a
   phone. These are authored at 400 units with type at 15-17, so scaling to a ~330px
   column still renders 12-14px. Any figure redrawn later should join this class. */
.fig.fit .fig-scroll{overflow-x:visible; padding-bottom:0; background:none}
.fig.fit .fig-scroll svg{width:100%; max-width:100%}

/* type, in user units, sized for the 400-unit box */
.dsh .dsh-h{fill:var(--on-dark); font:600 12px var(--sans); letter-spacing:.14em}
.dsh .dsh-r{fill:#5B6167; letter-spacing:.08em; font-weight:400}
.dsh .dsh-big{fill:var(--accent-on-dark); font:600 46px var(--display); letter-spacing:-.03em}
.dsh .dsh-mid{fill:#F1F3F6; font:600 24px var(--display); letter-spacing:-.02em}
.dsh .tx{font-size:14.5px}
.dsh .dsh-s{fill:var(--on-dark-dim); font:400 13px var(--sans)}
.dsh .dsh-s.is-off{fill:#5B6167}

/* adoption bars -- full height in the markup, replayed from zero by script */
.dsh .dsh-bar{fill:rgba(175,222,239,.22); transform-box:fill-box;
              transform-origin:50% 100%}
.dsh .dsh-bar.is-now{fill:var(--accent-on-dark)}

/* horizontal bars and stacked segments -- same idea as .dsh-bar rotated, so the
   transform origin moves to the left edge and the animation scales X. Full width
   ships in the markup; the script only replays it. */
.dsh .dsh-hbar{fill:rgba(175,222,239,.22); transform-box:fill-box;
               transform-origin:0% 50%}
.dsh .dsh-hbar.is-now{fill:var(--accent-on-dark)}
.dsh .dsh-hbar.is-mute{fill:rgba(255,255,255,.10)}

/* blast-radius rows */
.dsh .dsh-path{fill:none; stroke-width:2.4}
.dsh .dsh-path.is-open{stroke:var(--accent-pale); opacity:.9}
.dsh .dsh-path.is-held{stroke:var(--accent-on-dark); stroke-dasharray:7 5}
.dsh .dsh-node{fill:var(--accent-pale)}
.dsh .dsh-node.is-off{fill:rgba(255,255,255,.16)}
.dsh .dsh-stop{stroke:#F1F3F6; stroke-width:3; stroke-linecap:round}

@media (prefers-reduced-motion:no-preference){
  /* Replay only. `is-on` is added by script when the figure is first seen; without it
     everything sits at its finished value, so no state here can leave a chart empty. */
  .dsh.is-on .dsh-bar{animation:dshGrow .62s cubic-bezier(.22,.61,.36,1) backwards;
                      animation-delay:calc(var(--i) * .06s)}
  .dsh.is-on .dsh-hbar{animation:dshWide .62s cubic-bezier(.22,.61,.36,1) backwards;
                       animation-delay:calc(var(--i) * .07s)}
  .dsh.is-on .dsh-path{animation:dshDraw .85s cubic-bezier(.22,.61,.36,1) backwards}
  .dsh.is-on .dsh-path.is-held{animation-delay:.5s}
  .dsh.is-on .dsh-node{animation:dshPop .3s ease-out backwards;
                       animation-delay:calc(.15s + var(--i) * .11s)}
  .dsh.is-on .dsh-stop{animation:dshPop .3s ease-out .95s backwards}
  @keyframes dshGrow{from{transform:scaleY(0)}to{transform:none}}
  @keyframes dshWide{from{transform:scaleX(0)}to{transform:none}}
  @keyframes dshDraw{from{stroke-dasharray:var(--len) var(--len);
                          stroke-dashoffset:var(--len)}}
  @keyframes dshPop{from{opacity:0; transform:scale(.4); transform-box:fill-box;
                         transform-origin:50% 50%}}
}
@media (max-width:700px){
  .dsh .dsh-big{font-size:40px}
  .dsh .dsh-s{font-size:12.5px}
}

/* ---------- WhatsApp QR ----------
   White ground and padding, not a transparent image on the section colour: the quiet
   zone is part of the code, and a background running up to the modules is one of the
   two common ways a QR that looks fine stops scanning. The other is shrinking it, which
   is why the width is set here rather than left to a container -- build_qr.py measured
   the code failing to decode at 64px. */
.wa-qr{margin:22px 0 0; display:inline-block; text-align:center}
.wa-qr img{display:block; width:132px; height:132px; background:#fff;
           padding:10px; border:1px solid var(--line); border-radius:12px}
.wa-qr figcaption{margin-top:9px; font-size:12.5px; color:var(--muted);
                  max-width:154px; line-height:1.45}