/* ==========================================================================
   ALBAFLUX — STYLESHEET
   --------------------------------------------------------------------------
   Sections (Ctrl+F to jump):
     1.  Variables (brand tokens)
     2.  Global resets + base typography
     3.  Reusable utilities (container, section, image placeholder, buttons)
     4.  Section 1 — Header / Nav
     5.  Section 2 — Hero
     6.  Section 3 — About Us
     7.  Section 4 — Key Objectives
     8.  Sections 5 & 6 — Business Activities + Key Services
     9.  Section 7 — Problem Statement
     10. Section 8 — Impact in Numbers
     11. Section 9 — Contact form
     12. Section 10 — Footer
     13. Back-to-top button
     14. Responsive (tablet + mobile)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  --navy:        #1E3769;
  --navy-light:  #2A4A8A; /* lighter navy used for hover states */
  --teal:        #094045; /* still used for hero photo overlay only — not for hovers */
  --white:       #FFFFFF;
  --mist:        #F8F8F8;
  --slate:       #6B7280;
  --slate-light: #9CA3AF; /* used only on the contact-portrait placeholder gradient */
  --border:      rgba(30, 55, 105, 0.12);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-w:     1200px;
  --radius:    12px;
  --radius-sm: 8px;
  --header-h:  80px;

  --shadow-card: 0 2px 6px rgba(30, 55, 105, 0.04);
  --shadow-pop:  0 6px 24px rgba(30, 55, 105, 0.10);
}


/* ==========================================================================
   2. GLOBAL RESET + BASE TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; text-decoration: none; }

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


/* ==========================================================================
   3. REUSABLE UTILITIES
   ========================================================================== */

/* .container centres content and caps it at the max width */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* .section is the default vertical rhythm wrapper around each block */
.section {
  padding: 96px 0;
}

/* .section-title is the navy H2 used at the top of every section */
.section-title {
  color: var(--navy);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.section-title.center { text-align: center; }
.section-title.small-pad { margin-bottom: 24px; }

/* .lead is the navy semibold sub-headline used after a .section-title */
.lead {
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 16px;
}

/* .body-text is the muted slate body paragraph (between sections) */
.body-text {
  color: var(--slate);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 540px;
}

/* Thin grey divider used between alternating sections */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 64px;
}

/* Visually hidden text for screen readers (used on form labels) */
.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;
}

/* ---------- Image placeholders ----------
   Until real photos are added, every <img> spot is rendered as a coloured
   block with a label. Replace these with <img> tags later, or just point
   the background-image at a real file.                                   */
.image-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  border-radius: var(--radius);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.placeholder-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 0 16px;
}

/* Slightly smaller image used inside two-column rows */
.small-image {
  aspect-ratio: 3 / 2;  /* stable shape — prevents layout shift while the image loads */
}

/* ---------- Image frame ----------
   Wraps real <picture> / <img> blocks. Gives them rounded corners,
   clips the image to those corners, and shows a soft mist background
   while the file is loading. Pair with .about-image, .small-image, or
   .problem-image to set the exact shape and rounding.                   */
.image-frame {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mist);
}
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 999px;       /* pill shape — matches PDF */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  text-align: center;
  line-height: 1.2;
}

/* Primary = navy fill, white text. Used on the Send Message button. */
.btn-primary {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm); /* form button is rectangular in PDF */
}
/* On hover the button shifts to a lighter navy (NOT the brand-guide teal,
   which has a green tint that clashes) AND lifts with a soft shadow.
   The lighter shade reads as a clear "highlighted" state while staying
   in the navy hue family.                                                  */
.btn-primary:hover {
  background: var(--navy-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(30, 55, 105, 0.28);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(30, 55, 105, 0.20);
}

/* Light = white pill, navy text. Used on the hero "Get Started" button. */
.btn-light {
  background: var(--white);
  color: var(--navy);
  padding: 12px 28px;
  font-weight: 500;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}
.btn-light:hover {
  background: var(--navy);
  color: var(--white);
}


/* ==========================================================================
   4. SECTION 1 — HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 100;
  background: var(--white);
  transition: box-shadow 0.25s ease;
}

/* Once the user scrolls a little, add a subtle shadow under the bar */
.site-header.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(30, 55, 105, 0.06);
}

.header-inner {
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo { display: inline-flex; align-items: center; height: 100%; }
.logo-img { height: 36px; width: auto; }

.nav { display: flex; align-items: center; gap: 40px; }

.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  transition: color 0.2s ease;
}
/* On hover a 2 px navy underline grows from the left — gives the link clear
   interactive feedback instead of relying on the navy→teal color shift,
   which is too subtle to register on its own.                              */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--navy);
  transition: width 0.2s ease;
}
.nav-link:hover::after { width: 100%; }

