/**
 * Section styles. One block per homepage section, in page order.
 */

/* ==================================================================== HERO */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-paper);
  padding-bottom: var(--s-8);
}

.hero__bg {
  position: absolute;
  /* Oversized so pointer parallax never exposes an edge. */
  inset: -6% -6% -6% -6%;
  z-index: 0;
  will-change: transform;
}

/* ct_image() always renders a ratio-locked frame, which is right everywhere except
   the full-bleed contexts below. Here the frame must fill its parent instead. */
.hero__bg .media,
.material__media .media {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

/* The inner layer of the hero background. It carries the pointer parallax and the
   intro scale, while .hero__bg above it carries the scroll parallax — two systems
   animating one element would mean the per-frame write clobbering the scrubbed one. */
.hero__bg .media {
  will-change: transform;
  transform-origin: center center;
}

/* The foreground moves against the background on scroll, so it needs its own
   compositing layer too. */
.hero__inner {
  will-change: transform, opacity;
}

.hero__bg picture,
.material__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two stacked scrims: a vertical one for text contrast at the bottom, and a
   directional one that hero.js moves in response to the pointer. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10, 10, 9, 0.92) 0%,
    rgba(10, 10, 9, 0.55) 34%,
    rgba(10, 10, 9, 0.18) 62%,
    rgba(10, 10, 9, 0.42) 100%
  );
}

.hero__light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    60% 60% at var(--light-x, 50%) var(--light-y, 40%),
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: soft-light;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero__label {
  color: rgba(242, 241, 238, 0.65);
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.hero__label::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--c-accent);
  display: inline-block;
}

.hero__title {
  margin-bottom: var(--s-6);
  max-width: 20ch;
}

/* Each line is a mask window; hero.js slides the inner span up into place. */
.line-mask {
  display: block;
  overflow: hidden;
}

.line-mask > span {
  display: block;
  will-change: transform;
}

.hero__copy {
  color: rgba(242, 241, 238, 0.78);
  max-width: 48ch;
  margin-bottom: var(--s-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-8);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: rgba(242, 241, 238, 0.6);
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(242, 241, 238, 0.28);
  position: relative;
  overflow: hidden;
}

/* A short travelling tick rather than a looping bounce — reads as an instrument. */
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--c-accent);
  animation: scroll-tick 2s var(--e-snap) infinite;
}

@keyframes scroll-tick {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* ================================================================= FIGURES */

.figures {
  background: var(--c-paper);
  border-bottom: var(--border-hair) solid var(--rule);
}

.figures__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.figure {
  padding: var(--s-7) var(--s-5) var(--s-6) 0;
  border-left: var(--border-hair) solid var(--rule);
  padding-left: var(--s-5);
}

.figure:first-child { border-left: 0; padding-left: 0; }

.figure__value {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}

.figure__suffix {
  color: var(--c-accent);
  margin-left: 0.06em;
}

.figure__label {
  margin-top: var(--s-4);
  color: var(--fg-faint);
}

/* ================================================================ SERVICES */

/* Asymmetric editorial rows: the index and title sit left, the description and
   image offset right, and every other row shifts to break the column rhythm. */
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--s-6);
  border-top: var(--border-hair) solid var(--rule);
  position: relative;
}

.service:last-child { border-bottom: var(--border-hair) solid var(--rule); }

.service__index { grid-column: 1 / 2; padding-top: var(--s-2); }

.service__title {
  grid-column: 2 / 7;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  transition: transform var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}

.service__desc {
  grid-column: 8 / 12;
  color: var(--fg-muted);
  font-size: var(--t-body);
  padding-top: var(--s-2);
}

.service__arrow {
  grid-column: 12 / 13;
  justify-self: end;
  padding-top: var(--s-2);
  transition: transform var(--d-base) var(--e-overshoot);
  color: var(--fg-faint);
}

.service:nth-child(even) .service__title { grid-column: 3 / 8; }

