/* =========================================================================
   Viva North AS - static site stylesheet
   Dark, cinematic investment-company site. No build step, no external requests.
   Single accent (antique gold) locked across the whole page.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Self-hosted type

   Open Sans, served from this project. Nothing is fetched from a CDN.

   Two weights ship, and only two: Regular carries every heading and every
   paragraph (headings are set at 400 by design, not bold), SemiBold carries
   the uppercase labels, buttons and nav. Declaring the real 600 file stops
   the browser synthesising a bold, which smears the wide letter-spacing
   those labels rely on.

   Licensed under the SIL Open Font License 1.1. The licence text ships
   alongside the fonts at assets/fonts/OFL.txt, as the OFL requires.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Latin plus the Norwegian characters, so the browser can skip the file
     entirely on pages that never use them. */
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */

:root {
  /* --- Palette: near-black blue-charcoal base, one antique-gold accent --- */
  --bg:            #0a0d11;  /* page base                                   */
  --bg-raised:     #0e131a;  /* alternating section                         */
  --surface:       #131b24;  /* cards                                       */
  --surface-2:     #18222d;  /* card hover / insets                         */
  --line:          #212c37;  /* hairline on dark                            */
  --line-strong:   #33414f;  /* stronger divider                            */

  --gold:          #c7a45f;  /* primary accent            (8.4:1 on --bg)   */
  --gold-bright:   #ddc287;  /* large display accent / hover                */
  --gold-deep:     #a2803c;  /* pressed / fine detail                       */

  --text:          #edeff2;  /* primary text              (15.9:1)          */
  --text-soft:     #a9b2bc;  /* secondary text            (8.9:1)           */
  --text-mute:     #808b96;  /* captions, eyebrows        (4.7:1)           */
  --on-gold:       #10140a;  /* text on a gold fill       (8.1:1)           */

  /* --- Typography ---
     Open Sans is self-hosted (see section 0) and carries the whole page.
     The three roles are kept as separate tokens even though they now resolve
     to one family: they mark intent, so a future second face can be dropped
     into one role without hunting through the rules that use it.
     The fallbacks below are only used during the swap or if a file fails. */
  --font-display: "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;
  --font-serif:   "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;
  --font-sans:    "Open Sans", "Segoe UI Variable Text", "Segoe UI", system-ui,
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
                  sans-serif;

  /* --- Fluid type scale --- */
  --step--2: clamp(0.72rem,  0.70rem + 0.09vw, 0.78rem);
  --step--1: clamp(0.82rem,  0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem,     0.97rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.15rem,  1.09rem + 0.28vw, 1.32rem);
  --step-2:  clamp(1.4rem,   1.28rem + 0.55vw, 1.75rem);
  --step-3:  clamp(1.75rem,  1.5rem  + 1.15vw, 2.5rem);
  --step-4:  clamp(2.3rem,   1.9rem  + 1.9vw,  3.4rem);
  --step-5:  clamp(2.9rem,   2.2rem  + 3.3vw,  5rem);

  --tracking-wide:  0.16em;
  --tracking-wider: 0.28em;

  /* --- Layout --- */
  --content-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --header-height: 5rem;
  --section-space: clamp(4.5rem, 9vw, 9rem);

  --radius: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; }

p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
address { font-style: normal; }
blockquote { margin: 0; }
dl, dd, dt, figure { margin: 0; }
img { max-width: 100%; }

::selection { background-color: var(--gold); color: var(--on-gold); }

/* -------------------------------------------------------------------------
   3. Focus, skip link, utilities
   ------------------------------------------------------------------------- */

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

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

.skip-link {
  position: absolute;
  left: var(--gutter); top: 0;
  z-index: 100;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background-color: var(--gold);
  color: var(--on-gold);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { transform: translateY(0.5rem); }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--content-width));
  margin-inline: auto;
}

/* Shared small label: eyebrow / section wayfinding, also matches nav anchors */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: var(--gold);
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   4. Brand mark (compass-north monogram, gold)
   ------------------------------------------------------------------------- */

.mark {
  width: 2.1rem; height: 2.1rem;
  flex: none;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.mark__ring  { stroke: var(--gold); stroke-width: 0.9; opacity: 0.45; }
.mark__north { stroke: var(--gold); stroke-width: 2; }
.mark__south { stroke: var(--gold-deep); stroke-width: 2; opacity: 0.85; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.brand__name b { font-weight: 400; color: var(--gold); }

/* -------------------------------------------------------------------------
   5. Site header (transparent over hero, solid once scrolled)
   ------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(10, 13, 17, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--line);
}

.site-header__inner {
  width: min(100% - (var(--gutter) * 2), var(--content-width));
  margin-inline: auto;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.5rem);
}

@media (max-width: 480px) {
  .brand__name { font-size: 0.92rem; letter-spacing: 0.1em; }
  .lang__btn { padding: 0.35rem 0.5rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.site-nav__list a {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.site-nav__list a:hover { color: var(--text); }
.site-nav__list a:hover::after { transform: scaleX(1); }

/* Language switch */
.lang {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang__btn {
  appearance: none;
  border: 0; margin: 0;
  padding: 0.4rem 0.7rem;
  background-color: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.lang__btn + .lang__btn { border-left: 1px solid var(--line-strong); }
.lang__btn:hover { color: var(--text); }
.lang__btn.is-active { background-color: var(--gold); color: var(--on-gold); }

/* Mobile menu button */
.nav-toggle {
  display: none;
  appearance: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem; height: 1.5px;
  background-color: currentColor;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0;
}
.nav-toggle__bars::before { top: -0.36rem; }
.nav-toggle__bars::after  { top: 0.36rem; }

@media (max-width: 940px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    display: none;
    background-color: rgba(10, 13, 17, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.75rem;
  }
  .js .site-header.is-open { background-color: rgba(10, 13, 17, 0.97); border-bottom-color: transparent; }
  .js .site-header.is-open .site-nav { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li + li a { border-top: 1px solid var(--line); }
  .site-nav__list a { padding: 0.95rem 0; font-size: var(--step-0); color: var(--text); }
  .site-nav__list a::after { display: none; }
}
@media (max-width: 940px) {
  .no-js .site-header { position: absolute; }
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              transform 0.12s var(--ease-out);
}
.button--primary { background-color: var(--gold); color: var(--on-gold); }
.button--primary:hover { background-color: var(--gold-bright); border-color: var(--gold-bright); }
.button--ghost { background-color: transparent; color: var(--gold); }
.button--ghost:hover { background-color: rgba(199, 164, 95, 0.1); }
.button:active { transform: translateY(1px); }
.button__arrow { transition: transform 0.2s var(--ease-out); }
.button:hover .button__arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  isolation: isolate;
}

/* Atmosphere: layered aurora curtains + a vignette, all behind the content.
   Signature element. Northern lights for the North; drawn in CSS so there is
   no photo of a facility the company does not own, and no network request.
   An optional real photo can drop into .hero__photo below. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 70% -10%, #16202b 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 10%, #10161d 0%, transparent 60%),
    linear-gradient(180deg, #0b0f14 0%, var(--bg) 70%);
}
.hero__aurora {
  position: absolute;
  z-index: -1;
  top: -20%; right: -10%;
  width: 90%; height: 90%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(120, 200, 150, 0.16), transparent 70%),
    radial-gradient(closest-side, rgba(90, 170, 190, 0.14), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
}
.hero__aurora::before,
.hero__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 200deg at 60% 40%,
      transparent 0deg,
      rgba(126, 205, 155, 0.22) 60deg,
      rgba(96, 178, 196, 0.18) 130deg,
      transparent 220deg);
  filter: blur(50px);
  mix-blend-mode: screen;
  transform-origin: 60% 40%;
}
.hero__aurora::after {
  background:
    conic-gradient(from 40deg at 40% 55%,
      transparent 0deg,
      rgba(150, 190, 130, 0.16) 70deg,
      transparent 200deg);
  opacity: 0.7;
}

/* Optional real photo. Hidden unless main.js confirms the file loaded. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hero__photo.is-loaded { opacity: 0.55; }
.hero__photo.is-loaded + .hero__scrim { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(90deg, rgba(10,13,17,0.92) 0%, rgba(10,13,17,0.6) 45%, rgba(10,13,17,0.35) 100%);
}

.hero__body { max-width: 60rem; padding-block: 3rem; }

.hero__title {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__title .accent {
  display: block;
  color: var(--gold);
}

.hero__lede {
  margin-top: 1.9rem;
  max-width: 46ch;
  font-size: var(--step-1);
  color: var(--text-soft);
}

.hero__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* -------------------------------------------------------------------------
   8. Section shell
   ------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-space);
  scroll-margin-top: var(--header-height);
}
.section--raised { background-color: var(--bg-raised); }
.section__head { max-width: 46ch; }
.section__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section__lede {
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-soft);
}

/* -------------------------------------------------------------------------
   9. Domains band (replaces the mockup's fabricated stat band)
   ------------------------------------------------------------------------- */

.domains {
  border-block: 1px solid var(--line);
}
.domains__lede {
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-soft);
}
.domains__lede b { color: var(--text); font-weight: 400; }
.domains__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
}
.domain {
  background-color: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.domain__icon {
  width: 2.5rem; height: 2.5rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.domain__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.domain__text { font-size: var(--step--1); color: var(--text-mute); }

@media (min-width: 640px) { .domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .domains__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------------
   10. Investments (four holdings, bento grid)
   ------------------------------------------------------------------------- */

.section__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.holdings {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.holding {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.holding:hover {
  border-color: var(--gold-deep);
  background-color: var(--surface-2);
  transform: translateY(-3px);
}
.holding::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(1.75rem, 3vw, 2.75rem);
  width: 2px; height: 2.25rem;
  background-color: var(--gold);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.holding:hover::before { opacity: 1; }

.holding__sector {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.holding__name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.holding__text {
  margin-top: 1.1rem;
  color: var(--text-soft);
  max-width: 52ch;
}
.holding__list {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.holding__list li {
  font-size: var(--step--1);
  color: var(--text-soft);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

/* Outbound link to the portfolio company. margin-top:auto pins it to the
   foot of the card so the links line up across cards of differing height. */
.holding__link {
  margin-top: auto;
  padding-top: 1.75rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
}
.holding__link > span:first-child {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}
.holding__link:hover > span:first-child { border-bottom-color: var(--gold); }

.holding__link-icon {
  width: 0.7em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease-out);
}
.holding__link:hover .holding__link-icon { transform: translate(2px, -2px); }

@media (min-width: 800px) {
  .holdings { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   11. About (split)
   ------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.about__body { max-width: 54ch; }
.about__text { margin-top: 1.5rem; display: grid; gap: 1.15rem; color: var(--text-soft); }
.about__actions { margin-top: 2.25rem; }

.about__figure {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 22rem;
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(199, 164, 95, 0.10), transparent 60%),
    linear-gradient(160deg, #141c26 0%, #0c1116 100%);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.about__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fallback motif when no photo present: a large ghosted compass mark */
.about__motif {
  width: min(60%, 16rem);
  height: auto;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1.05fr 0.95fr; }
  .about__figure { min-height: 30rem; }
}

/* -------------------------------------------------------------------------
   12. Approach (a genuine sequence, so numbers earn their place)
   ------------------------------------------------------------------------- */

.approach__steps {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  display: grid;
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
  counter-reset: step;
}
.step {
  background-color: var(--bg-raised);
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  counter-increment: step;
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-deep);
  text-stroke: 1px var(--gold-deep);
}
.step__num::before { content: "0" counter(step); }
.step__name {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.step__text { margin-top: 0.9rem; color: var(--text-soft); }

.approach__note {
  margin-top: clamp(2.5rem, 4vw, 3rem);
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--text-mute);
}

@media (min-width: 800px) {
  .approach__steps { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   13. Contact
   ------------------------------------------------------------------------- */

.contact__grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.contact__item h3 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.contact__item p, .contact__item address {
  margin-top: 0.9rem;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
}
.contact__item a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; transition: text-decoration-color 0.2s var(--ease-out); }
.contact__item a:hover { text-decoration-color: var(--gold); }
.contact__role { font-size: var(--step--1) !important; font-family: var(--font-sans) !important; color: var(--text-mute) !important; margin-top: 0.35rem !important; }

@media (min-width: 700px) { .contact__grid { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background-color: var(--bg);
}
.site-footer__top {
  display: grid;
  gap: 2.5rem;
}
.site-footer__brand { max-width: 30ch; }
.site-footer__brand .brand { margin-right: 0; }
.site-footer__tag { margin-top: 1.25rem; color: var(--text-mute); font-size: var(--step--1); }

.footer-col h4 {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 1.1rem;
}
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { color: var(--text-soft); text-decoration: none; font-size: var(--step--1); transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--gold); }
.footer-col p { color: var(--text-soft); font-size: var(--step--1); }

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  font-size: var(--step--2);
  color: var(--text-mute);
}
.site-footer__legal { display: flex; gap: 1.5rem; margin-left: auto; }
.site-footer__legal a { color: var(--text-mute); text-decoration: none; transition: color 0.2s var(--ease-out); }
.site-footer__legal a:hover { color: var(--gold); }

/* Compact footer for the standalone legal pages */
.site-footer--compact { padding-block: 2.5rem; }
.site-footer--compact .site-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 3rem;
  }
}

/* -------------------------------------------------------------------------
   15. Standalone legal pages
   ------------------------------------------------------------------------- */

.page { padding-block: calc(var(--header-height) + clamp(2.5rem, 6vw, 4.5rem)) var(--section-space); }
.page__title { font-family: var(--font-display); font-size: var(--step-4); text-transform: uppercase; letter-spacing: 0.01em; max-width: 20ch; }
.page__updated { margin-top: 1rem; font-size: var(--step--1); color: var(--text-mute); }
.page__body { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: var(--measure); display: grid; gap: 2.5rem; }
.page__body h2 { font-family: var(--font-display); font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.9rem; }
.page__body h3 { margin: 1.75rem 0 0.5rem; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold); }
.page__body p { color: var(--text-soft); }
.page__body p + p { margin-top: 0.9rem; }
.page__body a { color: var(--text); text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); transition: text-decoration-color 0.2s var(--ease-out); }
.page__body a:hover { text-decoration-color: var(--gold); }
.page__body ul { margin-top: 0.9rem; display: grid; gap: 0.6rem; color: var(--text-soft); }
.page__body li { position: relative; padding-left: 1.5rem; }
.page__body li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.75rem; height: 1px; background-color: var(--gold); }
.page__links { margin-top: clamp(3rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--step--1); }
.page__links a { color: var(--text-soft); text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); transition: color 0.2s var(--ease-out); }
.page__links a:hover { color: var(--gold); }

/* -------------------------------------------------------------------------
   16. Motion: scroll reveal + aurora drift
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  .hero__aurora::before { animation: aurora-drift-1 22s ease-in-out infinite alternate; }
  .hero__aurora::after  { animation: aurora-drift-2 28s ease-in-out infinite alternate; }
}

@keyframes aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 0.9; }
  100% { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.12); opacity: 1; }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); opacity: 0.6; }
  100% { transform: translate3d(5%, -2%, 0) rotate(-6deg) scale(1); opacity: 0.85; }
}