/* ============================================================
   VIDENT, Orthodontics Antwerp, Page-specific CSS
   Asset key: orthodontics-antwerp (shared across EN/NL/FR translations)
   Loaded ONLY on the three Orthodontics pages via Site Assets Manager.
   Depends on global.css tokens (--vd-base, --vd-gold, --vd-sage, --vd-ink,
   --vd-cream, --vd-mist, --vd-line, --vd-radius-lg/md, --vd-shadow,
   --vd-ease) and the global .btn / .reveal / .reveal-d1..d4 / .icon-ui
   system. See global.css for the full token list.

   FIXED (critical): removed duplicate .reveal / .btn-primary overrides
   that collided with global.css (see audit-summary.md Sec1.4 / Sec1.5).

   FIXED (critical, root cause of the page rendering completely
   unstyled): every color/radius/shadow/easing value in this file
   previously referenced invented custom properties that do not exist
   anywhere on the site (--coral, --teal, --dark, --text, --border,
   --cream, --ease, --radius-lg/md/sm, --shadow-soft/strong, --white).
   With no matching declaration, every one of those var() calls
   resolved to nothing, so nearly the entire visual design (colors,
   backgrounds, rounded corners, shadows) silently failed while the
   raw HTML structure still rendered as plain, unstyled text. All
   references have been remapped to the real tokens that global.css
   actually defines. The two page-specific sizing tokens with no
   global equivalent (a slightly smaller corner radius, a stronger
   drop shadow for hover states) are declared locally below rather
   than invented as new global tokens.
   ============================================================ */

.ortho-page{
  --ortho-radius-sm:14px;
  --ortho-shadow-strong:0 40px 100px rgba(52,73,94,.22);
}

/* FIXED (critical, mobile horizontal overflow): confirmed by rendering
   the page at a 390px viewport, the document was 578px wide, a
   real horizontal-scroll bug, not a cosmetic one. Two causes, both
   scoped to this page only so nothing sitewide is changed on an
   unverified assumption:
   1) box-sizing was never set anywhere in global.css, so it defaulted
      to content-box; every padded element (buttons, cards) added its
      padding on top of its width instead of inside it.
   2) CSS Grid and Flexbox items default to min-width:auto, which
      refuses to shrink a flex/grid item below its content's natural,
      unwrapped width. Combined with .btn's global white-space:nowrap,
      the hero/split/before-after/doctor grid tracks were sizing
      themselves to the buttons' full unwrapped width and forcing the
      whole page wider than the viewport. */
.ortho-page, .ortho-page *, .ortho-page *::before, .ortho-page *::after{box-sizing:border-box}
.ortho-page .hero-grid, .ortho-page .hero-text, .ortho-page .hero-visual,
.ortho-page .hero-cta-row, .ortho-page .hero-cta-row > .btn,
.ortho-page .split, .ortho-page .split-text, .ortho-page .split-media,
.ortho-page .ba-layout, .ortho-page .ba-text, .ortho-page .ba-slider-wrap,
.ortho-page .doctor-grid, .ortho-page .doctor-info, .ortho-page .doctor-photo-wrap,
.ortho-page .doctor-actions, .ortho-page .doctor-actions > .btn,
.ortho-page .doctor-contact-row,
.ortho-page .why-grid > *, .ortho-page .case-grid > *, .ortho-page .invest-grid > *,
.ortho-page .process-step, .ortho-page .process-content{min-width:0}

/* FIXED (critical, edge/section spacing): neither of these had a base
   rule anywhere in the file. ".container" was only ever narrowed for
   two specific sections and given mobile padding, never given a
   default max-width/centering/side-padding, so every section's
   content ran flush to the browser edge at tablet/desktop widths.
   "section" had no default vertical padding at all outside .hero and
   .cta-banner (only the 640px breakpoint set one), so the seven
   sections without their own explicit padding (.intro-cta, .ba-section
   x2, .invest-section, .final-note, .doctor-section, .reviews-section,
   .faq-section) butted directly against each other with no vertical
   rhythm. Both are added here, once, at the top of the cascade, so
   .hero/.cta-banner's own later, equally-specific padding rules still
   win by source order where they intentionally differ. */