.service:hover .service__title { transform: translateX(var(--s-4)); color: var(--c-accent); }
.service:hover .service__arrow { transform: translate(6px, -6px); color: var(--c-accent); }

/* Image preview that tracks the pointer. Hidden entirely on touch. */
.service__preview {
  position: fixed;
  top: 0; left: 0;
  width: 22vw;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  z-index: var(--z-raise);
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  will-change: transform;
  display: none;
}

.service__preview img { width: 100%; height: 100%; object-fit: cover; }

/* ======================================================= FEATURED PROJECT */

.featured {
  background: var(--c-charcoal);
  color: var(--c-paper);
  --rule: rgba(242, 241, 238, 0.16);
  --rule-strong: rgba(242, 241, 238, 0.3);
  --fg-faint: rgba(242, 241, 238, 0.45);
  --fg-muted: rgba(242, 241, 238, 0.72);
}

.featured__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* The media column is what gets pinned; the panel column scrolls past it. */
.featured__media {
  grid-column: 1 / 7;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.featured__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}

.featured__panels { grid-column: 8 / 13; }

.featured__panel {
  min-height: 68svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-7);
  border-top: var(--border-hair) solid var(--rule);
}

.featured__eyebrow { margin-bottom: var(--s-5); }

.featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.featured__meta { margin-bottom: var(--s-5); }

.featured__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--border-hair) solid var(--rule);
}

.featured__spec-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.featured__spec-label { margin-top: var(--s-2); }

/* ================================================================= PROCESS */

.process { background: var(--c-paper); }

.process__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
  padding-block: var(--s-8);
  border-top: var(--border-hair) solid var(--rule);
}

.process__stage:nth-child(even) { direction: rtl; }
.process__stage:nth-child(even) > * { direction: ltr; }

.process__text { grid-column: 1 / 6; }

.process__number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 7vw, 9rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-concrete);
  margin-bottom: var(--s-4);
  transition: color var(--d-slow) var(--e-out), -webkit-text-stroke-color var(--d-slow) var(--e-out);
}

/* Filled once the stage is the active one in the scroll sequence. */
.process__stage.is-active .process__number {
  color: var(--c-charcoal);
  -webkit-text-stroke-color: var(--c-charcoal);
}

.process__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.process__media {
  grid-column: 7 / 13;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.process__media img { will-change: transform; }

/* =========================================================== DRONE REVEAL */

.drone {
  background: var(--c-black);
  color: var(--c-paper);
  position: relative;
  padding-block: 0;
}

/* Tall track: the pin lives inside it, so the frame animation has scroll to run in. */
.drone__track { height: 420svh; position: relative; }

.drone__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* The frame starts small and centred, then snaps to full bleed. GSAP animates
   this element only — the video inside is never touched. */
.drone__frame {
  position: relative;
  width: 42vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  will-change: transform, width;
}

.drone__stage {
  position: absolute;
  inset: 0;
}

/* Two stacked video elements, A/B buffered so the next cut is decoded before the
   current one ends. Swapping opacity gives a true hard cut with no black frame. */
.drone__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: none; /* hard cuts only — never crossfade */
}

.drone__video.is-active { opacity: 1; }

.drone__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 9, 0.75), rgba(10, 10, 9, 0) 45%);
}

.drone__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.drone__hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Card stack: all cards occupy the same cell; only one is visible at a time. */
.drone__cards {
  position: relative;
  align-self: flex-start;
  max-width: 34rem;
}

.drone__card {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.drone__card.is-active { visibility: visible; }

.drone__card-cut {
  color: var(--c-accent);
  margin-bottom: var(--s-3);
  display: block;
}

.drone__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.drone__card-figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: var(--s-3) 0;
  font-variant-numeric: tabular-nums;
}

.drone__card-copy {
  color: rgba(242, 241, 238, 0.75);
  font-size: var(--t-body);
  max-width: 40ch;
}

/* Progress ticks, one per cut. Purely a readout of playback position. */
.drone__progress {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.drone__tick {
  width: 46px; height: 2px;
  background: rgba(242, 241, 238, 0.25);
  position: relative;
  overflow: hidden;
}

.drone__tick-fill {
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ================================================================ PROJECTS */

.projects { background: var(--c-paper); }

/* Asymmetric editorial grid. Cards are deliberately unequal in both span and
   aspect ratio so the grid never reads as a template. */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 5rem) var(--grid-gap);
}

.projects__item:nth-child(1) { grid-column: 1 / 8; }
.projects__item:nth-child(2) { grid-column: 9 / 13; align-self: end; }
.projects__item:nth-child(3) { grid-column: 1 / 5; }
.projects__item:nth-child(4) { grid-column: 6 / 13; }
.projects__item:nth-child(5) { grid-column: 2 / 8; }
.projects__item:nth-child(6) { grid-column: 9 / 13; align-self: start; }

.projects__item:nth-child(1) .media { aspect-ratio: 16 / 10; }
.projects__item:nth-child(2) .media { aspect-ratio: 3 / 4; }
.projects__item:nth-child(3) .media { aspect-ratio: 3 / 4; }
.projects__item:nth-child(4) .media { aspect-ratio: 16 / 10; }
.projects__item:nth-child(5) .media { aspect-ratio: 4 / 3; }
.projects__item:nth-child(6) .media { aspect-ratio: 3 / 4; }

/* ============================================================ ENGINEERING */

.engineering {
  background: var(--c-black);
  color: var(--c-paper);
  position: relative;
  overflow: hidden;
}

/* Three.js wireframe canvas sits behind the content at low opacity. */
.engineering__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.engineering__inner { position: relative; z-index: 1; }

.engineering__title {
  max-width: 16ch;
  margin-bottom: var(--s-8);
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--border-hair) solid rgba(242, 241, 238, 0.16);
}

.capability {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: var(--border-hair) solid rgba(242, 241, 238, 0.16);
  position: relative;
}

.capability:nth-child(odd) { padding-right: var(--s-6); }
.capability:nth-child(even) { padding-left: var(--s-6); border-left: var(--border-hair) solid rgba(242, 241, 238, 0.16); }

.capability__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  transition: color var(--d-fast) var(--e-out);
}

.capability:hover .capability__name { color: var(--c-accent); }

/* ============================================================== MATERIALS */

.materials {
  background: var(--c-black);
  color: var(--c-paper);
  padding-block: 0;
}

.material {
  position: relative;
  height: 78svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: var(--border-hair) solid rgba(242, 241, 238, 0.14);
}

.material__media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}

.material__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
  opacity: 0.55;
}

.material__word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3rem, 0.5rem + 14vw, 14rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  will-change: transform;
  text-align: center;
}

.material__spec {
  position: absolute;
  bottom: var(--s-6);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

/* =================================================================== ABOUT */

.about { background: var(--c-paper); }

.about__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.about__title { grid-column: 1 / 8; margin-bottom: var(--s-7); }
.about__copy { grid-column: 8 / 13; padding-top: var(--s-3); }

.about__figures {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border-hair) solid var(--rule-strong);
}

.about__figure-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}

.about__figure-label { margin-top: var(--s-3); }

/* ================================================================= ENQUIRY */

.enquiry {
  background: var(--c-charcoal);
  color: var(--c-paper);
  --rule: rgba(242, 241, 238, 0.16);
  --rule-strong: rgba(242, 241, 238, 0.3);
  --fg: var(--c-paper);
  --fg-muted: rgba(242, 241, 238, 0.72);
  --fg-faint: rgba(242, 241, 238, 0.45);
}

.enquiry__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.enquiry__intro { grid-column: 1 / 6; }
.enquiry__form { grid-column: 7 / 13; }

.enquiry__title { margin-bottom: var(--s-5); }

.enquiry__contact {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border-hair) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

.form-grid .field--full { grid-column: 1 / -1; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-2);
}