/* ---------- Hamburger (mobile only) ---------- */
.hamburger {
  display: none;            /* hidden on desktop, shown via media query */
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animate to an "X" when menu is open */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   5. SECTION 2 — HERO
   --------------------------------------------------------------------------
   Layered hero. The container-ship photo fills the ENTIRE area.
   On top of it: a teal gradient (dark on the left, transparent on the
   right) keeps the white headline readable while letting the photo
   show through on the right. The text panel sits on top of everything.

   Stacking order (bottom -> top):
     z-index 0 : .hero-photo   (background photograph)
     z-index 1 : .hero-overlay (teal wash, left-strong)
     z-index 2 : .hero-panel   (headline + button)
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  padding-top: var(--header-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
}

/* Background photograph — covers the entire hero */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: var(--navy);     /* shows briefly while the photo decodes */
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Teal wash — strong on the left, fades to transparent toward the right */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(9, 64, 69, 0.92) 0%,
    rgba(9, 64, 69, 0.78) 28%,
    rgba(9, 64, 69, 0.30) 55%,
    rgba(9, 64, 69, 0.00) 75%
  );
  pointer-events: none;        /* clicks pass through to elements below */
}

/* Text panel sits on top, centred within the page's max-width container */
.hero-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.hero-text { max-width: 480px; }

.hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
}

.hero-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 24px 0 16px;
  width: 80px;
}

.hero-sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}


/* ==========================================================================
   6. SECTION 3 — ABOUT US
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;   /* ~60/40 split */
  gap: 64px;
  align-items: start;
}

.about-image { aspect-ratio: 1 / 1; }


/* ==========================================================================
   7. SECTION 4 — KEY OBJECTIVES
   ========================================================================== */
.key-objectives {
  background: var(--mist);
}

.objective-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/*
  .card is the generic white card used in Key Objectives + Problem
  Statement. One design detail from the PDF:

  A 1 px BLUE-VIOLET gradient outline that goes from a deep #4248EF
  at the top to a lighter #6E91EF at the bottom. This is a design
  accent — not in BRAND_GUIDELINES.md, but clearly in the PDF.
  We use the "double background" trick: paint the white fill with
  `padding-box` and the gradient with `border-box`, leaving a 1 px
  transparent border so the gradient shows through as the outline.
  (This is the only way to combine a gradient border with
  border-radius — `border-image` doesn't follow rounded corners.)
*/
.card {
  position: relative;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(180deg, #4248EF 0%, #6E91EF 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 48px 32px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.objective-card {
  text-align: center;
}

/* Icon image at the top of each card — navy-on-transparent PNG extracted from the PDF. */
.objective-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 32px;
  display: block;
  object-fit: contain;
}

.card-title {
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.card-body {
  color: var(--slate);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  margin-top: 16px;
}


/* ==========================================================================
   8. SECTIONS 5 & 6 — BUSINESS ACTIVITIES + KEY SERVICES
   ========================================================================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col.reverse > .text-block { order: 2; }
.two-col.reverse > .image-placeholder { order: 1; }

.text-block .section-title { margin-bottom: 24px; }

/* Branded bullet list with a small navy dot before each item */
.brand-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brand-list li {
  position: relative;
  padding-left: 20px;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.65;
}
.brand-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
}


/* ==========================================================================
   9. SECTION 7 — PROBLEM STATEMENT
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.problem-card {
  padding: 20px 20px 28px;  /* image is inset inside the card, matches PDF */
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.problem-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}

.problem-image {
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);  /* all 4 corners rounded */
}

.problem-text {
  padding: 20px 4px 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--slate);
  text-align: center;
}
.problem-text strong {
  color: var(--navy);
  font-weight: 700;
}


/* ==========================================================================
   10. SECTION 8 — IMPACT IN NUMBERS
   ========================================================================== */
.impact-section {
  padding: 64px 0 0;        /* heading sits on white, then navy band below */
  background: var(--white);
}

.impact-band {
  background: var(--navy);
  padding: 56px 0;
  margin-top: 24px;
  margin-bottom: 64px;
  border-radius: var(--radius);
  max-width: calc(var(--max-w) - 48px);
  margin-left: auto;
  margin-right: auto;
}

.impact-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--white);
}

.stat-number {
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}


/* ==========================================================================
   11. SECTION 9 — CONTACT FORM
   ========================================================================== */
.contact-section { background: var(--mist); }

/* In the contact section, the visual hierarchy is INVERTED vs other sections:
   "Contact us" acts as a small label and "Reach out for..." is the dominant
   headline (per PDF). We override .section-title here only inside this
   section so other sections keep their large heading.                         */
.contact-section .section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.contact-big {
  color: var(--navy);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-top: 12px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.contact-portrait {
  width: 96px;
  height: 96px;
  min-height: 0;
  border-radius: var(--radius);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--slate-light), var(--slate));
}
.contact-details p { margin: 0; line-height: 1.5; }
.contact-name {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
}
.contact-title {
  color: var(--slate);
  font-size: 14px;
}
.contact-email {
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.contact-email:hover { color: var(--navy-light); }
.contact-phone {
  color: var(--slate);
  font-size: 14px;
}

/* ---------- Form card ----------
   Same blue-violet gradient outline as the .card component (Key Objectives
   and Problem Statement) — see the .card rule for the "double background"
   trick that lets a gradient outline coexist with border-radius.            */
.contact-form {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(180deg, #4248EF 0%, #6E91EF 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field { display: flex; flex-direction: column; }

/* Inputs and textarea use the same blue-violet gradient outline as the form
   card — applied via the "double background" trick so it coexists with
   border-radius. See .card for the explanation.                              */
.contact-form input,
.contact-form textarea {
  font-family: var(--font);
  font-size: 16px;
  color: var(--navy);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(180deg, #4248EF 0%, #6E91EF 100%) border-box;
  transition: box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}
.contact-form input { height: 48px; }
.contact-form textarea {
  height: 144px;
  resize: vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--slate);
  font-style: italic;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  /* On focus, swap the gradient for a solid navy outline + a soft halo. */
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--navy) border-box;
  box-shadow: 0 0 0 4px rgba(30, 55, 105, 0.1);
}

/* Invalid field state, applied by JS — solid red outline replaces the gradient. */
.form-field.has-error input,
.form-field.has-error textarea {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    #C03434 border-box;
}
.form-error {
  display: none;
  color: #C03434;
  font-size: 13px;
  margin-top: 6px;
}
.form-field.has-error .form-error { display: block; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.form-footer .btn-primary {
  margin-left: auto;        /* push button to the right */
}
.form-success {
  color: #1F7F4C;
  font-size: 14px;
  font-weight: 500;
}


/* ==========================================================================
   12. SECTION 10 — FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 64px 0 32px;
}

/* Footer layout — three groups distributed across the row with equal space
   between them (logo left, address middle, links right). The links group
   ends flush with the page's right edge, which sits directly under the
   right edge of the contact form above.                                    */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-logo { height: 48px; width: auto; }

.footer-rule {
  display: inline-block;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.4);
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
}
.footer-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* push links to the right edge of their column */
  text-align: right;
  gap: 8px;
}
.footer-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  transition: opacity 0.2s ease;
}
.footer-links a:hover { opacity: 0.75; }

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 32px 0 16px;
}

.footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   13. BACK-TO-TOP BUTTON
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--navy);
  color: var(--navy);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.back-to-top svg { width: 22px; height: 22px; }
.back-to-top:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-title { font-size: 52px; }

  .objective-grid,
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid { flex-wrap: wrap; row-gap: 32px; }
  .footer-links { flex-direction: row; gap: 24px; flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {

  .section { padding: 64px 0; }

  /* ---- Header ---- */
  .hamburger { display: block; }

  /*
    Mobile nav: hidden by default, shown when .is-open is added.
    Renders as a vertical drop-down panel beneath the header bar.
  */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    box-shadow: 0 8px 16px rgba(30, 55, 105, 0.08);
  }
  .nav.is-open {
    max-height: 320px;
    padding: 16px 24px 24px;
  }
  .nav-link {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
  }
  .nav-link:last-child { border-bottom: 0; }
  /* The desktop hover-underline pseudo-element clashes with the mobile
     row divider, so hide it inside the mobile dropdown.                    */
  .nav-link::after { display: none; }

  /* ---- Hero ----
     Photo still fills the whole area; the overlay becomes more uniform
     (and slightly darker) since the text now spans the full width. */
  .hero {
    height: auto;
    min-height: 600px;
    padding: var(--header-h) 0 0;
  }
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(9, 64, 69, 0.85) 0%,
      rgba(9, 64, 69, 0.70) 60%,
      rgba(9, 64, 69, 0.55) 100%
    );
  }
  .hero-panel { padding: 64px 24px; }
  .hero-text  { max-width: 100%; }
  .hero-title { font-size: 36px; }
  .hero-sub   { font-size: 13px; }

  /* ---- Two-column blocks collapse to one column ---- */
  .about-grid,
  .two-col,
  .two-col.reverse,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .two-col.reverse > .text-block { order: 1; }
  .two-col.reverse > .image-placeholder { order: 2; }

  .objective-grid,
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .section-title { font-size: 28px; }
  .lead { font-size: 18px; }
  .contact-section .section-title { font-size: 16px; }
  .contact-big { font-size: 30px; }

  /* ---- Impact band ---- */
  .impact-row {
    flex-direction: column;
    gap: 32px;
  }
  .stat-number { font-size: 64px; }

  /* ---- Footer ---- */
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    text-align: left;
  }
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .back-to-top { bottom: 16px; right: 16px; }
}