/* ================================================================
   Change & Evolve — Dr. Mrudul Deshpande
   Design System v3.0 | Premium Corporate | Human-Crafted
   Typeface: Montserrat (display) · Work Sans (body)
   ================================================================ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Brand Palette */
  --green-950: #061611;  --green-900: #0D2419;  --green-800: #14341F;
  --green-750: #1A4530;  --green-700: #1D5035;  --green-600: #266A47;
  --green-500: #32855B;  --green-400: #4DA070;  --green-300: #7EC2A0;
  --green-200: #AED9C4;  --green-100: #D4ECDE;  --green-50:  #EAF5EE;
  --green-25:  #F4FAF7;

  --gold-800:  #6B4A12;  --gold-700:  #876020;  --gold-600:  #A87828;
  --gold-500:  #C49640;
  --gold-400:  #D4A93E;  --gold-100:  #FAF1E1;  --gold-50:   #FEF9F0;

  --stone-950: #0E0D0B;  --stone-900: #1A1816;  --stone-800: #2A2822;
  --stone-700: #3E3B34;  --stone-600: #56534C;  --stone-500: #706D65;
  --stone-400: #8E8B82;  --stone-300: #ACA8A0;  --stone-200: #C8C4BC;
  --stone-100: #E0DDD7;  --stone-50:  #F0EDE8;  --stone-25:  #F7F5F2;

  /* Semantic tokens */
  --c-primary:       var(--green-700);
  --c-primary-dark:  var(--green-800);
  --c-primary-deep:  var(--green-900);
  --c-primary-mid:   var(--green-600);
  --c-primary-light: var(--green-100);
  --c-primary-50:    var(--green-50);
  --c-primary-25:    var(--green-25);
  --c-accent:        #C49640;
  --c-accent-dark:   var(--gold-700);
  --c-accent-light:  var(--gold-100);

  --c-bg:      #F5F2EE;
  --c-bg-alt:  #EFECE7;
  --c-card:    #FFFFFF;
  --c-card-2:  #FDFCFA;
  --c-text:    var(--stone-900);
  --c-text2:   var(--stone-800);
  --c-muted:   var(--stone-600);
  --c-subtle:  var(--stone-400);
  --c-border:  var(--stone-100);
  --c-rule:    var(--stone-200);
  --c-success: #2A6046;
  --c-error:   #B01E1E;
  --c-warn:    var(--gold-600);

  /* Typography */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --t-2xs: clamp(.65rem, .62rem + .15vw, .73rem);
  --t-xs:  clamp(.73rem, .69rem + .2vw,  .82rem);
  --t-sm:  clamp(.85rem, .80rem + .25vw, .95rem);
  --t-base:clamp(.97rem, .92rem + .25vw, 1.08rem);
  --t-md:  clamp(1.1rem,  1rem  + .5vw,  1.28rem);
  --t-lg:  clamp(1.22rem, 1.1rem + .65vw, 1.52rem);
  --t-xl:  clamp(1.5rem,  1.25rem + 1.3vw, 2.05rem);
  --t-2xl: clamp(2rem,    1.6rem + 2vw,   2.95rem);
  --t-3xl: clamp(2.6rem,  1.95rem + 3.3vw, 4.3rem);
  --t-4xl: clamp(3.2rem,  2.2rem + 5vw,   5.8rem);

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* Elevation — refined, layered */
  --el-0: 0 1px 2px rgba(10,16,13,.04);
  --el-1: 0 1px 4px rgba(10,16,13,.05), 0 2px 6px rgba(10,16,13,.04);
  --el-2: 0 2px 8px rgba(10,16,13,.06), 0 4px 16px rgba(10,16,13,.05);
  --el-3: 0 6px 24px rgba(10,16,13,.08), 0 2px 8px rgba(10,16,13,.05);
  --el-4: 0 12px 40px rgba(10,16,13,.10), 0 4px 16px rgba(10,16,13,.06);
  --el-5: 0 24px 72px rgba(10,16,13,.12), 0 8px 28px rgba(10,16,13,.08);
  --shadow-sm:var(--el-1); --shadow:var(--el-2); --shadow-lg:var(--el-4);

  /* Radius — architectural scale */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;
  --r-xl: 22px; --r-2xl:30px; --r-full:9999px;
  --radius:var(--r-md); --radius-sm:var(--r-sm); --radius-lg:var(--r-xl);

  /* Motion — precise, purposeful */
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-sharp: cubic-bezier(.4,0,.6,1);
  --t-fast:  140ms var(--ease);
  --t-base:  220ms var(--ease);
  --t-slow:  360ms var(--ease);
  --transition:var(--t-base);

  /* Layout */
  --max:1200px; --max-text:740px;
}

.dark-mode {
  --c-bg:#0C1510; --c-bg-alt:#0F1913; --c-card:#141D17; --c-card-2:#161F1A;
  --c-text:#E8E5E0; --c-text2:#C5C0BA; --c-muted:#8A8680;
  --c-border:#22302A; --c-rule:#2C3D34;
  --c-primary:var(--green-400); --c-primary-light:#1A2E22;
  --c-primary-50:#131E17; --c-primary-25:#101A14;
}

/* ── 2. RESET & BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--c-text);background:var(--c-bg);
  line-height:1.7;font-size:16px;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none;transition:color var(--t-base)}
a:hover{color:var(--c-primary-dark)}
ul,ol{list-style:none}
button{font-family:var(--font-body);cursor:pointer}
input,textarea,select{font-family:var(--font-body);font-size:1rem}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--c-primary-light);color:var(--c-primary-dark)}

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────── */
h1,h2{
  font-family:var(--font-display);font-weight:800;
  line-height:1.08;letter-spacing:-.025em;color:var(--c-text);
}
h3{font-family:var(--font-display);font-weight:700;line-height:1.25;letter-spacing:-.015em}
h4,h5{font-family:var(--font-display);font-weight:600;line-height:1.35;letter-spacing:-.01em}
h6{font-family:var(--font-body);font-weight:600;line-height:1.4}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{color:var(--c-text2);line-height:1.78}
strong,b{color:var(--c-text);font-weight:600}
.lead{
  font-size:var(--t-md);line-height:1.7;color:var(--c-muted);
  font-weight:300;letter-spacing:-.005em;
}
.ital{font-style:italic;font-weight:inherit}
/* Highlight span used in h1/h2 */
.hero h1 .ital,h2 .ital{font-style:italic;color:var(--c-primary);font-weight:inherit}

/* ── 4. LAYOUT ───────────────────────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
@media(max-width:640px){.container{padding:0 18px}}
section{padding:var(--sp-24) 0}
.section-sm{padding:var(--sp-16) 0}
.section-lg{padding:var(--sp-24) 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}
@media(max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── 5. SECTION HEADS ────────────────────────────────────────── */
.section-head{text-align:center;max-width:680px;margin:0 auto var(--sp-16)}
.section-head h2{margin:14px 0 18px;letter-spacing:-.03em}
.section-head p{color:var(--c-muted);font-size:var(--t-md);line-height:1.72;font-weight:300}

/* Eyebrow — refined label treatment */
.eyebrow{
  display:inline-block;font-family:var(--font-display);
  font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary);
  background:transparent;padding:0;
  border-left:2px solid var(--c-primary);padding-left:10px;
  line-height:1.6;
}
.eyebrow-line{
  display:flex;align-items:center;gap:var(--sp-3);justify-content:center;
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary);
  margin-bottom:var(--sp-5);
}
.eyebrow-line::before,.eyebrow-line::after{
  content:'';flex:1;max-width:32px;height:1px;background:var(--c-primary);opacity:.35;
}
/* Left-aligned editorial section head variant */
.section-head--left{text-align:left;max-width:100%;margin-left:0;margin-right:0}
.section-head--left .eyebrow-line{justify-content:flex-start}
.section-head--left .eyebrow-line::before{display:none}
.section-head--left .eyebrow-line::after{flex:0;max-width:24px}

/* ── 6. SCROLL PROGRESS ──────────────────────────────────────── */
.scroll-prog,#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
  z-index:9999;transition:width .1s linear;
}

/* ── 7. HEADER & NAV ─────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(245,242,238,.97);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--c-border);
  transition:box-shadow var(--t-base),border-color var(--t-base);
}
.dark-mode .site-header{background:rgba(12,21,16,.97)}
.site-header.scrolled{box-shadow:0 1px 28px rgba(10,16,13,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:var(--sp-6)}

/* Logo */
.logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0}
.logo-img{
  width:38px;height:38px;border-radius:var(--r-sm);
  object-fit:contain;background:var(--c-primary-25);
  box-shadow:inset 0 0 0 1px rgba(29,80,53,.1);
}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--c-primary-dark);letter-spacing:-.01em;
}
.logo-sub{
  font-family:var(--font-body);font-size:.64rem;font-weight:500;
  color:var(--c-muted);letter-spacing:.07em;text-transform:uppercase;
}

