/* ==========================================================================
   PDC Visa International — Homepage prototype
   Design tokens and layout follow DESIGN.md.
   Spacing is the primary requirement: every section keeps generous top/bottom
   padding and no two card grids sit next to each other without a visual break.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* colour — sampled straight from assets/branding/pdcvisa-logo.png: the badge runs
     indigo → violet → magenta, with a sky-blue globe. The legacy --navy-* / --gold-*
     names stay as aliases so every existing rule keeps working. */
  --brand-950: #1C1A5E;    /* primary, darkest — headings, hero, footer */
  --brand-900: #26237E;
  --brand-800: #4B2AA8;    /* primary — links, buttons */
  --brand-600: #7A2BA5;    /* middle of the logo gradient */
  --brand-500: #123BAF;    /* logo indigo — where the gradient starts */
  --brand-100: #ECE9FA;
  --brand-50:  #F7F5FE;
  --magenta-700: #A81470;
  --magenta-600: #C4197F;  /* secondary — accents that carry text */
  --magenta-500: #EC2C9E;  /* secondary — logo magenta, fills and gradients */
  --magenta-300: #F79BD1;
  --sky-500:    #0199DC;   /* globe blue */
  --brand-gradient: linear-gradient(135deg, var(--brand-500), var(--brand-600) 55%, var(--magenta-500));

  --navy-950: var(--brand-950);
  --navy-900: var(--brand-900);
  --navy-800: var(--brand-800);
  --blue-100: var(--brand-100);
  --blue-50:  var(--brand-50);
  --gold-500: var(--magenta-600);
  --gold-300: var(--magenta-300);
  --ink:      #241F4A;
  --muted:    #6A6484;
  --line:     #E2DEF2;
  --white:    #FFFFFF;

  /* type */
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;

  --fs-h1:    clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);   /* 40 → 68px  */
  --fs-h2:    clamp(1.875rem, 1.35rem + 2.2vw, 3rem);   /* 30 → 48px  */
  --fs-h3:    clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);/* 22 → 28px  */
  --fs-body:  clamp(1rem, 0.955rem + 0.19vw, 1.125rem); /* 16 → 18px  */
  --fs-lead:  clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);
  --fs-small: 0.9375rem;

  /* layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 92px;

  /* section rhythm — see DESIGN.md "Section spacing" */
  --space-section:  clamp(3.5rem, 2.1rem + 6vw, 6rem);    /* 56 → 96px  */
  --space-feature:  clamp(4.5rem, 2.9rem + 6.8vw, 8rem);  /* 72 → 128px */
  --space-small:    clamp(3rem, 2.1rem + 3.8vw, 4.5rem);  /* 48 → 72px  */

  --radius-card: 18px;
  --radius-btn: 10px;
  --shadow-card: 0 1px 2px rgba(28, 26, 94, .04), 0 12px 32px -18px rgba(28, 26, 94, .28);
  --shadow-lift: 0 2px 6px rgba(28, 26, 94, .06), 0 24px 48px -24px rgba(28, 26, 94, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------- 2. Base reset */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win over any later display rule (e.g. `ul { display: grid }`),
   otherwise JS that sets el.hidden = true has no visual effect. */
[hidden] { display: none !important; }

/* The closed mobile drawer is parked off-canvas with translateX(102%), which still
   widens the scrollable canvas (measured 725px against a 375px viewport). That mismatch
   is what pushed the fixed back-to-top button off the right edge on phones, so the root
   clips horizontally too — `clip` for browsers that have it, `hidden` as the fallback. */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--navy-950); margin: 0; line-height: 1.18; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy-800); text-decoration: none; }
button { font: inherit; color: inherit; }

/* Icons are drawn as strokes so they inherit colour from their context. */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.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;
}

/* Focus: high-visibility ring — the audience is 50–75, so this must be obvious. */
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 14px 22px; border-radius: 0 0 10px 10px;
  font-weight: 600; transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------ 3. Section shells */
.section { padding-block: var(--space-section); }
.section--white { background: var(--white); }
.section--blue  { background: var(--blue-100); }
.section--tint  { background: var(--blue-50); }

/* Sections that carry a full card grid get the larger feature rhythm. */
#services, #pricing, #consultation { padding-block: var(--space-feature); }

.section__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); }
.section__head--withAside {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  max-width: none; text-align: left;
}
.section__head--left { align-items: flex-start; }
.section__head--withAside > div { max-width: 700px; }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.section__title { font-size: var(--fs-h2); }
.section__head .section__title + .rule { margin-inline: auto; }
.section__head--withAside .rule { margin-inline: 0; }

.rule { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--gold-500); margin-top: 22px; }

