/* ══════════════════════════════════════════════════════════════
   ESTETICA FINDERS  ·  Design system 2026
   Navy #06234a · Blue #0a55b4 · Sky #1f9bde
   Outfit (display) · Lora (body)
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#0a55b4;--blue-2:#0d6ad0;--sky:#1f9bde;--sky-2:#5cc0f0;--sky-3:#8fd6f8;
  --navy:#06234a;--navy-2:#0a3263;--navy-3:#0e3d77;
  --ink:#0a1f3d;--ink-2:#37536f;--ink-3:#556f8d;
  --bg:#f4f8fc;--surface:#fff;--surface-2:#e9f2fa;--surface-3:#dceaf7;
  --border:rgba(10,85,180,.16);--border-2:rgba(10,85,180,.3);
  --glow:rgba(31,155,222,.18);
  --on-navy:#eef6fd;--on-navy-2:#b3d3ee;--on-navy-3:#86aed3;
  --gold:#c9a227;
  --r:10px;--r2:16px;--r3:22px;--r4:30px;
  --fd:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fb:'Lora','Iowan Old Style','Palatino Linotype',Georgia,serif;
  /* The gutter used to jump from 48px to 21.6px the moment the viewport
     crossed 1120, so a 1024px tablet got phone margins. Fluid instead: it
     never drops below 18px and never needs a breakpoint. */
  --gut:clamp(1.15rem,3.4vw,3rem);
  --pad:5.6rem var(--gut);--maxw:1240px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.72;font-size:1.05rem;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px, rgba(10,85,180,.09) 1px, transparent 0),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(31,155,222,.09), transparent 60%);
  background-size:26px 26px, 100% 100%}
body>*{position:relative;z-index:1}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:130;background:linear-gradient(90deg,var(--blue),var(--sky),var(--sky-2));box-shadow:0 0 14px rgba(31,155,222,.6);transition:width .1s linear}
img,video{max-width:100%;display:block}
svg{stroke-linecap:round;stroke-linejoin:round}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--sky)}
::selection{background:var(--sky);color:#fff}
:focus-visible{outline:3px solid var(--sky-2);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.1;letter-spacing:-.021em;color:var(--ink);font-weight:700;text-wrap:balance}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--blue);padding:1rem 1.4rem;z-index:999;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

.kicker{--k1:var(--blue);--k2:var(--sky);--k3:var(--sky-2);font-family:var(--fd);font-size:.76rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;background:linear-gradient(96deg,var(--k1) 0%,var(--k2) 48%,var(--k3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-size:180% 100%;animation:kshift 7s ease-in-out infinite alternate}
@keyframes kshift{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.kicker{animation:none}}
.kicker::before{content:'';width:15px;height:15px;flex:0 0 15px;-webkit-text-fill-color:initial;-webkit-background-clip:border-box;background-clip:border-box;background:linear-gradient(135deg,var(--k1),var(--k3));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 0c.6 6.2 5.2 10.8 12 12c-6.8 1.2-11.4 5.8-12 12c-.6-6.2-5.2-10.8-12-12C6.8 10.8 11.4 6.2 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 0c.6 6.2 5.2 10.8 12 12c-6.8 1.2-11.4 5.8-12 12c-.6-6.2-5.2-10.8-12-12C6.8 10.8 11.4 6.2 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;animation:kspin 9s linear infinite}
@keyframes kspin{to{transform:rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.kicker::before{animation:none}}
.kicker.c{justify-content:center}
.s-title{font-size:clamp(2rem,4.3vw,3.15rem);margin-bottom:1.3rem}
.s-desc{font-size:1.1rem;color:var(--ink-2);max-width:38em;line-height:1.85}
.center{text-align:center}.center .s-desc{margin-inline:auto}.center .kicker{justify-content:center}
/* .sec is what pages5 writes on the clinic profiles. It had no rule, so
   those three sections had no gutter at all and their text started at x=0. */
.section,.sec{padding:var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}
.lede{font-size:1.18rem;color:var(--ink-2);line-height:1.85}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fd);font-weight:600;font-size:.95rem;padding:1rem 1.9rem;border-radius:999px;border:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;letter-spacing:.005em;text-align:center;justify-content:center}
.btn-primary{background:linear-gradient(118deg,#0847a0 0%,var(--blue) 45%,var(--sky) 100%);color:#fff;box-shadow:0 10px 28px -8px rgba(10,85,180,.55);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-18deg);transition:left .55s cubic-bezier(.22,1,.36,1)}
.btn-primary:hover::after{left:120%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(10,85,180,.55);color:#fff}
.btn-ghost{background:transparent;color:var(--blue);border:1.6px solid var(--border-2);font-weight:700}
.btn-ghost:hover{border-color:var(--blue);background:rgba(10,85,180,.05)}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:var(--surface-2);color:var(--blue);transform:translateY(-2px)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ── Floating pill nav ── */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1320px,calc(100% - 28px));z-index:120;display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.35rem;border-radius:999px;background:rgba(6,35,74,.26);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 40px -18px rgba(2,16,38,.5);transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,top .35s ease}
.nav.scrolled{background:rgba(255,255,255,.9);border-color:rgba(10,85,180,.1);box-shadow:0 14px 44px -16px rgba(6,35,74,.24);top:10px}
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo img{height:34px;width:auto;transition:opacity .3s ease}
.nav-logo .l-dark{display:none}
.nav.scrolled .l-white{display:none}
.nav.scrolled .l-dark{display:block}
.nav-logo .wordmark{font-family:var(--fd);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:#fff;margin-left:.6rem;white-space:nowrap}
.nav.scrolled .wordmark{color:var(--ink)}
.nav-logo .wordmark b{font-weight:800;color:var(--sky-2)}
.nav.scrolled .wordmark b{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin-left:auto}
.nav-links>li{position:relative}
.nav-links>li>a{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--fd);font-weight:500;font-size:.89rem;color:rgba(255,255,255,.92);padding:.55rem .85rem;border-radius:999px;transition:background .22s ease,color .22s ease}
.nav-links>li>a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav.scrolled .nav-links>li>a{color:var(--ink-2)}
.nav .nav-links>li>a.btn-primary,.nav.scrolled .nav-links>li>a.btn-primary{color:#fff}
.nav .nav-links>li>a.btn-primary:hover,.nav.scrolled .nav-links>li>a.btn-primary:hover{color:#fff;background:linear-gradient(118deg,#0847a0 0%,var(--blue) 45%,var(--sky) 100%)}
.nav.scrolled .nav-links>li>a:hover{background:var(--surface-2);color:var(--blue)}
.has-sub>a::after{content:'';width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7}
/* The gap between the word and the panel is a dead zone for the pointer, so
   the li carries an invisible bridge across it. Without this the menu closes
   the moment you move down towards it. */
.has-sub::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px}
.sub{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px) scale(.985);transform-origin:top center;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 28px 70px -18px rgba(6,35,74,.34),0 2px 8px rgba(6,35,74,.06);padding:.5rem;min-width:310px;opacity:0;visibility:hidden;transition:opacity .2s ease .14s,transform .24s cubic-bezier(.22,1,.36,1) .14s,visibility .24s .14s;list-style:none;
  /* never taller than the window: the specialties panel used to run past the
     bottom of a 820px laptop and the last four rows could not be reached */
  max-height:calc(100svh - 104px);overflow-y:auto;overscroll-behavior:contain}
.sub::before{content:'';position:absolute;top:-7px;left:50%;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);border-radius:3px 0 0 0}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.sub li{position:relative}
.sub a{display:block;padding:.62rem .85rem;border-radius:13px;font-size:.9rem;font-weight:600;color:var(--ink);transition:background .18s ease,color .18s ease,padding-left .18s ease}
.sub a:hover{background:var(--surface-2);color:var(--blue);padding-left:1.05rem}
.sub .sub-note{display:block;font-size:.775rem;font-weight:400;color:var(--ink-3);margin-top:.12rem;line-height:1.5}
.sub .sub-all{margin-top:.25rem;border-top:1px solid var(--border);padding-top:.45rem}
.sub .sub-all a{color:var(--blue);font-size:.83rem;letter-spacing:.01em}

/* ── the specialties panel: nine disciplines, two columns ─────────────────
   As one column it measured 817px in an 820px viewport. Two columns halve it
   and it is easier to scan besides: the eye takes a short list twice rather
   than a long list once. */
.sub.wide{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .3rem;width:min(640px,calc(100vw - 40px));min-width:0;
  left:0;transform:translate(0,10px) scale(.985);transform-origin:top left;padding:.6rem}
.has-sub:hover .sub.wide,.has-sub:focus-within .sub.wide{transform:translate(0,0) scale(1)}
.sub.wide::before{left:2.1rem;transform:rotate(45deg)}
.sub.wide .sub-feat,.sub.wide .sub-all{grid-column:1/-1}
.sub.wide .sub-all{margin-top:.3rem}

/* the chevron that opens a section on a phone; the pointer has hover instead */
.sub-t{display:none;background:none;border:0;cursor:pointer;color:var(--ink-2);padding:.6rem;border-radius:50%}
.sub-t svg{display:block;width:20px;height:20px;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.sub-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-quiet{font-size:.82rem !important;font-weight:500 !important;opacity:.82}
.nav-quiet:hover{opacity:1}
.nav-lang{font-family:var(--fd);font-weight:700;font-size:.76rem;letter-spacing:.08em;padding:.5rem .7rem !important;border:1px solid rgba(255,255,255,.3);border-radius:999px}
.nav.scrolled .nav-lang{border-color:var(--border-2)}
.nav-cta{padding:.62rem 1.25rem !important;font-size:.86rem !important}
.nav-burger{display:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);cursor:pointer;width:44px;height:44px;border-radius:999px;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;flex:0 0 44px}
.nav-burger span{display:block;width:18px;height:1.8px;background:#fff;border-radius:2px;transition:all .3s}
.nav.scrolled .nav-burger{background:var(--surface-2);border-color:var(--border)}
.nav.scrolled .nav-burger span{background:var(--ink)}
.nav-burger.on span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-burger.on span:nth-child(2){opacity:0}
.nav-burger.on span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ── Hero ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0}
/* The subject sits in the left third of the frame and the right half is
   empty white. Centre-cropping a 16:9 clip into a portrait viewport cuts her
   out and leaves the blank side, so on a narrow screen the crop is pulled
   back towards her. */
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;
  object-position:38% center}
@media (max-width:900px){.hero-media video,.hero-media img{object-position:26% center}}
@media (max-width:560px){.hero-media video,.hero-media img{object-position:22% 42%}}
.hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,35,74,.72) 0%,rgba(6,35,74,.5) 42%,rgba(6,35,74,.88) 100%)}
/* White text over a white studio background needs a floor under it, and on a
   phone the copy covers most of the frame. */
@media (max-width:900px){.hero-media::after{background:
  linear-gradient(180deg,rgba(5,26,58,.78) 0%,rgba(5,26,58,.66) 38%,rgba(5,26,58,.92) 100%)}}
.hero-inner{position:relative;z-index:2;padding:8.5rem 1.5rem 4.5rem;max-width:1020px;width:100%}
.hero-kicker{display:block;font-family:var(--fd);font-size:clamp(.7rem,1.1vw,.79rem);font-weight:700;letter-spacing:.34em;text-transform:uppercase;margin:0 0 1.35rem;background:linear-gradient(96deg,var(--sky-3) 0%,var(--sky-2) 42%,#cfe9fb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.7rem);color:#fff;margin-bottom:1.3rem;letter-spacing:-.02em;line-height:1.05}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--sky-2),var(--sky-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--on-navy);max-width:44em;margin:0 auto 2.2rem;line-height:1.8}

/* search */
.search{display:flex;gap:.4rem;background:rgba(255,255,255,.97);border-radius:999px;padding:.45rem;max-width:780px;margin:0 auto;box-shadow:0 30px 70px -20px rgba(2,16,38,.65)}
.search .f{flex:1;display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem .5rem 1.1rem;position:relative}
.search .f+.f::before{content:'';position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--border)}
.search svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.9;flex:0 0 19px}
.search select,.search input{border:none;background:none;font-family:var(--fd);font-size:.97rem;color:var(--ink);width:100%;padding:.35rem 0;cursor:pointer}
.search select:focus,.search input:focus{outline:none}
.search .btn{flex:0 0 auto;padding:.95rem 1.7rem}
.hero-trust{display:flex;justify-content:center;flex-wrap:wrap;margin-top:1.9rem;column-gap:0;row-gap:.6rem}
.hero-trust li{list-style:none;display:inline-flex;align-items:center;gap:.5rem;font-size:.855rem;color:var(--on-navy);padding:0 1.35rem;position:relative}
.hero-trust li+li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.24)}
.hero-trust svg{width:14px;height:14px;stroke:var(--sky-2);fill:none;stroke-width:2.8;flex:0 0 14px}
@media(max-width:720px){.hero-trust li{padding:0 .8rem;font-size:.8rem}.hero-trust li+li::before{display:none}}

