/* =========================================================================
   NOA — Opening screen  (Figma: NOA-home — 1440 × 3658)
   --------------------------------------------------------------------------
   THREE LAYOUT MODES
   ------------------
   1. Desktop  (≥1025px) — FLUID. The whole composition is a 1:1 reproduction
      of the 1440px Figma frame, positioned absolutely and scaled as one unit.
      Every value is in `rem`, where 1rem = 10px at the 1440px reference, and
      the root font-size tracks the viewport width (1rem = clientWidth / 144,
      set in script.js). So it scales identically on every desktop width.

      The semantic <section> wrappers use `display: contents` here, so the
      leaf elements position absolutely against `.stage` exactly as designed.

   2. Tablet   (601–1024px) — reflow to normal document flow, fluid `clamp()`
      type, the two body columns stack, generous spacing.

   3. Phone    (≤600px) — single column throughout, compact spacing.

   The hero is ALWAYS `100dvh` (dynamic viewport height — correct on mobile
   where browser chrome changes the visible height).
   ========================================================================= */

/* ---- Brand webfonts (self-hosted, licensed via Seamless/NOA) ------------
   GT Planar: Light (hero title) + Regular (labels, headings, copyright).
   Saans: Medium for names/lead copy. The design's body face is Saans
   REGULAR, which hasn't been supplied yet — Light stands in at weight 400
   so the lead/body hierarchy survives; swap the 400 src when it arrives. */
@font-face {
  font-family: 'GT Planar';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/gt-planar-light.woff2') format('woff2'),
       url('assets/fonts/gt-planar-light.woff') format('woff');
}
@font-face {
  font-family: 'GT Planar';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/gt-planar-regular.woff2') format('woff2'),
       url('assets/fonts/gt-planar-regular.woff') format('woff');
}
@font-face {
  font-family: 'Saans';
  font-weight: 400;               /* interim: Light file until Regular arrives */
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/saans-light.woff2') format('woff2'),
       url('assets/fonts/saans-light.woff') format('woff');
}
@font-face {
  font-family: 'Saans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/saans-medium.woff2') format('woff2'),
       url('assets/fonts/saans-medium.woff') format('woff');
}

:root {
  --blue:  #c2e3eb;   /* page background + text on the dark band */
  --ink:   #211b29;   /* dark band + hero / nav text            */
  --black: #000000;   /* CTA, contacts, copyright               */

  --font-display: 'GT Planar', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Saans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

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

/* Desktop fluid unit: 1rem = 100vw / 144 = 10px @1440 (JS refines w/ clientWidth) */
html { font-size: calc(100vw / 144); }

body {
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; }

.screen {
  position: relative;
  width: 144rem;          /* == 100vw on desktop */
  margin: 0 auto;
  background: var(--blue);
}

/* =========================================================================
   DESKTOP (default / ≥1025px)
   ========================================================================= */

/* ---- Hero — living image trail (auto-spawn + cursor drift) ------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--blue);
}

.site-header {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3.8rem 5rem 0 3.8rem;
}
.logo-header { position: relative; width: 18.2rem; height: 6.3rem; flex: 0 0 auto; }
.logo-header img { width: 100%; height: 100%; }

/* Lottie logo animation — layered over the static SVG; the static logo
   stays as the no-JS / reduced-motion fallback and fades back in when
   the animation's cycle ends (its last frames are empty) */
.logo-header__anim {
  position: absolute;
  inset: 0;
  display: none;
}
.logo-header__anim svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-header__anim [fill="rgb(0,0,0)"] { fill: var(--ink); }
.logo-header img { transition: opacity 0.3s ease; }
.logo-header.is-animated img { opacity: 0; }
.logo-header.is-animated .logo-header__anim { display: block; }

.nav-tag {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 6.3rem;            /* matches logo box so tops/centres align */
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* the layer that holds the spawned images */
.effect-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.effect-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 1.4vw 3.6vw -1vw rgba(20, 15, 25, 0.22);
  will-change: transform, opacity;
  pointer-events: none;
}
.effect-stage img.format1 { width: 25vw; height: auto; }
.effect-stage img.format2 { width: 23vw; height: auto; }
.effect-stage img.format3 { width: 21vw; height: auto; }
.effect-stage img.format4 { width: 19vw; height: auto; }
.effect-stage img.format5 { width: 17vw; height: auto; }

/* centred headline + scroll cue (fades out on first scroll) */
.hero-hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 120rem);
  text-align: center;
  pointer-events: none;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.2rem;
  line-height: 6.6rem;
  letter-spacing: -0.216rem;
  color: var(--ink);
  text-align: center;
}

