/* ============================================================
   INLINE DENTAL — Design System
   Signature motif: the strike-line from the Inline Dental
   wordmark, reused as the site's structural rule.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:#060F1C;
  --navy:#0A1728;
  --surface:#0F2137;
  --surface-2:#16304C;
  --line:rgba(203,215,230,.14);
  --line-strong:rgba(203,215,230,.28);

  --accent:#22D3EE;
  --accent-soft:#67E8F9;
  --steel:#2E6FD9;
  --steel-lit:#7FB0F5;
  --platinum:#CBD7E6;
  --mist:#E6EDF5;
  --white:#FFFFFF;
  --muted:#93A4BC;

  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Work Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* The scale used to stop growing at ~1440px, so on a 1920 or 2560 monitor the
     type stayed exactly the same size while the screen nearly doubled — which is
     what made the whole site read as small. Every ceiling is raised and the vw
     term keeps working further up. */
  --step--1:clamp(.8rem,.77rem + .13vw,.92rem);
  --step-0:clamp(1.02rem,.99rem + .2vw,1.18rem);
  --step-1:clamp(1.24rem,1.16rem + .42vw,1.6rem);
  --step-2:clamp(1.58rem,1.4rem + .86vw,2.3rem);
  --step-3:clamp(2rem,1.68rem + 1.6vw,3.4rem);
  --step-4:clamp(2.6rem,1.9rem + 2.75vw,5rem);

  /* Light surfaces, used to break up the dark ground */
  --lt-bg:#EEF3F8;
  --lt-bg-2:#F7FAFC;
  --lt-surface:#FFFFFF;
  --lt-ink:#0A1728;
  --lt-body:#46566E;
  --lt-muted:#5A6B85;
  --lt-line:rgba(10,23,40,.12);
  --lt-line-strong:rgba(10,23,40,.2);

  --gutter:clamp(1.15rem,4vw,3.4rem);
  /* Was a flat 1240px: 65% of a 1920 screen and only 49% of a 2560 one, leaving
     650px of dead margin either side. Now it keeps opening up on big monitors. */
  --maxw:clamp(1240px,88vw,1560px);
  --radius:14px;

  /* Easing: expo-out reads smoothest for entrances, soft for micro-interactions */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --z-nav:60; --z-drawer:80; --z-modal:85; --z-top:90;

  /* One source of truth for the floating pill. Every offset that has to clear
     the nav — hero padding, page headers, the sticky service finder, the mobile
     dropdown — is derived from these, so the nav can be resized in one place. */
  --nav-top:clamp(10px,1.4vw,16px);
  --nav-h:70px;
}
@media (max-width:1023.98px){ :root{ --nav-h:64px; } }
@media (min-width:1200px){ :root{ --nav-h:78px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-top) + var(--nav-h) + 1.5rem)}
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--mist);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul{list-style:none;padding:0}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-top);
  background:var(--accent);color:var(--ink);padding:.75rem 1.25rem;
  border-radius:0 0 8px 8px;font-weight:600;transition:top .28s var(--ease-out);
}
.skip-link:focus{top:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,8.5vw,9rem)}
.section--tight{padding-block:clamp(3rem,5.5vw,6rem)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;line-height:1.08;color:var(--white)}
h1{font-size:var(--step-4);letter-spacing:-.02em}
h2{font-size:var(--step-3);letter-spacing:-.015em}
h3{font-size:var(--step-2);letter-spacing:-.01em}
h4{font-size:var(--step-1);font-weight:400}
p{max-width:68ch}
strong{font-weight:600;color:var(--white)}

.lede{font-size:var(--step-1);font-weight:300;color:var(--platinum);line-height:1.6}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase}
.center{text-align:center}
.center p{margin-inline:auto}

/* SIGNATURE: the strike-line eyebrow, taken from the wordmark */
.eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.4rem;
}
.eyebrow::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent);
}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{
  content:"";flex:1;height:1px;
  background:linear-gradient(270deg,var(--line-strong),transparent);
}

/* The wordmark strike, echoing the logo exactly */
.strike{position:relative;display:inline-block}
.strike::after{
  content:"";position:absolute;left:-6%;right:-6%;top:52%;height:1px;
  background:linear-gradient(90deg,transparent,var(--platinum) 18%,var(--platinum) 82%,transparent);
  opacity:.55;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-family:var(--font-display);font-weight:500;font-size:var(--step-0);
  letter-spacing:.01em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft),box-shadow .35s var(--ease-soft),transform .3s var(--ease-out);
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--accent);color:var(--ink);font-weight:600}
.btn--primary:hover{background:var(--accent-soft);box-shadow:0 10px 34px -10px rgba(34,211,238,.6);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-strong);color:var(--white)}
.btn--ghost:hover{border-color:var(--platinum);background:rgba(203,215,230,.07);transform:translateY(-2px)}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:500;color:var(--accent);
  transition:gap .32s var(--ease-out),color .3s var(--ease-soft);
}
.link-arrow:hover{gap:.85rem;color:var(--accent-soft)}
.link-arrow svg{width:16px;height:16px}

/* ---------- Header: floating pill ---------- */
.header{
  position:fixed;top:var(--nav-top);left:0;right:0;
  z-index:var(--z-nav);
  background:transparent;border:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  pointer-events:none;                 /* only the pill itself is clickable */
}
.header__inner{
  pointer-events:auto;
  width:max-content;max-width:calc(100% - clamp(1rem,4vw,2.5rem)*2);
  margin-inline:auto;
  display:flex;align-items:center;flex-wrap:nowrap;gap:8px;
  min-height:var(--nav-h);
  padding:10px 10px 10px 22px;
  /* .85 not .8: the pill floats over light sections too, and at .8 the
     composite lifts enough to drop muted link text under 4.5:1. */
  background:rgba(10,23,40,.85);
  border:1px solid rgba(203,215,230,.18);
  border-radius:999px;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:background-color .4s var(--ease-soft),box-shadow .4s var(--ease-soft),
             border-color .4s var(--ease-soft);
}
/* Barely-there firming as you scroll — the reference keeps the pill constant,
   but this site scrolls over light sections too, where a touch more opacity
   keeps the hairline readable. */
.header.is-stuck .header__inner{
  background:rgba(10,23,40,.94);
  border-color:rgba(203,215,230,.24);
  box-shadow:0 10px 38px rgba(0,0,0,.5);
}

/* Brand: the wordmark sits inside the pill */
.brand{display:flex;align-items:center;flex:none;transition:opacity .3s var(--ease-soft)}
.brand:hover{opacity:.82}
.brand__logo{
  height:clamp(28px,3.2vw,42px);width:auto;
  filter:drop-shadow(0 1px 10px rgba(127,176,245,.22));
}
.footer .brand__logo{height:38px}

.nav{display:flex;align-items:center;gap:2px;margin-left:.35rem}
.nav__link{
  position:relative;padding:12px 14px;border-radius:999px;
  font-family:var(--font-display);font-weight:400;font-size:1rem;
  color:rgba(230,237,245,.78);white-space:nowrap;
  transition:color .28s var(--ease-soft),background-color .28s var(--ease-soft);
}
.nav__link:hover{color:var(--white);background:rgba(203,215,230,.09)}
.nav__link[aria-current="page"]{color:var(--ink);background:var(--accent);font-weight:500}
.header__cta{margin-left:.4rem;min-height:48px;padding:.7rem 1.35rem;font-size:1rem}

.burger{
  display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(203,215,230,.2);border-radius:999px;cursor:pointer;
  flex:none;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--white);position:relative;transition:background-color .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--white);
  transition:transform .38s var(--ease-out),top .28s var(--ease-soft);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (min-width:1200px){
  .header__inner{padding:12px 12px 12px 26px;gap:8px}
  .nav__link{padding:13px 17px;font-size:1.1rem}
  .header__cta{min-height:52px;padding:.78rem 1.5rem;font-size:1.06rem}
}

