/* =============================================================================
   JOURNEY MASTERS LTD — DESIGN SYSTEM
   Travel · Study Abroad · Visa & Proof of Funds Consultancy
   Concept: "The Route Line" — the logo's flight swoosh, applied with restraint.
   Colors are locked to the brand: navy #020255 · red #FE2E17 · slate #4B4F58
   ============================================================================= */

:root {
  /* ---- Brand core --------------------------------------------------------- */
  --navy:        #020255;   /* Primary */
  --navy-700:    #0a1466;   /* gradient partner / hovers */
  --navy-500:    #2231a0;   /* interactive azure lift */
  --navy-900:    #05082a;   /* deep cinematic sections / footer */
  --red:         #fe2e17;   /* Accent / CTA / the route line */
  --red-600:     #db1e0a;   /* CTA hover */
  --slate:       #4b4f58;   /* Secondary text */
  --slate-400:   #8a8f9a;   /* captions / borders */
  --sand:        #c9a24b;   /* restrained champagne accent (hairlines only) */

  /* ---- Surfaces & ink ----------------------------------------------------- */
  --bg:          #ffffff;
  --cloud:       #f6f7fb;   /* section canvas */
  --cloud-2:     #eef1f8;
  --surface:     #ffffff;
  --ink:         #070a24;   /* headings (near-black navy) */
  --line:        #e7e9f2;   /* hairline borders */

  /* ---- Feedback ----------------------------------------------------------- */
  --success:     #12a150;
  --warning:     #e5a100;
  --error:       #e5352b;

  /* ---- Type --------------------------------------------------------------- */
  --font-display: "Satoshi", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* ---- Radius ------------------------------------------------------------- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 34px;  --r-pill: 999px;

  /* ---- Elevation (navy-tinted, never grey) -------------------------------- */
  --sh-1: 0 1px 2px rgba(2,2,85,.06), 0 1px 3px rgba(2,2,85,.05);
  --sh-2: 0 6px 18px -6px rgba(2,2,85,.12);
  --sh-3: 0 18px 44px -14px rgba(2,2,85,.20);
  --sh-4: 0 32px 70px -20px rgba(2,2,85,.28);
  --sh-red: 0 14px 34px -10px rgba(254,46,23,.45);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);        /* expo-out feel */
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 55%, #16227e 100%);
  --gradient-deep:  radial-gradient(120% 120% at 20% 0%, #0b1470 0%, var(--navy) 45%, var(--navy-900) 100%);
}

/* =============================================================================
   BASE
   ============================================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--slate);
  background: var(--bg);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: #fff; }

/* Fluid type scale */
.display   { font-family: var(--font-display); font-weight: 900; line-height: .98; letter-spacing: -.035em;
             font-size: clamp(2.9rem, 6.4vw, 6.2rem); }
.h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.03em; }
.h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.lead { font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--slate); }

