/* =========================================================================
   Mavshack — corporate static site
   Design language modelled on shapp.se (soft rounded cards, pill buttons,
   airy light sections) — locked to the Mavshack graphic profile:
   red #ce0e2d (PMS 186 C), black, white, Proxima Nova (fallback Arial).
   ========================================================================= */

/* Proxima Nova — brand typeface (graphic manual §3.0). Weight ranges map the
   design's declarations onto the real faces so the browser never faux-synthesises
   a heavier weight (display headings 800–900 → Extrabold, per manual). Italics
   are not supplied → browsers synthesise (faux) italic for the few italic
   accents. Fallback is Arial, per the manual.
   Only the three cuts the design actually uses are declared. Thin and Light also
   ship in assets/fonts/ as brand assets, but nothing sets those weights, so
   declaring them would cost two font downloads for nothing. */
@font-face { font-family:'Proxima Nova'; font-style:normal; font-weight:100 500; font-display:swap; src:url('/assets/fonts/ProximaNova-Reg.woff2')       format('woff2'); }
@font-face { font-family:'Proxima Nova'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/assets/fonts/ProximaNova-Bold.woff2')      format('woff2'); }
@font-face { font-family:'Proxima Nova'; font-style:normal; font-weight:800 900; font-display:swap; src:url('/assets/fonts/ProximaNova-Extrabold.woff2') format('woff2'); }

:root {
  /* Brand */
  --red:        #ce0e2d;
  --red-deep:   #a40b24;
  --red-light:  #f43554;
  --red-tint:   #fbf0f1;
  --black:      #000000;
  --ink:        #1c1b1b;
  --white:      #ffffff;
  --paper:      #fafaf8;
  --stone-100:  #f3f2ee;
  --stone-200:  #e8e6e2;
  --stone-300:  #cfccc2;
  --stone-500:  #767470;
  --stone-700:  #4a4844;

  /* Type */
  --display: 'Proxima Nova', Arial, system-ui, sans-serif;
  --body:    'Proxima Nova', Arial, system-ui, sans-serif;
  --mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — calm, Shapp-like proportions */
  --t-eyebrow:  clamp(.72rem, .68rem + .15vw, .82rem);
  --t-body:     clamp(.95rem, .9rem + .25vw, 1.05rem);
  --t-lead:     clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --t-h3:       clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-h2:       clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --t-h1:       clamp(2.3rem, 1.6rem + 3vw, 4rem);
  --t-stat:     clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);

  /* Space scale (8pt) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --max:        1200px;
  --max-narrow: 840px;
  --header-h:   72px;

  /* Soft rounded corners + layered shadows (Shapp look) */
  --radius:     6px;
  --radius-lg:  8px;
  --radius-xl:  10px;
  --surface:    #f4f5f6;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 8px 30px rgba(0,0,0,.07);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.1);
  --shadow-xl:  0 30px 80px rgba(0,0,0,.12);

  --ease:       cubic-bezier(.4, .2, .2, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a  { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.08; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--stone-500); }
p  { margin: 0 0 1em; max-width: 65ch; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width: 768px)  { .container { padding: 0 var(--s-7); } }
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; }

/* ----------------------------------------------------------------- Section labels */
.label {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 var(--s-3);
}
.section-dark .label, .section-red .label { color: var(--white); opacity: .9; }

/* ----------------------------------------------------------------- Buttons */
.btn {
  --bg: var(--ink); --fg: var(--white); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--bg); color: var(--fg);
  padding: .85rem 1.9rem;
  border: 1.5px solid var(--bd);
  font-family: var(--display);
  font-weight: 700; font-size: .92rem;
  letter-spacing: .01em;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  min-height: 48px;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-primary { --bg: var(--red); --fg: var(--white); --bd: var(--red); }
