/* ===================== TOKENS ===================== */
:root{
  /* The logo has no navy in it - the wordmark is a true neutral black,
     #080808, chroma 0. So the deepest ground on the site is anchored to that
     rather than floating free: near the mark's own black, with just enough
     blue left in it to stay part of the navy family above. White reads
     19.8:1 on it. The blue lift lives in the 900-700 steps, where panels are. */
  --navy-950:#080a12;   /* preloader, deepest ground - anchored to the logo */
  --navy-900:#0f1b2e;   /* dark sections */
  --navy-800:#16263f;   /* panels */
  --navy-700:#1e3352;   /* Brand blue. The navy scale above is a set of SURFACES; this is the ink
     that marks an action — links, ticks, the FAQ plus, clause numbers, the
     rule down a callout. --navy-700 was quietly doing both jobs, which is why
     none of those marks read as blue. 7.59:1 on white, so unlike the orange
     it can be read at any size. */
  --blue:#235784;

  /* Brand pale teal. On white it is too light to be anything; on the navy
     grounds it IS the body copy, and one token now replaces the eleven
     hand-mixed blue-greys that were doing that job by eye. 8.7:1 at its
     worst, over --navy-700. Kept as components so every use can set its
     own alpha: rgba(var(--mist-rgb),.78). */
  --mist-rgb:188,219,223;

  /* the text scale, tinted into the same navy family */
  --ink-900:#0f1b2e;
  --ink-800:#1d2b40;
  --ink-600:#465468;
  --ink-500:#5c6673;
  --ink-400:#687280;   /* The display face's second clause, and the only token that relies on the
     large-text rule. 4.09:1 on white, and measured at 3.28:1 against the
     darkest ground the hero photograph actually puts behind it. */
  --ink-450:#737f8e;

  --bg:#fefefe;        /* brand white */
  --bg-soft:#f6f8fb;
  --line:#e3e8ef;
  --line-soft:#eef2f7;
  --line-hover:#cfd8e4;   /* Sampled from the logo, not approximated. The Q's slash is #f85000; the
     site was running #ff5a00, a different colour by deltaE 3.7 - close enough
     to look like a mistake rather than a choice when the mark sits beside it.
     The logo value is also the better one: 3.39:1 on white and 3.22:1 on
     --bg-soft, where the old orange fell to 2.94 and failed. */
  --accent:#f85000;      /* brand orange: marks, dots, figures */
  --accent-rgb:248,80,0; /* The mark's orange sits at hue 19, which is genuinely red-leaning. Darkening
     it in place for contrast pushed it further into brown-red, which is what
     made the site read as "too much red". These derived shades are rotated to
     hue 25: measurably warmer, still unmistakably the same family, and they
     clear 4.5:1 on white, on --bg-soft and on the pricing tint. */
  --accent-600:#c25406;  /* fills carrying white text: 4.60:1 */
  --accent-700:#853903;  /* brand orange is 3.13:1 on white, so it can mark, outline and fill, but it
     cannot be READ. Anything orange that is actually text uses this instead:
     4.87 on white, 4.57 on the soft ground. */
  --accent-text:#bc5106;  /* The focus ring. --accent is 3.10:1 on white but 2.94:1 on --bg-soft, and a
     focus indicator has to clear 3:1 against whatever sits behind it
     (WCAG 1.4.11). Half the sections on this site are bg-soft panels, so the
     ring was failing on half of them. This clears both: 3.96 white, 3.75 soft,
     and it is still visibly the brand orange rather than the darker ink one. */
  --focus:#e04e00;
  --accent-50:#fff5ef;
  --accent-100:#ffe3d5;

  /* the caution callout on the legal pages, the site's only other hue */
  --warn:#b07d10;
  --warn-bg:#fdfaf2;
  --warn-line:#f2e6cd;

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;      /* Aventura's --radius is 18-20px; 12px read as a SaaS template */
  --r-pill:999px;
  /* one padding for every card that pads its own content */
  --card-pad:clamp(22px,2.2vw,30px);
  --max:1680px;
  --nav-h:62px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Motion scale. Before this there were six hand-picked durations (.18 .2 .25
     .3 .55 .6) and only 15 of 28 transitions named --ease at all, so half the
     interface eased on the browser default and half on the brand curve. Same
     values, three names, one curve. */
  --t-fast:.18s;   /* colour, border, background - felt, not watched */
  --t:.22s;        /* the things that actually move: lifts, shadows */

  /* The Aventura build's type system, which is the one to match: Inter Tight
     sets every heading and every figure, Inter reads. Inter Tight is narrower
     and tighter than Inter at the same size, so headings hold together as a
     shape instead of spreading, which is most of why that site looks composed
     rather than generated. No serif, and no script face anywhere. */
  --font-display:"Inter Tight","Inter",system-ui,sans-serif;

  --shadow-sm:0 1px 2px rgba(10,17,32,.06);
  --shadow:0 1px 3px rgba(10,17,32,.08),0 8px 24px rgba(10,17,32,.06);
}

/* present to a screen reader, absent to the eye: used where the visual design
   has no room for a heading the document outline still needs */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;background:var(--bg);color:var(--ink-800);
  font-family:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;
  font-feature-settings:"cv05" 1,"cv11" 1;   /* single-storey l, straight y */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
}

h1,h2,h3,h4{text-wrap:balance;margin:0;color:var(--ink-900);
  font-family:var(--font-display);font-weight:600;letter-spacing:-.026em;line-height:1.14}
h1{font-size:clamp(2.1rem,4.2vw,3.35rem);letter-spacing:-.032em;line-height:1.08}

h2{font-size:clamp(1.6rem,2.9vw,2.3rem);letter-spacing:-.028em}
h3{font-size:clamp(1.02rem,1.3vw,1.15rem)}
h4{font-size:.95rem}

p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--navy-800);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ===================== LAYOUT ===================== */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.sec{padding-block:clamp(46px,4.6vw,76px)}
.sec-sm{padding-block:clamp(32px,3.4vw,50px)}
.bg-soft{background:var(--bg-soft)}
.bordered-t{border-top:1px solid var(--line)}

.head{max-width:58ch}
.label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--ink-400);margin-bottom:14px}
.label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.head p{margin-top:14px;color:var(--ink-500);font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.65;max-width:62ch}

/* Pills, lifting slightly on hover and pressing on click. This single change
   does more for the feel than any other: a 8px-radius button reads as a form
   control, a pill reads as an invitation. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:520;letter-spacing:-.004em;
  padding:13px 24px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.978);transition-duration:.09s}
.btn svg{width:14px;height:14px;flex:0 0 auto}
.ne{width:13px;height:13px;flex:0 0 auto}
.btn-primary{background:var(--navy-900);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--navy-800)}
.btn-light{background:#fff;color:var(--navy-900)}
.btn-light:hover{background:var(--line-soft)}
.btn-ghost{background:#fff;color:var(--ink-800);border-color:var(--line);
  box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--line-hover);background:var(--bg-soft);color:var(--ink-900)}
.cta-band .btn-ghost{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.24);box-shadow:none}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.44)}
.btn-line{background:none;color:var(--ink-800);border-color:rgba(29,43,64,.2)}
.btn-line:hover{border-color:var(--blue);background:rgba(15,27,46,.04)}
/* the same button inside the navy help panel: dark ink on navy was 1.21:1,
   which is to say invisible on every legal page */
.legal-help .btn-line{color:#fff;border-color:rgba(255,255,255,.3)}
.legal-help .btn-line:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.09)}
.btn-lg{padding:13px 22px;font-size:15.5px}

.tlink{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:550;
  color:var(--blue);transition:gap .2s var(--ease),color .2s}
.tlink:hover{gap:9px;color:var(--navy-800)}
.tlink svg{width:13px;height:13px}

/* The wordmark is the real artwork, revealed by wiping a mask across it, so
   every letterform and the slash through the Q are exactly as drawn. Timing
   belongs to the animation: site.js holds the screen until the sequence has
   finished AND the page has loaded, with a ceiling so nothing can stall it. */
.preload{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--navy-950);
  transition:opacity .55s var(--ease),visibility .55s}
.preload::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 44%,rgba(var(--accent-rgb),.13),transparent 70%)}
.preload::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(66% 56% at 50% 50%,#000,transparent 76%);
  mask-image:radial-gradient(66% 56% at 50% 50%,#000,transparent 76%)}
body.loaded .preload{opacity:0;visibility:hidden}
body.preloading{overflow:hidden}
/* Second page onward in the same visit: the head script has already set
   .no-intro, so the preloader never paints and the page scrolls immediately.
   Same shape as the <noscript> rule, for the same reason. */
html.no-intro .preload{display:none}
html.no-intro body.preloading{overflow:auto}

.pl-stage{position:relative;display:grid;justify-items:center;gap:26px;
  padding:0 24px;text-align:center}
.pl-mark{display:block;width:min(330px,62vw);height:auto;clip-path:inset(0 100% 0 0)}
body.pl-go .pl-mark{animation:plWipe .85s var(--ease) .08s forwards}
@keyframes plWipe{to{clip-path:inset(0 -2% 0 0)}}

.pl-tag,.pl-bar{opacity:0}
.pl-tag{font-size:clamp(11px,1.05vw,12.5px);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(var(--mist-rgb),.66)}
body.pl-go .pl-tag{animation:plUp .42s var(--ease) .78s forwards}
.pl-bar{width:min(190px,42vw);height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.11)}
body.pl-go .pl-bar{animation:plUp .34s var(--ease) .90s forwards}
.pl-bar i{display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}
body.pl-go .pl-bar i{animation:plFill .70s var(--ease) .96s forwards}
@keyframes plUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes plFill{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .pl-mark{clip-path:none;animation:none!important}
  .pl-tag,.pl-bar{opacity:1;animation:none!important}
  .pl-bar i{transform:scaleX(1);animation:none!important}
  .preload{transition:none}
}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .25s var(--ease)}
body.nav-solid .nav{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}