.ortho-page .container{max-width:1200px;margin:0 auto;padding:0 24px}
.ortho-page section{padding:100px 0}

.ortho-page .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vd-base);background:var(--vd-mist);
  padding:8px 18px;border-radius:50px;margin-bottom:18px;
}
.ortho-page .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--vd-sage);display:inline-block}
.ortho-page h2.section-title{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px;letter-spacing:-.01em}
.ortho-page p.section-lead{font-size:1.08rem;color:var(--vd-muted);max-width:680px;margin-bottom:10px}
.ortho-page .center{text-align:center;margin-left:auto;margin-right:auto}
.ortho-page .divider{height:1px;background:linear-gradient(90deg,transparent,var(--vd-line),transparent);margin:0 auto;max-width:1200px}

/* Hero */
.ortho-page .hero{
  padding:80px 0 100px;
  background:radial-gradient(circle at 85% 10%,var(--vd-gold-2) 0%,transparent 45%),
             radial-gradient(circle at 5% 90%,var(--vd-mist) 0%,transparent 40%),
             var(--vd-cream);
  overflow:hidden;
}
.ortho-page .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ortho-page .hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:20px;letter-spacing:-.02em}
.ortho-page .hero h1 em{font-style:normal;color:var(--vd-gold)}
.ortho-page .hero-sub{font-size:1.1rem;color:var(--vd-muted);max-width:560px;margin-bottom:34px}
.ortho-page .hero-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}

.ortho-page .hero-visual{position:relative}
.ortho-page .aligner-img-wrap{
  position:relative;border-radius:var(--vd-radius-lg);overflow:hidden;
  background:radial-gradient(ellipse at center,#2a2a3a 0%,#1a1a28 45%,#0f0f1a 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 8px 32px rgba(199,164,106,.15);
  padding:30px;display:flex;align-items:center;justify-content:center;min-height:380px;
}
.ortho-page .aligner-img-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(159,180,170,.18) 0%,rgba(199,164,106,.12) 40%,transparent 70%);
  border-radius:var(--vd-radius-lg);pointer-events:none;
}
.ortho-page .aligner-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.06) 0%,transparent 50%);
  border-radius:var(--vd-radius-lg);pointer-events:none;
}
.ortho-page .aligner-img-wrap img{
  position:relative;z-index:1;width:100%;max-width:420px;margin:0 auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(159,180,170,.25));
}

.ortho-page .hero-badge{
  position:absolute;z-index:2;bottom:24px;left:24px;background:#fff;padding:16px 20px;
  border-radius:var(--vd-radius-md);box-shadow:var(--ortho-shadow-strong);display:flex;align-items:center;gap:12px;
}
.ortho-page .hero-badge .stars{color:#FFB43A;font-size:.9rem}
.ortho-page .hero-badge b{display:block;font-size:1rem;color:var(--vd-ink)}
.ortho-page .hero-badge span{font-size:.8rem;color:var(--vd-muted)}

/* Quick summary */
.ortho-page .quick-summary{background:#fff;border-radius:var(--vd-radius-lg);padding:36px;box-shadow:var(--vd-shadow);border:1px solid var(--vd-line);margin-top:20px}
.ortho-page .quick-summary h3{font-size:1rem;color:var(--vd-base);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px}
.ortho-page .qs-item{display:flex;gap:14px;margin-bottom:18px}
.ortho-page .qs-item:last-child{margin-bottom:0}
.ortho-page .qs-icon{min-width:34px;height:34px;border-radius:10px;background:var(--vd-gold-2);display:flex;align-items:center;justify-content:center;color:var(--vd-base);flex-shrink:0}
.ortho-page .qs-icon svg{width:17px;height:17px}
.ortho-page .qs-item p{font-size:.94rem;color:var(--vd-muted)}
.ortho-page .qs-item b{color:var(--vd-ink)}

/* Intro CTA */
.ortho-page .intro-cta{background:#fff;text-align:center}
.ortho-page .intro-cta .container{max-width:800px}
.ortho-page .intro-cta p{font-size:1.15rem;color:var(--vd-muted);margin-bottom:22px}
.ortho-page .intro-cta p:last-of-type{color:var(--vd-ink);font-weight:500}
.ortho-page .intro-cta .btn{margin-top:30px}

/* Split layout (SureSmile section) */
.ortho-page .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.ortho-page .split.reverse .split-media{order:2}
.ortho-page .split.reverse .split-text{order:1}
.ortho-page .split-media{position:relative}
.ortho-page .split-media .aligner-img-wrap-section{
  position:relative;border-radius:var(--vd-radius-lg);overflow:hidden;
  background:radial-gradient(ellipse at center,#2a2a3a 0%,#1a1a28 45%,#0f0f1a 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.3),0 8px 32px rgba(199,164,106,.12);
  padding:40px 30px;display:flex;align-items:center;justify-content:center;min-height:340px;
}
.ortho-page .split-media .aligner-img-wrap-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(159,180,170,.15) 0%,rgba(199,164,106,.1) 40%,transparent 70%);
  pointer-events:none;
}
.ortho-page .split-media .aligner-img-wrap-section img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 16px 32px rgba(0,0,0,.5)) drop-shadow(0 0 50px rgba(159,180,170,.2))}

