/* ==========================================================
   KAMINI CLINIC & LABS — premium diagnostics
   Palette: deep petrol teal + brass gold + ivory
   Type: Instrument Serif (display) + Manrope (UI)
========================================================== */
:root{
  --ink:#0b1a19; --teal:#0d4744; --teal-2:#0a3937; --teal-900:#072220;
  --teal-50:#eef5f2; --teal-100:#d8ebe5; --teal-200:#bcdcd3;
  --gold:#c9a24b; --gold-2:#ab8639; --gold-soft:#e3c67f; --gold-pale:#f5ecd6;
  --ivory:#fbf9f4; --ivory-2:#f4f0e6; --paper:#fff;
  --grey:#55635f; --grey-2:#8a9591; --line:#e4dfd2; --line-2:#efebe0;
  --red:#b4442f;
  --r:6px; --r-lg:10px; --r-xl:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sh:0 24px 50px -30px rgba(7,34,32,.55);
  --sh-lg:0 44px 84px -44px rgba(7,34,32,.7);
  /* page measure and side gutter; both step up on a large display below */
  --wrap:1240px; --gutter:30px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* `overflow-x:hidden` here would make the root a scroll container, and a scroll
   container defeats `position:sticky` on the header inside it — the nav, the
   chapter rails and main.js's anchor offsets all assume the header pins, so this
   has to be `clip`, which contains the decorative overflow without scrolling.
   The `hidden` line stays first as the fallback for Safari below 16. */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--ivory);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,h4{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.012em}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
/* Every section measures itself against this, so widening the page at a
   given size is one line rather than fifteen. */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- type helpers ---------- */
.slabel{display:inline-flex;align-items:center;gap:12px;font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.slabel i{font-style:normal;color:var(--gold)}
.slabel::after{content:"";width:38px;height:1px;background:var(--gold)}
.slabel.on-dark{color:var(--gold-soft)}
.slabel.on-dark::after{background:rgba(227,198,127,.55)}
.dsp{font-size:clamp(1.72rem,5.4vw,3.4rem)}
.lede{color:var(--grey);font-size:1.04rem;max-width:58ch}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:48px;flex-wrap:wrap}
.shead .l{max-width:660px}
.shead h2{margin:18px 0 0}
.center-head{text-align:center;max-width:700px;margin:0 auto 48px}
.center-head .slabel{justify-content:center}
.center-head h2{margin:18px 0 12px}
.center-head p{color:var(--grey);margin:0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:.9rem;padding:14px 26px;border-radius:var(--r);transition:.32s var(--ease);border:1.5px solid transparent;white-space:nowrap}
.btn svg{width:16px;height:16px;stroke-width:2.2;transition:.32s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-solid{background:var(--teal);color:#fff}
.btn-solid:hover{background:var(--teal-900)}
.btn-gold{background:var(--gold);color:#2c2206}
.btn-gold:hover{background:var(--gold-2)}
.btn-out{border-color:var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--teal);color:var(--teal);background:var(--paper)}
.btn-out.on-dark{border-color:rgba(255,255,255,.28);color:#fff}
.btn-out.on-dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-sm{padding:11px 19px;font-size:.83rem}
.btn-full{width:100%}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));z-index:300;transition:width .1s linear}

/* ================= NAV ================= */
#nav{position:sticky;top:0;z-index:150;background:rgba(251,249,244,.92);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;transition:.4s var(--ease)}
#nav.stuck{border-bottom-color:var(--line);box-shadow:0 10px 40px -32px rgba(7,34,32,.9)}
/* Brand, then the links anchored to it, and the actions pushed to the far
   right. Space-between used to leave the six links adrift in the middle of
   a 130px void once the phone block dropped out at 1280. */
#nav nav{display:flex;align-items:center;height:82px;transition:height .4s var(--ease)}
#nav.stuck nav{height:70px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand .mark{width:47px;height:47px;flex-shrink:0;transition:.45s var(--spring)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.04)}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.46rem;color:var(--ink)}
.brand .wm span{font-size:.55rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);margin-top:4px;white-space:nowrap}
footer .brand .wm b{color:#fff}
footer .brand .wm span{color:var(--gold-soft)}
/* The spacing lives in the links' own padding, not in a gap between bare
   words, so the row reads as one navigational object and each item has a
   hit area worth the name. */
/* Auto margins on both sides, so the row of links floats in the space
   between the brand and the actions instead of hugging the wordmark and
   leaving a void on the right. */
.nlinks{display:flex;align-items:center;gap:4px;margin:0 auto;
  font-size:.95rem;font-weight:700;letter-spacing:-.006em;color:var(--grey);white-space:nowrap}
.nlinks a{position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;border-radius:10px;
  transition:color .25s var(--ease),background-color .25s var(--ease)}
.nlinks a:hover,.nlinks a:focus-visible{color:var(--teal);background:var(--teal-50)}

/* The one thing worth pointing at from the header: collection costs nothing.
   A gold chip rather than another word, so it reads before it is read. */
.nbadge{font-style:normal;font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#2c2206;background:var(--gold);border-radius:100px;padding:3px 7px;line-height:1;
  box-shadow:0 2px 8px -3px rgba(201,162,75,.9);transition:.3s var(--ease)}
.nlinks a:hover .nbadge{background:var(--teal);color:#fff;box-shadow:none}

/* Current page. The rule grows from the centre so a page change reads as one
   object settling rather than a line sweeping in from the left. */
.nlinks a::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2.5px;
  background:var(--gold);border-radius:2px;transition:left .34s var(--ease),right .34s var(--ease)}
/* Every item is already 700, so the current one is marked by colour and the
   rule alone — no faux-bold, and therefore no width shift on a page change.
   The same rule sweeps in under whatever is hovered, so the header answers
   the pointer rather than only the page. */
.nlinks a.on{color:var(--teal)}
.nlinks a.on::after,.nlinks a:hover::after,.nlinks a:focus-visible::after{left:16px;right:16px}
.nlinks a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* actions sit hard right, behind a hairline that separates navigating from doing */
.nsheet{display:none}
.nact{display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding-left:20px;position:relative}
.nact::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:26px;background:var(--line)}
.ncall{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:4px 6px 4px 4px;
  border-radius:9px;transition:background-color .25s var(--ease)}
.ncall:hover{background:var(--teal-50)}
.ncall .ic{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;
  place-items:center;color:var(--teal);background:var(--paper);transition:.28s var(--ease)}
.ncall:hover .ic{border-color:var(--teal-200);box-shadow:0 4px 14px -8px rgba(7,34,32,.6)}
.ncall .ic svg{width:15px;height:15px}
.ncall b{font-size:.84rem;font-weight:800;display:block;line-height:1.25;color:var(--ink)}
.ncall small{font-size:.63rem;color:var(--grey-2);letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;display:block;line-height:1}
.nact .btn-sm{padding:12px 20px;font-size:.84rem;border-radius:8px}

/* a proper tappable square rather than three bare lines */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:42px;height:42px;margin-left:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);transition:.28s var(--ease)}
.burger:hover{border-color:var(--teal-200)}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.burger span{width:18px;height:1.8px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger.on{border-color:var(--teal);background:var(--teal-50)}
.burger.on span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
/* ================= HERO =================
   A full-bleed teal panel — the same #072220 ground the four inner mastheads
   open on — with the photograph bleeding off the right edge and dissolving
   into it through a mask, rather than sitting in a floating rounded frame. */
.hero{position:relative;background:var(--teal-900);color:#fff;padding:44px 0 26px;overflow:hidden;isolation:isolate}

/* ---------- the photograph ---------- */
.hphoto{position:absolute;top:0;right:0;bottom:0;width:55%;z-index:0;pointer-events:none;overflow:hidden}
.hphoto img{width:100%;height:110%;object-fit:cover;object-position:58% 46%;
  filter:brightness(.94) contrast(1.08) saturate(1);will-change:transform}
/* pulls a white clinical photo onto the brand's teal. Kept light — at .7 it
   stripped the skin tones and the frame read as flat grey-green. */
.htint{position:absolute;inset:0;background:linear-gradient(200deg,#0d4744,#072220);
  mix-blend-mode:color;opacity:.38}
/* the dissolve: hard teal at the left seam, clear through the subject, and a
   soft close at the top and bottom so the photo never shows a cut edge */
.hveil{position:absolute;inset:0;background:
  linear-gradient(90deg,#072220 0%,rgba(7,34,32,.96) 14%,rgba(7,34,32,.42) 32%,rgba(7,34,32,.04) 56%,rgba(7,34,32,.3) 100%),
  linear-gradient(180deg,rgba(7,34,32,.62) 0%,transparent 20%,transparent 58%,rgba(7,34,32,.88) 100%)}

.hero .wrap{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px;align-items:center}
.hgrid>*{min-width:0}
.hcopy{max-width:var(--hcopy,620px);padding:0}

/* ---------- badge ---------- */
.hbadge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(227,198,127,.4);
  background:rgba(201,162,75,.14);padding:8px 17px;border-radius:100px;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;color:var(--gold-soft)}
.hbadge .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);position:relative;flex:none}
.hbadge .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);
  animation:pp 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes pp{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(3);opacity:0}}

