/* =====================================================================
   EASY MUNICIPAL SOLUTIONS  |  style.css
   ---------------------------------------------------------------------
   A single, well documented stylesheet for a static multi page site.

   Structure:
     1.  Design tokens (CSS custom properties)
     2.  Dark theme overrides
     3.  Base and reset
     4.  Typography
     5.  Layout helpers (container, section, grid)
     6.  Buttons
     7.  Header and navigation
     8.  Hero and jacaranda motif
     9.  Cards and feature blocks
     10. Process steps
     11. Stats and trust band
     12. Accordion (FAQ)
     13. Forms
     14. Footer
     15. Utilities, badges, dividers
     16. Scroll reveal animation states
     17. Back to top and toast
     18. Responsive breakpoints
     19. Reduced motion and print

   Note: no em dashes are used anywhere in this project. Colons, commas
   and parentheses are used instead, by client convention.
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
  /* Brand palette (jacaranda inspired, Tshwane is the Jacaranda City) */
  /* Brand palette taken from the Easy Municipal Solutions logo:
     navy for structure and text, jacaranda purple as the accent,
     sage green and sun yellow as supporting pops. */
  --brand-50:  #F4F0FB;
  --brand-100: #EAE1F6;
  --brand-200: #DAC9EF;
  --brand-300: #C2A7E4;
  --brand-400: #AB83DF;  /* light jacaranda (from logo) */
  --brand-500: #8461C5;  /* jacaranda core (from logo) */
  --brand-600: #6F4BB0;  /* primary purple */
  --brand-700: #583A90;
  --brand-800: #3F2A68;
  --brand-900: #2A1C47;

  /* Navy, from the logo skyline and wordmark */
  --navy-900:  #16204A;
  --navy-800:  #1E285C;
  --navy-700:  #232B59;
  --navy-600:  #333C6B;

  --leaf:      #4E9E63;  /* sage green accent, from the logo grass */
  --leaf-soft: #E7F3EA;
  --sun:       #FDE947;  /* sun yellow, bright pop (from the logo) */
  --amber:     #F5C518;

  /* Neutrals (cool, navy tinted) */
  --ink:       #1E285C;  /* primary text and headings (navy) */
  --ink-soft:  #4A5478;  /* secondary text */
  --ink-faint: #7A82A0;  /* captions */
  --line:      #E5E7F1;  /* hairline borders */
  --line-soft: #F0F1F8;

  /* Surfaces */
  --bg:        #FFFFFF;  /* clean, bright page background */
  --bg-tint:   #F6F2FC;  /* soft lilac tint for alternating sections */
  --surface:   #FFFFFF;  /* cards */
  --surface-2: #FBF9FE;

  /* Shadows tuned to a purple ground so they read soft, not grey */
  --shadow-sm: 0 1px 2px rgba(30, 40, 92, .07);
  --shadow-md: 0 10px 28px -10px rgba(30, 40, 92, .20);
  --shadow-lg: 0 26px 60px -22px rgba(30, 40, 92, .32);
  --shadow-ring: 0 0 0 4px var(--brand-100);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-util: "Space Grotesk", "Inter", sans-serif;

  /* Type scale (fluid, clamps between mobile and desktop) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
  --step-4:  clamp(2.5rem, 2rem + 2.6vw, 4rem);
  --step-5:  clamp(3rem, 2.2rem + 4vw, 5.2rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .5s;

  --header-h: 76px;
}

/* =====================================================================
   2. DARK THEME
   Applied when <html data-theme="dark">. Set early by an inline script
   in the <head> of each page to prevent a light flash on first paint.
   ===================================================================== */
html[data-theme="dark"] {
  --ink:       #F1ECF9;
  --ink-soft:  #C3B9D6;
  --ink-faint: #9187A6;
  --line:      #362A4C;
  --line-soft: #2B2140;

  --bg:        #17101F;
  --bg-tint:   #1E1530;
  --surface:   #241735;
  --surface-2: #2A1C3E;

  --brand-100: #2E2050;
  --brand-200: #3C2A66;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, .7);
  --shadow-ring: 0 0 0 4px rgba(124, 77, 199, .35);
}

/* =====================================================================
   3. BASE AND RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }

/* =====================================================================
   4. TYPOGRAPHY
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 600; }
p  { margin: 0 0 var(--space-4); color: var(--ink-soft); }
p.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
strong { color: var(--ink); font-weight: 700; }

/* Eyebrow label (utility face, encodes section context) */
.eyebrow {
  font-family: var(--font-util);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand-400);
  border-radius: 2px;
}
html[data-theme="dark"] .eyebrow { color: var(--brand-300); }