/* ---- Stage (everything below the hero) --------------------------------- */
.stage {
  position: relative;
  height: 275.7rem;               /* new frame 3658 − 901 hero-height, ÷10 */
  background: var(--blue);
  overflow-x: clip;               /* patches peek to the frame edge, then clip */
}

/* On desktop the wrappers vanish so leaves position against .stage exactly. */
.facts,
.about,
.connect,
.partners,
.contacts,
.site-footer { display: contents; }

/* Two dark bands — Facts (top) and Connect + footer (bottom). */
.band-dark {
  position: absolute;
  left: 0;
  width: 144rem;
  background: var(--ink);
}
.band-dark--facts   { top: 0;        height: 51.2rem;  }
.band-dark--connect { top: 168.9rem; height: 106.8rem; }

/* =========================================================================
   FACTS & FIGURES — on the top dark band (blue type on ink)
   ========================================================================= */
.facts-label {
  position: absolute;
  left: 5.4rem;
  top: 7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 4.1rem;
  letter-spacing: -0.017rem;
  color: var(--blue);
}

.facts-field {
  position: absolute;
  width: 32.5rem;
  color: var(--blue);
}
.facts-field--location       { left: 39rem;    top: 7.6rem;  }
.facts-field--manager        { left: 39rem;    top: 31.7rem; }
.facts-field--size           { left: 73.5rem;  top: 7.6rem;  }
.facts-field--sustainability { left: 73.5rem;  top: 31.7rem; }
.facts-field--amenities      { left: 107.5rem; top: 7.6rem;  }
.facts-field--downloads      { left: 107.5rem; top: 31.7rem; }

.facts-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.3rem;
  letter-spacing: 0.072rem;
  text-transform: uppercase;
  color: var(--blue);
}
.facts-value {
  margin-top: 2.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 2.3rem;
  letter-spacing: -0.019rem;
  color: var(--blue);
}

