/* ═══════════════════════════════════════════════════
   OrthoSportsRobotics — style.css v3
   Palette: Bright Teal / Aqua — light, readable, premium
   Primary: #1A9E9C  Navy: #1B3D5F  Accent: #4ECDC4
═══════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --t:   #1A9E9C;   /* primary teal           */
  --tdk: #157E7C;   /* teal hover/dark        */
  --tlt: #E8F8F8;   /* teal wash bg           */
  --n:   #1B3D5F;   /* navy                   */
  --ndk: #142E47;   /* dark navy footer       */
  --sky: #4ECDC4;   /* bright sky accent      */
  --slt: #C8F0EE;   /* sky light              */
  --w:   #FFFFFF;
  --gbg: #EEF7F7;   /* section bg teal tint   */
  --tx:  #1C2E35;   /* body text              */
  --txm: #456070;   /* muted text             */
  --br:  #B8DEE0;   /* border                 */

  --fd: 'Playfair Display',Georgia,serif;
  --fb: 'Inter',system-ui,sans-serif;
  --fm: 'Space Mono',monospace;

  --r:  8px;
  --rl: 16px;
  --rx: 24px;

  --sh0: 0 1px 4px rgba(27,61,95,.07);
  --sh1: 0 4px 16px rgba(27,61,95,.10);
  --sh2: 0 12px 40px rgba(27,61,95,.15);

  --mw: 1200px;
  --nh: 68px;   /* nav height */
  --sp: 88px;   /* section padding */
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);color:var(--tx);background:var(--w);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
address{font-style:normal}
.container{max-width:var(--mw);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,h5{font-family:var(--fd);line-height:1.2;font-weight:600;color:var(--n)}

/* ── BUTTONS ──────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:var(--r);
  font-family:var(--fb);font-weight:600;font-size:.95rem;
  cursor:pointer;border:2px solid transparent;
  transition:all .2s;white-space:nowrap;line-height:1;text-decoration:none
}
.btn--lg{padding:14px 30px;font-size:1rem}
.btn--sm{padding:8px 16px;font-size:.875rem}
.btn--primary{background:var(--t);color:#fff;border-color:var(--t)}
.btn--primary:hover{background:var(--tdk);border-color:var(--tdk);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,158,156,.3)}
.btn--outline{background:transparent;color:var(--t);border-color:var(--t)}
.btn--outline:hover{background:var(--t);color:#fff}
.btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.btn--ghost:hover{background:rgba(255,255,255,.22)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--outline-light:hover{background:#fff;color:var(--t)}
.btn--whatsapp{background:#25D366;color:#fff;border-color:#25D366}
.btn--whatsapp:hover{background:#1DAE58;border-color:#1DAE58;transform:translateY(-1px)}

/* ══════════════════════════════════════════════
   NAVIGATION — Mobile-safe architecture
   Key principle: brand + toggle share one flex row.
   Nav menu and CTA are separate, hidden on mobile.
══════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nh);
  background:rgba(27,61,95,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(78,205,196,.15);
  transition:box-shadow .3s
}
.nav.scrolled{box-shadow:0 4px 24px rgba(27,61,95,.45)}

.nav__inner{
  max-width:var(--mw);margin:0 auto;
  padding:0 16px;               /* tighter padding on mobile */
  height:100%;
  display:flex;
  align-items:center;
  gap:0;                        /* no gap — spacing handled per child */
}

/* ── Brand block ── */
.nav__brand{
  display:flex;align-items:center;gap:7px;
  color:#fff;flex-shrink:0;
  /* NO margin-right here — we want toggle flush right */
  min-width:0;
}
.nav__badge{
  font-family:var(--fm);font-size:.72rem;font-weight:700;
  background:var(--t);color:#fff;
  padding:3px 7px;border-radius:4px;
  letter-spacing:.08em;flex-shrink:0;
  white-space:nowrap;
}
.nav__name{
  font-family:var(--fd);font-weight:600;font-size:.95rem;
  color:#fff;
  /* On desktop this shows. Mobile breakpoints hide it below */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Desktop menu (hidden on mobile) ── */
.nav__menu{
  display:flex;align-items:center;gap:2px;
  margin-left:auto;             /* push to centre-right */
  flex-shrink:0;
}
.nav__menu>li>a,
.nav__menu>li>button{
  padding:8px 10px;color:rgba(255,255,255,.85);font-size:.82rem;
  font-weight:500;border-radius:6px;background:none;border:none;
  cursor:pointer;font-family:var(--fb);
  transition:color .15s,background .15s;white-space:nowrap;
}
.nav__menu>li>a:hover,
.nav__menu>li>button:hover{color:#fff;background:rgba(255,255,255,.1)}

/* Dropdown */
.has-sub{position:relative}
.nav__sub{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#fff;border-radius:var(--r);
  box-shadow:var(--sh2);min-width:210px;padding:8px;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  border:1px solid var(--br);
}
.has-sub:hover .nav__sub,
.has-sub:focus-within .nav__sub{
  opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)
}
.nav__sub li a{
  display:block;padding:10px 14px;color:var(--tx);font-size:.85rem;
  border-radius:6px;transition:background .12s,color .12s;
}
.nav__sub li a:hover{background:var(--gbg);color:var(--t)}

/* ── Desktop CTA (hidden on mobile) ── */
.nav__cta{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;margin-left:12px;
}

/* ── Hamburger (hidden on desktop) ── */
.nav__toggle{
  display:none;           /* HIDDEN desktop */
  flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:10px 8px;
  margin-left:auto;       /* CRITICAL: pushes to right edge */
  flex-shrink:0;
}
.nav__toggle span{
  display:block;width:22px;height:2px;
  background:#fff;border-radius:2px;transition:all .3s;
}

/* ── TICKER ───────────────────────────────────── */
.ticker{
  background:var(--t);color:#fff;
  margin-top:var(--nh);overflow:hidden;
  padding:9px 0;border-bottom:2px solid var(--tdk);
}
.ticker__track{
  display:flex;gap:44px;white-space:nowrap;
  font-family:var(--fm);font-size:.74rem;letter-spacing:.06em;
  animation:tick 44s linear infinite;will-change:transform;
}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  background:linear-gradient(145deg,#1B3D5F 0%,#176e6c 52%,#1A9E9C 100%);
  display:flex;align-items:center;
  position:relative;
  isolation:auto;  /* do NOT create stacking context that traps fixed children */
  padding:calc(var(--nh) + 56px) 0 80px;
}
.hero__overlay{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 40%,rgba(78,205,196,.12) 0%,transparent 65%);
  pointer-events:none;
}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(78,205,196,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,205,196,.05) 1px,transparent 1px);
  background-size:56px 56px;pointer-events:none;
}
.hero__inner{
  display:grid;grid-template-columns:1fr 360px;
  gap:56px;align-items:center;position:relative;z-index:1;
}
.hero__eyebrow{
  font-family:var(--fm);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:#7EECEA;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.hero__eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--sky);flex-shrink:0}
.hero__headline{
  font-size:clamp(1.9rem,4vw,3.2rem);font-weight:700;
  color:#fff;line-height:1.1;margin-bottom:12px;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.hero__headline em{font-style:normal;color:var(--sky)}
.hero__name{
  font-family:var(--fb);font-size:1rem;
  color:rgba(255,255,255,.9);margin-bottom:6px;letter-spacing:.03em;
  font-weight:500;
}
.hero__quals{
  font-family:var(--fm);font-size:.76rem;
  color:#C8F5F4;margin-bottom:24px;line-height:1.9;letter-spacing:.02em;
  font-weight:400;
}
.hero__sub{
  font-size:1rem;color:rgba(255,255,255,.92);
  max-width:480px;margin-bottom:32px;line-height:1.7;
}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.hero__creds{display:flex;flex-wrap:wrap;gap:7px}
.hcred{
  padding:5px 12px;border-radius:20px;
  background:rgba(78,205,196,.22);border:1px solid rgba(78,205,196,.5);
  color:#fff;font-size:.74rem;font-family:var(--fm);letter-spacing:.04em;
  font-weight:600;
}


/* Hero specialties line */
.hero__specialties{
  font-size:.9rem;color:rgba(255,255,255,.92);
  margin-bottom:10px;line-height:1.7;font-weight:500;
  letter-spacing:.01em;
}
.hero__sep{color:rgba(255,255,255,.4);margin:0 4px}

/* Trust panel */
.hero__panel{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--rx);padding:28px 20px;
  backdrop-filter:blur(10px);
}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ti{
  padding:14px 10px;border-radius:var(--r);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.ti__v{font-family:var(--fm);font-size:.92rem;font-weight:700;color:#7EECEA;display:block;margin-bottom:3px;letter-spacing:.04em}
.ti__l{font-size:.7rem;color:rgba(255,255,255,.85);line-height:1.3;font-weight:500}

.hero__scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:rgba(255,255,255,.3);font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;
}
.scroll-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,.28),transparent);
  animation:sp 2s ease-in-out infinite;
}
@keyframes sp{0%,100%{opacity:.4}50%{opacity:1}}

/* ══════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════ */
.sec{padding:var(--sp) 0}
.sec--white{background:var(--w)}
.sec--grey{background:var(--gbg)}
.sec--navy{background:var(--n)}
.sec--teal-grad{background:linear-gradient(140deg,var(--n) 0%,var(--t) 100%)}
.sec--teal-dk{background:linear-gradient(135deg,#0F5F5E 0%,#1A7F7D 100%)}

.sec__hd{text-align:center;max-width:680px;margin:0 auto 52px}

.eyebrow{
  font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t);margin-bottom:10px;display:block;
}
.eyebrow--lt{color:var(--sky)}

h2{font-size:clamp(1.65rem,3vw,2.4rem);color:var(--n);margin-bottom:16px}
.h--lt{color:#fff}
.h-accent{color:var(--t);font-size:.82em}

.lead{font-size:1.02rem;color:var(--txm);line-height:1.7}
.lead--lt{color:rgba(255,255,255,.74);line-height:1.7}

/* ══════════════════════════════════════════════
   GRIDS & CARDS
══════════════════════════════════════════════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Generic card */
.card{
  padding:28px 22px;border-radius:var(--rl);
  background:var(--w);border:1px solid var(--br);
  transition:box-shadow .25s,border-color .25s,transform .25s;
}
.card:hover{box-shadow:var(--sh2);border-color:var(--t);transform:translateY(-3px)}
.card__icon{
  width:48px;height:48px;border-radius:var(--r);
  background:var(--tlt);color:var(--t);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.card h3{font-size:1.02rem;margin-bottom:9px;color:var(--n)}
.card p{font-size:.88rem;color:var(--txm);line-height:1.65}

/* Why cards */
.why-card{
  padding:28px 22px;border-radius:var(--rl);
  background:var(--w);border:1px solid var(--br);
  transition:box-shadow .25s,border-color .25s,transform .25s;
}
.why-card:hover{box-shadow:var(--sh2);border-color:var(--t);transform:translateY(-3px)}
.why-num{
  font-family:var(--fm);font-size:1.8rem;font-weight:700;
  color:var(--gbg);-webkit-text-stroke:1.5px var(--t);
  line-height:1;margin-bottom:12px;
}
.why-card h3{font-size:1rem;margin-bottom:8px;color:var(--n)}
.why-card p{font-size:.87rem;color:var(--txm);line-height:1.65}

/* Sport cards */
.sport-card{
  padding:26px 22px;border-radius:var(--rl);
  background:var(--w);border:1px solid var(--br);
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.sport-card:hover{box-shadow:var(--sh1);border-color:var(--t);transform:translateY(-2px)}
.sport-card h3{font-size:1rem;margin-bottom:8px;color:var(--n)}
.sport-card p{font-size:.87rem;color:var(--txm);line-height:1.65}

/* Centres of excellence */
.centre-card{
  border-radius:var(--rl);overflow:hidden;border:1px solid var(--br);
  background:var(--w);transition:box-shadow .25s,transform .25s,border-color .25s;
  display:flex;flex-direction:column;
}
.centre-card:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:var(--t)}
.centre-card__top{
  background:linear-gradient(135deg,var(--n) 0%,var(--t) 100%);
  padding:24px 20px 18px;
}
.centre-icon{
  width:40px;height:40px;border-radius:var(--r);
  background:rgba(255,255,255,.12);display:flex;align-items:center;
  justify-content:center;color:var(--slt);margin-bottom:12px;
}
.centre-card__top h3{font-size:.93rem;color:#fff}
.centre-card__body{padding:18px 20px;flex:1;display:flex;flex-direction:column}
.centre-card__body p{font-size:.85rem;color:var(--txm);line-height:1.6;flex:1;margin-bottom:14px}
.learn-more{
  font-size:.8rem;font-weight:600;color:var(--t);
  display:inline-flex;align-items:center;gap:5px;transition:gap .2s;
}
.learn-more:hover{gap:9px}

/* ══════════════════════════════════════════════
   ROBOTIC SECTION
══════════════════════════════════════════════ */
.robotic-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
}
.robotic-feats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;
}
.rfeat{
  padding:18px 16px;border-radius:var(--rl);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
.rfeat h4{font-size:.88rem;color:#fff;margin-bottom:5px;font-family:var(--fb);font-weight:600}
.rfeat p{font-size:.81rem;color:rgba(255,255,255,.62);line-height:1.55}
.robotic-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rx);padding:32px 28px;
}
.tech-badge{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px;border-radius:var(--rl);
  background:rgba(255,255,255,.07);border:1px solid rgba(78,205,196,.22);
}
.tech-badge__logo{
  font-family:var(--fm);font-size:1.2rem;font-weight:700;
  color:var(--sky);flex-shrink:0;width:52px;padding-top:3px;
}
.tech-badge strong{display:block;color:#fff;font-size:.9rem;margin-bottom:5px}
.tech-badge p{font-size:.82rem;color:rgba(255,255,255,.58);line-height:1.55}
.robotic-steps{display:flex;flex-direction:column;gap:0}
.rstep{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.rstep:last-child{border-bottom:none}
.rstep__n{
  font-family:var(--fm);font-size:.7rem;color:var(--sky);
  font-weight:700;flex-shrink:0;padding-top:3px;width:20px;
}
.rstep strong{display:block;color:#fff;font-size:.88rem;margin-bottom:2px}
.rstep p{font-size:.8rem;color:rgba(255,255,255,.55)}

/* ══════════════════════════════════════════════
   PHILOSOPHY
══════════════════════════════════════════════ */
.philo-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.philo-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:18px 0 0}
.philo-list li{
  padding-left:22px;position:relative;
  color:rgba(255,255,255,.8);font-size:.93rem;
}
.philo-list li::before{content:'✓';position:absolute;left:0;color:var(--sky);font-weight:700}
.philo-steps{display:flex;flex-direction:column}
.ps{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;border-left:3px solid rgba(255,255,255,.15);
}
.ps--on{border-left-color:var(--sky)}
.ps--last{border-left-color:rgba(78,205,196,.35)}
.ps__n{font-family:var(--fm);font-size:.7rem;color:var(--sky);font-weight:700;flex-shrink:0}
.ps span:last-child{color:rgba(255,255,255,.8);font-size:.92rem}

/* ══════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════ */
.timeline{position:relative;max-width:780px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--sky),var(--t));
}
.tl-item{
  display:grid;grid-template-columns:1fr 44px 1fr;
  margin-bottom:0;position:relative;
}
.tl-content--right{grid-column:1;text-align:right;padding:18px 36px 36px 0}
.tl-dot{grid-column:2;display:flex;align-items:center;justify-content:center;padding:8px 0;z-index:1}
.tl-empty{grid-column:3;padding:18px 0 36px}
.tl-item:nth-child(even) .tl-empty{grid-column:1;padding:18px 0 36px}
.tl-item:nth-child(even) .tl-dot{grid-column:2}
.tl-item:nth-child(even) .tl-content--left{grid-column:3;text-align:left;padding:18px 0 36px 36px}
.tl-dot__inner{
  width:14px;height:14px;border-radius:50%;
  background:var(--t);border:3px solid var(--n);
  box-shadow:0 0 0 3px var(--t);
}
.tl-dot--last .tl-dot__inner{background:var(--sky);box-shadow:0 0 0 3px var(--sky)}
.tl-year{font-family:var(--fm);font-size:.7rem;color:var(--sky);letter-spacing:.1em;display:block;margin-bottom:4px}
.tl-content--right h3,.tl-content--left h3{font-size:.97rem;color:#fff;margin-bottom:6px}
.tl-content--right p,.tl-content--left p{font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.6}

/* ══════════════════════════════════════════════
   SAI BADGE
══════════════════════════════════════════════ */
.sai-bar{
  background:linear-gradient(135deg,var(--n),var(--t));
  border-radius:var(--rl);padding:22px 30px;
  color:rgba(255,255,255,.85);margin-top:28px;font-size:.92rem;line-height:1.6;
}
.sai-bar strong{color:#fff}

/* ══════════════════════════════════════════════
   ARTHROSCOPY / TWO COL
══════════════════════════════════════════════ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two-col p{margin-bottom:14px;color:var(--txm);line-height:1.7;font-size:.93rem}
.two-col h2{margin-bottom:16px}
.arthro-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.arthro-cols strong{display:block;color:var(--n);font-size:.93rem;margin-bottom:8px}
.dot-list{display:flex;flex-direction:column;gap:6px}
.dot-list li{font-size:.86rem;color:var(--txm);padding-left:14px;position:relative}
.dot-list li::before{content:'—';position:absolute;left:0;color:var(--t);font-size:.8rem}
.compare-box{background:var(--w);border-radius:var(--rl);border:1px solid var(--br);padding:28px;box-shadow:var(--sh1)}
.compare-box h3{font-size:1rem;margin-bottom:18px;color:var(--n)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-col{padding:14px;border-radius:var(--r)}
.compare-col--bad{background:#FFF5F5;border:1px solid #FED7D7}
.compare-col--bad strong{color:#C53030;font-size:.82rem;display:block;margin-bottom:9px}
.compare-col--good{background:var(--tlt);border:1px solid rgba(26,158,156,.2)}
.compare-col--good strong{color:var(--t);font-size:.82rem;display:block;margin-bottom:9px}
.compare-col ul{display:flex;flex-direction:column;gap:5px}
.compare-col li{font-size:.8rem;color:var(--txm)}

/* Trauma */
.trauma-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.trauma-cols strong{display:block;color:var(--n);font-size:.93rem;margin-bottom:8px}
.atls-box{
  background:var(--w);border-radius:var(--rl);border:1px solid var(--br);
  padding:26px;box-shadow:var(--sh0);
}
.atls-box__icon{
  width:52px;height:52px;background:var(--tlt);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--t);margin-bottom:14px;
}
.atls-box h3{font-size:1rem;margin-bottom:7px;color:var(--n)}
.atls-box p{font-size:.86rem;color:var(--txm);line-height:1.6}

/* ══════════════════════════════════════════════
   DOCTOR PROFILE
══════════════════════════════════════════════ */
.doctor-layout{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.doc-portrait{border-radius:var(--rx);overflow:hidden;border:3px solid var(--br);box-shadow:var(--sh2)}
.doc-portrait__img{
  aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--n) 0%,var(--t) 100%);
  display:flex;align-items:flex-end;padding:22px;
}
.doc-portrait__img span{color:#fff;font-family:var(--fd);font-size:.95rem;font-weight:600}
.doc-badges{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 0}
.dbadge{
  padding:4px 11px;border-radius:20px;
  background:var(--tlt);color:var(--t);
  font-size:.72rem;font-weight:600;border:1px solid rgba(26,158,156,.2);
}
.doc-lead{font-size:1.05rem;color:var(--txm);margin-bottom:16px;line-height:1.7}
.doctor-right p{margin-bottom:13px;color:var(--txm);line-height:1.7;font-size:.92rem}
.doc-sub{font-size:1.2rem;margin:28px 0 16px;color:var(--n)}
.edu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.edu-item{
  padding:12px 14px;border-radius:var(--r);
  background:var(--gbg);border:1px solid var(--br);
  display:flex;flex-direction:column;gap:2px;
}
.eq{font-weight:600;color:var(--t);font-size:.85rem}
.ei{font-size:.8rem;color:var(--txm)}

/* ══════════════════════════════════════════════
   RESEARCH
══════════════════════════════════════════════ */
.pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px}
.pub-card{
  padding:26px 22px;border-radius:var(--rl);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  transition:background .2s,border-color .2s;
}
.pub-card:hover{background:rgba(255,255,255,.1);border-color:rgba(78,205,196,.4)}
.pub-card--feat{background:rgba(78,205,196,.1);border-color:rgba(78,205,196,.35)}
.pub-j{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:var(--sky);margin-bottom:9px;text-transform:uppercase}
.pub-card h3{font-size:.93rem;color:#fff;margin-bottom:9px}
.pub-card p{font-size:.83rem;color:rgba(255,255,255,.58);line-height:1.6}
.acad-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid rgba(255,255,255,.1);padding-top:36px}
.acad-item strong{display:block;color:var(--sky);font-size:.82rem;margin-bottom:7px;font-family:var(--fm);letter-spacing:.05em}
.acad-item p{font-size:.82rem;color:rgba(255,255,255,.58);line-height:1.6}

/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.testi{
  padding:30px;border-radius:var(--rl);
  background:var(--w);border:1px solid var(--br);box-shadow:var(--sh0);
}
.testi__q{font-size:2.8rem;line-height:1;color:var(--t);font-family:var(--fd);opacity:.35;margin-bottom:10px}
.testi p{font-size:.92rem;color:var(--txm);line-height:1.7;font-style:italic;margin-bottom:18px}
.testi__name{font-size:.8rem;color:var(--txm);font-weight:600;font-style:normal}
.testi__tag{
  display:inline-block;margin-top:7px;padding:3px 10px;
  background:var(--tlt);color:var(--t);border-radius:20px;
  font-size:.72rem;font-weight:600;font-style:normal;
}

/* ══════════════════════════════════════════════
   PATIENT EDUCATION
══════════════════════════════════════════════ */
.edu-guide{border:1px solid var(--br);border-radius:var(--rl);margin-bottom:18px;overflow:hidden}
.edu-head{padding:16px 26px;background:var(--gbg);border-bottom:1px solid var(--br);font-size:1.05rem;color:var(--n);font-family:var(--fd);font-weight:600}
.edu-body{padding:24px 26px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.edu-s h4{font-size:.88rem;color:var(--t);margin-bottom:7px;font-family:var(--fb);font-weight:600}
.edu-s p{font-size:.86rem;color:var(--txm);line-height:1.7}
.edu-list{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.edu-list li{font-size:.84rem;color:var(--txm);padding-left:14px;position:relative}
.edu-list li::before{content:'•';position:absolute;left:4px;color:var(--t)}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.faq-grp h3{font-size:1.1rem;color:var(--n);margin-bottom:16px;padding-bottom:9px;border-bottom:2px solid var(--t)}
.faq{border-bottom:1px solid var(--br)}
.faq summary{
  padding:14px 0;font-weight:600;font-size:.9rem;color:var(--n);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--t);font-size:1.35rem;font-weight:300;flex-shrink:0}
.faq[open] summary::after{content:'−'}
.faq p{padding:0 0 16px;font-size:.86rem;color:var(--txm);line-height:1.7}

/* ══════════════════════════════════════════════
   JOURNEY
══════════════════════════════════════════════ */
.journey-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--br);border-radius:var(--rx);overflow:hidden;
}
.js{padding:28px 22px;border-right:1px solid var(--br);border-bottom:1px solid var(--br);transition:background .2s}
.js:hover{background:var(--tlt)}
.js:nth-child(3n){border-right:none}
.js:nth-last-child(-n+3){border-bottom:none}
.js__n{font-family:var(--fm);font-size:2rem;font-weight:700;color:var(--gbg);-webkit-text-stroke:1.5px var(--t);line-height:1;margin-bottom:12px}
.js h3{font-size:.97rem;color:var(--n);margin-bottom:7px}
.js p{font-size:.84rem;color:var(--txm);line-height:1.6}

/* ══════════════════════════════════════════════
   LOCATIONS / CONTACT
══════════════════════════════════════════════ */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.loc-card{padding:28px 24px;border-radius:var(--rl);border:1px solid var(--br);background:var(--w);box-shadow:var(--sh0)}
.loc-card__hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.loc-card h3{font-size:1.1rem;color:var(--n)}
.loc-tag{padding:3px 9px;background:var(--tlt);color:var(--t);border-radius:20px;font-size:.7rem;font-weight:600}
.loc-card address{font-size:.87rem;color:var(--txm);line-height:1.7;margin-bottom:16px}
.loc-map{margin-bottom:16px}
.loc-map iframe{width:100%;height:190px;border:0;border-radius:var(--r);display:block;margin-bottom:7px}
.directions-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.83rem;font-weight:600;color:var(--t);
  border-bottom:1px solid transparent;transition:border-color .2s;padding:2px 0;
}
.directions-link:hover{border-color:var(--t)}
.loc-actions{display:flex;gap:9px;flex-wrap:wrap}
.loc-card--contact{background:var(--gbg)}
.contact-methods{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.cm{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--tx);font-weight:500;transition:color .2s}
.cm:hover{color:var(--t)}
.socials{display:flex;gap:9px}
.socials a{
  width:36px;height:36px;border-radius:var(--r);
  background:var(--w);border:1px solid var(--br);
  display:flex;align-items:center;justify-content:center;
  color:var(--txm);transition:all .2s;
}
.socials a:hover{background:var(--t);color:#fff;border-color:var(--t)}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer{background:var(--ndk);color:rgba(255,255,255,.7);padding:60px 0 0}
.footer__top{display:grid;grid-template-columns:280px 1fr;gap:64px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer__logo{display:flex;align-items:center;gap:9px;color:#fff;margin-bottom:13px}
.flogo-mark{font-family:var(--fm);font-size:.72rem;font-weight:700;background:var(--t);color:#fff;padding:3px 7px;border-radius:4px}
.flogo-name{font-family:var(--fd);font-weight:600;font-size:1rem}
.footer__tag{font-size:.8rem;color:rgba(255,255,255,.42);margin-bottom:4px;line-height:1.5}
.footer__sub{font-size:.77rem;color:var(--t);font-style:italic;margin-bottom:9px}
.footer__loc{font-size:.75rem;color:rgba(255,255,255,.32);font-family:var(--fm);margin-bottom:12px}
.footer__creds-strip{display:flex;flex-wrap:wrap;gap:6px}
.footer__creds-strip span{
  padding:3px 9px;border-radius:20px;
  background:rgba(78,205,196,.12);border:1px solid rgba(78,205,196,.2);
  color:var(--sky);font-size:.68rem;font-family:var(--fm);
}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fn-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.42);margin-bottom:13px;font-family:var(--fm);font-weight:400}
.fn-col ul{display:flex;flex-direction:column;gap:7px}
.fn-col a{font-size:.84rem;color:rgba(255,255,255,.48);transition:color .2s}
.fn-col a:hover{color:#fff}
.footer__bottom{padding:24px 0}
.footer__legal{font-size:.78rem;color:rgba(255,255,255,.28);margin-bottom:7px}
.footer__legal a{color:rgba(255,255,255,.38);transition:color .2s}
.footer__legal a:hover{color:#fff}
.footer__disclaimer{font-size:.73rem;color:rgba(255,255,255,.2);line-height:1.6;max-width:660px}

/* ══════════════════════════════════════════════
   MOBILE STICKY BAR
══════════════════════════════════════════════ */
.mob-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:998;
  background:var(--n);border-top:1px solid rgba(78,205,196,.18);
  padding:9px 14px;gap:9px;
  box-shadow:0 -4px 20px rgba(27,61,95,.35);
}
.mob-bar .btn{flex:1;justify-content:center;padding:13px 8px;font-size:.86rem;min-height:48px}

/* ══════════════════════════════════════════════
   REVEAL ANIMATION
══════════════════════════════════════════════ */
.rev{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rev.vis{opacity:1;transform:none}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ── 1024px TABLET ── */
@media(max-width:1024px){
  :root{--sp:64px}
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .trust-grid{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .doctor-layout{grid-template-columns:260px 1fr;gap:36px}
  .pub-grid{grid-template-columns:repeat(2,1fr)}
  .acad-row{grid-template-columns:repeat(2,1fr)}
  .robotic-layout{grid-template-columns:1fr;gap:36px}
  .philo-layout{grid-template-columns:1fr}
  .philo-steps{display:none}
  .timeline::before{left:20px}
  .tl-item{grid-template-columns:44px 1fr}
  .tl-content--right{grid-column:2;text-align:left;padding:16px 0 32px 22px}
  .tl-dot{grid-column:1}
  .tl-empty{display:none}
  .tl-item:nth-child(even) .tl-empty{display:none}
  .tl-item:nth-child(even) .tl-dot{grid-column:1}
  .tl-item:nth-child(even) .tl-content--left{grid-column:2;padding:16px 0 32px 22px}
  .footer__top{grid-template-columns:1fr;gap:36px}
  .footer__nav{grid-template-columns:repeat(3,1fr)}
}

/* ── 768px MOBILE — THE KEY FIXES ── */
@media(max-width:768px){
  :root{--sp:52px;--nh:60px}

  /* ────────────────────────────────────────────
     NAV: CRITICAL FIX
     The entire problem was that nav__inner had
     gap:32px and the brand text (~220px) + gap
     left no room for the hamburger, causing it
     to push outside the nav bar and overlap the
     hero content below.

     Fix: margin-left:auto on toggle only.
     Brand text hidden below 400px via its own rule.
  ──────────────────────────────────────────── */
  .nav__inner{padding:0 14px}   /* tighter padding */
  .nav__menu{display:none!important}      /* hide desktop menu */
  .nav__cta{display:none}       /* hide desktop CTA */
  .nav__toggle{
    display:flex;               /* show hamburger */
    margin-left:auto;           /* push to right — brand stays left */
    /* This is the critical line: auto margin
       absorbs all leftover space, placing toggle
       flush at right edge regardless of brand width */
  }

  /* Mobile nav panel — fixed, above everything */
  .nav__menu.open{
    display:flex!important;flex-direction:column;
    position:fixed!important;
    top:var(--nh)!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;
    height:calc(100vh - var(--nh))!important;
    background:var(--n)!important;
    padding:0 0 110px!important;gap:0;
    overflow-y:auto!important;overflow-x:hidden;
    z-index:9999!important;  /* above hero, ticker, everything */
    -webkit-overflow-scrolling:touch;
    visibility:visible!important;
    pointer-events:all!important;
    transform:none!important;
  }
  .nav__menu>li{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__menu>li>a,
  .nav__menu>li>button{
    display:flex;align-items:center;width:100%;
    padding:17px 22px;font-size:1.05rem;font-weight:500;
    color:rgba(255,255,255,.9);background:none;border:none;
    cursor:pointer;font-family:var(--fb);min-height:54px;
    -webkit-tap-highlight-color:rgba(78,205,196,.2);
    transition:background .12s,color .12s;
  }
  .nav__menu>li>a:active,
  .nav__menu>li>button:active{background:rgba(78,205,196,.15);color:#fff}

  /* Submenu always shown inline in mobile panel */
  .nav__sub{
    position:static!important;transform:none!important;
    opacity:1!important;pointer-events:all!important;
    display:block!important;box-shadow:none;
    background:rgba(0,0,0,.22);border-left:3px solid var(--t);
    margin:0 0 0 24px;padding:4px 0;border-radius:0;min-width:unset;
    border-top:none;border-right:none;border-bottom:none;
  }
  .nav__sub li{border-bottom:1px solid rgba(255,255,255,.04)}
  .nav__sub li a{
    display:flex;align-items:center;padding:14px 18px;
    color:rgba(255,255,255,.72);font-size:.97rem;min-height:48px;border-radius:0;
    -webkit-tap-highlight-color:rgba(78,205,196,.18);
  }
  .nav__sub li a:active{background:rgba(78,205,196,.18);color:#fff}

  /* Mobile bar */
  .mob-bar{display:flex!important}
  body{padding-bottom:68px}

  /* Layout */
  .hero__inner{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .robotic-feats{grid-template-columns:1fr}
  .robotic-layout{grid-template-columns:1fr}
  .doctor-layout{grid-template-columns:1fr}
  .doc-portrait{max-width:240px}
  .edu-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .journey-steps{grid-template-columns:1fr 1fr}
  .js:nth-child(2n){border-right:none}
  .js:nth-child(3n){border-right:1px solid var(--br)}
  .testi-grid{grid-template-columns:1fr}
  .loc-grid{grid-template-columns:1fr}
  .pub-grid{grid-template-columns:1fr}
  .acad-row{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .arthro-cols{grid-template-columns:1fr}
  .trauma-cols{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .philo-layout{grid-template-columns:1fr}
  .edu-body{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:1fr 1fr}
  .sec__hd{margin-bottom:32px}
  .hero__actions{flex-direction:column;align-items:flex-start}
  .hero__quals{font-size:.7rem;line-height:1.8}
  .hero__sub{font-size:.95rem}
  /* Ensure hero content is above grid overlay */
  .hero__content{position:relative;z-index:2}
  .hero__panel{position:relative;z-index:2}
}

/* ── 400px — very small screens ── */
@media(max-width:400px){
  .nav__name{display:none}  /* OSR badge only — avoids ANY overflow */
  .grid-4{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .journey-steps{grid-template-columns:1fr}
  .js{border-right:none!important}
  .footer__nav{grid-template-columns:1fr}
  .acad-row{grid-template-columns:1fr}
  .robotic-feats{grid-template-columns:1fr}
}

/* ── PRINT ── */
@media print{
  .nav,.ticker,.hero__scroll,.mob-bar{display:none!important}
  .hero{min-height:unset;background:white;color:black}
  .sec--navy,.sec--teal-grad,.sec--teal-dk{background:white;color:black}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}