/* ---------- headline ----------
   All three lines in Instrument Serif, the face that carries every other
   heading on the site — the homepage speaks in the brand's own voice rather
   than switching to a heavy sans for its one big moment. The statement lines
   sit upright, and the third turns italic and grows into the drawn swash.
   Instrument Serif ships at 400 only, so the weight comes from size, not
   from a bolder cut; the tracking is loosened from the sans setting to suit
   it, and the type is stepped up to hold the same presence on the photo. */
.hero h1{font-size:clamp(2.1rem,5.2vw,3.75rem);margin:20px 0 0;line-height:1.06}
.hero h1 .l1,.hero h1 .l2{display:block;font-weight:400;letter-spacing:-.016em;color:#fff}
.hero h1 .l2{color:var(--teal-200)}
.hero h1 .l3{display:inline-block;position:relative;font-style:italic;color:var(--gold-soft);
  font-size:1.2em;letter-spacing:-.015em;line-height:1.24;padding-right:.1em}
.hswash{position:absolute;left:0;width:100%;bottom:.06em;height:.2em;color:var(--gold);
  stroke-width:2.4;stroke-linecap:round;overflow:visible;opacity:.9}

.hero .lede{margin:18px 0 0;font-size:1.03rem;line-height:1.65;color:rgba(255,255,255,.75);max-width:46ch;
  text-wrap:balance}

/* ---------- search ---------- */
.tsearch{margin-top:26px;display:flex;gap:8px;background:var(--paper);border:1.5px solid transparent;
  border-radius:13px;padding:8px;max-width:545px;box-shadow:0 26px 52px -34px rgba(0,0,0,.9);transition:.3s var(--ease)}
.tsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,75,.2),0 26px 52px -34px rgba(0,0,0,.9)}
.tsearch .fi{flex:1;display:flex;align-items:center;gap:10px;padding-left:13px;min-width:0}
.tsearch .fi svg{width:18px;height:18px;color:var(--grey-2);flex-shrink:0}
.tsearch input{flex:1;border:none;outline:none;font-size:.93rem;font-weight:500;color:var(--ink);
  background:transparent;min-width:0}
.tsearch .btn-sm{padding:12px 20px;border-radius:9px;font-weight:800}

/* ---------- popular chips ---------- */
.chips{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;align-items:center}
.chips b{font-size:.68rem;color:rgba(255,255,255,.5);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.chips a{font-size:.79rem;font-weight:700;color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);padding:6px 14px;border-radius:100px;transition:.25s var(--ease)}
.chips a:hover{border-color:var(--gold-soft);background:rgba(201,162,75,.2);color:#fff}

/* ---------- stats ---------- */
.hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:22px;gap:16px}
.hstats .s{position:relative;padding-right:16px}
.hstats .s+.s{padding-left:20px;border-left:1px solid rgba(255,255,255,.13)}
.hstats .ic{display:block;width:19px;height:19px;color:var(--gold);margin-bottom:9px}
.hstats .ic svg{width:19px;height:19px;stroke-width:1.7}
.hstats b{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(1.55rem,3.4vw,2rem);
  line-height:1;display:block;color:#fff}
.hstats .t{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.58);display:block;margin-top:7px;line-height:1.4}

/* ---------- the cards riding on the photograph ---------- */
.hvis{position:relative;min-height:470px}
.hcard{position:absolute;z-index:3;background:rgba(255,255,255,.96);color:var(--ink);
  backdrop-filter:blur(10px);border-radius:12px;padding:13px 17px;display:flex;align-items:center;gap:12px;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.85)}
.hcard .ic{width:38px;height:38px;border-radius:9px;background:var(--teal-50);color:var(--teal);
  display:grid;place-items:center;flex-shrink:0}
.hcard .ic svg{width:18px;height:18px}
.hcard b{font-size:.84rem;font-weight:800;display:block;line-height:1.3}
.hcard small{font-size:.71rem;color:var(--grey);display:block;margin-top:1px}
.hc1{top:8px;right:-46px;animation:fl 6s ease-in-out infinite}
.hc2{right:-58px;bottom:26px;animation:fl 6s ease-in-out infinite 1.4s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ---------- the closing feature bar ---------- */
.hfeat{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;
  border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);background:rgba(7,34,32,.62);
  backdrop-filter:blur(14px) saturate(1.3);overflow:hidden}
.hfeat li{display:flex;align-items:center;gap:13px;padding:16px 20px;
  border-left:1px solid rgba(255,255,255,.12)}
.hfeat li:first-child{border-left:0}
.hfeat .ic{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(201,162,75,.15);
  color:var(--gold-soft);display:grid;place-items:center}
.hfeat .ic svg{width:18px;height:18px}
.hfeat b{display:block;font-size:.83rem;font-weight:800;line-height:1.35;color:#fff}
.hfeat small{display:block;font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.45}

/* ================= CHAPTER RAIL =================
   The home page's copy of the inner pages' rail (main.js drives them all
   through #chap), on the teal band so it runs on from the hero. */
.hm-chap{position:sticky;top:69px;z-index:120;background:rgba(7,34,32,.95);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.09)}
.hm-chap .wrap{display:flex;align-items:stretch;height:56px;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;scroll-behavior:smooth}
.hm-chap .wrap::-webkit-scrollbar{display:none}
.hm-chap a{position:relative;flex:none;display:inline-flex;align-items:center;gap:9px;padding:0 17px;
  font-size:.81rem;font-weight:700;color:rgba(255,255,255,.6);white-space:nowrap;transition:color .25s var(--ease)}
.hm-chap a:first-child{padding-left:0}
.hm-chap a i{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--gold-soft);opacity:.55}
.hm-chap a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--gold);
  transition:left .32s var(--ease),right .32s var(--ease)}
.hm-chap a:hover,.hm-chap a.on{color:#fff}
.hm-chap a.on i{opacity:1}
.hm-chap a.on::after{left:14px;right:14px}
.hm-chap a:first-child.on::after{left:0}
.hm-chap a:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:4px}
/* a section reached by a hash link lands below the header and the rail */
.hm-chap ~ section[id],#onsite{scroll-margin-top:140px}

/* ================= PROMO BANNER CAROUSEL ================= */
.promo{padding:70px 0 0}
.pcar{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);background:var(--teal-900)}
.ptrack{display:flex;transition:transform var(--pmove,.42s) cubic-bezier(.66,0,.16,1);will-change:transform;backface-visibility:hidden}
/* stretch, not center — both columns must fill the row or the text panel's
   own background leaves dark bands above and below it */
.pslide{min-width:100%;position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);min-height:396px;align-items:stretch}
.pslide .ptxt{padding:52px 20px 52px 56px;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center}
.pslide .pimg{position:relative;min-height:396px;overflow:hidden}
/* absolutely positioned so the photo's intrinsic size never drives row height */
.pslide .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fp,center);transform-origin:var(--fp,center)}
/* horizontal blend into the text panel — stepped stops keep the fade even, no muddy midpoint */
.pslide .pimg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgb(var(--sl-rgb)) 0%,rgba(var(--sl-rgb),.97) 12%,rgba(var(--sl-rgb),.78) 24%,rgba(var(--sl-rgb),.40) 37%,rgba(var(--sl-rgb),.12) 50%,rgba(var(--sl-rgb),0) 62%)}
/* soft top/bottom vignette so every photo sits in the same tonal range */
.pslide .pimg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,20,19,.22) 0%,rgba(4,20,19,0) 24%,rgba(4,20,19,0) 58%,rgba(4,20,19,.34) 100%)}
.pslide .plogo{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:6px 14px 6px 7px;margin-bottom:20px}
.pslide .plogo svg{width:26px;height:26px}
.pslide .plogo b{font-family:'Instrument Serif',serif;font-size:.98rem;color:#fff}
.pslide h2{color:#fff;font-size:clamp(1.5rem,5.6vw,2.9rem);margin-bottom:12px}
.pslide h2 em{font-style:italic;color:var(--gold-soft)}
.pslide p{color:rgba(255,255,255,.82);font-size:1rem;max-width:44ch;margin-bottom:22px}
.pfeat{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.pfeat span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.79rem;font-weight:600;padding:7px 13px;border-radius:var(--r)}
.pfeat svg{width:14px;height:14px;color:var(--gold-soft);stroke-width:2.4}
.pacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ppill{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.85rem;font-weight:700}
.ppill svg{width:16px;height:16px;color:var(--gold-soft)}
/* controls */
.pdots{position:absolute;bottom:20px;left:56px;display:flex;gap:8px;z-index:6}
.pdots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);transition:.35s var(--ease)}
.pdots button.on{background:var(--gold);width:28px;border-radius:100px}
.parr{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;display:grid;place-items:center;transition:.3s;backdrop-filter:blur(6px)}
.parr:hover{background:rgba(255,255,255,.28)}
.parr svg{width:18px;height:18px;stroke-width:2.2}
.parr.prev{left:16px}.parr.next{right:16px}