.btn-primary:hover { --bg: var(--red-deep); --bd: var(--red-deep); }
.btn-dark    { --bg: var(--black); --fg: var(--white); --bd: var(--black); }
.btn-dark:hover { --bg: var(--red); --bd: var(--red); }
.btn-light   { --bg: var(--white); --fg: var(--ink); --bd: var(--white); }
.btn-ghost   { --bg: transparent; --fg: var(--white); --bd: rgba(255,255,255,.45); }
.btn-ghost:hover { --bd: var(--white); }
.btn-outline { --bg: transparent; --fg: var(--ink); --bd: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn-outline:hover { --bg: var(--ink); --fg: var(--white); --bd: var(--ink); }

/* ----------------------------------------------------------------- Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.site-header[data-theme="dark"] {
  background: rgba(10,10,10,.82); border-bottom-color: rgba(255,255,255,.08);
  color: var(--white);
}
.site-header[data-theme="dark"] .nav a { color: var(--white); }
.site-header > .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }

.brand { display: inline-flex; align-items: center; }
.brand img.logo { display: block; height: 32px; width: auto; }
.site-header[data-theme="dark"] .brand img.logo { filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  color: var(--ink);
  position: relative; padding: var(--s-2) 0;
}
.nav a:not(.cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.nav a:not(.cta):hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.cta {
  background: var(--red); color: var(--white) !important;
  padding: .65rem 1.3rem;
  border-radius: var(--radius);
  font-weight: 700; font-size: .88rem;
  transition: background .2s var(--ease), transform .25s var(--ease-out);
}
.nav a.cta:hover { background: var(--red-deep); }

.nav-toggle {
  display: none; background: transparent; border: 0; padding: var(--s-3);
  width: 44px; height: 44px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .25s var(--ease), opacity .2s var(--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: 880px) {
  .nav-toggle { display: block; color: var(--ink); }
  .site-header[data-theme="dark"] .nav-toggle { color: var(--white); }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: var(--s-3) var(--s-5) var(--s-5);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease-out), opacity .2s var(--ease);
  }
  .site-header[data-theme="dark"] .nav { background: var(--black); border-color: rgba(255,255,255,.08); }
  .nav a { padding: var(--s-4) 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 1rem; }
  .site-header[data-theme="dark"] .nav a { border-color: rgba(255,255,255,.08); }
  .nav a.cta { margin-top: var(--s-4); text-align: center; border-bottom: 0; }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* Push content below fixed header */
main { padding-top: var(--header-h); }

/* =====================================================================================
   HERO — light, split content/media, rounded image card (Shapp layout)
   ===================================================================================== */
.hero {
  background: var(--paper);
  color: var(--ink);
}
.hero > .container { padding-top: clamp(var(--s-7), 6vw, var(--s-9)); padding-bottom: clamp(var(--s-7), 6vw, var(--s-9)); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); }
}
.hero-title {
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: var(--s-4) 0 var(--s-5);
}
.hero-title em, .hero-title .accent { font-style: normal; color: var(--stone-500); }
.hero-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  max-width: 48ch;
  color: var(--stone-700);
  margin: 0 0 var(--s-6);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* image card */
.hero-media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }




/* =====================================================================================
   Sections / generic
   ===================================================================================== */
.section {
  padding-block: clamp(var(--s-8), 7vw, var(--s-9));
}
.section-paper { background: var(--white); color: var(--ink); }
.section-muted { background: var(--surface); color: var(--ink); }
.section-dark  { background: var(--black);  color: var(--white); }
.section-red   { background: var(--red);    color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-red  h1, .section-red  h2, .section-red  h3 { color: var(--white); }
.section-dark h2 em, .section-red h2 em { color: var(--white); }

.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 760px; }
.section-head .lead { font-size: var(--t-lead); color: var(--stone-700); margin: 0; }
/* Inline links inside running text must not rely on colour alone (WCAG 1.4.1),
   so they carry an underline; standalone UI links (nav, cards, footer lists)
   are distinguished by position and are left clean. */
.prose-link,
.section-head .lead a,
.about-prose p a,
.faq-item p a,
.footer-grid p a,
.testimonial-band p a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.prose-link:hover,
.section-head .lead a:hover,
.about-prose p a:hover,
.faq-item p a:hover,
.footer-grid p a:hover,
.testimonial-band p a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

/* Prose (about) */
.about-prose p { color: var(--stone-700); }
.about-prose .about-lead { font-size: var(--t-lead); color: var(--ink); }

