/* =========================================================================
   360 Woman
   1. Fonts
   2. Tokens
   3. Reset
   4. Typography
   5. Layout
   6. Components (base only)
   7. Motion
   ========================================================================= */

/* ---------- 1. Fonts ---------------------------------------------------- */
/* Fraunces and Inter, SIL Open Font License. Latin subset, self-hosted. */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  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';
  src: url('/assets/fonts/fraunces-italic-latin-var.woff2') format('woff2');
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
  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: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- 2. Tokens --------------------------------------------------- */

:root {
  /* Colour. Nothing outside this set. */
  --ink:        #16110F;
  --ink-soft:   #55494A;
  --red:        #ED1C24;
  --red-deep:   #B8151C;
  --blush:      #F79AAA;
  --blush-pale: #FDECEF;
  --shell:      #FFFBF9;
  --white:      #FFFFFF;
  --line:       #E8DBDA;

  /* Type families */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;

  /* Type scale */
  --size-h1: clamp(3rem, 8vw, 6rem);
  --size-h2: clamp(2.25rem, 4.5vw, 3.5rem);
  --size-h3: 1.375rem;
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;
  --size-eyebrow: 0.8125rem;

  --lh-h1: 1.06;
  --lh-h2: 1.12;
  --lh-h3: 1.25;
  --lh-body: 1.65;
  --lh-small: 1.5;

  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-eyebrow: 0.08em;

  /* Spacing. 8px scale, nothing off it. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 128px;
  --space-8: 160px;   /* extends the named scale, still a multiple of 8 */

  /* Layout */
  --container: 1180px;
  --gutter: var(--space-3);        /* 24px mobile */
  --section-y: var(--space-5);     /* 64px mobile */
  --measure: 62ch;
  --measure-hero: 34ch;

  /* Radius. Two values, plus the pill reserved for the primary CTA. */
  --radius-control: 4px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Motion. No scroll reveal: the page renders immediately. */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --header-h: 104px;   /* two rows on mobile */
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-4);      /* 40px desktop */
    --section-y: var(--space-6);   /* 96px desktop */
    --header-h: 88px;
  }
}

/* ---------- 3. Reset ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--shell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }

/* ---------- 4. Typography ----------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
}

p { max-width: var(--measure); text-wrap: pretty; }

.italic {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
}
h2.italic { letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 var(--space-2);
}

.eyebrow--light { color: var(--white); }

.small { font-size: var(--size-small); line-height: var(--lh-small); }
.text-soft { color: var(--ink-soft); }

a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* ---------- 5. Layout --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* Alternating grounds. Page default is --shell. */
.section--white { background-color: var(--white); }
.section--blush-pale { background-color: var(--blush-pale); }

