/* ==========================================================================
   Ben Franklin — homepage

   PALETTE AND TYPE ARE THE CLIENT'S OWN, NOT INVENTED.
   Every token below was read out of the live stylesheet at
   benfranklin.in/assets/index-B8zloyky.css, where they are already defined
   as named custom properties. Their names are kept so the two systems match.
   No public brand guideline exists (checked), so the live token set is the
   authority. Do not substitute colours here — see BRAND.md.
   ========================================================================== */

:root{
  /* ---- brand tokens, verbatim from the client's stylesheet ---- */
  --ink:        #140d51;   /* primary indigo */
  --ink-deep:   #0b0733;   /* deep indigo — dark section ground */
  --ink-mid:    #3b2fa0;   /* mid indigo/violet */
  --accent:     #16c6d9;   /* brand cyan */
  --accent-2:   #7c6bff;   /* brand violet */
  --muted:      #6c6c86;
  --line:       #e4e5f0;
  --paper:      #ffffff;
  --pearl:      #f4f5fb;
  --pearl-2:    #edeef7;
  --hint:       #c9c8dc;
  --deepest:    #070426;
  --hero-mid:   #17105b;
  --ok:         #16856d;
  --err:        #d33a5a;
  --err-deep:   #a12643;
  --err-bg:     #fff1f3;

  --radius:     18px;
  --maxw:       1200px;
  --shadow-md:  0 12px 34px rgba(20,13,81,.10);
  --shadow-lg:  0 30px 70px rgba(20,13,81,.18);
  --ring:       0 0 0 3px rgba(22,198,217,.35);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  /* ---- one derived value, and only because their cyan is unreadable on
     white (2.08:1). This is the SAME hue (186deg) darkened until it passes
     AA, so small cyan-coloured text on light grounds stays on-brand and
     stays legible. Their cyan itself is used unchanged on dark grounds,
     where it measures 9.26:1. ---- */
  --accent-deep: #0d7682;

  --gut: 24px;
  --z-nav: 50;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Components below set display on elements that also take [hidden]. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- a11y ---------- */
.skip{
  position:absolute;left:8px;top:8px;z-index:100;
  background:var(--ink-deep);color:#fff;padding:14px 20px;text-decoration:none;
  border-radius:10px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.deep :focus-visible,.hero :focus-visible{outline-color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.shell{width:min(100% - (var(--gut)*2), var(--maxw));margin-inline:auto}
section{padding:clamp(64px,9vw,116px) 0}
.band{background:var(--pearl)}
.deep{background:var(--ink-deep);color:#fff}
.deep .lead{color:rgba(255,255,255,.74)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--body);font-size:.74rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none;border-radius:2px}
.deep .eyebrow,.hero .eyebrow{color:var(--accent)}

h1,.h1{
  font-family:var(--display);font-weight:700;
  /* 4.6vw, not 6vw: the hero headline sits in a ~55% column, so it has to be
     scaled against that column and not against the whole viewport. */
  font-size:clamp(2.45rem,4.6vw,4.4rem);line-height:1.03;letter-spacing:-.025em;
}
h2,.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.95rem,4.1vw,3.05rem);line-height:1.1;letter-spacing:-.022em;
}
h3{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;line-height:1.35}

/* The cyan -> violet gradient headline is the client's own brand device.
   It is kept, and kept on dark grounds only, where both stops are legible. */
.grad{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--accent);-webkit-text-fill-color:var(--accent)}
}
.ital{font-style:italic;font-weight:400;color:var(--ink-mid)}
.deep .ital,.hero .ital{color:var(--accent)}

.lead{font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.62;color:var(--muted);max-width:58ch}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--body);font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
    color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