/* ---- the bar over the cover ----
   On a page that opens with a dark photographic cover the bar rides over the
   photograph rather than sitting in a white strip above it, then turns solid
   on scroll - the treatment the Aventura build uses. :has() scopes it to
   those pages without needing a per-page body class, and a browser without
   :has() simply keeps the solid white bar, which is the old behaviour. */
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav{
  background:transparent;border-bottom-color:transparent;box-shadow:none}
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-links a,
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-phone{color:rgba(255,255,255,.88)}
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-links a:hover,
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-phone:hover{
  color:#fff;background:rgba(255,255,255,.12)}
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-links a[aria-current="page"]{color:#fff}
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-links a::after{background:#fff}
/* the bar's own CTA, as a white pill like the hero's primary */
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-cta .btn-primary{
  background:#fff;color:var(--navy-950)}
body:has(.phero.is-lead,.flow):not(.nav-solid) .nav-cta .btn-primary:hover{
  background:rgba(255,255,255,.88)}
body:has(.phero.is-lead,.flow):not(.nav-solid) .burger{
  background:transparent;border-color:rgba(255,255,255,.34)}
body:has(.phero.is-lead,.flow):not(.nav-solid) .burger span{background:#fff}

/* Two wordmarks in the bar, one shown at a time: a PNG cannot recolour in CSS,
   and the dark mark disappears against the cover. */
.brand-logo.is-light{display:none}
body:has(.phero.is-lead,.flow):not(.nav-solid) .brand-logo.is-dark{display:none}
body:has(.phero.is-lead,.flow):not(.nav-solid) .brand-logo.is-light{display:block}
/* Three columns, not a flex row: the two 1fr rails are forced equal, so the
   link group sits on the true centre of the bar rather than wherever the
   logo's width happens to leave it. */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;height:62px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand-logo{height:26px;width:auto}

.nav-links{display:flex;align-items:center;justify-content:center;gap:4px}
.nav-links a{position:relative;padding:7px 11px;border-radius:var(--r-sm);
  font-size:14.2px;font-weight:500;color:var(--ink-600);
  transition:background .18s var(--ease),color .18s var(--ease)}
.nav-links a:hover{background:var(--bg-soft);color:var(--ink-900)}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
  height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink-900);font-weight:600}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.nav-phone{font-size:14px;font-weight:500;color:var(--ink-600);padding:7px 10px;
  border-radius:var(--r-sm);transition:color .18s var(--ease)}
.nav-phone:hover{color:var(--navy-800)}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  grid-column:3;justify-self:end;
  width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;align-items:center}
.burger span{display:block;height:1.5px;width:16px;background:var(--ink-800);border-radius:2px}

.sheet{position:fixed;inset:0;z-index:90;background:#fff;
  padding:76px clamp(20px,5vw,40px) 32px;display:flex;flex-direction:column;gap:2px;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:transform .25s var(--ease),opacity .2s,visibility .2s}
.sheet.open{transform:none;opacity:1;visibility:visible}
/* :not(.btn) matters. .sheet a is (0,1,1) and .btn-primary is (0,1,0), so an
   unscoped rule here paints the drawer's own Book a demo button navy on navy:
   1.00:1, the primary call to action on every phone, invisible. */
.sheet a:not(.btn){font-size:17px;font-weight:550;color:var(--ink-900);padding:15px 0;
  border-bottom:1px solid var(--line-soft)}
.sheet a[aria-current="page"]:not(.btn){color:var(--blue)}
.sheet .btn{margin-top:22px;justify-content:center;padding:14px 22px;font-size:15.5px;
  border-bottom:0}
.sheet .close{position:absolute;top:14px;right:clamp(20px,5vw,40px);width:38px;height:38px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink-800);
  font-size:19px;line-height:1;cursor:pointer}
/* 1100, not 960: the approved short CTA ("Book a Custom Walkthrough") is
   wider than the label it replaced, and the centred grid needs room for two
   equal rails. Collapsing sooner beats a cramped bar. */
@media (max-width:1100px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}
.play{width:22px;height:22px;border-radius:50%;background:var(--navy-900);
  display:grid;place-items:center;flex:0 0 auto}
.play::before{content:"";border-left:6px solid #fff;border-block:4px solid transparent;
  margin-left:2px}
/* the closing line of the argument: it sits under both columns, so it takes a
   rule across the full width rather than hanging off the left one */
.fact-close{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--line);font-size:clamp(15.5px,1.2vw,17.5px);
  line-height:1.6;color:var(--ink-900);max-width:72ch;font-weight:550}
.fact-close b{color:var(--accent-text);font-weight:620}
/* the argument ends on an action, not on a full stop */
.fact-act{margin-top:clamp(20px,2.2vw,28px)}

/* A results claim that is one customer's, not a promise. Small, muted and
   attached to the claim it qualifies rather than buried in a footnote. */
.disclaim{display:block;margin-top:8px;font-size:12.6px;line-height:1.55;
  color:var(--ink-400);font-weight:400}

/* ===================== CARD GRID / PANELS ===================== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(24px,2.6vw,36px)}
.card{gap:14px}
.card h3{color:#fff;font-size:1.24rem}
.card p{font-size:15.2px;line-height:1.62;color:var(--ink-600)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}

.panel-rule{display:none}

/* a quiet two-up note strip */
/* auto-fit rather than a fixed pair: the count of notes varies by page, and a
   hardcoded 1fr 1fr left the third one stranded at half width */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:16px}
.note{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:18px 20px}
.note b{display:block;font-size:11.8px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:7px}
.note p{font-size:14.2px;line-height:1.6;color:var(--ink-500)}
.note strong{color:var(--ink-900);font-weight:600}
@media (max-width:760px){.notes{grid-template-columns:1fr}}

/* ===================== CLIENTS ===================== */
.clients{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,4vw,52px);
  align-items:center;margin-top:clamp(30px,3.4vw,44px);
  padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--line)}
.clients p{font-size:14.4px;line-height:1.62;color:var(--ink-500);max-width:66ch}
.clients p strong{color:var(--ink-900);font-weight:600}
.clients-row{display:flex;align-items:center;gap:clamp(22px,3vw,38px)}
/* the Liquivida mark is pale blue: plain grayscale at 60% left it almost
   invisible on white, so the wall is darkened rather than faded */
.clients-row img{height:28px;width:auto;opacity:.75;filter:grayscale(1) brightness(.5);
  transition:opacity .3s,filter .3s,transform .3s var(--ease)}
.clients-row img:hover{opacity:1;filter:none;transform:translateY(-2px)}
@media (max-width:820px){.clients{grid-template-columns:1fr;gap:20px}}

/* ===================== BEFORE / AFTER ===================== */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(34px,4vw,52px)}
.ba-col{gap:18px}
/* the "after" column is the one wearing the brand, the same way the
   recommended plan does: identical card, an orange edge and orange rings */
.ba-now{box-shadow:0 0 0 1px var(--accent),0 28px 62px rgba(252,84,4,.20),
  inset 0 1px 0 rgba(255,255,255,.14)}
.ba-now::after{border-color:rgba(252,84,4,.34)}