/* Nav links — underline animation */
.nav-links{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav-links a{
  display:block;position:relative;padding:8px 12px;
  font-family:var(--font-body);font-size:.82rem;font-weight:500;
  color:var(--c-muted);letter-spacing:.01em;white-space:nowrap;
  transition:color var(--t-fast);background:none;border-radius:0;
}
.nav-links a::after{
  content:'';position:absolute;bottom:4px;left:12px;right:12px;
  height:1.5px;background:var(--c-primary);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .28s var(--ease);
}
.nav-links a:hover{color:var(--c-primary)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left center}
.nav-links a.active{color:var(--c-primary);font-weight:600}
.nav-links a.active::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.menu-toggle{
  display:none;background:none;border:1px solid var(--c-border);
  color:var(--c-text2);padding:7px;border-radius:var(--r-sm);line-height:0;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.menu-toggle:hover{border-color:var(--c-primary);color:var(--c-primary)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,16,13,.35);z-index:800}
.nav-overlay.open{display:block}

/* ── 8. BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;
  border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:all var(--t-base);overflow:hidden;position:relative;
}
.btn svg{flex-shrink:0;width:16px;height:16px}
.btn::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0);
  transition:background var(--t-fast);
}
.btn:hover::before{background:rgba(255,255,255,.08)}
.btn:active{transform:scale(.98)}

.btn-primary{
  background:var(--c-primary);color:#fff;border-color:var(--c-primary);
  box-shadow:0 2px 0 var(--green-800),0 4px 12px rgba(29,80,53,.2);
}
.btn-primary:hover{
  background:var(--c-primary-dark);border-color:var(--c-primary-dark);
  box-shadow:0 2px 0 var(--green-950),0 6px 20px rgba(29,80,53,.28);
  transform:translateY(-1px);color:#fff;
}
.btn-accent{
  background:var(--c-accent);color:#fff;border-color:var(--c-accent);
  box-shadow:0 2px 0 var(--gold-700),0 4px 12px rgba(196,150,64,.22);
}
.btn-accent:hover{
  background:var(--gold-600);border-color:var(--gold-600);
  box-shadow:0 2px 0 var(--gold-800),0 6px 20px rgba(196,150,64,.3);
  transform:translateY(-1px);color:#fff;
}
.btn-outline{
  background:transparent;color:var(--c-primary);border-color:var(--c-primary);
  box-shadow:none;
}
.btn-outline:hover{
  background:var(--c-primary);color:#fff;
  box-shadow:0 4px 14px rgba(29,80,53,.2);
  transform:translateY(-1px);
}
.btn-ghost{
  background:transparent;color:var(--c-text2);border-color:transparent;
  letter-spacing:.06em;
}
.btn-ghost:hover{color:var(--c-primary);background:var(--c-primary-25)}
.btn-white{
  background:#fff;color:var(--c-primary-dark);border-color:rgba(255,255,255,.2);
  box-shadow:0 2px 8px rgba(10,16,13,.14);
}
.btn-white:hover{box-shadow:0 4px 18px rgba(10,16,13,.18);transform:translateY(-1px)}
.btn-sm{padding:9px 18px;font-size:.68rem;letter-spacing:.09em}
.btn-lg{padding:16px 36px;font-size:.8rem}
.btn-block{width:100%}

/* Ripple */
.btn-ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.25);
  transform:scale(0);animation:_ripple .55s linear;pointer-events:none;
}
@keyframes _ripple{to{transform:scale(4);opacity:0}}

/* ── 9. HERO ─────────────────────────────────────────────────── */
.hero{
  padding:var(--sp-8) 0;background:var(--c-bg);
  overflow:visible;position:relative;
  min-height:calc(100vh - 70px);min-height:calc(100svh - 70px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-bg-shape{
  position:absolute;top:0;right:0;width:55%;height:100%;
  background:
    radial-gradient(ellipse at 85% 35%,rgba(29,80,53,.07) 0%,transparent 60%),
    radial-gradient(ellipse at 45% 85%,rgba(196,150,64,.04) 0%,transparent 50%);
  pointer-events:none;
}
.hero-bg-shape::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(29,80,53,.1) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to left,rgba(0,0,0,.5) 0%,transparent 75%);
}
.hero > .container{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center;position:relative;z-index:1}
.hero-single{max-width:760px;position:relative;z-index:1}
.hero-col-left{position:relative;z-index:1}

/* Hero content sliding block */
.hero-slide-content{
  transition:opacity .32s var(--ease),transform .32s var(--ease);
  margin-bottom:var(--sp-8);min-height:220px;
}
.hero-slide-content.is-out{opacity:0;transform:translateY(10px)}

/* Cycling badge — refined editorial style */
.cycling-badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  border-left:2px solid var(--c-primary);padding-left:10px;
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary);
  margin-bottom:var(--sp-4) !important;
}
.cb-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--c-primary);flex-shrink:0;
  animation:pulse 2.2s ease-in-out infinite;
}
.cb-condition{font-weight:700;margin-left:2px;letter-spacing:.08em}

/* Slide tint */
.slide-tint{position:absolute;inset:0;z-index:0;transition:background-color .65s ease;pointer-events:none}

/* Hero h1 — large, confident, Montserrat 800 */
.hero h1{
  font-size:var(--t-3xl);font-weight:800;letter-spacing:-.04em;
  line-height:1.05;margin-bottom:var(--sp-5);
}
.hero .lead{max-width:520px;margin-bottom:var(--sp-8);font-size:var(--t-md);font-weight:300}

/* Credentials — understated, horizontal */
.hero-creds{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-8)}
.hero-cred-tag{
  display:flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-size:var(--t-2xs);font-weight:600;color:var(--c-text2);
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-xs);padding:5px 12px;box-shadow:var(--el-0);
  letter-spacing:.02em;
}
.hero-cred-tag svg{color:var(--c-primary);width:14px;height:14px}

/* Hero CTAs */
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-8)}

/* Metrics — clean, typographic */
.hero-metrics{
  display:flex;gap:var(--sp-10);padding-top:var(--sp-6);
  border-top:1px solid var(--c-border);
}
.hm-item{display:flex;flex-direction:column}
.hm-num{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:800;
  color:var(--c-primary-dark);line-height:1;letter-spacing:-.025em;
}
.hm-label{font-size:var(--t-2xs);color:var(--c-muted);margin-top:5px;letter-spacing:.04em;font-weight:500}
.hm-div{width:1px;background:var(--c-border);align-self:stretch}
.hero-single .hero-metrics,.hero-col-left .hero-metrics{border-top:1px solid var(--c-border);padding-top:var(--sp-5);display:flex;gap:var(--sp-8)}

/* Hero eyebrow */
.hero-eyebrow-wrap{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.hero-eyebrow-pill{
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-primary);border-left:2px solid var(--c-primary);
  padding-left:10px;
}

/* ── Hero doctor photo card ────────────────────────────────── */
.hero-col-right{display:flex;align-items:center;justify-content:center}
.hero-doc-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  width:100%;max-width:390px;
  box-shadow:0 24px 64px rgba(10,16,13,.16),0 6px 24px rgba(10,16,13,.1);
  aspect-ratio:4/5;max-height:min(54vh,500px);isolation:isolate;
}
.hero-doc-photo{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;border-radius:var(--r-lg);
  transition:opacity .32s ease;
}
.hero-doc-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(10,16,13,.88) 0%,rgba(10,16,13,.2) 60%,transparent 100%);
  padding:var(--sp-10) var(--sp-6) var(--sp-6);
  display:flex;flex-direction:column;gap:4px;
}
.hero-doc-name{
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  color:#fff;letter-spacing:-.01em;line-height:1.2;
}
.hero-doc-qual{
  font-family:var(--font-body);font-size:.7rem;font-weight:500;
  letter-spacing:.08em;color:rgba(255,255,255,.6);text-transform:uppercase;
}

/* Corner notch */
.hero-card-notch{
  position:absolute;top:0;right:0;width:0;height:0;border-style:solid;
  border-width:0 44px 44px 0;border-color:transparent var(--c-bg) transparent transparent;
  z-index:20;pointer-events:none;
}
/* Condition badge */
.slide-condition-badge{
  position:absolute;bottom:84px;left:var(--sp-4);z-index:10;
  background:var(--c-primary);color:#fff;border-radius:var(--r-xs);
  padding:5px 12px;font-family:var(--font-display);
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 16px rgba(29,80,53,.4);
  display:flex;align-items:center;gap:6px;
  transition:opacity .32s ease;
}
.slide-condition-badge .scb-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);animation:pulse 2.2s ease-in-out infinite}

/* Offer ribbon */
.hero-offer-ribbon{
  display:none;position:absolute;top:var(--sp-3);right:var(--sp-3);
  background:linear-gradient(135deg,var(--c-accent),var(--gold-600));
  color:#fff;font-family:var(--font-display);font-size:.65rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;
  border-radius:var(--r-xs);box-shadow:0 2px 8px rgba(0,0,0,.22);
  z-index:21;pointer-events:none;align-items:center;gap:5px;
}

/* ── Hero slider controls ──────────────────────────────────── */
.slide-controls{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-8)}
.slide-arrow{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-xs);
  border:1px solid var(--c-border);background:var(--c-card);color:var(--c-text2);
  cursor:pointer;transition:all var(--t-fast);flex-shrink:0;
}
.slide-arrow:hover{border-color:var(--c-primary);background:var(--c-primary);color:#fff}
.slide-arrow:active{transform:scale(.94)}
.slide-dots{display:flex;align-items:center;gap:6px}
.slide-dot{
  width:6px;height:6px;border-radius:var(--r-xs);border:none;padding:0;
  cursor:pointer;background:var(--c-rule);
  transition:background .3s,width .3s;flex-shrink:0;
}
.slide-dot:hover{background:var(--c-primary-mid)}
.slide-dot.active{background:var(--c-primary);width:22px}
.slide-dot.active.is-running{outline:2px solid rgba(29,80,53,.2);outline-offset:2px}
.slide-counter-inline{
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  color:var(--c-muted);letter-spacing:.08em;white-space:nowrap;
}
@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
.slide-counter-inline.counter-bump{animation:counter-bump .32s ease}

/* Hero image column (legacy — kept for compat) */
.hero-image-col{position:relative;padding:var(--sp-4);display:flex;align-items:center;justify-content:center}
.hero-image-frame{
  position:relative;z-index:2;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 20px 56px rgba(29,80,53,.18),0 6px 18px rgba(29,80,53,.08);
  aspect-ratio:3/4;background:var(--c-primary-light);
  max-width:330px;width:100%;border:4px solid #fff;
}
.hero-image-frame img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-floating{
  position:absolute;background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  box-shadow:0 8px 28px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);
  display:flex;align-items:center;gap:var(--sp-3);z-index:10;min-width:170px;
}
.hero-floating.tl{top:var(--sp-8);left:4px}
.hero-floating.br{bottom:var(--sp-14);right:4px}
.hf-icon{width:38px;height:38px;border-radius:var(--r-sm);background:var(--c-primary-light);display:grid;place-items:center;color:var(--c-primary);flex-shrink:0}
.hf-body{display:flex;flex-direction:column}
.hf-num{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--c-primary-dark);line-height:1;letter-spacing:-.02em}
.hf-label{font-size:var(--t-2xs);color:var(--c-muted);margin-top:2px}

