/* ==========================================================================
   VIO Overseas — Design System
   A premium, conversion-focused design language inspired by the VIO logo
   (deep indigo + soft gold) and modern product brands.

   SCALE MODEL
   Every size in this file comes from one of two scales declared at :root:
     · a fluid TYPE scale  (--fs-*)   — clamp()ed, 360px → 1920px, no jumps
     · a static SPACE scale (--s-*)   — 4px base, plus fluid --space-* steps
   The homepage hero is the reference: --fs-display and --fs-lead are its
   exact values, and every other step is derived to sit in the same family.
   ========================================================================== */

/* ---------- 1. Design Tokens ---------------------------------------------- */
:root {
  /* Brand — CLIENT APPROVED, DO NOT CHANGE */
  --indigo-50:  #EEF0FF;
  --indigo-100: #E0E3FF;
  --indigo-200: #C4C9FF;
  --indigo-300: #A2A9FB;
  --indigo-400: #7B82F2;
  --indigo-500: #4F46E5;   /* primary accent */
  --indigo-600: #4338CA;
  --indigo-700: #3730A3;
  --indigo-800: #2A2473;   /* deep brand navy (logo) */
  --indigo-900: #1A1650;

  --gold-300: #E8D2A0;
  --gold-400: #D9BC78;
  --gold-500: #C8A24B;     /* soft gold accent */
  --gold-600: #A9863A;

  /* Neutrals */
  --bg:        #FFFFFF;
  --surface:   #F8FAFC;
  --surface-2: #F1F5F9;
  --ink:       #0F172A;    /* primary text */
  --ink-soft:  #334155;
  --muted:     #64748B;
  --muted-2:   #94A3B8;
  --line:      #E6EAF1;
  --line-soft: #EFF2F7;

  /* Semantic */
  --whatsapp:  #25D366;
  --whatsapp-dark: #1EBE5A;
  --success:   #16A34A;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Sora", var(--font-sans);

  /* ---- FLUID TYPE SCALE (360px → 1920px) ----
     Floor is 15px on every text step: below that iOS zooms form fields and
     small copy stops being legible on a phone. */
  --fs-2xs:     clamp(0.9375rem, 0.930rem + 0.03vw, 0.95rem);   /* 15   → 15.2  micro labels, tags, pills */
  --fs-xs:      clamp(0.9375rem, 0.925rem + 0.06vw, 0.97rem);   /* 15   → 15.5  meta, captions, breadcrumb */
  --fs-sm:      clamp(0.95rem,   0.930rem + 0.09vw, 1rem);      /* 15.2 → 16    card copy, buttons, list items */
  --fs-base:    clamp(1rem,      0.985rem + 0.08vw, 1.0625rem); /* 16   → 17    body, form fields */
  --fs-lead:    clamp(1rem,      0.950rem + 0.28vw, 1.15rem);   /* 16   → 18.4  lead paragraphs  [= hero lead] */
  --fs-h4:      clamp(1.05rem,   1.010rem + 0.14vw, 1.15rem);   /* 16.8 → 18.4  sub-headings */
  --fs-h3:      clamp(1.12rem,   1.050rem + 0.28vw, 1.32rem);   /* 17.9 → 21.1  card titles */
  --fs-h2:      clamp(1.6rem,    1.280rem + 1.05vw, 2.35rem);   /* 25.6 → 37.6  section headings */
  --fs-h1:      clamp(1.95rem,   1.450rem + 1.70vw, 2.9rem);    /* 31.2 → 46.4  interior page-hero h1 */
  --fs-display: clamp(2.25rem,   1.350rem + 2.80vw, 3.5rem);    /* 36   → 56    homepage hero h1 */
  --fs-num:     clamp(1.9rem,    1.450rem + 1.50vw, 2.6rem);    /* 30.4 → 41.6  stat numerals */
  --fs-num-lg:  clamp(2.6rem,    1.900rem + 2.60vw, 4rem);      /* 41.6 → 64    bento feature numeral */
  --fs-quote:   clamp(1.3rem,    1.080rem + 0.85vw, 1.8rem);    /* 20.8 → 28.8  founder pull-quote */

  /* Line heights */
  --lh-display: 1.1;
  --lh-heading: 1.18;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --lh-relaxed: 1.65;

  /* ---- SPACE SCALE (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-9: 40px;  --s-10: 48px; --s-11: 56px; --s-12: 64px;

  /* Fluid space steps */
  --space-section:    clamp(40px, 5.2vw, 88px);   /* .section  padding-block */
  --space-section-sm: clamp(28px, 3.4vw, 56px);   /* .section-sm padding-block */
  --space-head:       clamp(26px, 3.0vw, 48px);   /* .section-head margin-bottom */
  --pad-card:         clamp(18px, 1.8vw, 26px);   /* compact card padding */
  --pad-card-lg:      clamp(20px, 2.1vw, 30px);   /* default card padding */
  --pad-panel:        clamp(24px, 3.2vw, 48px);   /* large panels: consult, cta-band */
  --gap-grid:         clamp(14px, 1.5vw, 22px);   /* tight card grids */
  --gap-grid-lg:      clamp(16px, 1.8vw, 24px);   /* default card grids */
  --gap-col:          clamp(28px, 3.6vw, 56px);   /* two-column section gap */

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-ico: 12px;           /* single radius for every icon tile */
  --r-pill: 999px;

  /* Icon tile sizes */
  --ico-sm: 38px;
  --ico-md: 44px;
  --ico-lg: clamp(44px, 3.6vw, 52px);

  /* Minimum comfortable tap target */
  --tap: 44px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(30, 27, 75, 0.28);
  --shadow-indigo: 0 16px 40px -16px rgba(79, 70, 229, 0.45);
  --shadow-indigo-lg: 0 22px 48px -16px rgba(79, 70, 229, 0.55);
  --shadow-whatsapp: 0 14px 34px -14px rgba(37, 211, 102, 0.6);
  --shadow-whatsapp-lg: 0 12px 30px -8px rgba(37, 211, 102, 0.7);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(18px, 4vw, 40px);
  --nav-h: 80px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* clips stray overhang without creating a
                                    scroll container (keeps sticky nav intact) */
}
img, svg, video, iframe { display: block; max-width: 100%; }
img, svg, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
/* Grid/flex children default to min-width:auto and refuse to shrink below
   their content — the single most common cause of horizontal overflow. */