.ortho-page .feature-list{margin-top:28px}
.ortho-page .feature-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--vd-line)}
.ortho-page .feature-item:last-child{border-bottom:none}
.ortho-page .feature-check{min-width:30px;height:30px;border-radius:50%;background:var(--vd-sage);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.ortho-page .feature-check svg{width:15px;height:15px}
.ortho-page .feature-item h4{font-size:1.02rem;margin-bottom:5px}
.ortho-page .feature-item p{color:var(--vd-muted);font-size:.94rem}

/* Why choose */
.ortho-page .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.ortho-page .why-card{background:#fff;padding:38px 30px;border-radius:var(--vd-radius-md);border:1px solid var(--vd-line);box-shadow:var(--vd-shadow);transition:all .4s var(--vd-ease)}
.ortho-page .why-card:hover{transform:translateY(-8px);box-shadow:var(--ortho-shadow-strong);border-color:var(--vd-gold)}
.ortho-page .why-card .num{width:44px;height:44px;border-radius:12px;background:var(--vd-gold-2);color:var(--vd-base);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:20px}
.ortho-page .why-card h3{font-size:1.15rem;margin-bottom:14px}
.ortho-page .why-card p{color:var(--vd-muted);font-size:.94rem;margin-bottom:10px}
.ortho-page .mini-list{margin-top:12px}
.ortho-page .mini-list li{font-size:.9rem;color:var(--vd-muted);padding:6px 0;padding-left:20px;position:relative}
.ortho-page .mini-list li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:2px;background:var(--vd-sage)}
.ortho-page .mini-list b{color:var(--vd-ink)}

/* Before/After */
.ortho-page .ba-section{background:#fff}
.ortho-page .ba-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ortho-page .ba-layout.reverse .ba-slider-wrap{order:2}
.ortho-page .ba-layout.reverse .ba-text{order:1}
.ortho-page .ba-text .badge-tag{display:inline-block;background:var(--vd-mist);color:var(--vd-base);padding:6px 16px;border-radius:50px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.ortho-page .ba-text h3{font-size:1.6rem;margin-bottom:16px;color:var(--vd-ink)}
.ortho-page .ba-text p{color:var(--vd-muted);margin-bottom:14px}
.ortho-page .ba-text a.story-link{display:inline-flex;align-items:center;gap:8px;color:var(--vd-base);font-weight:700;margin-top:10px;border-bottom:2px solid var(--vd-gold-2);padding-bottom:3px;transition:.3s}
.ortho-page .ba-text a.story-link:hover{border-color:var(--vd-base);gap:12px}
.ortho-page .ba-slider-wrap{max-width:460px;margin:0 auto;width:100%}
.ortho-page .ba-slider{position:relative;width:100%;aspect-ratio:4/3.1;border-radius:var(--vd-radius-md);overflow:hidden;box-shadow:var(--ortho-shadow-strong);cursor:ew-resize;user-select:none;border:5px solid #fff}
.ortho-page .ba-slider img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ortho-page .ba-before-clip{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;z-index:2}
.ortho-page .ba-before-clip img{width:var(--ba-img-w,100%);max-width:none;height:100%;object-fit:cover}
.ortho-page .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:3;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
.ortho-page .ba-handle::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.3)}
.ortho-page .ba-handle-btn{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:var(--vd-base);z-index:4}
.ortho-page .ba-handle-btn svg{width:18px;height:18px}
.ortho-page .ba-tag{position:absolute;top:14px;z-index:5;background:rgba(23,27,38,.78);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:50px;backdrop-filter:blur(4px)}
.ortho-page .ba-tag.tag-before{left:14px}
.ortho-page .ba-tag.tag-after{right:14px}
.ortho-page .ba-caption{margin-top:12px;text-align:center;font-size:.83rem;color:var(--vd-muted);font-style:italic}

/* Case types (replaces fabricated "Real Treatment Outcomes" named case studies) */
.ortho-page .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.ortho-page .case-card{background:#fff;border-radius:var(--vd-radius-md);padding:34px 28px;border:1px solid var(--vd-line);box-shadow:var(--vd-shadow);transition:.4s var(--vd-ease)}
.ortho-page .case-card:hover{transform:translateY(-6px);box-shadow:var(--ortho-shadow-strong)}
.ortho-page .case-card .case-icon{width:44px;height:44px;border-radius:12px;background:var(--vd-mist);color:var(--vd-base);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ortho-page .case-card .case-icon svg{width:22px;height:22px}
.ortho-page .case-card h4{font-size:1.08rem;margin-bottom:8px}
.ortho-page .case-card p{color:var(--vd-muted);font-size:.92rem}
.ortho-page .closing-line{text-align:center;max-width:620px;margin:50px auto 0;color:var(--vd-muted);font-size:1.02rem;font-style:italic}

/* Process */
.ortho-page .process-timeline{margin-top:60px;position:relative}
.ortho-page .process-timeline::before{content:'';position:absolute;top:0;bottom:0;left:29px;width:2px;background:repeating-linear-gradient(to bottom,var(--vd-line) 0,var(--vd-line) 6px,transparent 6px,transparent 12px)}
.ortho-page .process-step{display:flex;gap:30px;margin-bottom:50px;position:relative}
.ortho-page .process-step:last-child{margin-bottom:0}
.ortho-page .process-num{min-width:60px;height:60px;border-radius:50%;background:var(--vd-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;flex-shrink:0;z-index:1;box-shadow:0 8px 20px rgba(23,27,38,.25)}
.ortho-page .process-step:nth-child(odd) .process-num{background:var(--vd-gold)}
.ortho-page .process-step:nth-child(even) .process-num{background:var(--vd-sage)}
.ortho-page .process-content{background:#fff;border:1px solid var(--vd-line);border-radius:var(--vd-radius-md);padding:28px 32px;box-shadow:var(--vd-shadow);flex:1}
.ortho-page .process-content h3{font-size:1.2rem;margin-bottom:14px}
.ortho-page .process-content li{position:relative;padding-left:24px;margin-bottom:10px;font-size:.93rem;color:var(--vd-muted)}
.ortho-page .process-content li::before{content:'✓';position:absolute;left:0;top:0;color:var(--vd-sage);font-weight:700}
.ortho-page .process-content li:last-child{margin-bottom:0}

/* Q&A inline */
.ortho-page .qa-inline{max-width:800px;margin:50px auto 0}
.ortho-page .qa-block{background:#fff;border-left:4px solid var(--vd-gold);border-radius:0 var(--ortho-radius-sm) var(--ortho-radius-sm) 0;padding:26px 30px;margin-bottom:22px;box-shadow:var(--vd-shadow)}
.ortho-page .qa-block h4{font-size:1.05rem;margin-bottom:12px;color:var(--vd-ink)}
.ortho-page .qa-block p{color:var(--vd-muted);font-size:.95rem;margin-bottom:8px}
.ortho-page .qa-block ul{margin:12px 0 12px 6px}
.ortho-page .qa-block li{position:relative;padding-left:20px;margin-bottom:6px;font-size:.92rem;color:var(--vd-muted)}
.ortho-page .qa-block li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--vd-gold)}

/* Investment */
.ortho-page .invest-section{background:linear-gradient(180deg,#fff,var(--vd-cream))}
.ortho-page .invest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.ortho-page .invest-card{background:#fff;padding:32px 26px;border-radius:var(--vd-radius-md);border:1px solid var(--vd-line);box-shadow:var(--vd-shadow);transition:.4s var(--vd-ease)}
.ortho-page .invest-card:hover{transform:translateY(-5px);box-shadow:var(--ortho-shadow-strong)}
.ortho-page .invest-card svg{width:34px;height:34px;color:var(--vd-base);margin-bottom:16px}
.ortho-page .invest-card h4{font-size:1.05rem;margin-bottom:10px}
.ortho-page .invest-card p{color:var(--vd-muted);font-size:.9rem}

/* Final note */
.ortho-page .final-note{background:var(--vd-ink);color:#fff;position:relative;overflow:hidden}
.ortho-page .final-note::before{content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(199,164,106,.25),transparent 70%)}
.ortho-page .final-note::after{content:'';position:absolute;bottom:-100px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(159,180,170,.2),transparent 70%)}
.ortho-page .final-note .container{max-width:760px;text-align:center;position:relative;z-index:2}
.ortho-page .final-note h2{color:#fff}
.ortho-page .final-note p{color:rgba(255,255,255,.75);margin-bottom:18px;font-size:1.05rem}
.ortho-page .final-note h3{color:var(--vd-gold);font-size:1.5rem;margin:36px 0 14px}
.ortho-page .final-note .btn{margin-top:20px}

/* Doctor */
.ortho-page .doctor-section{background:var(--vd-base-2);color:#fff}
.ortho-page .doctor-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.ortho-page .doctor-photo-wrap{position:relative}
.ortho-page .doctor-photo-card{width:100%;border-radius:var(--vd-radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative;aspect-ratio:3/4;background:var(--vd-base-3)}
.ortho-page .doctor-photo-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .6s var(--vd-ease)}
.ortho-page .doctor-photo-card:hover img{transform:scale(1.04)}
.ortho-page .doctor-photo-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(to top,rgba(23,27,38,.85),transparent);pointer-events:none}
.ortho-page .doctor-badge-float{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--vd-gold);color:#fff;padding:10px 26px;border-radius:50px;font-weight:700;font-size:.85rem;white-space:nowrap;box-shadow:0 12px 30px rgba(199,164,106,.4);z-index:2}
.ortho-page .doctor-eyebrow{color:var(--vd-gold);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.ortho-page .doctor-info h2{color:#fff;font-size:2rem;margin-bottom:6px}
.ortho-page .doctor-role{color:rgba(255,255,255,.65);font-size:.98rem;margin-bottom:26px}
.ortho-page .doctor-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px}
.ortho-page .doctor-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--ortho-radius-sm);padding:16px 20px}
.ortho-page .doctor-stat b{display:block;font-size:1.5rem;color:var(--vd-gold)}
.ortho-page .doctor-stat span{font-size:.82rem;color:rgba(255,255,255,.65)}
.ortho-page .doctor-detail{margin-bottom:16px}
.ortho-page .doctor-detail b{display:block;color:#fff;font-size:.9rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.ortho-page .doctor-detail p{color:rgba(255,255,255,.7);font-size:.92rem}
.ortho-page .doctor-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.ortho-page .doctor-contact-row{display:flex;gap:20px;margin-top:22px;flex-wrap:wrap}
.ortho-page .doctor-contact-row a{display:flex;align-items:center;gap:8px;color:#fff;font-size:.9rem;font-weight:600;transition:.3s}
.ortho-page .doctor-contact-row a:hover{color:var(--vd-gold)}
.ortho-page .doctor-contact-row svg{width:16px;height:16px;color:var(--vd-gold)}

/* Reviews */
.ortho-page .reviews-section{background:var(--vd-cream);text-align:center}
.ortho-page .gd-review-slider{all:initial;display:block;max-width:480px;margin:40px auto 0;position:relative;font-family:inherit;direction:ltr;padding-bottom:80px;box-sizing:border-box}
.ortho-page .gd-review-slider *{box-sizing:border-box}
.ortho-page .gd-review-slider .gd-card{
  position:relative;border-radius:32px;padding:30px;background:var(--vd-ink);
  border:4px solid transparent;
  background-image:linear-gradient(var(--vd-base-3),var(--vd-base-3)),
    linear-gradient(135deg,rgba(66,133,244,1) 0%,rgba(52,168,83,1) 25%,rgba(251,188,5,1) 50%,rgba(234,67,53,1) 75%,rgba(66,133,244,1) 100%);
  background-origin:padding-box,border-box;background-clip:padding-box,border-box;
  box-shadow:0 16px 50px rgba(0,0,0,.5);
  min-height:260px;display:none;flex-direction:column;justify-content:space-between;
}
.ortho-page .gd-review-slider .gd-card.active{display:flex}
.ortho-page .gd-review-slider .gd-quote{font-size:1.08em;line-height:1.75;color:#f0f0f0;margin:0 0 22px;font-weight:300}
.ortho-page .gd-review-slider .gd-meta{display:flex;align-items:center;gap:12px;border-left:2px solid rgba(255,255,255,.3);padding-left:14px}
.ortho-page .gd-review-slider .gd-avatar{width:44px;height:44px;background:#4285F4;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ortho-page .gd-review-slider .gd-avatar svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.ortho-page .gd-review-slider .gd-stars{display:flex;gap:3px}
.ortho-page .gd-review-slider .star{width:18px;height:18px;color:#FFD700}
.ortho-page .gd-review-slider .gd-name{margin-left:auto;color:rgba(255,255,255,.85);font-size:1em;font-weight:600;white-space:nowrap}
.ortho-page .gd-review-slider .gd-google{display:block;margin:16px auto 0;width:46px;height:15px;opacity:.9}
.ortho-page .gd-review-slider .gd-arrow{all:initial;position:absolute;bottom:8px;height:48px;width:48px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .3s;backdrop-filter:blur(4px)}
.ortho-page .gd-review-slider .gd-arrow:hover{border-color:#fff;background:rgba(255,255,255,.15)}
.ortho-page .gd-review-slider .gd-arrow svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5;fill:none}
.ortho-page .gd-review-slider .gd-prev{left:calc(50% - 58px)}
.ortho-page .gd-review-slider .gd-next{right:calc(50% - 58px)}

/* FAQ */
.ortho-page .faq-section{background:#fff}
.ortho-page .faq-list{max-width:820px;margin:50px auto 0}
.ortho-page .faq-item{border:1px solid var(--vd-line);border-radius:var(--ortho-radius-sm);margin-bottom:16px;overflow:hidden;background:#fff;transition:.3s}
.ortho-page .faq-item.active{border-color:var(--vd-gold);box-shadow:var(--vd-shadow)}
.ortho-page .faq-question{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;cursor:pointer}
.ortho-page .faq-question h3{font-size:1rem;font-weight:700;color:var(--vd-ink)}
.ortho-page .faq-num{color:var(--vd-gold);font-weight:800;margin-right:10px}
.ortho-page .faq-icon{min-width:32px;height:32px;border-radius:50%;background:var(--vd-gold-2);color:var(--vd-base);display:flex;align-items:center;justify-content:center;transition:.35s var(--vd-ease);flex-shrink:0}
.ortho-page .faq-item.active .faq-icon{transform:rotate(135deg);background:var(--vd-gold);color:#fff}
.ortho-page .faq-answer{max-height:0;overflow:hidden;transition:max-height .45s var(--vd-ease)}
.ortho-page .faq-answer-inner{padding:0 26px 24px;color:var(--vd-muted);font-size:.94rem}
.ortho-page .faq-answer-inner p{margin-bottom:10px}
.ortho-page .faq-answer-inner ul{margin:10px 0 10px 6px}
.ortho-page .faq-answer-inner li{position:relative;padding-left:20px;margin-bottom:6px}
.ortho-page .faq-answer-inner li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--vd-sage)}
.ortho-page .faq-answer-inner b{color:var(--vd-ink)}

/* CTA Banner */
.ortho-page .cta-banner{background:linear-gradient(120deg,var(--vd-gold),var(--vd-base));color:#fff;text-align:center;padding:80px 0}
.ortho-page .cta-banner h2{color:#fff;margin-bottom:14px}
.ortho-page .cta-banner p{color:rgba(255,255,255,.9);margin-bottom:30px;font-size:1.05rem}
.ortho-page .cta-banner .btn-white{background:#fff;color:var(--vd-base);box-shadow:0 12px 30px rgba(0,0,0,.15)}
.ortho-page .cta-banner .btn-white:hover{background:var(--vd-ink);color:#fff;transform:translateY(-3px)}

/* ==================== RESPONSIVE ==================== */
@media(max-width:992px){
  .ortho-page .hero-grid,
  .ortho-page .split,.ortho-page .split.reverse,
  .ortho-page .ba-layout,.ortho-page .ba-layout.reverse,
  .ortho-page .doctor-grid{grid-template-columns:1fr!important;gap:40px}
  .ortho-page .split.reverse .split-media,
  .ortho-page .split.reverse .split-text,
  .ortho-page .ba-layout.reverse .ba-slider-wrap,
  .ortho-page .ba-layout.reverse .ba-text{order:initial!important}
  .ortho-page .why-grid,.ortho-page .case-grid,.ortho-page .invest-grid{grid-template-columns:1fr 1fr}
  .ortho-page .hero-visual{max-width:500px;margin:0 auto}
  .ortho-page .aligner-img-wrap{min-height:300px}
  .ortho-page .doctor-photo-card{aspect-ratio:4/3}
}
@media(max-width:640px){
  .ortho-page section{padding:60px 0}
  .ortho-page .container{padding:0 18px}
  .ortho-page .why-grid,.ortho-page .case-grid,.ortho-page .invest-grid{grid-template-columns:1fr}
  .ortho-page .hero{padding:50px 0 60px}
  .ortho-page .hero-cta-row{flex-direction:column}
  .ortho-page .hero-cta-row .btn{width:100%}
  .ortho-page .aligner-img-wrap{min-height:240px;padding:20px}
  .ortho-page .doctor-stats{grid-template-columns:1fr 1fr}
  .ortho-page .process-timeline::before{left:24px}
  .ortho-page .process-num{min-width:48px;height:48px;font-size:1.05rem}
  .ortho-page .process-content{padding:20px}
  .ortho-page .ba-slider-wrap{max-width:100%}
  .ortho-page .doctor-actions{flex-direction:column}
  .ortho-page .doctor-actions .btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  .ortho-page .doctor-stats{grid-template-columns:1fr}
}

/* Respect reduced motion for the reviews carousel + card entrance (global.css already
   handles .reveal's own reduced-motion rule; this covers the page's own hover/scale motion) */
@media (prefers-reduced-motion: reduce){
  .ortho-page .doctor-photo-card img,
  .ortho-page .why-card,
  .ortho-page .case-card,
  .ortho-page .invest-card,
  .ortho-page .gd-review-slider .gd-arrow{transition:none!important}
  .ortho-page .doctor-photo-card:hover img{transform:none}
}