/* Mobile menu: a rounded panel under the pill, not a full-screen slide-in */
.drawer{
  position:fixed;z-index:var(--z-drawer);
  top:calc(var(--nav-top) + var(--nav-h) + 8px);
  left:clamp(1rem,4vw,2.5rem);right:clamp(1rem,4vw,2.5rem);
  max-height:calc(100vh - var(--nav-top) - var(--nav-h) - 28px);
  padding:.6rem;
  display:flex;flex-direction:column;
  background:rgba(10,23,40,.97);
  border:1px solid rgba(203,215,230,.18);
  border-radius:22px;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transform:translateY(-10px) scale(.985);transform-origin:top center;
  transition:opacity .32s var(--ease-soft),transform .42s var(--ease-out),visibility .42s var(--ease-soft);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
/* Links settle in just behind the panel so the menu unfolds rather than
   appearing all at once. */
.drawer__link,.drawer__foot{
  opacity:0;transform:translateY(-6px);
  transition:opacity .34s var(--ease-out),transform .38s var(--ease-out);
}
.drawer.is-open .drawer__link,.drawer.is-open .drawer__foot{opacity:1;transform:none}
.drawer.is-open .drawer__link:nth-child(1){transition-delay:.05s}
.drawer.is-open .drawer__link:nth-child(2){transition-delay:.085s}
.drawer.is-open .drawer__link:nth-child(3){transition-delay:.12s}
.drawer.is-open .drawer__link:nth-child(4){transition-delay:.155s}
.drawer.is-open .drawer__link:nth-child(5){transition-delay:.19s}
.drawer.is-open .drawer__link:nth-child(6){transition-delay:.225s}
.drawer.is-open .drawer__foot{transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .drawer__link,.drawer__foot{opacity:1 !important;transform:none !important;transition:none !important}
}
.drawer__link{
  font-family:var(--font-display);font-weight:400;font-size:1.02rem;
  color:var(--mist);padding:.85rem 1rem;border-radius:14px;border-bottom:0;
  display:flex;align-items:center;gap:.85rem;
  transition:background-color .22s var(--ease-soft),color .22s var(--ease-soft);
}
.drawer__link:hover{background:rgba(203,215,230,.08);color:var(--white)}
.drawer__link span{font-family:var(--font-mono);font-size:.62rem;color:var(--accent);letter-spacing:.1em}
.drawer__link[aria-current="page"]{background:rgba(34,211,238,.14);color:var(--accent)}
.drawer__foot{margin-top:.5rem;padding:.5rem .4rem .3rem;display:grid;gap:.5rem;border-top:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(92vh,880px);
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 3.2rem);padding-bottom:4rem;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px)}
.hero__glow--a{width:44vw;height:44vw;min-width:340px;min-height:340px;background:var(--steel);top:-14%;right:-10%;opacity:.34}
.hero__glow--b{width:34vw;height:34vw;min-width:260px;min-height:260px;background:var(--accent);bottom:-16%;left:-8%;opacity:.2}
.hero__grid{
  position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent);
}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
.hero h1{margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lede{margin-bottom:2.2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:3rem}

/* Hero spec strip — real lab data, set like a docket */
.specs{
  /* Always a 2x2 block. auto-fit produced 3- and 5-column tracks that orphaned a
     cell, and since the hero left column is capped at 540px a 4-across row is too
     narrow for "CAD & CAM" without it wrapping. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}

.specs__item{background:var(--navy);padding:1.15rem 1.15rem;min-width:0}
.specs__val{
  font-family:var(--font-display);font-size:var(--step-2);font-weight:300;
  color:var(--white);line-height:1.05;margin-bottom:.45rem;
  min-width:0;overflow-wrap:break-word;
}
/* Word values are set smaller than numeric ones so long labels like CAD/CAM
   never clip out of their column, and the numbers stay the loud thing. */
.specs__val--word{
  font-size:clamp(1.05rem,.92rem + .55vw,1.38rem);
  font-weight:400;letter-spacing:.005em;
}
.specs__val span{color:var(--accent);font-size:.6em}
.specs__val--word span{color:var(--accent);font-size:1em}
.specs__key{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Hero media: the lab photograph ---------- */
.hero__media{display:grid;gap:.85rem;align-content:start}
.hero__shot{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  /* matches the cropped source (925x735) so the bench shot is never re-cropped */
  aspect-ratio:925/735;
}
.hero__shot img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
.hero__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,15,28,.55),transparent 42%);
}
.hero__caption{
  position:absolute;left:1rem;bottom:.9rem;z-index:2;
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--platinum);
}
.hero__caption b{color:var(--accent);font-weight:500}



/* SIGNATURE SUPPORT: the lab work ticket that rides with every case */
.docket{
  background:var(--navy);border:1px solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.docket__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.docket__title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--platinum)}
.docket__id{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent)}
.docket__rows{display:grid}
.docket__row{
  display:grid;grid-template-columns:minmax(88px,.8fr) 1.2fr;gap:1rem;
  padding:.72rem 1.25rem;border-bottom:1px solid var(--line);
}
.docket__k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.docket__v{font-family:var(--font-display);font-size:.94rem;color:var(--white);font-weight:400}
.docket__v em{font-style:normal;color:var(--accent)}
.docket__foot{padding:1.1rem 1.25rem;display:grid;gap:.75rem}
.docket__stages{display:flex;gap:.4rem}
.docket__stage{
  flex:1;height:4px;border-radius:2px;background:var(--line-strong);
}
.docket__stage.is-done{background:var(--steel-lit)}
.docket__stage.is-now{background:var(--accent)}
.docket__legend{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:1rem}
.docket__legend b{color:var(--accent);font-weight:500}

/* ---------- Page header (interior pages) ---------- */
.pagehead{
  position:relative;padding-top:calc(var(--nav-top) + var(--nav-h) + 3.6rem);padding-bottom:clamp(2.5rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.pagehead::before{
  content:"";position:absolute;width:50vw;height:50vw;min-width:380px;min-height:380px;
  border-radius:50%;background:var(--steel);filter:blur(110px);opacity:.22;top:-32%;right:-14%;
}
.pagehead__inner{position:relative;z-index:1}
.pagehead p{margin-top:1.25rem}
.crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.crumb a:hover{color:var(--accent)}

/* ---------- Cards / bento ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.1rem);
  transition:border-color .38s var(--ease-soft),background-color .38s var(--ease-soft),transform .38s var(--ease-out),box-shadow .38s var(--ease-soft);
  height:100%;
}
.card:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(0,0,0,.9)}
.card__num{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--accent);margin-bottom:1.1rem;display:block;
}
.card h3{margin-bottom:.7rem}
.card h4{margin-bottom:.6rem;color:var(--white)}
.card p{color:var(--muted);font-size:1.02rem}
.card__icon{
  width:46px;height:46px;margin-bottom:1.3rem;
  display:grid;place-items:center;border-radius:11px;
  background:rgba(46,111,217,.16);border:1px solid rgba(127,176,245,.3);color:var(--steel-lit);
}
.card__icon svg{width:23px;height:23px}

a.card{display:block;cursor:pointer}
a.card:hover h3{color:var(--accent)}

/* ---------- Service showcase ---------- */
.svc{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);
}
.svc__media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--navy)}
.svc__media img{width:100%}
.svc__list{display:grid;gap:1.1rem;margin-top:1.8rem}
.svc__item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.svc__badge{
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(46,111,217,.2);border:1px solid rgba(127,176,245,.34);
  font-family:var(--font-mono);font-size:.76rem;color:var(--steel-lit);
}
.svc__item h4{font-size:1.02rem;font-weight:500;color:var(--white);margin-bottom:.25rem;letter-spacing:.02em}
.svc__item p{font-size:1rem;color:var(--muted)}

/* Pill tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.tag{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--platinum);
}
.tag--accent{border-color:rgba(34,211,238,.4);color:var(--accent);background:rgba(34,211,238,.08)}

/* ============================================================
   POSTER RAIL — horizontal, snap-scrolled, arrow-driven
   ============================================================ */
.rail-x{position:relative}
.rail-x__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:1.6rem;flex-wrap:wrap;
}
.rail-x__nav{display:flex;gap:.5rem;flex:none}
.rail-x__btn{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(203,215,230,.07);border:1px solid var(--line-strong);color:var(--white);
  transition:background-color .28s var(--ease-soft),border-color .28s var(--ease-soft),
             color .28s var(--ease-soft),opacity .28s var(--ease-soft);
}
.rail-x__btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--ink)}
.rail-x__btn:disabled{opacity:.3;cursor:default}
.rail-x__btn svg{width:20px;height:20px}

.rail-x__track{
  display:flex;gap:clamp(.85rem,1.6vw,1.25rem);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* let posters lift on hover without being clipped */
  padding:.5rem calc(var(--gutter)) 1.75rem;
  margin-inline:calc(var(--gutter) * -1);
}
.rail-x__track::-webkit-scrollbar{display:none}

.poster{
  position:relative;flex:0 0 auto;
  width:clamp(210px,44vw,268px);
  aspect-ratio:2/3;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--navy);
  scroll-snap-align:start;cursor:pointer;text-align:left;
  transition:transform .45s var(--ease-out),border-color .35s var(--ease-soft),box-shadow .45s var(--ease-soft);
}
.poster:hover,.poster:focus-visible{
  transform:translateY(-6px) scale(1.03);
  border-color:rgba(34,211,238,.5);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
  z-index:2;
}
.poster__art{position:absolute;inset:0}
.poster__art img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .6s var(--ease-out);
}
.poster:hover .poster__art img{transform:scale(1.05)}
.poster__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,15,28,.96) 0%,rgba(6,15,28,.82) 22%,rgba(6,15,28,.1) 52%,rgba(6,15,28,.35) 100%);
}
.poster__body{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.15rem 1.15rem 1.25rem;
  display:grid;gap:.4rem;
}
.poster__cat{
  font-family:var(--font-display);font-size:1.06rem;font-weight:500;
  color:var(--white);line-height:1.2;letter-spacing:.01em;
}
.poster__meta{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--platinum);
}
.poster__go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem;
  font-family:var(--font-display);font-size:.86rem;font-weight:500;color:var(--accent);
  transition:gap .3s var(--ease-out);
}
.poster:hover .poster__go{gap:.7rem}
.poster__go svg{width:15px;height:15px}
.poster__flag{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:500;
}
/* Title block for the poster we author ourselves, so it uses the site face */
.poster__title{
  position:absolute;top:2.4rem;left:1.15rem;right:1.15rem;z-index:1;
  font-family:var(--font-display);line-height:.94;
}
.poster__title span{display:block}
.poster__title .t1{font-weight:200;font-size:1.5rem;letter-spacing:.22em;color:var(--white)}
.poster__title .t2{font-weight:600;font-size:2rem;letter-spacing:.04em;color:var(--accent);margin-top:.25rem}