.footer-grid > *, .contact-grid > *, .split > *, .hero-grid > *,
.founder-grid > *, .consult-card > *, .field-row > * { min-width: 0; }
:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Typography ------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.01em; }
p { color: var(--ink-soft); }
strong { font-weight: 600; color: var(--ink); }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: var(--lh-relaxed); }

/* Gradient text accent */
.grad-text {
  background: linear-gradient(105deg, var(--indigo-600) 0%, var(--indigo-500) 45%, var(--gold-500) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-text { color: var(--gold-600); }

/* ---------- 4. Layout helpers --------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-section); }
.section-sm { padding-block: var(--space-section-sm); }
.bg-surface { background: var(--surface); }

.section-head { max-width: 42rem; margin-bottom: var(--space-head); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--indigo-600);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--indigo-100);
  background: var(--indigo-50);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex: none; }

/* ---------- 5. Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: -0.01em;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Icons scale with the button's own font-size instead of being pinned to 18px,
   so they stay proportional across .btn and .btn-lg at every viewport. */
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary { background: var(--indigo-600); color: #fff; box-shadow: var(--shadow-indigo); }
.btn-primary:hover { background: var(--indigo-700); transform: translateY(-2px); box-shadow: var(--shadow-indigo-lg); }

.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: var(--shadow-whatsapp); }
.btn-whatsapp:hover { background: var(--whatsapp-dark); transform: translateY(-2px); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { border-color: var(--indigo-200); color: var(--indigo-700); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn-gold { background: var(--gold-500); color: #2A2473; }
.btn-gold:hover { background: var(--gold-400); transform: translateY(-2px); }

.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn-link {
  color: var(--indigo-600); font-weight: 600; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap);            /* tap target */
}
.btn-link svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* WhatsApp icon — one <symbol> in js/main.js, referenced by <use> everywhere.
   fill:currentColor so it reads correctly on green, gold and ghost buttons.
   Context rules (.btn svg, .fab-whatsapp svg, .footer-socials svg,
   .cm-ico svg) are more specific and override this default size. */
.wa-ico { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* ---------- 6. Navbar ----------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: 0 1px 0 rgba(15,23,42,.02), var(--shadow-sm); }
/* 3-column grid: logo left · links truly centered · single CTA right */
.nav-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-6); }

/* Logo only — the VIO wordmark already lives inside the logo artwork */
.brand { justify-self: start; display: inline-flex; align-items: center; }
.brand img { height: 46px; width: auto; transition: opacity .2s ease; }
.brand:hover img { opacity: .82; }

.nav-links { justify-self: center; display: flex; align-items: center; gap: 2px; }
.nav-links a:not(.btn) {
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft);
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); letter-spacing: -0.01em;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active { color: var(--indigo-700); background: var(--indigo-50); }
.nav-links a:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

.nav-cta { justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.nav-mobile-cta { display: none; }

.nav-toggle {
  display: none; width: var(--tap); height: var(--tap); border-radius: var(--r-ico);
  align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.nav-toggle:hover { border-color: var(--indigo-200); }
.nav-toggle:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }
.nav-toggle span { position: relative; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-6px) rotate(-45deg); }

/* Scroll lock while the mobile menu is open (class-based so JS can't leak it) */
body.nav-open { overflow: hidden; }

/* ---------- 7. Floating WhatsApp ------------------------------------------ */
.fab-whatsapp {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-whatsapp-lg);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  /* 'backwards', not 'both': with 'both' the finished animation keeps its
     end state pinned at animation priority, which outranks every later rule —
     it was silently killing the :hover scale and the .is-tucked state. */
  animation: fabIn .5s var(--ease) .6s backwards;
}
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-whatsapp:hover { transform: scale(1.08) translateY(-2px); }
.fab-whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--whatsapp); animation: ping 2.4s ease-out infinite;
}
/* JS adds .is-tucked whenever the footer, a lead form or a CTA band is on
   screen, so the FAB can never sit on top of a button or a field. */
