/* ==========================================================================
   HOMEPAGE — the construction film, from ground to sky
   ========================================================================== */

/* ---------- The film: a sticky WebGL stage with beats scrolling over it -- */
.film { position: relative; z-index: 1; }

.film__stage {
  position: sticky; top: 0;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
  background: #050607;
}

#scene { width: 100%; height: 100%; display: block; }

/* Fallback still, shown when WebGL is unavailable or refused. */
.stage__fallback {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, #2A2620 0%, transparent 60%),
    linear-gradient(#0A0B0C, #14161A 60%, #201C17);
}
.no-webgl .stage__fallback { display: grid; }
.no-webgl #scene { display: none; }
.stage__fallback p { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.2em; color: var(--concrete-dim); text-align: center; }

/* Cinematic grade over the canvas: vignette + a dawn warmth in the low third. */
.stage__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%, transparent 40%, rgba(5,6,7,0.72) 100%),
    linear-gradient(to top, rgba(5,6,7,0.55) 0%, transparent 34%);
  mix-blend-mode: multiply;
}
.stage__grain {
  position: absolute; inset: -50%;
  pointer-events: none; opacity: 0.05;
  background-image: var(--grain);
  background-size: 180px 180px;
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0,0); }
}

/* ---------- HUD ---------------------------------------------------------- */
.hud { position: absolute; inset: 0; pointer-events: none; }

/* Vertical construction indicator: GROUND, 01 … 20 */
.ladder {
  position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%);
  display: grid; gap: 0.32rem;
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.ladder.is-on { opacity: 1; }
.ladder__row {
  display: grid; grid-template-columns: 26px 34px; align-items: center; gap: 0.55rem;
  color: var(--concrete-dim); transition: color 0.35s, opacity 0.35s;
  opacity: 0.42;
}
.ladder__row i {
  display: block; height: 1px; background: currentColor; width: 12px;
  transition: width 0.45s var(--ease), background 0.35s;
}
.ladder__row.is-built { opacity: 0.85; color: var(--concrete); }
.ladder__row.is-built i { width: 22px; }
.ladder__row.is-now { opacity: 1; color: var(--champagne); }
.ladder__row.is-now i { width: 34px; background: var(--champagne); }

/* State readout, bottom left. */
.readout {
  position: absolute; left: var(--gut); bottom: clamp(1.4rem, 4vh, 3rem);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.2em;
  text-transform: uppercase; display: grid; gap: 0.5rem;
}
/* The floor callout the visitor is supervising right now. */
.readout__floor {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--warm-white);
  text-shadow: 0 4px 26px rgba(5,6,7,0.9);
  margin-bottom: 0.2rem;
}
.readout__k { color: var(--concrete-dim); }
.readout__v { color: var(--champagne); font-size: 0.82rem; }
.readout__bar { width: clamp(120px, 16vw, 230px); height: 1px; background: var(--rule); position: relative; }
.readout__bar i { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--champagne); transition: width 0.25s linear; }

/* Scroll cue, bottom centre, only on the first beat.
   The max-width and truncation are a safety net rather than styling: whatever
   width the cue ends up at, its label can never run off the edge of the
   stage or reach across into the readout. */
.cue {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 3rem); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.7rem;
  max-width: calc(100% - var(--gut) * 2);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.24em;
  color: var(--concrete-dim); text-transform: uppercase;
  transition: opacity 0.6s var(--ease);
}
.cue span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cue i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--champagne), transparent); }
.cue.is-off { opacity: 0; }

/* Corner ticks — the drawing-sheet feel. */
.ticks { position: absolute; inset: clamp(1rem,2.4vw,2rem); pointer-events: none; opacity: 0.5; }
.ticks span { position: absolute; width: 14px; height: 14px; border: 1px solid var(--rule-strong); }
.ticks span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ticks span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ticks span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ticks span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------- Beats -------------------------------------------------------- */
.film__beats { position: relative; z-index: 2; margin-top: -100svh; }