.rail-x__hint{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:.25rem;
}
@media (min-width:900px){ .rail-x__hint{display:none} }

.section--light .rail-x__btn{background:rgba(10,23,40,.05);border-color:var(--lt-line-strong);color:var(--lt-ink)}
.section--light .rail-x__btn:hover:not(:disabled){background:#0E7490;border-color:#0E7490;color:#fff}
.section--light .rail-x__hint{color:var(--lt-muted)}

/* ============================================================
   ROADMAP — the route a case takes through the lab
   ============================================================ */
.roadmap{position:relative;--progress:0}
.roadmap__spine{
  position:absolute;top:0;bottom:0;left:27px;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.roadmap__spine::after{
  content:"";position:absolute;inset:0;transform-origin:top;
  transform:scaleY(var(--progress));
  background:linear-gradient(180deg,var(--accent),var(--steel-lit));
}
.roadmap__stop{
  position:relative;display:grid;
  grid-template-columns:56px 1fr;
  gap:0 1.25rem;
  padding-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.roadmap__stop:last-child{padding-bottom:0}
.roadmap__node{
  position:relative;z-index:2;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:.8rem;color:var(--platinum);
  transition:background-color .5s var(--ease-soft),border-color .5s var(--ease-soft),color .5s var(--ease-soft),box-shadow .5s var(--ease-soft);
}
.roadmap__stop.is-reached .roadmap__node{
  background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:500;
  box-shadow:0 0 0 6px rgba(34,211,238,.14);
}
.roadmap__card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.15rem,2.4vw,1.6rem);
  transition:border-color .4s var(--ease-soft),transform .4s var(--ease-out),box-shadow .4s var(--ease-soft);
}
.roadmap__card:hover{
  border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.9);
}
.roadmap__card h3{font-size:var(--step-1);font-weight:400;margin-bottom:.5rem}
.roadmap__card p{color:var(--muted);font-size:1.02rem}
.roadmap__who{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:var(--font-mono);font-size:.67rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-lit);
  padding:.3rem .65rem;border-radius:999px;
  background:rgba(46,111,217,.14);border:1px solid rgba(127,176,245,.28);
}
.roadmap__who svg{width:13px;height:13px}

@media (min-width:920px){
  .roadmap__spine{left:50%;transform:translateX(-1px)}
  .roadmap__stop{
    grid-template-columns:1fr 56px 1fr;
    gap:0 clamp(1.5rem,3vw,2.75rem);
    align-items:center;
  }
  .roadmap__node{grid-column:2;grid-row:1}
  .roadmap__stop:nth-child(odd) .roadmap__card{grid-column:1;grid-row:1;text-align:right}
  .roadmap__stop:nth-child(odd) .roadmap__who{flex-direction:row-reverse}
  .roadmap__stop:nth-child(even) .roadmap__card{grid-column:3;grid-row:1}
  .roadmap__stop:nth-child(odd) .roadmap__card p{margin-left:auto}
}

.section--light .roadmap__spine{background:var(--lt-line)}
.section--light .roadmap__node{background:var(--lt-surface);border-color:var(--lt-line-strong);color:var(--lt-body)}
.section--light .roadmap__stop.is-reached .roadmap__node{background:#0E7490;border-color:#0E7490;color:#fff}
.section--light .roadmap__card{background:var(--lt-surface);border-color:var(--lt-line);box-shadow:0 1px 2px rgba(10,23,40,.04),0 12px 30px -22px rgba(10,23,40,.3)}
.section--light .roadmap__who{background:rgba(46,111,217,.1);border-color:rgba(46,111,217,.26);color:var(--steel)}

/* ============================================================
   TENETS — the principles list
   ============================================================ */
.tenets{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.tenets__aside p{margin-top:1.1rem}
.tenets__list{display:grid}
.tenet{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,1.9rem);
  padding-block:clamp(1.5rem,3vw,2.1rem);
  border-top:1px solid var(--line);
  transition:border-color .4s var(--ease-soft);
}
.tenet:last-child{border-bottom:1px solid var(--line)}
.tenet__n{
  font-family:var(--font-display);font-size:clamp(2.1rem,5vw,3rem);
  font-weight:200;line-height:.9;color:transparent;
  /* Decorative ghost numeral: outlined rather than filled, aria-hidden in the markup. */
  -webkit-text-stroke:1.4px rgba(203,215,230,.42);
  transition:-webkit-text-stroke-color .4s var(--ease-soft),color .4s var(--ease-soft);
}
.tenet:hover .tenet__n{-webkit-text-stroke-color:var(--accent);color:rgba(34,211,238,.1)}
.tenet h3{font-size:var(--step-1);font-weight:500;margin-bottom:.55rem;transition:color .3s var(--ease-soft)}
.tenet:hover h3{color:var(--accent)}
.tenet p{color:var(--muted);font-size:.98rem}

@media (min-width:900px){
  .tenets{grid-template-columns:minmax(240px,.85fr) 1.15fr;align-items:start}
  .tenets__aside{position:sticky;top:7rem}
}

.section--light .tenet{border-top-color:var(--lt-line)}
.section--light .tenet:last-child{border-bottom-color:var(--lt-line)}
.section--light .tenet__n{-webkit-text-stroke-color:rgba(10,23,40,.36)}
.section--light .tenet:hover .tenet__n{-webkit-text-stroke-color:#0E7490;color:rgba(14,116,144,.1)}
.section--light .tenet:hover h3{color:#0E7490}
.section--light .tenet p{color:var(--lt-body)}

/* ============================================================
   PROMO MODAL — mouth guards, straight to contact
   ============================================================ */
.promo__panel{
  width:min(880px,100%);max-height:min(90vh,720px);
  display:grid;grid-template-columns:1fr;
  padding:0;overflow:hidden;
}
.promo__art{
  position:relative;display:none;
  background:var(--navy);min-height:100%;
}
.promo__art img{width:100%;height:100%;object-fit:cover;object-position:center 75%}
.promo__art-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,15,28,.94),rgba(6,15,28,.12) 60%);
}
.promo__art-body{position:absolute;left:0;right:0;bottom:0;padding:1.5rem}
.promo__flag{
  display:inline-block;margin-bottom:.7rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:600;
}
.promo__art h3{font-size:var(--step-1);font-weight:500;color:var(--white);margin-bottom:.45rem}
.promo__art p{font-size:.9rem;color:var(--platinum);margin:0}
.promo__list{display:grid;gap:.55rem;margin-top:1rem}
.promo__list li{
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  font-size:.86rem;color:var(--platinum);
}
.promo__list svg{width:15px;height:15px;color:var(--accent);margin-top:.28rem;flex:none}

.promo__main{
  padding:clamp(1.6rem,4vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  overflow-y:auto;
}
.promo__main h2{font-size:var(--step-2);font-weight:400;line-height:1.12}
.promo__main h2 em{font-style:normal;color:var(--accent)}
.promo__main>p{color:var(--platinum);font-size:.97rem}
.promo__actions{display:grid;gap:.7rem;margin-top:.5rem}
.promo__fine{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.promo .modal__close{position:absolute;top:1rem;right:1rem;z-index:3}

@media (min-width:760px){
  .promo__panel{grid-template-columns:.85fr 1.15fr}
  .promo__art{display:block}
}
@media (max-width:520.98px){
  .promo__panel{border-radius:18px 18px 0 0}
}

/* ---------- Process rail (a genuine sequence) ---------- */
.rail{display:grid;gap:0}
.rail__step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.5rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line);
}
.rail__step:last-child{border-bottom:1px solid var(--line)}
.rail__n{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);padding-top:.4rem;letter-spacing:.1em}
.rail__step h3{font-size:var(--step-1);font-weight:400;margin-bottom:.5rem}
.rail__step p{color:var(--muted)}
.rail__meta{font-family:var(--font-mono);font-size:.71rem;color:var(--steel-lit);letter-spacing:.1em;text-transform:uppercase;margin-top:.7rem}

/* ---------- Team ---------- */
.person{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .38s var(--ease-soft),transform .38s var(--ease-out),box-shadow .38s var(--ease-soft);
  height:100%;display:flex;flex-direction:column;
}
.person:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(0,0,0,.9)}
.person__portrait{
  aspect-ratio:4/5;position:relative;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 8%,var(--surface-2),var(--navy));
  border-bottom:1px solid var(--line);overflow:hidden;
}
.person__portrait img{width:100%;height:100%;object-fit:cover}
.person__initial{
  font-family:var(--font-display);font-weight:200;
  font-size:clamp(4rem,11vw,6.5rem);color:var(--white);
  letter-spacing:.06em;position:relative;z-index:1;line-height:1;
}
.person__initial::after{
  content:"";position:absolute;left:-30%;right:-30%;top:52%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.person__rings{position:absolute;inset:0;opacity:.45}
.person__body{padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.person__name{font-family:var(--font-display);font-size:var(--step-1);font-weight:400;color:var(--white)}
.person__role{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.person__body p{font-size:1.01rem;color:var(--muted)}
.person__skills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:1rem}
.person__skills li{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--platinum);
}

/* ---------- Before / After slider ---------- */
.ba{display:grid;gap:1.25rem}
.ba__frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--navy);
  aspect-ratio:526/300;touch-action:pan-y;user-select:none;
}
.ba__layer{position:absolute;inset:0}
.ba__layer img,.ba__layer svg{width:100%;height:100%;object-fit:cover;display:block}
.ba__layer--after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__tag{
  position:absolute;top:.9rem;z-index:3;font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;
  background:rgba(6,15,28,.82);border:1px solid var(--line-strong);color:var(--platinum);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;
}
.ba__tag--before{left:.9rem}
.ba__tag--after{right:.9rem;color:var(--accent);border-color:rgba(34,211,238,.45)}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;z-index:4;
  background:var(--accent);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 22px rgba(34,211,238,.75);
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);display:grid;place-items:center;color:var(--ink);
  box-shadow:0 6px 26px rgba(6,15,28,.6);
}
.ba__knob svg{width:22px;height:22px}
.ba__range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;appearance:none;background:none;
}
.ba__frame:focus-within .ba__knob{outline:3px solid var(--white);outline-offset:3px}
.ba__caption{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;justify-content:space-between}
.ba__caption h3,.ba__caption .ba__title{font-size:var(--step-1);font-weight:400;font-family:var(--font-display);color:var(--white)}
.section--light .ba__caption .ba__title{color:var(--lt-ink)}
.ba__caption p{font-size:.94rem;color:var(--muted);margin-top:.3rem}