/* Download pills — Factsheet / Floor plans (light pills on the dark band) */
.facts-downloads {
  margin-top: 2.7rem;
  display: flex;
  gap: 1.2rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.9rem;
  padding: 0 1.9rem;
  border-radius: 1.7rem;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 2.3rem;
  letter-spacing: 0.17rem;
  text-indent: 0.17rem;           /* offset the trailing letter-spacing so type reads centred */
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Embroidered patches (decorative) ---------------------------------- */
/* Each patch reproduces the Figma node 1:1 — a bounding box, an optional
   rotation wrapper, then a crop box that windows the source photo. */
.sticker { position: absolute; z-index: 2; pointer-events: none; }
.sticker__rot { display: block; flex: none; }
.sticker__box { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.sticker__box img { position: absolute; max-width: none; display: block; }

/* Diamond — on the Facts dark band, tilted -9.85°. */
.sticker--diamond {
  left: 10rem;
  top: 16.8rem;
  width: 17.1302rem;
  height: 17.2117rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker--diamond .sticker__rot { transform: rotate(-9.85deg); }
.sticker--diamond .sticker__box { width: 14.8rem; height: 14.9rem; }
.sticker--diamond .sticker__box img { width: 343.57%; height: 198.26%; left: -122.14%; top: -49.13%; }

/* Smiley — in About, tilted 6.95°, peeks off the right edge. */
.sticker--smiley {
  left: 128.8rem;
  top: 66.5rem;
  width: 21.3998rem;
  height: 21.142rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker--smiley .sticker__rot { transform: rotate(6.95deg); }
.sticker--smiley .sticker__box { width: 19.248rem; height: 18.9523rem; }
.sticker--smiley .sticker__box img { width: 279.33%; height: 165.53%; left: -90.22%; top: -31.63%; }

/* Globe — in Connect, a beat of air under the CTA's closing line. */
.sticker--globe { left: 67.6rem; top: 191.6rem; width: 13.5rem; height: 12.1rem; }
.sticker--globe .sticker__box img { width: 325.07%; height: 211.03%; left: -113.78%; top: -56.6%; }

/* NOA — peeks off the right edge near the footer. */
.sticker--noa { left: 128.5rem; top: 231.6rem; width: 20.3rem; height: 20.1rem; }
.sticker--noa .sticker__box img { width: 288.6%; height: 170.61%; left: -95.53%; top: -35.67%; }

/* =========================================================================
   ABOUT NOA — light band, below the Facts dark band (ink type on blue)
   ========================================================================= */
.about-label {
  position: absolute;
  left: 5.5rem;
  top: 58.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 4.1rem;
  letter-spacing: -0.017rem;
  color: var(--ink);
}

.about-heading {
  position: absolute;
  left: 5.4rem;
  top: 65.1rem;
  width: 116.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6.3rem;
  line-height: 5.9rem;
  letter-spacing: -0.063rem;
  color: var(--ink);
}

.about-image {
  position: absolute;
  left: 5.5rem;
  top: 90.5rem;
  width: 65.5rem;
  height: 50.9rem;
  object-fit: cover;
}

.about-body {
  position: absolute;
  left: 77.3rem;
  top: 120.6rem;
  width: 47.8rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: var(--ink);
}

/* =========================================================================
   CONNECT — CTA + partners + contacts, on the bottom dark band
   ========================================================================= */
.cta {
  position: absolute;
  left: 4.7rem;
  top: 177.3rem;
  width: 125.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6.3rem;
  line-height: 6.5rem;
  letter-spacing: -0.063rem;
  color: var(--blue);
}
.cta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.02em;
}

.partner { position: absolute; }
.partner img { width: 100%; height: 100%; object-fit: contain; }
.partner--kf  { left: 4.7rem;  top: 211.2rem; width: 19.8rem; height: 4.7rem;  }
.partner--jll { left: 35.7rem; top: 208.6rem; width: 16.7rem; height: 10.3rem; }
.partner--bt  { left: 72.6rem; top: 211rem;   width: 19.9rem; height: 6.8rem;  }

.contact {
  position: absolute;
  top: 221.1rem;
  width: 32rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--blue);
  font-style: normal;
}
.contact--1 { left: 4.7rem;  }
.contact--2 { left: 38.8rem; }
.contact--3 { left: 72.9rem; }
.contact .name { font-weight: 500; }
.contact a { text-decoration: none; color: inherit; }

.logo-footer {
  position: absolute;
  left: 3.5rem;
  top: 263.4rem;
  width: 18.2rem;
  height: 6.3rem;
}
.logo-footer img { width: 100%; height: auto; }

.copyright {
  position: absolute;
  right: 5rem;
  top: 264.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 6.6rem;
  letter-spacing: -0.048rem;
  color: var(--blue);
  text-align: right;
  white-space: nowrap;
}
.copyright a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.02em;
}

/* =========================================================================
   TABLET + PHONE  (≤1024px)  — reflow to normal flow
   ========================================================================= */
@media (max-width: 1024px) {
  html { font-size: 100%; }                 /* 16px base (JS clears inline)  */

  :root { --pad: clamp(24px, 5vw, 72px); }  /* shared horizontal gutter      */

  .screen { width: 100%; }

  /* Undo desktop absolute canvas ----------------------------------------- */
  .stage { position: static; height: auto; background: var(--blue); overflow-x: clip; }
  .band-dark { display: none; }

  .facts,
  .about,
  .connect,
  .partners,
  .contacts,
  .site-footer { display: block; }          /* override display:contents     */

  .facts-label,
  .facts-field,
  .about-label,
  .about-heading,
  .about-image,
  .about-body,
  .cta,
  .partner,
  .contact,
  .logo-header,
  .logo-footer,
  .copyright {
    position: static;
    left: auto; right: auto; top: auto;
    width: auto;
  }

  /* ---- Hero ------------------------------------------------------------- */
  .site-header {
    align-items: center;
    padding: max(clamp(20px, 4vw, 40px), env(safe-area-inset-top)) var(--pad) 0;
  }
  .logo-header { position: relative; width: clamp(122px, 17vw, 170px); height: auto; aspect-ratio: 162 / 57; }
  .nav-tag {
    font-size: clamp(11px, 2.4vw, 15px);
    line-height: 1.2;
  }
  .hero-hint { width: min(86%, 60rem); }
  .hero-title {
    font-size: clamp(32px, 6.6vw, 88px);
    line-height: 1.03;
    letter-spacing: -0.025em;
  }

  /* ---- Facts & Figures (dark block, first below the hero) --------------- */
  .facts {
    background: var(--ink);
    color: var(--blue);
    padding: clamp(56px, 9vw, 110px) var(--pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(26px, 4vw, 44px);
  }
  .facts-label {
    grid-column: 1 / -1;
    color: var(--blue);
    font-size: clamp(13px, 1.5vw, 17px);
    letter-spacing: -0.01em;
    margin-bottom: clamp(2px, 1vw, 10px);
  }
  .facts-field { width: auto; color: var(--blue); }
  .facts-heading { color: var(--blue); font-size: clamp(11px, 1.3vw, 12px); letter-spacing: 0.06em; }
  .facts-value {
    color: var(--blue);
    margin-top: clamp(8px, 1.4vw, 12px);
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.3;
  }
  .facts-downloads { margin-top: clamp(12px, 2vw, 16px); flex-wrap: wrap; gap: 12px; }
  .pill { height: 34px; font-size: 11px; padding: 0 18px; }

  /* ---- About (light block) --------------------------------------------- */
  .about {
    background: var(--blue);
    color: var(--ink);
    padding: clamp(56px, 10vw, 132px) var(--pad);
  }
  .about-label {
    color: var(--ink);
    font-size: clamp(13px, 1.5vw, 17px);
    letter-spacing: -0.01em;
    margin-bottom: clamp(16px, 2.4vw, 28px);
  }
  .about-heading {
    color: var(--ink);
    font-size: clamp(28px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    margin-bottom: clamp(28px, 5vw, 52px);
  }
  .about-image {
    width: 100%;
    height: auto;
    aspect-ratio: 655 / 509;
    object-fit: cover;
    margin-bottom: clamp(28px, 5vw, 56px);
  }
  .about-body {
    color: var(--ink);
    max-width: min(100%, 620px);
    font-size: clamp(16px, 2.1vw, 18px);
    line-height: 1.55;
  }

  /* ---- Patches (decorative) — reset the desktop canvas positioning ------ */
  .sticker {
    position: relative;
    left: auto; top: auto;
    z-index: 1;
    display: block;
  }
  .sticker__rot,
  .sticker--smiley .sticker__box,
  .sticker--diamond .sticker__box { width: 100%; height: 100%; }
  .sticker--diamond {                         /* lead brand mark, top of facts */
    width: clamp(72px, 15vw, 112px);
    height: clamp(72px, 15vw, 112px);
    margin: 0 0 clamp(8px, 2vw, 20px) 0;
  }
  .sticker--smiley {                          /* top-right of the about block  */
    width: clamp(76px, 16vw, 116px);
    height: clamp(76px, 16vw, 116px);
    margin: 0 0 clamp(20px, 4vw, 34px) auto;
  }
  .sticker--globe {                           /* directly under the CTA        */
    width: clamp(56px, 12vw, 84px);
    height: clamp(56px, 12vw, 84px);
    margin: 0 0 clamp(44px, 8vw, 92px) 0;
  }
  .sticker--noa { display: none; }            /* desktop edge accent only      */

  /* ---- Connect: CTA + partners + contacts ------------------------------ */
  .connect {
    background: var(--ink);
    color: var(--blue);
    padding: clamp(64px, 11vw, 140px) var(--pad);
  }

  .cta {
    color: var(--blue);
    font-size: clamp(28px, 5.2vw, 63px);
    line-height: 1.06;
    letter-spacing: -0.012em;
    margin-bottom: clamp(16px, 3vw, 24px);    /* tightened — globe sits below  */
  }

  .partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
    margin-bottom: clamp(44px, 8vw, 96px);
  }
  .partner--kf  { width: clamp(150px, 24vw, 198px); height: auto; aspect-ratio: 198 / 47;  }
  .partner--jll { width: clamp(110px, 17vw, 167px); height: auto; aspect-ratio: 167 / 103; }
  .partner--bt  { width: clamp(150px, 24vw, 199px); height: auto; aspect-ratio: 199 / 68;  }

  .contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(28px, 4vw, 44px);
  }
  .contact {
    color: var(--blue);
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.5;
  }

  /* ---- Footer ----------------------------------------------------------- */
  .site-footer {
    background: var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    padding: clamp(28px, 5vw, 56px) var(--pad)
             max(clamp(28px, 5vw, 56px), env(safe-area-inset-bottom));
  }
  .logo-footer { width: clamp(120px, 16vw, 182px); height: auto; aspect-ratio: 182 / 63; }
  .copyright {
    color: var(--blue);
    white-space: normal;
    text-align: right;
    font-size: clamp(11px, 1.4vw, 16px);
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
}

/* =========================================================================
   PHONE  (≤600px)  — single column, compact
   ========================================================================= */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(30px, 8.5vw, 46px); }
  /* centred 2-column cluster → moderate tiles */
  .effect-stage img.format1 { width: 46vw; }
  .effect-stage img.format2 { width: 42vw; }
  .effect-stage img.format3 { width: 38vw; }
  .effect-stage img.format4 { width: 34vw; }
  .effect-stage img.format5 { width: 30vw; }

  .partners { gap: clamp(24px, 7vw, 36px); }
  .partner--kf  { width: clamp(150px, 46vw, 190px); }
  .partner--bt  { width: clamp(158px, 50vw, 200px); }
  .partner--jll { width: clamp(104px, 32vw, 140px); }

  .contacts { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 40px); }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 6vw, 28px);
  }
  .copyright { text-align: left; }
}

