@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-v38-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-v38-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-v38-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   Amanda Kelly — Occupational Therapist
   Design tokens + component styles
   ============================================================ */


:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);


  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;  --space-32: 8rem;


  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;


  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);


  --content-narrow: 720px;
  --content-default: 1120px;
  --content-wide: 1240px;


  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}


/* -------- LIGHT (default) — calm sage & emerald -------- */
:root, [data-theme='light'] {
  --color-bg: #f6f8f2;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5ea;
  --color-surface-offset: #eaf1e2;
  --color-border: #dbe4d2;
  --color-divider: #e6ecdd;


  --color-text: #18211b;
  --color-text-muted: #55655a;
  --color-text-faint: #8b9a8e;
  --color-text-inverse: #f6f8f2;


  --color-primary: #1f8a4c;        /* emerald */
  --color-primary-hover: #17703d;
  --color-primary-active: #125a31;
  --color-primary-soft: #e8f6ee;   /* pale nav pill */
  --color-primary-ink: #16512f;


  --color-forest: #1e3a2b;         /* deep green sections/footer */


  --shadow-sm: 0 1px 2px rgba(24, 33, 27, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 33, 27, 0.08);
  --shadow-lg: 0 20px 50px rgba(24, 33, 27, 0.12);
}


/* -------- DARK -------- */
[data-theme='dark'] {
  --color-bg: #12160f;
  --color-surface: #1a2015;
  --color-surface-2: #1f2619;
  --color-surface-offset: #242c1d;
  --color-border: #313a28;
  --color-divider: #283020;


  --color-text: #e7ede0;
  --color-text-muted: #a3b09a;
  --color-text-faint: #6f7d68;
  --color-text-inverse: #12160f;


  --color-primary: #4fb877;
  --color-primary-hover: #63c98a;
  --color-primary-active: #7ad49c;
  --color-primary-soft: #1f3527;
  --color-primary-ink: #cdead9;


  --color-forest: #15271c;


  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #12160f; --color-surface: #1a2015; --color-surface-2: #1f2619;
    --color-surface-offset: #242c1d; --color-border: #313a28; --color-divider: #283020;
    --color-text: #e7ede0; --color-text-muted: #a3b09a; --color-text-faint: #6f7d68;
    --color-text-inverse: #12160f; --color-primary: #4fb877; --color-primary-hover: #63c98a;
    --color-primary-active: #7ad49c; --color-primary-soft: #1f3527; --color-primary-ink: #cdead9;
    --color-forest: #15271c;
  }
}


/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); }
.wrap-wide { max-width: var(--content-wide); }
.wrap-narrow { width: 100%; max-width: var(--content-narrow); margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); }


.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section-sm { padding-block: clamp(var(--space-12), 6vw, var(--space-24)); }


.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}


.section-head { max-width: 60ch; }
.section-head h2 { margin-bottom: var(--space-4); }


h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); line-height: 1.08; }
h2 { font-size: var(--text-2xl); line-height: 1.12; }
h3 { font-size: var(--text-lg); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.55; }


/* ------------------------------------------------------------
   Display headings (hero + interior page hero)
   All top-of-page headings share ONE consistent treatment:
   Cormorant Garamond italic 500, generous width, balanced wrap.
   `text-wrap: balance` evens out line lengths automatically so
   we avoid lonely orphan words and short trailing lines.
   ------------------------------------------------------------ */
.hero h1,
.page-hero h1,
.page-title {
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.06;
  text-wrap: balance;
}

/* Interior page headings (About, Training, Services, Contact) should
   run the FULL column width like the paragraph beneath them, wrapping
   only when the text genuinely needs a second line. No max-width cap.
   (The home hero heading is capped separately in the Hero section
   below, because it sits in a narrower two-column grid.) */
.page-hero h1,
.page-title {
  max-width: none;
}

/* Keep the intro paragraph on interior pages clearly NARROWER than the
   full-width heading, so the big italic heading leads and the lead text
   doesn't blend into it. */
.page-hero .lead,
.page-hero > .wrap > p,
.page-hero p.lead {
  max-width: 62ch;
}


.ink { color: var(--color-primary); }


/* Decorative italic ampersand — trim it back so the Cormorant
   swash complements the line instead of dominating it. */
.amp {
  font-style: italic;
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1;
}


/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.site-header.scrolled { border-bottom-color: var(--color-divider); box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding-block: var(--space-4);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; margin-right: auto; }
.brand-mark { width: 40px; height: 40px; color: var(--color-primary); flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.05; }
.brand-role { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.02em; }


.nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.nav-links a {
  display: inline-block; text-decoration: none; color: var(--color-text-muted);
  font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a[aria-current='page'] { color: var(--color-primary-ink); background: var(--color-primary-soft); }


.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: grid; place-items: center; color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-text-faint); }


/* mobile menu */
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); place-items: center; color: var(--color-text); }


/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  border: 1px solid transparent; line-height: 1;
  transition: background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-on-dark { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.btn-on-dark:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-soft { background: var(--color-primary-soft); color: var(--color-primary-ink); border-color: transparent; }
.btn-soft:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); }
.nav-email { background: var(--color-primary); color: #fff; }
.nav-email:hover { background: var(--color-primary-hover); }


/* ============================================================
   Hero
   ============================================================ */
.hero { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  /* Vertically centre the photo against the text block so the heading
     leads at the top and the photo sits calmly beside the paragraph
     rather than crowding the heading. */
  align-items: center;
}
.hero h1 { font-size: var(--text-3xl); line-height: 1.06; margin-block: var(--space-4) var(--space-6); max-width: 18ch; }
.hero .lead { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); }
.hero-trust img { height: 64px; width: auto; background: #fff; padding: 10px 16px; border-radius: var(--radius-md); box-shadow: 0 1px 3px rgba(24,33,27,0.08); border: 1px solid rgba(24,33,27,0.06); }


.hero-media {
  position: relative;
  align-self: center;
}


.hero-media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3; }
.hero-media-tag {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  background: var(--color-forest); color: #fff; font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
}


/* ============================================================
   Cards
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }


.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-soft); }
.card-title { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-muted); }


.feat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-bottom: var(--space-5);
  background: var(--color-primary-soft); color: var(--color-primary);
}


/* course/service cards with tag */
.tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-primary-ink); background: var(--color-primary-soft);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.card .meta { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-text-faint); margin-block: var(--space-2) var(--space-4); }
.card .card-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-weight: 700; font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; }
.card .card-link:hover { gap: var(--space-3); }
/* course cards: keep the foot pinned to the bottom so buttons align across the row */
.card-course { display: flex; flex-direction: column; }
.card-course > p { margin-bottom: 0; }
.card-foot { margin-top: auto; padding-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.card-foot .card-link { margin-top: 0; }
/* confirmed-date badge */
.date-badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-weight: 700; font-size: var(--text-sm); color: var(--color-primary-ink); background: var(--color-primary-soft); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); }
.date-badge svg { flex-shrink: 0; }
.card .meta.meta-date { color: var(--color-primary); font-weight: 800; }


/* tick lists */
.tick-list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.tick-list li { position: relative; padding-left: var(--space-8); color: var(--color-text); max-width: 60ch; }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 0.15em;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}


/* ============================================================
   Space feature
   ============================================================ */
.space-feature .space-media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3; }


/* ============================================================
   Deep-green panels & closing
   ============================================================ */
.closing .closing-inner { text-align: center; }
.closing h2 { margin-bottom: var(--space-4); }


.panel-forest {
  background: var(--color-forest); color: #fff;
  border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16));
}
.panel-forest h2, .panel-forest h3 { color: #fff; }
.panel-forest p { color: rgba(255,255,255,0.82); }
.panel-forest .btn { margin-top: var(--space-6); }
.panel-soft {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10));
}


/* meta strip (course facts band) */
.meta-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-8);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.meta-strip > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.meta-k { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.meta-v { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); line-height: 1.2; }
@media (max-width: 480px) { .meta-strip { grid-template-columns: 1fr 1fr; } }


/* course outline day rows */
.day-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.day-k { white-space: nowrap; }
.day-row:last-child { border-bottom: 1px solid var(--color-border); }
.day-k { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); }
@media (max-width: 600px) { .day-row { grid-template-columns: 1fr; gap: var(--space-2); } }


/* about stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.stat {
  text-align: center; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-4);
}
.stat b { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); line-height: 1; }
.stat span { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.03em; }


/* about portrait */
.portrait-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.portrait { position: sticky; top: 96px; }
.portrait img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 3/4; }
.portrait figcaption { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.prose h3 { margin-block: var(--space-10) var(--space-4); }
.prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-4); color: var(--color-text-muted); }


/* page hero (interior) */
.page-hero { padding-block: clamp(var(--space-16), 7vw, var(--space-24)) var(--space-8); }
.page-hero .lead { max-width: 60ch; margin-top: var(--space-5); }


/* contact info rows */
.info-list { display: grid; gap: var(--space-4); }
.info-row { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.info-row .ic { width: 44px; height: 44px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.info-row .lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--color-text-faint); }
.info-row .val { font-weight: 600; font-size: var(--text-base); word-break: break-word; }
.info-row a.val { color: var(--color-primary); text-decoration: none; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-12)); align-items: start; }


/* register-interest note */
.gdpr-note {
  margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 52ch;
}


/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--color-forest); color: #fff; padding-block: clamp(var(--space-16), 6vw, var(--space-20)); margin-top: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(var(--space-8), 4vw, var(--space-16)); }
.site-footer .f-brand { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-4); }
.site-footer p { color: rgba(255,255,255,0.7); font-size: var(--text-sm); max-width: 42ch; }
.footer-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.footer-badges img { height: 58px; width: auto; background: #fff; padding: 9px 14px; border-radius: var(--radius-md); }
.footer-col h4 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: var(--space-4); font-weight: 700; }
.footer-col ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-col a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; margin-top: clamp(var(--space-10), 4vw, var(--space-16)); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom span { color: rgba(255,255,255,0.55); font-size: var(--text-xs); }


/* ============================================================
   Motion — scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid, .grid-2, .portrait-grid, .contact-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .portrait { position: static; }
  .footer-grid { grid-template-columns: 1fr; }
  .space-feature .grid-2 { direction: ltr; }
  /* On stacked layouts the home hero heading can use its full width too */
  .hero h1 { max-width: none; }
}


@media (max-width: 760px) {
  .nav-links, .nav-email { display: none; }
  .nav-toggle { display: grid; }
  .site-header.menu-open .nav-links {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-1);
    background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
    padding: var(--space-4); box-shadow: var(--shadow-md);
  }
  .site-header.menu-open .nav-links a { padding: var(--space-3) var(--space-4); }
  .stat-grid { grid-template-columns: 1fr; }
  .brand-role { display: none; }
}