/* =====================================================================================
   Service cards — Shapp.se offering
   ===================================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 680px)  { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.service-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.service-card:hover { border-color: var(--stone-300); box-shadow: var(--shadow-md); }
.svc-ico {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--red);
  margin-bottom: var(--s-2);
}
.svc-ico svg { width: 26px; height: 26px; }
.service-card h3 { margin: 0; }
.service-card p  { margin: 0; color: var(--stone-700); font-size: .95rem; flex-grow: 1; }

.num {
  font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .1em;
  color: var(--stone-500); text-transform: uppercase; margin: 0;
}

.more-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  align-self: flex-start;
  color: var(--red);
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  padding: .35rem 0; min-height: 44px;
  transition: color .2s var(--ease);
}
.more-link::after { content: '\2192'; transition: transform .2s var(--ease); }
.more-link:hover { color: var(--red-deep); text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover::after { transform: translateX(3px); }
.more-link:hover::after { transform: translateX(3px); }

/* =====================================================================================
   Focus cards — brands (Shapp focus-grid)
   ===================================================================================== */
.focus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 760px) { .focus-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: var(--s-6); } }
.focus-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.focus-card:hover { border-color: var(--stone-300); box-shadow: var(--shadow-md); }
.focus-card img {
  border-radius: var(--radius);
  aspect-ratio: 16/9; object-fit: cover; width: 100%;
  margin-bottom: var(--s-2);
}
.focus-card h3 { margin: 0; }
.focus-card p  { margin: 0; color: var(--stone-700); font-size: .95rem; flex-grow: 1; }
.focus-card .num, .service-card .num { flex-grow: 0; }
.focus-card picture { display: block; }

/* =====================================================================================
   Metrics — stat tiles
   ===================================================================================== */
.stat-value {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-stat); line-height: 1;
  letter-spacing: -.03em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: .88rem; color: var(--stone-500);
}

/* =====================================================================================
   Proof strip (directly under hero)
   ===================================================================================== */
.proof-strip { background: var(--white); border-block: 1px solid var(--stone-200); }
.proof-list {
  list-style: none; margin: 0; padding: var(--s-6) 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4);
}
@media (min-width: 960px) {
  .proof-list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .proof-list li + li { border-left: 1px solid var(--stone-200); }
}
.proof-list li { display: grid; gap: var(--s-1); align-content: start; padding: 0 var(--s-5); }
.proof-list .stat-value { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); color: var(--ink); font-weight: 700; }
.proof-list .stat-label { font-size: .85rem; line-height: 1.4; }

/* =====================================================================================
   Testimonial band — black rounded (career quote)
   ===================================================================================== */
.testimonial-band {
  background: var(--black); color: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(var(--s-7), 6vw, var(--s-9));
  display: grid; gap: var(--s-5);
  position: relative; overflow: hidden;
}
.testimonial-band .label { color: var(--white); opacity: .85; }
.testimonial-band blockquote {
  margin: 0;
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.25; letter-spacing: -.015em;
  max-width: 30ch;
}
.testimonial-band p { color: rgba(255,255,255,.78); max-width: 58ch; margin: 0; }
.testimonial-band .btn { justify-self: start; }

/* =====================================================================================
   FAQ — details/summary accordion
   ===================================================================================== */
.faq-list {
  display: grid; gap: var(--s-3);
  max-width: var(--max-narrow);
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  transition: border-color .2s var(--ease);
}
.faq-item:hover { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--red); flex-shrink: 0;
  transition: transform .25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { margin-bottom: var(--s-3); }
.faq-item p { margin: 0; color: var(--stone-700); line-height: 1.7; }

/* =====================================================================================
   Contact form
   ===================================================================================== */
.contact-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); }
}
.contact-info h2 { margin-bottom: var(--s-5); }
.contact-info .blocks { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 560px) {
  .contact-info .blocks { grid-template-columns: 1fr 1fr; }
}
.contact-info h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--red); margin-bottom: var(--s-3); font-weight: 700;
}
.contact-info p { color: var(--stone-700); margin: 0 0 var(--s-3); font-size: .95rem; line-height: 1.6; }
.contact-info a { color: var(--ink); border-bottom: 1px solid var(--stone-300); }
.contact-info a:hover { color: var(--red); border-color: var(--red); }