.beat {
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: clamp(4rem, 10vh, 8rem);
  pointer-events: none;
}
.beat > .wrap { pointer-events: auto; }
.beat--tall { min-height: 200svh; }
.beat--right .wrap { display: flex; justify-content: flex-end; }
.beat--center { text-align: center; }
.beat--center .wrap { display: grid; justify-items: center; }

.beat__box { max-width: min(880px, 92%); }
.beat--right .beat__box { text-align: right; }

/* Text over a moving 3D scene needs its own shadow to stay legible. */
.beat h1, .beat h2 { text-shadow: 0 8px 60px rgba(5,6,7,0.85), 0 2px 10px rgba(5,6,7,0.6); }
.beat .lede { text-shadow: 0 4px 30px rgba(5,6,7,0.9); }

/* ---------- Hero --------------------------------------------------------- */
.hero__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.4rem, 3vh, 2.4rem);
}
.hero__eyebrow i { display: block; width: clamp(28px, 5vw, 72px); height: 1px; background: linear-gradient(90deg, var(--champagne), var(--green-hi)); }
.hero h1 { font-size: var(--t-mega); text-transform: uppercase; }
/* The eyebrow and sub-line land on the brightest part of the dawn sky, so
   they carry the same shadow as the headlines or they wash out and read as
   if they were sitting on top of the type above them. */
.hero__sub {
  /* The headline sets at line-height 0.84, so its last line sits low in its
     box; keep a clear band under it or the two read as one block. */
  margin-top: clamp(2rem, 3.5vh, 2.6rem);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--concrete-light);
  text-shadow: 0 2px 18px rgba(5, 6, 7, 0.95), 0 1px 4px rgba(5, 6, 7, 0.85);
}
.hero__eyebrow .label { text-shadow: 0 2px 18px rgba(5, 6, 7, 0.9); }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 4.5vh, 3.4rem); }

/* ---------- Journey rail (IDEA -> PROPERTY) ------------------------------ */
.journey { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; border-top: 1px solid var(--rule); }
.journey__step {
  flex: 1 1 auto; min-width: 130px;
  padding: 1.5rem 1rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid; gap: 0.55rem; align-content: start;
}
.journey__step b {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.journey__step span { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--champagne-dim); }
.journey__step:last-child b { color: var(--champagne); }

/* ---------- Vision / mission ---------------------------------------------
   Two statements side by side under the slogan, each with a green rule so
   they read as a pair of declarations rather than more body copy. */
.creed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 4rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.8rem, 4vh, 3rem);
}
.creed--single { grid-template-columns: minmax(0, min(68ch, 100%)); }

.creed__item { position: relative; padding-left: clamp(1rem, 2vw, 1.8rem); }
.creed__item::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
  width: 2px; background: linear-gradient(var(--green-hi), transparent);
}
.creed__item .label { display: block; margin-bottom: 0.9rem; }
.creed__item .lede { max-width: 46ch; }

@media (max-width: 860px) {
  .creed { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}

/* ---------- Process (MORE THAN CONSTRUCTION) ----------------------------- */
.process { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.process__row {
  display: grid; grid-template-columns: 5rem minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: start;
  padding-block: clamp(1.8rem, 4vh, 3rem);
  border-bottom: 1px solid var(--rule);
  position: relative; transition: background 0.5s var(--ease);
}
.process__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--champagne); transition: width 0.5s var(--ease);
}
.process__row:hover { background: rgba(200,164,106,0.04); }
.process__row:hover::before { width: 2px; }
.process__row h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); text-transform: uppercase; }
.process__row p { color: var(--concrete); margin: 0; }

