/* ============================================================
   LEGACY GLOBAL IMMIGRATION v2  Main Stylesheet
   ============================================================ */

/*  Variables  */
:root {
  --navy:    #06111f;
  --navy-1:  #091929;
  --navy-2:  #0d2035;
  --navy-3:  #122840;
  --gold:    #d4a843;
  --gold-l:  #e8c56e;
  --gold-d:  #b38a2c;
  --white:   #ffffff;
  --off:     #f0f4f8;
  --text:    #2d3748;
  --muted:   #64748b;
  --light:   #94a3b8;
  --success: #22c55e;
  --font-h:  'Outfit', sans-serif;
  --font-b:  'DM Sans', sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);
  --r:       .75rem;
  --r-lg:    1.25rem;
  --shadow:  0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 64px rgba(0,0,0,.12);
}

/*  Reset  */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:var(--font-b); color:var(--text); background:#fff; line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; }

/*  Container  */
.container { max-width:1240px; margin:0 auto; padding:0 1.5rem; }

/*  Utility  */
.text-center { text-align:center; }
.section { padding:5rem 0; }

/* 
   PRELOADER
 */
#preloader {
  position:fixed; inset:0; background:var(--navy);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.prl-content { display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.prl-brand { font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.prl-brand span { color:var(--gold); }
.prl-bar { width:200px; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.prl-fill { height:100%; background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l)); border-radius:2px; animation:prlLoad 1.4s var(--ease) forwards; }
@keyframes prlLoad { from{width:0} to{width:100%} }
.prl-label { font-size:.8rem; color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase; }

/* 
   TOP BAR
 */
.topbar { background:var(--navy); padding:.55rem 0; font-size:.82rem; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.topbar-left { display:flex; gap:1.6rem; flex-wrap:wrap; }
.topbar-left a, .topbar-left span { color:rgba(255,255,255,.65); display:flex; align-items:center; gap:.4rem; transition:color .2s; }
.topbar-left a:hover { color:var(--gold); }
.topbar-left i { color:var(--gold); font-size:.78rem; }
.topbar-right { display:flex; gap:.5rem; }
.topbar-right a {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);
  font-size:.75rem; transition:background .2s, color .2s;
}
.topbar-right a:hover { background:var(--gold); color:var(--navy); }

/* 
   HEADER
 */
#header {
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:1rem 0;
  background:transparent;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease), top .35s var(--ease);
}
/*
  IMPORTANT: backdrop-filter is on ::before, NOT on #header itself.
  When backdrop-filter is set directly on a position:fixed element it becomes
  a "containing block" for any position:fixed children — trapping the mobile
  nav drawer inside the header's 72px box instead of the full viewport.
  Using ::before avoids this while keeping the visual blur effect.
*/
#header::before {
  content:''; position:absolute; inset:0; z-index:-1;
  transition:background .35s var(--ease);
}
#header.scrolled {
  padding:.65rem 0;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
#header.scrolled::before {
  background:rgba(6,17,31,.97);
  backdrop-filter:blur(12px);
}
/* Inner pages: solid header from the start */
body.inner-page #header {
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
body.inner-page #header::before {
  background:rgba(6,17,31,.97);
  backdrop-filter:blur(12px);
}
/* Inner pages: go translucent while user is reading content */
body.inner-page #header.reading { box-shadow:none; }
body.inner-page #header.reading::before {
  background:rgba(6,17,31,.72);
  backdrop-filter:blur(20px) saturate(1.4);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:.75rem; }
.logo-icon { width:40px; height:40px; border-radius:.5rem; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--navy); flex-shrink:0; }
.logo-img  { height:40px; width:auto; display:block; flex-shrink:0; object-fit:contain; }
.logo-text { display:flex; flex-direction:column; }
.logo-name { font-family:var(--font-h); font-weight:800; font-size:1.05rem; color:#fff; line-height:1.1; }
.logo-tagline { font-size:.67rem; color:rgba(255,255,255,.45); letter-spacing:.05em; text-transform:uppercase; }

/* Nav */
.nav-menu { display:flex; gap:.25rem; align-items:center; }
.nav-link { padding:.45rem .85rem; border-radius:.4rem; font-size:.88rem; font-weight:500; color:rgba(255,255,255,.75); transition:color .2s, background .2s; }
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,.08); }
/* Hide mobile-only nav extras on desktop */
.nav-menu .nm-footer,
.nav-menu .nm-cta-item { display:none; }
.nav-link i { display:none; }

/* Btn */
.btn-appointment {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1.3rem; border-radius:var(--r);
  background:var(--gold); color:var(--navy);
  font-size:.85rem; font-weight:700; font-family:var(--font-h);
  white-space:nowrap;
  transition:background .2s, transform .2s;
}
.btn-appointment:hover { background:var(--gold-l); transform:translateY(-1px); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:.25rem; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Header top position is set dynamically by JS (initHeader). body padding-top stays 0. */

/* 
   HERO
 */
.hero {
  position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center;
  padding:7rem 0 4rem;
}
/* Multiple bg layers — JS crossfades between them */
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.6s ease;
  transform:scale(1.06);
  animation:kenBurns 8s ease-in-out infinite alternate;
}
.hero-bg.is-active { opacity:1; }
@keyframes kenBurns { from{transform:scale(1.06) translateX(0)} to{transform:scale(1.12) translateX(-1%)} }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(6,17,31,.82) 0%, rgba(6,17,31,.62) 50%, rgba(6,17,31,.85) 100%);
}

/* Flight path SVG */
.flight-svg {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}

/* Hero layout — single centered column */
.hero-container {
  position:relative; z-index:4;
  display:flex; flex-direction:column;
  align-items:center;
}

/* Hero text — centered */
.hero-text { text-align:center; max-width:800px; width:100%; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem; border-radius:999px;
  background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.25);
  color:var(--gold-l); font-size:.82rem; font-weight:600; letter-spacing:.04em;
  margin-bottom:1.5rem;
}
.badge-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,168,67,.5)} 50%{box-shadow:0 0 0 7px rgba(212,168,67,0)} }

.hero-h1 { font-family:var(--font-h); font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:900; line-height:1.12; color:#fff; margin-bottom:1rem; letter-spacing:-.02em; }
.hero-h1 em.h1-gold { white-space: nowrap; }
em.h1-gold { font-style:normal; color:var(--gold); }
.hero-typed-line {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:1.8rem;
}
.htl-label {
  color:rgba(255,255,255,.45); font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.htl-phrase {
  font-family:var(--font-h); font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--gold);
}
.typed-cur { color:var(--gold); animation:blink .7s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-sub { color:rgba(255,255,255,.55); font-size:1rem; font-style:italic; line-height:1.6; max-width:580px; margin:0 auto 2rem; letter-spacing:.01em; }

.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; justify-content:center; }

.btn-cta-primary {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 2rem; border-radius:var(--r);
  background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l));
  background-size:200% 200%; background-position:0% 50%;
  color:var(--navy); font-family:var(--font-h); font-weight:700; font-size:.95rem;
  transition:background-position .4s, transform .2s, box-shadow .2s;
  box-shadow:0 4px 20px rgba(212,168,67,.35);
}
.btn-cta-primary:hover { background-position:100% 50%; transform:translateY(-2px); box-shadow:0 8px 32px rgba(212,168,67,.45); }