/* ================= SPECIAL PROGRAMS ================= */
.progs{padding:96px 0;background:linear-gradient(180deg,var(--ivory),var(--teal-50))}
.progs h2 em{font-style:normal;color:var(--gold-2)}
.pgrid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.pcard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:0 0 24px;text-align:center;overflow:hidden;position:relative;transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease)}
.pcard:hover{transform:translateY(-10px);box-shadow:var(--sh);border-color:var(--gold-soft)}
/* photo */
.pph{display:block;position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--teal-50)}
.pph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .pph img{transform:scale(1.07)}
/* a soft scrim keeps the medallion legible over a busy photo */
.pph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,34,32,0) 48%,rgba(7,34,32,.3));transition:.42s var(--ease)}
.pcard:hover .pph::after{background:linear-gradient(180deg,rgba(13,71,68,.06) 30%,rgba(7,34,32,.4))}
/* body + the medallion straddling the photo edge */
.pbody{display:block;position:relative;padding:40px 12px 0}
.pmed{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--gold-pale);border:3px solid var(--paper);display:grid;place-items:center;z-index:2;box-shadow:0 10px 22px -12px rgba(7,34,32,.6);transition:.42s var(--spring)}
.pmed svg{width:26px;height:26px;color:var(--gold-2);stroke-width:1.6;transition:.42s var(--ease)}
.pcard:hover .pmed{background:var(--teal);transform:translate(-50%,-50%) scale(1.08)}
.pcard:hover .pmed svg{color:var(--gold-soft)}
.pcard b{display:block;font-size:.93rem;font-weight:700;margin:0 0 5px;line-height:1.3}
.pcard small{display:block;font-size:.76rem;color:var(--grey);line-height:1.45}

/* ================= HEALTH CONCERNS ================= */
.conc{padding:96px 0}
.conc .shead{margin-bottom:44px}
.conc .lede{margin-top:16px;font-size:1rem}
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
/* a photo card: picture, a frosted organ chip, then the name and a gold go-dot */
.cc{display:block;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease)}
.cc:hover{transform:translateY(-8px);box-shadow:var(--sh);border-color:var(--gold-soft)}
.cc:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--teal-50)}
.cph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cc:hover .cph img{transform:scale(1.08)}
/* a scrim so the chip stays readable and the photos sit as one family */
.cph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(7,34,32,.24),rgba(7,34,32,0) 46%,rgba(7,34,32,.22));transition:.42s var(--ease)}
.cc:hover .cph::after{background:linear-gradient(160deg,rgba(13,71,68,.3),rgba(7,34,32,.02) 50%,rgba(7,34,32,.3))}
.cchip{position:absolute;top:11px;left:11px;width:34px;height:34px;border-radius:50%;z-index:2;display:grid;place-items:center;
  background:rgba(255,255,255,.82);color:var(--teal);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 6px 16px -8px rgba(7,34,32,.6);transition:.42s var(--spring)}
.cchip svg{width:17px;height:17px;stroke-width:1.8}
.cc:hover .cchip{background:var(--gold);color:#2c2206;border-color:rgba(255,255,255,.35);transform:scale(1.08)}
/* body */
.cbody{display:flex;align-items:center;gap:10px;padding:14px 15px 15px}
.ct{min-width:0;flex:1}
.cc b{display:block;font-size:.94rem;font-weight:800;letter-spacing:-.012em;line-height:1.25;transition:color .32s var(--ease)}
.cc:hover b{color:var(--teal)}
.cc small{display:block;font-size:.69rem;color:var(--grey-2);line-height:1.4;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgo{flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold-pale);color:var(--gold-2);display:grid;place-items:center;transition:.36s var(--ease)}
.cgo svg{width:15px;height:15px;stroke-width:2.2;transition:transform .36s var(--ease)}
.cc:hover .cgo{background:var(--teal);color:var(--gold-soft)}
.cc:hover .cgo svg{transform:translateX(2px)}

/* ================= TESTS ================= */
.tests{padding:96px 0;background:var(--ivory-2)}
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;transition:.35s var(--ease);display:flex;flex-direction:column}
.tc:hover{border-color:var(--teal);transform:translateY(-5px);box-shadow:var(--sh)}
.tc .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.tc .ic{width:38px;height:38px;border-radius:var(--r);background:var(--teal-50);color:var(--teal);display:grid;place-items:center;flex-shrink:0}
.tc .ic svg{width:18px;height:18px}
.tc .fast{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-2);background:var(--gold-pale);padding:4px 8px;border-radius:3px;white-space:nowrap}
.tc h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;margin-bottom:5px;letter-spacing:0}
.tc .par{font-size:.8rem;color:var(--grey);margin-bottom:16px;flex:1}
.tc .pr{display:flex;align-items:baseline;gap:8px;padding-top:14px;border-top:1px dashed var(--line)}
.tc .pr b{font-family:'Instrument Serif',serif;font-size:1.65rem;color:var(--teal)}
.tc .pr s{font-size:.83rem;color:var(--grey-2)}
.tc .pr .off{margin-left:auto;font-size:.68rem;font-weight:800;color:#2c2206;background:var(--gold-soft);padding:3px 7px;border-radius:3px}

/* ================= PACKAGES ================= */
.pk{padding:96px 0}
.pkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.pc2{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 30px;position:relative;transition:.35s var(--ease)}
.pc2:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.pc2 .tag{font-size:.67rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.pc2 h3{font-size:clamp(1.5rem,4.8vw,1.85rem);margin:11px 0 5px}
.pc2 .sub{font-size:.86rem;color:var(--grey);min-height:40px}
.pc2 .price{display:flex;align-items:flex-start;gap:3px;margin:20px 0 4px;font-family:'Instrument Serif',serif;font-size:clamp(2.3rem,8vw,3rem);line-height:1}
.pc2 .price .c{font-size:1.4rem;margin-top:.25em}
.pc2 .was{font-size:.84rem;color:var(--grey-2);margin-bottom:22px}
.pc2 .was s{margin-right:8px}
.pc2 .was b{color:var(--gold-2);font-weight:800}
.pc2 ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;padding-top:20px;border-top:1px solid var(--line)}
.pc2 li{display:flex;gap:10px;font-size:.87rem;align-items:flex-start}
.pc2 li svg{width:16px;height:16px;color:var(--teal);flex-shrink:0;margin-top:3px;stroke-width:2.6}
.pc2.hot{background:linear-gradient(170deg,var(--teal),var(--teal-900));color:#fff;border-color:transparent;box-shadow:var(--sh-lg)}
.pc2.hot .sub,.pc2.hot .was{color:rgba(255,255,255,.72)}
.pc2.hot .tag{color:var(--gold-soft)}
.pc2.hot ul{border-top-color:rgba(255,255,255,.16)}
.pc2.hot li svg{color:var(--gold-soft)}
.pc2.hot .was b{color:var(--gold-soft)}
.ribbon{position:absolute;top:0;right:26px;background:var(--gold);color:#2c2206;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:0 0 4px 4px}
.pnote{text-align:center;margin-top:36px;font-size:.9rem;color:var(--grey)}
.pnote a{color:var(--teal);font-weight:700;border-bottom:1px solid var(--gold)}

/* ================= PROCESS (dark) ================= */
.proc{background:var(--teal-900);color:#fff;padding:96px 0;overflow:hidden}
.proc .wrap{position:relative;z-index:2}
.proc h2{color:#fff;margin:18px 0 0}
.pstep{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:.4s var(--ease)}
.pstep:first-of-type{border-top:1px solid rgba(255,255,255,.12)}
.pstep:hover{padding-left:14px}
.pstep .n{font-family:'Instrument Serif',serif;font-size:clamp(2rem,6vw,3rem);color:rgba(255,255,255,.2);line-height:1;transition:.4s;min-width:70px}
.pstep:hover .n{color:var(--gold)}
.pstep h4{font-family:'Instrument Serif',serif;font-size:clamp(1.25rem,4.6vw,1.6rem);color:#fff;margin-bottom:5px}
.pstep p{color:rgba(255,255,255,.66);font-size:.9rem;max-width:64ch}
.pstep .ic{width:52px;height:52px;border-radius:var(--r);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:var(--gold-soft);transition:.4s var(--ease)}
.pstep:hover .ic{background:var(--gold);color:#2c2206;border-color:var(--gold)}
.pstep .ic svg{width:23px;height:23px}
.pcta{margin-top:46px;display:flex;gap:13px;flex-wrap:wrap}

/* ================= TRUST CHAIN (stats) ================= */
.chain{background:var(--paper);padding:90px 0;border-bottom:1px solid var(--line)}
.chgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.chgrid::before{content:"";position:absolute;top:52px;left:10%;right:10%;height:3px;background:linear-gradient(90deg,var(--gold-pale),var(--gold-soft),var(--gold-pale));border-radius:3px;z-index:0}
.ch{text-align:center;position:relative;z-index:2}
.ch .ring{width:104px;height:104px;margin:0 auto 18px;border-radius:50%;background:var(--paper);border:5px solid var(--gold-soft);display:grid;place-items:center;color:var(--teal);transition:.4s var(--spring);box-shadow:0 0 0 8px var(--gold-pale)}
.ch:hover .ring{transform:translateY(-7px) scale(1.05);border-color:var(--gold);color:var(--teal-900)}
.ch .ring svg{width:42px;height:42px;stroke-width:1.5}
.ch b{font-family:'Instrument Serif',serif;font-size:clamp(1.7rem,2.6vw,2.3rem);display:block;line-height:1;color:var(--teal)}
.ch span{font-size:.82rem;color:var(--grey);display:block;margin-top:6px}

/* ================= QUALITY ================= */
.qual{padding:96px 0;background:var(--teal-50)}
.qgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.qlist{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.qi2{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;transition:.32s var(--ease)}
.qi2:hover{transform:translateX(6px);border-color:var(--teal)}
.qi2 .ic{width:48px;height:48px;border-radius:var(--r);background:var(--teal-50);color:var(--teal);display:grid;place-items:center;flex-shrink:0}
.qi2 .ic svg{width:23px;height:23px}
.qi2 h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;margin-bottom:4px;letter-spacing:0}
.qi2 p{font-size:.86rem;color:var(--grey)}
.qvis{position:relative}
.qphoto{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/4.4;background:var(--teal-100);box-shadow:var(--sh-lg)}
.qphoto img{width:100%;height:100%;object-fit:cover}
.qbadge{position:absolute;right:-22px;bottom:-20px;background:var(--teal);color:#fff;border-radius:var(--r-lg);padding:22px 26px;box-shadow:var(--sh-lg);text-align:center}
.qbadge b{font-family:'Instrument Serif',serif;font-size:clamp(2rem,6.4vw,2.6rem);line-height:1;display:block;color:var(--gold-soft)}
.qbadge span{font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.82);display:block;margin-top:5px}

/* ================= REVIEWS ================= */
/* ================= PATIENT VOICES =================
   The portrait leads. A review is trusted face first and words second, so
   the picture is pressed into the top edge of the card like a seal rather
   than tucked into a byline underneath the quote. */
.rev{padding:96px 0;background:var(--ivory-2)}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.rc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:66px 26px 24px;margin-top:44px;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
.rc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}

.rby{display:flex;flex-direction:column;align-items:center}
/* half in, half out of the card, ringed first in paper and then in a gold hair */
.rphoto{position:absolute;top:-44px;left:50%;transform:translateX(-50%);
  width:86px;height:86px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--teal),var(--teal-900));
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--gold-soft),0 16px 30px -16px rgba(7,34,32,.95);
  transition:box-shadow .38s var(--ease)}
.rc:hover .rphoto{box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--gold),0 20px 36px -16px rgba(7,34,32,1)}
.rphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:3}
.rpmono{font-family:'Instrument Serif',Georgia,serif;font-size:1.52rem;letter-spacing:.03em;
  color:var(--gold-soft)}

.rby b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.18rem;
  letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.rsvc{margin-top:6px;font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-2)}
