:root {
  --black: #090909;
  --ink: #151515;
  --panel: #1b1b1b;
  --line: rgba(238, 238, 238, 0.15);
  --line-strong: rgba(238, 238, 238, 0.3);
  --white: #eeeeee;
  --muted: #929292;
  --brown: #421510;
  --brown-mid: #6d2419;
  --red: #c2483a;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", sans-serif;
  --card-radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -10%, #343434 0, #1c1c1c 28%, #101010 63%),
    var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.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;
}
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .8rem 1rem;
  color: var(--black); background: var(--white); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.page-frame {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--black);
  box-shadow: none;
}

/* ============================================================ motion
   Initial states are scoped to .motion-on, which the inline head script
   adds only when scripting is available. If the module ever fails to
   load, the 1.6s fallback in that script drops .motion-on and every
   element renders in its final position. */
.motion-on [data-reveal],
.motion-on [data-reveal-group] > * { opacity: 0; }
.motion-on [data-stagger] { opacity: 0; }
.motion-on [data-stagger].is-split { opacity: 1; }
.motion-on [data-stagger].is-split .word { opacity: 0; }

[data-stagger] .word { display: inline-block; will-change: transform, opacity; }
[data-reveal], [data-reveal-group] > * { will-change: transform, opacity; }
[data-lift] { will-change: transform; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-on [data-reveal],
  .motion-on [data-reveal-group] > *,
  .motion-on [data-stagger],
  .motion-on [data-stagger].is-split .word { opacity: 1 !important; transform: none !important; }
}

/* ============================================================ header */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  min-height: 88px;
  align-items: center;
  gap: 2rem;
  padding: 1.05rem clamp(1.3rem, 4vw, 4.6rem);
  border-bottom: 1px solid var(--line);
  background: rgba(9,9,9,.94);
  backdrop-filter: blur(16px);
  grid-template-columns: 1fr auto 1fr;
  transition: background 220ms ease, border-color 220ms ease;
}
.header.is-scrolled { border-bottom-color: var(--line-strong); background: rgba(9,9,9,.98); }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand img { width: 76px; height: 46px; object-fit: contain; object-position: left center; }
.brand span, .footer-brand span {
  max-width: 88px; color: #717171; font-size: .55rem; font-weight: 600;
  letter-spacing: .1em; line-height: 1.35; text-transform: uppercase;
}
.navigation {
  display: flex; align-items: center; gap: .2rem; padding: .3rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: linear-gradient(175deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.2);
}
.navigation a {
  position: relative; padding: .6rem 1.25rem; border-radius: 999px; color: #858585;
  font-size: .75rem; text-decoration: none; transition: color 180ms ease, background 180ms ease;
}
.navigation a:hover, .navigation a:focus-visible { color: var(--white); background: rgba(255,255,255,.06); }
/* Red accent reallocated here from the header CTA. */
.navigation a.active {
  color: #fff;
  background: linear-gradient(160deg, var(--brown-mid), var(--brown));
  box-shadow: inset 0 1px rgba(255,255,255,.14);
}
.menu-button { display: none; }

/* ============================================================ buttons */
/* The UA stylesheet gives <button> its own font family rather than inheriting
   the page's. Without this the enquiry form's submit and the policy notice
   render in the browser default instead of DM Sans. */
button { font-family: inherit; }
.ico { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pill-icon {
  display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; background: rgba(0,0,0,.08);
  transition: transform 220ms cubic-bezier(.22,1,.36,1), background 220ms ease;
}
.pill {
  display: inline-flex; min-height: 52px; align-items: center; justify-content: space-between;
  gap: 2rem; padding: .85rem 1.15rem .85rem 1.5rem; border: 0; border-radius: 999px;
  font-size: .78rem; font-weight: 600; text-decoration: none;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), background 220ms ease, box-shadow 220ms ease;
}
.pill:hover, .pill:focus-visible { transform: translate3d(0, -3px, 0); }
.pill:hover .pill-icon, .pill:focus-visible .pill-icon { transform: translate3d(3px, 0, 0); }
.pill-light { color: #171717; background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.pill-light:hover, .pill-light:focus-visible { background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
/* Red accent reallocated onto the icon capsule of light buttons. */
.pill-light .pill-icon { color: #fff; background: var(--brown); }

/* Header CTA: smaller text, clean white fill, dark text. */
.header-cta {
  justify-self: end; min-height: 44px; gap: 1.1rem;
  padding: .6rem .55rem .6rem 1.15rem; font-size: .71rem;
  color: #141414; background: #fff;
}
.header-cta .pill-icon { width: 24px; height: 24px; }
.header-cta .ico { width: 12px; height: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem; color: var(--white);
  font-size: .78rem; font-weight: 600; text-decoration: none;
}
.link-arrow .ico { transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.link-arrow:hover .ico, .link-arrow:focus-visible .ico { transform: translate3d(3px, 0, 0); }

/* ============================================================ hero */
.section-pad { padding: clamp(6rem, 10vw, 10rem) clamp(1.4rem, 6vw, 6.5rem); }
.hero {
  position: relative; display: grid; min-height: calc(100vh - 88px); overflow: hidden; align-content: space-between;
  gap: 4.5rem; border-bottom: 1px solid var(--line); grid-template-columns: 1.2fr .8fr;
  padding-top: clamp(7rem, 12vw, 12rem);
}
.hero::after {
  position: absolute; right: -10%; bottom: -35%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  content: ""; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.16), transparent 33%),
    repeating-radial-gradient(circle, transparent 0 8px, rgba(255,255,255,.035) 9px 10px);
  transform: rotate(-15deg) scaleY(.48); filter: blur(.4px);
}
.hero-art { position: absolute; top: 4%; right: -4%; width: 68%; height: auto; opacity: .48; mix-blend-mode: screen; }
.hero-glow { position: absolute; top: -30%; left: 18%; width: 65%; height: 70%; background: radial-gradient(ellipse, rgba(255,255,255,.12), transparent 66%); }
.hero-copy { position: relative; z-index: 2; align-self: center; max-width: min(100%, 1320px); grid-column: 1 / -1; }
/* Pinned independently of .hero-copy so widening the block above shifts the
   paragraph and CTA right without re-wrapping the headline. */
.hero-copy h1 { max-width: 1050px; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin-top: 0; font-weight: 400; }
h1 { max-width: 1100px; margin-bottom: 2.4rem; font-size: clamp(4.3rem, 8.6vw, 9rem); letter-spacing: -.065em; line-height: .88; }
h1 em, h2 em { display: block; color: #a7a7a7; font-family: var(--serif); font-weight: 500; }
.hero-copy > p { max-width: 620px; margin: 0 0 2.2rem auto; color: #c1c1c1; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.65; }
.hero-copy > .pill { margin-left: auto; }

.services-panel {
  position: relative; z-index: 2; max-width: 620px; align-self: end; grid-column: 2;
  padding: 1.6rem 1.75rem; border: 1px solid var(--line); border-radius: var(--card-radius);
  background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  backdrop-filter: blur(10px);
}
.panel-heading {
  display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong);
  color: #b8b8b8; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
}
.services-panel ul { padding: 0; margin: 0; list-style: none; }
.services-panel li {
  display: grid; align-items: center; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  color: #f0f0f0; font-size: clamp(.85rem, 1.3vw, 1.02rem); grid-template-columns: 2rem 1fr;
}
.services-panel li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.services-panel li span { color: var(--red); font-size: .68rem; font-weight: 600; }

/* ============================================================ sections */
.section-title { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.eyebrow-accent {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem;
  color: var(--red); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow-accent::before { width: 22px; height: 1px; content: ""; background: currentColor; }
h2 { margin-bottom: 0; font-size: clamp(3.2rem, 6.6vw, 6.6rem); letter-spacing: -.055em; line-height: .92; }

/* Generic interactive card used in place of the old editorial text rows. */
.card {
  position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--card-radius);
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.card-index {
  display: grid; width: 40px; height: 40px; margin-bottom: 1.6rem; place-items: center;
  border: 1px solid rgba(194,72,58,.5); border-radius: 12px;
  color: var(--red); font-size: .72rem; font-weight: 600;
}
.card h3 { margin: 0 0 .9rem; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.035em; line-height: 1.1; }
.card p { margin: 0; color: #a4a4a4; font-size: .93rem; line-height: 1.7; }

.card-grid { display: grid; gap: 1rem; margin-top: clamp(3.5rem, 6vw, 5.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* problems ---------------------------------------------------- */
.problems { background: #eeeeee; color: #141414; }
.problems .eyebrow-accent { color: var(--brown); }
.problems h2 em { color: var(--brown); }
.problems .card {
  border-color: rgba(0,0,0,.12);
  background: #fff;
}
.problems .card:hover { border-color: rgba(0,0,0,.24); box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.problems .card-index { border-color: rgba(66,21,16,.35); color: var(--brown); }
.problems .card p { color: #656565; }
.takeaway {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 2rem 2.4rem; margin-top: 1rem; border-radius: var(--card-radius); color: #eee; background: var(--brown);
  font-size: clamp(1.2rem, 2.2vw, 2rem); letter-spacing: -.025em;
}
.takeaway strong { font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -.035em; }

/* process ----------------------------------------------------- */
.process { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.dot-field { position: absolute; right: -25%; bottom: -15%; width: 82%; height: auto; opacity: .34; mask-image: linear-gradient(to left, #000, transparent 85%); }
.process .section-title, .process .card-grid { position: relative; z-index: 1; }
.step-card .card-index { border-radius: 50%; }
.step-card h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }

/* proof / dashboard placeholder ------------------------------- */
.proof { display: grid; align-items: start; gap: clamp(3rem, 6vw, 5rem); background: #111; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.proof-copy h2 { margin: 0 0 2rem; }
.proof-copy p { max-width: 620px; margin: 0; color: #adadad; line-height: 1.8; }
.dashboard-slots { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
/* Single column so each report renders wide enough for its scores to stay legible. */
.dash-frame {
  margin: 0; padding: .4rem; border: 1px solid var(--line);
  border-radius: 18px; background: #0b0b0b;
}
.dash-shot { display: block; width: 100%; height: auto; border-radius: 12px; }

/* contact ----------------------------------------------------- */
.contact { position: relative; display: grid; min-height: 680px; overflow: hidden; place-items: center; border-top: 1px solid var(--line); text-align: center; }
.contact::before { position: absolute; width: 780px; height: 780px; border: 1px solid var(--line); border-radius: 50%; content: ""; }
.contact::after { position: absolute; width: 520px; height: 520px; border: 1px solid var(--line); border-radius: 50%; content: ""; }
.contact-dots { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.contact-inner { position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; }
.contact h2 { margin: 0 0 .4rem; }
.contact p { margin: 0 0 2rem; color: #b0b0b0; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.6rem); font-style: italic; }
.email { margin-top: 1.7rem; color: #777; font-size: .74rem; text-underline-offset: .35rem; }

/* ============================================================ footer */
.footer {
  display: grid; align-items: center; gap: 2rem; padding: 3rem clamp(1.4rem, 6vw, 6.5rem);
  border-top: 1px solid var(--line); grid-template-columns: 1fr auto auto;
}
.footer-brand { display: flex; align-items: center; gap: .9rem; }
.footer-brand img { width: 72px; height: 44px; object-fit: contain; object-position: left center; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer a { color: #707070; font-size: .66rem; text-decoration: none; text-transform: uppercase; }
.footer a:hover, .footer a:focus-visible { color: var(--white); }
.legal { max-width: 270px; justify-content: flex-end; }

/* ============================================================ responsive */
@media (max-width: 980px) {
  .page-frame { width: 100%; margin: 0; border-radius: 0; }
  .header { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .navigation { justify-self: end; }
  .hero { grid-template-columns: 1fr; }
  .services-panel { width: 100%; max-width: none; grid-column: 1; }
  .card-grid, .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 1fr; }
  .legal { max-width: none; justify-content: flex-start; grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .page-frame { width: 100%; margin: 0; border-width: 0; border-radius: 0; }
  .header { min-height: 72px; padding: .9rem 1.25rem; }
  .brand img { width: 64px; height: 39px; }
  .brand span { display: none; }
  .menu-button {
    position: relative; z-index: 3; display: grid; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: 50%; place-content: center; gap: 5px; background: #111;
  }
  .menu-button span:not(.sr-only) { width: 17px; height: 1px; background: var(--white); transition: transform 180ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
  .navigation {
    position: absolute; top: 64px; right: 1rem; left: 1rem; display: none; align-items: stretch;
    padding: .6rem; border-radius: 18px; flex-direction: column; background: #151515;
  }
  .navigation.open { display: flex; }
  .navigation a { padding: 1rem; }
  .section-pad { padding: 5rem 1.25rem; }
  .hero { min-height: 760px; padding-top: 5rem; }
  .hero-art { top: 10%; right: -42%; width: 140%; opacity: .3; }
  h1 { font-size: clamp(3.4rem, 15vw, 5rem); }
  .hero-copy > p { margin-left: 0; }
  .hero-copy > .pill { margin-left: 0; }
  h2 { font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .card-grid, .card-grid-4 { grid-template-columns: 1fr; }
  .takeaway { align-items: flex-start; flex-direction: column; }
  .contact { min-height: 630px; }
  .contact::before { width: 570px; height: 570px; }
  .contact::after { width: 390px; height: 390px; }
  .footer { grid-template-columns: 1fr; }
  .footer nav, .legal { justify-content: flex-start; }
}

/* ============================================================ services */
.eyebrow { color: #8c8c8c; font-size: .67rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.services-hero { position: relative; display: grid; min-height: calc(100vh - 88px); overflow: hidden; align-content: end; gap: 3rem; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; }
.services-hero::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 78% 26%, rgba(255,255,255,.12), transparent 24%), linear-gradient(120deg, transparent 48%, rgba(255,255,255,.025) 48% 49%, transparent 49%); }
/* Abstract tech element that replaced the "04" watermark: a masked precision
   grid, a gradient bloom and two concentric rings drifting at different rates. */
.hero-lattice { position: absolute; top: 50%; right: -8%; width: min(62vw, 780px); aspect-ratio: 1; transform: translateY(-50%); }
.lattice-grid, .lattice-bloom, .lattice-ring { position: absolute; inset: 0; display: block; }
.lattice-grid {
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.055) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 62px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.55) 46%, transparent 72%);
}
.lattice-bloom {
  background: conic-gradient(from 210deg at 50% 50%, rgba(194,72,58,.34), rgba(109,36,25,.16) 32%, transparent 58%, rgba(255,255,255,.14) 82%, rgba(194,72,58,.28));
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
}
.lattice-ring { inset: 22%; border: 1px solid rgba(255,255,255,.1); border-top-color: rgba(194,72,58,.5); border-radius: 50%; animation: lattice-spin 34s linear infinite; }
.lattice-ring-outer { inset: 6%; border-top-color: transparent; border-left-color: rgba(255,255,255,.26); animation-duration: 58s; animation-direction: reverse; }
@keyframes lattice-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lattice-ring { animation: none; } }
.services-hero-copy { position: relative; z-index: 1; max-width: 1120px; }
.services-hero h1 { max-width: 900px; margin: 0 0 1.8rem; font-size: clamp(2.9rem, 5.4vw, 5.2rem); letter-spacing: -.05em; line-height: .96; }
/* Secondary line, not a second headline — scaled to sit under the h1. */
.services-hero h1 em { display: block; margin-top: .55rem; color: #a98f8a; font-size: clamp(1.45rem, 2.4vw, 2.4rem); letter-spacing: -.01em; line-height: 1.15; }
.services-hero-copy p { max-width: 650px; color: #9c9c9c; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.6; }
.services-scroll { position: relative; z-index: 1; display: flex; align-items: center; align-self: end; gap: 1rem; color: #888; font-size: .72rem; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.services-scroll b { display: grid; width: 52px; height: 52px; color: #fff; border-radius: 50%; place-items: center; background: var(--brown); transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.services-scroll:hover b { transform: translate3d(0, 3px, 0); }
.services-scroll b .ico { width: 16px; height: 16px; }
.service-catalog { position: relative; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #f1f1ef 0%, #e6e6e3 58%, #dededa 100%); }
/* Faint blueprint grid keeps the light section from reading as a flat page. */
.service-catalog::before {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(9,9,9,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(9,9,9,.05) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
}
.service-catalog > * { position: relative; z-index: 1; }

/* Intro is a card container rather than an editorial masthead. */
.catalog-intro {
  max-width: 780px; padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(9,9,9,.1); border-radius: var(--card-radius);
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  box-shadow: 0 18px 46px rgba(9,9,9,.06);
}
.catalog-intro .eyebrow-accent { color: var(--brown); }
.catalog-intro h2 { max-width: 640px; margin: 1rem 0 0; font-size: clamp(1.85rem, 3.3vw, 3.1rem); letter-spacing: -.035em; line-height: 1.04; }
.catalog-intro h2 em { display: inline; color: var(--brown); }
.catalog-lede { max-width: 580px; margin: 1.1rem 0 0; color: #5c5a56; font-size: clamp(.9rem, 1.2vw, 1.02rem); line-height: 1.65; }

.service-cards { display: grid; gap: 1.1rem; margin-top: clamp(3rem, 5vw, 4.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card {
  display: flex; min-height: 0; flex-direction: column; padding: clamp(1.5rem, 3.2vw, 2.8rem);
  color: var(--white); border: 1px solid rgba(255,255,255,.09); border-radius: 28px;
  background: linear-gradient(165deg, #1a181c 0%, #121113 46%, #0d0c0d 100%);
  box-shadow: 0 26px 64px rgba(9,9,9,.22);
}
.service-card-light { color: var(--ink); border-color: rgba(9,9,9,.12); background: linear-gradient(165deg, #f3f2ef 0%, #dddbd4 58%, #cfcdc6 100%); }
.service-card-brown { border-color: rgba(255,255,255,.12); background: linear-gradient(165deg, #67231a 0%, #4a1812 48%, #351009 100%); }
.service-card-head { display: flex; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid currentColor; color: #7d7d7d; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; opacity: .8; }
.service-card-copy { margin: clamp(1.8rem, 3vw, 2.8rem) 0 1.8rem; }
.service-card h3 { max-width: 560px; margin-bottom: 1.1rem; font-size: clamp(1.5rem, 2.3vw, 2.15rem); letter-spacing: -.035em; line-height: 1.08; }
.service-card-copy p { max-width: 620px; color: #929292; line-height: 1.7; }
.service-card-light .service-card-copy p, .service-card-light .deliverables { color: #555; }
.service-card-brown .service-card-copy p, .service-card-brown .deliverables { color: #c5adaa; }
.deliverables { display: grid; padding: 0; margin: auto 0 2rem; color: #aaa; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deliverables li { position: relative; padding: .9rem 1rem .9rem 1.2rem; border-top: 1px solid rgba(128,128,128,.35); font-size: .8rem; }
.deliverables li::before { position: absolute; top: 1.35rem; left: 0; width: 4px; height: 4px; content: ""; border-radius: 50%; background: currentColor; }
.service-actions { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.service-actions a { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; border: 1px solid rgba(128,128,128,.4); border-radius: 999px; font-size: .74rem; font-weight: 600; text-decoration: none; transition: background 200ms ease, border-color 200ms ease; }
.service-actions a .ico { transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.service-actions a:hover .ico, .service-actions a:focus-visible .ico { transform: translate3d(3px, -3px, 0); }
.service-actions a:hover { border-color: currentColor; }
.services-cta { display: grid; place-items: center; background: #0b0a0a; text-align: center; }
.services-cta-card {
  display: flex; width: 100%; max-width: 900px; align-items: center; flex-direction: column;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border: 1px solid rgba(255,255,255,.12); border-radius: 32px;
  background: linear-gradient(160deg, #67231a 0%, #4a1812 46%, #300f0a 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.services-cta h2 { max-width: 700px; margin: 1.4rem 0 2.4rem; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.04em; line-height: 1.02; }
.services-cta h2 em { color: #c5adaa; }
.services-cta .pill-light .pill-icon { background: var(--brown); }

/* ============================================================ enquiry */
.enquire-layout { position: relative; display: grid; min-height: calc(100vh - 88px); gap: clamp(4rem, 8vw, 9rem); background: linear-gradient(120deg, #0b0b0b 0 50%, #111 50%); grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); }
.enquire-layout::before { position: absolute; bottom: -15%; left: -15%; width: 65%; aspect-ratio: 1; content: ""; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 10px, rgba(255,255,255,.035) 11px 12px); transform: scaleY(.45) rotate(-12deg); }
.enquire-intro { position: relative; z-index: 1; align-self: center; }
.enquire-intro h1 { margin: 1.8rem 0 2rem; font-size: clamp(3.4rem, 6.4vw, 7rem); }
.enquire-intro h1 em { display: block; color: #a98f8a; }
/* Intro sub-heading follows the same sans body scale as the rest of the site
   rather than the editorial serif italic it used before. */
.enquire-intro > p { max-width: 560px; color: #c1c1c1; font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; letter-spacing: 0; line-height: 1.65; }
.response-promise { display: flex; align-items: flex-end; gap: 1rem; margin-top: clamp(3rem, 7vw, 7rem); }
.response-promise strong { font-size: clamp(5rem, 10vw, 10rem); font-weight: 400; letter-spacing: -.09em; line-height: .7; }
.response-promise span { color: #777; font-size: .67rem; line-height: 1.5; text-transform: uppercase; }
.audit-form-wrap { position: relative; z-index: 1; align-self: center; padding: clamp(1.5rem, 4vw, 3.5rem); color: var(--ink); border-radius: 28px; background: #e6e5e1; }
.form-heading { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(0,0,0,.16); }
.form-heading span:first-child { font-family: var(--sans); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.form-heading span:last-child { color: #777; font-size: .62rem; text-transform: uppercase; }
.audit-form { display: grid; gap: 0 1.5rem; margin-top: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; padding: 1.2rem 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.field-full { grid-column: 1 / -1; }
.field > span { color: #6c6c6c; font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: .8rem 0 .2rem; color: var(--ink); border: 0; outline: 0; background: transparent; font: inherit; resize: vertical; }
.field input:focus, .field textarea:focus { box-shadow: 0 2px 0 var(--brown); }
.field input::placeholder, .field textarea::placeholder { color: #999; }
/* Platform select: native control, chrome stripped so it reads as the same
   underlined field as every text input around it. */
.select-shell { position: relative; }
.field select {
  width: 100%; padding: .8rem 2rem .2rem 0; color: var(--ink); border: 0; outline: 0;
  appearance: none; background: transparent; font: inherit; cursor: pointer;
}
/* Greys the "Select where your site was built" placeholder until a real choice is made. */
.field select:has(option[value=""]:checked) { color: #8d8d8d; }
.field select:focus-visible { box-shadow: 0 2px 0 var(--brown); }
.select-chevron { position: absolute; right: .1rem; bottom: .55rem; color: #6c6c6c; pointer-events: none; }

.field-choice { display: block; padding: 1.4rem 0 1.2rem; border: 0; border-bottom: 1px solid rgba(0,0,0,.15); margin: 0; }
.field-choice legend { padding: 0; color: #6c6c6c; font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.choice-hint { margin: .75rem 0 1rem; color: #83817c; font-size: .74rem; line-height: 1.5; }
.choice-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem;
  border: 1px solid rgba(0,0,0,.14); border-radius: 12px; background: rgba(255,255,255,.45);
  color: #3d3b38; font-size: .78rem; line-height: 1.3; cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.choice:hover { border-color: rgba(0,0,0,.3); background: rgba(255,255,255,.8); }
/* Resets the shared `.field input` text-field padding/underline for checkboxes. */
.choice input { width: 16px; height: 16px; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--brown); }
.choice input:focus { box-shadow: none; }
.choice:has(input:checked) { border-color: var(--brown); background: #fff; color: var(--ink); font-weight: 500; }
.choice:has(input:focus-visible) { outline: 2px solid var(--brown); outline-offset: 2px; }
/* Consent row spans the two-column form grid; `a { color: inherit }` would
   otherwise render these links invisible against the pill background. */
.choice-consent { grid-column: 1 / -1; margin-top: 1.6rem; }
.choice-consent a { color: var(--brown); font-weight: 600; text-decoration: underline; text-underline-offset: .15rem; }

.form-submit { width: 100%; margin-top: 2.5rem; color: var(--white); background: var(--brown); grid-column: 1 / -1; cursor: pointer; }
.form-submit:hover, .form-submit:focus-visible { background: var(--brown-mid); }
.form-submit .pill-icon { color: #fff; background: rgba(255,255,255,.14); }
.form-note { max-width: 570px; margin: 1.3rem auto 0; color: #777; font-size: .67rem; line-height: 1.5; text-align: center; }

@media (max-width: 980px) {
  .services-hero { grid-template-columns: 1fr; }
  .services-scroll { justify-self: end; }
  .service-cards { grid-template-columns: 1fr; }
  .enquire-layout { background: #0b0b0b; grid-template-columns: 1fr; }
  .enquire-intro { padding-top: 2rem; }
  .audit-form-wrap { width: 100%; }
}

@media (max-width: 700px) {
  .services-hero { min-height: 700px; }
  .service-card { border-radius: 20px; }
  .services-cta-card { border-radius: 22px; }
  .deliverables { margin-top: 3rem; grid-template-columns: 1fr; }
  .service-actions { grid-template-columns: 1fr; }
  .enquire-layout { gap: 3rem; }
  .audit-form-wrap { padding: 1.3rem; border-radius: 20px; }
  .form-heading { flex-direction: column; gap: .5rem; }
  .choice-grid { grid-template-columns: 1fr; }
  .audit-form { display: block; }
  .response-promise { margin-top: 4rem; }
}

/* ============================================================ pricing */
.pricing-hero {
  position: relative;
  display: grid;
  min-height: calc(74vh - 88px);
  overflow: hidden;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1.2fr .8fr;
}
.pricing-art { position: absolute; top: -16%; right: -12%; width: 75%; height: auto; opacity: .36; mix-blend-mode: screen; }
.pricing-hero-copy, .order-note { position: relative; z-index: 1; }
.pricing-hero h1 { margin: 1.5rem 0 0; }
.pricing-prefix { display: block; color: #8c8c8c; font-size: clamp(.8rem, 1.2vw, 1rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.order-note { padding: 2rem; border: 1px solid var(--line-strong); border-radius: var(--card-radius); background: rgba(17,17,17,.82); backdrop-filter: blur(12px); }
.order-note > span { display: block; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--red); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.order-note p { margin: 1.5rem 0; color: #aaa; line-height: 1.75; }

.pricing-section { border-bottom: 1px solid var(--line); }
.pricing-section-heading { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.pricing-section-heading h2 { max-width: 1100px; }

/* badges ------------------------------------------------------ */
.price-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem;
  border-radius: 999px; font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.price-badge::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }
.badge-popular { color: #fff; background: var(--brown); box-shadow: 0 8px 22px rgba(66,21,16,.45); }
.badge-value { color: #101010; background: var(--white); box-shadow: 0 8px 22px rgba(0,0,0,.45); }

.bundle-grid { display: grid; gap: 1px; padding: 1px; margin-top: clamp(1rem, 3vw, 2rem); border-radius: 28px; background: var(--line-strong); grid-template-columns: 1fr 1fr; overflow: hidden; }
.price-card { display: flex; min-height: 700px; flex-direction: column; padding: clamp(1.6rem, 4vw, 3.5rem); background: #101010; }
.price-card.featured { background: #ededed; color: #151515; }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); color: #8a8a8a; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.featured .card-topline { border-color: rgba(0,0,0,.18); color: #656565; }
.price-heading { display: grid; gap: 2rem; padding: 2.6rem 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; }
.featured .price-heading { border-color: rgba(0,0,0,.18); }
.price-heading h3 { max-width: 420px; margin: 0; font-size: clamp(2.2rem, 4.2vw, 4.2rem); letter-spacing: -.06em; line-height: .94; }
.price-heading > div { display: flex; align-items: flex-end; flex-direction: column; }
.price-heading strong { font-size: clamp(3rem, 5vw, 5.4rem); font-weight: 400; letter-spacing: -.07em; line-height: .9; }
.price-heading div span { max-width: 170px; margin-top: .75rem; color: #767676; font-size: .7rem; line-height: 1.45; text-align: right; }
.feature-list { padding: 0; margin: 2rem 0; list-style: none; }
.feature-list li { position: relative; padding: .7rem 0 .7rem 1.4rem; color: #aaa; line-height: 1.45; }
.feature-list li::before { position: absolute; top: 1.1rem; left: 0; width: 5px; height: 5px; border-radius: 50%; content: ""; background: var(--red); }
.featured .feature-list li { color: #565656; }
.featured .feature-list li::before { background: var(--brown); }
/* Core inclusion in the Health Package — heavier dot, brighter label. */
.feature-list li.is-core { color: var(--white); }
.feature-list li.is-core::before { top: 1rem; width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(194,72,58,.22); }
.feature-list li.is-core strong { font-weight: 600; }

/* Primary feature highlight inside the Health Package. */
.feature-highlight {
  display: grid; gap: .6rem; padding: 1.3rem 1.4rem; margin: 2rem 0 .5rem;
  border: 1px solid rgba(194,72,58,.42); border-radius: 16px;
  background: linear-gradient(150deg, rgba(194,72,58,.14), rgba(194,72,58,.03));
}
.feature-highlight > span {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--red); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.feature-highlight strong { color: #f2f2f2; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.feature-highlight p { margin: 0; color: #a2a2a2; font-size: .85rem; line-height: 1.65; }

/* Sized and styled as a real control: 52px minimum target matching .service-cta,
   its own hover/focus state, and a visible focus ring. */
.price-card-link {
  display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem .8rem 1.4rem; margin-top: auto;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--white); font-size: .78rem; font-weight: 600; text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
}
.price-card-link:hover, .price-card-link:focus-visible {
  color: #fff; border-color: var(--brown); background: var(--brown); transform: translate3d(0, -2px, 0);
}
.price-card-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.featured .price-card-link { border-color: rgba(0,0,0,.28); color: #151515; }
.featured .price-card-link:hover, .featured .price-card-link:focus-visible { color: #fff; }
.price-card-link .ico { transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.price-card-link:hover .ico, .price-card-link:focus-visible .ico { transform: translate3d(3px, -3px, 0); }

.addon-panel { display: grid; align-items: start; gap: 4rem; padding: clamp(2rem, 5vw, 4.5rem); margin-top: 1rem; border-radius: 28px; color: #151515; background: #dcdcdc; grid-template-columns: .8fr 1.2fr; }
.addon-panel > div > span { color: var(--brown); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.addon-panel h3 { max-width: 550px; margin: 1.2rem 0 0; font-size: clamp(2.2rem, 4.4vw, 4.2rem); letter-spacing: -.055em; line-height: .96; }
.addon-note { max-width: 520px; margin: 1.4rem 0 0; color: #4f4c47; font-size: .87rem; line-height: 1.7; }
.feature-list.compact { display: grid; margin: 0; gap: 0 2rem; grid-template-columns: 1fr 1fr; }
.feature-list.compact li { color: #505050; border-bottom: 1px solid rgba(0,0,0,.12); }
.feature-list.compact li::before { background: var(--brown); }

/* individual services ---------------------------------------- */
.individual-services { color: #151515; background: #eeeeee; }
.individual-services .eyebrow-accent { color: var(--brown); }
.individual-services h2 em { color: var(--brown); }
.service-pricing-list { display: grid; gap: 1rem; margin-top: clamp(3.5rem, 6vw, 5.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-price {
  display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border: 1px solid rgba(0,0,0,.12); border-radius: var(--card-radius); background: #fff;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.service-price:hover { border-color: rgba(0,0,0,.24); box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.service-price-heading { display: grid; gap: .5rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(0,0,0,.12); }
.service-price-meta { display: flex; align-items: center; justify-content: space-between; color: var(--brown); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.service-price-meta small { color: #8a8a8a; font-size: .64rem; font-weight: 500; }
.service-price-heading h3 { margin: .4rem 0 .6rem; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.04em; line-height: 1.08; }
.service-price-heading strong { font-size: clamp(2.2rem, 3.2vw, 2.9rem); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.service-price .feature-list { margin: 1.4rem 0 2rem; }
.service-price .feature-list li { padding: .5rem 0 .5rem 1.2rem; color: #626262; font-size: .85rem; }
.service-price .feature-list li::before { top: .95rem; background: var(--brown); }

/* Staggered grid: breaks the flat horizontal baseline of the home, service,
   and platform cards. Offset via margin, not transform — these cards carry
   [data-lift], whose hover animation writes an inline transform that would
   overwrite a CSS one and snap the card back to zero on first hover. Scoped
   above 980px because the grids collapse to 2-up and then 1-up below that,
   where a lone offset card just reads as a spacing bug. */
@media (min-width: 981px) {
  /* Paired positive/negative margins: the grid stretches each card to the row
     height minus its block margins, which net to zero here — so the card keeps
     full height and equal-height CTAs while shifting bodily down. Both edges
     stagger, and the offset stays well inside the section's bottom padding. */
  .service-pricing-list > :nth-child(even),
  .platform-grid > :nth-child(even),
  .problems .card-grid > :nth-child(even),
  .process .card-grid > :nth-child(even) {
    margin-top: clamp(2rem, 4vw, 3.75rem);
    margin-bottom: clamp(-3.75rem, -4vw, -2rem);
  }

  /* Reserve the stagger below the diagnosis cards so the lowered middle card
     keeps the same breathing room above the takeaway panel. */
  .problems .card-grid { margin-bottom: calc(clamp(2rem, 4vw, 3.75rem) + 1.5rem); }
}
.service-cta {
  display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .75rem .75rem 1.3rem; margin-top: auto; border-radius: 999px;
  color: #fff; background: var(--ink); font-size: .74rem; font-weight: 600; text-decoration: none;
  transition: background 200ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
}
.service-cta:hover, .service-cta:focus-visible { background: var(--brown); transform: translate3d(0, -2px, 0); }
.service-cta .pill-icon { background: rgba(255,255,255,.16); }

/* platform pricing ------------------------------------------- */
.platform-pricing { position: relative; overflow: hidden; }
.platform-pricing::before { position: absolute; right: -10%; bottom: -5%; width: 60%; height: 70%; content: ""; background: url("assets/framer-dot-field.webp") center/cover; opacity: .18; mask-image: linear-gradient(to left, #000, transparent); }
.platform-pricing > * { position: relative; z-index: 1; }
.platform-grid { display: grid; align-items: stretch; gap: 1rem; margin-top: clamp(3.5rem, 6vw, 5.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-card { display: flex; min-height: 560px; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line-strong); border-radius: var(--card-radius); background: rgba(12,12,12,.86); }
.platform-number { color: var(--red); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.platform-card h3 { margin: 2.4rem 0 1.6rem; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.05em; line-height: 1.02; }
.platform-meta { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.platform-meta strong { font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight: 400; letter-spacing: -.07em; line-height: .9; }
.platform-meta span { color: #858585; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.platform-card .feature-list { margin-bottom: 2rem; }
.platform-card .feature-list li { font-size: .87rem; }

.pricing-cta { display: grid; min-height: 560px; place-items: center; background: var(--brown); text-align: center; }
.pricing-cta > div { display: flex; align-items: center; flex-direction: column; }
.pricing-cta h2 { max-width: 1100px; margin-bottom: 3rem; }
.pricing-cta h2 em { color: #c4aaa6; }
.pricing-cta .pill-light .pill-icon { background: var(--brown); }

@media (max-width: 980px) {
  .pricing-hero { min-height: 640px; grid-template-columns: 1fr; }
  .pricing-hero-copy { align-self: end; }
  .order-note { max-width: 620px; }
  .bundle-grid { grid-template-columns: 1fr; }
  .price-card { min-height: auto; }
  .addon-panel { grid-template-columns: 1fr; }
  .service-pricing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card { min-height: auto; }
}

@media (max-width: 700px) {
  .pricing-hero { min-height: 620px; padding-top: 4rem; }
  .pricing-art { top: 4%; right: -60%; width: 170%; }
  .price-heading { grid-template-columns: 1fr; padding: 2rem 0; }
  .price-heading > div { align-items: flex-start; }
  .price-heading div span { text-align: left; }
  .feature-list.compact { grid-template-columns: 1fr; }
  .service-pricing-list { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .pricing-cta { min-height: 520px; }
}

/* ============================================================ legal pages */
.legal-page { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
.legal-head { max-width: 940px; }
.legal-head h1 { margin: 1.2rem 0 0; font-size: clamp(2.8rem, 6vw, 5.4rem); }
.legal-updated {
  display: inline-block; margin-top: 1.8rem; padding: .5rem .95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: #9a9a9a; font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.legal-body { max-width: 820px; }
.legal-body h2 { margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem; font-size: clamp(1.35rem, 2.3vw, 1.95rem); letter-spacing: -.035em; line-height: 1.18; }
.legal-body > :first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1.15rem; color: #b4b4b4; font-size: clamp(.92rem, 1.15vw, 1.02rem); line-height: 1.8; }
.legal-body a { color: var(--white); text-underline-offset: .25rem; }
.legal-body ul { padding: 0; margin: 0 0 1.15rem; list-style: none; }
.legal-body li { position: relative; padding: .5rem 0 .5rem 1.4rem; color: #b4b4b4; line-height: 1.7; }
.legal-body li::before { position: absolute; top: 1.1rem; left: 0; width: 5px; height: 5px; border-radius: 50%; content: ""; background: var(--red); }
.legal-contact {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line-strong); border-radius: var(--card-radius); background: rgba(17,17,17,.82);
}
.legal-contact h2 { margin-top: 0; }
.legal-contact p:last-child { margin-bottom: 0; }

/* ============================================================ policy notice */
/* Sits above the fixed grain overlay (z-index 20) but below the skip link (100),
   so keyboard focus order is unaffected. Appended to <body> rather than
   .page-frame, which clips its overflow. */
.consent-bar {
  position: fixed; z-index: 30;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1.25rem; max-width: 640px;
  padding: 1rem 1rem 1rem 1.5rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(14,14,14,.94); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(1rem);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,1,.36,1);
}
.consent-bar.is-in { opacity: 1; transform: none; }
.consent-bar p { margin: 0; color: #b6b6b6; font-size: .74rem; line-height: 1.6; }
.consent-bar a { color: var(--white); text-underline-offset: .2rem; }
.consent-bar button { flex: 0 0 auto; padding: .6rem 1.3rem; font-size: .72rem; cursor: pointer; border: 0; }

@media (max-width: 700px) {
  .consent-bar {
    right: 1rem; left: 1rem; max-width: none;
    align-items: stretch; flex-direction: column; gap: .9rem;
    padding: 1.15rem; border-radius: 20px;
  }
  .consent-bar button { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-bar { transition: none; }
}