/* Cyan is a dark-ground colour at brand strength, so the primary button uses
   indigo with a cyan hover-lift rather than cyan-on-white. */
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ink-mid);box-shadow:var(--shadow-md)}
.btn-cyan{background:var(--accent);color:var(--ink-deep)}
.btn-cyan:hover,.btn-cyan:focus-visible{background:#3ad4e5;box-shadow:0 8px 24px rgba(22,198,217,.34)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--ink);background:rgba(20,13,81,.04)}
.deep .btn-ghost,.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.deep .btn-ghost:hover,.deep .btn-ghost:focus-visible,
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover,.btn-light:focus-visible{background:var(--pearl)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:700;font-size:.94rem;color:var(--accent-deep);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease)
}
.tlink:hover,.tlink:focus-visible{border-bottom-color:currentColor}
.deep .tlink,.hero .tlink{color:var(--accent)}
.tlink svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ==========================================================================
   HEADER — white wordmark on indigo, which is how the brand mark is locked up
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:var(--z-nav);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)
}
.hdr.stuck{background:rgba(11,7,51,.92);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.12)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo{width:auto;height:22px}
.ftr .logo{height:24px}
.nav{display:none;gap:2px;align-items:center}
.nav a{
  padding:10px 13px;font-size:.92rem;font-weight:500;text-decoration:none;
  color:rgba(255,255,255,.82);border-radius:10px;
  transition:color .16s var(--ease),background .16s var(--ease)
}
.nav a:hover,.nav a:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
.hdr .btn{min-height:44px;padding:0 20px;font-size:.88rem}
.hdr-cta{display:none}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:1px solid rgba(255,255,255,.3);background:transparent;
  color:#fff;border-radius:12px;cursor:pointer;flex:none
}
.burger svg{width:20px;height:20px}
.burger .x{display:none}
.burger[aria-expanded="true"] .m{display:none}
.burger[aria-expanded="true"] .x{display:block}

.mnav{display:none;background:var(--ink-deep);border-top:1px solid rgba(255,255,255,.12);
  padding:10px 0 22px}
.mnav.open{display:block}
.mnav a{
  display:flex;align-items:center;min-height:52px;text-decoration:none;color:#fff;
  font-size:1.02rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1)
}
.mnav .btn{width:100%;margin-top:18px}

@media(min-width:1040px){
  .nav{display:flex}
  .hdr-cta{display:inline-flex}
  .burger{display:none}
  .mnav{display:none !important}
}

/* ==========================================================================
   HERO — the client's own indigo radial ground and cyan/violet glows.

   Two deliberate structural moves, both static:

   1. The photograph is an architectural PANEL bleeding off the right edge and
      feathering into the indigo, not a rounded card floating beside the text.
      A floating card is what every template does; a bleed is what an
      established brand does.

   2. THE LENS. The same photograph is layered twice in the same box, so the
      two copies line up exactly. The lower copy is graded down and softened;
      the upper copy is sharp and is clipped to a circle by a radial mask. The
      circle therefore shows corrected vision through a lens — which is
      literally the product. It does not move, pulse or follow the cursor.
   ========================================================================== */
.hero{
  position:relative;color:#fff;
  padding:calc(76px + 14px) 0 clamp(46px,7vw,70px);

  /* One source of truth for the lens geometry: the mask on .hero-sharp, the
     ring and the caption all read these, so they can never drift apart. */
  --lens-r: clamp(68px,19vw,98px);
  --lens-x: 50%;
  --lens-y: 44%;
  --haze:   4px;

  background:
    radial-gradient(circle at 12% 18%, rgba(22,198,217,.14), transparent 44%),
    radial-gradient(circle at 78% 8%,  rgba(124,107,255,.24), transparent 50%),
    radial-gradient(circle at 42% 52%, var(--hero-mid) 0, var(--ink-deep) 46%, var(--deepest) 100%);
}

/* The hero and the proof strip are one block that owns the first screen. The
   hero is the only flexible item, so every spare pixel goes to it and the proof
   strip stays whole on the floor of the screen instead of being cut by the fold.
   min-height only ever grows the box, so on a short window nothing is squashed —
   the page simply scrolls as it did before.
   svh, not vh: on a phone vh is the height with the address bar hidden, which
   makes the block taller than the screen actually is on first paint. */
.firstscreen{
  display:flex;flex-direction:column;margin-top:-76px;
  min-height:100vh;
  min-height:100svh;
}
.hero{flex:1 0 auto}

