/*
 * ============================================================
 *  DOLPHIN FINANCE — MASTER STYLE SHEET
 *  Version 1.0  |  June 2026
 *
 *  This file is the single source of truth for all design
 *  decisions across the Dolphin Finance website. Every HTML
 *  page produced for this project links to this one file.
 *
 *  TABLE OF CONTENTS
 *  -----------------
 *  1.  Design tokens (CSS variables)
 *  2.  Reset & base
 *  3.  Typography
 *  4.  Navigation & header
 *  5.  Hero section
 *  6.  Quote / lead-capture card
 *  7.  Why-us / trust strip
 *  8.  TOC bar (sticky horizontal)
 *  9.  Page layout (main + sidebar)
 * 10.  Section headings
 * 11.  Body content (paragraphs, lists)
 * 12.  Callout boxes (info, tip, warning)
 * 13.  Internal link cards
 * 14.  Criteria grid
 * 15.  Product cards
 * 16.  Process steps
 * 17.  Inline Table of Contents
 * 18.  Sidebar
 * 19.  Rates table
 * 20.  FAQ accordion
 * 21.  Country / location section
 * 22.  CTA section (full-width)
 * 23.  Blog / resource cards
 * 24.  Case-study cards
 * 25.  Breadcrumb
 * 26.  Disclaimer bar
 * 27.  Footer
 * 28.  Utility classes
 * 29.  Responsive breakpoints
 * 30.  Hero — Country Page component (.hero-cp)
 * 31.  How It Works — section band (General + Country Page)
 * ============================================================
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Brand colours */
  --navy:          #0F2A4A;   /* Primary — headers, nav, footer */
  --navy-mid:      #1B3A6B;   /* Section headings, sidebar headings */
  --navy-light:    #2A5FAC;   /* Links, accents, hover states */
  --teal:          #12A090;   /* CTA buttons, bullets, highlights */
  --teal-light:    #E0F5F2;   /* Callout backgrounds, tags */
  --teal-dark:     #0E8A7C;   /* Teal hover state */
  --gold:          #C8922A;   /* Warnings, secondary accents */
  --gold-light:    #FDF3E0;   /* Warning callout background */

  /* Text colours */
  --text:          #1A1A2E;   /* All body copy */
  --text-muted:    #5A6478;   /* Secondary text, captions */
  --text-light:    #8A93A6;   /* Placeholder, fine print */

  /* Backgrounds */
  --bg:            #FFFFFF;
  --bg-alt:        #F6F8FC;   /* Alternate section background */
  --bg-dark:       #0F2A4A;   /* Navy dark sections */

  /* Borders */
  --border:        #DDE3EF;
  --border-light:  #EEF1F7;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Radii */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-sm: 6px;

  /* Shadows */
  --shadow:    0 2px 16px rgba(15,42,74,0.08);
  --shadow-md: 0 4px 24px rgba(15,42,74,0.12);

  /* Nav height — used for scroll-offset calculations */
  --nav-h: 68px;

  /* ── Section rhythm (single source of truth for vertical padding) ──
     Every content section and full-width colour band uses these so the
     whole site shares one vertical rhythm. Change here = change everywhere.
     Heroes / page-header bands intentionally sit larger and are not tokenised. */
  --section-y:    56px;   /* desktop top+bottom padding for sections/bands */
  --section-y-sm: 44px;   /* the same on small screens (≤600px) */

  /* ── Section-heading size (single source of truth for body H2s) ──
     Set by Andrew 25 July 2026 after comparing the templates side by side:
     the Knowledge Library article's desktop size (28px) was the one he
     liked - "easier on the eye" - and the Expat BTL page's tablet size
     (26px) was right for narrow screens. The old clamp(26px, 3vw, 34px)
     went up to 34px on desktop, which read as too big.

     EVERY in-page H2 uses this: product pages (.p-copy h2 /
     .p-section-head), the country page (.c-prose h2, .c-intro-head,
     .c-lc-text h2), the Knowledge Library article (.kb-article h2 /
     .kb-faq-head) and the Expat BTL pillar (.bl-main h2 / .bl-faq-head).
     Change it HERE and every template moves together.

     Not included on purpose: the legal pages (.pp-inner h2, 24px - denser
     boilerplate), and the full-width coloured bands (.cta-section h2,
     .process-header h2) which are display headings, not body headings. */
  --h2-section: 28px;

  /* ── Page H1 size (single source of truth for the two hero headers) ──
     Aligned by Andrew 25 July 2026. The site has two page headers - the
     navy band with no photo (`.p-head h1`: product pages + Knowledge
     Library) and the photo hero (`.hero-cp__title`: country pages + the
     Expat BTL pillar). They used to run at different scales (50px vs
     45.6px on desktop, 38.4px vs 32px on tablet). Both now use this.

     Aligned DOWN to the photo hero's scale, for two reasons: it matches
     the "easier on the eye" call made on --h2-section, and raising the
     photo hero instead would have put the one-line country H1 at risk
     (see §30 - the H1 must stay on one line on desktop).

     Not included: the legal pages' slim grey header (`.pp-head h1`,
     max 42px) - a smaller utility band, same call as for --h2-section. */
  --h1-page: clamp(2rem, 3vw, 2.85rem);   /* 32px → 45.6px */
}

/* Section headings step down one notch on tablet and below. */
@media (max-width: 1080px) {
  :root { --h2-section: 26px; }
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--navy-light);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--navy);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Display / H1 — hero headlines */
h1, .display {
  font-family: 'Lora', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--navy);
}

/* Section headings / H2 */
h2 {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

/* Sub-headings / H3 */
h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-mid);
  margin: 28px 0 10px;
}

/* Minor headings / H4 */
h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}

p {
  margin-bottom: 14px;
  line-height: 1.75;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
  color: var(--text);
}


/* ============================================================
   4. NAVIGATION & HEADER
   ============================================================ */

.nav {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(15,42,74,0.06);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 36px;
  height: 36px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.nav-logo-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.2px;
}

/* Nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--navy);
}

.nav-links a.active {
  font-weight: 500;
}

/* CTA button in nav */
.nav-cta {
  background: var(--teal) !important;
  color: white !important;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: background 0.2s, transform 0.15s !important;
}

.nav-cta:hover {
  background: var(--teal-dark) !important;
  color: white !important;
  transform: translateY(-2px);
}


/* ============================================================
   5. HERO SECTION
   ============================================================ */

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3d6e 60%, #1e4d80 100%);
  color: white;
  padding: 80px 2rem 72px;
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(10,143,124,0.08);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 30%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(200,146,42,0.06);
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Hero text column */
.hero-left {}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10,143,124,0.2);
  border: 1px solid rgba(10,143,124,0.4);
  color: #5dd5c6;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero h1 {
  color: white;
  margin-bottom: 18px;
}

.hero h1 span {
  color: #5dd5c6;
}

.hero-subtitle {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 32px;
  max-width: 560px;
  line-height: 1.65;
  font-weight: 300;
}

/* Hero buttons */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Hero stats bar */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hero-stat {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
}

.hero-stat-num {
  font-family: 'Lora', serif;
  font-size: 24px;
  font-weight: 600;
  color: #5dd5c6;
  display: block;
}

.hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  display: block;
  margin-top: 2px;
}


/* ============================================================
   6. QUOTE / LEAD-CAPTURE CARD  (right column of hero)
   ============================================================ */

.hero-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  color: var(--text);
}

.hero-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
  margin-top: 0;
}

.hero-card > p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Form elements inside hero card */
.form-row {
  margin-bottom: 12px;
}

.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: white;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--navy-light);
}

.form-submit {
  width: 100%;
  background: var(--navy);
  color: white;
  padding: 12px;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.2s;
}

.form-submit:hover {
  background: var(--navy-light);
}

.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 10px;
}

.form-note a {
  color: var(--navy-light);
}


/* ============================================================
   7. BUTTONS (global — used in hero, CTA sections, everywhere)
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--teal-dark);
  color: white;
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.btn-outline:hover {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  color: white;
  transform: translateY(-2px);
}

/* Navy outline variant (for use on light backgrounds) */
.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--navy);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.btn-outline-navy:hover {
  border-color: var(--navy-light);
  background: var(--bg-alt);
  color: var(--navy);
  transform: translateY(-2px);
}

/* Small button variant */
.btn-sm {
  padding: 9px 18px;
  font-size: 14px;
}


/* ============================================================
   8. WHY-US / TRUST STRIP
   ============================================================ */

.why-strip {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--section-y) 2rem;
}

.why-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-item {
  text-align: center;
  padding: 8px;
}

.why-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.why-item h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

.why-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}


/* ============================================================
   9. TOC BAR (sticky horizontal navigation bar)
   ============================================================ */

.toc-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
  padding: 0 2rem;
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
}

.toc-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.toc-bar-inner::-webkit-scrollbar {
  display: none;
}

.toc-bar-inner span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 0;
  white-space: nowrap;
  margin-right: 20px;
  flex-shrink: 0;
}

.toc-bar-inner a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 14px 16px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.toc-bar-inner a:hover {
  color: var(--navy);
  border-bottom-color: var(--navy-light);
}


/* ============================================================
   10. PAGE LAYOUT (main column + sidebar)
   ============================================================ */

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-y) 2rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}

.main-content {
  min-width: 0; /* prevents grid blowout */
}

/* Intro paragraph (appears before inline TOC) */
.intro-para {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.75;
}


/* ============================================================
   11. SECTION HEADINGS
   ============================================================ */

.section {
  margin-bottom: 56px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-light);
}

.section-num {
  width: 36px;
  height: 36px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.section h2 {
  line-height: 1.3;
}

.section h3 {
  margin: 28px 0 10px;
}

/* Bullet lists inside content sections */
.section ul {
  list-style: none;
  margin: 10px 0 16px;
}

.section ul li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--text);
  line-height: 1.65;
}

.section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
}


/* ============================================================
   12. CALLOUT BOXES  (info / tip / warning)
   ============================================================ */

.callout {
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.callout-info {
  background: #e8f0fb;
  border-left: 3px solid var(--navy-light);
}

.callout-tip {
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
}

.callout-warn {
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
}

.callout-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.callout-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 4px;
}

.callout-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================
   13. INTERNAL LINK CARDS
   ============================================================ */

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
  gap: 12px;
}

.link-card:hover {
  border-color: var(--navy-light);
  background: #f0f4fb;
}

.link-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--teal);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.link-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}

.link-card-arrow {
  color: var(--navy-light);
  font-size: 18px;
  flex-shrink: 0;
}


/* ============================================================
   14. CRITERIA GRID  (2-column icon cards)
   ============================================================ */

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.criteria-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.criteria-card-icon {
  font-size: 22px;
  margin-bottom: 10px;
  display: block;
}

.criteria-card h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

.criteria-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}


/* ============================================================
   15. PRODUCT CARDS
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.product-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  display: block;
  color: var(--text);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.product-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--navy-light);
  color: var(--text);
}

.product-card-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.product-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.product-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}

.product-card-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-card-link::after {
  content: ' →';
}


/* ============================================================
   16. PROCESS STEPS  (numbered vertical timeline)
   ============================================================ */

.process-steps {
  margin: 24px 0;
}

.process-step {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

/* Vertical connector line */
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  width: 2px;
  height: calc(100% - 12px);
  background: var(--border);
}

.process-step-num {
  width: 40px;
  height: 40px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.process-step-content {}

.process-step-content h4 {
  font-size: 16px;
  margin-bottom: 6px;
  padding-top: 8px;
}

.process-step-content p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================
   17. INLINE TABLE OF CONTENTS
   ============================================================ */

.inline-toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 0 0 40px;
}

.inline-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.inline-toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inline-toc-toggle {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  transition: background 0.2s;
}

.inline-toc-header:hover .inline-toc-toggle {
  background: var(--border);
}

.inline-toc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 28px;
}

.inline-toc-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.2s;
  line-height: 1.4;
}

.inline-toc-grid a:hover {
  color: var(--navy-mid);
}

.inline-toc-grid a:hover .itoc-num {
  background: var(--teal);
}