.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--muted); margin-top: 20px; }
.lead--narrow { max-width: 58ch; }
.lead--center { max-width: 62ch; margin-inline: auto; }

.note { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.note--center { text-align: center; margin-top: 40px; }


/* -------------------------------------------------------------- 4. Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: center;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--navy-900); color: #fff; box-shadow: 0 10px 24px -14px rgba(38, 35, 126, .9); }
.btn--primary:hover { background: var(--navy-950); transform: translateY(-1px); }

.btn--ghost { background: rgba(255, 255, 255, .94); color: var(--navy-900); border-color: rgba(38, 35, 126, .28); }
.btn--ghost:hover { background: #fff; border-color: var(--navy-900); transform: translateY(-1px); }

.btn--outline { background: transparent; color: var(--navy-900); border-color: #D6D2F0; }
.btn--outline:hover { background: var(--white); border-color: var(--navy-800); }

.btn--onNavy { background: #fff; color: var(--navy-950); }
.btn--onNavy:hover { background: var(--blue-100); transform: translateY(-1px); }

.btn--sm { min-height: 46px; padding: 11px 20px; font-size: .9375rem; }
.btn--lg { min-height: 58px; padding: 17px 34px; font-size: 1.0625rem; }
.btn--full { width: 100%; }

.link-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--navy-800); padding-block: 6px;
}
.link-cta span[aria-hidden] { transition: transform .2s var(--ease); }
.link-cta:hover { color: var(--navy-950); }
.link-cta:hover span[aria-hidden] { transform: translateX(4px); }
.link-cta--aside { flex: none; white-space: nowrap; }

/* --------------------------------------------------------------- 5. Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(28, 26, 94, .5); }

/* The header carries eight nav items plus a language switcher and a CTA, so it gets a
   wider track and tighter gutters than the content container. */
.site-header .container { max-width: 1440px; padding-inline: clamp(20px, 2.6vw, 40px); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
/* The supplied logo already carries the wordmark, so the header shows the artwork alone.
   Intrinsic size is 480×272 (assets/branding/pdcvisa-logo.png); height drives the display size. */
.brand__logo { width: auto; height: 68px; flex: none; }
.brand__text { display: grid; }
.brand__tagline { font-family: var(--font-head); font-size: .6875rem; font-style: italic; color: var(--muted); margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 18px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 12px 10px; border: 0; background: none; border-radius: 8px;
  font-size: .875rem; font-weight: 500; color: var(--ink); cursor: pointer;
  white-space: nowrap; transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--navy-800); background: var(--blue-50); }
.nav__link.is-current { color: var(--navy-900); font-weight: 600; }
.nav__link.is-current::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.nav__list > li { position: relative; }

.nav__caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .65; transition: transform .2s var(--ease); }
[aria-expanded="true"] > .nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.nav__menu, .lang__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
  min-width: 244px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift);
}
.nav__menu[hidden], .lang__menu[hidden] { display: none; }
.nav__menu a, .lang__menu a {
  display: block; padding: 11px 14px; border-radius: 9px;
  font-size: .9375rem; color: var(--ink);
}
.nav__menu a:hover, .lang__menu a:hover { background: var(--blue-50); color: var(--navy-900); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.lang { position: relative; }
.lang__button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 12px; border: 0; background: none; border-radius: 8px;
  font-size: .875rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.lang__button .ico { width: 18px; height: 18px; }
.lang__button:hover { background: var(--blue-50); }
.lang__menu { left: auto; right: 0; min-width: 160px; }

.hamburger {
  display: none; width: 52px; height: 52px; padding: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--navy-950); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.hamburger span + span { margin-top: 6px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(28, 26, 94, .38); }
.nav-scrim[hidden] { display: none; }

/* ------------------------------------------------------------------ 6. Hero */
.hero { position: relative; isolation: isolate; background: var(--navy-950); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
/* The source photo is mirrored (a flipped copy is generated in assets/photos/), so the
   couple sits on the right and the open sea and sky fall on the left under the headline. */
/* Held slightly above centre so the crop keeps faces and the bay in frame. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Light scrim: the mirrored photo is bright sky and sea on the left, so the
   headline sits in navy on a soft white wash rather than over a dark veil. */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .62) 22%, rgba(255, 255, 255, .28) 40%, rgba(255, 255, 255, .06) 54%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 18%);
}