.case{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.25rem,2.5vw,1.75rem);
}
.case__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem;
  padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.69rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.case__meta b{color:var(--platinum);font-weight:500}

.notice{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  background:rgba(46,111,217,.1);border:1px solid rgba(127,176,245,.28);
  border-radius:var(--radius);padding:1.25rem 1.4rem;
}
.notice svg{width:20px;height:20px;color:var(--steel-lit);margin-top:.25rem;flex:none}
.notice p{font-size:.92rem;color:var(--platinum);margin:0;max-width:none}

/* Patient story under a before/after slider */
.case__story{
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line);
  display:grid;gap:.75rem;
}
.case__story p{font-size:.97rem;color:var(--muted);max-width:74ch}
.case__story .case__said{
  border-left:2px solid var(--accent);padding-left:1rem;
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.05rem,.98rem + .35vw,1.28rem);
  line-height:1.5;color:var(--mist);
}
.section--light .case__story{border-top-color:var(--lt-line)}
.section--light .case__story p{color:var(--lt-body)}
.section--light .case__story .case__said{border-left-color:#0E7490;color:var(--lt-ink)}

/* ---------- Testimonials ---------- */
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.8rem,3.4vw,2.5rem);display:flex;flex-direction:column;gap:1.35rem;height:100%;
  transition:border-color .38s var(--ease-soft),transform .38s var(--ease-out),box-shadow .38s var(--ease-soft);
}
.quote:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(0,0,0,.9)}
.quote__mark{font-family:var(--font-display);font-size:3.4rem;line-height:.55;color:var(--accent);opacity:.55}
.quote blockquote{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);
  color:var(--mist);line-height:1.45;letter-spacing:-.005em;flex:1;
}
.quote figcaption{display:flex;flex-direction:column;gap:.2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.quote cite{font-style:normal;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--white)}
.quote small{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* The clinician quote leads: it is the one a referring dentist cares about */
.quotes{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.quote--lead{
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border-color:var(--line-strong);
}
.quote--lead .quote__mark{font-size:4.6rem;opacity:.75}
.quote--lead blockquote{
  font-size:clamp(1.5rem,1.15rem + 1.7vw,2.35rem);
  line-height:1.3;color:var(--white);font-weight:200;
}
.quote--lead cite{font-size:1.15rem}
.quote__badge{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:999px;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);color:var(--accent);
}
.quote__badge svg{width:13px;height:13px}
@media (min-width:900px){
  .quotes{grid-template-columns:1.35fr 1fr;align-items:stretch}
  .quote--lead{grid-row:span 2}
}
.section--light .quote blockquote{color:var(--lt-ink)}
.section--light .quote--lead{background:linear-gradient(150deg,#FFFFFF,#F4F8FB);border-color:var(--lt-line-strong)}
.section--light .quote--lead blockquote{color:var(--lt-ink)}
.section--light .quote__badge{background:rgba(14,116,144,.1);border-color:rgba(14,116,144,.3);color:#0E7490}

.quote blockquote p{max-width:none}
.quote blockquote p + p{margin-top:.75em}

/* Reviews scroller: three cards across on desktop, two on tablets, one and a
   peek of the next on phones. Cards share a height, so captions line up. */
.quotes-rail{--rail-gap:clamp(.85rem,1.6vw,1.25rem);gap:var(--rail-gap);scroll-padding-inline:var(--gutter)}
.quotes-rail .quote{flex:0 0 86%;scroll-snap-align:start;height:auto}
@media (min-width:640px){ .quotes-rail .quote{flex-basis:calc((100% - var(--rail-gap)) / 2)} }
@media (min-width:1024px){ .quotes-rail .quote{flex-basis:calc((100% - 2 * var(--rail-gap)) / 3)} }
.quotes-rail .quote{padding:clamp(1.4rem,2.4vw,1.9rem);gap:1rem}
.quotes-rail .quote__mark{font-size:2.6rem}
.quotes-rail .quote blockquote{font-size:clamp(1rem,.96rem + .18vw,1.1rem);line-height:1.55}
.rail-x__head .lede{margin-top:0}

/* ---------- Shade guide (hero panel) ---------- */
.shadeguide{
  background:var(--navy);border:1px solid var(--line-strong);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.shadeguide__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.shadeguide__title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--platinum)}
.shadeguide__id{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent)}
.shadeguide__grid{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:.4rem;padding:1rem 1.1rem .9rem;
}
.shade{position:relative;display:grid;gap:.4rem;justify-items:center}
.shade__tab{
  width:100%;height:clamp(46px,4.4vw,58px);border-radius:4px 4px 8px 8px;
  /* Flat fallback first: color-mix() needs Chrome 111+, and without this the whole
     background declaration is dropped on older browsers and the tab renders invisible. */
  background:var(--tone);
  background:linear-gradient(175deg,var(--tone) 58%,color-mix(in srgb,var(--tone) 78%,#8A7F63) 100%);
  box-shadow:inset 0 -6px 10px -6px rgba(60,50,30,.45),0 1px 3px rgba(0,0,0,.4);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-soft);
}
.shade:hover .shade__tab{transform:translateY(-3px)}
.shade__label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;color:var(--muted)}
.shade.is-picked .shade__tab{
  outline:2px solid var(--accent);outline-offset:2px;
  box-shadow:inset 0 -6px 10px -6px rgba(60,50,30,.45),0 0 18px rgba(34,211,238,.45);
}
.shade.is-picked .shade__label{color:var(--accent);font-weight:500}
.shadeguide__foot{
  padding:0 1.1rem 1rem;display:grid;gap:.4rem;
}
.shadeguide__read{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.shadeguide__read b{color:var(--accent);font-weight:500}
.shadeguide__note{font-size:.84rem;color:var(--muted);margin:0}

/* ---------- Crew tiles (team, poster style) ---------- */
.crew{
  position:relative;flex:0 0 auto;
  width:clamp(200px,42vw,240px);aspect-ratio:3/4;
  border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;
  border:1px solid var(--line);
  background:radial-gradient(130% 100% at 50% 0%,var(--surface-2),var(--navy));
  scroll-snap-align:start;
  transition:transform .45s var(--ease-out),border-color .35s var(--ease-soft),box-shadow .45s var(--ease-soft);
}
.crew:hover,.crew:focus-visible{
  transform:translateY(-6px) scale(1.03);
  border-color:rgba(34,211,238,.5);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
  z-index:2;
}
.crew__photo{position:absolute;inset:0}
.crew__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  transition:transform .7s var(--ease-out);
}
.crew:hover .crew__photo img{transform:scale(1.05)}
.crew__mono{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:200;font-size:clamp(3.6rem,9vw,5rem);
  color:var(--white);opacity:.9;line-height:1;
}
.crew__mono::after{
  content:"";position:absolute;left:12%;right:12%;top:52%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.crew__rings{position:absolute;inset:0;opacity:.4}
.crew__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,15,28,.96) 0%,rgba(6,15,28,.7) 26%,transparent 55%);
}
.crew__body{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;display:grid;gap:.25rem}
.crew__name{font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--white);line-height:1.2}
.crew__role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.crew__go{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem;
  font-family:var(--font-display);font-size:.82rem;font-weight:500;color:var(--platinum);
  transition:gap .3s var(--ease-out),color .3s var(--ease-soft);
}
.crew:hover .crew__go{gap:.65rem;color:var(--accent)}
.crew__go svg{width:14px;height:14px}
.crew__flag{
  position:absolute;top:.8rem;left:.8rem;z-index:2;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:999px;
  background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.4);color:var(--accent);
}
.section--light .crew{border-color:var(--lt-line);box-shadow:0 1px 2px rgba(10,23,40,.05),0 14px 34px -24px rgba(10,23,40,.35)}

/* ---------- Split feature ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.split__media img{width:100%}

/* ============================================================
   BADGES — practical facts a clinician needs, not vanity counts
   ============================================================ */
.badges{
  display:grid;gap:0;
  grid-template-columns:1fr;
}
.badge{
  display:grid;grid-template-columns:auto 1fr;gap:1rem 1.15rem;
  align-content:start;
  padding:clamp(1.4rem,2.6vw,1.9rem) 0;
  border-top:1px solid var(--line);
}
.badge__icon{
  grid-row:span 2;
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:var(--accent);
  transition:background-color .35s var(--ease-soft),border-color .35s var(--ease-soft);
}
.badge__icon svg{width:22px;height:22px}
.badge__t{
  font-family:var(--font-display);font-size:1.08rem;font-weight:500;
  color:var(--white);line-height:1.25;align-self:center;
}
.badge__d{font-size:1rem;color:var(--muted);grid-column:2;margin-top:-.35rem}

