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

:root{
  /* brand — medical teal, with a haldi/saffron accent for the highlights */
  --brand:#0e7a72;        /* primary fills: buttons, pills, gradients */
  --brand-deep:#0a5a54;   /* hover / pressed */
  --brand-soft:#159a90;   /* accent text & icons — lighter so it reads as accent, not heading */
  --brand-glow:#3fc2b4;   /* gradient light end + glows */
  --gold-tint:#fbeed8;
  --gold:#e0912f;
  --tint:#e4f2f0;         /* light brand tint */
  --bg:#f4f8f8;
  --card:#ffffff;
  --deep:#0c2a2a;        /* headings + dark sections */
  --ink:#1d2b2b;
  --ink-soft:#6f8382;
  --line:#dde9e8;
  --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(26%) sepia(18%) saturate(1436%) hue-rotate(126deg) brightness(149%) contrast(111%); /* #0e7a72 */
  --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(--deep);line-height:1.22;
}
h1{letter-spacing:-0.03em;}

/* ---------------- ICONS ----------------
   assets/img/icons/*.svg are flat black on transparent — the filter recolours
   them. Teal 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);
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--brand);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(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 10px 22px -12px rgba(14,122,114,0.7);
}
.btn-primary:hover{background:transparent;color:var(--brand);box-shadow:none;}

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

.btn-mint{
  background:var(--gold);border-color:var(--gold);color:#fff;
  box-shadow:0 10px 22px -12px rgba(224,145,47,0.7);
}
.btn-mint:hover{background:transparent;color:var(--gold);box-shadow:none;}

/* for use over photography / dark panels — teal fill would sink into a scrim */
.btn-light{background:#fff;border-color:#fff;color:var(--deep);}
.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(--deep);}

/* on dark panels the outline state needs to stay light, not go teal */
.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 teal */
.logo-icon img{width:34px;height:34px;object-fit:contain;filter:var(--ico-theme);}
.logo:hover .logo-icon{transform:translateY(-2px);}

.logo-text{display:flex;align-items:baseline;gap:.12em;font-size:1.7rem;letter-spacing:-0.035em;}
.lt-thin{font-weight:400;color:var(--brand-soft);}
.lt-bold{font-weight:700;color:var(--deep);}

/* dark-background variant (footer) */
.logo-light .logo-icon img{filter:var(--ico-white);}
.logo-light .lt-thin{color:var(--brand-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(--deep);}
.contact-bar a,.contact-bar .cb-row{display:flex;align-items:center;gap:11px;transition:color .2s ease;}
.contact-bar a:hover{color:var(--brand-soft);}
.contact-bar a:hover .cb-icon{background:#d3e9e6;}
.cb-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:var(--tint);color:var(--brand);
  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(10,45,45,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(--brand-soft);}
nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--brand-soft);border-radius:2px;
}
.nav-cta-li{display:none;}
.header-cta{flex-shrink:0;padding:10px 22px;font-size:0.79rem;}

