/* ══════════════════════════════════════════════════════════
   HOME PAGE — hero + below-the-fold sections
══════════════════════════════════════════════════════════ */

/* ── Loader ── */
#loader {
  position:fixed; inset:0; background:var(--dark);
  z-index:8000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  transition:opacity .9s ease, visibility .9s ease;
}
#loader.out { opacity:0; visibility:hidden; }
#loader-canvas { display:block; }
.loader-label {
  font-size:10px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--teal); opacity:0;
  animation:fadeLabel 1.2s ease .4s forwards;
}
@keyframes fadeLabel { to { opacity:.6; } }

/* ── Hero ── */
.hero {
  position:relative; width:100vw; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:150px 24px 90px;
}
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; }

.hero-content {
  position:relative; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; gap:clamp(16px,2.6vh,26px);
  text-align:center; padding:0 24px; max-width:920px;
}

#logo-canvas {
  width:56px; height:56px;
  opacity:0; transform:rotate(-180deg) scale(.5);
  transition:opacity .9s ease, transform .9s var(--ease-out);
}
#logo-canvas.show { opacity:1; transform:rotate(0deg) scale(1); }
#logo-canvas.live { animation:spinLogo 28s linear infinite; }
@keyframes spinLogo { to { transform:rotate(360deg) scale(1); } }

.hero .eyebrow {
  justify-content:center;
  font-size:clamp(9px,1.2vw,11px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--teal); opacity:0;
  transition:opacity .8s ease; margin:0;
}
.hero .eyebrow::before { display:none; }
.hero .eyebrow.show { opacity:.7; }

.headline {
  font-family:var(--font-head); font-weight:200;
  font-size:clamp(42px,8vw,96px);
  line-height:1.02; letter-spacing:.01em; color:var(--light);
}
.hl-line { display:block; overflow:hidden; padding-bottom:.08em; }
.hl-inner {
  display:block; transform:translateY(115%); opacity:0;
  transition:transform 1s var(--ease-out), opacity .7s ease;
}
.hl-inner.show { transform:translateY(0); opacity:1; }
.hl-em { color:var(--teal); font-style:italic; font-weight:300; }

.hero-divider { display:flex; align-items:center; gap:16px; opacity:0; transition:opacity .6s ease; }
.hero-divider.show { opacity:1; }
.hero-divider::before, .hero-divider::after {
  content:''; width:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal));
  transition:width 1.1s var(--ease-out);
}
.hero-divider::after { background:linear-gradient(90deg, var(--teal), transparent); }
.hero-divider.show::before, .hero-divider.show::after { width:clamp(50px,8vw,110px); }
.hero-divider-phi { font-family:var(--font-head); font-style:italic; font-size:13px; color:var(--teal); opacity:.8; letter-spacing:.05em; }

.tagline {
  font-size:clamp(11px,1.4vw,13.5px); font-weight:300; letter-spacing:.03em; line-height:1.9;
  color:var(--light); opacity:0; max-width:600px;
  transition:opacity 1s ease;
}
.tagline.show { opacity:.6; }

.hero-ctas {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:18px; margin-top:clamp(6px,1.2vh,14px);
}
.hero-cta {
  padding:13px clamp(24px,3.6vw,36px);
  border:1px solid var(--teal-a50); color:var(--teal); text-decoration:none;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease, color .35s, border-color .35s;
  display:inline-flex; align-items:center; gap:8px;
}
.hero-cta::before {
  content:''; position:absolute; inset:0; background:var(--teal);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); z-index:-1;
}
.hero-cta:hover::before { transform:scaleX(1); }
.hero-cta:hover { color:var(--dark); border-color:var(--teal); }
.hero-cta.show { opacity:1; transform:translateY(0); }
.hero-cta-ghost { border-color:transparent; color:var(--light); opacity:0; }
.hero-cta-ghost::before { display:none; }
.hero-cta-ghost:hover { color:var(--teal); border-color:transparent; }
.hero-cta-ghost.show { opacity:.75; }
.hero-cta-ghost.show:hover { opacity:1; }