/* Hero results card */
.hero-results-wrap{display:flex;align-items:center;justify-content:flex-end}
.hero-results-card{
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 20px 56px rgba(10,16,13,.10),0 6px 18px rgba(10,16,13,.06);
  width:100%;max-width:460px;
}
.hrc-header{background:var(--c-primary-deep);padding:var(--sp-5) var(--sp-6);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.hrc-title{font-family:var(--font-display);font-size:var(--t-md);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.015em}
.hrc-subtitle{font-size:var(--t-2xs);color:rgba(255,255,255,.45);margin-top:3px;letter-spacing:.04em}
.hrc-verified{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:var(--r-xs);padding:4px 10px;margin-top:2px;white-space:nowrap}
.hrc-tabs{display:flex;border-bottom:1px solid var(--c-border);background:var(--c-bg);padding:0 var(--sp-2);overflow-x:auto;scrollbar-width:none}
.hrc-tabs::-webkit-scrollbar{display:none}
.hrc-tab{font-size:var(--t-2xs);font-weight:700;color:var(--c-muted);padding:var(--sp-3) var(--sp-4);border-bottom:2px solid transparent;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:all var(--t-base);white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font-display)}
.hrc-tab:hover{color:var(--c-text2)}
.hrc-tab.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.hrc-panel{padding:var(--sp-5) var(--sp-6);display:none}
.hrc-panel.active{display:block}
.hrc-patient{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--t-2xs);color:var(--c-muted);margin-bottom:var(--sp-5);padding:var(--sp-3) var(--sp-4);background:var(--c-bg);border-radius:var(--r-sm);border:1px solid var(--c-border)}
.hrc-avatar{width:28px;height:28px;border-radius:50%;background:var(--c-primary-light);color:var(--c-primary);display:grid;place-items:center;font-size:.68rem;font-weight:700;letter-spacing:.02em;flex-shrink:0}
.hrc-metric{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--c-border)}
.hrc-metric:last-of-type{border-bottom:none}
.hrc-m-icon{width:32px;height:32px;border-radius:var(--r-sm);background:var(--c-primary-light);display:grid;place-items:center;color:var(--c-primary);flex-shrink:0}
.hrc-m-name{font-size:var(--t-sm);font-weight:600;color:var(--c-text);line-height:1.2;font-family:var(--font-display)}
.hrc-m-unit{font-size:.68rem;color:var(--c-muted);margin-top:2px;letter-spacing:.02em}
.hrc-values{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.hrc-before{font-size:var(--t-sm);color:var(--c-muted);text-decoration:line-through;text-decoration-color:rgba(176,30,30,.4)}
.hrc-arr{color:var(--c-primary);font-size:.8rem}
.hrc-after{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--c-primary-deep);line-height:1;letter-spacing:-.02em}
.hrc-badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:var(--r-xs)}
.hrc-badge-down,.hrc-badge-up{background:var(--c-primary-light);color:var(--c-primary-dark)}
.hrc-footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--c-border);background:var(--c-bg);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.hrc-footer-note{font-size:.7rem;color:var(--c-muted);display:flex;align-items:center;gap:6px}
.hrc-footer-link{font-size:var(--t-2xs);font-weight:700;color:var(--c-primary);white-space:nowrap;display:flex;align-items:center;gap:4px;text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
.hrc-footer-link:hover{color:var(--c-primary-deep)}

/* Hero responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-col-right{order:-1}
  .hero-doc-card{max-width:320px;aspect-ratio:3/2;max-height:min(44vw,260px)}
  .hero-doc-photo{object-position:center 15%}
}
@media(max-width:560px){
  .hero{min-height:min(100svh,500px);padding:var(--sp-6) 0}
  .hero-doc-card{max-width:100%;aspect-ratio:16/9;max-height:220px}
  .hero-doc-photo{object-position:center 20%}
}
@media(max-height:780px){
  .hero{padding:var(--sp-4) 0;min-height:0}
  .hero-grid{align-items:flex-start}
  .hero h1{font-size:clamp(1.7rem,1.4rem + 2vw,2.7rem);margin-bottom:var(--sp-3)}
  .hero .lead{font-size:var(--t-base);line-height:1.55;margin-bottom:var(--sp-4)}
  .cycling-badge{margin-bottom:var(--sp-2) !important}
  .hero-creds{margin-bottom:var(--sp-3)}
  .hero-actions{margin-bottom:var(--sp-4)}
  .hero-metrics{padding-top:var(--sp-3)}
  .slide-controls{margin-top:var(--sp-4)}
}

/* ── 10. TRUST BAR ───────────────────────────────────────────── */
.trust-bar{
  background:var(--c-primary-deep);padding:14px 0;overflow:hidden;position:relative;
}
.trust-bar::before,.trust-bar::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.trust-bar::before{left:0;background:linear-gradient(to right,var(--c-primary-deep),transparent)}
.trust-bar::after{right:0;background:linear-gradient(to left,var(--c-primary-deep),transparent)}
.marquee-wrap{overflow:hidden}
.marquee-track{display:flex;gap:var(--sp-10);width:max-content;animation:marquee-scroll 38s linear infinite;align-items:center}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-item{
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  color:rgba(255,255,255,.65);white-space:nowrap;letter-spacing:.1em;text-transform:uppercase;
}
.trust-item svg{color:var(--c-accent);flex-shrink:0;width:15px;height:15px}
.trust-sep{width:3px;height:3px;border-radius:50%;background:var(--c-accent);opacity:.4;flex-shrink:0}

/* ── 11. CARDS ───────────────────────────────────────────────── */
.card{
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--sp-8);box-shadow:var(--el-1);
  transition:box-shadow var(--t-slow),transform var(--t-slow);
  position:relative;overflow:hidden;
}
.card:hover{box-shadow:var(--el-3);transform:translateY(-2px)}
.card .icon{
  width:46px;height:46px;border-radius:var(--r-sm);background:var(--c-primary-light);
  display:grid;place-items:center;color:var(--c-primary);margin-bottom:var(--sp-5);
}
.card h3{margin-bottom:var(--sp-3)}
.card p{color:var(--c-muted);font-size:var(--t-sm)}
.tag{
  display:inline-block;font-family:var(--font-display);
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:var(--r-xs);padding:3px 10px;
}
.tag-green{background:var(--c-primary-light);color:var(--c-primary)}
.tag-gold{background:var(--c-accent-light);color:var(--c-accent-dark)}
.tag-neutral{background:var(--stone-50);color:var(--stone-600)}
.alert{padding:14px 18px;border-radius:var(--r-md);font-size:var(--t-sm);margin-bottom:var(--sp-4)}
.alert-success{background:var(--c-primary-light);color:var(--c-primary-dark);border-left:3px solid var(--c-primary)}
.alert-error{background:#FEE2E2;color:#991B1B;border-left:3px solid var(--c-error)}
.alert-warn{background:var(--c-accent-light);color:var(--c-accent-dark);border-left:3px solid var(--c-accent)}
.alert-info{background:var(--c-primary-light);color:var(--c-primary-dark);border-left:3px solid var(--c-primary)}

/* ── 12. CONDITIONS GRID ─────────────────────────────────────── */
.conditions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--sp-3);max-width:980px;margin:0 auto;
}
.condition-pill{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);
  box-shadow:var(--el-0);font-size:var(--t-sm);font-weight:500;color:var(--c-text2);
  transition:all var(--t-base);cursor:default;
}
.condition-pill:hover{
  background:var(--c-primary-25);border-color:var(--green-200);
  color:var(--c-primary-dark);box-shadow:var(--el-2);transform:translateY(-1px);
}
.cond-icon{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--c-primary-light);display:grid;place-items:center;
  color:var(--c-primary);flex-shrink:0;transition:background var(--t-base);
}
.condition-pill:hover .cond-icon{background:var(--green-100)}
.condition-pill svg{color:var(--c-primary);flex-shrink:0}

/* ── 13. HOW IT WORKS ────────────────────────────────────────── */
.hiw-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--el-2);
}
@media(max-width:720px){.hiw-steps{grid-template-columns:1fr}}
.hiw-step{
  padding:var(--sp-10) var(--sp-8);display:flex;flex-direction:column;
  gap:var(--sp-4);position:relative;border-top:3px solid transparent;
}
.hiw-step:first-child{border-top-color:var(--c-primary)}
.hiw-step:nth-child(2){border-top-color:var(--c-accent)}
.hiw-step:last-child{border-top-color:var(--c-primary-dark)}
.hiw-step+.hiw-step{border-left:1px solid var(--c-border)}
@media(max-width:720px){.hiw-step+.hiw-step{border-left:none;border-top:1px solid var(--c-border)}}
.hiw-num-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.hiw-num{
  width:52px;height:52px;border-radius:var(--r-sm);
  background:var(--c-primary-deep);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.2rem;font-weight:800;flex-shrink:0;
  box-shadow:0 4px 14px rgba(29,80,53,.24);letter-spacing:-.02em;
}
.hiw-step-icon{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--c-primary-light);display:grid;place-items:center;
  color:var(--c-primary);flex-shrink:0;
}
.hiw-step h3{font-size:var(--t-md);margin:0;font-weight:700;letter-spacing:-.02em}
.hiw-step p{color:var(--c-muted);font-size:var(--t-sm);margin:0;line-height:1.78}

/* ── 14. PROGRAMS ────────────────────────────────────────────── */
.program-card{
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--el-1);
  transition:box-shadow var(--t-slow),transform var(--t-slow);
  display:flex;flex-direction:column;
}
.program-card:hover{box-shadow:var(--el-4);transform:translateY(-4px)}
.pc-img{
  height:152px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.pc-img-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.14) 0%,transparent 45%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.08) 0%,transparent 40%);
}
.pc-icon-wrap{
  position:relative;z-index:1;width:60px;height:60px;border-radius:50%;
  background:rgba(255,255,255,.14);display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);
}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.program-card:hover .pc-img img{transform:scale(1.04)}
.pc-body{padding:var(--sp-6);flex:1;display:flex;flex-direction:column;gap:var(--sp-3)}
.pc-tag{
  display:inline-block;font-family:var(--font-display);
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-xs);
  background:var(--c-accent-light);color:var(--c-accent-dark);
}
.pc-tag.flagship{background:var(--green-50);color:var(--green-800)}
.pc-tag.speciality{background:rgba(196,150,64,.12);color:var(--c-accent-dark)}
.pc-tag.foundation{background:rgba(59,130,246,.08);color:#1E40AF}
.program-card h3{font-size:var(--t-md);line-height:1.3;margin:var(--sp-2) 0 0;letter-spacing:-.015em}
.program-card p{color:var(--c-muted);font-size:var(--t-sm);flex:1;line-height:1.72}
.pc-includes{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:flex;flex-direction:column;gap:var(--sp-2)}
.pc-includes li{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-xs);color:var(--c-muted)}
.pc-includes li svg{color:var(--c-primary);flex-shrink:0;margin-top:2px;width:12px;height:12px}
.pc-footer{border-top:1px solid var(--c-border);padding:var(--sp-4) var(--sp-6) var(--sp-6);margin-top:auto}

