/* =========================================================
   Arogyadham — Dr. Amrit Raj
   Design system based on demo.html
   ========================================================= */

:root{
  /* brand — built around the theme colour #2e3469 */
  --blue:#2e3469;        /* primary fills: buttons, pills, gradients */
  --blue-deep:#1f2450;   /* hover / pressed */
  --blue-soft:#4c54a6;   /* accent text & icons — lighter so it reads as accent, not heading */
  --blue-glow:#6d76c9;   /* gradient light end + glows */
  --mint:#dcf6e6;
  --mint-deep:#3fb87f;
  --lav:#ecedf8;         /* light brand tint */
  --bg:#f6f7fc;
  --card:#ffffff;
  --navy:#161936;        /* headings + dark sections */
  --ink:#1c2033;
  --ink-soft:#757990;
  --line:#e6e8f2;
  --radius:28px;
  --header-h:64px;   /* height of the sticky nav row (row 2), not the whole header */
  --font:'DM Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* SVG/PNG icons are flat black — these recolour them without touching the files */
  --ico-theme:brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(1022%) hue-rotate(206deg) brightness(92%) contrast(88%); /* #2e3469 */
  --ico-white:brightness(0) invert(1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 10px);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--card);          /* white by default */
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
.wrap{max-width:1240px;margin:0 auto;padding-inline:32px;}

/* DM Sans for headings — 700 is its top weight and already reads bold */
h1,h2,h3,h4,h5{
  font-family:var(--font);
  font-weight:700;letter-spacing:-0.02em;color:var(--navy);line-height:1.22;
}
h1{letter-spacing:-0.03em;}

/* ---------------- ICONS ----------------
   assets/img/icons/*.svg are flat black on transparent — the filter recolours
   them. Indigo by default; .ico-light flips them white for dark backgrounds. */
.ico{
  display:inline-block;flex:none;
  width:16px;height:16px;object-fit:contain;vertical-align:-0.16em;
  filter:var(--ico-theme);
}
.ico-light{filter:var(--ico-white);}
/* already-coloured artwork (the E-RYT 500 seal) — no recolouring, and a white
   chip behind it so the green seal reads against a dark background */
.ico-badge{filter:none;background:#fff;border-radius:50%;padding:2px;}

/* ---------------- SECTION UTILITIES ----------------
   One vertical rhythm for the whole page. Put `spacing` on a <section>
   instead of giving that section its own padding — nothing else should
   set padding-block on a section.
   The page is white by default; `bg-alt` tints a section to break the run. */
.spacing{padding-block:clamp(52px, 5.2vw, 80px);}
.bg-alt{background:var(--bg);}

/* ---------------- TYPE SCALE ----------------
   Section headings scale with the viewport instead of being pinned per
   breakpoint — one clamp covers phone through desktop, so there is no
   font-size left to chase in the media queries. */
:root{
  --h2:clamp(1.65rem, 4.4vw, 2.4rem);      /* section headings */
  --h3:clamp(1.22rem, 2.9vw, 1.5rem);      /* panel headings */
  --eyebrow:clamp(0.75rem, 1.9vw, 0.85rem);
}

/* ---------------- INLINE PROSE LINKS ----------------
   the global a{} strips colour and underline for nav and cards, so a link
   sitting inside a sentence needs this to read as a link at all */
.tlink{
  color:var(--blue-soft);border-bottom:1px solid rgba(76,84,166,.35);
  transition:color .2s ease, border-color .2s ease;
}
.tlink:hover{color:var(--blue);border-color:var(--blue);}
/* on the dark consultation banner the indigo would disappear into the navy */
.banner-copy .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.45);}
.banner-copy .tlink:hover{color:var(--mint-deep);border-color:var(--mint-deep);}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

/* ---------------- BUTTONS ---------------- */
/* Filled pill by default, outline on hover — the fill drops away and the
   border stays. line-height:1 keeps the pill slim; the border is present in
   both states (transparent when filled) so nothing shifts on hover. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:100px;
  font-family:inherit;font-weight:700;font-size:0.85rem;line-height:1;
  letter-spacing:.005em;white-space:nowrap;
  border:2px solid transparent;cursor:pointer;
  transition:background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.btn-primary{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 10px 22px -12px rgba(46,52,105,0.7);
}
.btn-primary:hover{background:transparent;color:var(--blue);box-shadow:none;}

/* inverse of primary — outline first, fills on hover */
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line);}
.btn-ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

.btn-mint{
  background:var(--mint-deep);border-color:var(--mint-deep);color:#fff;
  box-shadow:0 10px 22px -12px rgba(63,184,127,0.7);
}
.btn-mint:hover{background:transparent;color:var(--mint-deep);box-shadow:none;}

/* for use over photography / dark panels — indigo fill would sink into a scrim */
.btn-light{background:#fff;border-color:#fff;color:var(--navy);}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff;}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,0.5);color:#fff;}
.btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--navy);}

/* on dark panels the outline state needs to stay light, not go indigo */
.appt-side .btn-primary:hover{color:#fff;border-color:#fff;}

/* ---------------- LOGO ---------------- */
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;line-height:1;}
.logo-icon{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
/* icons ship as flat black on transparent — recolour to the brand indigo */
.logo-icon img{width:34px;height:34px;object-fit:contain;filter:var(--ico-theme);}
.logo:hover .logo-icon{transform:translateY(-2px);}

/* the honorific stacks above the wordmark rather than running inline with it:
   the top bar shares its row with the contact list and the compact logo shares
   its row with the whole nav, so the lockup can afford height but not width */
.logo-text{display:flex;flex-direction:column;justify-content:center;font-size:1.7rem;letter-spacing:-0.035em;}
/* floored in px: at .34em the compact logo's 1.28rem would put this at ~7px,
   which stops being readable as text */
.lt-pre{
  font-size:clamp(9px, .34em, 12px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-soft);line-height:1.35;
}
.lt-name{display:flex;align-items:baseline;gap:.12em;}
.lt-thin{font-weight:400;color:var(--blue-soft);}
.lt-bold{font-weight:700;color:var(--navy);}

/* dark-background variant (footer) */
.logo-light .logo-icon img{filter:var(--ico-white);}
.logo-light .lt-pre{color:var(--blue-glow);}
.logo-light .lt-thin{color:var(--blue-glow);}
.logo-light .lt-bold{color:#fff;}

/* ---------------- HEADER ---------------- */
header{position:relative;z-index:100;}

/* row 1 — logo + contact details */
.topbar{background:var(--card);border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:17px;}

.contact-bar{display:flex;align-items:center;gap:32px;}
.contact-bar li{font-size:0.87rem;font-weight:500;color:var(--navy);}
.contact-bar a,.contact-bar .cb-row{display:flex;align-items:center;gap:11px;transition:color .2s ease;}
.contact-bar a:hover{color:var(--blue-soft);}
.contact-bar a:hover .cb-icon{background:#e2e4f4;}
.cb-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:var(--lav);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.cb-icon .ico{width:15px;height:15px;vertical-align:0;}

/* row 2 — navigation.
   NOT position:sticky: a sticky element is confined to its parent's box, and
   <header> is only ~136px tall, so the bar would scroll away with it. It goes
   position:fixed once the top bar has cleared instead. */
.navbar{
  position:relative;z-index:101;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
header.scrolled .navbar{
  position:fixed;top:0;left:0;right:0;
  box-shadow:0 10px 30px -22px rgba(20,25,60,0.45);
}
/* going fixed pulls the bar out of flow — reserve its height so the page
   underneath doesn't jump up by 64px at the switch point */
header.scrolled{padding-bottom:var(--header-h);}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);}

/* slides in only once the top bar has fully scrolled away — animated on
   max-width/opacity rather than display, so the nav glides instead of jumping */
.logo-compact{
  display:flex;overflow:hidden;
  max-width:0;margin-right:0;opacity:0;transform:translateX(-12px);
  pointer-events:none;
  transition:max-width .45s cubic-bezier(.22,.8,.3,1),
             margin-right .45s cubic-bezier(.22,.8,.3,1),
             opacity .3s ease .08s,
             transform .45s cubic-bezier(.22,.8,.3,1);
}
.logo-compact .logo-icon{width:30px;height:30px;}
.logo-compact .logo-icon img{width:28px;height:28px;}
.logo-compact .logo-text{font-size:1.28rem;white-space:nowrap;}
.logo-compact:hover .logo-icon{transform:none;}   /* lift would clip against overflow:hidden */
header.scrolled .logo-compact{
  max-width:300px;margin-right:28px;opacity:1;transform:none;pointer-events:auto;
}

nav{flex:1;}
nav ul{display:flex;align-items:center;gap:30px;}
nav a{
  font-size:0.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .25s;position:relative;white-space:nowrap;
}
nav a:hover,nav a.active{color:var(--blue-soft);}
nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--blue-soft);border-radius:2px;
}
.nav-cta-li{display:none;}
.header-cta{flex-shrink:0;padding:10px 22px;font-size:0.79rem;}