/* solid teal 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(--brand);
  cursor:pointer;padding:0;
  box-shadow:0 8px 18px -10px rgba(14,122,114,0.8);
  transition:background .25s ease, transform .2s ease;
}
.nav-toggle:active{transform:scale(.94);}
.nav-toggle[aria-expanded="true"]{background:var(--brand-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(--brand-soft);
  letter-spacing:.04em;margin-bottom:18px;
}
.eyebrow-line .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);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(--deep);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(--gold);}
.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;
  padding:2px 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:1.24rem;font-weight:700;letter-spacing:-0.02em;line-height:1.35;}
.hero-facts span{font-size:0.78rem;color:rgba(255,255,255,0.6);}

/* ---------------- STRIP CARDS ---------------- */
/* sits outside .hero and rides up over the photo's bottom edge */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:-52px;position:relative;z-index:3;}
.strip-card{
  background:#fff;border-radius:22px;padding:24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 20px 44px -22px rgba(10,45,45,0.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.strip-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -24px rgba(10,45,45,0.2);}
.strip-left{display:flex;align-items:center;gap:16px;min-width:0;}
/* 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:46px;height:46px;vertical-align:0;}
.strip-text b{font-size:0.98rem;color:var(--deep);display:block;margin-bottom:2px;}
.strip-text span{font-size:0.82rem;color:var(--ink-soft);}
.strip-pill{
  padding:10px 20px;border-radius:100px;font-size:0.8rem;font-weight:600;
  background:var(--deep);color:#fff;white-space:nowrap;flex-shrink:0;
  transition:background .25s ease, transform .25s ease;
}
.strip-pill:hover{transform:translateX(3px);background:var(--brand);}
.strip-pill.green{background:var(--gold);}
.strip-pill.green:hover{background:#c47a1c;}

/* ---------------- 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(--brand-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(--brand-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(--deep);margin-bottom:16px;max-width:26ch;}
.about-grid p.body{color:var(--ink-soft);margin-bottom:26px;}

.mantra{
  position:relative;
  background:var(--tint);border-radius:20px;
  padding:26px 28px 24px 64px;margin-bottom:30px;
  font-size:0.99rem;font-style:italic;color:var(--brand-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(--brand-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(--brand-soft);
}

/* 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 #d3e5e3;border-radius:14px;
  padding:22px 22px;
  box-shadow:0 16px 34px -22px rgba(10,45,45,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(14,122,114,.4);
  box-shadow:0 26px 48px -24px rgba(10,45,45,0.55);
}
.cred-grid b{
  display:block;font-size:1.24rem;font-weight:700;color:var(--deep);
  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(--gold-tint);color:#8a5a12;}
.pill-b{background:var(--tint);color:var(--brand-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(--deep), var(--brand));
  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(--tint);
  box-shadow:0 30px 60px -30px rgba(10,45,45,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(10,45,45,0.28);
}
.video-wrap{
  position:relative;width:100%;padding-bottom:56.25%;height:0;
  overflow:hidden;border-radius:20px;background:var(--deep);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(10,45,45,.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(--brand);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(--deep);
  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(--deep);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(--deep) 0%, var(--brand) 100%);
  border-radius:var(--radius);
  padding:42px 38px;color:rgba(255,255,255,0.85);
  box-shadow:0 28px 56px -30px rgba(10,45,45,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(--gold) 0%, rgba(224,145,47,.45) 60%, rgba(224,145,47,.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(--gold);
  box-shadow:0 0 0 4px rgba(224,145,47,0.2);
  transition:box-shadow .25s ease;
}
.paper-timeline li:hover::before{box-shadow:0 0 0 6px rgba(224,145,47,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(--gold);
}

/* ---------------- 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(--deep);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(10,45,45,0.5);
}

.zig-row:hover .zig-year,.zig-row:hover .zig-body{
  border-color:rgba(14,122,114,.28);
  box-shadow:0 18px 34px -26px rgba(10,45,45,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(10,45,45,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(10,45,45,0.26);}
.achieve-chip .num{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:var(--tint);color:var(--brand-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(--gold-tint);color:var(--gold);}
.achieve-chip span{font-size:0.88rem;color:var(--ink-soft);}
.achieve-chip b{color:var(--deep);}

/* 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 conditions read as a single family. The whole tile is the link, and the
   icon chip carries the colour — it is the only thing that changes on hover.
   Three across: the set is six tiles, so 3x2 fills both rows exactly. Five
   across would leave a single orphan tile on the second row. */
.treat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
/* Warm spice-box tints — haldi and terracotta — so this section reads warm
   against the cool teal .bg-alt behind them, which does the separating work a
   border used to. */
.treat-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:24px 22px 20px;border-radius:22px;overflow:hidden;
  background:#fbeacf;color:var(--ink);text-decoration:none;isolation:isolate;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* checkerboards across the 3-wide grid so neither tint lines up in a column */
.treat-card:nth-child(2n){background:#f8e1d6;}
/* one overlay so hover deepens either tint by the same amount */
.treat-card::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(12,42,42,.07);opacity:0;transition:opacity .3s ease;
}
.treat-card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -28px rgba(10,45,45,0.5);}
.treat-card:hover::before{opacity:1;}

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

.treat-title{
  font-weight:700;font-size:0.98rem;letter-spacing:-0.02em;
  color:var(--deep);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:#93600c;
}
.treat-card:nth-child(2n) .treat-link{color:#a04a28;}
.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(--deep);isolation:isolate;}

/* photo occupies the right 65% only; the left third is the teal panel */
.banner-media{position:absolute;top:0;right:0;bottom:0;width:65%;z-index:0;}
/* the CTA photo is a portrait dropped into a landscape frame, so a centred
   crop cuts the top of the head off — anchor it to the top instead */
.banner-media img{width:100%;height:100%;object-fit:cover;object-position:center top;}