/* ── Stats band ── */
.statband{background:linear-gradient(180deg,#fff,#f7fbff);border-bottom:1px solid var(--border);padding:3.6rem 3rem;position:relative;overflow:hidden}
.statband::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 100% at 50% 0,rgba(31,155,222,.1),transparent 70%)}
.statgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;position:relative}
.stat{padding:0 1.6rem;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--border-2),transparent)}
.statgrid .n{font-variant-numeric:tabular-nums;font-family:var(--fd);font-size:clamp(1.9rem,3.4vw,2.85rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;background:linear-gradient(118deg,#0847a0,var(--blue) 40%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statgrid .l{font-size:.885rem;color:var(--ink-2);margin-top:.55rem;line-height:1.55;font-weight:500}
.statgrid .src{font-family:var(--fd);font-size:.695rem;color:var(--ink-3);margin-top:.55rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
@media(max-width:960px){.stat{padding:1.2rem .8rem}.stat+.stat::before{display:none}.statgrid{gap:.4rem}}

/* ── Cards ── */
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:2.1rem 1.85rem;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 52px -20px rgba(10,85,180,.26);border-color:var(--border-2)}
.card-ico{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;transition:background .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.card:hover .card-ico{background:linear-gradient(135deg,var(--blue),var(--sky));transform:scale(1.06) rotate(-3deg)}
.card:hover .card-ico svg{stroke:#fff}
.card-ico svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.9;transition:stroke .35s ease}
.card h3{font-size:1.1rem;margin-bottom:.6rem}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.78}
.card .more{font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem}

/* concern cards */
.concerns{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.concern{position:relative;border-radius:var(--r3);overflow:hidden;background:var(--navy);display:block;aspect-ratio:1/1;box-shadow:0 14px 34px -18px rgba(6,35,74,.5)}
.concern img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.concern::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,35,74,0) 32%,rgba(6,35,74,.55) 62%,rgba(4,22,48,.92) 100%);transition:opacity .35s}
.concern:hover img{transform:scale(1.07)}
.concern .cbody{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.25rem 1.25rem 1.35rem}
.concern h3{color:#fff;font-size:1.02rem;margin-bottom:.25rem;letter-spacing:-.015em}
.concern p{color:var(--on-navy-2);font-size:.79rem;line-height:1.5}
.concern .tag{font-family:var(--fd);position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(10,85,180,.75);backdrop-filter:blur(6px);padding:.32rem .7rem;border-radius:999px}

/* ── Navy section ── */
.navy{background:linear-gradient(162deg,var(--navy) 0%,var(--navy-2) 58%,var(--navy-3) 100%);color:var(--on-navy);position:relative;overflow:hidden}
.navy::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);top:-220px;right:-160px;pointer-events:none}
.navy h2,.navy h3,.navy h4{color:#fff}
.navy .s-desc,.navy .lede{color:var(--on-navy)}
.navy .kicker{--k1:var(--sky);--k2:var(--sky-2);--k3:var(--sky-3)}
/* light panels on navy: the contrast pairing */
.panel{background:linear-gradient(168deg,#ffffff 0%,#eef6fd 100%);border:1px solid rgba(255,255,255,.55);box-shadow:0 26px 58px -26px rgba(2,16,38,.75),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.panel:hover{transform:translateY(-6px);box-shadow:0 38px 74px -26px rgba(2,16,38,.8);border-color:var(--sky-2)}
.gradtext{background:linear-gradient(104deg,#07203f 0%,var(--blue) 62%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Badge cards (verification) ── */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.badge{border-radius:var(--r3);padding:1.75rem 1.55rem}
.badge .seal{width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem;transition:background .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.badge:hover .seal{background:linear-gradient(140deg,var(--blue),var(--sky));transform:scale(1.08) rotate(-4deg)}
.badge:hover .seal svg{stroke:#fff}
.badge .seal svg{width:23px;height:23px;stroke:var(--blue);fill:none;stroke-width:2;transition:stroke .35s ease}
.navy .badge h3{font-size:1rem;margin-bottom:.45rem;background:linear-gradient(104deg,#07203f 0%,var(--blue) 62%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.badge p{font-size:.875rem;color:var(--ink-2);line-height:1.7}
.badge .proof{font-family:var(--fd);margin-top:.9rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--blue);display:flex;align-items:center;gap:.35rem}
.badge .proof svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3}

/* ── Feature (photo bg + white card) ── */
.feature{position:relative;padding:7rem 3rem;overflow:hidden;background:var(--navy)}
.feature .fbg{position:absolute;inset:0}
.feature .fbg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;animation:fz 18s ease-in-out infinite alternate}
.feature .fbg::after{content:'';position:absolute;inset:0;background:linear-gradient(96deg,rgba(6,35,74,.78) 6%,rgba(6,35,74,.4) 52%,rgba(6,35,74,.66))}
@keyframes fz{from{transform:scale(1.01)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.feature .fbg img{animation:none}}
.fcard{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center;background:rgba(255,255,255,.965);backdrop-filter:blur(8px);border-radius:var(--r4);padding:3.4rem 3.2rem;box-shadow:0 60px 100px -38px rgba(2,16,38,.7)}
.fcard .checklist{text-align:left;max-width:600px;margin-inline:auto}

/* ── Split ── */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:4.2rem;align-items:center}
.split.rev{grid-template-columns:.98fr 1.02fr}
.split-img{border-radius:var(--r4);overflow:hidden;box-shadow:0 34px 74px -28px rgba(6,35,74,.45);position:relative}
.split-img img{width:100%;height:100%;object-fit:cover}
.checklist{list-style:none;margin:1.7rem 0}
.checklist li{padding-left:2.05rem;position:relative;margin-bottom:.95rem;color:var(--ink-2);line-height:1.8}
.checklist li strong{color:var(--ink)}
.checklist li::before{content:'';position:absolute;left:0;top:.44em;width:1.05em;height:1.05em;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat}
.navy .checklist li{color:var(--on-navy)}
.navy .checklist li strong{color:#fff}

/* ── Steps ── */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step{counter-increment:st;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:2.1rem 1.8rem;position:relative}
.step::before{content:counter(st,decimal-leading-zero);font-family:var(--fd);font-size:.82rem;font-weight:700;color:var(--sky);letter-spacing:.16em;display:block;margin-bottom:.9rem}
.step h3{font-size:1.06rem;margin-bottom:.55rem}
.step p{font-size:.93rem;color:var(--ink-2);line-height:1.78}

/* ── Categories ── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:0 1.8rem 2rem;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.cat:hover{transform:translateY(-5px);box-shadow:0 26px 52px -20px rgba(10,85,180,.24);border-color:var(--border-2)}
.cat-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.cat-ico{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;flex:0 0 50px;transition:background .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.cat:hover .cat-ico{background:linear-gradient(135deg,var(--blue),var(--sky));transform:scale(1.06)}
.cat:hover .cat-ico svg{stroke:#fff}
.cat-ico svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.9;transition:stroke .35s ease}
.cat h3{font-size:1.08rem}
.cat .count{font-family:var(--fd);font-size:.74rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.cat p{font-size:.92rem;color:var(--ink-2);line-height:1.76;margin-bottom:1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.chips a{font-size:.79rem;padding:.36rem .8rem;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid transparent;transition:.22s}
.chips a:hover{background:#fff;border-color:var(--border-2);color:var(--blue)}

/* ── Locations ── */
.locs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.loc{border-radius:var(--r3);padding:1.45rem 1.45rem;display:block}
.navy .loc h3{font-size:1.04rem;margin-bottom:.25rem;background:linear-gradient(104deg,#07203f 0%,var(--blue) 62%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.loc .meta{font-size:.8rem;color:var(--blue);line-height:1.55;font-weight:600}
.loc .towns{font-size:.755rem;color:var(--ink-3);margin-top:.55rem;line-height:1.55}

/* ── Price table ── */
.tablewrap{overflow-x:auto;border-radius:var(--r3);border:1px solid var(--border);background:var(--surface);box-shadow:0 22px 50px -26px rgba(6,35,74,.22)}
table{width:100%;border-collapse:collapse;min-width:660px;font-size:.94rem}
caption{text-align:left;padding:1.4rem 1.6rem .4rem;font-size:.84rem;color:var(--ink-3);caption-side:bottom;line-height:1.65}
thead th{background:var(--surface-2);font-family:var(--fd);font-weight:700;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-align:left;padding:1rem 1.2rem;white-space:nowrap}
tbody td{padding:.95rem 1.2rem;border-top:1px solid var(--border);color:var(--ink-2);vertical-align:top;font-variant-numeric:tabular-nums}
tbody tr:hover{background:rgba(31,155,222,.045)}
tbody td:first-child{font-weight:600;color:var(--ink)}
.curswitch{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.5rem}
.curlabel{font-family:var(--fd);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.curbtns{display:inline-flex;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;gap:2px}
.cur{font-family:var(--fd);font-weight:700;font-size:.85rem;padding:.5rem 1.05rem;border-radius:999px;border:none;background:none;color:var(--ink-2);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
.cur:hover{color:var(--blue)}
.cur.on{background:#fff;color:var(--blue);box-shadow:0 3px 10px -3px rgba(6,35,74,.22)}
.save{display:inline-block;font-size:.78rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:rgba(16,140,90,.12);color:#0d7a4f}
.save.flat{background:rgba(10,85,180,.1);color:var(--blue)}
.save.up{background:rgba(200,60,60,.1);color:#b03434}

/* ── Editorial / EEAT ── */
.eeat{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:2.6rem}
.eeat div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:1.4rem 1.3rem}
.eeat .k{font-family:var(--fd);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:.45rem}
.eeat .v{font-family:var(--fb);font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.4}
.eeat .n{font-size:.8rem;color:var(--ink-2);margin-top:.35rem;line-height:1.6}


/* ── Original data block ── */
.datawall{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
@media(max-width:1100px){.datawall{grid-template-columns:repeat(2,1fr)}}
.dw{border-radius:var(--r3);padding:1.7rem 1.6rem}
.dw .dn{font-family:var(--fd);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(112deg,#07203f,var(--blue) 55%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dw .dl{font-size:.88rem;color:var(--ink-2);margin-top:.55rem;line-height:1.6;font-weight:500}
.dw .dc{font-family:var(--fd);font-size:.72rem;color:var(--ink-3);margin-top:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.regbars{margin-top:2.4rem;display:grid;gap:.7rem}
.regbar{display:grid;grid-template-columns:150px 1fr 54px;align-items:center;gap:1rem;font-size:.88rem}
.regbar .rn{color:#fff;font-weight:600}
.regbar .rt{height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.regbar .rf{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sky),var(--sky-2));width:0;transition:width 1.3s cubic-bezier(.22,1,.36,1)}
.regbar .rv2{text-align:right;font-variant-numeric:tabular-nums;color:var(--sky-2);font-weight:700}
@media(max-width:860px){.datawall{grid-template-columns:1fr}.regbar{grid-template-columns:104px 1fr 46px;gap:.7rem;font-size:.82rem}}

/* ── Medical review board ── */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.seat{background:var(--surface);border:1px dashed var(--border-2);border-radius:var(--r3);padding:1.8rem 1.6rem;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s}
.seat:hover{border-color:var(--sky);transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(10,85,180,.3)}
.seat .ring{width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:background .35s}
.seat:hover .ring{background:linear-gradient(135deg,var(--blue),var(--sky))}
.seat:hover .ring svg{stroke:#fff}
.seat .ring svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.8;transition:stroke .35s}
.seat h4{font-size:1.02rem;margin-bottom:.4rem}
.seat p{font-size:.86rem;color:var(--ink-2);line-height:1.72}
.seat .open{font-family:var(--fd);display:inline-block;margin-top:1rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:rgba(10,85,180,.09);padding:.32rem .75rem;border-radius:999px}
@media(max-width:860px){.board{grid-template-columns:1fr}}

/* ── Founders letter ── */
.letter{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r4);padding:3.6rem 3.4rem;box-shadow:0 40px 90px -44px rgba(6,35,74,.4);max-width:940px;margin:0 auto}
.letter::before{content:'';position:absolute;top:0;left:3.4rem;right:3.4rem;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(96deg,var(--blue),var(--sky),var(--sky-2))}
.letter .lead-in{font-family:var(--fd);font-size:clamp(1.3rem,2.6vw,1.85rem);font-weight:600;line-height:1.45;letter-spacing:-.022em;color:var(--ink);margin-bottom:1.6rem}
.letter .lead-in em{font-style:normal;background:linear-gradient(96deg,var(--blue),var(--sky-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.letter p{color:var(--ink-2);margin-bottom:1.15rem;line-height:1.85}
.signers{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--border)}
.signer .name{font-family:var(--fb);font-weight:700;font-size:1.06rem;color:var(--ink);display:inline-block;padding-bottom:.35rem;border-bottom:2px solid transparent;border-image:linear-gradient(96deg,var(--blue),var(--sky-2)) 1;border-bottom-style:solid}
.signer .role{font-size:.85rem;color:var(--ink-3);margin-top:.5rem;line-height:1.6}
@media(max-width:760px){.letter{padding:2.3rem 1.5rem}.letter::before{left:1.5rem;right:1.5rem}.signers{grid-template-columns:1fr;gap:1.4rem}}

/* ── Credentials ── */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.4rem}
.cred{display:flex;gap:1.1rem;align-items:flex-start;border-radius:var(--r3);padding:1.45rem 1.45rem}
.cred .abbr{font-family:var(--fd);font-weight:800;font-size:.78rem;letter-spacing:.06em;color:#fff;background:linear-gradient(140deg,#0847a0,var(--sky));border-radius:10px;padding:.45rem .55rem;flex:0 0 auto;min-width:74px;text-align:center;box-shadow:0 6px 16px -6px rgba(10,85,180,.6)}
.navy .cred h4{font-size:.97rem;margin-bottom:.32rem;background:linear-gradient(104deg,#07203f 0%,var(--blue) 62%,var(--sky) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cred p{font-size:.855rem;color:var(--ink-2);line-height:1.72}
@media(max-width:860px){.creds{grid-template-columns:1fr}}

/* ── Quote ── */
.quote{max-width:860px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--fd);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.5;color:#fff;font-weight:500;letter-spacing:-.02em}
.quote cite{display:block;margin-top:1.4rem;font-style:normal;font-size:.85rem;color:var(--on-navy-2);letter-spacing:.06em}
.quote cite a{color:var(--sky-2);text-decoration:underline;text-underline-offset:3px}

/* ── FAQ ── */
.faq{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--r2);background:var(--surface);margin-bottom:.8rem;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:none;border:none;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);text-align:left}
.faq-q .fx{font-size:1.35rem;color:var(--sky);transition:transform .3s;flex-shrink:0;line-height:1}
.faq-item.open .fx{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a .in{padding:0 1.5rem 1.4rem;color:var(--ink-2);font-size:.96rem;line-height:1.85}
.faq-a .in a{text-decoration:underline;text-underline-offset:3px}

/* ── CTA band ── */
.cta{background:linear-gradient(132deg,var(--blue) 0%,var(--sky) 100%);border-radius:var(--r4);padding:4rem 3rem;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.09);top:-210px;left:-110px}
.cta::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.07);bottom:-180px;right:-80px}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.65rem);margin-bottom:1rem;position:relative;z-index:1}
.cta p{color:rgba(255,255,255,.9);max-width:40em;margin:0 auto 2rem;position:relative;z-index:1}
.cta .btns{position:relative;z-index:1;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.b2b{text-align:center;margin-top:1.5rem;font-size:.92rem;color:var(--ink-3)}
.b2b a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* ── Footer ── */
.footer{background:var(--navy);color:var(--on-navy-2);padding:4.5rem 3rem 2.4rem}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2.4rem}
.fbrand img{height:40px;margin-bottom:1.1rem}
.fbrand p{font-size:.88rem;line-height:1.8;max-width:32em}
.footer h4,.footer .f-col-h{color:#fff;font-family:var(--fd);font-size:.93rem;margin-bottom:1rem}
.footer ul{list-style:none}
.footer li{margin-bottom:.55rem}
.footer a{color:var(--on-navy-2);font-size:.89rem}
.footer a:hover{color:#fff}
.fsocial{display:flex;gap:.55rem;margin-top:1.4rem;flex-wrap:wrap}
.fsocial a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:.3s}
.fsocial a:hover{background:var(--sky);border-color:var(--sky);transform:translateY(-3px)}
.fsocial svg{width:16px;height:16px;fill:#fff}
.fbottom{max-width:var(--maxw);margin:3rem auto 0;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.79rem;color:var(--on-navy-3)}
.built a{font-weight:700;background:linear-gradient(100deg,var(--sky-2),#dbeffc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .25s}
.built a:hover{opacity:.75}
.fdisc{max-width:var(--maxw);margin:1.6rem auto 0;font-size:.76rem;color:var(--on-navy-3);line-height:1.7}

/* ── Popup CTA ── */
.pop-back{position:fixed;inset:0;z-index:200;background:rgba(4,18,40,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s}
.pop-back.show{opacity:1;visibility:visible}
.pop{width:min(880px,100%);background:var(--surface);border-radius:var(--r4);overflow:hidden;display:grid;grid-template-columns:.85fr 1.15fr;box-shadow:0 60px 120px -40px rgba(2,16,38,.8);transform:translateY(26px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.pop-back.show .pop{transform:none;opacity:1}
.pop-media{position:relative;background:linear-gradient(165deg,var(--navy),var(--navy-3))}
.pop-media img{width:100%;height:100%;object-fit:cover;opacity:.62}
.pop-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,35,74,.3),rgba(6,35,74,.85))}
.pop-media .seal-big{position:absolute;left:1.6rem;bottom:1.5rem;right:1.6rem;z-index:2;color:#fff}
.pop-media .seal-big strong{display:block;font-family:var(--fd);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;background:linear-gradient(100deg,var(--sky-2),#dbeffc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pop-media .seal-big span{font-family:var(--fd);display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2);margin-top:.35rem;font-weight:700}
.pop-body{padding:2.6rem 2.5rem}
.pop-body h3{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:.7rem;letter-spacing:-.015em}
.pop-body p{font-size:.95rem;color:var(--ink-2);line-height:1.75;margin-bottom:1.3rem}
.pop-list{list-style:none;margin-bottom:1.5rem}
.pop-list li{font-size:.88rem;color:var(--ink-2);padding-left:1.7rem;position:relative;margin-bottom:.5rem}
.pop-list li::before{content:'';position:absolute;left:0;top:.4em;width:1em;height:1em;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat}
.pop-form{display:flex;gap:.5rem;flex-wrap:wrap}
.pop-form input{flex:1;min-width:190px;padding:.9rem 1.1rem;border:1.6px solid var(--border-2);border-radius:999px;font-family:var(--fd);font-size:.95rem;color:var(--ink);background:var(--bg)}
.pop-form input:focus{outline:none;border-color:var(--sky)}
.pop-note{font-size:.74rem;color:var(--ink-3);margin-top:.9rem;line-height:1.6}
.pop-x{position:absolute;top:.9rem;right:1rem;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.94);color:var(--ink-2);font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.pop-x:hover{background:var(--surface-2);color:var(--blue);transform:rotate(90deg)}
@media(max-width:760px){.pop{grid-template-columns:1fr}.pop-media{display:none}.pop-body{padding:2.2rem 1.4rem}}

/* ── Reveal ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);animation:failsafe 0s 3s forwards}
.rv.vis{opacity:1;transform:none}
@keyframes failsafe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── Responsive ── */
@media(max-width:1180px){
  .concerns{grid-template-columns:repeat(3,1fr)}
  .badges{grid-template-columns:repeat(2,1fr)}
  .eeat{grid-template-columns:repeat(3,1fr)}
  .locs{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1120px){
  :root{--pad:4.6rem var(--gut)}
  .nav{padding:.5rem .5rem .5rem 1rem}
  .nav-logo .wordmark{display:block;font-size:.95rem}
  /* ── the menu on a phone ───────────────────────────────────────────────
     It was a floating card with one section per screenful: opening
     Specialties buried everything else under ten full-width rows, so finding
     Prices meant scrolling past a wall. It is now a full sheet with its own
     header and footer, and the sections open into two compact columns, which
     is how ten one-word links actually want to be read. */
  /* The sheet is a child of the bar, so it cannot escape the bar's stacking
     context: at z-index 130 it painted over the logo and the burger and the
     header looked empty. It sits under them instead. */
  .nav-links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;
    gap:0;background:linear-gradient(172deg,#ffffff 0%,#f5f8fd 100%);
    padding:calc(72px + env(safe-area-inset-top)) 1.15rem calc(1.4rem + env(safe-area-inset-bottom));
    max-height:none;overflow-y:auto;overscroll-behavior:contain;display:none;
    border-radius:0;box-shadow:none;border:none;
    -webkit-overflow-scrolling:touch}
  .nav-links.open{display:flex;animation:navIn .34s cubic-bezier(.22,1,.36,1)}
  @keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav-links>li{border-bottom:1px solid var(--border)}
  .nav-links>li:last-child{border-bottom:none}
  .nav-links>li>a{color:var(--ink) !important;font-size:1.12rem;font-weight:700;
    letter-spacing:-.02em;padding:1.05rem .3rem;justify-content:flex-start}

  .has-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
  .has-sub>a{grid-column:1}
  .sub-t{display:grid;place-items:center;grid-column:2;width:44px;height:44px;
    border-radius:50%;background:var(--surface-2);color:var(--blue);margin-right:.1rem}
  .sub-t svg{width:19px;height:19px}
  .sub-t[aria-expanded="true"]{background:var(--blue);color:#fff}

  /* two columns: ten one-word links read as a block, not a queue */
  .sub{grid-column:1/-1;position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:none;min-width:0;width:auto;padding:0;
    display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
    /* a grid item stretches to its row, so max-height:0 alone left a strip of
       the first row peeking through. height:0 and align-self settle it. */
    height:0;max-height:0;min-height:0;align-self:start;overflow:hidden;
    transition:height .36s cubic-bezier(.22,1,.36,1),
               max-height .36s cubic-bezier(.22,1,.36,1),padding .3s ease}
  /* the desktop .sub.wide rule is not in a media query, so its .6rem padding
     survived into the phone sheet and left a 19px strip below the closed row */
  .sub.wide{display:grid;width:auto;padding:0;transform:none;left:auto}
  .sub.wide.open{padding:.15rem 0 1rem}
  .sub.open{height:auto;max-height:560px;padding:.15rem 0 1rem}
  .sub::before{display:none}
  .sub .sub-note{display:none}
  .sub li{border:none;margin:0}
  .sub a{display:flex;align-items:center;min-height:46px;padding:.5rem .8rem;
    font-size:.88rem;font-weight:600;line-height:1.25;border-radius:12px;
    background:#fff;border:1px solid var(--border);color:var(--ink-2)}
  .sub a:hover,.sub a:active{background:var(--surface-2);color:var(--blue);padding-left:.8rem}
  .sub .sub-feat,.sub .sub-all{grid-column:1/-1}
  .sub .sub-all{margin-top:.1rem;border-top:none;padding-top:0}
  /* display:inline-flex came from the touch-target pass and stopped the
     full-width button filling its row */
  .sub .sub-all a{display:flex;width:100%;
    background:linear-gradient(118deg,#0847a0,var(--blue) 48%,var(--sky));
    border-color:transparent;color:#fff;justify-content:center;font-weight:700}
  .sub .sub-feat>a{display:flex;width:100%}
  .sub .sub-feat>a::after{position:static;transform:none;margin-left:.5rem}

  /* the quiet ones go to the bottom as a footer row */
  .nav-links>li:has(>.nav-quiet),.nav-links>li:has(>.nav-lang){border-bottom:none}
  .nav-quiet{font-size:.92rem !important;font-weight:600 !important;opacity:1;color:var(--ink-3) !important}
  .nav-lang{border-color:var(--border-2) !important;width:fit-content;margin-top:.2rem}

  .has-sub>a::after{display:none}
  .has-sub::after{display:none}
  .nav-lang{border-color:var(--border-2) !important;width:fit-content}
  .nav-cta{margin-top:.4rem}
  .nav-burger{display:flex}
  .nav-logo,.nav-burger,.nav-lupe{position:relative;z-index:3}
  .g3,.g4,.g2{grid-template-columns:1fr}
  .concerns{grid-template-columns:repeat(2,1fr)}
  .badges{grid-template-columns:1fr}
  .cats,.steps{grid-template-columns:1fr}
  .locs{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .eeat{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:2.4rem}
  .feature{padding:5rem var(--gut)}
  .fcard{padding:2.2rem 1.5rem}
  .fgrid{grid-template-columns:1fr 1fr;gap:2rem}
  .fbrand{grid-column:1/-1}
  .footer{padding:3.4rem var(--gut) 2rem}
  .search{flex-direction:column;border-radius:var(--r4);padding:.7rem}
  .search .f+.f::before{left:1.1rem;right:1.1rem;top:0;height:1px;width:auto}
  .search .btn{width:100%}
  .cta{padding:2.8rem 1.4rem}
  .hero-inner{padding:7.5rem 1.1rem 4rem}
  .marquee-in{animation-duration:26s}
}
@media(max-width:520px){
  .concerns{grid-template-columns:1fr 1fr;gap:.8rem}
  .concern .cbody{padding:.9rem}
  .concern h3{font-size:.88rem}
  .concern p{display:none}
  .locs{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   GUIDES  ·  index and article templates
   ══════════════════════════════════════════════════════════════ */
/* ── page hero: a photograph, not a filing cabinet ─────────────────────
   Every inner page used to open on the same overhead shot of an operating
   theatre. It is now a beauty image chosen per section, set by rehome.py as
   --hero on the element, with the gradient doing the legibility work from the
   left so the face in the picture is never the part that gets covered. */
.page-hero{position:relative;overflow:hidden;padding:11rem var(--gut) 3.4rem;min-height:clamp(420px,46vw,560px);
  display:flex;align-items:flex-end;background:var(--navy)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero,url(../img/hero-generic.webp));background-size:cover;background-position:center 34%;
  transform:scale(1.02)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(4,20,44,.95) 0%,rgba(4,20,44,.88) 34%,rgba(4,20,44,.55) 62%,rgba(4,20,44,.28) 100%),
    linear-gradient(to top,rgba(4,20,44,.72) 0%,rgba(4,20,44,0) 46%)}
.page-hero .wrap{position:relative;z-index:2;width:100%}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,5.2vw,3.7rem);max-width:14em;letter-spacing:-.021em}
.page-hero .lead{color:var(--on-navy);font-size:clamp(1.05rem,1.7vw,1.22rem);max-width:38em;margin-top:1.1rem;line-height:1.8}
.crumbs{font-family:var(--fd);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--on-navy-3);margin-bottom:1.5rem;position:relative;z-index:1}
.crumbs a{color:var(--on-navy-2)}
.crumbs a:hover{color:#fff}
.crumbs .sep{margin:0 .55rem;opacity:.5}

.cat-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:3rem}
.cat-filter a{font-family:var(--fd);font-size:.84rem;font-weight:600;padding:.55rem 1.15rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);transition:.25s}
.cat-filter a:hover{border-color:var(--border-2);color:var(--blue);transform:translateY(-2px)}
.cat-filter a.on{background:linear-gradient(118deg,#0847a0,var(--blue) 45%,var(--sky));color:#fff;border-color:transparent;box-shadow:0 10px 24px -10px rgba(10,85,180,.6)}

.g-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r4);overflow:hidden;margin-bottom:2.4rem;box-shadow:0 30px 70px -34px rgba(6,35,74,.38);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.g-feature:hover{transform:translateY(-5px);box-shadow:0 44px 88px -34px rgba(6,35,74,.45)}
.g-feature .gf-img{position:relative;min-height:340px;overflow:hidden;background:var(--navy)}
.g-feature .gf-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.g-feature:hover .gf-img img{transform:scale(1.05)}
.g-feature .gf-body{padding:3rem 2.8rem;display:flex;flex-direction:column;justify-content:center}
.g-feature h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.8rem 0 .9rem;letter-spacing:-.016em}
.g-feature h2 a{color:var(--ink)}
.g-feature h2 a:hover{background:linear-gradient(104deg,#07203f,var(--blue) 62%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-feature p{color:var(--ink-2);font-size:1rem;line-height:1.8}

.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fd);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.36rem .8rem;border-radius:999px;background:linear-gradient(118deg,rgba(10,85,180,.1),rgba(31,155,222,.14));color:var(--blue);width:fit-content}
.chip.light{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}

.byline{display:flex;align-items:center;gap:.7rem;margin-top:1.3rem;font-size:.82rem;color:var(--ink-3);flex-wrap:wrap}
.byline .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fd);font-weight:800;font-size:.8rem;flex:0 0 34px}
.byline strong{color:var(--ink-2);font-weight:700}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3);display:inline-block}

.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.g-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.g-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(10,85,180,.32);border-color:var(--border-2)}
.g-card .gc-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.g-card .gc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.g-card:hover .gc-img img{transform:scale(1.06)}
.g-card .gc-body{padding:1.6rem 1.6rem 1.8rem;flex:1;display:flex;flex-direction:column}
.g-card h3{font-size:1.06rem;line-height:1.4;margin:.75rem 0 .55rem;letter-spacing:-.018em}
.g-card h3 a{color:var(--ink)}
.g-card h3 a:hover{color:var(--blue)}
.g-card p{font-size:.9rem;color:var(--ink-2);line-height:1.72;flex:1}

/* ── Article ── */
.art-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:4rem;max-width:1120px;margin:0 auto}
.toc{position:sticky;top:110px;align-self:start;font-size:.86rem}
.toc .toc-h,.toc h4{font-family:var(--fd);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:.15rem}
.toc a{display:block;padding:.45rem .75rem .45rem 1.9rem;border-radius:10px;color:var(--ink-2);line-height:1.45;position:relative;transition:.22s}
.toc a::before{content:counter(t,decimal-leading-zero);position:absolute;left:.55rem;font-size:.68rem;font-weight:700;color:var(--ink-3);top:.62rem}
.toc a:hover,.toc a.on{background:var(--surface-2);color:var(--blue)}
.toc a.on::before{color:var(--sky)}
.art-hero-img{border-radius:var(--r4);overflow:hidden;margin:-4rem auto 3rem;max-width:1000px;box-shadow:0 40px 90px -34px rgba(6,35,74,.55);position:relative;z-index:5}
.art-hero-img img{width:100%;max-height:460px;object-fit:cover}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.85rem);margin:2.9rem 0 1rem;scroll-margin-top:110px;letter-spacing:-.015em}
.prose h3{font-size:1.22rem;margin:2.1rem 0 .75rem}
.prose p{margin-bottom:1.2rem;color:var(--ink-2);font-size:1.055rem;line-height:1.85}
.prose>p:first-of-type{font-size:1.18rem;line-height:1.8;color:var(--ink)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.4rem 1.3rem;color:var(--ink-2)}
.prose li{margin-bottom:.55rem;line-height:1.8}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--border-2)}
.prose a:hover{text-decoration-color:var(--sky)}
.prose blockquote{border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--blue),var(--sky)) 1;padding:.3rem 0 .3rem 1.5rem;margin:2rem 0;font-family:var(--fd);font-size:1.15rem;font-style:italic;font-weight:500;color:var(--ink);line-height:1.6}
.prose table{margin:1.8rem 0;font-size:.93rem}
.prose .tablewrap{margin:1.8rem 0}
.prose img{border-radius:var(--r3);margin:2rem 0}
.prose hr{border:none;height:1px;background:var(--border);margin:2.6rem 0}

.art-cta{background:linear-gradient(150deg,var(--navy),var(--navy-3));border-radius:var(--r4);padding:2.6rem 2.4rem;margin:3rem 0;position:relative;overflow:hidden}
.art-cta::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);top:-160px;right:-90px}
.art-cta h3{color:#fff;font-size:1.4rem;margin-bottom:.7rem;position:relative;z-index:1;letter-spacing:-.015em}
.art-cta p{color:var(--on-navy);font-size:.96rem;margin-bottom:1.5rem;position:relative;z-index:1;line-height:1.8}
.art-cta .btn{position:relative;z-index:1}

.sources{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:1.9rem 1.9rem;margin-top:2.6rem}
.sources h2{font-size:1.05rem !important;margin:0 0 1rem !important}
.sources ul{list-style:none;margin:0;font-size:.87rem}
.sources li{margin-bottom:.55rem;padding-left:1.2rem;position:relative;color:var(--ink-2)}
.sources li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--sky)}

.rev-note{display:flex;gap:1rem;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r2);padding:1.15rem 1.3rem;margin:2.4rem 0;font-size:.86rem;color:var(--ink-2);line-height:1.7}
.rev-note svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2;flex:0 0 20px;margin-top:.15rem}

.related{border-top:1px solid var(--border);margin-top:3.5rem;padding-top:2.6rem}
.related h2{font-size:1.3rem;margin-bottom:1.5rem}

@media(max-width:1024px){
  .art-wrap{grid-template-columns:minmax(0,1fr);gap:2rem}
  .toc{position:static;border:1px solid var(--border);border-radius:var(--r2);padding:1.2rem 1rem;background:var(--surface)}
  .toc ol{columns:2;column-gap:1rem}
  .g-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1120px){.page-hero{padding:9.5rem var(--gut) 4rem}}
@media(max-width:760px){
  .g-feature{grid-template-columns:1fr}
  .g-feature .gf-img{min-height:220px}
  .g-feature .gf-body{padding:1.9rem 1.4rem}
  .g-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
  .art-hero-img{margin:-2rem auto 2rem;border-radius:var(--r3)}
}

/* ══════════════════════════════════════════════════════════════
   LUPE  ·  the swipe matcher
   ══════════════════════════════════════════════════════════════ */
.page-hero.lupe-hero{background-image:linear-gradient(158deg,rgba(6,35,74,.94) 0%,rgba(10,50,99,.88) 52%,rgba(14,61,119,.8) 100%),url(../img/hero-beauty.webp);background-size:cover;background-position:center 30%;position:relative;overflow:hidden;padding:10.5rem 3rem 4.5rem}
.page-hero.lupe-hero::after{content:'';position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);top:-260px;right:-180px;pointer-events:none}
.page-hero.lupe-hero .wrap{position:relative;z-index:1}
.page-hero.lupe-hero h1{max-width:none}

/* mascot */
.lupe{width:var(--ls,116px);height:var(--ls,116px);flex:0 0 auto;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.lupe .ring{fill:none;stroke:url(#lupeGrad);stroke-width:6}
.lupe .glass{fill:url(#lupeGlass);opacity:.95}
.lupe .handle{stroke:url(#lupeGrad);stroke-width:7;stroke-linecap:round}
.lupe .eye{fill:#0a1f3d;transform-origin:center;animation:lupeBlink 5.5s infinite}
.lupe .eye.r{animation-delay:.12s}
.lupe .mouth{fill:none;stroke:#0a1f3d;stroke-width:2.6;stroke-linecap:round}
.lupe .spark{fill:var(--sky-2);opacity:.9;animation:lupeSpark 3.2s ease-in-out infinite}
.lupe .spark.b{animation-delay:1.1s}
@keyframes lupeBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes lupeSpark{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.lupe.tilt-l{transform:rotate(-13deg) translateX(-6px)}
.lupe.tilt-r{transform:rotate(13deg) translateX(6px)}
@media (prefers-reduced-motion:reduce){.lupe,.lupe .eye,.lupe .spark{animation:none;transition:none}}

.lupe-intro{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.lupe-bubble{position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:20px 20px 20px 6px;padding:1rem 1.3rem;color:var(--on-navy);font-size:.98rem;max-width:34em;line-height:1.65}
.lupe-bubble strong{color:#fff}

/* card deck */
.deck-wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:3.5rem;align-items:start}
.deck-side{position:sticky;top:110px}
.deck{position:relative;height:460px;max-width:360px;margin:0 auto;touch-action:pan-y}
.swipe-card{position:absolute;inset:0;border-radius:var(--r4);overflow:hidden;background:var(--surface);box-shadow:0 30px 70px -30px rgba(2,16,38,.75);border:1px solid rgba(255,255,255,.5);cursor:grab;will-change:transform;user-select:none;display:flex;flex-direction:column}
.swipe-card:active{cursor:grabbing}
.swipe-card img{width:100%;height:62%;object-fit:cover;pointer-events:none}
.swipe-card .sc-body{padding:1.3rem 1.4rem;flex:1;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(170deg,#fff,#eef6fd)}
.swipe-card h3{font-size:1.18rem;margin-bottom:.35rem;letter-spacing:-.02em}
.swipe-card p{font-size:.88rem;color:var(--ink-2);line-height:1.6}
.swipe-card .stamp{position:absolute;top:1.4rem;font-family:var(--fd);font-weight:800;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem 1rem;border-radius:12px;border:3px solid;opacity:0;transition:opacity .15s}
.swipe-card .stamp.yes{left:1.2rem;color:#0d7a4f;border-color:#0d7a4f;transform:rotate(-12deg)}
.swipe-card .stamp.no{right:1.2rem;color:#b03434;border-color:#b03434;transform:rotate(12deg)}
.deck-controls{display:flex;gap:1rem;justify-content:center;margin-top:1.6rem}
.deck-btn{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .22s,background .22s,border-color .22s;backdrop-filter:blur(8px)}
.deck-btn:hover{transform:translateY(-3px) scale(1.05)}
.deck-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4}
.deck-btn.yes{background:linear-gradient(135deg,var(--blue),var(--sky));border-color:transparent;box-shadow:0 12px 28px -10px rgba(10,85,180,.7)}
.deck-btn.no:hover{border-color:#ff9a9a;color:#ffdcdc}
.deck-hint{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--on-navy-3);letter-spacing:.04em}

/* steps */
.mstep{display:none}
.mstep.on{display:block;animation:mIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes mIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mdots{display:flex;gap:.45rem;justify-content:center;margin-bottom:2.2rem}
.mdot{width:34px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);transition:background .3s}
.mdot.on{background:linear-gradient(90deg,var(--sky),var(--sky-2))}
.mdot.done{background:rgba(92,192,240,.55)}
.mstep h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);text-align:center;margin-bottom:.6rem;letter-spacing:-.016em}
.mstep .msub{color:var(--on-navy-2);text-align:center;max-width:40em;margin:0 auto 2.2rem;font-size:1rem;line-height:1.7}

.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:820px;margin:0 auto}
.opt{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r2);padding:1rem 1.1rem;color:var(--on-navy);cursor:pointer;text-align:left;font-family:var(--fd);font-size:.93rem;transition:.25s;line-height:1.45}
.opt:hover{background:rgba(255,255,255,.11);border-color:rgba(92,192,240,.5);transform:translateY(-2px)}
.opt.sel{background:linear-gradient(135deg,#fff,#e9f2fa);border-color:#fff;color:var(--ink);font-weight:600;box-shadow:0 14px 30px -14px rgba(2,16,38,.7)}
.opt small{display:block;font-size:.76rem;color:var(--on-navy-3);margin-top:.2rem;font-weight:400}
.opt.sel small{color:var(--ink-3)}
@media(max-width:760px){.opt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.opt-grid{grid-template-columns:1fr}}

.budget{max-width:560px;margin:0 auto;text-align:center}
.budget .bval{font-family:var(--fd);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:linear-gradient(110deg,var(--sky-2),#dbeffc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.budget input[type=range]{width:100%;margin:1.4rem 0 .6rem;accent-color:var(--sky);height:6px}
.budget .brange{display:flex;justify-content:space-between;font-size:.78rem;color:var(--on-navy-3);font-variant-numeric:tabular-nums}
.budget .curbtns{margin:1.6rem auto 0;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.budget .cur{color:var(--on-navy)}
.budget .cur.on{background:#fff;color:var(--blue)}

.mnav{display:flex;gap:.7rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.mback{background:none;border:1.5px solid rgba(255,255,255,.3);color:#fff;font-family:var(--fd);font-weight:700;font-size:.94rem;padding:.95rem 1.7rem;border-radius:999px;cursor:pointer;transition:.25s}
.mback:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* results */
.result{background:linear-gradient(168deg,#fff,#eef6fd);border:1px solid rgba(255,255,255,.6);border-radius:var(--r4);padding:1.8rem 1.8rem;box-shadow:0 30px 64px -30px rgba(2,16,38,.7);margin-bottom:1.1rem;position:relative;overflow:hidden}
.result .rank{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--fd);font-weight:800;font-size:2.6rem;line-height:1;color:rgba(10,85,180,.1);letter-spacing:-.04em}
.result h3{font-size:1.25rem;margin-bottom:.3rem;background:linear-gradient(104deg,#07203f,var(--blue) 62%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:2.5rem}
.result .rclin{font-family:var(--fd);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem}
.result p{font-size:.95rem;color:var(--ink-2);line-height:1.75}
.result .why{list-style:none;margin:1rem 0 1.2rem}
.result .why li{font-size:.87rem;color:var(--ink-2);padding-left:1.6rem;position:relative;margin-bottom:.42rem;line-height:1.6}
.result .why li::before{content:'';position:absolute;left:0;top:.42em;width:1em;height:1em;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat}
.result .rprice{display:inline-flex;align-items:baseline;gap:.45rem;font-family:var(--fd);font-weight:800;font-size:1.12rem;color:var(--blue);font-variant-numeric:tabular-nums;margin-bottom:1rem}
.result .rprice small{font-family:var(--fd);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.result .racts{display:flex;gap:.6rem;flex-wrap:wrap}
.result .racts a{font-family:var(--fd);font-weight:700;font-size:.85rem;padding:.62rem 1.2rem;border-radius:999px;transition:.25s}
.result .racts .p{background:linear-gradient(118deg,#0847a0,var(--blue) 45%,var(--sky));color:#fff}
.result .racts .p:hover{transform:translateY(-2px);color:#fff}
.result .racts .g{border:1.5px solid var(--border-2);color:var(--blue)}
.result .racts .g:hover{border-color:var(--blue);background:rgba(10,85,180,.05)}
.result .flag{margin-top:1rem;font-size:.8rem;color:#b03434;background:rgba(200,60,60,.08);border-radius:10px;padding:.6rem .8rem;line-height:1.55}
@media(max-width:1024px){.deck-wrap{grid-template-columns:1fr;gap:2.4rem}.deck-side{position:static}}
@media(max-width:1120px){.page-hero.lupe-hero{padding:9rem var(--gut) 3.6rem}}

/* ── featured clinic profiles ────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4rem;align-items:start}
.sticky-card{position:sticky;top:120px}
.panel.pad{padding:2.1rem 2rem;border-radius:var(--r3)}
.panel.pad h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:1rem}
table.kv{width:100%;border-collapse:collapse;font-size:.9rem}
table.kv th{text-align:left;font-family:var(--fd);font-weight:600;color:var(--ink-3);white-space:nowrap;padding:.72rem 1rem .72rem 0;vertical-align:top;font-size:.79rem;letter-spacing:.04em;text-transform:uppercase}
table.kv td{padding:.72rem 0;color:var(--ink);border-bottom:1px solid var(--border);word-break:break-word}
table.kv tr:last-child td,table.kv tr:last-child th{border-bottom:none}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.tag-list li{font-size:.78rem;padding:.34rem .78rem;border-radius:999px;background:var(--surface-2);color:var(--ink-2);line-height:1.4}
.vlist{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1.35rem}
.vlist li{display:grid;grid-template-columns:26px 1fr;gap:1rem;align-items:start}
.vlist .ic{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.vlist .ic svg{width:14px;height:14px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vlist .ic.ok{background:linear-gradient(140deg,var(--blue),var(--sky))}
.vlist .ic.ok svg{stroke:#fff}
.vlist .ic.pend{background:var(--surface-2);border:1px solid var(--border-2)}
.vlist .ic.pend svg{stroke:var(--ink-3);stroke-width:2;fill:none}
.vlist strong{display:block;font-family:var(--fd);font-size:1.02rem;font-weight:700;letter-spacing:-.012em;margin-bottom:.3rem}
.vlist p{font-size:.93rem;color:var(--ink-2);line-height:1.72;margin:0;max-width:36em}
.navy .vlist strong{color:#fff}
.navy .vlist p{color:var(--on-navy)}
.badges.three{grid-template-columns:repeat(3,1fr)}
.qlist{counter-reset:q;list-style:none;padding:2.2rem 2.3rem;display:grid;gap:1.5rem;margin:0}
.qlist li{counter-increment:q;display:grid;grid-template-columns:34px 1fr;gap:1.1rem;align-items:start;font-size:1.02rem;color:var(--ink);line-height:1.65}
.qlist li::before{content:counter(q);font-family:var(--fd);font-size:.76rem;font-weight:700;letter-spacing:.04em;color:#fff;width:26px;height:26px;border-radius:9px;background:linear-gradient(140deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;margin-top:.18rem}
.lead-sm{font-size:1rem;color:var(--ink-2);line-height:1.8;max-width:46em;margin-top:.6rem}
.navy .lead-sm{color:var(--on-navy)}
.disclosure{font-size:.88rem;line-height:1.8;color:var(--ink-3);max-width:60em;padding:1.5rem 1.7rem;border-radius:var(--r3);background:var(--surface-2);border:1px solid var(--border)}
.disclosure strong{color:var(--ink-2)}
.chips.light a{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.chips.light a:hover{background:#fff;color:var(--blue)}
.clinic-hero .chips{margin-top:1.8rem}
@media(max-width:900px){
  .two-col{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .sticky-card{position:static}
  .badges.three{grid-template-columns:1fr}
}
.sub-feat>a{position:relative}
.sub-feat>a::after{content:'NEW';position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-size:.58rem;font-weight:700;letter-spacing:.12em;padding:.16rem .42rem;border-radius:5px;background:linear-gradient(130deg,var(--blue),var(--sky));color:#fff}

/* ── category cards with photography ─────────────────────────────────── */
.cat-img{margin:0 -1.8rem 1.5rem;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s ease;filter:saturate(.92)}
.cat:hover .cat-img img{transform:scale(1.055);filter:saturate(1.05)}
.cat .cat-top{margin-top:0}

/* ── founder portraits ───────────────────────────────────────────────── */
.signer img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 50%;display:block;margin-bottom:1rem;border:3px solid var(--surface);box-shadow:0 10px 26px -10px rgba(6,35,74,.45)}
@media(max-width:700px){.signers{grid-template-columns:1fr;gap:2rem}}
.g-grid.three{grid-template-columns:repeat(3,1fr)}
.g-grid.three .gc-img{aspect-ratio:4/3}
@media(max-width:900px){.g-grid.three{grid-template-columns:1fr}}

/* ── no horizontal scroll, ever ──────────────────────────────────────── */
html{overflow-x:hidden}
.art-wrap>*,.two-col>*,.wrap>*{min-width:0}
.prose{min-width:0;max-width:100%}
.prose pre,.prose code{overflow-x:auto;max-width:100%}
.prose img{max-width:100%;height:auto}
.tablewrap{max-width:100%}
table.kv{table-layout:fixed;width:100%}
table.kv th{width:38%;white-space:normal}
@media(max-width:480px){
  table.kv th{width:42%;font-size:.72rem}
  table.kv td{font-size:.86rem}
}

/* Form controls and menu items follow the chrome, not the prose. */
input,select,textarea,button,.hero-search *,.dd a,.mob a,.f-col a,.crumb,.tag,.pager a{font-family:var(--fd)}

/* ── body type, tuned for Lora ───────────────────────────────────────── */
/* Lora is a serif with a modest x-height, so it reads a size smaller than it
   is set and needs the opposite treatment to a grotesque: a touch more size,
   a touch more leading, and a short measure so the eye finds the next line. */
.s-desc{line-height:1.74}
.hero-sub{line-height:1.7}
.cat p{font-size:.95rem;line-height:1.72}
.badge p{line-height:1.72}
.checklist li{line-height:1.76}
.vlist p{line-height:1.72}
.prose p{line-height:1.8;max-width:62ch}
.lead,.lead-sm{line-height:1.72}
.signer .role,.loc .towns,.g-card p{line-height:1.68}
/* a touch more ink in the secondary text: the old slate was washing out */
:root{--ink-2:#2f4a66;--ink-3:#4c6684}
/* banner crop on the category photography: more editorial, less scroll */
.cat-img{aspect-ratio:16/8}
.toc-h{font-family:var(--fd);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;font-weight:700}

/* ── keyboard focus on form fields ───────────────────────────────────── */
/* Removing the outline without replacing it leaves keyboard users with no
   idea where they are. A colour change alone does not satisfy WCAG 2.4.7. */
.search select:focus-visible,.search input:focus-visible{
  outline:3px solid var(--sky-2);outline-offset:2px;border-radius:8px}
.pop-form input:focus-visible{
  outline:3px solid var(--sky-2);outline-offset:2px;border-color:var(--sky)}
.search:focus-within{box-shadow:0 0 0 3px rgba(92,192,240,.32),0 26px 58px -26px rgba(2,16,38,.5)}

/* ── concern comparison table ────────────────────────────────────────── */
.tsub{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.2rem;font-style:italic}
#pricetable td:first-child{font-weight:600}
#pricetable td .tsub{font-weight:400}
.statline{background:linear-gradient(120deg,rgba(10,85,180,.06),rgba(31,155,222,.09));border-left:3px solid var(--sky);padding:1.05rem 1.3rem;border-radius:0 var(--r2) var(--r2) 0;font-size:.95rem;line-height:1.66;margin:1.6rem 0}
.statline strong{font-family:var(--fb);font-weight:700;color:var(--blue);font-size:1.12rem}

/* ── price blocks sit in the same measure as the prose around them ───── */
/* The table and the currency switcher are siblings of .prose, not children,
   so without this they break out to the full wrap width and the left edges
   stop lining up. */
.section .wrap > .curswitch,
.section .wrap > .tablewrap{max-width:820px;margin-left:auto;margin-right:auto}
.section .wrap > .curswitch{justify-content:flex-start;margin-bottom:1.1rem}
.section .wrap > .tablewrap + .prose{margin-top:2.4rem}

/* ── search result card on /clinics/ ─────────────────────────────────── */
.searchcard{padding:2.6rem 2.4rem;border-radius:var(--r3)}
.searchcard h2{margin:.4rem 0 .9rem}
.searchcard h2:focus{outline:none}
.searchlinks{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.6rem}
.searchlinks a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-radius:var(--r2);background:var(--surface);border:1px solid var(--border);
  color:var(--ink);font-weight:600;font-size:.97rem;transition:.24s}
.searchlinks a:hover{border-color:var(--sky);color:var(--blue);transform:translateX(3px)}
.searchlinks .arr{color:var(--sky);flex:0 0 auto}
@media(max-width:600px){.searchcard{padding:1.9rem 1.4rem}}

/* ── Blue blocks ──────────────────────────────────────────────────────────
   The prices table, the three steps and the nine category cards all sat on
   the same near-white and read as one long slab. Each becomes a navy block
   instead, so the page alternates light ground and dark block the whole way
   down. Reading text, icons and pills flip to their light variants. */

/* The footer mark carried width="387" as an HTML attribute, so height:40px
   squashed the face into a 387x40 scribble. It needs width:auto, and the
   name beside it, the same lockup the header uses. */
.fbrand img{height:42px;width:auto}
.flock{display:flex;align-items:center;gap:.7rem;margin-bottom:1.15rem}
.flock .wordmark{font-family:var(--fd);font-weight:700;font-size:1.16rem;
  letter-spacing:-.02em;color:#fff;white-space:nowrap}
.flock .wordmark em{font-style:normal;color:var(--sky-2)}

/* the three steps */
.step{background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 62%,#0d3f7d 100%);
  border-color:rgba(255,255,255,.1);box-shadow:0 22px 46px -24px rgba(6,35,74,.42)}
.step::before{color:var(--sky-2)}
.step h3{color:#fff}
.step p{color:var(--on-navy)}

/* the nine categories */
.cat{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 68%,#0d3f7d 100%);
  border-color:rgba(255,255,255,.09)}
.cat h3 a{color:#fff}
.cat h3 a:hover{color:var(--sky-2)}
.cat p{color:var(--on-navy)}
.cat .count{color:var(--sky-2)}
.cat-ico{background:rgba(255,255,255,.1)}
.cat-ico svg{stroke:var(--sky-2)}
.cat:hover{border-color:rgba(255,255,255,.24);box-shadow:0 30px 56px -22px rgba(6,35,74,.5)}
.cat:hover .cat-ico{background:linear-gradient(135deg,var(--blue),var(--sky))}
.cat .chips a{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.cat .chips a:hover{background:#fff;color:var(--blue);border-color:#fff}

/* the currency switch, once the prices block sits on navy */
.navy .curlabel{color:var(--on-navy-2)}
.navy .curbtns{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.navy .cur{color:var(--on-navy)}
.navy .cur:hover{color:#fff}
.navy .cur.on{background:#fff;color:var(--blue)}

/* ── The header reads what is behind it ───────────────────────────────────
   Now that the page alternates light ground and navy blocks, a header that
   only knows "scrolled or not" ends up dark-on-dark. site.js measures where
   the dark bands are and sets .on-dark while the bar is over one. */
.nav.scrolled.on-dark{background:rgba(6,35,74,.78);border-color:rgba(255,255,255,.2);
  box-shadow:0 14px 44px -16px rgba(2,16,38,.55)}
.nav.scrolled.on-dark .l-white{display:block}
.nav.scrolled.on-dark .l-dark{display:none}
.nav.scrolled.on-dark .wordmark{color:#fff}
.nav.scrolled.on-dark .wordmark b{color:var(--sky-2)}
.nav.scrolled.on-dark .nav-links>li>a{color:rgba(255,255,255,.92)}
.nav.scrolled.on-dark .nav-links>li>a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav.scrolled.on-dark .nav-lang{border-color:rgba(255,255,255,.3);color:#fff}
.nav.scrolled.on-dark .nav-burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.nav.scrolled.on-dark .nav-burger span{background:#fff}

/* ── Paper, not printer paper ─────────────────────────────────────────────
   --surface was #fff, so every raised panel was a flat sheet. It picks up a
   trace of the brand blue instead, and the grain over the whole page comes
   up enough to be felt rather than seen. */
:root{--surface:#fbfcff}
.grain{opacity:.05}
body::before{opacity:.72}

/* ══════════════════════════════════════════════════════════════════════════
   LUPE
   She is her own thing in the header, set apart from the word menu, and the
   panel she opens is one screen: what people search for most, what we just
   published, two ways out. It arrives as a lens — a circle growing out of
   the button until it fills the screen — and leaves the same way.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── her button in the header ───────────────────────────────────────────
   It was a blue disc: fine on a white bar, nearly invisible on a navy one. It
   now inverts with the bar — solid blue with a white glass over light, solid
   white with a blue glass over dark — so it is the highest-contrast thing on
   the header in both states. And it says what it is, rather than hoping you
   press a mystery icon.

   She sits outside .nav-links on purpose: below 1120px that list collapses
   into the burger sheet, and she is the one thing on this site nobody else
   has. On a phone she loses the label and stays on screen as a disc. */
.nav-lupe{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  height:52px;padding:0 1.3rem 0 .4rem;border-radius:999px;margin-left:.7rem;
  transform:translateY(3px);
  flex:0 0 auto;overflow:visible;
  font-family:var(--fd);font-weight:700;font-size:.9rem;letter-spacing:-.012em;
  background:linear-gradient(128deg,#052a60 0%,#0a55b4 52%,#1f9bde 100%);
  color:#fff;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px -10px rgba(10,85,180,.7);
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s,
             background .34s,color .34s,border-color .34s}
.nav-lupe span{position:static;left:auto;white-space:nowrap}
/* She was a 34px sticker on a 46px pill: small enough to read as an icon
   rather than a character. Now she fills the button and hangs a little below
   the bar, which is what makes her look placed rather than dropped in. */
.nav-lupe svg{width:46px;height:46px;flex:0 0 46px;overflow:visible;
  filter:drop-shadow(0 3px 7px rgba(2,16,38,.42))}

/* the glass always takes the opposite colour to the button behind it */
.nav-lupe .glass{fill:#fff}
.nav-lupe .ring{stroke:#fff}
.nav-lupe .lp-stem line{stroke:#fff}
.nav-lupe .lp-stem rect{fill:#fff}
.nav-lupe .eye{fill:#0a2a54}
.nav-lupe .mouth{stroke:#0a2a54}

.nav.scrolled.on-dark .nav-lupe{background:#fff;color:#07264c;
  border-color:transparent;box-shadow:0 10px 28px -10px rgba(0,0,0,.65)}
.nav.scrolled.on-dark .nav-lupe .glass{fill:#0b3f86}
.nav.scrolled.on-dark .nav-lupe .ring{stroke:#0b3f86}
.nav.scrolled.on-dark .nav-lupe .lp-stem line{stroke:#0b3f86}
.nav.scrolled.on-dark .nav-lupe .lp-stem rect{fill:#0b3f86}
.nav.scrolled.on-dark .nav-lupe .eye{fill:#dcefff}
.nav.scrolled.on-dark .nav-lupe .mouth{stroke:#dcefff}
.nav.scrolled.on-dark .nav-lupe .sp{fill:#0b3f86}

.nav-lupe:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(31,155,222,.9)}
.nav.scrolled.on-dark .nav-lupe:hover{box-shadow:0 16px 34px -12px rgba(0,0,0,.8)}
.nav-lupe:active{transform:translateY(0) scale(.985)}
.nav-lupe:focus-visible{outline:3px solid var(--sky-2);outline-offset:3px}

/* one slow band of light across it, so it reads as something you press */
.nav-lupe::before{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:lpGleam 6.5s cubic-bezier(.5,0,.35,1) infinite}
@keyframes lpGleam{0%,62%{left:-60%}88%,100%{left:130%}}
.nav.scrolled.on-dark .nav-lupe::before{
  background:linear-gradient(100deg,transparent,rgba(10,85,180,.18),transparent)}

/* the sparkles, each on its own clock: in step they read as a spinner */
.nav-lupe .sp{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:lpTwinkle 3.4s ease-in-out infinite}
.nav-lupe .sp.s1{animation-delay:0s}
.nav-lupe .sp.s2{animation-delay:.85s;animation-duration:4.1s}
.nav-lupe .sp.s3{animation-delay:1.7s;animation-duration:3.8s}
.nav-lupe .sp.s4{animation-delay:2.4s;animation-duration:4.6s}
@keyframes lpTwinkle{
  0%,72%,100%{opacity:0;transform:scale(.3) rotate(0deg)}
  12%{opacity:1;transform:scale(1.15) rotate(35deg)}
  34%{opacity:.55;transform:scale(.85) rotate(70deg)}
}
.nav-lupe:hover .sp{animation-duration:1.5s}
@media (prefers-reduced-motion:reduce){
  .nav-lupe .sp{opacity:.9;animation:none}
  .nav-lupe::before{display:none}
}
@media(max-width:1120px){
  .nav-lupe{width:46px;padding:0;justify-content:center;gap:0;margin-left:auto}
  .nav-lupe span{position:absolute;left:-9999px}
  .nav-burger{margin-left:.45rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   LUPE
   The one screen this site is judged on. It is not a modal with a card in it,
   it is a room: a stage on the right for the thing you are looking at, a rail
   on the left for who is asking and what you do about it. Everything else is
   material — one deep ground, one light source, hairline edges, and type that
   is allowed to be large.
   ══════════════════════════════════════════════════════════════════════════ */
.lp-lock{overflow:hidden}
.lp{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:clamp(14px,3vw,40px);
  background:
    radial-gradient(120% 100% at 14% -8%, rgba(38,124,208,.42) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 108%, rgba(18,78,150,.38) 0%, transparent 62%),
    linear-gradient(168deg,#0a2f5e 0%,#061e3f 46%,#04152e 100%);
  clip-path:circle(0px at var(--x,50%) var(--y,50%));
  transition:clip-path .62s cubic-bezier(.22,1,.36,1)}
.lp.open{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.lp[hidden]{display:none}
/* a fine grain over everything, so the ground reads as a material and not a
   flat fill. Three per cent is invisible until you take it away. */
.lp::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* and a vignette, which is what stops a dark screen looking like a dark div */
.lp::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(2,10,24,.55) 100%)}

/* ── close ──────────────────────────────────────────────────────────────── */
.lp-x{position:absolute;top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.lp-x svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.lp-x:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);transform:rotate(90deg)}
.lp-x:focus{outline:none}
.lp-x:focus-visible{outline:2px solid var(--sky-2);outline-offset:3px}

/* ── the room ───────────────────────────────────────────────────────────── */
.lp-sheet{position:relative;z-index:2;width:100%;max-width:1140px;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center}

/* ── the rail ───────────────────────────────────────────────────────────── */
.lp-aside{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lp-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:2.6rem}
.lp-face{width:54px;height:54px;flex:0 0 54px}
.lp-face .lupe{width:100%;height:100%;overflow:visible;display:block}
.lp-name{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

/* the count, set like a page number in a book */
.lp-count{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.5rem;
  font-variant-numeric:tabular-nums}
.lp-count b{font-family:var(--fd);font-size:clamp(2.6rem,5vw,3.8rem);font-weight:200;
  line-height:.85;letter-spacing:-.04em;
  background:linear-gradient(150deg,#ffffff,#9fd6f7 70%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lp-count i{font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.32)}
.lp-count em{font-style:normal;font-family:var(--fd);font-size:1rem;font-weight:500;
  color:rgba(255,255,255,.42)}

/* what she is asking, at a size that carries the screen */
.lp-say{font-family:var(--fd);font-weight:300;
  font-size:clamp(1.5rem,2.9vw,2.35rem);line-height:1.22;letter-spacing:-.025em;
  color:#fff;margin:0 0 2.6rem;max-width:17em;min-height:2.6em;
  text-wrap:balance;transition:opacity .35s ease}

/* ── the two answers ────────────────────────────────────────────────────── */
.lp-swipe{display:flex;gap:.8rem;flex-wrap:wrap}
.lp-btn{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-family:var(--fd);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  padding:1rem 1.7rem;border-radius:999px;border:1px solid transparent;
  transition:transform .34s cubic-bezier(.22,1,.36,1),background .3s,
             border-color .3s,box-shadow .34s,color .3s}
.lp-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.lp-btn.no{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.72)}
.lp-btn.no:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);
  color:#fff;transform:translateY(-2px)}
.lp-btn.no:hover svg{transform:rotate(90deg)}
.lp-btn.yes{background:linear-gradient(128deg,#ffffff 0%,#e8f4ff 100%);color:#08284f;
  box-shadow:0 14px 34px -14px rgba(150,210,255,.75),0 0 0 1px rgba(255,255,255,.35) inset}
.lp-btn.yes:hover{transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(160,215,255,.9),0 0 0 1px rgba(255,255,255,.5) inset}
.lp-btn.yes:hover svg{transform:scale(1.15)}
.lp-btn:active{transform:translateY(0) scale(.985)}
.lp-btn:focus-visible{outline:2px solid var(--sky-2);outline-offset:4px}
.lp-tip{margin:1.5rem 0 0;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.3)}
/* the controls belong to the swiping step only */
.lp:not(.picking) .lp-swipe,.lp:not(.picking) .lp-tip{display:none}
.lp:not(.picking) .lp-count{display:none}
.lp-aside{justify-content:center}

/* ── the stage ──────────────────────────────────────────────────────────── */
.lp-stage{position:relative;min-width:0;max-height:calc(100svh - 80px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.lp-step{display:none}
.lp-step.on{display:block;animation:lpIn .6s cubic-bezier(.22,1,.36,1) backwards}
@keyframes lpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── the deck ───────────────────────────────────────────────────────────── */
.lp-deck{position:relative;aspect-ratio:11/13;max-height:min(74svh,640px);
  margin-inline:auto;width:100%;max-width:480px}
.lp-card{position:absolute;inset:0;border-radius:26px;overflow:hidden;cursor:grab;
  background:#0a2547;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 80px -30px rgba(1,10,26,.85),0 2px 0 rgba(255,255,255,.08) inset;
  transform:translateY(calc(var(--i) * 13px)) scale(calc(1 - var(--i) * .045));
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,box-shadow .4s;
  touch-action:pan-y;user-select:none}
.lp-card:nth-child(1){opacity:.42}
.lp-card:nth-child(2){opacity:.7}
.lp-card.top{opacity:1;z-index:3}
.lp-card.grab{cursor:grabbing;transition:none}
.lp-img{position:absolute;inset:0}
.lp-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
/* the scrim. Without it the copy sits on a photograph and you read neither. */
.lp-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(4,18,40,.08) 0%,rgba(4,18,40,.3) 42%,
             rgba(4,18,40,.86) 72%,rgba(3,14,32,.97) 100%)}
.lp-txt{position:absolute;left:0;right:0;bottom:0;padding:2rem 2rem 1.9rem;z-index:2}
.lp-kind{font-family:var(--fd);font-size:.66rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sky-2);margin-bottom:.7rem}
.lp-card h3{font-family:var(--fd);font-weight:600;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.6rem,3.1vw,2.15rem);color:#fff;margin:0 0 .6rem;text-wrap:balance}
.lp-desc{font-size:.92rem;line-height:1.62;color:rgba(255,255,255,.76);margin:0;
  max-width:30em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.lp-price{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.16)}
.lp-price span{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.lp-price b{font-family:var(--fd);font-weight:600;font-size:1.06rem;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* the two verdicts, drawn on the card as you drag it */
.lp-stamp{position:absolute;top:1.8rem;z-index:4;opacity:0;
  font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:.55rem 1.1rem;border-radius:999px;
  border:1.5px solid currentColor;transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.lp-stamp.yes{left:1.8rem;color:#8ff0c4;transform:rotate(-11deg) scale(.9)}
.lp-stamp.no{right:1.8rem;color:#ffb3b3;transform:rotate(11deg) scale(.9)}
.lp-card.hint-y .lp-stamp.yes{opacity:1;transform:rotate(-11deg) scale(1)}
.lp-card.hint-n .lp-stamp.no{opacity:1;transform:rotate(11deg) scale(1)}
.lp-card.fly-r{transform:translateX(130%) rotate(19deg) !important;opacity:0}
.lp-card.fly-l{transform:translateX(-130%) rotate(-19deg) !important;opacity:0}

/* ── the areas ──────────────────────────────────────────────────────────── */
.lp-zones{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lp-zone{position:relative;text-align:left;cursor:pointer;padding:1.15rem 3rem 1.15rem 1.3rem;
  border-radius:18px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);color:#fff;
  animation:lpIn .5s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--n) * 45ms);
  transition:background .28s,border-color .28s,transform .34s cubic-bezier(.22,1,.36,1)}
.lp-zone b{display:block;font-family:var(--fd);font-weight:600;font-size:1.02rem;
  letter-spacing:-.015em;margin-bottom:.18rem}
.lp-zone span{display:block;font-size:.8rem;color:rgba(255,255,255,.52);line-height:1.45}
.lp-zone-go{position:absolute;right:1.1rem;top:50%;width:17px;height:17px;
  transform:translateY(-50%) translateX(-4px);opacity:0;fill:none;stroke:var(--sky-2);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .28s,transform .34s cubic-bezier(.22,1,.36,1)}
.lp-zone:hover{background:rgba(255,255,255,.11);border-color:rgba(126,211,247,.45);
  transform:translateY(-2px)}
.lp-zone:hover .lp-zone-go{opacity:1;transform:translateY(-50%) translateX(0)}
.lp-zone:focus-visible{outline:2px solid var(--sky-2);outline-offset:3px}

/* ── the answer ─────────────────────────────────────────────────────────── */
.lp-out{display:grid;gap:1rem}
.lp-res{padding:1.7rem 1.8rem 1.6rem;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 50px -28px rgba(1,10,26,.8);
  animation:lpIn .55s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--n) * 80ms)}
.lp-res-h{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  margin-bottom:.55rem}
.lp-res h3{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;
  font-size:1.24rem;color:#fff;margin:0}
.lp-price-tag,.lp-res .lp-price{all:unset}
.lp-res .lp-price{font-family:var(--fd);font-weight:600;font-size:.95rem;color:var(--sky-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-why{margin:0;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.62}

/* the clinic we can actually name */
.lp-clinic{display:block;margin:1.3rem 0 0;padding:1.15rem 1.25rem;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  transition:background .26s,border-color .26s,transform .3s cubic-bezier(.22,1,.36,1)}
.lp-clinic:hover{background:rgba(255,255,255,.12);border-color:rgba(126,211,247,.5);
  transform:translateY(-2px)}
.lp-clinic.here{background:linear-gradient(126deg,rgba(31,155,222,.26),rgba(31,155,222,.08));
  border-color:rgba(126,211,247,.42)}
.lp-clinic-k{display:block;font-family:var(--fd);font-size:.63rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky-2);margin-bottom:.5rem;
  line-height:1.5}
.lp-clinic strong{display:block;font-family:var(--fd);font-size:1.08rem;font-weight:600;
  color:#fff;letter-spacing:-.018em}
.lp-clinic-c{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.81rem;color:rgba(255,255,255,.55);margin-top:.3rem}
.lp-clinic-c .arr{transition:transform .26s ease;color:var(--sky-2)}
.lp-clinic:hover .arr{transform:translateX(4px)}

.lp-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.lp-act{font-family:var(--fd);font-weight:600;font-size:.87rem;padding:.72rem 1.3rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.86);
  transition:background .26s,color .26s,border-color .26s,transform .3s cubic-bezier(.22,1,.36,1)}
.lp-act.pri{background:linear-gradient(128deg,#ffffff,#e6f2ff);border-color:transparent;
  color:#08284f;box-shadow:0 12px 28px -14px rgba(150,210,255,.7)}
.lp-act:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);
  transform:translateY(-2px)}
.lp-act.pri:hover{background:#fff;color:#08284f;transform:translateY(-2px)}
.lp-again{display:block;margin:1.4rem auto 0;background:none;border:none;cursor:pointer;
  font-family:var(--fd);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);padding:.7rem;transition:color .26s}
.lp-again:hover{color:#fff}

/* ── one column, and the controls follow the card ───────────────────────── */
@media(max-width:960px){
  .lp{place-items:start center;padding:0}
  .lp-sheet{grid-template-columns:1fr;gap:0;max-width:560px;
    height:100svh;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  .lp-aside{order:2;padding:1.1rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,rgba(3,14,32,.96) 40%,rgba(3,14,32,0));
    position:sticky;bottom:0}
  .lp-stage{order:1;padding:4.6rem 1.4rem 1rem;max-height:none;
    display:flex;align-items:center;min-height:0}
  .lp-stage>.lp-step.on{width:100%}
  .lp-brand{position:fixed;top:1.05rem;left:1.4rem;margin:0;z-index:5}
  .lp-count{position:fixed;top:1.15rem;left:50%;transform:translateX(-50%);margin:0;z-index:5;
    align-items:baseline;gap:.35rem}
  .lp-x{width:40px;height:40px;top:1.05rem;right:1.1rem}
  .lp-x svg{width:15px;height:15px}
  .lp-count b{font-size:1.15rem;font-weight:500}
  .lp-count i{font-size:.6rem}
  .lp-count em{font-size:.78rem}
  .lp-say{font-size:1.06rem;margin:0 0 1rem;min-height:0;max-width:none;font-weight:400;
    text-align:center}
  .lp-swipe{justify-content:center;width:100%}
  .lp-btn{flex:1 1 0;justify-content:center;padding:1.05rem 1rem}
  .lp-tip{margin:.9rem 0 0;width:100%;text-align:center;font-size:.66rem}
  .lp-deck{max-height:none;aspect-ratio:4/5;max-width:none}
  .lp-zones{grid-template-columns:1fr}
  .lp-txt{padding:1.5rem 1.4rem 1.4rem}
}
@media(max-width:560px){
  .lp-card h3{font-size:1.5rem}
  .lp-desc{-webkit-line-clamp:2;font-size:.88rem}
  .lp-res{padding:1.4rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .lp,.lp-card,.lp-step.on,.lp-res,.lp-zone{transition:none;animation:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   LISTED CLINICS
   The second tier, and it has to look like a second tier. Flat cards, no blue
   hero treatment, a badge that names the marker rather than implying approval.
   Nobody should be able to glance at this and think it is the checked list.
   ══════════════════════════════════════════════════════════════════════════ */
.listed{background:var(--surface)}
.listed .s-title{font-size:clamp(1.45rem,2.7vw,2rem);margin:.35rem 0 .7rem}
.listed .lead-sm{max-width:60em;margin-bottom:2.2rem}
.lc-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem;margin:0}
.lc{background:#fff;border:1px solid var(--border);border-radius:var(--r3);
  padding:1.35rem 1.4rem 1.25rem;display:flex;flex-direction:column;
  transition:border-color .25s ease,box-shadow .25s ease}
.lc:hover{border-color:rgba(10,85,180,.24);box-shadow:0 18px 40px -24px rgba(6,35,74,.32)}
.lc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.3rem}
.lc h3{font-family:var(--fd);font-size:1.04rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.32;color:var(--ink);margin:0}
.lc-tag{flex:0 0 auto;font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.28rem .5rem;border-radius:6px;
  background:var(--surface-2);color:var(--blue);white-space:nowrap}
.lc-where{font-size:.78rem;color:var(--ink-3);margin-bottom:.7rem;text-transform:capitalize}
.lc-dot{margin:0 .4rem;opacity:.55}
.lc-line{font-size:.89rem;line-height:1.6;color:var(--ink-2);margin-bottom:.85rem}
.lc-sig,.lc-open{font-size:.775rem;line-height:1.55;color:var(--ink-3);margin-bottom:.5rem;
  padding-left:.8rem;border-left:2px solid var(--border)}
.lc-sig strong,.lc-open strong{color:var(--ink-2);font-weight:600}
.lc-sig a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.lc-open{border-left-color:rgba(214,158,46,.45);margin-bottom:1.1rem}
.lc-go{margin-top:auto;font-family:var(--fd);font-weight:600;font-size:.82rem;color:var(--blue);
  display:inline-flex;align-items:center;gap:.3rem}
.lc-go .arr{transition:transform .25s ease}
.lc:hover .lc-go .arr{transform:translateX(4px)}
.lc-foot{margin-top:1.6rem;font-size:.87rem;color:var(--ink-3)}
.lc-foot a{color:var(--blue);font-weight:600}

/* the directory's own area jump list */
.dir-nav{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:3rem}
.dir-nav a{font-family:var(--fd);font-weight:600;font-size:.85rem;padding:.55rem 1rem;
  border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink-2);
  transition:.22s;display:inline-flex;align-items:center;gap:.45rem}
.dir-nav a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.dir-nav a span{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dir-nav a:hover span{color:var(--blue)}
.dir-h{font-family:var(--fd);font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:700;
  letter-spacing:-.022em;margin:3.2rem 0 1.2rem;scroll-margin-top:110px;
  display:flex;align-items:baseline;gap:.7rem}
.dir-h:first-of-type{margin-top:0}
.dir-h span{font-size:.8rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media(max-width:560px){.lc-list{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   THE FACTS PANEL
   Was a table, and the table computed 660px inside a 461px card, so the
   address ran off the right edge of every clinic profile. A dl in a grid
   cannot overflow its column, and label above value reads better in a narrow
   sidebar than two cramped columns do.
   ══════════════════════════════════════════════════════════════════════════ */
dl.kv{margin:0;display:grid;gap:0}
.kv-row{display:grid;gap:.22rem;padding:.85rem 0;border-bottom:1px solid var(--border);min-width:0}
.kv-row:first-child{padding-top:0}
.kv-row:last-child{border-bottom:none;padding-bottom:0}
.kv-row dt{font-family:var(--fd);font-weight:700;font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.kv-row dd{margin:0;font-size:.91rem;line-height:1.6;color:var(--ink);
  overflow-wrap:anywhere;min-width:0}
.kv-row dd a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* the profile itself: it was laid out on a phone's padding */
.panel.pad{padding:2.3rem 2.1rem}
.sticky-card{min-width:0}
.sticky-card .panel{min-width:0;overflow:hidden}
.clinic-hero{background-size:cover;background-position:center 32%}
.clinic-hero .lead{max-width:44em}
.two-col{gap:5rem}
.two-col .vlist{margin-top:2rem}
.vlist li+li{margin-top:.15rem}
.badges.three{margin-top:2.4rem}
@media(max-width:1024px){.two-col{gap:3rem}}
@media(max-width:600px){.panel.pad{padding:1.7rem 1.4rem}}

/* ── Lupe's button: the magic ─────────────────────────────────────────────
   Four sparkles, each twinkling on its own clock, and a band of light that
   crosses the lens every few seconds. Movement is small and slow on purpose:
   it should catch the eye once and then stop asking for attention. */
.nav-lupe svg{width:30px;height:30px;overflow:visible}
.nav-lupe .sp{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:lpTwinkle 3.4s ease-in-out infinite}
.nav-lupe .sp.s1{animation-delay:0s}
.nav-lupe .sp.s2{animation-delay:.85s;animation-duration:4.1s}
.nav-lupe .sp.s3{animation-delay:1.7s;animation-duration:3.8s}
.nav-lupe .sp.s4{animation-delay:2.4s;animation-duration:4.6s}
@keyframes lpTwinkle{
  0%,72%,100%{opacity:0;transform:scale(.3) rotate(0deg)}
  12%{opacity:1;transform:scale(1.15) rotate(35deg)}
  34%{opacity:.55;transform:scale(.85) rotate(70deg)}
}
/* the light crossing the glass */
.nav-lupe .shine{animation:lpSweep 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes lpSweep{
  0%,62%{opacity:.55;transform:translate(0,0)}
  74%{opacity:1;transform:translate(13px,9px)}
  86%,100%{opacity:.55;transform:translate(0,0)}
}
/* a breath of white behind her, so the button glows rather than just sits */
.nav-lupe::before{content:'';position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.55),transparent 62%);
  opacity:.5;animation:lpBreathe 5.2s ease-in-out infinite;pointer-events:none}
@keyframes lpBreathe{0%,100%{opacity:.34;transform:scale(.9)}50%{opacity:.62;transform:scale(1.05)}}
.nav-lupe:hover .sp{animation-duration:1.5s}
.nav-lupe:hover .glass{filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){
  .nav-lupe .sp{opacity:.9;animation:none}
  .nav-lupe .shine,.nav-lupe::before{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN AUDIT FIXES
   Measured, not guessed: a probe walked every template at 1440 and 390 and
   reported what overflows, overlaps, cannot be read or cannot be tapped.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. the newsletter panel was laid out while hidden, so its text sat on top
      of the page's own text. display:flex was beating the hidden attribute,
      the same bug the swiper had. */
.pop-back[hidden]{display:none}

/* 2. a 330px minimum column inside a narrower container cannot fit, so the
      last card hung 24px out of the grid. min() lets it give way. */
.lc-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* 3. micro-labels under 12px. They are set in caps with wide tracking, which
      is already hard work for the eye; below 11.5px it stops being a label
      and starts being noise. */
.lc-tag{font-size:.715rem;letter-spacing:.06em}
.concern .tag{font-size:.72rem}
.chip{font-size:.72rem;letter-spacing:.1em}
.curlabel,.eeat .k,.toc .toc-h,.toc h4,.toc-h{font-size:.745rem;letter-spacing:.12em}
.kv-row dt{font-size:.72rem;letter-spacing:.09em}
.vc-rank{font-size:.68rem;letter-spacing:.1em}

/* 4. on a phone every link has to be a target, not a word. 44px is the size
      of a thumb; anything under it is a coin toss. */
@media(max-width:700px){
  .chips a,.tag-list li{min-height:44px;display:inline-flex;align-items:center;
    padding:.5rem 1rem;font-size:.86rem}
  .vc-go,.lc-go,.sub-all a,.vc h3 a{min-height:44px;display:inline-flex;align-items:center}
  .kv-row dd a{display:inline-block;padding:.35rem 0;min-height:34px}
  .searchbar select,.search select{min-height:48px}
  .lc,.vc{padding-bottom:.4rem}
}

/* ── the last of the measured defects ────────────────────────────────────
   The badge sat on one line beside the clinic name and pushed 36px out of the
   card on a phone. Names and badges are both variable length, so the row has
   to be allowed to wrap rather than assume they fit. */
.lc-top{flex-wrap:wrap;row-gap:.4rem}
.lc-tag{white-space:normal;max-width:100%}
.lc h3{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* two links either side of a bullet, stacked on a phone instead of colliding */
.lc-foot,.vc-foot{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline}
@media(max-width:560px){
  .lc-foot,.vc-foot{flex-direction:column;gap:.6rem}
  .lc-foot br,.vc-foot br{display:none}
}

/* white-on-white: the card label is white for the dark hero variant, but it
   also appeared on a white card, where it was invisible at 1.03:1 */
.gc-b .chip.light,.gc-body .chip.light{background:rgba(10,85,180,.1);color:var(--blue);
  backdrop-filter:none}

/* nothing under 12px. Caps with wide tracking is already slow to read. */
.lc-tag{font-size:.76rem}
.concern .tag,.chip{font-size:.755rem}
.curlabel,.eeat .k,.toc .toc-h,.toc h4,.toc-h,.kv-row dt,.vc-rank{font-size:.765rem}

/* inline links in body copy need room to sit side by side on a narrow screen */
@media(max-width:700px){.prose a,.lead-sm a{display:inline;line-height:1.9}}

/* footer links were 18px tall on a phone. A link in a list is a target. */
@media(max-width:700px){
  .footer a{display:inline-flex;align-items:center;min-height:40px;
    padding:.15rem 0;font-size:.92rem}
  .footer li{margin-bottom:.1rem}
  .footer p a{min-height:0;display:inline}
  .chips a,.tag-list li{min-height:44px}
}
.lp:focus{outline:none}

/* the step, named. Three steps was always the promise; this is where it is
   kept. It also gives the rail something to hold on the last screen, which
   otherwise had a logo and one sentence in a very large empty room. */
.lp-crumb{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
  font-family:var(--fd);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase}
.lp-crumb i{font-style:normal;color:rgba(255,255,255,.34);white-space:nowrap}
.lp-crumb i b{color:var(--sky-2);font-weight:700}
.lp-crumb span{position:relative;padding-left:.9rem;color:rgba(255,255,255,.62);font-weight:600}
.lp-crumb span::before{content:'';position:absolute;left:0;top:50%;width:5px;height:1px;
  background:rgba(255,255,255,.3)}
@media(max-width:960px){.lp-crumb{display:none}}

/* ── the phone sheet needs the bar above it, not under it ────────────────
   The menu now covers the screen, so the header has to stay on top of it and
   go solid while it is open: a translucent pill over a white sheet is a smear. */
@media(max-width:1120px){
  .nav{z-index:140}
  /* The bar carries backdrop-filter and a translateX, and either of those
     makes it the containing block for a position:fixed child. That is why the
     full-screen sheet was 100px tall: inset:0 was resolving against the pill,
     not the window. While the menu is open the bar drops both and becomes a
     plain solid header across the top, which is what a full sheet wants. */
  .nav:has(#navlinks.open){top:0;left:0;right:0;width:100%;transform:none;
    border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    background:#fff;border-color:transparent;border-bottom:1px solid var(--border);
    box-shadow:none;
    padding:.62rem 1rem .62rem 1.15rem;
    padding-top:calc(.62rem + env(safe-area-inset-top))}
  .nav:has(#navlinks.open) .l-white{display:none}
  .nav:has(#navlinks.open) .l-dark{display:block}
  .nav:has(#navlinks.open) .wordmark{color:var(--ink)}
  .nav:has(#navlinks.open) .wordmark b{color:var(--blue)}
  .nav:has(#navlinks.open) .nav-burger{background:var(--surface-2);border-color:var(--border)}
  .nav:has(#navlinks.open) .nav-burger span{background:var(--ink)}
  body:has(#navlinks.open){overflow:hidden}
}

/* a listed clinic is not a checked one, and Lupe has to show the difference */
.lp-clinic.listed{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
  border-left:2px solid rgba(214,170,90,.55)}
.lp-clinic.listed .lp-clinic-k{color:#e3c58a}
.lp-clinic.listed:hover{border-color:rgba(255,255,255,.3);
  border-left-color:rgba(214,170,90,.9)}

/* ── the last eight, from the measured audit ─────────────────────────────
   1. the parallax image is deliberately wider than its frame, so the frame
      has to clip it rather than let it hang over the page edge */
/* picture is inline by default, so the image inside it sized to its own
   intrinsic ratio and hung 7px out of each side of the band. */
.fbg{overflow:hidden}
.fbg picture{display:block;width:100%;height:100%;overflow:hidden}
.fbg picture img{width:100%;height:100%;object-fit:cover;display:block}

/* 2. line-height 1.9 on inline links made two on adjacent lines overlap their
      boxes. Links in body copy take the paragraph's leading, like any word. */
@media(max-width:700px){.prose a,.lead-sm a{display:inline;line-height:inherit}}

/* 3. links that are a whole heading, or a whole table cell, are targets even
      though they sit inside text. They were 19 to 23px tall on a phone. */
@media(max-width:700px){
  /* block, not inline-flex: a flex box will not wrap a two-word title, so
     "IPL hair removal" was squeezed to 25px wide */
  .cat-top h3 a,.g-card h3 a,.loc h3 a,.card h3 a,article h3 > a{
    display:block;min-height:44px;padding:.4rem 0;align-content:center}
  /* a cell link is the whole cell: a two-letter one like "IPL" was 26px wide */
  table td a,table th a{display:flex;align-items:center;min-height:42px;padding:.2rem 0}
}

/* ══════════════════════════════════════════════════════════════════════════
   LUPE, THE PERFORMANCE
   Everything below is motion. None of it changes what she tells you; all of
   it changes whether the screen feels built or assembled. Every rule here is
   switched off under prefers-reduced-motion at the end.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the entrance: the room arrives before its contents ─────────────────── */
.lp .lp-brand,.lp .lp-crumb,.lp .lp-count,.lp .lp-say,.lp .lp-swipe,.lp .lp-tip{
  opacity:0;transform:translateY(18px)}
.lp.open .lp-brand,.lp.open .lp-crumb,.lp.open .lp-count,
.lp.open .lp-say,.lp.open .lp-swipe,.lp.open .lp-tip{
  animation:lpRise .72s cubic-bezier(.16,1,.3,1) forwards}
.lp.open .lp-brand{animation-delay:.16s}
.lp.open .lp-crumb{animation-delay:.24s}
.lp.open .lp-count{animation-delay:.30s}
.lp.open .lp-say  {animation-delay:.36s}
.lp.open .lp-swipe{animation-delay:.44s}
.lp.open .lp-tip  {animation-delay:.52s}
@keyframes lpRise{to{opacity:1;transform:none}}
.lp .lp-stage{opacity:0;transform:scale(.94) translateY(22px)}
.lp.open .lp-stage{animation:lpStage .85s cubic-bezier(.16,1,.3,1) .2s forwards}
@keyframes lpStage{to{opacity:1;transform:none}}

/* ── the card as an object ──────────────────────────────────────────────── */
.lp-deck{perspective:1400px}
.lp-card{transform-style:preserve-3d;
  transform:translateY(calc(var(--i) * 13px)) scale(calc(1 - var(--i) * .045))
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .4s ease,box-shadow .4s}
.lp-card.top{transition:transform .18s ease-out,opacity .4s ease,box-shadow .4s}
/* the specular highlight, following the pointer across the glass */
.lp-card.top::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;opacity:.5;mix-blend-mode:soft-light;
  background:radial-gradient(48% 38% at var(--gx,50%) var(--gy,0%),
             rgba(255,255,255,.85),transparent 70%);
  transition:opacity .3s}
.lp-card.grab::after{opacity:.22}
/* a hairline of light on the top edge, which is what makes an edge look real */
.lp-card::before{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}

/* the card leaving: it should look thrown, not deleted */
.lp-card.fly-r,.lp-card.fly-l{transition:transform .48s cubic-bezier(.3,0,.2,1),opacity .4s ease}
.lp-card.fly-r{transform:translateX(135%) translateY(-4%) rotate(22deg) !important}
.lp-card.fly-l{transform:translateX(-135%) translateY(-4%) rotate(-22deg) !important}

/* ── the yes ────────────────────────────────────────────────────────────── */
.lp.flash::before{animation:lpFlash .7s cubic-bezier(.22,1,.36,1)}
@keyframes lpFlash{
  0%{background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(2,10,24,.55) 100%)}
  22%{background:radial-gradient(120% 120% at 62% 50%,rgba(140,205,255,.3) 0%,transparent 55%)}
  100%{background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(2,10,24,.55) 100%)}
}

/* ── she reacts ─────────────────────────────────────────────────────────── */
.lp-face .lupe{transition:transform .42s cubic-bezier(.22,1,.36,1)}
.lp-face .lupe.yes{transform:translateY(-5px) rotate(-9deg) scale(1.1)}
.lp-face .lupe.no{transform:translateY(2px) rotate(7deg) scale(.94)}
.lp-face .lupe .spark{transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1)}
.lp-face .lupe.yes .spark{opacity:1;transform:scale(1.5)}
.lp-face .lupe.no .spark{opacity:.15}
.lp-face .lupe.blink .eye{transform:scaleY(.12);transform-origin:center;
  transform-box:fill-box;transition:transform .09s}
.lp-face .lupe .eye{transition:transform .12s}
.lp-face .lupe .halo{animation:lpHalo 5s ease-in-out infinite}
@keyframes lpHalo{0%,100%{opacity:.75;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}
.lp-face .lupe .halo{transform-box:fill-box;transform-origin:center}

/* ── the light in the room moves with the step ──────────────────────────── */
.lp{transition:clip-path .62s cubic-bezier(.22,1,.36,1),background-position 1.2s ease}
.lp[data-step="1"]{background-position:22% 0,78% 100%,0 0}
.lp[data-step="2"]{background-position:40% 10%,60% 90%,0 0}

/* ── the answer lands rather than appears ───────────────────────────────── */
.lp-res{position:relative;overflow:hidden}
.lp-res::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--sky-2),transparent);
  transform-origin:left;animation:lpDraw .9s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--n) * 80ms + .25s)}
@keyframes lpDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lp-clinic{animation:lpRise .7s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--n) * 80ms + .34s)}

@media (prefers-reduced-motion:reduce){
  .lp .lp-brand,.lp .lp-crumb,.lp .lp-count,.lp .lp-say,.lp .lp-swipe,.lp .lp-tip,
  .lp .lp-stage,.lp-clinic,.lp-res::before{opacity:1;transform:none;animation:none}
  .lp-card,.lp-card.top,.lp-face .lupe,.lp-face .lupe .halo{transition:none;animation:none}
  .lp-card.top::after,.lp.flash::before{display:none}
}

/* a grid item defaults to min-width:auto, so a long figure cannot shrink and
   pushes out of its column. On a phone the stats were 11px over. */
.statgrid>*{min-width:0}
.stat strong,.stat b,.stat [data-count]{overflow-wrap:anywhere}

/* ── rotating word in the hero H1 ─────────────────────────────────────── */
.hero h1 em.rot{display:inline-block;text-align:left;transition:opacity .34s ease,transform .34s ease;will-change:opacity,transform}
.hero h1 em.rot.out{opacity:0;transform:translateY(-.24em)}
@media (prefers-reduced-motion:reduce){.hero h1 em.rot{transition:none}}

/* ── five areas: the front door to treatments ─────────────────────────── */
.areas{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.area{position:relative;display:block;border-radius:var(--r3);overflow:hidden;background:var(--navy);
  box-shadow:0 2px 4px rgba(6,35,74,.06),0 18px 44px -20px rgba(6,35,74,.34);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease;isolation:isolate}
.area:hover,.area:focus-visible{transform:translateY(-7px);box-shadow:0 4px 8px rgba(6,35,74,.08),0 34px 66px -24px rgba(6,35,74,.46)}
.area-img{position:absolute;inset:0;z-index:0}
.area-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.area:hover .area-img img{transform:scale(1.055)}
/* Two layers, and both are needed. The stock images run light at the bottom as
   often as dark, so a single soft gradient left white text on a pale shoulder
   or a sunlit sky. The flat wash guarantees a floor; the gradient does the
   rest under the copy. */
.area::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(3,16,36,.95) 0%,rgba(3,16,36,.90) 30%,rgba(3,16,36,.68) 48%,
                    rgba(3,16,36,.30) 68%,rgba(3,16,36,.06) 88%,rgba(3,16,36,0) 100%),
    linear-gradient(rgba(3,16,36,.16),rgba(3,16,36,.16))}
.area-txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(320px,29vw,420px);padding:1.5rem 1.4rem 1.35rem}
.area-txt h3{font-size:clamp(1.3rem,1.8vw,1.6rem);color:#fff;margin:0 0 .3rem;letter-spacing:-.018em}
.area-txt p{font-size:.88rem;line-height:1.55;color:var(--on-navy-2);margin:0 0 .85rem}
.area-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.9rem}
.area-chips span{font-family:var(--fd);font-size:.765rem;font-weight:600;letter-spacing:.01em;color:var(--on-navy);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.2rem .55rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.area-go{font-family:var(--fd);font-size:.8rem;font-weight:700;letter-spacing:.02em;color:#fff;
  display:inline-flex;align-items:center;gap:.4rem}
.area-go i{font-style:normal;transition:transform .3s ease;display:inline-block}
.area:hover .area-go i{transform:translateX(4px)}
@media (max-width:1100px){
  .areas{grid-template-columns:repeat(3,1fr)}
  .area:nth-child(4),.area:nth-child(5){grid-column:span 1}
}
@media (max-width:760px){
  .areas{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .area-txt{min-height:248px;padding:1.1rem 1rem 1rem}
  .area-txt p{display:none}
  .area-chips{display:none}
}
@media (max-width:420px){.areas{grid-template-columns:1fr}.area-txt{min-height:210px}.area-txt p{display:block}}

/* ── treatment cards inside an area page ──────────────────────────────── */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.tgrid>*{min-width:0}
.tcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.35rem 1.4rem 1.2rem;text-decoration:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.tcard:hover{border-color:var(--border-2);transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(6,35,74,.32)}
.tcard-k{font-family:var(--fd);font-size:.765rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.55rem}
.tcard h3{font-size:1.14rem;margin:0 0 .45rem;color:var(--ink);letter-spacing:-.016em}
.tcard p{font-size:.88rem;line-height:1.6;color:var(--ink-2);margin:0 0 1rem;flex:1}
.tcard-p{font-family:var(--fd);font-size:.86rem;font-weight:700;color:var(--blue)}

/* ── price comparison: the three headline cards ───────────────────────── */
.pricehero{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 auto 2.4rem;max-width:960px}
.ph-card{align-self:start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r2);
  padding:1.5rem 1.4rem;text-align:left;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ph-k{display:block;font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-navy-3);margin-bottom:.6rem}
.ph-n{display:block;font-family:var(--fd);font-size:clamp(2.1rem,4vw,2.9rem);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:#fff;margin-bottom:.6rem}
.ph-n span{font-size:.44em;color:var(--on-navy-3);font-weight:600}
.ph-l{display:block;font-size:.86rem;line-height:1.6;color:var(--on-navy-2)}
.ph-l em{font-style:normal;color:var(--on-navy-3)}
@media (max-width:820px){.pricehero{grid-template-columns:1fr;gap:.7rem}.ph-card{padding:1.15rem 1.2rem}
  .ph-n{font-size:2rem;margin-bottom:.35rem}}

/* The five-column comparison needs the full measure, unlike the prose tables
   the 820px cap above was written for. */
#prices .tablewrap,#prices .curswitch{max-width:1040px}
#pricetable tbody th{padding:.95rem 1.2rem;border-top:1px solid var(--border);text-align:left;
  font-weight:600;color:var(--ink);vertical-align:top}
#pricetable tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border-2)}
#pricetable tbody th a:hover{color:var(--blue);border-bottom-color:var(--blue)}

.pm{color:var(--ink-3);text-decoration:none;cursor:help;font-weight:700;margin-left:.16rem;font-size:.9em}
.pfoot{max-width:1040px;margin:1.5rem auto 0;font-size:.84rem;line-height:1.7;color:var(--on-navy-3)}
.pfoot p+p{margin-top:.7rem}
.pfoot b{color:var(--on-navy-2)}
.pes{font-weight:700!important;color:var(--ink)!important}


/* ── the chat button that follows you down the page ───────────────────── */
/* Sits above the Lupe launcher's z-index band but below the nav and any open
   dialog, so it never covers the menu or traps a modal underneath it. */
.chatfab{position:fixed;right:1.15rem;bottom:1.15rem;z-index:96;display:inline-flex;align-items:center;gap:.7rem;
  padding:.62rem .95rem .62rem .62rem;border-radius:999px;text-decoration:none;
  background:linear-gradient(126deg,#0b7a4a 0%,#12a163 52%,#1cbd76 100%);color:#fff;
  box-shadow:0 4px 10px rgba(6,35,74,.18),0 16px 36px -12px rgba(9,110,68,.62);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.chatfab:hover,.chatfab:focus-visible{transform:translateY(-3px);color:#fff;
  box-shadow:0 6px 14px rgba(6,35,74,.2),0 24px 50px -14px rgba(9,110,68,.72)}
.chatfab-ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26)}
.chatfab-ic svg{width:21px;height:21px;display:block}
.chatfab-tx{display:flex;flex-direction:column;line-height:1.2;padding-right:.25rem;
  max-width:14rem;overflow:hidden;white-space:nowrap;
  transition:max-width .34s cubic-bezier(.2,.7,.3,1),opacity .22s ease,padding .34s ease}
.chatfab.tuck .chatfab-tx{max-width:0;opacity:0;padding-right:0}
.chatfab.tuck{padding:.62rem;gap:0}
.chatfab.tuck:hover .chatfab-tx,.chatfab.tuck:focus-visible .chatfab-tx{max-width:14rem;opacity:1;padding-right:.25rem}
.chatfab.tuck:hover,.chatfab.tuck:focus-visible{padding:.62rem .95rem .62rem .62rem;gap:.7rem}
.chatfab-tx b{font-family:var(--fd);font-size:.9rem;font-weight:700;letter-spacing:-.005em}
.chatfab-tx i{font-style:normal;font-size:.72rem;opacity:.82;margin-top:.1rem}
@media (max-width:760px){
  .chatfab{right:.8rem;bottom:.8rem;padding:.55rem;gap:0}
  .chatfab-tx{display:none}
  .chatfab-ic{width:42px;height:42px}
}
@media print{.chatfab{display:none}}

/* ── /enquiry/ ────────────────────────────────────────────────────────── */
.ef-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3rem;align-items:start;max-width:1060px;margin:0 auto}
.ef-side h2{font-size:1.3rem;margin:0 0 1.2rem;letter-spacing:-.016em}
.ef-steps{list-style:none;margin:0 0 1.6rem;padding:0;counter-reset:s}
.ef-steps li{counter-increment:s;position:relative;padding:0 0 1.25rem 2.7rem}
.ef-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:1.85rem;height:1.85rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--fd);font-size:.8rem;font-weight:700;
  background:var(--surface-2);color:var(--blue);border:1px solid var(--border)}
.ef-steps b{display:block;font-family:var(--fd);font-size:.97rem;color:var(--ink);margin-bottom:.2rem}
.ef-steps span{display:block;font-size:.88rem;line-height:1.65;color:var(--ink-2)}
.ef-note{font-size:.87rem;line-height:1.7;color:var(--ink-2);padding-top:1.2rem;border-top:1px solid var(--border)}

.efform{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:2rem;
  box-shadow:0 22px 50px -26px rgba(6,35,74,.22)}
.ef-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ef-f{margin-bottom:1.15rem;min-width:0}
.ef-f label,.ef-fs legend{display:block;font-family:var(--fd);font-size:.83rem;font-weight:700;
  color:var(--ink);margin-bottom:.42rem;letter-spacing:-.005em}
.ef-opt{font-weight:400;color:var(--ink-3);letter-spacing:0}
.ef-f input,.ef-f select,.ef-f textarea{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:.72rem .85rem;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.ef-f textarea{resize:vertical;min-height:5.2rem;line-height:1.65}
.ef-f select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337536f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:16px}
.ef-f input:focus,.ef-f select:focus,.ef-f textarea:focus{outline:none;background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,85,180,.14)}
.ef-f.bad input,.ef-f.bad select,.ef-f.bad textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.ef-fs{border:0;padding:0;margin:0 0 1.15rem;min-width:0}
.ef-radios{display:flex;flex-wrap:wrap;gap:.5rem}
/* The input covers the whole pill rather than sitting inside it, so the hit
   target is the label you can see, not a 15px dot in the corner of it. The
   dot itself is drawn by the span. */
.ef-radio{position:relative;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;
  color:var(--ink-2);background:var(--bg);border:1.5px solid var(--border);border-radius:999px;
  padding:.5rem .95rem;min-height:44px;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.ef-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ef-radio span{display:inline-flex;align-items:center;gap:.5rem}
.ef-radio span::before{content:"";width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  border:1.5px solid var(--border-2);background:var(--surface);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.ef-radio input:checked+span::before{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3.5px #fff}
.ef-radio:has(input:checked){border-color:var(--blue);color:var(--blue);background:rgba(10,85,180,.05)}
.ef-radio:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.ef-priv{font-size:.8rem;line-height:1.65;color:var(--ink-3);margin:.4rem 0 1.4rem}
.ef-go{width:100%;justify-content:center}
.ef-sent{margin:1rem 0 0;font-size:.88rem;line-height:1.65;padding:.8rem 1rem;border-radius:var(--r)}
.ef-sent.ok{background:rgba(16,140,90,.1);color:#0d6b47;border:1px solid rgba(16,140,90,.24)}
.ef-sent.bad{background:rgba(192,57,43,.08);color:#a5311f;border:1px solid rgba(192,57,43,.22)}
@media (max-width:960px){.ef-wrap{grid-template-columns:1fr;gap:2.2rem}.ef-side{order:2}}
@media (max-width:560px){.ef-row{grid-template-columns:1fr;gap:0}.efform{padding:1.4rem 1.2rem}}
/* A 15px circle is not a thumb target. The label is the control; on a narrow
   screen it takes the full 44px, and the dot inside grows with it. */
@media (max-width:760px){.ef-radios{display:grid;grid-template-columns:1fr}}
.searchcta{margin:1.4rem 0 1.6rem}
.searchor{font-family:var(--fd);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .9rem}


/* ── conversion furniture on the inner pages ──────────────────────────── */
/* The home page had a search, a matcher and a price table. Every other page
   ended on a link to a guide. These three blocks are what the inner pages
   were missing: a way to act in the hero, a way to act halfway down, and a
   card that stays on screen while you read. */

.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.9rem}
.hero-cta .btn{box-shadow:0 10px 30px -10px rgba(2,16,38,.6)}
.hero-cta .btn-light{background:rgba(8,26,54,.5);color:#fff;border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 24px -10px rgba(2,16,38,.7)}
.hero-cta .btn-light:hover{background:rgba(8,26,54,.72);border-color:#fff;color:#fff}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fd);font-size:.8rem;
  font-weight:600;color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.34rem .8rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-meta b{font-weight:700;color:#fff}
@media (max-width:640px){.hero-cta{gap:.55rem}.hero-cta .btn{width:100%;justify-content:center}}

/* the band that breaks up a long page */
.midcta{position:relative;overflow:hidden;border-radius:var(--r3);padding:2.4rem 2.2rem;margin:3rem 0;
  background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 52%,var(--navy-3) 100%);isolation:isolate}
.midcta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,var(--glow),transparent 70%);top:-190px;right:-120px}
.midcta h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.65rem);margin:0 0 .55rem;letter-spacing:-.018em}
.midcta p{color:var(--on-navy-2);font-size:.95rem;line-height:1.75;margin:0 0 1.35rem;max-width:46em}
.midcta .btn-light{background:#fff;color:var(--blue)}

/* the card that follows you down a long page */
.rail{position:sticky;top:104px}
.railcta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:1.4rem 1.35rem;
  box-shadow:0 18px 44px -24px rgba(6,35,74,.3)}
.railcta .k{font-family:var(--fd);font-size:.765rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.6rem}
.railcta h3{font-size:1.05rem;margin:0 0 .5rem;letter-spacing:-.014em}
.railcta p{font-size:.86rem;line-height:1.62;color:var(--ink-2);margin:0 0 1.1rem}
.railcta .btn{width:100%;justify-content:center;font-size:.88rem;padding:.7rem 1rem}
/* A 21px link is a target you miss with a thumb. The padding is the fix,
   not a bigger typeface: the line is deliberately quiet. */
.railcta .sm{display:block;text-align:center;font-size:.8rem;color:var(--ink-2);
  margin-top:.35rem;padding:.75rem .5rem;border-radius:var(--r);min-height:44px;
  line-height:1.7;transition:color .2s ease,background .2s ease}
.railcta .sm:hover{color:var(--blue);background:var(--surface-2)}
@media (max-width:1040px){.rail{position:static}}

/* the price card that replaces a one-row table on a treatment page */
.pcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:1.8rem;
  box-shadow:0 20px 48px -26px rgba(6,35,74,.24);margin:0 0 1.4rem}
.pcard-k{font-family:var(--fd);font-size:.765rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.5rem}
.pcard-n{font-family:var(--fd);font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:700;letter-spacing:-.028em;
  color:var(--ink);line-height:1.05;display:block}
.pcard-s{display:block;font-size:.85rem;color:var(--ink-2);margin-top:.5rem;line-height:1.6;max-width:34em}
.pcard-save{text-align:right;flex:0 0 auto}
.pcard-save b{display:block;font-family:var(--fd);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  color:#0d7a4f;letter-spacing:-.025em;line-height:1}
.pcard-save span{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.35rem;max-width:11em}
@media (max-width:640px){.pcard{grid-template-columns:1fr;gap:1.1rem;padding:1.3rem}
  .pcard-save{text-align:left;border-top:1px solid var(--border);padding-top:1rem}
  .pcard-save span{max-width:none}}

/* a treatment page needs a face on it, not just a table */
.txsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:2.6rem;align-items:start}
.txshot{border-radius:var(--r3);overflow:hidden;position:relative;aspect-ratio:4/5;
  box-shadow:0 24px 56px -28px rgba(6,35,74,.4)}
.txshot img{width:100%;height:100%;object-fit:cover;display:block}
.txshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.2rem .95rem;color:#fff;
  font-size:.8rem;line-height:1.55;
  background:linear-gradient(to top,rgba(3,16,36,.9),rgba(3,16,36,0))}
@media (max-width:900px){.txsplit{grid-template-columns:1fr;gap:1.8rem}.txshot{aspect-ratio:16/10}}

/* area page: treatment cards carry a picture now */
.tcard{position:relative;overflow:hidden;padding:0}
.tcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.tcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tcard:hover .tcard-img img{transform:scale(1.05)}
.tcard-body{padding:1.15rem 1.25rem 1.2rem;display:flex;flex-direction:column;flex:1}

/* ── concern cards: the "what bothers you" grid ───────────────────────── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:.85rem}
.cgrid>*{min-width:0}
.ccard{position:relative;display:block;border-radius:var(--r2);overflow:hidden;background:var(--navy);
  aspect-ratio:4/3;text-decoration:none;isolation:isolate;
  box-shadow:0 2px 4px rgba(6,35,74,.06),0 14px 32px -18px rgba(6,35,74,.34);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s ease}
.ccard:hover,.ccard:focus-visible{transform:translateY(-5px);
  box-shadow:0 4px 8px rgba(6,35,74,.08),0 26px 52px -22px rgba(6,35,74,.46)}
.ccard-img{position:absolute;inset:0;z-index:0}
.ccard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.ccard:hover .ccard-img img{transform:scale(1.06)}
.ccard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(3,16,36,.93) 0%,rgba(3,16,36,.7) 34%,
             rgba(3,16,36,.22) 66%,rgba(3,16,36,.06) 100%)}
.ccard span{position:relative;z-index:2;display:flex;align-items:flex-end;height:100%;
  padding:.95rem 1rem;font-family:var(--fd);font-size:.95rem;font-weight:700;
  letter-spacing:-.014em;color:#fff;line-height:1.25;text-wrap:balance}
@media (max-width:520px){.cgrid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .ccard span{font-size:.85rem;padding:.75rem .8rem}}

/* ── the licence list on an area page ─────────────────────────────────── */
.liclist{list-style:none;margin:1.6rem 0 2rem;padding:0;display:grid;gap:.9rem}
.liclist li{padding:1rem 1.15rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2)}
.liclist b{display:block;font-family:var(--fd);font-size:.95rem;color:var(--ink);margin-bottom:.3rem}
.liclist span{display:block;font-size:.86rem;line-height:1.65;color:var(--ink-2)}


/* The guide byline used to sit on flat navy. It now sits on a photograph, and
   the ink greys it inherited from the article body fail against it. */
.page-hero .byline,.page-hero .byline *{color:var(--on-navy)!important}
.page-hero .byline strong{color:#fff!important}
.page-hero .byline .av{background:rgba(255,255,255,.2);color:#fff!important;
  border:1px solid rgba(255,255,255,.3)}
.page-hero .byline .dot{background:rgba(255,255,255,.45)!important}
.page-hero .chip.light{background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}

/* ── the links that carry the hierarchy now the urls do not ───────────── */
.plinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.plinks>*{min-width:0}
.plink{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.15rem;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);
  font-family:var(--fd);font-weight:700;font-size:.97rem;color:var(--ink);letter-spacing:-.014em;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.plink:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(6,35,74,.3)}
.plink span{font-family:var(--fb);font-weight:400;font-size:.82rem;color:var(--ink-3);letter-spacing:0}

/* ══════════════════════════════════════════════════════════════════════════
   MEASURE — how many characters fit on one line
   ══════════════════════════════════════════════════════════════════════════
   Nothing was capping line length outside .prose, so on a 1440 screen the
   footer disclaimer ran to 204 characters a line and the stat footnotes to
   189. Anything past about 85 and the eye loses the start of the next line.
   34em of the element's own size lands around 68, which is the comfortable
   middle of the range.

   These are all blocks of running text. Headings, tables, cards, chips and
   anything laid out in a grid are deliberately left alone. */

.fdisc{max-width:38em}
.pfoot{max-width:1040px}
.pfoot p{max-width:38em}
/* the founders' letter and the wide section descriptions were the last two
   blocks still running past 90 characters a line */
.letter p{max-width:36em}
.s-desc{max-width:38em}
.center > .s-desc,.center .s-desc{margin-left:auto;margin-right:auto}
.section > .wrap > p,
.section > .wrap > .center > p,
.sec > .wrap > p{max-width:34em}
.center > p.s-desc,.center > .s-desc{margin-left:auto;margin-right:auto}
.hero-sub{max-width:36em;margin-left:auto;margin-right:auto}
.page-hero .lead{max-width:34em}
.lead-sm,.lede{max-width:36em}
/* superseded by the 38em cap above; left as a comment so the next person
   does not re-add it */
.center .lead-sm,.center .lede{margin-left:auto;margin-right:auto}
/* a list of sentences is running text too */
.wrap > ul:not([class]) li,.wrap > ol:not([class]) li{max-width:34em}

/* ── the last gaps that were never set ────────────────────────────────── */
/* A heading whose only separation from the paragraph above it is its own
   line-height reads as part of that paragraph. */
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:2rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.sec .wrap > .kicker + .s-title,.section .wrap > .kicker + .s-title{margin-top:0}

/* a checklist is running text with a tick in front of it */
.checklist li{max-width:36em}
.liclist span{max-width:36em}

/* Below 1040 the rail unsticks and drops under the article, where it is
   suddenly full width. Its copy was written for a 340px column. */
.midcta p,.railcta p,.ef-note,.dw .dl,.dw p{max-width:36em}
.midcta h3,.midcta p{margin-left:0}
@media(max-width:1040px){
  .railcta{max-width:40em}
  .railcta .btn{max-width:22em;margin-inline:auto}
}