/* ---------- Skills — animated indicators, not percentage bars ------------ */
.skills { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.skill {
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0,1fr) 6rem;
  gap: clamp(1rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.3rem, 3vh, 2.1rem);
  border-bottom: 1px solid var(--rule);
}
.skill__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.7rem); text-transform: uppercase; letter-spacing: -0.02em; }
.skill__note { color: var(--muted); font-size: 0.92rem; }
/* 14 ticks that fill left to right — a level indicator, no invented number. */
.skill__meter { display: flex; gap: 3px; justify-content: flex-end; }
.skill__meter i {
  display: block; width: 3px; height: 20px; background: var(--rule-strong);
  transform: scaleY(0.35); transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease), background 0.6s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.skill.is-in .skill__meter i { transform: scaleY(1); background: color-mix(in srgb, var(--champagne) calc(100% - var(--i) * 7%), var(--green-hi)); }

/* ---------- Discipline stack (BUILT WITH DISCIPLINE) --------------------- */
.stack { display: grid; gap: 0.55rem; }
.stack__item {
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color 0.45s var(--ease), background 0.45s, color 0.45s;
}
.stack__item:hover { border-color: var(--champagne); background: rgba(200,164,106,0.05); }
.stack__item .n { color: var(--concrete-dim); }
.stack__item .a { color: var(--champagne); opacity: 0; transition: opacity 0.4s; }
.stack__item:hover .a { opacity: 1; }

/* ---------- Story / founder editorial ------------------------------------ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); align-items: center; }
.editorial--flip > *:first-child { order: 2; }

.figure { position: relative; }
.figure img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; filter: saturate(0.85) contrast(1.05); }
.figure--wide img { aspect-ratio: 16 / 10; }
.figure__cap {
  margin-top: 0.9rem; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: 0.16em; color: var(--concrete-dim); text-transform: uppercase;
}
.figure__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--champagne);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.2em;
  padding: 0.7rem 1.1rem; text-transform: uppercase;
}

.creds { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.creds li {
  padding: 0.95rem 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: start;
  font-size: 0.95rem; color: var(--concrete-light);
}
.creds li::before { content: "—"; color: var(--champagne); font-family: var(--f-mono); }
.section--paper .creds li { color: #4A4842; }

/* ---------- Final reveal ------------------------------------------------- */
.finale { text-align: center; }
.finale h2 { font-size: var(--t-xxl); text-transform: uppercase; }
.finale .split { display: grid; gap: clamp(2rem, 6vh, 4rem); }

/* ---------- Marquee ------------------------------------------------------ */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding-block: 1.1rem; }
.marquee__in { display: flex; gap: 3rem; width: max-content; animation: slide 38s linear infinite; }
.marquee span {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.9vw, 1.6rem); letter-spacing: 0.02em; color: var(--concrete-dim);
  display: flex; align-items: center; gap: 3rem;
}
.marquee span::after { content: ""; width: 5px; height: 5px; background: var(--champagne); display: block; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__in { animation: none; } }

@media (max-width: 980px) {
  .editorial { grid-template-columns: minmax(0,1fr); }
  .editorial--flip > *:first-child { order: 0; }
  .process__row { grid-template-columns: 3.2rem minmax(0,1fr); }
  .process__row p { grid-column: 2; }
  .skill { grid-template-columns: minmax(0,1fr) auto; }
  .skill__note { grid-column: 1 / -1; }
  .ladder { left: auto; right: calc(var(--gut) * 0.6); }
  .ladder__row { grid-template-columns: 20px 26px; }
}
@media (max-width: 760px) {
  /* The readout is anchored bottom-left and the cue was centred, which put
     them on top of each other once the viewport got narrow. Send the cue to
     the opposite corner and let it stack vertically. */
  .cue {
    left: auto; right: var(--gut); transform: none;
    justify-items: end; text-align: right; gap: 0.5rem;
  }
  .cue i { height: 30px; }
}

@media (max-width: 620px) {
  .readout__bar { width: 92px; }
  .readout__floor { font-size: 1.5rem; }
  .beat__box { max-width: 100%; }
  .beat--right .beat__box { text-align: left; }
  .beat--right .wrap { justify-content: flex-start; }
}

/* Very small phones: the cue label has nowhere left to go, so keep the rule
   as the affordance and drop the words. */
@media (max-width: 400px) {
  .cue span { display: none; }
}