.rc .stars{margin-top:11px;color:var(--gold);letter-spacing:4px;font-size:.8rem}

/* a small gold quote, in place of the oversized one that used to open the card */
.rq{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:2.9rem;line-height:.5;
  color:var(--gold);opacity:.62;margin:22px 0 8px}
.rc blockquote{font-size:.93rem;line-height:1.75;color:var(--grey);max-width:34ch}

.rc .gv{display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  padding-top:18px;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal)}
.rc .gv svg{width:13px;height:13px;stroke-width:3;color:#2f9e6d}

@media(max-width:1040px){ .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:700px){ .rgrid{grid-template-columns:1fr;gap:56px} }

/* ================= FAQ ================= */
.faq{background:var(--teal-50);padding:96px 0}
.fgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.fq{border-bottom:1px solid var(--line)}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;text-align:left;font-weight:700;font-size:.98rem;transition:.25s}
.fq button:hover{color:var(--teal)}
.fq .pm{width:29px;height:29px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.35s var(--ease);position:relative;background:var(--paper)}
.fq .pm::before,.fq .pm::after{content:"";position:absolute;background:var(--teal);border-radius:2px;transition:.35s var(--ease)}
.fq .pm::before{width:11px;height:1.8px}
.fq .pm::after{width:1.8px;height:11px}
.fq.open .pm{background:var(--teal);border-color:var(--teal);transform:rotate(180deg)}
.fq.open .pm::before{background:#fff}
.fq.open .pm::after{transform:scaleY(0);background:#fff}
.fq .ans{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fq .ans p{padding:0 0 22px;font-size:.92rem;color:var(--grey);max-width:66ch}

/* ================= BOOK ================= */
.book{padding:0 0 96px;background:var(--teal-50)}
.bpanel{background:linear-gradient(150deg,var(--teal),var(--teal-900));border-radius:var(--r-xl);padding:60px 56px;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.bgrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.bgrid h2{color:#fff;font-size:clamp(1.7rem,5.6vw,2.9rem);margin:18px 0 14px}
.bgrid .lede{color:rgba(255,255,255,.8)}
.bpts{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.bpts li{display:flex;align-items:center;gap:10px;font-size:.93rem;color:rgba(255,255,255,.9)}
.bpts svg{width:17px;height:17px;color:var(--gold-soft);stroke-width:2.6;flex-shrink:0}
.bcall{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.bcall a{display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:12px 17px;transition:.3s}
.bcall a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.bcall .ic{width:33px;height:33px;border-radius:var(--r);background:rgba(255,255,255,.12);color:var(--gold-soft);display:grid;place-items:center}
.bcall .ic svg{width:15px;height:15px}
.bcall b{color:#fff;font-size:.92rem;display:block;line-height:1.2}
.bcall small{color:rgba(255,255,255,.6);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.bform{background:var(--paper);border-radius:var(--r-lg);padding:34px 32px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.bform h3{font-size:clamp(1.35rem,4.8vw,1.6rem);margin-bottom:5px}
.bform>p{font-size:.85rem;color:var(--grey);margin-bottom:22px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.fld input,.fld select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-size:.92rem;color:var(--ink);background:var(--ivory);transition:.25s;outline:none}
.fld input:focus,.fld select:focus{border-color:var(--teal);background:var(--paper);box-shadow:0 0 0 4px rgba(13,71,68,.08)}
.fld input.bad{border-color:var(--red);background:#fdf3f0}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}
.fmsg{margin-top:13px;font-size:.87rem;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:8px}
/* display:flex on the class outranks the UA's [hidden] rule, so the success
   line has to be hidden explicitly until the form is submitted */
.fmsg[hidden]{display:none}
.fmsg svg{width:15px;height:15px;stroke-width:3}
.ffine{margin-top:12px;font-size:.75rem;color:var(--grey-2);text-align:center}
/* what is wrong with a field, written by forms.js under the input */
.ferr{display:none;margin-top:6px;font-size:.75rem;font-weight:700;line-height:1.45;color:var(--red)}
.fld.err .ferr,.ct-fld.err .ferr{display:block}
/* a suggested correction ("Did you mean …@gmail.com?") — one tap applies it */
.ffix{font:inherit;color:var(--teal);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer}
/* the form could not be sent — shared by #bform and the contact form */
.fsend{margin-top:13px;padding:12px 14px;border-radius:var(--r);background:#fdf3f0;border:1px solid rgba(180,68,47,.25);
  font-size:.84rem;font-weight:600;line-height:1.55;color:var(--red)}
.fsend[hidden]{display:none}
.fsend a{color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:2px}
/* while a form is sending, and after it has gone */
.bform .btn:disabled,.ct-form .btn:disabled{opacity:.75;cursor:default;pointer-events:none}
/* spam trap: off-screen for people, still filled in by form bots */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ================= FOOTER ================= */
footer{background:var(--ink);color:rgba(255,255,255,.66);padding:76px 0 0}
.fgrid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:44px;padding-bottom:48px}
footer .brand{margin-bottom:18px}
.fabout{font-size:.89rem;line-height:1.75;margin-bottom:20px;max-width:32ch}
.fsoc{display:flex;gap:10px}
.fsoc a{width:37px;height:37px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);display:grid;place-items:center;color:#fff;transition:.3s var(--ease)}
.fsoc a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-3px)}
.fsoc svg{width:16px;height:16px}
.fcol h5{color:#fff;font-family:'Manrope',sans-serif;font-size:.71rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.fcol a{display:block;font-size:.89rem;margin-bottom:11px;transition:.25s}
.fcol a:hover{color:var(--gold-soft);transform:translateX(3px)}
.fcont{display:flex;gap:11px;margin-bottom:15px;align-items:flex-start;font-size:.89rem;line-height:1.6}
.fcont svg{width:16px;height:16px;color:var(--gold-soft);flex-shrink:0;margin-top:4px}
.fcont a{display:block;transition:.25s}
.fcont a:hover{color:var(--gold-soft)}
.fhours{border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:15px 17px;margin-top:18px}
.fhours b{color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:11px;font-weight:800}
.fhours b svg{width:14px;height:14px;color:var(--gold-soft)}
.fhours div{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:6px;gap:12px}
.fhours div:last-child{margin:0}
.fhours span:last-child{color:#fff;font-weight:600}
/* ---------- the closing bar ----------
   Three things that do not belong in one huddle: who owns the site, the two
   legal pages, and who built it. They sit on one line with the credit pushed
   to the far end behind a hairline, so the signature reads as a signature
   rather than a third link in the list. */
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:8px;padding:24px 0 30px;
  /* room under the last row for the fixed call and WhatsApp buttons
     (20px offset + 56px disc + a gap), so they never sit on the credit */
  padding-bottom:94px;
  display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;
  font-size:.82rem;color:rgba(255,255,255,.45)}
.fcopy{line-height:1.6}
.fcopy em{font-style:normal;color:rgba(255,255,255,.3)}
/* the legal pair sits beside the copyright; auto margin throws the credit right */
.fbot .lnks{display:flex;gap:22px;margin-right:auto}
.fbot .lnks a{position:relative;transition:color .25s var(--ease)}
.fbot .lnks a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:var(--gold-soft);transition:right .3s var(--ease)}
.fbot .lnks a:hover{color:#fff}
.fbot .lnks a:hover::after{right:0}

/* ---------- the build credit ----------
   A bordered badge with an outbound arrow, so it is unmistakably a link and
   not a line of small print that happens to carry a name. */
.fmade{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:9px 15px;border-radius:100px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  font-size:.74rem;color:rgba(255,255,255,.5);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.fmade b{font-weight:800;font-size:.8rem;letter-spacing:.01em;color:#fff;
  transition:color .3s var(--ease)}
.fmade svg{width:12px;height:12px;stroke-width:2.4;color:var(--gold-soft);flex:none;
  transition:transform .3s var(--ease)}
.fmade:hover{border-color:var(--gold-soft);background:rgba(201,162,75,.14);color:rgba(255,255,255,.75)}
.fmade:hover b{color:var(--gold-soft)}
.fmade:hover svg{transform:translate(2px,-2px)}
.fmade:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================= QUICK-CONTACT BUTTONS ================= */
/* ---------- the two quick-contact buttons ----------
   One in each bottom corner and built to the same 56px disc: a callback
   request on the left in brand teal, WhatsApp on the right in its own green.
   The callback used to be a card carrying two lines of copy, which sat over
   the page like a notice; as a bare icon it reads as a control. */
.advisor{position:fixed;left:20px;bottom:20px;z-index:141;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;
  box-shadow:0 14px 30px -10px rgba(13,71,68,.8),0 4px 10px -4px rgba(0,0,0,.3);
  transition:transform .32s var(--spring),box-shadow .32s var(--ease)}
.advisor svg{width:26px;height:26px;position:relative;z-index:2}
.advisor:hover{transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 38px -10px rgba(13,71,68,.9),0 6px 14px -4px rgba(0,0,0,.34)}
.advisor:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* the gold ring it has always carried, now around the whole button */
.advisor::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);
  animation:pp2 2.6s ease-out infinite;pointer-events:none}
@keyframes pp2{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){ .advisor::after{animation:none;opacity:0} }

/* ---------- WhatsApp ----------
   Bottom right, facing the callback button across the foot of the page.
   Kept in WhatsApp's own green rather than the brand palette: this is a
   button people recognise before they read it. */
.wapp{position:fixed;right:20px;bottom:20px;z-index:141;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:#fff;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.75),0 4px 10px -4px rgba(0,0,0,.3);
  transition:transform .32s var(--spring),box-shadow .32s var(--ease)}
.wapp svg{width:30px;height:30px;position:relative;z-index:2}
.wapp:hover{transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 38px -10px rgba(37,211,102,.85),0 6px 14px -4px rgba(0,0,0,.34)}
.wapp:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* one slow ring, so it reads as live without nagging */
.wapp::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;
  animation:waPulse 2.8s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
@media(prefers-reduced-motion:reduce){ .wapp::after{animation:none;opacity:0} }
@media(max-width:560px){
  .wapp{right:14px;bottom:14px;width:50px;height:50px}
  .wapp svg{width:27px;height:27px}
  .advisor{left:14px;bottom:14px;width:50px;height:50px}
  .advisor svg{width:24px;height:24px}
}

/* ---------- the design credit ---------- */
.fmade{display:inline-flex;align-items:center;gap:6px}
.fmade a{color:rgba(255,255,255,.72);font-weight:700;border-bottom:1px solid rgba(255,255,255,.22);
  transition:.25s var(--ease)}
.fmade a:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}

/* ================= PARTNER LABORATORIES =================
   Four words of caption and then the marks. An earlier pass gave this a
   heading and a paragraph in a column down the left, which left the logos —
   the only thing anyone actually reads here — squeezed into what was left.

   The marks arrived on three different grounds: three on white, Dr Lal on
   yellow, Thyrocare on navy. Each is pre-set on a tile of its own colour at
   one size, so the row reads as a set rather than as five stray exports.

   The loop: the track holds five passes of the five marks and travels exactly
   -20%, which is one pass, so the first frame and the last are identical and
   the seam is invisible. Five rather than four because the rail is full-bleed
   now — four left it able to run dry at the end of a cycle past about 3060px. Each tile carries its own right margin rather than
   the track using gap — a gap would make one pass slightly narrower than a
   quarter of the track, and the row would creep out of register every cycle. */
.labs{padding:34px 0 36px;background:var(--paper);border-bottom:1px solid var(--line)}

/* a rule either side of the caption, so four words still read as a section */
.labs-k{display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:'Manrope',system-ui,sans-serif;font-size:.64rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2);margin:0 0 26px}
.labs-k::before,.labs-k::after{content:"";height:1px;flex:0 1 92px;min-width:28px;
  background:linear-gradient(90deg,transparent,var(--line))}
.labs-k::after{background:linear-gradient(90deg,var(--line),transparent)}

/* full-bleed: the rail is a sibling of .wrap, not inside it, so the marks run
   edge to edge and fade out instead of stopping at a container boundary */
.labs-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.labs-track{display:flex;align-items:center;list-style:none;width:max-content;
  animation:labsRun 30s linear infinite;will-change:transform}
.labs-rail:hover .labs-track,.labs-rail:focus-within .labs-track{animation-play-state:paused}
@keyframes labsRun{from{transform:translateX(0)}to{transform:translateX(-20%)}}

.labs-item{flex:none;width:184px;height:109px;margin-right:20px;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);background:var(--paper);
  box-shadow:0 8px 20px -16px rgba(7,34,32,.8);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.labs-item img{width:100%;height:100%;object-fit:cover;display:block}
.labs-item:hover{transform:translateY(-3px);border-color:var(--teal-200);
  box-shadow:0 14px 28px -18px rgba(7,34,32,.95)}

@media(max-width:560px){
  .labs{padding:26px 0 28px}
  .labs-k{margin-bottom:20px;font-size:.58rem;letter-spacing:.13em;gap:12px}
  .labs-k::before,.labs-k::after{flex:0 1 46px;min-width:14px}
  .labs-item{width:152px;height:90px;margin-right:14px}
}
/* a rail that moves on its own is exactly what this setting is for */
@media(prefers-reduced-motion:reduce){ .labs-track{animation:none} }

/* ================= REVEAL ================= */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ================= RESPONSIVE ================= */
@media(max-width:1240px){ .ncall{display:none} .nact{padding-left:0} .nact::before{display:none} }
@media(max-width:1060px){ .nact .btn{display:none} }
@media(max-width:1340px){ .hc1{right:-8px} .hc2{right:-16px} }
@media(max-width:1140px){
  .hphoto{width:52%}
  .hc1{right:-18px}
  .hc2{right:-24px}
  .hfeat li{padding:16px 15px;gap:11px}
  .hfeat small{font-size:.69rem}
  .hstats .t{font-size:.68rem}
  .hstats{gap:12px}
  .hstats .s+.s{padding-left:16px}
  .hstats .s{padding-right:10px}
  /* tighten the padding before the type — a legible label matters more than a wide one */
  .nlinks{gap:2px;font-size:.88rem}
  .nlinks a{padding:10px 10px;gap:5px}
  .nlinks a.on::after,.nlinks a:hover::after,.nlinks a:focus-visible::after{left:10px;right:10px}
  .nbadge{font-size:.52rem;padding:3px 6px;letter-spacing:.08em}
  .pgrid6{grid-template-columns:repeat(3,1fr)}
  .pph{aspect-ratio:16/10}
  .cgrid{gap:12px}
  .cph{aspect-ratio:5/4}
  .cbody{padding:12px 12px 13px;gap:8px}
  .cc small{font-size:.66rem}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .chgrid{grid-template-columns:repeat(4,1fr);gap:8px}
  .ch .ring{width:88px;height:88px}
  .ch .ring svg{width:36px;height:36px}
}
@media(max-width:960px){
  .hgrid,.qgrid2,.fgrid,.bgrid{grid-template-columns:1fr}
  .hgrid{gap:0}
  /* stacked: the photograph goes full width and sits behind everything, so the
     veil has to run top-to-bottom instead of left-to-right or the copy lands
     on the subject's face */
  .hphoto{width:100%}
  .hphoto img{object-position:64% 26%}
  .hveil{background:
    linear-gradient(180deg,rgba(7,34,32,.96) 0%,rgba(7,34,32,.93) 40%,rgba(7,34,32,.9) 70%,rgba(7,34,32,.97) 100%)}
  .hphoto img{filter:brightness(.66) contrast(1.05) saturate(.85)}
  .hcopy{max-width:none;padding-bottom:0}
  /* The 270px floor dates from when these two cards were pinned over the
     photograph. They are in normal flow from here down and size themselves,
     so the floor only left ~200px of dead hero between them and the trust
     strip on a tablet. */
  .hvis{min-height:0;margin-top:26px;
    display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;align-content:flex-start}
  .hcard{position:static;flex:1 1 260px;min-width:0}
  .hc1,.hc2{animation:none}
  .hfeat{grid-template-columns:1fr 1fr}
  .hfeat li:nth-child(odd){border-left:0}
  .hfeat li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .qgrid2{gap:72px}
  .nlinks{display:none;margin:0}
  .nlinks.show{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ivory);padding:14px 22px 20px;gap:2px;border-bottom:1px solid var(--line);box-shadow:var(--sh);
    animation:navDrop .3s var(--ease) both}
  .nlinks.show a{padding:15px 14px;border-radius:9px;border-bottom:1px solid var(--line-2);
    font-size:.95rem;font-weight:700}
  /* the centre-out rule makes no sense stacked; mark the row instead */
  .nlinks.show a::after{display:none}
  .nlinks.show a:hover{background:transparent;color:var(--teal)}
  .nlinks.show a.on{color:var(--teal);background:var(--teal-50);padding-left:20px;border-bottom-color:transparent}
  .nlinks.show a.on::before{content:"";position:absolute;left:8px;top:13px;bottom:13px;width:3px;
    background:var(--gold);border-radius:3px}
  .nlinks.show > a:last-of-type{border-bottom:0}

  /* Calling and booking are the two things the header does on a desktop.
     The burger used to swallow both, leaving the sheet ending on "Contact Us". */
  .nlinks.show .nsheet{display:flex;flex-direction:column;gap:10px;
    margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
  .nlinks.show .nsheet a{border-bottom:0}
  .nlinks.show .nsheet-call{display:flex;align-items:center;gap:12px;padding:11px 13px;
    border:1px solid var(--line);border-radius:10px;background:var(--paper);font-weight:600}
  .nsheet-call .ic{width:36px;height:36px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
    color:var(--teal);background:var(--teal-50)}
  .nsheet-call .ic svg{width:16px;height:16px}
  .nsheet-call small{display:block;font-size:.63rem;font-weight:800;letter-spacing:.13em;
    text-transform:uppercase;color:var(--grey-2);line-height:1}
  .nsheet-call b{display:block;font-size:.95rem;font-weight:800;color:var(--ink);line-height:1.3;margin-top:3px}
  .nlinks.show .nsheet .btn{justify-content:center;padding:15px 22px;border-radius:10px;font-size:.9rem}
  @keyframes navDrop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
  /* the sheet rides with the sticky header; scroll-chaining is contained rather
     than locking the body, which would make the body a scroll container and
     un-stick the very header the sheet hangs from */
  .nlinks.show{overscroll-behavior:contain}
  .burger{display:flex}
  /* rail collapses to 2 columns — the spine only reads on a single row */
  /* the track stretches every slide to the tallest one; the photo row is
     pinned so that slack goes to the text panel, not to a dark band between
     the photo and the copy */
  .pslide{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
  .pslide .ptxt{padding:36px 28px 30px;order:2;justify-content:flex-start}
  .pslide .pimg{order:1;min-height:230px;height:230px}
  .pslide .pimg::before{background:linear-gradient(0deg,rgb(var(--sl-rgb)) 0%,rgba(var(--sl-rgb),.86) 16%,rgba(var(--sl-rgb),.42) 34%,rgba(var(--sl-rgb),.10) 52%,rgba(var(--sl-rgb),0) 68%)}
  .pslide .pimg::after{background:linear-gradient(180deg,rgba(4,20,19,.26) 0%,rgba(4,20,19,0) 40%)}
  .pdots{left:28px;bottom:14px}
  .parr{width:36px;height:36px}
  .pkgrid{grid-template-columns:1fr}
  .pc2.hot{order:-1}
  .chgrid{grid-template-columns:repeat(2,1fr);gap:26px}
  .chgrid::before{display:none}
  .pstep{grid-template-columns:auto 1fr;gap:20px}
  .pstep .ic{display:none}
  .fgrid2{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:span 2}
  .advisor{max-width:290px;padding:8px 16px 8px 8px}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding:40px 0 60px}
  .promo{padding-top:56px}
  .hm-chap .wrap{height:50px}
  .hm-chap a{font-size:.77rem;padding:0 13px}
  .hm-chap ~ section[id],#onsite{scroll-margin-top:126px}
  .progs,.conc,.tests,.pk,.proc,.rev,.faq,.qual,.chain{padding:66px 0}
  .book{padding-bottom:66px}
  .nact .btn{display:none}
  #nav nav{gap:12px;height:70px}
  .brand .mark{width:48px;height:48px}
  .brand .wm b{font-size:1.7rem}
  .tgrid{grid-template-columns:1fr 1fr}
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .pgrid6{grid-template-columns:1fr 1fr}
  .chgrid{grid-template-columns:1fr 1fr;gap:22px}
  .hstats{grid-template-columns:1fr 1fr;gap:22px 18px}
  .hstats .s{padding-right:0}
  .hstats .s+.s{padding-left:0;border-left:0}
  .hstats .s:nth-child(even){padding-left:20px;border-left:1px solid rgba(255,255,255,.13)}
  .hcard{padding:11px 14px}
  .bpanel{padding:36px 22px}
  .bform{padding:26px 20px}
  .frow{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr}
  .fbrand{grid-column:auto}
  .fbot{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 0 84px}
  .fbot .lnks{margin-right:0}
  .fmade{align-self:stretch;justify-content:center}
  .qbadge{right:0;bottom:-14px;padding:18px 20px}
  .pslide .ptxt{padding:30px 20px 26px}
  .pdots{left:20px}
  .parr{display:none}  /* swipe handles navigation on touch */
}
/* ---- phones: 480px and below ---- */
@media(max-width:480px){
  .wrap{padding:0 18px}
  /* test cards carry a name, a description and a price row — two columns
     squeezes all three; one column reads far better on a phone */
  .tgrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .tc{padding:20px 18px}
  .pgrid6{gap:10px}
  .cgrid{grid-template-columns:1fr 1fr;gap:10px}
  .cbody{padding:11px 12px 12px;gap:7px}
  .cc b{font-size:.86rem}
  .cc small{font-size:.65rem}
  .cchip{width:30px;height:30px;top:9px;left:9px}
  .cchip svg{width:15px;height:15px}
  .cgo{width:28px;height:28px}
  .cgo svg{width:13px;height:13px}
  .pcard{padding-bottom:18px}
  .pbody{padding:34px 8px 0}
  .pcard b{font-size:.87rem}
  .pcard small{font-size:.72rem}
  .pmed{width:50px;height:50px}
  .pmed svg{width:23px;height:23px}
  .chgrid{gap:18px}
  .ch .ring{width:76px;height:76px;border-width:4px;box-shadow:0 0 0 6px var(--gold-pale)}
  .ch .ring svg{width:30px;height:30px}
  .pc2{padding:28px 22px}
  .pstep{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:22px 0}
  .pstep .n{min-width:44px}
  .bpanel{padding:30px 18px}
  .bform{padding:22px 17px}
  .fgrid{gap:32px}
  .fq button{font-size:.92rem;gap:12px;padding:17px 0}
  .brand .wm span{font-size:.62rem;letter-spacing:.18em}
  .tsearch{flex-wrap:wrap;gap:7px}
  .tsearch .btn{width:100%}
  .hfeat{grid-template-columns:minmax(0,1fr)}
  .hfeat li{border-left:0}
  .hfeat li+li{border-top:1px solid rgba(255,255,255,.12)}
}

/* ---- very small phones: 360px and below ---- */
@media(max-width:400px){
  /* brand + burger must fit one row */
  #nav nav{gap:8px}
  .brand .mark{width:46px;height:46px}
  .brand .wm b{font-size:1.62rem}
  .brand .wm span{font-size:.6rem}
}
/* ---- 340px and below (small/older phones, or 320px zoomed) ---- */
@media(max-width:340px){
  .brand .wm b{font-size:1.48rem}
  .brand .wm span{font-size:.56rem}
  .brand .mark{width:42px;height:42px}
  .burger{padding:7px}
}
@media(max-width:360px){
  .wrap{padding:0 15px}
  .cgrid{gap:9px}
  .pgrid6{grid-template-columns:1fr 1fr;gap:9px}
  .pbody{padding:30px 6px 0}
  .pmed{width:44px;height:44px;border-width:2.5px}
  .pmed svg{width:20px;height:20px}
  .pcard b{font-size:.82rem}
  .pcard small{font-size:.69rem}
  .chgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
}

/* Inputs below 16px make iOS Safari zoom the page on focus and never zoom
   back out. Hold them at 16px wherever a touch keyboard is likely. */
@media(max-width:900px){
  .fld input,.fld select,.tsearch input{font-size:16px}
}

/* Touch targets: pointer-coarse devices need a real hit area, not just text. */
@media(pointer:coarse){
  .fcol a,.fbot a,.chips a,.nlinks a,.fcont a{min-height:40px;display:flex;align-items:center}
  .fcol a{margin-bottom:2px}
  .chips a{padding:9px 14px}
  .fq button{min-height:48px}
  .pdot{padding:8px}
}

/* Short landscape phones: reclaim vertical space so the hero is usable. */
@media(max-height:480px) and (orientation:landscape){
  .hero{padding:26px 0 34px}
  .progs,.conc,.tests,.pk,.proc,.rev,.faq,.qual,.chain{padding:48px 0}
  #nav nav{height:58px}
  .advisor,.wapp{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hm-chap .wrap{scroll-behavior:auto}
}


/* ==========================================================
   PROMO CAROUSEL — motion
   The `.js` class is added by main.js, so with JS off every
   slide stays fully visible instead of animating from nothing.
========================================================== */

/* --- staged entrance for the active slide's copy --- */
/* Every delay below is keyed off --pmove (the travel time) so the copy starts
   arriving just as the track stops, never over a moving background. The whole
   sequence finishes well inside --pdur, the autoplay dwell. */
.pcar.js .pslide .ptxt>*{opacity:0;transform:translateY(14px)}
.pcar.js .pslide.is-active .ptxt>*{animation:pIn .40s cubic-bezier(.22,.72,.3,1) both}
.pcar.js .pslide.is-active .ptxt>*:nth-child(1){animation-delay:calc(var(--pmove,.42s) * .62)}
.pcar.js .pslide.is-active .ptxt>*:nth-child(2){animation-delay:calc(var(--pmove,.42s) * .62 + .045s)}
.pcar.js .pslide.is-active .ptxt>*:nth-child(3){animation-delay:calc(var(--pmove,.42s) * .62 + .09s)}
.pcar.js .pslide.is-active .ptxt>*:nth-child(4){animation-delay:calc(var(--pmove,.42s) * .62 + .135s)}
.pcar.js .pslide.is-active .ptxt>*:nth-child(5){animation-delay:calc(var(--pmove,.42s) * .62 + .18s)}
@keyframes pIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the badge gets a touch more character than the rest */
.pcar.js .pslide.is-active .plogo{animation:pLogo .42s var(--spring) both;animation-delay:calc(var(--pmove,.42s) * .62)}
@keyframes pLogo{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}

/* --- Ken Burns drift on the active photo ---
   Runs for exactly one dwell (--pken, set from the autoplay interval in JS) so
   the zoom completes instead of being cut off part-way by the next slide. */
.pcar.js .pslide .pimg img{transform:scale(1.045)}
.pcar.js .pslide.is-active .pimg img{animation:pKen var(--pken,2000ms) linear both}
@keyframes pKen{from{transform:scale(1.055)}to{transform:scale(1.005)}}

/* --- autoplay progress rail --- */
.pprog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:7;background:rgba(255,255,255,.13);pointer-events:none}
.pprog i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-soft));box-shadow:0 0 14px rgba(201,162,75,.55)}
.pcar.js .pprog i.run{animation:pBar var(--pdur,6000ms) linear forwards}
.pcar.js:hover .pprog i.run,.pcar.js:focus-within .pprog i.run{animation-play-state:paused}
@keyframes pBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- chrome polish --- */
.parr{opacity:.55;transition:opacity .35s var(--ease),background .3s var(--ease),transform .35s var(--spring)}
.pcar:hover .parr,.parr:focus-visible{opacity:1}
.parr:hover{transform:translateY(-50%) scale(1.09)}
.parr:active{transform:translateY(-50%) scale(.96)}
.pdots button:hover{background:rgba(255,255,255,.7)}
.pdots button.on{box-shadow:0 0 12px rgba(201,162,75,.65)}

@media (prefers-reduced-motion: reduce){
  .ptrack{transition:none}
  .pcar.js .pslide .ptxt>*,.pcar.js .pslide.is-active .ptxt>*,.pcar.js .pslide.is-active .plogo{opacity:1;transform:none;animation:none}
  .pcar.js .pslide .pimg img,.pcar.js .pslide.is-active .pimg img{transform:none;animation:none}
  .pprog{display:none}
}

/* ================= SPECIALIST CLINIC ================= */
.docs{padding:96px 0;background:linear-gradient(180deg,var(--ivory-2),var(--ivory))}
.docs .shead .l{max-width:720px}
.docs .shead .lede{margin-top:16px}

/* Four across rather than three. At three the cards ran ~380px wide, which
   left a tall empty portrait and short lines of text swimming in the middle
   of each one; narrower cards put the picture and the words back in
   proportion to each other. */
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dc{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
.dc:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent}

/* ---------- the portrait ----------
   Square, so eleven photographs of eleven shapes crop to one grid, and so the
   empty state is not a tall band of nothing while we wait for them. */
.dphoto{position:relative;aspect-ratio:1/1;flex:none;overflow:hidden;
  background:linear-gradient(160deg,var(--teal-50),var(--teal-100));
  display:grid;place-items:center;align-content:center;gap:10px;
  border-bottom:1px solid var(--teal-100)}
.dphoto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,transparent 2px 13px);opacity:.5}
.dphoto>*{position:relative;z-index:2}
/* z-index above the monogram, so a photograph hides the placeholder on its own
   even where :has() below is unsupported */
.dphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  z-index:4;transition:transform .6s var(--ease)}
.dc:hover .dphoto img{transform:scale(1.04)}
/* the monogram sits in a disc ringed in paper, the way a portrait is mounted */
.dpmono{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  font-family:'Instrument Serif',Georgia,serif;font-size:1.82rem;color:var(--teal);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--teal-100),0 0 0 6px rgba(255,255,255,.5),
             0 12px 26px -16px rgba(7,34,32,.85)}