.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 46ch; }
.text-center .measure,
.text-center .measure-narrow,
.text-center p.lead { margin-left: auto; margin-right: auto; }

/* =====================================================================
   5. LAYOUT HELPERS
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-9); }
.section.tight { padding-block: var(--space-8); }
.section.tinted { background: var(--bg-tint); }

.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
/* Tablet: two columns for all multi column grids */
@media (min-width: 560px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: expand to the intended column count */
@media (min-width: 920px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Two column content split (text plus panel) */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split.text-first > *:first-child { order: 0; }
}

.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }

/* =====================================================================
   6. BUTTONS
   ===================================================================== */
.btn {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-util);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 24px -10px rgba(84, 54, 145, .7);
}
.btn.secondary {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--brand-200);
}
html[data-theme="dark"] .btn.secondary { color: var(--brand-200); border-color: var(--brand-200); }
.btn.secondary:hover { background: var(--brand-50); border-color: var(--brand-400); }
html[data-theme="dark"] .btn.secondary:hover { background: var(--surface-2); }

.btn.ghost { background: transparent; color: var(--ink); padding-inline: 0.6em; }
.btn.ghost:hover { color: var(--brand-600); box-shadow: none; transform: none; }

.btn.block { width: 100%; }
.btn { white-space: nowrap; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Text link with animated underline */
.link-arrow {
  font-family: var(--font-util);
  font-weight: 600;
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
html[data-theme="dark"] .link-arrow { color: var(--brand-300); }
.link-arrow svg { transition: transform .25s var(--ease); width: 1em; height: 1em; }
.link-arrow:hover svg { transform: translateX(4px); }

/* =====================================================================
   7. HEADER AND NAVIGATION
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark { height: 44px; width: auto; flex: none; display: block; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__name small {
  display: block;
  font-family: var(--font-util);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.nav__links a {
  font-family: var(--font-util);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__links a:hover { color: var(--brand-700); background: var(--brand-50); }
html[data-theme="dark"] .nav__links a:hover { color: var(--brand-200); background: var(--surface-2); }
.nav__links a[aria-current="page"] { color: var(--brand-700); font-weight: 600; }
html[data-theme="dark"] .nav__links a[aria-current="page"] { color: var(--brand-200); }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Theme toggle */
.theme-toggle {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--brand-300); transform: rotate(-15deg); }
.theme-toggle svg { width: 20px; height: 20px; color: var(--brand-600); }
html[data-theme="dark"] .theme-toggle svg { color: var(--brand-300); }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }

.nav__cta { display: none; }

/* Mobile menu button */
.menu-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-btn span::before { transform: translateY(-7px); }
.menu-btn span::after  { transform: translateY(5px); }
body.menu-open .menu-btn span { background: transparent; }
body.menu-open .menu-btn span::before { transform: rotate(45deg); }
body.menu-open .menu-btn span::after  { transform: rotate(-45deg) translateY(-2px); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  background: var(--bg);
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
}
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav a {
  font-family: var(--font-util);
  font-size: 1.25rem;
  font-weight: 500;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.mobile-nav a[aria-current="page"] { color: var(--brand-600); }
.mobile-nav .btn { margin-top: var(--space-4); }

@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .menu-btn { display: none; }
  .mobile-nav { display: none; }
}

/* =====================================================================
   8. HERO AND JACARANDA MOTIF
   The signature: a jacaranda avenue with soft falling petals, a nod to
   Pretoria (Tshwane) as the Jacaranda City and to the reference imagery.
   ===================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 3rem + 6vw, 7rem) var(--space-9);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 85% -10%, var(--brand-100) 0%, transparent 55%),
    radial-gradient(80% 60% at 5% 10%, var(--brand-50) 0%, transparent 50%);
}
html[data-theme="dark"] .hero__bg {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(108,76,183,.35) 0%, transparent 55%),
    radial-gradient(80% 60% at 5% 10%, rgba(84,54,145,.25) 0%, transparent 50%);
}
/* Canopy silhouettes in the top corners */
.hero__canopy {
  position: absolute;
  top: -20px;
  z-index: -1;
  width: min(46vw, 520px);
  color: var(--brand-300);
  opacity: 0.5;
  pointer-events: none;
}
.hero__canopy.left  { left: -40px; transform: scaleX(-1); }
.hero__canopy.right { right: -40px; }
html[data-theme="dark"] .hero__canopy { color: var(--brand-700); opacity: 0.7; }

