/* ==========================================================================
   New Dawn Counselling Centre — "Warm Dawn" design system
   Safari-first: no mask-composite, no background-clip:text, no opacity:0
   entrance states, no overflow-x:hidden on html/body.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin + latin-ext) ---- */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin-ext-0.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Tokens ---- */
:root {
  --cream: #FAF6EF;
  --surface: #FFFDF8;
  --ink: #2B2320;
  --ink-soft: #5C5148;
  --terracotta: #BC5B35;
  --terracotta-deep: #9E4826;
  --gold: #E0A43C;
  --gold-soft: #F0CE8F;
  --blush: #F3E2D3;
  --blush-deep: #EAD1BC;
  --sage: #7C8B6F;
  --line: #E9DFD0;
  --shadow-soft: 0 2px 8px rgba(90, 62, 40, 0.06), 0 12px 32px rgba(90, 62, 40, 0.08);
  --shadow-lift: 0 4px 12px rgba(90, 62, 40, 0.08), 0 20px 48px rgba(90, 62, 40, 0.12);
  --radius: 18px;
  --radius-sm: 12px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 76px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
/* Safari-safe horizontal clip (never overflow-x:hidden on html/body) */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.6em; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.125rem, 2vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
strong { font-weight: 600; }
::selection { background: var(--gold-soft); color: var(--ink); }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 780px; }

/* ---- Skip link ---- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 200; }
.skip-link:focus { left: 0; }

/* ---- Eyebrow / kicker ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--terracotta); color: #fff; box-shadow: 0 6px 18px rgba(188, 91, 53, 0.32); }
.btn--primary:hover { background: var(--terracotta-deep); color: #fff; box-shadow: 0 8px 24px rgba(188, 91, 53, 0.4); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--blush-deep); }
.btn--ghost:hover { border-color: var(--terracotta); color: var(--terracotta-deep); background: var(--surface); }
.btn--light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.btn--light:hover { color: var(--terracotta-deep); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn--lg { padding: 17px 34px; font-size: 1.0625rem; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 239, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(233, 223, 208, 0.7);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { width: 44px; height: 44px; flex: none; }
/* First Light mark: the arcs rise gently on hover, like dawn breaking */
.brand__mark .fl-arc { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }
.brand:hover .fl-arc--1, .brand:focus-visible .fl-arc--1 { transform: translateY(-1.5px); }
.brand:hover .fl-arc--2, .brand:focus-visible .fl-arc--2 { transform: translateY(-2.5px); transition-delay: 0.05s; }
.brand:hover .fl-arc--3, .brand:focus-visible .fl-arc--3 { transform: translateY(-3.5px); transition-delay: 0.1s; }
/* on the dark V3 header the arc colours flip to the concept's dark variant */
html[data-theme="dusk"] .site-header .fl-arc--1 { stroke: #8A6B3F; }
html[data-theme="dusk"] .site-header .fl-arc--3 { stroke: #F0CE8F; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand__tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { text-decoration: none; }
.site-nav__link {
  display: inline-block; padding: 9px 14px; border-radius: 999px;
  font-weight: 500; font-size: 0.975rem; color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav__link:hover { background: var(--blush); color: var(--ink); }
.site-nav__link[aria-current="page"] { background: var(--blush); font-weight: 600; }
.site-nav .btn { margin-left: 10px; padding: 11px 22px; font-size: 0.95rem; }

/* Dropdown (CSS-driven, keyboard-friendly via focus-within) */
.nav-drop { position: relative; }
.nav-drop__menu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  /* transparent top border bridges the gap so the pointer never falls off */
  border: 1px solid var(--line); border-top: 10px solid transparent;
  background: var(--surface); background-clip: padding-box; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); padding: 8px;
  visibility: hidden; opacity: 0; transform: translateY(-4px); z-index: 110;
  /* forgiving close: the menu lingers ~0.4s so diagonal mouse travel never loses it */
  transition: opacity 0.16s ease 0.24s, transform 0.16s ease 0.24s, visibility 0s linear 0.4s;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  visibility: visible; opacity: 1; transform: none;
  transition-delay: 0s, 0s, 0s;
}
.nav-drop__menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--ink); font-weight: 500; font-size: 0.95rem; text-decoration: none;
}
.nav-drop__menu a:hover { background: var(--blush); }
.nav-drop__caret { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }

/* Mobile nav */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 10px;
  width: 44px; height: 44px; border-radius: 10px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  /* Full-height sheet: the page behind is locked while it's open */
  .site-nav {
    display: none;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 14px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lift);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    z-index: 99;
  }
  .site-nav.is-open { display: flex; animation: nav-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  /* A blurred header would become the containing block for the fixed sheet
     (Filter Effects spec) and crush it to header height — so drop the blur
     while the menu is open. The header is 92% opaque anyway. */
  html.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  html[data-theme="golden"].nav-open .site-header,
  html[data-theme="dusk"].nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  /* While the sheet is open the body is frozen (position:fixed in JS), which
     would carry a sticky header off-screen — pin it to the viewport instead
     so "New Dawn Counselling Centre" is always visible above the menu. The
     body padding compensates for the header leaving the flow, so the page
     behind the sheet never visibly jumps while the sheet fades in. */
  html.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
  html.nav-open body { padding-top: calc(var(--header-h) + 1px); }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .site-nav__link { padding: 15px 14px; font-size: 1.1rem; border-radius: 12px; }

  /* Submenu starts CLOSED and opens on tap of the caret row */
  .nav-drop { display: grid; }
  .nav-drop > .site-nav__link {
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-drop__caret {
    display: block; width: 10px; height: 10px; margin: 0 6px 0 0;
    border-right: 2px solid var(--terracotta); border-bottom: 2px solid var(--terracotta);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
  }
  .nav-drop.is-open > .site-nav__link .nav-drop__caret { transform: rotate(-135deg) translate(-3px, -3px); }
  .nav-drop__menu {
    position: static; transform: none;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 0 14px; margin: 0;
    display: block; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.22s ease, visibility 0s linear 0.3s;
  }
  .nav-drop.is-open .nav-drop__menu {
    max-height: 360px; opacity: 1; padding-bottom: 6px; visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }
  .nav-drop__menu a {
    padding: 13px 14px; font-size: 1.02rem; color: var(--ink-soft);
    border-left: 2px solid var(--line); border-radius: 0 10px 10px 0;
  }
  .site-nav .btn { margin: 14px 14px 0; padding: 15px 22px; font-size: 1.05rem; }
  body.nav-open { overflow: hidden; }
  html.nav-open { overflow: hidden; }
}

/* ---- Hero (split editorial layout — words on cream, photo in an arch) ---- */
.hero__inner { position: relative; padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem); max-width: 720px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

.hero-split {
  position: relative;
  background: linear-gradient(180deg, #FBEED9 0%, #F8E7CC 48%, var(--cream) 100%);
  overflow: clip;
}
@supports not (overflow: clip) { .hero-split { overflow: hidden; } }
.hero-split__glow {
  position: absolute; right: -12%; top: -18%; width: 62%; padding-top: 62%;
  background: radial-gradient(circle at center, rgba(224, 164, 60, 0.28) 0%, rgba(224, 164, 60, 0.12) 42%, rgba(224, 164, 60, 0) 70%);
  border-radius: 50%; pointer-events: none;
}
.hero-split__grid {
  position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.hero-split__copy h1 {
  font-size: clamp(2.9rem, 5.8vw, 4.7rem);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.06;
  margin-bottom: 0.45em;
}
.hero-split__copy h1 em {
  font-style: normal; color: var(--terracotta);
  background: linear-gradient(transparent 74%, rgba(224, 164, 60, 0.42) 74%, rgba(224, 164, 60, 0.42) 94%, transparent 94%);
}
.hero-split__copy .lead { color: var(--ink); max-width: 46ch; }
.hero-split__micro {
  margin-top: 1.8rem; font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.hero-split__micro b { color: var(--terracotta-deep); font-weight: 700; }

.hero-split__media { position: relative; }
.hero-split__arch {
  position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden;
  aspect-ratio: 4 / 4.7; box-shadow: var(--shadow-lift);
}
.hero-split__arch::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.08) 0%, rgba(43, 35, 32, 0) 40%, rgba(43, 35, 32, 0.16) 100%);
  pointer-events: none;
}
/* The living sunrise scene inside the arch */
.scene { display: block; width: 100%; height: 100%; }
.scene__sun { animation: scene-sunrise 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
@keyframes scene-sunrise {
  from { transform: translateY(150px); }
  to { transform: translateY(0); }
}
.scene__mist { animation: scene-drift 26s ease-in-out infinite alternate; }
.scene__mist--near { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes scene-drift {
  from { transform: translateX(-26px); }
  to { transform: translateX(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene__sun, .scene__mist { animation: none; }
}

@media (max-width: 860px) {
  .hero-split__grid { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.75rem; padding-bottom: 3rem; }
  .hero-split__media { max-width: 420px; margin: 0 auto; width: 100%; }
  .hero-split__arch { aspect-ratio: 4 / 4.2; }
  .hero-split__copy h1 { font-size: clamp(2.7rem, 11vw, 3.4rem); }
}

/* Page hero (inner pages) — dawn arc decoration */
.hero__art { position: absolute; right: -60px; top: -40px; width: 420px; max-width: 60vw; opacity: 0.55; pointer-events: none; }

/* ---- Sections ---- */
.section { padding: clamp(3.25rem, 8vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.section--surface { background: var(--surface); }
.section--blush { background: linear-gradient(180deg, var(--cream) 0%, var(--blush) 24%, var(--blush) 72%, var(--cream) 100%); }
.section__head { max-width: 640px; margin-bottom: clamp(2rem, 5vw, 3rem); }

/* Horizon curve divider */
.divider { display: block; width: 100%; height: 70px; margin: -1px 0; }

/* ---- Cards ---- */
.card-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .card-grid--3 { grid-template-columns: 1fr; } .card-grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
a.card { display: block; text-decoration: none; color: var(--ink); }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--ink); }
.card__icon { width: 52px; height: 52px; margin-bottom: 1.1rem; }
.card h3 { margin-bottom: 0.45em; }
.card .card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--terracotta); margin-top: 0.4rem; }
a.card:hover .card__more { color: var(--terracotta-deep); }

/* Image cards */
.card--photo { padding: 0; overflow: hidden; }
.card--photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card--photo .card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ---- Feature rows (image + text) ---- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature--flip .feature__media { order: 2; }
@media (max-width: 860px) {
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
}

/* ---- Checklist ---- */
.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--blush);
}
.checklist li::after {
  content: ''; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px;
  border-left: 2px solid var(--terracotta-deep); border-bottom: 2px solid var(--terracotta-deep);
  transform: rotate(-45deg);
}
.checklist--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .checklist--2col { grid-template-columns: 1fr; } }