/* Three badges: two columns with the last spanning the full width in the middle
   band, three across on desktop. Never a stranded cell. */
@media (min-width:640px) and (max-width:1039.98px){
  .badges{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}
  .badge:last-child{grid-column:1 / -1}
}
@media (min-width:1040px){
  .badges{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,2.6rem)}
  .badge{grid-template-columns:1fr;gap:1rem}
  .badge__icon{grid-row:auto}
  .badge__d{grid-column:1;margin-top:-.5rem}
}

.section--light .badge{border-top-color:var(--lt-line)}
.section--light .badge__t{color:var(--lt-ink)}
.section--light .badge__d{color:var(--lt-body)}
.section--light .badge__icon{
  background:rgba(14,116,144,.1);border-color:rgba(14,116,144,.28);color:#0E7490;
}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy)}
.cta-band::before{
  content:"";position:absolute;width:60vw;height:60vw;min-width:420px;min-height:420px;border-radius:50%;
  background:var(--steel);filter:blur(120px);opacity:.24;left:50%;top:50%;transform:translate(-50%,-50%);
}
.cta-band__inner{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:1.6rem}
.cta-band p{margin-inline:auto}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.5rem}
.field label{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--platinum);
}
.field label .req{color:var(--accent)}
.field input,.field textarea,.field select{
  width:100%;min-height:50px;padding:.8rem 1rem;
  background-color:var(--navy);border:1px solid var(--line-strong);border-radius:10px;
  color:var(--white);font-size:1rem;
  transition:border-color .28s var(--ease-soft),background-color .28s var(--ease-soft),box-shadow .28s var(--ease-soft);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A4BC' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;
  background-size:15px 15px;padding-right:2.9rem;
}
.field input::placeholder,.field textarea::placeholder{color:#64748B}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--platinum)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background-color:var(--surface);
  box-shadow:0 0 0 3px rgba(34,211,238,.16);
}
.field__err{font-size:.84rem;color:var(--accent-soft);display:none}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--accent)}
.field.is-invalid .field__err{display:block}
.form__row{display:grid;gap:1.15rem}
.form__note{font-size:.85rem;color:var(--muted)}
.form__status{
  padding:1rem 1.2rem;border-radius:10px;font-size:.95rem;display:none;
  background:rgba(46,111,217,.14);border:1px solid rgba(127,176,245,.35);color:var(--mist);
}
.form__status.is-shown{display:block}

/* ---------- Contact details ---------- */
.detail{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding-block:1.35rem;border-bottom:1px solid var(--line)}
.detail:first-of-type{border-top:1px solid var(--line)}
.detail__icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);color:var(--accent);
}
.detail__icon svg{width:20px;height:20px}
.detail__k{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.detail__v{font-size:1.04rem;color:var(--white);line-height:1.5}
.detail__v a:hover{color:var(--accent)}

.map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--navy);aspect-ratio:16/9}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) hue-rotate(190deg) contrast(.86)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;font-family:var(--font-display);font-size:var(--step-1);
  font-weight:400;color:var(--white);transition:color .28s var(--ease-soft);
}
.faq__q:hover{color:var(--accent)}
.faq__q svg{width:20px;height:20px;flex:none;color:var(--accent);transition:transform .42s var(--ease-out)}
.faq__q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--ease-out)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--muted);padding-bottom:1.5rem}

/* ============================================================
   LIGHT SECTIONS
   Used to break up the dark ground. Everything inside re-maps
   to the light palette so nothing has to be overridden inline.
   ============================================================ */
.section--light{
  background:var(--lt-bg);
  color:var(--lt-body);
  position:relative;
}
.section--light-soft{background:var(--lt-bg-2)}

.section--light h1,.section--light h2,
.section--light h3,.section--light h4{color:var(--lt-ink)}
.section--light p{color:var(--lt-body)}
.section--light .lede{color:var(--lt-muted)}
.section--light .muted{color:var(--lt-muted)}
.section--light strong{color:var(--lt-ink)}

