/* ===========================================================
   Daily 45 — Shared Stylesheet
   =========================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ---------- Design tokens ---------- */
:root{
  --navy-950: #04211f;
  --navy-900: #0b3a35;
  --navy-800: #146450;
  --navy-700: #1e8264;
  --amber-500: #c08a2e;
  --amber-600: #9c6f1f;
  --amber-100: #f6ecd6;
  --accent-light: #eab654;
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e5ded0;
  --text-900: #10201e;
  --text-600: #4f6360;
  --text-400: #8a9c98;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --shadow-lg: 0 20px 50px rgba(16,24,40,.16);
  --container: 1180px;
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text-900);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: page-fade-in .5s ease;
  overflow-x: hidden;
}
html[lang="hi"] body{ font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4{ font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; }
@keyframes page-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* ---------- Scroll-reveal ---------- */
.reveal-init{ opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal-init.revealed{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity: 1; transform: none; transition: none; }
  body{ animation: none; }
  .asana-breath{ animation: none; }
}
h1,h2,h3,h4{
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide{ width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.section{ padding: 32px 0; }
.about-preview{ padding-top: 0; padding-bottom: 0; }
.section-tight{ padding: 22px 0; }
.section-alt{ background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: 23px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--amber-600); margin-bottom: 14px;
}
.eyebrow::before{ content: ""; width: 28px; height: 4px; background: var(--amber-500); display: inline-block; }

.section-head{ max-width: 640px; margin-bottom: 18px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ font-size: clamp(29px, 3.2vw, 39px); margin-bottom: 14px; }
.section-head p{ color: var(--text-600); font-size: 17.5px; }

/* ---------- Symmetric dash eyebrow (dash on both sides) ---------- */
.eyebrow-sym{ justify-content: center; }
.eyebrow-sym::after{ content: ""; width: 28px; height: 4px; background: var(--amber-500); display: inline-block; }

/* ---------- Life Reminder (home, below hero) ----------
   One centred column at every width — eyebrow, headline, a single pill bar of
   life pressures, a photo + copy row, three pillars, and a script sign-off.
   Only the photo/copy row changes proportion between phone and desktop, so
   there is no separate mobile composition to keep in sync with this one. */
.life-mission{
  position: relative; padding: 32px 0 28px; overflow: hidden; text-align: center;
  background:
    radial-gradient(780px 380px at 50% -14%, rgba(234,182,84,.16), transparent 62%),
    radial-gradient(560px 320px at 88% 6%, rgba(79,174,130,.13), transparent 66%),
    var(--bg);
}
/* Two soft, slowly-drifting glows behind the copy — a quiet ambient motion
   rather than anything that competes with the text or card for attention. */
.life-mission::before, .life-mission::after{
  content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.life-mission::before{
  width: 260px; height: 260px; top: -70px; left: -70px;
  background: radial-gradient(circle, rgba(234,182,84,.32), transparent 70%);
  animation: lmFloat 13s ease-in-out infinite;
}
.life-mission::after{
  width: 220px; height: 220px; bottom: -50px; right: -50px;
  background: radial-gradient(circle, rgba(79,174,130,.28), transparent 70%);
  animation: lmFloat 16s ease-in-out infinite reverse;
}
@keyframes lmFloat{ 0%, 100%{ transform: translate(0,0); } 50%{ transform: translate(18px,-16px); } }
@media (prefers-reduced-motion: reduce){
  .life-mission::before, .life-mission::after{ animation: none; }
}
.lm-inner{ position: relative; z-index: 1; max-width: 1360px; }

/* Hairline rules either side rather than the heavy amber dashes: at this size
   the label holds one line all the way down to 320px. */
.lm-eyebrow{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber-500);
  margin: 0 0 14px;
}
.lm-eyebrow::before, .lm-eyebrow::after{
  content: ""; flex: 0 0 auto; width: 38px; height: 1px; background: currentColor; opacity: .5;
}

.lm-title{
  font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(27px, 4.2vw, 46px); line-height: 1.18; text-wrap: balance;
  color: var(--navy-900); margin: 0 0 18px;
}
.lm-title .hl{
  background: linear-gradient(90deg, var(--amber-500), var(--accent-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Plain text framed by hairline rules above and below, matching the
   reference exactly rather than the boxed/iconed tag bar tried earlier. */
.lm-tagline{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(14px, 2.2vw, 16.5px);
  color: var(--text-600); margin: 0 auto 20px; max-width: 700px;
  padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lm-tagline .lm-dot{ background: var(--text-900); opacity: 1; }
.lm-lead{
  max-width: 860px; margin: 0 auto 22px; color: var(--text-600); text-wrap: balance;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65;
}
/* Bordered pill rather than plain inline text, so the "matters" line reads
   as one contained statement instead of just another sentence. Sizing is
   viewport-scaled and never wraps, down to a 320px phone, rather than
   breaking onto a second line like plain wrapping text would. */
.lm-matters-row{ display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.lm-matters{
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: clamp(5px, 1.8vw, 10px); white-space: nowrap; max-width: calc(100vw - 32px);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(9.5px, 3.1vw, 16.5px);
  color: var(--navy-900); margin: 0 auto 26px; padding: clamp(8px, 2.4vw, 12px) clamp(12px, 4vw, 30px);
  border: 1px solid var(--border); border-radius: 999px;
}
.lm-matters .hl{ color: var(--amber-600); }
.lm-dot{ flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }

/* Compact rounded mission card rather than a full-bleed ribbon, so it reads
   as one contained highlight inside the section instead of breaking it. */
.lm-mission-card{
  position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto 22px;
  border-radius: 26px; padding: 34px 40px; text-align: center; color: #fff;
  background:
    radial-gradient(60% 140% at 15% 30%, rgba(234,182,84,.22), transparent 60%),
    radial-gradient(60% 140% at 85% 70%, rgba(234,182,84,.18), transparent 60%),
    linear-gradient(115deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-700) 100%);
  box-shadow: 0 30px 54px -26px rgba(11,58,53,.6);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.lm-mission-card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(255,255,255,.1); pointer-events: none;
}
.lm-mission-card:hover{ transform: translateY(-6px); box-shadow: 0 40px 70px -26px rgba(11,58,53,.72); }
.lm-mission-card .eyebrow{ justify-content: center; color: var(--accent-light); margin-bottom: 14px; }
.lm-mission-card p{ color: rgba(255,255,255,.82); margin: 0 auto 14px; font-size: 15.5px; line-height: 1.7; }
.lm-mission-card .life-mission-cta-line{ color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 0; }
/* Grows in rather than just rising, so the card reads as unveiling itself
   rather than merely sliding up like the plainer text above it. */
.lm-mission-card.reveal-init{ transform: translateY(30px) scale(.94); }
.lm-mission-card.reveal-init.revealed{ transform: translateY(0) scale(1); }
.lm-mission-card.reveal-init.revealed:hover{ transform: translateY(-6px) scale(1); }

.lm-cta{ display: table; margin: 0 auto; }
.lm-cta svg{ transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.lm-cta:hover svg{ transform: translateX(5px); }
/* A couple of outward ripples once the button lands in view — enough to
   draw the eye without turning into a permanent, distracting loop. */
.lm-cta.revealed{ animation: lmCtaGlow 1.6s ease-out .55s 2; }
@keyframes lmCtaGlow{
  0%{ box-shadow: 0 0 0 0 rgba(192,138,46,.5); }
  70%{ box-shadow: 0 0 0 16px rgba(192,138,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(192,138,46,0); }
}
@media (prefers-reduced-motion: reduce){ .lm-cta.revealed{ animation: none; } }

@media (max-width: 640px){
  .life-mission{ padding: 22px 0 24px; }
  .lm-eyebrow{ font-size: 9.5px; letter-spacing: .16em; gap: 9px; margin-bottom: 10px; }
  .lm-eyebrow::before, .lm-eyebrow::after{ width: 24px; }
  .lm-title{ font-size: 27px; margin-bottom: 16px; }
  .lm-tagline{ gap: 8px; margin-bottom: 18px; padding: 10px 0; }
  .lm-lead{ margin-bottom: 18px; }
  /* Below 640px the pill wraps onto 2 lines — "Your health matters · Your
     mind matters" always stays together (that pairing is a single nowrap
     unit, .lm-matters-row) with only "You matter" dropping to its own
     line, rather than each phrase breaking onto its own line. */
  .lm-matters{
    flex-wrap: wrap; white-space: normal; max-width: calc(100vw - 48px);
    font-size: 13.5px; line-height: 1.7; gap: 4px 8px;
    padding: 13px 20px; margin-bottom: 22px;
  }
  .lm-mission-card{ padding: 30px 22px; border-radius: 20px; }
  .lm-mission-card:hover{ transform: none; }
  .lm-mission-card.reveal-init.revealed:hover{ transform: none; }
  .life-mission::before{ width: 160px; height: 160px; }
  .life-mission::after{ width: 140px; height: 140px; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; line-height: 1;
  transition: all .28s cubic-bezier(.2,.8,.2,1); white-space: nowrap; border: 1.5px solid transparent;
}
.btn:active{ transform: translateY(0) scale(.97); transition-duration: .1s; }
.btn-primary{ background: var(--amber-500); color: #fff; }
.btn-primary:hover{ background: var(--amber-600); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(192,138,46,.3); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.35); color: inherit; }
.btn-outline:hover{ border-color: var(--amber-500); color: var(--amber-500); transform: translateY(-2px); }
.btn-dark{ background: var(--navy-900); color: #fff; }
.btn-dark:hover{ background: var(--navy-800); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(19,36,107,.3); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 15px 30px; font-size: 16.5px; }

/* ---------- Top utility bar ---------- */
.top-bar{ background: var(--navy-950); color: rgba(255,255,255,.8); font-size: 13.5px; padding: 8px 0; }
.top-bar .container{ max-width: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.top-bar-contact{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.top-bar-contact a{ display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8); }
.top-bar-contact a:hover{ color: var(--accent-light); }
.top-bar-social{ display: flex; align-items: center; gap: 8px; }
.top-bar-social a{
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff;
}
.top-bar-social a:hover{ background: var(--amber-500); color: var(--navy-950); }
.top-bar-social a svg{ width: 13px; height: 13px; }
@media (max-width: 640px){
  .top-bar-contact a span.tb-label{ display: none; }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.navbar{ display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; color: var(--navy-900); }
.navbar-left{ display: flex; align-items: center; gap: 18px; }

.brand{ display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; }
.brand-logo-icon{ height: 44px; width: auto; flex-shrink: 0; display: block; }
.footer-logo-chip{ display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 6px 10px; flex-shrink: 0; }
.footer-logo-chip .brand-logo-icon{ height: 32px; }
.brand-logo-nav{ height: 54px; width: auto; display: block; }
.footer-brand .brand-logo-full{ height: 58px; width: auto; display: block; }
.brand-name{ font-size: 19px; font-weight: 500; color: var(--navy-900); letter-spacing: -.01em; }
.brand-name strong{ font-weight: 800; color: var(--amber-500); }
.footer-brand .brand-name{ color: #fff; }
.footer-brand .brand-name strong{ color: var(--accent-light); }

.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-link{ font-size: 15.5px; font-weight: 500; color: var(--text-600); position: relative; padding: 6px 0; transition: color .2s ease; }
.nav-link:hover{ color: var(--navy-900); }
.nav-link::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--amber-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::before{ transform: scaleX(1); }
.nav-link.active{ color: var(--navy-900); }
.nav-link.active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--amber-500); border-radius: 2px;
}
.nav-link.active::before{ display: none; }

/* ---------- Nav "Pages" dropdown (auto-lists active Common Pages) ---------- */
.nav-dropdown{ position: relative; }
.nav-dropdown-toggle{
  display: flex; align-items: center; gap: 5px; font-size: 15.5px; font-weight: 500; color: var(--text-600);
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 6px 0;
}
.nav-dropdown-toggle:hover{ color: var(--navy-900); }
.nav-dropdown-caret{ transition: transform .2s ease; }
.nav-dropdown.open .nav-dropdown-caret{ transform: rotate(180deg); }
.nav-dropdown-menu{
  list-style: none; position: absolute; top: calc(100% + 12px); left: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 200px; padding: 6px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu{ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-dropdown-link{ padding: 9px 11px; border-radius: 6px; font-size: 14px; }
.nav-dropdown-link:hover{ background: var(--bg); color: var(--navy-900); }
.nav-dropdown-link::before{ display: none; }

.nav-actions{ display: flex; align-items: center; gap: 12px; }
.nav-actions .btn-outline{ border-color: var(--navy-900); color: var(--navy-900); font-weight: 700; }
.nav-actions .btn-outline:hover{ background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.nav-actions .btn-primary{ box-shadow: 0 4px 14px rgba(192,138,46,.35); font-weight: 700; }
.nav-actions .btn-primary:hover{ box-shadow: 0 6px 18px rgba(192,138,46,.45); }
/* ---------- Language switcher ---------- */
.lang-switch{ position: relative; }
.lang-switch-btn{
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--text-600);
}
.lang-switch-btn:hover{ border-color: var(--amber-500); color: var(--amber-600); }
.lang-caret{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .2s ease; }
.lang-switch.open .lang-caret{ transform: rotate(180deg); }
.lang-switch-menu{
  list-style: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 150px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
.lang-switch.open .lang-switch-menu{ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.lang-option{
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 11px; border-radius: 6px;
  font-size: 14px; font-weight: 600; color: var(--text-600); text-align: left;
}
.lang-option:hover{ background: var(--bg); }
.lang-option.active{ color: var(--amber-600); background: var(--amber-100); }
.lang-option .lang-check{ opacity: 0; }
.lang-option.active .lang-check{ opacity: 1; }
@media (max-width: 760px){
  .lang-switch-btn{ padding: 7px 10px; font-size: 13px; }
  .lang-switch-menu{ right: -8px; }
  .navbar-left{ gap: 10px; }
}
@media (max-width: 420px){
  .lang-switch-btn{ padding: 7px 8px; gap: 3px; font-size: 12px; }
}

/* ---------- Hero banner carousel ---------- */
.hero-carousel-section{ background: var(--bg); }
.hero-carousel{ position: relative; width: 100%; aspect-ratio: 2560 / 908; overflow: hidden; background: var(--navy-950); }
.hero-carousel-slide{
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.hero-carousel-slide.active{ opacity: 1; pointer-events: auto; }
.hero-carousel-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-carousel-dots{ position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 9px; z-index: 3; }
.hero-dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); transition: background .2s ease, transform .2s ease; }
.hero-dot.active{ background: var(--accent-light); border-color: var(--accent-light); transform: scale(1.25); }
.hero-carousel-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(4,33,31,.45); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; z-index: 3; transition: background .2s ease;
}
.hero-carousel-arrow:hover{ background: rgba(4,33,31,.7); }
.hero-carousel-arrow.prev{ left: 14px; }
.hero-carousel-arrow.next{ right: 14px; }
.hero-cta-band{ padding: 28px 0 16px; text-align: center; }
.hero-cta-band .hero-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hero-cta-band .btn-outline{ border-color: var(--amber-500); color: var(--amber-500); }
.hero-cta-band .btn-outline:hover{ background: var(--amber-500); color: #fff; }
.hero-cta-band .hero-stats{
  display: flex; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.stat-card{
  flex: 1; min-width: 0; text-align: center; padding: 12px 20px; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: background .3s ease;
}
.stat-card:not(:last-child)::after{ content: ""; position: absolute; top: 22%; bottom: 22%; right: 0; width: 1px; background: var(--border); }
.stat-card:hover{ background: var(--amber-100); }
.stat-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--accent-light));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.stat-card:hover::before{ transform: scaleX(1); }
.stat-icon{
  width: 34px; height: 34px; border-radius: 50%; margin: 0; flex-shrink: 0;
  background: linear-gradient(135deg, var(--amber-100), #fff);
  display: flex; align-items: center; justify-content: center;
  animation: stat-pulse 3.2s ease-in-out infinite;
}
.stat-card:nth-child(2) .stat-icon{ animation-delay: .3s; }
.stat-card:nth-child(3) .stat-icon{ animation-delay: .6s; }
@keyframes stat-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(192,138,46,.25); }
  50%{ box-shadow: 0 0 0 7px rgba(192,138,46,0); }
}
.stat-icon svg{ width: 16px; height: 16px; stroke: var(--amber-600); fill: none; stroke-width: 1.8; }
.stat-card .stat-text{ text-align: left; width: 165px; flex-shrink: 0; }
.stat-number{ display: block; font-size: 20px; line-height: 1.1; font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--amber-600); letter-spacing: -0.01em; }
.stat-card span{ font-size: 12.5px; color: var(--text-600); margin-top: 1px; display: block; }
@media (prefers-reduced-motion: reduce){ .stat-icon{ animation: none; } }
@media (max-width: 640px){
  .stat-card{
    flex-direction: column; padding: 12px 6px; gap: 6px;
  }
  .stat-card:not(:last-child)::after{ top: 18%; bottom: 18%; left: auto; right: 0; width: 1px; height: auto; }
  .stat-icon{ width: 26px; height: 26px; }
  .stat-icon svg{ width: 13px; height: 13px; }
  .stat-card .stat-text{ text-align: center; width: auto; }
  .stat-number{ font-size: 15px; }
  .stat-card span{ font-size: 10px; line-height: 1.25; }
  .hero-cta-band .hero-stats{ margin-bottom: 0; }
}
@media (max-width: 640px){
  .hero-carousel{ aspect-ratio: 2560 / 908; }
  .hero-carousel-dots{ bottom: 10px; }
  .hero-carousel-arrow{ width: 32px; height: 32px; font-size: 16px; }
  .hero-cta-band{ padding: 20px 0 10px; }
  .hero-cta-band .hero-actions{ flex-wrap: nowrap; gap: 8px; margin-bottom: 0; }
  .hero-cta-band .hero-actions .btn{ flex: 1 1 0; min-width: 0; white-space: normal; padding: 9px 8px; font-size: 12px; }
}

.hamburger{ display: none; flex-direction: column; gap: 5px; width: 34px; height: 34px; align-items: center; justify-content: center; }
.hamburger span{ width: 20px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: all .2s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Placeholder banners / images ---------- */
.img-placeholder{
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.08);
}
.img-placeholder .ph-label{ font-size: 14px; font-weight: 600; letter-spacing: .03em; display: flex; flex-direction: column; gap: 6px; align-items: center;}
.img-placeholder .ph-icon{ font-size: 27px; opacity: .9; }
.img-placeholder img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.img-placeholder.light{
  background:
    repeating-linear-gradient(135deg, rgba(16,24,40,.04) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #efe9dc, #e3dccb);
  color: var(--text-600); border-color: var(--border);
}
.img-placeholder.amber{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--amber-500), var(--amber-600));
  color: rgba(16,17,10,.75); border: none;
}

/* ---------- Hero (home) ---------- */
.hero{
  position: relative; color: #fff; overflow: hidden;
  min-height: 640px; display: flex; align-items: center;
  background: var(--navy-950);
}
.hero-video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(9,15,30,.32), rgba(9,15,30,.5) 55%, rgba(9,15,30,.62)),
    radial-gradient(1100px 500px at 85% -10%, rgba(192,138,46,.25), transparent 60%);
}
.hero-inner{ max-width: 1000px; margin: 0 auto; text-align: center; padding: 48px 40px; position: relative; z-index: 2; }
.hero-inner .eyebrow{ justify-content: center; }
.hero h1{ font-size: clamp(35px, 5vw, 65px); margin-bottom: 20px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero h1 span{ color: var(--accent-light); }
.hero p{ color: rgba(255,255,255,.92); font-size: 19px; max-width: 680px; margin: 0 auto 34px; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; justify-content: center; }
.hero-stats{ display: flex; gap: 60px; flex-wrap: wrap; justify-content: center; }
.hero-stats .stat b{ display: block; font-size: 27px; font-family: 'Poppins', sans-serif; color: var(--accent-light); }
.hero-stats .stat span{ font-size: 14px; color: rgba(255,255,255,.6); }
@media (max-width: 760px){
  .hero{ min-height: 560px; }
  .hero-inner{ padding: 40px 20px; }
  .hero-stats{ gap: 22px 30px; }
}

/* ---------- Page banner (inner pages) ---------- */
.page-banner{
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: #fff; padding: 28px 0 26px; position: relative; overflow: hidden;
}
.page-banner::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(650px 260px at 90% 0%, rgba(192,138,46,.3), transparent 60%);
}
.page-banner .container{ position: relative; }
.breadcrumb{ font-size: 14.5px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.breadcrumb span{ color: var(--accent-light); }
.page-banner h1{ font-size: clamp(29px, 4vw, 43px); margin-bottom: 12px; }
.page-banner p{ color: rgba(255,255,255,.7); max-width: 560px; font-size: 17px; }

/* ---------- Cards ---------- */
.card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(192,138,46,.25); }
.card img{ transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover img{ transform: scale(1.06); }
.card-body{ padding: 18px; }
.card-body h3{ font-size: 19px; margin-bottom: 8px; }
.card-body p{ color: var(--text-600); font-size: 15.5px; }

.grid{ display: grid; gap: 26px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

/* Category cards */
.category-card .card-body{ display: flex; gap: 14px; align-items: flex-start; }
.cat-icon{
  width: 46px; height: 46px; border-radius: 12px; background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0;
}
.cat-count{ font-size: 13.5px; color: var(--text-400); margin-top: 6px; display: inline-block; }

/* ---------- Why Yoga (benefit circles) ---------- */
.why-yoga{
  position: relative; padding: 38px 0; color: #fff; text-align: center; overflow: hidden;
  background:
    radial-gradient(900px 420px at 50% 115%, rgba(234,182,84,.4), transparent 65%),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 35%, var(--navy-700) 100%);
}
.why-yoga .section-head{ margin-left:auto; margin-right:auto; }
.why-yoga .section-head p{ color: rgba(255,255,255,.7); }
.why-yoga .eyebrow{ justify-content: center; color: var(--accent-light); }

.benefit-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; text-align: left; }
.benefit-card{
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.18);
  border-radius: var(--radius-lg); padding: 20px 20px; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.benefit-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-light), var(--amber-500));
  transform: scaleX(.28); transform-origin: left; transition: transform .35s ease;
}
.benefit-card:hover{ transform: translateY(-8px); background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.32); box-shadow: 0 24px 46px rgba(0,0,0,.3); }
.benefit-card:hover::before{ transform: scaleX(1); }
.benefit-card .benefit-num{
  position: absolute; top: 20px; right: 22px; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.32); transition: color .3s ease;
}
.benefit-icon-badge{
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(234,182,84,.35), rgba(192,138,46,.2)); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.benefit-icon-badge svg{ width: 27px; height: 27px; stroke: #fff; fill: none; stroke-width: 1.7; }
.benefit-card:hover .benefit-icon-badge{ transform: scale(1.08) rotate(-4deg); box-shadow: 0 14px 28px rgba(0,0,0,.32); }
.benefit-card:hover .benefit-num{ color: rgba(255,255,255,.55); }
.benefit-card h3{ font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
.benefit-card p{ font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; }
.benefit-icon-badge.accent-blue{ background: linear-gradient(135deg,#c08a2e,#eab654); box-shadow: 0 10px 22px -6px #9c6f1f; }
.benefit-icon-badge.accent-pink{ background: linear-gradient(135deg,#0b3a35,#146450); box-shadow: 0 10px 22px -6px #04211f; }
.benefit-icon-badge.accent-amber{ background: linear-gradient(135deg,#7a5717,#b8860b); box-shadow: 0 10px 22px -6px #5c4211; }
.benefit-icon-badge.accent-green{ background: linear-gradient(135deg,#1e8264,#4fcf9e); box-shadow: 0 10px 22px -6px #146450; }
.check-list-dark{ text-align: left; margin: 2px 0 0; flex: 1; }
.check-list-dark li{
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(255,255,255,.72);
  padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.14); list-style: none; line-height: 1.45;
}
.check-list-dark li:last-child{ border-bottom: none; }
.check-list-dark li .tick{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: rgba(234,182,84,.16); color: var(--accent-light); font-size: 10.5px; font-weight: 800;
}
@media (max-width: 900px){ .benefit-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .benefit-grid{ grid-template-columns: 1fr; } }

.benefit-grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; text-align: left; }
@media (max-width: 900px){ .benefit-grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){
  .benefit-grid-4{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .benefit-grid-4 .benefit-card{ padding: 16px 14px; }
  .benefit-grid-4 .benefit-icon-badge{ width: 42px; height: 42px; border-radius: 12px; margin-bottom: 8px; }
  .benefit-grid-4 .benefit-icon-badge svg{ width: 20px; height: 20px; }
  .benefit-grid-4 .benefit-card h3{ font-size: 14.5px; margin-bottom: 4px; }
  .benefit-grid-4 .benefit-num{ font-size: 11px; top: 12px; right: 14px; }
  .benefit-grid-4 .check-list-dark li{ font-size: 11.5px; padding: 5px 0; gap: 6px; line-height: 1.4; }
  .benefit-grid-4 .check-list-dark li .tick{ width: 15px; height: 15px; font-size: 9px; }
}
.benefit-icon-badge.emoji-badge{ font-size: 24px; border-radius: 50%; }
.benefit-icon-badge svg{ display: block; margin: 0 auto; }

/* ---------- Why Awareness Needed — editorial feature grid ---------- */
.awareness-feature-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-md);
}
.awareness-feature{
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 44px 40px 38px; text-align: left; overflow: hidden; transition: background .3s ease;
}
.awareness-feature:not(:last-child){ border-right: 1px solid var(--border); }
.awareness-feature:hover{ background: var(--amber-100); }
.awareness-feature-num{
  position: absolute; top: 6px; right: 18px; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 80px; line-height: 1; color: var(--amber-100); z-index: 0; pointer-events: none;
}
.awareness-feature-icon{
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--amber-500), var(--accent-light));
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 12px 22px -8px rgba(192,138,46,.55);
}
.awareness-feature p{ position: relative; z-index: 1; font-size: 14.5px; color: var(--text-600); line-height: 1.65; max-width: 380px; margin: 0; }
.awareness-feature p strong{ display: block; color: var(--navy-900); font-family: 'Poppins', sans-serif; font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
@media (max-width: 900px){
  .awareness-feature-grid{ grid-template-columns: 1fr; }
  .awareness-feature:not(:last-child){ border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---------- Join Any Batch — single box ---------- */
.batch-box{
  width: 100%; margin: 0 auto; text-align: center;
  background: linear-gradient(160deg, #ffffff, var(--bg));
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 40px;
  box-shadow: var(--shadow-md);
}
.batch-box h2{ margin-bottom: 4px; }
.batch-box-sub{ color: var(--text-600); font-size: 15px; margin-bottom: 22px; }
.batch-pill-row{
  display: flex; flex-wrap: nowrap; gap: 16px; justify-content: center; margin-bottom: 26px;
}
.batch-pill{
  flex: 1; max-width: 160px; padding: 12px 14px; border-radius: 999px; border: none;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 14.5px; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.batch-pill svg{ width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; flex-shrink: 0; }
.batch-pill.pill-am{ background: linear-gradient(135deg, var(--amber-500), var(--accent-light)); box-shadow: 0 10px 20px -10px rgba(192,138,46,.65); }
.batch-pill.pill-pm{ background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); box-shadow: 0 10px 20px -10px rgba(11,58,53,.65); }
.batch-pill:hover{ transform: translateY(-3px) scale(1.045); }
.batch-box .btn-primary{
  background: var(--amber-500);
  box-shadow: 0 14px 28px -10px rgba(192,138,46,.5);
}
.batch-box .btn-primary:hover{
  background: var(--amber-600);
  box-shadow: 0 16px 32px -10px rgba(192,138,46,.6);
}
@media (max-width: 760px){
  .batch-box{ padding: 24px 20px; }
  .batch-pill-row{ flex-wrap: wrap; }
  .batch-pill{
    flex: 1 1 28%; max-width: none; padding: 12px 8px; font-size: 13px;
    flex-direction: column; gap: 4px; border-radius: 16px; text-align: center;
  }
}

/* ---------- Batch timing cards (joined, zero-gap grid) ---------- */
.batch-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.batch-grid .batch-card{ border-radius: 0; box-shadow: none; }
.batch-grid .batch-card:hover{ transform: none; box-shadow: none; background: var(--amber-100); }
.batch-grid .batch-card:not(:nth-child(3n))::after{
  content: ""; position: absolute; top: 14%; bottom: 14%; right: 0; width: 1px; background: var(--border);
}
.batch-grid .batch-card:nth-child(-n+3){ border-bottom: 1px solid var(--border); }
@media (max-width: 900px){
  .batch-grid{ grid-template-columns: repeat(2, 1fr); }
  .batch-grid .batch-card::after{ display: none; }
  .batch-grid .batch-card:nth-child(odd)::after{
    content: ""; position: absolute; top: 14%; bottom: 14%; right: 0; width: 1px; background: var(--border); display: block;
  }
  .batch-grid .batch-card{ border-bottom: none; }
  .batch-grid .batch-card:nth-child(-n+4){ border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px){
  .batch-grid{ grid-template-columns: 1fr; }
  .batch-grid .batch-card::after{ display: none !important; }
  .batch-grid .batch-card{ border-bottom: 1px solid var(--border) !important; }
  .batch-grid .batch-card:last-child{ border-bottom: none !important; }
}

.batch-card{ position: relative; text-align: center; padding: 16px 18px 12px; overflow: hidden; }
.batch-card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.batch-card .batch-icon{
  width: 42px; height: 42px; border-radius: 50%; color: #fff; box-shadow: 0 8px 16px -8px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; margin: 2px auto 8px;
}
.batch-card .batch-icon svg{ width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.7; }
.batch-card .batch-time{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15.5px; color: var(--navy-900); margin-bottom: 2px; }
.batch-card .batch-label{ font-size: 12.5px; color: var(--text-600); margin-bottom: 8px; }
.batch-card .batch-session{
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px;
}
.batch-card .batch-cta-row{ border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 9px; }
.batch-card .batch-cta-row .read-more{ font-size: 13px; }
.batch-card.batch-sunrise::before{ background: linear-gradient(90deg,#f59e0b,#fb923c); }
.batch-card.batch-sunrise .batch-icon{ background: linear-gradient(135deg,#f59e0b,#fb923c); }
.batch-card.batch-sunrise .batch-session{ background: #fff7ed; color: #c2410c; }
.batch-card.batch-dusk::before{ background: linear-gradient(90deg,#db2777,#a855f7); }
.batch-card.batch-dusk .batch-icon{ background: linear-gradient(135deg,#db2777,#a855f7); }
.batch-card.batch-dusk .batch-session{ background: #fdf4ff; color: #a21caf; }
.batch-card.batch-night::before{ background: linear-gradient(90deg,#4338ca,#6366f1); }
.batch-card.batch-night .batch-icon{ background: linear-gradient(135deg,#4338ca,#6366f1); }
.batch-card.batch-night .batch-session{ background: #eef2ff; color: #4338ca; }

/* ---------- Locked / gated payout card ---------- */
.locked-card{
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-700) 100%);
  color: #fff; border-radius: var(--radius-lg); padding: 40px 32px; text-align: center;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 48px -20px rgba(11,19,39,.55);
}
.locked-card::before{
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,138,46,.35), transparent 70%);
  top: -90px; right: -70px; pointer-events: none;
}
.locked-card > *{ position: relative; z-index: 1; }
.locked-card .lock-icon{
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
  box-shadow: 0 8px 20px -6px rgba(192,138,46,.65);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px;
}
.locked-card h3{ font-family: 'Poppins', sans-serif; font-size: 20px; margin-bottom: 26px; }
.locked-card p{ color: rgba(255,255,255,.65); font-size: 14.5px; margin-bottom: 24px; }
.locked-card-actions{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.locked-card-actions .btn{ flex: 1 1 140px; }
.locked-card-actions .btn-outline{ border-color: rgba(255,255,255,.35); color: #fff; }
.locked-card-actions .btn-outline:hover{ background: #fff; color: var(--navy-900); border-color: #fff; }
.locked-card-note{ margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.45); }

/* ---------- Share disclaimer note ---------- */
.share-disclaimer{
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-100, #f6f4ef); border: 1px solid var(--border); border-left: 3px solid var(--amber-500);
  border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--text-400); line-height: 1.5;
}
.share-disclaimer-icon{ flex-shrink: 0; font-size: 14px; line-height: 1.3; }

/* ---------- Video / YouTube cards ---------- */
.video-card .img-placeholder{ position: relative; aspect-ratio: 16/10; border-radius: 0; }
.play-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11,19,39,.28); }
.play-overlay span{
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: transform .2s ease;
}
.video-card:hover .play-overlay span{ transform: scale(1.08); }
.play-overlay svg{ width: 20px; height: 20px; fill: var(--navy-900); margin-left: 3px; }

/* ---------- Check list (used inside plain cards for grouped bullet benefits) ---------- */
.yoga-benefit-card{ padding: 20px 20px; }
.yoga-benefit-card.tint-amber{ background: #fdf1e0; border-color: rgba(192,138,46,.28); }
.yoga-benefit-card.tint-lavender{ background: #eef1ff; border-color: rgba(67,56,202,.22); }
.yoga-benefit-card.tint-rose{ background: #fdeaec; border-color: rgba(219,39,119,.22); }

/* ---------- 5 Basic Yoga Asanas (breathing icon animation) ---------- */
.asana-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 18px; text-align: center; }
.asana-card{ text-align: center; }
.asana-icon{
  position: relative; width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 30px -12px rgba(11,58,53,.5);
}
.asana-icon img, .asana-icon video{
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 2;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}
.asana-breath{
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,182,84,.4), transparent 70%);
  animation: asanaBreathe 4s ease-in-out infinite;
}
@keyframes asanaBreathe{
  0%, 100%{ transform: scale(.85); opacity: .45; }
  50%{ transform: scale(1.3); opacity: 0; }
}
.asana-card h3{ font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 2px; color: var(--navy-900); }
.asana-sanskrit{ font-size: 12.5px; color: var(--text-400); font-style: italic; }
@media (max-width: 900px){
  .asana-grid{ grid-template-columns: repeat(3, 1fr); row-gap: 26px; margin-top: 14px; }
  .asana-icon{ width: clamp(120px, 19vw, 150px); height: clamp(120px, 19vw, 150px); }
}
@media (max-width: 640px){
  .asana-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .asana-grid .asana-card:last-child{ grid-column: 1 / -1; }
  .asana-icon{ width: clamp(104px, 33vw, 140px); height: clamp(104px, 33vw, 140px); margin-bottom: 12px; }
  .asana-card h3{ font-size: 13.5px; }
  .asana-sanskrit{ font-size: 11px; }
}
.check-list{ text-align: left; margin: 0; }
.check-list li{
  display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text-600);
  padding: 6px 0; border-bottom: 1px dashed var(--border); list-style: none;
}
.check-list li:last-child{ border-bottom: none; }
.check-list li .tick{ color: #15803d; flex-shrink: 0; font-weight: 800; }

/* ---------- Bold colorful accent cards ---------- */
.accent-card{ position: relative; text-align: center; padding: 22px 18px 20px; overflow: hidden; height: 100%; box-sizing: border-box; }
.accent-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.accent-card .accent-icon{
  width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 12px; font-size: 28px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 24px -10px var(--accent-1);
}
.accent-card h3{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18.5px; margin-bottom: 8px; }
.accent-card p{ color: var(--text-600); font-size: 14px; }
.accent-card.accent-blue{ --accent-1: #146450; --accent-2: #34b58a; }
.accent-card.accent-pink{ --accent-1: #db2777; --accent-2: #f472b6; }
.accent-card.accent-amber{ --accent-1: #d97706; --accent-2: #fbbf24; }
.accent-card.accent-green{ --accent-1: #16a34a; --accent-2: #4ade80; }

/* ---------- Our Services (grid layout) ---------- */
.services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; max-width: 980px; margin: 12px auto 0; }
.service-item{ text-align: center; }
.service-thumb{
  display: block; width: 148px; height: 148px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden;
  border: 5px solid var(--surface); box-shadow: var(--shadow-md); transition: transform .2s ease, box-shadow .2s ease;
}
.service-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.service-item:hover .service-thumb{ transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); }
.service-item span{ font-size: 15.5px; font-weight: 700; color: var(--text-900); display: block; }
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
  .service-thumb{ width: 110px; height: 110px; border-width: 4px; margin-bottom: 12px; }
  .service-item span{ font-size: 14px; }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); max-width: 360px; }
}

/* ---------- Services split layout (wheel left, content right) ---------- */
.services-split{ display: grid; grid-template-columns: 500px 1fr; gap: 70px; align-items: center; margin-top: 16px; }
.services-right h3{ font-family: 'Poppins', sans-serif; font-size: 25px; margin-bottom: 12px; }
.services-right > p{ color: var(--text-600); font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
.services-right-list{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.services-right-list li{ display: flex; gap: 12px; align-items: flex-start; list-style: none; }
.services-right-list .check{
  width: 26px; height: 26px; border-radius: 50%; background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 14px; margin-top: 1px;
}
.services-right-list b{ display: block; font-size: 15.5px; margin-bottom: 2px; }
.services-right-list span{ font-size: 14px; color: var(--text-600); }
@media (max-width: 980px){
  .services-split{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .services-right{ max-width: 520px; }
  .services-right-list li{ text-align: left; }
}

/* ---------- Services spider web (radial spoke layout) ---------- */
.services-web-wrap{
  --orbit-radius: 190px;
  width: 500px; height: 500px; max-width: 100%; margin: 0 auto; position: relative;
}
.web-ring{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1.5px dashed rgba(192,138,46,.22); z-index: 0;
}
.web-ring.r1{ width: 100%; height: 100%; }
.web-ring.r2{ width: 67%; height: 67%; }
.web-ring.r3{ width: 34%; height: 34%; }
.services-orbit-rotor{
  position: absolute; inset: 0; z-index: 1;
  animation: services-orbit-spin 30s linear infinite;
}
.services-web-wrap:hover .services-orbit-rotor,
.services-web-wrap:hover .web-node-content{ animation-play-state: paused; }
.web-spoke{
  position: absolute; top: 50%; left: 50%; width: var(--orbit-radius); height: 1.5px;
  background: linear-gradient(90deg, rgba(192,138,46,.4), rgba(192,138,46,.05));
  transform-origin: 0 50%; transform: rotate(var(--angle)); z-index: 0;
}
.services-web-hub{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 116px; height: 116px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14.5px; box-shadow: var(--shadow-lg);
  border: 4px solid var(--bg);
}
.web-node{
  position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 2;
  transform: rotate(var(--angle)) translate(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));
}
.web-node-content{
  position: absolute; top: 0; left: 0; width: 110px; text-align: center;
  animation: services-orbit-counter-spin 30s linear infinite;
}
.web-node-content:hover .service-thumb{ transform: scale(1.08); box-shadow: var(--shadow-lg); border-color: var(--amber-500); }
.web-node-content .service-thumb{ width: 88px; height: 88px; margin: 0 auto 8px; border-width: 3px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.web-node-content span{ font-size: 12.5px; font-weight: 700; }
@keyframes services-orbit-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes services-orbit-counter-spin{
  from{ transform: translate(-50%,-50%) rotate(0deg); }
  to{ transform: translate(-50%,-50%) rotate(-360deg); }
}
@media (max-width: 560px){
  .services-web-wrap{ width: 320px; height: 320px; --orbit-radius: 100px; }
  .web-ring.r3{ display: none; }
  .services-web-hub{ width: 76px; height: 76px; font-size: 11.5px; border-width: 3px; }
  .web-node-content{ width: 80px; }
  .web-node-content .service-thumb{ width: 50px; height: 50px; margin-bottom: 6px; }
  .web-node-content span{ font-size: 11px; }
}
/* Nodes sit at radius + half node-width from center on all sides (incl. the 0deg/180deg
   spokes, which are perfectly horizontal) — below ~400px viewport, .services-web-wrap's
   max-width:100% starts compressing the box below its 320px design width while the fixed
   px radius/node-size do not shrink with it, so the radial nodes push past the box edge
   and out toward the container padding. Shrink the whole wheel further so the geometry
   stays safely inside the box at 320–399px viewports. */
@media (max-width: 400px){
  .services-web-wrap{ width: 240px; height: 240px; --orbit-radius: 76px; }
  .services-web-hub{ width: 62px; height: 62px; font-size: 9.5px; }
  .web-node-content{ width: 56px; }
  .web-node-content .service-thumb{ width: 44px; height: 44px; margin-bottom: 0; }
  .web-node-content span{ display: none; }
}

/* ---------- Plan comparison table ---------- */
.plans-section{ padding: 42px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plan-table-scroll{ overflow-x: auto; padding-bottom: 6px; }
.plan-grid{
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); min-width: 640px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
}
.plan-cell{ padding: 18px 16px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.plan-cell.row-label{ font-weight: 600; font-size: 15px; color: var(--text-900); }
.plan-cell.row-alt{ background: var(--bg); }
.plan-cell.center{ justify-content: center; }
.plan-grid > .plan-cell:nth-last-child(-n+4){ border-bottom: none; }
.plan-header-cell{
  flex-direction: column; align-items: flex-start; text-align: left; position: relative;
  padding-top: 26px;
}
.plan-header-cell.featured{
  background: linear-gradient(180deg, var(--amber-100), var(--surface) 70%);
  box-shadow: inset 0 0 0 2px var(--amber-500);
}
.plan-badge-best{
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.plan-name{ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; margin-top: 6px; }
.plan-price{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 23px; color: var(--navy-900); }
.plan-price-sub{ font-size: 13px; color: var(--text-400); margin: 3px 0 8px; }
.plan-discount{ font-size: 12px; font-weight: 700; color: #15803d; background: #dcfce7; padding: 3px 10px; border-radius: 999px; display: inline-block; }
.plan-check, .plan-cross{
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; flex-shrink: 0;
}
.plan-check{ background: #dcfce7; color: #15803d; }
.plan-cross{ background: #fee2e2; color: #dc2626; }
.plan-exclusive-tag{ font-size: 11.5px; font-weight: 700; color: var(--amber-600); display: block; margin-top: 4px; }
a.plan-header-cell{ cursor: pointer; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
a.plan-header-cell:hover{ box-shadow: 0 10px 24px rgba(192,138,46,.2); transform: translateY(-2px); z-index: 2; }
.plan-select-hint{ margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--amber-600); display: flex; align-items: center; gap: 4px; }
a.plan-header-cell:hover .plan-select-hint{ color: var(--amber-600); text-decoration: underline; }
.plans-cta{ text-align: center; margin-top: 34px; }
.plan-value{ font-size: 14px; color: var(--text-600); text-align: center; line-height: 1.4; width: 100%; }
.plan-value.muted{ color: var(--text-400); }
.plan-value strong{ color: var(--text-900); font-weight: 700; }
@media (max-width: 760px){
  .plan-cell{ padding: 14px 12px; }
}

/* ---------- Plan detail page ---------- */
.plan-detail-list{ border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.plan-detail-row{ display: flex; justify-content: space-between; gap: 16px; padding: 15px 20px; font-size: 15px; }
.plan-detail-row:nth-child(even){ background: var(--bg); }
.plan-detail-row .label{ font-weight: 600; color: var(--text-900); min-width: 0; overflow-wrap: break-word; }
.plan-detail-row .value{ color: var(--text-600); text-align: right; min-width: 0; overflow-wrap: break-word; }
.plan-detail-row .value strong{ color: var(--text-900); }
.plan-hero-card{
  background: var(--surface); border: 2px solid var(--amber-500); border-radius: var(--radius-lg);
  padding: 34px; text-align: center; box-shadow: 0 14px 34px rgba(192,138,46,.14); position: relative;
}

/* ---------- Enquiry form ---------- */
.enquiry-card{ background: var(--navy-950); border-radius: var(--radius-lg); padding: 36px; color: #fff; }
.enquiry-card h3{ font-size: 19px; margin-bottom: 8px; text-align: center; }
.enquiry-card p{ color: rgba(255,255,255,.65); font-size: 14.5px; margin-bottom: 22px; text-align: center; }
.enquiry-card .form-group label{ color: rgba(255,255,255,.85); }
.enquiry-card .form-group input[type=text], .enquiry-card .form-group input[type=email],
.enquiry-card .form-group input[type=password], .enquiry-card .form-group input[type=tel],
.enquiry-card .form-group textarea, .enquiry-card .form-group select{
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;
}
.enquiry-card .form-group input[type=text]:focus, .enquiry-card .form-group input[type=email]:focus,
.enquiry-card .form-group input[type=password]:focus, .enquiry-card .form-group input[type=tel]:focus,
.enquiry-card .form-group textarea:focus, .enquiry-card .form-group select:focus{
  background: rgba(255,255,255,.08); color: #fff;
}
.enquiry-card .form-group input::placeholder, .enquiry-card .form-group textarea::placeholder{ color: rgba(255,255,255,.4); }
.enquiry-card .form-alert{ background: rgba(220,252,231,.15); color: #86efac; border-color: rgba(134,239,172,.3); }

/* ---------- Pricing cards ---------- */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.pricing-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 20px; position: relative; text-align: center; transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card.featured{ border: 2px solid var(--amber-500); box-shadow: 0 14px 34px rgba(192,138,46,.16); }
.pricing-badge{
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.pricing-positioning{ font-size: 12px; font-weight: 700; color: var(--amber-600); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pricing-duration{ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.pricing-price{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 31px; color: var(--navy-900); }
.pricing-price-sub{ font-size: 13px; color: var(--text-400); margin: 2px 0 14px; }
.pricing-features{ text-align: left; margin-bottom: 14px; }
.pricing-features li{
  display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-600);
  padding: 5px 0; border-bottom: 1px dashed var(--border); list-style: none;
}
.pricing-features li:last-child{ border-bottom: none; }
.pricing-features li .tick{ color: #15803d; flex-shrink: 0; font-weight: 800; }
.pricing-features li.not-included{ color: var(--text-400); }
.pricing-features li.not-included .tick{ color: #dc2626; }
.pricing-recommended{ font-size: 12px; color: var(--text-400); margin-top: 8px; }

/* ---------- Plan comparison table ---------- */
.plan-section-subtitle{
  font-size: 16px; color: var(--text-600); max-width: 700px; margin: 0 auto 24px; text-align: center; font-weight: 500;
}
.plan-compare-wrap{
  background: #fbf5e9; border-radius: 24px;
  padding: 32px 24px 20px; overflow-x: auto; overflow-y: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.plan-compare-note{ text-align: center; font-size: 13px; color: #777; font-style: italic; margin-top: 18px; }
.plan-compare-table{
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 0 6px; min-width: 640px; align-items: stretch;
}
.plan-compare-col{ display: flex; flex-direction: column; position: relative; min-width: 0; }
.plan-compare-col.featured{
  background: rgba(251, 240, 218, 0.65); border: 2px dashed #c08a2e; border-radius: 20px;
  margin-top: -14px; padding-top: 14px; z-index: 1; box-shadow: 0 10px 24px rgba(192,138,46,.12);
}
.plan-compare-badge{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: #c08a2e; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(192,138,46,.3); text-transform: uppercase;
}
.plan-compare-head{
  padding: 10px 12px 14px; text-align: center; height: 130px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.plan-compare-head.features-head{ text-align: left; justify-content: flex-end; align-items: flex-start; }
.plan-compare-head.features-head h3{ font-size: 17px; font-weight: 800; color: #111827; margin: 0; }
.plan-compare-name{ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #111827; }
.plan-compare-price-row{ display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.plan-compare-price-original{ font-size: 13px; font-weight: 600; color: #9ca3af; text-decoration: line-through; }
.plan-compare-price{ font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: #0f3933; line-height: 1.1; }
.plan-compare-permo{ font-size: 11.5px; color: #6b7280; margin-top: 3px; font-weight: 500; }
.plan-compare-off{
  display: inline-block; background: #c08a2e; color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
}
.plan-compare-row{
  display: flex; align-items: center; justify-content: center; padding: 8px 12px; min-height: 38px; box-sizing: border-box;
  border-top: 1px solid rgba(0,0,0,0.06); font-size: 13px; text-align: center; line-height: 1.25;
}
.plan-compare-col.plan-compare-features .plan-compare-row{ justify-content: flex-start; text-align: left; font-weight: 700; color: #374151; }
.plan-compare-col.featured .plan-compare-row{ border-top-color: rgba(192,138,46,.15); }
.pc-icon{
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0; background: none;
}
.pc-icon.yes{ color: #10b981; }
.pc-icon.no{ color: #f43f5e; font-weight: 700; }
.plan-compare-cta{ padding: 14px 10px; min-height: 56px; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center; }
.plan-compare-cta .btn{ padding: 10px 18px; font-size: 13px; border-radius: 999px; font-weight: 700; }
.btn-teal{ background-color: #0f3933; color: #ffffff !important; border: none; box-shadow: 0 4px 12px rgba(15,57,51,0.2); }
.btn-teal:hover{ background-color: #0a2723; color: #ffffff !important; transform: translateY(-1px); }
.btn-gold{ background-color: #c08a2e; color: #ffffff !important; border: none; box-shadow: 0 4px 12px rgba(192,138,46,0.3); }
.btn-gold:hover{ background-color: #a67424; color: #ffffff !important; transform: translateY(-1px); }
.pc-short{ display: none; }

/* ---------- Services wheel (static image wheel, no animation) ---------- */
.services-wheel-wrap{
  position: relative; width: 520px; height: 520px; margin: 48px auto 0; max-width: 100%;
}
.services-wheel-wrap::before{
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,138,46,.07), transparent 70%);
  z-index: 0;
}
.services-wheel-spokes{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.services-wheel-hub{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 190px; height: 190px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .01em;
  box-shadow: 0 16px 40px rgba(19,36,107,.35), inset 0 0 0 6px rgba(255,255,255,.08); line-height: 1.3;
}
.services-wheel-hub-icon{ width: 42px; height: 42px; stroke: #fff; fill: none; stroke-width: 1.5; }
.services-wheel-item{ position: absolute; width: 150px; text-align: center; z-index: 1; transform: translate(-50%,-50%); }
.services-wheel-thumb{
  width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 12px; overflow: hidden;
  border: 5px solid #fff; box-shadow: 0 10px 26px rgba(16,24,40,.16), 0 0 0 1px rgba(16,24,40,.04);
}
.services-wheel-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.services-wheel-item span{
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-600); display: block;
}
.services-wheel-pos-1{ top: 8%;    left: 50%; }
.services-wheel-pos-2{ top: 29%;   left: 86.4%; }
.services-wheel-pos-3{ top: 71%;   left: 86.4%; }
.services-wheel-pos-4{ top: 92%;   left: 50%; }
.services-wheel-pos-5{ top: 71%;   left: 13.6%; }
.services-wheel-pos-6{ top: 29%;   left: 13.6%; }
@media (max-width: 900px){
  .services-wheel-wrap{ width: 440px; height: 440px; }
  .services-wheel-hub{ width: 150px; height: 150px; font-size: 15px; }
  .services-wheel-item{ width: 120px; }
  .services-wheel-thumb{ width: 100px; height: 100px; }
}
@media (max-width: 640px){
  .services-wheel-wrap{
    position: static; width: 100%; max-width: 360px; height: auto; margin: 24px auto 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px;
  }
  .services-wheel-wrap::before, .services-wheel-spokes{ display: none; }
  .services-wheel-hub{ position: static; transform: none; grid-column: 1 / -1; margin: 0 auto 6px; width: 150px; height: 150px; font-size: 15px; }
  .services-wheel-item{ position: static; transform: none; width: auto; }
  .services-wheel-thumb{ width: 100px; height: 100px; }
}

/* ---------- Spin the wheel ---------- */
.wheel-section{
  padding: 54px 0; text-align: center; color: #fff; overflow: hidden; position: relative;
  background:
    radial-gradient(900px 420px at 50% 115%, rgba(234,182,84,.35), transparent 65%),
    linear-gradient(165deg, var(--navy-900), var(--navy-700) 85%);
}
.wheel-section .section-head p{ color: rgba(255,255,255,.72); }
.wheel-section .eyebrow{ justify-content: center; color: var(--accent-light); }
.wheel-wrap{ position: relative; width: 300px; height: 300px; margin: 20px auto 0; }
.wheel{
  width: 100%; height: 100%; border-radius: 50%; position: relative; border: 8px solid #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); transition: transform 4.2s cubic-bezier(.13,.71,.13,1);
  background: conic-gradient(
    #c08a2e 0deg 45deg, #146450 45deg 90deg, #eab654 90deg 135deg, #0b3a35 135deg 180deg,
    #c08a2e 180deg 225deg, #146450 225deg 270deg, #eab654 270deg 315deg, #0b3a35 315deg 360deg
  );
}
.wheel-label{ position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; transform-origin: 0% 50%; text-align: right; padding-right: 16px; }
.wheel-label span{ display: inline-block; font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.wheel-pointer{
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 20px solid var(--amber-500); filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.wheel-center-btn{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4;
  width: 82px; height: 82px; border-radius: 50%; background: #fff; color: var(--navy-900);
  border: 4px solid var(--amber-500); font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.3); transition: transform .15s ease;
}
.wheel-center-btn:hover{ transform: translate(-50%,-50%) scale(1.05); }
.wheel-center-btn:disabled{ opacity: .7; cursor: default; }
.wheel-result{ margin-top: 26px; font-size: 17px; font-weight: 700; min-height: 26px; color: var(--accent-light); }
.wheel-fineprint{ margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.5); }

/* ---------- Footer contact snippet ---------- */
.footer-contact{ margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.footer-contact div{ display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.6); }
.footer-contact .fc-icon{ flex-shrink: 0; }

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  display: none; position: fixed; inset: 0; background: rgba(6,10,20,.92); z-index: 1000;
  align-items: center; justify-content: center; padding: 50px;
}
.lightbox-overlay.open{ display: flex; }
.lightbox-img{ max-width: 88vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.lightbox-caption{ position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 600; }
.lightbox-close{
  position: absolute; top: 22px; right: 28px; color: #fff; font-size: 31px; line-height: 1; background: none; border: none; cursor: pointer;
}
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); color: #fff;
  border: none; width: 46px; height: 46px; border-radius: 50%; font-size: 21px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover{ background: rgba(255,255,255,.28); }
.lightbox-prev{ left: 22px; }
.lightbox-next{ right: 22px; }
@media (max-width: 760px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .wheel-wrap{ width: 260px; height: 260px; }
}

/* ---------- Floating contact launcher (+ toggle, WhatsApp / Call) ---------- */
.fab-launcher{ position: fixed; left: 24px; bottom: 24px; z-index: 500; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fab-menu{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.floating-btn{
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(16,24,40,.28); color: #fff;
  opacity: 0; transform: translateY(14px) scale(.7); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.fab-launcher.open .floating-btn{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.floating-btn svg{ width: 27px; height: 27px; fill: #fff; }
.floating-btn.whatsapp{ background: #25D366; }
.floating-btn.whatsapp:hover{ background: #1fb959; }
.floating-btn.call{ background: #16a34a; border: 2px solid #fff; }
.floating-btn.call:hover{ background: #128a3e; }
.fab-toggle{
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--amber-500); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(192,138,46,.4); transition: background .2s ease, transform .2s ease;
}
.fab-toggle:hover{ background: var(--amber-600); }
.fab-toggle svg{ width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.4; transition: transform .25s ease; }
.fab-launcher.open .fab-toggle{ background: var(--amber-600); }
.fab-launcher.open .fab-toggle svg{ transform: rotate(45deg); }
@media (max-width: 640px){
  .fab-launcher{ left: 16px; bottom: 16px; gap: 12px; }
  .floating-btn{ width: 50px; height: 50px; }
  .floating-btn svg{ width: 24px; height: 24px; }
  .fab-toggle{ width: 52px; height: 52px; }
  .fab-toggle svg{ width: 22px; height: 22px; }
}

/* ---------- AI assistant chatbot ---------- */
.chatbot-toggle{
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(19,36,107,.4); transition: transform .2s ease, box-shadow .2s ease;
}
.chatbot-toggle:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(19,36,107,.48); }
.chatbot-toggle svg{ width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; }
.chatbot-toggle .chatbot-close-icon{ display: none; }
.chatbot-toggle .chatbot-ping{
  position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid var(--bg);
}
body.chatbot-open .chatbot-toggle .chatbot-chat-icon{ display: none; }
body.chatbot-open .chatbot-toggle .chatbot-close-icon{ display: block; }

.chatbot-panel{
  position: fixed; right: 24px; bottom: 100px; z-index: 500;
  width: 372px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 140px);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(16,24,40,.35);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease;
}
body.chatbot-open .chatbot-panel{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.chatbot-header{
  background: linear-gradient(135deg, var(--navy-950), var(--navy-700)); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.chatbot-header-avatar{
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.chatbot-header-avatar svg{ width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; }
.chatbot-header-meta{ flex: 1; min-width: 0; }
.chatbot-header-meta b{ display: block; font-size: 14.5px; font-family: 'Poppins', sans-serif; }
.chatbot-header-meta span{ font-size: 11.5px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 5px; }
.chatbot-header-meta span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.chatbot-header-close{
  width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chatbot-header-close svg{ width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; }

.chatbot-body{ flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.chat-msg{ display: flex; gap: 9px; max-width: 88%; }
.chat-msg.bot{ align-self: flex-start; }
.chat-msg.user{ align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .chat-avatar{
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; background: var(--navy-900);
}
.chat-msg .chat-avatar svg{ width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; }
.chat-msg .chat-bubble{ padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; }
.chat-msg.bot .chat-bubble{ background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text-900); }
.chat-msg.user .chat-bubble{ background: var(--amber-500); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-group{ display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.chat-link-btn{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--amber-600); border: 1.5px solid var(--amber-500); padding: 6px 12px; border-radius: 999px;
}
.chat-suggestions{ display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 4px; }
.chat-chip{
  font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--navy-900); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.chat-chip:hover{ background: var(--amber-100); border-color: var(--amber-500); }
.chatbot-typing{ display: flex; gap: 4px; align-items: center; padding: 12px 13px; }
.chatbot-typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--text-400); animation: chatbot-bounce 1.2s infinite ease-in-out; }
.chatbot-typing span:nth-child(2){ animation-delay: .15s; }
.chatbot-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes chatbot-bounce{ 0%,60%,100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-4px); opacity: 1; } }

.chatbot-input-row{ display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.chatbot-input-row input{
  flex: 1; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 13.5px; background: var(--bg);
}
.chatbot-input-row input:focus{ outline: none; border-color: var(--amber-500); }
.chatbot-send{
  width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--amber-500); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease;
}
.chatbot-send:hover{ background: var(--amber-600); }
.chatbot-send svg{ width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2.2; }

@media (max-width: 640px){
  .chatbot-toggle{ right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .chatbot-panel{ right: 16px; bottom: 86px; width: calc(100vw - 32px); height: calc(100vh - 130px); }
}

/* Blog cards */
.blog-card .img-placeholder{ aspect-ratio: 16/10; border-radius: 0; }
.blog-meta{ display: flex; gap: 14px; font-size: 13.5px; color: var(--text-400); margin-bottom: 10px; }
.tag-pill{
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--amber-100); color: var(--amber-600); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.read-more{ font-size: 14.5px; font-weight: 700; color: var(--navy-900); display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.video-card .read-more{ white-space: nowrap; }
.read-more:hover{ color: var(--amber-600); }

/* Team / people */
.team-card{ text-align: center; border: 1.5px solid #c7d5ec; }
.avatar{
  width: 92px; height: 92px; border-radius: 50%; margin: 26px auto 14px; display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins',sans-serif; font-weight: 700; font-size: 23px; color: #fff; overflow: hidden; flex-shrink: 0;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; }
.team-card p.role{ color: var(--amber-600); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.team-card p.bio{ color: var(--text-600); font-size: 14.5px; padding: 0 18px 22px; }

/* Stats strip */
.stats-strip{ display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; text-align: center; }
.stats-strip .stat b{ font-family: 'Poppins',sans-serif; font-size: 35px; color: var(--navy-900); display: block; }
.stats-strip .stat span{ color: var(--text-600); font-size: 14.5px; }

/* Testimonials */
.testimonial{ padding: 20px; border: 1.5px solid #c7d5ec; }
.testimonial p.quote{ font-size: 16.5px; color: var(--text-900); margin-bottom: 14px; }
.testimonial .who{ display: flex; align-items: center; gap: 12px; }
.testimonial .who .avatar{ width: 44px; height: 44px; font-size: 15px; margin: 0; }
.testimonial .who .meta b{ display: block; font-size: 15px; }
.testimonial .who .meta span{ font-size: 13.5px; color: var(--text-400); }
.stars{ color: var(--amber-500); font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }

/* Gallery */
.filter-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.filter-btn, .media-tab-btn{
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 14.5px; font-weight: 600;
  color: var(--text-600); background: var(--surface);
}
.filter-btn.active, .filter-btn:hover, .media-tab-btn.active, .media-tab-btn:hover{ background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.media-tab-row{ margin-bottom: 18px; }
.media-tab-btn{ font-size: 15px; padding: 10px 22px; }
.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item{ aspect-ratio: 1/1; border-radius: var(--radius-md); position: relative; cursor: pointer; }
.gallery-item.tall{ aspect-ratio: 1/2; grid-row: span 2; }
.gallery-item::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); pointer-events: none; }
.gallery-item .ph-cap{ position: absolute; bottom: 12px; left: 12px; right: 12px; font-size: 13.5px; font-weight: 600; text-align: left; color: rgba(255,255,255,.95); z-index: 1; }

/* Accordion (legal) */
.accordion-list{ display: flex; gap: 20px; align-items: flex-start; }
.accordion-col{ flex: 1; min-width: 0; }
@media (max-width: 760px){ .accordion-list{ flex-direction: column; gap: 0; } }
.accordion-item{ border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; background: var(--surface); overflow: hidden; }
.accordion-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
  font-family: 'Poppins',sans-serif; font-weight: 600; font-size: 16.5px; text-align: left;
}
.accordion-trigger .plus{ font-size: 21px; color: var(--amber-600); transition: transform .2s ease; }
.accordion-item.open .plus{ transform: rotate(45deg); }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.accordion-panel-inner{ padding: 0 22px 22px; color: var(--text-600); font-size: 15.5px; }
.accordion-panel-inner p{ margin-bottom: 10px; }
.legal-updated{ font-size: 13.5px; color: var(--text-400); margin-bottom: 26px; }

/* Forms */
.form-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group{ margin-bottom: 20px; }
.form-group label{ display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.form-group .req{ color: var(--amber-600); }
.form-group input[type=text], .form-group input[type=email], .form-group input[type=password],
.form-group input[type=tel], .form-group textarea, .form-group select{
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 15.5px; transition: border-color .15s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline: none; border-color: var(--amber-500); background: #fff; }
.form-group textarea{ resize: vertical; min-height: 120px; }
.checkbox-row{ display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text-600); margin-bottom: 22px; }
.checkbox-row input{ margin-top: 3px; }
.form-foot{ text-align: center; font-size: 15px; color: var(--text-600); margin-top: 22px; }
.form-divider{ display: flex; align-items: center; gap: 14px; color: var(--text-400); font-size: 13.5px; margin: 26px 0; }
.form-divider::before, .form-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.social-auth{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-auth button{
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px; font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface);
}
.social-auth button:hover{ border-color: var(--navy-900); }
.auth-wrap{ max-width: 460px; margin: 0 auto; }
.form-alert{
  display: none; align-items: center; gap: 10px; background: #ecfdf3; color: #067647; border: 1px solid #abefc6;
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; margin-bottom: 22px;
}
.form-alert.show{ display: flex; }

/* ---------- Split-screen auth pages (Register / Login) ---------- */
.auth-page{ min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-visual{
  position: relative; color: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: space-between;
  background-size: cover; background-position: center; overflow: hidden;
}
.auth-visual::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,15,30,.55), rgba(9,15,30,.82));
}
.auth-visual > *{ position: relative; z-index: 1; }
.auth-visual-heading{ margin-top: 32px; }
.auth-visual-heading h2{ font-size: clamp(27px, 3vw, 35px); margin-bottom: 14px; }
.auth-benefit-list{ margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.auth-benefit-list div{ display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: rgba(255,255,255,.9); }
.auth-benefit-list .tick{
  width: 22px; height: 22px; border-radius: 50%; background: rgba(192,138,46,.35); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.auth-quote{
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md);
  padding: 20px 22px; backdrop-filter: blur(2px); transition: opacity .35s ease;
}
.auth-quote p{ font-size: 15px; color: rgba(255,255,255,.92); margin-bottom: 12px; line-height: 1.6; }
.auth-quote .who{ display: flex; align-items: center; gap: 10px; }
.auth-quote .who img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.auth-quote .who b{ font-size: 14px; display: block; }
.auth-quote .who span{ font-size: 12.5px; color: rgba(255,255,255,.6); }
.auth-form-side{ display: flex; align-items: center; justify-content: center; padding: 60px 40px; }
@media (max-width: 900px){
  .auth-page{ grid-template-columns: 1fr; min-height: auto; }
  .auth-visual{ display: none; }
  .auth-form-side{ padding: 50px 24px; }
}

/* Lock Register/Login to a single screen — no page scroll, panels scroll internally if needed */
body.no-scroll-page{ height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.no-scroll-page .top-bar,
body.no-scroll-page .site-header,
body.no-scroll-page .site-footer{ flex-shrink: 0; }
body.no-scroll-page main{ flex: 1 1 auto; min-height: 0; display: flex; }
body.no-scroll-page .auth-page{ flex: 1 1 auto; min-height: 0; width: 100%; }
body.no-scroll-page .auth-visual,
body.no-scroll-page .auth-form-side{ overflow-y: auto; min-height: 0; }
body.no-scroll-page .auth-form-side{ padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 900px){
  body.no-scroll-page{ height: auto; overflow: auto; display: block; }
  body.no-scroll-page main{ display: block; }
}

/* Back-to-home bar (replaces top-bar + header on auth pages) */
.auth-topbar{ padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.auth-back-link{ display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--navy-900); }
.auth-back-link:hover{ color: var(--amber-600); }
.auth-back-link svg{ width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Compact form spacing so Register/Login fit one screen */
body.no-scroll-page .auth-wrap .form-group{ margin-bottom: 10px; }
body.no-scroll-page .auth-wrap .form-row{ gap: 12px; }
body.no-scroll-page .auth-wrap .checkbox-row{ margin-bottom: 12px; }
body.no-scroll-page .auth-wrap .form-divider{ margin: 12px 0; }
body.no-scroll-page .auth-wrap .form-foot{ margin-top: 12px; }
body.no-scroll-page .auth-wrap .form-group label{ margin-bottom: 5px; }
body.no-scroll-page .auth-wrap .form-group input{ padding: 9px 13px; font-size: 14.5px; }
body.no-scroll-page .auth-wrap .social-auth button{ padding: 8px; }
body.no-scroll-page .auth-wrap > div[style]{ margin-bottom: 16px !important; }
body.no-scroll-page .auth-visual-heading{ margin-top: 18px; }
body.no-scroll-page .auth-benefit-list{ margin-top: 16px; gap: 8px; }
body.no-scroll-page .auth-quote{ padding: 14px 16px; }

/* Newsletter */
.newsletter-box{
  background: var(--navy-950); color: #fff; border-radius: var(--radius-lg); padding: 30px; text-align: center;
  position: relative; overflow: hidden;
}
.newsletter-box::after{ content:""; position:absolute; inset:0; background: radial-gradient(600px 220px at 20% 0%, rgba(192,138,46,.3), transparent 60%); pointer-events: none; }
.newsletter-box .container-inner{ position: relative; max-width: 520px; margin: 0 auto; }
.newsletter-form{ display: flex; gap: 10px; margin-top: 26px; }
.newsletter-form input{
  flex: 1; padding: 13px 16px; border-radius: 999px; border: none; font-size: 15.5px;
}
.newsletter-form input:focus{ outline: 2px solid var(--amber-500); }

/* Info / contact cards */
.info-card{ display: flex; gap: 16px; align-items: flex-start; padding: 24px; }
.info-card h3{ font-size: 17px; margin-bottom: 6px; }
.info-card p{ font-size: 15px; }
.info-icon{
  width: 46px; height: 46px; border-radius: 12px; background: var(--navy-900); color: var(--amber-500);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}

/* Photo page banner (About hero) */
.page-banner.has-photo{
  background:
    linear-gradient(180deg, rgba(9,15,30,.55), rgba(9,15,30,.82)),
    var(--photo) center/cover no-repeat;
  padding: 32px 0 28px; text-align: center;
}
.page-banner.has-photo::after{ display: none; }
.page-banner.has-photo .breadcrumb, .page-banner.has-photo p{ margin-left: auto; margin-right: auto; }
.page-banner.has-photo h1{ text-shadow: 0 2px 16px rgba(0,0,0,.4); }
/* The plain white/70%-opacity text from the base .page-banner p read fine
   on the flat navy gradient, but washes out against a busy photo — bump
   opacity up and add a shadow so it stays legible over any part of it. */
.page-banner.has-photo p{ color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.55); }

/* Timeline */
.timeline{ display: flex; justify-content: space-between; position: relative; margin-top: 20px; gap: 10px; }
.timeline::before{ content: ""; position: absolute; top: 23px; left: 40px; right: 40px; height: 2px; background: var(--border); z-index: 0; }
.timeline-item{ position: relative; z-index: 1; flex: 1; text-align: center; padding: 0 8px; min-width: 130px; }
.timeline-dot{
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy-900); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13.5px;
  font-family: 'Poppins', sans-serif; margin: 0 auto 16px; border: 4px solid var(--bg);
}
.timeline-item h4{ font-size: 15.5px; margin-bottom: 6px; }
.timeline-item p{ font-size: 14px; color: var(--text-600); }
@media (max-width: 760px){
  .timeline{ flex-direction: column; align-items: flex-start; gap: 28px; }
  .timeline::before{ top: 0; bottom: 0; left: 23px; right: auto; width: 2px; height: auto; }
  .timeline-item{ display: flex; gap: 16px; text-align: left; padding: 0; min-width: 0; width: 100%; }
  .timeline-dot{ margin: 0; flex-shrink: 0; }
  .timeline-text{ min-width: 0; padding-top: 6px; }
}

/* Value cards (icon on top) */
.value-card{ text-align: center; padding: 22px 18px; }
.value-card h3{ font-size: 17px; margin-bottom: 8px; }
.value-card p{ font-size: 14.5px; }
.value-icon{
  width: 56px; height: 56px; border-radius: 50%; background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center; font-size: 25px; margin: 0 auto 10px;
}

/* Step connector arrows (How It Works) */
.steps-grid{ position: relative; }
.step-arrow{
  position: absolute; top: 58px; transform: translate(-50%,-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--amber-500);
  font-size: 17px; font-weight: 800; box-shadow: var(--shadow-sm);
}
.step-arrow.arrow-1{ left: 33.333%; }
.step-arrow.arrow-2{ left: 66.666%; }
@media (max-width: 980px){
  .step-arrow{ display: none; }
}

/* Vision & Mission split panel */
.vm-split{
  display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.vm-panel{ padding: 26px 26px; }
.vm-panel.divider{ border-right: 1px solid var(--border); }
.vm-icon{
  width: 58px; height: 58px; border-radius: 50%; background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.vm-icon svg{ width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.vm-panel h3{ font-size: 21px; margin-bottom: 12px; }
.vm-panel p{ color: var(--text-600); font-size: 15.5px; line-height: 1.75; }
@media (max-width: 760px){
  .vm-split{ grid-template-columns: 1fr; }
  .vm-panel.divider{ border-right: none; border-bottom: 1px solid var(--border); }
}

/* Certification badges */
.cert-row{ display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cert-badge{
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 20px; min-width: 220px;
}
.cert-badge .cert-icon{
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy-900); color: var(--amber-500);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.cert-badge b{ display: block; font-size: 14.5px; }
.cert-badge span{ font-size: 13px; color: var(--text-400); }
@media (max-width: 640px){
  .cert-row{ display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; gap: 12px; }
  .cert-badge{ width: 100%; min-width: 0; flex-direction: column; text-align: center; padding: 14px 10px; gap: 8px; }
  .cert-badge .cert-icon{ width: 36px; height: 36px; font-size: 16px; }
  .cert-badge b{ font-size: 13px; }
  .cert-badge span{ font-size: 11px; }
}

/* Legal document page thumbnails — full real content, scaled down like a page preview */
.legal-thumb{
  aspect-ratio: 4/3; background: #fff; position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
}
.legal-thumb-tag{
  position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 5px; background: var(--navy-950); color: #fff;
}
.legal-thumb-scale{
  width: 250%; transform: scale(.4); transform-origin: top left; padding: 30px 34px 20px;
}
.legal-card{ display: flex; flex-direction: column; }
.legal-card .card-body{ display: flex; flex-direction: column; flex: 1; padding: 24px; }
.legal-card .card-body h3{ font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 700; color: var(--amber-600); line-height: 1.3; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .01em; }
.legal-card .card-body p{ font-family: Georgia, 'Times New Roman', serif; margin-bottom: 18px; font-size: 15px; color: var(--text-600); }
.legal-card .card-body .btn{ margin-top: auto; }
.legal-card .read-more{ margin-top: 0; }

/* Individual legal document view */
.document-view{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 44px 48px; position: relative; overflow: hidden;
}
.document-view::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--navy-900), var(--amber-500));
}
.document-view-head{
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border);
}
.document-view-icon{
  width: 54px; height: 54px; border-radius: 13px; background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.document-view-icon svg{ width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.document-view-head-meta{ flex: 1; min-width: 0; }
.document-view-head-meta h2{ font-size: 21px; margin-bottom: 4px; }
.document-view-head-meta .legal-updated{ margin-bottom: 0; }
.document-view-tag{
  font-size: 11px; font-weight: 800; letter-spacing: .04em; background: var(--navy-950); color: #fff;
  padding: 4px 10px; border-radius: 6px; flex-shrink: 0;
}
.document-view-body p{ color: var(--text-600); }
@media (max-width: 640px){
  .document-view{ padding: 30px 24px; }
  .document-view-head{ flex-wrap: wrap; }
}

/* Fictional sample certificate block */
.cert-sample-badge{
  display: inline-block; background: #fff3cd; color: #92660a; border: 1px solid #f5d98b;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 20px;
}
.cert-block{ text-align: center; }
.cert-block .cert-emblem{ width: 60px; height: 60px; margin: 0 auto 12px; color: var(--navy-900); }
.cert-block .cert-emblem svg{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; }
.cert-block .cert-gov-head p{ margin: 0; font-weight: 800; letter-spacing: .02em; font-size: 14.5px; color: var(--text-900); }
.cert-block .cert-gov-sub{ font-size: 13px; color: var(--text-600) !important; margin-top: 4px !important; font-weight: 500 !important; }
.cert-block .cert-title{ font-family: 'Poppins', sans-serif; font-size: 25px; margin: 18px 0 10px; }
.cert-block .cert-clause{ font-size: 12.5px; color: var(--text-400); font-style: italic; margin-bottom: 24px; }
.cert-block .cert-body{ text-align: left; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; margin-bottom: 22px; }
.cert-block .cert-body p{ margin-bottom: 14px; color: var(--text-900); }
.cert-block .cert-body p:last-child{ margin-bottom: 0; }
.cert-block .cert-sign{ text-align: right; margin-bottom: 24px; }
.cert-block .cert-sign p{ margin: 0 0 3px; font-size: 13.5px; color: var(--text-600); }
.cert-block .cert-sign p strong{ color: var(--text-900); }
.cert-block .cert-address{ text-align: left; border-top: 1px solid var(--border); padding-top: 18px; }
.cert-block .cert-address p{ margin: 0 0 4px; font-size: 13.5px; color: var(--text-600); }
@media (max-width: 640px){
  .cert-block .cert-sign{ text-align: left; }
}

/* Category overview cards */
.cat-overview-card{ position: relative; text-align: center; padding: 0 0 32px; border: 1.5px solid #c7d5ec; }
.cat-overview-card.disabled{ cursor: default; }
.cat-overview-card.disabled:hover{ transform: none; box-shadow: none; }
.cat-overview-photo{ aspect-ratio: 16/10; }
.cat-overview-card.disabled .cat-overview-photo{ filter: grayscale(60%); opacity: .8; }
.cat-overview-body{ padding: 22px 24px 0; }
.cat-soon-badge{
  position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,.92); color: var(--text-400); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.cat-live-badge{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.cat-notify-link{ display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--amber-600); }
.cat-notify-link:hover{ text-decoration: underline; }

/* Value/feature blocks */
.value-block{ display: flex; gap: 16px; }
.value-num{ font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 23px; color: var(--amber-500); background: var(--navy-950); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-950); color: rgba(255,255,255,.72); padding-top: 36px; }
.footer-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 24px; }
.footer-brand p{ font-size: 15px; margin: 16px 0 20px; color: rgba(255,255,255,.55); }
.social-row{ display: flex; gap: 10px; }
.social-btn{
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.social-btn:hover{ background: var(--amber-500); color: var(--navy-950); }
.social-btn svg{ width: 16px; height: 16px; }
.footer-col h4{ color: #fff; font-size: 15.5px; margin-bottom: 18px; }
.footer-col a{ display: block; font-size: 15px; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.footer-col a:hover{ color: var(--amber-500); }
.footer-newsletter p{ font-size: 14.5px; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.footer-newsletter form{ display: flex; gap: 8px; }
.footer-newsletter input{ flex:1; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; }
.footer-newsletter input::placeholder{ color: rgba(255,255,255,.4); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1); padding: 12px 0 90px; display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: rgba(255,255,255,.45); flex-wrap: wrap; gap: 10px;
}
.footer-bottom-links{ display: flex; gap: 18px; }
.footer-bottom-links a:hover{ color: var(--amber-500); }

/* Studio credit: sits on its own centred line under the copyright row, so the
   existing two flex items keep their left/right positions untouched. */
.footer-credit{
  flex: 0 0 100%; order: 3; text-align: center; margin: 0;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: rgba(255,255,255,.4); letter-spacing: .01em;
}
.footer-credit span{ color: rgba(255,255,255,.68); font-weight: 600; }

/* Two-column split layout (image + text sections) */
.hero-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  /* padding-top/bottom, not the `8px 0 16px` shorthand this used to be: most
     hero-grids are also .container elements, and the shorthand's `0` wiped the
     container's 24px side gutter, letting the image and copy run edge to edge
     on a phone. contact.html's hero-grid sits inside its own .container, so it
     is unaffected either way. */
  .hero-grid{ grid-template-columns: 1fr; padding-top: 8px; padding-bottom: 16px; gap: 20px; }
  .hero-grid > div > .btn:not(.btn-block){ display: table; margin: 4px auto 0; }
  .hero-narrative{ text-align: center; }
  .hero-narrative .eyebrow{ justify-content: center; }
  .hero-narrative .check-list{ display: inline-block; text-align: left; }
  .hero-narrative .check-list li{ justify-content: flex-start; }
  /* Multi-line body paragraphs read better left-aligned than centered,
     even though the eyebrow/heading above them stay centered here — this
     covers every .hero-narrative paragraph site-wide (about.html's "Our
     Story", index.html's "Share It With Others", packages-yoga.html's
     package overview). */
  .hero-narrative p{ text-align: left; }
  .hero-grid > .img-placeholder{ margin: 0 64px; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stats-strip{ grid-template-columns: repeat(2,1fr); gap: 30px; }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
  .hero-grid > .img-placeholder{ margin: 0; }
}
.nav-links-mobile-actions{ display: none; }
/* Nav collapses to the hamburger menu here — the full desktop nav
   (logo + links + lang switch + Register/Login) needs ~980px to fit
   without overflowing, so this must stay well above the general
   760px mobile breakpoint below (matches index.html's own override). */
@media (max-width: 1050px){
  .nav-links, .nav-actions .btn{ display: none; }
  .hamburger{ display: flex; }
  .nav-links.open{
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: #fff;
    padding: 20px 24px; gap: 6px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav-links.open .nav-link{ padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links.open .nav-link:last-child{ border-bottom: none; }
  .nav-links.open .nav-links-mobile-actions{
    display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  }
  .nav-links.open .nav-dropdown{ width: 100%; }
  .nav-links.open .nav-dropdown-toggle{ width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links.open .nav-dropdown-menu{
    position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    box-shadow: none; border: none; min-width: 0; padding: 0 0 0 14px; display: none;
  }
  .nav-links.open .nav-dropdown.open .nav-dropdown-menu{ display: flex; }
  .nav-links.open .nav-dropdown-link{ padding: 10px 0; border-bottom: none; }
}
@media (max-width: 760px){
  .section{ padding: 22px 0; }
  .section-tight{ padding: 16px 0; }
  .section-head{ margin-bottom: 14px; }
  /* This one section-head subtitle runs to 2-3 lines (most are a short
     single-line caption, where centered reads fine) — long copy reads
     better left-aligned, same as the .hero-narrative paragraphs. */
  .section-head.center .section-lead-text{ text-align: left; }
  .eyebrow{ font-size: 16px; gap: 8px; }
  .eyebrow::before{ align-self: center; flex-shrink: 0; }
  .page-banner{ padding: 18px 0 16px; }
  .page-banner.has-photo{ padding: 20px 0 18px; }
  .grid-2, .form-row{ grid-template-columns: 1fr; }
  .grid-3{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  .grid-3 > *{ flex: none; max-width: none; scroll-snap-align: none; }
  .grid-3 > *:nth-child(3):nth-last-child(1){ grid-column: 1 / -1; max-width: 260px; margin: 0 auto; }
  .grid-3:has(.testimonial){ grid-template-columns: 1fr; }
  .grid-3:has(.testimonial) > *:nth-child(3):nth-last-child(1){ grid-column: auto; max-width: none; margin: 0; }
  .grid-3 .testimonial{ padding: 14px; }
  .grid-3 .testimonial p.quote{ font-size: 13.5px; margin-bottom: 12px; }
  .grid-3 .testimonial .who .avatar{ width: 34px; height: 34px; font-size: 12px; }
  .grid-3 .testimonial .who .meta b{ font-size: 13px; }
  .grid-3 .testimonial .who .meta span{ font-size: 11.5px; }
  .grid-3 .stars{ font-size: 12px; margin-bottom: 8px; }
  .grid-3 .info-card{ flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 14px; gap: 8px; }
  .grid-3 .info-card .info-icon{ margin: 0 auto; }
  .grid-3 .info-card h3{ font-size: 14.5px; margin-bottom: 4px; }
  .grid-3 .info-card p{ font-size: 12.5px; }
  .grid-3 .legal-card .card-body{ padding: 14px; }
  .grid-3 .legal-card .card-body h3{
    font-size: 15px; margin-bottom: 6px; overflow-wrap: break-word;
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  .grid-3 .legal-card .card-body p{ font-size: 12px; margin-bottom: 12px; }
  .grid-3 .legal-card .btn{ white-space: nowrap; font-size: 11px; padding: 9px 4px; line-height: 1.3; }
  .grid-3 .card-body{ padding: 14px; }
  .grid-3 .card-body h3{
    font-size: 14.5px; margin-bottom: 5px; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .grid-3 .card-body p{
    font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .grid-3 .card-body .tag-pill{ font-size: 10.5px; padding: 4px 10px; }
  .grid-3 .card-body .blog-meta{ font-size: 10.5px; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
  #blogGrid .blog-meta span:nth-child(1),
  #blogGrid .blog-meta span:nth-child(2){ display: none; }
  #blogGrid .img-placeholder{ aspect-ratio: 4/3.4; }
  .grid-3 .accent-card{ padding: 20px 14px; }
  .grid-3 .accent-card .accent-icon{ width: 48px; height: 48px; font-size: 21px; margin: 0 auto 12px; }
  .grid-3 .accent-card h3{ font-size: 15.5px; margin-bottom: 6px; }
  .grid-3 .accent-card p{ font-size: 12.5px; }
  .steps-grid{
    display: grid; grid-template-columns: repeat(2, 1fr); flex-wrap: wrap;
    overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  .steps-grid > *{ flex: none; max-width: none; scroll-snap-align: none; }
  .steps-grid > .value-card:nth-child(3){ grid-column: 1 / -1; max-width: 260px; margin: 0 auto; }
  .steps-grid .value-card{ padding: 18px 16px; }
  .steps-grid .value-icon{ width: 42px; height: 42px; font-size: 18px; margin: 0 auto 10px; }
  .steps-grid .value-card h3{ font-size: 16px; margin-bottom: 6px; }
  .steps-grid .value-card p{ font-size: 13.5px; }
  .yoga-benefit-grid{
    display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  .yoga-benefit-grid > *{ flex: none; max-width: none; scroll-snap-align: none; }
  .yoga-benefit-grid .yoga-benefit-card:nth-child(3){ grid-column: auto; max-width: none; margin: 0 0 14px; }
  .yoga-benefit-grid .yoga-benefit-card{ padding: 18px 18px 14px; margin-bottom: 14px; text-align: left; align-items: flex-start !important; }
  .yoga-benefit-grid .yoga-benefit-card h3{ font-size: 18px; }
  .yoga-benefit-grid .check-list{ text-align: left; width: 100%; flex: none !important; justify-content: flex-start !important; }
  .yoga-benefit-grid .check-list li{ padding: 8px 0; font-size: 16px; }
  .grid-4{ grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
  .grid-4 .accent-card{ padding: 22px 14px 20px; }
  .grid-4 .accent-card .accent-icon{ width: 48px; height: 48px; font-size: 21px; margin: 4px auto 12px; }
  .grid-4 .accent-card h3{ font-size: 15.5px; }
  .grid-4 .accent-card p{ font-size: 12.5px; }
  .grid-4 .value-card{ padding: 18px 14px; }
  .grid-4 .value-icon{ width: 44px; height: 44px; font-size: 20px; margin: 0 auto 10px; }
  .grid-4 .value-card h3{ font-size: 15px; margin-bottom: 5px; }
  .grid-4 .value-card p{ font-size: 12.5px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .stats-strip{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); margin: 0; }
  .form-card{ padding: 26px; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .newsletter-box{ padding: 24px 20px; }

  /* Testimonials, Watch Daily45 and Our Team read better as a swipeable
     strip on a phone than a squeezed 2-col grid: full-size cards, less
     vertical scroll, and the next card peeking in signals "swipe". */
  .grid-3:has(.testimonial),
  .grid-3:has(.video-card),
  .grid-4:has(.team-card){
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scroll-padding-left: 24px;
    gap: 14px; margin: 0 -24px; padding: 4px 24px 14px; scrollbar-width: none;
  }
  .grid-3:has(.testimonial)::-webkit-scrollbar,
  .grid-3:has(.video-card)::-webkit-scrollbar,
  .grid-4:has(.team-card)::-webkit-scrollbar{ display: none; }
  .grid-3:has(.testimonial) > *,
  .grid-3:has(.video-card) > *,
  .grid-3:has(.testimonial) > *:nth-child(3):nth-last-child(1),
  .grid-3:has(.video-card) > *:nth-child(3):nth-last-child(1){
    flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; grid-column: auto; margin: 0;
  }
  .grid-4:has(.team-card) > *{ flex: 0 0 48%; max-width: 48%; scroll-snap-align: start; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .newsletter-form{ flex-direction: column; }
  .filter-row{ gap: 8px; margin-bottom: 22px; }
  .filter-btn{ padding: 6px 13px; font-size: 12.5px; }
}

/* ---------- Legal Document Cards & Certificate Thumbnails ---------- */
.legal-card {
  display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.legal-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.legal-thumb {
  position: relative; height: 180px; background: #faf6ee;
  border-bottom: 1px solid var(--border); overflow: hidden;
  padding: 12px; display: flex; align-items: flex-start; justify-content: center;
}
.legal-thumb-tag {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  background: var(--navy-900); color: #ffffff;
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px;
}
.legal-thumb-scale {
  transform: scale(0.38); transform-origin: top center; width: 600px;
  pointer-events: none; user-select: none;
}
.cert-block {
  background: #ffffff; border: 4px double var(--amber-500); padding: 32px;
  border-radius: 8px; font-family: serif; color: var(--navy-950);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center;
}
.cert-emblem {
  width: 50px; height: 50px; margin: 0 auto 12px; color: var(--amber-500);
}
.cert-emblem svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cert-gov-head p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-900); }
.cert-gov-sub { font-size: 9px !important; color: var(--text-400) !important; margin-top: 2px !important; font-style: italic; }
.cert-title { font-size: 24px; font-weight: 800; font-family: 'Poppins', sans-serif; color: var(--navy-900); margin: 16px 0 6px; }
.cert-clause { font-size: 11px; font-style: italic; color: var(--text-600); margin-bottom: 16px; }
/* The base .cert-gov-sub/.cert-clause rules above stay small on purpose —
   they're also used inside .legal-thumb, a document-preview thumbnail that
   is visually shrunk with `transform: scale()` and clips its overflow, so a
   bigger declared font-size there re-wraps the heading text one letter per
   line. The full, non-thumbnail certificate page needs a readable size
   instead, so it's raised here where !important can't be short-circuited. */
.cert-block.full-cert .cert-gov-sub { font-size: 12px !important; }
.cert-block.full-cert .cert-clause { font-size: 12px; }
.cert-body { text-align: left; font-size: 12px; line-height: 1.6; color: var(--text-900); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; margin-bottom: 16px; }
.cert-body p { margin-bottom: 8px; }
.cert-sign { text-align: right; font-size: 10px; color: var(--text-600); margin-bottom: 12px; }
.cert-address { text-align: left; font-size: 9px; color: var(--text-400); }
.legal-card .card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.legal-card .card-body h3 { font-size: 18px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
.legal-card .card-body p { font-size: 13px; color: var(--text-600); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.legal-card .btn { margin-top: auto; }

/* ---------- Watch Daily45 Video Cards ---------- */
.video-card-item {
  display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.video-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.video-thumb-wrap {
  position: relative; width: 100%; height: 200px;
  background: #111827; overflow: hidden;
}
.video-thumb-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease, opacity 0.25s ease;
  opacity: 0.9;
}
.video-card-item:hover .video-thumb-wrap img {
  transform: scale(1.04);
  opacity: 0.95;
}
.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: #ffffff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-card-item:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffffff;
}
.video-play-btn svg {
  width: 20px; height: 20px; fill: #0f3933; color: #0f3933; margin-left: 2px;
}
.video-card-body {
  padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1;
  text-align: left;
}
.video-badge-pill {
  display: inline-block; align-self: flex-start;
  background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 14px; border-radius: 999px; text-transform: uppercase;
  margin-bottom: 12px;
}
.video-card-title {
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700;
  color: #111827; margin: 0 0 8px 0; line-height: 1.3;
}
.video-card-desc {
  font-size: 13.5px; color: #6b7280; line-height: 1.5; margin: 0 0 16px 0; flex: 1;
}
.video-card-link {
  font-size: 13.5px; font-weight: 700; color: #0f3933;
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto;
  transition: color 0.2s ease;
}
.video-card-item:hover .video-card-link {
  color: #064e3b;
}

/* ---------- Auto-scrolling card carousel (testimonials, videos, team) ----------
   Wraps an existing .grid track so all card styling (and the mobile card
   type-scale rules above) still apply; only the layout is swapped to a
   snapping horizontal strip. Arrows sit OUTSIDE the viewport as flex
   siblings, so the gap below is real breathing room between the arrow and
   the first/last card — never an overlay on top of them. */
.cardsel{
  --cardsel-per: 3;
  --cardsel-gap: 26px;
  --cardsel-arrow: 46px;
  display: flex; align-items: center; gap: 18px;
}
.cardsel-4{ --cardsel-per: 4; }

.cardsel-viewport{ flex: 1 1 auto; min-width: 0; }

/* .grid is kept in the selector purely for specificity: it has to outrank the
   `.grid-3:has(.testimonial)` / `.grid-4:has(.team-card)` mobile strip rules
   and `.grid-3 > *:nth-child(3):nth-last-child(1)` above. */
.cardsel .grid.cardsel-track{
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: var(--cardsel-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Must be reset: the mobile `.grid-4:has(.team-card)` strip rule above sets
     scroll-padding-left: 24px, which would snap every card 24px in from the
     left edge and leave a sliver of the neighbouring cards showing. */
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  /* room for the card hover lift + shadow, which overflow-x would clip */
  margin: 0; padding: 6px 0 16px;
}
.cardsel .cardsel-track::-webkit-scrollbar{ display: none; }
.cardsel .grid.cardsel-track > *{
  flex: 0 0 calc((100% - (var(--cardsel-per) - 1) * var(--cardsel-gap)) / var(--cardsel-per));
  max-width: none; margin: 0; grid-column: auto;
  scroll-snap-align: start;
}

.cardsel-arrow{
  flex: 0 0 auto;
  width: var(--cardsel-arrow); height: var(--cardsel-arrow); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--navy-900);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cardsel-arrow:hover{ background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: scale(1.06); }
.cardsel-arrow:focus-visible{ outline: 2px solid var(--amber-500); outline-offset: 3px; }
.cardsel-arrow svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 980px){
  .cardsel{ --cardsel-per: 2; }
  .cardsel-4{ --cardsel-per: 3; }
}
@media (max-width: 760px){
  .cardsel{ --cardsel-per: 1; --cardsel-gap: 14px; --cardsel-arrow: 34px; gap: 8px; }
  .cardsel-4{ --cardsel-per: 2; }
  .cardsel .grid.cardsel-track{ padding: 4px 0 12px; }
  .cardsel-arrow svg{ width: 15px; height: 15px; }
}

/* ==========================================================================
   AUTH PAGE ENHANCED SPLIT SCREEN DESIGN (LOGIN & REGISTER)
   ========================================================================== */
.no-scroll-page {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.auth-page {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* LEFT VISUAL PANEL */
.auth-visual {
  flex: 1.1;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 50px;
  color: #ffffff;
  overflow: hidden;
  min-height: 100vh;
}

.auth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 28, 22, 0.55) 0%, rgba(8, 18, 14, 0.88) 100%);
  z-index: 1;
}

.auth-visual > * {
  position: relative;
  z-index: 2;
}

/* TOP LEFT BACK LINK & LOGO HEADER inside VISUAL PANEL */
.auth-visual-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  width: fit-content;
}
.auth-back-link:hover {
  color: #f59e0b;
  transform: translateX(-3px);
}
.auth-back-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.auth-brand-logo {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-top: 4px;
  display: block;
}

/* VISUAL BODY HEADING & CHECKLIST */
.auth-visual-body {
  margin-top: auto;
  margin-bottom: auto;
  padding: 30px 0;
}

.auth-visual-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 26px;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.auth-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-benefit-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.auth-tick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

/* GLASS TESTIMONIAL CARD AT BOTTOM */
.auth-quote-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 22px 26px;
  max-width: 480px;
}

.auth-quote-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 14px;
  font-style: italic;
}

.auth-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-quote-author img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.auth-quote-author b {
  display: block;
  font-size: 14.5px;
  color: #ffffff;
  font-weight: 700;
}

.auth-quote-author span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* RIGHT FORM PANEL */
.auth-form-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 50px;
  background: #ffffff;
  min-height: 100vh;
}

.auth-form-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

/* Below 900px the left photo panel (.auth-visual) is hidden — it was the
   only place carrying the Daily45 logo and a way back to the homepage.
   This mobile-only brand bar restores both, sitting beside the language
   switch instead of stacking above it. */
.auth-mobile-brand { display: none; }
@media (max-width: 900px) {
  .auth-form-side { padding-top: 20px; }
  .auth-form-topbar { justify-content: space-between; margin-bottom: 24px; }
  .auth-mobile-brand { display: block; line-height: 0; }
  .auth-mobile-brand img { height: 34px; width: auto; }
}

.auth-wrap {
  width: 100%;
  max-width: 440px;
  margin: auto;
}

.auth-eyebrow {
  color: #c08b28;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-eyebrow-dash {
  display: inline-block;
  width: 18px;
  height: 2.5px;
  background: #c08b28;
  border-radius: 2px;
}

.auth-title {
  font-size: 34px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.auth-subtitle {
  font-size: 14.5px;
  color: #6b7280;
  margin-bottom: 26px;
  line-height: 1.5;
}

.auth-wrap .form-group {
  margin-bottom: 18px;
}

.auth-wrap .form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.auth-wrap .form-group label .req {
  color: #ef4444;
}

.auth-wrap .form-group input[type="text"],
.auth-wrap .form-group input[type="email"],
.auth-wrap .form-group input[type="tel"],
.auth-wrap .form-group input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14.5px;
  color: #111827;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-wrap .form-group input:focus {
  border-color: #c08b28;
  box-shadow: 0 0 0 3.5px rgba(192, 139, 40, 0.15);
}

.auth-row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  font-size: 14px;
}

.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-weight: 500;
  cursor: pointer;
}

.auth-forgot-link {
  color: #c08b28;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.auth-forgot-link:hover {
  color: #9c6e1c;
}

.btn-gold-submit {
  width: 100%;
  height: 48px;
  background: #c08b28;
  color: #ffffff;
  border: none;
  border-radius: 24px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(192, 139, 40, 0.22);
}
.btn-gold-submit:hover {
  background: #a9771e;
  box-shadow: 0 6px 16px rgba(192, 139, 40, 0.32);
}
.btn-gold-submit:active {
  transform: scale(0.99);
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.auth-divider span {
  padding: 0 14px;
}

.social-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.social-auth button {
  height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.social-auth button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.auth-foot {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}
.auth-foot a {
  color: #c08b28;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.auth-foot a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .auth-page {
    flex-direction: column;
  }
  .auth-visual {
    display: none;
  }
  .auth-form-side {
    padding: 30px 20px;
  }
}

.legal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.legal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.legal-thumb {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  height: 240px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.legal-thumb-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 10;
  letter-spacing: 0.5px;
}

.legal-thumb-scale {
  width: 128.2%;
  height: 128.2%;
  transform: scale(0.78);
  transform-origin: top center;
  margin-left: -14.1%;
  overflow: hidden;
}

.legal-thumb .cert-block {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  box-shadow: none;
  transform: none;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
}

.legal-thumb .cert-emblem {
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  color: #c08b28;
}
.legal-thumb .cert-emblem svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.legal-thumb .cert-gov-head {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.legal-thumb .cert-gov-head p {
  margin: 0;
  /* .legal-card p sets overflow-wrap:anywhere globally, which lets the
     browser break these short, bold, all-caps lines one letter per line
     inside this shrunk preview thumbnail. Word-level wrapping (or a clipped
     word) reads far better than that here. */
  overflow-wrap: normal;
  word-break: normal;
}
.legal-thumb .cert-gov-sub {
  font-size: 8.5px;
  font-weight: 500;
  color: #64748b;
  text-transform: none;
  margin-top: 1px !important;
}

.legal-thumb .cert-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: #0f172a;
  margin: 3px 0 1px;
  line-height: 1.2;
}

.legal-thumb .cert-clause {
  font-size: 9px;
  color: #64748b;
  text-align: center;
  margin-bottom: 4px;
  font-style: italic;
  line-height: 1.2;
}

.legal-thumb .cert-body {
  font-size: 10px;
  line-height: 1.35;
  color: #334155;
  margin-bottom: 4px;
  border-top: 1px dashed #cbd5e1;
  border-bottom: 1px dashed #cbd5e1;
  padding: 4px 0;
}
.legal-thumb .cert-body p {
  margin-bottom: 2px;
}
.legal-thumb .cert-body p:last-child {
  margin-bottom: 0;
}

.legal-thumb .cert-sign {
  text-align: right;
  font-size: 8.5px;
  line-height: 1.2;
  color: #475569;
  margin-bottom: 3px;
}
.legal-thumb .cert-sign p {
  margin: 0;
}

.legal-thumb .cert-address {
  font-size: 8.5px;
  color: #64748b;
  line-height: 1.2;
}
.legal-thumb .cert-address p {
  margin: 0;
}

/* Card Body text & button */
.legal-card .card-body {
  padding: 16px 6px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.legal-card .card-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  color: #c08b28;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.legal-card .card-body p {
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.legal-card .btn-dark {
  background: #0e3d26;
  color: #ffffff;
  border-radius: 24px;
  padding: 11px 0;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 12px rgba(14, 61, 38, 0.2);
}
.legal-card .btn-dark:hover {
  background: #145435;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(14, 61, 38, 0.3);
}

/* Single Legal Document View Page */
.document-view {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.document-view-head {
  padding: 24px 28px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.document-view-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #c08b28;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.document-view-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.document-view-head-meta {
  flex: 1;
}
.document-view-head-meta h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.document-view-head-meta .legal-updated {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.document-view-tag {
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.document-view-body {
  padding: 32px 28px;
  background: #ffffff;
}

.cert-sample-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #fde68a;
  margin-bottom: 24px;
}

.cert-block.full-cert {
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 36px 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.cert-block.full-cert .cert-emblem {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
}
.cert-block.full-cert .cert-gov-head {
  font-size: 11.5px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.cert-block.full-cert .cert-gov-sub {
  font-size: 10px;
}
.cert-block.full-cert .cert-title {
  font-size: 22px;
  margin: 14px 0 6px;
  color: #0f172a;
}
.cert-block.full-cert .cert-clause {
  font-size: 12px;
  margin-bottom: 20px;
}
.cert-block.full-cert .cert-body {
  font-size: 14.5px;
  line-height: 1.7;
  padding: 20px 0;
  color: #1e293b;
}
.cert-block.full-cert .cert-body p {
  margin-bottom: 12px;
}
.cert-block.full-cert .cert-sign {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 16px;
}
.cert-block.full-cert .cert-address {
  font-size: 12.5px;
  line-height: 1.5;
}




/* ---- responsive/readability fixes ---- */
.footer-grid > * { min-width: 0; }
.footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand p, .footer-contact div { overflow-wrap: anywhere; }
.lm-eyebrow, .tag-pill, .blog-meta, .blog-meta span, .legal-thumb-tag { font-size: max(0.75rem, 12px); }
.legal-card p, .legal-body p { overflow-wrap: anywhere; }
.footer-newsletter form { flex-wrap: wrap; }
.footer-newsletter input { min-width: 0; flex: 1 1 10rem; }
.footer-newsletter .btn { flex: 0 0 auto; }
body .tag-pill, body .btn-teal { font-size: max(0.75rem, 12px); }
body .btn, body a.btn, body button.btn { font-size: max(0.8125rem, 13px); }
body span.tag-pill, body .blog-card .tag-pill, body .blog-meta span { font-size: 0.75rem !important; }

/* ==== Compare-plans: one table at every width, no horizontal scroll ====
   Client explicitly rejected the separate-card-per-plan mobile layout —
   wants the same single table on phones too, just with smaller text/columns
   so all 4 columns keep fitting side by side without scrolling. */
.plan-compare-swipe{ display: none; }
.plan-compare-cards{ display: none; }
.plan-compare-wrap{ padding-top: 2rem; overflow-x: hidden; overflow-y: visible; max-width: 100%; box-sizing: border-box; }
.plan-compare-table{ min-width: 0; }
.plan-compare-col.featured{ margin-top: -0.875rem; padding-top: 0.75rem; box-sizing: border-box; }
.plan-compare-badge{ font-size: 0.75rem; padding: 0.25rem 0.75rem; top: -0.875rem; max-width: 100%; box-sizing: border-box; }
.plan-compare-head{ height: 8.5rem; padding: 0.5rem 0.5rem 0.75rem; }
.plan-compare-name{ font-size: 1rem; overflow-wrap: anywhere; }
.plan-compare-price{ font-size: 1.5rem; }
.plan-compare-price-original, .plan-compare-permo, .plan-compare-off{ font-size: 0.75rem; }
.plan-compare-permo{ overflow-wrap: anywhere; text-align: center; }
.plan-compare-row{ min-height: 3rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; overflow-wrap: anywhere; }
.plan-compare-cta{ padding: 0.75rem 0.5rem; min-height: 4rem; }
.plan-compare-cta .btn{ font-size: 0.8125rem; padding: 0.625rem 0.75rem; white-space: normal; line-height: 1.2; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.pc-icon{ width: 1.5rem; height: 1.5rem; font-size: 1rem; }
.plan-compare-note{ font-size: 0.8125rem; }
@media (max-width: 48rem){
  .plan-compare-wrap{ padding: 1.5rem 0.5rem 0.625rem; }
  .plan-compare-table{ grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 0 0.2rem; }
  .plan-compare-col.featured{ margin-top: -0.625rem; padding-top: 0.5rem; }
  .plan-compare-badge{ font-size: 0.5625rem; padding: 0.15rem 0.4rem; top: -0.625rem; letter-spacing: 0; white-space: normal; text-align: center; line-height: 1.15; }
  .plan-compare-head{ height: auto; min-height: 5.5rem; padding: 0.375rem 0.2rem 0.5rem; }
  .plan-compare-head.features-head h3{ font-size: 0.8125rem; }
  .plan-compare-name{ font-size: 0.6875rem; margin-bottom: 0.1rem; }
  .plan-compare-price-original{ font-size: 0.5625rem; }
  .plan-compare-price{ font-size: 0.875rem; }
  .plan-compare-permo{ font-size: 0.5rem; }
  .plan-compare-off{ font-size: 0.5rem; padding: 0.05rem 0.3rem; }
  .plan-compare-row{ min-height: 2.25rem; padding: 0.2rem 0.2rem; font-size: 0.5625rem; line-height: 1.15; }
  .pc-icon{ width: 1rem; height: 1rem; font-size: 0.5625rem; }
  .plan-compare-cta{ padding: 0.375rem 0.15rem; min-height: 2.5rem; }
  .plan-compare-cta .btn{ font-size: 0.5rem; padding: 0.3rem 0.2rem; min-height: 1.75rem; }
  .pc-full{ display: none; }
  .pc-short{ display: inline; }
}

/* ==== Floating widget must not steal taps (it covered the register terms checkbox on phones) ==== */
.fab-launcher{ pointer-events: none; }
.fab-menu{ pointer-events: none; }
.fab-toggle{ pointer-events: auto; }
.fab-launcher.open .floating-btn{ pointer-events: auto; }
@media (max-width: 640px){
  .auth-form-side{ padding-bottom: 5.5rem; }
  body.no-scroll-page .auth-form-side{ padding-bottom: 5.5rem; }
}

/* ==== Register: terms checkbox (>=44px tap area, whole label toggles) ==== */
.terms-row{ position: relative; display: flex; align-items: flex-start; gap: 0.25rem; margin-bottom: 1.25rem; }
.terms-row input[type="checkbox"]{
  flex: 0 0 auto; width: 1.375rem; height: 1.375rem; margin: 0.6875rem; cursor: pointer;
  accent-color: #c08b28; position: relative; z-index: 1;
}
.terms-row label{ margin: 0; padding: 0.6875rem 0; min-height: 2.75rem; box-sizing: border-box; font-size: 0.875rem; line-height: 1.5; color: #4b5563; cursor: pointer; flex: 1 1 auto; }
.terms-row label a{ color: #c08b28; font-weight: 600; text-decoration: underline; }
.terms-row label::before{ content: ""; position: absolute; left: 0; top: 0; width: 2.75rem; height: 100%; min-height: 2.75rem; }
.terms-row label a{ position: relative; z-index: 2; }
@media (max-width: 480px) { .services-web-hub { width: 5rem; height: 5rem; font-size: 0.75rem; line-height: 1.15; padding: 0.25rem; } }


/* Legal Documents listing (DB-driven). Icon tile instead of a scaled-down page
   preview: the miniature clipped and broke words mid-way on narrow cards. */
.legal-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.legal-item{
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.legal-item:hover{ box-shadow: 0 14px 30px rgba(11,58,53,.10); transform: translateY(-2px); }
.legal-item-icon{
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 132px; background: #fbf7ef; border-bottom: 1px solid var(--border); color: var(--navy-900);
}
.legal-item-icon svg{ width: 58px; height: 58px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.legal-item-tag{
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 5px; background: var(--navy-950, #072a26); color: #fff;
}
.legal-item-body{ display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; min-width: 0; }
.legal-item-body h3{
  font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.3; margin: 0 0 8px;
  color: var(--amber-600); overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.legal-item-body h3 a{ color: inherit; text-decoration: none; }
.legal-item-body p{ font-size: 14.5px; color: var(--text-600); margin: 0 0 16px; }
.legal-item-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.legal-item-actions .btn{ flex: 1 1 auto; justify-content: center; text-align: center; padding: 10px 16px; font-size: 14px; white-space: nowrap; }
.legal-item-actions .btn-outline{ border-color: var(--navy-900); color: var(--navy-900); }

@media (max-width: 980px){
  .legal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  /* One document per row: icon left, text right — titles get the full width. */
  .legal-grid{ grid-template-columns: 1fr; gap: 14px; }
  .legal-item{ flex-direction: row; }
  .legal-item-icon{ flex: 0 0 76px; height: auto; border-bottom: 0; border-right: 1px solid var(--border); }
  .legal-item-icon svg{ width: 36px; height: 36px; }
  .legal-item-tag{ top: 8px; right: auto; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 2px 6px; }
  .legal-item-body{ padding: 14px 16px; }
  .legal-item-body h3{ font-size: 17px; margin-bottom: 4px; }
  .legal-item-body p{ font-size: 13px; margin-bottom: 12px; }
  .legal-item-actions .btn{ flex: 0 1 auto; padding: 8px 14px; font-size: 13px; }
}

/* Uploaded PDF shown inline on the document page */
.legal-pdf-frame{ width: 100%; height: 80vh; min-height: 480px; border: 1px solid var(--border); border-radius: 12px; background: #f7f4ee; }
.legal-pdf-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.legal-pdf-actions .btn-outline{ border-color: var(--navy-900); color: var(--navy-900); }
@media (max-width: 640px){
  .legal-pdf-frame{ height: 70vh; min-height: 360px; }
}
@media (max-width: 640px){
  /* Give the inline PDF as much of the phone's width as possible. */
  .document-view:has(.legal-pdf-frame){ padding: 18px 12px; }
  .document-view:has(.legal-pdf-frame) .document-view-body{ padding: 0; }
}