.fab-whatsapp.is-tucked { opacity: 0; transform: scale(.4); pointer-events: none; visibility: hidden; }
.fab-whatsapp.is-tucked::after { animation: none; opacity: 0; }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fabIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 8. Image placeholders ----------------------------------------- */
.ph {
  position: relative;
  background:
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px dashed var(--indigo-200);
  border-radius: var(--r-md);
  display: grid; place-items: center; text-align: center;
  color: var(--muted); overflow: hidden;
  min-height: 160px;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(79,70,229,.06), transparent 50%),
    radial-gradient(100% 100% at 90% 90%, rgba(200,162,75,.08), transparent 55%);
}
.ph-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5); }
.ph-icon { width: var(--ico-sm); height: var(--ico-sm); border-radius: var(--r-ico); background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--indigo-500); }
.ph-icon svg { width: 22px; height: 22px; }
.ph-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.ph-sub { font-size: var(--fs-2xs); color: var(--muted); }

/* When an example/real image is supplied via an inline background-image,
   render it as a cover image and hide the placeholder chrome. */
.ph[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: transparent;
}
.ph[style*="background-image"]::before { display: none; }
/* Hide every placeholder label, whether it sits inside .ph-inner or is a bare
   child of .ph (avatars and the founder chip are written the second way). */
.ph[style*="background-image"] .ph-inner,
.ph[style*="background-image"] .ph-label,
.ph[style*="background-image"] .ph-sub { display: none; }

/* ---------- 9. Card base -------------------------------------------------- */
/* Shared surface + lift for every card component on the site. One hover
   distance (-4px) instead of the four that used to be in here. */
.card,
.dest-card, .step, .bento-item, .story-card, .review-card,
.svc-card, .value-card, .contact-method, .partner-logo {
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
}
.card:hover,
.dest-card:hover, .step:hover, .bento-item:hover, .story-card:hover,
.review-card:hover, .svc-card:hover, .value-card:hover,
.contact-method:hover, .partner-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--indigo-100);
}
.card { border-radius: var(--r-lg); padding: var(--pad-card-lg); }

/* Shared icon tile */
.step-ico, .bento-ico, .svc-ico, .cm-ico, .mv-ico, .li-ico, .hero-float .ico {
  border-radius: var(--r-ico);
  display: grid; place-items: center;
  flex: none;
}