/* solid indigo tile — balances the Book Appointment pill at the other end of
   the bar and reads as a real button, which the faint circle did not */
/* flex column, not grid: grid's default align-content stretched the three
   rows across the full 44px, so the bars ended up ~17px apart while the X
   transform assumed gap + bar-height. They never met, and it read as a
   chevron. Flex keeps each bar its own height, so the spacing is exact. */
.nav-toggle{
  --bar-gap:7px;
  --bar-h:2px;
  display:none;width:44px;height:44px;flex-shrink:0;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--bar-gap);
  border:0;border-radius:13px;background:var(--blue);
  cursor:pointer;padding:0;
  box-shadow:0 8px 18px -10px rgba(46,52,105,0.8);
  transition:background .25s ease, transform .2s ease;
}
.nav-toggle:active{transform:scale(.94);}
.nav-toggle[aria-expanded="true"]{background:var(--blue-deep);}
.nav-toggle span{
  display:block;width:20px;height:var(--bar-h);border-radius:2px;background:#fff;
  transition:transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s ease;
}
/* travel is derived from the gap, so the two can never drift apart again */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(var(--bar-gap) + var(--bar-h))) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(-1 * (var(--bar-gap) + var(--bar-h)))) rotate(-45deg);}

/* ---------------- SHARED: photo hero + banner ---------------- */
.eyebrow-line{
  display:flex;align-items:center;gap:10px;
  font-size:0.85rem;font-weight:600;color:var(--blue-soft);
  letter-spacing:.04em;margin-bottom:18px;
}
.eyebrow-line .dot{width:8px;height:8px;border-radius:50%;background:var(--mint-deep);flex-shrink:0;}
.eyebrow-line.light{color:#fff;}

/* ---------------- HERO ---------------- */
.hero{
  /* one knob drives the whole split: the width of the photo column. .wrap is
     centred, so its content box shares the viewport's midline — which means the
     same percentage lands the copy column flush against the photo's left edge
     without a single hard-coded pixel. */
  --hero-photo:48%;
  position:relative;overflow:hidden;background:var(--navy);isolation:isolate;
}

/* The photo gets a column of its own, bleeding off the right of the viewport,
   with nothing laid over it. Sized by its own ratio and centred rather than
   stretched to the full height: this column is taller than the picture is deep
   at most widths, and a cover-crop there lops the end figures out of the group. */
.hero-media{
  position:absolute;top:0;right:0;bottom:0;width:var(--hero-photo);z-index:2;
  display:flex;align-items:center;
}
.hero-media img{width:100%;height:auto;max-height:100%;object-fit:contain;}

/* seamless medical pattern. The tile is dark line-art on white, so it is
   inverted to light-on-dark and screened in — that drops the white background
   out and leaves only the linework. It runs the full width and the photo simply
   paints over it, so the texture is continuous behind both columns and no mask
   is needed to keep it off the picture. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(../img/seamless.webp) repeat;
  background-size:300px 300px;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:.07;
}


.hero-inner{
  position:relative;z-index:3;
  min-height:clamp(490px,50vw,620px);
  /* two real columns: the copy, then an empty spacer exactly as wide as the
     photo. The text can no longer run under the picture, which is what the
     gradient scrim used to be there to survive. */
  display:grid;
  grid-template-columns:calc(100% - var(--hero-photo)) var(--hero-photo);
  align-items:center;
  /* padding-block, not the shorthand: `padding:72px 0 104px` would reset the
     side padding .wrap provides and run the copy into the screen edge */
  padding-block:72px 104px;
}
/* the grid column sets the measure now; the gutter is what keeps the last word
   off the photo's edge. The paragraph below keeps its own narrower measure. */
.hero-copy{max-width:none;padding-right:clamp(20px,2.6vw,40px);}

.hero h1{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1.1;margin-bottom:20px;color:#fff;}
.hero h1 span{color:var(--mint-deep);}
.hero p.lead{color:rgba(255,255,255,0.78);font-size:1.02rem;max-width:48ch;margin-bottom:30px;}
.hero-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

/* text only — the rule between each pair carries the separation that the
   icons used to, so nothing else has to stand in for them */
.hero-facts{display:flex;flex-wrap:wrap;margin-top:38px;}
.hero-facts li{
  display:flex;align-items:center;
  /* fluid, not fixed: the copy column is roughly half the width it used to be,
     so the three stats have to give ground between 940 and 1240 to hold their
     one row — wrapped, the left borders read as stray rules, not dividers. */
  padding:2px clamp(13px,1.9vw,26px);border-left:1px solid rgba(255,255,255,0.2);
}
.hero-facts li:first-child{padding-left:0;border-left:0;}
.hero-facts b{display:block;color:#fff;font-size:clamp(1.02rem,1.42vw,1.24rem);font-weight:700;letter-spacing:-0.02em;line-height:1.35;}
.hero-facts span{font-size:clamp(0.7rem,0.92vw,0.78rem);color:rgba(255,255,255,0.6);}


/* ---------------- STRIP CARDS ---------------- */
/* sits outside .hero and rides up over the photo's bottom edge */
/* auto-fit rather than a fixed count: three cards sit in a row on desktop and
   drop to two before the text starts wrapping to shreds. The ≤940 rule below
   still forces a single column on tablet and phone. */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:-52px;position:relative;z-index:3;}
/* icon left, copy right, and the call to action is an arrow link at the foot
   of the copy rather than a pill — a pill either steals the width the text
   needs or costs a whole row of height under it. The whole card is the link,
   the same way the treatment tiles work. */
.strip-card{
  background:#fff;border-radius:22px;padding:20px 24px;
  display:flex;align-items:flex-start;gap:16px;
  box-shadow:0 20px 44px -22px rgba(20,25,60,0.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.strip-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -24px rgba(20,25,60,0.2);}
/* no tile behind these — the icon carries itself at this size */
.strip-icon-box{flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.strip-icon-box .ico{width:44px;height:44px;vertical-align:0;}
/* the ashram logo is full-colour artwork, so it must skip the .ico indigo
   filter the flat-black icons rely on */
.strip-logo{width:44px;height:44px;object-fit:contain;border-radius:50%;}
.strip-text{display:flex;flex-direction:column;min-width:0;}
.strip-text b{font-size:0.98rem;color:var(--navy);display:block;margin-bottom:2px;}
.strip-sub{font-size:0.82rem;color:var(--ink-soft);line-height:1.45;}
.strip-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  font-size:0.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-soft);
}
.strip-link.green{color:var(--mint-deep);}
.strip-link span{transition:transform .25s ease;}
.strip-card:hover .strip-link span{transform:translateX(5px);}

/* ---------------- ABOUT ---------------- */
/* padding comes from .spacing */
.about-grid{display:grid;grid-template-columns:0.72fr 1fr;gap:60px;align-items:start;}
.section-tag{
  font-size:var(--eyebrow);font-weight:700;color:var(--blue-soft);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;
}
.section-tag.center{text-align:center;}
/* right column heading stack: name → role → sub-heading */
.about-name{font-size:clamp(1.75rem, 4.8vw, 2.5rem);margin-bottom:6px;letter-spacing:-0.03em;}
.about-role{
  font-size:clamp(0.9rem, 2.1vw, 0.98rem);font-weight:600;color:var(--blue-soft);
  margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.about-sub{font-size:clamp(1.08rem, 2.8vw, 1.32rem);color:var(--navy);margin-bottom:16px;max-width:26ch;}
.about-grid p.body{color:var(--ink-soft);margin-bottom:26px;}

.mantra{
  position:relative;
  background:var(--lav);border-radius:20px;
  padding:26px 28px 24px 64px;margin-bottom:30px;
  font-size:0.99rem;font-style:italic;color:var(--blue-deep);font-weight:500;
}
.mantra::before{
  content:'\201C';position:absolute;left:22px;top:16px;
  font-family:Georgia,"Times New Roman",serif;font-size:3.6rem;line-height:1;
  font-style:normal;color:var(--blue-soft);opacity:.3;
}
.mantra cite{
  display:block;margin-top:12px;font-style:normal;font-weight:700;
  font-size:0.72rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue-soft);
}
/* the same quote block used under the video: centred and pinned to the video
   frame's own max-width so the two edges line up */
.mantra-wide{max-width:900px;margin:28px auto 0;}
.mantra-wide b{font-weight:700;color:var(--blue-deep);}

/* row 2 — credentials, hours and CTA, centred under both columns */
.about-meta{
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding-top:20px;
}
/* full row width — the icon + two-line text needs the room */
.about-meta .cred-grid{width:100%;margin:0;}
.about-meta .about-pills{justify-content:center;}

/* credential cards — honeycomb texture, icon left of the text */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cred-grid li{
  display:flex;align-items:center;gap:16px;
  overflow:hidden;
  /* a translucent white sheet over the honeycomb knocks it back without
     touching the text — opacity on the card itself would fade that too */
  background:
    linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)),
    url(../img/honey-patter.webp) center/cover no-repeat,
    #fff;
  border:1px solid #dce1ef;border-radius:14px;
  padding:22px 22px;
  box-shadow:0 16px 34px -22px rgba(20,25,60,0.45);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.cred-grid .cred-ico{width:42px;height:42px;vertical-align:0;}
