/* ============================================================
   CASCADE PIXEL — HOME PAGE
   home.css · Phase 2A · Real assets build
   ============================================================

   Section map:
   1+2. Top stage      (.cp-top)           — Hero C + Studio Profile P on the comp's tear band
   3+4. The world      (.cp-world)         — Services on the digital world, Selected Work lightbox, rendered forest + cube
   5. Footer bar       (.cp-footbar)       — Overlaps the forest; contact + INITIATE PROJECT

   No 1px borders for sectioning (except nav hairline).
   0px radius everywhere. No em dashes.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1+2. TOP STAGE — Hero (C) + Studio Profile (P)
   PATCH9 (2026-10-12)

   Source of truth: Projects/250512_Branding/Projects/PS/web top.jpg
   and the layered comp in .../PS/C4D Layers/ (2288 × 2006 px).

   DESKTOP + TABLET (≥ 700px): .cp-top__stage is locked to the comp ratio and
   is a size container. Every position/size below is in cqw, where
   1cqw = 1% of stage width = 22.88 comp px. To move something, take
   its comp pixel coordinate and divide by 22.88.

   PHONES (< 700px): stacked flow — see media query at the end of
   this block. Same elements, re-placed; nothing duplicated.
   ══════════════════════════════════════════════════════════ */

.cp-top {
  position: relative;          /* NO z-index: lets .cp-top__bleed blend over Services */
  background: #EFF3F7;         /* comp sheet colour (cool white) */
}

.cp-top__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2288 / 2006;
  container-type: inline-size;
  container-name: cptop;
  overflow: hidden;
}

/* ── Construction grid behind the C (fades out radially) ── */
.cp-top__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(70,95,115,0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(70,95,115,0.16) 1px, transparent 1px);
  background-size: 2.5cqw 2.5cqw;
  background-position: 0.4cqw 0.9cqw;
  -webkit-mask-image: radial-gradient(ellipse 27cqw 22cqw at 30cqw 27cqw, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 27cqw 22cqw at 30cqw 27cqw, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Soft floor shadow under the C */
.cp-top__c-shadow {
  position: absolute;
  left: 13cqw;
  top: 41.6cqw;
  width: 29cqw;
  height: 4.4cqw;
  background: radial-gradient(closest-side, rgba(45,75,115,0.22), rgba(45,75,115,0.08) 55%, transparent);
  filter: blur(0.5cqw);
  pointer-events: none;
}

/* ── C mark ── comp footprint x 260–990, y 193–966 */
.cp-top__c {
  position: absolute;
  left: 6.69cqw;
  top: 3.19cqw;
  width: 44.67cqw;
  aspect-ratio: 1;
  z-index: 2;
}
.cp-top__c-iframe,
.cp-top__c-static {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.cp-top__c-static { display: none; object-fit: contain; }

/* ── Hero copy ── comp: headline cap-top y=341, x=1143 */
.cp-top__hero {
  position: absolute;
  left: 49.96cqw;
  top: 14.23cqw;
  width: 40cqw;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cp-top__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 92;   /* matches comp proportions */
  font-size: 7.9cqw;                    /* cap height 124 comp px */
  line-height: 0.874;                   /* line pitch 158 comp px */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #121820;
}
.cp-top__headline span { display: block; }

/* Hero tagline — the comp's subhead treatment: one uppercase line under
   the headline, cap-top at comp y 688. PATCH10 copy: client-facing line
   ("Making technology feel inevitable."), so it no longer echoes the studio
   subhead's "We engineer…". */
.cp-top__sub {
  margin-top: 1.6cqw;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(13px, 1.88cqw);   /* line width = "CASCADE" width (37.46cqw) */
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: #101117;
}

.cp-top__btn {
  margin-top: 2.82cqw;          /* button top at comp y 794 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(124px, 13.77cqw);
  height: max(34px, 3.63cqw);
  border: max(1.5px, 0.09cqw) solid #101117;
  border-radius: 0.35cqw;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: max(11px, 1.3cqw);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #101117;
  transition: background-color 240ms var(--ease-out-expo), color 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}
.cp-top__btn:hover {
  background: #101117;
  color: #EFF3F7;
}

/* ── Studio Profile block ── comp y 912–2006 (the tear band's box) */
.cp-top__studio {
  position: absolute;
  left: 0;
  top: 39.86cqw;
  bottom: 0;                    /* exact to stage edge — no sub-pixel seam */
  width: 100cqw;
  z-index: 1;
  scroll-margin-top: 4rem;
}

/* The real comp band (green server-rack texture, pixel-torn alpha edges) */
.cp-top__tear {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cp-top__tear-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* v2: pop-up depth — the band lifts off the white page; emissive canvas on top (js/tear-fx.js) */
.cp-top__tear-img { filter: drop-shadow(0 0.9cqw 1.4cqw rgba(4, 40, 28, 0.28)); }
.cp-top__tear-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Glitch layers — all clipped to the band's own alpha */
.cp-top__tear-scan,
.cp-top__tear-slice {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('../assets/top/tear-band-1280.webp');
          mask-image: url('../assets/top/tear-band-1280.webp');
  -webkit-mask-size: cover;  mask-size: cover;
  -webkit-mask-position: var(--tear-pos, 50% 50%); mask-position: var(--tear-pos, 50% 50%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Scanlines drifting down the band */
.cp-top__tear-scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(91,220,141,0.10) 0,
    rgba(91,220,141,0.10) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  animation: cp-scan 7s linear infinite;
}
@keyframes cp-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}

/* Horizontal slice displacement — the band image itself, offset in strips */
.cp-top__tear-slice {
  background-image: url('../assets/top/tear-band-1280.webp');
  background-size: cover;
  background-position: var(--tear-pos, 50% 50%);
  background-repeat: no-repeat;
  -webkit-mask-image: none; mask-image: none;  /* the image's own alpha is the mask */
  opacity: 0;
  will-change: transform, clip-path;
}
.cp-top__tear-slice--a { animation: cp-slice-a 5.2s steps(1, end) infinite; }
.cp-top__tear-slice--b { animation: cp-slice-b 7.9s steps(1, end) infinite 1.3s; }

@keyframes cp-slice-a {
  0%, 88%, 100% { opacity: 0; transform: translateX(0);       clip-path: inset(40% 0 52% 0); }
  89%           { opacity: 1; transform: translateX(1.6cqw);  clip-path: inset(40% 0 52% 0); filter: hue-rotate(40deg) brightness(1.4); }
  91%           { opacity: 1; transform: translateX(-0.9cqw); clip-path: inset(58% 0 36% 0); }
  93%           { opacity: 1; transform: translateX(0.5cqw);  clip-path: inset(22% 0 74% 0); }
  95%           { opacity: 0; }
}
@keyframes cp-slice-b {
  0%, 92%, 100% { opacity: 0; transform: translateX(0);       clip-path: inset(66% 0 28% 0); }
  93%           { opacity: 1; transform: translateX(-2.2cqw); clip-path: inset(66% 0 28% 0); }
  95%           { opacity: 1; transform: translateX(1.1cqw);  clip-path: inset(30% 0 66% 0); filter: brightness(1.6); }
  97%           { opacity: 0; }
}

/* ── P mark ── comp P sits x≈806–1510, foot at y 1943. Our real P is
   narrower than the comp's AI render, so it is scaled ~1.12× and
   bottom-anchored at the comp's foot line, centred on x 1158. */
.cp-top__p {
  position: absolute;
  left: 24.85cqw;
  top: -1.57cqw;
  width: 51.53cqw;
  aspect-ratio: 1;
  z-index: 2;
}
.cp-top__p-iframe,
.cp-top__p-static {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.cp-top__p-static { display: none; object-fit: contain; }

/* ── Glitch title ── comp: lines cap-top y=1373 / 1518, x=270 */
.cp-top__title {
  position: absolute;
  left: 11.35cqw;
  top: 19.72cqw;
  z-index: 3;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 85;
  font-size: 7.78cqw;
  line-height: 0.815;
  text-transform: uppercase;
  color: #FFFFFF;
  pointer-events: none;
}
.cp-top__title-line {
  position: relative;
  display: block;
  width: max-content;
}
.cp-top__title-line:first-child { margin-left: 0.6cqw; }
.cp-top__title b { font-weight: inherit; color: #5BDC8D; }

.cp-top__title-base {
  display: block;
  text-shadow: 0 0.12cqw 0.55cqw rgba(0,0,0,0.45);
  /* top + bottom of the glyphs; the strip between is drawn by .cp-top__title-cut */
  clip-path: polygon(
    -10% -30%, 110% -30%,
    110% var(--cut-top, 62%), -10% var(--cut-top, 62%),
    -10% calc(100% - var(--cut-bot, 26%)), 110% calc(100% - var(--cut-bot, 26%)),
    110% 130%, -10% 130%);
}

/* The "cut": a duplicate clipped to a thin strip and nudged sideways —
   reads as the letters being sliced by the tear. */
.cp-top__title-cut {
  position: absolute;
  inset: 0;
  display: block;
  color: #FFFFFF;
  clip-path: inset(var(--cut-top, 62%) -10% var(--cut-bot, 26%) -10%);
  transform: translateX(var(--cut-x, 0.35cqw));
  text-shadow: 0 0.12cqw 0.55cqw rgba(0,0,0,0.45);
  animation: cp-cut 4.6s steps(1, end) infinite;
}
.cp-top__title-line:nth-child(2) {
  --cut-top: 45%;
  --cut-bot: 41%;
  --cut-x: -0.3cqw;
}
.cp-top__title-line:nth-child(2) .cp-top__title-cut { animation-delay: 1.7s; }
.cp-top__title-cut b { color: #5BDC8D; }

/* Dashed seam marks running through the cut line, past the letters */
.cp-top__title-line::after {
  content: '';
  position: absolute;
  left: -3.2cqw;
  right: -1.6cqw;
  top: calc(var(--cut-top, 62%) - 0.06cqw);
  height: max(1px, 0.12cqw);
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) 0.55cqw,
    transparent 0.55cqw, transparent 1.6cqw);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

@keyframes cp-cut {
  0%, 84%, 100% { transform: translateX(var(--cut-x, 0.35cqw)); }
  85%           { transform: translateX(calc(var(--cut-x, 0.35cqw) * -3)); text-shadow: -0.25cqw 0 rgba(255,46,110,0.55), 0.25cqw 0 rgba(43,199,176,0.55); }
  87%           { transform: translateX(calc(var(--cut-x, 0.35cqw) * 2.5)); }
  89%           { transform: translateX(var(--cut-x, 0.35cqw)); }
}

/* ── Studio subhead — on white, beside the P ── comp x 1313, cap-top y 1779 */
.cp-top__studio-sub {
  position: absolute;
  left: 57.3cqw;
  top: 37.6cqw;
  width: 40cqw;
  z-index: 3;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: max(12.5px, 1.52cqw);
  line-height: 1.153;
  color: #101117;
}

/* ── Bleed: band continues past the stage bottom-left into Services ──
   Lives OUTSIDE the stage (the stage is a size container, which clips
   and isolates) so it can paint over the top of Services. Mirrored copy
   of the band's bottom-left with a baked-in fade (assets/top/tear-bleed).
   Sized in % of section width. */
.cp-top__bleed {
  position: absolute;
  left: 0;
  top: 100%;
  width: 39.34%;                     /* 900 of 2288 comp px */
  aspect-ratio: 900 / 460;
  background: url('../assets/top/tear-bleed.webp') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  z-index: 3;
}


.nowrap { white-space: nowrap; }

/* ── PHONES (< 700px): stacked flow ───────────────────
   Same elements, re-placed. cqw here = 1% of the viewport width.
   The studio block keeps an absolute sub-stage so band, P, title
   and subhead stay locked together at every phone width.        */
@media (max-width: 699px) {
  .cp-top__stage {
    aspect-ratio: auto;
    padding-top: 72px;              /* fixed nav */
  }
  .cp-top__grid {
    background-size: 7cqw 7cqw;
    -webkit-mask-image: radial-gradient(ellipse 50cqw 44cqw at 50cqw calc(72px + 42cqw), #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 50cqw 44cqw at 50cqw calc(72px + 42cqw), #000 35%, transparent 100%);
  }
  .cp-top__c-shadow {
    left: 22cqw;
    top: calc(72px + 76cqw);
    width: 56cqw;
    height: 8cqw;
    filter: blur(1.4cqw);
  }
  .cp-top__c {
    position: relative;
    left: auto; top: auto;
    width: 90cqw;
    margin: -1cqw 0 -5cqw 8.5cqw;   /* the C sits slightly left in its canvas */
  }
  .cp-top__hero {
    position: relative;
    left: auto; top: auto;
    width: auto;
    padding: 0 7cqw;
  }
  .cp-top__headline { font-size: 15.4cqw; }
  .cp-top__sub {
    margin-top: 4.5cqw;
    max-width: 86cqw;
    font-size: 4.15cqw;
    line-height: 1.3;
    white-space: normal;
  }
  .cp-top__btn {
    margin-top: 6cqw;
    width: 46cqw;
    height: 11.5cqw;
    font-size: 3.6cqw;
    border-radius: 1cqw;
  }

  .cp-top__studio {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: 100cqw;
    height: 142cqw;
    margin-top: 16cqw;
    /* Band via object-fit: cover. 18% keeps the band's bottom-left exit
       in frame (so the bleed still connects) while the diagonal rises
       to the right like the desktop comp. */
    --tear-pos: 18% 50%;
  }
  .cp-top__tear-img { object-position: var(--tear-pos); }
  .cp-top__p {
    left: 29cqw;
    top: 6cqw;
    width: 92cqw;
  }
  .cp-top__title {
    left: 5.5cqw;
    top: 62cqw;
    font-size: 14cqw;
  }
  .cp-top__title-line::after {
    left: -6cqw;
    right: -3cqw;
    height: max(1px, 0.3cqw);
    background: repeating-linear-gradient(to right,
      rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) 1.4cqw,
      transparent 1.4cqw, transparent 3.6cqw);
  }
  /* Phones: the band's white space is ABOVE it, so the subhead sits
     top-left on white beside the P's head (desktop: below-right). */
  .cp-top__studio-sub {
    left: 7cqw;
    top: 4cqw;
    width: 48cqw;
    font-size: 3.9cqw;
    line-height: 1.34;
  }
  .cp-top__studio-sub .nowrap { white-space: normal; }
  /* Bleed: tear-bleed.webp maps comp x 0–900. On phones the band window
     starts at ~comp x 258, at 8.55 comp px per cqw → shift + scale. */
  .cp-top__bleed {
    left: -30cqw;
    width: 105cqw;
  }
}


/* Reduced motion: keep the static slice look, drop the animated glitching */
@media (prefers-reduced-motion: reduce) {
  .cp-world__cube-glow,
  .cp-work__frame.cp-pop,
  .cp-work__slide.anim-in,
  .cp-work__slide.anim-out { animation: none; }
  .cp-top__tear-scan,
  .cp-top__tear-slice,
  .cp-top__title-cut { animation: none; }
}


/* ══════════════════════════════════════════════════════════
   3+4. THE WORLD — Services · Selected Work · Forest (PATCH11)

   Source of truth: WebStyle_v02.jpg + C4D Layers (comp y 2006–4731).
   DESKTOP + TABLET (≥ 700px): .cp-world__stage is locked to the comp
   ratio 2288:2725 and is a size container. 1cqw = 22.88 comp px,
   y origin = comp y 2006 (the top section's bottom edge).
   PHONES (< 700px): own placements in the media query below.

   Depth (back → front):  digital world · forest (+cube glow) ·
   services / lightbox · foreground tree tips · footer bar.
   Parallax: js/scroll.js reads data-parallax (fraction of scroll the
   layer lags; negative = moves faster = closer to camera).
   ══════════════════════════════════════════════════════════ */

:root {
  --cp-hud-mint: #82D9A0;           /* comp HUD text/lines: #7BCE92–#A4D19C */
  --cp-hud-mint-dim: rgba(130,217,160,0.45);
  --cp-card-navy: #0A141E;
  --cp-card-bar: #07101A;
}

.cp-world {
  position: relative;
  z-index: 1;                       /* below .cp-top__bleed (3) and the footer bar (5) */
  background: #04141A;              /* digital world's darkest tone — never a gap colour */
}

.cp-world__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2288 / 2725;
  container-type: inline-size;
  container-name: cpworld;
  overflow: hidden;
  overflow: clip;                   /* v2: clip (not hidden) so the sticky GL canvas can stick */
}

/* v2 world engine (js/world-engine.js) — one sticky transparent canvas over the
   painted plates. The DOM forest + cube glow stay as the fallback and are only
   hidden after the engine has drawn its first frame (.is-engine). */
.cp-world__gl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cp-world__gl canvas {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
}
.cp-world.is-engine .cp-world__forest img,
.cp-world.is-engine .cp-world__cube-glow { visibility: hidden; }
.cp-world.is-engine .cp-world__forest { background: none; }   /* the canvas plate carries its own alpha edge */

.cp-world__layer {
  position: absolute;
  left: 0;
  width: 100cqw;
  pointer-events: none;
  will-change: transform;
}
.cp-world__layer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 1. Digital world: comp y 2006–3172, mirrored 520px extension below
      so it always continues behind the forest under parallax. */
.cp-world__digital {
  top: 0;
  height: 73.69cqw;
}

/* 2. Forest: comp y 3045 (tree tips) → 4731 */
.cp-world__forest {
  top: 45.41cqw;
  height: 73.69cqw;
  background: linear-gradient(to bottom, transparent 30%, #14191A 30%);   /* overscan colour */
}
.cp-world__forest img { background: transparent; }

/* 6. Cube glow — child of the forest layer, so it can never drift off
      the cube. Soft radial light, no hard edges, slow breathing pulse. */
.cp-world__cube-glow {
  position: absolute;
  left: 49.74%;
  top: 52.6%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(150,255,225,0.42) 0%,
    rgba(110,235,200,0.22) 28%,
    rgba(70,200,160,0.08) 55%,
    rgba(70,200,160,0) 100%);
  mix-blend-mode: screen;
  animation: cp-cube-breathe 5.5s ease-in-out infinite;
}
.cp-world__cube-glow--ground {
  top: 58.5%;
  width: 34%;
  aspect-ratio: 2.2;
  background: radial-gradient(closest-side,
    rgba(225,255,150,0.30) 0%,
    rgba(190,240,120,0.12) 45%,
    rgba(190,240,120,0) 100%);
  animation-delay: -2.2s;
}
@keyframes cp-cube-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* 3a. Services — comp heading cap y 2173, icons y 2303, labels y 2473 */
.cp-services {
  position: absolute;
  left: 0;
  top: 0;
  width: 100cqw;
  height: 30cqw;
  z-index: 2;
  text-align: center;
  background: none;
  padding: 0;
}
.cp-services__heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.7cqw;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: max(12px, 2.05cqw);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cp-hud-mint);
  text-shadow: 0 0 0.6cqw rgba(130,217,160,0.45);
}
.cp-services__row {
  position: absolute;
  left: 50%;
  top: 12.98cqw;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cp-svc {
  width: 22cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cp-svc__icon {
  width: 5.55cqw;
  height: 5.55cqw;
  fill: none;
  stroke: var(--cp-hud-mint);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.35cqw rgba(130,217,160,0.55));
}
/* v2: Rive icons (js/services-rive.js) sit exactly over the SVG fallback */
.cp-svc { position: relative; }
.cp-svc__rive {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.cp-svc.is-rive svg.cp-svc__icon { visibility: hidden; }

.cp-svc__label {
  display: block;
  margin-top: 1.7cqw;
  max-width: 20cqw;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: max(10px, 1.6cqw);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 0.1cqw 0.5cqw rgba(0,0,0,0.7);
}
.cp-svc__label b { font-weight: 700; color: var(--cp-hud-mint); }

/* 3b. Selected Work lightbox — comp frame x 363–1892, y 2840–3609 */
.cp-work {
  position: absolute;
  left: 15.87cqw;
  top: 36.45cqw;
  width: 66.83cqw;
  height: 33.6cqw;
  z-index: 3;
  padding: 0;
  background: none;
  will-change: transform;
}
.cp-work__label {
  position: absolute;
  left: 2.6cqw;
  top: -3.05cqw;
  z-index: 4;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(14px, 3.1cqw);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cp-hud-mint);
  text-shadow: 0 0 0.7cqw rgba(130,217,160,0.5), 0 0.15cqw 0.4cqw rgba(0,0,0,0.8);
}
.cp-work__frame {
  position: absolute;
  inset: 0;
  border: 0.92cqw solid #F3F6F8;
  border-radius: 0.9cqw;
  background: var(--cp-card-navy);
  box-shadow: 0 1.2cqw 3.2cqw rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.25);
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out-expo);
}
.cp-work__track {
  position: absolute;
  inset: 0;
  /* clip swipes at the frame's sides + bottom, but leave the top open
     so a project's pop-out can rise past the frame */
  clip-path: inset(-30% 0 0 0);
}
/* Swipe-in / swipe-out (JS sets --dir to ±1) */
.cp-work__slide.anim-in  { animation: cp-slide-in 720ms var(--ease-out-expo) both; }
.cp-work__slide.anim-out { animation: cp-slide-out 480ms cubic-bezier(0.55, 0, 0.9, 0.4) both; }
@keyframes cp-slide-in  { from { opacity: 0; translate: calc(var(--dir, 1) * 16%) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes cp-slide-out { to   { opacity: 0; translate: calc(var(--dir, 1) * -16%) 0; } }
/* Frame "pop": scales past rest and settles (independent of the 3D tilt) */
.cp-work__frame.cp-pop { animation: cp-frame-pop 820ms var(--ease-out-expo); }
@keyframes cp-frame-pop {
  0%   { scale: 0.93; }
  55%  { scale: 1.035; }
  100% { scale: 1; }
}
.cp-work__slide {
  position: absolute;
  inset: 0;
  display: none;
}
.cp-work__slide.is-active,
.cp-work__slide.is-leaving { display: block; }

/* Image area: comp x 421–1836, y 2883–3436 → inset 1.53cqw sides */
.cp-work__media {
  position: absolute;
  left: 1.53cqw;
  right: 1.53cqw;
  top: 0.1cqw;
  aspect-ratio: 1415 / 553;
  overflow: visible;
}
.cp-work__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pop-out: the subject, cut out, rendered in front of its own image and
   allowed to rise past the frame. JS adds depth (scroll + pointer). */
.cp-work__pop {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--pop-rise, 0%) * -1);
  height: calc(100% + var(--pop-rise, 0%));
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 0.8cqw 1.2cqw rgba(0,0,0,0.45));
  transform: translate3d(var(--pop-x, 0px), var(--pop-y, 0px), 0) scale(var(--pop-s, 1));
  transform-origin: 50% 70%;
  transition: transform 450ms var(--ease-out-expo);
  z-index: 2;
}
/* The pop is a duplicate of the image's subject: only visible when it
   actually leaves the frame plane (keeps the static frame identical). */

.cp-work__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.4cqw;
  background: var(--cp-card-bar);
  border-top: 1px solid rgba(130,217,160,0.16);
  display: flex;
  align-items: flex-start;
}
.cp-work__title {
  margin: 1.4cqw 0 0 2.95cqw;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(11px, 1.86cqw);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #F1F5F3;
}

/* Digitize FX canvas — larger than the frame so pixels fly past it */
.cp-work__fx {
  position: absolute;
  left: -8cqw;
  top: -8cqw;
  width: calc(100% + 16cqw);
  height: calc(100% + 16cqw);
  pointer-events: none;
  z-index: 5;
}

/* Arrows — comp centres x 304 / 1940, y 3173 */
.cp-work__arrow {
  position: absolute;
  top: 43.4%;
  width: 2.2cqw;
  height: 5cqw;
  transform: translate(-50%, -50%);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 6;
  color: #80DFB3;
}
.cp-work__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 0.4cqw rgba(128,223,179,0.8)); }
.cp-work__arrow--prev { left: -3.86%; }
.cp-work__arrow--next { left: 103.14%; }
.cp-work__arrow:hover { color: #C8F5DA; }
.cp-work__arrow[hidden] { display: none; }

/* 4. Foreground tree tips — bases in the forest below the card */
.cp-world__trees {
  top: 51.21cqw;
  height: 20.59cqw;
  z-index: 4;
}


/* ══════════════════════════════════════════════════════════
   5. FOOTER BAR — comp y 4416–4731, overlaps the world's bottom.
   margin-top in % resolves against WIDTH, so −13.77% = −13.77cqw
   of the full-width stage: the bar lands exactly on the comp line.
   ══════════════════════════════════════════════════════════ */
.cp-footbar {
  position: relative;
  z-index: 5;
  margin-top: -13.77%;
  aspect-ratio: 2288 / 315;
  container-type: inline-size;
  background: linear-gradient(to bottom, rgba(46,80,100,0.40), rgba(26,48,62,0.62));
  border-top: 1px solid rgba(190,225,240,0.14);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cp-footbar__inner { position: absolute; inset: 0; }
.cp-footbar__meta {
  position: absolute;
  left: 8.92cqw;
  top: 4.75cqw;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(10px, 1.32cqw);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #E6EEF0;
}
.cp-footbar__meta span { display: block; }
.cp-footbar__meta em,
.cp-footbar__meta a { font-style: normal; color: #A4D19C; }
.cp-footbar__meta a:hover { color: #D9F7C9; text-decoration: underline; text-underline-offset: 0.2em; }

/* INITIATE PROJECT — comp chamfered pill, lime → mint → cyan */
.cp-footbar__cta {
  position: absolute;
  left: 72.1cqw;
  top: 5.5cqw;
  width: 18.75cqw;
  height: 4.02cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: max(11px, 1.38cqw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0D1A1F;
  background: linear-gradient(90deg, #D4F86A 0%, #86F7A3 50%, #4BD4E0 100%);
  clip-path: polygon(6.8% 0, 94.6% 0, 100% 32%, 100% 89%, 95% 100%, 1% 100%, 0 95%, 0 32%);
  filter: drop-shadow(0 0 0.8cqw rgba(110,240,190,0.35));
  transition: filter 240ms var(--ease-out-expo), transform 240ms var(--ease-out-expo);
}
.cp-footbar__cta:hover { filter: drop-shadow(0 0 1.4cqw rgba(110,240,190,0.65)); transform: translateY(-0.12cqw); }
.cp-footbar__logo {
  position: absolute;
  left: 92.2cqw;
  top: 5.35cqw;
  width: auto;
  height: 4.3cqw;
}

/* ── PHONES (< 700px): the world, re-placed (1cqw = 1% of screen width) ── */
@media (max-width: 699px) {
  .cp-world__stage { aspect-ratio: 100 / 282; }
  .cp-world__digital { top: 0; height: 132cqw; }
  .cp-world__forest  { top: 110cqw; height: 172cqw; }
  .cp-world__cube-glow { width: 60%; }
  .cp-world__cube-glow--ground { width: 78%; }

  .cp-services { height: 90cqw; }
  .cp-services__heading { top: 13cqw; font-size: 4.6cqw; }
  .cp-services__row {
    top: 25cqw;
    width: 92cqw;
    flex-wrap: wrap;
    row-gap: 7cqw;
  }
  .cp-svc { width: 46cqw; }
  .cp-svc__icon { width: 13cqw; height: 13cqw; filter: drop-shadow(0 0 1cqw rgba(130,217,160,0.55)); }
  .cp-svc__label { margin-top: 3cqw; max-width: 42cqw; font-size: 3.3cqw; }

  .cp-work { left: 5cqw; top: 104cqw; width: 90cqw; height: 49cqw; }
  .cp-work__label { left: 3cqw; top: -6.6cqw; font-size: 6.2cqw; }
  .cp-work__frame { border-width: 1.3cqw; border-radius: 1.6cqw; }
  .cp-work__media { left: 1.6cqw; right: 1.6cqw; }
  .cp-work__caption { height: 12.5cqw; }
  .cp-work__title { margin: 3.1cqw 0 0 3.2cqw; font-size: 3.15cqw; }
  .cp-work__fx { left: -10cqw; top: -10cqw; width: calc(100% + 20cqw); height: calc(100% + 20cqw); }
  .cp-work__arrow { width: 4cqw; height: 10cqw; }
  .cp-work__arrow--prev { left: -2.6%; }
  .cp-work__arrow--next { left: 102.6%; }

  .cp-world__trees { top: 147cqw; height: 20.59cqw; width: 100cqw; left: 0; }   /* tips cross the frame bottom, below the title */

  .cp-footbar {
    margin-top: -48%;
    aspect-ratio: 100 / 48;
  }
  .cp-footbar__meta { left: 7cqw; top: 7cqw; font-size: 2.85cqw; }
  .cp-footbar__cta  { left: 7cqw; top: 28cqw; width: 56cqw; height: 11cqw; font-size: 3.4cqw; }
  .cp-footbar__logo { left: auto; right: 7cqw; top: 28cqw; height: 11cqw; }
}



/* ══════════════════════════════════════════════════════════
   CAPABILITY FALLBACK — no-webgl / noscript
   Static PNGs show ONLY when WebGL is unavailable or JS is off.
   prefers-reduced-motion has zero effect on this site (by design).
   ══════════════════════════════════════════════════════════ */

/* WebGL unavailable: swap iframes for static PNGs */
html.no-webgl .cp-top__c-iframe { display: none; }
html.no-webgl .cp-top__c-static { display: block !important; }
html.no-webgl .cp-top__p-iframe { display: none; }
html.no-webgl .cp-top__p-static { display: block !important; }

/* noscript fallback brand marks */
.cp-top__c-noscript,
.cp-top__p-noscript {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}