.ba-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.ba-was .ba-h{color:rgba(var(--mist-rgb),.72)}
.ba-now .ba-h{color:rgba(var(--mist-rgb),.8)}
.ba-h svg{width:14px;height:14px}
.ba-rows{display:flex;flex-direction:column}
.ba-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.ba-now .ba-row{border-bottom-color:rgba(255,255,255,.1)}
.ba-row:last-child{border-bottom:0}
.ba-row span{font-size:14px;color:rgba(var(--mist-rgb),.78)}
.ba-now .ba-row span{color:rgba(var(--mist-rgb),.78)}
.ba-row b{font-size:15.5px;font-weight:620;letter-spacing:-.02em;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.ba-was .ba-row b{color:rgba(var(--mist-rgb),.86)}
.ba-now .ba-row b{color:#fff}
.ba-q{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:14px;line-height:1.6;color:rgba(var(--mist-rgb),.82)}
@media (max-width:820px){.ba{grid-template-columns:1fr}}
.case-badge{margin:0;display:grid;justify-items:center;gap:10px;text-align:center;
  padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.case-badge img{width:min(66%,168px)}
.case-badge b{font-size:13.4px;font-weight:600;color:var(--ink-900)}
.case-badge span{font-size:12.4px;line-height:1.5;color:var(--ink-500);max-width:28ch}
.case-q{margin-top:clamp(34px,4vw,52px);background:#fff;color:var(--ink-800);
  border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.case-q p{font-size:15.2px;line-height:1.72;color:var(--ink-500)}
.case-q p+p{margin-top:13px}
.case-q footer{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.case-q footer i{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;background:var(--navy-800);color:#fff;font-style:normal;
  font-weight:650;font-size:12.4px}
.case-q footer b{display:block;font-size:14.4px;color:var(--ink-900)}
.case-q footer span{font-size:12.8px;color:var(--ink-400)}
@media (max-width:900px){.case-badge{order:-1}}

/* ===================== QUOTES ===================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(24px,2.6vw,36px)}
.quote{gap:14px}
/* the rating is a string of characters rather than five inline SVGs each */
.quote .stars{font-size:13px;letter-spacing:.14em;color:var(--accent);line-height:1}
.quote blockquote{margin:0;font-size:14.6px;line-height:1.68;color:rgba(var(--mist-rgb),.86)}
.quote footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:2px}
.quote footer b{font-size:13.8px;color:#fff}
.quote footer span{font-size:12.4px;color:rgba(var(--mist-rgb),.74)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ===================== FEATURE LIST ===================== */
.flist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:clamp(24px,2.6vw,36px)}
.flist>div{background:#fff;padding:22px 24px;display:flex;flex-direction:column;gap:7px}
.flist h3{font-size:15px;color:var(--ink-900)}
.flist p{font-size:13.8px;line-height:1.6;color:var(--ink-500)}
@media (max-width:760px){.flist{grid-template-columns:1fr}}

/* ===================== COMPARISON ===================== */
.cmp{margin-top:clamp(34px,4vw,52px);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff}
.cmp-r{display:grid;grid-template-columns:minmax(96px,.62fr) 1fr 1fr;
  border-bottom:1px solid var(--line-soft)}
.cmp-r:last-child{border-bottom:0}
.cmp-r>*{padding:15px 20px;font-size:14.2px;display:flex;align-items:center;gap:8px}
.cmp-head{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.cmp-head>*{font-size:11.8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-400)}
.cmp-head .now{color:var(--blue)}
.cmp-k{font-weight:550;color:var(--ink-800)}
.cmp-was{color:var(--ink-400);border-left:1px solid var(--line-soft)}
.cmp-now{color:var(--ink-800);border-left:1px solid var(--line-soft);background:var(--bg-soft)}
.cmp-now b{font-weight:620;color:var(--ink-900)}
/* the tick and the cross are drawn, not imported ten times over */
.cmp-was,.cmp-now{position:relative;padding-left:44px}
.cmp-was::after,.cmp-now::after{content:"";position:absolute;left:20px;top:50%;
  width:11px;height:11px}
.cmp-was::after{margin-top:-5px;
  background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  transform:rotate(45deg);color:var(--ink-400)}
.cmp-now::after{margin-top:-6px;width:10px;height:6px;
  border-left:1.7px solid var(--blue);border-bottom:1.7px solid var(--blue);
  transform:rotate(-45deg)}
@media (max-width:760px){
  .cmp-was,.cmp-now{padding-left:20px}
  .cmp-was::after,.cmp-now::after{display:none}
}
@media (max-width:760px){
  .cmp-head{display:none}
  .cmp-r{grid-template-columns:1fr}
  .cmp-k{padding-bottom:2px;font-size:11.8px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--blue)}
  .cmp-was,.cmp-now{border-left:0}
  .cmp-was::before{content:"Traditional";flex:0 0 88px;font-size:11.6px;font-weight:600;
    color:var(--ink-400)}
  .cmp-now::before{content:"KlinIQ AI";flex:0 0 88px;font-size:11.6px;font-weight:600;
    color:var(--blue)}
}
.cmp-note{margin-top:22px;font-size:14.4px;line-height:1.65;color:var(--ink-500);
  max-width:66ch}
.cmp-note strong{color:var(--ink-900);font-weight:600}

/* Three separate cards with air between them, the way the Aventura membership
   page sets its plans. The fused block that was here read as a spreadsheet;
   separate cards read as three things you choose between. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.3vw,18px);margin-top:clamp(24px,2.6vw,36px);align-items:stretch}

.plan{gap:18px}

/* the chosen plan is the one wearing the brand: an orange edge and the orange
   inner ring, on the same dark card as every other plan */
.plan-pick{box-shadow:0 0 0 1px var(--accent),0 28px 62px rgba(252,84,4,.20),
  inset 0 1px 0 rgba(255,255,255,.14)}
.plan-pick:hover{transform:translateY(-6px);
  box-shadow:0 0 0 1px var(--accent),0 36px 76px rgba(252,84,4,.28),
  inset 0 1px 0 rgba(255,255,255,.18)}
.plan-pick .plan-list li::before{background:var(--accent)}

/* the feature rows arrive one after another rather than all at once */
.plan-list li{opacity:0;transform:translateY(6px)}
body.rv-on .plan.in .plan-list li{animation:planRow .42s var(--ease) forwards}
body:not(.rv-on) .plan-list li{opacity:1;transform:none}
.plan.in .plan-list li:nth-child(1){animation-delay:.06s}
.plan.in .plan-list li:nth-child(2){animation-delay:.11s}
.plan.in .plan-list li:nth-child(3){animation-delay:.16s}
.plan.in .plan-list li:nth-child(4){animation-delay:.21s}
.plan.in .plan-list li:nth-child(5){animation-delay:.26s}
.plan.in .plan-list li:nth-child(6){animation-delay:.31s}
.plan.in .plan-list li:nth-child(7){animation-delay:.36s}
@keyframes planRow{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .plan-list li{opacity:1;transform:none;animation:none!important}
}
/* The card carries the ring motif, so it clips to its own radius. A badge
   hung above the top edge was simply cut in half by that clip, so it sits
   flush in the corner instead: inside the card, above the padding, clear of
   the plan name. */
.plan-flag{position:absolute;top:0;left:0;z-index:2;
  padding:6px 14px;border-radius:0 0 var(--r) 0;background:var(--accent-600);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.plan-name{font-size:1.15rem;font-weight:620;letter-spacing:-.022em;color:#fff}

.plan-kind{font-size:13px;line-height:1.5;color:rgba(var(--mist-rgb),.74);margin-top:-12px}
.plan-cost{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding-block:15px;
  border-block:1px solid rgba(255,255,255,.13)}
.plan-cost div{display:flex;flex-direction:column;gap:3px}
.plan-cost small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(var(--mist-rgb),.7)}
.plan-cost b{font-family:var(--font-display);font-size:clamp(1.5rem,1.9vw,1.95rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums}
.plan-cost b i{font-style:normal;font-size:.5em;font-weight:500;color:rgba(var(--mist-rgb),.72)}
/* on the tinted column --accent-600 lands at 4.36:1, which is fine at 26px
   and not at 23px, so the figure uses the orange that is legible at any size */
.plan-pick .plan-cost b{color:var(--accent)}
.plan-meta{font-size:12.4px;color:rgba(var(--mist-rgb),.7);margin-top:-12px}
.plan h4{font-size:11.4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(var(--mist-rgb),.7)}
.plan-list{display:flex;flex-direction:column;gap:8px;margin-top:-8px}
.plan-list li{position:relative;padding-left:20px;font-size:13.8px;line-height:1.5;
  color:rgba(var(--mist-rgb),.86)}
/* a round dot, which is what Aventura uses for every list on that site */
.plan-list li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;
  border-radius:50%;background:rgba(var(--mist-rgb),.55)}
.plan .btn{margin-top:auto;width:100%;justify-content:center}
/* The label passed contrast at 17:1, but a navy button on a navy card has no
   edge: the automated check measures text against its own background, not the
   button against what surrounds it. The recommended action wears the accent. */
.plan-pick .btn-primary{background:var(--accent-600);color:#fff}
.plan-pick .btn-primary:hover{background:var(--accent-700)}


@media (max-width:980px){.plans{grid-template-columns:1fr}}

/* ===================== FAQ ===================== */
.faq{margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--line);max-width:860px}
.faq .q{border-bottom:1px solid var(--line)}
.faq .q>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:22px;padding:19px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:15.4px;font-weight:550;letter-spacing:-.012em;
  color:var(--ink-900);transition:color .18s var(--ease)}
.faq .q>button:hover{color:var(--navy-800)}
.faq .plus{position:relative;flex:0 0 auto;width:14px;height:14px}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1.5px;background:var(--blue);transition:transform .25s var(--ease)}
.faq .plus::after{transform:rotate(90deg)}
.faq .q[open-state] .plus::after{transform:rotate(0)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq .a p{padding-bottom:20px;font-size:14.6px;line-height:1.72;color:var(--ink-500);
  max-width:70ch}

/* ===================== TEAM ===================== */

/* Four equal cards on one line. The bento this replaced gave one card a
   double cell and left the other three half empty, which is the thing that
   made the section read as filler. */
.routes{display:grid;gap:clamp(12px,1.1vw,16px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(22px,2.4vw,32px)}

/* The card from the hero, made general. Same construction everywhere it is
   used: deep gradient, generous radius, the figure in the display face over an
   orange rule, and the rings bleeding out of the bottom corner. */
.route,.panel,.plan,.ba-col,.card,.quote{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(24px,2.3vw,32px);border-radius:var(--r-lg);color:#fff;isolation:isolate;
  background:linear-gradient(138deg,var(--navy-800) 0%,var(--navy-900) 48%,var(--navy-950) 100%);
  box-shadow:0 24px 54px rgba(6,14,28,.30),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.route:hover,.panel:hover,.plan:hover,.ba-col:hover,.card:hover,.quote:hover:hover{transform:translateY(-6px);
  box-shadow:0 34px 72px rgba(6,14,28,.42),inset 0 1px 0 rgba(255,255,255,.15)}
.route>*,.panel>*,.plan>*,.ba-col>*,.card>*,.quote>*{position:relative;z-index:1}
/* the ring motif: outer in white, inner in the brand orange, exactly as the
   card in the hero draws it */
.route::before,.panel::before,.plan::before,.ba-col::before,.card::before,.quote::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:250px;height:250px;border:4px solid rgba(255,255,255,.07);border-radius:50%;
  right:-88px;bottom:-124px}
.route::after,.panel::after,.plan::after,.ba-col::after,.card::after,.quote::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:166px;height:166px;border:3px solid rgba(252,84,4,.22);border-radius:50%;
  right:-46px;bottom:-82px}

/* the figure, then the orange rule, the way the hero card sets them */
.route-n,.panel-n{display:block;font-family:var(--font-display);font-size:1.6rem;
  font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#fff;
  padding:0;margin:0;border:0}
.route-n::after,.panel-n::after{content:"";display:block;width:46px;height:2px;
  background:var(--accent);margin:13px 0 18px}
.route h3,.panel h3{color:#fff;font-size:1.1rem;letter-spacing:-.02em;margin-bottom:9px}
.route p,.panel p{font-size:13.8px;line-height:1.62;color:rgba(var(--mist-rgb),.78)}
.route-go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.2px;font-weight:600;color:#fff;transition:gap .3s var(--ease)}
.route-go svg{width:13px;height:13px}
.route:hover .route-go{gap:11px}

/* the first card names the three growth engines, which is what the other three
   cards' extra height used to be doing with nothing */
.route-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.route-list li{display:flex;align-items:center;gap:9px;font-size:13px;
  color:rgba(var(--mist-rgb),.86)}
.route-list li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:0 0 auto}

@media (max-width:1000px){.routes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.routes{grid-template-columns:1fr}}

/* ===================== CTA BAND ===================== */
.cta-band{display:grid;grid-template-columns:1.2fr auto;gap:clamp(22px,3vw,44px);
  align-items:center;padding:clamp(30px,3.4vw,44px);border-radius:20px;color:#fff;
  position:relative;overflow:hidden;
  /* A photograph under the navy, not instead of it. The band was a flat
     gradient on all four pages that use it; the room it now sits on is the one
     the product is about - a waiting area after hours, lamps on, nobody at the
     desk to pick up. The scrim never drops below .86, which holds white at
     11.3:1 and the mist paragraph at 5.4:1 measured against the single
     brightest pixel in the photograph, so the copy is safe wherever it lands. */
  background:
    linear-gradient(138deg,rgba(22,38,63,.93) 0%,rgba(15,27,46,.88) 52%,rgba(10,17,32,.94) 100%),
    url("../img/photo/evening-room.jpg") center/cover no-repeat;
  box-shadow:0 26px 56px rgba(10,17,32,.24),inset 0 1px 0 rgba(255,255,255,.1)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{margin-top:12px;font-size:15.4px;line-height:1.64;
  color:rgba(var(--mist-rgb),.78);max-width:50ch}
.cta-band-act{display:flex;flex-direction:column;gap:10px}
.cta-band-act .btn{justify-content:center}
@media (max-width:820px){.cta-band{grid-template-columns:1fr}}

.panel:hover{border-color:var(--line-hover);box-shadow:var(--shadow)}
/* What the engine actually IS, said plainly at the foot of the card: two are
   agents, one is a managed service, and the card should not let you confuse
   them. Pushed to the bottom so the three cards agree whatever the copy
   length, on a hairline of the card's own light rather than --line, which is
   an ink token and disappears on this navy ground. */
.panel-what{margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;line-height:1.5;font-weight:600;
  color:#fff!important}

/* ===================== NOT ANOTHER TOOL =====================
   The claim on the left, the substance on the right, same two-column shape as
   the problem panel so the page keeps one rhythm. */
.managed{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.managed h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.65rem,2.5vw,2.45rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink-900);margin:14px 0 0}
.managed-body p{font-size:15.4px;line-height:1.68;color:var(--ink-600);max-width:58ch}
.managed-body p+p{margin-top:14px}
.managed-kick{font-weight:600;color:var(--ink-900)!important}
@media (max-width:880px){.managed{grid-template-columns:1fr;gap:20px}}

/* the current page is marked in the bar */
.nav-links a[aria-current="page"]{color:var(--ink-900);font-weight:600}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.sheet a[aria-current="page"]{color:var(--blue)}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--bg-soft);border-top:1px solid var(--line);
  padding:clamp(44px,5vw,64px) 0 26px}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(26px,4vw,48px);
  padding-bottom:clamp(32px,4vw,44px);border-bottom:1px solid var(--line)}
.foot-brand img{height:26px;width:auto;margin-bottom:14px}
.foot-brand p{font-size:13.8px;line-height:1.65;color:var(--ink-500);max-width:34ch}
.foot-cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.foot-cta b{display:block;font-size:14px;font-weight:620;color:var(--ink-900);margin-bottom:4px}
.foot-cta span{display:block;font-size:13.4px;color:var(--ink-500);margin-bottom:14px}
.foot-col h3{font-size:11.4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:14px}
.foot-col ul{display:flex;flex-direction:column;gap:10px}
.foot-col a:not(.btn){font-size:13.8px;color:var(--ink-600);transition:color .18s var(--ease)}
.foot-col a:not(.btn):hover{color:var(--navy-800)}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 26px;padding-top:22px}
.foot-bot p{font-size:12.4px;line-height:1.55;color:var(--ink-400);max-width:78ch}
.foot-bot nav{display:flex;gap:20px}
.foot-bot nav a{font-size:12.4px;color:var(--ink-400)}
.foot-bot nav a:hover{color:var(--navy-800)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

/* ===================== SCROLL TO TOP ===================== */
.to-top{position:fixed;right:clamp(14px,2.5vw,24px);bottom:clamp(14px,2.5vw,24px);z-index:55;
  width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  display:grid;place-items:center;color:var(--ink-600);background:#fff;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),visibility .2s var(--ease),transform .2s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--navy-800);border-color:var(--line-hover)}
.to-top svg{width:15px;height:15px}

/* ---- reveal ----
   Direction carries meaning: the body rises, a side panel enters from its own
   side. One easing curve throughout so it reads as a single system. */
body.rv-on .rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){body.rv-on .rv{opacity:1;transform:none}}

/* ---- hover: small, fast, only on things that are actionable ---- */
.card:hover,.quote:hover,.plan:hover:hover{transform:translateY(-3px)}
.btn svg,.tlink svg{transition:transform .25s var(--ease)}
.btn:hover svg,.tlink:hover svg{transform:translateX(3px)}
.clients-row img{transition:opacity .3s,filter .3s,transform .3s var(--ease)}
.clients-row img:hover{transform:translateY(-2px)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
  height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .card:hover,.quote:hover,.plan:hover:hover{transform:none}
}

/* ===================== INNER PAGE HEAD (legal) ===================== */
.phead{background:linear-gradient(180deg,var(--bg-soft),var(--bg));
  border-bottom:1px solid var(--line);
  padding-top:clamp(96px,10vw,128px);padding-bottom:clamp(34px,4vw,52px)}
.phead h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:14px;max-width:18ch}
.phead h1 em{font-style:normal;color:var(--blue)}
.phead p{color:var(--ink-500);font-size:15.4px;line-height:1.65;max-width:56ch}
.phead .eyebrow,.phead .label{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--blue);margin-bottom:14px}

.meta-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
  margin-top:clamp(26px,3vw,38px);background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.meta-card div{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.meta-card dt{font-size:10.8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400)}
.meta-card dd{margin:0;font-size:13.6px;line-height:1.5;color:var(--ink-800);
  word-break:break-word}
.meta-card dd a{color:var(--blue)}

/* ===================== LEGAL BODY ===================== */
.legal{max-width:800px}
.legal-art>section{padding-block:clamp(24px,2.8vw,34px);border-bottom:1px solid var(--line-soft)}
.legal-art>section:last-child{border-bottom:0}
.legal-art h2{display:flex;align-items:baseline;gap:11px;margin-bottom:14px;
  font-size:1.1rem;letter-spacing:-.02em;color:var(--ink-900)}
.legal-art h2 b{flex:0 0 auto;font-size:12px;font-weight:650;color:var(--blue);
  font-variant-numeric:tabular-nums}
.legal-art p{font-size:14.8px;line-height:1.75;color:var(--ink-500)}
.legal-art p+p{margin-top:12px}
.legal-art strong{color:var(--ink-900);font-weight:600}

.legal-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.legal-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.6px;
  line-height:1.7;color:var(--ink-500)}