.itoc-num {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.inline-toc-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-toc-footer a {
  color: var(--navy-light);
  font-weight: 500;
  margin-left: auto;
}


/* ============================================================
   18. SIDEBAR
   ============================================================ */

.sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}

.sidebar-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

.sidebar-card h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Sidebar table of contents */
.sidebar-toc {
  list-style: none;
}

.sidebar-toc li {
  margin-bottom: 4px;
}

.sidebar-toc a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.sidebar-toc a:hover {
  background: var(--border-light);
  color: var(--navy);
}

/* Active section highlighting — set by IntersectionObserver JS */
.sidebar-toc a.toc-active {
  background: var(--teal-light);
  color: var(--teal);
  font-weight: 500;
}

.sidebar-toc a.toc-active .sidebar-toc-num {
  background: var(--teal);
}

.sidebar-toc-num {
  width: 20px;
  height: 20px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sidebar related links */
.sidebar-links {
  list-style: none;
}

.sidebar-links li {
  margin-bottom: 2px;
}

.sidebar-links a {
  font-size: 13px;
  color: var(--navy-light);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.sidebar-links a:hover {
  background: var(--border-light);
  color: var(--navy-light);
}

.sidebar-links a::before {
  content: '→';
  color: var(--teal);
  font-size: 12px;
  flex-shrink: 0;
}

/* Sidebar CTA card */
.sidebar-cta {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: white;
  text-align: center;
}

.sidebar-cta h4 {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}

.sidebar-cta p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
  line-height: 1.5;
}

.sidebar-cta a {
  display: block;
  background: var(--teal);
  color: white;
  padding: 11px 20px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 8px;
}

.sidebar-cta a:hover {
  background: var(--teal-dark);
  color: white;
  transform: translateY(-2px);
}

.sidebar-cta-secondary {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2);
}

.sidebar-cta-secondary:hover {
  background: rgba(255,255,255,0.18) !important;
}


/* ============================================================
   19. RATES TABLE
   ============================================================ */

.rates-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.rates-table th {
  background: var(--navy);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  font-size: 13px;
}

.rates-table th:first-child {
  border-radius: 8px 0 0 0;
}

.rates-table th:last-child {
  border-radius: 0 8px 0 0;
}

.rates-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.rates-table tr:nth-child(even) td {
  background: var(--bg-alt);
}

.rates-table tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   20. FAQ ACCORDION
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
}

.faq-question {
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.faq-toggle {
  width: 24px;
  height: 24px;
  background: var(--bg-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--navy);
  transition: background 0.2s, color 0.2s;
}

.faq-answer {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 12px 0 0;
  display: none;
}

.faq-answer.open {
  display: block;
}


/* ============================================================
   21. COUNTRY / LOCATION SECTION
   ============================================================ */

.location-section {
  background: white;
  padding: var(--section-y) 2rem;
}

.location-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.location-heading {
  text-align: center;
  margin-bottom: 36px;
}

.location-heading h2 {
  font-family: 'Lora', serif;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 8px;
}

.location-heading p {
  color: var(--text-muted);
  font-size: 16px;
  margin: 0;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.location-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.location-card:hover {
  border-color: var(--navy-light);
  box-shadow: var(--shadow);
  color: var(--text);
}

.location-flag {
  font-size: 26px;
  flex-shrink: 0;
}

.location-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.location-info span {
  font-size: 12px;
  color: var(--text-muted);
}

.location-arrow {
  margin-left: auto;
  color: var(--text-light);
  font-size: 14px;
  flex-shrink: 0;
}


/* ============================================================
   22. CTA SECTION  (full-width navy band)
   ============================================================ */

.cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #12A090 0%, #0E8A7C 55%, #0a6b5e 100%);
  padding: var(--section-y) 2rem;
  text-align: center;
  color: white;
}

/* Echo-ring circles — decision log: Option A */
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  pointer-events: none;
}
.cta-section::before {
  width: 480px;
  height: 480px;
  right: -140px;
  top: -180px;
  box-shadow:
    0 0 0 60px  rgba(255,255,255,0.05),
    0 0 0 130px rgba(255,255,255,0.03);
}
.cta-section::after {
  width: 320px;
  height: 320px;
  left: -120px;
  bottom: -140px;
  box-shadow: 0 0 0 50px rgba(255,255,255,0.05);
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
}

.cta-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.14);
  padding: 6px 14px;
  border-radius: 100px;
  color: #eafffb;
  margin-bottom: 18px;
}

.cta-section h2 {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  margin-bottom: 14px;
}

.cta-section p {
  font-size: 17px;
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  margin: 0 auto 32px;
  font-weight: 300;
  line-height: 1.65;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   23. BLOG / RESOURCE CARDS
   ============================================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--navy-light);
  color: var(--text);
}

.blog-card-img {
  height: 160px;
  background: var(--bg-alt);
  overflow: hidden;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.blog-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.4;
}

.blog-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}

.blog-card-meta {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================
   24. CASE STUDY CARDS
   ============================================================ */

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.case-study-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.case-study-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--navy-light);
  color: var(--text);
}

.case-study-tag {
  display: inline-block;
  background: var(--bg-alt);
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.case-study-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.4;
}

.case-study-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.55;
}

.case-study-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.case-study-metric {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.case-study-metric-label {
  font-size: 10px;
  color: var(--navy-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}

.case-study-metric-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.case-study-outcome {
  font-size: 12px;
  color: var(--teal);
  font-weight: 500;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ============================================================
   25. BREADCRUMB
   ============================================================ */

.breadcrumb {
  padding: 14px 2rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
}

.breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--navy-light);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--border);
}


/* ============================================================
   26. DISCLAIMER BAR
   ============================================================ */

.disclaimer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 32px 2rem;
}

.disclaimer-inner {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.65;
}

.disclaimer-inner strong {
  color: var(--text-muted);
}

/* Footer-level disclaimer (below footer menu) — change 10 */
.footer-disclaimer {
  background: #0a1f38;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 28px 2rem;
}

