/* =========================================================
   Cove Craft — home page layout.

   Built on what the reference actually does when you scroll it:
   - ONE living background for the whole page (the fixed .field canvas),
     handed from piece to piece, never a picture per box;
   - the page never holds still: content keeps travelling over the
     background, and the two short sticky moments (the drifting work,
     the reel opening up) change dramatically for every pixel scrolled;
   - large, light type with bold words for emphasis — Syne Regular and
     Syne Bold only, as the brand guide sets it (no Extrabold).
   ========================================================= */

.scene { position: relative; }
main { position: relative; z-index: 1; }

/* ---------- the living background ----------
   NOT `.field`: that is the contact form's label class, and a fixed,
   full-screen .field put the form's placeholders on every screen. */
.bgfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* The hero opens this from a half — see film.js. */
  clip-path: inset(0 0 0 var(--cut, 0%));
}
.bgfield canvas { width: 100%; height: 100%; display: block; }

/* A soft corner light for the passages between pieces. */
.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(70% 90% at -6% 108%, rgba(80, 150, 255, 0.55) 0%, rgba(31, 42, 222, 0.42) 26%, rgba(14, 18, 110, 0.22) 50%, transparent 72%);
}

/* ---------- display type ---------- */
.display, .hello__text, .craft__line, .depts__intro, .chapter__hook, .contact__lead {
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hello__text b, .craft__line b, .depts__intro b, .chapter__hook b, .contact__lead b, .hero__motto b {
  font-weight: 700;
}
/* Words that light up as the paragraph passes. */
[data-words] .w { opacity: 0.18; transition: none; }
.is-static [data-words] .w { opacity: 1; }

/* The hairline circles — the construction drawing behind the opening. */
.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rings circle, .rings line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* =========================================================
   00 · HERO
   ========================================================= */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.hero__aside {
  position: absolute;
  z-index: 2;
  top: 23%;
  right: var(--gutter);
  margin: 0;
  max-width: 34ch;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-2);
}
.hero__index {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.hero__index a { text-decoration: none; color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.hero__index a:hover { color: var(--green); }

.hero__title {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: 96px;
  margin: 0;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.hero__line { display: block; }
.hero__line--b { font-weight: 700; }
/* The gradient sits on the element that carries the reveal transform,
   not an ancestor: WebKit will not paint an ancestor's background-clip
   text through a composited child, and the word vanished on iPhones. */
.hero__line--b .ln__i {
  width: max-content;
  padding-right: 0.1em;
  padding-bottom: 0.08em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__motto {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: 56px;
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}

/* =========================================================
   00 · HELLO — the profile scrolls up over the open sphere
   ========================================================= */
.hello {
  padding: 18vh var(--gutter) 34vh;
}
.hello__word {
  margin: 0 0 6vh;
  font-weight: 400;
  font-size: clamp(88px, 17vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.05em;
}
.hello__body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: 28px;
}
.hello__body > .tag { grid-column: 1 / 2; align-self: start; padding-top: 1.1em; }
.hello__text {
  grid-column: 2 / -1;
  margin: 0;
  font-size: clamp(26px, 2.9vw, 52px);
  line-height: 1.24;
  max-width: 24em;
}
.hello__small {
  grid-column: 4 / -1;
  margin: 3vh 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
}
.hello__more {
  grid-column: 6 / 7;
  justify-self: end;
  margin-top: 4vh;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.hello__more:hover { color: var(--green); }

/* =========================================================
   THE PROMISE — work drifting past a still line
   ========================================================= */
.craft { height: 190vh; height: 190svh; }
.craft__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.craft__line {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 var(--gutter);
  font-size: clamp(30px, 3.9vw, 72px);
  line-height: 1.18;
  text-align: center;
  pointer-events: none;
}
.craft__float { position: absolute; inset: 0; z-index: 1; }
.fl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  will-change: transform;
  filter: saturate(0.9);
  transition: filter 400ms var(--ease);
}
.fl img { width: 100%; height: 100%; object-fit: cover; }
.fl:hover { filter: saturate(1.15); }

/* =========================================================
   REEL — a card opens up into the whole screen
   ========================================================= */
.reel { height: 230vh; height: 230svh; }
.reel__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.reel__card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #050507;
  cursor: pointer;
  /* --open goes 0 → 1 with scroll; the card grows from a postcard. */
  clip-path: inset(calc((1 - var(--open, 0)) * 34%) calc((1 - var(--open, 0)) * 33%) round calc((1 - var(--open, 0)) * 14px));
}
.reel__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.25 - var(--open, 0) * 0.25));
}
.reel__label {
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 120px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  opacity: calc(0.25 + var(--open, 0) * 0.75);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 0s linear 400ms;
}
.lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox video { width: min(92vw, 160vh); max-height: 86vh; }
.lightbox__close {
  position: absolute;
  top: 22px;
  right: var(--gutter);
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
}
.lightbox__close::before { content: '['; color: var(--text-4); }
.lightbox__close::after { content: ']'; color: var(--text-4); }

