/* ==========================================================================
   Matariki Stars Limited
   Design language: dark navy-black base, single cyan interface accent,
   gold reserved as the rare brand colour. Orbitron display / Rajdhani body.
   ========================================================================== */

:root {
  /* Base */
  --navy:        #060a14;
  --navy-raise:  #0a1120;
  --panel:       rgba(11, 19, 34, 0.55);

  /* Text — warm white */
  --text:        #f2efe8;
  --text-soft:   rgba(242, 239, 232, 0.80);
  --text-faint:  rgba(242, 239, 232, 0.52);

  /* Interface accent */
  --cyan:        #4fb7ff;
  --cyan-line:   rgba(79, 183, 255, 0.22);
  --cyan-line-2: rgba(79, 183, 255, 0.38);
  --cyan-glow:   rgba(79, 183, 255, 0.09);

  /* Brand accent — rare */
  --gold:        #e2c283;
  --gold-lo:     #b8914f;
  --gold-hi:     #f6e6bd;

  /* Rhythm */
  --gutter:      clamp(1.5rem, 5vw, 3rem);
  --measure:     64rem;
  --section-y:   clamp(5rem, 10vw, 8.5rem);

  /* Motion — one curve for everything, so the page moves as one object */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: rgba(79, 183, 255, 0.28) transparent;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.075rem, 0.4vw + 1rem, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { text-wrap: pretty; }

::selection { background: rgba(79, 183, 255, 0.28); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(79, 183, 255, 0.22);
  border: 3px solid var(--navy);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan-line-2); }

/* Fine grain over everything. Two jobs: it kills the banding that large dark
   gradients produce on 8-bit displays, and it gives the flat navy a surface.
   Without it the background reads as an empty colour swatch. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient field: a faint technical grid, faded out toward the edges,
   plus one low cyan bloom behind the hero. Decoration, not pattern. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(var(--cyan-line) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, var(--cyan-line) 1px, transparent 1px) 0 0 / 88px 100%;
  opacity: 0.13;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: -20% 0 auto 0;
  height: 70vh;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 40%, var(--cyan-glow), transparent 70%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- Utilities */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--navy-raise);
  border: 1px solid var(--cyan-line-2);
  color: var(--cyan);
}
.skip-link:focus { left: 1rem; top: 1rem; }

:where(a, button):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scroll reveal. Content is visible by default and only hidden once the
   script confirms it can restore it — so with JS off, nothing disappears. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Display */

.eyebrow,
.label,
.nav a,
.panel__idx {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(0.6rem, 1.4vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1.9;
  color: var(--cyan);
}

.label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--cyan);
}
.wrap--center .label { justify-content: center; }
.label__idx { color: var(--text-faint); }
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 7rem;
  background: linear-gradient(90deg, var(--cyan-line-2), transparent);
}
.wrap--center .label::after { display: none; }