.scroll-hint {
  position:absolute; bottom:clamp(20px,3.4vh,34px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transition:opacity .8s ease;
}
.scroll-hint.show { opacity:.38; }
.scroll-hint span { font-size:8px; letter-spacing:.28em; text-transform:uppercase; }
.scroll-line {
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--teal), transparent);
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100%{ transform:scaleY(.6) translateY(-10px); opacity:.4; }
  50%{ transform:scaleY(1) translateY(0); opacity:1; }
}

.side-label {
  position:absolute; right:clamp(14px,3vw,32px); top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:center;
  font-size:8px; letter-spacing:.28em; text-transform:uppercase; color:var(--teal);
  opacity:0; transition:opacity .8s ease; white-space:nowrap;
}
.side-label.show { opacity:.45; }
@media (max-width:500px) { .side-label { display:none; } }

/* Live clock — corner of hero, echoes the "Time" in Time & Space */
.hero-clock {
  position:absolute; top:clamp(96px,14vh,128px); left:clamp(20px,4vw,48px);
  z-index:10; display:flex; flex-direction:column; gap:4px;
  opacity:0; transition:opacity 1s ease;
}
.hero-clock.show { opacity:.6; }
.hero-clock-city { font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--teal); }
.hero-clock-time { font-size:13px; letter-spacing:.1em; color:var(--light); font-variant-numeric:tabular-nums; }
@media (max-width:700px) { .hero-clock { top:auto; bottom:clamp(20px,3.4vh,34px); left:clamp(16px,4vw,28px); } }

/* ══════════════════════════════════════
   02 — INTRODUCTION
══════════════════════════════════════ */
.intro-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start;
}
.intro-copy p { margin-top:18px; }
.intro-list { display:flex; flex-direction:column; gap:22px; margin-top:8px; }
.intro-line {
  font-family:var(--font-head); font-weight:300; font-size:clamp(19px,2.2vw,27px);
  line-height:1.3; padding-left:22px; border-left:1px solid var(--teal-a20);
}
.intro-line em { color:var(--teal); font-style:italic; }
@media (max-width:860px) {
  .intro-grid { grid-template-columns:1fr; gap:40px; }
}

/* ══════════════════════════════════════
   03 — CAPABILITIES
══════════════════════════════════════ */
.cap-list { margin-top:46px; }
.cap-row {
  border-top:1px solid var(--teal-a08); padding:22px 0;
  cursor:default; transition:padding-left .4s var(--ease-out), border-color .3s;
}
.cap-list .cap-row:last-child { border-bottom:1px solid var(--teal-a08); }
.cap-row:hover { padding-left:14px; border-color:var(--teal-a20); }
.cap-row-top { display:flex; align-items:baseline; gap:22px; }
.cap-index { font-size:11px; color:var(--teal); opacity:.6; min-width:30px; }
.cap-name { font-family:var(--font-head); font-weight:300; font-size:clamp(18px,2.4vw,27px); flex:1; }
.cap-arrow { opacity:.3; transition:opacity .3s, transform .35s var(--ease-out); }
.cap-row:hover .cap-arrow { opacity:1; transform:translateX(4px); }
.cap-desc {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s var(--ease-out), opacity .4s ease, margin-top .4s ease;
  padding-left:52px; margin-top:0;
}
.cap-row:hover .cap-desc { max-height:80px; opacity:.55; margin-top:10px; }
.cap-desc p { font-size:12.5px; line-height:1.7; font-weight:300; max-width:520px; }
.cap-footer { margin-top:44px; display:flex; justify-content:flex-end; }
@media (max-width:700px) {
  .cap-desc, .cap-row:hover .cap-desc { max-height:none; opacity:.55; margin-top:8px; padding-left:0; }
  .cap-row-top { gap:14px; }
}

/* ══════════════════════════════════════
   BRAND MARQUEE
══════════════════════════════════════ */
.brands-section { padding:clamp(50px,7vh,80px) 0; border-bottom:1px solid var(--teal-a08); border-top:1px solid var(--teal-a08); }
.brands-label {
  text-align:center; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--teal); opacity:.55; margin-bottom:36px;
}

