/* ---------------------------------------------------------
   Marina — Dry Manicure & Gel Nails Studio
   Palette: white ground, deep espresso ink, one committed
   burgundy accent, dusty-rose secondary surfaces.
   Type: Onest (structural) + Fraunces, mid weight (headlines) +
   Albert Sans Light (subheadlines/secondary) + Montserrat Light
   (nav/small labels) + Beau Rivage (script, two reserved moments).
   Bodoni Moda survives only inside the coded wordmark's caps line,
   not as a headline face.
--------------------------------------------------------- */

:root {
  --cream: #ffffff;
  --cream-deep: #fcdbdb;
  --ink: #3e2723;
  --ink-soft: #5c4640;
  --near-black: #3e2723;
  --bordeaux: #800020;
  --bordeaux-strong: #5c0017;
  --bordeaux-line: rgba(128, 0, 32, 0.22);

  --font-sans: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans-light: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-script: "Beau Rivage", "Segoe Script", cursive;
  --font-utility: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Bodoni Moda", Georgia, "Times New Roman", serif;

  --container: 1240px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --side-offset: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

@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;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection {
  background: var(--bordeaux);
  color: var(--cream);
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--bordeaux-line);
  border-radius: 8px;
  border: 3px solid var(--cream);
}
* { scrollbar-color: var(--bordeaux-line) var(--cream); scrollbar-width: thin; }

a {
  color: inherit;
  text-decoration-color: var(--bordeaux-line);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; margin: 0; }

p { margin: 0; max-width: 62ch; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.btn--primary {
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}
.btn--primary:hover {
  background: var(--bordeaux-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--bordeaux-strong) 55%, transparent);
}
.btn--primary:active { transform: translateY(0); }

.btn--large { padding: 1.15rem 2.5rem; font-size: 1rem; }
.btn--small { padding: 0.6rem 1.35rem; font-size: 0.85rem; }

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 40%, transparent);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border-color: var(--cream);
}

/* ---------- Top banner ---------- */

.top-banner {
  background: var(--near-black);
  color: var(--cream);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.top-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem var(--space-2);
  text-decoration: none;
  color: inherit;
}

.top-banner__arrow {
  color: var(--bordeaux);
  transition: transform 0.25s var(--ease-out);
  font-weight: 700;
}
.top-banner__link:hover .top-banner__arrow { transform: translateX(3px); }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/* Blur lives on a pseudo-element, not .site-header itself: backdrop-filter on
   the header would create a new containing block, which breaks the mobile
   nav's position:fixed; inset:0 full-screen overlay (it would anchor to the
   header's own small box instead of the viewport). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--bordeaux-line);
  box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--ink) 40%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
}

/* Coded-text wordmark lockup — script "M" overlapping a tall Didone-serif
   "ARINA NAIL BAR", with tracked "BRUSSELS" beneath. No image file; every
   glyph is real, accessible text. Reused identically in header and footer
   (footer uses the --reversed modifier for white-on-dark). */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  color: var(--bordeaux);
}
.wordmark--reversed { color: var(--cream); }

.wordmark__lockup {
  display: inline-flex;
  align-items: baseline;
}

.wordmark__script {
  font-family: var(--font-script);
  font-size: 2.5em;
  line-height: 1;
  margin-right: -0.06em;
  position: relative;
  top: 0.14em;
}

.wordmark__caps {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wordmark__sub {
  display: block;
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: 0.42em;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  margin-top: 0.5em;
  margin-left: 0.38em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav a:not(.btn) {
  text-decoration: none;
  font-family: var(--font-utility);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.25rem;
}

.nav-book {
  font-family: var(--font-utility);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--bordeaux);
  transition: right 0.25s var(--ease-out);
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin-inline: auto;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    top: calc(var(--header-h, 3.9rem) + var(--banner-h, 2.4rem));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    background: var(--cream);
    padding: var(--space-4) var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  }
  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .site-nav a:not(.btn) { font-size: 1.4rem; }
  .nav-book { margin-top: var(--space-1); }
}

/* ---------- Reveal-on-scroll (one authored moment) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-6);
}

/* Ethereal burgundy-to-rose atmosphere behind the hero copy — abstract
   color/blur only, no literal shape. Sits behind hero__inner (z-index 0
   vs. 1) and never above the copy or photo. */