.overline {
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.overline::before { content:""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.overline.on-dark { color: #ff8f81; }
.overline.on-dark::before { background: #ff8f81; }

/* =============================================================================
   LAYOUT
   ============================================================================= */
/* Standard page gutter: fixed comfortable padding (24px floor) instead of a
   vw-based width — vw gutters shrink on phones, crowding content to the edge. */
.container { width: 100%; max-width: 1336px; /* 1240px content + 2×48px gutter */
  margin-inline: auto; padding-inline: clamp(24px, 5vw, 48px); }
/* Vertical rhythm uses padding-block ONLY — never the padding shorthand, which
   would zero out the container's horizontal gutter when both share an element
   (that exact bug crushed the footer's edges). */
.section { padding-block: clamp(72px, 10vw, 150px); }
.section-sm { padding-block: clamp(48px, 6vw, 88px); }
.eyebrow-center { text-align: center; }

/* Responsive two-column layouts — replace inline grid-template-columns so they
   ACTUALLY collapse on mobile. min-width:0 lets children shrink instead of
   forcing horizontal overflow. */
.split { display: grid; gap: clamp(1.8rem, 4vw, 5rem); align-items: center; }
.split > * { min-width: 0; }
.split--media { grid-template-columns: 1.05fr 1fr; }
.split--faq   { grid-template-columns: .85fr 1.15fr; align-items: start; }
.split--cta   { grid-template-columns: 1.15fr .9fr; }
.grid-auto { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-auto > * { min-width: 0; }
.stats-grid { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); text-align: center; }
@media (max-width: 900px) {
  .split--media, .split--faq, .split--cta { grid-template-columns: 1fr; }
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
  --_bg: var(--red); --_fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  padding: 1rem 1.6rem; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--_bg); color: var(--_fg);
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn::after { /* ripple/glow sweep */
  content:""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { box-shadow: var(--sh-red); transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; }

.btn--primary { --_bg: var(--red); --_fg: #fff; }
.btn--dark    { --_bg: var(--navy); --_fg: #fff; }
.btn--ghost   { --_bg: transparent; --_fg: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--navy); box-shadow: var(--sh-2); }
.btn--on-dark { --_bg: rgba(255,255,255,.08); --_fg: #fff; border: 1.5px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.btn--on-dark:hover { --_bg: rgba(255,255,255,.16); box-shadow: none; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.03rem; }
.btn--sm { padding: .7rem 1.15rem; font-size: .9rem; }

/* magnetic wrapper hook */
.magnetic { display: inline-block; will-change: transform; }

/* =============================================================================
   GLASS NAV
   ============================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background .4s var(--ease-soft), box-shadow .4s, padding .4s, border-color .4s;
  padding: 1.15rem 0; border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-1); border-bottom-color: var(--line); padding: .7rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo img { height: 40px; width: auto; transition: height .4s var(--ease-soft); }
.nav.is-stuck .nav-logo img { height: 34px; }
.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark  { display: none; }
.nav.is-stuck .nav-logo .logo-light { display: none; }
.nav.is-stuck .nav-logo .logo-dark  { display: block; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-weight: 600; font-size: .96rem; color: rgba(255,255,255,.9); position: relative; padding: .35rem 0;
  transition: color .3s;
}
.nav.is-stuck .nav-links a { color: var(--ink); }
.nav-links a::after {
  content:""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--red);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: .9rem; }
.nav-phone { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.nav.is-stuck .nav-phone { color: var(--navy); }

.nav-burger { display: none; width: 46px; height: 46px; border: 0; background: rgba(255,255,255,.1); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; }
.nav.is-stuck .nav-burger { background: var(--cloud); }
.nav-burger span { display:block; width: 20px; height: 2px; background:#fff; position: relative; transition:.3s; }
.nav.is-stuck .nav-burger span { background: var(--ink); }
.nav-burger span::before, .nav-burger span::after { content:""; position:absolute; left:0; width:20px; height:2px; background:inherit; transition:.3s; }
.nav-burger span::before { top:-6px; } .nav-burger span::after { top:6px; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-scrim { position:absolute; inset:0; background: rgba(5,8,42,.5); opacity:0; transition:.4s; }
.drawer.open .drawer-scrim { opacity:1; }
.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(88vw,380px); background:#fff; box-shadow: var(--sh-4);
  transform: translateX(100%); transition: transform .5s var(--ease); padding: 2rem 1.6rem; display:flex; flex-direction:column; gap:1.4rem; }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel a { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }

/* =============================================================================
   ROUTE LINE (signature) & DECOR
   ============================================================================= */
.route-svg path.route { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.route-plane { fill: var(--red); }
.heading-rule { display:block; width: 60px; height: 3px; border-radius: 3px; background: var(--red); margin-top: 1.1rem; }
.eyebrow-center + .heading-rule { margin-inline: auto; }

.tag {
  display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  padding:.4rem .8rem; border-radius: var(--r-pill); background: rgba(2,2,85,.06); color: var(--navy);
}
.tag .dot { width:7px; height:7px; border-radius:50%; background: var(--red); }

/* =============================================================================
   CARDS
   ============================================================================= */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }

/* Service card */
.service-card { padding: 2rem 1.9rem; position: relative; overflow: hidden; }
.service-card .ico { width: 58px; height: 58px; border-radius: 16px; display:grid; place-items:center; color:#fff;
  background: var(--gradient-brand); box-shadow: var(--sh-2); margin-bottom: 1.4rem; transition: transform .5s var(--ease); }
.service-card:hover .ico { transform: rotate(-6deg) scale(1.06); }
.service-card .ico svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.service-card p { font-size: .96rem; margin: 0 0 1.2rem; }
.service-card .go { font-weight:700; color: var(--navy); font-size:.92rem; display:inline-flex; align-items:center; gap:.4rem; transition: gap .3s; }
.service-card:hover .go { gap: .8rem; color: var(--red); }
.service-card::before { content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, rgba(254,46,23,.10), transparent 70%); opacity:0; transition:.5s; }
.service-card:hover::before { opacity:1; }

/* Destination card */
.dest-card { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 460px; box-shadow: var(--sh-2);
  display:flex; align-items:flex-end; isolation:isolate; }
.dest-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1.1s var(--ease); }
.dest-card.noimg { background: var(--gradient-deep); }
.dest-card::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(5,8,42,0) 30%, rgba(5,8,42,.35) 55%, rgba(5,8,42,.9) 100%); }
.dest-card:hover img { transform: scale(1.08); }
.dest-body { padding: 1.8rem; color:#fff; width:100%; }
.dest-body .k { display:flex; gap:.5rem; align-items:center; font-size:.82rem; font-weight:600; opacity:.85; letter-spacing:.02em; }
.dest-body h3 { color:#fff; font-size:1.7rem; margin:.35rem 0 .2rem; }
.dest-meta { display:flex; gap:1.2rem; font-size:.86rem; opacity:.9; margin-top:.8rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.18); }

/* Stat */
.stat .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem,4.4vw,3.6rem); color:#fff; line-height:1;
  font-variant-numeric: tabular-nums; letter-spacing:-.03em; }
.stat .num .suf { color: var(--red); }
.stat .lbl { color: rgba(255,255,255,.72); font-size:.95rem; margin-top:.5rem; }

/* Process step */
.step { position: relative; padding-left: 4.4rem; }
.step .idx { position:absolute; left:0; top:0; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:1.2rem; color:var(--navy); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1); }
.step h3 { font-size:1.2rem; margin-bottom:.4rem; }
.step p { font-size:.96rem; margin:0; }

/* Testimonial */
.quote-card { background:#fff; border-radius: var(--r-lg); padding: 2.4rem; box-shadow: var(--sh-2); border:1px solid var(--line); height:100%; }
.quote-card .stars { color: var(--sand); letter-spacing:2px; font-size:1rem; }
.quote-card blockquote { font-family: var(--font-display); font-weight:500; font-size:1.24rem; line-height:1.5; color: var(--ink); margin:1rem 0 1.6rem; letter-spacing:-.01em; }
.quote-card .who { display:flex; align-items:center; gap:.9rem; }
.quote-card .who img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.quote-card .who .n { font-weight:700; color:var(--ink); font-family:var(--font-sans); }
.quote-card .who .r { font-size:.85rem; color: var(--slate-400); }

/* FAQ — native <details>/<summary>: keyboard + AT support for free, no nested buttons */
.faq { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left;
  padding:1.5rem 0; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--ink);
  list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:focus-visible { outline:3px solid var(--navy-500); outline-offset:3px; border-radius:6px; }
.faq .ic { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.4s; color:var(--navy); }
.faq[open] .ic { background:var(--navy); color:#fff; transform:rotate(45deg); border-color:var(--navy); }
.faq .ans { overflow:hidden; }
.faq .ans p { margin:0 0 1.5rem; padding-right:3rem; font-size:1rem; }

/* Blog card */
.post-card { overflow:hidden; }
.post-card .thumb { aspect-ratio: 16/10; overflow:hidden; position:relative; background: var(--cloud-2); }
.post-card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.06); }
.post-card .body { padding:1.5rem 1.6rem 1.8rem; }
.post-card .meta { font-size:.8rem; color:var(--slate-400); font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.post-card h3 { font-size:1.2rem; margin:.6rem 0 .5rem; }

/* =============================================================================
   MARQUEE
   ============================================================================= */
.marquee { display:flex; overflow:hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; gap:3.5rem; padding-right:3.5rem; align-items:center; animation: scroll-x 34s linear infinite; white-space:nowrap; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--slate-400); display:inline-flex; align-items:center; gap:.7rem; }
.marquee-track span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* =============================================================================
   FLOATING CONTACT DOCK
   ============================================================================= */
.dock { position: fixed; right: clamp(14px,2vw,26px); bottom: clamp(14px,2vw,26px); z-index: 55; display:flex; flex-direction:column; gap:.7rem; }
.dock a { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow: var(--sh-3); position:relative; transition: transform .4s var(--ease); }
.dock a:hover { transform: translateY(-3px) scale(1.05); }
.dock .wa { background:#25d366; }
.dock .call { background: var(--navy); }
.dock a svg { width:26px; height:26px; }
.dock .wa::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* Sticky mobile CTA */
.mobile-cta { position: fixed; left:0; right:0; bottom:0; z-index:54; display:none; gap:.6rem;
  padding:.7rem .7rem calc(.7rem + env(safe-area-inset-bottom));  /* iPhone home-bar safe area */
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
.mobile-cta .btn { flex:1; padding:.9rem; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.footer { background: var(--gradient-deep); color: rgba(255,255,255,.72); position:relative; overflow:hidden; }
.footer .f-title { color:#fff; font-size:1rem; letter-spacing:.02em; margin-bottom:1.2rem; }
.footer-list { list-style:none; margin:0; padding:0; }
.footer-brand p { max-width:300px; }
.footer-logo { height:46px; margin-bottom:1.2rem; }
.footer address { font-style:normal; }
.addr-line { margin:0 0 .6rem; }
.footer-cta { margin-top:1.2rem; }
.legal-links { display:flex; gap:1.4rem; }
.footer .soc { margin-top:1.4rem; }
.footer a:not(.btn) { color: rgba(255,255,255,.72); font-size:.95rem; transition: color .3s, padding-left .3s; display:inline-block; padding:.28rem 0; }
.footer a:not(.btn):hover { color:#fff; padding-left:.3rem; }
.footer .btn { padding: .85rem 1.55rem; color:#fff; } /* isolate CTA from link styles above */
.footer .btn:hover { padding-left: 1.55rem; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap:2.5rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.8rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.86rem; }
.soc { display:flex; gap:.6rem; }
.soc a { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; padding:0; }
.soc a:hover { background: var(--red); padding-left:0; }
.soc svg { width:18px; height:18px; }

/* =============================================================================
   PAGE COMPONENTS (promoted from inline styles — keep ALL styling in this file)
   ============================================================================= */

/* ---- Utilities ---- */
.bg-cloud { background: var(--cloud); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:200; background:var(--navy); color:#fff;
  padding:.75rem 1.3rem; border-radius:10px; font-weight:700; font-size:.95rem;
  transform:translateY(-200%); transition:transform .3s var(--ease); }
.skip-link:focus { transform:none; }
a:focus-visible { outline:3px solid var(--navy-500); outline-offset:3px; border-radius:6px; }
.btn:disabled { opacity:.7; cursor:default; transform:none !important; box-shadow:none !important; }
h1, h2, h3 { text-wrap: balance; }

/* ---- Hero ---- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:var(--navy-900); padding-block: clamp(110px, 15vh, 160px) clamp(96px, 13vh, 130px); }
.hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(2,2,85,.92) 0%, rgba(2,2,85,.7) 42%, rgba(5,8,42,.25) 100%); }
.hero::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(5,8,42,.85), transparent 45%); }
.hero-bg { position:absolute; inset:0; width:100%; height:110%; object-fit:cover; z-index:0; will-change:transform; }
.hero-route { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero-content { position:relative; z-index:3; }
.hero-copy { max-width:920px; }
.hero-copy .overline { margin-bottom:1.6rem; }
.hero-title { color:#fff; margin:.4rem 0 0; }
.hero-title .accent { color:var(--red); }
.hero-sub { color:rgba(255,255,255,.82); max-width:600px; margin:1.6rem 0 2.4rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-trust { display:flex; gap:2rem; flex-wrap:wrap; margin-top:3.2rem; color:rgba(255,255,255,.9); }
.trust-item { display:flex; align-items:center; gap:.7rem; }
.trust-item .ico { flex:none; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.trust-item .t { line-height:1.2; }
.trust-item strong { font-family:var(--font-display); }
.trust-item small { font-size:.82rem; opacity:.75; }
.hero-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  color:rgba(255,255,255,.7); display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-mouse { width:26px; height:42px; border:1.5px solid rgba(255,255,255,.4); border-radius:14px;
  display:grid; justify-items:center; padding-top:7px; }
.scroll-dot { width:4px; height:8px; border-radius:3px; background:#fff; animation:scroll-dot 2s var(--ease-soft) infinite; }
@keyframes scroll-dot { 0%{transform:translateY(0);opacity:1} 75%{transform:translateY(11px);opacity:0} 100%{transform:translateY(0);opacity:0} }
.hero-glow.g1 { top:-8%; right:4%; }
.hero-glow.g2 { bottom:-14%; left:-6%;
  background:radial-gradient(circle, rgba(43,49,160,.55) 0%, rgba(43,49,160,0) 62%); }
.hero-chip.chip-1 { top:24%; right:9%; }
.hero-chip.chip-2 { bottom:26%; right:16%; }

/* ---- Trust strip + stats ---- */
.trust-strip { border-bottom:1px solid var(--line); }
.kicker-row { text-align:center; margin-bottom:1.6rem; }
.kicker { font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-400); font-weight:700; margin:0; }
.stats-band { background:var(--gradient-deep); position:relative; overflow:hidden; }
.stats-band .container { position:relative; z-index:1; }
.bg-map { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.05;
  mix-blend-mode:screen; pointer-events:none; }

/* ---- Section headers ---- */
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  flex-wrap:wrap; margin-bottom:3rem; }
.section-head .lede { max-width:640px; }
.section-head .lede h2 { margin-top:1rem; }
.section-head .note { max-width:340px; margin:0; }
.section-intro { text-align:center; max-width:620px; margin:0 auto 3.2rem; }
.section-intro h2 { margin-top:1rem; }

/* ---- Dark section (process) ---- */
.section--dark { background:var(--navy-900); color:#fff; }
.section--dark h2 { color:#fff; }
.section--dark .step { color:rgba(255,255,255,.72); }
.section--dark .step h3 { color:#fff; }
.steps { gap:2rem; }

/* ---- Services CTA cell ---- */
.service-card--cta { background:var(--gradient-brand); color:#fff; border:0; box-shadow:var(--sh-2);
  display:flex; flex-direction:column; justify-content:center; }
.service-card--cta h3 { color:#fff; }
.service-card--cta p { color:rgba(255,255,255,.82); }
.service-card--cta .btn { align-self:flex-start; margin-top:.5rem; }

/* ---- About ---- */
.about-media { position:relative; }
.media-frame { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-4); }
.about-img { width:100%; aspect-ratio:4/4.6; object-fit:cover; }
.float-stat { position:absolute; right:-8px; bottom:-24px; padding:1.4rem 1.6rem; max-width:230px; box-shadow:var(--sh-4); }
.mini-stat { display:flex; gap:.7rem; align-items:center; }
.mini-stat .ico { flex:none; width:44px; height:44px; border-radius:12px; background:var(--gradient-brand);
  display:grid; place-items:center; color:#fff; }
.mini-stat .v { font-family:var(--font-display); font-weight:900; font-size:1.5rem; color:var(--ink); line-height:1; }
.mini-stat .l { font-size:.8rem; color:var(--slate-400); }
.about-copy h2 { margin:1rem 0 1.2rem; }
.about-copy > p { margin-bottom:1.8rem; }
.about-copy .btn { margin-top:2rem; }
.feature-list { display:flex; flex-direction:column; gap:1.3rem; margin:0; padding:0; list-style:none; }
.feature { display:flex; gap:1rem; }
.feature .ico { flex:none; width:42px; height:42px; border-radius:12px; background:rgba(2,2,85,.06);
  display:grid; place-items:center; color:var(--navy); }
.feature h3 { font-size:1.1rem; }
.feature p { margin:.2rem 0 0; font-size:.96rem; }

/* ---- Testimonials ---- */
.testimonials .swiper-slide { height:auto; padding-bottom:.5rem; }
.testimonials .swiper-pagination { position:static; margin-top:2rem; }

/* ---- FAQ intro ---- */
.faq-intro h2 { margin:1rem 0 1.2rem; }
.faq-intro p { margin-bottom:1.8rem; }

/* ---- Blog ---- */
.post-card .excerpt { font-size:.95rem; margin:0; }

/* ---- CTA band + newsletter ---- */
.cta-band { background:var(--gradient-brand); border-radius:var(--r-xl); padding:clamp(2.4rem, 5vw, 4.5rem);
  position:relative; overflow:hidden; box-shadow:var(--sh-4); }
.cta-band .split { position:relative; z-index:1; }
.cta-band .bg-map { opacity:.06; }
.cta-band h2 { color:#fff; margin:1rem 0; }
.cta-band .lead { color:rgba(255,255,255,.8); margin-bottom:2rem; }
.cta-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.newsletter-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); border-radius:var(--r-lg); padding:1.8rem; }
.newsletter-card h3 { color:#fff; font-size:1.2rem; margin-bottom:.4rem; }
.newsletter-card p { color:rgba(255,255,255,.7); font-size:.92rem; margin:0 0 1.2rem; }
.newsletter-form { display:flex; flex-direction:column; gap:.7rem; }
.input { width:100%; padding:.95rem 1.1rem; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.95); color:var(--ink); font-family:inherit; font-size:.95rem; }
.input:focus-visible { outline:3px solid var(--red); outline-offset:2px; }

/* ---- Drawer internals ---- */
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.drawer-head img { height:34px; }
.drawer-close { border:0; background:var(--cloud); width:42px; height:42px; border-radius:12px;
  font-size:1.4rem; cursor:pointer; }
.drawer-panel .btn--primary { margin-top:auto; }

/* =============================================================================
   INNER PAGES — hero, breadcrumb, detail layout, forms, article
   ============================================================================= */

/* ---- Page hero ---- */
.page-hero { position:relative; background:var(--gradient-deep); color:#fff; overflow:hidden;
  padding-block: clamp(132px, 18vh, 196px) clamp(56px, 8vw, 92px); }
.page-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.30; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(2,2,85,.94) 0%, rgba(5,8,42,.62) 100%); }
.page-hero .hero-glow.g1 { top:-24%; right:-6%; z-index:1; }
.page-hero .grain { z-index:1; }
.page-hero-inner { position:relative; z-index:2; max-width:840px; }
.page-hero-title { color:#fff; margin:.6rem 0 0; }
.page-hero-title .accent { color:var(--red); }
.page-hero-sub { color:rgba(255,255,255,.8); margin-top:1.1rem; max-width:640px; }

.breadcrumb { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.85rem;
  color:rgba(255,255,255,.55); margin-bottom:1.4rem; }
.breadcrumb a { color:rgba(255,255,255,.78); } .breadcrumb a:hover { color:#fff; }
.breadcrumb [aria-current] { color:#fff; font-weight:600; }

/* ---- Service / destination detail ---- */
.detail-layout { display:grid; grid-template-columns:1fr .42fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.detail-main > * + * { margin-top:2.8rem; }
.prose .overline { margin-bottom:.8rem; }
.prose h2 { margin-bottom:1rem; }
.prose p { margin:0 0 1rem; }
.detail-block h3.h3 { margin-bottom:1.1rem; }

.check-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem; }
.check-list li { display:flex; gap:.7rem; align-items:flex-start; font-weight:500; color:var(--ink); }
.check-list svg { flex:none; color:var(--success); margin-top:2px; }

.req-list { margin:0; padding-left:1.2rem; display:grid; gap:.6rem; }
.req-list li { padding-left:.3rem; }

.timeline { list-style:none; margin:0; padding:0; display:grid; gap:1.6rem; }
.timeline-item { display:flex; gap:1.2rem; }
.timeline-dot { flex:none; width:42px; height:42px; border-radius:50%; background:var(--gradient-brand);
  color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; }
.timeline-item h4 { font-family:var(--font-display); font-size:1.1rem; color:var(--ink); margin:.35rem 0 .3rem; }
.timeline-item p { margin:0; }

.detail-aside { display:flex; flex-direction:column; gap:1.5rem; position:sticky; top:100px; }
.aside-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem;
  box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.aside-card p { margin:0; }
.aside-card .btn { width:100%; }
.aside-card--dark { background:var(--gradient-deep); color:rgba(255,255,255,.75); border:0; }
.aside-card--dark h3 { color:#fff; }
.aside-links { list-style:none; margin:0; padding:0; width:100%; }
.aside-links li { border-top:1px solid rgba(255,255,255,.12); }
.aside-links li:first-child { border-top:0; }
.aside-links a { display:flex; justify-content:space-between; padding:.8rem 0; color:rgba(255,255,255,.82); font-weight:600; }
.aside-links a:hover { color:#fff; }

/* ---- Gallery ---- */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr)); gap:1rem; }
.gallery-item { border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery-item:hover img { transform:scale(1.06); }

/* ---- Values ---- */
.value-card { padding:2rem 1.9rem; }
.value-card .ico { width:56px; height:56px; border-radius:16px; background:var(--gradient-brand); color:#fff;
  display:grid; place-items:center; margin-bottom:1.2rem; }
.value-card h3 { font-size:1.25rem; margin-bottom:.5rem; }
.value-card p { margin:0; }

/* ---- Contact ---- */
.contact-layout { align-items:start; }
.contact-form { margin-top:1.6rem; display:flex; flex-direction:column; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-weight:600; font-size:.9rem; color:var(--ink); }
.field input, .field select, .field textarea { font-family:inherit; font-size:1rem; padding:.9rem 1.1rem;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; color:var(--ink);
  transition:border-color .25s, box-shadow .25s; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--navy-500);
  box-shadow:0 0 0 4px rgba(43,49,160,.12); }
.field textarea { resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field-err { color:var(--error); font-size:.82rem; font-weight:600; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-info { display:flex; flex-direction:column; gap:1rem; }
.info-card { display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.1rem 1.3rem; box-shadow:var(--sh-1); }
.info-ico { flex:none; width:46px; height:46px; border-radius:12px; background:rgba(2,2,85,.06);
  color:var(--navy); display:grid; place-items:center; }
.info-label { font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-400); font-weight:700; }
.info-value { font-weight:600; color:var(--ink); }
a.info-value:hover { color:var(--red); }
.map-frame { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); border:1px solid var(--line); aspect-ratio:16/7; }
.map-frame iframe { width:100%; height:100%; border:0; display:block; }

.alert { padding:1rem 1.2rem; border-radius:var(--r-md); font-weight:600; margin:1.2rem 0; }
.alert--ok { background:rgba(18,161,80,.10); color:#0d7a3c; border:1px solid rgba(18,161,80,.25); }
.alert--err { background:rgba(229,53,43,.08); color:#c0261d; border:1px solid rgba(229,53,43,.22); }
.form-note { font-size:.85rem; font-weight:600; margin:0 0 .6rem; }
.form-note--ok { color:#7ff0b6; } .form-note--err { color:#ffb3ab; }

/* ---- CTA band inner (partials/cta.php) ---- */
.cta-band-inner { position:relative; z-index:1; max-width:720px; }

/* ---- Article ---- */
.article-wrap { max-width:760px; margin-inline:auto; }
.article-meta { color:var(--slate-400); font-weight:600; font-size:.9rem; margin-bottom:1.4rem; }
.article p { font-size:1.1rem; line-height:1.75; margin:0 0 1.3rem; color:var(--slate); }
.article-share { margin-top:2rem; }

/* ---- Error page ---- */
.error-section { text-align:center; padding-block: clamp(150px,22vh,230px) clamp(80px,12vh,150px); }
.error-inner { max-width:640px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.error-code { margin:0; }
.error-inner .cta-actions { justify-content:center; }

@media (max-width: 900px) {
  .detail-layout { grid-template-columns:1fr; }
  .detail-aside { position:static; }
}
@media (max-width: 560px) {
  .check-list { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .map-frame { aspect-ratio:4/3; }
  .page-hero { padding-block: 116px 48px; }
}

/* =============================================================================
   ANIMATION UTILITIES (GSAP toggles these; here for no-JS/reduced-motion safety)
   ============================================================================= */
/* Reveal initial states are applied by JS (GSAP gsap.set) so no-JS users ALWAYS
   see content — nothing is hidden by CSS alone. */
.reveal-in { opacity:1 !important; transform:none !important; filter:none !important; }

.split-line { display:block; overflow:hidden; }
.split-line > span { display:block; }

/* Loader */
.loader { position: fixed; inset:0; z-index:100; background: var(--navy); display:grid; place-items:center; }
.loader.done { pointer-events:none; }
.loader-logo { width:120px; opacity:.96; }
.loader-bar { position:absolute; left:0; bottom:0; height:3px; width:0; background: var(--red); }

/* =============================================================================
   SLEEK POLISH — scroll progress · hero glow · film grain · nav active
   ============================================================================= */
.scroll-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 80;
  background: linear-gradient(90deg, var(--red), var(--sand)); box-shadow: 0 0 12px rgba(254,46,23,.5);
  transition: width .12s linear; }

.hero-glow { position: absolute; width: min(680px, 80vw); aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(254,46,23,.42) 0%, rgba(254,46,23,0) 62%);
  filter: blur(30px); pointer-events: none; will-change: transform; }
.hero-glow--2 { background: radial-gradient(circle, rgba(43,49,160,.55) 0%, rgba(43,49,160,0) 62%); }

.grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.float-el { position:absolute; z-index:2; pointer-events:none; will-change: transform; opacity:.9; }

/* subtle glassy chip used for floating hero labels */
.hero-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px);
  color:#fff; font-size:.82rem; font-weight:600; box-shadow: var(--sh-2); }
.hero-chip svg { width:16px; height:16px; color: var(--red); }

.nav-links a[aria-current="true"] { color:#fff; }
.nav.is-stuck .nav-links a[aria-current="true"] { color: var(--navy); }
.nav-links a[aria-current="true"]::after { width: 100%; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body { padding-bottom: 76px; }              /* clear the fixed .mobile-cta bar */
  .nav-links, .nav-phone { display:none; }
  .nav-cta .btn { display: none; }            /* rely on burger + sticky bottom CTA */
  .nav-burger { display:flex; }
  .mobile-cta { display:flex; }
  .dock { bottom: 92px; }
  .float-el { display: none; }
  .section { padding-block: 62px; }
  .section-sm { padding-block: 40px; }
  .hero { padding-block: 96px 64px; }
  .hero-scroll { display: none; }             /* collided with trust badges on phones */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { gap: 1.2rem 1.6rem; margin-top: 2.4rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } /* clean 2×2, no orphan */
  .about-media { order: -1; }                 /* image above copy when stacked */
  .about-img { aspect-ratio: 16/11; }
  .float-stat { position: static; margin-top: -2.2rem; margin-left: 1.4rem; max-width: 220px; }
  .section-head { margin-bottom: 2.2rem; }
  .section-intro { margin-bottom: 2.4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:2rem; }
  .step { padding-left: 0; padding-top: 3.6rem; }
  .step .idx { top:0; }
}

/* Short viewports (landscape phones): the hero must never scroll-trap */
@media (max-height: 640px) {
  .hero { min-height: auto; }
  .hero-scroll { display: none; }
}

@media (max-width: 560px) {
  .section { padding-block: 54px; }
  .display { letter-spacing: -.03em; }
  .overline { font-size: .68rem; letter-spacing: .13em; }
  .service-card { padding: 1.6rem 1.4rem; }
  .service-card h3 { font-size: 1.14rem; }
  .quote-card { padding: 1.7rem 1.5rem; }
  .quote-card blockquote { font-size: 1.12rem; }
  .dest-card { min-height: 360px; }
  .stat .num { font-size: 2.3rem; }
  .stats-grid { gap: 1.8rem 1.2rem; }
  .faq button { font-size: 1rem; }
  .faq .ans p { padding-right: 0; }
  .footer-grid { grid-template-columns: 1fr; gap:1.8rem; }
  .footer-bottom { flex-direction: column; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; filter:none !important; }
}