.cred-grid li:hover{
  transform:translateY(-5px);border-color:rgba(46,52,105,.4);
  box-shadow:0 26px 48px -24px rgba(20,25,60,0.55);
}
.cred-grid b{
  display:block;font-size:1.24rem;font-weight:700;color:var(--navy);
  letter-spacing:-0.025em;line-height:1.25;
}
.cred-grid span{
  display:block;margin-top:5px;
  font-size:0.8rem;font-weight:500;color:var(--ink-soft);
  letter-spacing:.02em;line-height:1.4;
}

.about-pills{display:flex;gap:12px;flex-wrap:wrap;}
.about-pill{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:100px;font-size:0.84rem;font-weight:600;}
.about-pill .ico{width:17px;height:17px;vertical-align:0;}
.pill-a{background:var(--mint);color:#1e7a52;}
.pill-b{background:var(--lav);color:var(--blue-deep);}

.about-cta span{display:inline-block;transition:transform .25s ease;}
.about-cta:hover span{transform:translateX(4px);}

/* portrait column */
/* no padding: the panel is exactly the photo's size, so only the rotated
   corners peek out — that's the whole effect */
.about-visual{position:relative;}

/* tilted dark panel behind the photo, carrying the seamless pattern. On a dark
   fill the tile has to be inverted and screened in — same trick as the hero —
   so its white background drops out and only the linework shows. */
.about-tilt{
  position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;
  background:linear-gradient(155deg, var(--navy), var(--blue));
  border-radius:var(--radius);
  transform:rotate(-4deg);
}
.about-tilt::after{
  content:'';position:absolute;inset:-25%;
  background:url(../img/seamless.webp) repeat;
  background-size:170px 170px;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:.12;
}

.about-photo{
  position:relative;z-index:1;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;background:var(--lav);
  box-shadow:0 30px 60px -30px rgba(20,25,60,0.4);
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}


/* rides up over the bottom of the photo */
/* ---------------- VIDEO ---------------- */
/* background comes from .bg-alt on the section — no rule of its own */
.video-head{text-align:center;max-width:600px;margin:0 auto 40px;}
.video-head h2{font-size:var(--h2);}
.video-head p{color:var(--ink-soft);margin-top:12px;font-size:0.95rem;}
/* white against the section's tint */
.video-frame{
  max-width:900px;margin:0 auto;border-radius:var(--radius);padding:14px;
  background:var(--card);
  box-shadow:0 30px 60px -32px rgba(20,25,60,0.28);
}
.video-wrap{
  position:relative;width:100%;padding-bottom:56.25%;height:0;
  overflow:hidden;border-radius:20px;background:var(--navy);cursor:pointer;
}
.video-wrap img,.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-wrap img{object-fit:cover;opacity:.9;transition:transform .5s ease,opacity .35s ease;}
.video-wrap:hover img{transform:scale(1.03);opacity:1;}
.play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -12px rgba(20,25,60,.5);
  transition:transform .3s ease;z-index:2;
}
.play-btn::after{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--blue);margin-left:5px;
}
.video-wrap:hover .play-btn{transform:translate(-50%,-50%) scale(1.09);}

/* ---------------- CONTENT SECTIONS ---------------- */
/* .content-section carries no padding — .spacing does */
.content-head{max-width:640px;margin-bottom:50px;}
.content-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.content-head h2{font-size:var(--h2);}
.content-head p{color:var(--ink-soft);margin-top:12px;font-size:0.95rem;}


/* ---------------- SPLIT SECTION (story | research) ---------------- */
/* stretch, not start — the dark panel matches the story column's height */
.split-grid{display:grid;grid-template-columns:1.06fr 0.94fr;gap:44px;align-items:stretch;}

.split-left h2{font-size:var(--h2);margin-bottom:14px;max-width:16ch;}
.split-lead{
  font-size:clamp(0.97rem, 2.3vw, 1.06rem);font-weight:500;color:var(--navy);
  margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.split-left p{color:var(--ink-soft);font-size:0.96rem;margin-bottom:18px;}
.split-left p:last-child{margin-bottom:0;}
.split-left b{color:var(--navy);font-weight:700;}

/* dark half — the theme green reads far better as the accent on it than as
   the fill, so it moves to the dots, the rule and the dates */
.split-right{
  display:flex;flex-direction:column;
  background:linear-gradient(158deg, var(--navy) 0%, var(--blue) 100%);
  border-radius:var(--radius);
  padding:42px 38px;color:rgba(255,255,255,0.85);
  box-shadow:0 28px 56px -30px rgba(20,25,60,0.6);
}
.split-right h3{color:#fff;font-size:var(--h3);margin-bottom:8px;}
.split-sub{
  font-size:0.88rem;color:rgba(255,255,255,0.6);
  margin-bottom:26px;padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.14);
}

/* papers as a timeline running down the panel */
.paper-timeline{position:relative;padding-left:32px;}
.paper-timeline::before{
  content:'';position:absolute;left:5px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,
    var(--mint-deep) 0%, rgba(63,184,127,.45) 60%, rgba(63,184,127,.12) 100%);
}
.paper-timeline li{position:relative;padding-bottom:20px;}
.paper-timeline li:last-child{padding-bottom:0;}
.paper-timeline li::before{
  content:'';position:absolute;left:-32px;top:7px;
  width:12px;height:12px;border-radius:50%;
  background:var(--mint-deep);
  box-shadow:0 0 0 4px rgba(63,184,127,0.2);
  transition:box-shadow .25s ease;
}
.paper-timeline li:hover::before{box-shadow:0 0 0 6px rgba(63,184,127,0.32);}
.pt-title{
  display:block;font-size:0.93rem;font-weight:600;color:#fff;line-height:1.45;
}
.pt-title em{font-style:italic;}
.pt-date{
  display:block;margin-top:4px;
  font-size:0.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mint-deep);
}

/* ---------------- QUALIFICATIONS — ZIG-ZAG INFOGRAPHIC ----------------
   Each row is one bar: [year | number badge | text], and every other row
   swaps the year and text across the badge. Rows are also nudged left/right
   so the stack reads uneven rather than as a straight column. Each row
   carries its badge colour in --c. */
.zig{max-width:1000px;margin-inline:auto;}

/* 20 / 80 split — the wide track always follows the text, so it swaps sides
   along with it on the flipped rows */
.zig-row{
  position:relative;
  display:grid;grid-template-columns:1fr 58px 4fr;align-items:stretch;
}
.zig-row:nth-child(even){grid-template-columns:4fr 58px 1fr;}
.zig-row + .zig-row{margin-top:24px;}
.zig-row:nth-child(odd){margin-left:30px;}
.zig-row:nth-child(even){margin-right:30px;}