.dpnote{font-size:.55rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);opacity:.55}
.dphoto:has(img) .dpmono,.dphoto:has(img) .dpnote,.dphoto:has(img)::before{display:none}

/* ---------- the plate ----------
   The speciality chip straddles the seam between picture and plate, the way a
   name tag is clipped to a coat. It carries the speciality glyph that used to
   float loose in the corner of the photograph. */
.dbody{position:relative;z-index:5;display:flex;flex-direction:column;flex:1;
  background:var(--paper);padding:26px 18px 18px}
.dtag{position:absolute;top:-14px;left:16px;z-index:6;
  display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 32px);
  font-size:.58rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#2c2206;background:var(--gold);border-radius:100px;padding:6px 11px 6px 9px;
  box-shadow:0 8px 18px -10px rgba(201,162,75,.95);
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.dtag svg{width:13px;height:13px;stroke-width:1.9;flex:none}
.dc:hover .dtag{background:var(--teal);color:#fff}

.dc h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.2rem;
  line-height:1.16;letter-spacing:-.01em;margin-bottom:6px}
.dq{font-size:.76rem;color:var(--grey);line-height:1.5;margin-bottom:5px}
.daff{font-size:.7rem;color:var(--grey-2);line-height:1.5;margin-bottom:14px}

/* days / time on a two-column list so they stay aligned card to card */
.dwhen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin-top:auto;
  padding-top:13px;border-top:1px solid var(--line-2)}