/* ---------- 10. Footer ---------------------------------------------------- */
.footer { background: #0B1020; color: #CBD3E1; padding-block: var(--space-section) var(--s-8); }
.footer a { color: #CBD3E1; transition: color .2s ease; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: var(--gap-col); }
.footer-brand img { height: 44px; margin-bottom: var(--s-4); filter: brightness(1.1); }
.footer-brand p { color: #94A3B8; font-size: var(--fs-sm); max-width: 32ch; }
.footer h4 { color: #fff; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-4); font-family: var(--font-sans); font-weight: 700; }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-1); }
.footer-col li { font-size: var(--fs-sm); color: #94A3B8; }
.footer-col a { color: #94A3B8; display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-contact li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); font-size: var(--fs-sm); color: #94A3B8; }
.footer-contact svg { width: 18px; height: 18px; flex: none; color: var(--gold-400); margin-top: 4px; }
.footer-contact a { min-height: var(--tap); }
.footer-socials { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.footer-socials a { width: var(--tap); height: var(--tap); border-radius: var(--r-ico); background: rgba(255,255,255,0.06); display: grid; place-items: center; transition: background .25s ease, transform .25s ease; }
.footer-socials a:hover { background: var(--indigo-600); transform: translateY(-2px); }
.footer-socials svg { width: 19px; height: 19px; }
.footer-bottom { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: #748097; }
.footer-bottom a { color: #94A3B8; }

/* ==========================================================================
   PAGE SECTIONS
   ========================================================================== */

/* ---------- Homepage hero — REFERENCE, sized separately, do not alter ----- */
.hero { position: relative; padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(28px, 3vw, 52px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 80% -5%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(45% 45% at 5% 8%, rgba(200,162,75,.10), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
/* Cap the text column to a display measure so the h1 wrap is identical at
   1280 and 1440 instead of tracking the grid track width. */
.hero-copy { max-width: 34rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-xs);
  font-size: clamp(0.78rem, 0.74rem + 0.12vw, 0.86rem); font-weight: 500; color: var(--ink-soft); margin-bottom: clamp(14px, 1.4vw, 20px);
}
.hero-badge b { color: var(--indigo-700); font-weight: 600; }
.hero-badge .pill { background: var(--gold-500); color: #2A2473; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: clamp(14px, 1.4vw, 20px); }
.hero h1 em { font-style: normal; }
.hero p.lead { font-size: var(--fs-lead); max-width: 32rem; margin-bottom: clamp(20px, 2.2vw, 28px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: clamp(20px, 2vw, 26px); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); color: var(--muted); font-size: var(--fs-xs); }
.hero-meta .avatars { display: flex; }
.hero-meta .avatars span { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #fff; margin-left: -10px; background: linear-gradient(135deg, var(--indigo-400), var(--indigo-700)); display: grid; place-items: center; color: #fff; font-size: 0.72rem; font-weight: 700; box-shadow: var(--shadow-xs); }
.hero-meta .avatars span:first-child { margin-left: 0; }
.hero-meta .stars { color: var(--gold-500); letter-spacing: 2px; }
.hero-meta b { color: var(--ink); }
/* Tighten the gap to the stats band so it peeks above the fold. */
.hero + .section-sm { padding-top: clamp(24px, 2.6vw, 44px); }

/* Hero visual — wrapper carries the width cap so the image fills it exactly
   and the float cards stay anchored to the image edge. */
.hero-visual { position: relative; width: 100%; max-width: calc(min(62vh, 560px) * 4 / 4.5); margin-inline: auto; }
.hero-img { aspect-ratio: 4/4.5; max-height: min(62vh, 560px); min-height: 260px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hero-float {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(10px, 0.9vw, 13px) clamp(12px, 1.1vw, 15px); box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: clamp(9px, 0.9vw, 12px);
}
.hero-float .ico { width: clamp(32px, 2.6vw, 38px); height: clamp(32px, 2.6vw, 38px); }
.hero-float .ico svg { width: clamp(17px, 1.4vw, 20px); height: clamp(17px, 1.4vw, 20px); }
.hero-float small { display: block; font-size: clamp(0.68rem, 0.64rem + 0.1vw, 0.74rem); color: var(--muted); }
.hero-float b { font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1.02rem); color: var(--ink); font-family: var(--font-display); }
.hero-float.tl { top: 20px; left: -22px; animation: floaty 5s ease-in-out infinite; }
.hero-float.br { bottom: 24px; right: -20px; animation: floaty 5.6s ease-in-out infinite reverse; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Page hero (interior pages) ------------------------------------ */
/* Same family as the homepage hero, one step down the scale. */
.page-hero { padding-top: clamp(24px, 2.8vw, 44px); padding-bottom: clamp(24px, 2.8vw, 44px); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 80% 0%, rgba(79,70,229,.08), transparent 60%); }
.page-hero .breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s-3); }
.page-hero .breadcrumb a { display: inline-block; padding-block: var(--s-2); }
.page-hero .breadcrumb a:hover { color: var(--indigo-600); }
.page-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-display); max-width: 20ch; margin-bottom: var(--s-4); }
.page-hero p.lead { max-width: 38rem; }
.page-hero .hero-cta { margin-top: var(--s-6); margin-bottom: 0; }

/* ---------- Trust stats --------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: #fff; padding: var(--pad-card) var(--s-3); text-align: center; }
.stat-num { font-family: var(--font-display); font-size: var(--fs-num); font-weight: 700; letter-spacing: -0.03em; color: var(--indigo-800); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num .unit { color: var(--gold-500); }
.stat-label { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; }

.logos-strip { margin-top: var(--s-9); text-align: center; }
.logos-strip p { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin-bottom: var(--s-5); }
.logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(18px, 3vw, 48px); }
.logos-row span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--muted); letter-spacing: -0.01em; transition: color .25s ease; }
.logos-row span:hover { color: var(--indigo-700); }

/* ---------- Destination cards --------------------------------------------- */
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-lg); }
.dest-card { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.dest-media { position: relative; aspect-ratio: 16/11; border: none; border-radius: 0; min-height: 0; }
.dest-media .flag { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--fs-2xs); font-weight: 700; color: var(--indigo-800); box-shadow: var(--shadow-xs); }
.dest-body { padding: var(--pad-card); }
.dest-body h3 { margin-bottom: var(--s-2); }
.dest-body p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-4); }
.dest-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.dest-tags span { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); }
.dest-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.dest-foot small { color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Process steps ------------------------------------------------- */
.process { position: relative; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.step { position: relative; border-radius: var(--r-lg); padding: var(--pad-card-lg); overflow: hidden; }
.step-num { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; color: var(--indigo-600); letter-spacing: 0.06em; }
.step-ico { width: var(--ico-lg); height: var(--ico-lg); background: var(--indigo-50); color: var(--indigo-600); margin: var(--s-3) 0 var(--s-4); transition: background .3s ease, color .3s ease; }
.step:hover .step-ico { background: var(--indigo-600); color: #fff; }
.step-ico svg { width: 24px; height: 24px; }
.step h3 { margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); color: var(--muted); }
.step .ghost-num { position: absolute; right: var(--s-4); bottom: -10px; font-family: var(--font-display); font-size: 4.4rem; font-weight: 800; color: var(--surface-2); z-index: 0; line-height: 1; }
.step > * { position: relative; z-index: 1; }

/* ---------- Bento (Why Choose) -------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: var(--gap-grid); }
.bento-item { position: relative; border-radius: var(--r-lg); padding: var(--pad-card-lg); overflow: hidden; }
.bento-ico { width: var(--ico-md); height: var(--ico-md); background: var(--indigo-50); color: var(--indigo-600); margin-bottom: var(--s-4); }
.bento-ico svg { width: 22px; height: 22px; }
.bento-item h3 { margin-bottom: var(--s-2); }
.bento-item p { font-size: var(--fs-sm); color: var(--muted); }
.bento-item.span-2 { grid-column: span 2; }
.bento-feature { background: linear-gradient(150deg, var(--indigo-800), var(--indigo-600)); color: #fff; grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.bento-feature::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,162,75,.35), transparent 70%); }
.bento-feature > * { position: relative; z-index: 1; }
.bento-feature h3 { color: #fff; font-size: var(--fs-h2); }
.bento-feature p { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); }
.bento-feature .big-num { font-family: var(--font-display); font-size: var(--fs-num-lg); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bento-feature .big-num .unit { color: var(--gold-400); }
.bento-gold { background: linear-gradient(150deg, var(--gold-500), var(--gold-600)); color: #2A2473; }
.bento-gold .bento-ico { background: rgba(255,255,255,0.35); color: #2A2473; }
.bento-gold h3 { color: #2A2473; }
.bento-gold p { color: #2A2473; }

/* ---------- Success stories ----------------------------------------------- */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-lg); }
.story-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; }
.story-media { position: relative; aspect-ratio: 16/10; border: none; border-radius: 0; min-height: 0; }
.story-visa { position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2; background: var(--success); color: #fff; font-size: var(--fs-2xs); font-weight: 700; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--s-1); box-shadow: var(--shadow-sm); }
.story-visa svg { width: 14px; height: 14px; flex: none; }
.story-body { padding: var(--pad-card); display: flex; flex-direction: column; flex: 1; }
.story-quote { font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); margin-bottom: var(--s-5); flex: 1; }
.story-foot { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.story-ava { width: 46px; height: 46px; border-radius: 50%; flex: none; min-height: 0; border-style: solid; border-color: var(--line); }
.story-foot .who { min-width: 0; }
.story-foot .who b { display: block; font-size: var(--fs-sm); }
.story-foot .who small { color: var(--muted); font-size: var(--fs-2xs); }
.story-uni { margin-left: auto; text-align: right; flex: none; }
.story-uni .ulogo { width: 46px; height: 30px; min-height: 0; border-radius: var(--s-2); margin-left: auto; }
.story-uni small { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: var(--s-1); }

/* ---------- University partners ------------------------------------------- */
.partners-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-grid); }
.partner-logo { aspect-ratio: 3/2; min-height: 0; border-radius: var(--r-md); border-style: solid; }
.partner-logo .ph-label { font-size: var(--fs-2xs); }

/* ---------- Reviews ------------------------------------------------------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.review-card { border-radius: var(--r-lg); padding: var(--pad-card); }
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.review-stars { color: var(--gold-500); letter-spacing: 2px; font-size: var(--fs-sm); }
.review-g { width: 22px; height: 22px; flex: none; }
.review-text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); margin-bottom: var(--s-5); }
.review-who { display: flex; align-items: center; gap: var(--s-3); }
.review-ava { width: var(--tap); height: var(--tap); border-radius: 50%; min-height: 0; border-color: var(--line); border-style: solid; flex: none; }
.review-who b { display: block; font-size: var(--fs-sm); }
.review-who small { color: var(--muted); font-size: var(--fs-2xs); }

.google-head { display: flex; align-items: center; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-2); flex-wrap: wrap; }
.google-head .score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--ink); }
.google-head .gstars { color: var(--gold-500); letter-spacing: 2px; }

/* ---------- Founder ------------------------------------------------------- */
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap-col); align-items: center; }
.founder-img { aspect-ratio: 4/4.6; max-height: min(60vh, 520px); min-height: 240px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.founder-quote { font-family: var(--font-display); font-size: var(--fs-quote); line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--ink); margin: var(--s-2) 0 var(--s-5); }
.founder-quote .gold-text { font-style: italic; }
.founder-sign { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
/* Small round avatar — a face crop of the SAME 1068x1600 portrait as the main
   image, so there is no separate avatar file to keep in sync.
   Plain cover would frame the full torso (she reads as a distant figure at
   54px) and clip the top of her head, so the background is zoomed to 190% and
   the focal point pulled to her face at 44% / 11%.
   background-size + background-position are the background-image equivalents of
   object-fit + object-position; object-fit has no effect on a div. */
/* flex:none is required — the div is empty now that the placeholder label is
   gone, so as a flex item in .founder-sign it would shrink to 0 width. */
.founder-ava { flex: none; }
.founder-ava[style*="background-image"] { background-size: 190%; background-position: 44% 15%; }
.founder-sign .name b { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.founder-sign .name small { color: var(--muted); font-size: var(--fs-xs); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); margin-top: var(--s-6); }
.mv-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); background: var(--surface); }
.mv-card .mv-ico { width: var(--ico-sm); height: var(--ico-sm); background: #fff; color: var(--indigo-600); margin-bottom: var(--s-3); box-shadow: var(--shadow-xs); }
.mv-card .mv-ico svg { width: 20px; height: 20px; }
.mv-card h4 { margin-bottom: var(--s-2); }
.mv-card p { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Consultation / Lead form -------------------------------------- */
.consult-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.consult-aside { background: linear-gradient(160deg, var(--indigo-800) 0%, var(--indigo-600) 100%); color: #fff; padding: var(--pad-panel); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.consult-aside::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(200,162,75,.3), transparent 70%); }
.consult-aside > * { position: relative; z-index: 1; }
.consult-aside .eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); color: #fff; }
.consult-aside .eyebrow::before { background: var(--gold-400); }
.consult-aside h2 { color: #fff; margin-bottom: var(--s-3); }
.consult-aside p { color: rgba(255,255,255,0.82); margin-bottom: var(--s-6); font-size: var(--fs-sm); }
.consult-list { display: flex; flex-direction: column; gap: var(--s-3); }
.consult-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: rgba(255,255,255,0.92); }
.consult-list .ck { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.14); display: grid; place-items: center; flex: none; margin-top: 1px; }
.consult-list .ck svg { width: 14px; height: 14px; color: var(--gold-400); }
.consult-aside .aside-foot { margin-top: auto; padding-top: var(--s-8); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.consult-aside .aside-foot .stars { color: var(--gold-400); letter-spacing: 2px; }
.consult-aside .aside-foot small { color: rgba(255,255,255,0.75); font-size: var(--fs-xs); }

.consult-form { padding: var(--pad-panel); }
.consult-form h3 { margin-bottom: var(--s-1); }
.consult-form > p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--s-2); }
.field label .req { color: var(--indigo-500); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
  font-size: var(--fs-base);          /* never below 16px — stops iOS zoom */
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo-400); background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.form-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-3); text-align: center; }
.form-note svg { width: 14px; height: 14px; display: inline; vertical-align: -2px; color: var(--success); }
.form-success { display: none; text-align: center; padding: var(--s-7) var(--s-2); }
.form-success.show { display: block; animation: fadeUp .5s var(--ease); }
.form-success .ok-ico { width: 64px; height: 64px; border-radius: 50%; background: #ECFDF3; color: var(--success); display: grid; place-items: center; margin: 0 auto var(--s-4); }
.form-success .ok-ico svg { width: 32px; height: 32px; }
.form-success h3 { margin-bottom: var(--s-2); }
.form-success p { color: var(--muted); margin-bottom: var(--s-5); font-size: var(--fs-sm); }

/* ---------- CTA band ------------------------------------------------------ */
.cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, var(--indigo-800) 0%, var(--indigo-600) 55%, var(--indigo-700) 100%); padding: var(--pad-panel); text-align: center; color: #fff; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 15% 10%, rgba(200,162,75,.22), transparent 55%), radial-gradient(50% 80% at 90% 100%, rgba(123,130,242,.35), transparent 60%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 22ch; margin: 0 auto var(--s-4); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 46ch; margin: 0 auto var(--s-6); font-size: var(--fs-sm); }
.cta-band .hero-cta { justify-content: center; margin-bottom: 0; }
.cta-band .btn-ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- Services list page -------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-lg); }
.svc-card { border-radius: var(--r-lg); padding: var(--pad-card-lg); }
.svc-ico { width: var(--ico-lg); height: var(--ico-lg); background: linear-gradient(150deg, var(--indigo-50), #fff); border: 1px solid var(--indigo-100); color: var(--indigo-600); margin-bottom: var(--s-4); }
.svc-ico svg { width: 24px; height: 24px; }
.svc-card h3 { margin-bottom: var(--s-2); }
.svc-card p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-4); }
.svc-card ul { display: flex; flex-direction: column; gap: var(--s-2); }
.svc-card li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.svc-card li svg { width: 17px; height: 17px; color: var(--success); flex: none; margin-top: 4px; }