/* square strips — no radius anywhere in this section */
.zig-year,.zig-body{
  background:var(--card);border:1px solid var(--line);
  padding:20px 26px;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.zig-year{
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:700;letter-spacing:-0.03em;color:var(--c);
  line-height:1.1;
}
.zig-body{display:flex;flex-direction:column;justify-content:center;}
.zig-body b{display:block;font-size:1rem;color:var(--navy);line-height:1.35;margin-bottom:4px;}
.zig-body b em{font-style:italic;}
.zig-body span{font-size:0.86rem;color:var(--ink-soft);line-height:1.5;}

/* All three must be pinned to row 1. With only grid-column set, auto-placement
   pushes each one onto its own row as soon as the columns run backwards, which
   is exactly what happens on the flipped rows. */
.zig-year,.zig-num,.zig-body{grid-row:1;}

/* default: year left, text right */
.zig-year{grid-column:1;}
.zig-body{grid-column:3;}
/* every other row flips them across the badge */
.zig-row:nth-child(even) .zig-year{grid-column:3;}
.zig-row:nth-child(even) .zig-body{grid-column:1;text-align:right;}

/* the badge — taller than the halves, and wider than its column so it laps
   over both cards and visually joins them */
.zig-num{
  grid-column:2;z-index:2;
  display:grid;place-items:center;
  margin:-11px -10px;
  background:var(--c);color:#fff;
  font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;
  box-shadow:0 14px 28px -14px rgba(20,25,60,0.5);
}

.zig-row:hover .zig-year,.zig-row:hover .zig-body{
  border-color:rgba(46,52,105,.28);
  box-shadow:0 18px 34px -26px rgba(20,25,60,0.55);
}

/* achievements */
.achieve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.achieve-chip{
  background:#fff;border-radius:18px;padding:22px;
  box-shadow:0 16px 36px -26px rgba(20,25,60,0.18);
  display:flex;gap:14px;align-items:flex-start;
  transition:transform .25s ease, box-shadow .25s ease;
}
.achieve-chip:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(20,25,60,0.26);}
.achieve-chip .num{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:var(--lav);color:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:0.76rem;font-weight:700;
}
.achieve-chip:nth-child(3n-1) .num{background:var(--mint);color:var(--mint-deep);}
.achieve-chip span{font-size:0.88rem;color:var(--ink-soft);}
.achieve-chip b{color:var(--navy);}

/* achievements photo gallery */
.gallery-block{margin-top:44px;}
/* reads as a divider between the honours list and the photographs rather than a
   stray eyebrow: the label sits centred with a hairline running out either side,
   and carries the count so the block announces its own size */
.gallery-label{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
  font-size:var(--eyebrow);font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--blue-soft);white-space:nowrap;
}
.gallery-label::before,.gallery-label::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.gallery-label em{
  font-style:normal;font-weight:600;letter-spacing:.06em;
  font-size:0.72rem;color:var(--ink-soft);
}
/* Justified rows: every photo is the same height and its width follows its own
   ratio, so nothing is cropped and the rows still line up. These are scans,
   screenshots and photos of every shape — a square cover-crop was slicing the
   captions off the tops. Scoped to .gallery-grid so the personal .pgallery
   masonry keeps its own sizing. */
/* centred rows: with tiles of differing widths a left-aligned last row leaves a
   lopsided gap on the right, and centring settles the whole block */
.gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.gallery-grid .gallery-item{
  aspect-ratio:auto;flex:0 0 auto;
  height:var(--ach-h,240px);width:auto;max-width:100%;
  background:#fff;
}
.gallery-grid .gallery-item img{
  height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
}
.gallery-item{
  position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  border:none;padding:0;cursor:pointer;background:var(--lav);
  box-shadow:0 16px 36px -26px rgba(20,25,60,0.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(20,25,60,0.3);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item::after{
  content:'';position:absolute;inset:0;background:rgba(22,25,54,0);transition:background .25s ease;
}
.gallery-item:hover::after{background:rgba(22,25,54,0.18);}
.gallery-item::before{
  content:'';position:absolute;top:50%;left:50%;width:38px;height:38px;
  transform:translate(-50%,-50%) scale(.7);border-radius:50%;
  background:rgba(255,255,255,0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e3469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transition:opacity .25s ease, transform .25s ease;
}
.gallery-item:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------------- PERSONAL GALLERY ----------------
   These photos run 3:2, square and one tall portrait. A square crop grid
   would cut the portrait in half, so this is a column masonry instead: each
   photo keeps its own shape and the columns fill to whatever height they need.
   .pg-item rides on .gallery-item for the hover, overlay and zoom icon, and
   only overrides the fixed square ratio those assume. */
.pgallery{columns:3;column-gap:16px;}
.pg-item{aspect-ratio:auto;width:100%;margin-bottom:16px;break-inside:avoid;}
.pg-item img{height:auto;}

/* ---------------- CERTIFICATES CAROUSEL (Swiper) ---------------- */
.cert-carousel{position:relative;padding-inline:56px;}
.cert-swiper{padding-bottom:46px;overflow:hidden;}
.cert-swiper .swiper-slide{height:auto;display:flex;}
.cert-item{
  display:flex;width:100%;height:340px;align-items:center;justify-content:center;
  /* the section is white and the scans are on pale paper — a hairline border
     is what keeps the card edge visible, the shadow alone is not enough */
  background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line);cursor:pointer;
  box-shadow:0 16px 36px -26px rgba(20,25,60,0.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cert-item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(20,25,60,0.32);}
.cert-item img{width:100%;height:100%;object-fit:contain;}
/* counter instead of bullets — 53 dots would be a smear at this width */
.cert-swiper .swiper-pagination{
  bottom:0;left:50%;width:auto;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:6px 16px;
  font-size:0.78rem;font-weight:600;color:var(--ink-soft);
  box-shadow:0 10px 24px -18px rgba(20,25,60,0.3);
}
.cert-swiper .swiper-pagination-current{color:var(--blue);font-weight:700;}
.cert-swiper .swiper-pagination-total{color:var(--navy);font-weight:700;}
.cert-arrow{
  position:absolute;top:calc(50% - 23px);transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue);box-shadow:0 16px 34px -18px rgba(20,25,60,0.35);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cert-arrow svg{width:18px;height:18px;}
.cert-arrow:hover{background:var(--blue);color:#fff;}
.cert-arrow.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none;}
.cert-prev{left:0;}
.cert-next{right:0;}

/* pill chips on dark panels — used by the consultation banner */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;position:relative;}
.badge-chip{
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);
  padding:8px 16px;border-radius:100px;font-size:0.78rem;font-weight:500;
}

/* ---------------- TREATMENTS ---------------- */
/* line-art tiles: one 24x24 icon grid and one stroke weight across the set, so
   the six conditions read as a single family. The whole tile is the link, and
   the tint carries the colour. */
.treat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.treat-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:26px 24px 22px;border-radius:22px;overflow:hidden;
  background:#e8eaf7;color:var(--ink);text-decoration:none;isolation:isolate;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* alternating tint checkerboards across the 3-wide grid, so the colour never
   lines up in columns. Deeper than --lav/--mint: those sit too close to
   .bg-alt to read as tiles. */
.treat-card:nth-child(2n){background:#d9f4e5;}
/* one overlay so hover deepens either tint by the same amount */
.treat-card::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(22,25,54,.07);opacity:0;transition:opacity .3s ease;
}
.treat-card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -28px rgba(20,25,60,0.5);}
.treat-card:hover::before{opacity:1;}