.btn-cta-ghost {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.8rem; border-radius:var(--r);
  border:1.5px solid rgba(255,255,255,.3); color:#fff;
  font-family:var(--font-h); font-weight:600; font-size:.95rem;
  transition:border-color .2s, background .2s, transform .2s;
}
.btn-cta-ghost:hover { border-color:#fff; background:rgba(255,255,255,.07); transform:translateY(-2px); }
.btn-cta-ghost i { font-size:.8rem; transition:transform .2s; }
.btn-cta-ghost:hover i { transform:translateX(4px); }

/* Hero counters */
.hero-counters { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.hc-item { display:flex; flex-direction:column; }
.hc-num { font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:#fff; line-height:1; }
.hc-lbl { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:.2rem; }
.hc-div { width:1px; height:36px; background:rgba(255,255,255,.15); }

/* (boarding pass and stamp elements removed — no longer used) */

/* Scroll indicator */
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:4; }
.scroll-track { width:1.5px; height:50px; background:rgba(255,255,255,.15); position:relative; border-radius:2px; overflow:hidden; }
.scroll-thumb { position:absolute; top:0; width:100%; height:40%; background:var(--gold); border-radius:2px; animation:scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%{top:0;opacity:1} 100%{top:100%;opacity:0} }
.hero-scroll span { font-size:.7rem; color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase; }



/* 
   TRUST STRIP
 */
.trust-strip { background:var(--navy-2); padding:1.8rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:900px){ .trust-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px){ .trust-grid { grid-template-columns:1fr; } }
.trust-item { display:flex; align-items:flex-start; gap:1rem; }
.trust-item i { font-size:1.4rem; color:var(--gold); flex-shrink:0; margin-top:.15rem; }
.trust-item strong { display:block; font-size:.88rem; font-weight:700; color:#fff; margin-bottom:.2rem; }
.trust-item span { font-size:.78rem; color:rgba(255,255,255,.5); line-height:1.5; }

/*
   SERVICE ICON CARDS (homepage)
 */
.svc-icon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media(max-width:900px){ .svc-icon-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px){ .svc-icon-grid { grid-template-columns:1fr; } }
.svc-icon-card { display:flex; flex-direction:column; gap:.9rem; padding:1.75rem; border-radius:var(--r-lg); border:1px solid #e8edf2; background:#fff; text-decoration:none; color:inherit; transition:transform .3s, box-shadow .3s, border-color .3s; }
.svc-icon-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(212,168,67,.3); }
.svc-icon-card .svc-icon { width:48px; height:48px; border-radius:.6rem; background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.2); display:flex; align-items:center; justify-content:center; color:var(--gold-d); font-size:1.2rem; }
.svc-icon-card h3 { font-family:var(--font-h); font-size:1rem; font-weight:700; color:var(--navy); }
.svc-icon-card p { font-size:.87rem; color:var(--muted); line-height:1.65; flex:1; }
.svc-icon-card .svc-more { display:inline-flex; align-items:center; gap:.4rem; color:var(--gold-d); font-weight:600; font-size:.82rem; transition:gap .2s; }
.svc-icon-card:hover .svc-more { gap:.7rem; }

/*
   BOUTIQUE ABOUT (homepage)
 */
.boutique-wrap { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:900px){ .boutique-wrap { grid-template-columns:1fr; } }
.boutique-visual { position:relative; }
.boutique-visual img { width:100%; height:460px; object-fit:cover; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.cicc-badge { position:absolute; top:2rem; left:2rem; background:#fff; border-radius:var(--r); padding:.85rem 1.2rem; display:flex; align-items:center; gap:.75rem; box-shadow:0 8px 40px rgba(0,0,0,.15); border:1px solid #e8edf2; animation:floatCard 5s ease-in-out infinite; }
.cicc-badge i { font-size:1.4rem; color:var(--gold); }
.cicc-badge strong { display:block; font-size:.85rem; font-weight:700; color:var(--navy); }
.cicc-badge span { font-size:.73rem; color:var(--muted); }
.boutique-pillars { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.bp-item { display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.25rem; border-radius:var(--r); border:1px solid #e8edf2; transition:border-color .2s, box-shadow .2s; }
.bp-item:hover { border-color:rgba(212,168,67,.3); box-shadow:var(--shadow); }
.bp-icon { width:40px; height:40px; border-radius:.5rem; background:rgba(212,168,67,.1); display:flex; align-items:center; justify-content:center; color:var(--gold-d); font-size:1rem; flex-shrink:0; }
.bp-item strong { font-family:var(--font-h); font-size:.9rem; font-weight:700; color:var(--navy); display:block; margin-bottom:.25rem; }
.bp-item p { font-size:.84rem; color:var(--muted); line-height:1.6; margin:0; }

/*
   TRANSPARENCY NOTICE
 */
.hl-notice { background:rgba(212,168,67,.06); border:1px solid rgba(212,168,67,.2); border-radius:var(--r); padding:1.5rem 2rem; display:flex; gap:1.2rem; align-items:flex-start; }
.hl-notice > i { font-size:1.3rem; color:var(--gold-d); flex-shrink:0; margin-top:.1rem; }
.hl-notice p { font-size:.88rem; color:var(--muted); line-height:1.75; margin:0; }
.hl-notice strong { color:var(--navy); }

/* 
   SECTION HEADS
 */
.section-tag { display:inline-block; padding:.35rem .9rem; border-radius:999px; background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.25); color:var(--gold-d); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.section-title { font-family:var(--font-h); font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; color:var(--navy); line-height:1.2; letter-spacing:-.02em; margin-bottom:1rem; }
.section-sub { color:var(--muted); font-size:1rem; max-width:600px; line-height:1.7; }
.section-head.text-center .section-sub { margin:0 auto; }
.section-head { margin-bottom:3rem; }

/* 
   SERVICES
 */
.services-section { background:#fff; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:1024px){ .svc-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .svc-grid { grid-template-columns:1fr; } }

.svc-card { display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; border:1px solid #e8edf2; transition:transform .3s, box-shadow .3s; text-decoration:none; color:inherit; }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.svc-img { height:200px; background-size:cover; background-position:center; position:relative; }
.svc-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,17,31,.5),transparent); }
.svc-body { flex:1; padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.svc-icon { width:44px; height:44px; border-radius:.6rem; background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.2); display:flex; align-items:center; justify-content:center; color:var(--gold-d); font-size:1.1rem; }
.svc-body h3 { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:var(--navy); }
.svc-body p { font-size:.9rem; color:var(--muted); line-height:1.65; flex:1; }
.svc-more { display:inline-flex; align-items:center; gap:.4rem; color:var(--gold-d); font-weight:600; font-size:.85rem; margin-top:.25rem; transition:gap .2s; }
.svc-card:hover .svc-more { gap:.7rem; }

/* 
   ABOUT
 */
.about-section { background:var(--off); }
.about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:900px){ .about-wrap { grid-template-columns:1fr; } }

.about-img-frame { position:relative; border-radius:1.5rem; overflow:hidden; box-shadow:var(--shadow-lg); }
.about-img-frame img { width:100%; height:480px; object-fit:cover; }
.about-exp-badge {
  position:absolute; bottom:2rem; right:-1rem;
  background:var(--gold); color:var(--navy);
  padding:1rem 1.4rem; border-radius:var(--r);
  display:flex; align-items:center; gap:.75rem;
  box-shadow:0 8px 32px rgba(212,168,67,.4);
  animation:floatCard 5s ease-in-out infinite;
}
.exp-num { font-family:var(--font-h); font-size:2rem; font-weight:900; line-height:1; }
.exp-num sup { font-size:1rem; }
.exp-lbl { font-size:.78rem; font-weight:700; line-height:1.4; }

.about-content-col { display:flex; flex-direction:column; gap:1.5rem; }
.about-lead { font-size:1.02rem; color:var(--text); line-height:1.75; }
.about-points { display:flex; flex-direction:column; gap:1.2rem; }
.ap-item { display:flex; gap:1rem; align-items:flex-start; }
.ap-icon { width:42px; height:42px; border-radius:.6rem; background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.2); display:flex; align-items:center; justify-content:center; color:var(--gold-d); font-size:1rem; flex-shrink:0; }
.ap-item strong { font-family:var(--font-h); font-weight:700; font-size:.95rem; color:var(--navy); display:block; margin-bottom:.2rem; }
.ap-item p { font-size:.88rem; color:var(--muted); line-height:1.6; }
.about-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem; }

.btn-solid { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.8rem; border-radius:var(--r); background:var(--gold); color:var(--navy); font-family:var(--font-h); font-weight:700; font-size:.9rem; transition:background .2s, transform .2s; }
.btn-solid:hover { background:var(--gold-l); transform:translateY(-1px); }
.btn-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.73rem 1.8rem; border-radius:var(--r); border:1.5px solid var(--gold); color:var(--gold-d); font-family:var(--font-h); font-weight:700; font-size:.9rem; transition:background .2s, color .2s; }
.btn-outline:hover { background:var(--gold); color:var(--navy); }

/* 
   PROCESS
 */
.process-section { background:#fff; }
.process-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:start; gap:.5rem; }
@media(max-width:880px){ .process-steps { grid-template-columns:1fr 1fr; gap:2rem; } .ps-connector{display:none;} }
@media(max-width:540px){ .process-steps { grid-template-columns:1fr; } }

.ps-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding:2rem 1rem; border-radius:var(--r-lg); background:var(--off); border:1px solid #e8edf2; transition:transform .3s, box-shadow .3s; position:relative; }
.ps-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.ps-num { position:absolute; top:1rem; right:1rem; font-family:var(--font-h); font-size:.7rem; font-weight:800; color:rgba(212,168,67,.25); letter-spacing:.05em; }
.ps-icon { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,rgba(212,168,67,.15),rgba(212,168,67,.05)); border:2px solid rgba(212,168,67,.3); display:flex; align-items:center; justify-content:center; color:var(--gold-d); font-size:1.3rem; }
.ps-item h4 { font-family:var(--font-h); font-size:1rem; font-weight:700; color:var(--navy); }
.ps-item p { font-size:.88rem; color:var(--muted); line-height:1.6; }
.ps-connector { display:flex; align-items:flex-start; padding-top:3.5rem; color:#d1d9e2; font-size:1.1rem; }

/* 
   DESTINATIONS
 */
.dest-section { background:var(--off); }
.dest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:1024px){ .dest-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .dest-grid { grid-template-columns:1fr; } }