.footer-disclaimer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Sitemap / legal links row inside footer disclaimer */
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-legal-nav a {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal-nav a:hover {
  color: rgba(255,255,255,0.85);
}

.footer-disclaimer p {
  font-size: 11.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.7;
  margin: 0;
  max-width: 1160px;
}

.footer-disclaimer a {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
}

.footer-disclaimer a:hover {
  color: rgba(255,255,255,0.75);
}


/* ============================================================
   27. FOOTER
   ============================================================ */

.footer {
  background: var(--navy);
  padding: 56px 2rem 32px;
  color: rgba(255,255,255,0.65);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

/* Footer brand column */
.footer-brand {}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 16px;
  color: white;
  font-weight: 600;
}

.footer-logo-text {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.footer-brand p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 300px;
}

.footer-phone {
  color: white;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}

.footer-phone:hover {
  color: #5dd5c6;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-contact-row:hover { color: #5dd5c6; }

.footer-contact-row svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  fill: none;
  stroke: #5dd5c6;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: white !important;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 16px;
  transition: background 0.2s;
  width: fit-content;
}

.footer-whatsapp:hover { background: var(--teal-dark); color: white !important; }

.footer-whatsapp svg {
  width: 18px !important;
  height: 18px !important;
  fill: white !important;
  flex-shrink: 0;
}

/* Footer columns */
.footer-col h5 {
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

/* Footer menu links lifted to 80% white (Andrew, 18 Aug 2026) - he noticed they
   read as dim. The real starting value was 0.65, set in Footer.astro, NOT the
   0.6 this rule used to say; this rule never applied (see below).
   This is a LEGIBILITY change, not a fix: at 0.65 they already measured 6.91:1
   against the navy, comfortably past the 4.5:1 standard.
   At 80% they measure 9.72:1 and read as properly white. Note the column
   HEADINGS (Residential / Commercial / Useful Links) are the dim element here,
   set to 40% white in Footer.astro - so the links were already brighter than
   their headings, and remain so.
   ⚠️ THIS RULE IS OVERRIDDEN. Footer.astro:56 sets .footer-col ul li a, which
   is more specific and wins. Changing the value here alone has NO visible
   effect - both were set to 0.8 together so they cannot drift apart.
   KNOCK-ON: this affects the footer on EVERY page, homepage included. Note
   index.astro DOES carry a block trying to recolour the footer to a light
   background, but it is inside a plain <style slot="head"> rather than
   <style is:global>, so Astro scopes it out and it never reaches the built page
   (verified 18 Aug: "bg-alt" does not appear in dist/index.html at all). The
   homepage footer is the standard navy one. Do not rely on that block.
   NOT changed, at Andrew's instruction: the disclaimer text and its links
   (.footer-disclaimer, .footer-legal-nav) - he is happy with those as they are. */
.footer-col ul a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-col ul a:hover {
  color: white;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: none;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 12px;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 16px;
}

.footer-bottom-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: rgba(255,255,255,0.8);
}


/* ============================================================
   28. UTILITY CLASSES
   ============================================================ */

/* Text utilities */
.text-navy    { color: var(--navy); }
.text-teal    { color: var(--teal); }
.text-muted   { color: var(--text-muted); }
.text-light   { color: var(--text-light); }
.text-center  { text-align: center; }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 12px; }

/* Background utilities */
.bg-navy      { background: var(--navy); }
.bg-alt       { background: var(--bg-alt); }

/* Spacing utilities */
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Max-width centring utility */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Tag / pill chip */
.tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
}

