/* =========================================================================
   rebookr — marketing site
   Built to the Figma source "ANSA Health - All brands" › Rebookr Home
   (626:867) and Rebookr About us (626:1474). Palette, type scale and
   section geometry below are read off those frames rather than eyeballed.

   Structure: tokens → base → type → primitives → components.
   Everything above "components" is shared vocabulary. A section that needs
   a column split, a copy stack, a measure or a scaling composition takes
   the primitive; it does not hand-roll its own. That rule is what stops the
   breakpoint set drifting and stops a split engaging before its columns fit.
   ========================================================================= */

@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/OpenSans-Variable.woff2) format('woff2')}

:root{
  --navy:#011E41;
  --blue:#2655A6;
  --maroon:#990033;
  --maroon-deep:#320111;
  --pink:#FFEEF4;
  --tint:#F4F8FF;
  --blue-soft:#DAE7FC;
  --line:#CFCFCF;
  --grey:#3D3D3D;

  /* Spacing scale. Gaps and section padding come from here so rhythm is
     comparable between sections rather than negotiated per section. */
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:32px;
  --s-5:44px;
  --s-6:56px;

  --wrap:1128px;   /* the 1440 canvas less its 156px side margins */
  --gutter:30px;   /* panel inset */
  --measure:62ch;  /* running-text line length */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Sticky footer. Short pages (contact, symposium, 404) are shorter than a
   tall viewport, and without this the body's white ground shows as a band
   below the blue footer — reading as a broken page rather than a short one.
   #main is itself a column so its LAST section absorbs the slack and the
   trailing space takes that section's own background, rather than main
   guessing at one and fighting the sections that set theirs. */
body{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  margin:0;background:#fff;color:var(--navy);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
#main{flex:1;display:flex;flex-direction:column}
#main > :last-child{flex:1 0 auto}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:700;line-height:1.2;text-wrap:balance}
p{margin:0}
.h-hero{font-size:34px}
.h-section{font-size:29px}
@media (min-width:900px){.h-hero{font-size:52px}.h-section{font-size:42px}}
.eyebrow{font-size:16px;font-weight:400;line-height:1.6;color:var(--maroon)}
@media (min-width:900px){.eyebrow{font-size:17px}}
.lede{font-size:16px;line-height:1.6}
@media (min-width:900px){.lede{font-size:17px}}

/* =========================================================================
   PRIMITIVES
   ========================================================================= */

/* ---------- containers ---------- */
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
@media (min-width:1200px){.container{padding-inline:0}}
.panel{width:calc(100% - 24px);max-width:1381px;margin-inline:auto;border-radius:30px}
@media (min-width:900px){.panel{width:calc(100% - (var(--gutter) * 2))}}
.panel-frame{background:var(--tint);padding-top:15px}
/* Only the frame that ENDS the page needs a bottom gap, and it is load-bearing
   rather than decoration: the panel is a rounded card, so with no gap its
   bottom corners sit directly on the footer's blue and the ground shows
   through them as two stray notches. The hero frames on home and about are
   followed by another section, so they keep their flush rhythm. */
#main > .panel-frame:last-child{padding-bottom:var(--s-6)}

/* ---------- vertical rhythm ---------- */
.section{padding-block:var(--s-6)}
@media (min-width:900px){.section{padding-block:96px}}
@media (min-width:900px){.section--tall{padding-block:112px}}
.section--flush-end{padding-bottom:0}
.section--tint{background:var(--tint)}

/* ---------- copy stack ----------
   One vertical rhythm for a run of copy, instead of seven sections each
   declaring display:flex;flex-direction:column with a gap of its own. */
.stack{display:flex;flex-direction:column;align-items:flex-start}
.stack--sm{gap:var(--s-2)}
.stack--md{gap:var(--s-3)}
.stack--lg{gap:var(--s-4)}

/* ---------- measure ----------
   Running text stops at a readable line length whatever the column it sits
   in happens to be. This is why the tablet widths no longer set 110-character
   lines: the constraint is on the text, not on one breakpoint's grid track. */
.prose{max-width:var(--measure)}

/* ---------- two-column split ----------
   The threshold lives in the class name, so it is visible in the markup and
   can only be one of the sanctioned widths; the tracks live in one line of
   section CSS. A split MUST NOT engage before both columns can hold their
   content — reading the class tells you which width was chosen, and the
   build refuses any width outside the set. */
.split{display:grid;gap:var(--s-5)}
@media (min-width:900px){
  .split--900{
    grid-template-columns:var(--cols,1fr 1fr);
    gap:var(--split-gap,var(--s-5));
    align-items:var(--split-align,center);
  }
}
@media (min-width:1200px){
  .split--1200{
    grid-template-columns:var(--cols,1fr 1fr);
    gap:var(--split-gap,var(--s-5));
    align-items:var(--split-align,center);
  }
}

/* ---------- card grid ---------- */
.cards{display:grid;gap:22px}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr);column-gap:var(--s-3)}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(var(--cards,3),1fr)}}

/* =========================================================================
   STAGE CONTRACT
   The artwork blocks are absolutely-composed in Figma. Each is rebuilt as a
   container-query stage so the whole composition scales as one piece — and
   every stage gets the same three guarantees from this one place, so a new
   stage cannot be added without them:
     1. type carries a floor, so it never scales into illegibility;
     2. below its threshold the composition stops being a composition;
     3. wires and rules go first, because they are connective decoration and
        read as noise the moment the pieces they connect have moved.
   ========================================================================= */
.chip{
  display:inline-flex;align-items:center;gap:14px;padding:var(--s-2);border-radius:10px;
  border:1px solid var(--maroon);background:var(--pink);
  font-size:16px;line-height:1.6;color:var(--blue);
}
.chip--tint{background:var(--tint)}
.chip svg{width:24px;height:24px;flex:none}

.stage{position:relative;container-type:inline-size}
.stage .chip{
  position:absolute;left:var(--x);top:var(--y);
  gap:2.03cqw;padding:2.32cqw;border-radius:1.45cqw;font-size:max(11px,2.32cqw);white-space:nowrap;
}
.stage .chip svg{width:3.48cqw;height:3.48cqw}
.stage__photo{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);object-fit:contain}
.wire{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none}
.wire svg{width:100%;height:100%}
.rule{position:absolute;left:var(--x);top:var(--y);background:rgba(255,238,244,.5)}

@media (max-width:899px){
  .stage--to-900{width:min(100%,440px);margin-inline:auto}
  .stage--to-900 .wire,.stage--to-900 .rule{display:none}
}
@media (max-width:1199px){
  .stage--to-1200{width:min(100%,440px);margin-inline:auto}
  .stage--to-1200 .wire,.stage--to-1200 .rule{display:none}
}
/* Chips carry text. Past the point where the floor stops them shrinking they
   would overlap rather than scale, so they leave instead of piling up. */
@container (max-width:400px){.stage .chip{display:none}}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:14px 28px;border:0;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.6;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
@media (min-width:900px){.btn{min-height:64px;padding:16px var(--s-4)}}
.btn:hover{transform:translateY(-2px)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(1,30,65,.22)}
.btn--navy:hover{box-shadow:0 12px 28px rgba(1,30,65,.3)}
.btn--maroon{background:var(--maroon);color:#fff;box-shadow:0 6px 18px rgba(153,0,51,.28)}
.btn--maroon:hover{box-shadow:0 12px 28px rgba(153,0,51,.34)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(244,248,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.hdr[data-stuck="true"]{border-bottom-color:rgba(38,85,166,.16);background:rgba(255,255,255,.92)}
.hdr__in{max-width:1440px;margin-inline:auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
@media (min-width:900px){.hdr__in{padding:14px 40px;gap:var(--s-4)}}
@media (min-width:1200px){.hdr__in{padding:14px 155px}}
.hdr__logo{display:block;width:104px;flex-shrink:0}
.hdr__logo svg{width:100%;height:auto}
@media (min-width:900px){.hdr__logo{width:125px}}
.hdr__nav{display:none;margin-inline:auto;gap:45px;align-items:center;font-size:16px;color:var(--blue)}
@media (min-width:900px){.hdr__nav{display:flex}}
.hdr__nav a{text-decoration:none;position:relative;padding-block:4px}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:18px}
@media (min-width:900px){.hdr__right{margin-left:0}}
.hdr__in .btn{display:none}
@media (min-width:900px){.hdr__in .btn{display:inline-flex;min-height:52px;padding:12px var(--s-3)}}
@media (min-width:1200px){.hdr__in .btn{min-height:64px;padding:16px var(--s-4)}}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:transparent;border:0;cursor:pointer}
@media (min-width:900px){.burger{display:none}}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.hdr[data-open="true"] .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr[data-open="true"] .burger span:nth-child(2){opacity:0}
.hdr[data-open="true"] .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr__drawer{display:none;padding:8px 22px var(--s-3);border-top:1px solid rgba(38,85,166,.16);background:#fff}
.hdr[data-open="true"] .hdr__drawer{display:block}
@media (min-width:900px){.hdr[data-open="true"] .hdr__drawer{display:none}}
.hdr__drawer a{display:block;padding:12px 0;font-size:17px;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(1,30,65,.08)}
.hdr__drawer .btn{display:flex;margin-top:18px;width:100%;border-bottom:0}

/* =========================================================================
   HOME — hero
   ========================================================================= */
.hero{
  position:relative;color:#fff;
  background-image:linear-gradient(90deg,var(--navy) 47.21%,var(--blue) 73.28%);
  padding:44px 26px 34px;
}
@media (min-width:1200px){.hero{padding:0 0 0 72px}}
@media (min-width:1440px){.hero{padding:0 0 0 125px}}
.hero__grid{--cols:555px 1fr;--split-gap:0;--split-align:start;gap:var(--s-3)}
@media (min-width:1200px){.hero__grid{min-height:688px}}
@media (min-width:1200px){.hero__copy{padding-top:150px}}
.hero__copy .btn{margin-top:var(--s-1)}
.hero h1,.hero p{color:#fff}
.stage--hero{aspect-ratio:690.5 / 688}

/* =========================================================================
   HOME — "Reconnect Patients Automatically"
   ========================================================================= */
.reconnect__grid{--cols:553px 1fr;--split-gap:64px}
.reconnect__copy .btn{margin-top:var(--s-1)}
.integrates{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;color:var(--blue);font-size:16px}
.integrates__pill{display:inline-flex;align-items:center;background:var(--blue-soft);border-radius:50px;padding:8px 16px 12px}
.integrates__pill svg{width:87px;height:21px}

/* =========================================================================
   PHONE THREAD — the reconnect SMS, drawn rather than photographed
   -------------------------------------------------------------------------
   This replaces app-conversation-short.webp and -full.webp, which headed the
   thread "rebookr" with the rebookr logo as the avatar while the FAQ two
   screens below promised "no branded blast, no unfamiliar sender" and
   "rebookr is never named in the message". The product was right and the
   picture was wrong, and nothing could have caught it: a grep for "rebookr"
   cannot read a WebP, and correcting a word meant re-rendering a binary by
   hand. Drawn in markup the wording is greppable, diffable, reviewed like
   any other copy, and sharp at every pixel density for ~2KB rather than
   111KB across the two files.

   One partial serves both renderings, so the crop and the full thread cannot
   drift apart. The variant chooses how much of the device is shown: --full
   draws the whole phone, --short clips it to a landscape-ish frame so the
   device runs off the bottom of the composition, which is what the original
   crop did. Type scales with the component's own width via cqi, so the same
   markup holds its proportions in a 470px column and a 330px one without a
   second set of sizes to keep in step.
   ========================================================================= */
.phone{
  container-type:inline-size;
  display:block;margin-inline:auto;
  filter:drop-shadow(0 26px 52px rgba(1,30,65,.2));
}
/* Clip to the original crop's proportions; the frame keeps its own device
   aspect and overflows past the bottom edge. */
.phone--short{width:min(100%,470px);aspect-ratio:470/450;overflow:hidden}
.phone--full{width:min(100%,386px)}
.phone--short .phone__later{display:none}

/* The type scale sits on the frame, not on .phone: cqi resolves against an
   ANCESTOR container, so an element sizing itself from its own container-type
   silently reads the viewport instead and the mockup renders 16px text in a
   239px-wide column.

   4.1cqi is life-size — 16px in a 390px-wide screen, the ratio a real handset
   uses — so the mockup reads as a phone at any column width rather than as a
   diagram of one. The 11.5px floor is the site's own legibility floor (the
   render gate fails below 11px) and engages only in the 900-1010px viewport
   band, where .reconnect__grid's fixed 553px copy column squeezes its
   sibling to ~240px. That variant is a crop, so the overflow it causes is
   clipped by design. */
.phone__frame{
  font-size:clamp(11.5px,4.1cqi,16px);
  aspect-ratio:9/19.1;padding:.72em;
  border-radius:3.4em;background:linear-gradient(150deg,#5c6672,#20262e 22%,#0d1116 55%,#3a424c);
}
.phone__screen{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:2.75em;background:#fff;color:var(--navy);
}
.phone__notch{
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:44%;height:1.75em;border-radius:0 0 1.1em 1.1em;background:#0d1116;
}
.phone__status{
  display:flex;justify-content:flex-end;align-items:center;gap:.4em;
  padding:.62em 1.35em .1em;color:var(--navy);
}
.phone__status svg{height:.72em;width:auto;fill:currentColor}

.phone__bar{
  display:flex;align-items:center;gap:.7em;
  padding:.9em 1.05em 1em;border-bottom:1px solid rgba(1,30,65,.09);
}
.phone__icon{
  flex:none;display:grid;place-items:center;
  width:2.35em;height:2.35em;border-radius:50%;
  border:1px solid rgba(1,30,65,.14);color:var(--navy);
}
.phone__icon svg{width:1em;height:1em}
.phone__icon--dots svg{fill:currentColor}
.phone__who{display:flex;align-items:center;gap:.6em;min-width:0;margin-inline:auto 0;flex:1}
.phone__avatar{
  flex:none;display:grid;place-items:center;overflow:hidden;
  width:2.5em;height:2.5em;border-radius:50%;background:#DDE2EA;color:#8B97A8;
}
.phone__avatar svg{width:1.65em;height:1.65em;fill:currentColor;translate:0 .16em}
.phone__number{font-size:1.06em;font-weight:700;letter-spacing:.01em;white-space:nowrap}

/* Bottom-aligned, because a phone opens a thread scrolled to its newest
   message; the slack sits above the conversation, not between it and the
   composer. The crop shows the top of the same thread, so it aligns the
   other way. */
.phone__thread{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;gap:.6em;padding:1em 1.05em 0;
}
.phone--short .phone__thread{justify-content:flex-start}
.phone__stamp{align-self:center;font-size:.86em;color:#7A8494}
.bubble{
  max-width:82%;padding:.72em .95em;border-radius:1.15em;
  font-size:1em;line-height:1.45;
}
.bubble--in{background:#F1F2F4}
.bubble--out{align-self:flex-end;background:#DCEAFE;color:var(--blue)}

.phone__composer{
  display:flex;align-items:center;gap:.6em;
  padding:.85em 1.05em .5em;
}
.phone__field{
  flex:1;padding:.6em 1em;border-radius:1.4em;
  border:1px solid rgba(1,30,65,.16);color:#8B97A8;font-size:.94em;
}
.phone__send{
  flex:none;display:grid;place-items:center;
  width:2.2em;height:2.2em;border-radius:50%;background:var(--navy);color:#fff;
}
.phone__send svg{width:1em;height:1em}
.phone__home{
  width:34%;height:.32em;border-radius:.32em;background:var(--navy);opacity:.85;
  margin:.5em auto .55em;
}
.phone--short .phone__home{display:none}

/* =========================================================================
   HOME — "Practical Continuity Of Care"
   ========================================================================= */
.pcc{position:relative;overflow:hidden;background:var(--maroon);color:#fff;padding-bottom:64px}
@media (min-width:900px){.pcc{padding-bottom:78px}}
.pcc::before{
  content:"";position:absolute;inset:0 0 auto;height:511px;pointer-events:none;
  background:linear-gradient(180deg,rgba(50,1,17,0) 0%,var(--maroon-deep) 100%);
}
.pcc > *{position:relative}
.pcc__top{--split-gap:0;--split-align:start;max-width:1440px;margin-inline:auto;gap:var(--s-3);padding:48px 22px 0}
@media (min-width:900px){.pcc__top{padding:0}}
@media (min-width:900px){.pcc__copy{width:min(551px,92%);padding-top:93px}}
.pcc__copy h2{color:#fff}
.pcc__copy p{font-size:16px}
.stage--pcc{aspect-ratio:591 / 565}
@media (min-width:900px){
  .stage--pcc{width:82.08%;margin-left:12.5%}
  .stage--pcc .stage__photo{-webkit-mask-image:linear-gradient(180deg,#000 44%,transparent 92%);mask-image:linear-gradient(180deg,#000 44%,transparent 92%)}
}
@media (max-width:899px){
  .stage--pcc .stage__photo{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
}
.pcc__cards{--cards:3;max-width:var(--wrap);margin-inline:auto;padding:40px 22px 0}
@media (min-width:1200px){.pcc__cards{padding:0;margin-top:-92px}}
.card--pcc{
  background:var(--pink);border:1px solid var(--maroon);border-radius:30px;padding:26px;
  display:flex;flex-direction:column;gap:var(--s-3);
}
@media (min-width:900px){.card--pcc{padding:var(--s-4)}}
.card--pcc h3{color:var(--navy);font-size:18px}
.card--pcc p{color:#000;font-size:14px;line-height:1.6}
.pcc__cta{display:flex;justify-content:center;margin-top:48px}

/* =========================================================================
   HOME — "How It Works"
   ========================================================================= */
.how h2{text-align:center}
.how__grid{--cols:420px 1fr;--split-gap:var(--s-3);--split-align:start;margin-top:var(--s-5)}
@media (min-width:900px){.how__grid{margin-top:var(--s-6)}}
.steps{display:flex;flex-direction:column;gap:var(--s-1)}
.step{background:#fff;border:1px solid var(--blue);border-radius:30px;padding:24px 26px;display:flex;flex-direction:column;gap:var(--s-2)}
@media (min-width:900px){.step{padding:var(--s-3) var(--s-4)}}
.step__n{font-size:13px;color:var(--blue)}
.step h3{font-size:18px;color:var(--navy)}
.step p{font-size:14px;line-height:1.6;color:#000}
.how__cta{display:flex;justify-content:center;margin-top:48px}

/* =========================================================================
   HOME — "Results You Can See"
   ========================================================================= */
.results{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.results__bg{position:absolute;inset:0;z-index:-2;background-image:var(--bg);background-size:cover;background-position:62% center}
.results__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--navy) 0%,rgba(1,30,65,.5) 100%)}
@media (min-width:1200px){.results__veil{background:linear-gradient(90deg,var(--navy) 14.64%,rgba(1,30,65,0) 100%)}}
.results__grid{--split-gap:0;--split-align:start;max-width:1440px;margin-inline:auto;gap:var(--s-4);padding:var(--s-6) 22px}
@media (min-width:1200px){.results__grid{padding:0;min-height:627px}}
@media (min-width:1200px){.results__copy{width:min(553px,88%);margin-left:min(156px,8vw);padding-top:150px}}
.results__copy h2{color:#fff}
.results__copy p{font-size:16px}
.stage--results{aspect-ratio:714 / 627}
.stat{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  display:flex;flex-direction:column;align-items:center;gap:.56cqw;text-align:center;color:#fff;
  padding:2.24cqw;border-radius:4.2cqw;border:1px solid rgba(255,255,255,.85);
  background:rgba(50,1,17,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.stat b{font-size:max(26px,4.2cqw);font-weight:700;line-height:1.2}
.stat small{font-size:max(12px,1.68cqw);line-height:1.6;color:#E3E3E3}
.stat span{font-size:max(14px,1.96cqw);line-height:1.25}
/* The stats are content, not decoration, so this stage does not shrink them
   into specks: below its threshold the composition dissolves and they stack. */
@media (max-width:1199px){
  .stage--stacks{aspect-ratio:auto;container-type:normal;width:100%;max-width:560px;display:grid;gap:var(--s-2)}
  .stage--stacks .stage__photo{display:none}
  .stage--stacks .stat{position:static;width:auto;gap:6px;padding:22px var(--s-3);border-radius:18px}
  .stage--stacks .stat b{font-size:30px}
  .stage--stacks .stat small{font-size:13px}
  .stage--stacks .stat span{font-size:15px}
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.ahero{
  position:relative;overflow:hidden;color:#fff;border-radius:30px;
  background-image:linear-gradient(90deg,var(--navy) 47.21%,var(--blue) 73.28%);
  padding:44px 26px 48px;
}
@media (min-width:900px){.ahero{min-height:688px;padding:185px 0 0 72px;display:flex;align-items:flex-start}}
@media (min-width:1440px){.ahero{padding:185px 0 0 125px}}
/* Figma scales the plate to 124.86% of the frame and anchors it left. */
.ahero__photo{position:absolute;inset:0;z-index:0;background-image:var(--bg);background-size:124.86% 100%;background-position:0.05% 0}
.ahero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(50,1,17,.92) 0%,rgba(153,0,51,.84) 52%,rgba(153,0,51,.62) 100%)}
/* Figma's ramp is fully transparent by 63%, which leaves the body copy over
   bare photography. The deep underlay keeps the Figma hue and stop while
   holding white text at a readable contrast across the copy column. */
@media (min-width:900px){
  .ahero__veil{background:
    linear-gradient(90deg,var(--maroon) 0%,rgba(153,0,51,.88) 34%,rgba(153,0,51,0) 63.43%),
    linear-gradient(90deg,rgba(50,1,17,.62) 0%,rgba(50,1,17,0) 56%)}
}
.ahero__copy{position:relative;z-index:2}
@media (min-width:900px){.ahero__copy{width:555px}}
.ahero .eyebrow{color:#fff;opacity:.92}
.ahero h1,.ahero p{color:#fff}

.approach__grid{--cols:1fr 553px;--split-gap:var(--s-6)}
.tile{
  width:min(100%,400px);margin-inline:auto;aspect-ratio:1;border-radius:22%;
  background:radial-gradient(120% 120% at 22% 18%,#0C2E5C 0%,var(--navy) 55%,#00152E 100%);
  display:grid;place-items:center;box-shadow:0 26px 60px rgba(1,30,65,.26);
}
.tile svg{width:80.4%;height:auto}

/* ---------- FAQ ---------- */
.faq h2{text-align:center;margin-bottom:40px}
.faq__list{max-width:936px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .25s var(--ease)}
.faq__item[data-open="true"]{border-color:var(--blue)}
.faq__q{
  width:100%;display:flex;align-items:center;gap:var(--s-3);justify-content:space-between;
  padding:22px var(--s-3);background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.25;color:var(--navy);text-align:left;
}
@media (min-width:900px){.faq__q{font-size:18px;padding:25px 29px}}
.faq__sign{position:relative;flex:none;width:20px;height:20px}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;inset:0;margin:auto;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.faq__sign::before{width:20px;height:2px}
.faq__sign::after{width:2px;height:20px}
.faq__item[data-open="true"] .faq__sign::after{transform:scaleY(0);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__inner{overflow:hidden}
.faq__body{padding:0 var(--s-3) var(--s-3);font-size:15px;line-height:1.7;color:var(--grey);display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){.faq__body{padding:0 29px 26px}}
.faq__body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.faq__body li::marker{color:var(--blue)}
.faq__body strong{color:var(--navy)}
.faq__quote{color:var(--blue);font-style:italic}
@media (prefers-reduced-motion:reduce){.faq__a{transition:none}}

/* =========================================================================
   CONTACT / SYMPOSIUM
   ========================================================================= */
.contact{
  position:relative;color:#fff;border-radius:30px;
  background-image:linear-gradient(90deg,var(--navy) 47.21%,var(--blue) 73.28%);
  padding:48px 26px;
}
/* The inset grows with the room to spare, not ahead of it. At 900 the old
   125px inset left the copy column 182px wide for a 52px headline. */
@media (min-width:900px){.contact{padding:var(--s-6) var(--s-5)}}
@media (min-width:1200px){.contact{padding:64px 72px}}
@media (min-width:1440px){.contact{padding:80px 125px}}
/* Centred, not top-aligned: the form card is ~190px taller than the copy,
   so start-alignment dropped all of that slack under the copy as one
   block of dead navy. Centring splits it above and below and the two
   columns read as a pair. */
.contact__grid{--cols:1fr 468px;--split-gap:64px;gap:36px}
.contact__copy h1,.contact__copy p{color:#fff}

/* What happens after the form is submitted. Numbered because it is a real
   sequence, not because numbering decorates well: each step is the one the
   visitor reaches only by completing the one above it. Its own block rather
   than the home page's `.step` cards: same noun, different sequence, and
   nothing that should force the two to change together. */
.flow{width:100%;margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3);counter-reset:flow}
.flow__item{display:grid;grid-template-columns:28px 1fr;gap:var(--s-2);align-items:start;counter-increment:flow}
.flow__item::before{
  content:counter(flow);
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  font-size:13px;font-weight:600;line-height:1;
}
.flow__body{display:grid;gap:var(--s-1)}
.contact__copy .flow__h{font-size:17px;font-weight:600;line-height:1.4}
.contact__copy .flow__p{font-size:15px;line-height:1.6;opacity:.82}
.contact .eyebrow{color:#fff;opacity:.9}

.formcard{
  background:#fff;color:var(--navy);border-radius:30px;padding:28px;
  align-items:stretch;gap:18px;box-shadow:0 26px 60px rgba(1,20,45,.28);
}
@media (min-width:900px){.formcard{padding:34px}}
.formcard__h{font-size:22px;line-height:1.2}
.formcard p.formcard__note{font-size:14px;line-height:1.6;color:var(--grey)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.field input,.field select{
  width:100%;font-family:inherit;font-size:16px;color:var(--navy);
  padding:14px var(--s-2);border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 21px) 24px,calc(100% - 15px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,85,166,.16)}
.field input::placeholder{color:#9AA6B8}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--maroon)}
.field__err{font-size:13px;line-height:1.45;color:var(--maroon)}
.field__err[hidden]{display:none}
.formcard__submit{display:flex;width:100%;margin-top:2px}
.formcard p.formcard__legal{font-size:12px;line-height:1.5;color:var(--grey)}
.formcard__legal a{color:var(--blue)}
.formcard__outcome{margin-top:2px;padding:20px;border-radius:22px;border:1px solid var(--line);background:var(--tint)}
.formcard__outcome[hidden]{display:none}
.formcard p.formcard__outcome-copy{font-size:14px;line-height:1.55;margin:0 0 var(--s-2);color:var(--navy)}
.formcard__outcome .chip{padding:.2em .55em;gap:0;background:var(--blue-soft);border-color:var(--blue-soft);vertical-align:middle}
.formcard__outcome .chip svg{width:64px;height:16px}
.formcard__outcome .btn{display:flex;width:100%}

.logostrip{display:grid;gap:36px;align-items:center;justify-items:center;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.logostrip img{max-height:140px;width:auto;object-fit:contain}

/* =========================================================================
   LEGAL
   ========================================================================= */
.legal{max-width:820px;margin-inline:auto}
.legal h1{font-size:32px;margin-bottom:6px}
@media (min-width:900px){.legal h1{font-size:42px}}
.legal h2{font-size:19px;margin:36px 0 10px;color:var(--navy)}
.legal h3{font-size:16px;font-weight:600;margin:22px 0 6px;color:var(--navy)}
.legal .meta{font-size:14px;color:var(--grey);margin-bottom:var(--s-1)}
.legal p{font-size:16px;line-height:1.7;color:var(--grey)}
.legal ul,.legal ol{font-size:16px;line-height:1.7;color:var(--grey);padding-left:var(--s-3);margin:10px 0}
.legal li{margin-bottom:var(--s-1)}
.legal li::marker{color:var(--blue)}
.legal a{color:var(--blue)}
.legal__rule{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
.legal__switch{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-3) 0 40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.legal__switch a{
  font-size:14px;text-decoration:none;color:var(--navy);
  border:1px solid var(--line);border-radius:50vw;padding:7px var(--s-2);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.legal__switch a:hover{border-color:var(--blue);color:var(--blue)}
.legal__switch a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* =========================================================================
   FOOTER
   ========================================================================= */
.ftr{background:var(--blue);color:#fff;padding:var(--s-6) 0 40px}
@media (min-width:900px){.ftr{padding:110px 0 76px}}
.ftr__in{max-width:1440px;margin-inline:auto;padding-inline:22px}
@media (min-width:1200px){.ftr__in{padding-inline:157px}}
.ftr__grid{display:grid;gap:36px}
@media (min-width:768px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.ftr__grid{grid-template-columns:190px 1fr 1fr auto;gap:48px}}
.ftr__logo{width:164px}
.ftr__logo svg{width:100%;height:auto}
.ftr__addr{font-size:18px;line-height:34px;white-space:pre-line}
.ftr__contact{margin-top:var(--s-3);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ftr__contact a{font-size:14px;line-height:22px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px}
.ftr__contact a:hover{border-bottom-color:#fff}
.ftr__links{display:flex;flex-direction:column;gap:10px;font-size:12px;line-height:20px}
.ftr__links a{color:rgba(255,255,255,.75);text-decoration:none}
.ftr__links a:hover{color:#fff}
.ftr__social{display:flex;gap:12px}
.ftr__social a{display:grid;place-items:center;width:39px;height:39px;opacity:.85;transition:opacity .2s var(--ease)}
.ftr__social a:hover{opacity:1}
.ftr__social svg{width:100%;height:100%}
.ftr__social .ring{border:1.5px solid rgba(255,255,255,.45);border-radius:50%}
.ftr__social .ring svg{width:17px;height:17px}
.ftr__base{margin-top:var(--s-5);font-size:12px;line-height:20px;color:rgba(255,255,255,.65);display:flex;flex-wrap:wrap;gap:6px 22px}
.ftr__base a{color:rgba(255,255,255,.65);text-decoration:none}
.ftr__base a:hover{color:#fff}

/* =========================================================================
   Video block

   The demo clips are portrait phone captures (9:16), so the player is
   width-capped rather than fluid: past ~400px a 9:16 clip stands taller than
   a laptop viewport and its own controls fall below the fold.

   Every clip is referenced with a content hash in the filename, because
   nginx serves /assets/ as `immutable, max-age=31536000`. Only CSS and JS
   are fingerprinted by build.mjs — src/assets is copied verbatim — so a
   same-named replacement would be served from cache for a year.
   ========================================================================= */
.vid{margin-inline:auto;width:min(100%,380px)}

/* Safari does not reliably clip a <video> to its own border-radius, so the
   wrapper's overflow is what actually rounds the corners. */
.vid__frame{
  border-radius:22px;overflow:hidden;background:var(--navy);
  box-shadow:0 26px 52px rgba(1,30,65,.2);
}
.vid__player{display:block;width:100%;height:auto}
.vid__note{margin-top:var(--s-2);text-align:center;font-size:14px;line-height:22px;color:var(--grey)}

/* Centred column for a section whose subject is the clip rather than the
   copy beside it. .stack is flex-start by design; this is the one place that
   wants its run of copy centred under a centred object. */
.vid-lede{margin-inline:auto;text-align:center}
.vid-lede.stack{align-items:center}

/* =========================================================================
   Motion + skip link
   ========================================================================= */
/* Scoped to .js so the content is visible when the script never runs — the
   hidden state is the animation's start frame, not the default. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;padding:12px 18px;background:#fff;color:var(--navy);border-radius:10px}