/* =========================================================================
   TERMS & CONDITIONS PAGE  (Figma: Terms, 1440 × 1733)
   --------------------------------------------------------------------------
   Same system as the home page. The header sits in normal flow (3.8rem
   padding + 6.3rem logo = 10.1rem tall), and `.stage--terms` reproduces the
   rest of the frame 1:1 — every `top` is the Figma y minus the 101px header
   height, ÷10. The whole page is one light band, so the footer here uses the
   dark logo and black type (overrides scoped via `.page-terms`).
   ========================================================================= */
.stage--terms { height: 163.2rem; }         /* frame 1733 − 101 header, ÷10 */

.terms { display: contents; }

.terms-label {
  position: absolute;
  left: 3.8rem;                             /* aligns with the header logo   */
  top: 11.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 4.1rem;
  letter-spacing: -0.017rem;
  color: var(--ink);
}

.terms-body {
  position: absolute;
  left: 39rem;                              /* same column as the home facts */
  top: 11.4rem;
  width: 63.7rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 3.6rem;
  color: var(--ink);
}
.terms-body p + p { margin-top: 3.6rem; }   /* paragraph gap = one blank line */
.terms-lead { font-weight: 500; }

/* Footer on the light band: dark logo (set in markup) + black type. */
.page-terms .logo-footer { top: 151.6rem; }
.page-terms .copyright   { top: 153rem; color: var(--black); }