.h2 {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.h2--tight { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* -------------------------------------------------------------------- Logo */

/* The supplied lockup, trimmed of its transparent padding. Sized by height;
   width follows the 7.15:1 aspect. It is the page's brand element — the only
   gold-bearing mark in the top bar, and deliberately the only thing there. */
.logo { display: inline-block; text-decoration: none; line-height: 0; }
.logo__img {
  display: block;
  height: clamp(31px, 4.6vw, 46px);
  width: auto;
  max-width: 100%;
  opacity: 0.94;
  transition: opacity .3s var(--ease);
}
.logo:hover .logo__img,
.logo:focus-visible .logo__img { opacity: 1; }

.logo__img--footer { height: clamp(33px, 5vw, 50px); margin-bottom: 0.45rem; }

/* ------------------------------------------------------------------ Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Once the page has moved, the bar commits: it takes an edge and a faint
   glow. At the top it stays open so the hero is not boxed in. */
.topbar.is-stuck {
  background: rgba(6, 10, 20, 0.86);
  border-bottom-color: var(--cyan-line);
  box-shadow: 0 1px 24px -12px var(--cyan);
}
/* The bar runs the full width rather than sitting inside the 64rem content
   column, so the logo hugs the page gutter instead of aligning to the hero
   frame below it. Set max-width back to var(--measure) to undo. */
.topbar__inner {
  max-width: none;
  margin-inline: auto;
  /* --bar-inset nudges the logo in from the page gutter (and the nav in from
     the right by the same amount). Raise it to move the logo further right. */
  --bar-inset: clamp(0.5rem, 2vw, 1.75rem);
  padding: 1.15rem calc(var(--gutter) + var(--bar-inset));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav a {
  position: relative;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-soft);
  text-decoration: none;
  padding-bottom: 0.35rem;
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
}
/* Rule grows from the left rather than switching on — the difference between
   a state change and a movement is most of what "considered" means here. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover,
.nav a:focus-visible {
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan-glow);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 33rem) { .nav { display: none; } }

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

.hero {
  display: flex;
  align-items: center;
  min-height: min(78vh, 46rem);
  padding: clamp(4rem, 12vw, 8rem) var(--gutter) clamp(4rem, 10vw, 7rem);
}
.hero__frame {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 5.5vw, 4rem) clamp(1.75rem, 4.5vw, 3.5rem);
  background:
    linear-gradient(180deg, rgba(13, 22, 40, 0.6), rgba(6, 10, 20, 0.15));
  border: 1px solid var(--cyan-line);
  box-shadow: 0 0 40px -30px var(--cyan), inset 0 0 90px -62px var(--cyan);
}
/* A brighter hairline along the top edge only, falling away to the right.
   Reads as a lit edge rather than a drawn border. */
.hero__frame::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-line-2) 32%, transparent 72%);
}
/* Corner marks on all four corners — eight background layers on one
   pseudo-element, so no extra markup. The panel reads as an instrument. */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 1px 15px, 15px 1px, 1px 15px, 15px 1px,
                   1px 15px, 15px 1px, 1px 15px, 15px 1px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.hero__title {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: balance;
}
.hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.8;
}

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

.section { padding-block: var(--section-y); }
.section--intro { padding-top: clamp(2rem, 5vw, 3.5rem); }

.intro__body { max-width: 52ch; }
.lead {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--text-soft);
}

/* A divider that is lit rather than drawn. */
.rule {
  height: 1px;
  max-width: var(--measure);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--cyan-line-2) 22%, var(--cyan-line-2) 78%, transparent);
  box-shadow: 0 0 14px -4px var(--cyan);
}

/* ------------------------------------------------------------ What we do */

.panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem) clamp(2rem, 3vw, 2.75rem);
  background: linear-gradient(180deg, rgba(13, 22, 40, 0.55), rgba(8, 13, 24, 0.3));
  border: 1px solid var(--cyan-line);
  box-shadow: inset 0 0 50px -34px var(--cyan);
  overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
/* A lit bar across the top edge that widens on hover. The panel powers up
   rather than merely highlighting. */
.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .panel:hover {
    border-color: var(--cyan-line-2);
    box-shadow: 0 0 26px -16px var(--cyan), inset 0 0 50px -28px var(--cyan);
    transform: translateY(-3px);
  }
  .panel:hover::before { transform: scaleX(1); }
}
.panel__idx {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--cyan);
}
.panel__idx::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-line), transparent);
}
.panel__title {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0 0 0.9rem;
}
.panel__copy {
  margin: 0;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.7;
}

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

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.split__head { margin: 0; }
.split__body { max-width: 56ch; }
.split__body p {
  margin: 0 0 1.4rem;
  font-weight: 400;
  color: var(--text-soft);
}
.split__body p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- Contact */

.section--contact { padding-block: clamp(5.5rem, 12vw, 9rem); }
.section--contact .h2 { max-width: 40ch; margin-inline: auto; }
@media (max-width: 40rem) { .br-md { display: none; } }

/* ---- Enquiry form -------------------------------------------------------
   The form sits in the same lit panel as the hero — bordered hairline, low
   inset glow, corner marks — so it reads as part of the instrument rather
   than a set of loose underlines floating in the section. */