/* ---- Stats / trust strip ---- */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(0.5rem, 2vw, 1rem);
}
@media (max-width: 860px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .trust-strip__item:nth-child(3) { border-left: none; }
}
.trust-strip__item { text-align: center; padding: 0.3rem 1.1rem; border-left: 1px solid var(--line); }
.trust-strip__item:first-child { border-left: none; }
.trust-strip__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--terracotta); line-height: 1.1; }
.trust-strip__label { font-size: 0.9rem; color: var(--ink-soft); margin-top: 4px; }

/* ---- Fee table ---- */
.fee-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.fee-table th, .fee-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.fee-table th { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: var(--blush); }
.fee-table tr:last-child td { border-bottom: 0; }
.fee-table td:last-child { font-weight: 700; white-space: nowrap; color: var(--terracotta-deep); }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* ---- Team (horizontal profile rows) ---- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); max-width: 60rem; margin: 0 auto; }
.team-card { display: grid; grid-template-columns: clamp(180px, 24vw, 250px) 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.team-card__photo { position: relative; border-radius: calc(var(--radius) - 8px); overflow: hidden; }
.team-card__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(224, 164, 60, 0.0) 70%, rgba(224, 164, 60, 0.12) 100%); }
.team-card__body h3 { font-size: 1.35rem; }
.team-card__role { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta); margin: 0.2rem 0 0.9rem; }
.team-card p { font-size: 0.975rem; }
@media (max-width: 640px) {
  .team-card { grid-template-columns: 1fr; gap: 1.1rem; }
  .team-card__photo { max-width: 300px; }
}