.dwhen dt{font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-2);padding-top:2px}
.dwhen dd{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.35}
.dwhen dd em{display:block;font-style:normal;font-weight:600;font-size:.72rem;color:var(--grey);margin-top:2px}

/* the two consultants who keep no fixed evening clinic */
.dappt{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:13px;
  border-top:1px solid var(--line-2);font-size:.76rem;font-weight:800;color:var(--gold-2)}
.dappt svg{width:14px;height:14px;flex:none}

.dnote{display:flex;align-items:flex-start;gap:10px;margin-top:26px;font-size:.85rem;color:var(--grey)}
.dnote svg{width:17px;height:17px;color:var(--gold-2);flex-shrink:0;margin-top:2px}
.dnote b{color:var(--ink);font-weight:800}
.dnote a{color:var(--teal);font-weight:800;border-bottom:1px solid var(--gold);padding-bottom:1px}

/* ---------- on-site procedures ----------
   Four groups on a 3fr / 4fr grid: the left column holds three cards a row and
   the right four, so the split keeps every card the same width and the two
   rows of groups line up across the gutter. */
.onsite{position:relative;isolation:isolate;overflow:hidden;margin-top:56px;
  background:linear-gradient(180deg,#fdfcf9,var(--ivory));border:1px solid var(--line-2);
  border-radius:28px;padding:52px 46px 46px;
  box-shadow:inset 0 1px 0 #fff,0 34px 70px -56px rgba(7,34,32,.45)}
/* decoration stays behind everything and well into the corners */
.os-deco{position:absolute;z-index:-1;pointer-events:none;stroke:none}
.os-deco-a{width:300px;top:-168px;left:-132px;fill:var(--teal-50)}
.onsite::after{content:"";position:absolute;z-index:-2;right:-130px;bottom:-170px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(216,235,229,.75),rgba(216,235,229,0));pointer-events:none}

.os-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 32px;flex-wrap:wrap;margin-bottom:40px}
.os-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.os-eyebrow i{width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-200),#9fd2c2)}
.os-head h3{font-size:clamp(2rem,3.6vw,2.85rem);color:var(--teal-900);letter-spacing:-.022em;margin-bottom:12px}
.os-head h3+p{color:var(--grey);font-size:1rem;max-width:52ch}
.os-where{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:var(--teal);
  background:var(--paper);border:1px solid var(--line-2);border-radius:100px;padding:8px 15px 8px 12px}