/* ---------- the photographic panel ---------- */
.hero-panel{
  position:relative;width:100%;height:clamp(256px,64vw,352px);
  overflow:hidden;isolation:isolate;margin-bottom:clamp(30px,6vw,44px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 60%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 60%,transparent 100%);
}
/* Both copies share one box and one crop, so the lens lines up with the
   photograph underneath it to the pixel. The 1.06 scale is overscan: it hides
   the soft edge the blur would otherwise leave against the frame. */
.hero-img,.hero-sharp{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 44%;transform:scale(1.06)
}
.hero-img{filter:saturate(.5) contrast(1.02) brightness(.6) blur(var(--haze))}
.hero-sharp{filter:saturate(.95) contrast(1.05) brightness(.92)}

/* Grades the skin tones toward the brand indigo so the photograph belongs to
   the palette instead of sitting on top of it. Sits BELOW the lens copy, so
   the circle also reads as truer colour. */
.hero-tint{position:absolute;inset:0;background:var(--ink-mid);mix-blend-mode:color;opacity:.46}

.hero-sharp{
  -webkit-mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),#000 0 99%,transparent 100%);
          mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),#000 0 99%,transparent 100%);
}
/* If masks are unavailable the sharp copy would cover the whole panel, so it
   and its ring are dropped: the hero degrades to a plain graded photograph. */
@supports not ((mask-image:radial-gradient(#000,#000)) or (-webkit-mask-image:radial-gradient(#000,#000))){
  .hero-sharp,.lens-ring,.lens-cap{display:none}
}

/* ---------- the lens itself ---------- */
.lens-ring{
  position:absolute;left:var(--lens-x);top:var(--lens-y);
  width:calc(var(--lens-r)*2);height:calc(var(--lens-r)*2);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    inset 0 16px 40px rgba(255,255,255,.09),
    inset 0 -20px 44px rgba(7,4,38,.30),
    0 24px 60px rgba(7,4,38,.55);
}
/* The client's cyan -> violet gradient, used here as a physical rim glint
   rather than as decoration. Standard gradient-border technique. */
.lens-ring::before{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;padding:1.5px;
  background:linear-gradient(140deg,
    var(--accent) 0%, rgba(22,198,217,0) 34%,
    rgba(124,107,255,0) 58%, var(--accent-2) 100%);
  opacity:.9;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Specular highlight — a lens catches the light somewhere. */
.lens-ring::after{
  content:"";position:absolute;left:13%;top:9%;width:44%;height:23%;
  border-radius:50%;transform:rotate(-22deg);filter:blur(7px);
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0))
}

/* Feathers the panel into the indigo — bottom on phones, left edge on desktop,
   which is what stops the page reading as two websites stapled together. */
.hero-feather{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,7,51,.55) 0%, rgba(11,7,51,0) 24%,
    rgba(11,7,51,0) 62%, rgba(11,7,51,.55) 100%)
}

.lens-cap{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
  width:min(340px,92%);text-align:center;padding:18px 26px;
  font-size:.71rem;line-height:1.5;color:#fff;
  text-shadow:0 1px 10px rgba(7,4,38,.95), 0 0 26px rgba(7,4,38,.8);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(7,4,38,.72) 0%, rgba(7,4,38,.6) 48%, rgba(7,4,38,0) 100%)
}
.lens-cap b{
  display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
  color:var(--accent);margin-bottom:3px;letter-spacing:-.005em
}

/* ---------- the copy ---------- */
.hero-in{position:relative;z-index:1}
.hero-copy{max-width:640px}
.hero h1{
  margin-bottom:24px;
  font-size:clamp(2.25rem,5.6vw,4.05rem);line-height:1;letter-spacing:-.033em
}
.hero .lead{margin-bottom:30px;color:rgba(255,255,255,.78);max-width:47ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- the prescription card ----------
   The artefact every one of their customers walks in holding. It says
   "we are the people who read this" faster than a sentence can. */
.rx{
  margin-top:30px;width:fit-content;max-width:100%;
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  background:rgba(255,255,255,.05);padding:15px 18px 14px
}
.rx-h{
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px
}
.rx-grid{
  display:grid;grid-template-columns:auto repeat(3,minmax(54px,1fr));
  gap:5px 18px;align-items:baseline;
  font-family:var(--display);font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.01em
}
.rx-hd{
  font-family:var(--body);font-size:.63rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.66)
}
.rx-eye{color:var(--accent);font-size:.8rem;letter-spacing:.08em}
.rx-n{
  margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.13);
  font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72)
}