.hero__inner { position: relative; max-width: 760px; }
.hero h1 { margin-bottom: var(--space-5); }
.hero h1 .accent {
  color: var(--brand-600);
  font-style: italic;
}
html[data-theme="dark"] .hero h1 .accent { color: var(--brand-300); }
.hero .lead { margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero__note {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-family: var(--font-util);
}
.hero__note svg { width: 18px; height: 18px; color: var(--leaf); flex: none; }

/* Falling petals layer (decorative, hidden for reduced motion) */
.petals { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -24px;
  width: 14px; height: 14px;
  background: var(--brand-400);
  border-radius: 80% 0 80% 0;
  opacity: 0;
  animation: petal-fall linear infinite;
}
@keyframes petal-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10%  { opacity: .55; }
  100% { transform: translateY(115vh) rotate(420deg); opacity: 0; }
}

/* =====================================================================
   9. CARDS AND FEATURE BLOCKS
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }

/* Service card with a petal icon badge */
.svc-card { display: flex; flex-direction: column; }
.svc-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  color: var(--brand-700);
  margin-bottom: var(--space-5);
}
html[data-theme="dark"] .svc-icon { background: linear-gradient(135deg, var(--brand-200), var(--brand-800)); color: var(--brand-200); }
.svc-icon svg { width: 26px; height: 26px; }
.svc-card ul { margin: var(--space-4) 0 var(--space-5); display: grid; gap: var(--space-2); }
.svc-card ul li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.svc-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--brand-400);
  border-radius: 70% 0 70% 0;
}
.svc-card .link-arrow { margin-top: auto; }

/* Small feature (icon plus text) */
.feature { display: flex; gap: var(--space-4); }
.feature__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid var(--brand-100);
}
html[data-theme="dark"] .feature__icon { background: var(--surface-2); color: var(--brand-300); border-color: var(--line); }
.feature__icon svg { width: 22px; height: 22px; }
.feature h4 { margin-bottom: var(--space-1); }
.feature p { margin: 0; font-size: var(--step--1); }

/* Panel: a soft framed block used beside text */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--brand-100), transparent 70%);
  pointer-events: none;
}

/* =====================================================================
   10. PROCESS STEPS (a real ordered sequence, so numbers are meaningful)
   ===================================================================== */