.form {
  position: relative;
  max-width: 42rem;
  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 2.75rem);
  text-align: left;
  background: linear-gradient(180deg, rgba(13, 22, 40, 0.6), rgba(6, 10, 20, 0.2));
  border: 1px solid var(--cyan-line);
  /* Softer than the hero's: the same spread on a smaller panel reads as a
     much heavier bloom, so it is dialled back to match optically. */
  box-shadow: 0 0 34px -28px var(--cyan), inset 0 0 70px -58px var(--cyan);
}
.form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan-line-2) 32%, transparent 72%);
}
.form::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 1px 15px, 15px 1px, 1px 15px, 15px 1px,
                   1px 15px, 15px 1px, 1px 15px, 15px 1px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.form__row {
  display: grid;
  gap: 0 clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 38rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { margin: 0 0 clamp(1.1rem, 2.5vw, 1.5rem); }
.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.field__opt {
  margin-left: 0.45rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}

/* Boxed rather than underlined: at this size an underline alone reads as
   an afterthought, and the box echoes the What We Do panels. */
.field__input {
  display: block;
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: rgba(6, 10, 20, 0.55);
  border: 1px solid var(--cyan-line);
  border-radius: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field__area { resize: vertical; min-height: 6.5rem; }

.field__input::placeholder { color: var(--text-faint); }
.field__input:hover { border-color: var(--cyan-line-2); }
.field__input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(6, 10, 20, 0.75);
  box-shadow: 0 0 18px -8px var(--cyan), inset 0 0 30px -22px var(--cyan);
}
/* Keyboard users still get the standard ring; the glow alone is too quiet. */
.field__input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* :user-invalid, not :invalid — an untouched required field is technically
   invalid, and marking it red before anyone has typed is just scolding. */
.field__input:user-invalid { border-color: rgba(255, 138, 128, 0.65); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--cyan-line);
}

.btn {
  position: relative;
  overflow: hidden;
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(226, 194, 131, 0.4);
  padding: 0.95rem 2.1rem;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* The fill wipes in from the left instead of fading — same reasoning as the
   nav rule. It is the page's single action, so it earns the detail. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(226, 194, 131, 0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
  z-index: -1;
}
.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled) {
  color: var(--gold-hi);
  border-color: var(--gold);
  box-shadow: 0 0 24px -14px var(--gold);
}
.btn:hover:not(:disabled)::before,
.btn:focus-visible:not(:disabled)::before { transform: scaleX(1); }
.btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 30rem) { .btn { width: 100%; } }

.form__alt {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-faint);
}
.form__alt a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-line-2);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.form__alt a:hover, .form__alt a:focus-visible { color: var(--cyan); border-bottom-color: var(--cyan); }

.form__status {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form__status:empty { margin: 0; }
.form__status--pending { color: var(--text-faint); }
.form__status--ok      { color: var(--cyan); }
.form__status--error   { color: #ff9a90; }

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

.footer {
  position: relative;
  border-top: 1px solid var(--cyan-line);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  background: rgba(4, 7, 14, 0.6);
}
/* Matches the hero's lit top edge, so the page closes the way it opened. */
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-line-2) 40%, transparent 85%);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem clamp(2rem, 6vw, 4rem);
  align-items: flex-start;
  justify-content: space-between;
}
.footer__brand,
.footer__legal { display: flex; flex-direction: column; gap: 0.35rem; }
.footer__legal { text-align: left; }
@media (min-width: 52rem) { .footer__legal { text-align: right; align-items: flex-end; } }

.footer__meta {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-faint);
}
.footer a {
  font-size: 0.9rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer a:hover,
.footer a:focus-visible { color: var(--cyan); border-bottom-color: var(--cyan-line-2); }

/* -------------------------------------------------------- Legal / Privacy */

.legal { padding-block: clamp(3rem, 8vw, 6rem) var(--section-y); }
.legal__body { max-width: 60ch; }
.legal__body h2 {
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  letter-spacing: 0.01em;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0.9rem;
}
.legal__body p, .legal__body li {
  font-weight: 400;
  color: var(--text-soft);
}
.legal__body p { margin: 0 0 1.2rem; }
.legal__body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.legal__body li { margin-bottom: 0.4rem; }
.legal__body a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--cyan-line-2); }
.legal__updated {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.backlink {
  display: inline-block;
  margin-top: clamp(3rem, 6vw, 4rem);
  font-family: "Orbitron", "Rajdhani", system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.backlink:hover, .backlink:focus-visible { border-bottom-color: var(--cyan-line-2); }