.hero__wash {
  position: absolute;
  inset: -15%;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
  background:
    radial-gradient(28% 34% at 16% 20%, var(--bordeaux) 0%, transparent 55%),
    radial-gradient(34% 40% at 75% 72%, var(--cream-deep) 0%, transparent 58%);
  filter: blur(85px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.hero__heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0;
  max-width: 16ch;
  margin-bottom: var(--space-2);
}

.hero__desc {
  font-family: var(--font-sans-light);
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 42ch;
  margin-bottom: var(--space-3);
}

.hero__media img {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

@media (min-width: 861px) {
  .hero {
    /* the photo container should sit flush under the sticky header; only
       the bottom gap (breathing room before Services) is kept */
    padding-block: 0 var(--space-6);
  }
  .hero__inner {
    /* media column deliberately narrow relative to the copy-driven row
       height, so that at this box's resulting shape object-fit:cover
       crops the sides (plain background) instead of the top/bottom
       (the raised fingertips) */
    grid-template-columns: 1.4fr 0.6fr;
    align-items: stretch;
    max-width: none;
    margin-inline: 0;
    padding-inline-start: var(--side-offset);
    padding-inline-end: 0;
  }
  .hero__copy {
    order: 1;
    align-self: center;
    /* guaranteed breathing room around the copy block; this content
       height is what drives the whole row's height now (see .hero__media) */
    padding-block: var(--space-5);
  }
  .hero__media {
    order: 2;
    position: relative;
    /* no in-flow content of its own (the img is absolutely positioned
       below), so it contributes nothing to the grid row's auto-height —
       the row's height comes from .hero__copy alone, and this box is
       then stretched to match it via align-items:stretch */
    min-height: 0;
    overflow: hidden;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 0;
  }
}

/* ---------- Section rhythm ---------- */

section { padding-block: var(--space-5); }

.label-heading {
  font-family: var(--font-utility);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}

.script-accent {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--bordeaux);
  line-height: 1.2;
}

/* The single reserved script moment on the page is the Services tagline
   above (.script-accent). Every other heading, including this one, is the
   serif headline face — see the Two Moments Rule in DESIGN.md. */
.approach-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0;
  color: var(--ink);
}

/* ---------- Services ---------- */

.services__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  border-bottom: 1px solid var(--bordeaux-line);
  padding-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .services__title-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
}

.all-services {
  display: block;
  text-align: right;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.all-services span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.all-services:hover span { transform: translateX(4px); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--bordeaux-line);
  border: 1px solid var(--bordeaux-line);
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  padding: var(--space-3) var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.3s var(--ease-out);
  position: relative;
}
.service-card:hover { background: var(--cream-deep); }

/* Reserves the same vertical space for the title + optional "aka" subtitle
   across every card, so the body paragraph below always starts at the same
   y-position whether or not a given card has the subtitle line. */
.service-card__head {
  min-height: 4.35rem;
}

.service-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.service-card h3::after {
  content: "→";
  color: var(--bordeaux);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.service-card:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

.service-card__aka {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.service-card__price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}

.service-card p:not(.service-card__aka) {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- About ---------- */

.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

.about__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--bordeaux-line);
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.about__copy h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0;
  margin-bottom: var(--space-2);
  max-width: 16ch;
}

.about__copy p { color: var(--ink-soft); max-width: 42ch; }

.about__eyebrow { margin-bottom: var(--space-1); }

.about__script {
  font-family: var(--font-script);
  font-size: 1.35em;
  color: var(--bordeaux);
}

