/* site/css/site.css */
:root {
  --sc-canvas:     #0b3b38;
  --sc-surface:    #0e4642;
  --sc-ink:        #f6f2ea;
  --sc-ink-soft:   #bcc9c3;
  --sc-accent:     #d7b46a;
  --sc-accent-ink: #0b3b38;
  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-r-sm: 2px; --sc-r-md: 2px;            /* squared, editorial corners */
  --sc-shadow-color: 170 60% 4%;
}


/* ---------- base ---------- */
html { scroll-padding-top: 4.5rem; }
.sc-display { font-family: var(--sc-font-display); font-weight: 500; }

/* ---------- fixed bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--sc-gutter); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem; color: var(--sc-ink); text-decoration: none; }
.bar__logo svg { height: 1.5rem; width: auto; fill: currentColor; fill-rule: evenodd; }
.logo__group { font: 400 0.55rem/1 "Poppins", sans-serif; letter-spacing: 0.5em; padding-left: 0.5em; }

/* ---------- the one button ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.7rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 0.9rem/1 var(--sc-font-text); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; border-radius: var(--sc-r-sm);
  transition: background-color var(--sc-d-base) var(--sc-ease-out);
}
.cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
.cta:active { background: color-mix(in oklab, var(--sc-accent) 76%, var(--sc-canvas)); }
.cta[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- 1. hero: one photograph, drifting slowly ---------- */
.hero { background: var(--sc-canvas); }
.hero__planes { position: absolute; inset: 0; overflow: clip; }
.plane { position: absolute; inset: -24px 0; } /* taller than the stage, so the slow drift never shows an edge */
.plane picture, .plane img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plane img { max-width: none; object-fit: cover; object-position: 50% 58%; }
/* the motion loop lies over its own photograph and fades in once it is really playing */
.plane video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; opacity: 0; transition: opacity 0.9s ease; }
.plane video.is-playing, .sector__media video.is-playing { opacity: 1; }
.plane img, .plane video { filter: saturate(.62) contrast(1.04); } /* a quieter photograph, editorial rather than cinematic */
@media (prefers-reduced-motion: reduce) { .plane video, .sector__media video { display: none; } }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--sc-canvas), transparent);
}
.eyebrow, .hero__eyebrow {
  margin: 0 0 1.25rem; font: 600 0.75rem/1 var(--sc-font-text);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-accent);
}
.hero__copy h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5.6rem); max-width: 16ch; }
.hero__lede { margin-top: 1.25rem; max-width: 34rem; color: var(--sc-ink); }
@media (min-width: 861px) {
  .hero .sc-scrim--lead {
    background: linear-gradient(to top right,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 36%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 56%,
      transparent 80%);
  }
}
@media (max-width: 860px) {
  .hero .sc-scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 48%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 64%,
      transparent 78%);
  }
}

/* ---------- 2. who we are: an ordinary section, anchored to the trailing side ---------- */
.who { padding-top: var(--sc-7); }
.who__stack { max-width: 40rem; margin-left: auto; }
@media (max-width: 860px) { .who__stack { margin-left: 0; } }
.who__work { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-9); }
.who__work-head { grid-column: 1 / -1; }
.work { border-top: 2px solid var(--sc-hairline-strong); padding-top: var(--sc-5); }
.work h3 { margin: 0; font: 500 var(--sc-t-xl)/1.15 var(--sc-font-display); }
.work p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 28rem; }
@media (max-width: 860px) { .who__work { grid-template-columns: 1fr; } }

/* ---------- if the engine never starts, show everything ---------- */
.sc-failed [data-sc-cue], .sc-failed [data-sc-in], .sc-failed [data-sc-stagger] > *, .sc-failed [data-sc-copy] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.sc-failed .where__rail, .sc-failed .where__head { opacity: 1 !important; }

/* small phones: keep the eyebrow on one line */
@media (max-width: 480px) {
  .hero__eyebrow { font-size: 0.65rem; letter-spacing: 0.1em; }
}


/* ---------- 3. the peak: thirteen years ---------- */
.years { background: var(--sc-canvas); display: grid; place-items: center; padding: 0 var(--sc-gutter); }
.years__inner { width: 100%; max-width: var(--sc-maxw); display: grid; gap: var(--sc-8); }
.years__copy h2 { font-size: clamp(3.4rem, 1.9rem + 7vw, 8rem); max-width: 10ch; }
.years__readout { display: flex; align-items: baseline; gap: var(--sc-5); margin: var(--sc-5) 0 0; }
.years__since { font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.years__year { font: 500 var(--sc-t-2xl)/1 var(--sc-font-display); color: var(--sc-accent); }

/* the ruler: one tick per year of operation, filled from scroll progress */
.ruler { --lit: .16; width: 100%; }
.ruler__track {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end;
  height: clamp(3rem, 9vw, 7rem); border-bottom: 1px solid var(--sc-hairline-strong);
}
.ruler__tick {
  display: block; justify-self: start; width: 2px; height: 58%;
  background: var(--sc-accent);
  opacity: clamp(var(--lit), calc((var(--sc-p, 1) - .08) / .8 * var(--n) - var(--i) + 1), 1);
}
.ruler__tick:nth-child(5n), .ruler__tick:last-child { height: 100%; }
.ruler__labels {
  display: flex; justify-content: space-between; margin-top: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .ruler__tick { opacity: 1 !important; }
}


/* ---------- 4. where we invest: sideways travel, type only ---------- */
.where { display: flex; align-items: center; }
.where__rail {
  height: 100%; align-items: flex-start; padding-inline: var(--sc-gutter);
  padding-top: clamp(11rem, 31vh, 17rem); /* cards start below the heading block, tops aligned */
  /* hidden until the ground has finished drifting: no small text on the middle of the drift */
  opacity: clamp(0, calc((var(--sc-p, 1) - .22) * 10), 1);
}
.where__head {
  position: absolute; left: var(--sc-gutter); top: clamp(5.5rem, 16vh, 9rem); z-index: 2;
  max-width: min(34rem, calc(100% - 2 * var(--sc-gutter)));
  /* outside the rail, so it is never panned out of view; same gate as the rail */
  opacity: clamp(0, calc((var(--sc-p, 1) - .22) * 10), 1);
}
.where__lead { flex: 0 0 clamp(18rem, 38vw, 44rem); padding-right: var(--sc-8); }
.sector {
  flex: 0 0 clamp(18rem, 40vw, 48rem);
  padding: var(--sc-6) var(--sc-7); border-left: 1px solid var(--sc-hairline-strong);
}
.sector__media { position: relative; height: clamp(11rem, 34vh, 22rem); margin-bottom: var(--sc-5); overflow: hidden; border-radius: var(--sc-r-sm); background: var(--sc-surface); }
.sector__media img, .sector__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sector__media video { opacity: 0; transition: opacity 0.9s ease; }
.sector h3 { margin: 0; font: 500 var(--sc-t-2xl)/1 var(--sc-font-display); letter-spacing: var(--sc-track-snug); }
.sector p { margin: var(--sc-4) 0 0; max-width: 20rem; color: var(--sc-ink-soft); }
.where__note {
  flex: 0 0 clamp(18rem, 40vw, 48rem);
  padding-top: var(--sc-6); padding-left: var(--sc-7); border-left: 1px solid var(--sc-hairline-strong);
}
@media (prefers-reduced-motion: reduce) {
  .where__rail, .where__head { opacity: 1 !important; }
}


/* ---------- 5. close: the page stops moving and starts responding ---------- */
.close { background: var(--sc-canvas); display: grid; place-items: center; padding: 0 var(--sc-gutter); }
.close__inner {
  width: 100%; max-width: var(--sc-maxw);
  display: grid; justify-items: start; gap: var(--sc-6);
}
.close__inner h2 { font-size: var(--sc-t-3xl); max-width: 14ch; }
.cta--close { min-height: 3.25rem; padding-inline: 2rem; font-size: 1rem; }
@media (max-width: 860px) {
  .cta--close { width: 100%; }
}
.close__contact { font-style: normal; color: var(--sc-ink-soft); line-height: 1.75; }
.close__contact a { color: var(--sc-ink); }

.foot {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem var(--sc-gutter) 1.5rem;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot__links { display: inline-flex; gap: 1.25rem; align-items: center; }
.foot a, .foot__btn {
  min-height: 2.75rem; display: inline-flex; align-items: center;
  color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 0.22em;
}
.foot__btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------- consent notice: fixed colours, so it never flips with the ground ---------- */
.consent {
  position: fixed; inset: auto 0 1rem 0; margin-inline: auto; z-index: 80;
  width: min(60rem, calc(100% - 2 * var(--sc-gutter)));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  padding: 1rem 1.25rem; background: #0e4642; color: #f6f2ea;
  border: 1px solid #2c6a64; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; max-width: 40rem; font-size: var(--sc-t-sm); }
.consent__text a { color: #f6f2ea; }
.consent__actions { display: flex; gap: 0.75rem; }
.consent__btn {
  min-height: 2.75rem; padding: 0.6rem 1.4rem; cursor: pointer;
  background: transparent; color: #f6f2ea; border: 1px solid #f6f2ea; border-radius: var(--sc-r-sm);
  font: 600 0.9rem/1 var(--sc-font-text);
  transition: background-color var(--sc-d-base) var(--sc-ease-out);
}
.consent__btn:hover { background: #14625b; }
.consent__btn:active { background: #0b3b38; }
.consent :focus-visible { outline-color: #d7b46a; }

/* ---------- privacy page ---------- */
.doc-page .bar { position: static; padding-block: 1.5rem; }
.doc { max-width: 44rem; margin: 0 auto; padding: var(--sc-7) var(--sc-gutter) var(--sc-10); }
.doc h1 { margin-bottom: var(--sc-6); }
.doc h2 { font: 500 var(--sc-t-xl)/1.2 var(--sc-font-display); margin: var(--sc-7) 0 var(--sc-3); }
.doc p { color: var(--sc-ink-soft); max-width: 62ch; margin: 0 0 var(--sc-4); }
.doc a { color: var(--sc-ink); }

/* ---------- close: small text waits until the ground has finished drifting back to dark ---------- */
.close__contact, .foot { opacity: clamp(0, calc((var(--sc-p, 1) - .3) * 10), 1); }
@media (prefers-reduced-motion: reduce) {
  .close__contact, .foot { opacity: 1 !important; }
}

/* ---------- reduced motion: where we invest as ordinary flowing content, no pin, no sideways scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  #where { height: auto !important; }
  .where { position: relative !important; height: auto; min-height: 0; overflow: visible !important; display: block; padding: var(--sc-9) var(--sc-gutter) var(--sc-8); }
  .where__head { position: static; max-width: none; padding-bottom: var(--sc-6); }
  .where__rail { flex-wrap: wrap; height: auto; padding: 0; gap: var(--sc-5); }
  .where__lead { display: none; }
  .sector, .where__note { flex: 1 1 16rem; padding: var(--sc-5) var(--sc-6); }
}

/* ---------- engine failed: stages get their own box (scoped, and removed again if the engine starts late) ---------- */
.sc-failed [data-sc-stage] { position: relative; min-height: 100svh; }
.sc-failed .close__contact, .sc-failed .foot { opacity: 1 !important; }
.sc-failed .where { display: block; }
.sc-failed .where__head { position: static; max-width: none; padding: var(--sc-8) var(--sc-gutter) 0; }
.sc-failed .where__rail { flex-wrap: wrap; height: auto; gap: var(--sc-5); padding-block: var(--sc-8); }
.sc-failed .where__lead { display: none; }
.sc-failed .sector, .sc-failed .where__note { flex: 1 1 18rem; }