.section--light .eyebrow{color:#0E7490}
.section--light .eyebrow::after{background:linear-gradient(90deg,var(--lt-line-strong),transparent)}
.section--light .eyebrow--center::before{background:linear-gradient(270deg,var(--lt-line-strong),transparent)}

.section--light .card,
.section--light .quote,
.section--light .case,
.section--light .person{
  background:var(--lt-surface);
  border-color:var(--lt-line);
  box-shadow:0 1px 2px rgba(10,23,40,.04),0 12px 32px -20px rgba(10,23,40,.28);
}
.section--light .card:hover,
.section--light .person:hover{
  background:var(--lt-surface);
  border-color:var(--lt-line-strong);
  box-shadow:0 2px 4px rgba(10,23,40,.05),0 22px 44px -22px rgba(10,23,40,.34);
}
.section--light .card p,
.section--light .quote blockquote{color:var(--lt-body)}
.section--light .card__num{color:#0E7490}
.section--light .card__icon{
  background:rgba(46,111,217,.1);border-color:rgba(46,111,217,.26);color:var(--steel);
}
.section--light .quote__mark{color:#0E7490}
.section--light .quote cite{color:var(--lt-ink)}
.section--light .quote small,
.section--light .rail__meta{color:var(--lt-muted)}
.section--light .quote figcaption{border-top-color:var(--lt-line)}
.section--light .stat__v{color:var(--lt-ink)}
.section--light .stat__v span{color:#0E7490}

.section--light .tag{border-color:var(--lt-line-strong);color:var(--lt-body)}
.section--light .tag--accent{border-color:rgba(14,116,144,.4);color:#0E7490;background:rgba(34,211,238,.1)}
.section--light .rule{background:var(--lt-line)}
.section--light .rail__step{border-top-color:var(--lt-line)}
.section--light .rail__step:last-child{border-bottom-color:var(--lt-line)}
.section--light .rail__n{color:#0E7490}
.section--light .svc{border-top-color:var(--lt-line)}
.section--light .svc__badge{background:rgba(46,111,217,.1);border-color:rgba(46,111,217,.26);color:var(--steel)}
.section--light .split__media,
.section--light .svc__media,
.section--light .map{border-color:var(--lt-line)}

.section--light .btn--ghost{border-color:var(--lt-line-strong);color:var(--lt-ink)}
.section--light .btn--ghost:hover{border-color:var(--lt-ink);background:rgba(10,23,40,.05)}
.section--light .link-arrow{color:#0E7490}
.section--light .link-arrow:hover{color:#0B5C74}

.section--light .faq{border-top-color:var(--lt-line)}
.section--light .faq__item{border-bottom-color:var(--lt-line)}
.section--light .faq__q{color:var(--lt-ink)}
.section--light .faq__q:hover{color:#0E7490}
.section--light .faq__q svg{color:#0E7490}
.section--light .faq__a p{color:var(--lt-body)}

.section--light .detail{border-bottom-color:var(--lt-line)}
.section--light .detail:first-of-type{border-top-color:var(--lt-line)}
.section--light .detail__k{color:var(--lt-muted)}
.section--light .detail__v{color:var(--lt-ink)}
.section--light .detail__v a:hover{color:#0E7490}
.section--light .detail__icon{background:rgba(34,211,238,.12);border-color:rgba(14,116,144,.3);color:#0E7490}
.section--light .social a{border-color:var(--lt-line-strong);color:var(--lt-body)}
.section--light .social a:hover{border-color:#0E7490;color:#0E7490;background:rgba(34,211,238,.1)}

.section--light .field label{color:var(--lt-ink)}
.section--light .field label .req{color:#0E7490}
.section--light .field input,
.section--light .field textarea,
.section--light .field select{
  background-color:var(--lt-surface);border-color:var(--lt-line-strong);color:var(--lt-ink);
}
.section--light .field input::placeholder,
.section--light .field textarea::placeholder{color:#7E8FA8}
.section--light .field input:hover,
.section--light .field textarea:hover,
.section--light .field select:hover{border-color:var(--lt-ink)}
.section--light .field input:focus,
.section--light .field textarea:focus,
.section--light .field select:focus{
  border-color:#0E7490;background-color:var(--lt-surface);
  box-shadow:0 0 0 3px rgba(14,116,144,.18);
}
.section--light .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:15px 15px;
}
.section--light .form__status{
  background:rgba(46,111,217,.09);border-color:rgba(46,111,217,.3);color:var(--lt-ink);
}
.section--light .form__note{color:var(--lt-muted)}

/* Enquiry form: send result states, and the spam honeypot */
.form__status.is-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.45)}
.form__status.is-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.45)}
.section--light .form__status.is-success{background:#ECFDF3;border-color:#86D9A8;color:#14532D}
.section--light .form__status.is-error{background:#FEF2F2;border-color:#F5A3A3;color:#7F1D1D}
.form__status:focus{outline:none}
.form button[aria-busy="true"]{opacity:.7;cursor:progress}
.form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.section--light .notice{
  background:rgba(46,111,217,.08);border-color:rgba(46,111,217,.24);
}
.section--light .notice p{color:var(--lt-body)}
.section--light .notice svg{color:var(--steel)}
.section--light .case__meta{border-top-color:var(--lt-line);color:var(--lt-muted)}
.section--light .case__meta b{color:var(--lt-ink)}

/* The work ticket keeps its dark treatment inside a light band — it stands in
   for a physical docket, so it should read as an object on the page, not a panel. */
.section--light .docket{border-color:var(--line-strong);box-shadow:0 24px 60px -32px rgba(10,23,40,.55)}
.section--light .docket p,
.section--light .docket .docket__legend,
.section--light .docket .docket__k{color:var(--muted)}
.section--light .docket .docket__v{color:var(--white)}
.section--light .docket .docket__v em{color:var(--accent)}
.section--light .docket .docket__title{color:var(--platinum)}
.section--light .docket .docket__id,
.section--light .docket .docket__legend b{color:var(--accent)}
.section--light .docket .docket__row{border-bottom-color:var(--line)}
.section--light .docket .docket__head{background:var(--surface);border-bottom-color:var(--line)}
.section--light .map iframe{filter:none}
.section--light :focus-visible{outline-color:#0E7490}

/* Soft seam between dark and light bands */
.section--light::before,
.section--light::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--lt-line);
}
.section--light::before{top:0}
.section--light::after{bottom:0}

/* ============================================================
   SERVICE FINDER — search + category filter + card grid
   ============================================================ */
.finder{
  position:sticky;top:calc(var(--nav-top) + var(--nav-h) + 10px);z-index:40;
  padding-block:1.1rem;margin-bottom:2.5rem;
  background:rgba(6,15,28,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.finder__search{position:relative;margin-bottom:1rem}
.finder__search svg{
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--muted);pointer-events:none;
}
.finder__search input{
  width:100%;min-height:54px;padding:.9rem 3rem .9rem 3.1rem;
  background:var(--navy);border:1px solid var(--line-strong);border-radius:999px;
  color:var(--white);font-size:1rem;
  transition:border-color .28s var(--ease-soft),box-shadow .28s var(--ease-soft),background-color .28s var(--ease-soft);
}
.finder__search input::placeholder{color:#64748B}
.finder__search input:hover{border-color:var(--platinum)}
.finder__search input:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,211,238,.16);
}
.finder__clear{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:0;background:none;cursor:pointer;
  display:none;place-items:center;color:var(--muted);
  transition:color .22s var(--ease-soft),background-color .22s var(--ease-soft);
}
.finder__clear.is-shown{display:grid}
.finder__clear:hover{color:var(--white);background:rgba(203,215,230,.1)}
.finder__clear svg{width:17px;height:17px}

.finder__pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{
  font-family:var(--font-display);font-size:.9rem;font-weight:400;
  padding:.55rem 1.05rem;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--line-strong);color:var(--platinum);
  min-height:44px;display:inline-flex;align-items:center;gap:.45rem;
  transition:border-color .28s var(--ease-soft),color .28s var(--ease-soft),background-color .28s var(--ease-soft);
}
.pill:hover{border-color:var(--platinum);color:var(--white);background:rgba(203,215,230,.07)}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
.pill__n{
  font-family:var(--font-mono);font-size:.68rem;opacity:.7;
}

.finder__count{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem;
}
.finder__count b{color:var(--accent);font-weight:500}

/* Service cards */
.svc-grid{
  display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
}
.svc-card{
  display:flex;flex-direction:column;gap:.7rem;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;cursor:pointer;height:100%;
  transition:border-color .35s var(--ease-soft),background-color .35s var(--ease-soft),
             transform .35s var(--ease-out),box-shadow .35s var(--ease-soft),opacity .3s var(--ease-soft);
}
.svc-card:hover{
  border-color:rgba(34,211,238,.45);background:var(--surface-2);
  transform:translateY(-3px);
  box-shadow:0 20px 40px -28px rgba(0,0,0,.9);
}
.svc-card__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.svc-card__cat{
  font-family:var(--font-mono);font-size:.71rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-lit);
}
.svc-card__n{font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}
.svc-card h3{
  font-size:1.13rem;font-weight:500;letter-spacing:0;color:var(--white);
  transition:color .28s var(--ease-soft);line-height:1.3;
}
.svc-card:hover h3{color:var(--accent)}
.svc-card__sub{
  font-family:var(--font-body);font-size:.86rem;color:var(--platinum);
  margin-top:-.35rem;
}
.svc-card p{font-size:1rem;color:var(--muted);flex:1}
.svc-card__more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;
  font-family:var(--font-display);font-size:.87rem;font-weight:500;color:var(--accent);
  transition:gap .28s var(--ease-soft);
}
.svc-card:hover .svc-card__more{gap:.7rem}
.svc-card__more svg{width:15px;height:15px}
.svc-card[hidden]{display:none}
.svc-card--new{border-color:rgba(34,211,238,.4)}
.svc-card__flag{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:500;
}

.svc-empty{
  display:none;text-align:center;padding:clamp(2.5rem,6vw,4rem) 1rem;
  border:1px dashed var(--line-strong);border-radius:var(--radius);
}
.svc-empty.is-shown{display:block}
.svc-empty svg{width:34px;height:34px;color:var(--muted);margin:0 auto 1rem}
.svc-empty h3{font-size:var(--step-1);margin-bottom:.5rem}
.svc-empty p{color:var(--muted);margin-inline:auto;margin-bottom:1.4rem}

/* Light-mode overrides for the finder */
.section--light .finder{background:rgba(238,243,248,.92);border-bottom-color:var(--lt-line)}
.section--light .finder__search input{background:var(--lt-surface);border-color:var(--lt-line-strong);color:var(--lt-ink)}
.section--light .finder__search input::placeholder{color:#7E8FA8}
.section--light .finder__search svg,
.section--light .finder__clear{color:var(--lt-muted)}
.section--light .finder__clear:hover{color:var(--lt-ink);background:rgba(10,23,40,.06)}
.section--light .pill{border-color:var(--lt-line-strong);color:var(--lt-body)}
.section--light .pill:hover{border-color:var(--lt-ink);color:var(--lt-ink);background:rgba(10,23,40,.05)}
.section--light .pill[aria-pressed="true"]{background:#0E7490;border-color:#0E7490;color:#fff}
.section--light .finder__count{color:var(--lt-muted)}
.section--light .finder__count b{color:#0E7490}
.section--light .svc-card{background:var(--lt-surface);border-color:var(--lt-line);box-shadow:0 1px 2px rgba(10,23,40,.04),0 12px 30px -22px rgba(10,23,40,.3)}
.section--light .svc-card:hover{border-color:rgba(14,116,144,.45);box-shadow:0 2px 6px rgba(10,23,40,.06),0 24px 46px -24px rgba(10,23,40,.36)}
.section--light .svc-card h3{color:var(--lt-ink)}
.section--light .svc-card:hover h3{color:#0E7490}
.section--light .svc-card__sub{color:var(--lt-muted)}
.section--light .svc-card p{color:var(--lt-body)}
.section--light .svc-card__cat{color:var(--steel)}
.section--light .svc-card__n{color:var(--lt-muted)}
.section--light .svc-card__more{color:#0E7490}
.section--light .svc-card__flag{background:#0E7490;color:#fff}
.section--light .svc-empty{border-color:var(--lt-line-strong)}
.section--light .svc-empty p,.section--light .svc-empty svg{color:var(--lt-muted)}

/* ---------- Service finder on small screens ----------
   The finder is sticky, so its height is permanently subtracted from the
   readable area. At the desktop sizing it stood 257px tall with the category
   pills wrapped onto three rows — over half a phone screen, held there the
   whole way down the page. One swipeable row of pills fixes it. */
@media (max-width:1023.98px){
  /* One row, swipeable, at every width below the desktop nav breakpoint. */
  .finder__pills{
    flex-wrap:nowrap;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter);
  }
  .finder__pills::-webkit-scrollbar{display:none}
  .pill{flex:0 0 auto;scroll-snap-align:start}
}

@media (max-width:719.98px){
  .finder__search{margin-bottom:.7rem}
  .finder__search input{
    min-height:48px;
    /* stays 16px: anything smaller makes iOS Safari zoom the page on focus */
    font-size:16px;
    padding:.7rem 2.7rem .7rem 2.9rem;
  }
  .finder__search svg{left:1rem;width:17px;height:17px}
  .finder__clear{width:36px;height:36px;right:.5rem}

  .pill{min-height:42px;padding:.5rem .9rem;font-size:.86rem}
  .pill__n{font-size:.62rem}

  .finder__count{margin-bottom:1.1rem;font-size:.66rem}

  /* Tighter cards: 27 of them in a single column is a long scroll. */
  .svc-card{padding:1.15rem 1.2rem;gap:.55rem}
  .svc-card h3{font-size:1.06rem}
  .svc-card p{font-size:.9rem}
  .svc-card__sub{font-size:.82rem}

  .svc-grid{gap:.8rem}
}

/* ---------- Sticky finder: phones only ----------
   Two things made the sticky bar read as a detached slab on a phone: it sat 5px
   below the nav pill so card text slid through the gap, and it was only 338px
   wide inside a 375px screen, so content scrolled visibly down both gutters.
   Here it goes full-bleed and tucks under the nav, so the pill floats ON the
   bar and the two read as one surface. The negative margin cancels the padding
   in normal flow, so nothing shifts until it actually sticks. */
@media (max-width:767.98px){
  #finder{padding-top:calc(var(--nav-top) + var(--nav-h) + 2.2rem)}
  .finder{
    position:sticky;top:0;z-index:41;
    margin-top:calc(-1 * (var(--nav-top) + var(--nav-h) + 8px));
    padding-top:calc(var(--nav-top) + var(--nav-h) + 8px + .5rem);
    padding-bottom:.8rem;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    margin-bottom:1.6rem;
    background:rgba(238,243,248,.96);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:0;
  }
  /* soft edge so cards dissolve under the bar instead of being cut off */
  .finder::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:20px;
    background:linear-gradient(rgba(238,243,248,.96),rgba(238,243,248,0));
    pointer-events:none;
  }
}

/* Tablet and desktop: plenty of screen, so it simply sits in the page. */
@media (min-width:768px){
  .finder{
    position:static;
    background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid var(--lt-line);
    padding-block:0 1.4rem;
    margin-bottom:2rem;
  }
}

/* Below 380px the pill row needs a little more room to breathe. */
@media (max-width:379.98px){
  .pill{padding:.5rem .78rem;font-size:.82rem}
  .finder__search input{padding-left:2.7rem}
}

/* ============================================================
   MODAL — service detail
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;padding:var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease-soft),visibility .34s var(--ease-soft);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__scrim{
  position:absolute;inset:0;background:rgba(3,9,18,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal__panel{
  position:relative;width:min(660px,100%);max-height:min(86vh,760px);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  transform:translateY(20px) scale(.985);
  transition:transform .42s var(--ease-out);
}
.modal.is-open .modal__panel{transform:translateY(0) scale(1)}
.modal__head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.6rem 1.6rem 1.1rem;
  background:linear-gradient(var(--surface) 78%,transparent);
}
.modal__cat{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;display:block;
}
.modal__title{font-size:var(--step-2);font-weight:400;color:var(--white);line-height:1.15}
.modal__sub{font-size:.93rem;color:var(--platinum);margin-top:.45rem}
.modal__close{
  width:46px;height:46px;min-width:46px;min-height:46px;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(203,215,230,.08);border:1px solid var(--line-strong);color:var(--platinum);
  display:grid;place-items:center;
  transition:background-color .26s var(--ease-soft),color .26s var(--ease-soft),border-color .26s var(--ease-soft);
}
.modal__close:hover{background:rgba(34,211,238,.16);border-color:var(--accent);color:var(--accent)}
.modal__close svg{width:19px;height:19px}
.modal__body{padding:0 1.6rem 1.6rem}
.modal__body p{color:var(--mist);margin-bottom:1.1rem;max-width:none}
.modal__body h4{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:1.6rem 0 .9rem;font-weight:400;
}
.modal__points{display:grid;gap:.75rem}
.modal__points li{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:.95rem;color:var(--platinum);
}
.modal__points svg{width:17px;height:17px;color:var(--steel-lit);margin-top:.28rem;flex:none}
.modal__foot{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
body.is-locked{overflow:hidden}

@media (max-width:520.98px){
  .modal{padding:0;align-items:end}
  .modal__panel{max-height:92vh;border-radius:18px 18px 0 0;width:100%}
}

/* ============================================================
   SERVICE SUMMARY — home page shortcut into the finder
   ============================================================ */
/* Five categories is a prime number, so auto-fit always stranded one card on a
   row of its own. Explicit counts instead: a single row of five on desktop, and
   below that two columns with the last card spanning the full width. */
.svc-sum{display:grid;gap:clamp(.85rem,1.6vw,1.15rem);grid-template-columns:1fr}
@media (min-width:600px) and (max-width:1023px){
  .svc-sum{grid-template-columns:1fr 1fr}
  .svc-sum__card:last-child{grid-column:1 / -1}
}
@media (min-width:1024px){
  .svc-sum{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* Stacked on desktop so each title gets the card's full width — horizontally
     the longer names broke onto a second line and pushed the NEW badge off on
     its own, which made the row look ragged. */
  .svc-sum__card{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:.9rem;padding:1.5rem 1.35rem 1.25rem;
  }
  .svc-sum__card > span:nth-of-type(2){flex:1}
  .svc-sum__t{font-size:1.02rem;line-height:1.3}
  .svc-sum__go{align-self:flex-end;margin-top:.2rem}
  .svc-sum__flag{margin-left:.4rem}
}
.svc-sum__card{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.35rem;cursor:pointer;
  transition:border-color .35s var(--ease-soft),background-color .35s var(--ease-soft),
             transform .35s var(--ease-out),box-shadow .35s var(--ease-soft);
}
.svc-sum__card:hover{
  border-color:rgba(34,211,238,.45);background:var(--surface-2);
  transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,0,0,.9);
}
.svc-sum__icon{
  width:44px;height:44px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(46,111,217,.16);border:1px solid rgba(127,176,245,.3);color:var(--steel-lit);
  transition:background-color .35s var(--ease-soft),color .35s var(--ease-soft);
}
.svc-sum__card:hover .svc-sum__icon{background:rgba(34,211,238,.16);color:var(--accent)}
.svc-sum__icon svg{width:22px;height:22px}
.svc-sum__t{font-family:var(--font-display);font-size:1.04rem;font-weight:500;color:var(--white);line-height:1.25;transition:color .3s var(--ease-soft);text-wrap:balance}
.svc-sum__card:hover .svc-sum__t{color:var(--accent)}
.svc-sum__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;display:block}
.svc-sum__go{color:var(--muted);transition:color .3s var(--ease-soft),transform .3s var(--ease-out)}
.svc-sum__card:hover .svc-sum__go{color:var(--accent);transform:translateX(3px)}
.svc-sum__go svg{width:18px;height:18px}
.svc-sum__card--new{border-color:rgba(34,211,238,.35)}
.svc-sum__flag{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .45rem;border-radius:999px;background:var(--accent);color:var(--ink);
  font-weight:600;margin-left:.5rem;vertical-align:middle;
}
.section--light .svc-sum__card{background:var(--lt-surface);border-color:var(--lt-line);box-shadow:0 1px 2px rgba(10,23,40,.04),0 12px 30px -22px rgba(10,23,40,.3)}
.section--light .svc-sum__card:hover{border-color:rgba(14,116,144,.45);background:var(--lt-surface)}
.section--light .svc-sum__t{color:var(--lt-ink)}
.section--light .svc-sum__card:hover .svc-sum__t{color:#0E7490}
.section--light .svc-sum__n{color:var(--lt-muted)}
.section--light .svc-sum__icon{background:rgba(46,111,217,.1);border-color:rgba(46,111,217,.26);color:var(--steel)}
.section--light .svc-sum__card:hover .svc-sum__icon{background:rgba(14,116,144,.12);color:#0E7490}
.section--light .svc-sum__go{color:var(--lt-muted)}
.section--light .svc-sum__card:hover .svc-sum__go{color:#0E7490}
.section--light .svc-sum__flag{background:#0E7490;color:#fff}

/* ============================================================
   INSTAGRAM COLLAGE
   ============================================================ */
.ig__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem;
}
.ig__handle{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;
  font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--accent);
  transition:gap .3s var(--ease-out);
}
.ig__handle:hover{gap:.9rem}
.ig__handle svg{width:22px;height:22px}

.ig-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.2vw,.85rem);
}
.ig-tile{
  position:relative;overflow:hidden;border-radius:12px;
  aspect-ratio:1;border:1px solid var(--line);background:var(--navy);
  transition:border-color .4s var(--ease-soft),transform .45s var(--ease-out),box-shadow .45s var(--ease-soft);
}
.ig-tile img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .7s var(--ease-out),filter .45s var(--ease-soft);
}
.ig-tile--lg{grid-column:span 2;grid-row:span 2}
.ig-tile:hover{
  border-color:rgba(34,211,238,.5);transform:translateY(-4px);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.95);z-index:2;
}
.ig-tile:hover img{transform:scale(1.07)}
.ig-tile__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,15,28,.9),rgba(6,15,28,.12) 55%,rgba(6,15,28,.35));
  opacity:.85;transition:opacity .45s var(--ease-soft);
}
.ig-tile:hover .ig-tile__veil{opacity:.95}
.ig-tile__cap{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem .95rem;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--platinum);
}
.ig-tile--lg .ig-tile__cap{font-size:.7rem;padding:1.15rem 1.25rem}
.ig-tile__cap svg{width:15px;height:15px;color:var(--accent);flex:none}
.ig-tile__glyph{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.45);
  color:var(--accent);opacity:0;
  transition:opacity .4s var(--ease-soft),transform .5s var(--ease-out);
}
.ig-tile:hover .ig-tile__glyph{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ig-tile__glyph svg{width:21px;height:21px}

@media (min-width:700px){
  .ig-grid{grid-template-columns:repeat(4,1fr)}
}
.section--light .ig-tile{border-color:var(--lt-line)}
.section--light .ig__handle{color:#0E7490}

/* ============================================================
   WHATSAPP COURIER
   The line clinics message to book a collection or chase a job.
   ============================================================ */
:root{ --wa:#25D366; --wa-deep:#128C7E; }

/* Floating launcher, every page */
.wa-fab{
  position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:var(--z-drawer);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.75rem 1.15rem .75rem .8rem;
  border-radius:999px;
  background:var(--wa);color:#06251A;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  box-shadow:0 10px 34px -10px rgba(37,211,102,.55),0 4px 14px rgba(0,0,0,.35);
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-soft),background-color .28s var(--ease-soft);
}
.wa-fab:hover{background:#2ee574;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(37,211,102,.65)}
.wa-fab svg{width:26px;height:26px;flex:none}
.wa-fab__label{white-space:nowrap;line-height:1.15}
.wa-fab__label small{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72;font-weight:500}
/* On phones the label would crowd the screen, so it collapses to the mark. */
@media (max-width:560px){
  .wa-fab{padding:.85rem;gap:0}
  .wa-fab__label{display:none}
  .wa-fab svg{width:28px;height:28px}
}
@media print{ .wa-fab{display:none} }
/* The courier widget is for phones and tablets; on desktop the same line is in
   the home page courier section and on the contact page. */
@media (min-width:1024px){ .wa-fab{display:none} }

/* Inline courier card, used on the home and contact pages */
.wa-card{
  display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  padding:clamp(1.3rem,2.6vw,1.8rem);
  border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(37,211,102,.13),rgba(37,211,102,.04));
  border:1px solid rgba(37,211,102,.32);
}
.wa-card__icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--wa);color:#06251A;
}
.wa-card__icon svg{width:28px;height:28px}
.wa-card h3{font-size:var(--step-1);font-weight:500;margin-bottom:.35rem}
.wa-card p{color:var(--muted);font-size:1rem;margin-bottom:1rem}
.wa-card__num{
  font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.04em;
  color:var(--white);display:block;margin-bottom:1rem;
}
.wa-card__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.btn--wa{background:var(--wa);color:#06251A;font-weight:600}
.btn--wa:hover{background:#2ee574;box-shadow:0 10px 34px -10px rgba(37,211,102,.6)}
.section--light .wa-card{background:linear-gradient(140deg,rgba(18,140,126,.12),rgba(18,140,126,.03));border-color:rgba(18,140,126,.3)}
.section--light .wa-card p{color:var(--lt-body)}
.section--light .wa-card__num{color:var(--lt-ink)}

/* Courier row inside the mobile menu */
.drawer__wa{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;
  padding:.85rem 1rem;border-radius:14px;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.34);
  color:var(--white);
}
.drawer__wa svg{width:22px;height:22px;color:var(--wa);flex:none}
.drawer__wa b{display:block;font-family:var(--font-display);font-weight:500;font-size:.98rem}
.drawer__wa small{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--platinum)}

/* ---------- Footer ---------- */
.footer{background:var(--navy);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer__top{display:grid;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line)}
.footer__brand p{color:var(--muted);font-size:.95rem;margin-top:1.2rem;max-width:34ch}
.footer__col h4{font-family:var(--font-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;font-weight:400}
.footer__col li{margin-bottom:.6rem}
.footer__col a,.footer__col span{color:var(--platinum);font-size:1.01rem;transition:color .26s var(--ease-soft)}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:2rem;font-size:.85rem;color:var(--muted);
}
.social{display:flex;gap:.6rem}
.social a{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--platinum);
  transition:border-color .28s var(--ease-soft),color .28s var(--ease-soft),background-color .28s var(--ease-soft);
}
.social a:hover{border-color:var(--accent);color:var(--accent);background:rgba(34,211,238,.1)}
.social svg{width:18px;height:18px}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}

/* SIGNATURE: strike-rule that draws itself across the viewport */
.rule{position:relative;height:1px;background:var(--line);overflow:hidden}
.rule::after{
  content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--steel));
  transition:transform 1.4s var(--ease-out);
}
.rule.is-in::after{transform:scaleX(1)}

/* Ambient drift on the hero glows — slow enough to read as atmosphere, not motion */
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,4%,0) scale(1.06)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,-3%,0) scale(1.08)}
}
.hero__glow--a{animation:drift-a 22s var(--ease-soft) infinite}
.hero__glow--b{animation:drift-b 27s var(--ease-soft) infinite}

/* ---------- Breakpoints ---------- */
@media (min-width:720px){
  .form__row--2{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--rev .split__media{order:2}
  .svc{grid-template-columns:1fr 1fr}
  .svc--rev .svc__media{order:2}
  .footer__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .rail__step{grid-template-columns:70px 1fr}
}
@media (min-width:1024px){
  .drawer{display:none}
}
@media (min-width:1024px){
  .hero__inner{grid-template-columns:1fr 1fr;align-items:center}
}

@media (max-width:1023.98px){
  .nav,.header__cta{display:none}
  .burger{display:flex}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .rule::after{transform:scaleX(1)}
}

/* ---------- Print ---------- */
@media print{
  .header,.drawer,.cta-band,.hero__bg{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   PRIVACY POLICY — long-form reading layout
   Sticky contents on the left from 1024px, a single column below.
   No scroll effects on the body copy: the lifecycle engine fades
   elements as they leave the viewport, which is wrong for text
   someone is reading line by line.
   ============================================================ */
.policy__stamp{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.policy{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:1024px){
  .policy{grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .policy__toc{
    position:sticky;top:calc(var(--nav-top) + var(--nav-h) + 1.5rem);
    max-height:calc(100vh - var(--nav-top) - var(--nav-h) - 3rem);overflow-y:auto;
  }
}

/* Contents */
.policy__toc-title{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.2em;
  text-transform:uppercase;color:#0E7490;margin-bottom:1rem;
}
.policy__toc ol{list-style:none;padding:0;border-left:1px solid var(--lt-line)}
.policy__toc a{
  display:flex;gap:.8rem;align-items:baseline;
  padding:.5rem 0 .5rem 1rem;margin-left:-1px;border-left:2px solid transparent;
  font-size:.95rem;line-height:1.35;color:var(--lt-body);
  transition:color .24s var(--ease-soft),border-color .24s var(--ease-soft);
}
.policy__toc a span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--lt-muted);flex:none}
.policy__toc a:hover{color:var(--lt-ink)}
.policy__toc a.is-current{color:#0E7490;border-left-color:#0E7490;font-weight:500}
.policy__toc a.is-current span{color:#0E7490}
@media (max-width:1023.98px){
  .policy__toc{
    background:var(--lt-surface);border:1px solid var(--lt-line);border-radius:var(--radius);
    padding:1.25rem 1.25rem .75rem;
  }
  .policy__toc ol{border-left:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));column-gap:1.5rem}
  .policy__toc a{padding:.55rem 0;margin-left:0;border-left:0;min-height:44px;align-items:center}
}

/* Body */
.policy__body{max-width:76ch;min-width:0}
.policy__body section{
  padding-block:clamp(2rem,4vw,2.75rem);border-top:1px solid var(--lt-line);
}
.policy__body section:last-child{padding-bottom:0}
.policy__body h2{
  display:flex;align-items:baseline;gap:1rem;
  font-size:var(--step-2);font-weight:400;line-height:1.15;margin-bottom:1.1rem;
}
.policy__n{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:#0E7490;flex:none;transform:translateY(-.2em)}
.policy__body h3{font-size:var(--step-1);font-weight:500;line-height:1.25;margin:1.9rem 0 .6rem}
.policy__body h2 + h3{margin-top:.4rem}
.policy__body p,
.policy__body li{color:var(--lt-body);line-height:1.75}
.policy__body p + p,
.policy__body p + ul,
.policy__body ul + p,
.policy__body .policy__table + p{margin-top:1rem}
.policy__body ul{display:grid;gap:.55rem;margin-top:.9rem}
.policy__body ul li{position:relative;padding-left:1.35rem;max-width:68ch}
.policy__body ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:2px;
  background:#0E7490;opacity:.75;
}
.policy__body a{color:#0E7490;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.policy__body a:hover{color:#0B5C74;text-decoration-thickness:2px}
.policy__body em{font-style:italic;color:var(--lt-ink)}

/* The short version */
.policy__summary{
  background:var(--lt-surface);border:1px solid var(--lt-line);border-left:3px solid #0E7490;
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);margin-bottom:clamp(1.5rem,3vw,2.25rem);
  box-shadow:0 1px 2px rgba(10,23,40,.04),0 12px 30px -22px rgba(10,23,40,.3);
}
.policy__summary-k{
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.2em;
  text-transform:uppercase;color:#0E7490;
}
.policy__summary ul{margin-top:1rem}

/* Purposes table: scrolls inside itself on narrow screens */
.policy__table{
  margin-top:1.25rem;overflow-x:auto;border:1px solid var(--lt-line);border-radius:var(--radius);
  background:var(--lt-surface);
}
.policy__table:focus-visible{outline:3px solid #0E7490;outline-offset:3px}
.policy__table table{width:100%;min-width:620px;border-collapse:collapse;font-size:.95rem}
.policy__table th,
.policy__table td{text-align:left;vertical-align:top;padding:.9rem 1rem;border-bottom:1px solid var(--lt-line);line-height:1.5}
.policy__table th{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lt-muted);background:var(--lt-bg-2);
}
.policy__table td{color:var(--lt-body)}
.policy__table td:first-child{color:var(--lt-ink);font-weight:500}
.policy__table tbody tr:last-child td{border-bottom:0}

/* Footer legal link, on every page */
.footer__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center}
.footer__legal a{color:var(--platinum);display:inline-flex;align-items:center;min-height:44px;transition:color .26s var(--ease-soft)}
.footer__legal a:hover{color:var(--accent)}

@media print{
  .wa-fab,.footer,.policy__toc{display:none}
  .policy{display:block}
  .policy__body{max-width:none}
}