.legal-list li>svg{width:14px;height:14px;flex:0 0 auto;margin-top:5px;color:var(--blue)}
.legal-list li>b{flex:0 0 auto;min-width:18px;font-size:12.6px;font-weight:650;
  color:var(--blue);margin-top:2px;font-variant-numeric:tabular-nums}
.legal-list.is-defs li{flex-direction:column;gap:4px}
.legal-list.is-defs dfn{font-style:normal;font-weight:600;color:var(--ink-900);font-size:14.6px}

.callout{margin-top:16px;padding:16px 18px;border-radius:var(--r);background:var(--bg-soft);
  border:1px solid var(--line);border-left:3px solid var(--blue)}
.callout h3{font-size:14px;margin-bottom:6px;color:var(--ink-900)}
.callout p{font-size:14px;line-height:1.68;color:var(--ink-500)}
.callout-warn{border-left-color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}

.legal-caps{margin-top:14px;padding:16px 18px;border-radius:var(--r);
  background:var(--bg-soft);border:1px solid var(--line)}
.legal-caps p{font-size:12.8px;line-height:1.78;color:var(--ink-500)}
.legal-caps p+p{margin-top:10px}

.signoff{display:flex;align-items:center;gap:13px;margin-top:clamp(28px,3.4vw,40px);
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.signoff i{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-style:normal;font-weight:650;font-size:13px;color:#fff;
  background:var(--ink-900)}
.signoff small{display:block;font-size:10.8px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-400);margin-bottom:4px}
.signoff b{display:block;font-size:15px;font-weight:620;color:var(--ink-900)}
.signoff span{font-size:13px;color:var(--ink-500)}