@media(min-width:900px){
  .hero{
    display:flex;flex-direction:column;justify-content:center;
    /* Top padding runs ahead of bottom padding on purpose: centred inside an
       asymmetric box, the copy settles slightly below the middle of the screen,
       which is where it wants to sit under a header. */
    padding:calc(76px + clamp(16px,3.1vh,58px)) 0 clamp(16px,2.6vh,54px);
    --lens-r: clamp(100px,11.6vw,172px);
    --lens-y: 45%;
    --haze:   8px;
  }
  /* Out of flow and flush to the right edge and the hero's floor. It starts
     at 76px so the header always sits on clean indigo, never on a face. */
  .hero-panel{
    position:absolute;top:76px;right:0;bottom:0;
    width:clamp(320px,45%,760px);height:auto;margin:0;
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,#000 36%),
      linear-gradient(180deg,transparent 0,#000 11%,#000 86%,transparent 100%);
            mask-image:
      linear-gradient(90deg,transparent 0,#000 36%),
      linear-gradient(180deg,transparent 0,#000 11%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-composite:intersect;
  }
  .hero-img,.hero-sharp{object-position:56% 42%}
  .hero-feather{
    background:linear-gradient(90deg,
      rgba(11,7,51,.62) 0%, rgba(11,7,51,.18) 26%, rgba(11,7,51,0) 48%)
  }
  /* Centred under the lens, but sitting on the faded foot of the panel where
     the ground is dark — it is the only text there, so it still reads as the
     lens's label. */
  .lens-cap{
    left:var(--lens-x);bottom:clamp(16px,2.6vw,34px);
    transform:translateX(-50%);width:min(330px,82%)
  }
  .hero-copy{max-width:min(560px,50%)}

  /* Every vertical measure in the hero is capped against the viewport height as
     well as its width, so the block shrinks to fit a short laptop screen rather
     than overflowing it. */
  .hero .eyebrow{margin-bottom:clamp(10px,1.8vh,22px)}
  .hero h1{
    font-size:clamp(2.35rem,min(5.6vw,7vh),4.05rem);
    margin-bottom:clamp(12px,2.2vh,26px)
  }
  .hero .lead{font-size:clamp(1rem,min(1.5vw,2.5vh),1.14rem);margin-bottom:clamp(16px,2.8vh,32px)}
  .hero-cta .btn{min-height:clamp(46px,6.2vh,50px)}

  /* The card keeps its proportions but gives up its slack on a short window.
     Every clamp tops out at the value it already had, so nothing changes on a
     screen that had room for it. */
  .rx{margin-top:clamp(16px,2.6vh,32px);
      padding:clamp(11px,1.7vh,15px) 18px clamp(10px,1.6vh,14px)}
  .rx-h{margin-bottom:clamp(8px,1.4vh,12px)}
  .rx-grid{gap:clamp(3px,.6vh,5px) 18px}
  .rx-n{margin-top:clamp(9px,1.5vh,13px);padding-top:clamp(9px,1.4vh,12px)}
}

/* ---------- proof strip — STATIC, never a count-up ---------- */
.proofband{
  background:var(--deepest);color:#fff;
  padding:clamp(30px,4.2vw,46px) 0;border-top:1px solid rgba(255,255,255,.1)
}
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.proof-i{padding:16px 14px 16px 0}
.proof-i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.proof-n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.05rem,4.4vw,2.95rem);line-height:1;letter-spacing:-.035em;
  color:#fff;font-variant-numeric:tabular-nums
}
.proof-n .sfx{color:var(--accent);font-size:.44em;letter-spacing:.01em;
  margin-left:.24em;vertical-align:.52em}
.proof-l{font-size:.8rem;color:rgba(255,255,255,.66);margin-top:9px}
@media(min-width:760px){
  .proofband{padding:clamp(14px,2.2vh,44px) 0}
  .proof-n{font-size:clamp(1.85rem,min(4.4vw,4.6vh),2.95rem)}
  .proof-l{margin-top:clamp(5px,1vh,9px)}
  .proof-grid{grid-template-columns:repeat(4,1fr)}
  .proof-i{border-top:0;padding:2px 22px 2px 0}
  .proof-i+.proof-i{border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
  .proof-i:nth-child(n+3){border-top:0;padding-top:2px}
}

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.shead{max-width:820px;margin-bottom:clamp(38px,5vw,58px)}
.shead h2{margin-bottom:18px}
.shead-row{display:grid;gap:22px;align-items:end;margin-bottom:clamp(38px,5vw,58px)}
@media(min-width:900px){
  .shead-row{grid-template-columns:1fr auto}
  .shead-row .shead{margin-bottom:0}
}

/* ==========================================================================
   HOSPITAL FINDER
   ========================================================================== */
.finder-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow-md)}
.finder-lbl{display:block;font-weight:700;font-size:.95rem;margin-bottom:12px}
.finder-in{position:relative;display:flex;align-items:center}
.finder-in > svg{position:absolute;left:18px;width:19px;height:19px;color:var(--muted);pointer-events:none}
#hospitalSearch{
  width:100%;min-height:58px;padding:0 20px 0 50px;background:var(--pearl);
  border:1px solid var(--line);border-radius:999px;font-size:1rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)
}
#hospitalSearch::placeholder{color:var(--muted)}
#hospitalSearch:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:var(--ring)}