/* ---------- Split feature rows -------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-col); align-items: center; }
.split.reverse .split-media { order: 2; }
/* aspect-ratio owns the box; min-height used to fight it and force a heavy
   crop on every viewport under ~507px of column width. */
.split-media { border-radius: var(--r-xl); aspect-ratio: 4/3; max-height: min(52vh, 460px); min-height: 200px; box-shadow: var(--shadow-md); }
.split-body h2 { margin-bottom: var(--s-4); }
.split-list { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); }
.split-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.split-list .li-ico { width: var(--ico-sm); height: var(--ico-sm); background: var(--indigo-50); color: var(--indigo-600); }
.split-list .li-ico svg { width: 19px; height: 19px; }
.split-list b { display: block; margin-bottom: 2px; font-size: var(--fs-sm); }
.split-list p { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- FAQ ----------------------------------------------------------- */
.faq-list { max-width: 52rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item.open { border-color: var(--indigo-200); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); padding: var(--s-5) var(--pad-card); text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink); }
.faq-q:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: -2px; }
.faq-q .pm { width: 30px; height: 30px; border-radius: var(--s-2); background: var(--surface); display: grid; place-items: center; flex: none; transition: background .3s, transform .3s; }
.faq-q .pm svg { width: 17px; height: 17px; color: var(--indigo-600); transition: transform .3s var(--ease); }
.faq-item.open .pm { background: var(--indigo-600); }
.faq-item.open .pm svg { color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 var(--pad-card) var(--s-5); color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Contact ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-col); align-items: start; }
.contact-methods { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.contact-method { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--pad-card); border-radius: var(--r-md); }
.contact-method .cm-ico { width: var(--ico-md); height: var(--ico-md); }
.contact-method .cm-ico svg { width: 22px; height: 22px; }
.contact-method > div { min-width: 0; }
.contact-method b { display: block; margin-bottom: 2px; font-size: var(--fs-sm); }
.contact-method p { font-size: var(--fs-sm); color: var(--muted); }
.contact-method span { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.contact-method a { color: var(--indigo-600); font-weight: 600; }
/* No min-height: with aspect-ratio set, a min-height taller than
   width x ratio pushes the WIDTH out and overflows the page. */
.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/7; max-height: 420px; }
.map-embed iframe { width: 100%; height: 100%; max-width: 100%; border: 0; display: block; }