.legal-help{margin-top:clamp(30px,3.6vw,44px);padding:clamp(24px,3vw,34px);
  border-radius:var(--r);background:var(--navy-900);color:#fff}
.legal-help h2{font-size:1.3rem;margin-bottom:10px;color:#fff}
.legal-help p{font-size:14.6px;line-height:1.65;color:rgba(var(--mist-rgb),.76);
  max-width:54ch;margin-bottom:18px}
.lh-act{display:flex;flex-wrap:wrap;gap:10px}

.legal-rail{margin-top:clamp(30px,3.6vw,44px);padding-top:24px;border-top:1px solid var(--line)}
.legal-rail h3{font-size:11.4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:14px}
.legal-rail ul{display:flex;flex-wrap:wrap;gap:8px}
.legal-rail a{display:inline-flex;padding:8px 14px;border-radius:var(--r-sm);font-size:13.4px;
  color:var(--ink-600);border:1px solid var(--line);background:#fff;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.legal-rail a:hover{border-color:var(--line-hover);color:var(--navy-800)}
.legal-rail a[aria-current="page"]{background:var(--ink-900);border-color:var(--ink-900);
  color:#fff}

/* ---- the split itself ----
   No .wrap around this one. The left cell pays the wrap's gutter itself, so
   the copy lines up with every other section while the photo runs off the
   right edge of the screen. */
.phero{position:relative;margin-top:var(--nav-h);overflow:hidden;isolation:isolate;
  background:var(--bg);border-bottom:1px solid var(--line)}

/* The photograph is the ground of the whole section, not a panel bolted to one
   side of it. Everything else sits on top in the normal grid, so there is no
   absolutely positioned furniture left to drift out of alignment. */
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--focal,72% 26%)}
/* The ground is near-opaque where the copy is set and clears as it travels
   right, so the photograph is visible exactly where nothing is written. */
.phero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,255,255,.975) 0%,rgba(255,255,255,.96) 34%,
    rgba(255,255,255,.86) 48%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.12) 100%),
  linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 20%)}

.phero-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,3.6vw,64px);align-items:center;
  /* Shorter now that the photograph carries nothing. A hero holding only a
     headline does not need 610px; it needs enough room to breathe and then
     the page underneath. */
  min-height:clamp(340px,34vw,450px);padding-block:clamp(38px,4.4vw,62px)}
/* The home page is the cover of the site, so it is sized like one. At
   610px the hero read as the first section rather than the page - you saw
   the whole thing plus the top of the next band, and nothing had any
   presence. It now takes the viewport it is given, with a floor so short
   laptops are not cramped and a ceiling so a tall monitor does not stretch
   the type apart. The strip below is part of the same grid, so it sits on
   the fold rather than under it. */
.phero.is-lead .phero-in{
  grid-template-rows:1fr auto;
  min-height:min(calc(82svh - var(--nav-h)),700px);
  padding-block:clamp(36px,4vw,56px) 0}
.phero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}

/* ===================== THE DARK COVER =====================
   The home hero inverts. Every other .phero keeps the light treatment - a
   photograph washed near-white so ink copy can sit on it - because those
   pictures are daylit rooms. The cover's picture is not: it is the same
   reception at night with one phone lit, which is the thing the product is
   actually about, and washing that in white would turn it to grey mud.

   So here the scrim runs dark instead of light and the copy knocks out. The
   chat card is deliberately left white: on a near-black ground it stops being
   a panel and becomes the one lit surface in the frame, which is exactly what
   it is meant to say.

   The scrim never drops below .82 on the left where the headline sits, so the
   copy holds even if the photograph behind it is ever replaced with a lighter
   one. The orange glow on the right is left almost untouched. */
.phero.is-lead{background:var(--navy-950);border-bottom-color:rgba(255,255,255,.08);
  /* the photograph runs to the very top of the viewport, under the bar, so
     cancel the nav-height offset and pay it back as padding on the content */
  margin-top:0;padding-top:var(--nav-h)}
.phero.is-lead .phero-bg::after{background:
  linear-gradient(90deg,rgba(6,8,14,.90) 0%,rgba(6,8,14,.82) 30%,rgba(6,8,14,.58) 48%,
    rgba(6,8,14,.16) 72%,rgba(6,8,14,0) 100%),
  linear-gradient(180deg,rgba(6,8,14,.55),rgba(6,8,14,0) 24%)}

.phero.is-lead .eyebrow{color:rgba(var(--mist-rgb),.86)}
.phero.is-lead h1{color:#fff}
/* the second clause steps back in colour, as it does on the light heroes -
   but toward the brand orange, which is the only other colour in the mark */
.phero.is-lead h1 em{color:var(--accent)}
.phero.is-lead .phero-lede{color:rgba(var(--mist-rgb),.82)}
.phero.is-lead .hmicro li{color:rgba(var(--mist-rgb),.80)}
.phero.is-lead .hmicro svg{color:var(--accent)}
/* .checks and .htrio are both built for the light page ground: dark text in a
   pale --accent-50 tile. All of it vanishes on the navy hero, so invert them
   there rather than writing separate dark components. */
.phero.is-lead .checks li{color:rgba(var(--mist-rgb),.88)}
.phero.is-lead .checks li>i{background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.42);color:var(--accent)}
.phero.is-lead .htrio b{color:#fff}
.phero.is-lead .htrio span{color:rgba(var(--mist-rgb),.78)}
.phero.is-lead .htrio i{background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.42);color:var(--accent)}
/* --blue is a mid-navy: legible on white, invisible on the navy hero */
.phero.is-lead .tlink{color:#fff}
.phero.is-lead .tlink:hover{color:var(--accent)}

/* A hero that carries copy but no buttons does not need the full cover
   height. On the pricing page especially: the plans are the page, so the
   cover has to end early enough that the first card is already showing. */
.phero.is-short{min-height:0}
.phero.is-short .phero-in{min-height:clamp(320px,40vh,430px);
  padding-block:clamp(36px,4vw,54px)}
/* four short phrases stacked cost ~160px of cover; two columns halve that
   without shrinking the type */
.phero.is-short .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px clamp(18px,2.4vw,34px);max-width:52rem}
@media (max-width:700px){
  .phero.is-short .checks{grid-template-columns:1fr}}

/* the secondary button has nothing to knock out of on a dark ground, so it
   outlines instead of filling - the same move .cta-band already makes */
/* On a dark cover the navy primary reads as a hole, not a button. White pill
   with navy type, the way the Liquivida hero does it - the strongest possible
   contrast against the photograph, and the ghost beside it stays outlined. */
.phero.is-lead .btn-primary{background:#fff;color:var(--navy-950);
  box-shadow:0 2px 10px rgba(6,8,14,.28)}
.phero.is-lead .btn-primary:hover{background:rgba(255,255,255,.90);
  box-shadow:0 4px 16px rgba(6,8,14,.34)}
.phero.is-lead .btn-primary svg{color:var(--navy-950)}
.phero.is-lead .btn-ghost{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.26);box-shadow:none}
.phero.is-lead .btn-ghost:hover{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.44);color:#fff}
.phero.is-lead .btn-ghost .play{background:#fff}

/* ===================== PROOF, INSIDE THE COVER =====================
   The hero grid keeps a second row for exactly this. Full width, hairline
   above it, and the client marks knocked out to white - liquivida.png and
   dripbar.png are both dark artwork drawn for a white page, so on the navy
   they are inverted to silhouettes rather than left as dark smudges. */
.phero-proof{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,44px);align-items:center;
  margin-top:clamp(20px,2.6vw,34px);
  padding:clamp(15px,1.8vw,20px) 0 clamp(18px,2.2vw,26px);
  border-top:1px solid rgba(255,255,255,.14)}
.phero-proof p{font-size:13.5px;line-height:1.6;margin:0;
  color:rgba(var(--mist-rgb),.74);max-width:78ch}
.phero-proof p strong{color:#fff;font-weight:600}
.phero-proof .disclaim{margin-top:6px;color:rgba(var(--mist-rgb),.5);font-size:12.2px}
.phero-logos{display:flex;align-items:center;gap:clamp(20px,2.6vw,34px)}
.phero-logos img{height:25px;width:auto;opacity:.7;
  filter:brightness(0) invert(1);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.phero-logos img:hover{opacity:1;transform:translateY(-2px)}
@media (max-width:820px){
  .phero-proof{grid-template-columns:1fr;gap:15px}
  .phero-logos{gap:24px}}

.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);margin-bottom:clamp(16px,1.8vw,22px)}

.phero h1{font-family:var(--font-display);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(2rem,3.5vw,3rem);line-height:1.1;letter-spacing:-.012em;
  color:var(--ink-900);margin-bottom:clamp(16px,1.8vw,24px)}
/* 3.55rem is a section heading. A cover headline is the largest thing on the
   site and has to hold the whole viewport: the display face at ~74px, tighter,
   because optical sizing loosens the fit as it grows. */
.phero.is-lead h1{font-size:clamp(2.45rem,5.15vw,4.6rem);line-height:1.04;
  letter-spacing:-.022em}
.phero.is-lead h1 em{margin-top:.12em}
.phero.is-lead .phero-lede{font-size:clamp(16px,1.25vw,18.5px);max-width:44ch}
/* the second clause carries the promise, so it steps back in weight of colour
   rather than in size */
.phero h1 em{display:block;font-style:normal;color:var(--ink-450)}

/* Must sit AFTER .phero.is-lead h1 above, which is the same specificity and
   would otherwise win on source order. The short heroes carry longer
   headlines, so they need smaller type and a balanced wrap - without it the
   About headline breaks to a dangling "...by a". */
.phero.is-short h1{font-size:clamp(2.05rem,3.5vw,2.9rem);line-height:1.06;
  max-width:20ch;text-wrap:balance}

/* ---- the shared-goal box that closes the about story ---- */
.goalbox{display:flex;align-items:center;gap:18px;width:100%;
  margin-top:clamp(22px,2.6vw,30px);padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .2s,transform .25s var(--ease)}
a.goalbox:hover{border-color:var(--line-hover);transform:translateY(-2px)}
.goalbox small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-400);margin-bottom:9px}
.goalbox b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.12rem,1.5vw,1.38rem);line-height:1.34;letter-spacing:-.01em;
  color:var(--ink-900)}