/* =========================================================
   WHAT WE DO — six departments, a drawing that changes per row
   ========================================================= */
.depts { padding: 20vh var(--gutter) 22vh; }
.depts__head {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18vh;
}
.depts__head > .tag { grid-column: 1 / 2; padding-top: 1.1em; }
.depts__intro {
  grid-column: 2 / -1;
  margin: 0;
  font-size: clamp(26px, 2.9vw, 52px);
  line-height: 1.24;
  max-width: 24em;
}
.depts__body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.depts__fig {
  grid-column: 1 / 4;
  position: sticky;
  top: 18vh;
  align-self: start;
  height: 64vh;
  display: grid;
  place-items: center;
}
.figs { width: min(30vw, 56vh); height: auto; overflow: visible; }
.figs .fig { opacity: 0; transform-origin: 200px 200px; }
.figs path, .figs ellipse, .figs circle, .figs line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.depts__list {
  grid-column: 4 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dept a {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 10px 14px;
  padding: 7vh 0;
  text-decoration: none;
  color: var(--text-3);
  transition: color 500ms var(--ease);
}
.dept.is-on a { color: var(--text); }
.dept__n {
  grid-row: span 3;
  padding-top: 0.9em;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.dept__t {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(30px, 3.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.dept__d { font-family: var(--font-body); font-size: 14px; line-height: 1.6; max-width: 40ch; color: var(--text-2); }
.dept__c {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease);
}
.dept a:hover .dept__c { color: var(--green); }

/* =========================================================
   CHAPTERS 01–06 — a header that travels, then the work
   ========================================================= */
.chapter-scene {
  padding-bottom: clamp(80px, 14vh, 160px);
  /* The project names sweep far past both edges. Clipped here, on the
     section that owns them — on a phone an unclipped overhang widens the
     layout viewport and drags the fixed HUD off the screen. `clip` rather
     than `hidden`, and only on chapters, which hold nothing sticky. */
  overflow-x: clip;
}
.chapter {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 92px var(--gutter) 9vh;
}
.chapter__meta { display: flex; gap: 18px; margin: 0; }
.chapter__title {
  align-self: end;
  margin: 0 0 4vh;
  font-weight: 700;
  font-size: clamp(48px, 8.2vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.chapter__title .t1, .chapter__title .t2 { display: block; }
.chapter__title .t2 { font-weight: 400; color: var(--text-2); letter-spacing: -0.035em; }
.chapter__title .wd { display: inline-block; white-space: nowrap; }
.chapter__title .ch, .hello__word .ch, .contact__word .ch { display: inline-block; will-change: transform, opacity; }
.chapter__hook {
  justify-self: end;
  margin: 0;
  max-width: 30em;
  font-size: clamp(18px, 1.55vw, 28px);
  line-height: 1.4;
}

.chapter__end {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) 0;
}
.chapter__aside {
  margin: 28px var(--gutter) 0;
  font-size: 14px;
  color: var(--text-3);
}

/* ---------- scattered work, names sweeping behind ---------- */
.works { padding: 0 var(--gutter); }
.wkrow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 10vh 0;
}
.wkrow + .wkrow { margin-top: -6vh; }
.wk__mq {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  white-space: nowrap;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(80px, 12.5vw, 240px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
  transform: translate3d(var(--mx, 0px), -60%, 0);
  pointer-events: none;
  will-change: transform;
}
.wk {
  position: relative;
  z-index: 1;
  grid-column: var(--col) / span var(--span);
  display: block;
  text-decoration: none;
}
.wk__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio, 16 / 10);
  overflow: hidden;
  background: var(--surface);
}
.wk__media img, .wk__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.wk__meta { display: grid; gap: 4px; padding-top: 14px; }
.wk__t { font-family: var(--font); font-weight: 400; font-size: clamp(17px, 1.35vw, 22px); letter-spacing: -0.01em; }
.wk__c { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
@media (hover: hover) {
  .wk:hover .wk__media img, .wk:hover .wk__media video { transform: scale(1.04); }
}

/* ---------- Creative Media: a dense collage ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 290px);
  grid-auto-flow: dense;
  gap: 0;
  padding: 0 var(--gutter);
}
.mo { position: relative; display: block; overflow: hidden; text-decoration: none; }
.mo--big { grid-column: span 2; grid-row: span 2; }
.mo--wide { grid-column: span 2; }
.mo--tall { grid-row: span 2; }
.mo__media { position: absolute; inset: 0; display: block; }
.mo__media img, .mo__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 600ms var(--ease);
}
.mo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.mo__meta {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: grid;
  gap: 2px;
}
.mo__t { font-family: var(--font); font-size: clamp(15px, 1.15vw, 19px); }
.mo__c { font-family: var(--font); font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); }
@media (hover: hover) {
  .mo:hover .mo__media img, .mo:hover .mo__media video { transform: scale(1.05); }
}

/* hover-to-play lays a film over the still */
.wk.is-playing .wk__media img, .mo.is-playing .mo__media img { opacity: 0; }

/* =========================================================
   07 · CONTACT
   ========================================================= */
.contact {
  min-height: 100vh;
  padding: 14vh var(--gutter) 16vh;
}
.contact__word {
  margin: 0 0 10vh;
  font-weight: 400;
  font-size: clamp(64px, 13vw, 250px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.contact__inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px;
}
.contact__lead {
  grid-column: 1 / 4;
  margin: 0;
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.25;
  max-width: 16em;
}
.contact .form { grid-column: 4 / -1; }

/* =========================================================
   FOOTER — Electric Blue, white mark
   The brand guide pairs the logo with exactly this: white on solid
   Electric Blue (Logo System, Clear Space). It is the one coloured room
   in a dark house, where the reference uses a light one.
   ========================================================= */
.footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  align-items: center;
  /* Bottom padding clears the HUD's scroll readout and BACK TO TOP,
     which sit 24px off the bottom edge. */
  padding: 0 var(--gutter) 74px;
  background: var(--blue);
  color: var(--white);
}
.footer .rings circle, .footer .rings line { stroke: rgba(255, 255, 255, 0.16); }
.footer__index {
  position: relative;
  grid-column: 1 / 3;
  display: grid;
  gap: 6px;
}
.footer__index a {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 34px);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--white);
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.footer__index a:hover { color: var(--green); }
.footer__info {
  position: relative;
  grid-column: 5 / -1;
  display: grid;
  gap: 22px;
  margin: 0;
  justify-items: end;
  text-align: right;
}
.footer__info dt {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.footer__info dd { margin: 4px 0 0; font-family: var(--font); font-size: 14px; }
.footer__info a { color: var(--white); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__info a:hover { color: var(--green); }
.footer .footer__logo {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  width: min(64vw, 1000px);
  height: auto;
  margin: 2vh 0 5vh;
}
.footer .footer__row {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Over the blue footer the HUD's dark edge shading only muddies the
   colour, so it lifts while the footer is on screen. */
body.on-blue .frame::before,
body.on-blue .frame::after { opacity: 0; }
.frame::before, .frame::after { transition: opacity 400ms var(--ease); }

/* While a 360° tour fills the screen it has to sit above everything —
   main is its own stacking layer, so the layer itself comes forward. */
body.tour-max main { z-index: 99; }
body.tour-max .frame, body.tour-max .armature, body.tour-max .progress { visibility: hidden; }