@media (min-width: 861px) {
  .about__inner { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- Approach ---------- */

.approach {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

/* Same burgundy-to-rose atmosphere family as .hero__wash, but scaled up:
   larger, more opaque, and built from two paired blobs (burgundy + rose
   at each pole) for a fuller, more flowing sweep across the section
   rather than a single faint dot per corner. Poles sit toward the top
   corner and the outer bottom edge, away from the centered text column,
   so the diagonal "movement" reads in the margins, not under the copy. */
.approach__wash {
  position: absolute;
  inset: -10%;
  z-index: 0;
  opacity: 0.38;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 90% 8%, var(--bordeaux) 0%, transparent 62%),
    radial-gradient(48% 55% at 100% 42%, var(--cream-deep) 0%, transparent 65%),
    radial-gradient(55% 60% at 4% 96%, var(--bordeaux) 0%, transparent 62%),
    radial-gradient(45% 50% at 0% 60%, var(--cream-deep) 0%, transparent 65%);
  filter: blur(100px);
}

.approach__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
}

.approach__intro {
  text-align: center;
}

.approach__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  /* explicit width:100% (not auto) keeps this a definite size regardless
     of margin-inline:auto below; without it, margin:auto disables the
     grid item's default stretch sizing, the browser sizes it via
     fit-content instead, and auto-fit then computes its column count
     against that unconstrained fit-content size instead of the item's
     real available track — producing 3 fixed 220px columns that overflow
     and get clipped on narrow viewports instead of collapsing to 1 */
  width: 100%;
  max-width: 980px;
  min-width: 0;
  margin-inline: auto;
}

.approach-item { text-align: center; }

.approach-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  color: var(--bordeaux);
}

.approach-item p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-inline: auto;
}

/* ---------- Work ---------- */

.work__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.work__pair figure { margin: 0; }

.work__pair img {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.work__pair figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- FAQ ---------- */

.faq__list {
  border-top: 1px solid var(--bordeaux-line);
  margin-block: var(--space-4);
}

.faq-item {
  border-bottom: 1px solid var(--bordeaux-line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2) 0;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bordeaux);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  padding-bottom: var(--space-2);
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--near-black);
  color: var(--cream);
  padding-block: var(--space-4);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.site-footer__brand {
  /* typography comes from .wordmark; this just adds footer-specific spacing */
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.site-footer__tagline,
.site-footer__address {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.site-footer__links a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream);
  border-bottom: 1px solid var(--bordeaux-line);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.site-footer__links a:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

.site-footer__links button {
  font: inherit;
  color: var(--cream);
  background: none;
  border: none;
  border-bottom: 1px solid var(--bordeaux-line);
  padding: 0 0 2px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.site-footer__links button:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

/* Quiet agency credit line — sits below .site-footer__inner as its own
   full-width row, so it stacks last regardless of how the brand/links
   flex row wraps above it. Matches the Caption step (0.85rem, the
   smallest text size used on the page) but at much lower opacity than
   the tagline/address so it reads as strictly quieter than them, not
   competing for attention. */
.site-footer__credit {
  margin-top: var(--space-3);
}
.site-footer__credit a {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--cream) 40%, transparent);
  text-decoration: none;
}
.site-footer__credit a:hover { color: color-mix(in srgb, var(--cream) 65%, transparent); }

/* ---------- Cookie consent banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--near-black);
  color: var(--cream);
  box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--ink) 50%, transparent);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
}

.cookie-banner__text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  max-width: 62ch;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cream) 40%, transparent);
  text-underline-offset: 0.2em;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Legal page (combined Privacy / Legal Notice / Cookie Policy) ---------- */

.legal-page__inner {
  max-width: 68ch;
  padding-block: var(--space-3) var(--space-6);
}

.legal-page__back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bordeaux);
  text-decoration: none;
}
.legal-page__back:hover { text-decoration: underline; }

/* Reuses the documented Subtitle step (About section's h2) rather than
   inventing a new heading size for these secondary pages. */
.legal-page__inner h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

/* Reuses the documented Title step (service-card / approach-item headings)
   for these in-body subsection headings. */
.legal-page__inner h2 {
  font-size: 1.05rem;
  margin-block: var(--space-4) var(--space-1);
}

.legal-page__inner p {
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
  max-width: 68ch;
}

.legal-page__inner a { color: var(--bordeaux); }

/* dt reuses .label-heading (applied in markup) instead of a bespoke label
   style, matching the section-eyebrow treatment used elsewhere on the site. */
.legal-page__field {
  margin-bottom: var(--space-2);
}
.legal-page__field dt { margin-bottom: 0.2rem; }
.legal-page__field dd { margin: 0; }