.finder-out{margin-top:22px}
.hos-list{display:grid;gap:8px}
.hos{
  display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--pearl);
  border:1px solid transparent;border-radius:12px;text-decoration:none;min-height:56px;
  transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease)
}
.hos:hover,.hos:focus-visible{border-color:var(--accent);background:#fff;transform:translateX(3px)}
.hos-tick{width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(22,198,217,.16);display:grid;place-items:center;color:var(--accent-deep)}
.hos-tick svg{width:14px;height:14px}
.hos-txt{min-width:0}
.hos-n{display:block;font-weight:600;font-size:.96rem;line-height:1.3}
.hos-s{display:block;font-size:.79rem;color:var(--muted);margin-top:1px}
.hos-go{margin-left:auto;color:var(--muted);flex:none;display:flex}
.hos-go svg{width:16px;height:16px}

.finder-msg{
  display:flex;gap:13px;padding:16px 18px;border-radius:12px;
  background:rgba(22,198,217,.1);border:1px solid rgba(22,198,217,.36);
  font-size:.92rem;line-height:1.55
}
.finder-msg svg{width:19px;height:19px;color:var(--accent-deep);flex:none;margin-top:2px}
.finder-msg a{color:var(--accent-deep);font-weight:700}
.finder-foot{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.finder-foot p{font-size:.87rem;color:var(--muted)}

.finder-wrap{display:grid;gap:clamp(30px,4vw,48px)}
@media(min-width:960px){.finder-wrap{grid-template-columns:.85fr 1.15fr;align-items:start}}

.net-fig{margin:clamp(30px,3.5vw,44px) 0 0}
.net-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.net-fig figcaption{font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:14px;
  padding-left:14px;border-left:3px solid var(--accent);max-width:40ch}

/* ==========================================================================
   THE HANDOFF (deep)
   ========================================================================== */
.steps{display:grid;gap:1px;background:rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.step{background:var(--ink-deep);padding:30px 0}
.step h3{margin-bottom:9px;font-size:1.16rem}
.step p{font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.72);max-width:44ch}
/* Specificity note: .step-n is itself a <p>, so it must out-rank `.step p`. */
.step p.step-n{font-family:var(--display);font-weight:700;font-size:.9rem;
  color:var(--accent);letter-spacing:.14em;margin-bottom:14px;max-width:none}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{padding:34px 30px}
  .step:first-child{padding-left:0}
}
.handoff-fig{margin:clamp(40px,5vw,60px) 0 0}
.handoff-fig img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius)}

/* ==========================================================================
   COLLECTIONS
   ========================================================================== */
.cols{display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:780px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{position:relative;text-decoration:none;display:block;overflow:hidden;
  border-radius:var(--radius);background:var(--ink-deep);box-shadow:var(--shadow-md)}
.col-img{aspect-ratio:3/3.8;overflow:hidden}
.col-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease),filter .35s var(--ease)}
.col:hover .col-img img,.col:focus-visible .col-img img{transform:scale(1.045)}
.col-body{
  position:absolute;inset:auto 0 0 0;padding:70px 22px 24px;color:#fff;
  background:linear-gradient(to top,rgba(7,4,38,.95) 22%,rgba(7,4,38,.58) 62%,rgba(7,4,38,0))
}
.col-body h3{font-size:1.5rem;margin-bottom:7px;letter-spacing:-.02em}
.col-body p{font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.8);margin-bottom:13px}
.col-go{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--accent)}
.col-go svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.col:hover .col-go svg{transform:translateX(4px)}

/* ==========================================================================
   LENSES + focus demo
   ========================================================================== */
.lens-wrap{display:grid;gap:clamp(34px,4.5vw,54px)}
@media(min-width:980px){.lens-wrap{grid-template-columns:.92fr 1.08fr;align-items:start}}

.focusdemo{
  background:
    radial-gradient(circle at 18% 12%, rgba(22,198,217,.18), transparent 55%),
    radial-gradient(circle at 88% 90%, rgba(124,107,255,.22), transparent 55%),
    var(--ink-deep);
  color:#fff;border-radius:var(--radius);padding:clamp(26px,3.4vw,36px)
}
@media(min-width:980px){.focusdemo{position:sticky;top:100px}}
.focusdemo .eyebrow{margin-bottom:16px;color:var(--accent)}
.focusdemo .eyebrow::before{background:var(--accent)}
.fd-stage{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:30px 24px;margin-bottom:24px;min-height:168px;
  display:grid;place-content:center;text-align:center;overflow:hidden
}
.fd-text{font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,3.2vw,1.95rem);line-height:1.22;letter-spacing:-.02em;will-change:filter}
.fd-sub{font-size:.85rem;color:rgba(255,255,255,.58);margin-top:12px;letter-spacing:.04em}
.fd-ctl label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;
  background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.22);border-radius:3px}
input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.22);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  border-radius:50%;background:var(--accent);border:4px solid var(--ink-deep);margin-top:-12px;
  box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:4px solid var(--ink-deep);box-shadow:0 0 0 1px var(--accent)}
.fd-scale{display:flex;justify-content:space-between;font-size:.72rem;
  color:rgba(255,255,255,.5);letter-spacing:.08em;margin-top:2px}
.fd-foot{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.55}

.lens-list{display:grid;border-top:1px solid var(--line)}
.lens-i{display:grid;gap:6px;padding:24px 0;border-bottom:1px solid var(--line)}
.lens-top{display:flex;align-items:baseline;gap:14px}
.lens-k{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink-mid);
  letter-spacing:.04em;flex:none;width:34px}
.lens-i h3{font-size:1.12rem}
.lens-i p{font-size:.94rem;color:var(--muted);line-height:1.58;padding-left:48px;max-width:56ch}

/* ==========================================================================
   GUARANTEES
   ========================================================================== */
.gtees{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
@media(min-width:680px){.gtees{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gtees{grid-template-columns:repeat(3,1fr)}}
.gtee{background:var(--paper);padding:30px 26px}
.gtee-ic{width:44px;height:44px;border-radius:12px;background:rgba(22,198,217,.14);
  color:var(--accent-deep);display:grid;place-items:center;margin-bottom:16px}
.gtee-ic svg{width:23px;height:23px;stroke-width:1.5}
.gtee h3{margin-bottom:8px}
.gtee p{font-size:.92rem;color:var(--muted);line-height:1.58}

/* ==========================================================================
   STORIES
   ========================================================================== */
.stories{display:grid;gap:clamp(16px,2vw,20px)}
@media(min-width:720px){.stories{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.stories{grid-template-columns:repeat(3,1fr)}}
.story{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;display:flex;flex-direction:column}
.story blockquote{font-size:1.06rem;line-height:1.55;margin-bottom:22px;flex:1;color:var(--ink)}
.story-by{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line)}
.av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--accent);font-family:var(--display);
  font-size:.8rem;font-weight:700;letter-spacing:.04em}
.story-n{display:block;font-weight:700;font-size:.92rem;line-height:1.3}
.story-c{display:block;font-size:.8rem;color:var(--muted)}

/* ==========================================================================
   PARTNER CTA
   ========================================================================== */
/* Like the first screen, this indigo block owns the screen while it is in view
   rather than leaving a band of the pearl section showing above it. Grid rather
   than flex so .shell still stretches the full width and centres itself; only
   the row is centred vertically. min-height never squashes, so on a short window
   the section simply grows past the screen as it always did. */
#partnerships{
  min-height:100vh;
  min-height:100svh;
  display:grid;align-content:center;
}

.pcta{display:grid;gap:clamp(30px,4vw,52px);align-items:center}
@media(min-width:900px){.pcta{grid-template-columns:1.05fr .95fr}}
.pcta h2{margin-bottom:20px}
.pcta-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pcta-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.pcta-pts{margin-top:26px;display:grid;gap:12px}
.pcta-pts li{display:flex;gap:12px;font-size:.95rem;color:rgba(255,255,255,.8);line-height:1.55}
.pcta-pts svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:4px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--deepest);color:#fff;padding:clamp(56px,7vw,84px) 0 0}
.ftr-top{display:grid;gap:clamp(34px,4vw,48px);padding-bottom:clamp(40px,5vw,58px)}
@media(min-width:900px){.ftr-top{grid-template-columns:1.4fr 1fr 1fr 1.25fr}}
.ftr-about{font-size:.9rem;line-height:1.62;color:rgba(255,255,255,.66);margin-top:20px;max-width:38ch}
.ftr h4{font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.ftr-l li a{display:inline-flex;align-items:center;min-height:38px;font-size:.92rem;
  color:rgba(255,255,255,.78);text-decoration:none;transition:color .16s var(--ease)}
.ftr-l li a:hover,.ftr-l li a:focus-visible{color:#fff}
.ftr-c{display:grid;gap:16px;font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.6}
.ftr-c a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.ftr-c a:hover{border-bottom-color:var(--accent)}
.ftr-c .k{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:3px}
.socials{display:flex;gap:8px;margin-top:22px}
.socials a{width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  display:grid;place-items:center;color:rgba(255,255,255,.84);
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.socials a:hover,.socials a:focus-visible{border-color:var(--accent);color:var(--accent);
  background:rgba(22,198,217,.1)}
.socials svg{width:17px;height:17px}
.ftr-btm{border-top:1px solid rgba(255,255,255,.14);padding:24px 0 30px;display:flex;
  flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.55)}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr-btm a{color:inherit;text-decoration:none}
.ftr-btm a:hover{color:#fff}

/* ==========================================================================
   REVEAL — opt-in, off for reduced motion and when JS never runs
   ========================================================================== */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ==========================================================================
   RESPONSIVE REFINEMENTS
   ========================================================================== */
@media(min-width:620px) and (max-width:899px){
  .net-fig img{aspect-ratio:16/9}
  .pcta-fig img{aspect-ratio:16/9}
}
@media(max-width:619px){
  .col-img{aspect-ratio:4/3.6}
  .handoff-fig img{aspect-ratio:4/3}
}
@media(min-width:560px) and (max-width:779px){
  .cols{grid-template-columns:repeat(2,1fr)}
  .col:first-child{grid-column:1 / -1}
  .col:first-child .col-img{aspect-ratio:16/9}
}

@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
  }
  .js .rv{opacity:1 !important;transform:none !important}
}