.tag-navy {
  background: var(--bg-alt);
  color: var(--navy);
  border: 1px solid var(--border);
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   29. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet — up to 900px */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Hide hero quote card on mobile — form appears on a dedicated contact page */
  .hero-card {
    display: none;
  }

  /* Single column layout */
  .page-wrap {
    grid-template-columns: 1fr;
    padding: 40px 1.5rem;
    gap: 0;
  }

  /* Hide sidebar — content is primary on mobile */
  .sidebar {
    display: none;
  }

  /* Stack two-column grids */
  .criteria-grid,
  .product-grid,
  .case-study-grid {
    grid-template-columns: 1fr;
  }

  /* Why strip: 2 column on tablet */
  .why-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Location grid: 2 column */
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog grid: 2 column */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 column */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Hide nav links on tablet/mobile — hamburger menu to replace in production */
  .nav-links {
    display: none;
  }

  /* Stack hero buttons — left-aligned (hero heading/text is left-aligned) */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stack CTA-banner buttons — centred to match the centred CTA heading/text */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* Tablet — 601px to 900px specific refinements */
@media (min-width: 601px) and (max-width: 900px) {
  /* Slightly reduce section padding on tablet */
  .hero {
    padding: 56px 2rem 48px;
  }

  /* Rate table stays full-width */
  .rates-table {
    font-size: 14px;
  }

  /* Footer bottom: keep horizontal on tablet */
  .footer-bottom {
    flex-direction: row;
  }

  /* CTA section text scale */
  .cta-section h2 {
    font-size: 28px;
  }
}

/* Mobile — up to 600px */
@media (max-width: 600px) {
  /* Single column everything */
  .why-strip-inner,
  .location-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Hero stats: keep 3-column but smaller */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-stat-num {
    font-size: 20px;
  }

  /* Inline TOC: single column */
  .inline-toc-grid {
    grid-template-columns: 1fr;
  }

  /* Adjust hero padding */
  .hero {
    padding: 48px 1.5rem 40px;
  }

  /* CTA section */
  .cta-section {
    padding: 48px 1.5rem;
  }

  .cta-section h2 {
    font-size: 26px;
  }

  /* Footer bottom: stack */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ============================================================
   30. HERO — COUNTRY PAGE component  ("Hero_Country Page")
   ------------------------------------------------------------
   Shared, reusable country-page hero. This is the SINGLE style
   source for the hero: every country page uses the .hero-cp
   classes via the HeroCountry.astro component and passes its
   own content (name, subtitle, photo, links) as props. Editing
   the rules here restyles EVERY country hero at once.
   Uses existing brand tokens (navy/teal). Fonts = site stack
   (Lora headings, DM Sans body). Buttons follow the locked
   spec values. Override a single country via the component's
   `variantClass` prop without touching these shared rules.
   ============================================================ */

.hero-cp {
  position: relative;
  min-height: clamp(490px, 60vh, 575px);
  display: flex;
  align-items: center;
  background-color: var(--navy);       /* fallback behind the photo */
  background-size: cover;
  background-position: 50% 40%;         /* default; overridable inline per country */
  background-repeat: no-repeat;
}

/* G1 — site-wide standard gradient overlay. A separate layer sitting ABOVE
   the photo (and below the text): a continuous left-edge ramp, no flat block,
   so the left-hand text stays legible over any photo, dark or bright.

   ⚠️ RESHAPED 21 August 2026, because the old ramp did not actually do the job
   its comment claimed. It is LIGHTER ON THE LEFT and stronger across the
   middle and right. Andrew asked for a lighter left edge; measuring it turned
   up a legibility failure that had been shipping on most of these pages.

   WHAT WAS WRONG. The old ramp thinned to .42 by 55% and .18 by 74%, but the
   text does not stop there: the H1 runs on ONE line by design (the 520px
   content cap was removed on 25 July 2026), so a long headline reaches 74-83%
   of the width, and the subtitle's 40ch measure reaches about 58%. Both were
   landing on near-bare photograph. Measured PER GLYPH against the brightest
   photo pixel behind each character, at 1280px:

                              OLD ramp              NEW ramp
     page / photo             H1        subtitle    H1        subtitle
     Dubai / dubai1           3.48 ok   4.52 ok     5.4  ok   6.5  ok
     Cayman / london1         1.83 FAIL 3.41 FAIL   4.4  ok   5.4  ok
     expat pillar / london2   1.44 FAIL 3.58 FAIL   3.97 ok   5.68 ok
     BTL pillar / london1     3.88 ok   3.68 FAIL   5.5  ok   5.5  ok

   (H1 is large text so it needs 3.0:1; the subtitle needs 4.5:1.) Three of
   the four photographs were failing, the pillar's headline at 1.44:1 - white
   type on a lit building, effectively unreadable in places.

   AUDITED ACROSS 10 PAGES x 6 WIDTHS (320/375/414/768/1280/1920) after the
   change: every one passes. Worst case anywhere is the H1 at 3.9:1 and the
   subtitle at 5.2:1. The margin is deliberate rather than tight, because
   Andrew intends to swap the country hero photographs later - a ramp tuned to
   scrape past on today's four pictures would fail on the next one.

   ⚠️ MEASURE PER GLYPH, NOT PER ELEMENT, IF YOU RETUNE THIS. An <h1> is a
   block, so its box spans the full container whether or not text fills it -
   sampling the box reads up to 98px of empty space on the right and reports a
   failure that is not there, or averages away a real one. Use a Range over
   the text nodes and sample under the characters.

   ⚠️ THE SHAPE IS THE POINT, NOT THE NUMBERS. It starts lighter, holds a
   floor across the whole band the text occupies, then releases. Do NOT
   "simplify" it back to a steady fade to zero: a steady fade is what failed,
   and it fails on the subtitle first. */
.hero-cp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(15,42,74,.82)   0%,
    rgba(15,42,74,.74)  30%,
    rgba(15,42,74,.68)  58%,
    rgba(15,42,74,.58)  76%,
    rgba(15,42,74,.46)  88%,
    rgba(15,42,74,0)   100%);
  pointer-events: none;
}

.hero-cp__inner {
  position: relative;
  z-index: 1;                          /* above the overlay */
  width: 100%;
  max-width: 1180px;                   /* standard page container */
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 60px);
}

/* No width cap on the content block, so the H1 can run on ONE line across
   the desktop hero (Andrew, 25 July 2026 - it was wrapping to two lines on
   Dubai at the old 520px cap). This does NOT stretch the rest of the hero:
   the subtitle carries its own 40ch measure and the buttons size to their
   own text, so only the headline gains the extra width.
   NOTE for very long country names: the headline still wraps if it genuinely
   cannot fit (e.g. "United Arab Emirates" on a narrow laptop). It degrades
   to two lines rather than overflowing. */
.hero-cp__content {
  max-width: none;
  animation: hero-cp-rise .6s cubic-bezier(.2,.7,.2,1) both;
}

.hero-cp__title {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: var(--h1-page);         /* shared with .p-head h1 - see tokens */
  line-height: 1.15;                 /* matched to .p-head h1 */
  letter-spacing: -0.5px;            /* matched to .p-head h1 */
  color: #fff;
  text-shadow: 0 2px 22px rgba(4,12,26,.65), 0 1px 4px rgba(4,12,26,.5);
  margin: 0;
}
.hero-cp__country { color: var(--teal); }   /* country name in teal */

.hero-cp__subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.06rem, 1.5vw, 1.26rem);
  line-height: 1.5;
  color: #fff;
  max-width: 40ch;
  text-shadow: 0 1px 16px rgba(4,12,26,.75), 0 1px 3px rgba(4,12,26,.6);
  margin: 18px 0 0;
}
.hero-cp__subtitle span { display: block; }                 /* 2nd sentence on its own line */
.hero-cp__subtitle span + span { margin-top: 6px; }

.hero-cp__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* Buttons — locked spec values (16px 30px · radius 7px · weight 600) */
.hero-cp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.hero-cp__btn--primary { background: var(--teal); color: #fff; }
.hero-cp__btn--primary:hover { background: var(--teal-dark); color: #fff; transform: translateY(-2px); }
.hero-cp__btn--secondary { background: #fff; color: var(--navy); }
.hero-cp__btn--secondary:hover { background: #eef2f7; color: var(--navy); transform: translateY(-2px); }
/* Visible keyboard focus — works on both the teal and the white button */
.hero-cp__btn:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.85);
}

@keyframes hero-cp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Stacked — up to 820px: overlay goes vertical (navy at top, photo shows
   beneath), content fills the width, buttons remain side by side. */
@media (max-width: 820px) {
  /* Height follows the CONTENT rather than a fixed 540px (Andrew, 25 July
     2026). The old fixed height left a big empty gap under the text on a
     tablet or a half-width laptop window - the text filled only the top
     half and the rest was blank photo. Content-driven height plus a deeper
     bottom padding gives a deliberate photo band beneath the text at every
     width: the copy now ends around 70-77% of the way down whether it is a
     phone or a split screen. The 360px floor stops it collapsing.
     Padding is asymmetric ON PURPOSE - the extra bottom padding IS the
     photo band. */
  .hero-cp { min-height: 360px; align-items: flex-start; }
  /* ⚠️ RESHAPED 21 August 2026, for the same reason as the desktop ramp above
     and with the same result: LIGHTER AT THE TOP, stronger through the middle.
     The old vertical ramp thinned to .45 by 62%, and on a phone that is
     exactly where the subtitle sits - so it failed on every photograph
     measured, not just one. Per glyph, at 375px:

                              OLD ramp              NEW ramp
       page / photo           H1        subtitle    H1        subtitle
       Cayman / london1       7.89 ok   3.30 FAIL   5.81 ok   4.93 ok
       expat pillar / london2 9.65 ok   3.52 FAIL   7.88 ok   4.99 ok

     The headline had margin to spare and gave some of it back; the subtitle
     went from failing to passing. Note it reaches zero at 92% rather than
     100%, so the very foot of the photo band beneath the buttons is CLEARER
     than it was, not more veiled - that band is deliberate (see the padding
     note below).

     ⚠️ THE .68 FLOOR RUNS TO 70%, AND 320px IS WHY. A first version released
     at 56% and passed at 375px but FAILED at 320px (subtitle 4.01 and 4.05 on
     two pages). The hero is content-driven here, so a narrower screen wraps
     the headline onto more lines and pushes the subtitle further down the
     ramp - 647px tall at 320px against 528px at 375px, with the lowest
     subtitle glyph at 59% instead of 50%. Test the SMALLEST width, not just
     the common one: the ramp is a fraction of a height that itself changes. */
  .hero-cp::before {
    background: linear-gradient(180deg,
      rgba(15,42,74,.80)  0%, rgba(15,42,74,.72) 25%,
      rgba(15,42,74,.68) 70%, rgba(15,42,74,0)   92%);
  }
  .hero-cp__inner { padding-top: 60px; padding-bottom: 120px; }
  .hero-cp__subtitle { max-width: none; }
}

/* Small phones — up to 420px: compact buttons, stacked to the left, so they
   don't overpower the headline/subtitle. Primary sits on top (CTA priority). */
@media (max-width: 420px) {
  .hero-cp__actions { flex-direction: column; align-items: flex-start; }
  .hero-cp__btn { width: auto; padding: 12px 22px; font-size: 14px; }
}

/* Respect reduced-motion — disable the fade-up load animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-cp__content { animation: none; }
}


/* ============================================================
   31. HOW IT WORKS — section band  ("How It Works_General" +
       "How It Works_Country Page")
   ------------------------------------------------------------
   Extracted from the homepage so ONE style source drives every
   variant. The numbered-step base classes live in §16
   (.process-steps / .process-step / .process-step-num …); this
   block adds the navy band, header and (for the country variant)
   the body copy + button beneath the steps. Both the General and
   the Country Page components use these exact classes — text is
   the only difference. Override a single variant via its
   `variantClass` prop.
   ============================================================ */

.process-section { background: var(--navy); padding: var(--section-y) 2rem; color: white; }
.process-inner { max-width: 900px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: 48px; }
.process-header h2 { font-family: 'Lora', serif; font-size: 32px; color: white; margin-bottom: 12px; }
.process-header p { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto; font-weight: 300; }
.process-section .process-step-content h4 { color: white; }
.process-section .process-step-content p { color: rgba(255,255,255,0.65); }
.process-section .process-step::after { background: rgba(255,255,255,0.15); }

/* Centred button beneath the band */
.process-cta { text-align: center; margin-top: 16px; }

@media (max-width: 600px) {
  .process-header h2 { font-size: 26px; }
}


/* ============================================================
   LEGAL PAGES (pp-)  — privacy policy, cookie policy, complaints
   Simple template: slim grey header, centred reading column,
   teal contact box. No hero photo, no CTA band.
   ============================================================ */

/* Slim page header — soft grey band, no photo */
.pp-head { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 52px 2rem 44px; }
.pp-head-inner { max-width: 820px; margin: 0 auto; }
.pp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.pp-breadcrumb a { color: var(--text-muted); }
.pp-breadcrumb a:hover { color: var(--navy); }
.pp-crumb-sep { color: var(--text-light); }
.pp-head h1 { font-family: 'Lora', serif; font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; color: var(--navy); }
.pp-updated { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }

/* Body — centred reading column */
.pp-body { padding: var(--section-y) 2rem; }
.pp-inner { max-width: 760px; margin: 0 auto; }
.pp-inner h2 { font-family: 'Lora', serif; font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--navy); margin: 44px 0 14px; }
.pp-inner h2:first-child { margin-top: 0; }
.pp-inner h3 { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy-mid); margin: 0 0 8px; }
.pp-inner p { margin: 0 0 16px; }
.pp-inner ul { margin: 0 0 16px; padding-left: 22px; }
.pp-inner li { margin-bottom: 8px; }
.pp-inner ul li::marker { color: var(--teal); }
.pp-inner a { color: var(--navy-light); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.pp-inner a:hover { color: var(--navy); }

/* Teal-tinted contact box at the foot of a policy */
.pp-contact { background: var(--teal-light); border-radius: 12px; padding: 24px 26px; margin-top: 36px; }
.pp-contact h3 { margin-top: 0; color: var(--navy); }
.pp-contact p { margin-bottom: 0; }
.pp-contact ul { margin: 8px 0 0; padding-left: 22px; }
.pp-contact li { margin-bottom: 4px; }

/* Data tables inside a policy — reuse .rates-table styling, scroll on mobile */
.pp-table-wrap { overflow-x: auto; margin: 20px 0 24px; -webkit-overflow-scrolling: touch; }
.pp-table-wrap .rates-table { margin: 0; min-width: 560px; }
.pp-note { font-size: 13.5px; color: var(--text-muted); margin: -6px 0 18px; }

@media (max-width: 600px) {
  .pp-head { padding: 40px 1.5rem 34px; }
  .pp-body { padding: var(--section-y-sm) 1.5rem; }
}


/* ============================================================
   32. PRODUCT PAGES (/mortgages/… + bridging / development)
   Promoted from the First-Time Buyer template 8 July 2026 once the
   template was approved and rolled out to all product pages. Only
   product pages use these `p-` classes, so this is purely additive.
   ============================================================ */

/* ── Navy page-header band (no photo, teal ring motif) ── */
.p-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, #0c223f 0%, var(--navy) 45%, #143a68 100%);
  padding: 60px 2rem 52px;
}
.p-head-rings {
  position: absolute;
  top: -90px; right: -60px;
  width: 460px; height: 460px;
  fill: none; stroke: var(--teal); stroke-width: 1.5;
  opacity: 0.16; pointer-events: none;
}
.p-head-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; }
.p-head .breadcrumb-inner { max-width: none; margin: 0 0 22px; font-size: 12.5px; color: rgba(255,255,255,0.55); }
.p-head .breadcrumb-inner a { color: rgba(255,255,255,0.72); text-decoration: none; }
.p-head .breadcrumb-inner a:hover { color: #fff; text-decoration: underline; }
.p-head .breadcrumb-sep { color: rgba(255,255,255,0.3); }
.p-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5dd5c6; margin-bottom: 16px; }
.p-head h1 { font-family: 'Lora', serif; font-size: var(--h1-page); font-weight: 600; line-height: 1.15; letter-spacing: -0.5px; color: #fff; margin: 0 0 20px; }
.p-head-intro { font-size: clamp(16px, 2vw, 18px); font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.9); max-width: 640px; margin: 0 0 32px; }
.p-head-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Text/image sections ── */
.p-section { padding: var(--section-y) 2rem; background: #fff; }
.p-section-alt { background: var(--bg-alt); }
.p-split { max-width: 1140px; margin: 0 auto; display: grid; gap: 60px; align-items: start; }
.p-split--img-right { grid-template-columns: 1.3fr 0.7fr; }  /* copy L | image R */
.p-split--img-left  { grid-template-columns: 0.7fr 1.3fr; }  /* image L | copy R */

/* Heading A - left-aligned inside the copy column (section 1) */
.p-copy h2 { font-family: 'Lora', serif; font-size: var(--h2-section); line-height: 1.25; letter-spacing: -0.3px; color: var(--navy); margin: 0 0 18px; }
/* Heading B - full-width, centred above the split (section 2) */
.p-section-head { max-width: 1140px; margin: 0 auto 32px; text-align: center; font-family: 'Lora', serif; font-size: var(--h2-section); line-height: 1.25; letter-spacing: -0.3px; color: var(--navy); white-space: nowrap; }
.p-copy p { font-size: 16px; line-height: 1.75; color: var(--text); margin: 0 0 18px; }
.p-copy p:last-child { margin-bottom: 0; }

/* Editorial photo panel - auto-matches the copy height (align-self:stretch +
   object-fit:cover); the image is absolutely positioned so it fills the panel
   instead of dictating its height. Reverts to natural 3:2 on mobile. */
.p-media { margin: 0; position: relative; align-self: stretch; min-height: 240px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.p-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Green adviser callout (section 1, where the image would sit) ── */
.p-callout { align-self: center; background: linear-gradient(135deg, #0E8A7C 0%, #12A090 50%, #0DBD9D 100%); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 38px 30px; text-align: center; color: #fff; }
.p-callout-lead { font-family: 'Lora', serif; font-size: 23px; font-weight: 600; line-height: 1.3; color: #fff; margin: 0 0 18px; }
.p-callout-phone { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; margin: 0 0 26px; }
.p-callout-phone a { color: #fff; text-decoration: none; font-weight: 600; font-size: 20px; }
.p-callout-phone a:hover { opacity: 0.85; }
.p-callout-btn { display: inline-block; background: #fff; color: #0E8A7C; padding: 13px 28px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; }
.p-callout-btn:hover { background: #D9F5F0; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* ── Checklist - teal circle tick, one item per line ── */
.p-checklist { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 13px; }
.p-checklist li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.p-checklist li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background-color: var(--teal-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312A090' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .p-section-head { white-space: normal; margin-bottom: 26px; }
  .p-split, .p-split--img-right, .p-split--img-left { grid-template-columns: 1fr; gap: 28px; }
  .p-split .p-media { order: -1; align-self: auto; min-height: 0; max-width: 520px; margin-inline: auto; width: 100%; aspect-ratio: 3 / 2; }
  .p-section { padding: var(--section-y-sm) 1.5rem; }
  .p-head { padding: 48px 1.5rem 44px; }
  .p-head-rings { width: 340px; height: 340px; top: -70px; right: -80px; }
}
@media (max-width: 600px) {
  .p-section { padding: var(--section-y-sm) 1.25rem; }
}

/* ============================================================
   33. EXPAT KNOWLEDGE LIBRARY - ARTICLE TEMPLATE (`kb-` family)
   Promoted from the Foreign Credit Reports article 18 July 2026 so
   all Knowledge Library articles share one source of truth. Builds
   on the `p-`/`pp-` families above; nothing here overrides them.
   ============================================================ */

/* Article body on the light-blue band. .pp-inner gives the base
   left-aligned column, Lora H2s, links and table styling; here we
   widen the reading column to ~900px so it lines up with the How It
   Works step row, and nudge the headings slightly larger. */
.p-section-alt .kb-article { max-width: 900px; }
.p-section-alt .kb-article h2 { font-size: var(--h2-section); line-height: 1.25; }
.kb-article h2:first-child { margin-top: 0; }
.kb-article p { color: var(--text); }

/* Practical-steps checklist - reuse .p-checklist ticks, sized to
   match the body copy with more breathing room between items. */
.kb-steps { margin: 22px 0 0; gap: 16px; }
.kb-steps li { font-size: 16px; line-height: 1.75; }

/* FAQ block - width stays at the 760px column (.pp-inner); larger heading only. */
.pp-inner .kb-faq-head {
  font-family: 'Lora', serif;
  font-size: var(--h2-section);
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin: 0 0 8px;
}
.kb-faq { margin-top: 8px; }


/* ============================================================
   34. COUNTRY PAGES & EXPAT PILLARS (`c-` family)
   ============================================================
   PROMOTED 21 August 2026, from the three page files that each carried
   their own copy: the Dubai country page, /expat-mortgages/ and the
   Knowledge Library article's cut-down shim.

   WHY NOW: the Dubai page was signed off as the country-page template on
   20 August and is now a dynamic route building 19 pages. Leaving these
   rules page-scoped would have shipped 19 identical copies of the same
   block, and a design change would have meant 19 edits.

   WHO USES IT:
     · every country page  (src/pages/expat-mortgages/
       uk-mortgage-for-expat-living-in-[country].astro)
     · the expat pillar    (/expat-mortgages/)
     · the Knowledge Library article, which only needs .c-page /
       .c-section / .c-prose to size the shared expat component

   ⚠️ THE KNOWLEDGE ARTICLE'S CONTAINER CHANGED WITH THIS. Its shim
   pinned .c-page to 1040px, the last 1040px container on the site; it now
   inherits the 1200px below, so its "Why Expat Clients Choose" band is
   wider than it was. That was the instruction, and it brings the article
   into line with every other page. Section padding is unchanged, because
   that band is the wrapper's only child and so takes the :last-child rule.
   ============================================================ */

/* ── Page rhythm & reading measure ──
   Content sits on a CENTRED axis: a narrow reading column centred, with
   media and grids wider and also centred. 1200px matches .container, the
   nav, the footer and the homepage bands. Prose keeps its 760px reading
   measure; only splits and grids use the extra room. */
.c-page { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.c-section { padding: var(--section-y) 0 0; }
.c-page > .c-section:last-child { padding-bottom: var(--section-y); }
/* Hairline divider between two sections sharing the same background. */
.c-page > .c-section + .c-section {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 56px;
}
.c-prose { max-width: 760px; }
/* Centre the standalone text blocks (NOT prose beside an image in a split). */
.c-section > .c-prose { margin-left: auto; margin-right: auto; }
.c-prose h2 {
  font-family: 'Lora', serif;
  font-size: var(--h2-section);
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}
.c-prose p { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 18px; }
.c-prose p:last-child { margin-bottom: 0; }
.c-prose a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal-light); }
.c-prose a:hover { border-bottom-color: var(--teal); }
/* Larger opening paragraph - used by the expat pillar. */
.c-lead { font-size: 19px; line-height: 1.7; color: var(--navy-mid); }

/* ── Body sub-headings and lists ──
   Folded in from /expat-mortgages/ on promotion. The country template has
   no long-form text section, so it had no style for an in-copy sub-heading
   or a plain bullet list. Built from existing tokens only, and deliberately
   restrained so the section still reads as prose rather than as a stack of
   components. Sits a clear step below .c-prose h2. */
.c-prose h3 {
  font-family: 'Lora', serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -0.2px;
  margin: 40px 0 14px;
}
.c-prose h3:first-child { margin-top: 0; }
.c-prose ul { list-style: none; margin: 0 0 20px; padding: 0; }
.c-prose ul li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.c-prose ul li:last-child { margin-bottom: 0; }
.c-prose ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── Intro section - heading above the copy ──
   COUNTRY PAGES: left-aligned, wraps freely (the default below).
   THE EXPAT PILLAR: centred and held on one line, which is why the
   modifier exists. Both looks were on the same class name in the two
   page-scoped copies, so promoting them as-is would have silently
   restyled one page or the other. Do NOT merge the two rules. */
.c-intro-head {
  font-family: 'Lora', serif;
  font-size: var(--h2-section);
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin: 0 0 24px;
}
.c-intro-head--centred { white-space: nowrap; text-align: center; }

/* Copy LEFT (1.3fr), image RIGHT (0.7fr) - the Knowledge article's
   section-1 column ratio, but the image keeps the square .c-media
   treatment and sits vertically CENTRED beside the text. Per Andrew,
   10 Aug 2026, reaffirmed 20 Aug after an image-led version was tried and
   reverted. ⚠️ DO NOT WIDEN THE IMAGE. The compound selector outweighs the
   350px/1fr default on .c-split-media below. */
.c-split-media.c-intro-split {
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
}
/* Bold opening paragraph - the above-the-fold sales pitch.
   ⚠️ TWO CLASSES ON PURPOSE. A bare `.c-intro-lead` never applied its
   colour: `.c-prose p` above is a class PLUS an element, and that outranks
   a single class whatever the order. Do not "simplify" this back to one
   class, and do not reach for !important - the extra class IS the fix. */
.c-prose .c-intro-lead { font-weight: 600; color: var(--navy-mid); }

/* ── Editorial media splits ──
   A small centred square that breaks up the text without competing with
   it. The square crop keeps the source sharp. */
.c-split-media {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 64px;
  align-items: center;
}
.c-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.c-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* ── FAQ - refined spacing on the base .faq- classes ── */
.c-faq { max-width: 760px; margin: 12px auto 0; }
.c-faq .faq-item { padding: 24px 0; }
.c-faq .faq-question { font-size: 16.5px; }
.c-faq .faq-answer { font-size: 15px; max-width: 700px; }
.c-faq .faq-answer a { color: var(--teal); }
/* Answers run to several paragraphs on the country pages, and the base
   .faq-answer has no rule for a <p> inside it - without this they take the
   browser's 1em default and the gaps are far too wide. */
.c-faq .faq-answer p { margin: 0 0 12px; }
.c-faq .faq-answer p:last-child { margin-bottom: 0; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .c-split-media,
  .c-split-media.c-intro-split { grid-template-columns: 1fr; gap: 36px; }
  .c-media { max-width: 360px; margin-inline: auto; }
  .c-section { padding-top: 64px; }
  .c-intro-head--centred { white-space: normal; }
}