/* ══════════════════════════════════════
   04 — PHILOSOPHY (pull statement)
══════════════════════════════════════ */
.philosophy-section {
  position:relative; text-align:center; padding:clamp(100px,15vh,170px) 24px;
  overflow:hidden;
}
.philosophy-section::before {
  content:''; position:absolute; left:50%; top:50%; width:1000px; height:1000px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--teal-a08) 0%, transparent 65%);
  pointer-events:none;
}
.philosophy-inner { position:relative; z-index:2; max-width:840px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:28px; }
.philosophy-statement {
  font-family:var(--font-head); font-weight:200; font-size:clamp(32px,5.4vw,64px); line-height:1.15;
  width:100%;
}
.philosophy-statement em { color:var(--teal); font-style:italic; }

/* Manifesto stage: on mobile / no-JS this is just a simple centered
   column (both lines stacked, always visible). On desktop, pinned.js
   adds .manifesto-mode which turns it into a full-screen cross-fade —
   line 1 fills the stage, dissolves, line 2 takes its place. */
.manifesto-stage {
  display:flex; flex-direction:column; align-items:center; gap:0.1em; width:100%;
}
.philosophy-section.manifesto-mode .manifesto-stage {
  position:relative; min-height:clamp(150px,20vw,230px);
}
.philosophy-section.manifesto-mode .manifesto-stage .phil-line-1,
.philosophy-section.manifesto-mode .manifesto-stage .phil-line-2 {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
}

/* ══════════════════════════════════════
   05 — PROCESS
══════════════════════════════════════ */
.process-flow {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:0; margin-top:56px; position:relative;
}
.process-flow-track {
  position:absolute; top:15px; left:0; right:0; height:1px; background:var(--teal-a15);
}
.process-line {
  position:absolute; top:15px; left:0; right:0; height:1px; background:var(--teal-a50);
  transform:scaleX(0); transform-origin:left; z-index:1;
  box-shadow:0 0 8px var(--teal-a50);
}
.process-step { position:relative; padding-right:20px; z-index:2; }
.process-num {
  font-size:11px; color:var(--teal); opacity:.7; display:block; margin-bottom:20px;
  background:var(--dark); width:30px; position:relative; z-index:2;
}
.process-title { font-family:var(--font-head); font-weight:300; font-size:clamp(17px,1.8vw,22px); margin-bottom:10px; }
.process-desc { font-size:12px; line-height:1.7; font-weight:300; opacity:.55; max-width:220px; }
@media (max-width:960px) {
  .process-flow { grid-template-columns:1fr; gap:36px; }
  .process-flow-track, .process-line { display:none; }
  .process-step { padding-left:22px; border-left:1px solid var(--teal-a15); padding-right:0; }
  .process-num { background:transparent; margin-bottom:10px; }
  .process-desc { max-width:none; }
}

/* ══════════════════════════════════════
   06 — SELECTED WORK
══════════════════════════════════════ */
.work-lead { max-width:620px; margin-top:18px; }
.work-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:50px; margin-top:40px; }
.work-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px,3vw,36px); }
.work-card { display:block; }
.work-card-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--dark-2); }
.work-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.work-card:hover .work-card-img img { transform:scale(1.06); }
.work-card-img::after {
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(23,23,23,0.6));
  opacity:0; transition:opacity .4s ease;
}
.work-card:hover .work-card-img::after { opacity:1; }
.work-card-view {
  position:absolute; left:20px; bottom:16px; z-index:2;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--light);
  opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s var(--ease-out);
}
.work-card:hover .work-card-view { opacity:.9; transform:translateY(0); }
.work-card.is-hidden { display:none; }
.work-card-meta { padding-top:16px; }
.work-card-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.work-card-title h3 { font-size:clamp(17px,2vw,22px); font-weight:300; }
.work-card-year { font-size:10px; opacity:.4; letter-spacing:.06em; }
.work-card-cat { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); opacity:.6; margin-top:6px; }

@media (max-width:900px) {
  .work-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px) {
  .work-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════
   07 — CLOSING CTA
══════════════════════════════════════ */
.cta-banner {
  position:relative; text-align:center; padding:clamp(90px,14vh,150px) 24px;
  overflow:hidden;
}
.cta-banner-inner { position:relative; z-index:2; max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta-banner::before {
  content:''; position:absolute; left:50%; top:50%; width:900px; height:900px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--teal-a08) 0%, transparent 65%);
  pointer-events:none;
}
.cta-good {
  font-family:var(--font-head); font-style:italic; font-weight:300; color:var(--teal);
  font-size:clamp(20px,2.6vw,28px);
}