.panel {
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.panel--blush { background-color: var(--blush); color: var(--ink); }

@media (min-width: 768px) {
  .panel { padding: var(--space-5); }
}

/* ---------- 6. Components (base only) ----------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  background-color: var(--ink);
  color: var(--white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  text-decoration: none;
  font-size: var(--size-small);
  font-weight: 600;
}
.skip-link:focus-visible { transform: translateY(0); color: var(--white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Header.
   Mobile is two rows: logo and CTA, then the nav beneath. At 360px a single row
   needs about 420px, so it cannot fit. No JS menu, nothing hidden, no scroll. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.site-header[data-scrolled] {
  background-color: var(--shell);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-block: var(--space-1);
}
/* Over the hero the wordmark's red script would sit on a dark scrim, so it
   gets a light plate until the header picks up its own background. */
.site-header__logo { display: block; line-height: 0; border-radius: var(--radius-control); }
.site-header:not([data-scrolled]) .site-header__logo {
  background-color: var(--shell);
  padding: var(--space-1) var(--space-2);
}
.site-header__logo img { width: 94px; height: 40px; }

.site-nav { flex: 1 0 100%; }          /* own row on mobile */
.site-nav__list {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
.site-nav a {
  display: inline-block;
  padding-block: var(--space-1);   /* 36px tall, clears the 24px target minimum */
  color: var(--ink);
  text-decoration: none;
  font-size: var(--size-small);
  font-weight: 600;
}
.site-nav a:hover { color: var(--red-deep); }

/* Transparent over the hero photograph, so the links are white there.
   5.79:1 against the lightest pixel through the 62% scrim.
   A <noscript> block in the head forces the light state when the scroll
   script cannot run. */
.site-header:not([data-scrolled]) .site-nav a { color: var(--white); }
.site-header:not([data-scrolled]) .site-nav a:hover { color: var(--blush); }

.site-header__cta.btn { padding: var(--space-1) var(--space-3); }

@media (min-width: 768px) {
  .site-header__inner { flex-wrap: nowrap; gap: var(--space-4); padding-block: var(--space-2); }
  .site-header__cta.btn { padding: var(--space-2) var(--space-3); }
  .site-nav { flex: 1 1 auto; }        /* back into the single row, centred */
  .site-header__cta { order: 3; }
}

/* Buttons. 4px radius, except the primary CTA which is the one pill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
              border-color 160ms var(--ease);
}
.btn--primary {
  border-radius: var(--radius-pill);
  background-color: var(--red-deep);
  color: var(--white);          /* 6.64:1, passes AA body */
}
.btn--primary:hover {
  background-color: var(--ink);
  color: var(--white);          /* 18.73:1 */
}

/* Larger CTA for hero and section ends. */
.btn--lg { padding: var(--space-2) var(--space-4); font-size: var(--size-body); }

/* Dark CTA, for use on the blush panel. white on ink 18.73:1 */
.btn--dark { background-color: var(--ink); color: var(--white); }
.btn--dark:hover { background-color: var(--red-deep); color: var(--white); }
.btn--dark { border-radius: var(--radius-pill); }

/* Ghost, over photography only. White text and hairline on the scrimmed
   photo: 5.79:1 against the lightest pixel in the hero image. */
.btn--ghost {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
  border-radius: var(--radius-pill);
}
.btn--ghost:hover { background-color: var(--white); color: var(--ink); }

.btn--secondary {
  background-color: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.site-footer {
  padding-block: var(--space-5);
  background-color: var(--white);
  border-top: 1px solid var(--line);
}
.site-footer__legal { color: var(--ink-soft); font-size: var(--size-small); }


.link-plain {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--red-deep);          /* 6.46:1 on shell */
  text-underline-offset: 4px;
}
.link-plain:hover { color: var(--ink); }

.contact-form { display: block; }

/* ---------- Sections ------------------------------------------------------ */

.container--narrow { max-width: 860px; }

.section__intro {
  max-width: 54ch;
  margin-top: var(--space-2);
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink);
}
.section > .container > h2 + .section__intro { margin-bottom: var(--space-2); }

/* ---- Hero. Full-bleed photograph, solid --ink scrim at 62%.
        Contrast was measured against the real extremes of this image rather
        than an average: white over the LIGHTEST pixel is 5.79:1, over the
        darkest 19.66:1. The brief's floor is 55%; 62% buys margin. ---- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 88svh;
  min-height: 88vh;
  /* Pull up under the sticky header so the photograph reaches the top edge. */
  margin-top: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-5);
  background-color: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(22, 17, 15, 0.62);   /* --ink at 62% */
}
.hero__content { position: relative; width: 100%; }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero__sub {
  max-width: 30ch;
  margin-top: var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.4;
  color: var(--white);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }

@media (min-width: 900px) {
  .hero { padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6); }
  .hero__sub { max-width: 34ch; }
}

/* ---- The dark band. Text on a solid ink panel, photo beside it, never
        underneath, so contrast is exact rather than approximate.
        white on ink 18.73:1, blush on ink 9.06:1. ---- */
.band-dark { display: grid; background-color: var(--ink); }
.band-dark__text {
  padding: var(--space-5) var(--gutter);
  align-self: center;
  max-width: 34rem;
  margin-inline: auto;
}
.band-dark__lead { color: var(--white); font-size: clamp(2.25rem, 4.2vw, 4rem); }
.band-dark__body {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--blush);
}
.band-dark__media { margin: 0; }
.band-dark__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

@media (min-width: 900px) {
  .band-dark { grid-template-columns: 1fr 0.82fr; }
  .band-dark__text { padding: var(--space-6) var(--space-5); margin: 0 0 0 auto; }
  .band-dark__media img { aspect-ratio: auto; min-height: 100%; }
}

/* ---- Soft same-family washes. Only ever one hue family, vertical, no hard
        stops. Text on any point of these is --ink: the darkest endpoint is
        --blush at 9.06:1, the lightest --shell at 18.21:1. ---- */
.wash-down { background-image: linear-gradient(180deg, var(--shell) 0%, var(--blush-pale) 100%); }
.wash-up   { background-image: linear-gradient(180deg, var(--blush-pale) 0%, var(--shell) 100%); }