/* 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(--deep) 0%,
    var(--deep) 34%,
    rgba(12,42,42,.90) 45%,
    rgba(12,42,42,.55) 58%,
    rgba(12,42,42,.18) 74%,
    rgba(12,42,42,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(10,45,45,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(--deep);}
/* 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(--brand-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(--gold);text-align:center;min-height:1.2em;}
/* the form sits on white, so this one keeps the dark teal 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(12,42,42,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(12,42,42,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(12,42,42,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(--tint);color:var(--ink-soft);cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.modal-close:hover{background:var(--brand);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(--tint);color:var(--brand);
}
.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;}

.appt-side{
  background:linear-gradient(160deg,var(--deep),var(--brand));
  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(63,194,180,0.42), 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(--gold);}
.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(--gold);}
.side-list span{font-size:0.78rem;color:rgba(255,255,255,0.55);}
.side-list span a{color:var(--gold);border-bottom:1px solid rgba(224,145,47,.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(--deep);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(--brand);border-color:var(--brand-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(--gold);}
.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(--brand);color:#fff;font-weight:700;
  box-shadow:0 14px 28px -10px rgba(14,122,114,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(--brand-deep);}

/* ---------------- REVEAL ---------------- */
.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{grid-template-columns:repeat(2,1fr);}
  .treat-grid{grid-template-columns:repeat(4,1fr);}
  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(10,45,45,0.5);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    /* the full list 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. */
  .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;}

  .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;}

  .video-head{margin-bottom:28px;}
  .video-frame{padding:10px;}
  .play-btn{width:56px;height:56px;box-shadow:0 12px 26px -12px rgba(10,45,45,.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 artwork is only ~340px wide.
     height:auto, not a fixed band — this image is taller than it is wide
     (588x652), so a 250px strip with object-fit:cover threw away well over
     half of it. Capped and centred because at the top of this range an
     uncapped width would make it about 1040px tall, a whole screen of image
     before the copy starts. On a phone it is under the cap and runs full
     width. The img has to give up height:100% with it, or it collapses
     against an auto-height parent. */
  .banner-media{position:relative;width:100%;max-width:430px;margin-inline:auto;height:auto;}
  .banner-media img{height:auto;}
  .banner::before{
    background:linear-gradient(180deg, rgba(12,42,42,0) 40%, rgba(12,42,42,.5) 78%, var(--deep) 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;}

  .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;}

  /* the row survives here — the label wraps to a second line rather than the
     card breaking into a three-row stack, which costs ~50px per card */
  .strip{margin-top:-34px;gap:12px;}
  .strip-card{padding:15px 16px;gap:12px;}
  .strip-left{gap:11px;}
  .strip-icon-box .ico{width:36px;height:36px;}
  .strip-text b{font-size:0.9rem;}
  .strip-text span{font-size:0.75rem;line-height:1.4;}
  .strip-pill{padding:9px 14px;font-size:0.74rem;}
  .strip-pill:hover{transform:none;}

  .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;}
}

/* the last 25px, where the pill and the label start fighting over the same
   150px. Stacking costs ~50px of height per card, so it waits until here. */
@media (max-width:345px){
  .strip-card{flex-direction:column;align-items:stretch;gap:12px;}
  .strip-pill{text-align:center;padding:11px 18px;}
}

/* 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;}
}

/* =========================================================
   SHARED BLOCK — achievements photo gallery, certificates
   carousel (Swiper), photo lightbox, wide quote under video.
   Kept identical across all five profile sites.
   ========================================================= */

/* ---------------- ACHIEVEMENTS PHOTO GALLERY ---------------- */
.gallery-block{margin-top:44px;}
.gallery-block .section-tag{margin-bottom:18px;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.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 ----------------
   A column masonry rather than the square crop grid the achievements gallery
   uses, so each photo keeps its own shape instead of being cut to a square.
   .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;}
/* the handful-of-letters case: centred cards instead of carousel chrome.
   Each card is capped so a lone portrait scan does not sprawl. */
.cert-row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.cert-row .cert-item{width:min(100%,400px);height:auto;max-height:540px;}
.cert-row .cert-item img{height:auto;max-height:500px;}

.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;}

/* ---------------- VIDEO GALLERY + POPUP ----------------
   The clips run 9:16, 1:1 and 16:9, and neither option on a plain tile worked:
   cropping them all to one 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.

   Laid out as a centred flex wrap rather than a grid: a grid always left-aligns
   a short final row. The column count is a custom property so a breakpoint only
   has to change the number. */
.vid-grid{
  --vid-cols:3;--vid-gap:16px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vid-gap);
}
.vid-card{
  position:relative;aspect-ratio:1 / 1;
  flex:0 0 calc((100% - (var(--vid-cols) - 1) * var(--vid-gap)) / var(--vid-cols));
  border:none;padding:0;cursor:pointer;overflow:hidden;
  border-radius:18px;background:var(--deep);
  box-shadow:0 26px 54px -28px rgba(10,45,45,0.45);
  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 32px 62px -26px rgba(10,45,45,0.55);}
.vid-card:hover .vid-fg{transform:scale(1.04);}
.vid-card .play-btn{width:50px;height:50px;}
.vid-card .play-btn::after{border-width:9px 0 9px 15px;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(--deep),var(--brand));}

.videobox-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:60px 20px;
  background:rgba(6,20,20,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 */
.videobox-frame video{height:auto;
  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);
}

/* ---------------- PHOTO 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;}

/* ---------------- WIDE QUOTE (under the video) ---------------- */
/* the same .mantra block, 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);}

/* ---------------- RESPONSIVE (shared block) ---------------- */
@media (max-width:1240px) and (min-width:941px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:940px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
  .pgallery{column-gap:12px;}
  .pg-item{margin-bottom:12px;}
  .lightbox-overlay{padding:60px 60px;}
  .cert-item{height:300px;}
}
@media (max-width:640px){
  .gallery-block{margin-top:32px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  /* square tiles get too small to read three-up on a phone */
  .vid-grid{--vid-cols:2;--vid-gap:10px;}
  .vid-card{border-radius:14px;}
  .vid-card .vid-bg{filter:blur(12px) brightness(.6) saturate(1.35);}
  .vid-card .play-btn{width:36px;height:36px;}
  .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;}
  .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;}
  .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;}
}