@media (max-width: 1024px) {
  .stage--terms { height: auto; }

  .terms {
    display: block;
    padding: clamp(40px, 8vw, 96px) var(--pad) clamp(64px, 12vw, 160px);
  }
  .terms-label,
  .terms-body {
    position: static;
    left: auto; top: auto;
    width: auto;
  }
  .terms-label {
    font-size: clamp(13px, 1.5vw, 17px);
    letter-spacing: -0.01em;
    margin-bottom: clamp(20px, 4vw, 40px);
  }
  .terms-body {
    max-width: 640px;
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.8;
  }
  .terms-body p + p { margin-top: 1.8em; }

  /* this page's footer stays on the light band (home's is dark) */
  .page-terms .site-footer { background: var(--blue); }
  .page-terms .copyright { color: var(--black); }
}

/* =========================================================================
   404 PAGE — utility page, simple flow layout in the brand language
   ========================================================================= */
.notfound {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 5rem 12rem 3.9rem;
}
.notfound-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 7.2rem;
  line-height: 1;
  letter-spacing: -0.216rem;
  color: var(--ink);
}
.notfound-copy {
  margin-top: 3rem;
  font-family: var(--font-body);
  font-size: 2.2rem;
  line-height: 3.6rem;
  color: var(--ink);
}
.notfound-link {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 3.6rem;
}
.notfound-link a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.02em;
}

@media (max-width: 1024px) {
  .notfound { padding: clamp(64px, 14vw, 140px) var(--pad); }
  .notfound-title {
    font-size: clamp(32px, 6.6vw, 88px);
    line-height: 1.03;
    letter-spacing: -0.025em;
  }
  .notfound-copy,
  .notfound-link { font-size: clamp(16px, 2.2vw, 22px); line-height: 1.7; }
}

/* =========================================================================
   Interactive states (not specified in Figma; subtle & on-brand)
   ========================================================================= */
@media (hover: hover) {
  .cta a, .copyright a, .contact a,
  .logo-header, .logo-footer, .nav-tag, .pill { transition: opacity 0.2s ease; }

  .cta a:hover, .copyright a:hover, .contact a:hover,
  .logo-header:hover, .logo-footer:hover, .pill:hover { opacity: 0.65; }
  .contact a:hover { text-decoration: underline; text-underline-offset: 0.02em; }
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}