/* ---- Curved dividers. The SVG is filled with the colour of the ground that
        follows, so the curve reads as that section rising into this one. ---- */
.curve { display: block; line-height: 0; }
.curve svg { display: block; width: 100%; height: clamp(44px, 6vw, 96px); }
.curve--shell { color: var(--shell); background-color: var(--ink); }
.curve--blush-pale { color: var(--blush-pale); background-color: var(--blush); }

/* ---- Cut-outs. She stands directly on the ground: no frame, no card, no
        radius, no shadow. Sections carrying one are raised so the figure can
        cross the boundary into the next section. ---- */
.cut-section { position: relative; z-index: 2; }
.cut { margin: 0; align-self: end; }
.cut img { display: block; width: 100%; height: auto; }
.cut--bleed-bottom img { margin-bottom: calc(var(--space-6) * -1); }
.cut--bleed-top img { margin-top: calc(var(--space-5) * -1); }

.cut-grid { display: grid; gap: var(--space-4); align-items: end; }
@media (min-width: 900px) {
  .cut-grid { grid-template-columns: 0.55fr 1fr; gap: var(--space-5); }
  .cut-grid--left .cut { grid-column: 1; }
  .cut-grid--left > div { grid-column: 2; align-self: center; }
}

/* Heading row with a cut-out beside it, used on Is this you?
   The figure is capped by height, not width: at this aspect ratio a width-based
   size made an 800px tall row with the heading stranded at the bottom. */
.cut-head { display: grid; gap: var(--space-3); align-items: end; }
.cut-head .cut { display: none; }
@media (min-width: 900px) {
  .cut-head { grid-template-columns: 1fr auto; gap: var(--space-5); }
  .cut-head .cut { display: block; }
  .cut-head .cut img {
    width: auto;
    max-height: clamp(240px, 26vw, 360px);
    margin-top: calc(var(--space-5) * -1);
  }
}

/* ---- Steps ---- */
.steps { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.step__num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--red-deep);
  min-width: 1.6ch;
}
.step h3 { margin-bottom: var(--space-1); }
.step p { color: var(--ink); max-width: 46ch; }

/* ---- Stat band. Full-bleed blush, ink dividers at 9.06:1. ---- */
.band-blush { background-color: var(--blush); color: var(--ink); padding-block: var(--space-5) var(--space-4); }
.band-blush__title { max-width: 20ch; }
.stats {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--ink);
}
.stat + .stat { border-left: 1px solid var(--ink); padding-left: var(--space-3); }
.stat__num {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.stat__label {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);               /* never ink-soft on blush: 4.17:1 fails */
  max-width: 16ch;
}
.band-blush__note { margin-top: var(--space-4); font-size: 1.125rem; color: var(--ink); }
@media (min-width: 768px) {
  .band-blush { padding-block: var(--space-6) var(--space-5); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(n+2) { border-left: 1px solid var(--ink); padding-left: var(--space-3); }
}

/* ---- Cards ---- */
/* align-items: start so each card is only as tall as its own copy. Stretching
   them to the tallest in the row left dead space under the short ones. */
.cards { display: grid; gap: var(--space-3); margin-top: var(--space-5); align-items: start; }
.card {
  background-color: var(--white);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-3);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink); }
.cards__cta { margin-top: var(--space-4); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }

/* ---- Pillars, each with a portrait ---- */
.pillars { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.pillar img { width: 100%; border-radius: var(--radius-card); aspect-ratio: 3 / 4; object-fit: cover; }
.pillar__title { margin-top: var(--space-3); margin-bottom: var(--space-2); }
.pillar__title::after {
  content: ""; display: block; width: 32px; height: 2px;
  margin-top: var(--space-2); background-color: var(--red);
}
.pillar p { color: var(--ink); }
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* ---- About ---- */
.about__text h2 { margin-bottom: var(--space-3); }
.about__text p + p { margin-top: var(--space-3); }
.about__lead { font-size: 1.375rem; line-height: 1.5; }
.about__text p:not(.about__lead) { color: var(--ink); }
/* ---- Testimonials ---- */
.quotes__grid { display: grid; gap: var(--space-4); }
.quotes__media { margin: 0; }
.quotes__media img { width: 100%; height: 100%; border-radius: var(--radius-card); aspect-ratio: 1 / 1; object-fit: cover; }
.quotes { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.quote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--blush);
}
.quote p { font-size: 1.125rem; line-height: 1.55; }
.quote figcaption {
  margin-top: var(--space-1);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--red-deep);
}
@media (min-width: 900px) {
  .quotes__grid { grid-template-columns: 1fr 0.62fr; gap: var(--space-5); align-items: stretch; }
  /* Absolute fill rather than height:100%, so the portrait always matches the
     column height regardless of how long the quotes run. */
  .quotes__media { position: relative; }
  .quotes__media picture { position: absolute; inset: 0; display: block; }
  .quotes__media img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
}

/* ---- FAQ. Two columns on wide screens so the right half is not dead. ---- */
.faq__grid { display: grid; gap: var(--space-4); }
.faq__head .section__intro { max-width: 24ch; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 0.55fr 1fr; gap: var(--space-6); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}

.faq { margin-top: 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.3; font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; float: right; margin-left: var(--space-2);
  color: var(--red-deep); font-family: var(--font-body); font-weight: 600;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__body { padding-bottom: var(--space-3); }
.faq__body p { color: var(--ink); max-width: 62ch; }
.faq__body p + p { margin-top: var(--space-2); }

/* ---- Final CTA. Blush panel, photo inside it. ---- */
.final-cta {
  display: grid;
  gap: var(--space-4);
  background-color: var(--blush);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.final-cta__text { padding: var(--space-5) var(--space-4); align-self: center; }
.final-cta__text h2 { max-width: 14ch; }
.final-cta p { margin-top: var(--space-3); max-width: 40ch; font-size: 1.25rem; color: var(--ink); }
.final-cta .btn { margin-top: var(--space-4); }
.final-cta { overflow: visible; }        /* the figure crosses the top edge */
.final-cta__cut { margin: 0; align-self: end; padding-inline: var(--space-4); }
/* Capped by height, not width. This figure is 0.33 aspect, so a width-based
   size inflated the whole panel past 1200px tall. */
.final-cta__cut img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(300px, 44vw, 520px);
  margin-top: calc(var(--space-5) * -1);
}
@media (min-width: 800px) {
  .final-cta { grid-template-columns: auto 1fr; gap: var(--space-5); align-items: end; }
  .final-cta__text { padding: var(--space-6) var(--space-5) var(--space-6) 0; align-self: center; }
  .final-cta__cut { padding-inline: 0; padding-left: var(--space-5); }
}

/* ---- Contact ---- */
.contact { display: grid; gap: var(--space-4); }
.contact__intro p { margin-top: var(--space-2); font-size: 1.25rem; color: var(--ink); }
@media (min-width: 900px) { .contact { grid-template-columns: 0.8fr 1fr; gap: var(--space-5); align-items: start; } }

.field { margin: 0 0 var(--space-3); max-width: none; }
.field label { display: block; font-size: var(--size-small); font-weight: 600; margin-bottom: var(--space-1); }
.field input, .field textarea {
  display: block; width: 100%; padding: var(--space-2);
  background-color: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-control);
  font-size: var(--size-body);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field__error { display: block; margin-top: var(--space-1); font-size: var(--size-small); font-weight: 600; color: var(--red-deep); }
.field [aria-invalid="true"] { border-color: var(--red-deep); border-width: 2px; }
.field-row { display: grid; gap: 0 var(--space-3); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font-weight: 600; max-width: none; }
.form-status[data-state="ok"] { background-color: var(--white); border: 1px solid var(--line); color: var(--ink); }
.form-status[data-state="error"] { background-color: var(--white); border: 2px solid var(--red-deep); color: var(--ink); }

/* ---- Footer ---- */
.site-footer__inner { display: grid; gap: var(--space-4); }
.site-footer__brand p { margin-top: var(--space-1); }
.site-footer__brand img { margin-bottom: var(--space-2); }
.site-footer__nav ul, .site-footer__legal-nav ul { display: grid; gap: var(--space-1); }
.site-footer a { color: var(--ink); text-decoration-color: var(--line); }
.site-footer a:hover { color: var(--red-deep); }
.site-footer__nav a, .site-footer__legal-nav a { font-size: var(--size-small); }
.site-footer__legal { max-width: none; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-soft); }
@media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); } }

/* ---------- 7. Motion --------------------------------------------------- */
/* No scroll-reveal animation. The only motion on the page is the header
   picking up its background on scroll, and hover transitions on controls. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}