/* =========================================================
   Bucks Oral Surgery — design tokens (from Figma variables)
   ========================================================= */
:root{
  --color-bg-page:#FFFFFF;
  --color-bg-surface:#FAFAFA;
  --color-bg-surface-hover:#F1F1F1;
  --color-bg-brand:#00747A;
  --color-bg-brand-accent:#00C4CC;
  --color-bg-inverse:#141B24;
  --color-bg-inverse-raised:#1E2B3D;

  --color-text-primary:#1E2B3D;
  --color-text-secondary:#5B6670;
  --color-text-brand:#00747A;
  --color-text-inverse:#FFFFFF;
  --color-text-inverse-muted:#C7F2F4;

  --color-icon-brand:#00747A;
  --color-icon-brand-accent:#00C4CC;

  --color-border-default:#E4E7EA;
  --color-border-strong:#33455C;
  --color-border-brand:#00747A;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-full:9999px;

  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:96px;

  --content-width:1312px;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text-primary);
  background:var(--color-bg-page);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; padding:0; margin:0; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.6px;
  color:var(--color-text-brand);
  margin-bottom:32px;
}
.eyebrow--accent{ color:var(--color-icon-brand-accent); }

.statement{
  font-size:clamp(28px, 3.4vw, 48px);
  font-weight:600;
  line-height:1.17;
  letter-spacing:-0.3px;
  max-width:900px;
  margin-bottom:64px;
}
.statement--sm{ font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-0.2px; max-width:820px; }
.statement--inverse{ color:var(--color-text-inverse); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:var(--radius-full);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary{
  background:var(--color-bg-brand-accent);
  color:var(--color-text-inverse);
}
.btn--primary:hover{
  background:#00a8af;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,196,204,.32);
}
/* outline pill — brand-accent border/text on light backgrounds */
.btn--outline{
  background:var(--color-bg-page);
  color:var(--color-icon-brand-accent);
  border:1px solid var(--color-icon-brand-accent);
  font-weight:600;
  font-size:16px;
  padding:16px 24px;
}
.btn--outline:hover{
  background:var(--color-icon-brand-accent);
  color:var(--color-text-inverse);
  transform:translateY(-2px);
}
/* white pill with brand border — used on dark hero image */
.btn--white-outline{
  background:var(--color-bg-page);
  color:var(--color-text-brand);
  border:1px solid var(--color-border-brand);
}
.btn--white-outline:hover{
  background:var(--color-bg-brand);
  color:var(--color-text-inverse);
  transform:translateY(-2px);
}
/* plain white pill, no border — used on colored panels */
.btn--white{
  background:var(--color-bg-page);
  color:var(--color-text-brand);
  border:none;
  font-weight:500;
  font-size:15px;
  padding:16px 24px;
}
.btn--white:hover{
  background:var(--color-bg-brand);
  color:var(--color-text-inverse);
  transform:translateY(-2px);
}
/* transparent outline for dark nav / dark sections */
.btn--outline-inverse{
  background:transparent;
  color:var(--color-text-inverse);
  border:1px solid rgba(255,255,255,.6);
  font-weight:500;
  font-size:15px;
  padding:16px 24px;
}
.btn--outline-inverse:hover{
  border-color:var(--color-icon-brand-accent);
  color:var(--color-icon-brand-accent);
  transform:translateY(-2px);
}
.btn:active{ transform:translateY(0); }

/* =========================================================
   Reveal-on-scroll ("lazy load" content from below)
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:20px 48px;
  display:flex; flex-direction:column;
  transition:background-color .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-nav__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
}
.site-nav__logo{ display:flex; align-items:center; height:44px; }
.site-nav__logo img{ height:100%; width:auto; }
.site-nav__links{
  display:flex;
  align-items:center;
  gap:40px;
}
.site-nav__link{
  font-size:15px;
  font-weight:500;
  color:var(--color-text-inverse);
  display:inline-flex; align-items:center; gap:8px;
  transition:opacity .2s var(--ease);
}
.site-nav__link:hover{ opacity:.7; }
.site-nav__dropdown{ position:relative; }
.caret{ font-size:10px; }
.site-nav__dropdown-menu{
  position:absolute; top:calc(100% + 12px); left:0;
  background:var(--color-bg-page);
  border-radius:var(--radius-md);
  box-shadow:0 20px 40px rgba(20,27,36,.16);
  padding:8px;
  min-width:200px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.site-nav__dropdown:hover .site-nav__dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.site-nav__dropdown-menu a{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  color:var(--color-text-primary);
  transition:background-color .15s var(--ease);
}
.site-nav__dropdown-menu a:hover{ background:var(--color-bg-surface); }
.site-nav__right{ display:flex; align-items:center; gap:var(--space-sm); }
.site-nav__burger{
  display:none;
  flex-direction:column; gap:5px;
  padding:8px;
}
.site-nav__burger span{
  width:22px; height:2px; background:var(--color-text-inverse); border-radius:2px;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.site-nav__mobile-menu{
  display:none;
  flex-direction:column;
  gap:4px;
  background:var(--color-bg-inverse);
  padding:var(--space-sm) var(--space-md) var(--space-md);
}
.site-nav__mobile-menu a{
  padding:14px 4px;
  color:var(--color-text-inverse);
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-nav__mobile-menu .btn{ margin-top:10px; justify-content:center; border-bottom:none; }

.site-nav.is-scrolled{
  background:rgba(20,27,36,.92);
  backdrop-filter:blur(10px);
  padding-top:14px; padding-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* =========================================================
   Hero — auto-rotating image gallery (no scroll-jacking)
   ========================================================= */
.hero-gallery{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-gallery__media{ position:absolute; inset:0; }
.hero-gallery__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.hero-gallery__img.is-active{ opacity:1; transform:scale(1); }
.hero-gallery__scrim{ position:absolute; inset:0; pointer-events:none; }
.hero-gallery__scrim::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(16.74deg, rgb(30,43,61) 0.1%, rgba(0,116,122,.35) 42.85%, rgba(0,116,122,0) 83.25%);
}
.hero-gallery__scrim::after{
  content:'';
  position:absolute; top:0; left:0; right:0; height:145px;
  opacity:.7;
  background:linear-gradient(180deg, #1e2b3d 0%, rgba(0,116,122,.35) 68.27%, rgba(0,116,122,0) 100%);
}

.hero-gallery__content{
  position:relative; z-index:2;
  max-width:var(--content-width);
  width:calc(100% - 182px);
  margin:0 auto;
  padding-bottom:64px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:64px;
}
.hero-gallery__text{ flex:1; min-width:0; }
.hero-gallery__eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.6px;
  color:var(--color-text-inverse-muted);
  margin-bottom:20px;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-gallery__content h1{
  font-size:clamp(30px, 3.8vw, 48px);
  font-weight:600;
  line-height:1.17;
  letter-spacing:-0.3px;
  color:var(--color-text-inverse);
  max-width:760px;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-gallery__ctas{ display:flex; gap:16px; flex-wrap:wrap; flex:none; }

.hero-gallery__nav{
  position:relative; z-index:2;
  max-width:var(--content-width);
  width:calc(100% - 182px);
  margin:0 auto;
  padding-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.hero-gallery__arrow{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  color:var(--color-text-inverse);
  font-size:16px;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-gallery__arrow:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--color-icon-brand-accent);
  transform:translateY(-2px);
}
.hero-gallery__dots{ display:flex; align-items:center; gap:10px; }
.hero-gallery__dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.hero-gallery__dot.is-active{
  background:var(--color-icon-brand-accent);
  transform:scale(1.35);
}
.hero-gallery__dot:hover{ background:rgba(255,255,255,.6); }

/* =========================================================
   Trust ribbon
   ========================================================= */
.trust-ribbon{
  background:var(--color-bg-inverse-raised);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  padding:24px 40px;
}
.trust-ribbon__item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.trust-ribbon__item strong{ font-size:20px; font-weight:700; color:var(--color-text-inverse); }
.trust-ribbon__item span{ font-size:13px; font-weight:600; letter-spacing:.6px; color:var(--color-text-inverse-muted); }

/* =========================================================
   Generic section
   ========================================================= */
.section{
  position:relative;
  padding:120px 64px 64px;
  max-width:1440px;
  margin:0 auto;
  overflow:hidden;
}
.section--dark{ background:var(--color-bg-inverse-raised); }
.section--surface{ background:var(--color-bg-surface); }

/* Why Refer to Us uses equal padding on all sides in the real file */
.section--even-pad{ padding:64px; }
/* FAQ needs a taller bottom pad; Testimonials needs pt-120/pb-96 */
.section--pb-80{ padding-bottom:80px; }
.testimonials{ padding-top:120px; padding-bottom:96px; }

/* decorative background line-art graphics */
.section__deco{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}
.section > *:not(.section__deco):not(.section__band){ position:relative; z-index:1; }

/* solid colour band peeking out from behind a row of cards */
.section__band{
  position:absolute;
  left:0; right:0; bottom:0;
  height:35%;
  background:#B2EDF0;
  z-index:0;
}

.section-line{
  display:block;
  width:100%;
  max-width:1312px;
  height:1px;
  margin-bottom:var(--space-lg);
  overflow:hidden;
}
.section-line .line-grow__fill{ display:block; width:0%; height:100%; background:var(--color-icon-brand-accent); }

.deco--who-this-is-for{ width:520px; left:-160px; bottom:-120px; transform:rotate(91deg); }
.deco--surgeon{ width:520px; left:-160px; bottom:-120px; transform:rotate(91deg); opacity:.7; }
.deco--pathways{ width:1000px; right:-260px; bottom:-180px; transform:rotate(91deg); }
.deco--why-refer{ width:900px; left:1289px; top:360px; transform:translate(-50%,-50%) rotate(80deg); opacity:.5; }
.deco--cta-dark{ width:900px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(20deg); opacity:.5; }
.deco--cta-light{ width:650px; right:-70px; top:50%; transform:translateY(-50%) rotate(15deg); opacity:.4; }

/* offset editorial row */
.offset-row{
  display:grid;
  grid-template-columns:420px repeat(2, 1fr);
  gap:64px;
}
.offset-row--three{ grid-template-columns:repeat(3, 1fr); }
.offset-row--no-spacer{ grid-template-columns:repeat(2, 1fr); gap:64px; }
.offset-row__title{
  font-size:32px; font-weight:600; letter-spacing:-0.2px; line-height:1.25;
  color:var(--color-text-brand);
  margin-bottom:var(--space-sm);
}

/* "Who This Is For" — colored panel behind the two columns */
/* full-bleed: section drops its max-width so the panel can reach the
   true viewport edge; the text content stays centred at 1440px inside
   .section__wrap */
.who-section{ max-width:none; padding-left:0; padding-right:0; }
.section__wrap{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:0 64px;
}
.section__wrap > *:not(.section__deco){ position:relative; z-index:1; }

.who-row{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:64px;
  padding-left:max(64px, calc((100vw - 1440px) / 2 + 64px));
  margin-bottom:-64px;
}
.who-panel{
  display:flex;
  gap:64px;
  background:#B2EDF0;
  border-radius:16px 0 0 0;
  padding:64px;
}
.who-panel .offset-row__col{ flex:1; }
.offset-row__col p{
  font-size:16px; color:var(--color-text-secondary); margin-bottom:var(--space-md);
  max-width:420px;
}
.offset-row__col--inverse h3{ font-size:22px; font-weight:600; color:var(--color-text-inverse); margin-bottom:var(--space-sm); }
.offset-row__col--inverse p{ color:var(--color-text-inverse-muted); margin-bottom:var(--space-sm); max-width:420px; }
.offset-row__col--inverse .highlight{ color:var(--color-icon-brand-accent); font-weight:600; font-size:18px; }

/* pathway photo cards */
.pathway-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  max-width:1000px;
}
.pathway-card{ border-radius:var(--radius-lg); overflow:hidden; }
.pathway-card__img{ height:300px; overflow:hidden; }
.pathway-card__img img{ width:100%; height:100%; object-fit:cover; }
.pathway-card__body{ padding:40px 24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.pathway-card__body--white{ background:var(--color-bg-page); }
.pathway-card__body--surface{ background:var(--color-bg-surface); }
.pathway-card__body h3{ font-size:32px; font-weight:600; letter-spacing:-0.2px; color:var(--color-text-primary); }
.pathway-card__body p{ font-size:14px; color:var(--color-text-secondary); margin-bottom:8px; }

/* value cards (why refer to us) */
.value-card{
  background:var(--color-bg-page);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.value-card:hover{
  border-color:var(--color-border-brand);
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(20,27,36,.08);
}
.value-card__icon{ margin-bottom:var(--space-sm); }
.value-card h3{ font-size:22px; font-weight:600; margin-bottom:8px; }
.value-card p{ font-size:14px; color:var(--color-text-secondary); }

/* surgeon */
.surgeon__top{
  display:grid;
  grid-template-columns:1fr 828px;
  gap:64px;
  margin-bottom:68px;
}
.surgeon__name{ font-size:48px; font-weight:600; line-height:1.17; letter-spacing:-0.3px; }
.surgeon__text p{ color:var(--color-text-secondary); font-size:16px; margin-bottom:var(--space-md); }
.surgeon__title{
  font-size:20px; font-weight:700; margin-top:12px;
}
.surgeon__title span{ display:block; font-size:13px; font-weight:600; letter-spacing:.6px; margin-top:2px; }
.surgeon__photo{
  aspect-ratio:2400/1000;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.surgeon__photo img{ width:100%; height:100%; object-fit:cover; }

/* appointment / map */
.appointment__map{
  width:100%;
  aspect-ratio:1418/511;
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:var(--space-lg);
}
.appointment__map img{ width:100%; height:100%; object-fit:cover; }

/* FAQ accordion — question and answer sit side by side in the same row
   when open, matching the Figma layout (question / answer / icon). */
.accordion__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0fr) 24px;
  column-gap:0;
  align-items:start;
  padding:20px 0;
  border-bottom:1px solid var(--color-border-default);
  transition:grid-template-columns .35s var(--ease), column-gap .35s var(--ease);
}
.accordion__item.is-open{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 24px;
  column-gap:40px;
}
.accordion__q{
  grid-column:1; grid-row:1;
  text-align:left;
  font-family:inherit;
  font-size:18px; font-weight:600;
  color:var(--color-text-primary);
  background:none; border:none; padding:0; cursor:pointer;
}
.accordion__a{
  grid-column:2; grid-row:1;
  overflow:hidden; min-width:0;
}
.accordion__a p{ font-size:16px; color:var(--color-text-secondary); margin:0; white-space:nowrap; }
.accordion__item.is-open .accordion__a p{ white-space:normal; }
.accordion__icon{
  grid-column:3; grid-row:1;
  font-size:22px; font-weight:400;
  color:var(--color-icon-brand);
  transition:transform .25s var(--ease);
  justify-self:end;
}
.accordion__item.is-open .accordion__icon{ transform:rotate(45deg); }

/* testimonials */
.testimonials{ display:grid; grid-template-columns:320px 1fr; gap:var(--space-lg); }
.testimonials__side{ position:relative; }
.testimonials__quote-mark{
  font-size:64px; font-weight:700; color:var(--color-border-strong); line-height:1; display:block; margin-bottom:8px;
}
.testimonials__side h2{ font-size:32px; font-weight:600; letter-spacing:-0.2px; margin-bottom:var(--space-md); }
.testimonials__nav{ display:flex; align-items:center; gap:16px; padding-top:8px; }
.nav-arrow{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-arrow img{ width:40px; height:40px; }
.nav-arrow:hover{ transform:scale(1.08); opacity:.85; }
.testimonials__track{
  width:80px; height:2px; background:var(--color-border-default); position:relative; overflow:hidden; border-radius:var(--radius-full);
}
.testimonials__track-fill{
  position:absolute; left:0; top:0; bottom:0; width:28px;
  background:var(--color-icon-brand);
  transition:width .3s var(--ease);
}
.testimonials__cards{ display:flex; gap:24px; flex:1; }
.testimonial-card{
  flex:1;
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  padding:32px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.testimonial-card:hover{
  border-color:var(--color-border-brand);
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(20,27,36,.08);
}
.testimonial-card .stars{ color:var(--color-icon-brand-accent); font-size:16px; font-weight:600; letter-spacing:2px; margin-bottom:var(--space-sm); }
.testimonial-card p{ font-size:16px; margin-bottom:var(--space-sm); }
.testimonial-card hr{ border:none; border-top:1px solid var(--color-border-default); margin-bottom:var(--space-sm); }
.testimonial-card strong{ display:block; font-size:14px; }
.testimonial-card span{ font-size:12px; color:var(--color-text-secondary); }

/* CTA band */
.cta-band{ padding:4px 64px 80px; max-width:1440px; margin:0 auto; }
.cta-band__inner{ display:flex; border-radius:var(--radius-lg); overflow:hidden; }
.cta-band__panel{
  position:relative;
  flex:1;
  padding:var(--space-xl);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-sm);
  overflow:hidden;
}
.cta-band__panel > *:not(.section__deco){ position:relative; z-index:1; }
.cta-band__panel--dark{ background:var(--color-bg-inverse-raised); }
.cta-band__panel--dark h2{ color:var(--color-text-inverse); }
.cta-band__panel--light{ background:var(--color-bg-surface); }
.cta-band__panel h2{ font-size:32px; font-weight:600; letter-spacing:-0.2px; margin-bottom:var(--space-sm); }

/* Footer */
.site-footer{
  background:var(--color-bg-inverse);
  color:var(--color-text-inverse-muted);
  padding:var(--space-xl) var(--space-xl) var(--space-lg);
}
.site-footer__top{
  max-width:1440px; margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:80px;
  padding-bottom:var(--space-lg);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer__logo{ margin-bottom:var(--space-sm); }
.site-footer__col h4{ color:var(--color-text-inverse); font-size:18px; margin-bottom:12px; }
.site-footer__col p, .site-footer__col a{ display:block; font-size:14px; margin-bottom:8px; }
.site-footer__col a:hover{ color:var(--color-icon-brand-accent); }
.site-footer__haddenham{ color:var(--color-text-inverse); font-weight:600; }
.site-footer__hours{ font-size:12px; }
.site-footer__bottom{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--space-md);
  font-size:12px;
  flex-wrap:wrap; gap:var(--space-sm);
}
.site-footer__bottom div{ display:flex; gap:var(--space-md); }
.site-footer__bottom a:hover{ color:var(--color-icon-brand-accent); }

/* =========================================================
   Responsive — tablet
   ========================================================= */
@media (max-width:1024px){
  .site-nav__links{ display:none; }
  .site-nav__right{ display:none; }
  .site-nav__burger{ display:flex; }
  .site-nav__mobile-menu.is-open{ display:flex; }

  .hero-gallery__content{ flex-direction:column; align-items:flex-start; gap:24px; }
  .hero-gallery__ctas{ width:100%; }

  .offset-row{ grid-template-columns:1fr; }
  .offset-row--three{ grid-template-columns:1fr 1fr; }
  .offset-row__spacer{ display:none; }
  .offset-row--three .value-card:last-child{ grid-column:1 / -1; }
  .offset-row--no-spacer{ grid-template-columns:1fr; }

  .who-row{ grid-template-columns:1fr; }
  .who-panel{ flex-direction:column; }

  .pathway-cards{ grid-template-columns:1fr; }
  .surgeon__top{ grid-template-columns:1fr; }

  .testimonials{ grid-template-columns:1fr; }
  .testimonials__cards{ flex-direction:column; }

  .cta-band__inner{ flex-direction:column; }

  .trust-ribbon{ flex-wrap:wrap; }

  .site-footer__top{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   Responsive — mobile
   ========================================================= */
@media (max-width:640px){
  .site-nav{ padding:16px var(--space-sm); }
  .hero-gallery__content, .hero-gallery__nav{ width:calc(100% - 32px); }
  .hero-gallery__ctas{ flex-direction:column; align-items:stretch; }
  .hero-gallery__ctas .btn{ width:100%; }

  .trust-ribbon{ padding:20px var(--space-sm); justify-content:space-between; }
  .trust-ribbon__item{ width:45%; }

  .section{ padding:var(--space-xl) var(--space-sm); }
  .statement{ font-size:26px; }

  .offset-row--three{ grid-template-columns:1fr; }
  .offset-row--three .value-card:last-child{ grid-column:auto; }

  /* FAQ: side-by-side Q/A doesn't fit on narrow screens — stack instead */
  .accordion__item{
    grid-template-columns:minmax(0,1fr) 24px;
    grid-template-rows:auto minmax(0,0fr);
    column-gap:0;
  }
  .accordion__item.is-open{
    grid-template-columns:minmax(0,1fr) 24px;
    grid-template-rows:auto minmax(0,1fr);
    column-gap:0;
  }
  .accordion__q{ grid-column:1; grid-row:1; }
  .accordion__icon{ grid-column:2; grid-row:1; }
  .accordion__a{ grid-column:1 / -1; grid-row:2; }
  .accordion__item.is-open .accordion__a{ padding-top:12px; }

  .cta-band{ padding:0 var(--space-sm) var(--space-lg); }
  .cta-band__panel{ padding:var(--space-lg) var(--space-md); }

  .site-footer{ padding:var(--space-xl) var(--space-sm) var(--space-md); }
  .site-footer__top{ grid-template-columns:1fr; gap:var(--space-lg); }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; }
}