.goalbox svg{width:19px;height:19px;flex:0 0 auto;margin-left:auto;color:var(--accent)}
@media (max-width:520px){.goalbox{gap:12px;padding:16px}}
.phero-lede{font-size:clamp(15.5px,1.12vw,17.2px);line-height:1.62;color:var(--ink-600);
  max-width:46ch;margin-bottom:clamp(22px,2.6vw,32px)}
.phero-act{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(24px,2.8vw,34px)}

/* ---- the three reassurances under the buttons ---- */
.hmicro{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0}
.hmicro li{display:flex;align-items:center;gap:10px;font-size:13.6px;line-height:1.4;
  font-weight:500;color:var(--ink-600);max-width:20ch}
.hmicro svg{width:19px;height:19px;flex:0 0 auto;color:var(--ink-800)}

/* A solid card with a real shadow, not frosted glass. Blurred translucent
   panels are the most recognisable surface on a generated page, and they make
   every piece of small print inside them depend on the crop behind. */
.chatcard{border-radius:var(--r-lg);padding:18px 18px 16px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,22,32,.04),0 18px 44px rgba(16,22,32,.13)}
@media (max-width:900px){
  .phero-in{grid-template-columns:1fr;gap:clamp(24px,4vw,32px);min-height:0;
    align-items:start;padding-block:clamp(34px,5vw,48px)}
  /* stacked, the copy runs the full width, so the ground has to be even */
  .phero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.975) 0%,
    rgba(255,255,255,.968) 52%,rgba(255,255,255,.85) 100%)}
  /* The light cover got a vertical scrim here; the dark one never did, so on a
     phone the headline was sitting straight on the KLINIQ wall lettering. The
     90deg scrim only works while the copy occupies the left column. */
  .phero.is-lead .phero-bg::after{background:
    linear-gradient(180deg,rgba(6,8,14,.90) 0%,rgba(6,8,14,.84) 46%,rgba(6,8,14,.9) 100%)}
}
@media (max-width:560px){
  .chatcard{padding:14px 14px 12px}
}

/* ---- the booking card, same anchor as the conversation card ---- */
.bookcard{padding:22px 22px 20px}
.bookcard h2{font-size:1.22rem;letter-spacing:-.022em;margin-bottom:8px}
.bookcard>p{font-size:13.8px;line-height:1.58;color:var(--ink-500);margin-bottom:18px}
.bookcard .btn{width:100%;justify-content:center}
.bc-or{display:flex;align-items:center;gap:12px;margin:14px 0;
  font-size:12.4px;color:var(--ink-400)}
.bc-or::before,.bc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bc-marks{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line-soft)}
.bc-marks li{display:flex;align-items:center;gap:7px;font-size:12.4px;color:var(--ink-600)}
.bc-marks svg{width:13px;height:13px;color:var(--accent-600);flex:0 0 auto}
@media (max-width:560px){.bookcard{padding:18px 18px 16px}}

/* ---- the contact panel: the invitation, and the four ways in ---- */
.cpanel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(26px,3.6vw,48px);border-radius:var(--r-lg);
  background:var(--bg-soft);border:1px solid var(--line)}
.cpanel h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.42rem,2.3vw,1.96rem);line-height:1.18;letter-spacing:-.012em;
  margin-bottom:14px}
.cpanel>div>p{font-size:15px;line-height:1.68;color:var(--ink-600);max-width:44ch}
.cways{display:flex;flex-direction:column}
.cways>*{display:grid;grid-template-columns:26px 90px 1fr;align-items:start;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cways>*:first-child{padding-top:0}
.cways>*:last-child{border-bottom:0;padding-bottom:0}
.cways svg{width:17px;height:17px;color:var(--ink-400);margin-top:1px}
.cw-k{font-size:13.4px;font-weight:600;color:var(--ink-800)}
.cw-v{font-size:14.2px;line-height:1.5;color:var(--ink-800)}
.cw-v small{display:block;font-size:12.6px;line-height:1.5;color:var(--ink-500);margin-top:3px}
a.cways-row:hover .cw-v{color:var(--accent-600)}
@media (max-width:1000px){.cpanel{grid-template-columns:1fr;gap:28px}}
@media (max-width:520px){.cways>*{grid-template-columns:22px 1fr;gap:10px}
  .cw-k{grid-column:2;margin-bottom:-6px;font-size:12px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-400)}
  .cw-v{grid-column:2}}

/* ---- the proof, read straight off the photograph ---- */
.statcard{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,22,32,.04),0 18px 44px rgba(16,22,32,.13)}
.statcard div{padding:clamp(16px,1.8vw,22px);
  border-right:1px solid rgba(18,24,33,.09);border-bottom:1px solid rgba(18,24,33,.09)}
.statcard div:nth-child(2n){border-right:0}
.statcard div:nth-child(n+3){border-bottom:0}
.statcard b{display:block;font-size:clamp(1.42rem,1.95vw,1.8rem);font-weight:650;
  letter-spacing:-.035em;line-height:1;color:var(--ink-900);margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.statcard span{display:block;font-size:12.6px;line-height:1.45;color:var(--ink-600)}

@media (max-width:560px){.statcard div{padding:14px}}

/* ---- four figures in a panel, each with its own mark ---- */
.icostats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.icostats>div{padding:clamp(17px,1.9vw,24px);border-left:1px solid var(--line)}
.icostats>div:first-child{border-left:0}
.icostats svg{display:block;width:21px;height:21px;color:var(--ink-800);margin-bottom:15px}
.icostats b{display:block;font-size:clamp(1.24rem,1.6vw,1.54rem);font-weight:650;
  letter-spacing:-.032em;line-height:1;color:var(--ink-900);margin-bottom:9px;
  font-variant-numeric:tabular-nums}
.icostats span{display:block;font-size:12.8px;line-height:1.5;color:var(--ink-600)}
@media (max-width:1000px){.icostats{grid-template-columns:1fr 1fr}
  .icostats>div:nth-child(3){border-left:0}
  .icostats>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.icostats{grid-template-columns:1fr}
  .icostats>div{border-left:0}
  .icostats>div+div{border-top:1px solid var(--line)}}

.aside-split.is-top{align-items:start}

/* ---- the icon trio under a page head ---- */
.htrio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);
  width:100%;margin-top:clamp(26px,3vw,38px)}
.htrio i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--accent-100);background:var(--accent-50);color:var(--accent-600);
  margin-bottom:13px}
.htrio svg{width:20px;height:20px}
.htrio b{display:block;font-size:14px;font-weight:620;color:var(--ink-900);
  line-height:1.35;margin-bottom:5px}
.htrio span{display:block;font-size:13px;line-height:1.5;color:var(--ink-500)}
@media (max-width:620px){.htrio{grid-template-columns:1fr;gap:18px;max-width:none}
  .htrio i{width:38px;height:38px;margin-bottom:9px}}

/* ---- circled ticks, for the short reassurance lists ---- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;align-items:center;gap:12px;font-size:14.8px;font-weight:550;
  color:var(--ink-800)}
.checks li>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  flex:0 0 auto;background:var(--accent-50);border:1px solid var(--accent-100);
  color:var(--accent-600)}
.checks li>i svg{width:14px;height:14px}

/* ============================================================
   THE PROBLEM, as an argument rather than a row of tiles
   Claim on the left, evidence on the right, sources under each figure so the
   numbers can be checked.
   ============================================================ */
.prob{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1.1fr);
  gap:clamp(30px,4.6vw,76px);align-items:start}
.prob h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.55rem,2.5vw,2.12rem);line-height:1.18;letter-spacing:-.012em;
  color:var(--ink-900);margin-bottom:0}
.prob h2 em{display:block;font-style:italic;color:var(--ink-450);margin-top:2px}
.prob-lede{margin-top:clamp(18px,2vw,24px);font-size:15.2px;line-height:1.66;
  color:var(--ink-600);max-width:50ch}
/* where the figures opposite come from - a caveat, so it sits below the
   argument in both size and weight */
.prob-note{font-size:13.6px;color:var(--ink-400)}
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);list-style:none;margin:0;padding:0}
.pstats li{display:flex;flex-direction:column;
  padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--line)}
.pstats li:first-child{padding-left:0;border-left:0}
.pstats b{display:block;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,2.15vw,1.95rem);line-height:1;letter-spacing:-.014em;
  color:var(--ink-900);margin-bottom:10px}
.pstats span{display:block;font-size:13px;line-height:1.5;color:var(--ink-600)}
.pstats cite{display:block;font-style:normal;font-size:11.6px;line-height:1.4;
  color:var(--ink-400);margin-top:auto;padding-top:14px}
@media (max-width:1040px){.prob{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}}
@media (max-width:700px){
  .pstats{grid-template-columns:1fr 1fr;gap:22px 18px}
  .pstats li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:420px){.pstats{grid-template-columns:1fr}
  .pstats li{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:18px}
  .pstats li:first-child{border-top:0;padding-top:0}}

/* ============================================================
   A HEADING BESIDE ITS CONTENT
   Used where a section has one claim and two or three artefacts to prove it:
   the claim sits left and holds the gutter, the artefacts fill the right.
   ============================================================ */
.aside-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:clamp(30px,4.6vw,72px);align-items:center}
.aside-split .as-copy h2{margin-bottom:16px}
.aside-split .as-copy p{font-size:15.2px;line-height:1.68;color:var(--ink-600);max-width:46ch}
@media (max-width:960px){.aside-split{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   PRICING, ALL IN ONE VIEW
   The plans are the page, so they sit directly under the cover. The flat grey
   .shero header this page used to open with is gone - it now takes the same
   dark photographic cover as the rest of the site.
   ============================================================ */

/* ---- the two promises, one strip ---- */
.promises{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(20px,2.4vw,28px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.promises>div{display:flex;gap:14px;padding:clamp(16px,2vw,22px)}
.promises>div+div{border-left:1px solid var(--line)}
.promises i{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:9px;background:var(--bg-soft);color:var(--ink-800)}
.promises svg{width:17px;height:17px}
.promises b{display:block;font-size:14px;font-weight:620;color:var(--ink-900);margin-bottom:5px}
.promises p{font-size:13.2px;line-height:1.6;color:var(--ink-500)}
@media (max-width:760px){.promises{grid-template-columns:1fr}
  .promises>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ---- FAQ beside the booking band ---- */
.faq-split{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);
  align-items:stretch;border-top:1px solid var(--line)}
.faq-side{background:var(--bg-soft);
  padding-block:clamp(48px,6vw,84px);
  padding-left:max(clamp(18px,4vw,56px),calc((100vw - var(--max))/2 + clamp(18px,4vw,56px)));
  padding-right:clamp(26px,3.4vw,56px)}
.faq-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:clamp(22px,2.6vw,32px)}
.faq-head h2{margin-bottom:6px}
.faq-head p{font-size:14.4px;color:var(--ink-500)}
.faq-ask{text-align:right}
.faq-ask span{display:block;font-size:13.4px;color:var(--ink-500);margin-bottom:5px}
.cta-side{background:var(--navy-900);color:#fff;display:flex;flex-direction:column;
  justify-content:center;
  padding-block:clamp(48px,6vw,84px);
  padding-right:max(clamp(18px,4vw,56px),calc((100vw - var(--max))/2 + clamp(18px,4vw,56px)));
  padding-left:clamp(26px,3.4vw,56px)}
.cta-side .label{color:rgba(var(--mist-rgb),.7)}
.cta-side h2{color:#fff;font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:14px}
.cta-side p{font-size:14.8px;line-height:1.65;color:rgba(var(--mist-rgb),.78);
  max-width:40ch;margin-bottom:24px}
.cta-side-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:980px){
  .faq-split{grid-template-columns:1fr}
  .faq-side{padding-right:max(clamp(18px,4vw,56px),calc((100vw - var(--max))/2 + clamp(18px,4vw,56px)))}
  .cta-side{padding-left:max(clamp(18px,4vw,56px),calc((100vw - var(--max))/2 + clamp(18px,4vw,56px)))}
  .faq-ask{text-align:left}
}

/* ============================================================
   TOUCH

   WCAG 2.2 asks for a 24x24 CSS pixel target, with an exception for links
   sitting inline in a sentence. The footer's link columns are navigation, not
   prose, and were rendering 16px tall: technically a failure and, more to the
   point, genuinely fiddly to hit on a phone. The extra height is padding, so
   nothing moves visually except the gaps, which tighten to compensate.
   ============================================================ */
.foot-col a:not(.btn),
.foot-bot nav a{display:inline-flex;align-items:center;min-height:24px}
.foot-col ul{gap:4px}
.foot-bot nav{gap:14px}

/* the same floor for the standalone text links, which measured 23px */
.tlink{min-height:24px}

/* the legal pages' contact card: each dd holds nothing but the link, so it is
   a target in its own right rather than a link inside a sentence */
.meta-card dd a{display:inline-flex;align-items:center;min-height:24px}

/* Nothing anywhere drops below 11px. These are all uppercase letterspaced
   labels, which lose legibility fastest at small sizes, and a floor that only
   applied on phones just meant the same label was harder to read on a tablet. */
.plan-flag,
.plan-cost b i,
.meta-card dt,
.signoff small{font-size:11px}

/* the booking card was sized to float over a photo; on its own ground it
   needs a width of its own rather than the full measure of the page */
.bookrow{display:flex;justify-content:center}
.bookrow .bookcard{width:min(560px,100%)}

/* four figures read as four figures in a row; stacked 2x2 across the full
   width each cell was wider than the number inside it */
.sec-sm .statcard{grid-template-columns:repeat(4,minmax(0,1fr))}
.sec-sm .statcard div:nth-child(2n){border-right:1px solid rgba(18,24,33,.09)}
.sec-sm .statcard div:nth-child(4),
.sec-sm .statcard div:nth-child(n+3){border-bottom:0}
.sec-sm .statcard div:last-child{border-right:0}
@media (max-width:820px){
  .sec-sm .statcard{grid-template-columns:1fr 1fr}
  .sec-sm .statcard div:nth-child(2n){border-right:0}
  .sec-sm .statcard div:nth-child(-n+2){border-bottom:1px solid rgba(18,24,33,.09)}
}
@media (max-width:460px){
  .sec-sm .statcard{grid-template-columns:1fr}
  .sec-sm .statcard div{border-right:0}
  .sec-sm .statcard div:not(:last-child){border-bottom:1px solid rgba(18,24,33,.09)}
}

/* ============================================================
   ONE CARD FORM

   Before this block the site had two radii (14px and 20px), paddings from
   16px to 48px, and backgrounds split between white and the soft ground,
   depending on which section a card happened to live in. A card on the
   pricing page did not match a card on the about page, which is exactly the
   thing that makes a site feel assembled rather than designed.

   Everything below is the same object. Light or dark is the only thing that
   changes, and that is decided by the ground it sits on, not by the card.
   ============================================================ */

/* 1. every card is the same shape */
.card,.plan,.quote,.note,.goalbox,.bookcard,.cpanel,.statcard,.icostats,
.ba-col,.case-badge,.callout,.meta-card,.signoff,.route,.panel,.legal-help,
.promises,.faq{border-radius:var(--r-lg)}

/* 2. every light card is white on a hairline, whatever section it is in */
.note,.goalbox,.bookcard,.cpanel,.statcard,.icostats,
.case-badge,.signoff,.promises{background:#fff;border:1px solid var(--line)}
/* the dark half of the before/after pair: same form, dark ground */
.ba-now{background:linear-gradient(138deg,var(--navy-800) 0%,var(--navy-900) 48%,var(--navy-950) 100%);
  border-color:transparent;color:#fff}

/* 3. every card that pads its own content pads it by the same amount.
      Cards whose cells do the padding (.statcard, .icostats, .meta-card,
      .promises) are left
      alone, because padding them twice is what caused the 48px outlier. */
.note,.goalbox,.bookcard,.cpanel,.case-badge,.signoff,
.route,.panel,.plan,.ba-col,.card,.quote{padding:var(--card-pad)}

/* 4. the caution callout keeps its accent edge, and only that */
.callout{padding:var(--card-pad);background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--navy-700)}
.callout-warn{border-color:var(--warn-line);border-left-color:var(--warn);
  background:var(--warn-bg)}

/* 5. one lift, one shadow, for every card that responds to a pointer */
.card:hover,.plan:hover,.quote:hover:hover,.route:hover,.panel:hover,
a.goalbox:hover{transform:translateY(-6px)}
a.goalbox:hover{box-shadow:0 26px 60px rgba(10,17,32,.13);border-color:var(--line-hover)}
.route:hover,.panel:hover{box-shadow:0 34px 72px rgba(6,14,28,.42),inset 0 1px 0 rgba(255,255,255,.15)}

/* 6. one voice inside them: the display face for the title, one body size */
.card h3,.route h3,.panel h3,.ba-col h3,.bookcard h2{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-.022em}
.card p,.note p,.quote p,.goalbox span,.ba-col p{font-size:14.4px;line-height:1.62}
.note p{color:var(--ink-600)}
/* these cards are dark now, so their body copy is light */
.card p,.ba-col p,.quote p{color:rgba(var(--mist-rgb),.84)}

@media (prefers-reduced-motion:reduce){
  .card:hover,.plan:hover,.quote:hover:hover,.route:hover,.panel:hover,
  a.goalbox:hover{transform:none}
}

/* The plans became the premium card, whose rule sets display:flex. That rule
   lives later in this file, so the subgrid block had to move after it or the
   three columns stopped sharing rows entirely. */
/* Every card carries the same seven rows: name, kind, cost, note, list
   heading, features, action. Subgrid hands those rows to the parent grid, so
   the three prices sit on one line, the three feature lists start on one line,
   and the three buttons finish on one line, whatever the cards contain. The
   flex fallback below keeps older engines sane. */
@supports (grid-template-rows:subgrid){
  .plans{grid-template-rows:auto auto auto auto auto 1fr auto}
  .plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;gap:0}
  .plan>*{margin:0}
  .plan-kind{padding-top:6px}
  .plan-cost{margin-top:16px}
  .plan-meta{padding-top:8px}
  .plan h4{padding-top:16px}
  .plan-list{padding-top:12px}
  .plan .btn{margin-top:18px;align-self:end}
}

/* .plan>* sets position:relative on every child so the ring motif stays
   behind them. It has the same specificity as .plan-flag and comes later, so
   it was turning the RECOMMENDED badge into a grid item: the badge took row 1
   and shoved every other row down one, in that card only. Absolutely
   positioned children are not auto-placed, which is the whole point. */
.plan .plan-flag{position:absolute}

/* ===================== PRINT ===================== */
@media print{
  .nav,.sheet,.to-top,.legal-help,.legal-rail,.cpanel,.site-footer{display:none!important}
  body{background:#fff;color:#000}
  .phead{background:none;padding-top:0;border-bottom:1px solid #ccc}
  body.rv-on .rv{opacity:1;transform:none}
  .legal-art>section{break-inside:avoid}
}

/* ============================================================
   HOW IT WORKS: THE FLOW STAGE

   The artwork is a clean plate - cards with icons but no words, a blank
   message bubble, an empty wall panel. Everything readable is markup layered
   on top, placed as a percentage of the image box, so the type is crisp at
   any size and tracks the artwork exactly as it scales. cqw units size the
   type against the stage itself rather than the viewport, so a label never
   drifts out of its card.
   ============================================================ */
/* Same band height as the photographic covers at EVERY width. The artwork has
   a fixed aspect, so the section holds the reference height and the plate is
   centred inside it: capped at the width where it exactly fills 605px, and
   centred with the navy showing through below that. Without the cap it grew
   past the other covers on wide screens. */
.flow{background:var(--navy-950);margin-top:0;padding-top:var(--nav-h);
  min-height:calc(605px + var(--nav-h));display:grid;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08)}
/* The frame clips; the plate keeps the artwork's own coordinate space so every
   percentage position stays valid. Cropping the file instead would mean
   re-measuring all six overlays. 1672x633 of the 941-tall plate, offset 130px
   down, brings this cover to the same height as the others. */
.flow-stage{position:relative;overflow:hidden;container-type:inline-size;
  aspect-ratio:1672/633;width:100%;
  max-width:calc(605px * 1672 / 633);margin-inline:auto}
.flow-plate{position:relative;width:100%;margin-top:-7.78%}
/* The plate has a fixed aspect and the band a fixed height, so below ~1600px
   the artwork is centred with navy above and below it. Fading its top and
   bottom edges into that navy turns a visible seam into a soft vignette. The
   cards all sit between 22% and 78%, well clear of the fade. */
.flow-stage::before,.flow-stage::after{content:"";position:absolute;
  left:0;right:0;height:11%;pointer-events:none;z-index:2}
.flow-stage::before{top:0;
  background:linear-gradient(180deg,var(--navy-950) 0%,rgba(8,10,18,.7) 38%,transparent 100%)}
.flow-stage::after{bottom:0;
  background:linear-gradient(0deg,var(--navy-950) 0%,rgba(8,10,18,.7) 38%,transparent 100%)}
.flow-img{display:block;width:100%;height:auto}

.flow-stage .eyebrow{color:rgba(var(--mist-rgb),.72);margin-bottom:.9cqw;
  font-size:1.05cqw;letter-spacing:.2em}
.flow-copy{position:absolute;left:5.2%;top:21%;width:20.5%}
.flow-copy h1{font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:3.1cqw;line-height:1.14;letter-spacing:-.02em;margin:0}
.flow-copy h1 em{display:block;font-style:normal;color:var(--accent);margin-top:.15em}
.flow-lede{margin:2.4cqw 0 0;font-size:1.12cqw;line-height:2;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--mist-rgb),.82)}
.flow-foot{margin:3.6cqw 0 0;padding-top:1.5cqw;font-size:.95cqw;line-height:1.8;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--mist-rgb),.5);
  border-top:1px solid rgba(255,255,255,.22);width:92%}

/* the three cards. left/top come straight off the plate's geometry */
.flow-steps{list-style:none;margin:0;padding:0}
.flow-steps li{position:absolute;transform:translateY(-50%)}
.flow-steps li b{display:block;color:#fff;font-size:1.18cqw;font-weight:600;
  letter-spacing:.02em;margin-bottom:.45cqw}
.flow-steps li span{display:block;color:rgba(var(--mist-rgb),.8);
  font-size:1.02cqw;line-height:1.42}
.flow-steps .s1{left:62.8%;top:22.0%;width:10.4%}
.flow-steps .s2{left:64.9%;top:37.2%;width:11.0%}
.flow-steps .s3{left:66.9%;top:53.5%;width:10.0%}

.flow-done{position:absolute;left:81.4%;top:45.6%;width:12.2%;margin:0;text-align:center}
.flow-done b{display:block;color:#fff;font-size:1.12cqw;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.5}

/* the bubble sits on a tilted screen, so the text tilts with it */
.flow-msg{position:absolute;left:44.3%;top:71.4%;width:9.4%;margin:0;
  transform:rotate(3.4deg);color:#2b2f38;font-size:.8cqw;line-height:1.4;
  font-weight:500}

/* Below this the plate is ~7px of text per label, so drop the artwork and let
   the very same markup stand as an ordinary list. */
@media (max-width:900px){
  .flow{padding:calc(var(--nav-h) + clamp(30px,7vw,48px)) 0 clamp(32px,7vw,52px)}
  .flow{min-height:0;display:block}
  .flow-stage{container-type:normal;overflow:visible;aspect-ratio:auto;
    max-width:var(--max);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
  .flow-plate{margin-top:0}
  .flow-img{display:none}
  .flow-copy,.flow-steps li,.flow-done,.flow-msg{position:static;width:auto;
    transform:none;left:auto;top:auto}
  /* .flow-steps .s1 is (0,2,0) and outranks the reset above, so the percentage
     widths have to be cancelled at the same specificity */
  .flow-steps .s1,.flow-steps .s2,.flow-steps .s3{width:auto;left:auto;top:auto}
  .flow-stage .eyebrow{font-size:12px;letter-spacing:.16em;margin-bottom:14px}
  .flow-copy h1{font-size:clamp(2rem,8vw,2.6rem)}
  .flow-lede{margin-top:18px;font-size:13px;line-height:1.9}
  .flow-foot{margin-top:20px;padding-top:14px;font-size:12px;width:100%}
  .flow-steps{margin-top:clamp(26px,6vw,36px);display:grid;gap:16px}
  .flow-steps li{padding:16px 18px;border:1px solid rgba(255,255,255,.16);
    border-radius:var(--r);background:rgba(255,255,255,.05)}
  .flow-steps li b{font-size:15px;margin-bottom:5px}
  .flow-steps li span{font-size:13.6px}
  .flow-done{margin-top:16px;padding:14px 18px;border-radius:var(--r);
    background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.4)}
  .flow-done b{font-size:13px;color:#fff}
  .flow-msg{margin-top:18px;padding:14px 16px;border-radius:var(--r);
    background:#e9eaee;color:#2b2f38;font-size:14px}
}

/* ---- matching the pricing cover ----
   Pricing is the reference (~667px). Results and How it works are brought to
   it; About and Contact ride along because they are the same photographic
   band. The HOME cover is deliberately NOT in this set - it is the one page
   that opens full height, and it keeps its own scale.

   Height comes from one min-height so every page computes the same number.
   The type only tightens on the two covers that overrun it, which are the
   ones carrying a .htrio - pricing's own scale is left exactly as it was. */
.phero.is-short .phero-in{min-height:min(605px,70svh);
  padding-block:clamp(22px,2.4vw,34px) 0}
.phero.is-short .eyebrow{margin-bottom:clamp(10px,1.1vw,14px)}

/* About and Contact only: their trio of features overruns the reference. */
.phero.is-short:has(.htrio) .phero-lede{font-size:clamp(15px,1.06vw,16.4px);
  line-height:1.56;max-width:60ch;margin-top:clamp(12px,1.2vw,16px)}
.phero.is-short:has(.htrio) .htrio{margin-top:clamp(16px,1.8vw,24px)}
.phero.is-short:has(.htrio) .htrio i{width:36px;height:36px;margin-bottom:9px}
.phero.is-short:has(.htrio) .htrio b{font-size:13.2px;margin-bottom:3px}
.phero.is-short:has(.htrio) .htrio span{font-size:12.4px;line-height:1.45}

/* ============================================================
   PHONES
   .btn is nowrap so buttons stay tidy on a desktop row. The main CTA -
   "See How KlinIQ Would Work for My Business" - needs 397px, so on a 360px
   phone it was forcing the document to 415px and scrolling the page
   sideways. Below 560px the label wraps and the buttons go full width,
   which also gives them a proper tap target.
   ============================================================ */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.3}
  .btn-lg{padding:14px 20px}

  .phero-act,.cta-band-act,.cta-side-act,.bookcard{width:100%}
  .phero-act{flex-direction:column;align-items:stretch;gap:10px}
  .phero-act .btn,.cta-band-act .btn,.cta-side-act .btn{width:100%}

  /* Comfortable targets. The footer link lists are .foot-col / .foot-bot -
     they were rendering 24px tall. Inline links inside prose (.tlink) are
     deliberately left alone: padding them out would break the line box. */
  .sheet a{padding-block:12px}
  .foot-col a,.foot-bot a{display:inline-block;padding-block:8px}
  .nav-phone{padding:10px}
  .faq .q button{padding-block:16px}
}

/* ---- how we work (About) ----
   Replaces the named team grid. The brief asks the page to be built on why
   KlinIQ exists and how the work is run, not on individual titles that date
   the page the moment someone changes role. */
.howwework{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-self:start}
.howwework li{position:relative;padding:20px 22px;border-radius:var(--r);
  background:var(--bg-soft);border:1px solid var(--line-soft)}
.hw-n{display:block;font-family:var(--font-display);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;color:var(--accent-text);margin-bottom:8px}
.howwework b{display:block;font-size:15.4px;font-weight:620;color:var(--ink-900);
  margin-bottom:5px;letter-spacing:-.01em}
.howwework span:not(.hw-n){display:block;font-size:14px;line-height:1.6;color:var(--ink-600)}

/* ---- 320px-class phones ----
   The brief requires the message AND the main button above the fold. At
   320x568 the CTA landed 48px under it, so the cover's type and rhythm come
   down just on the narrowest phones. Every size from 360 up already passed
   and is untouched. */
@media (max-width:344px){
  .phero.is-lead .phero-in{padding-block:20px 0}
  .phero .eyebrow{font-size:10.5px;letter-spacing:.12em;margin-bottom:9px}
  .phero.is-lead h1{font-size:2.0rem;line-height:1.08}
  .phero.is-lead .phero-lede{font-size:14px;line-height:1.5;margin-top:11px}
  .phero-act{margin-top:14px;margin-bottom:12px}
  .btn-lg{padding:12px 16px;font-size:14.2px}
}