/* ---- Quote / pull ---- */
.pull-quote {
  position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.35; color: var(--ink); max-width: 800px; margin: 0 auto; text-align: center;
  padding-top: 2.9rem;
}
.pull-quote::before {
  content: '\201C'; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 4.6rem; line-height: 0.9; color: var(--gold); opacity: 0.9;
}
.pull-quote::after {
  content: ''; display: block; width: 62px; height: 3px; border-radius: 2px;
  background: var(--gold); margin: 1.5rem auto 0;
}
.pull-quote em { color: var(--terracotta); font-style: normal; }

/* ---- CTA band ---- */
.cta-band {
  position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden;
  background: linear-gradient(120deg, #f9e7cd 0%, #F3D9B8 45%, #EFC795 100%);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; box-shadow: var(--shadow-lift);
}
.cta-band h2 { margin-bottom: 0.4em; }
.cta-band p { max-width: 54ch; margin-left: auto; margin-right: auto; }
.cta-band .hero__actions { justify-content: center; }
/* Centred with margin (not transform) so the parallax engine can freely
   write transform without shifting it sideways; excluded from the
   position:relative rule below so it stays absolutely positioned. */
.cta-band__sun { position: absolute; left: 50%; margin-left: -230px; bottom: -110px; width: 460px; opacity: 0.55; pointer-events: none; }
/* phones: the sun starts lower and larger so its scroll-rise is unmissable */
@media (max-width: 860px) {
  .cta-band__sun { width: 480px; margin-left: -240px; bottom: -150px; opacity: 0.6; }
}
.cta-band > *:not(.cta-band__sun) { position: relative; }
.cta-band__note { margin: 0.9rem 0 0; font-size: 0.9rem; font-weight: 600; opacity: 0.85; }

/* ---- Crisis strip ---- */
.crisis {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: var(--radius-sm); padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
}
.crisis strong { color: var(--ink); }
.crisis__lines { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font-size: 0.975rem; }
.crisis__lines span { white-space: nowrap; color: var(--ink-soft); }
.crisis__lines b { color: var(--ink); font-weight: 700; }
.crisis a { color: var(--terracotta-deep); font-weight: 600; }

/* ---- Footer ---- */
.site-footer { background: #322A25; color: #E9DFD3; margin-top: clamp(3rem, 8vw, 5rem); }
.site-footer a { color: #F0CE8F; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 3rem); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 0.9em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.95rem; }
.site-footer p { font-size: 0.95rem; color: #CBBFAF; }
.site-footer .brand__name, .site-footer .brand { color: #fff; }
.site-footer .brand__tag { color: var(--gold-soft); }
.site-footer__bottom {
  border-top: 1px solid rgba(233, 223, 211, 0.16);
  padding: 1.4rem 0 2rem; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; font-size: 0.85rem; color: #A99C8B;
}
.site-footer__bottom a { color: #CBBFAF; }

/* ---- Contact page ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-soft); }
.form-field { margin-bottom: 1.15rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.form-field .optional { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(224, 164, 60, 0.18);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.9rem; color: var(--ink-soft); }
.form-status { display: none; margin-top: 1rem; padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 500; }
.form-status.is-ok { display: block; background: #EAF2E3; color: #3E5A2E; border: 1px solid #C9DCB9; }
.form-status.is-err { display: block; background: #F9E8E2; color: #8A311F; border: 1px solid #EFC7B8; }

.info-block { display: flex; gap: 16px; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info-block:last-child { border-bottom: 0; }
.info-block__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--blush); display: flex; align-items: center; justify-content: center; }
.info-block__icon svg { width: 22px; height: 22px; }
.info-block h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 2px; }
.info-block p { margin: 0; font-size: 0.975rem; color: var(--ink-soft); }

/* ---- Mobile call bar ---- */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255, 253, 248, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
@media (max-width: 700px) {
  .mobile-cta { display: flex; }
  .mobile-cta .btn { flex: 1; padding: 13px 10px; font-size: 0.975rem; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Reveal animations (Safari-safe: visible by default) ---- */
.reveal { transform: none; }
.js-anim .reveal.pre-reveal { opacity: 0.001; transform: translateY(22px); }
.js-anim .reveal.did-reveal { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
/* Gentle stagger inside grids so rows bloom left-to-right */
.js-anim .card-grid > .reveal.did-reveal:nth-child(2),
.js-anim .team-grid > .reveal.did-reveal:nth-child(2),
.js-anim .trust-strip > .reveal.did-reveal:nth-child(2) { transition-delay: 0.09s; }
.js-anim .card-grid > .reveal.did-reveal:nth-child(3),
.js-anim .team-grid > .reveal.did-reveal:nth-child(3),
.js-anim .trust-strip > .reveal.did-reveal:nth-child(3) { transition-delay: 0.18s; }
.js-anim .card-grid > .reveal.did-reveal:nth-child(4),
.js-anim .team-grid > .reveal.did-reveal:nth-child(4),
.js-anim .trust-strip > .reveal.did-reveal:nth-child(4) { transition-delay: 0.27s; }
.js-anim .card-grid > .reveal.did-reveal:nth-child(5),
.js-anim .team-grid > .reveal.did-reveal:nth-child(5) { transition-delay: 0.36s; }

/* ---- Scroll polish (added by JS; page is fine without it) ---- */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(90, 62, 40, 0.1); }
.feature__media { overflow: hidden; } /* parallax imgs drift inside their frame */
[data-parallax], [data-parallax-img], .feature__media img { will-change: transform; }

/* Ambient dawn shapes (JS-injected, decorative) */
.section, .page-hero { position: relative; }
.section > .container, .page-hero > .container { position: relative; z-index: 1; }
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient__hold { position: absolute; width: clamp(240px, 28vw, 400px); opacity: 0.62; }
.ambient__hold--right { right: -12%; top: 8%; }
.ambient__hold--left { left: -14%; top: 14%; }
.ambient__shape { width: 100%; height: auto; display: block; animation: ambient-float 13s ease-in-out infinite alternate; }
.ambient__hold--left .ambient__shape { animation-duration: 17s; animation-direction: alternate-reverse; }
@keyframes ambient-float {
  from { transform: translateY(-26px) rotate(-2.5deg); }
  to { transform: translateY(26px) rotate(2.5deg); }
}

/* The hero glow breathes, very slowly */
.hero-split__glow { animation: glow-breathe 9s ease-in-out infinite alternate; }
@keyframes glow-breathe {
  from { transform: scale(1); opacity: 0.85; }
  to { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient__shape, .hero-split__glow { animation: none; }
}

/* ---- Page hero for inner pages ---- */
.page-hero { position: relative; background: linear-gradient(180deg, #FBEED9 0%, #F7E3C8 40%, var(--cream) 100%); overflow: clip; }
@supports not (overflow: clip) { .page-hero { overflow: hidden; } }
.page-hero .hero__inner { padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); }

/* ---- Breadcrumb-ish back link ---- */
.backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; }

/* ---- Details / FAQ ---- */
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
details.faq summary { cursor: pointer; font-weight: 600; padding: 18px 22px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-family: var(--font-display); font-size: 1.4rem; color: var(--terracotta); flex: none; line-height: 1; }
details.faq[open] summary::after { content: '–'; }
details.faq .faq__body { padding: 0 22px 18px; color: var(--ink-soft); }

/* ---- Utility ---- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-lg > * + * { margin-top: clamp(2rem, 5vw, 3rem); }
.badge { display: inline-block; background: var(--blush); color: var(--terracotta-deep); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; }

/* ==========================================================================
   Colour themes — three looks for the same site.
   Default (no attribute) = "Warm Dawn". html[data-theme] set pre-paint by an
   inline head script from ?theme= or localStorage.
   ========================================================================== */

/* ---- Golden Hour: warmer, richer, more colour-washed (the middle one) ---- */
html[data-theme="golden"] {
  --cream: #FAEDD7;
  --surface: #FFF8EC;
  --terracotta: #C05A2E;
  --terracotta-deep: #A34621;
  --gold: #E8A62E;
  --gold-soft: #F2CE8A;
  --blush: #F6DFC0;
  --blush-deep: #EDC898;
  --line: #EAD5B2;
}
html[data-theme="golden"] body { background: var(--cream); }
html[data-theme="golden"] .hero-split { background: linear-gradient(180deg, #F9D98F 0%, #F5CD84 45%, var(--cream) 100%); }
html[data-theme="golden"] .page-hero { background: linear-gradient(180deg, #F9D98F 0%, #F5CF88 40%, var(--cream) 100%); }
html[data-theme="golden"] .cta-band { background: linear-gradient(130deg, #C05A2E 0%, #D97A2E 55%, #E8A62E 100%); }
html[data-theme="golden"] .cta-band h2, html[data-theme="golden"] .cta-band p { color: #FFF6E6; }
/* the amber sun disappears on the golden band's own orange gradient — the
   rising dome goes warm cream there, matching the band's cream text */
html[data-theme="golden"] .cta-band__sun { opacity: 0.5; }
html[data-theme="golden"] .cta-band__sun circle { fill: #FFF3DC; }
html[data-theme="golden"] .cta-band .btn--light { background: #FFF8EC; color: #A34621; }
html[data-theme="golden"] .cta-band .btn--primary { background: #3A2A1E; box-shadow: 0 6px 18px rgba(40, 25, 12, 0.35); }
html[data-theme="golden"] .cta-band .btn--primary:hover { background: #2B1F16; }
html[data-theme="golden"] .site-header { background: rgba(250, 237, 215, 0.92); }
html[data-theme="golden"] .trust-strip__num { color: #C05A2E; }
html[data-theme="golden"] .ambient__hold { filter: saturate(1.25); }

/* ---- V3 After Dark: deep evening warmth — dramatically different ---- */
html[data-theme="dusk"] {
  --cream: #1B120E;
  --surface: #281C15;
  --ink: #F4EADB;
  --ink-soft: #CDB9A2;
  --terracotta: #E0764A;
  --terracotta-deep: #EE8A5C;
  --gold: #F2B04A;
  --gold-soft: #F6C87F;
  --blush: #2E211A;
  --blush-deep: #3E2D22;
  --sage: #8FA383;
  --line: #3C2D21;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.45);
}
html[data-theme="dusk"] .site-header { background: rgba(20, 13, 10, 0.93); border-bottom: 1px solid rgba(60, 45, 33, 0.7); }
html[data-theme="dusk"] .hero-split { background: linear-gradient(180deg, #201510 0%, #271A11 45%, var(--cream) 100%); }
html[data-theme="dusk"] .hero-split__glow { background: radial-gradient(circle at center, rgba(242, 176, 74, 0.25) 0%, rgba(242, 176, 74, 0.1) 45%, rgba(242, 176, 74, 0) 70%); }
html[data-theme="dusk"] .hero-split__arch { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
html[data-theme="dusk"] .page-hero { background: linear-gradient(180deg, #201510 0%, #271A11 40%, var(--cream) 100%); }
html[data-theme="dusk"] .scene rect { fill: #221610; }
html[data-theme="dusk"] .scene ellipse { opacity: 0.07; }
html[data-theme="dusk"] .scene path { filter: brightness(0.72) saturate(0.85); }
html[data-theme="dusk"] h1 em { color: var(--gold); background: linear-gradient(transparent 74%, rgba(242, 176, 74, 0.3) 74%, rgba(242, 176, 74, 0.3) 94%, transparent 94%); }
html[data-theme="dusk"] .btn--primary { background: #C05327; color: #FFF3E8; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
html[data-theme="dusk"] .btn--primary:hover { background: #D2601F; color: #FFF3E8; }
html[data-theme="dusk"] .btn--light { background: #322419; color: var(--ink); }
html[data-theme="dusk"] .btn--light:hover { color: var(--gold-soft); }
html[data-theme="dusk"] .form-field input, html[data-theme="dusk"] .form-field select, html[data-theme="dusk"] .form-field textarea { background: #322419; color: var(--ink); }
html[data-theme="dusk"] .mobile-cta { background: rgba(24, 16, 12, 0.96); }
html[data-theme="dusk"] .cta-band { background: linear-gradient(130deg, #B0522A 0%, #D97A2E 60%, #E8A62E 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
html[data-theme="dusk"] .cta-band h2, html[data-theme="dusk"] .cta-band p { color: #FFF6E6; }
html[data-theme="dusk"] .cta-band .btn--light { background: #FFF8EC; color: #A34621; }
html[data-theme="dusk"] .cta-band .btn--primary { background: #241A15; color: #F4EADB; }
html[data-theme="dusk"] .cta-band__sun { opacity: 0.6; }
html[data-theme="dusk"] .cta-band__sun circle { fill: #FFF3DC; }
html[data-theme="dusk"] .site-footer { background: #120C08; }
html[data-theme="dusk"] .ambient__hold { opacity: 0.5; }
html[data-theme="dusk"] ::selection { background: #5A4023; color: var(--ink); }


/* hub / editor / logos: no call-to-action bar there, so the bar sits right at the bottom */
/* the website itself: everything anchors in the bottom-left corner */
/* On the website the same bar is always there, just left-anchored */
/* keep the version swatch gradients on hover in dusk (no abrupt flip) */

/* V3 night sunrise: the sun casts a big soft glow that gently breathes */
html[data-theme="dusk"] .scene__glow2 { opacity: 0.85; animation: night-glow 7s ease-in-out infinite alternate; }
@keyframes night-glow { from { opacity: 0.5; } to { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="dusk"] .scene__glow2 { animation: none; } }

/* iPad-landscape band: keep the desktop nav on one line */
@media (min-width: 921px) and (max-width: 1120px) {
  .site-nav { gap: 0; }
  .site-nav__link { padding: 8px 9px; font-size: 0.875rem; }
  .site-nav .btn { margin-left: 6px; padding: 10px 16px; font-size: 0.875rem; }
  .brand__name { font-size: 1.05rem; }
  .brand__tag { font-size: 0.62rem; }
}



/* --- 1. Ambient shapes never fight text on phones: blurred, soft, behind ---
   Filled sun shapes (set in main.js) at a visibility that reads on the light
   V1/V2 backgrounds without ever competing with the words. */
@media (max-width: 860px) {
  .ambient__hold { width: clamp(200px, 52vw, 300px); opacity: 0.58; filter: blur(1.5px); }
  .ambient__hold--right { right: -20%; top: 4%; }
  .ambient__hold--left { left: -22%; top: 10%; }
}
html[data-theme="dusk"] .ambient__hold { opacity: 0.42; }
@media (max-width: 860px) { html[data-theme="dusk"] .ambient__hold { opacity: 0.45; } }

/* --- 2. Phone motion: cards, features and headings rise in as you scroll --- */
@media (max-width: 860px) {
  .js-anim .reveal.pre-reveal { opacity: 0.001; transform: translateY(32px) scale(0.98); }
  .js-anim .reveal.did-reveal {
    opacity: 1; transform: none;
    transition: opacity 0.68s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.68s cubic-bezier(0.22, 0.7, 0.25, 1);
  }
  /* buttons feel physical when tapped */
  .btn:active { transform: scale(0.97); }
  .card:active, .team-card:active { transform: scale(0.995); }
  /* the hero scene breathes in on arrival */
  .hero-split__arch { animation: arch-in 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) both; }
  @keyframes arch-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
  .hero-split__copy > * { animation: copy-in 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) both; }
  .hero-split__copy > *:nth-child(1) { animation-delay: 0.04s; }
  .hero-split__copy > *:nth-child(2) { animation-delay: 0.12s; }
  .hero-split__copy > *:nth-child(3) { animation-delay: 0.2s; }
  .hero-split__copy > *:nth-child(4) { animation-delay: 0.28s; }
  .hero-split__copy > *:nth-child(5) { animation-delay: 0.36s; }
  @keyframes copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-split__arch, .hero-split__copy > * { animation: none !important; }
}

/* --- 3. Footer: compact, warm, tappable on phones --- */
@media (max-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1fr; gap: 0;
    padding: 2.5rem 0 1.25rem; text-align: left;
  }
  .site-footer__grid > *:first-child { text-align: center; margin-bottom: 1.75rem; }
  .site-footer__grid > *:first-child .brand { justify-content: center; }
  .site-footer__grid > *:first-child p { max-width: 34ch; margin-left: auto; margin-right: auto; }
  /* link columns collapse into tidy tappable accordions */
  .site-footer__grid > *:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.09); padding: 1.1rem 0 1.2rem;
  }
  .site-footer h4 { margin-bottom: 0.7em; font-size: 1rem; letter-spacing: 0.02em; }
  .site-footer ul { grid-template-columns: 1fr 1fr; display: grid; gap: 2px 14px; }
  .site-footer ul a { display: block; padding: 9px 0; font-size: 0.95rem; }
  .site-footer p { font-size: 0.95rem; line-height: 1.6; }
  .site-footer__bottom { flex-direction: column; gap: 10px; text-align: center; padding-bottom: 1.5rem; }
}


@media (max-width: 700px) {
  /* on the website the bar must clear the Call us / Get in touch bar */
}

/* Footer accordions — JS creates them on phones; these styles are width-independent
   so a rotation to landscape can never leave unstyled native buttons behind. */
.foot-acc h4 { margin: 0; }
.foot-acc__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: inherit; color: #fff; background: none; border: 0;
  padding: 15px 0; cursor: pointer; text-align: left;
}
.foot-acc__caret {
  width: 9px; height: 9px; border-right: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; flex: none;
}
.foot-acc.is-open .foot-acc__caret { transform: rotate(-135deg) translate(-3px, -3px); }
/* The collapse itself only applies on phones, so any wider width always shows
   the full list even if the teardown below never runs. */
@media (max-width: 700px) {
  .foot-acc ul {
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.3s cubic-bezier(0.2,0.7,0.3,1), opacity 0.22s ease, visibility 0s linear 0.3s;
  }
  .foot-acc.is-open ul {
    max-height: 340px; opacity: 1; padding-bottom: 10px; visibility: visible;
    transition-delay: 0s, 0s, 0s;
  }
}
@media (min-width: 701px) {
  .foot-acc__caret { display: none; }
  .foot-acc__btn { padding: 0 0 0.9em; cursor: default; }
}
@media (max-width: 700px) {
  .site-footer__grid > *:not(:first-child) { padding: 0; }
  .site-footer__grid > *:last-child { padding: 1.1rem 0 0.4rem; }
}

/* Poster cards: keep the download links on a common baseline */
.poster { display: flex; flex-direction: column; }
.poster .p-body { display: flex; flex-direction: column; flex: 1; }
.poster .p-links { margin-top: auto; }