.steps { display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .steps.four { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  padding-top: var(--space-7);
}
.step__num {
  position: absolute;
  top: -22px; left: var(--space-6);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-family: var(--font-util);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.step h4 { margin-bottom: var(--space-2); }
.step p { margin: 0; font-size: var(--step--1); }

/* =====================================================================
   11. STATS AND TRUST BAND
   ===================================================================== */
.stats {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--brand-600);
  line-height: 1;
}
html[data-theme="dark"] .stat__num { color: var(--brand-300); }
.stat__label {
  font-family: var(--font-util);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy-800), var(--brand-700));
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,120,216,.4), transparent 70%);
}
.cta-band::before { width: 320px; height: 320px; top: -140px; left: -80px; }
.cta-band::after  { width: 280px; height: 280px; bottom: -140px; right: -60px; }
.cta-band h2, .cta-band p { color: #fff; position: relative; }
.cta-band p { color: rgba(255,255,255,.82); }
.cta-band .btn.primary { background: #fff; color: var(--brand-800); }
.cta-band .btn.primary:hover { background: var(--brand-50); }
.cta-band .btn.secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn.secondary:hover { background: rgba(255,255,255,.12); }
.cta-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center; margin-top: var(--space-6); position: relative;
}

/* =====================================================================
   12. ACCORDION (FAQ)
   ===================================================================== */
.accordion { display: grid; gap: var(--space-3); }
.acc-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink);
}
.acc-trigger .plus {
  flex: none;
  width: 26px; height: 26px;
  position: relative;
  transition: transform .3s var(--ease);
}
.acc-trigger .plus::before,
.acc-trigger .plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--brand-600);
  border-radius: 2px;
}
.acc-trigger .plus::before { width: 14px; height: 2px; }
.acc-trigger .plus::after  { width: 2px; height: 14px; transition: transform .3s var(--ease); }
.acc-item[aria-expanded="true"] .plus::after { transform: rotate(90deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.acc-panel > div { overflow: hidden; }
.acc-item[aria-expanded="true"] .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { padding: 0 var(--space-6) var(--space-6); margin: 0; }

/* =====================================================================
   13. FORMS
   ===================================================================== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-family: var(--font-util);
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.field label .req { color: var(--brand-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--shadow-ring);
  background: var(--surface);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field .hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: var(--space-2); }

/* Honeypot: visually and programmatically hidden from real users */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .field-row.two { grid-template-columns: 1fr 1fr; } }

.field-error input,
.field-error select,
.field-error textarea { border-color: #D64550; }
.error-msg { color: #D64550; font-size: 0.8rem; margin-top: var(--space-2); display: none; }
.field-error .error-msg { display: block; }

.consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.consent input { width: auto; margin-top: 0.25em; flex: none; }

.form-status {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-size: var(--step--1);
}
.form-status.success { display: block; background: var(--leaf-soft); color: #1B6E45; border: 1px solid #BFE6CF; }
.form-status.error   { display: block; background: #FBE7E9; color: #A5313B; border: 1px solid #F2C4C9; }

/* Contact detail list */
.contact-list { display: grid; gap: var(--space-5); }
.contact-list .feature__icon { background: var(--brand-600); color: #fff; border: none; }

/* =====================================================================
   14. FOOTER
   ===================================================================== */
.site-footer {
  background: var(--bg-tint);
  color: var(--ink-soft);
  padding-block: var(--space-9) var(--space-6);
  margin-top: var(--space-9);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-brand .brand__name { color: var(--ink); }
.footer-brand p { color: var(--ink-soft); font-size: var(--step--1); margin-top: var(--space-4); max-width: 34ch; }
.footer-col h5 {
  font-family: var(--font-util);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a { color: var(--ink-soft); font-size: var(--step--1); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--brand-600); }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.5em; }
.footer-contact svg { width: 16px; height: 16px; color: var(--brand-600); flex: none; }
.footer-disclaimer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
.footer-bottom {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.footer-bottom a { color: var(--brand-600); }
.footer-bottom a:hover { color: var(--brand-700); }

/* =====================================================================
   15. UTILITIES, BADGES, DIVIDERS
   ===================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-util);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
}
html[data-theme="dark"] .badge { background: var(--surface-2); color: var(--brand-200); border-color: var(--line); }
.badge.leaf { background: var(--leaf-soft); color: #1B6E45; border-color: #C9EBD8; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pill {
  font-family: var(--font-util);
  font-size: var(--step--1);
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--space-7); }

.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }

.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul { margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.prose ul li { position: relative; padding-left: 1.5em; color: var(--ink-soft); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; background: var(--brand-400); border-radius: 70% 0 70% 0;
}
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--brand-700);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* =====================================================================
   16. SCROLL REVEAL ANIMATION STATES
   Elements with [data-reveal] start hidden and animate in via JS.
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* =====================================================================
   17. BACK TO TOP AND TOAST
   ===================================================================== */
.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 80;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-700); }
.to-top svg { width: 22px; height: 22px; }

.toast-wrap {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: var(--space-3);
  width: min(92vw, 420px);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink);
  color: #fff;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--step--1);
  animation: toast-in .35s var(--ease);
}
html[data-theme="dark"] .toast { background: var(--surface); border: 1px solid var(--line); }
.toast.success { border-left: 4px solid var(--leaf); }
.toast.error   { border-left: 4px solid #D64550; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   17b. MEDIA AND PHOTOGRAPHY
   Online placeholder photos. Every .photo has a JS error fallback so a
   broken source is swapped for a reliable image (see main.js).
   ===================================================================== */
.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
}
.media-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  background: var(--brand-100);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame.ratio-portrait  { aspect-ratio: 5 / 6; }
.media-frame.ratio-landscape { aspect-ratio: 16 / 11; }
.media-frame.ratio-square    { aspect-ratio: 1 / 1; }

/* Floating stat chip that can sit over a photo */
.media-chip {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  max-width: calc(100% - var(--space-6));
}
.media-chip .feature__icon { width: 40px; height: 40px; }
.media-chip strong { display: block; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.1; }
.media-chip span { font-size: 0.78rem; color: var(--ink-soft); font-family: var(--font-util); }

/* Hero split: text next to a photo */
.hero .split { align-items: center; }
.hero__media { position: relative; }
@media (max-width: 899px) {
  .hero__media { margin-top: var(--space-6); }
  .media-frame.ratio-portrait { aspect-ratio: 16 / 11; }
}

/* =====================================================================
   17c. BRAND MOTIFS (from the logo: wave, skyline, sun)
   ===================================================================== */
/* Sage green wave divider, echoing the grass sweep in the logo */
.wave-divider { display: block; width: 100%; height: 54px; color: var(--leaf); opacity: .45; }
.wave-divider.tint { color: var(--brand-300); }

/* Navy skyline strip, echoing the logo skyline. Sits at section edges. */
.skyline-strip { display: block; width: 100%; height: 60px; color: var(--navy-800); opacity: .08; }

/* Sun accent dot used on stats and eyebrows */
.sun-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(253, 233, 71, .35);
}

/* =====================================================================
   17d. CONVERSION COMPONENTS
   ===================================================================== */
/* Floating WhatsApp click to chat, all pages */
.wa-float {
  position: fixed;
  right: 18px; bottom: 84px;
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); }
.wa-float svg { width: 30px; height: 30px; }

/* Sticky mobile CTA bar: appears after scroll on phones */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
  box-shadow: 0 -8px 30px rgba(30, 40, 92, .12);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.95em 0.5em;
  background: var(--surface);
  font-family: var(--font-util);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy-800);
}
.mobile-cta a svg { width: 18px; height: 18px; flex: none; }
.mobile-cta a.primary { background: var(--brand-600); color: #fff; }
@media (min-width: 900px) { .mobile-cta { display: none; } }
body.has-mobile-cta .to-top { bottom: 150px; }
body.has-mobile-cta .wa-float { bottom: 150px; }
@media (min-width: 900px) {
  body.has-mobile-cta .to-top { bottom: 20px; }
  body.has-mobile-cta .wa-float { bottom: 88px; }
}

/* Trust chip row under hero CTA */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-util);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.trust-row svg { width: 16px; height: 16px; color: var(--leaf); flex: none; }

/* Testimonials */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial__stars { color: var(--amber); letter-spacing: 2px; font-size: 1rem; margin-bottom: var(--space-3); }
.testimonial blockquote {
  margin: 0 0 var(--space-5);
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: 1.65;
  flex: 1;
}
.testimonial footer { display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-100);
}
.testimonial footer strong { display: block; font-size: 0.92rem; color: var(--ink); font-family: var(--font-util); }
.testimonial footer span { font-size: 0.78rem; color: var(--ink-faint); }

/* Photo cards used on the situations grid */
.photo-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.photo-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-50); }
.photo-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo-card:hover .photo-card__img img { transform: scale(1.05); }
.photo-card__body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.photo-card__body h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.photo-card__body p { font-size: var(--step--1); margin-bottom: 0; }

/* SEO content block near the footer: quiet, readable, human */
.seo-block { border-top: 1px solid var(--line); }
.seo-block h2 { font-size: var(--step-1); }
.seo-block p { font-size: var(--step--1); color: var(--ink-faint); max-width: 90ch; }

/* Header shrink on scroll */
.site-header { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.site-header .nav { transition: height .3s var(--ease); }
.site-header.scrolled .nav { height: 62px; }
.site-header.scrolled .brand__mark { height: 36px; }
.brand__mark { transition: height .3s var(--ease); }

/* =====================================================================
   17e. OFFERINGS SLIDER (homepage)
   ===================================================================== */
.slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.slider__track {
  display: flex;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  min-height: 380px;
}
@media (min-width: 820px) { .slide { grid-template-columns: 1.05fr 1fr; } }
.slide__media { position: relative; min-height: 220px; background: var(--brand-50); }
.slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__body {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide__body h3 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.slide__body p { margin-bottom: var(--space-5); }
.slide__body .btn { align-self: flex-start; }

.slider__nav {
  position: absolute;
  right: var(--space-4); bottom: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}
.slider__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.slider__btn:hover { background: var(--brand-50); transform: translateY(-2px); }
.slider__btn svg { width: 18px; height: 18px; }

.slider__dots {
  position: absolute;
  left: var(--space-5); bottom: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}
.slider__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand-200);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.slider__dot.active { background: var(--brand-600); transform: scale(1.25); }
@media (max-width: 819px) {
  .slider__dots { left: 50%; transform: translateX(-50%); bottom: auto; top: 190px; }
}

/* =====================================================================
   17f. FULLY CLICKABLE CARDS WITH HOVER CTA
   The whole card is one tap target via a stretched link. A CTA bar
   slides into view on hover or keyboard focus.
   ===================================================================== */
.card.clickable { position: relative; cursor: pointer; }
.card .stretched {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.card .stretched:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-util);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brand-600);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card__cta svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.card.clickable:hover .card__cta,
.card.clickable:focus-within .card__cta { opacity: 1; transform: none; }
.card.clickable:hover .card__cta svg { transform: translateX(4px); }
@media (hover: none) {
  /* Touch devices: CTA always visible since there is no hover */
  .card__cta { opacity: 1; transform: none; }
}
.photo-card .card__cta { margin: 0; padding: 0 var(--space-6) var(--space-5); }

/* Canopy shapes retired: the home hero now uses a real photo header. */
.hero__canopy { display: none; }

/* Full bleed photo hero: built for a dark city photograph. A navy to
   jacaranda overlay guarantees text contrast whatever the image does. */
.hero--photo {
  position: relative;
  color: #fff;
  padding-block: clamp(4.5rem, 3.5rem + 7vw, 8.5rem);
  background-color: var(--navy-800); /* paints first, before the image loads */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(22, 32, 74, .92) 0%,
    rgba(30, 40, 92, .78) 45%,
    rgba(88, 58, 144, .55) 100%);
}
.hero--photo .container { position: relative; z-index: 1; }
.hero--photo h1 { color: #fff; }
.hero--photo h1 .accent { color: var(--brand-300); }
.hero--photo .lead { color: rgba(255, 255, 255, .9); }
.hero--photo .badge {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
}
.hero--photo .trust-row span { color: rgba(255, 255, 255, .88); }
.hero--photo .trust-row svg { color: var(--sun); }
.hero--photo .btn.secondary { color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero--photo .btn.secondary:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
/* Sage wave sits at the base of the photo hero, tying into the logo */
.hero--photo .hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%; height: 46px;
  color: var(--bg);
  z-index: 1;
}

/* Footer QR code block */
.footer-qr { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.footer-qr img {
  width: 84px; height: 84px;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 6px;
  border: 1px solid var(--line);
}
.footer-qr span { font-size: 0.78rem; color: var(--ink-faint); max-width: 16ch; line-height: 1.45; }

/* =====================================================================
   18. RESPONSIVE FINE TUNING
   Breakpoints: 380 (small phone), 560 (large phone), 620, 900 (tablet to
   desktop split), 1000 (nav), 1100 (wide). Mobile first: base styles are
   the phone layout, media queries add space as the viewport grows.
   ===================================================================== */

/* Container padding scales with viewport */
@media (max-width: 560px) { .container { padding-inline: var(--space-4); } }
@media (max-width: 380px) { .container { padding-inline: var(--space-3); } }

/* Steps grid: 1 col phone, 2 col large phone and tablet, 4 col desktop */
@media (min-width: 560px)  { .steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .steps.four { grid-template-columns: repeat(4, 1fr); } }

/* Stats: 2 up on phones, 4 up from tablet */
@media (max-width: 799px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 380px) { .stats { grid-template-columns: 1fr; } }

/* Large phone and below */
@media (max-width: 620px) {
  .hero__actions .btn { width: 100%; }
  .hero__actions { gap: var(--space-3); }
  .section { padding-block: var(--space-8); }
  .section.tight { padding-block: var(--space-7); }
  .card, .panel, .step { padding: var(--space-5); }
  .form-card { padding: var(--space-5); }
  .cta-band { padding: var(--space-7) var(--space-5); }
  .cta-band__actions .btn { width: 100%; }
  .acc-trigger { padding: var(--space-4) var(--space-5); font-size: var(--step-0); }
  .acc-panel p { padding: 0 var(--space-5) var(--space-5); }
  .media-chip { left: var(--space-3); bottom: var(--space-3); padding: var(--space-2) var(--space-3); }
  .field-row.two { grid-template-columns: 1fr; }
  h1 { hyphens: auto; }
}

/* Small phone */
@media (max-width: 380px) {
  :root { --header-h: 64px; }
  .brand__name { font-size: 1.02rem; }
  .brand__mark { height: 36px; width: auto; }
  h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
}

/* Tablet: keep two column splits comfortable */
@media (min-width: 621px) and (max-width: 899px) {
  .panel.split { gap: var(--space-6); }
  .split { gap: var(--space-6); }
}

/* Tablet: the four service situation cards read better as two rows */
@media (min-width: 560px) and (max-width: 919px) {
  .section-head.center { margin-bottom: var(--space-6); }
}

/* =====================================================================
   19. REDUCED MOTION AND PRINT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .petals { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .petals, .hero__canopy { display: none; }
  body { background: #fff; color: #000; }
}