.dest-card { position:relative; border-radius:var(--r-lg); overflow:hidden; height:320px; cursor:pointer; }
.dest-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s var(--ease); }
.dest-card:hover .dest-img { transform:scale(1.08); }
.dest-overlay {
  position:absolute; inset:0; padding:1.5rem;
  background:linear-gradient(to top, rgba(6,17,31,.92) 0%, rgba(6,17,31,.3) 60%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  transition:background .4s;
}
.dest-card:hover .dest-overlay { background:linear-gradient(to top, rgba(6,17,31,.96) 0%, rgba(6,17,31,.6) 60%, rgba(6,17,31,.2) 100%); }
.dest-flag { display:inline-block; margin-bottom:.5rem; }
.dest-flag img { display:block; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.dest-overlay h3 { font-family:var(--font-h); font-size:1.35rem; font-weight:800; color:#fff; }
.dest-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.dest-tags span { padding:.2rem .6rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.75); font-size:.7rem; }
.dest-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem 1rem; border-radius:var(--r); background:var(--gold); color:var(--navy); font-size:.8rem; font-weight:700; width:fit-content; margin-top:.25rem; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.dest-card:hover .dest-btn { opacity:1; transform:translateY(0); }

/* 
   STATS
 */
.stats-section { position:relative; overflow:hidden; padding:5rem 0; }
.stats-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.stats-overlay { position:absolute; inset:0; background:rgba(6,17,31,.88); }
.stats-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
@media(max-width:800px){ .stats-grid { grid-template-columns:repeat(2,1fr); } }
.stat-item { color:#fff; }
.stat-item i { font-size:2.2rem; color:var(--gold); margin-bottom:.75rem; display:block; }
.stat-num { font-family:var(--font-h); font-size:2.8rem; font-weight:900; line-height:1; margin-bottom:.4rem; }
.stat-lbl-lg { font-family:var(--font-h); font-size:1.25rem; font-weight:700; line-height:1.2; margin-bottom:.35rem; color:#fff; }
.stat-lbl { font-size:.88rem; color:rgba(255,255,255,.55); }

/* 
   WHY CHOOSE US
 */
.why-section { background:#fff; }
.why-wrap { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:900px){ .why-wrap { grid-template-columns:1fr; } }

.why-img-col { position:relative; }
.why-img-col img { border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:100%; height:460px; object-fit:cover; }
.why-cert {
  position:absolute; bottom:2rem; left:-1.5rem;
  background:#fff; border-radius:var(--r);
  padding:.85rem 1.2rem; display:flex; align-items:center; gap:.75rem;
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  border:1px solid #e8edf2;
  animation:floatCard 6s ease-in-out infinite;
}
.why-cert i { font-size:1.5rem; color:var(--gold); }
.why-cert strong { display:block; font-size:.88rem; font-weight:700; color:var(--navy); }
.why-cert span { font-size:.75rem; color:var(--muted); }

.why-content { display:flex; flex-direction:column; gap:1.5rem; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.wg-item { display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem; border-radius:var(--r); border:1px solid #e8edf2; transition:box-shadow .2s, border-color .2s; }
.wg-item:hover { box-shadow:var(--shadow); border-color:rgba(212,168,67,.3); }
.wg-icon { width:40px; height:40px; border-radius:.5rem; background:rgba(var(--ic, 212,168,67),.1); background:color-mix(in srgb, var(--ic,#d4a843) 12%, transparent); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ic,var(--gold-d)); flex-shrink:0; }
.wg-item h5 { font-family:var(--font-h); font-size:.88rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; }
.wg-item p { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* 
   TESTIMONIALS
 */
.testi-section { background:var(--off); }
.testi-wrap { overflow:hidden; border-radius:var(--r-lg); }
.testi-track { display:flex; transition:transform .5s var(--ease); }
.testi-card { flex:0 0 calc(100% / 3); padding:2rem; background:#fff; border:1px solid #e8edf2; border-radius:var(--r-lg); margin:.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1rem; }
@media(max-width:900px){ .testi-card { flex:0 0 calc(100% / 2 - 1rem); } }
@media(max-width:600px){ .testi-card { flex:0 0 calc(100% - 1rem); } }

.tq-icon { color:rgba(212,168,67,.4); font-size:1.5rem; }
.testi-stars { color:var(--gold); letter-spacing:1px; font-size:1rem; }
.testi-quote { color:var(--text); font-size:.9rem; line-height:1.75; font-style:italic; flex:1; }
.testi-author { display:flex; align-items:center; gap:.75rem; border-top:1px solid #e8edf2; padding-top:.75rem; }
.ta-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold-d),var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:700; font-size:.8rem; color:var(--navy); flex-shrink:0; }
.testi-author strong { display:block; font-size:.88rem; font-weight:700; color:var(--navy); }
.testi-author span { font-size:.78rem; color:var(--muted); }

.testi-controls { display:flex; align-items:center; gap:1.5rem; justify-content:center; margin-top:2rem; }
.testi-btn { width:42px; height:42px; border-radius:50%; border:1.5px solid #d1d9e2; background:#fff; color:var(--navy); font-size:.95rem; transition:background .2s, border-color .2s, color .2s; }
.testi-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.testi-dots { display:flex; gap:.5rem; }
.testi-dot { width:8px; height:8px; border-radius:50%; background:#d1d9e2; cursor:pointer; transition:background .2s, transform .2s; }
.testi-dot.active { background:var(--gold); transform:scale(1.3); }

/* 
   CTA
 */
.cta-section { position:relative; overflow:hidden; padding:6rem 0; }
.cta-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.cta-overlay { position:absolute; inset:0; background:linear-gradient(115deg, rgba(6,17,31,.97) 0%, rgba(6,17,31,.85) 50%, rgba(6,17,31,.7) 100%); }
.cta-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:860px){ .cta-inner { grid-template-columns:1fr; } }
.cta-tag { display:inline-block; padding:.4rem .9rem; border-radius:999px; border:1px solid rgba(212,168,67,.3); background:rgba(212,168,67,.08); color:var(--gold-l); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.2rem; }
.cta-text h2 { font-family:var(--font-h); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:#fff; line-height:1.2; margin-bottom:1rem; letter-spacing:-.02em; }
.cta-text p { color:rgba(255,255,255,.65); font-size:.97rem; line-height:1.75; }
.cta-actions { display:flex; flex-direction:column; gap:1rem; }
.cta-phone { display:flex; align-items:center; gap:.75rem; color:#fff; margin-top:.25rem; }
.cta-phone i { font-size:1.3rem; color:var(--gold); }
.cta-phone span { font-size:.78rem; color:rgba(255,255,255,.5); display:block; }
.cta-phone a { font-size:1.1rem; font-weight:700; color:#fff; }

/* 
   FOOTER
 */
footer { background:var(--navy-2); color:rgba(255,255,255,.65); padding:4rem 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
@media(max-width:1024px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid { grid-template-columns:1fr; } }

.footer-about p { font-size:.88rem; line-height:1.75; margin-bottom:1.5rem; }
.foot-social { display:flex; gap:.5rem; }
.foot-social a { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:rgba(255,255,255,.5); transition:background .2s, border-color .2s, color .2s; }
.foot-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }

.footer-col h5 { font-family:var(--font-h); font-weight:700; font-size:.95rem; color:#fff; margin-bottom:1.2rem; padding-bottom:.6rem; border-bottom:2px solid rgba(212,168,67,.25); }
.footer-col ul li { margin-bottom:.6rem; }
.footer-col ul a { font-size:.87rem; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.5rem; transition:color .2s, gap .2s; }
.footer-col ul a:hover { color:var(--gold-l); gap:.75rem; }
.footer-col ul i { font-size:.7rem; color:rgba(212,168,67,.5); }

.fct { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.9rem; font-size:.85rem; line-height:1.6; }
.fct i { color:var(--gold); font-size:.9rem; flex-shrink:0; margin-top:.1rem; }
.fct a { color:rgba(255,255,255,.6); transition:color .2s; }
.fct a:hover { color:var(--gold-l); }

.footer-bottom { padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.05); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:rgba(255,255,255,.35); }
.footer-bottom-inner div { display:flex; gap:1.5rem; }
.footer-bottom-inner a { color:rgba(255,255,255,.35); transition:color .2s; }
.footer-bottom-inner a:hover { color:var(--gold-l); }

/* 
   BACK TO TOP
 */
#backTop {
  position:fixed; bottom:2rem; right:2rem; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background:var(--gold); color:var(--navy); font-size:1.1rem;
  box-shadow:0 4px 20px rgba(212,168,67,.5);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s; display:flex; align-items:center; justify-content:center;
}
#backTop.visible { opacity:1; visibility:visible; transform:translateY(0); }
#backTop:hover { background:var(--gold-l); transform:translateY(-3px); }

/* 
   AOS (scroll reveal)
 */
[data-aos] { opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-aos].aos-in { opacity:1; transform:translateY(0); }

/* 
   RESPONSIVE MISC
 */
@media(max-width:780px){
  /* Topbar: hide hours, centre remaining items */
  .topbar-left span { display:none; }
  .topbar-inner { justify-content:center; gap:.6rem; }
  .topbar-left { gap:1rem; justify-content:center; flex-wrap:wrap; }

  /*
    Z-INDEX STACK (mobile):
      #header         = 999  (creates stacking context; nav-menu lives inside)
      .nav-menu       = 1000 (inside header's context, renders above header bg)
      .hamburger      = 1001 (above nav-menu so X is always tappable)
      .nav-overlay    = 990  (BELOW header so it dims the page but NEVER covers
                              the drawer — equal/higher z-index caused the drawer
                              to be painted under the overlay making it invisible)
  */
  .nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:990; opacity:0; transition:opacity .35s; }
  .nav-overlay.show { display:block; opacity:1; }

  /* Nav drawer */
  .nav-menu { display:none; position:fixed; inset:0 0 0 auto; width:82vw; max-width:340px; background:linear-gradient(160deg,#06111f 0%,#0a1c33 100%); padding:1.5rem 0 0; flex-direction:column; gap:0; overflow:hidden auto; z-index:1000; transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-8px 0 48px rgba(0,0,0,.45); border-left:1px solid rgba(255,255,255,.07); }
  .nav-menu.open { display:flex; transform:translateX(0); }

  /* Mobile nav links */
  .nav-menu > li:not(.nm-cta-item, .nm-footer) { list-style:none; border-bottom:1px solid rgba(255,255,255,.05); }
  .nav-link { display:flex; align-items:center; gap:.9rem; padding:1rem 1.5rem; color:rgba(255,255,255,.72); font-size:.98rem; font-weight:500; border-radius:0; min-height:52px; border-left:3px solid transparent; background:none; }
  .nav-link i { display:flex; width:20px; flex-shrink:0; text-align:center; justify-content:center; font-size:.95rem; color:rgba(212,168,67,.55); }
  .nav-link.active { color:#fff; background:rgba(212,168,67,.08); border-left:3px solid var(--gold); }
  .nav-link.active i { color:var(--gold); }
  .nav-link:hover { background:rgba(255,255,255,.05); border-left-color:rgba(212,168,67,.35); color:#fff; }

  /* Mobile CTA */
  .nm-cta-item { list-style:none; padding:1.25rem 1.5rem .5rem; display:block !important; }
  .nm-cta { display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.85rem; border-radius:var(--r); background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l)); background-size:200% 200%; background-position:0% 50%; color:var(--navy); font-family:var(--font-h); font-weight:700; font-size:.9rem; transition:background-position .4s, transform .2s; }
  .nm-cta:hover { background-position:100% 50%; transform:translateY(-1px); }

  /* Mobile nav footer */
  .nm-footer { list-style:none; padding:1rem 1.5rem 2rem; margin-top:auto; border-top:1px solid rgba(255,255,255,.07); display:flex !important; flex-direction:column; gap:.85rem; }
  .nm-phone { display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.55); font-size:.85rem; transition:color .2s; text-decoration:none; }
  .nm-phone i { color:var(--gold); font-size:.9rem; }
  .nm-phone:hover { color:#fff; }
  .nm-socials { display:flex; gap:.7rem; }
  .nm-socials a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:.82rem; transition:background .2s, color .2s, border-color .2s; text-decoration:none; }
  .nm-socials a:hover { background:rgba(212,168,67,.15); border-color:rgba(212,168,67,.4); color:var(--gold); }

  /* Hamburger must be topmost so X is always tappable even when drawer is open */
  .hamburger { display:flex; z-index:1001; position:relative; }
  .header-actions .btn-appointment { display:none; }
  .why-grid { grid-template-columns:1fr; }

  /* Section spacing tighter on mobile */
  .section { padding:3.5rem 0; }
  .container { padding:0 1.1rem; }

  /* Hero: add bottom padding so content clears gateway strip */
  .hero { padding-bottom:6rem; }

  /* Section headings */
  .section-title { font-size:clamp(1.5rem,5vw,2rem); }
  .section-sub { font-size:.9rem; }

  /* Hero sub */
  .hero-sub { font-size:.9rem; }

  /* Hero counters: wrap into 2×2 grid */
  .hero-counters { display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.5rem; }
  .hc-div { display:none; }
  .hc-item { align-items:center; }
  .hc-num { font-size:1.1rem; }

  /* CTA buttons full width on mobile */
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .btn-cta-primary, .btn-cta-ghost { justify-content:center; }
  .cta-actions .btn-cta-primary, .cta-actions .btn-cta-ghost { justify-content:center; }

  /* Chatbot: fluid height on small screens */
  .chatbot-wrap { height:auto; max-height:calc(100dvh - 180px); min-height:420px; }
}
@media(max-width:560px){
  /* Topbar: hide entirely — too crowded on phones */
  .topbar { display:none; }

  /* Contact app: topbar gone at this size so header sits at top:0 (~72px tall) */
  .contact-app { padding:72px 0 0 !important; }
  .contact-wrap { min-height:calc(100dvh - 72px) !important; }

  /* Counters already handled at 780px */
  .hero-ctas { flex-direction:column; }
  .cta-actions .btn-cta-primary, .cta-actions .btn-cta-ghost { justify-content:center; }

  /* IP hero tighter */
  .ip-hero { padding:7rem 0 2.5rem; }

  /* Trust grid single column */
  .trust-grid { grid-template-columns:1fr; }

  /* Chatbot full viewport height minus header */
  .chatbot-wrap { max-height:calc(100dvh - 140px); min-height:380px; }

  /* Phone widget labels smaller */
  .cb-dial-sel { font-size:.78rem; }
  .cb-phone-input { font-size:.82rem; }

  /* Footer bottom: stack links */
  .footer-bottom-inner { flex-direction:column; gap:.75rem; text-align:center; }
  .footer-bottom-inner div { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

  /* Back to top button: smaller on phones */
  #backTop { width:40px; height:40px; font-size:.85rem; bottom:1.2rem; right:1.2rem; }
}

/* 
   HERO GATEWAY (index.html bottom nav strip)
 */
.hero-gateway {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  display:flex; justify-content:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.hg-tile {
  flex:1; max-width:220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.45rem; padding:1.1rem 1rem;
  background:rgba(6,17,31,.6);
  backdrop-filter:blur(14px);
  color:rgba(255,255,255,.65);
  border-right:1px solid rgba(255,255,255,.07);
  text-decoration:none;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.hg-tile:last-child { border-right:none; }
.hg-tile:hover { background:rgba(212,168,67,.18); color:#fff; }
.hg-tile:hover .hg-icon { color:var(--gold-l); transform:translateY(-3px); }
.hg-icon {
  font-size:1.25rem; color:var(--gold);
  transition:color .25s, transform .25s var(--ease);
}
.hg-tile span {
  font-family:var(--font-h); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
@media(max-width:700px){
  .hg-tile { max-width:none; padding:.85rem .5rem; }
  .hg-tile span { font-size:.65rem; }
  .hg-icon { font-size:1.05rem; }
}
@media(max-width:420px){
  .hg-tile span { display:none; }
  .hg-tile { padding:.9rem; }
  .hg-icon { font-size:1.15rem; }
}

/* 
   INNER PAGE — body class applied on all subpages
 */
body.inner-page { overflow:auto; }
/* Header on inner pages: compensate for topbar + fixed header */
body.inner-page main { padding-top:0; }

/* 
   INNER PAGE HERO BANNER
 */
.ip-hero {
  position:relative; overflow:hidden;
  padding:8.5rem 0 3.5rem;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.ip-hero::before {
  content:'';
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1600&q=30') center / cover;
  opacity:.06;
}
.ip-hero-deco {
  position:absolute; right:-30px; top:50%; transform:translateY(-50%);
  font-size:16rem; line-height:1;
  color:rgba(255,255,255,.025);
  pointer-events:none; z-index:0;
}
.ip-hero-inner { position:relative; z-index:1; }
.ip-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:rgba(255,255,255,.35);
  margin-bottom:1rem; flex-wrap:wrap;
}
.ip-breadcrumb a { color:var(--gold); transition:color .2s; }
.ip-breadcrumb a:hover { color:var(--gold-l); }
.ip-breadcrumb i { font-size:.6rem; }
.ip-hero h1 {
  font-family:var(--font-h);
  font-size:clamp(1.9rem, 4vw, 3rem);
  font-weight:800; color:#fff; line-height:1.15;
  letter-spacing:-.02em; margin-bottom:.75rem;
}
.ip-hero p {
  color:rgba(255,255,255,.5);
  font-size:1rem; max-width:560px; line-height:1.7;
}

/* 
   CONTACT PAGE
 */
.contact-section { background:var(--off); }
.contact-wrap {
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:4rem; align-items:start;
}
/* Desktop only — tablet + mobile handled by app-shell below */
@media(max-width:600px) { .contact-wrap { grid-template-columns:1fr; gap:0; } }

/* Contact Info */
.contact-info { display:flex; flex-direction:column; gap:1.5rem; }
.contact-intro { font-size:.97rem; color:var(--muted); line-height:1.75; }
.ci-items { display:flex; flex-direction:column; gap:1.2rem; }
.ci-item {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem 1.2rem; border-radius:var(--r);
  background:#fff; border:1px solid #e8edf2;
  transition:box-shadow .2s, border-color .2s;
}
.ci-item:hover { box-shadow:var(--shadow); border-color:rgba(212,168,67,.25); }
.ci-icon {
  width:42px; height:42px; flex-shrink:0;
  border-radius:.6rem; background:rgba(212,168,67,.1);
  border:1px solid rgba(212,168,67,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-d); font-size:1rem;
}
.ci-item div { display:flex; flex-direction:column; gap:.15rem; }
.ci-item strong { font-family:var(--font-h); font-size:.88rem; font-weight:700; color:var(--navy); }
.ci-item a { font-size:.88rem; color:var(--gold-d); font-weight:500; transition:color .2s; }
.ci-item a:hover { color:var(--gold); }
.ci-item span { font-size:.8rem; color:var(--muted); }
.ci-social { display:flex; gap:.5rem; margin-top:.5rem; }
.ci-social a {
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid #d1d9e2; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:.85rem;
  transition:background .2s, border-color .2s, color .2s;
}
.ci-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }

/* Mobile Quick-Contact Bar */
.mob-quick-bar {
  display:none; /* hidden on desktop / tablet */
  flex-direction:column; align-items:center; text-align:center;
  padding:2rem 1.25rem 1.5rem; gap:1.5rem;
}
.mob-quick-bar.mob-hidden { display:none !important; }
.mqb-title { font-family:var(--font-h); font-size:1.4rem; font-weight:800; color:var(--navy); margin:0; }
.mqb-sub { font-size:.88rem; color:var(--muted); margin:0; }
.mqb-tiles {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; width:100%;
}
.mqb-tile {
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.1rem .5rem 1rem; border-radius:var(--r-lg);
  border:1.5px solid #e2e8f0; background:#fff;
  cursor:pointer; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  font-size:inherit; font-family:inherit;
}
.mqb-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.mqb-icon {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.mqb-chat { border-color:rgba(30,90,180,.2); }
.mqb-chat .mqb-icon { background:rgba(30,90,180,.08); color:#1e5ab4; }
.mqb-chat:hover { border-color:rgba(30,90,180,.5); }
.mqb-wa { border-color:rgba(37,211,102,.25); }
.mqb-wa .mqb-icon { background:rgba(37,211,102,.1); color:#1aab6d; }
.mqb-wa:hover { border-color:rgba(37,211,102,.6); }
.mqb-email { border-color:rgba(212,168,67,.25); }
.mqb-email .mqb-icon { background:rgba(212,168,67,.1); color:var(--gold-d); }
.mqb-email:hover { border-color:var(--gold); }
.mqb-name { font-family:var(--font-h); font-size:.85rem; font-weight:700; color:var(--navy); }
.mqb-desc { font-size:.72rem; color:var(--muted); }
.mqb-phone {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:var(--navy); padding:.55rem 1.2rem;
  border-radius:999px; border:1.5px solid #d1d9e2; background:#fff;
  transition:border-color .2s, color .2s; text-decoration:none;
}
.mqb-phone i { color:var(--gold-d); }
.mqb-phone:hover { border-color:var(--gold); color:var(--gold-d); }

/* AI badge on the contact app-bar */
.ca-ai-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.6rem; font-weight:800; font-family:var(--font-h);
  letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff; padding:.15rem .45rem;
  border-radius:999px; vertical-align:middle; margin-left:.3rem;
}

/* Mobile Quick-bar extras */
.mqb-divider {
  display:flex; align-items:center; gap:.75rem; width:100%;
  font-size:.72rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-top:.25rem;
}
.mqb-divider::before, .mqb-divider::after {
  content:''; flex:1; height:1px; background:#e2e8f0;
}
.mqb-topics {
  display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; width:100%;
}
.mqb-topic {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.75rem; font-weight:600; font-family:var(--font-h);
  color:var(--navy); background:#fff;
  border:1.5px solid #e2e8f0; border-radius:999px;
  padding:.3rem .75rem;
  cursor:default;
  transition:border-color .2s, background .2s;
}
.mqb-topic i { color:var(--gold-d); font-size:.7rem; }
.mqb-topic:hover { border-color:var(--gold); background:rgba(212,168,67,.05); }

.mqb-info-row {
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; width:100%;
}
.mqb-info-card {
  display:flex; align-items:flex-start; gap:.6rem;
  background:#fff; border-radius:var(--r); border:1.5px solid #e2e8f0;
  padding:.9rem .75rem;
}
.mqb-info-card i { color:var(--gold-d); font-size:1rem; flex-shrink:0; margin-top:.1rem; }
.mqb-info-card strong { display:block; font-family:var(--font-h); font-size:.78rem; font-weight:700; color:var(--navy); margin-bottom:.2rem; }
.mqb-info-card span { display:block; font-size:.7rem; color:var(--muted); line-height:1.5; }

/* Chatbot back-button (mobile only, hidden on desktop/tablet) */
.cb-back-mob {
  display:none;
  margin-left:auto; background:rgba(255,255,255,.1); border:none; border-radius:.4rem;
  color:rgba(255,255,255,.75); width:34px; height:34px; cursor:pointer;
  align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0;
  transition:background .2s;
}
.cb-back-mob:hover { background:rgba(255,255,255,.2); color:#fff; }

/* ====================================================================
   CONTACT APP SHELL  (tablet 601-1024px  +  mobile ≤600px)
   ==================================================================== */

/* ca-appbar / ca-bottomnav hidden on desktop */
.ca-appbar   { display:none; }
.ca-bottomnav { display:none; }

/* ── TABLET (601-1024px): Two-panel app layout ─────────────────────── */
@media(min-width:601px) and (max-width:1024px) {
  body.contact-page .ip-hero { display:none; }
  body.contact-page .presence-section { display:none; }
  body.contact-page .cta-section { display:none; }

  .contact-app { padding:0 !important; background:#f0f4f8; }
  .ca-container { padding:0 !important; max-width:none !important; }

  .contact-wrap {
    display:grid;
    grid-template-columns:38% 62%;
    grid-template-rows:1fr;
    gap:0;
    margin-top:112px;        /* topbar(~40px) + header(~72px) */
    height:calc(100dvh - 112px);
    overflow:hidden;
    border-radius:0;
  }

  /* App bar hidden on tablet (sidebar handles identity) */
  .ca-appbar   { display:none !important; }
  .ca-bottomnav { display:none !important; }
  .mob-quick-bar { display:none !important; }

  /* Left sidebar — dark app panel */
  .contact-info {
    grid-column:1; grid-row:1;
    display:flex !important;
    flex-direction:column;
    gap:1.5rem;
    background:linear-gradient(175deg, #06111f 0%, #0d1d38 100%);
    padding:2.5rem 1.75rem;
    overflow-y:auto;
    border-right:1px solid rgba(255,255,255,.08);
  }
  /* Sidebar identity block */
  .contact-info::before {
    content:'';
    display:block;
    width:60px; height:60px;
    border-radius:50%;
    background:rgba(212,168,67,.12);
    border:2px solid rgba(212,168,67,.3);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23d4a843' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:50%;
    background-position:center 55%;
    flex-shrink:0;
    margin-bottom:.25rem;
  }
  .contact-info .section-tag {
    border-color:rgba(212,168,67,.3); color:var(--gold); background:rgba(212,168,67,.08);
  }
  .contact-info .section-title { color:#fff; font-size:1.15rem; }
  .contact-info .ci-item {
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
  }
  .contact-info .ci-icon {
    background:rgba(212,168,67,.12);
    border-color:rgba(212,168,67,.25);
  }
  .contact-info .ci-item strong { color:#fff; }
  .contact-info .ci-item a     { color:var(--gold-l); }
  .contact-info .ci-item span  { color:rgba(255,255,255,.4); }
  .contact-info .ci-social a {
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.1);
    color:rgba(255,255,255,.55);
  }
  .contact-info .ci-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }

  /* Online indicator strip at bottom of sidebar */
  .contact-info .ci-social::after {
    content:'\25CF  Online now';
    display:block; margin-top:.75rem;
    font-size:.72rem; color:#25d366;
    letter-spacing:.04em;
  }

  /* Right panel — chatbot fills full height */
  .chatbot-wrap {
    grid-column:2; grid-row:1;
    display:flex !important;
    border-radius:0 !important;
    height:100% !important;
    box-shadow:none !important;
  }
}

/* ── MOBILE (≤600px): App home screen + slide-up chat sheet ─────────── */
@media(max-width:600px) {
  body.contact-page .ip-hero       { display:none; }
  body.contact-page .presence-section { display:none; }
  body.contact-page .cta-section   { display:none; }

  /* 561-600px: topbar still visible → header starts below topbar (~112px total) */
  .contact-app   { padding:112px 0 0 !important; background:#f0f4f8; }
  .ca-container  { padding:0 !important; max-width:none !important; }

  .contact-wrap {
    position:relative;
    display:flex; flex-direction:column;
    min-height:calc(100dvh - 112px);
    gap:0;
    padding-bottom:68px; /* room for bottom nav */
    overflow:hidden;
  }

  /* ─ App top bar ─ */
  .ca-appbar {
    display:flex;
    align-items:center; gap:.85rem;
    padding:.9rem 1.1rem;
    background:var(--navy);
    position:sticky; top:0; z-index:10;
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
    width:100%; box-sizing:border-box;
  }
  .ca-appbar-avatar {
    width:42px; height:42px; border-radius:50%;
    background:rgba(212,168,67,.14);
    border:2px solid rgba(212,168,67,.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-size:1.05rem;
    position:relative; flex-shrink:0;
  }
  .ca-appbar-dot {
    position:absolute; bottom:1px; right:1px;
    width:11px; height:11px; border-radius:50%;
    background:#25d366; border:2px solid var(--navy);
    animation:pulse 2s ease-in-out infinite;
  }
  .ca-appbar-text strong {
    display:block; color:#fff;
    font-family:var(--font-h); font-size:.95rem; font-weight:700;
  }
  .ca-appbar-text span {
    display:flex; align-items:center; gap:.35rem;
    color:rgba(255,255,255,.45); font-size:.72rem;
  }
  .ca-online-dot {
    width:6px; height:6px; border-radius:50%;
    background:#25d366; flex-shrink:0;
    animation:pulse 2s ease-in-out infinite;
  }

  /* ─ Home screen (mob-quick-bar) ─ */
  .mob-quick-bar {
    display:flex !important;
    flex-direction:column; align-items:center;
    padding:1.75rem 1.1rem 1.5rem;
    gap:1rem; flex:1;
    overflow-y:auto;
    background:#f0f4f8;
    text-align:center;
  }
  .mob-quick-bar.mob-hidden { display:none !important; }

  .mqb-title { font-size:1.25rem; }
  .mqb-tiles { grid-template-columns:repeat(3,1fr); gap:.6rem; width:100%; }
  .mqb-tile {
    padding:1.25rem .4rem 1rem;
    border-radius:1.25rem;
    box-shadow:0 3px 14px rgba(6,17,31,.07);
    background:#fff;
  }
  .mqb-tile:active { transform:scale(.96); }
  .mqb-icon { width:54px; height:54px; font-size:1.4rem; border-radius:1rem; }
  .mqb-name { font-size:.82rem; }
  .mqb-desc { font-size:.68rem; }
  .mqb-phone {
    width:100%; justify-content:center;
    background:#fff; box-shadow:0 2px 10px rgba(6,17,31,.07);
  }

  /* ─ Contact info hidden on mobile ─ */
  .contact-info { display:none !important; }

  /* ─ Chatbot: full-screen slide-up sheet ─ */
  .chatbot-wrap {
    display:none;
    position:fixed !important;
    inset:0 !important;
    top:auto !important;
    height:92dvh !important;
    z-index:1000 !important;
    border-radius:1.5rem 1.5rem 0 0 !important;
    box-shadow:0 -12px 60px rgba(6,17,31,.4) !important;
    transform:translateY(100%) !important;
    transition:transform .42s cubic-bezier(.22,.61,.36,1) !important;
  }
  .chatbot-wrap.mob-visible {
    transform:translateY(0) !important;
  }
  .cb-back-mob { display:flex; }

  /* ─ Bottom navigation bar ─ */
  .ca-bottomnav {
    display:flex;
    position:fixed; bottom:0; left:0; right:0;
    z-index:900;
    background:#fff;
    border-top:1px solid #e5eaf0;
    box-shadow:0 -4px 24px rgba(6,17,31,.1);
    height:68px;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .ca-bntab {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.22rem;
    background:none; border:none; cursor:pointer;
    color:#94a3b8; font-size:.6rem; font-weight:700;
    font-family:var(--font-h); letter-spacing:.03em;
    text-decoration:none; padding:.45rem .2rem;
    transition:color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .ca-bntab i { font-size:1.2rem; transition:color .2s, transform .2s; }
  .ca-bntab.active       { color:var(--navy); }
  .ca-bntab.active i     { color:var(--gold-d); transform:scale(1.1); }
  .ca-bntab:active i     { transform:scale(.9); }
}

/* ≤560px: topbar is display:none — only header height (~72px) needed, not 112px */
@media(max-width:560px) {
  .contact-app  { padding-top:72px !important; }
  .contact-wrap { min-height:calc(100dvh - 72px); }
}

/* Our Presence */
.presence-section { background:var(--off); }
.presence-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2.5rem; }
.presence-card {
  background:#fff; border-radius:var(--r-lg);
  border:1px solid #e2e8f0;
  box-shadow:0 2px 12px rgba(6,17,31,.07);
  display:flex; gap:1.4rem; padding:2rem;
  transition:transform .3s, box-shadow .3s;
}
.presence-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(6,17,31,.12); }
.presence-flag { flex-shrink:0; }
.presence-flag img { width:56px; height:40px; object-fit:cover; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.15); display:block; }
.presence-body h3 { font-family:var(--font-h); font-size:1.2rem; font-weight:800; color:var(--navy); margin-bottom:.3rem; }
.presence-location { font-size:.82rem; color:var(--gold-d); letter-spacing:.04em; margin-bottom:.8rem; }
.presence-location i { margin-right:.3rem; }
.presence-body p { font-size:.88rem; color:var(--muted); line-height:1.7; margin-bottom:1rem; }
.presence-contact { display:flex; flex-direction:column; gap:.45rem; }
.presence-contact a { font-size:.85rem; color:var(--navy-2); display:flex; align-items:center; gap:.5rem; transition:color .2s; }
.presence-contact a:hover { color:var(--gold-d); }
.presence-contact i { color:var(--gold-d); width:14px; text-align:center; }

/* Chatbot */
.chatbot-wrap {
  background:#fff; border-radius:var(--r-lg);
  border:1px solid #e2e8f0; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; height:520px;
}
.cb-header {
  display:flex; align-items:center; gap:1rem; padding:1.2rem 1.6rem;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  flex-shrink:0;
}
.cb-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-d),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--navy); flex-shrink:0;
}
.cb-hinfo strong { display:block; color:#fff; font-family:var(--font-h); font-size:.92rem; }
.cb-status { font-size:.75rem; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:.35rem; }
.cb-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; display:inline-block; animation:pulse 2s infinite; }
.cb-messages {
  flex:1; overflow-y:auto; padding:1.2rem 1.2rem .5rem;
  display:flex; flex-direction:column; gap:.75rem; scroll-behavior:smooth;
  overscroll-behavior:contain; /* prevent scroll bleeding to page */
}
.cb-messages::-webkit-scrollbar { width:4px; }
.cb-messages::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.cb-row { display:flex; align-items:flex-end; gap:.55rem; }
.cb-row.user { flex-direction:row-reverse; }
.cb-bubble {
  max-width:78%; padding:.65rem .95rem; border-radius:18px;
  font-size:.875rem; line-height:1.55; animation:cbPop .22s ease;
}
.cb-row.bot .cb-bubble { background:var(--navy-1); color:rgba(255,255,255,.85); border-bottom-left-radius:4px; }
.cb-row.user .cb-bubble { background:linear-gradient(135deg,var(--gold-d),var(--gold)); color:var(--navy); font-weight:600; border-bottom-right-radius:4px; }
.cb-face { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--gold-d),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--navy); flex-shrink:0; }
@keyframes cbPop { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.cb-typing { display:flex; gap:4px; padding:.65rem .95rem; background:var(--navy-1); border-radius:18px; border-bottom-left-radius:4px; }
.cb-typing span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); animation:cbDot 1.2s infinite; }
.cb-typing span:nth-child(2){animation-delay:.2s} .cb-typing span:nth-child(3){animation-delay:.4s}
@keyframes cbDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.cb-footer { padding:.8rem 1rem 1rem; border-top:1px solid #f0f4f8; flex-shrink:0; }
.cb-options { display:flex; flex-wrap:wrap; gap:.45rem; }
.cb-opt-btn {
  padding:.42rem .85rem; border-radius:20px;
  border:1.5px solid var(--gold-d); background:#fff;
  color:var(--navy); font-size:.8rem; font-weight:600; cursor:pointer;
  transition:background .18s, color .18s, transform .15s;
}
.cb-opt-btn:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-1px); }
.cb-input-row { display:flex; gap:.5rem; }
.cb-input {
  flex:1; border:1.5px solid #dde3ea; border-radius:24px;
  padding:.6rem 1.1rem; font-size:.875rem; outline:none;
  transition:border-color .2s; font-family:var(--font-b);
}
.cb-input:focus { border-color:var(--gold); }
.cb-send {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-d),var(--gold));
  border:none; color:var(--navy); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:transform .15s, box-shadow .2s;
}
.cb-send:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(212,168,67,.4); }
.cb-done { text-align:center; padding:1rem .5rem; font-size:.85rem; color:var(--muted); line-height:1.7; }
.cb-done i { font-size:2rem; color:#4ade80; display:block; margin-bottom:.5rem; }
.cb-done strong { color:var(--navy); font-family:var(--font-h); }
/* Phone composite widget */
.cb-phone-widget {
  display:flex; flex-direction:column; gap:.45rem; flex:1; min-width:0;
}
.cb-phone-widget-row {
  display:flex; gap:.45rem; align-items:center;
}
.cb-dial-sel {
  flex:1; min-width:0; border:1.5px solid #dde3ea; border-radius:20px;
  padding:.6rem .9rem; font-size:.82rem; outline:none; cursor:pointer;
  background:#fff; font-family:var(--font-b); color:var(--navy);
  transition:border-color .2s; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
  padding-right:1.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cb-dial-sel:focus { border-color:var(--gold); }
.cb-phone-input {
  flex:1; min-width:0; border:1.5px solid #dde3ea; border-radius:20px;
  padding:.6rem 1rem; font-size:.875rem; outline:none; font-family:var(--font-b);
  transition:border-color .2s;
}
.cb-phone-input:focus { border-color:var(--gold); }

/* CTA compact variant */
.cta-section--compact { padding:4rem 0; }

/* Float card animation (shared) */
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* =================================================================
   JOURNEY STEPPER  (services.html)
   ================================================================= */
.journey-stepper { position:relative; padding-top:.5rem; }

/* Step tabs row */
.js-tabs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
  margin-bottom:2.5rem; position:relative;
}
/* Connecting line behind tabs */
.js-tabs::before {
  content:''; position:absolute; top:28px; left:calc(12.5% + 4px); right:calc(12.5% + 4px);
  height:2px; background:rgba(212,168,67,.15); z-index:0;
}

.js-tab {
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.6rem .25rem 1rem; background:none; border:none; cursor:pointer;
  position:relative; z-index:2; transition:color .25s;
}
.js-tab-num {
  width:56px; height:56px; border-radius:50%;
  background:#f0f4f8; border:2.5px solid rgba(212,168,67,.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-size:1rem; font-weight:800; color:var(--muted);
  transition:background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.js-tab-label {
  font-size:.78rem; font-weight:600; color:var(--muted);
  text-align:center; line-height:1.3; transition:color .25s;
}
.js-tab.active .js-tab-num {
  background:var(--gold); border-color:var(--gold); color:var(--navy);
  box-shadow:0 4px 20px rgba(212,168,67,.45);
}
.js-tab.active .js-tab-label { color:var(--navy); font-weight:700; }
.js-tab:hover:not(.active) .js-tab-num { border-color:var(--gold); background:rgba(212,168,67,.09); color:var(--navy); }
.js-tab:hover:not(.active) .js-tab-label { color:var(--navy); }

/* Content panels */
.js-panels { position:relative; min-height:260px; }
.js-panel { display:none; animation:jsPanelIn .4s ease; }
.js-panel.active { display:grid; grid-template-columns:88px 1fr; gap:2.5rem; align-items:start;
  background:#fff; border:1px solid #e8edf2; border-radius:var(--r-lg);
  padding:2.5rem; box-shadow:0 4px 28px rgba(6,17,31,.07); }
@keyframes jsPanelIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.js-panel-icon {
  width:80px; height:80px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,rgba(212,168,67,.18),rgba(212,168,67,.05));
  border:2px solid rgba(212,168,67,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-d); font-size:2rem;
  box-shadow:0 6px 28px rgba(212,168,67,.18);
}
.js-panel-content h3 {
  font-family:var(--font-h); font-size:1.45rem; font-weight:800;
  color:var(--navy); margin-bottom:.9rem; letter-spacing:-.02em;
}
.js-panel-content p { color:var(--muted); font-size:.96rem; line-height:1.78; margin-bottom:1.2rem; }
.js-panel-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.7rem; }
.js-panel-list li { display:flex; align-items:center; gap:.65rem; font-size:.9rem; color:var(--text); font-weight:500; }
.js-panel-list li i { color:var(--gold-d); font-size:.78rem; flex-shrink:0; }
.js-panel-cta {
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.6rem;
  border-radius:var(--r); background:var(--gold); color:var(--navy);
  font-family:var(--font-h); font-weight:700; font-size:.88rem;
  transition:background .2s, transform .2s;
}
.js-panel-cta:hover { background:var(--gold-l); transform:translateY(-1px); }
.js-panel-cta i { font-size:.78rem; transition:transform .2s; }
.js-panel-cta:hover i { transform:translateX(4px); }

/* Auto-advance bar */
.js-autobar { margin-top:1.5rem; height:3px; background:rgba(212,168,67,.12); border-radius:2px; overflow:hidden; }
.js-autobar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--gold-d),var(--gold)); border-radius:2px; }

/* Responsive stepper */
@media(max-width:700px) {
  .js-panel.active { grid-template-columns:1fr; gap:1.25rem; padding:1.75rem; }
  .js-panel-icon { width:60px; height:60px; font-size:1.5rem; }
  .js-tabs::before { display:none; }
  .js-tab-num { width:46px; height:46px; font-size:.88rem; }
  .js-tab-label { font-size:.72rem; }
  .js-panel-content h3 { font-size:1.2rem; }
  .js-panel-content p { font-size:.9rem; }
}
@media(max-width:460px) {
  .js-tabs { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .js-tab { padding:.5rem .2rem .7rem; }
}