.os-where svg{width:15px;height:15px;color:var(--gold-2);flex:none}

.os-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr);gap:40px 34px}
.os-gh{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:1rem;line-height:1.25;
  letter-spacing:-.005em;color:var(--teal-900)}
.os-gh::after{content:"";order:1;flex:1;height:1px;margin-left:6px;background:linear-gradient(90deg,var(--line),rgba(228,223,210,.35))}
/* the group's card count closes its rule, set like a folio number */
.os-count{order:2;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.05rem;
  letter-spacing:.04em;color:var(--grey-2)}
.os-gic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--teal);background:var(--teal-50);box-shadow:inset 0 0 0 1px var(--teal-100)}
.os-gic svg{width:18px;height:18px;stroke-width:1.8}

.os-cards{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.os-cards li{display:flex}
.svc{position:relative;display:flex;flex-direction:column;width:100%;
  background:radial-gradient(130% 62% at 0 0,rgba(238,245,242,.85),rgba(238,245,242,0) 62%),var(--paper);
  border:1px solid rgba(13,71,68,.09);border-radius:20px;padding:16px 16px 14px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(7,34,32,.04),0 14px 28px -24px rgba(7,34,32,.42);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.svc-art{position:relative;display:block;width:5.4rem;aspect-ratio:1;margin:0 0 14px -4px}
/* a soft contact shadow, so the illustration sits on the card rather than on top of it */
.svc-art::after{content:"";position:absolute;left:20%;right:20%;bottom:-3px;height:9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(7,34,32,.13),rgba(7,34,32,0));
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.svc-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .5s var(--ease)}
/* kFall's stand-in is a full-bleed scene, so give it the tile's shape */
.svc-art img[src^="data:"]{border-radius:24%}
.svc b{display:block;font-size:.92rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--teal-900);margin-bottom:5px}
.svc-d{display:block;font-size:.76rem;line-height:1.5;color:var(--grey)}
.svc-more{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px;
  font-size:.72rem;font-weight:800;color:var(--teal);
  opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.svc-more svg{width:12px;height:12px;stroke-width:2.3}
.svc:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.svc:hover,.svc:focus-visible{border-color:rgba(13,71,68,.22);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(7,34,32,.05),0 20px 34px -24px rgba(7,34,32,.55)}
.svc:hover .svc-art img,.svc:focus-visible .svc-art img{transform:translateY(-4px) scale(1.04)}
.svc:hover .svc-art::after,.svc:focus-visible .svc-art::after{transform:scale(.84);opacity:.7}
.svc:hover .svc-more,.svc:focus-visible .svc-more{opacity:1;transform:none}
/* no hover on touch screens, so the link cue is simply always there */
@media(hover:none){ .svc-more{opacity:.85;transform:none} }


/* Under ~1180 a 3:4 split would squeeze a card below its text. The 2x2 group
   grid stays, but each card turns into a compact row (picture left, name and
   line right), which roughly halves the block's height on a tablet. */
@media(max-width:1180px){
  .os-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
  .os-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc{display:grid;grid-template-columns:4rem minmax(0,1fr);column-gap:14px;align-items:center;
    padding:12px 38px 12px 12px;border-radius:16px}
  .svc-art{grid-row:1/3;width:4rem;margin:0}
  .svc b{align-self:end;margin-bottom:2px;font-size:.88rem}
  .svc-d{align-self:start;font-size:.74rem;line-height:1.45}
  .svc-more{position:absolute;top:50%;right:12px;padding:0;font-size:0;gap:0;
    opacity:.45;transform:translateY(-50%)}
  .svc-more svg{width:14px;height:14px}
  .svc:hover .svc-more,.svc:focus-visible .svc-more{opacity:1;transform:translateY(-50%)}
}
@media(max-width:900px){
  .onsite{margin-top:44px;border-radius:24px;padding:40px 28px 36px}
  .os-head{margin-bottom:32px}
}
@media(max-width:760px){
  .os-grid{grid-template-columns:minmax(0,1fr)}
  .os-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .onsite{border-radius:22px;padding:32px 18px 28px}
  .os-cards{grid-template-columns:minmax(0,1fr)}
  .os-gh{font-size:.95rem;margin-bottom:14px}
  .os-gic{width:34px;height:34px}
  .os-grid{gap:28px}
}
@media(max-width:400px){
  .onsite{padding:28px 14px 24px}
}
@media(prefers-reduced-motion:reduce){
  .svc-art img,.svc-art::after,.svc-more{transition:none}
  .svc:hover .svc-art img,.svc:focus-visible .svc-art img{transform:none}
}

@media(max-width:1180px){ .dgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:860px){ .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){ .docs{padding:76px 0} }
@media(max-width:620px){
  .dgrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .dbody{padding:24px 18px 18px}
  /* one column means a square portrait is as wide as the screen and as tall;
     eleven of those is most of the scroll, so the frame flattens here */
  .dphoto{aspect-ratio:3/2}
  .dc h3{font-size:1.2rem}
}
@media(max-width:400px){
  .dwhen{grid-template-columns:minmax(0,1fr);gap:2px}
  .dwhen dt{padding-top:8px}
}


/* Smooth cross-document fade between pages (Chrome; others just navigate). */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} }