.hero__inner { display: flex; align-items: center; min-height: clamp(520px, 68vh, 700px); padding-block: clamp(3.5rem, 2.4rem + 5vw, 6.5rem); }
.hero__content { max-width: 620px; }
.hero .eyebrow { color: #A81470; }
.hero__title { font-size: var(--fs-h1); color: var(--navy-950); line-height: 1.08; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: #3D3862; margin-top: 24px; max-width: 32ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Trust bar sits on its own white band under the image, as in the reference. */
.trust-bar { position: relative; z-index: 1; background: #fff; border-top: 1px solid var(--line); }
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px;
  padding-block: 26px;
}
.trust-strip li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.trust-strip .ico { width: 26px; height: 26px; color: var(--navy-800); }
.trust-strip strong { display: block; color: var(--navy-950); font-size: .9375rem; font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------------------------------ 7. Cards */
.cards { display: grid; gap: clamp(20px, 2vw, 30px); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D3CDF1; }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
/* The badge is a static flex item pulled up over the image, so it always sits on
   the media edge no matter how tall the card body grows. */
.card__badge {
  position: relative; z-index: 2; align-self: flex-start;
  margin: -26px 0 0 28px;
  display: grid; place-items: center; width: 52px; height: 52px;
  background: #fff; color: var(--navy-800); border-radius: 14px;
  box-shadow: 0 8px 20px -10px rgba(28, 26, 94, .5);
}
.card__badge .ico { width: 24px; height: 24px; }
/* flex: 1 lets margin-top:auto on the link push it to a shared baseline across cards. */
.card__body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px 32px 32px; }
.card__title { font-size: var(--fs-h3); }
.card__body p { color: var(--muted); line-height: 1.65; }
.card__body .link-cta { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- 8. Journey */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: start; }
.journey__step { position: relative; text-align: center; padding-inline: 8px; }
/* thin connector arrows between the nodes */
.journey__step + .journey__step::before {
  content: ""; position: absolute; top: 39px; right: calc(50% + 52px); left: calc(-50% + 52px);
  height: 1px; background: rgba(75, 42, 168, .3);
}
.journey__step + .journey__step::after {
  content: ""; position: absolute; top: 35px; right: calc(50% + 50px);
  width: 7px; height: 7px; border-top: 1px solid rgba(75, 42, 168, .5); border-right: 1px solid rgba(75, 42, 168, .5);
  transform: rotate(45deg);
}
.journey__icon {
  display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 22px;
  background: #fff; color: var(--navy-800); border-radius: 50%;
  box-shadow: 0 10px 26px -16px rgba(28, 26, 94, .7);
}
.journey__icon .ico { width: 30px; height: 30px; }
.journey__step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.journey__step p { font-size: .9375rem; line-height: 1.6; color: var(--muted); max-width: 24ch; margin-inline: auto; }

/* ------------------------------------------------------- 9. Split (lifestyle) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--white); }
.split__media { position: relative; min-height: 460px; background: var(--blue-100); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__panel { display: flex; align-items: center; padding: var(--space-feature) var(--gutter); }
.split__content { max-width: 560px; margin-inline: auto; margin-inline-start: clamp(0px, 4vw, 72px); }
.split__content .btn { margin-top: 34px; }

.feature-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px;
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
  padding-top: 36px; border-top: 1px solid var(--line);
}
.feature-row li { display: grid; justify-items: center; gap: 12px; text-align: center; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.feature-row__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--blue-100); color: var(--navy-800); }
.feature-row__icon .ico { width: 24px; height: 24px; }
.split__content .note { margin-top: 28px; }

/* ---------------------------------------------------------------- 10. Pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 44px); }
.pillar { text-align: center; padding-inline: 6px; }
.pillar__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px; background: var(--blue-100); color: var(--navy-800); }
.pillar__icon .ico { width: 28px; height: 28px; }
.pillar h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.pillar p { font-size: .9375rem; line-height: 1.6; color: var(--muted); max-width: 26ch; margin-inline: auto; }

/* ----------------------------------------------------------------- 11. Plans */
.cards--plans { align-items: stretch; }
.plan {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(28px, 3vw, 36px); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.plan--featured { border-color: var(--gold-300); box-shadow: var(--shadow-lift); position: relative; }
/* Sits on the card's top edge so all three plan names stay on one line. */
.plan__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--gold-500); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.plan__name { font-size: 1.5rem; }
/* Reserved height keeps the feature lists aligned even without a "starting from" line. */
.plan__price { display: flex; flex-direction: column; justify-content: flex-end; min-height: 76px; margin-top: 16px; }
.plan__from { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan__amount { font-family: var(--font-head); font-size: 2rem; font-weight: 600; color: var(--navy-900); }
.plan__amount--text { font-size: 1.75rem; }
.plan__note { font-size: .8125rem; color: var(--muted); font-style: italic; margin-top: 4px; }
.plan__list { display: grid; gap: 12px; margin: 26px 0 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.plan__list li { position: relative; padding-left: 30px; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B2AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.plan .btn { margin-top: auto; }
.pricing__disclaimer { max-width: 66ch; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------------------------------- 12. CTA banner */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy-950); }
.cta__panel { display: flex; align-items: center; justify-content: flex-end; padding: var(--space-feature) clamp(24px, 4vw, 64px); }
.cta__content { max-width: 520px; width: 100%; color: #fff; margin-inline-start: auto; padding-inline-start: var(--gutter); }
.cta__title { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); color: #fff; }
.cta__content p { margin-top: 20px; color: rgba(255, 255, 255, .84); font-size: var(--fs-lead); line-height: 1.6; max-width: 42ch; }
.cta__content .btn { margin-top: 36px; }
.cta__media { position: relative; min-height: 380px; }
.cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ 13. Testimonials */
.quote {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 36px); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.quote__mark { font-family: var(--font-head); font-size: 3.5rem; line-height: .8; color: var(--gold-300); }
.quote__slot {
  margin: 18px 0 28px; padding: 22px; flex: 1;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--blue-50);
  color: var(--muted); font-style: italic; font-size: .9375rem; text-align: center;
}

/* --- Sample testimonial cards (layout filler — see the comment in index.html) --- */
.quote--sample { position: relative; }
.quote__tag {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(236, 44, 158, .12); color: #A81470;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.quote__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.quote__stars svg { width: 18px; height: 18px; fill: var(--gold-500); }
.quote__text { margin: 0 0 26px; flex: 1; }
.quote__text p { font-size: .9375rem; line-height: 1.7; color: var(--ink); }
.quote__text p::before { content: "\201C"; }
.quote__text p::after { content: "\201D"; }

.quote__person { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-100); border: 1px dashed #D3CDF1; flex: none; }
/* Monogram instead of a stock face: an invented quote must not be pinned on a real person. */
.quote--sample .quote__avatar {
  display: grid; place-items: center; border: 0; background: var(--navy-900); color: #fff;
  font-size: .875rem; font-weight: 600; letter-spacing: .04em;
}
.quote__person > span:last-child { display: grid; gap: 2px; }
.quote__person strong { font-size: .9375rem; color: var(--ink); }
.quote__person span span { font-size: .8125rem; color: var(--muted); }

/* --------------------------------------------------------------- 14. Resources */
.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
.resource {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.resource { position: relative; }
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D3CDF1; }
/* One link per card: the heading anchor is stretched over the whole card, so the
   image needs no duplicate (empty) link of its own. */
.resource h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.resource h3 a:focus-visible::after { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.resource__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-100); }
.resource__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.resource:hover .resource__media img { transform: scale(1.04); }
.resource__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.resource__tag { display: inline-block; margin-bottom: 12px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-500); }
.resource h3 { font-size: 1.1875rem; line-height: 1.35; }
.resource h3 a { color: var(--navy-950); }
.resource h3 a:hover { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; }
.resource p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.resource .link-cta--sm { margin-top: auto; padding-top: 18px; font-size: .9375rem; }
.lead--tight { margin-top: 12px; max-width: 52ch; }

/* ------------------------------------------------------- 15. Consultation form */
.consult { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.consult__intro .lead { max-width: 46ch; }
.consult__points { display: grid; gap: 14px; margin-top: 36px; }
.consult__points li { position: relative; padding-left: 32px; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.consult__points li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4197F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.consult__formWrap {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(26px, 3.2vw, 44px); box-shadow: var(--shadow-lift);
}
.form__intro { font-size: var(--fs-small); color: var(--muted); margin-bottom: 26px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.req { color: var(--gold-500); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #D3CEEA; border-radius: var(--radius-btn);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360738A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;
}
.field input::placeholder, .field textarea::placeholder { color: #928DAE; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(75, 42, 168, .12); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid select { border-color: #C0392B; }
.field__error { font-size: .8125rem; font-weight: 500; color: #A5271A; }
.field__error[hidden] { display: none; }

.field--consent { gap: 10px; }
.checkbox { display: flex; align-items: flex-start; gap: 14px; font-weight: 400 !important; font-size: .9375rem; line-height: 1.6; cursor: pointer; }
.checkbox input { width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--navy-800); flex: none; cursor: pointer; }
.field.is-invalid .checkbox span { color: #A5271A; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: grid; gap: 18px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); justify-items: start; }
.form__legal { font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.form__status { margin-top: 24px; padding: 18px 22px; border-radius: 12px; font-size: .9375rem; line-height: 1.6; }
.form__status[hidden] { display: none; }
.form__status.is-ok { background: #ECF7EF; border: 1px solid #BBE0C6; color: #1E5B33; }
.form__status.is-error { background: #FDEDEA; border: 1px solid #F3C7BF; color: #A5271A; }

/* ---------------------------------------------------------------- 16. Footer */
.footer { position: relative; overflow: hidden; background: var(--navy-950); color: rgba(255, 255, 255, .8); padding-top: clamp(3.5rem, 2.2rem + 5vw, 6rem); padding-bottom: 0; }
.footer .container { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.25fr; gap: clamp(28px, 3vw, 48px); padding-bottom: clamp(2.5rem, 4vw, 4rem); }

.brand--footer { color: var(--gold-300); }
.brand--footer .brand__tagline { color: rgba(255, 255, 255, .55); }
.footer__desc { margin-top: 24px; max-width: 34ch; font-size: .9375rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }


.footer__heading { font-family: var(--font-body); font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 24px; }
.footer__col ul { display: grid; gap: 14px; }
/* Scoped to list links so it cannot repaint the CTA button's own text colour. */
.footer__col ul a { color: rgba(255, 255, 255, .76); font-size: .9375rem; }
.footer__col ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__contact li { display: flex; gap: 14px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
/* stack multiple entries (e.g. two phone numbers) inside one contact row */
.footer__contact li > span { display: grid; gap: 3px; justify-items: start; }
.footer__contact .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--gold-300); }
.footer__contact em { display: block; margin-top: 3px; font-size: .75rem; font-style: normal; color: rgba(255, 255, 255, .45); }
.footer__col--contact .btn { margin-top: 28px; }

.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding-block: 30px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .8125rem; color: rgba(255, 255, 255, .55);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.footer__legal a { color: rgba(255, 255, 255, .6); }
.footer__legal a:hover { color: #fff; }

/* subtle lotus watermark — Thai identity kept quiet, per DESIGN.md */
.footer__lotus { position: absolute; right: -40px; bottom: -30px; width: 320px; color: #fff; opacity: .05; pointer-events: none; }

/* --------------------------------------------------------------- 17. To top */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--navy-900); color: #fff; border: 0; border-radius: 50%;
  box-shadow: 0 12px 28px -12px rgba(28, 26, 94, .9); cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.to-top:hover { background: var(--navy-950); transform: translateY(-2px); }
.to-top[hidden] { display: none; }
/* While the mobile drawer is open the button would float over the dimmed page — the scrim
   sits above it, so it only reads as a stray dot. Hide it with the drawer. */
body.is-locked .to-top { display: none; }


/* ------------------------------------------------- 7b. Feature cards & chips */
/* Retirement and relocation run two-up so they read as the main offer; the remaining
   visa types sit below in a quiet chip list. */
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card--feature .card__media { aspect-ratio: 16 / 8.5; }
.card__list { display: grid; gap: 10px; margin-top: 2px; }
.card__list li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B2AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.services__more {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(22px, 2.5vw, 30px);
  background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--radius-card);
  text-align: center;
}
.services__moreTitle {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: .9375rem; color: var(--ink);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chips a:hover { border-color: var(--navy-800); color: var(--navy-800); }
.chips__all { font-weight: 600; color: var(--navy-800); }

/* ------------------------------------------------------ 14b. Topic hub */
/* Internal-link block for people still researching: also the SEO surface for the
   retirement guide cluster. */
.topics {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(24px, 3vw, 36px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.topics__title { font-size: 1.1875rem; margin-bottom: 14px; }
.topics__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.topics__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 2px; border-bottom: 1px solid var(--line);
  font-size: .9375rem; color: var(--ink);
  transition: color .2s var(--ease);
}
.topics__list a:hover { color: var(--navy-800); }
.topics__list span { color: var(--gold-500); }
.topics__note { margin-top: 22px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.topics__note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------- 15b. Direct contact channels */
.ico--fill { fill: currentColor; stroke: none; }

/* Hero shortcut row */
.quick-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; font-size: .875rem; }
.quick-contact__label { font-weight: 600; color: var(--navy-950); }
/* The three links live in their own flex row so they stay on one line: on a phone the
   row takes the full width and the buttons share it equally instead of wrapping. */
.quick-contact__actions { display: flex; align-items: center; gap: 8px; }
.quick-contact a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 14px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px;
  color: var(--navy-950); font-weight: 600; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.quick-contact a:hover { background: #fff; border-color: var(--navy-800); transform: translateY(-1px); }
.quick-contact .ico { width: 16px; height: 16px; }
.quick-contact a[data-event="whatsapp_click"] .ico { color: #128C4A; }
.quick-contact a[data-event="line_click"] .ico { color: #06834A; }
.quick-contact a[data-event="phone_click"] .ico { color: var(--navy-800); }

/* Channel list in the consultation block */
.channels { margin-top: 40px; padding-top: 32px; border-top: 1px solid #DEDAF3; }
.channels__title { font-weight: 600; color: var(--navy-950); margin-bottom: 16px; }
.channels__list { display: grid; gap: 10px; }
.channel {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--navy-950);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.channel:hover { border-color: var(--navy-800); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.channel__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--blue-100); color: var(--navy-800); flex: none; }
.channel__text { display: grid; gap: 2px; }
.channel__text strong { font-size: .9375rem; font-weight: 600; }
.channel__text em { font-size: .75rem; font-style: normal; font-weight: 400; color: var(--muted); }
.channel--wa .channel__icon   { background: #E7F8EE; color: #128C4A; }
.channel--line .channel__icon { background: #E6F7EC; color: #06834A; }
.channel--fb .channel__icon   { background: #E9EEFB; color: #1B4EC0; }
.channel--mail .channel__icon { background: #FBE9F3; color: var(--magenta-600); }

/* --------------------------------------------------- 17b. Contact rail */
/* Fixed on every screen: a side stack on desktop, a bottom bar on phones. */
.contact-rail { position: fixed; right: 22px; bottom: 86px; z-index: 85; display: grid; gap: 10px; }
.contact-rail__btn {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; color: #fff;
  box-shadow: 0 12px 28px -12px rgba(28, 26, 94, .9);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.contact-rail__btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.contact-rail__btn--wa    { background: #25D366; }
.contact-rail__btn--line  { background: #06C755; }
.contact-rail__btn--phone { background: var(--navy-800); }
.contact-rail__btn--mail  { background: var(--magenta-600); }
.contact-rail .ico { width: 24px; height: 24px; }
/* The label is always in the DOM for screen readers; sighted users get it on hover/focus. */
.contact-rail__label {
  position: absolute; right: calc(100% + 10px); white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; background: var(--navy-950); color: #fff;
  font-size: .8125rem; font-weight: 600; opacity: 0; pointer-events: none;
  transform: translateX(6px); transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.contact-rail__btn:hover .contact-rail__label,
.contact-rail__btn:focus-visible .contact-rail__label { opacity: 1; transform: none; }
/* ------------------------------------------------------------- 18. Reveal fx */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.cards .reveal:nth-child(2), .journey .reveal:nth-child(2), .pillars .reveal:nth-child(2), .resources .reveal:nth-child(2) { transition-delay: .08s; }
.cards .reveal:nth-child(3), .journey .reveal:nth-child(3), .pillars .reveal:nth-child(3), .resources .reveal:nth-child(3) { transition-delay: .16s; }
.journey .reveal:nth-child(4), .pillars .reveal:nth-child(4) { transition-delay: .24s; }
.journey .reveal:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===========================================================================
   19. Responsive — desktop ≥1024, tablet 768–1023, mobile <768
   =========================================================================== */

/* Wide desktop nav gets a little more air once there is room for it */
@media (min-width: 1500px) {
  .nav { gap: 28px; }
  .nav__list { gap: 4px; }
  .nav__link { font-size: .9375rem; padding-inline: 13px; }
  .nav__link.is-current::after { left: 13px; right: 13px; }
}

/* Between the drawer breakpoint and a wide screen, drop the tagline to buy nav room. */
@media (max-width: 1379px) {
  .site-header .brand__tagline { display: none; }
}

/* Below 1200px the full nav no longer fits comfortably — switch to the drawer */
@media (max-width: 1199px) {
  :root { --header-h: 76px; }
  .hamburger { display: block; }

  .nav {
    position: fixed; top: 0; right: 0; z-index: 95;
    flex-direction: column; align-items: stretch; gap: 0;
    width: min(400px, 88vw); height: 100dvh; padding: calc(var(--header-h) + 20px) 24px 40px;
    background: #fff; border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -30px rgba(28, 26, 94, .6);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(102%); visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s var(--ease);
  }
  .nav.is-open { transform: none; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { width: 100%; justify-content: space-between; min-height: 52px; padding: 14px 12px; font-size: 1.0625rem; }
  .nav__link.is-current::after { display: none; }
  .nav__list > li + li { border-top: 1px solid #EEECF8; }

  .nav__menu {
    position: static; min-width: 0; margin: 2px 0 12px; padding: 6px 0 6px 12px;
    border: 0; border-left: 2px solid var(--blue-100); border-radius: 0; box-shadow: none;
  }
  .nav__menu a { padding: 12px 10px; }

  .nav__actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
  .lang { align-self: flex-start; }
  .lang__menu { position: static; margin-top: 6px; box-shadow: none; }
  .nav__cta { width: 100%; min-height: 52px; font-size: 1rem; }
}

/* Tablet */
@media (max-width: 1023px) {
  .cards--2 { grid-template-columns: 1fr; }
  .topics__list { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 15px); }
  .cards--plans > :last-child:nth-child(odd) { max-width: none; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }

  .journey { grid-template-columns: repeat(3, 1fr); gap: 40px 16px; }
  .journey__step + .journey__step::before,
  .journey__step + .journey__step::after { display: none; }

  .pillars { grid-template-columns: repeat(2, 1fr); }
  .resources { grid-template-columns: 1fr; gap: 32px; }

  .split { grid-template-columns: 1fr; }
  .split__media { min-height: clamp(300px, 46vw, 460px); }
  .split__panel { padding-block: var(--space-section); }
  .split__content { margin-inline-start: auto; max-width: 640px; }

  .cta { grid-template-columns: 1fr; }
  .cta__panel { justify-content: flex-start; padding-block: var(--space-section); }
  .cta__content { margin-inline-start: 0; padding-inline-start: 0; max-width: 640px; }
  .cta__media { min-height: clamp(240px, 42vw, 360px); order: -1; }

  .consult { grid-template-columns: 1fr; }
  .consult__intro .lead, .consult__points { max-width: 640px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 767px) {
  /* Phone scale. The fluid desktop ramp bottoms out too large at 390px, so headings,
     section rhythm and block padding each step down. Body text stays at 16px and every
     tap target stays >=44px (section 20) — this trims scale, not legibility. */
  :root {
    --space-section: 2.75rem;   /* 44px */
    --space-feature: 3.25rem;   /* 52px */
    --space-small:   2.25rem;   /* 36px */
    --fs-h1:    2.125rem;       /* 34px */
    --fs-h2:    1.625rem;       /* 26px */
    --fs-h3:    1.1875rem;      /* 19px */
    --fs-lead:  1rem;
    --radius-card: 14px;
  }
  body { line-height: 1.6; }

  .section__head { margin-bottom: 1.75rem; }
  .lead { margin-top: 14px; }
  .rule { margin-top: 16px; }
  .note--center { margin-top: 28px; }
  .btn { min-height: 48px; padding: 12px 20px; }

  .cards { gap: 16px; }
  .card__body { padding: 34px 20px 24px; gap: 12px; }
  .card__list { gap: 8px; }
  .services__more { margin-top: 1.75rem; padding: 18px 16px; }
  .services__moreTitle { margin-bottom: 12px; }
  .chips { gap: 8px; }
  .chips a { padding: 10px 14px; font-size: .875rem; }

  .topics { margin-top: 1.75rem; padding: 18px 16px; }
  .topics__title { font-size: 1.0625rem; margin-bottom: 6px; }
  .topics__note { margin-top: 14px; }

  .channels { margin-top: 28px; padding-top: 24px; }
  .channels__title { margin-bottom: 12px; }
  .channel { min-height: 58px; padding: 10px 14px; gap: 12px; }
  .channel__icon { width: 40px; height: 40px; border-radius: 11px; }
  .consult__points { margin-top: 24px; gap: 10px; }

  .brand__logo { height: 42px; }

  /* Keep the three channels on a single row: the label takes its own line and the
     buttons share the width equally. */
  .quick-contact { gap: 8px; margin-top: 18px; font-size: .8125rem; }
  .quick-contact__label { flex: 0 0 100%; font-size: .8125rem; }
  .quick-contact__actions { width: 100%; flex-wrap: nowrap; }
  .quick-contact__actions a { flex: 1 1 0; min-width: 0; padding-inline: 8px; }

  /* No sticky contact bar on phones — it ate screen height and covered content.
     The channels stay reachable from the hero row, the consultation block and the footer. */
  .contact-rail { display: none; }
  .brand__tagline { display: none; }

  .hero__inner { min-height: 0; padding-block: clamp(2.25rem, 6vw, 3.25rem); }
  .hero__media img { object-position: 72% 50%; }
  /* Text overlays the whole image on a phone, so the white wash runs top-to-bottom
     to keep the navy headline readable (it is a light scrim, not the old dark veil). */
  .hero__veil { background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .74) 46%, rgba(255, 255, 255, .5) 72%, rgba(255, 255, 255, .28) 100%); }
  .hero__title { line-height: 1.12; }
  .hero__lead { max-width: none; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .hero__actions .btn { width: 100%; }
  .trust-strip { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }

  .section__head { margin-bottom: 2.25rem; }
  .section__head--withAside { flex-direction: column; align-items: flex-start; gap: 20px; }

  .cards--3 { grid-template-columns: 1fr; }
  .cards--3 > :last-child:nth-child(odd) { max-width: none; }
  .card__badge { left: 24px; }
  .card__body { padding: 40px 26px 28px; }

  /* Journey becomes a vertical timeline on mobile (DESIGN.md) */
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey__step { display: grid; grid-template-columns: 70px 1fr; gap: 4px 18px; text-align: left; padding: 0 0 26px; }
  .journey__step:last-child { padding-bottom: 0; }
  .journey__icon { grid-row: 1 / 3; margin: 0; width: 70px; height: 70px; }
  .journey__step h3 { align-self: end; margin-bottom: 4px; }
  .journey__step p { max-width: none; margin-inline: 0; }
  /* Connector runs from under each icon down to the next one. Every property is
     restated because the tablet rule above sets display:none on the adjacent-sibling
     selector, which would otherwise still win here. */
  .journey__step::before,
  .journey__step + .journey__step::before {
    content: ""; display: block; position: absolute;
    left: 34px; right: auto; top: 76px; bottom: 4px;
    width: 1px; height: auto; transform: none;
    background: rgba(75, 42, 168, .28);
  }
  .journey__step:last-child::before,
  .journey__step + .journey__step::after { display: none; }

  .pillars { grid-template-columns: 1fr; gap: 24px; }
  .pillar { display: grid; grid-template-columns: 64px 1fr; gap: 4px 20px; text-align: left; }
  .pillar__icon { grid-row: 1 / 3; margin: 0; }
  .pillar h3 { align-self: end; }
  .pillar p { max-width: none; margin-inline: 0; }

  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  /* "Affordable Cost of Living" is wider than half the screen, so the labels shrink
     and wrap inside their own cell instead of spilling across the column. */
  .feature-row li { font-size: .8125rem; gap: 10px; }

  /* The price block reserves height so the three desktop columns line up; stacked on a
     phone that reserve just leaves a hole above "Custom quote". */
  .plan__price { min-height: 0; }
  .plan__list { margin: 20px 0 24px; padding-top: 20px; }

  .form__grid { grid-template-columns: 1fr; gap: 20px; }
  .form__foot .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .footer__lotus { width: 220px; opacity: .04; }

  /* env() keeps it clear of the iOS home indicator / browser chrome */
  .to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .journey__step { grid-template-columns: 64px 1fr; gap: 4px 16px; }
  .journey__icon { width: 64px; height: 64px; }
  .journey__step::before,
  .journey__step + .journey__step::before { left: 31px; top: 70px; }
}

/* ===========================================================================
   20. Mobile touch targets & legibility
   Audited at 390px against the UI/UX Pro Max rule set (Touch Target Size,
   Touch Spacing, Contrast/Line-height) — the audience is 50–75, so every
   tap target is taken to >=44px and the smallest labels are raised.
   =========================================================================== */
@media (max-width: 767px) {
  /* Text links styled as buttons were 38px tall */
  .link-cta { min-height: 44px; padding-block: 10px; }

  /* Footer nav links were only 19px tall with no padding to tap */
  .footer__col ul { gap: 8px; }
  .footer__col ul a {
    display: flex; align-items: center;
    min-height: 44px; padding-block: 6px;
  }

  /* Two phone numbers sat 3px apart — below the 8px minimum */
  .footer__contact li > span { gap: 8px; }
  .footer__contact li > span a { min-height: 44px; display: flex; align-items: center; }

  /* Legal row links were 16px tall; 8px row gap keeps wrapped rows separated */
  .footer__legal ul { gap: 8px 24px; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Article links in the resources list */
  .resource h3 a { display: inline-block; padding-block: 9px; }
  .resource__tag { font-size: .8125rem; }

  /* Collapsible footer nav columns (built by script.js on phones only) */
  .footer__col.is-collapsible { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .footer__col.is-collapsible .footer__heading { margin-bottom: 0; }
  .footer__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; min-height: 56px; padding: 8px 0;
    background: none; border: 0; cursor: pointer; text-align: left;
    font: inherit; color: #fff; letter-spacing: .08em; text-transform: uppercase;
  }
  .footer__caret {
    width: 9px; height: 9px; flex: none;
    border-right: 2px solid var(--gold-300); border-bottom: 2px solid var(--gold-300);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s var(--ease);
  }
  .footer__toggle[aria-expanded="true"] .footer__caret { transform: rotate(-135deg) translate(-2px, -2px); }
  .footer__col.is-collapsible ul { padding-bottom: 12px; }

  /* Smallest labels raised for older eyes */
  .eyebrow { font-size: .875rem; }
  .plan__note, .plan__from { font-size: .875rem; }
  .plan__flag { font-size: .8125rem; }
  .footer__contact em, .channel__text em { font-size: .8125rem; }
}

/* -------------------------------------------------------------- 21. Print */
@media print {
  .site-header, .to-top, .nav-scrim, .hero__media, .footer__lotus, .contact-rail { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}