/* Pixel-matched to ChatGPT Image Jun 9 2026 05_59_20 PM.png — 1672×941 stage */

@font-face {
  font-family: "Aileron";
  src: url("assets/fonts/Aileron-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Aileron";
  src: url("assets/fonts/Aileron-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Aileron";
  src: url("assets/fonts/Aileron-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Aileron";
  src: url("assets/fonts/Aileron-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

:root {
  --bg: #111112;
  --card-bg-a: #1a1a1a;
  --card-bg-b: #121212;
  --ink: #e0e0e0;
  --mute: #929292;
  --hairline: rgba(255, 255, 255, 0.06);
  --border-btn: #5a5a5a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #131313;
  font-family: "Aileron", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- continuous-scroll architecture ----------
   The document scrolls an empty .scroll-track; both fixed-size design
   panels live in a position:fixed viewport and a scrubbed timeline maps
   scroll progress onto the home→services overlap transition. */

.scroll-track { width: 1px; }

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #111112; /* letterbox bands; JS color-syncs this to the active scene */
}

.scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1672px;
  height: 941px;
  transform-origin: top left;
}

html:not(.mobile):not(.static) .scaler { overflow: hidden; }

.panel {
  position: absolute;
  top: 0;
  left: 0;
}

.panel--services { will-change: transform; }

.stage {
  position: absolute;
  width: 1672px;
  height: 941px;
  background: var(--bg);
  overflow: hidden;
}

.panel--services.stage { background: #131313; }

.shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* static mode (?static=1 pixel harness / reduced motion): plain stacked flow */
html.static .viewport { position: static; overflow: visible; }
html.static .scaler { transform: none !important; zoom: var(--k, 1); position: static; }
html.static .panel { position: relative; transform: none !important; display: block; }
html.static .stage { position: relative; }
html.static .scroll-track,
html.static .shade { display: none; }

/* ---------- header ---------- */

header { position: absolute; inset: 0 0 auto 0; }

.logo {
  position: absolute;
  left: 78px;
  top: 39px;
  font-size: 27.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f5;
  text-decoration: none;
}

header nav {
  position: absolute;
  left: 554px;
  top: 48px;
  display: flex;
  gap: 50px;
}

header nav a {
  font-size: 16px;
  font-weight: 400;
  color: #d0d0d0;
  text-decoration: none;
}

.burger {
  position: absolute;
  left: 1563px;
  top: 47px;
  width: 32px;
  height: 18px;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger span { display: block; width: 32px; height: 1.5px; border-radius: 2px; background: #9a9a9a; }
.burger::after, .chrome__burger::after { content: ""; position: absolute; inset: -13px; }

/* ---------- hero copy ---------- */

.headline {
  position: absolute;
  left: 76.5px;
  top: 196px;
  font-size: 89.5px;
  font-weight: 300;
  font-style: italic;
  line-height: 101px;
  letter-spacing: 0;
  color: var(--ink);
}

/* line masks for the load-in rise reveal (padding/margin cancel out so
   layout is identical with or without animation; padding keeps italic
   descenders and overhangs from being clipped by overflow:hidden) */
.line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.14em 0;
  margin: 0 -0.06em -0.14em 0;
}
.line-mask > span { display: inline-block; }

/* hide animated targets until GSAP has set initial states */
html:not(.gsap-ready) .headline,
html:not(.gsap-ready) .logo,
html:not(.gsap-ready) nav,
html:not(.gsap-ready) .burger,
html:not(.gsap-ready) .card,
html:not(.gsap-ready) .sub,
html:not(.gsap-ready) .cta { visibility: hidden; }

/* per-line tracking matched to the target render */
.hl1 { letter-spacing: 0.022em; }
.hl2 { letter-spacing: -0.019em; }
.hl3 { letter-spacing: -0.033em; }
.hl4 { letter-spacing: -0.042em; }

.sub {
  position: absolute;
  left: 78px;
  top: 629px;
  font-size: 25px;
  font-weight: 300;
  line-height: 37px;
  color: var(--mute);
}

.cta {
  position: absolute;
  left: 78px;
  top: 735px;
  width: 302px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 29px;
  border: 1.5px solid #666666;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.cta:hover { color: #131313; border-color: #e6e6e6; }
.cta:hover::before { transform: scaleY(1); }

.cta .arrow { flex: none; }

/* two-tone wordmark: company name, second word lighter */
.wm-light { font-weight: 300; color: #b9b9b9; }
.cta, .ab-cta, .ct-submit, .pg-viewall, .svc-detail__cta { white-space: nowrap; }

/* ---------- card + diagram ---------- */

.card {
  position: absolute;
  left: 725px;
  top: 127px;
  width: 827px;
  height: 711px;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, var(--card-bg-a) 0%, var(--card-bg-b) 100%);
}

.diagram {
  position: absolute;
  left: 63px;
  top: 42px;
  height: 623px;
  mix-blend-mode: lighten;
}

/* ---------- callouts ---------- */

.callout {
  position: absolute;
  /* --y is the label center in page coords; card top is 127 */
  top: calc(var(--y) - 127px);
  left: 0;
  width: 100%;
  height: 0;
  display: flex;
  align-items: center;
}

.callout .dot {
  position: absolute;
  left: 602px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8d8d8;
}

.callout .line {
  position: absolute;
  left: 608px;
  top: -1px;
  width: 48px;
  height: 1.5px;
  background: #c0c0c0;
}

.callout .label {
  position: absolute;
  left: 678px;
  top: -14px;
  font-family: "Red Hat Mono", monospace;
  font-size: 19.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e2e2e2;
}

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

.kicker {
  position: absolute;
  left: 107px;
  top: 168px;
  font-family: "Red Hat Mono", monospace;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.svc-list {
  position: absolute;
  left: 52px;
  top: 209px;
  width: 676px;
  list-style: none;
}

.svc-row {
  position: relative;
  height: 80px;
  border-top: 1px solid #2b2b2b;
  cursor: pointer;
  transition: height 0.4s cubic-bezier(0.65, 0, 0.18, 1), background 0.3s;
}

.svc-row:last-child { border-bottom: 1px solid #2b2b2b; }

.svc-row.is-active { background: #1d1d1d; }

/* hover: row expands, corner brackets frame it, subtitle reveals */
.svc-row.is-hovered {
  height: 110px;
  background: #1f1f1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.svc-row::before,
.svc-row::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.65, 0, 0.18, 1);
  pointer-events: none;
}

.svc-row::before {
  top: 10px;
  left: 10px;
  border-top: 2px solid #e6e6e6;
  border-left: 2px solid #e6e6e6;
  transform: translate(6px, 6px);
}

.svc-row::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #e6e6e6;
  border-right: 2px solid #e6e6e6;
  transform: translate(-6px, -6px);
}

.svc-row.is-hovered::before,
.svc-row.is-hovered::after {
  opacity: 1;
  transform: translate(0, 0);
}

.svc-sub {
  position: absolute;
  left: 127px;
  top: 64px;
  font-size: 17px;
  font-weight: 300;
  color: #8c8c8c;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.65, 0, 0.18, 1);
  pointer-events: none;
  white-space: nowrap;
}

.svc-row.is-hovered .svc-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.svc-row.is-hovered .svc-num,
.svc-row.is-hovered .svc-title { top: 38px; }

.svc-row.is-hovered .svc-arrow { top: calc(50% - 8px); }

.svc-num,
.svc-title {
  position: absolute;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  transition: color 0.25s, top 0.4s cubic-bezier(0.65, 0, 0.18, 1);
  font-family: "Red Hat Mono", monospace;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.052em;
  text-transform: uppercase;
  color: #a9a9a9;
  transition: color 0.25s;
}

.svc-num { left: 56px; }
.svc-title { left: 127px; }

.svc-row.is-active .svc-num { color: #d2d2d2; }
.svc-row.is-active .svc-title { color: #ebebeb; }

.svc-arrow {
  position: absolute;
  left: 630px;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  color: #9a9a9a;
  transition: color 0.25s, top 0.4s cubic-bezier(0.65, 0, 0.18, 1);
}

.svc-row.is-active .svc-arrow { color: #e0e0e0; }

.svc-stage {
  position: absolute;
  left: 820px;
  top: 65px;
  width: 720px;
  height: 720px;
}

.svc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: transform, opacity;
}

.svc-img.is-active { opacity: 1; }

/* ---------- service detail window ---------- */

.svc-detail {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 10;
}

.svc-detail.is-open { display: block; }

.svc-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.55);
  opacity: 0;
}

.svc-detail__win {
  position: absolute;
  left: 90px;
  top: 80px;
  width: 1492px;
  height: 781px;
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
}

.svc-detail__close {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #c8c8c8;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.svc-detail__close { transition: border-color 0.25s, color 0.25s, transform 0.4s; }
.svc-detail__close:hover { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; transform: rotate(90deg); }

.svc-detail__kicker {
  position: absolute;
  left: 90px;
  top: 96px;
  font-family: "Red Hat Mono", monospace;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c8c8c;
}

.svc-detail__title {
  position: absolute;
  left: 86px;
  top: 138px;
  font-size: 62px;
  font-weight: 300;
  font-style: italic;
  color: #e6e6e6;
  letter-spacing: 0;
}

.svc-detail__desc {
  position: absolute;
  left: 90px;
  top: 268px;
  width: 470px;
  font-size: 21px;
  font-weight: 300;
  line-height: 33px;
  color: #a9a9a9;
}

.svc-detail__points {
  position: absolute;
  left: 90px;
  top: 408px;
  width: 470px;
  list-style: none;
}

.svc-detail__points li {
  padding: 17px 0;
  border-top: 1px solid #2b2b2b;
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c2c2c2;
}

.svc-detail__points li:last-child { border-bottom: 1px solid #2b2b2b; }

.svc-detail__cta {
  position: absolute;
  left: 90px;
  bottom: 64px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 38px;
  border: 1.5px solid #666666;
  font-family: "Red Hat Mono", monospace;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.svc-detail__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.svc-detail__cta:hover { color: #191919; border-color: #e6e6e6; }
.svc-detail__cta:hover::before { transform: scaleY(1); }

.svc-detail__img {
  position: absolute;
  left: 760px;
  top: 170px;
  width: 660px;
  height: 440px;
  object-fit: contain;
}

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

.panel--process.stage { background: #0f0f0f; }

.kicker--process {
  left: 96px;
  top: 169px;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #cecece;
}

.proc-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.proc-step {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.proc-img {
  position: absolute;
  will-change: transform, opacity;
}

/* per-tile size/position: model footprints normalized to ~447px wide,
   centers on the connector line at x 313 / 838 / 1366 */
.proc-step--1 .proc-img { width: 1025px; left: -200px; top: 130px; }
.proc-step--2 .proc-img { width: 646px; left: 500px; top: 221px; }
.proc-step--3 .proc-img { width: 780px; left: 979px; top: 180px; }

.proc-head {
  position: absolute;
  top: 657px;
  display: flex;
  align-items: center;
  font-family: "Red Hat Mono", monospace;
  font-size: 19.5px;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #c2c3c3;
}

.proc-step--1 .proc-head { left: 95px; }
.proc-step--2 .proc-head { left: 620px; }
.proc-step--3 .proc-head { left: 1141px; }

.proc-dash {
  width: 21px;
  height: 2px;
  background: #c2c3c3;
  margin: 0 16px;
}

.proc-desc {
  position: absolute;
  top: 701px;
  font-size: 21px;
  font-weight: 300;
  line-height: 30.5px;
  color: #7d7d7d;
}

.proc-step--1 .proc-desc { left: 94px; }
.proc-step--2 .proc-desc { left: 619px; }
.proc-step--3 .proc-desc { left: 1140px; }

/* ================= PROJECTS / GALLERY PANEL ================= */
/* Mockup geometry shifted up 74px (chromeless rebalance, ~94px top/bottom) */

.panel--gallery.stage { background: #0d0d0d; }

.pg-kicker {
  position: absolute;
  left: 74px;
  top: 142px;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  color: #c9c9c9;
}

.pg-card {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #222222;
  border-radius: 18px;
  overflow: hidden;
  background: #0d0d0d;
  will-change: transform, clip-path;
}

.pg-card--main { left: 69px; top: 181px; width: 970px; height: 670px; }
.pg-card--rt   { left: 1069px; top: 182px; width: 539px; height: 340px; }
.pg-card--rb   { left: 1069px; top: 547px; width: 539px; height: 303px; }

.pg-ph {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
  background: #161616; /* plain backdrop — the old placeholder X-pattern
    showed through photo edges during the hover zoom */
  overflow: hidden;
}

.pg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.pg-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  border-top: 2px solid #222222;
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-bottom: 6px;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  color: #d0d0d0;
  white-space: nowrap;
  overflow: hidden;
}

.pg-count {
  position: absolute;
  right: 84px;
  top: 868px;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  text-transform: uppercase;
  color: #c9c9c9;
}

.pg-viewall {
  position: absolute;
  left: 69px;
  top: 857px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px;
  background: none;
  border: 1.5px solid #666666;
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.pg-viewall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.pg-viewall:hover { color: #0d0d0d; border-color: #e6e6e6; }
.pg-viewall:hover::before { transform: scaleY(1); }

/* ---------- full gallery overlay ---------- */

.pg-full {
  position: absolute;
  inset: 0;
  background: #0d0d0d;
  display: none;
  z-index: 20;
}

.pg-full.is-open { display: block; }

.pg-full__kicker {
  position: absolute;
  left: 74px;
  top: 56px;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  text-transform: uppercase;
  color: #c9c9c9;
}

.pg-full__close {
  position: absolute;
  top: 44px;
  right: 64px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #c8c8c8;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.pg-full__close { transition: border-color 0.25s, color 0.25s, transform 0.4s; }
.pg-full__close:hover { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; transform: rotate(90deg); }

.pg-full__grid {
  position: absolute;
  left: 69px;
  top: 130px;
  width: 1534px;
  height: 760px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* auto-rows (not fixed 3) so projects 13+ flow into new rows; 237px keeps
     the original 12-tile layout pixel-identical. The grid itself scrolls,
     so the kicker + close button stay pinned. */
  grid-auto-rows: 237px;
  align-content: start;
  gap: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.pg-full__grid::-webkit-scrollbar { width: 6px; }
.pg-full__grid::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 3px; }

/* reduced-motion (html.static): the overlay opens as a fixed scrollable sheet
   with no scrub mechanics. Harmless to the ?static=1 harness — .pg-full stays
   display:none there (never opened), so this rule only takes effect on click. */
html.static .pg-full { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
html.static .pg-full__grid { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 96px 40px 60px; }

.pg-tile {
  position: relative;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #222222;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d0d;
}

.pg-tile .pg-ph { bottom: 44px; }

.pg-tile .pg-cap {
  height: 44px;
  font-size: 14px;
  padding-left: 18px;
  border-top-width: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= ABOUT PANEL ================= */
/* Mockup geometry shifted up 48px (chromeless rebalance, ~146px margins) */

.panel--gallery.stage { z-index: 3; }
.panel--about.stage { z-index: 2; background: #0d0c0c; }

/* 3D topographic floor: perspective-projected contour plane receding
   into the dark, layered for depth, with a survey-scan sweep */
.ab-terrain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 430px;
  opacity: 0.55;
  perspective: 900px;
  perspective-origin: 50% 0%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 35%, transparent 92%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 35%, transparent 92%);
}

.ab-terrain__plane {
  position: absolute;
  left: -120px;
  right: -120px;
  top: -80px;
  bottom: -40px;
  transform-style: preserve-3d;
  transform: rotateX(58deg);
  transform-origin: 50% 100%;
  will-change: transform;
}

.ab-terrain__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ab-terrain__layer--far { transform: translateZ(-30px); }
.ab-terrain__layer--mid { transform: translateZ(20px); }
.ab-terrain__layer--near { transform: translateZ(70px); }

.ab-terrain__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 160px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.06) 55%, transparent);
  transform: translateZ(40px);
}

.ab-cta {
  position: absolute;
  left: 123px;
  top: 788px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 32px;
  border: 1.5px solid #666666;
  font-family: "Red Hat Mono", monospace;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.ab-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.ab-cta:hover { color: #0d0c0c; border-color: #e6e6e6; }
.ab-cta:hover::before { transform: scaleY(1); }

/* ================= TESTIMONIALS PANEL ================= */
/* Quote block sits 81px above mockup position (chromeless rebalance);
   client row + arrows stay pinned low per the mockup */

.panel--testi.stage { background: #0e0e0e; z-index: 4; }

.ts-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 159px;
  height: 380px;
  transform: translateX(3px);
}

.ts-quote {
  position: absolute;
  inset: 0;
  margin: 0;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 84px;
  line-height: 88px;
  letter-spacing: -0.018em;
  color: #d6d5d4;
  visibility: hidden;
}

.ts-quote.is-active { visibility: visible; }

/* 5-line quotes step down to keep the stack height */
.ts-quote--long { font-size: 71px; line-height: 76px; }

.ts-attribs {
  position: absolute;
  left: 0;
  right: 0;
  top: 556px;
  height: 30px;
  text-align: center;
}

.ts-attrib {
  position: absolute;
  inset: 0;
  font-family: "Red Hat Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #747474;
  visibility: hidden;
  white-space: nowrap;
}

.ts-attrib.is-active { visibility: visible; }

.ts-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c5c5c4;
  margin-left: 19px;
  vertical-align: -1px;
}

/* dot indicators — one per testimonial, centered (scales past 3 cleanly) */
.ts-clients {
  position: absolute;
  left: 0;
  right: 0;
  top: 760px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.ts-client {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: #6a6a6a;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s, background 0.3s, transform 0.4s cubic-bezier(0.65, 0, 0.18, 1);
}

.ts-client::after { content: ""; position: absolute; inset: -14px; } /* easier tap target */
.ts-client { position: relative; }

.ts-client:hover { opacity: 0.8; }
.ts-client.is-active { opacity: 1; background: #d2d2d2; transform: scale(1.25); }

.ts-sep { display: none; }

.ts-arrow {
  position: absolute;
  top: 864px;
  background: none;
  border: 0;
  padding: 6px;
  color: #585858;
  cursor: pointer;
  transition: color 0.3s;
}

.ts-arrow:hover { color: #c9c9c9; }
.ts-arrow--prev { left: 74px; }
.ts-arrow--next { right: 78px; }

/* read-full-letter trigger */
.ts-viewall {
  position: absolute;
  left: 50%;
  top: 802px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 9px 6px;
  font-family: "Red Hat Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8c8c8c;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s;
}
.ts-viewall:hover { color: #dadada; }
.ts-viewall svg { transition: transform 0.4s cubic-bezier(0.65, 0, 0.18, 1); }
.ts-viewall:hover svg { transform: translateX(5px); }

/* full reference-letter overlay (inside the testimonials panel) */
.ts-full {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0e0e0e;
  display: none;
}
.ts-full.is-open { display: block; }

.ts-full__kicker {
  position: absolute;
  left: 74px;
  top: 56px;
  font-family: "Red Hat Mono", monospace;
  font-size: 21px;
  text-transform: uppercase;
  color: #c9c9c9;
}

.ts-full__close {
  position: absolute;
  top: 44px;
  right: 64px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #c8c8c8;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.4s;
}
.ts-full__close:hover { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; transform: rotate(90deg); }

.ts-full__scroll {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  width: 940px;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 12px;
}
.ts-full__scroll::-webkit-scrollbar { width: 6px; }
.ts-full__scroll::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 3px; }

.ts-letter { display: none; }
.ts-letter.is-active { display: block; }

.ts-letter__name {
  font-family: "Aileron", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ececec;
}
.ts-letter__role {
  font-family: "Red Hat Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-top: 12px;
  margin-bottom: 34px;
}
.ts-letter p:not(.ts-letter__role) {
  font-family: "Aileron", sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 34px;
  color: #b8b8b8;
  margin-bottom: 22px;
}

/* ================= CONTACT PANEL ================= */
/* Mockup content shifted up 37px (chromeless rebalance); footer pinned */

.panel--contact.stage { background: #0e0e0e; z-index: 3; }

.ct-field {
  position: absolute;
  left: 92px;
  width: 630px;
}

.ct-field--name { top: 167px; height: 42px; }
.ct-field--email { top: 261px; height: 41px; }
.ct-field--phone { top: 355px; height: 41px; }
.ct-field--message { top: 448px; height: 123px; }

.ct-label {
  position: absolute;
  top: 0;
  left: 1px;
  font-family: "Red Hat Mono", monospace;
  font-size: 18px;
  text-transform: uppercase;
  color: #a4a4a4;
  transition: color 0.3s;
  pointer-events: none;
}

.ct-field:focus-within .ct-label { color: #e6e6e6; }

.ct-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 29px;
  padding-top: 5px;
  background: none;
  border: 0;
  border-bottom: 2px solid #383838;
  font-family: "Aileron", sans-serif;
  font-weight: 300;
  font-size: 19px;
  color: #d6d6d6;
  caret-color: #e6e6e6;
  outline: none;
}

.ct-textarea {
  height: 90px;
  resize: none;
  padding-top: 2px;
}

.ct-grip {
  position: absolute;
  right: 1px;
  bottom: 7px;
  pointer-events: none;
}

/* focus accent line sweeps over the resting rule */
.ct-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #c9c9c9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.18, 1);
  pointer-events: none;
}

.ct-field:focus-within::after { transform: scaleX(1); }

.ct-submit {
  position: absolute;
  left: 91px;
  top: 636px;
  width: 329px;
  height: 53px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 0 0 31px;
  background: none;
  border: 2px solid #3d3d3c;
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #a8a8a8;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.ct-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.ct-submit:hover { color: #0e0e0e; border-color: #e6e6e6; }
.ct-submit:hover::before { transform: scaleY(1); }

.ct-submit.is-sent { color: #0e0e0e; border-color: #e6e6e6; cursor: default; }
.ct-submit.is-sent::before { transform: scaleY(1); }
.ct-submit.is-sent svg { color: #0e0e0e; }
.ct-submit.is-error { border-color: #c98b8b; color: #d9a9a9; }

.ct-submit svg { color: #8a8a8a; transition: color 0.35s; }
.ct-submit:hover svg { color: #0e0e0e; }

.ct-map {
  position: absolute;
  left: 874px;
  top: 100px;
  width: 661px;
  height: 402px;
  display: block;
}

.ct-map-svg { display: block; }

.ct-roads, .ct-grid { transition: filter 0.4s; }
.ct-map:hover .ct-roads { filter: brightness(1.45); }
.ct-map:hover .ct-grid { filter: brightness(1.3); }

.ct-attrib {
  position: absolute;
  right: 140px;
  top: 496px;
  font-family: "Red Hat Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3c3c3c;
}

.ct-info {
  position: absolute;
  left: 887px;
  top: 528px;
}

.ct-row { position: absolute; left: 0; }
.ct-row:nth-child(1) { top: 0; }
.ct-row:nth-child(2) { top: 78px; }
.ct-row:nth-child(3) { top: 160px; }

.ct-info-label {
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #6e6e6e;
}

.ct-info-value {
  margin-top: 9px;
  font-family: "Red Hat Mono", monospace;
  font-size: 20px;
  text-transform: uppercase;
  color: #969696;
  white-space: nowrap;
}

.ct-info-value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.ct-info-value a:hover { color: #e0e0e0; }

.ct-footer {
  position: absolute;
  inset: auto 0 0 0;
  height: 101px;
}

.ct-footer-rule {
  position: absolute;
  top: 0;
  left: 70px;
  right: 71px;
  height: 2px;
  background: #333333;
}

.ct-footer p, .ct-footer a {
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #7c7f7d;
  text-decoration: none;
}

.ct-footer-left { position: absolute; left: 75px; top: 42px; }
.ct-footer-right { position: absolute; right: 77px; top: 42px; }

.ct-footer-links {
  position: absolute;
  left: 694px;
  top: 42px;
  display: flex;
  gap: 39px;
}

.ct-footer-links a { transition: color 0.3s; }
.ct-footer-links a:hover { color: #d0d0d0; }

/* ================= PERSISTENT CHROME + MENU ================= */

.chrome {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

/* solid band under the persistent logo so scene content scrolls beneath it,
   not through it (the gallery kicker sits high in its panel) */
.chrome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(#0f0f0f 0%, #0f0f0f 80%, rgba(15, 15, 15, 0));
  pointer-events: none;
}

.chrome.is-on { opacity: 1; pointer-events: auto; }
.chrome.is-suppressed { opacity: 0 !important; pointer-events: none !important; }

.chrome__logo {
  position: absolute;
  left: 78px;
  top: 39px;
  font-size: 27.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f5;
  text-decoration: none;
}

.chrome__nav { display: none; }

.chrome__burger {
  position: absolute;
  left: 1563px;
  top: 47px;
  width: 32px;
  height: 18px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chrome__burger span {
  display: block;
  width: 32px;
  height: 1.5px;
  border-radius: 2px;
  background: #9a9a9a;
  transition: background 0.3s, transform 0.4s cubic-bezier(0.65, 0, 0.18, 1);
}

.chrome__burger:hover span { background: #e6e6e6; }
.chrome__burger:hover span:first-child { transform: translateY(-2px); }
.chrome__burger:hover span:last-child { transform: translateY(2px); }

.menu {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #0d0d0d;
  display: none;
}

.menu.is-open { display: block; }

.menu__brand {
  position: absolute;
  left: 78px;
  top: 39px;
  font-size: 27.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}

.menu__close {
  position: absolute;
  top: 40px;
  right: 64px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #c8c8c8;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, transform 0.4s;
}

.menu__close:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; transform: rotate(90deg); }

.menu__list {
  position: absolute;
  left: 120px;
  top: 150px;
}

.menu__item {
  display: flex;
  align-items: baseline;
  gap: 26px;
  height: 84px;
  text-decoration: none;
}

.menu__num {
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  color: #5e5e5e;
  transition: color 0.3s;
}

.menu__mask {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.08em 0.16em 0;
  margin: 0 -0.08em -0.16em 0;
}

.menu__label {
  display: inline-block;
  font-size: 58px;
  font-weight: 300;
  font-style: italic;
  color: #b9b9b9;
  transition: color 0.3s, transform 0.45s cubic-bezier(0.65, 0, 0.18, 1);
}

.menu__item:hover .menu__label { color: #f5f5f5; transform: translateX(16px); }
.menu__item:hover .menu__num { color: #a8a8a8; }

.menu__item.is-current .menu__label { color: #f5f5f5; }
.menu__item.is-current .menu__num { color: #e6e6e6; }

.menu__foot {
  position: absolute;
  left: 122px;
  bottom: 56px;
  font-family: "Red Hat Mono", monospace;
  font-size: 16px;
  text-transform: uppercase;
  color: #6a6a6a;
}

.menu__foot a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.menu__foot a:hover { color: #d0d0d0; }

html.static .chrome,
html.static .menu { display: none; }

/* ================================================================
   MOBILE (<760px) — single-column flow at a 390px design width,
   layout-zoomed to the device width. Desktop rules above untouched.
   ================================================================ */

html.mobile .viewport { position: static; overflow: visible; background: #0f0f0f; }
html.mobile body { background: #0f0f0f; }
html.mobile .stage { background: #0f0f0f !important; }
html.mobile .scaler { position: static; transform: none !important; width: 390px; height: auto; zoom: var(--k, 1); margin: 0 auto; }
html.mobile .scroll-track { display: none; }
html.mobile .shade { display: none; }

html.mobile .panel,
html.mobile .stage {
  position: relative;
  width: 390px;
  height: auto;
  overflow: hidden;
  transform: none !important;
}

/* (content-visibility was removed here: its estimated heights swapping to
   real ones mid-scroll caused the document to grow under the thumb —
   scroll-position twitches. Paint cost is handled by hiding the heavy
   desktop-only layers below instead.) */

html.mobile .pg-img,
html.mobile .proc-img,
html.mobile .svc-img,
html.mobile .ab-terrain__plane,
html.mobile .panel--gallery,
html.mobile .panel--testi { will-change: auto; }

/* ---------- mobile HOME (calibrated to _mobile_home_target.png) ---------- */
html.mobile .panel--home.stage { background: #0f0f0f; padding: 0 0 44px; }
html.mobile header { position: relative; inset: auto; height: 64px; }
html.mobile .logo { left: 26px; top: 49px; font-size: 17px; }
html.mobile header nav { display: none; }
html.mobile .burger { left: auto; right: 27px; top: 52px; width: 27px; height: 13px; }
html.mobile .burger span { width: 27px; height: 2px; background: #c1c1c2; }
html.mobile .headline {
  position: relative; left: auto; top: auto;
  margin: 44px 24px 0;
  font-size: 39px; line-height: 49px;
}
html.mobile .sub {
  position: relative; left: auto; top: auto;
  margin: 15px 25px 0;
  font-size: 15px; line-height: 21.5px;
}
html.mobile .cta {
  position: relative; left: 24px; top: auto;
  margin-top: 23px;
  width: 176px; height: 50px;
  justify-content: flex-start;
  padding-left: 22px;
  font-size: 15px; gap: 18px; letter-spacing: 0.02em;
  border-width: 1px; border-color: #9d9d9d;
}
html.mobile .card {
  position: relative; left: auto; top: auto;
  margin: 31px 14px 0;
  overflow: hidden;
  width: 362px; height: 387px;
  border-radius: 12px;
  border-color: #212120;
  background: #111111;
}
/* blend modes force whole-page compositing on mobile GPUs; the card is a
   flat color here so the blend is visually unnecessary anyway */
html.mobile .diagram { left: 0px; top: 20px; height: 350px; mix-blend-mode: normal; }
html.mobile .callout { top: 0; }
html.mobile .callout .dot { left: 268px; top: -2px; width: 4px; height: 4px; background: #ffffff; }
html.mobile .callout .line { left: 276px; top: 0; width: 22px; height: 1px; background: #565656; }
html.mobile .callout .label { left: 298px; top: -7px; font-size: 11.5px; letter-spacing: 0.02em; color: #9d9e9e; }
html.mobile .callout--m1 { top: 88px !important; }
html.mobile .callout--m2 { top: 199px !important; }
html.mobile .callout--m3 { top: 298px !important; }
/* dotted vertical connector through the dots (reference detail) */
html.mobile .card::after {
  content: "";
  position: absolute;
  left: 269px;
  top: 103px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #232222 0 2px, transparent 2px 4px);
}

/* ---------- mobile SERVICES ---------- */
html.mobile .panel--services.stage { padding: 64px 0 64px; }
html.mobile .kicker:not(.kicker--process) { position: relative; left: 24px; top: auto; font-size: 13px; }
html.mobile .svc-list { position: relative; left: 16px; top: auto; margin-top: 18px; width: 358px; }
html.mobile .svc-row { height: auto; min-height: 64px; }
html.mobile .svc-row.is-hovered { height: auto; background: #1d1d1d; box-shadow: none; }
html.mobile .svc-row::before, html.mobile .svc-row::after { display: none; }
html.mobile .svc-sub { display: none; }
html.mobile .svc-num { left: 16px; top: 32px; font-size: 15px; }
html.mobile .svc-title { left: 64px; top: 32px; font-size: 15px; }
html.mobile .svc-row.is-hovered .svc-num,
html.mobile .svc-row.is-hovered .svc-title { top: 32px; }
html.mobile .svc-arrow {
  left: auto; right: 14px; top: 32px;
  transform: translateY(-50%) scale(0.7) rotate(0deg);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.18, 1);
}
html.mobile .svc-row.is-hovered .svc-arrow { top: 32px; }
html.mobile .svc-row.is-open .svc-arrow { transform: translateY(-50%) scale(0.7) rotate(90deg); }

/* inline accordion content. The 64px clearance lives on the acc's own
   margin (NOT a child margin inside it): margin space is not hit-testable,
   so the whole header band stays tappable to collapse the row. */
html.mobile .svc-acc { height: 0; opacity: 0; overflow: hidden; margin-top: 64px; }
html.mobile .svc-acc__desc {
  margin: 10px 18px 0 64px;
  font-size: 14px; font-weight: 300; line-height: 21px; color: #9a9a9a;
}
html.mobile .svc-acc__points { list-style: none; margin: 14px 18px 0 64px; }
html.mobile .svc-acc__points li {
  padding: 9px 0; border-top: 1px solid #2b2b2b;
  font-family: "Red Hat Mono", monospace; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase; color: #c2c2c2;
}
html.mobile .svc-acc__img {
  display: block; width: calc(100% - 82px); height: 150px;
  margin: 16px 18px 0 64px; object-fit: contain;
}
html.mobile .svc-acc__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 16px 0 20px 64px; padding: 12px 18px;
  border: 1px solid #666666;
  font-family: "Red Hat Mono", monospace; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #e6e6e6; text-decoration: none; white-space: nowrap;
}

/* the old desktop-style stage + sheet are out of the mobile path entirely */
html.mobile .svc-stage { display: none; }
html.mobile .svc-detail { display: none !important; }
html.mobile .svc-stage { position: relative; left: auto; top: auto; margin: 28px auto 0; width: 358px; height: 300px; }
html.mobile .panel--services { will-change: auto; } /* will-change creates a fixed-pos containing block */
html.mobile .svc-detail { position: fixed; inset: 0; z-index: 60; }
html.mobile .svc-detail__win {
  position: relative; left: auto; top: auto;
  width: min(374px, calc(100% - 16px));
  height: auto; max-height: calc(100dvh - 20px);
  margin: 10px auto; padding: 24px 24px 28px;
  overflow-y: auto;
}
html.mobile .svc-detail__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; }
html.mobile .svc-detail__kicker { position: static; font-size: 12px; }
html.mobile .svc-detail__title { position: static; margin-top: 10px; font-size: 32px; }
html.mobile .svc-detail__desc { position: static; margin-top: 14px; width: auto; font-size: 15px; line-height: 24px; }
html.mobile .svc-detail__points { position: static; margin-top: 18px; width: auto; }
html.mobile .svc-detail__points li { padding: 11px 0; font-size: 12px; }
html.mobile .svc-detail__img { position: static; display: block; width: 250px; height: 170px; margin: 18px auto 0; }
html.mobile .svc-detail__cta { position: static; display: inline-flex; margin-top: 20px; padding: 14px 22px; font-size: 13px; gap: 12px; }

/* ---------- mobile PROCESS ---------- */
html.mobile .panel--process.stage { padding: 64px 0 56px; }
html.mobile .kicker--process { position: relative; left: 24px; top: auto; font-size: 14px; }
html.mobile .proc-line { display: none; }
html.mobile .proc-step { position: relative; inset: auto; margin-top: 34px; }
html.mobile .proc-img { position: relative; display: block; margin: 0 auto; }
html.mobile .proc-step--1 .proc-img { left: auto; top: auto; width: 330px; }
html.mobile .proc-step--2 .proc-img { left: auto; top: auto; width: 252px; }
html.mobile .proc-step--3 .proc-img { left: auto; top: auto; width: 286px; }
html.mobile .proc-head { position: relative; left: 24px !important; top: auto; margin-top: 14px; font-size: 14px; }
html.mobile .proc-dash { width: 14px; margin: 0 10px; }
html.mobile .proc-desc { position: relative; left: 24px !important; top: auto; margin-top: 10px; font-size: 15px; line-height: 23px; }

/* ---------- mobile PROJECTS ---------- */
html.mobile .panel--gallery.stage { padding: 64px 16px 64px; }
html.mobile .pg-kicker { position: relative; left: 8px; top: auto; font-size: 13px; }
html.mobile .pg-card { position: relative; margin-top: 20px; border-radius: 12px; }
html.mobile .pg-card--main { left: auto; top: auto; width: 358px; height: 300px; }
html.mobile .pg-card--rt { left: auto; top: auto; width: 358px; height: 240px; }
html.mobile .pg-card--rb { left: auto; top: auto; width: 358px; height: 240px; }
html.mobile .pg-card .pg-ph { bottom: 56px; }
html.mobile .pg-card .pg-cap { height: 56px; font-size: 11px; line-height: 15px; padding: 6px 14px 4px 16px; white-space: normal; }
html.mobile .pg-tile .pg-ph { bottom: 42px; }
html.mobile .pg-tile .pg-cap { height: 42px; font-size: 11.5px; padding-left: 16px; padding-bottom: 4px; }
html.mobile .pg-tile .pg-cap { white-space: normal; }
html.mobile .pg-count { position: relative; right: auto; top: auto; float: right; margin-top: 22px; font-size: 14px; }
html.mobile .pg-viewall { position: relative; left: 8px; top: auto; margin-top: 18px; padding: 12px 20px; font-size: 13px; }
html.mobile .pg-full__kicker { left: 24px; top: 24px; font-size: 14px; }
html.mobile .pg-full__close { top: 16px; right: 16px; width: 40px; height: 40px; }
html.mobile .pg-full { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
html.mobile .pg-full__grid {
  position: relative; left: 16px; top: 84px; width: 358px; height: auto;
  grid-template-columns: 1fr; grid-template-rows: none; gap: 18px;
  padding-bottom: 120px;
  /* undo the desktop overlay-scroll grid: rows follow the tiles' own heights,
     and the grid must NOT be its own scroll area here — .pg-full scrolls, and
     overflow+contain on the grid would eat wheel/touch chaining (unscrollable
     overlay + tiles overlapping rows = the iPad "smush" bug) */
  grid-auto-rows: auto;
  overflow-y: visible;
  overscroll-behavior: auto;
}
html.mobile .pg-tile { height: 230px; }

/* ---------- mobile ABOUT ---------- */
html.mobile .panel--about.stage { padding: 72px 0 64px; }
html.mobile .ab-head { position: relative; left: 24px; top: auto !important; font-size: 34px; line-height: 42px; }
html.mobile .ab-head--2 { margin-top: 6px; }
html.mobile .ab-para { position: relative; left: 24px; top: auto; margin-top: 26px; width: 330px; font-size: 15.5px; line-height: 24px; }
html.mobile .ab-stats { position: relative; left: 24px; top: auto; margin-top: 40px; width: 342px; }
html.mobile .ab-stat { position: relative; top: auto !important; height: auto; padding: 22px 0 26px; }
html.mobile .ab-divider { width: 342px; }
html.mobile .ab-label { position: relative; left: 6px; top: auto; font-size: 13px; }
html.mobile .ab-value { position: relative; left: 6px; top: auto; margin-top: 10px; font-size: 26px; }
html.mobile .ab-cta { position: relative; left: 24px; top: auto; margin-top: 36px; padding: 14px 24px; font-size: 13px; }
/* 3D-transformed masked SVG terrain is desktop candy — pure jank tax on
   phones; the page reads clean without it */
html.mobile .ab-terrain { display: none; }
html.mobile .ab-underline { display: none; }

/* ---------- mobile TESTIMONIALS ---------- */
html.mobile .panel--testi.stage { padding: 64px 0 74px; }
html.mobile .ts-stack { position: relative; top: auto; height: 240px; transform: none; }
html.mobile .ts-quote { font-size: 30px; line-height: 38px; padding: 0 22px; }
html.mobile .ts-attribs { position: relative; top: auto; margin-top: 14px; height: 44px; }
html.mobile .ts-attrib { font-size: 11px; padding: 0 22px; white-space: normal; line-height: 16px; display: flex; align-items: center; justify-content: center; }
html.mobile .ts-dot { display: none; } /* detaches when the attribution wraps; nav dots already convey position */
html.mobile .ts-clients { position: relative; left: auto; right: auto; top: auto; margin: 14px auto 0; gap: 14px; }
html.mobile .ts-client { width: 9px; height: 9px; }
html.mobile .ts-sep { display: none; }
html.mobile .ts-arrow { top: auto; bottom: 18px; padding: 12px; }
html.mobile .ts-arrow--prev { left: 92px; }
html.mobile .ts-arrow--next { right: 92px; }
html.mobile .ts-viewall { position: relative; left: auto; top: auto; transform: none; margin: 56px auto 0; display: flex; justify-content: center; font-size: 12px; }
html.mobile .ts-full { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
html.mobile .ts-full__kicker { left: 24px; top: 22px; font-size: 14px; }
html.mobile .ts-full__close { top: 13px; right: 16px; width: 40px; height: 40px; }
html.mobile .ts-full__scroll { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; margin: 68px 22px 64px; padding: 0; overflow: visible; }
html.mobile .ts-letter__name { font-size: 30px; }
html.mobile .ts-letter__role { font-size: 12px; margin-bottom: 26px; }
html.mobile .ts-letter p:not(.ts-letter__role) { font-size: 16px; line-height: 25px; margin-bottom: 18px; }

/* ---------- mobile CONTACT ---------- */
html.mobile .panel--contact.stage { padding: 64px 0 0; }
html.mobile .ct-field { position: relative; left: 24px; top: auto !important; width: 342px; height: auto; margin-top: 30px; }
html.mobile .ct-field .ct-input { position: relative; margin-top: 8px; width: 100%; height: 36px; }
html.mobile .ct-label { position: relative; font-size: 14px; }
html.mobile .ct-field--message .ct-textarea { height: 80px; }
html.mobile .ct-grip { bottom: 6px; }
html.mobile .ct-submit { position: relative; left: 24px; top: auto; margin-top: 34px; width: 280px; height: 50px; font-size: 13.5px; padding-left: 22px; gap: 14px; }
html.mobile .ct-map { position: relative; left: 4px; top: auto; margin-top: 44px; width: 382px; height: 232px; }
html.mobile .ct-map-svg { width: 382px; height: 232px; }
html.mobile .ct-attrib { position: relative; right: auto; top: auto; margin: 6px 24px 0 auto; text-align: right; font-size: 10px; }
html.mobile .ct-info { position: relative; left: 24px; top: auto; margin-top: 28px; width: 342px; }
html.mobile .ct-row { position: relative; top: auto !important; margin-top: 20px; }
html.mobile .ct-info-label { font-size: 12px; }
html.mobile .ct-info-value { margin-top: 6px; font-size: 14px; white-space: normal; }
html.mobile .ct-info-value a { display: inline-block; padding: 8px 0; margin: -8px 0; }
html.mobile .ct-footer { position: relative; inset: auto; margin-top: 48px; height: auto; padding: 26px 24px 30px; }
html.mobile .ct-footer-rule { left: 16px; right: 16px; }
html.mobile .ct-footer-left { position: relative; left: auto; top: auto; font-size: 10px; }
html.mobile .ct-footer-links { position: relative; left: auto; top: auto; margin-top: 14px; gap: 16px; flex-wrap: wrap; }
html.mobile .ct-footer-links a { font-size: 11px; padding: 12px 4px; margin: -12px -4px; }
html.mobile .ct-footer-right { position: relative; right: auto; top: auto; margin-top: 12px; font-size: 11px; }

/* ---------- mobile CHROME + MENU ---------- */
html.mobile .chrome { position: fixed; z-index: 40; }
html.mobile .chrome::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 62px; background: linear-gradient(#0f0f0f 52%, rgba(15,15,15,0)); pointer-events: none; }
html.mobile .chrome__logo { left: calc(24px + var(--gutter, 0px)); top: 18px; font-size: 19px; }
html.mobile .chrome__burger { left: auto; right: calc(24px + var(--gutter, 0px)); top: 24px; width: 26px; height: 14px; }
html.mobile .chrome__burger span { width: 26px; }
html.mobile .menu { position: fixed; z-index: 50; }
html.mobile .menu__brand { left: calc(24px + var(--gutter, 0px)); top: 18px; font-size: 19px; }
html.mobile .menu__close { top: 14px; right: calc(18px + var(--gutter, 0px)); width: 40px; height: 40px; }
html.mobile .menu__list { left: calc(30px + var(--gutter, 0px)); top: 86px; }
html.mobile .menu__item { height: 58px; gap: 14px; }
html.mobile .menu__num { font-size: 11px; }
html.mobile .menu__label { font-size: 32px; }
html.mobile .menu__foot { left: calc(32px + var(--gutter, 0px)); bottom: 28px; font-size: 11px; }

.ab-head {
  position: absolute;
  left: 117px;
  font-size: 87px;
  font-weight: 300;
  font-style: italic;
  line-height: 101px;
  letter-spacing: -0.02em;
  color: #f0f0f0;
}

.ab-head--1 { top: 161px; }
.ab-head--2 { top: 364px; }

.ab-para {
  position: absolute;
  left: 123px;
  top: 610px;
  font-size: 24.5px;
  font-weight: 300;
  line-height: 35px;
  color: #999998;
}

.ab-stats {
  position: absolute;
  left: 1101px;
  top: 146px;
  width: 460px;
}

.ab-stat {
  position: absolute;
  left: 0;
  width: 100%;
}

.ab-stat:nth-child(1) { top: 0; }
.ab-stat:nth-child(2) { top: 176px; }
.ab-stat:nth-child(3) { top: 351px; }
.ab-stat:nth-child(4) { top: 527px; }

.ab-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 451px;
  height: 2px;
  background: #333333;
  transition: background 0.35s;
}

.ab-stat:hover .ab-divider { background: #5a5a5a; }
.ab-stat:hover .ab-value { color: #ffffff; }
.ab-stat:hover .ab-dash { width: 26px; }
.ab-stat { height: 150px; }

.ab-label {
  position: absolute;
  left: 9px;
  top: 45px;
  display: flex;
  align-items: center;
  font-family: "Red Hat Mono", monospace;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: #8b8c8b;
}

.ab-dash {
  width: 12px;
  height: 2px;
  background: #8b8b8b;
  margin-left: 13px;
  transition: width 0.35s cubic-bezier(0.65, 0, 0.18, 1);
}

.ab-value {
  position: absolute;
  left: 9px;
  top: 83px;
  font-family: "Red Hat Mono", monospace;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #f1f1f1;
  white-space: nowrap;
  transition: color 0.35s;
}


/* ================= WORK WITH US (standalone page, fluid) ================= */

.ww-body {
  background: #0f0f0f;
  min-height: 100vh;
  overflow-x: hidden;
}

html:not(.gsap-ready) .ww-header,
html:not(.gsap-ready) .ww-main,
html:not(.gsap-ready) .ww-footer { visibility: hidden; }

.ww-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 34px 40px 0;
}

.ww-logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f5;
  text-decoration: none;
}

.ww-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Red Hat Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  text-decoration: none;
  transition: color 0.3s;
}

.ww-back:hover { color: #e6e6e6; }

.ww-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 40px 0;
}

.ww-kicker {
  font-family: "Red Hat Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.ww-head {
  margin-top: 18px;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  font-style: italic;
  color: #ececec;
}

.ww-mask { display: inline-block; overflow: hidden; padding: 0 0.06em 0.14em 0; margin: 0 -0.06em -0.14em 0; }
.ww-mask > span { display: inline-block; }

.ww-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 54px;
}

.ww-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(150deg, #181818 0%, #121212 100%);
  padding: 44px 42px 40px;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.45s cubic-bezier(0.65, 0, 0.18, 1);
}

.ww-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-6px); }

.ww-card__num {
  position: absolute;
  right: 26px;
  top: 6px;
  font-family: "Red Hat Mono", monospace;
  font-size: 120px;
  font-weight: 400;
  color: #1d1d1d;
  pointer-events: none;
  user-select: none;
}

.ww-card__callout { display: flex; align-items: center; gap: 0; height: 6px; }
.ww-card__callout .dot { width: 6px; height: 6px; border-radius: 50%; background: #d8d8d8; }
.ww-card__callout .line { width: 52px; height: 1.5px; background: #555; margin-left: 7px; }

.ww-card__title {
  margin-top: 22px;
  font-family: "Red Hat Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8e8e8;
}

.ww-card__copy {
  margin-top: 16px;
  max-width: 420px;
  font-size: 17px;
  font-weight: 300;
  line-height: 27px;
  color: #9a9a9a;
}

.ww-card__cta,
.ww-submit {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 16px 28px;
  background: none;
  border: 1.5px solid #666;
  font-family: "Red Hat Mono", monospace;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.18, 1), border-color 0.35s;
}

.ww-card__cta::before,
.ww-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: -1;
}

.ww-card__cta { position: relative; }
.ww-submit { position: relative; }

.ww-card__cta:hover, .ww-submit:hover,
.ww-submit.is-sent { color: #121212; border-color: #e6e6e6; }
.ww-card__cta:hover::before, .ww-submit:hover::before,
.ww-submit.is-sent::before { transform: scaleY(1); }
.ww-submit.is-error { border-color: #c98b8b; color: #d9a9a9; }

.ww-formwrap {
  margin: 84px auto 0;
  max-width: 880px;
  padding-bottom: 40px;
}

.ww-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: 5px;
  gap: 4px;
}

.ww-toggle__btn {
  padding: 11px 24px;
  border: 0;
  border-radius: 30px;
  background: none;
  font-family: "Red Hat Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.ww-toggle__btn.is-on { background: #e6e6e6; color: #121212; }

.ww-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
  margin-top: 44px;
}

.ww-field--wide { grid-column: 1 / -1; }

.ww-label {
  display: block;
  font-family: "Red Hat Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a4a4a4;
}

.ww-field { position: relative; }

.ww-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #c9c9c9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.18, 1);
  pointer-events: none;
}

.ww-field:focus-within::after { transform: scaleX(1); }
.ww-field:focus-within .ww-label { color: #e6e6e6; }

.ww-input {
  width: 100%;
  margin-top: 10px;
  padding: 6px 0 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid #383838;
  font-family: "Aileron", sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #d6d6d6;
  caret-color: #e6e6e6;
  outline: none;
}

.ww-textarea { height: 92px; resize: none; }

.ww-submit { margin-top: 6px; }

.ww-alt {
  align-self: center;
  margin-top: 6px;
  font-family: "Red Hat Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.ww-alt a { color: #9a9a9a; text-decoration: none; transition: color 0.3s; white-space: nowrap; }
.ww-alt a:hover { color: #e6e6e6; }

.ww-footer {
  display: flex;
  justify-content: space-between;
  max-width: 1240px;
  margin: 60px auto 0;
  padding: 26px 40px 36px;
  border-top: 1px solid #2b2b2b;
  font-family: "Red Hat Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7c7f7d;
}

@media (max-width: 860px) {
  .ww-header { padding: 24px 22px 0; }
  .ww-logo { font-size: 18px; }
  .ww-back { font-size: 11px; }
  .ww-main { padding: 48px 22px 0; }
  .ww-head { line-height: 1.18; }
  .ww-cards { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .ww-card { padding: 32px 24px 30px; }
  /* ghost numeral gets its own top-right band; title drops below it (they collided at full width) */
  .ww-card__num { font-size: 80px; line-height: 1; top: 18px; right: 20px; }
  .ww-card__title { margin-top: 64px; font-size: 22px; }
  .ww-card__copy { margin-top: 14px; }
  .ww-card__cta { margin-top: 26px; }
  .ww-formwrap { margin-top: 56px; }
  .ww-toggle { display: flex; width: max-content; }
  .ww-toggle__btn { padding: 11px 18px; font-size: 12px; }
  .ww-form { grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
  .ww-textarea { height: 84px; }
  .ww-submit { width: 100%; justify-content: space-between; margin-top: 10px; }
  .ww-alt { line-height: 1; }
  .ww-alt__sep { display: none; }
  .ww-alt a { display: block; margin-top: 9px; }
  .ww-footer { flex-direction: column; gap: 8px; margin-top: 44px; padding: 22px 22px 30px; }
  .ww-footer p { text-wrap: balance; line-height: 20px; }
}


/* ================= CLIENT LOGO LOCKUP ================= */
.logo, .chrome__logo, .menu__brand, .ww-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.logo__mark { display: block; height: 30px; width: auto; }
.chrome__logo .logo__mark, .menu__brand .logo__mark { height: 27px; }
.ww-logo .logo__mark { height: 25px; }
.logo__text { white-space: nowrap; }

html.mobile .logo .logo__mark,
html.mobile .chrome__logo .logo__mark,
html.mobile .menu__brand .logo__mark { height: 20px; }
@media (max-width: 860px) {
  .ww-logo .logo__mark { height: 19px; }
}


/* ===== TEMP LOGO COMPARE — delete this whole block to revert to emblem+wordmark ===== */
.logo__mark { content: url("assets/logo-full.png"); }
.logo__text { display: none; }

/* desktop home: corner logo, nav + burger centered on its midline */
.logo .logo__mark { height: 108px; }
.logo { top: 28px; }
header nav { top: 72px; }
.burger { top: 72px; }

/* persistent chrome + fullscreen menu */
.chrome__logo .logo__mark, .menu__brand .logo__mark { height: 78px; }
.chrome__burger { top: 69px; }
.menu__close { top: 55px; }
.menu__list { top: 156px; }

/* work with us — NOTE bare `header{position:absolute}` applies here too, main doesn't flow below it */
.ww-logo .logo__mark { height: 78px; }
.ww-main { padding-top: 150px; }

/* mobile */
html.mobile .logo .logo__mark,
html.mobile .chrome__logo .logo__mark,
html.mobile .menu__brand .logo__mark { height: 66px; }
html.mobile .logo { top: 30px; }
html.mobile header { height: 100px; }
html.mobile .burger { top: 57px; }
html.mobile .chrome::before { height: 128px; background: linear-gradient(#0f0f0f 0%, #0f0f0f 78%, rgba(15,15,15,0)); }
html.mobile .chrome__burger { top: 44px; }
html.mobile .menu__close { top: 31px; }
html.mobile .menu__list { top: 112px; }
@media (max-width: 860px) {
  .ww-logo .logo__mark { height: 56px; }
  .ww-main { padding-top: 116px; }
}
/* ===== END TEMP LOGO COMPARE ===== */


/* ================================================================
   WIDE FLOW (html.mobile.wide) — flow mode at desktop widths (>=940px).
   Same DOM + JS as mobile flow, dressed as a fluid desktop site:
   content column min(100% - 120px, 1140px), 2-col hero/about/contact,
   3-col process, 2-col gallery. Fills any window height.
   ================================================================ */

html.mobile.wide .scaler { width: min(100% - 120px, 1140px); }
html.mobile.wide .panel,
html.mobile.wide .stage { width: 100%; }

/* ---------- wide HOME: persistent chrome header + 2-col hero ---------- */
/* the chrome (fixed bar) is the header in wide flow — always on, with nav */
html.mobile.wide .chrome { opacity: 1; pointer-events: auto; }
html.mobile.wide .chrome__nav {
  display: flex;
  position: absolute;
  right: calc(96px + var(--gutter, 0px));
  top: 42px;
  gap: 34px;
}
html.mobile.wide .chrome__nav a {
  font-size: 15px;
  color: #d0d0d0;
  text-decoration: none;
  transition: color 0.3s;
}
html.mobile.wide .chrome__nav a:hover { color: #ffffff; }
html.mobile.wide .chrome__logo { top: 22px; }
html.mobile.wide .chrome__burger { top: 46px; }
html.mobile.wide header { display: none; } /* fixed chrome replaces the in-flow header */

html.mobile.wide .panel--home.stage {
  display: grid;
  grid-template-columns: 1fr 580px;
  column-gap: 52px;
  align-items: start;
  align-content: start;
  padding: 152px 0 96px;
}
html.mobile.wide .headline {
  grid-column: 1;
  margin: 0;
  font-size: clamp(42px, 4.6vw, 60px);
  line-height: 1.22;
}
html.mobile.wide .sub { grid-column: 1; margin: 24px 0 0; font-size: 17px; line-height: 26px; }
html.mobile.wide .cta { grid-column: 1; left: 0; margin-top: 32px; }
/* the hero card uses the DESKTOP composition (big diagram, callouts in a
   clear right gutter), zoomed to the column - the phone-card layout reads
   cramped at desktop sizes */
html.mobile.wide .card {
  grid-column: 2; grid-row: 1 / span 3;
  zoom: 0.70;
  margin: 8px 0 0;
  width: 827px; height: 711px;
  border-radius: 22px;
  border-color: var(--hairline);
  background: linear-gradient(135deg, var(--card-bg-a) 0%, var(--card-bg-b) 100%);
}
html.mobile.wide .diagram { left: 63px; top: 42px; height: 623px; mix-blend-mode: lighten; }
html.mobile.wide .callout--m1,
html.mobile.wide .callout--m2,
html.mobile.wide .callout--m3 { top: calc(var(--y) - 127px) !important; }
html.mobile.wide .callout .dot { left: 602px; top: -3px; width: 6px; height: 6px; background: #d8d8d8; }
html.mobile.wide .callout .line { left: 608px; top: -1px; width: 48px; height: 1.5px; background: #c0c0c0; }
html.mobile.wide .callout .label { left: 678px; top: -14px; font-size: 19.5px; letter-spacing: 0.07em; color: #e2e2e2; }
html.mobile.wide .card::after { display: none; }

/* ---------- wide SERVICES ---------- */
html.mobile.wide .panel--services.stage { padding: 84px 0; }
html.mobile.wide .kicker:not(.kicker--process) { left: 0; }
html.mobile.wide .svc-list { left: 0; width: 100%; margin-top: 26px; }
html.mobile.wide .svc-acc__desc { margin-left: 64px; max-width: 640px; font-size: 15px; line-height: 24px; }
html.mobile.wide .svc-acc__points { margin-left: 64px; max-width: 640px; }
html.mobile.wide .svc-acc__img { width: 360px; height: 210px; margin-left: 64px; }

/* ---------- wide PROCESS: three steps side by side ---------- */
html.mobile.wide .panel--process.stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 44px;
  align-items: start;
  padding: 92px 0;
}
html.mobile.wide .kicker--process { grid-column: 1 / -1; left: 0; }
html.mobile.wide .proc-step { margin-top: 44px; }
html.mobile.wide .proc-step .proc-img { width: min(100%, 320px); }
html.mobile.wide .proc-head { left: 0 !important; }
html.mobile.wide .proc-desc { left: 0 !important; font-size: 14.5px; line-height: 22px; padding-right: 8px; }

/* ---------- wide PROJECTS: main full-width, pair below ---------- */
html.mobile.wide .panel--gallery.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  padding: 92px 0;
}
html.mobile.wide .pg-kicker { grid-column: 1 / -1; left: 0; }
html.mobile.wide .pg-card { width: 100%; }
html.mobile.wide .pg-card--main { grid-column: 1 / -1; height: 480px; margin-top: 26px; }
html.mobile.wide .pg-card--rt, html.mobile.wide .pg-card--rb { height: 320px; margin-top: 26px; }
html.mobile.wide .pg-card .pg-cap { font-size: 13px; line-height: 18px; padding: 10px 18px 6px; }
html.mobile.wide .pg-count { margin-top: 30px; }
html.mobile.wide .pg-viewall { left: 0; margin-top: 26px; }
html.mobile.wide .pg-full__grid {
  left: 50%; transform: translateX(-50%);
  width: min(100% - 120px, 1140px);
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
html.mobile.wide .pg-tile { height: 280px; }

/* ---------- wide ABOUT: statement left, stats right ---------- */
html.mobile.wide .panel--about.stage {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 80px;
  align-items: start;
  padding: 96px 0;
}
html.mobile.wide .ab-head { grid-column: 1; left: 0; font-size: clamp(36px, 3.4vw, 46px); line-height: 1.24; }
html.mobile.wide .ab-head--2 { margin-top: 10px; }
html.mobile.wide .ab-para { grid-column: 1; left: 0; width: auto; max-width: 560px; font-size: 16px; line-height: 25px; }
html.mobile.wide .ab-cta { grid-column: 1; left: 0; }
html.mobile.wide .ab-stats { grid-column: 2; grid-row: 1 / span 4; left: 0; width: 100%; margin-top: 10px; }
html.mobile.wide .ab-divider { width: 100%; }

/* ---------- wide TESTIMONIALS ---------- */
html.mobile.wide .panel--testi.stage { padding: 92px 0 100px; }
html.mobile.wide .ts-stack { max-width: 880px; margin: 0 auto; height: 300px; }
html.mobile.wide .ts-quote { font-size: 40px; line-height: 52px; padding: 0 30px; }
html.mobile.wide .ts-attrib { font-size: 13px; }
html.mobile.wide .ts-client { width: 10px; height: 10px; margin: 0; }
html.mobile.wide .ts-clients { margin-top: 18px; gap: 16px; }
html.mobile.wide .ts-viewall { margin-top: 26px; }
html.mobile.wide .ts-full__scroll { width: min(100% - 120px, 860px); margin: 92px auto 64px; }
html.mobile.wide .ts-letter__name { font-size: 40px; }
html.mobile.wide .ts-letter p:not(.ts-letter__role) { font-size: 19px; line-height: 30px; }

/* ---------- wide CONTACT: form left, map + info right ---------- */
html.mobile.wide .panel--contact.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  align-items: start;
  padding: 96px 0 0;
}
html.mobile.wide .ct-form { grid-column: 1; grid-row: 1; }
html.mobile.wide .ct-field { left: 0; width: 100%; }
html.mobile.wide .ct-submit { left: 0; }
html.mobile.wide .ct-map { grid-column: 2; grid-row: 1; left: 0; width: 100%; margin-top: 22px; }
html.mobile.wide .ct-map-svg { width: 100%; height: auto; }
html.mobile.wide .ct-attrib { grid-column: 2; grid-row: 2; margin-right: 0; }
html.mobile.wide .ct-info { grid-column: 2; grid-row: 3; left: 0; width: 100%; margin-top: 18px; }
html.mobile.wide .ct-footer { grid-column: 1 / -1; grid-row: 4; width: 100%; }

/* chrome scrim: solid through the whole logo band (content scrolls beneath
   a real header bar), then a short fade */
html.mobile.wide .chrome::before { height: 140px; background: linear-gradient(#0f0f0f 0%, #0f0f0f 76%, rgba(15,15,15,0)); }

/* narrow end of wide flow: slim the card column so the headline breathes */
@media (max-width: 1120px) {
  html.mobile.wide .panel--home.stage { grid-template-columns: 1fr 420px; column-gap: 36px; }
  html.mobile.wide .headline { font-size: clamp(38px, 4.2vw, 48px); }
  html.mobile.wide .card { zoom: 0.50; }
  html.mobile.wide .chrome__nav { gap: 26px; }
  html.mobile.wide .chrome__nav a { font-size: 14px; }
}
html.mobile.wide .menu__list { top: 110px; }


/* ================= MOBILE MENU: SCROLL-SAFE LAYOUT =================
   On zoomed flow viewports (tablets cap zoom 1.7) the 8-item list can be
   taller than a short window — absolute top/bottom anchoring clipped the
   last items with no way to reach them. The list+foot now FLOW inside a
   scrollable menu (margin-top:auto pins the foot to the bottom whenever
   there's room, so tall phones look exactly as before), and the close
   button pins to the viewport so it never scrolls away.
   (position:static makes earlier top/bottom offsets inert, so this wins
   over both the mobile block and the logo-compare block regardless of
   source order.) */
html.mobile .menu {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* flex column ONLY when open — the base .menu is display:none when closed;
   forcing display here would render the hidden menu on top of the page */
html.mobile .menu.is-open {
  display: flex;
  flex-direction: column;
}
html.mobile .menu__list {
  position: static;
  margin: 112px 24px 0 calc(30px + var(--gutter, 0px));
}
html.mobile .menu__foot {
  position: static;
  margin: auto 24px 28px calc(32px + var(--gutter, 0px));
  padding-top: 34px;
}
html.mobile .menu__close { position: fixed; }