/* ================= LARGE DISPLAYS =================
   Nothing here restyles anything. The page keeps its proportions and simply
   takes more of the glass: the measure widens in steps, the root type grows
   with it so a big monitor gets a bigger page rather than the same small page
   marooned in the middle, and the card grids gain columns instead of wider
   cards. On a 1366 laptop the container already fills about 91% of the width;
   these steps hold roughly that ratio out to 2560.

   Eleven consultants is a prime number, so the column count decides whether
   the last row reads as a row or as one stranded card: 4 gives 4+4+3, 6 gives
   6+5 and 7 gives 7+4, but 5 would give 5+5+1. The grid steps 4 -> 6 -> 7 and
   never passes through five. */
@media(min-width:1400px){
  :root{--wrap:1340px;--gutter:34px;--hcopy:660px}
}
@media(min-width:1600px){
  :root{--wrap:1480px;--gutter:38px;--hcopy:700px}
  html{font-size:16.5px}
}
@media(min-width:1800px){
  :root{--wrap:1660px;--gutter:42px;--hcopy:780px}
  html{font-size:17px}
  .hero{padding:58px 0 34px}
}
/* a four-up row of test cards starts to stretch here */
@media(min-width:1900px){
  .tgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:2100px){
  :root{--wrap:1840px;--gutter:46px;--hcopy:850px}
  html{font-size:17.5px}
}
@media(min-width:2500px){
  :root{--wrap:2120px;--gutter:50px;--hcopy:960px}
  html{font-size:18px}
  .hero{padding:74px 0 44px}
  .dgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(min-width:3000px){
  :root{--wrap:2400px;--gutter:56px;--hcopy:1040px}
  html{font-size:18.5px}
  .dgrid{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media(min-width:3400px){
  :root{--wrap:2700px;--gutter:60px;--hcopy:1140px}
  html{font-size:19px}
  .dgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cgrid{grid-template-columns:repeat(7,minmax(0,1fr))}
}