/* ── 15. IMPACT STATS ────────────────────────────────────────── */
.impact-strip{background:var(--c-primary-deep);position:relative;overflow:hidden}
.impact-strip::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 65% 50%,rgba(50,133,91,.15) 0%,transparent 65%);
}
.impact-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-xl);overflow:hidden;
}
@media(max-width:640px){.impact-grid{grid-template-columns:repeat(2,1fr)}}
.impact-stat{
  padding:var(--sp-12) var(--sp-8);text-align:center;
  background:rgba(255,255,255,.02);
  border-right:1px solid rgba(255,255,255,.06);
  transition:background var(--t-base);
}
.impact-stat:last-child{border-right:none}
.impact-stat:hover{background:rgba(255,255,255,.04)}
.is-icon{
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);display:grid;place-items:center;
  color:var(--c-accent);margin:0 auto var(--sp-4);
}
.impact-num{
  font-family:var(--font-display);font-size:var(--t-3xl);font-weight:800;
  color:#fff;line-height:1;letter-spacing:-.04em;
}
.impact-label{
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:600;
  color:rgba(255,255,255,.42);margin-top:var(--sp-3);
  letter-spacing:.1em;text-transform:uppercase;
}

/* ── 16. TESTIMONIALS ────────────────────────────────────────── */
.testi-marquee-wrap{overflow:hidden;position:relative;padding:var(--sp-4) 0}
.testi-marquee-wrap::before,.testi-marquee-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.testi-marquee-wrap::before{left:0;background:linear-gradient(to right,var(--c-bg),transparent)}
.testi-marquee-wrap::after{right:0;background:linear-gradient(to left,var(--c-bg),transparent)}
.testi-track{display:flex;gap:var(--sp-5);width:max-content;animation:marquee-scroll 56s linear infinite}
.testi-track:hover{animation-play-state:paused}
.testi-card{
  flex-shrink:0;width:346px;background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);
  box-shadow:var(--el-1);transition:box-shadow var(--t-slow),transform var(--t-slow);
}
.testi-card:hover{box-shadow:var(--el-3);transform:translateY(-2px)}
.testi-stars{display:flex;gap:2px;color:var(--c-accent)}
.testi-stars svg{width:13px;height:13px;fill:currentColor}
.testi-card .quote{
  font-size:var(--t-sm);line-height:1.78;color:var(--c-text2);flex:1;
  padding-left:var(--sp-4);border-left:2px solid var(--c-primary-light);
  font-style:italic;font-weight:300;
}
.testi-card .author{display:flex;align-items:center;gap:var(--sp-3);border-top:1px solid var(--c-border);padding-top:var(--sp-4)}
.testi-card .avatar{
  width:34px;height:34px;border-radius:50%;background:var(--c-primary);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
  font-size:.72rem;flex-shrink:0;letter-spacing:.02em;
}
.testi-card .name{font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);color:var(--c-text);letter-spacing:-.01em}
.testi-card .meta{font-size:var(--t-2xs);color:var(--c-muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}

/* ── 17. FAQ ─────────────────────────────────────────────────── */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.faq-item{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;transition:box-shadow var(--t-base),border-color var(--t-base)}
.faq-item.open{box-shadow:var(--el-2);border-color:var(--green-200)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;
  color:var(--c-text);text-align:left;line-height:1.5;letter-spacing:-.01em;
  transition:color var(--t-fast);
}
.faq-q:hover{color:var(--c-primary)}
.faq-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:var(--r-xs);
  background:var(--c-primary-light);color:var(--c-primary);
  display:grid;place-items:center;
  transition:transform .35s var(--ease),background var(--t-base),color var(--t-base);
}
.faq-icon svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.faq-item.open .faq-icon{background:var(--c-primary);color:#fff}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;padding:0 var(--sp-6);
  color:var(--c-muted);font-size:var(--t-sm);line-height:1.78;
  transition:max-height .42s var(--ease),padding .35s var(--ease);
}
.faq-item.open .faq-a{max-height:320px;padding:0 var(--sp-6) var(--sp-5)}

/* ── 18. ABOUT TIMELINE ──────────────────────────────────────── */
.tl-wrap{position:relative;max-width:680px;margin:0 auto;padding-left:var(--sp-12)}
.tl-wrap::before{content:'';position:absolute;left:18px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--c-primary),var(--c-primary-light));border-radius:2px}
.tl-item{position:relative;padding-bottom:var(--sp-10)}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-40px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--c-primary);border:3px solid var(--c-bg);box-shadow:0 0 0 2px var(--c-primary)}
.tl-dot--accent{background:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent);width:18px;height:18px;left:-42px;top:2px}
.tl-year{display:inline-block;font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-primary-dark);background:var(--c-primary-light);padding:2px 10px;border-radius:var(--r-xs);margin-bottom:var(--sp-2)}
.tl-item h4{font-size:var(--t-md);margin-bottom:var(--sp-2);letter-spacing:-.015em}
.tl-item p{font-size:var(--t-sm);color:var(--c-muted);line-height:1.78;margin:0}
@media(max-width:540px){.tl-wrap{padding-left:var(--sp-10)}.tl-wrap::before{left:12px}.tl-dot{left:-34px}.tl-dot--accent{left:-36px}}

/* ── 19. TOOL RESULT PAGES ───────────────────────────────────── */
.tool-result-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-8)}
.result-hero{display:flex;align-items:center;gap:var(--sp-8);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--sp-8);box-shadow:var(--el-2)}
@media(max-width:580px){.result-hero{flex-direction:column;text-align:center}}
.result-gauge{flex-shrink:0;width:130px;height:130px;position:relative}
.result-gauge svg{width:100%;height:100%}
.gauge-bg-ring{stroke:var(--c-border)}
.gauge-arc{transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gc-num{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.gc-sub{font-size:var(--t-xs);color:var(--c-muted);margin-top:3px}
.result-info{flex:1}
.ri-badge{display:inline-block;padding:3px 12px;border-radius:var(--r-xs);font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--sp-3)}
.ri-badge.good{background:#DCFCE7;color:#166534}
.ri-badge.moderate{background:#FEF3C7;color:#92400E}
.ri-badge.high{background:#FEE2E2;color:#991B1B}
.result-info h2{font-size:var(--t-xl);margin-bottom:var(--sp-3);letter-spacing:-.03em}
.result-info p{color:var(--c-muted);font-size:var(--t-sm);line-height:1.72}
.insight-grid{display:flex;flex-direction:column;gap:var(--sp-4)}
.insight-card{display:flex;align-items:flex-start;gap:var(--sp-5);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6)}
.ic-icon{width:42px;height:42px;border-radius:var(--r-sm);background:var(--c-primary-light);display:grid;place-items:center;color:var(--c-primary);flex-shrink:0}
.cred-icon{width:46px;height:46px;border-radius:var(--r-sm);background:var(--c-primary-light);display:grid;place-items:center;color:var(--c-primary);flex-shrink:0;margin-bottom:var(--sp-4)}
.ic-body h4{font-size:var(--t-sm);font-weight:600;margin-bottom:var(--sp-2);letter-spacing:-.01em}
.ic-body p{font-size:var(--t-xs);color:var(--c-muted);line-height:1.65;margin:0}
.result-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
@media(max-width:480px){.result-actions{flex-direction:column}}

/* ── 20. TOOL CALCULATORS ────────────────────────────────────── */
.tool-card{background:var(--c-card);border-radius:var(--r-xl);padding:var(--sp-8);box-shadow:var(--el-2);border:1px solid var(--c-border)}
@media(max-width:560px){.tool-card{padding:var(--sp-5)}}
.tool-result{background:var(--c-primary-light);border-radius:var(--r-lg);padding:var(--sp-6);margin-top:var(--sp-6);text-align:center}
.tool-result .big{font-family:var(--font-display);font-size:var(--t-3xl);color:var(--c-primary-dark);font-weight:800;letter-spacing:-.04em}
.tool-result .lbl{color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;margin-top:var(--sp-2)}

/* ── 21. PAGE HEAD ───────────────────────────────────────────── */
.page-head{background:var(--c-primary-deep);color:#fff;padding:var(--sp-12) 0}
.page-head h1{color:#fff;font-size:var(--t-2xl);letter-spacing:-.03em}
.breadcrumb{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:600;color:rgba(255,255,255,.38);margin-top:var(--sp-3);letter-spacing:.04em;text-transform:uppercase}
.breadcrumb a{color:rgba(255,255,255,.58);transition:color var(--t-fast)}
.breadcrumb a:hover{color:#fff}
.breadcrumb a::after{content:' ·';margin-right:5px}

/* ── 22. FORMS ───────────────────────────────────────────────── */
.form-group{margin-bottom:var(--sp-5)}
label{display:block;font-family:var(--font-display);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--sp-2);color:var(--c-text)}
input[type=text],input[type=email],input[type=tel],
input[type=number],input[type=date],input[type=password],textarea,select{
  width:100%;padding:12px 16px;border:1.5px solid var(--c-border);
  border-radius:var(--r-md);background:var(--c-card);color:var(--c-text);
  font-size:var(--t-base);transition:border-color var(--t-fast),box-shadow var(--t-fast);
  appearance:none;-webkit-appearance:none;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(29,80,53,.1);
}
textarea{resize:vertical;min-height:120px}
input.is-invalid,textarea.is-invalid,select.is-invalid{border-color:var(--c-error)!important;box-shadow:0 0 0 3px rgba(176,30,30,.1)!important}
input.is-invalid:focus,textarea.is-invalid:focus{border-color:var(--c-error);box-shadow:0 0 0 3px rgba(176,30,30,.12)}
.form-help{font-size:var(--t-xs);color:var(--c-muted);margin-top:var(--sp-1);line-height:1.5}
.form-help a{font-size:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-hint{font-size:var(--t-xs);color:var(--c-muted);margin-top:var(--sp-1)}
.form-control{width:100%;padding:12px 16px;border:1.5px solid var(--c-border);border-radius:var(--r-md);background:var(--c-card);color:var(--c-text);font-size:var(--t-base);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input-wrap{position:relative}
.input-wrap input{padding-left:42px}
.input-wrap .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--c-muted)}
.radio-group,.check-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.radio-row,.check-row{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;
  transition:all var(--t-fast);
}
.radio-row:hover,.check-row:hover{border-color:var(--c-primary);background:var(--c-primary-25)}
.radio-row input,.check-row input{width:18px;height:18px;accent-color:var(--c-primary);flex-shrink:0}
.radio-row span,.check-row span{font-size:var(--t-sm);color:var(--c-text2);line-height:1.4}
/* Slot picker */
.slot-display-box{padding:12px 16px;border:1.5px solid var(--c-border);border-radius:var(--r-md);font-size:var(--t-sm);color:var(--c-muted);background:var(--c-bg);min-height:44px;display:flex;align-items:center;cursor:default;transition:all var(--t-base)}
.slot-display-box.has-slot{border-color:var(--c-primary);color:var(--c-primary);font-weight:600;background:var(--c-primary-25)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.slot{padding:10px 6px;border:1.5px solid var(--c-border);border-radius:var(--r-md);text-align:center;font-size:var(--t-sm);cursor:pointer;background:var(--c-card);transition:all var(--t-fast)}
.slot:hover:not(.taken){border-color:var(--c-primary);background:var(--c-primary-25)}
.slot.selected{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.slot.taken{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* ── 23. FOOTER ──────────────────────────────────────────────── */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.6);padding:var(--sp-16) 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-10);padding-bottom:var(--sp-10)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .footer-logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;margin-bottom:var(--sp-4)}
.footer-brand .footer-logo img{width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.08)}
.footer-logo-text span{font-family:var(--font-display);font-size:.95rem;font-weight:800;color:#fff;display:block;letter-spacing:-.01em}
.footer-logo-text small{font-family:var(--font-body);font-size:var(--t-2xs);color:rgba(255,255,255,.38);letter-spacing:.06em;text-transform:uppercase}
.footer-brand p{font-size:var(--t-sm);line-height:1.78;color:rgba(255,255,255,.4);margin-bottom:var(--sp-5)}
.site-footer h4{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;color:rgba(255,255,255,.8);margin-bottom:var(--sp-4);letter-spacing:.1em;text-transform:uppercase}
.site-footer a{display:block;font-size:var(--t-sm);color:rgba(255,255,255,.45);margin-bottom:var(--sp-2);transition:color var(--t-fast)}
.site-footer a:hover{color:#fff}
.social-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.social-row a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);
  transition:all var(--t-base);margin:0;border:1px solid rgba(255,255,255,.07);
}
.social-row a:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);padding:var(--sp-5) 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-4);
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:600;
  color:rgba(255,255,255,.25);letter-spacing:.04em;text-transform:uppercase;
}
.footer-bottom a{display:inline;color:rgba(255,255,255,.38);margin:0;font-size:var(--t-2xs)}
.footer-bottom a:hover{color:rgba(255,255,255,.8)}
.footer-nl{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:var(--sp-10);margin-bottom:var(--sp-10);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5)}
.footer-nl h3{color:#fff;font-family:var(--font-display);font-size:var(--t-md);margin-bottom:6px;font-weight:700;letter-spacing:-.015em}
.footer-nl p{color:rgba(255,255,255,.4);font-size:var(--t-sm);margin:0}
.footer-nl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.footer-nl-form input[type=email]{padding:11px 16px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:var(--t-sm);min-width:220px;outline:none;transition:border-color var(--t-fast)}
.footer-nl-form input[type=email]:focus{border-color:rgba(255,255,255,.35)}
.footer-nl-form input[type=email]::placeholder{color:rgba(255,255,255,.3)}

/* ── 24. MISC COMPONENTS ─────────────────────────────────────── */
.announcement-bar{
  background:var(--gold-600);color:#fff;text-align:center;
  padding:10px 44px;font-family:var(--font-display);font-size:var(--t-2xs);
  font-weight:700;position:relative;letter-spacing:.06em;text-transform:uppercase;
}
.announcement-bar a{color:rgba(255,255,255,.85);text-decoration:underline;display:inline}
.ann-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.65);font-size:1.1rem;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-xs)}
.ann-close:hover{color:#fff}

/* Floating CTA group */
.float-cta-group{
  position:fixed;bottom:24px;right:20px;z-index:800;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;transform:translateY(14px) scale(.94);pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.float-cta-group.cta-visible{opacity:1;transform:none;pointer-events:auto}
.float-btn{
  display:flex;align-items:center;gap:10px;height:50px;padding:0 16px 0 14px;
  border-radius:var(--r-sm);font-family:var(--font-display);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;border:none;
  box-shadow:0 4px 20px rgba(0,0,0,.16);transition:transform .2s var(--ease),box-shadow .2s;
  white-space:nowrap;
}
.float-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.float-btn svg{flex-shrink:0}
.float-wa{background:#25D366;color:#fff}
.float-wa:hover{background:#1EB859;color:#fff}
.float-book{background:var(--c-primary);color:#fff}
.float-book:hover{background:var(--c-primary-dark);color:#fff}
@media(max-width:480px){
  .float-btn .float-btn-label{display:none}
  .float-btn{width:50px;padding:0;justify-content:center;border-radius:var(--r-sm)}
}
.back-to-top{
  position:fixed;bottom:104px;right:26px;z-index:800;width:34px;height:34px;
  border-radius:var(--r-sm);background:var(--c-card);color:var(--c-primary);
  border:1px solid var(--c-border);box-shadow:var(--el-2);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:all var(--t-base);
}
.back-to-top.visible{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{background:var(--c-primary);color:#fff}
.cookie-banner{
  position:fixed;bottom:18px;left:18px;right:18px;max-width:500px;
  background:var(--c-card);border:1px solid var(--c-border);
  box-shadow:var(--el-4);border-radius:var(--r-lg);padding:18px 20px;
  z-index:9000;display:none;font-size:var(--t-sm);align-items:center;gap:var(--sp-4);flex-wrap:wrap;
}
.cookie-banner.show{display:flex}
.cookie-banner p{flex:1;color:var(--c-muted);min-width:200px;margin:0}

/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9500;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox-overlay.open{display:flex}
.lightbox-img{max-width:min(92vw,900px);max-height:88vh;border-radius:var(--r-md);object-fit:contain;box-shadow:0 24px 64px rgba(0,0,0,.5);cursor:default}
.lightbox-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.6rem;cursor:pointer;display:grid;place-items:center;transition:background var(--t-base)}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-caption{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;padding:7px 16px;border-radius:var(--r-full);font-size:var(--t-xs);white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}

/* Toast */
.toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9100;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:12px 18px;box-shadow:var(--el-3);font-size:var(--t-sm);animation:toast-in .28s var(--ease-out)}
.toast-success{border-left:3px solid var(--c-success)}.toast-error{border-left:3px solid var(--c-error)}.toast-info{border-left:3px solid var(--c-primary)}
.toast-out{animation:toast-out .3s var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}

/* Pagination */
.pagination{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;justify-content:center;margin-top:var(--sp-10)}
.pagination a,.pagination span{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-card);font-family:var(--font-display);font-size:var(--t-xs);font-weight:600;color:var(--c-text2);transition:all var(--t-fast)}
.pagination a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.pagination .active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* Chips / Filter pills */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin:0 auto var(--sp-8)}
.chip{
  padding:7px 18px;border-radius:var(--r-xs);
  font-family:var(--font-display);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--c-card);color:var(--c-muted);border:1px solid var(--c-border);
  transition:all var(--t-fast);cursor:pointer;text-decoration:none;
}
.chip:hover,.chip.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* Masonry / Gallery */
.masonry{columns:3;gap:var(--sp-4)}
@media(max-width:900px){.masonry{columns:2}}
@media(max-width:560px){.masonry{columns:1}}
.masonry img{width:100%;border-radius:var(--r-md);margin-bottom:var(--sp-4);cursor:zoom-in}
.gallery-empty{text-align:center;padding:var(--sp-20) var(--sp-6);max-width:480px;margin:0 auto}
.gallery-empty-icon{margin:0 auto var(--sp-5);color:var(--c-primary);opacity:.35;width:64px;height:64px}
.gallery-empty h3{font-size:var(--t-xl);margin-bottom:var(--sp-3)}
.gallery-empty p{color:var(--c-muted);font-size:var(--t-base);line-height:1.78}

/* ── 25. UTILITIES ───────────────────────────────────────────── */
.text-center{text-align:center}
.text-muted{color:var(--c-muted)}
.text-primary{color:var(--c-primary)}
.mt-1{margin-top:var(--sp-2)}.mt-2{margin-top:var(--sp-4)}.mt-3{margin-top:var(--sp-6)}
.mt-4{margin-top:var(--sp-8)}.mt-5{margin-top:var(--sp-12)}
.mb-1{margin-bottom:var(--sp-2)}.mb-2{margin-bottom:var(--sp-4)}.mb-3{margin-bottom:var(--sp-6)}
.mb-4{margin-bottom:var(--sp-8)}.mb-5{margin-bottom:var(--sp-12)}
.mx-auto{margin-left:auto;margin-right:auto}
.flex{display:flex}.gap-2{gap:var(--sp-4)}.gap-3{gap:var(--sp-6)}
.justify-between{justify-content:space-between}.items-center{align-items:center}
.accent{color:var(--c-primary)}
.skip-link{position:absolute;top:-40px;left:8px;background:var(--c-primary);color:#fff;padding:8px 14px;border-radius:var(--r-sm);z-index:9999;font-size:var(--t-sm);font-weight:600}
.skip-link:focus{top:8px}

/* ── 26. REVEAL ANIMATION ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ── 27. QUICK ENQUIRY MODAL ─────────────────────────────────── */
.qe-overlay{
  position:fixed;inset:0;background:rgba(10,16,13,.55);
  z-index:9200;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease);backdrop-filter:blur(6px);
}
.qe-overlay.open{opacity:1;pointer-events:auto}
.qe-card{
  background:var(--c-card);border-radius:var(--r-xl);
  width:100%;max-width:480px;
  max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;
  box-shadow:0 32px 80px rgba(10,16,13,.28);
  transform:translateY(20px) scale(.97);
  transition:transform .32s var(--ease-spring);overflow:hidden;
}
.qe-overlay.open .qe-card{transform:none}
.qe-head{
  background:var(--c-primary-deep);
  padding:var(--sp-5) var(--sp-6) var(--sp-4);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  flex-shrink:0;
}
.qe-head h3{color:#fff;font-family:var(--font-display);font-size:var(--t-md);font-weight:700;margin:0;letter-spacing:-.02em}
.qe-head p{color:rgba(255,255,255,.45);font-size:var(--t-xs);margin-top:4px}
.qe-close{
  background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.6);
  width:30px;height:30px;border-radius:var(--r-xs);cursor:pointer;font-size:1.2rem;
  display:grid;place-items:center;flex-shrink:0;transition:background .2s,color .2s;
}
.qe-close:hover{background:rgba(255,255,255,.16);color:#fff}
.qe-body{padding:var(--sp-5) var(--sp-6) var(--sp-6);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
@media(max-width:480px){
  .qe-overlay{padding:12px;align-items:flex-end}
  .qe-card{max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92dvh}
  .qe-body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
  .qe-head{padding:var(--sp-4) var(--sp-5) var(--sp-3)}
}
.qe-body .form-group{margin-bottom:var(--sp-4)}
.qe-body label{font-size:var(--t-xs);font-weight:700;color:var(--c-text);font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.phone-hint{font-size:var(--t-xs);color:var(--c-muted);margin-top:4px}
.phone-error{font-size:var(--t-xs);color:var(--c-error);margin-top:4px;display:none}
input.phone-invalid{border-color:var(--c-error)!important;box-shadow:0 0 0 3px rgba(176,30,30,.1)!important}

/* ── 28. MATH CAPTCHA ────────────────────────────────────────── */
.captcha-group{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4);margin-top:var(--sp-3)}
.captcha-q{font-size:var(--t-sm);font-weight:600;color:var(--c-text);margin-bottom:var(--sp-2);font-family:var(--font-display)}
.captcha-q span{font-size:var(--t-md);font-family:var(--font-display);color:var(--c-primary);font-weight:800}
.captcha-group input[type=number]{max-width:120px}
.captcha-err{color:var(--c-error);font-size:var(--t-xs);margin-top:4px;display:none}

/* ── 29. PROGRAMS ENHANCED ───────────────────────────────────── */
.pc-img-real{height:160px;overflow:hidden;position:relative}
.pc-img-real img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.prog-card:hover .pc-img-real img{transform:scale(1.04)}
.pc-enquire-row{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border);flex-wrap:wrap}
.pc-enquire-row .btn{flex:1;text-align:center;justify-content:center;font-size:var(--t-2xs)}
.enq-source{display:inline-block;padding:2px 9px;border-radius:var(--r-xs);font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.07em;background:var(--c-primary-light);color:var(--c-primary);text-transform:uppercase}

/* ── 30. TOOL GATE ───────────────────────────────────────────── */
.tool-gate-card{text-align:center;padding:var(--sp-10) var(--sp-8) !important}
.tg-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:var(--c-primary-light);color:var(--c-primary);margin-bottom:var(--sp-5)}
.tg-heading{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:800;margin-bottom:var(--sp-2);letter-spacing:-.03em}
.tg-sub{color:var(--c-muted);max-width:380px;margin:0 auto var(--sp-6);font-size:var(--t-sm)}
.tg-privacy{font-size:var(--t-xs);color:var(--c-muted);margin-top:var(--sp-3);display:flex;align-items:center;justify-content:center;gap:6px}
.tg-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--c-border);font-size:var(--t-xs);color:var(--c-muted)}
#tool-gate-form .form-group,#tool-gate-form .captcha-group{text-align:left}
@media(max-width:480px){.tool-gate-card{padding:var(--sp-8) var(--sp-4) !important}.tg-trust{gap:var(--sp-3)}}

/* ── 31. TOOL CONSULTATION CTA ───────────────────────────────── */
.tool-consult-cta{display:flex;align-items:center;gap:var(--sp-6);background:var(--c-primary-light);border:1px solid rgba(29,80,53,.12);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-6);flex-wrap:wrap}
.tcc-text{flex:1;min-width:180px}
.tcc-text strong{font-size:var(--t-base);font-weight:600;color:var(--c-text);display:block;margin-bottom:4px}
.tcc-text p{font-size:var(--t-sm);color:var(--c-muted);margin:0;line-height:1.5}
.tcc-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;flex-shrink:0}
@media(max-width:600px){.tool-consult-cta{flex-direction:column;gap:var(--sp-4)}.tcc-actions{width:100%}.tcc-actions .btn{flex:1;justify-content:center;text-align:center}}

/* ── 32. GALLERY IMAGE WRAPS ─────────────────────────────────── */
.gallery-img-wrap{cursor:zoom-in;break-inside:avoid;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-4);position:relative;background:var(--c-border)}
.gallery-img-wrap img{width:100%;display:block;transition:transform .42s var(--ease)}
.gallery-img-wrap:hover img{transform:scale(1.03)}

/* ── 33. TOOL LINK ROW (Tools CTA section) ───────────────────── */
.tool-row-link{transition:all var(--t-base)!important}
.tool-row-link:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important;transform:translateX(4px)}

/* ── 34. RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1060px){
  .nav-links{gap:0}
  .nav-links a{padding:8px 10px;font-size:.79rem}
}
@media(max-width:860px){
  .nav-links{
    position:fixed;top:0;right:-100%;bottom:0;width:min(320px,80vw);
    background:var(--c-card);flex-direction:column;align-items:flex-start;
    padding:80px var(--sp-6) var(--sp-6);gap:0;z-index:850;
    box-shadow:-4px 0 40px rgba(10,16,13,.18);
    transition:right .3s var(--ease);overflow-y:auto;
  }
  .nav-links.open{right:0}
  .nav-links li{width:100%}
  .nav-links a{
    padding:12px var(--sp-3);font-size:.9rem;width:100%;
    border-radius:0;border-bottom:1px solid var(--c-border);
  }
  .nav-links a::after{display:none}
  .nav-links a:hover,.nav-links a.active{background:var(--c-primary-25);border-radius:0}
  .menu-toggle{display:flex}
  .nav-cta .btn{display:none}
}
@media(max-width:640px){
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .impact-stat{padding:var(--sp-8) var(--sp-5)}
  .impact-num{font-size:var(--t-2xl)}
  .footer-grid{grid-template-columns:1fr}
  section{padding:var(--sp-16) 0}
}

/* ── 35. REDUCED MOTION ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero-doc-card,.hero-slide-content{transition:none !important}
  .marquee-track,.testi-track{animation:none!important}
}

/* ── 36. ANIMATIONS (shared) ─────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}


/* ================================================================
   BRAND SYNC -- Change and Evolve identity
   Forest Green (#0D2419 / #1D5035) + Amber Gold (#C49640)
   Header & footer synced with homepage redesign palette.
   ================================================================ */

/* -- HEADER: green-to-amber gradient accent stripe + refinements */
.site-header {
  border-top: 3px solid var(--gold-500);
  background-color: rgba(245,242,238,.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(29,80,53,.12);
  background-image: linear-gradient(90deg, var(--green-700) 0%, var(--green-600) 45%, var(--gold-500) 75%, var(--gold-400) 100%);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.site-header.scrolled {
  box-shadow: 0 1px 0 rgba(29,80,53,.06), 0 4px 24px rgba(10,16,13,.09);
}
.dark-mode .site-header {
  background-color: rgba(6,22,17,.97);
  border-bottom-color: rgba(29,80,53,.2);
}
.logo-name { color: var(--green-800); font-size: 1.05rem; }
.logo-sub  { color: var(--stone-500); letter-spacing: .09em; }
.nav-links a::after {
  background: linear-gradient(90deg, var(--green-600), var(--gold-500));
}
.site-header .btn-primary:hover {
  box-shadow: 0 2px 0 var(--green-950), 0 6px 22px rgba(196,150,64,.22);
}

/* -- FOOTER: matching green-to-amber top stripe + amber accents  */
.site-footer {
  border-top: 3px solid transparent;
  background-image:
    linear-gradient(90deg, var(--green-700) 0%, var(--green-600) 45%, var(--gold-500) 75%, var(--gold-400) 100%),
    linear-gradient(180deg, var(--green-900) 0%, var(--green-900) 100%);
  background-size: 100% 3px, 100% calc(100% - 3px);
  background-repeat: no-repeat;
  background-position: 0 0, 0 3px;
  background-color: var(--green-900);
}
.site-footer h4 { color: var(--gold-400); letter-spacing: .12em; }
.site-footer a:hover { color: var(--gold-300, #E8C97A); }
.footer-logo-text span  { color: #fff; }
.footer-logo-text small { color: rgba(196,150,64,.55); letter-spacing: .08em; }
.social-row a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--green-900);
}
.footer-bottom a:hover { color: var(--gold-400); }
#newsletter-form button[type=submit],
.footer-nl .btn-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--green-900);
  box-shadow: 0 2px 0 var(--gold-700), 0 4px 12px rgba(196,150,64,.25);
}
#newsletter-form button[type=submit]:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
  box-shadow: 0 2px 0 var(--gold-800), 0 6px 20px rgba(196,150,64,.3);
}

/* ================================================================
   UI REFINEMENT PACK v1.0
   Micro-interactions, stagger reveals, polish
   ================================================================ */

/* ── Staggered reveal delays ─────────────────────────────────── */
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.28s}
.reveal-d4{transition-delay:.38s}
.reveal-d5{transition-delay:.48s}

/* Reveal direction variants */
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-left.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal-scale.in{opacity:1;transform:scale(1)}

/* ── Form group focus-within label highlight ─────────────────── */
.form-group:focus-within > label,
.af-group:focus-within > label{color:var(--c-primary)}

/* ── Select — custom chevron arrow ──────────────────────────── */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23706D65' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
}

/* ── Page-head: depth + dot pattern ─────────────────────────── */
.page-head{
  background:linear-gradient(140deg,var(--green-950) 0%,var(--green-900) 55%,var(--green-800) 100%);
  position:relative;overflow:hidden;
}
.page-head::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.6) 100%);
}
.page-head .container{position:relative;z-index:1}
.page-head h1{text-shadow:0 2px 16px rgba(0,0,0,.3)}

/* ── Section divider rule ────────────────────────────────────── */
.section-rule{
  border:none;height:1px;margin:0;
  background:linear-gradient(90deg,transparent,var(--c-border) 18%,var(--c-border) 82%,transparent);
}

/* ── Card hover refinement ───────────────────────────────────── */
.card{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover{box-shadow:var(--el-4);transform:translateY(-3px)}

/* ── Program card ────────────────────────────────────────────── */
.program-card{transition:box-shadow .32s var(--ease),transform .32s var(--ease)}
.program-card:hover{
  box-shadow:0 20px 56px rgba(10,16,13,.13),0 4px 18px rgba(10,16,13,.08);
  transform:translateY(-5px);
}

/* ── Condition pill ──────────────────────────────────────────── */
.condition-pill{transition:all .22s var(--ease)}
.condition-pill:hover{transform:translateY(-2px)}

/* ── Testimonial card ────────────────────────────────────────── */
.testi-card{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.testi-card:hover{box-shadow:var(--el-3);transform:translateY(-3px)}

/* Wider fade masks on testi marquee */
.testi-marquee-wrap::before,.testi-marquee-wrap::after{width:120px}

/* ── How-it-works step hover ─────────────────────────────────── */
.hiw-step{transition:background .22s}
.hiw-step:hover{background:var(--c-primary-25)}

/* ── Impact stat number counter reveal ───────────────────────── */
@keyframes stat-pop{
  0%{opacity:0;transform:translateY(10px) scale(.95)}
  60%{opacity:1;transform:translateY(-2px) scale(1.02)}
  100%{transform:none}
}
.impact-stat.stat-visible .impact-num{
  animation:stat-pop .55s var(--ease-spring) both;
}

/* ── Dashboard stat card hover ───────────────────────────────── */
.pd-stat{
  transition:box-shadow .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.pd-stat:hover{
  box-shadow:var(--el-2);border-color:var(--green-200);transform:translateY(-2px);
}
.pd-stat.highlight:hover{border-color:var(--c-primary)}

/* Dashboard quick-action button */
.pd-quick-btn{
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
.pd-quick-btn:hover{
  border-color:var(--c-primary);background:var(--c-primary-25);
  transform:translateY(-2px);box-shadow:var(--el-2);
}
.pd-quick-btn svg{transition:transform .2s var(--ease-spring)}
.pd-quick-btn:hover svg{transform:scale(1.12)}

/* Dashboard welcome banner — subtle shine */
.pd-welcome{
  position:relative;overflow:hidden;
}
.pd-welcome::after{
  content:'';position:absolute;top:-50%;right:-80px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Auth form polish ────────────────────────────────────────── */
.af-group input:focus,
.af-group select:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(29,80,53,.12);
  background:#fff;
}
.af-btn{
  position:relative;overflow:hidden;
}
.af-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);
  transform:translateX(-100%);transition:transform .55s var(--ease);
}
.af-btn:hover::after{transform:translateX(100%)}

/* ── Button shimmer on hover ─────────────────────────────────── */
.btn-primary,.btn-accent{position:relative;overflow:hidden}
.btn-primary::after,.btn-accent::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-20deg);
  transition:none;pointer-events:none;
}
.btn-primary:hover::after,.btn-accent:hover::after{
  animation:btn-shine .5s var(--ease) forwards;
}
@keyframes btn-shine{
  0%{left:-100%}100%{left:160%}
}

/* ── Button loading state ────────────────────────────────────── */
.btn-loading{pointer-events:none;opacity:.75;cursor:wait}
.btn-loading::before{
  content:'';display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
  margin-right:8px;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Focus ring — more prominent ────────────────────────────── */
:focus-visible{
  outline:2.5px solid var(--c-primary);outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ── Mobile nav refinements ──────────────────────────────────── */
@media(max-width:860px){
  .nav-links{padding-top:76px;gap:0}
  .nav-links a{font-size:.9rem;font-weight:500;border-radius:0}
  .nav-links a:hover,.nav-links a.active{
    background:var(--c-primary-25);color:var(--c-primary);
    border-left:3px solid var(--c-primary);padding-left:calc(var(--sp-3) - 3px);
  }
  .nav-links a::after{display:none}
  /* Overlay blur */
  .nav-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}

/* ── Wiz sidebar mobile ──────────────────────────────────────── */
@media(max-width:760px){
  .wiz-shell{grid-template-columns:1fr}
  .wiz-sidebar{
    display:none;position:static;height:auto;
    border-radius:0;padding:16px 20px;flex-direction:row;flex-wrap:wrap;gap:8px;
  }
}

/* ── Footer newsletter card ──────────────────────────────────── */
.footer-nl{
  border-radius:var(--r-xl);padding:var(--sp-10) var(--sp-10);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  margin-bottom:var(--sp-10);
}
@media(max-width:700px){
  .footer-nl{padding:var(--sp-8) var(--sp-6)}
}

/* ── Back to top button ──────────────────────────────────────── */
.back-to-top{transition:opacity .28s var(--ease),transform .28s var(--ease),background .2s,color .2s,box-shadow .2s}
.back-to-top:hover{box-shadow:var(--el-3);transform:translateY(-2px)}
.back-to-top.visible{transform:none}

/* ── FAQ — smoother open ─────────────────────────────────────── */
.faq-a{transition:max-height .48s cubic-bezier(.4,0,.2,1),padding .42s var(--ease),opacity .38s var(--ease)}
.faq-item.open .faq-a{opacity:1}
.faq-item:not(.open) .faq-a{opacity:0}

/* ── Checkbox / radio selected text highlight ────────────────── */
.radio-row:has(input:checked),.check-row:has(input:checked){
  background:var(--c-primary-25);border-color:var(--green-300);
}
.radio-row:has(input:checked) span,.check-row:has(input:checked) span{
  color:var(--c-primary-dark);font-weight:600;
}

/* ── Patient sidebar nav hover animation ─────────────────────── */
.pd-nav li a{position:relative;overflow:hidden}
.pd-nav li a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c-primary);transform:scaleY(0);transition:transform .2s var(--ease-spring);
  transform-origin:center;
}
.pd-nav li a:hover::before{transform:scaleY(1)}
.pd-nav li a.active::before{transform:scaleY(1)}
/* Hide old border-left since we use ::before */
.pd-nav li a{border-left:none}
.pd-nav li a.active{border-left:none;padding-left:calc(var(--sp-5) + 3px)}

/* ── Slot grid selection pulse ───────────────────────────────── */
.slot.selected{
  animation:slot-select .28s var(--ease-spring);
}
@keyframes slot-select{
  0%{transform:scale(.94)}
  60%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

/* ── Patient badge refinement ────────────────────────────────── */
.pd-badge{letter-spacing:.04em;font-size:.68rem;font-weight:700}
.pd-badge-pending{background:#FEF3C7;color:#92400E;border:1px solid rgba(234,179,8,.2)}
.pd-badge-confirmed{background:#DCFCE7;color:#166534;border:1px solid rgba(34,197,94,.2)}
.pd-badge-completed{background:#EFF6FF;color:#1D4ED8;border:1px solid rgba(59,130,246,.2)}
.pd-badge-cancelled{background:#FEF2F2;color:#991B1B;border:1px solid rgba(239,68,68,.2)}

/* ── Hero slider dots — pill active ─────────────────────────── */
.slide-dot{transition:background .25s,width .28s var(--ease-spring),border-radius .28s}

/* ── Float CTA group spring in ───────────────────────────────── */
.float-cta-group{transition:opacity .36s var(--ease-spring),transform .36s var(--ease-spring)}

/* ── Reduced motion safe ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .reveal-left,.reveal-scale{opacity:1;transform:none}
  .btn-primary::after,.btn-accent::after,.af-btn::after{display:none}
  .pd-stat:hover,.program-card:hover,.card:hover,.testi-card:hover{transform:none}
  @keyframes btn-shine{0%,100%{left:-100%}}
  @keyframes stat-pop{0%,100%{opacity:1;transform:none}}
}

/* ════════════════════════════════════════════════════════════
   UI Polish Pack v2.0 — Contact, Blog, Patient Portal, Footer
   ════════════════════════════════════════════════════════════ */

/* ── Contact page cards ──────────────────────────────────────── */
.ct-info-card{transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.ct-info-card:hover{box-shadow:var(--el-3);transform:translateY(-2px)}

/* ── Blog cards (program-card used in grid) ──────────────────── */
.grid.grid-3 .program-card.reveal{transition:opacity .5s ease,transform .5s ease,box-shadow .22s var(--ease)}
.grid.grid-3 .program-card:hover{transform:translateY(-4px);box-shadow:var(--el-4)}
/* Blog tags cleaner */
.chip{transition:background .15s,color .15s,box-shadow .15s}
.chip:hover{background:var(--c-primary-25);color:var(--c-primary)}
.chip.active{background:var(--c-primary);color:#fff;box-shadow:0 2px 8px rgba(29,80,53,.25)}

/* ── Patient portal page-header strip ────────────────────────── */
.pd-page-h{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-7);
  margin-bottom:var(--sp-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.pd-page-h h1{margin:0}
.pd-page-h p{margin:0}

/* ── Patient appointment card polish ──────────────────────────── */
.pd-appt-card{
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s;
}
.pd-appt-card:hover{
  box-shadow:var(--el-3);
  transform:translateY(-2px);
}
.pd-appt-card.upcoming{border-left:3px solid var(--c-primary);border-left-color:var(--c-primary)}

/* ── Report card polish ───────────────────────────────────────── */
.rpt-card{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.rpt-card:hover{box-shadow:var(--el-3);transform:translateY(-2px)}

/* ── Vitals / lab metric hover ───────────────────────────────── */
.lab-metric{transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s}
.lab-metric:hover{box-shadow:var(--el-2);transform:translateY(-2px);border-color:var(--c-primary-light)}
.vt-section{transition:box-shadow .18s}
.vt-section:hover{box-shadow:var(--el-1)}

/* ── Profile card polish ─────────────────────────────────────── */
.prf-card{transition:box-shadow .18s}
.prf-card:hover{box-shadow:var(--el-2)}

/* ── Plan hero card subtle overlay ───────────────────────────── */
.plan-hero{position:relative;overflow:hidden}
.plan-hero::after{
  content:'';position:absolute;top:-40px;right:-40px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
  pointer-events:none;
}

/* ── Patient portal empty state helper ───────────────────────── */
.pd-empty{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);
  padding:var(--sp-14);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
}
.pd-empty-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--c-primary-25);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-primary);
}
.pd-empty h3{color:var(--c-text);font-family:var(--font-display);font-weight:700;font-size:var(--t-base)}
.pd-empty p{color:var(--c-muted);font-size:var(--t-sm);max-width:340px}

/* ── Footer newsletter strip mobile ──────────────────────────── */
@media(max-width:640px){
  #newsletter-form>div{flex-direction:column;gap:var(--sp-3)}
  #newsletter-form input[type=email]{min-width:0;width:100%}
  #newsletter-form input[type=number]{width:100%}
  #newsletter-form button[type=submit]{width:100%}
}

/* ── Pagination polish ───────────────────────────────────────── */
.pagination{display:flex;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-10);flex-wrap:wrap}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:600;text-decoration:none;
  border:1px solid var(--c-border);
  color:var(--c-text2);background:var(--c-card);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.pagination a:hover{background:var(--c-primary-25);color:var(--c-primary);border-color:var(--c-primary-light)}
.pagination span.active,.pagination .active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);box-shadow:0 2px 8px rgba(29,80,53,.3)}

/* ── Contact form section label focus ───────────────────────── */
.ct-form-card .form-group:focus-within label{color:var(--c-primary)}

/* ── Page-head subtitle ──────────────────────────────────────── */
.page-head p{color:rgba(255,255,255,.55);font-size:var(--t-sm);margin-top:var(--sp-2);line-height:1.65;max-width:560px}

/* ── Programs grid stagger hover border accent ───────────────── */
.program-card:hover{border-color:var(--c-primary-light)}

/* ── Footer links hover underline ───────────────────────────── */
.footer-grid a{position:relative;display:inline-block}
.footer-grid a::after{
  content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;
  background:rgba(255,255,255,.4);transition:width .2s var(--ease);
}
.footer-grid a:hover::after{width:100%}

/* ── Announcement bar micro-polish ───────────────────────────── */
.announcement-bar{font-size:var(--t-xs);letter-spacing:.01em}

/* ── Section head eyebrow-line utility ───────────────────────── */
.eyebrow-line{
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-primary);
  margin-bottom:var(--sp-3);display:flex;align-items:center;gap:10px;
}
.eyebrow-line::before{content:'';width:28px;height:1.5px;background:var(--c-primary);flex-shrink:0}

/* ── About credentials grid card hover ───────────────────────── */
.ab-cred-grid .reveal:hover{
  box-shadow:var(--el-3);
  transform:translateY(-3px);
}

/* ── How it works step card hover ───────────────────────────── */
.hiw-step{transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s}
.hiw-step:hover{background:var(--c-primary-25);transform:translateY(-2px);box-shadow:var(--el-2)}

/* ── Webinar / gallery card hover ───────────────────────────── */
.gal-card,.webinar-card{transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.gal-card:hover,.webinar-card:hover{box-shadow:var(--el-3);transform:translateY(-3px)}

/* ── Conditions grid card hover ─────────────────────────────── */
.cond-card{transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s}
.cond-card:hover{box-shadow:var(--el-3);transform:translateY(-3px);border-color:var(--c-primary-light)}

/* ── Scroll progress bar colour ─────────────────────────────── */
#scroll-progress{background:linear-gradient(to right,var(--c-primary),var(--green-400))}

/* ── Table row transitions ───────────────────────────────────── */
.vt-table tr{transition:background .15s}

/* ── Reduced motion v2 additions ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .ct-info-card:hover,.rpt-card:hover,.lab-metric:hover,
  .prf-card:hover,.pd-appt-card:hover{transform:none}
  .footer-grid a::after{display:none}
}

/* ================================================================
   Enterprise Polish Layer | Corporate UI Pass 01
   Global refinements for a calmer, more premium public experience.
   ================================================================ */
:root{
  --corp-ink:#101820;
  --corp-ink-2:#24313a;
  --corp-muted:#66727a;
  --corp-line:#dfe5e8;
  --corp-surface:#ffffff;
  --corp-surface-2:#f6f8f7;
  --corp-brand:#174b36;
  --corp-brand-2:#23664a;
  --corp-accent:#b9892f;
  --corp-focus:rgba(35,102,74,.18);
  --corp-shadow:0 18px 50px rgba(16,24,32,.08),0 2px 10px rgba(16,24,32,.04);
  --corp-shadow-sm:0 8px 22px rgba(16,24,32,.06);
  --corp-radius:12px;
}

body{
  background:
    linear-gradient(180deg,#f8faf9 0%,#f4f7f5 42%,#f6f3ee 100%);
  color:var(--corp-ink);
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(23,75,54,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(23,75,54,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
}

.container{max-width:1240px}
section{position:relative}

h1,h2,h3,h4{
  color:var(--corp-ink);
  letter-spacing:0;
}

p,.lead{color:var(--corp-muted)}

.site-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(16,24,32,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.site-header::before{
  height:3px;
  background:linear-gradient(90deg,var(--corp-brand) 0%,var(--corp-brand-2) 58%,var(--corp-accent) 100%);
}

.nav{height:76px}

.logo-img{
  width:42px;
  height:42px;
  background:#fff;
  border:1px solid rgba(16,24,32,.08);
  box-shadow:var(--corp-shadow-sm);
}

.logo-name{
  color:var(--corp-ink);
  font-size:1.03rem;
  letter-spacing:0;
}

.logo-sub{
  color:var(--corp-muted);
  letter-spacing:.08em;
}

.nav-links{
  padding:5px;
  border:1px solid rgba(16,24,32,.07);
  border-radius:999px;
  background:rgba(246,248,247,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
}

.nav-links a{
  padding:8px 12px;
  border-radius:999px;
  color:#536069;
  font-size:.8rem;
  font-weight:600;
}

.nav-links a::after{display:none}

.nav-links a:hover,
.nav-links a.active{
  color:var(--corp-brand);
  background:#fff;
  box-shadow:0 1px 8px rgba(16,24,32,.07);
}

.btn{
  border-radius:10px;
  text-transform:none;
  letter-spacing:0;
  font-size:.86rem;
  font-weight:750;
  min-height:42px;
  box-shadow:none;
}

.btn-sm{
  min-height:36px;
  padding:8px 15px;
  font-size:.78rem;
  letter-spacing:0;
}

.btn-primary{
  background:var(--corp-brand);
  border-color:var(--corp-brand);
  box-shadow:0 10px 22px rgba(23,75,54,.18);
}

.btn-primary:hover{
  background:#0f3828;
  border-color:#0f3828;
  box-shadow:0 14px 28px rgba(23,75,54,.24);
}

.btn-outline{
  background:#fff;
  color:var(--corp-brand);
  border-color:rgba(23,75,54,.22);
}

.btn-outline:hover{
  background:#f2f7f4;
  color:#0f3828;
  border-color:rgba(23,75,54,.38);
  box-shadow:0 10px 22px rgba(16,24,32,.08);
}

.hero{
  background:transparent;
  padding:72px 0 56px;
}

.hero-grid{
  gap:clamp(36px,5vw,76px);
}

.hero h1{
  letter-spacing:0;
  color:var(--corp-ink);
}

.hero h1 .ital,
h2 .ital{
  color:var(--corp-brand);
}

.cycling-badge,
.hero-eyebrow-pill,
.eyebrow,
.eyebrow-line{
  color:var(--corp-brand);
  letter-spacing:.12em;
}

.hero-cred-tag,
.card,
.program-card,
.testi-card,
.tool-card,
.gal-card,
.webinar-card,
.ct-info-card,
.ct-form-card,
.pd-stat,
.pd-section,
.prf-card,
.rpt-card,
.vt-section{
  border-color:rgba(16,24,32,.08) !important;
  border-radius:var(--corp-radius) !important;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 28px rgba(16,24,32,.05);
}

.card:hover,
.program-card:hover,
.testi-card:hover,
.tool-card:hover,
.gal-card:hover,
.webinar-card:hover,
.ct-info-card:hover,
.pd-stat:hover,
.prf-card:hover,
.rpt-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--corp-shadow);
  border-color:rgba(23,75,54,.2) !important;
}

.hero-doc-card,
.hero-image-frame,
.hero-results-card{
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 28px 70px rgba(16,24,32,.16),0 6px 20px rgba(16,24,32,.08);
}

.hero-doc-overlay{
  background:linear-gradient(to top,rgba(11,20,16,.88),rgba(11,20,16,.18) 62%,transparent);
}

.hero-metrics{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,24,32,.08);
  border-radius:var(--corp-radius);
  padding:18px 22px;
}

.hm-num{color:var(--corp-brand)}

.trust-bar{
  background:#10251c;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.section-head{
  max-width:760px;
}

.section-head h2{
  letter-spacing:0;
}

.page-head{
  background:#10251c;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.page-head::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--corp-accent),transparent);
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
textarea,
select{
  border-radius:10px !important;
  border:1px solid var(--corp-line) !important;
  background:#fff !important;
  color:var(--corp-ink) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--corp-brand-2) !important;
  box-shadow:0 0 0 4px var(--corp-focus) !important;
}

label{
  color:var(--corp-ink-2);
}

.alert{
  border-radius:10px;
  box-shadow:var(--corp-shadow-sm);
}

.float-btn,
.back-to-top{
  box-shadow:0 16px 34px rgba(16,24,32,.16);
}

.cookie-banner,
.qe-card{
  border:1px solid rgba(16,24,32,.08);
  box-shadow:var(--corp-shadow);
}

.site-footer{
  background:
    linear-gradient(180deg,#10251c 0%,#09130f 100%);
  border-top:1px solid rgba(255,255,255,.08);
}

.site-footer::before{
  opacity:1;
  background:linear-gradient(90deg,var(--corp-brand) 0%,var(--corp-brand-2) 58%,var(--corp-accent) 100%);
}

.footer-grid{
  gap:clamp(28px,4vw,54px);
}

.footer-brand p,
.site-footer p{
  color:rgba(255,255,255,.58) !important;
}

.site-footer h4{
  color:#d8b56d;
}

.footer-bottom{
  border-top-color:rgba(255,255,255,.08);
}

@media(max-width:1120px){
  .nav-links{
    border-radius:18px;
    padding:80px 22px 24px;
    background:#fff;
  }
  .nav-links a{
    border-radius:10px;
  }
}

@media(max-width:760px){
  .hero{
    padding:40px 0 34px;
  }
  .hero-metrics{
    padding:16px;
    gap:16px;
  }
  .btn{
    width:auto;
  }
  .hero-actions .btn,
  .tcc-actions .btn{
    flex:1 1 180px;
  }
}