/* icon and name share a row; the link drops to the foot of the tile */
.treat-head{
  position:relative;z-index:1;flex:1;
  display:flex;align-items:center;gap:14px;
}
.treat-icon{
  flex:none;display:grid;place-items:center;
  color:var(--blue);transition:transform .3s ease;
}
.treat-card:nth-child(2n) .treat-icon{color:#1a7049;}
.treat-card:hover .treat-icon{transform:rotate(-6deg) scale(1.06);}
.tsvg{width:36px;height:36px;display:block;}

.treat-title{
  font-weight:700;font-size:1.08rem;letter-spacing:-0.02em;
  color:var(--navy);line-height:1.3;
}
.treat-link{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-soft);
}
.treat-card:nth-child(2n) .treat-link{color:#1a7049;}
.treat-link span{transition:transform .25s ease;}
.treat-card:hover .treat-link span{transform:translateX(5px);}
.center-cta{text-align:center;margin-top:44px;}

/* ---------------- CONSULTATION BANNER ---------------- */
.banner{position:relative;overflow:hidden;background:var(--navy);isolation:isolate;}

/* photo occupies the right 65% only; the left third is the navy panel */
.banner-media{position:absolute;top:0;right:0;bottom:0;width:65%;z-index:0;}
.banner-media img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* solid to the photo's left edge, then feathered across it so there is no seam */
.banner::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy) 0%,
    var(--navy) 34%,
    rgba(22,25,54,.90) 45%,
    rgba(22,25,54,.55) 58%,
    rgba(22,25,54,.18) 74%,
    rgba(22,25,54,0) 90%);
}

/* seamless medical pattern over the panel. The tile is dark line-art on white,
   so it is inverted to light-on-dark and screened in — that drops the white
   background out and leaves only the linework. Masked to fade before the photo. */
.banner::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/seamless.webp) repeat;
  background-size:300px 300px;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:.07;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.45) 46%,transparent 64%);
          mask-image:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.45) 46%,transparent 64%);
}

.banner-inner{
  position:relative;z-index:3;
  min-height:clamp(400px,40vw,520px);
  display:flex;align-items:center;
  /* vertical padding comes from .spacing on the element */
}
.banner-copy{max-width:44ch;color:rgba(255,255,255,0.76);}
.banner-copy h2{color:#fff;font-size:clamp(1.7rem,3.8vw,2.6rem);margin-bottom:16px;}
.banner-copy p{font-size:0.96rem;margin-bottom:24px;}
.banner .badge-row{margin-bottom:30px;}
.banner-cta span{transition:transform .25s ease;}
.banner-cta:hover span{transform:translateX(4px);}

/* ---------------- APPOINTMENT ---------------- */
/* padding comes from .spacing */
.appt-grid{
  display:grid;grid-template-columns:1fr 0.8fr;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(20,25,60,0.18);
}
.appt-form{padding:56px;}
.appt-form h2{font-size:var(--h2);margin-bottom:10px;}
.appt-form p.intro{color:var(--ink-soft);margin-bottom:32px;font-size:0.92rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{margin-bottom:22px;}
.form-field label{font-size:0.78rem;font-weight:600;color:var(--navy);}
/* quieter than the label it sits in, so "optional" reads as a note rather
   than part of the field name */
.form-field label .opt{font-weight:500;color:var(--ink-soft);letter-spacing:.01em;}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line);background:var(--bg);border-radius:14px;
  padding:13px 16px;font-family:inherit;font-size:0.9rem;color:var(--ink);width:100%;
  transition:border-color .2s ease, background .2s ease;
}
.form-field textarea{resize:vertical;min-height:92px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--blue-soft);background:#fff;
}
.form-field.invalid input,.form-field.invalid select{border-color:#ef6a5a;background:#fff5f4;}
.appt-form .btn.submit{width:100%;justify-content:center;margin-top:8px;padding:14px 26px;}
.form-note{margin-top:14px;font-size:0.86rem;font-weight:600;color:var(--mint-deep);text-align:center;min-height:1.2em;}
/* the form sits on white, so this one keeps the dark indigo fill */
.form-note .ico{width:19px;height:19px;margin-right:8px;vertical-align:-0.28em;}
.form-note.error{color:#ef6a5a;}

/* honeypot — off-screen rather than display:none, since some bots skip
   fields they can detect are hidden that way */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}

/* ---------------- FULL-SCREEN LOADER (appointment submit) ---------------- */
.form-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,25,54,0.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.form-loader.show{opacity:1;visibility:visible;}
.form-loader-spin{
  width:56px;height:56px;border-radius:50%;
  border:5px solid rgba(255,255,255,0.3);border-top-color:#fff;
  animation:formSpin .8s linear infinite;
}
@keyframes formSpin{to{transform:rotate(360deg);}}

/* ---------------- APPOINTMENT CONFIRMATION POPUP ---------------- */
.modal-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(22,25,54,0.6);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal-card{
  position:relative;background:var(--card);border-radius:24px;
  max-width:380px;width:100%;padding:44px 32px 32px;text-align:center;
  box-shadow:0 40px 80px -30px rgba(22,25,54,0.5);
  transform:translateY(16px) scale(.96);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.modal-overlay.show .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;
  border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
  background:var(--lav);color:var(--ink-soft);cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.modal-close:hover{background:var(--blue);color:#fff;}
.modal-close svg{width:16px;height:16px;}
.modal-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  background:var(--lav);color:var(--blue);
}
.modal-icon svg{width:30px;height:30px;}
.modal-card h3{font-size:1.3rem;margin-bottom:10px;}
.modal-card p{color:var(--ink-soft);font-size:0.95rem;margin-bottom:24px;line-height:1.5;}
.modal-card .modal-ok{width:100%;justify-content:center;}
.modal-overlay.is-error .modal-icon{background:#fdeceb;color:#ef6a5a;}

/* ---------------- VIDEO GALLERY + POPUP ----------------
   The clips run vertical, square and landscape, so the cards take the
   achievements-gallery approach: one height, width follows each clip's own
   ratio, nothing cropped. Each card is only a poster still. */
/* Three across on a square tile. The clips run 9:16, 1:1 and 16:9, and neither
   option on a plain tile worked: cropping to a common shape cut the burnt-in
   captions off the landscape stills, and letting each card keep its own shape
   left the rows ragged with holes under the short ones. So the tile is uniform
   and the still sits inside it whole, with a blurred, darkened copy of itself
   filling the rest — the shape difference reads as depth rather than a gap. */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vid-card{
  position:relative;width:100%;aspect-ratio:1 / 1;
  border:none;padding:0;cursor:pointer;overflow:hidden;
  border-radius:16px;background:var(--navy);
  box-shadow:0 22px 46px -26px rgba(20,25,60,0.42);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vid-card .vid-bg{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  transform:scale(1.2);filter:blur(20px) brightness(.6) saturate(1.35);
}
.vid-card .vid-fg{
  position:relative;z-index:1;width:100%;height:100%;display:block;
  object-fit:contain;transition:transform .45s ease;
}
.vid-card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -24px rgba(20,25,60,0.5);}
.vid-card:hover .vid-fg{transform:scale(1.04);}
.vid-card .play-btn{width:44px;height:44px;}
.vid-card .play-btn::after{border-width:8px 0 8px 13px;margin-left:3px;}
.vid-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.08);}
/* a clip whose still could not be generated still gets a card */
.vid-card-blank{background:linear-gradient(150deg,var(--navy),var(--blue));}

.videobox-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:60px 20px;
  background:rgba(8,10,26,0.94);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.videobox-overlay.show{opacity:1;visibility:visible;}
.videobox-frame{
  display:flex;align-items:center;justify-content:center;max-width:100%;
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.videobox-overlay.show .videobox-frame{transform:none;opacity:1;}
/* a vertical clip is height-bound: cap the height and let width follow */
/* the YouTube films are 16:9 and width-bound, unlike the vertical clips */
.videobox-frame iframe{
  width:min(92vw,980px);aspect-ratio:16 / 9;height:auto;max-height:82vh;
  border:0;border-radius:16px;background:#000;display:block;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.7);
}
.videobox-frame video{
  max-height:82vh;max-width:100%;width:auto;height:auto;
  border-radius:16px;background:#000;display:block;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.7);
}

/* ---------------- ACHIEVEMENTS GALLERY LIGHTBOX ---------------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:70px 90px;
  background:rgba(10,12,26,0.92);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.lightbox-overlay.show{opacity:1;visibility:visible;}
.lightbox-frame{
  position:relative;max-width:900px;width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:translateY(16px) scale(.97);opacity:0;transition:transform .3s ease, opacity .3s ease;
}
.lightbox-overlay.show .lightbox-frame{transform:translateY(0) scale(1);opacity:1;}
.lightbox-frame img{
  max-width:100%;max-height:75vh;width:auto;height:auto;object-fit:contain;
  border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);background:#0c0e1f;
}
.lightbox-caption{color:rgba(255,255,255,0.78);font-size:0.9rem;text-align:center;max-width:600px;}
.lightbox-close,.lightbox-nav{
  position:fixed;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,0.1);color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--blue);}
.lightbox-close svg,.lightbox-nav svg{width:18px;height:18px;}
.lightbox-close{top:24px;right:24px;}
.lightbox-nav{top:50%;transform:translateY(-50%);}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.06);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}

.appt-side{
  background:linear-gradient(160deg,var(--navy),var(--blue));
  color:rgba(255,255,255,0.72);padding:56px 40px;position:relative;overflow:hidden;
}
.appt-side::before{
  content:'';position:absolute;width:240px;height:240px;
  background:radial-gradient(circle, rgba(109,118,201,0.45), transparent 70%);
  bottom:-90px;left:-70px;
}
.appt-side .tag{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);
  padding:8px 16px;border-radius:100px;font-size:0.78rem;font-weight:600;color:#fff;
  position:relative;margin-bottom:22px;
}
.appt-side .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--mint-deep);}
.appt-side h3{color:#fff;font-size:1.5rem;margin-bottom:24px;position:relative;}
.side-list{position:relative;display:flex;flex-direction:column;gap:4px;}
.side-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.1);}
.side-list .si{
  width:36px;height:36px;flex-shrink:0;border-radius:11px;color:#fff;
  background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;
}
.side-list .ico{width:16px;height:16px;vertical-align:0;opacity:.9;}
.side-list b{display:block;font-size:0.94rem;color:#fff;font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
.side-list b a{border-bottom:1px solid rgba(255,255,255,.3);transition:color .2s ease;}
.side-list b a:hover{color:var(--mint-deep);}
.side-list span{font-size:0.78rem;color:rgba(255,255,255,0.55);}
.side-list span a{color:var(--mint-deep);border-bottom:1px solid rgba(63,184,127,.45);transition:color .2s ease;}
.side-list span a:hover{color:#fff;}
.side-foot{position:relative;margin-top:26px;}
.side-foot b{display:block;font-size:0.82rem;color:#fff;font-weight:600;}
.side-foot span{font-size:0.76rem;color:rgba(255,255,255,0.5);}

/* ---------------- FOOTER ---------------- */
footer{background:var(--navy);color:rgba(255,255,255,0.7);padding:60px 0 30px;}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-grid .logo{color:#fff;}
.footer-grid p{font-size:0.85rem;margin-top:14px;max-width:34ch;color:rgba(255,255,255,0.5);}
.footer-grid h5{color:#fff;font-size:0.9rem;margin-bottom:16px;font-weight:600;}

.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.social-row a:hover{background:var(--blue);border-color:var(--blue-glow);transform:translateY(-3px);}
.social-row .ico{width:15px;height:15px;vertical-align:0;opacity:.8;transition:opacity .25s ease;}
.social-row a:hover .ico{opacity:1;}
.footer-grid li{margin-bottom:10px;font-size:0.85rem;}
.footer-grid a{transition:color .2s ease;}
.footer-grid a:hover{color:var(--mint-deep);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:26px;font-size:0.8rem;color:rgba(255,255,255,0.45);
}

/* ---------------- BACK TO TOP ---------------- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-weight:700;
  box-shadow:0 14px 28px -10px rgba(46,52,105,0.6);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--blue-deep);}

/* ---------------- REVEAL ---------------- */
/* Scoped to .js, which the inline script in <head> sets. Unscoped, opacity:0
   is a trapdoor: if the script fails to load or throws for ANY reason, every
   .reveal element on the page stays invisible forever and the site looks
   empty. With the guard, no JS simply means no animation. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);}
/* set by JS when the element left through the top, so on the way back down
   it slides in from above instead of always rising from below */
.js .reveal.from-top{transform:translateY(-24px);}
.js .reveal.in{opacity:1;transform:none;}

/* ---------------- OVERFLOW GUARDS ----------------
   A flex/grid child defaults to min-width:auto, which refuses to shrink below
   its own content — that is what pushes a long word or a wide value past the
   viewport edge on a phone. These are the spots where the content is not under
   our control: a name, an email address, an achievement line. */
.strip-text,
.treat-title,
.cred-grid li > div,
.side-list li > div,
.hero-facts li > div,
.achieve-chip span,
.zig-body,
.contact-bar li{min-width:0;}
h1,h2,h3,h4,h5,p,.pt-title,.strip-text b,.achieve-chip span,
.footer-grid li,.footer-grid a,.side-list b,.side-list span{overflow-wrap:break-word;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1240px) and (min-width:941px){
  .achieve-grid,.treat-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{--ach-h:210px;}
  nav ul{gap:20px;}
  nav a{font-size:0.76rem;letter-spacing:.04em;}
  .contact-bar{gap:20px;}
  .contact-bar li{font-size:0.8rem;gap:9px;}
  .cb-icon{width:34px;height:34px;}
  .logo-text{font-size:1.5rem;}
  .logo-compact .logo-text{font-size:1.14rem;}
}

/* address is the first thing to drop when the top bar gets tight */
@media (max-width:1080px) and (min-width:941px){
  .contact-bar li:last-child{display:none;}
}

/* =========================================================
   TABLET AND BELOW — the layout stacks from here down
   ========================================================= */
@media (max-width:940px){
  :root{--header-h:60px;--radius:22px;}
  /* padding-inline, never the shorthand: .wrap is combined with .hero-inner,
     .banner-inner and .spacing, all of which set padding-block — a shorthand
     here silently zeroes theirs from whichever rule happens to come last.
     That is what stripped the consultation banner of its padding below 940. */
  .wrap{padding-inline:20px;}
  /* one step down from the desktop rhythm; tightened again at 640 and 480 */
  .spacing{padding-block:48px;}

  /* top bar: logo stays, contact collapses to tappable icon buttons */
  .topbar-inner{padding-block:11px;gap:14px;}
  .contact-bar{gap:9px;}
  .cb-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .contact-bar li:last-child{display:none;}
  .cb-icon{width:40px;height:40px;}

  /* the compact nav logo is redundant once the top-bar logo is always in reach */
  .logo-compact,header.scrolled .logo-compact{display:none;}
  .logo{gap:9px;}
  .logo-text{font-size:1.34rem;}
  .logo-icon{width:34px;height:34px;}
  .logo-icon img{width:30px;height:30px;}

  /* drawer hangs off the sticky nav row itself, so it lands correctly
     whether or not the top bar has scrolled away */
  nav{
    position:absolute;left:0;right:0;top:100%;
    background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -30px rgba(20,25,60,0.5);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    /* six items on a landscape phone would otherwise run off the screen with
       no way to reach the last of them. The drawer hangs off the nav row, so
       how much room is left depends on where that row is: below the top bar
       before the page scrolls, pinned to the viewport top after. 80px covers
       the tallest top bar at this width plus a little breathing room. */
    max-height:calc(100dvh - var(--header-h) - 80px);overflow-y:auto;
    transition:clip-path .35s ease, opacity .3s ease;
  }
  header.scrolled nav{max-height:calc(100dvh - var(--header-h) - 12px);}
  nav.open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto;}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 18px;}
  /* rules between the items, not under every one. A border-bottom would leave
     a stray line under the last one, and :last-child cannot suppress it — the
     real last child is .nav-cta-li, which is display:none at this width. */
  nav li + li{border-top:1px solid var(--line);}
  nav a{display:block;padding:14px 4px;font-size:0.85rem;}
  nav a.active::after{display:none;}
  .nav-cta-li{display:none;}          /* the CTA lives in the nav row on mobile instead */
  .nav-toggle{display:flex;}
  .navbar-inner{justify-content:space-between;gap:12px;}
  .header-cta{display:inline-flex;padding:10px 18px;font-size:0.77rem;}

  .about-grid,.appt-grid{grid-template-columns:1fr;}

  /* footer: the brand block keeps the full row and the three link lists pair
     up underneath it. A single column here runs the footer to nearly a screen
     of its own, which is the last thing the page needs at the bottom. */
  /* minmax(0,1fr), not 1fr: a 1fr track keeps an automatic min-content floor,
     so the unbreakable info@arogyadhamhealth.com widens its column and pushes
     the whole grid past .wrap. Zero floor plus the break-word below lets the
     address wrap instead. */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;padding-bottom:28px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  /* and the last one too: with four blocks it lands alone on the third row,
     using half the width while the other half sits empty — which is what was
     forcing the email address to break mid-word. */
  .footer-grid > div:last-child{grid-column:1 / -1;}

  /* the two columns become two rows: the photo whole and uncropped first, then
     the copy beneath it. Plain `column` — .hero-media already precedes
     .hero-inner in the markup, where it is the absolute layer on desktop. */
  .hero{display:flex;flex-direction:column;}
  .hero-media{position:relative;width:100%;}
  .hero::after{opacity:.05;}
  /* the copy now ends the section, so the strip cards ride their 40px up into
     it. The bottom pad carries that overlap plus clear space under the stats,
     otherwise the first card sits on top of the "110+ Years" row. */
  .hero-inner{min-height:0;padding-block:44px 84px;grid-template-columns:1fr;}
  .hero-copy{max-width:none;padding-right:0;}

  .hero h1{font-size:2.15rem;margin-bottom:16px;}
  .hero p.lead{font-size:0.96rem;margin-bottom:24px;}
  .eyebrow-line{margin-bottom:14px;}

  /* Three across on the phone too, the same as desktop. Each stat is as wide
     as its own text and no wider — nothing wraps, so the type scales with the
     viewport instead and the three always hold one row. The dividers only read
     as dividers while they do; wrapped, they turn into stray rules.
     line-height on the list, not just the span: a label that ever does wrap
     builds its line boxes against the strut of the div it sits in, which
     otherwise inherits the body 1.62 and leaves the lines far apart. */
  .hero-facts{flex-wrap:nowrap;margin-top:24px;line-height:1.3;}
  .hero-facts li{flex:0 1 auto;padding:2px clamp(7px,2.4vw,12px);white-space:nowrap;}
  .hero-facts b{font-size:1rem;}
  .hero-facts span{font-size:0.7rem;line-height:1.35;}

  .strip{grid-template-columns:1fr;gap:14px;margin-top:-40px;}
  .about-grid{gap:34px;}
  .about-grid h2{max-width:none;}
  /* portrait stays portrait here — capped so a 4:5 frame doesn't run the
     whole width of the phone and push the copy far down the page */
  .about-visual{padding:0;max-width:360px;margin-inline:auto;}
  .about-tilt{transform:rotate(-3deg);}
  .about-sub{max-width:none;}
  .about-grid p.body{margin-bottom:18px;}
  /* the 64px left inset only exists to clear the quote mark; at this width
     that is a fifth of the card, so the mark shrinks and moves up instead */
  .mantra{padding:20px 20px 18px 46px;margin-bottom:24px;font-size:0.94rem;}
  .mantra::before{left:15px;top:11px;font-size:2.8rem;}
  .mantra cite{margin-top:9px;}
  .cred-grid{grid-template-columns:1fr;gap:10px;}
  .cred-grid li{padding:16px 18px;gap:14px;}
  .cred-grid .cred-ico{width:36px;height:36px;}
  .cred-grid b{font-size:1.12rem;}
  .about-meta{padding-top:4px;gap:18px;}
  .content-head{margin-bottom:32px;}

  /* 21 achievements one-up is most of a screen on its own — two columns while
     the width still holds a line of the text, tighter chips either way */
  .achieve-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .achieve-chip{padding:16px;gap:11px;border-radius:14px;}
  .achieve-chip .num{width:28px;height:28px;border-radius:8px;font-size:0.7rem;}
  .achieve-chip span{font-size:0.82rem;line-height:1.45;}
  .gallery-grid{--ach-h:180px;gap:12px;}
  .vid-grid{gap:14px;}
  .pgallery{column-gap:12px;}
  .pg-item{margin-bottom:12px;}
  .lightbox-overlay{padding:60px 60px;}
  .cert-item{height:300px;}

  .video-head{margin-bottom:28px;}
  .video-frame{padding:10px;}
  .play-btn{width:56px;height:56px;box-shadow:0 12px 26px -12px rgba(20,25,60,.5);}
  .play-btn::after{border-width:8px 0 8px 13px;margin-left:4px;}
  .treat-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
  .treat-card{padding:20px 18px 16px;gap:14px;}
  .treat-head{gap:11px;}
  .tsvg{width:29px;height:29px;}
  .treat-title{font-size:0.92rem;}
  .center-cta{margin-top:30px;}

  /* two tracks only: year | content. The number badge is dropped — at this
     width it stretched into a tall coloured slab and ate the room the text
     needed. The row's colour survives as a rule down the left of the year.
     No flip and no offset here either; both read as noise this narrow.
     The :nth-child(even) rules on the desktop side are more specific than a
     bare .zig-row and a media query adds no specificity, so every flipped
     selector has to be named again here or the odd/even rows disagree. */
  .zig-row,
  .zig-row:nth-child(odd),
  .zig-row:nth-child(even){
    grid-template-columns:auto 1fr;grid-template-rows:auto;
    margin-left:0;margin-right:0;
  }
  .zig-row + .zig-row{margin-top:14px;}

  .zig-num,.zig-row:nth-child(even) .zig-num{display:none;}

  .zig-year,.zig-row:nth-child(even) .zig-year{
    grid-column:1;grid-row:1;
    font-size:1.2rem;padding:14px 14px;
    border-left:4px solid var(--c);border-right:0;
  }
  .zig-body,.zig-row:nth-child(even) .zig-body{
    grid-column:2;grid-row:1;
    text-align:left;padding:14px 16px;
  }
  .zig-body b{font-size:0.95rem;}
  .zig-body span{font-size:0.82rem;}

  .split-grid{grid-template-columns:1fr;gap:28px;}
  .split-left h2{max-width:none;}
  .split-left p{margin-bottom:14px;}
  .split-lead{margin-bottom:20px;padding-bottom:18px;}
  .split-right{padding:28px 22px;}
  .split-sub{margin-bottom:20px;padding-bottom:18px;}
  /* the rail keeps its own left offset, so the dot has to move with the
     padding or the two stop lining up */
  .paper-timeline{padding-left:26px;}
  .paper-timeline li{padding-bottom:15px;}
  .paper-timeline li::before{left:-26px;}

  /* stack the banner instead of overlaying: a side-lit scrim can't hold text
     legibly once the photo is only ~340px wide */
  /* height:auto, not a fixed band — the photo runs full width here, so letting
     it keep its own 700x361 ratio shows the whole frame instead of cropping a
     strip out of the middle. The img has to give up height:100% with it, or it
     collapses against an auto-height parent. */
  .banner-media{position:relative;width:100%;height:auto;}
  .banner-media img{height:auto;}
  .banner::before{
    background:linear-gradient(180deg, rgba(22,25,54,0) 40%, rgba(22,25,54,.5) 78%, var(--navy) 100%);
  }
  .banner::after{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 60%,#000 82%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 60%,#000 82%);
  }
  .banner-inner{min-height:0;}   /* padding stays with .spacing */
  .banner-copy{max-width:none;}
  .banner-copy p{margin-bottom:20px;}
  .banner .badge-row{margin-bottom:22px;}

  .appt-form{padding:32px 22px;}
  .appt-side{padding:32px 22px;}
  .appt-form p.intro{margin-bottom:22px;}
  .form-row{grid-template-columns:1fr;gap:14px;margin-bottom:14px;}
  .form-field.full{margin-bottom:18px;}
  .form-field textarea{min-height:84px;}
  /* iOS Safari zooms the page in whenever a focused control renders its text
     under 16px, and it does not zoom back out afterwards. 16px is a floor
     here, not a preference. */
  .form-field input,.form-field select,.form-field textarea{font-size:16px;padding:12px 14px;}
  .appt-side .tag{margin-bottom:16px;}
  .appt-side h3{font-size:1.34rem;margin-bottom:18px;}
  .side-list li{padding:11px 0;gap:12px;}
  .side-foot{margin-top:18px;}

  footer{padding:44px 0 24px;}
  .footer-grid h5{margin-bottom:11px;}
  .footer-grid li{margin-bottom:7px;}
  .footer-grid p{margin-top:11px;max-width:none;}
  .social-row{margin-top:16px;gap:8px;}
  .social-row a{width:36px;height:36px;}
  .footer-bottom{justify-content:flex-start;flex-direction:column;gap:4px;padding-top:20px;}
}

/* =========================================================
   PHONE — tighter measure and rhythm
   ========================================================= */
@media (max-width:640px){
  :root{--h2:1.55rem;--h3:1.18rem;}
  body{line-height:1.62;}
  .spacing{padding-block:40px;}

  .hero h1{font-size:1.98rem;}
  .hero p.lead{font-size:0.94rem;}
  .eyebrow-line{font-size:0.78rem;margin-bottom:12px;}

  .about-grid{gap:28px;}
  .about-visual{max-width:320px;}
  .about-role{margin-bottom:18px;padding-bottom:16px;}
  .about-sub{margin-bottom:12px;}
  .content-head{margin-bottom:26px;}
  .video-head{margin-bottom:24px;}

  /* the achievement lines are full sentences — below this a second column
     leaves them about four words wide */
  .achieve-grid{grid-template-columns:1fr;gap:10px;}

  /* three treatment tiles across stop holding a two-word name below this */
  .treat-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .center-cta{margin-top:24px;}

  .gallery-block{margin-top:32px;}
  .gallery-grid{--ach-h:140px;gap:10px;}
  /* square tiles get too small to read three-up on a phone */
  .vid-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .vid-card .vid-bg{filter:blur(12px) brightness(.6) saturate(1.35);}
  .vid-card .play-btn{width:34px;height:34px;}
  .vid-card .play-btn::after{border-width:6px 0 6px 10px;margin-left:2px;}
  .videobox-overlay{padding:56px 14px;}
  .pgallery{columns:2;column-gap:10px;}
  .pg-item{margin-bottom:10px;}
  .lightbox-overlay{padding:20px;}
  .cert-carousel{padding-inline:44px;}
  .cert-item{height:240px;padding:12px;}
  .cert-arrow{width:38px;height:38px;top:calc(50% - 19px);}
  .cert-arrow svg{width:15px;height:15px;}
  .lightbox-close{top:12px;right:12px;width:38px;height:38px;}
  .lightbox-nav{width:38px;height:38px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
  .lightbox-frame img{max-height:60vh;}

  .banner-copy h2{font-size:1.6rem;}
  footer{padding:38px 0 22px;}
}

@media (max-width:480px){
  .wrap{padding-inline:17px;}
  .spacing{padding-block:34px;}
  .btn{padding:11px 20px;font-size:0.82rem;}

  .topbar-inner{gap:10px;padding-block:10px;}
  .logo-text{font-size:1.2rem;}
  .logo-icon{width:32px;height:32px;}
  .logo-icon img{width:28px;height:28px;}
  .cb-icon{width:38px;height:38px;}
  .header-cta{padding:9px 15px;font-size:0.73rem;}

  .hero h1{font-size:1.85rem;}
  .hero-inner{padding-block:36px 72px;}
  .hero-btns{gap:10px;}
  /* grow to share a row where both fit, and each fills the width of its own
     row once they wrap — so there is never a stray half-width button */
  .hero-btns .btn{flex:1 1 auto;padding-inline:16px;}
  .hero-facts{margin-top:20px;}
  .hero-facts li{padding-inline:9px;}
  .hero-facts b{font-size:0.88rem;}
  .hero-facts span{font-size:0.65rem;}

  .strip{margin-top:-34px;gap:12px;}
  .strip-card{padding:15px 16px;gap:12px;}
  .strip-icon-box .ico{width:36px;height:36px;}
  .strip-logo{width:36px;height:36px;}
  .strip-text b{font-size:0.9rem;}
  .strip-sub{font-size:0.75rem;line-height:1.4;}
  .strip-link{font-size:0.66rem;margin-top:7px;}

  .about-visual{max-width:280px;}
  .mantra{padding:17px 16px 15px 40px;font-size:0.9rem;}
  .mantra::before{left:12px;top:9px;font-size:2.4rem;}
  .cred-grid li{padding:14px 15px;gap:12px;}
  .cred-grid .cred-ico{width:32px;height:32px;}
  .cred-grid b{font-size:1.04rem;}
  .cred-grid span{font-size:0.76rem;}
  .about-pills{gap:8px;}
  .about-pill{padding:9px 14px;font-size:0.78rem;}

  .achieve-chip{padding:13px 14px;gap:10px;}
  .achieve-chip .num{width:25px;height:25px;font-size:0.66rem;}
  .achieve-chip span{font-size:0.79rem;}

  .video-frame{padding:8px;}
  .video-wrap{border-radius:14px;}
  .play-btn{width:48px;height:48px;}
  .play-btn::after{border-width:7px 0 7px 11px;margin-left:3px;}

  .treat-card{padding:16px 14px 14px;gap:11px;}
  .treat-head{gap:9px;}
  .tsvg{width:26px;height:26px;}
  .treat-title{font-size:0.86rem;}
  .treat-link{font-size:0.65rem;letter-spacing:.09em;}

  .zig-year,.zig-row:nth-child(even) .zig-year{font-size:1.02rem;padding:12px 11px;border-left-width:3px;}
  .zig-body,.zig-row:nth-child(even) .zig-body{padding:12px 13px;}
  .zig-body b{font-size:0.9rem;}
  .zig-body span{font-size:0.78rem;}
  .zig-row + .zig-row{margin-top:12px;}

  .split-right{padding:24px 18px;}
  .pt-title{font-size:0.88rem;}

  .badge-row{gap:8px;}
  .badge-chip{padding:6px 13px;font-size:0.73rem;}

  .appt-form{padding:26px 17px;}
  .appt-side{padding:26px 17px;}
  .side-list .si{width:32px;height:32px;border-radius:9px;}
  .side-list b{font-size:0.88rem;}

  .modal-card{padding:34px 22px 24px;border-radius:20px;}
  .modal-icon{width:54px;height:54px;margin-bottom:14px;}
  .modal-icon svg{width:26px;height:26px;}

  .to-top{width:42px;height:42px;right:15px;bottom:15px;}
}

/* =========================================================
   SMALL PHONES — 320 to 400px
   ========================================================= */
@media (max-width:400px){
  :root{--header-h:56px;}
  .wrap{padding-inline:15px;}

  /* the wordmark plus two icon buttons is the whole top bar budget at 320px,
     so every part of it comes down a size */
  .logo{gap:8px;}
  .logo-text{font-size:1.08rem;}
  .logo-icon{width:30px;height:30px;}
  .logo-icon img{width:26px;height:26px;}
  .contact-bar{gap:7px;}
  .cb-icon{width:35px;height:35px;}
  .cb-icon .ico{width:14px;height:14px;}
  .topbar-inner{gap:8px;padding-block:9px;}
  .navbar-inner{gap:8px;}
  .nav-toggle{width:40px;height:40px;border-radius:11px;}
  .header-cta{padding:9px 13px;font-size:0.7rem;}

  .hero h1{font-size:1.68rem;}
  .hero p.lead{font-size:0.9rem;}
  /* the three columns are ~86px wide here — the gutters give up what they can
     and the type takes the rest so the row still holds */
  .hero-facts li{padding-inline:6px;}
  .hero-facts b{font-size:0.8rem;}
  .hero-facts span{font-size:0.6rem;}

  .treat-title{font-size:0.82rem;}
  .footer-grid{gap:22px 16px;}
  .footer-bottom{font-size:0.75rem;}
}

/* Below the narrowest real phone — reachable by browser zoom, which shrinks
   the effective CSS viewport. The fit-content row needs about 278px and the
   hero clips rather than scrolls, so the last stat would simply vanish. Here
   it gives up the single row and stacks; the dividers go with it, since a
   border-left only reads as a divider while the three share a row. */
@media (max-width:319px){
  .hero-facts{flex-wrap:wrap;}
  .hero-facts li{flex:1 1 100%;white-space:normal;padding-inline:0;border-left:0;}
}


/* a landscape phone has the width for the two-up layouts but almost none of
   the height, so the vertical padding comes back off */
@media (max-width:940px) and (max-height:520px) and (orientation:landscape){
  .spacing{padding-block:32px;}
  .hero-inner{padding-block:30px 64px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .js .reveal{opacity:1;transform:none;}
}