/* ---------- Values / about ------------------------------------------------ */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.value-card { padding: var(--pad-card-lg); border-radius: var(--r-lg); }
.value-card .v-num { font-family: var(--font-display); font-weight: 800; color: var(--indigo-200); font-size: 2rem; line-height: 1; margin-bottom: var(--s-2); }
.value-card h3 { margin-bottom: var(--s-2); }
.value-card p { font-size: var(--fs-sm); color: var(--muted); }

.timeline { max-width: 48rem; margin-inline: auto; position: relative; padding-left: var(--s-8); }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--indigo-200), var(--gold-300)); }
.tl-item { position: relative; padding-bottom: var(--s-7); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: calc(var(--s-8) * -1); top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--indigo-500); }
.tl-year { font-family: var(--font-display); font-weight: 700; color: var(--indigo-600); font-size: var(--fs-xs); margin-bottom: var(--s-1); }
.tl-item h3 { margin-bottom: var(--s-1); }
.tl-item p { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Reveal animation ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Utilities ----------------------------------------------------- */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--s-8); }
.cta-inline { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet landscape / small laptop --- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-feature { grid-column: span 2; grid-row: span 1; }
  .partners-grid { grid-template-columns: repeat(4, 1fr); }
  .dest-grid, .steps, .story-grid, .reviews-grid, .svc-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- Mobile nav takes over. Raised from 880 → 1024: between 881 and ~1000 the
       desktop nav (logo + 6 links + CTA ≈ 939px) overflowed its container. --- */
@media (max-width: 1024px) {
  :root { --nav-h: 66px; }
  .nav-cta > .btn { display: none; }   /* header CTA moves into the menu */
  .nav-toggle { display: inline-flex; }
  .nav-inner { grid-template-columns: auto 1fr; }
  .brand { grid-column: 1; }
  .nav-cta { grid-column: 2; }

  /* Mobile menu panel */
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: var(--s-1);
    background: #fff; padding: var(--s-5) var(--gutter) var(--s-7);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    display: flex;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { min-height: var(--tap); padding: var(--s-3) var(--s-4); font-size: var(--fs-base); border-radius: var(--r-md); }
  .nav-mobile-cta { display: flex; margin-top: var(--s-3); }
}

/* --- Stacking point for two-column sections --- */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-visual { max-width: min(480px, calc(min(62vh, 560px) * 4 / 4.5)); }
  .hero-float.tl { left: 8px; }
  .hero-float.br { right: 8px; }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-img { max-width: 420px; margin-inline: auto; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  /* !important defeats the inline min-height:440px on about.html:95, which
     combines with its inline aspect-ratio to force the width past the
     viewport. Height comes from the aspect-ratio instead. */
  .split-media { max-height: min(46vh, 380px); min-height: 0 !important; }
  .consult-card { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .footer-brand { grid-column: 1 / -1; }
  .map-embed { aspect-ratio: 4/3; }
}

/* --- Single column --- */
@media (max-width: 620px) {
  .dest-grid, .steps, .story-grid, .reviews-grid, .svc-grid, .values-grid, .bento, .mv-grid { grid-template-columns: 1fr; }
  .bento-feature, .bento-item.span-2 { grid-column: span 1; grid-row: span 1; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .hero-float { display: none; }
  .hero-cta .btn, .cta-band .hero-cta .btn, .cta-inline .btn { width: 100%; }
  .section-head { margin-bottom: var(--s-7); }
  .founder-img { max-width: 100%; }
  .split-media { max-height: 300px; }
  /* Give the fixed FAB a lane so it can't sit on the last row of content */
  .footer-bottom { padding-bottom: 64px; }
}

/* --- Small phones --- */
@media (max-width: 430px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .footer-brand { grid-column: 1; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: var(--s-4) var(--s-2); }
  .logos-row { gap: var(--s-4) var(--s-5); }
  .timeline { padding-left: var(--s-6); }
  .tl-item::before { left: calc(var(--s-6) * -1); }
  .story-foot { flex-wrap: wrap; }
  .story-uni { margin-left: 0; text-align: left; width: 100%; padding-top: var(--s-2); }
  .story-uni .ulogo { margin-left: 0; }
  .google-head { gap: var(--s-2); }
  .fab-whatsapp { width: 52px; height: 52px; right: var(--s-4); bottom: var(--s-4); }
  .fab-whatsapp svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  /* animation-delay must be reset too: fabIn uses fill-mode backwards, so a
     surviving 0.6s delay would hold the FAB invisible for that whole time. */
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}