.form {
  background: var(--white);
  padding: var(--s-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--stone-200);
}
.form .field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.form label {
  font-size: .88rem; font-weight: 600;
  color: var(--ink);
}
.form input, .form textarea {
  font: inherit;
  width: 100%;
  padding: .8rem 1rem;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 44px;
}
.form textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form input:focus, .form textarea:focus {
  outline: 0; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(206,14,45,.12);
}
.form .form-status { margin-top: var(--s-4); font-size: .88rem; min-height: 1.2em; }
.form .form-status.ok  { color: #1a7f37; }
.form .form-status.err { color: var(--red); }
.form button[type="submit"] { margin-top: var(--s-3); }
.form .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================================
   Footer — red CTA band + black footer (Shapp structure, Mavshack palette)
   ===================================================================================== */
.cta-band {
  background: var(--surface); color: var(--ink);
  border-top: 1px solid var(--stone-200);
  text-align: center;
  padding: clamp(var(--s-7), 6vw, var(--s-9)) 0;
}
.cta-band h2 { color: var(--ink); margin-bottom: var(--s-3); }
.cta-band p { margin: 0 auto var(--s-5); color: var(--stone-700); max-width: 52ch; }
.cta-band .btn-light { --bg: var(--red); --fg: var(--white); --bd: var(--red); }
.cta-band .btn-light:hover { --bg: var(--red-deep); --bd: var(--red-deep); }

.site-footer {
  background: var(--black); color: var(--white);
  position: relative; overflow: hidden;
}
.footer-top { padding-block: clamp(var(--s-7), 6vw, var(--s-9)) var(--s-7); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-8); }
}
.footer-grid h2, .footer-grid h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.6); margin: 0 0 var(--s-4); font-weight: 700;
}
.footer-grid p { color: rgba(255,255,255,.7); font-size: .92rem; line-height: 1.7; }
.footer-grid a { color: rgba(255,255,255,.85); }
.footer-grid a:hover { color: var(--white); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--s-3); font-size: .95rem; }

.footer-bottom {
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  color: rgba(255,255,255,.55); font-size: .82rem;
}

/* =====================================================================================
   Helpers / accessibility
   ===================================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.section-dark :focus-visible, .section-red :focus-visible, .site-footer :focus-visible {
  outline-color: var(--white);
}

/* Page-load reveal (CSS-only, runs once).
   Kept short and low-delay on purpose: anything faded in from opacity 0 cannot
   count as the Largest Contentful Paint until it is actually painted, so a long
   entrance here shows up directly as a worse LCP. The hero image is deliberately
   not part of this cascade. */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal .45s var(--ease-out) forwards; }
.reveal[data-d="1"] { animation-delay: .04s; }
.reveal[data-d="2"] { animation-delay: .08s; }
.reveal[data-d="3"] { animation-delay: .12s; }
.reveal[data-d="4"] { animation-delay: .16s; }
.reveal[data-d="5"] { animation-delay: .20s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* In-view reveal — progressive enhancement.
   Without JS (no .js on <html>) content is always visible.
   With JS, items start hidden and animate in when scrolled into view
   (IntersectionObserver adds .is-visible). An inline <head> script adds
   .js before first paint to avoid a flash of unhidden content. */
.in-view-hidden { opacity: 1; transform: none; }
.js .in-view-hidden {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.js .in-view-hidden.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .in-view-hidden,
  .js .in-view-hidden { opacity: 1 !important; transform: none !important; }
  .hero-title .line > span { transform: none !important; }
}

/* Scroll progress bar (red), driven by JS via --scroll (0–1) */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: var(--red);
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* Kinetic hero title — per-line clip-up reveal */
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: block; }
.js .hero-title .line > span { transform: translateY(110%); animation: lineUp .55s var(--ease-out) both; }
.hero-title .line:nth-child(1) > span { animation-delay: .05s; }
.hero-title .line:nth-child(2) > span { animation-delay: .13s; }
.hero-title .line:nth-child(3) > span { animation-delay: .21s; }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* Parallax targets (JS sets --py in px) */

/* ----------------------------------------------------------------- Legal pages + form note */
.legal-prose h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p, .legal-prose li { color: var(--stone-700); }
.legal-prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal-prose li { margin-bottom: .35em; }
.legal-prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.form-note { font-size: .85rem; color: var(--stone-700); margin: var(--s-3) 0 0; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }