/* ==========================================================================
   MPG Living — stylesheet
   Design tokens live in :root. Change a color or font there and the whole
   site follows.
   ========================================================================== */

:root {
  /* Palette — from the logo's stripe: pale sky → sky → vivid blue → navy,
     set on a cool ivory ground with a warm amber "beacon" accent */
  --ground:    #f5f8fc;
  --ground-2:  #e9f1fa;
  --ink:       #0b1b3a;
  --navy:      #12305e;
  --navy-deep: #081533;
  --blue:      #0462c9;
  --sky:       #75aefd;
  --pale:      #a7e0fd;
  --amber:     #f0a63a;
  --line:      rgba(11, 27, 58, 0.12);
  --line-light: rgba(245, 248, 252, 0.16);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --slant: -12deg;          /* the logo's stripe angle, reused everywhere */
  --container: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

/* Hidden by default; shown only on phones (inside a mobile media query further
   down) to force a line break at a specific word without affecting desktop.
   Must stay ABOVE that media query in the file — a same-specificity rule that
   comes later in the cascade wins regardless of which media query matches. */
.mobile-break { display: none; }
.section { padding-block: clamp(84px, 11vw, 160px); position: relative; }

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 10px;
  background: linear-gradient(90deg, var(--pale) 0 25%, var(--sky) 25% 50%, var(--blue) 50% 75%, var(--navy) 75%);
  transform: skewX(var(--slant));
  flex: none;
}
.eyebrow-light { color: var(--pale); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 16ch;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--blue); }
.display-xl { font-size: clamp(2.5rem, 5.6vw, 4.8rem); max-width: 15ch; }

.section-head { margin-bottom: clamp(48px, 6vw, 84px); }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.55; font-weight: 400; }

/* the logo stripe motif as a reusable element */
.stripes { display: inline-flex; gap: 3px; transform: skewX(var(--slant)); }
.stripes i { display: block; width: 6px; height: 14px; }
.stripes i:nth-child(1) { background: var(--pale); }
.stripes i:nth-child(2) { background: var(--sky); }
.stripes i:nth-child(3) { background: var(--blue); }
.stripes i:nth-child(4) { background: var(--navy); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 11px 18px; font-size: 0.85rem; }

.btn-solid {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 30px -14px rgba(4, 98, 201, 0.7);
}
.btn-solid::after {            /* slanted sheen that sweeps across on hover */
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 30%;
  background: rgba(255, 255, 255, 0.18);
  transform: skewX(var(--slant));
  transition: left 0.6s var(--ease-out);
}
.btn-solid:hover::after { left: 120%; }
.btn-solid:hover { background: var(--navy); }

.btn-ghost { border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(245, 248, 252, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* An element with backdrop-filter becomes the containing block for its
   position:fixed descendants. Left on, it collapses the open menu from the
   viewport down to the header bar, spilling the links over the page. The frosted
   bar is redundant while the full-screen menu is up, so drop it. */
body.nav-locked .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-logo { height: 34px; width: auto; transition: height 0.35s var(--ease-out); }
.site-header.is-scrolled .brand-logo { height: 28px; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding-block: 6px;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s var(--ease-out);
}
.nav-cta:hover { background: var(--navy); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 46px; height: 46px;
  padding: 12px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform 0.35s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* While the window is being resized, suppress header transitions. Crossing the
   mobile breakpoint changes the nav's opacity from 1 to 0, which would
   otherwise animate and flash the vertical menu for a moment. */
.is-resizing .site-header,
.is-resizing .site-header * { transition: none !important; }

@media (max-width: 900px) {
  .mobile-break { display: block; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0;
    /* Above the page, below the logo and close button. A negative z-index here
       depended on the header's stacking context and could let page content show
       through once the scrolled header's backdrop-filter was active. */
    z-index: 1;
    flex-direction: column; justify-content: center; gap: 6px;
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(117, 174, 253, 0.22), transparent 70%),
      linear-gradient(180deg, var(--ground) 0%, #eff4fb 45%, var(--ground-2) 100%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .brand, .nav-toggle { position: relative; z-index: 2; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; }
  .site-nav a { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; padding: 8px; }
  .site-nav .nav-cta { margin-top: 20px; font-size: 1rem; padding: 14px 28px; }
  body.nav-locked { overflow: hidden; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(110px, 15vh, 160px) 0 clamp(60px, 8vh, 100px);
  overflow: hidden;
}
.hero::before {                /* faint slanted panel behind the image, echoing the stripe */
  content: "";
  position: absolute;
  top: -10%; bottom: -10%; right: -8%;
  width: 46%;
  background: linear-gradient(180deg, var(--ground-2), rgba(167, 224, 253, 0.35));
  transform: skewX(var(--slant));
  pointer-events: none;
}
.hero-grid {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero-kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: clamp(22px, 3vh, 36px);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  display: grid;
  gap: 4px;
  margin-bottom: clamp(22px, 3vh, 34px);
}
.hero-line { display: block; }
/* Instrument Serif has no bold cut, so "Empowering Lives." is weighted up with a
   hairline stroke instead of a (crude) synthetic bold. */
.hero-line:first-child { -webkit-text-stroke: 0.014em currentColor; }
.hero-line em {
  font-style: italic;
  background: linear-gradient(100deg, var(--blue) 0%, var(--sky) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede { max-width: 54ch; color: rgba(11, 27, 58, 0.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vh, 44px); }

/* Nudged left so the photo's edge no longer sits exactly on the skewed
   background panel's edge — the two parallel diagonals read as separate,
   overlapping layers rather than one flat shape. */
/* Nudged left so the photo's edge no longer sits exactly on the skewed background
   panel's edge — the two parallel diagonals then read as separate, overlapping
   layers rather than one flat shape. Offset via margins rather than transform,
   because the load-in animation (body.is-loaded [data-load]) owns `transform`
   on this element and would override it. The paired margins shift the box
   without changing its width. */
.hero-media {
  position: relative;
  --hero-shift: clamp(39px, 4.7vw, 73px);
  margin-left: calc(-1 * var(--hero-shift));
  margin-right: var(--hero-shift);
}
.hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  /* The parallelogram must sit at the same angle as the skewed background panel
     (--slant, 12deg). clip-path offsets are a % of WIDTH, so the offset that
     yields 12deg depends on the frame's aspect ratio:
     offset% = tan(12deg) x (height / width) = 0.2126 x 1.25 = 26.57% here. */
  clip-path: polygon(26.57% 0, 100% 0, 73.43% 100%, 0 100%);
  overflow: hidden;
  background: var(--ground-2);
}
.hero-frame img {
  width: 100%; height: 115%;
  object-fit: cover; object-position: center;
  will-change: transform;
  animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns { to { scale: 1.06; } }

.stripes-hero {
  position: absolute;
  left: -34px; bottom: 12%;
  gap: 8px;
}
.stripes-hero i { width: 14px; height: 120px; }
.hero-badge {
  position: absolute;
  right: -10px; bottom: -22px;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35;
  padding: 16px 20px;
  border-radius: 6px;
  box-shadow: 0 24px 50px -24px rgba(8, 21, 51, 0.7);
}
.badge-star { color: var(--amber); font-size: 1.3rem; }

/* load-in choreography */
[data-load] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
body.is-loaded [data-load] { opacity: 1; transform: none; }
body.is-loaded [data-load="2"] { transition-delay: 0.1s; }
body.is-loaded [data-load="3"] { transition-delay: 0.2s; }
body.is-loaded [data-load="4"] { transition-delay: 0.32s; }
body.is-loaded [data-load="5"] { transition-delay: 0.45s; }
body.is-loaded [data-load="6"] { transition-delay: 0.7s; }

@media (max-width: 900px) {
  /* The buttons sit inside .hero-copy, so `display: contents` lifts the copy's
     children into the same flex flow as the photo. That lets the photo be
     ordered between the intro text and the buttons. Each child already carries
     its own spacing, so the grid gap is dropped. */
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-copy { display: contents; }
  .hero-kicker  { order: 1; }
  .hero-title   { order: 2; }
  .hero-lede    { order: 3; }
  /* stacked layout on phones — no horizontal offset needed */
  .hero-media   { order: 4; max-width: 460px; margin-top: clamp(30px, 4.5vh, 44px); margin-left: 0; margin-right: 0; }
  .hero-actions { order: 5; }
  .hero::before { width: 70%; right: -30%; }
  /* Wider frame on phones, so the same 12deg needs a smaller offset:
     tan(12deg) x (height / width) = 0.2126 x 0.8 = 17%. */
  .hero-frame {
    aspect-ratio: 5 / 4;
    clip-path: polygon(17% 0, 100% 0, 83% 100%, 0 100%);
  }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { background: var(--ink); color: var(--ground); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  padding: clamp(28px, 3.5vw, 48px) clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--line-light);
  position: relative;
}
.stat:first-child { border-left: 0; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--pale);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.88rem; color: rgba(245, 248, 252, 0.72); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-light); }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee { border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 16px; background: #fff; }
.marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--navy); white-space: nowrap; }
.marquee b { color: var(--amber); font-size: 0.8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Story (vertical video)
   ========================================================================== */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.story-copy .lede { margin-bottom: 1.2em; }
.story-copy p:not(.lede):not(.eyebrow) { color: rgba(11, 27, 58, 0.78); max-width: 58ch; }
/* The direct Vimeo link is a fallback for anywhere the embed cannot load
   (strict CSP on a preview host, corporate network policy). */
.story-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.story-vimeo {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.story-vimeo:hover { border-bottom-color: var(--blue); }
.story-copy .display { margin-bottom: 26px; }

.story-media { display: flex; justify-content: center; }
.phone {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 9 / 16;
  border-radius: 34px;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 0 0 8px var(--ink),
    0 0 0 9px rgba(255,255,255,0.4),
    0 50px 90px -40px rgba(8, 21, 51, 0.6);
  transform: rotate(-2.5deg);
  transition: transform 0.8s var(--ease-out);
}
.phone:hover { transform: rotate(0deg) scale(1.01); }
.phone-poster { width: 100%; height: 100%; object-fit: cover; }
.phone-play {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.92);
  color: var(--blue);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.5);
  transition: transform 0.45s var(--ease-out), background-color 0.3s ease;
}
.phone-play::before {            /* pulsing ring */
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  animation: ring 2.2s ease-out infinite;
}
@keyframes ring { to { transform: scale(1.5); opacity: 0; } }
.phone-play svg { width: 34px; height: 34px; margin-left: 4px; }
.phone-play:hover { transform: scale(1.08); background: #fff; }
.phone-player { position: absolute; inset: 0; background: #000; }
.phone-player iframe, .phone-player video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.phone.is-playing .phone-poster, .phone.is-playing .phone-play { display: none; }
.phone.is-playing { transform: none; }

@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { order: -1; }
}

/* ==========================================================================
   Mission & values
   ========================================================================== */
.mission { background: #fff; }
.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.mission-copy .display { margin-bottom: 26px; }
.mission-copy .lede { margin-bottom: 1.2em; }
.mission-copy p:not(.lede):not(.eyebrow) { color: rgba(11, 27, 58, 0.78); }

.values { list-style: none; border-top: 1px solid var(--line); }
.value {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: clamp(26px, 3vw, 38px) 8px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  cursor: default;
}
.value::before {                 /* slanted fill that slides in on hover */
  content: "";
  position: absolute; inset: 0 auto 0 -10%;
  width: 0;
  background: var(--ground-2);
  transform: skewX(var(--slant));
  transition: width 0.6s var(--ease-out);
  z-index: 0;
}
.value:hover::before { width: 130%; }
.value > * { position: relative; z-index: 1; }
.value-index { grid-row: 1 / 3; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--amber); }
.value-word { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--ink); transition: transform 0.6s var(--ease-out), color 0.3s ease; }
.value:hover .value-word { transform: translateX(10px); color: var(--blue); }
.value-note { margin-top: 8px; color: rgba(11, 27, 58, 0.66); font-size: 0.98rem; }

@media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Highlights — stacking cards
   ========================================================================== */
.highlights { background: var(--ground-2); }
.highlights-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.highlights-head { position: sticky; top: 120px; }
.highlights-head .display { margin-bottom: 20px; }
.highlights-head > p:not(.eyebrow) { color: rgba(11, 27, 58, 0.7); }
.highlights-index { list-style: none; display: flex; gap: 14px; margin-top: 34px; }
.highlights-index li {
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: rgba(11, 27, 58, 0.35);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.highlights-index li.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.stack { display: grid; gap: 22px; }
.stack-card {
  position: sticky;
  top: calc(120px + var(--i, 0) * 16px);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(30px, 3.6vw, 52px);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 30px 60px -40px rgba(11, 27, 58, 0.45);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out);
}
.stack-card::before {            /* a stripe swatch in each card's corner */
  content: "";
  position: absolute; top: 0; right: 28px;
  width: 44px; height: 14px;
  background: linear-gradient(90deg, var(--pale) 0 25%, var(--sky) 25% 50%, var(--blue) 50% 75%, var(--navy) 75%);
  transform: skewX(var(--slant));
}
.stack-card:nth-child(1) { --i: 0; } .stack-card:nth-child(2) { --i: 1; } .stack-card:nth-child(3) { --i: 2; }
.stack-card:nth-child(4) { --i: 3; } .stack-card:nth-child(5) { --i: 4; } .stack-card:nth-child(6) { --i: 5; }
.card-num { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--amber); margin-bottom: auto; }
.stack-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 26px 0 12px; }
.stack-card p { color: rgba(11, 27, 58, 0.74); max-width: 48ch; }

@media (max-width: 860px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .highlights-head { position: static; }
  .highlights-index { display: none; }
  .stack-card { position: static; min-height: 0; }
}

/* ==========================================================================
   Beacon — dark section with a cursor-following light
   ========================================================================== */
.beacon {
  background: var(--navy-deep);
  color: var(--ground);
  overflow: hidden;
  --mx: 50%; --my: 40%;
}
.beacon-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 420px at var(--mx) var(--my), rgba(240, 166, 58, 0.28), transparent 70%),
    radial-gradient(700px 500px at 80% 110%, rgba(4, 98, 201, 0.35), transparent 70%);
  transition: background-position 0.2s;
  pointer-events: none;
}
.beacon-inner { position: relative; text-align: center; display: grid; justify-items: center; }
.beacon .eyebrow { justify-content: center; }
.beacon-title {
  font-family: var(--font-display);
  /* Instrument Serif ships only weight 400; without this an h2 inherits bold
     and the browser fakes a heavy synthetic bold. */
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}
.beacon-title em { font-style: italic; color: var(--amber); }
.beacon-text { max-width: 60ch; color: rgba(245, 248, 252, 0.8); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }

/* ==========================================================================
   Looking ahead — the proposed facility (still under evaluation)
   ========================================================================== */
.ahead { background: #fff; }
.ahead-head { max-width: 820px; margin-bottom: clamp(40px, 5vw, 66px); }
.ahead-head .display { margin-bottom: 24px; max-width: 20ch; }
.ahead-head .lede { color: rgba(11, 27, 58, 0.8); }

.ahead-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 4.5vw, 72px);
  align-items: start;
}

/* the "spec sheet" panel */
.spec {
  position: relative;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
}
.spec::before {                       /* the logo's stripe motif, as on the stack cards */
  content: "";
  position: absolute; top: 0; right: 26px;
  width: 44px; height: 14px;
  background: linear-gradient(90deg, var(--pale) 0 25%, var(--sky) 25% 50%, var(--blue) 50% 75%, var(--navy) 75%);
  transform: skewX(var(--slant));
}
.spec-list { display: grid; }
.spec-list > div { padding: 15px 0; border-top: 1px solid var(--line); }
.spec-list > div:first-child { border-top: 0; padding-top: 0; }
.spec-list dt {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.spec-list dd { font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.spec-big { font-family: var(--font-display); font-weight: 400 !important; font-size: 2rem !important; line-height: 1 !important; }

/* the services the facility would connect residents with */
.ahead-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  margin-bottom: 14px;
}
.ahead-body > p { color: rgba(11, 27, 58, 0.78); max-width: 62ch; }

.ahead-services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  margin-top: 26px;
}
.ahead-services li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.ahead-services li::before {          /* skewed stripe bullet, matching .detail-list */
  content: "";
  position: absolute; left: 0; top: 1.45em;
  width: 13px; height: 8px;
  background: linear-gradient(90deg, var(--sky) 0 50%, var(--blue) 50%);
  transform: skewX(var(--slant));
}

@media (max-width: 900px) {
  .ahead-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ahead-services { grid-template-columns: 1fr; }
}

/* ==========================================================================
   History
   ========================================================================== */
.history-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.history-media { position: sticky; top: 110px; }
.history-copy .display { margin-bottom: 30px; }
.prose p { color: rgba(11, 27, 58, 0.8); max-width: 64ch; }
.prose p + p { margin-top: 1.1em; }

.portrait {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ground-2);
  box-shadow: 0 40px 80px -44px rgba(11, 27, 58, 0.5);
}
.portrait-wide { aspect-ratio: 1 / 1; }
.portrait img {
  width: 100%; height: 112%;
  object-fit: cover; object-position: top center;
  will-change: transform;
  transition: scale 0.9s var(--ease-out);
}
.portrait:hover img { scale: 1.03; }

.timeline { list-style: none; margin-top: 28px; display: grid; gap: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 12px 0 12px 26px; display: grid; gap: 2px; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ground); border: 3px solid var(--blue);
}
.timeline li:last-child::before { border-color: var(--amber); }
.tl-year { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--navy); line-height: 1; }
.tl-text { font-size: 0.92rem; color: rgba(11, 27, 58, 0.66); }

@media (max-width: 860px) {
  .history-grid { grid-template-columns: 1fr; }
  .history-media { position: static; max-width: 480px; }
}

/* ==========================================================================
   Founders
   ========================================================================== */
.founders { background: #fff; }
.profile {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.profile + .profile { margin-top: clamp(90px, 11vw, 160px); padding-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); }
.profile-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.profile-flip .profile-media { order: 2; }
.profile-media { position: sticky; top: 110px; }

.portrait-tag {
  position: relative;
  display: inline-block;
  margin: -22px 0 0 20px;
  background: var(--blue);
  color: #fff;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 6px;
  box-shadow: 0 14px 30px -14px rgba(4, 98, 201, 0.7);
}
.profile-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.01em; line-height: 1.02;
  margin-bottom: 14px;
}
.profile-creds {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.75;
  color: var(--blue);
  padding-left: 16px; border-left: 3px solid var(--amber);
  margin-bottom: 26px;
}
.profile-bio p { color: rgba(11, 27, 58, 0.82); max-width: 66ch; font-size: 1.08rem; }
.profile-close { margin-top: 30px; color: rgba(11, 27, 58, 0.72); max-width: 66ch; font-style: italic; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; }

.profile-details { margin-top: 30px; border-top: 1px solid var(--line); }
.profile-details details { border-bottom: 1px solid var(--line); }
.profile-details summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px;
  font-weight: 700; font-size: 1rem;
  transition: color 0.25s ease;
}
.profile-details summary::-webkit-details-marker { display: none; }
.profile-details summary:hover { color: var(--blue); }
.profile-details summary i { position: relative; width: 14px; height: 14px; flex: none; }
.profile-details summary i::before, .profile-details summary i::after {
  content: ""; position: absolute; inset: 50% auto auto 0;
  width: 100%; height: 2px; background: var(--blue);
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease-out);
}
.profile-details summary i::after { transform: translateY(-50%) rotate(90deg); }
.profile-details details[open] summary i::after { transform: translateY(-50%) rotate(0); }

.detail-list { list-style: none; padding: 0 4px 22px; display: grid; gap: 12px; }
.detail-list li { position: relative; padding-left: 22px; color: rgba(11, 27, 58, 0.78); font-size: 0.98rem; }
.detail-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--sky);
  transform: skewX(var(--slant));
}
.detail-list strong { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .profile, .profile-flip { grid-template-columns: 1fr; }
  .profile-flip .profile-media { order: 0; }
  .profile-media { position: static; max-width: 400px; }
}

/* ==========================================================================
   Join the movement
   ========================================================================== */
.join {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(167, 224, 253, 0.45), transparent 70%),
    var(--ground-2);
}
.join-head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); }
.join-head .display { margin-bottom: 24px; }
.join-head .lede { color: rgba(11, 27, 58, 0.8); }

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.way {
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 2.8vw, 38px);
  text-decoration: none;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s ease;
}
.way::after {                    /* slanted blue wash that rises on hover */
  content: ""; position: absolute; inset: auto -20% -100% -20%; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(4, 98, 201, 0.08));
  transform: skewY(-6deg);
  transition: bottom 0.6s var(--ease-out);
}
.way:hover::after { bottom: -20%; }
.way:hover { transform: translateY(-6px); border-color: rgba(4, 98, 201, 0.5); box-shadow: 0 30px 60px -36px rgba(11, 27, 58, 0.45); }
.way > * { position: relative; z-index: 1; }
.way-icon { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: var(--ground-2); color: var(--blue); margin-bottom: 10px; transition: background-color 0.3s ease, color 0.3s ease; }
.way:hover .way-icon { background: var(--blue); color: #fff; }
.way-icon svg { width: 26px; height: 26px; }
.way-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.way-text { color: rgba(11, 27, 58, 0.72); font-size: 0.97rem; }
.way-link { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 0.9rem; color: var(--blue); }

@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(245, 248, 252, 0.8); padding-top: clamp(64px, 8vw, 100px); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 90px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.footer-logo { height: 40px; width: auto; margin-bottom: 22px; }
.footer-brand p { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: rgba(245, 248, 252, 0.7); }
.footer-brand .footer-meta { font-family: var(--font-body); font-style: normal; font-size: 0.92rem; margin-top: 18px; }
.footer-brand a { text-decoration: none; color: var(--pale); }
.footer-heading { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky); margin-bottom: 18px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer ul a { text-decoration: none; font-size: 0.97rem; transition: color 0.25s ease; }
.site-footer ul a:hover { color: #fff; }
.footer-privacy p:not(.footer-heading) { font-size: 0.86rem; line-height: 1.7; color: rgba(245, 248, 252, 0.6); }

.footer-bottom {
  border-top: 1px solid var(--line-light);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.88rem; color: rgba(245, 248, 252, 0.5);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Donate modal
   ========================================================================== */
.modal {
  border: 0; padding: 0;
  background: transparent;
  /* The global `* { margin: 0 }` reset above cancels the browser's own
     `dialog { margin: auto }`, which is what centers a modal — restore it. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: min(92vw, 560px);
  height: fit-content;
  max-height: calc(100% - 32px);
  overflow: auto;
}
.modal::backdrop { background: rgba(8, 21, 51, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in 0.5s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  color: var(--ink);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--ground-2); }
.modal-logo { height: 34px; width: auto; margin: 0 auto 22px; }
.modal .eyebrow { justify-content: center; margin-bottom: 12px; }
.modal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; margin-bottom: 22px; }
.zelle {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--ground-2);
  border-radius: 12px;
  padding: 14px 16px;
}
.zelle code {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  color: var(--blue);
  word-break: break-all;
}
.modal-note { margin-top: 18px; font-size: 0.92rem; color: rgba(11, 27, 58, 0.66); }
.modal-thanks { margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--navy); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }