/* =====================================================
   ØRENO — styles.css  v4.9
   Horizontal scroll. Light theme. Responsive.
===================================================== */

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

:root {
  --c-bg:       #F5F3EE;
  --c-fg:       #0A0A0A;
  --c-muted:    rgba(10,10,10,0.50);
  --c-dim:      rgba(10,10,10,0.32);
  --c-faint:    rgba(10,10,10,0.06);
  --c-border:   rgba(10,10,10,0.08);
  --c-border-h: rgba(10,10,10,0.20);

  --pad-x:   clamp(1.6rem, 7vw, 6rem);
  --max-w:   1140px;

  --fs-hero:  clamp(3.2rem, 10vw, 9.5rem);
  --fs-h2:    clamp(1.8rem, 4.5vw, 3.2rem);
  --fs-body:  clamp(0.78rem, 1.4vw, 0.88rem);
  --fs-label: clamp(0.58rem, 0.9vw, 0.65rem);
  --fs-cta:   clamp(2.4rem, 6.5vw, 5.5rem);

  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html { font-size:100%; -webkit-text-size-adjust:100%; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--c-bg);
  color: var(--c-fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img    { display:block; max-width:100%; }
a      { color:inherit; text-decoration:none; }
button { font-family:inherit; }
::selection { background:rgba(10,10,10,0.1); color:var(--c-fg); }

/* ── CURSOR — blend-mode invert blob ── */
.cursor-blob {
  position:fixed; pointer-events:none; z-index:99999;
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  mix-blend-mode:difference;
  left:0; top:0;
  transform:translate(-50%,-50%);
  transition: width .18s var(--ease-expo), height .18s var(--ease-expo), opacity .2s ease;
  will-change:left,top,width,height;
}
.cursor-blob.is-link    { width:42px; height:42px; }
.cursor-blob.is-heading { width:68px; height:68px; }
.cursor-blob.is-hidden  { opacity:0; }

@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ── CHAR REVEAL — kobykooba-style clip-rise ── */
.ch-wrap {
  display:inline-block; overflow:hidden;
  vertical-align:bottom;
  padding-bottom:0.06em; margin-bottom:-0.06em;
}
.ch { display:inline-block; will-change:transform; }

@media (hover:none),(max-width:768px){ .cursor-blob{display:none;} body{cursor:auto;} }
@media (hover:hover) and (pointer:fine){ body{cursor:none;} }

/* ── PAGE TRANSITION ── */
.page-overlay {
  position:fixed; inset:0; background:var(--c-bg);
  z-index:8000; pointer-events:none; transform:translateY(100%);
}

/* ── GLOBAL LOADER ── */
.global-loader {
  position:fixed; inset:0; background:#0a0a0a;
  z-index:99999; overflow:hidden;
}
.loader-panel {
  position:absolute; top:0; height:100%;
  background:#0a0a0a; will-change:transform; z-index:2;
}
.loader-panel--left  { left:0;  width:50%; }
.loader-panel--right { right:0; width:50%; }
.loader-center {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.loader-o-svg {
  width:clamp(72px,9vw,110px); height:auto;
}
.loader-name {
  margin-top:1.8rem;
  font-size:clamp(0.5rem,0.85vw,0.65rem);
  font-weight:700; letter-spacing:0.52em; text-transform:uppercase;
  color:rgba(245,243,238,0.55);
  opacity:0; transform:translateY(6px);
}
.loader-counter {
  position:absolute; bottom:clamp(1.4rem,3vh,2.2rem); right:var(--pad-x);
  font-size:clamp(0.55rem,0.85vw,0.65rem); font-weight:700;
  letter-spacing:0.3em; color:rgba(245,243,238,0.28);
  z-index:4; font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════
   HORIZONTAL SCROLL ENGINE
══════════════════════════════════════ */
#h-scroll-wrapper {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh; overflow:hidden;
}
#h-track {
  display:flex; align-items:stretch;
  height:100vh; will-change:transform;
}

/* ── PANELS ── */
.panel {
  flex:0 0 auto; width:100vw; height:100vh;
  overflow:hidden; position:relative;
  border-right:1px solid var(--c-border);
}
.panel:last-child { border-right:none; }
.panel--wide-md  { width:120vw; }
.panel--wide-lg  { width:130vw; }
.panel--wide-sm  { width:72vw; }
.panel--marquee  { width:52vw; display:flex; align-items:center; }

/* Panel index */
.panel-index {
  position:absolute; right:var(--pad-x); bottom:clamp(1.4rem,2.5vh,2rem);
  font-size:0.44rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--c-dim); pointer-events:none; z-index:1;
}
.panel-index--light { color:rgba(245,243,238,0.35); }

/* ── SECTION BASE — THE CRITICAL FIX ── */
.section {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:0 var(--pad-x);
  height:100%;       /* CRITICAL: fill the panel */
  width:100%;
  background:var(--c-bg); /* explicit bg — prevents fixed hero bleeding through */
}
.section-inner {
  max-width:var(--max-w); margin:0 auto;
  width:100%; position:relative; z-index:1;
}

.section-tag {
  font-size:var(--fs-label); letter-spacing:0.34em; text-transform:uppercase;
  color:var(--c-dim); margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.8rem;
}
.section-tag::before {
  content:""; width:1.5rem; height:1px;
  background:var(--c-dim); flex-shrink:0;
}
.section-h {
  font-size:var(--fs-h2); font-weight:700;
  letter-spacing:-0.03em; line-height:1.1;
}
.section-p {
  margin-top:1.6rem; font-size:var(--fs-body); line-height:1.9;
  color:var(--c-muted); max-width:460px;
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); }
.reveal-up { opacity:0; transform:translateY(16px); }

/* =====================================================
   HERO
===================================================== */
.hero {
  display:flex; align-items:center; justify-content:center;
  background:var(--c-bg); overflow:hidden;
}

/* thermodynamic canvas — sits behind hero-inner (z-index:3) */
.hero-thermo-canvas {
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
  pointer-events:auto;
}

/* vignette on light hero — very subtle edge fade for depth */
.hero-vignette {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(
    ellipse 80% 75% at 30% 50%,
    transparent 40%,
    rgba(210,205,196,0.18) 100%
  );
}

/* Per-case accent color for the progress rail */

.hero-inner {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(5rem,9vh,8rem) var(--pad-x) clamp(3rem,6vh,5rem);
  position:relative; z-index:3;
  width:100%; height:100%;
}

/* ── HERO LEFT ── */
.hero-left {
  display:flex; flex-direction:column;
  align-items:flex-start; gap:clamp(0.8rem,1.8vh,1.5rem);
}

.hero-eyebrow {
  font-size:var(--fs-label); letter-spacing:0.32em; text-transform:uppercase;
  color:var(--c-muted); margin-bottom:clamp(1rem,2.5vh,2rem);
  opacity:0; transform:translateY(8px);
}

.hero-main {
  font-size:clamp(3.2rem, 10vw, 9.5rem); font-weight:700;
  line-height:0.92; letter-spacing:-0.04em;
  color:var(--c-fg); white-space:nowrap;
}

.hero-subline {
  margin-top:clamp(1.2rem,3vh,2.5rem);
  font-size:clamp(0.75rem,1.4vw,0.88rem);
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-muted); line-height:1.7;
  opacity:0; transform:translateY(8px);
}
.hero-br { display:none; }

/* ── HERO SERVICES TICKER ── */
.hero-ticker {
  overflow:hidden;
  width:100%;
  margin-top:clamp(1.4rem,3vh,2.4rem);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.hero-ticker-track {
  display:inline-flex; gap:1.8rem;
  white-space:nowrap;
  animation:ticker-slide 22s linear infinite;
  font-size:clamp(0.5rem, 0.72vw, 0.6rem);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--c-dim);
}
.hero-ticker-dot {
  opacity:0.35;
}
@keyframes ticker-slide {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

.hero-cta {
  display:inline-flex; align-items:center; gap:0.6rem;
  margin-top:clamp(1.8rem,4vh,3.2rem);
  font-size:var(--fs-label); letter-spacing:0.24em; text-transform:uppercase;
  color:var(--c-fg); border-bottom:1px solid var(--c-border-h);
  padding-bottom:0.4rem;
  transition:border-color .3s ease, opacity .3s ease;
  opacity:0;
}
.hero-cta:hover { border-color:var(--c-fg); }
.hero-cta-arrow { font-size:0.8rem; transition:transform .3s var(--ease-expo); }
.hero-cta:hover .hero-cta-arrow { transform:translateX(4px); }

/* ── HERO RIGHT ── */
.hero-right {
  display:flex; flex-direction:column;
  align-items:flex-end; justify-content:flex-end;
  height:clamp(160px,28vh,280px);
  flex-shrink:0;
}

/* ── SWIPE HINT — touch devices only ── */
.hero-swipe-hint {
  display:none; /* hidden for mouse/trackpad users */
}
@media (hover:none) and (pointer:coarse) {
  .hero-swipe-hint {
    display:flex; flex-direction:row; align-items:center; gap:0.8rem; opacity:1;
  }
}
.swipe-hand-wrap {
  width:36px; height:36px;
  border:1px solid var(--c-border-h); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.swipe-hand {
  font-size:1rem; color:var(--c-muted);
  display:block;
  animation:swipe-pulse 2s var(--ease-expo) infinite;
}
@keyframes swipe-pulse {
  0%   { transform:translateX(6px); opacity:0; }
  20%  { opacity:1; }
  70%  { transform:translateX(-6px); opacity:1; }
  100% { transform:translateX(-6px); opacity:0; }
}
.swipe-label {
  font-size:0.52rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--c-dim); white-space:nowrap;
}

/* ── HERO HYPER TEXT ── */
.hero-hyper-text {
  margin-top:clamp(0.6rem,1.5vh,1.2rem);
  font-size:clamp(0.8rem,1.45vw,0.98rem);
  line-height:1.85;
  color:var(--c-muted);
  opacity:0;
  transform:translateY(8px);
  max-width:clamp(300px,44vw,560px);
  letter-spacing:0.01em;
}

/* scramble word base */
.h-word {
  display:inline-block;
  position:relative;
  white-space:nowrap;
  transition:
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    color 0.22s ease,
    opacity 0.26s ease,
    filter 0.26s ease;
}

/* highlighted / interactive words */
.h-word--interactive {
  color:var(--c-fg);
  font-weight:600;
}

/* idle pulse — subtle breathing on highlighted words */
@keyframes ht-idle-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.h-word--interactive.ht-idle {
  animation: ht-idle-pulse 2.8s ease-in-out infinite;
}
.h-word--interactive.ht-idle:nth-of-type(2) { animation-delay: 0.55s; }
.h-word--interactive.ht-idle:nth-of-type(3) { animation-delay: 1.1s; }

/* hovered state */
.h-word--hovered {
  transform:scale(1.09) translateY(-3px);
  color:var(--c-bg) !important;
  z-index:20;
}

/* dimmed (when a sibling is hovered) */
.h-word--dimmed {
  opacity:0.2;
  filter:blur(1.5px);
}

/* pill background */
.h-word__bg {
  position:absolute;
  inset:-5px -8px;
  background:var(--c-fg);
  border-radius:7px;
  z-index:-1;
  opacity:0;
  transform:scale(0.8);
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 8px 24px -4px rgba(10,10,10,0.32);
}
.h-word--hovered .h-word__bg {
  opacity:1;
  transform:scale(1);
}

/* corner accent dots */
.h-word__dot {
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  z-index:21;
  opacity:0;
  transform:scale(0);
  pointer-events:none;
  transition:
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
.h-word__dot--tr { top:-3px;    right:-3px; background:#2563eb; }
.h-word__dot--bl { bottom:-3px; left:-3px;  background:#ec4899; }
.h-word--hovered .h-word__dot {
  opacity:1;
  transform:scale(1);
}

/* text content layer */
.h-word__text {
  position:relative;
  z-index:10;
}

/* ── HERO SCROLL CUE ── */
.hero-scroll-cue {
  position:absolute;
  bottom:clamp(1.8rem,3.5vh,3rem);
  left:var(--pad-x);
  display:flex;
  align-items:center;
  gap:1rem;
  opacity:0;
  z-index:4;
}

/* desktop line sweep */
.scroll-desk {
  display:flex;
  align-items:center;
  gap:0.9rem;
}
.scroll-desk-line {
  width:44px; height:1px;
  background:var(--c-border);
  position:relative;
  overflow:hidden;
}
.scroll-desk-line::after {
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:var(--c-fg);
  animation:sweep-line 2.6s var(--ease-expo) infinite 1.4s;
}
@keyframes sweep-line {
  0%      { left:-100%; }
  45%,55% { left:0; }
  100%    { left:100%; }
}
.scroll-desk-label {
  font-size:0.43rem;
  letter-spacing:0.36em;
  text-transform:uppercase;
  color:var(--c-dim);
}

/* touch swipe cue */
.scroll-touch { display:none; }
@media (hover:none) and (pointer:coarse) {
  .scroll-desk  { display:none; }
  .scroll-touch {
    display:flex;
    align-items:center;
    gap:0.8rem;
  }
}

/* ── WHATSAPP BUTTON ── */
.whatsapp-btn {
  position:fixed; bottom:1.8rem; left:1.8rem;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:800;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform .3s var(--ease-expo), box-shadow .3s ease;
  cursor:none;
}
.whatsapp-btn:hover {
  transform:scale(1.12) translateY(-2px);
  box-shadow:0 10px 30px rgba(37,211,102,0.5);
}
.whatsapp-btn svg { display:block; }

/* =====================================================
   MANIFESTO
===================================================== */
.section-manifesto {
  display:flex; align-items:center; justify-content:center;
  background:var(--c-fg); height:100%; width:100%;
  overflow:hidden; position:relative;
}
.manifesto-inner {
  display:flex; flex-direction:column;
  gap:clamp(1.4rem,3vh,2.4rem);
  text-align:left; padding:0 var(--pad-x);
  max-width:var(--max-w); width:100%;
  position:relative; z-index:1;
}
.manifesto-tag {
  font-size:var(--fs-label); letter-spacing:0.34em; text-transform:uppercase;
  color:rgba(245,243,238,0.3); display:flex; align-items:center; gap:0.75rem;
}
.manifesto-tag::before {
  content:""; width:1.5rem; height:1px;
  background:rgba(245,243,238,0.3); flex-shrink:0;
}
.manifesto-statements {
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid rgba(245,243,238,0.1);
}
.manifesto-row {
  display:grid;
  grid-template-columns:clamp(2rem,3.5vw,3.5rem) 1fr;
  gap:0 clamp(0.8rem,1.5vw,1.8rem);
  align-items:center;
  padding:clamp(0.9rem,2vh,1.5rem) 0;
  border-bottom:1px solid rgba(245,243,238,0.1);
}
.manifesto-num {
  font-size:var(--fs-label); letter-spacing:0.2em;
  color:rgba(245,243,238,0.2); align-self:start;
  padding-top:0.25em; font-weight:400;
}
.manifesto-line {
  font-size:clamp(1.6rem, 4.2vw, 5.4rem);
  font-weight:700; letter-spacing:-0.04em; line-height:1.0;
  color:var(--c-bg); cursor:default;
  position:relative;
}
.manifesto-sub {
  font-size:var(--fs-body); line-height:1.75;
  color:rgba(245,243,238,0.38); max-width:360px;
  opacity:0;
}
/* large background Ø watermark */
.manifesto-watermark {
  position:absolute;
  font-size:clamp(32rem,60vw,90rem); font-weight:700;
  letter-spacing:-0.06em; line-height:1;
  color:rgba(245,243,238,0.032);
  pointer-events:none; user-select:none;
  right:-0.08em; bottom:-0.22em; z-index:0;
}

/* Manifesto interactive highlight bar */
.manifesto-highlight-bar {
  position:absolute; left:0; top:0; height:100%; width:0;
  background:rgba(200,160,80,0.10); border-radius:4px;
  pointer-events:none; z-index:0;
}
@keyframes manifesto-word-glow {
  0%, 100% { color:var(--c-bg); }
  50%       { color:rgba(210,165,90,0.88); }
}
@media (hover:hover) and (pointer:fine) {
  .manifesto-line .ch-wrap:hover .ch {
    color:rgba(210,165,90,0.85);
    transition:color 0.2s ease;
  }
}

/* ══ GOOEY MORPH — manifesto 02/13 ══ */
.gooey-morph {
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem, 6vh, 5rem) 0;
  opacity:0;
}
.gooey-morph__defs { position:absolute; width:0; height:0; }

.gooey-morph__stage {
  position:relative;
  width:100%;
  min-height:clamp(6rem, 18vh, 11rem);
  display:flex;
  align-items:center;
  justify-content:center;
  filter:url(#gooey-threshold);
}

.gooey-morph__text {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  user-select:none;
  pointer-events:none;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:clamp(3rem, 9vw, 8rem);
  letter-spacing:-0.045em;
  line-height:1;
  color:var(--c-bg);
  white-space:nowrap;
  will-change:filter, opacity;
}

/* Reduced motion: freeze on the first term, no blur */
@media (prefers-reduced-motion: reduce) {
  .gooey-morph__stage { filter:none; }
  .gooey-morph__text--b { display:none; }
  .gooey-morph__text--a { opacity:1 !important; filter:none !important; }
}

/* ── HEADING SWEEP LINE (fires after char reveal) ── */
.heading-sweep-line {
  display:block; height:1px; width:0;
  background:currentColor; opacity:0;
  margin-top:0.4rem;
}

/* =====================================================
   STUDIO
===================================================== */
.section-studio .section-inner { width:100%; }
.studio-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem);
  align-items:center;
}
.studio-left { display:flex; flex-direction:column; gap:0; }
.studio-o-bg {
  width:clamp(200px, 38vw, 520px); height:auto;
  opacity:0.055; user-select:none; pointer-events:none;
  display:block;
}

.studio-right {
  display:flex; flex-direction:column;
  align-items:flex-end; justify-content:center;
  gap:clamp(2rem,4vh,3rem);
}
.studio-stat-wrap { text-align:right; }
.studio-stat-num {
  font-size:clamp(3rem,7vw,6rem); font-weight:700;
  letter-spacing:-0.05em; line-height:1;
}
.studio-stat-label {
  margin-top:.5rem; font-size:var(--fs-label);
  letter-spacing:.24em; text-transform:uppercase; color:var(--c-dim);
}
.studio-since {
  text-align:right; border-top:1px solid var(--c-border); padding-top:1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.studio-since-label {
  font-size:var(--fs-label); letter-spacing:.28em;
  text-transform:uppercase; color:var(--c-dim);
}
.studio-since-year {
  font-size:clamp(1.4rem,3vw,2.4rem); font-weight:700;
  letter-spacing:-0.04em; line-height:1;
}
.studio-since-year--sm {
  font-size:clamp(1.1rem,2vw,1.8rem);
}

/* =====================================================
   WORK / SERVICE ACCORDION
===================================================== */
.section-system {
  padding:0 var(--pad-x); overflow:hidden; flex:0 0 auto;
  display:flex; align-items:center;
  background:var(--c-fg);
}
/* Dark section overrides */
.section-system .section-tag   { color:rgba(245,243,238,0.4); }
.section-system .section-tag::before { background:rgba(245,243,238,0.18); }
.section-system .section-h     { color:var(--c-bg); }
.section-system .system-rows   { border-top-color:rgba(245,243,238,0.1); }
.section-system .srow-trigger  { border-bottom-color:rgba(245,243,238,0.08); }
.section-system .srow-trigger:hover { background:rgba(245,243,238,0.03); }
.section-system .srow-num      { color:rgba(245,243,238,0.3); }
.section-system .srow-cat      { color:rgba(245,243,238,0.3); }
.section-system .srow-title    { color:var(--c-bg); }
.section-system .srow-icon     { border-color:rgba(245,243,238,0.18); }
.section-system .srow-icon svg { color:rgba(245,243,238,0.45); }
.section-system .system-row.is-open .srow-icon { background:var(--c-bg); border-color:var(--c-bg); }
.section-system .system-row.is-open .srow-icon svg { color:var(--c-fg); }
.section-system .srow-body     { color:rgba(245,243,238,0.45); }
.system-inner {
  display:flex; flex-direction:column;
  gap:clamp(1.8rem,3.5vh,2.8rem);
  width:100%;
}
.system-header { display:flex; flex-direction:column; gap:.6rem; }
.system-rows {
  display:flex; flex-direction:column;
  border-top:1px solid var(--c-border);
}
.system-row { overflow:hidden; }

/* Trigger */
.srow-trigger {
  width:100%;
  display:grid;
  grid-template-columns:3rem 1fr auto;
  gap:0 clamp(1.5rem,3vw,3rem);
  align-items:center;
  padding:clamp(0.75rem,1.4vh,1.1rem) 0;
  border:none; border-bottom:1px solid var(--c-border);
  background:transparent; cursor:pointer; text-align:left;
  transition:background .2s ease;
}
.srow-trigger:hover { background:rgba(10,10,10,0.02); }
.srow-num {
  font-size:var(--fs-label); letter-spacing:.2em;
  color:var(--c-dim); font-weight:600;
}
.srow-meta { display:flex; flex-direction:column; gap:.25rem; }
.srow-cat {
  font-size:var(--fs-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--c-dim);
}
.srow-title {
  font-size:clamp(1rem,1.6vw,1.5rem); font-weight:700;
  letter-spacing:-0.01em; line-height:1.2; color:var(--c-fg);
}

/* Plus icon */
.srow-icon {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--c-border-h);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform .38s var(--ease-expo),
             background .25s ease, border-color .25s ease;
}
.srow-icon svg { width:13px; height:13px; color:var(--c-muted); transition:color .25s; }
.system-row.is-open .srow-icon {
  transform:rotate(45deg);
  background:var(--c-fg); border-color:var(--c-fg);
}
.system-row.is-open .srow-icon svg { color:var(--c-bg); }

/* CSS grid collapse trick — no max-height jank */
.srow-body-wrap {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(0.16,1,0.3,1);
}
.srow-body-wrap.is-open { grid-template-rows:1fr; }
.srow-body-inner {
  overflow:hidden;
  padding-bottom:0;
  transition:padding-bottom .38s ease;
}
.srow-body-wrap.is-open .srow-body-inner { padding-bottom:clamp(1.2rem,2.5vh,2rem); }
.srow-body {
  font-size:var(--fs-body); color:var(--c-muted);
  line-height:1.75; max-width:52ch;
  padding-top:.9rem;
  padding-left:calc(3rem + clamp(1.5rem,3vw,3rem));
}

/* =====================================================
   CASE STUDIES — AXIS-SWAP VERTICAL FLOW
   Panel 05 pins horizontally while its interior flows
   vertically (3 slides × 100vh). JS translates .cs-vflow
   by -csInterior while the horizontal track stays pinned
   at panel 05's offsetLeft.
===================================================== */
.section-case-studies.cs-stage {
  background: #0A0A0A;
  color: #F5F3EE;
  position: relative;
  overflow: hidden;
  --c-fg:       #F5F3EE;
  --c-muted:    rgba(245,243,238,0.55);
  --c-dim:      rgba(245,243,238,0.32);
  --c-border:   rgba(245,243,238,0.10);
  --c-border-h: rgba(245,243,238,0.20);
}
.section-case-studies.cs-stage .section-tag,
.section-case-studies.cs-stage .section-h { color:#F5F3EE; }

/* Vertical flow — the translateY-driven content stack */
.cs-vflow {
  position:absolute;
  top:0; left:0;
  width:100%;
  display:flex;
  flex-direction:column;
  will-change:transform;
}

/* Each slide is exactly one viewport tall */
.cs-vslide {
  flex:0 0 100vh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* Shared inner container — padding + max-width */
.cs-slide-inner {
  width:100%;
  max-width:1680px;
  padding:clamp(2rem, 4vh, 4rem) clamp(2rem, 5vw, 5rem);
  position:relative;
}

/* ───────── SLIDE 0 · HEADER ───────── */
.cs-vslide--header .cs-slide-inner {
  display:flex;
  flex-direction:column;
  gap:clamp(1.6rem,3vh,2.6rem);
}
.cs-stage-header { display:flex; flex-direction:column; gap:1rem; max-width:780px; }
.cs-stage-sub {
  font-size:var(--fs-body);
  color:var(--c-muted);
  margin-top:.4rem;
  max-width:54ch;
}

/* Scroll cue — sits at the bottom of slide 0 */
.cs-scroll-cue {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-size:clamp(.46rem,.62vw,.54rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--c-dim);
  align-self:flex-start;
}
.cs-scroll-cue-line {
  width:44px; height:1px;
  background:linear-gradient(90deg, var(--c-dim), transparent);
  position:relative; overflow:hidden;
}
.cs-scroll-cue-line::after {
  content:""; position:absolute; top:0; left:-50%;
  width:50%; height:100%;
  background:#F5F3EE;
  animation:cs-cue 2.2s ease-in-out infinite;
}
@keyframes cs-cue {
  0%   { left:-50%; opacity:0; }
  40%  { opacity:1; }
  100% { left:110%;  opacity:0; }
}

/* ───────── SLIDE · CASE (shared between RMI & DMC) ───────── */
.cs-vslide--case { --cs-accent:#d4a017; }
.cs-vslide--case[data-case="02"] { --cs-accent:#3b82f6; }

/* Ghost numeral behind each case slide */
.cs-vslide--case::before {
  content: attr(data-case);
  position:absolute;
  top:-.08em; right:-.04em;
  font-family:Montserrat, sans-serif;
  font-size:clamp(10rem, 22vw, 20rem);
  font-weight:700; letter-spacing:-.05em;
  color:rgba(245,243,238,0.03);
  pointer-events:none; line-height:.78;
  z-index:0;
}

.cs-vcase-grid {
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:clamp(2.4rem, 5vw, 5rem);
  align-items:center;
  z-index:1;
}

/* ───────── MONITOR ───────── */
.cs-monitor {
  position:relative;
  border-radius:8px;
  border:1px solid var(--c-border);
  background:#0d0d0d;
  overflow:hidden;
  box-shadow:
    0 60px 80px -40px rgba(0,0,0,0.85),
    0 30px 50px -30px rgba(0,0,0,0.6),
    0 0 0 1px rgba(245,243,238,0.04) inset;
  transform: perspective(1600px) rotateX(8deg) rotateY(-3deg);
  transform-origin: 50% 85%;
  transition: transform .8s var(--ease-expo);
  z-index:1;
}
.cs-vslide--case:hover .cs-monitor {
  transform: perspective(1600px) rotateX(4deg) rotateY(-1.5deg) translateY(-4px);
}

.cs-monitor-chrome {
  display:flex; align-items:center; gap:.5rem;
  padding:clamp(.55rem,.9vh,.85rem) clamp(.9rem,1.4vw,1.3rem);
  border-bottom:1px solid rgba(245,243,238,0.08);
  background:rgba(245,243,238,0.02);
  position:relative;
}
.cs-monitor-chrome > span:not(.cs-monitor-ping) {
  width:9px; height:9px; border-radius:50%;
  background:rgba(245,243,238,0.16);
}
.cs-monitor-url {
  flex:1;
  margin:0 .8rem 0 .6rem;
  padding:.35rem .9rem;
  font-size:clamp(.48rem,.64vw,.56rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-dim);
  border:1px solid rgba(245,243,238,0.06);
  border-radius:2px;
  background:rgba(245,243,238,0.015);
}
.cs-monitor-url span {
  display:block; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cs-monitor-ping {
  width:7px; height:7px; border-radius:50%;
  background: var(--cs-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-accent) 55%, transparent);
  animation: cs-ping 2.4s ease-out infinite;
  flex-shrink:0;
}
@keyframes cs-ping {
  0%   { box-shadow: 0 0 0 0  color-mix(in srgb, var(--cs-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cs-accent) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--cs-accent) 0%,  transparent); }
}

.cs-monitor-stage {
  position:relative;
  aspect-ratio: 640 / 380;
  overflow:hidden;
  background:#0a0a0a;
}
.cs-monitor-stage svg { width:100%; height:100%; display:block; }

.cs-monitor-glow {
  position:absolute;
  inset:-20% -10% -40% -10%;
  background:radial-gradient(ellipse at 50% 90%, var(--cs-accent), transparent 55%);
  opacity:.32; filter:blur(90px);
  pointer-events:none; z-index:0;
  transition: opacity .8s ease;
}
.cs-vslide--case:hover .cs-monitor-glow { opacity:.48; }

/* ───────── CAPTION (per-case copy column) ───────── */
.cs-vcap {
  position:relative;
  display:flex; flex-direction:column;
  gap:1.05rem;
  max-width:540px;
  z-index:2;
}
.cs-vcap-num {
  font-size:clamp(.46rem,.62vw,.54rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--c-dim);
  margin:0 0 .3rem 0;
}
.cs-vcap-eyebrow {
  font-size:clamp(.5rem,.7vw,.58rem);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--cs-accent);
  margin:0;
}
.cs-vcap-title {
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  font-weight:500; line-height:1.04; letter-spacing:-0.025em;
  color:#F5F3EE;
  margin:0;
}
.cs-vcap-pitch {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 48ch;
  margin:0;
}
.cs-vcap-stats {
  display:flex; gap:clamp(1.4rem,3vw,2.4rem);
  list-style:none; padding:1.1rem 0; margin:.4rem 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.cs-vcap-stats li { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.cs-vcap-stats .n {
  font-size:clamp(1.1rem, 2vw, 1.55rem);
  font-weight:600; letter-spacing:-.02em;
  color:var(--cs-accent);
  white-space:nowrap;
}
.cs-vcap-stats .l {
  font-size:clamp(.42rem,.6vw,.52rem);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--c-dim);
  white-space:nowrap;
}
.cs-vcap-tags {
  display:flex; flex-wrap:wrap; gap:.4rem;
  list-style:none; padding:0; margin:0;
}
.cs-vcap-tags li {
  font-size:clamp(.42rem,.6vw,.5rem);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-muted);
  border:1px solid var(--c-border);
  padding:.3rem .7rem;
}
.cs-vcap-cta {
  align-self:flex-start; margin-top:.6rem;
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:clamp(.5rem,.72vw,.58rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:#F5F3EE;
  text-decoration:none;
  border:1px solid var(--c-border-h);
  padding:.85rem 1.5rem; border-radius:2px;
  transition:transform .5s var(--ease-expo), color .35s ease, border-color .35s ease, background-color .35s ease;
}
.cs-vcap-cta:hover {
  transform: translateX(4px);
  color: var(--cs-accent);
  border-color: var(--cs-accent);
  background: color-mix(in srgb, var(--cs-accent) 8%, transparent);
}

/* ───────── VERTICAL PROGRESS RAIL ───────── */
.cs-vrail {
  position:absolute;
  top:50%; right:clamp(1.4rem, 2.4vw, 2.4rem);
  transform:translateY(-50%);
  display:flex; flex-direction:column;
  align-items:center; gap:.9rem;
  z-index:10;
  pointer-events:none;
}
.cs-vrail::before {
  content:"";
  position:absolute;
  top:-.3rem; bottom:-.3rem; left:50%;
  width:1px;
  background:rgba(245,243,238,0.08);
  transform:translateX(-50%);
}
.cs-vrail-dot {
  position:relative;
  width:7px; height:7px; border-radius:50%;
  background:rgba(245,243,238,0.18);
  transition: background-color .6s ease, transform .6s var(--ease-expo);
}
.cs-vrail-dot.is-active {
  background:#F5F3EE;
  transform:scale(1.4);
}
.cs-vrail-fill {
  position:absolute;
  top:0; left:50%;
  width:1px; height:0;
  background:#F5F3EE;
  transform:translateX(-50%);
  transition: height .3s ease;
}

/* =====================================================
   MARQUEE
===================================================== */
.section-marquee { background:var(--c-fg); overflow:hidden; }
.marquee-track {
  display:flex; width:max-content;
  animation:marquee-run 28s linear infinite; will-change:transform;
}
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { display:flex; align-items:center; padding:0; white-space:nowrap; }
.marquee-item span {
  font-size:var(--fs-label); letter-spacing:.32em; text-transform:uppercase;
  color:rgba(245,243,238,0.45); padding:0 2.5rem;
}
.marquee-item .dot { width:3px; height:3px; border-radius:50%; background:rgba(245,243,238,0.2); flex-shrink:0; }
@keyframes marquee-run { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =====================================================
   BRAND DISSECTION
===================================================== */
.section-dissection { background:var(--c-bg); }
.dissection-inner { max-width:100%; padding:0; }
.dissection-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(1.5rem,3vh,2.5rem);
  gap:2rem; flex-wrap:wrap;
}
.dissection-desc { max-width:300px; font-size:var(--fs-body); line-height:1.8; color:var(--c-muted); }
.dissection-body {
  display:block;
}
.dissection-stage {
  position:relative; width:100%;
  height:clamp(160px,24vh,280px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border);
  background:rgba(10,10,10,0.015); overflow:hidden; cursor:none;
}
.specimen-scan {
  position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(10,10,10,0.22), transparent);
  pointer-events:none; z-index:3;
  animation:scan-sweep 6s ease-in-out infinite;
}
@keyframes scan-sweep {
  0%{left:-2px;opacity:0;} 4%{opacity:1;} 96%{opacity:1;} 100%{left:calc(100% + 2px);opacity:0;}
}
.stage-bracket { position:absolute; width:18px; height:18px; pointer-events:none; z-index:4; }
.stage-bracket::before,.stage-bracket::after { content:""; position:absolute; background:rgba(10,10,10,0.16); }
.stage-bracket::before { width:1px; height:100%; }
.stage-bracket::after  { width:100%; height:1px; }
.stage-bracket--tl { top:12px; left:12px; }
.stage-bracket--tl::before { top:0; left:0; } .stage-bracket--tl::after { top:0; left:0; }
.stage-bracket--tr { top:12px; right:12px; }
.stage-bracket--tr::before { top:0; right:0; } .stage-bracket--tr::after { top:0; right:0; }
.stage-bracket--bl { bottom:12px; left:12px; }
.stage-bracket--bl::before { bottom:0; left:0; } .stage-bracket--bl::after { bottom:0; left:0; }
.stage-bracket--br { bottom:12px; right:12px; }
.stage-bracket--br::before { bottom:0; right:0; } .stage-bracket--br::after { bottom:0; right:0; }
.stage-meta {
  position:absolute; bottom:10px; right:14px;
  font-size:0.44rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-dim); pointer-events:none; z-index:4;
}
.specimen-word {
  font-size:clamp(2.5rem,7vw,6.5rem); font-weight:700;
  letter-spacing:-0.04em; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(10,10,10,0.14);
  user-select:none; position:relative; z-index:2;
}
.specimen-word .ltr {
  display:inline-block; position:relative;
  transition:color .35s ease, filter .35s ease, transform .5s var(--ease-expo), -webkit-text-stroke .35s ease;
  will-change:transform;
}
.ltr-tip {
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:rgba(245,243,238,0.96); border:1px solid var(--c-border-h);
  padding:.4rem .75rem; white-space:nowrap;
  font-size:0.46rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-muted);
  pointer-events:none; opacity:0;
  transition:opacity .2s ease, transform .3s var(--ease-expo);
  backdrop-filter:blur(10px); z-index:10;
}
.ltr-tip::after {
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--c-border-h);
}
.specimen-word .ltr:hover .ltr-tip { opacity:1; transform:translateX(-50%) translateY(0); }
.specimen-word .ltr:hover {
  color:var(--c-fg); -webkit-text-stroke:1px transparent;
  filter:drop-shadow(0 0 10px rgba(10,10,10,0.12)); transform:translateY(-3px);
}
/* =====================================================
   PROCESS — 2×2 GRID
===================================================== */
.section-process { background:var(--c-bg); }
.process-header {
  margin-bottom:clamp(2rem,4vh,3.5rem);
}
.process-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--c-border);
  border-left:1px solid var(--c-border);
}
.process-cell {
  background:var(--c-bg); position:relative; overflow:hidden;
  padding:clamp(1.4rem,3vh,2.2rem) clamp(1.4rem,2.5vw,2rem);
  min-height:clamp(100px,16vh,160px);
  border-right:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  transition:background .35s ease;
}
.process-cell:hover { background:rgba(10,10,10,0.025); }
.process-ghost {
  position:absolute; right:-0.1em; bottom:-0.15em;
  font-size:clamp(4rem,10vw,9rem); font-weight:700;
  letter-spacing:-0.06em; color:transparent;
  -webkit-text-stroke:1px rgba(10,10,10,0.08);
  pointer-events:none; user-select:none; line-height:1;
  transition:-webkit-text-stroke .4s ease;
}
.process-cell:hover .process-ghost { -webkit-text-stroke:1px rgba(10,10,10,0.16); }
.process-cell-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:.5rem; }
.process-num {
  font-size:var(--fs-label); letter-spacing:.3em;
  text-transform:uppercase; color:var(--c-dim);
}
.process-title {
  font-size:clamp(1rem,2vw,1.5rem); font-weight:700;
  letter-spacing:-0.01em; line-height:1.2;
}
.process-week {
  font-size:var(--fs-label); letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-dim);
  margin-top:.3rem;
}

/* =====================================================
   CTA
===================================================== */
@keyframes cta-ambient {
  0%, 100% { background: var(--c-fg); }
  50%       { background: #0d0d0d; }
}
.section-cta {
  background:var(--c-fg); text-align:left;
}
.section-cta.is-active {
  animation: cta-ambient 9s ease-in-out infinite;
}
.cta-inner {
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative; overflow:hidden;
}
.cta-eyebrow {
  font-size:var(--fs-label); letter-spacing:.34em; text-transform:uppercase;
  color:rgba(245,243,238,0.4); margin-bottom:clamp(1rem,2.5vh,1.8rem);
  display:flex; align-items:center; gap:.8rem;
}
.cta-eyebrow::before { content:""; width:1.5rem; height:1px; background:rgba(245,243,238,0.2); flex-shrink:0; }
.cta-heading {
  font-size:clamp(1.8rem, 3.8vw, 4.2rem); font-weight:700;
  letter-spacing:-0.04em; line-height:1.08;
  color:var(--c-bg); max-width:520px;
}
/* large decorative Ø behind cta text */
.cta-deco {
  position:absolute; right:-0.05em; bottom:-0.3em;
  font-size:clamp(18rem,40vw,56rem); font-weight:700;
  letter-spacing:-0.06em; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,243,238,0.06);
  pointer-events:none; user-select:none; z-index:0;
}

/* ── BUTTON ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; margin-top:clamp(1.8rem,4vh,3rem); padding:.9rem 2.4rem;
  border-radius:999px; border:1px solid rgba(245,243,238,0.3);
  background:transparent; color:var(--c-bg);
  font-family:'Montserrat',sans-serif;
  font-size:var(--fs-label); letter-spacing:.24em; text-transform:uppercase;
  cursor:none; position:relative; overflow:hidden;
  transition:border-color .35s ease, transform .3s var(--ease-expo), box-shadow .35s ease;
}
.btn::before {
  content:""; position:absolute; inset:0;
  background:rgba(245,243,238,0.06); opacity:0; transition:opacity .35s ease;
}
.btn:hover::before { opacity:1; }
.btn:hover { border-color:rgba(245,243,238,0.55); transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,0.3); }
.btn-arrow {
  width:11px; height:11px;
  border-right:1px solid currentColor; border-top:1px solid currentColor;
  transform:rotate(45deg); flex-shrink:0;
  transition:transform .3s var(--ease-expo);
}
.btn:hover .btn-arrow { transform:rotate(45deg) translate(2px,-2px); }
/* Dark button variant (contact, light sections) */
.btn--dark {
  border-color:var(--c-border-h); color:var(--c-fg);
}
.btn--dark::before { background:rgba(10,10,10,0.04); }
.btn--dark:hover { border-color:rgba(10,10,10,0.4); box-shadow:0 12px 32px rgba(10,10,10,0.1); }

/* =====================================================
   CONTACT
===================================================== */
.section-contact { background:var(--c-bg); }
.contact-inner {
  display:flex; flex-direction:column; align-items:flex-start;
  max-width:560px;
}
.contact-inner .section-tag { margin-bottom:1rem; }
.contact-inner .section-h { font-size:clamp(1.8rem,4.5vw,3rem); }
.contact-form {
  margin-top:clamp(1.4rem,2.5vh,2rem); display:flex; flex-direction:column;
  gap:.85rem; width:100%;
}
.form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:.85rem;
}
.section-contact .form-field { opacity:0; transform:translateY(14px); transition:none; }
.form-field { position:relative; }
.form-field input, .form-field textarea {
  width:100%; background:rgba(10,10,10,0.025);
  border:1px solid rgba(10,10,10,0.1);
  border-bottom:1px solid rgba(10,10,10,0.18);
  padding:.85rem 1rem; color:var(--c-fg);
  font-family:'Montserrat',sans-serif;
  font-size:.8rem; letter-spacing:.04em;
  outline:none; resize:none;
  transition:border-color .3s ease, background .3s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder {
  color:rgba(10,10,10,0.28);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
}
.form-field textarea { min-height:80px; max-height:110px; }
.form-field::after {
  content:""; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:rgba(10,10,10,0.5);
  transition:width .4s var(--ease-expo);
}
.form-field:focus-within::after { width:100%; }
.form-field input:focus, .form-field textarea:focus {
  background:rgba(10,10,10,0.035); border-color:rgba(10,10,10,0.2);
}
.contact-form .btn { margin-top:.4rem; }
.form-field input.invalid, .form-field textarea.invalid {
  border-color:rgba(180,50,50,0.45) !important;
  background:rgba(180,50,50,0.03) !important;
}
.form-error {
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(180,50,50,0.75); margin-top:.3rem;
  display:none; padding-left:.1rem;
}
.form-field.show-error .form-error { display:block; }

/* Brief chips — project type radio group */
.brief-chips { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.brief-legend {
  font-size:var(--fs-label);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-dim);
  padding:0;
}
.brief-chip-row {
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.section-contact .brief-chip { opacity:0; transform:translateY(12px); }
.brief-chip {
  appearance:none; cursor:pointer;
  padding:.55rem 1rem;
  font-family:inherit;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted);
  background:transparent;
  border:1px solid var(--c-border);
  border-radius:999px;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.brief-chip:hover { color:var(--c-fg); border-color:var(--c-border-h); }
.brief-chip:focus-visible { outline:2px solid rgba(10,10,10,0.3); outline-offset:2px; }
.brief-chip[aria-checked="true"] {
  color:var(--c-fg);
  border-color:rgba(10,10,10,0.6);
  background:rgba(10,10,10,0.04);
}

/* Send row — promise + button */
.contact-send-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:.4rem;
  opacity:0; transform:translateY(10px);
}
.contact-promise {
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-dim);
  margin:0;
}
.contact-promise strong { color:var(--c-fg); font-weight:500; }

@media (max-width:768px) {
  .contact-send-row { flex-direction:column-reverse; align-items:stretch; gap:.8rem; }
  .contact-promise { text-align:center; }
  .brief-chip { flex:1 1 calc(50% - .25rem); text-align:center; padding:.6rem .75rem; }
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer {
  background:var(--c-fg); display:flex;
  flex-direction:column; align-items:center;
  justify-content:center; position:relative;
  overflow:hidden; border-right:none;
}
.footer-wordmark {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(6rem,24vw,24rem); font-weight:700;
  letter-spacing:-0.05em; color:transparent;
  -webkit-text-stroke:1px rgba(245,243,238,0.07);
  user-select:none; pointer-events:none; z-index:0;
  white-space:nowrap;
}
.footer-inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; gap:clamp(1.8rem,3.5vh,2.8rem);
  width:100%; padding:0 var(--pad-x);
}
.footer-mark {
  font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,243,238,0.35); text-align:center; line-height:1.7;
}
.footer-links {
  display:flex; gap:clamp(1.2rem,3vw,2.5rem); flex-wrap:wrap; justify-content:center;
}
.footer-links a {
  font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,243,238,0.4); transition:color .3s ease; cursor:pointer;
}
.footer-links a:hover { color:var(--c-bg); }
.footer-back {
  font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,243,238,0.3); transition:color .3s ease; cursor:pointer;
  margin-top:clamp(1rem,2vh,1.5rem);
}
.footer-back:hover { color:var(--c-bg); }

/* =====================================================
   SCROLL-TO-START BUTTON
===================================================== */
.scroll-top {
  position:fixed; right:clamp(1.2rem,3vw,2.5rem); bottom:clamp(1.2rem,3vw,2.5rem);
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--c-border-h);
  background:rgba(245,243,238,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--c-fg); font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
  cursor:none; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, border-color .3s ease; z-index:700;
}
.scroll-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-top:hover { border-color:rgba(10,10,10,0.3); }

/* =====================================================
   MISC KEYFRAMES
===================================================== */
@keyframes spin {
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}

/* =====================================================
   PANEL ARROWS — fixed bottom-centre
===================================================== */
.panel-arrows {
  position:fixed; bottom:clamp(1.2rem,3vw,2rem); left:50%;
  transform:translateX(-50%); z-index:90;
  display:flex; gap:8px;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.panel-arrows.visible { opacity:1; pointer-events:auto; }
.panel-arrow {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--c-border-h); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-size:0.85rem; color:var(--c-fg);
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
}
.panel-arrow:hover { background:var(--c-fg); color:var(--c-bg); border-color:var(--c-fg); }
.panel-arrow.is-disabled { opacity:0.22; pointer-events:none; }

/* =====================================================
   MOBILE SCROLL PROGRESS BAR  — left edge fill
===================================================== */
.m-progress {
  display:none;
  position:fixed; left:0; top:0; bottom:0; width:2px;
  background:var(--c-border); z-index:8000; pointer-events:none;
}
.m-progress-fill {
  width:100%; height:0%; background:var(--c-fg);
  transition:height 0.15s linear;
}
@media (max-width:768px) {
  .m-progress { display:block; }
}

/* =====================================================
   MOBILE SECTION CURRENT-LABEL — top right corner
===================================================== */
.m-section-label {
  display:none;
  position:fixed; top:1.2rem; right:1.3rem;
  font-size:0.48rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--c-dim); z-index:600; pointer-events:none;
  font-family:inherit; font-weight:600;
  transition:opacity 0.3s ease;
}
@media (max-width:768px) {
  .m-section-label { display:block; }
  /* Hide when header is covering it */
  .m-section-label.is-hidden { opacity:0; }
}

/* =====================================================
   MOBILE — snap-scroll full-screen sections
===================================================== */
@media (max-width:768px) {

  /* 1. SCROLL ENGINE */
  html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100%;
  }
  body {
    overflow-x: hidden;
    overflow-y: visible;
    cursor: auto;
    height: auto;
  }
  #h-scroll-wrapper { position:static; width:auto; height:auto; overflow:visible; }
  #h-track          { flex-direction:column; height:auto; transform:none !important; will-change:auto; }

  /* 2. PANEL BASE */
  .panel {
    width: 100%;
    height: 100svh;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    position: relative;
  }
  .panel--wide-md,
  .panel--wide-lg,
  .panel--wide-sm { width:100%; }
  .panel-index    { display:none; }

  .panel--marquee  { height:auto; padding:2.2rem 0; scroll-snap-align:none; }
  .site-footer     { height:auto; min-height:0; scroll-snap-align:none;
                     padding:2.5rem 1.4rem calc(2rem + env(safe-area-inset-bottom,0px)); }
  .section-contact { height:auto; min-height:100svh; overflow:visible; }

  /* 3. FONT SCALE */
  :root { --fs-body:0.88rem; --fs-label:0.68rem; }

  /* 4. HEADER — full-width fixed bar (mobile sizing in header rules above) */
  /* 5. SECTION BASE */
  .section {
    height: 100svh;
    padding: 4.2rem 1.4rem 1.4rem;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
  }
  .section-inner { max-width:100%; padding:0; }

  /* 5b. PREMIUM TYPOGRAPHY */
  .section-tag {
    font-size:0.62rem; letter-spacing:0.24em;
    color:var(--c-dim); text-transform:uppercase;
    padding:0.28rem 0.7rem;
    border:1px solid var(--c-border);
    border-radius:999px;
    display:inline-block; width:fit-content;
    margin-bottom:0.3rem;
  }
  .section-h {
    font-size:clamp(2.1rem,8.5vw,3rem);
    line-height:1.1; letter-spacing:-0.015em;
  }
  .section-p {
    font-size:0.85rem; line-height:1.8;
    color:var(--c-muted); max-width:32ch; margin-top:1rem;
  }
  .btn { padding:.75rem 2rem; font-size:0.68rem; cursor:pointer; }

  /* 6. HERO — fixed to viewport (never moves, sections slide over it) */
  .hero {
    overflow:hidden; display:flex; flex-direction:column;
    position:fixed; top:0; left:0; width:100%; height:100svh;
    z-index:1; scroll-snap-align:none;
  }
  /* depth-layers scroll-out: GPU-promote each plane */
  .hero-eyebrow, .hero-hyper-text, .hero-cta { will-change:opacity,transform; }
  .hero-main { will-change:opacity,transform; transform-origin:left center; }
  .hero-inner {
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:4.5rem 1.4rem 3.5rem;
    height:100%;
    position:relative; z-index:4;
  }
  .hero-left    { display:flex; flex-direction:column; gap:0; }
  .hero-eyebrow {
    font-size:0.58rem; letter-spacing:0.28em;
    margin-bottom:2rem;
    padding:0.28rem 0.8rem;
    border:1px solid var(--c-border); border-radius:999px;
    display:inline-block; width:fit-content; color:var(--c-dim);
  }
  .hero-main {
    font-size:clamp(2.8rem,12vw,5.5rem) !important;
    line-height:0.95; letter-spacing:-0.02em;
    white-space:normal; margin-bottom:0;
    transform-origin:center center;
  }
  .hero-subline {
    font-size:0.82rem; max-width:28ch; line-height:1.7;
    color:var(--c-muted); margin-bottom:2.2rem;
    padding-top:1.4rem; border-top:1px solid var(--c-border);
  }
  .hero-cta {
    font-size:0.68rem; padding:.7rem 2rem;
    align-self:flex-start; display:inline-flex !important; width:auto;
  }
  /* sections after hero slide over it */
  .section-manifesto,.section-studio,.section-system,
  .section-case-studies,.panel--marquee,.section-dissection,
  .section-process,.section-testimonials,.section-cta,
  .section-contact,.section-connect,.site-footer {
    position:relative; z-index:2;
  }
  .hero-right { display:none; }
  .hero-br    { display:block; }

  /* 7. MANIFESTO — card lift (margin-top compensates for fixed hero out of flow) */
  .section-manifesto {
    height:100svh; padding:0; overflow:hidden;
    border-radius:32px 32px 0 0;
    box-shadow:0 -28px 80px rgba(0,0,0,0.36), 0 -2px 0 rgba(255,255,255,0.06);
    margin-top:100svh;
  }
  /* pill drag handle */
  .section-manifesto::after {
    content:""; position:absolute; top:11px; left:50%;
    transform:translateX(-50%);
    width:40px; height:4px; border-radius:2px;
    background:rgba(245,243,238,0.22); z-index:4; pointer-events:none;
  }
  .manifesto-inner     { gap:clamp(0.8rem,2vh,1.4rem); padding:0 1.4rem; align-items:flex-start; }
  .manifesto-row       { grid-template-columns:1.8rem 1fr; gap:0 0.7rem; padding:0.8rem 0; }
  .manifesto-line      { font-size:clamp(1.5rem,7.5vw,2.6rem); line-height:1.0; letter-spacing:-0.04em; }
  .manifesto-num       { font-size:0.48rem; padding-top:0.3em; }
  .manifesto-sub       { font-size:0.78rem; max-width:none; }
  .manifesto-watermark { font-size:clamp(12rem,50vw,22rem); right:-0.05em; bottom:-0.1em; }

  /* Hero text — ensure visible on mobile regardless of GSAP timing */
  .hero-eyebrow { opacity:1 !important; transform:none !important; }
  .hero-subline  { opacity:1 !important; transform:none !important; }
  .hero-cta      { opacity:1 !important; }

  /* Hero ticker — hide on mobile (saves vertical space in fixed hero) */
  .hero-ticker { display:none; }

  /* 8. STUDIO — editorial */
  .studio-o-bg { display:none; }
  .studio-inner { grid-template-columns:1fr; gap:0; }
  .studio-left  { display:flex; flex-direction:column; gap:0.9rem; }
  .studio-right {
    display:flex; flex-direction:row; flex-wrap:wrap;
    gap:0.6rem; margin-top:2rem;
    padding-top:1.4rem; border-top:1px solid var(--c-border);
  }
  .studio-since {
    display:flex; flex-direction:column; gap:0.15rem;
    padding:0.6rem 1rem;
    border:1px solid var(--c-border); border-radius:10px; background:transparent;
  }
  .studio-since-label    { font-size:0.54rem; letter-spacing:0.18em; color:var(--c-dim); }
  .studio-since-year--sm { font-size:0.95rem; font-weight:700; letter-spacing:-0.02em; }

  /* 9. SERVICES — accordion */
  .section-system { height:auto; min-height:100svh; padding:4.5rem 1.4rem 6rem; overflow:visible; }
  .system-inner   { max-width:100%; padding:0; gap:1.4rem; }
  .system-header  { padding:0; }
  .system-rows    { flex-direction:column; border-top:1px solid rgba(245,243,238,0.1); overflow:visible; }
  .section-system::after { display:none; }
  .srow-trigger   { grid-template-columns:2.2rem 1fr auto; gap:0 1rem; padding:1.1rem 0; }
  .srow-num       { font-size:0.58rem; }
  .srow-title     { font-size:1rem; }
  .srow-icon      { width:26px; height:26px; }
  .srow-icon svg  { width:11px; height:11px; }
  .srow-body      { font-size:0.82rem; line-height:1.7; padding-left:calc(2.2rem + 1rem); max-width:none; padding-top:0.6rem; }
  .srow-body-wrap.is-open .srow-body-inner { padding-bottom:1.2rem; }

  /* 10. CASE STUDIES — axis-swap vertical flow (mobile = native stack) */
  .section-case-studies { height:auto; min-height:100svh; overflow:visible; padding-bottom:5.5rem; }
  .cs-vflow             { position:static; display:flex; flex-direction:column; transform:none !important; }
  .cs-vslide            { flex:0 0 auto; min-height:auto; padding:3rem 0; }
  .cs-slide-inner       { padding:0 1.4rem; }
  .cs-vcase-grid        { grid-template-columns:1fr; gap:1.8rem; }
  .cs-monitor           { transform:none; }
  .cs-vslide--case:hover .cs-monitor { transform:none; }
  .cs-vslide--case::before { font-size:7rem; top:-.05em; right:-.02em; }
  .cs-monitor-glow      { inset:-15% -5% -15% -5%; opacity:.38; }
  .cs-vcap              { max-width:none; }
  .cs-vcap-stats        { gap:1.2rem; padding:.9rem 0; }
  .cs-vrail             { display:none; }

  /* 11. DISSECTION — specimen centrepiece */
  .section-dissection { height:100svh; overflow:hidden; }
  .dissection-desc    { display:none; }
  .dissection-header  { gap:0.6rem; }
  .dissection-stage   { height:clamp(200px,52vw,300px); border-radius:14px; }
  .specimen-word      { font-size:clamp(2.6rem,13vw,4.5rem); letter-spacing:-0.04em; }
  .stage-meta         { font-size:0.48rem; }

  /* 12. PROCESS — 2x2 dramatic */
  .section-process { height:auto; min-height:100svh; overflow:visible; padding-bottom:5.5rem; }
  .process-header  { margin-bottom:1.2rem; }
  .process-grid    { grid-template-columns:1fr 1fr; gap:0.6rem; }
  .process-cell    { min-height:clamp(115px,26vw,160px); border-radius:14px; }
  .process-ghost   { font-size:clamp(3.5rem,14vw,5.5rem); opacity:0.04; letter-spacing:-0.04em; }
  .process-title   { font-size:0.82rem; letter-spacing:-0.01em; }
  .process-week    { font-size:0.58rem; letter-spacing:0.12em; margin-top:0.15rem; }
  .process-num     { font-size:0.55rem; }

  /* 13. CTA — oversized cinematic */
  .section-cta { height:100svh; overflow:hidden; min-height:480px; }
  .cta-inner   { gap:2rem; }
  .cta-eyebrow {
    opacity:1; font-size:0.58rem; letter-spacing:0.24em;
    padding:0.28rem 0.7rem;
    border:1px solid rgba(245,243,238,0.22);
    border-radius:999px; display:inline-block; width:fit-content;
  }
  .cta-heading {
    font-size:clamp(1.6rem,7.5vw,2.8rem);
    line-height:1.05; letter-spacing:-0.04em;
  }
  .cta-deco { font-size:clamp(10rem,45vw,18rem); -webkit-text-stroke-width:1px; }
  .section-cta .btn {
    width:auto; align-self:flex-start; padding:.75rem 2rem; font-size:0.68rem;
    background:var(--c-bg); color:var(--c-fg); border-color:var(--c-bg);
  }

  /* 14. CONTACT — clean premium */
  .form-row      { grid-template-columns:1fr; gap:0.75rem; }
  .contact-inner { max-width:100%; padding:4.5rem 1.4rem 3rem; gap:1.8rem; }
  .contact-form  { gap:0.85rem; }
  .contact-form input, .contact-form textarea {
    font-size:0.88rem; padding:0.85rem 1rem;
    border-radius:10px; border:1px solid var(--c-border-h);
  }
  .contact-form textarea { min-height:110px; }
  .contact-form .btn { width:100%; cursor:auto; justify-content:center; padding:.8rem 2rem; }
  .section-contact .section-h { font-size:clamp(2rem,8vw,3rem); }

  /* 15. FOOTER */
  .footer-wordmark { font-size:clamp(5rem,24vw,9rem); opacity:0.07; }
  .footer-inner    { flex-direction:column; gap:1.8rem; padding:0; }
  .footer-links    { gap:1.2rem; flex-wrap:wrap; }
  .footer-mark     { font-size:0.62rem; letter-spacing:0.12em; }
  .footer-back     { font-size:0.62rem; letter-spacing:0.1em; }

  /* 16. FLOATING BUTTONS */
  .whatsapp-btn   { bottom:calc(4.8rem + env(safe-area-inset-bottom, 0px)); left:1rem; right:auto; width:48px; height:48px; cursor:pointer; }
  .scroll-top     { display:none; }

  /* 17. HIDE DESKTOP CHROME */
  .panel-arrows { display:none; }
  .cursor-blob  { display:none; }

  /* 18. REVEALS */
  .reveal, .reveal-up { opacity:1; transform:none; }
  .btn { cursor:pointer; }
}

@media (max-width:480px) {
  .hero-main    { font-size:clamp(2.3rem,11.5vw,3.8rem); }
}
@media (max-width:390px) {
  .hero-main      { font-size:clamp(2rem,11vw,3.2rem); }
  .manifesto-line { font-size:clamp(1.3rem,7.5vw,2.2rem); }
}

@media (max-width:400px) {
  :root { --pad-x:1.2rem; }
  .hero-main { font-size:clamp(2rem,10.5vw,3.2rem) !important; white-space:normal !important; }
}

/* ── TABLET HERO FIX (769px–1024px) ── */
@media (max-width:1024px) and (min-width:769px) {
  .hero-main {
    font-size: clamp(2.8rem, 7.5vw, 5.5rem);
    white-space: nowrap !important;
  }
  .hero-inner   { align-items: center; }
  .hero-left    { align-items: center; text-align: center; }
  .hero-hyper-text { text-align: center; max-width: clamp(260px, 80vw, 520px); }
  .hero-eyebrow { text-align: center; }
}

/* =====================================================
   FOOTER CONNECT BUTTON
===================================================== */
.footer-connect { position:relative; display:inline-flex; }
.footer-connect__wrap { position:relative; display:inline-flex; align-items:center; }
.footer-connect__label {
  font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,243,238,0.4);
  background:transparent; border:none; font-family:inherit;
  cursor:pointer; padding:0;
  transition:opacity 0.22s ease, color 0.22s ease;
}
.footer-connect__label:hover { color:var(--c-bg); }
.footer-connect__icons {
  position:absolute; top:50%; left:0;
  transform:translateY(-50%);
  display:flex; gap:0.65rem;
  pointer-events:none; white-space:nowrap;
}
.footer-connect__icon {
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateX(-6px);
  color:rgba(245,243,238,0.5);
  transition:opacity 0.22s ease calc(var(--i) * 0.07s),
             transform 0.28s var(--ease-expo) calc(var(--i) * 0.07s),
             color 0.2s ease;
}
.footer-connect__icon:hover { color:var(--c-bg); }
@media (hover:hover) and (pointer:fine) {
  .footer-connect__wrap:hover .footer-connect__label { opacity:0; pointer-events:none; }
  .footer-connect__wrap:hover .footer-connect__icons { pointer-events:auto; }
  .footer-connect__wrap:hover .footer-connect__icon {
    opacity:1; transform:translateX(0); pointer-events:auto;
  }
}
/* Touch: toggled open by JS */
.footer-connect__wrap.is-open .footer-connect__label { opacity:0; pointer-events:none; }
.footer-connect__wrap.is-open .footer-connect__icons { pointer-events:auto; }
.footer-connect__wrap.is-open .footer-connect__icon { opacity:1; transform:translateX(0); pointer-events:auto; }

/* =====================================================
   ADAPTIVE HOVER EFFECTS
   — only applied when device has a precise pointer
===================================================== */
@media (hover:hover) and (pointer:fine) {
  /* Accordion trigger */
  .srow-trigger:hover { background:rgba(10,10,10,0.03); }

  /* Process cells */
  .process-cell:hover { background:rgba(10,10,10,0.03); }

  /* Manifesto lines */
  .manifesto-line:hover { opacity:0.55; }

  /* Footer nav links — FlipLink hover (GSAP handles animation, just need overflow:hidden) */
  .footer-links a { transition:color .25s ease; }

  /* WhatsApp — pointer only */
  .whatsapp-btn:hover {
    transform:scale(1.1) translateY(-2px);
    box-shadow:0 10px 30px rgba(37,211,102,0.5);
  }
}

/* Remove hover effects on touch devices */
@media (hover:none) {
  .srow-trigger:hover { background:transparent; }
  .process-cell:hover { background:var(--c-bg); }
  .manifesto-line:hover { opacity:1; }
  .footer-connect__wrap:hover .footer-connect__label { opacity:1; pointer-events:auto; }
  .footer-connect__wrap:hover .footer-connect__icon { opacity:0; pointer-events:none; }
}

/* =====================================================
   MANIFESTO MOBILE PULSE
===================================================== */
@keyframes manifesto-pulse {
  0%,100% { background:var(--c-fg); }
  50%     { background:#0d0d0d; }
}
@media (max-width:768px) {
  .section-manifesto {
    animation: manifesto-pulse 6s ease infinite;
  }
}

/* =====================================================
   WAVEPATH (contact section elastic line)
===================================================== */
.wave-path-wrap {
  position:relative;
  width:clamp(180px, 70%, 520px);
  height:10px;
  margin:1.2rem 0 0.4rem;
}
.wave-path-hover-zone {
  position:absolute; top:-20px; left:0;
  width:100%; height:50px; z-index:10;
  cursor:crosshair;
}
.wave-path-svg {
  position:absolute; top:-100px;
  width:100%; height:300px;
  pointer-events:none;
}
.wave-path-line {
  stroke:var(--c-border-h);
}
@media (max-width:768px) {
  .wave-path-wrap { display:none; }
}

/* =====================================================
   TESTIMONIALS
===================================================== */
.section-testimonials { background:var(--c-bg); position:relative; }
.testi-inner {
  display:flex; flex-direction:column; gap:clamp(1.6rem,4vh,2.8rem);
}

/* Decorative quote mark — parallax background element */
.testi-deco-quote {
  position:absolute; top:clamp(2rem,5vh,4rem); right:var(--pad-x);
  font-size:clamp(6rem,16vw,16rem); font-weight:700;
  color:transparent; -webkit-text-stroke:1px rgba(10,10,10,0.055);
  line-height:0.8; pointer-events:none; user-select:none;
  z-index:0; will-change:transform;
}
@media (max-width:768px) { .testi-deco-quote { display:none; } }
.testi-header { display:flex; flex-direction:column; gap:0; }

/* Stacked-skewed testimonial cards */
.testi-stack {
  display:grid;
  grid-template-areas:"stack";
  place-items:center;
  margin-top:clamp(1rem,2.5vh,2rem);
  width:100%;
  min-height:clamp(220px, 30vh, 300px);
  perspective:1200px;
}
.testi-stack__card {
  grid-area:stack;
  width:clamp(260px, 34vw, 360px);
  min-height:clamp(170px, 22vh, 210px);
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.05rem 1.15rem;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:18px;
  color:var(--c-fg);
  transform:skewY(-8deg);
  transition:transform .55s var(--ease-expo),
             border-color .3s ease,
             background .3s ease,
             filter .55s ease,
             box-shadow .3s ease;
  cursor:pointer; user-select:none;
  box-shadow:0 10px 30px -18px rgba(10,10,10,0.18);
  text-decoration:none;
  will-change:transform;
}
.testi-stack__card[data-card="0"] { z-index:3; }
.testi-stack__card[data-card="1"] {
  transform:skewY(-8deg) translate(clamp(2.2rem,4.5vw,4.5rem), clamp(1.6rem,2.8vw,2.8rem));
  background:rgba(245,243,238,0.92);
  z-index:2;
}
.testi-stack__card[data-card="2"] {
  transform:skewY(-8deg) translate(clamp(4.4rem,9vw,9rem), clamp(3.2rem,5.6vw,5.6rem));
  background:rgba(245,243,238,0.82);
  filter:grayscale(25%);
  z-index:1;
}

/* Cascade when a card is focused */
.testi-stack[data-focused="0"] .testi-stack__card[data-card="0"] { transform:skewY(-8deg) translate(-.4rem,-.6rem); z-index:10; border-color:var(--c-border-h); box-shadow:0 24px 50px -22px rgba(10,10,10,0.3); }
.testi-stack[data-focused="0"] .testi-stack__card[data-card="1"] { transform:skewY(-8deg) translate(clamp(3.8rem,7vw,7rem), clamp(5rem,8vw,8rem)); }
.testi-stack[data-focused="0"] .testi-stack__card[data-card="2"] { transform:skewY(-8deg) translate(clamp(6.4rem,11vw,11rem), clamp(7.2rem,11vw,11rem)); }

.testi-stack[data-focused="1"] .testi-stack__card[data-card="0"] { transform:skewY(-8deg) translate(0,0); z-index:1; }
.testi-stack[data-focused="1"] .testi-stack__card[data-card="1"] { transform:skewY(-8deg) translate(clamp(1.6rem,3.5vw,3.5rem), clamp(1rem,1.8vw,1.8rem)); filter:none; z-index:10; border-color:var(--c-border-h); background:var(--c-bg); box-shadow:0 24px 50px -22px rgba(10,10,10,0.3); }
.testi-stack[data-focused="1"] .testi-stack__card[data-card="2"] { transform:skewY(-8deg) translate(clamp(6.4rem,11vw,11rem), clamp(7.2rem,11vw,11rem)); }

.testi-stack[data-focused="2"] .testi-stack__card[data-card="0"] { transform:skewY(-8deg) translate(0,0); z-index:1; }
.testi-stack[data-focused="2"] .testi-stack__card[data-card="1"] { transform:skewY(-8deg) translate(clamp(2.2rem,4.5vw,4.5rem), clamp(1.6rem,2.8vw,2.8rem)); z-index:2; }
.testi-stack[data-focused="2"] .testi-stack__card[data-card="2"] { transform:skewY(-8deg) translate(clamp(3rem,6vw,6rem), clamp(3.5rem,6vw,6rem)); filter:none; z-index:10; border-color:var(--c-border-h); background:var(--c-bg); box-shadow:0 24px 50px -22px rgba(10,10,10,0.3); }

/* Card internals */
.tsc-head { display:flex; align-items:flex-start; gap:.7rem; }
.tsc-avatar {
  flex:none; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.64rem; letter-spacing:.1em;
  font-weight:600; color:var(--c-bg);
  background:linear-gradient(135deg, #3a3a3a 0%, #0a0a0a 100%);
}
.tsc-meta { display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.tsc-name { font-size:.82rem; font-weight:600; color:var(--c-fg); }
.tsc-role { font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-dim); margin-top:3px; }
.tsc-mark { font-size:2.2rem; line-height:.5; color:var(--c-border-h); font-family:Georgia, serif; margin-top:4px; }
.tsc-quote { font-size:.78rem; line-height:1.6; color:var(--c-fg); margin:0; }
.tsc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.3rem; }
.tsc-date { font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-dim); }
.tsc-cta { font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-muted); opacity:0; transition:opacity .3s ease, transform .3s ease; transform:translateX(-4px); }
.testi-stack[data-focused="0"] .testi-stack__card[data-card="0"] .tsc-cta,
.testi-stack[data-focused="1"] .testi-stack__card[data-card="1"] .tsc-cta,
.testi-stack[data-focused="2"] .testi-stack__card[data-card="2"] .tsc-cta { opacity:1; transform:translateX(0); }

.testi-more {
  font-size:var(--fs-label); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--c-muted);
  align-self:flex-start;
  border-bottom:1px solid var(--c-border);
  padding-bottom:0.3rem;
  transition:color .3s ease, border-color .3s ease;
  margin-top:clamp(1rem,3vh,2rem);
}
.testi-more:hover { color:var(--c-fg); border-color:var(--c-fg); }

/* Legacy magic-text kept for any other usage */
.magic-word {
  display:inline-block;
  opacity:0.15;
  margin-right:0.28em;
  transition:opacity 0.38s ease;
}
.magic-word.is-lit { opacity:1; }

@media (max-width:768px) {
  .section-testimonials { height:auto; min-height:100svh; overflow:visible; padding-bottom:5.5rem; }
  .testi-stack { min-height:clamp(240px, 42vh, 340px); }
  .testi-stack__card { width:min(74vw, 300px); min-height:160px; padding:.95rem 1rem; }
  .tsc-quote { font-size:.76rem; }
}

/* =====================================================
   CONNECT / REACH US PANEL
===================================================== */
.section-connect {
  background:var(--c-fg);
}
.section-connect .section-tag { color:rgba(245,243,238,0.4); }
.section-connect .section-tag::before { background:rgba(245,243,238,0.18); }
.section-connect .section-h { color:var(--c-bg); }
.connect-inner {
  display:flex; flex-direction:column; gap:clamp(1.4rem,3vh,2.2rem);
}
.connect-header { display:flex; flex-direction:column; gap:0; }
.connect-grid {
  display:flex; flex-direction:column;
  border:1px solid rgba(245,243,238,0.1);
  border-radius:14px;
  overflow:hidden;
}
.connect-row {
  display:grid;
  border-bottom:1px solid rgba(245,243,238,0.1);
}
.connect-row:last-child { border-bottom:none; }
.connect-row--2 { grid-template-columns:1fr 1fr; }
.connect-row--4 { grid-template-columns:repeat(4,1fr); }
.clip-box {
  position:relative;
  height:clamp(80px,16vw,140px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem;
  overflow:hidden;
  border-right:1px solid rgba(245,243,238,0.1);
  color:rgba(245,243,238,0.45);
  text-decoration:none;
  transition:color .2s ease;
}
.clip-box:last-child { border-right:none; }
.clip-icon { width:clamp(18px,2.4vw,28px); height:auto; flex-shrink:0; }
.clip-label {
  font-size:clamp(0.42rem,0.7vw,0.52rem);
  letter-spacing:0.22em; text-transform:uppercase;
}
.clip-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem;
  background:rgba(245,243,238,0.07);
  color:var(--c-bg);
  clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
}
@media (hover:hover) and (pointer:fine) {
  .clip-box:hover { color:rgba(245,243,238,0.7); }
}
@media (max-width:768px) {
  .section-connect { height:auto; min-height:100svh; padding-bottom:5.5rem; overflow:visible; }
  .connect-row--4 { grid-template-columns:repeat(2,1fr); }
  .connect-row--4 .clip-box:nth-child(2) { border-right:1px solid rgba(245,243,238,0.1); }
  .clip-overlay { display:none; }
  .clip-box { height:clamp(70px,22vw,110px); }
  .clip-icon { width:22px; }
  .clip-label { font-size:0.48rem; }
}

/* =====================================================
   FLIPLINK — footer nav letter-flip hover
===================================================== */
.footer-links a {
  display:inline-block; overflow:hidden; vertical-align:top;
}
.flip-bot-row {
  position:absolute; top:100%; left:0; pointer-events:none;
}
.flip-ch { display:inline-block; }

/* =====================================================
   FOCUS INDICATORS — keyboard navigation accessibility
===================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--c-fg);
  outline-offset:3px;
  border-radius:2px;
}

/* =====================================================
   VERY SMALL SCREENS (≤360px) — e.g. Galaxy A series
===================================================== */
@media (max-width:360px) {
  :root { --pad-x:1rem; }
  .hero-main { font-size:clamp(1.7rem,10.5vw,2.4rem) !important; }
}

/* =====================================================
   PREFERS-REDUCED-MOTION — accessibility & low-end
===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   A11Y: screen-reader-only helper (for visually-hidden labels).
   Use on <span> wrappers inside icon-only buttons/links, form labels.
═══════════════════════════════════════════════════════════════════ */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* Skip-to-content link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -40px; left: 8px;
  background: #f5f3ee;
  color: #050505;
  padding: 10px 16px;
  z-index: 10000;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible { top: 8px; }

/* Focus-visible baseline — consistent keyboard outline across the site */
*:focus-visible {
  outline: 2px solid rgba(245,243,238,0.8);
  outline-offset: 2px;
}

/* Letter-specimen: keyboard parity with hover (M14) */
.specimen-word .ltr:focus-within .ltr-tip,
.specimen-word .ltr:focus .ltr-tip {
  opacity: 1;
  transform: translate(-50%, -4px);
  pointer-events: auto;
}
.specimen-word .ltr {
  /* Make each letter tabbable when given tabindex="0" in markup */
  cursor: pointer;
}
.specimen-word .ltr:focus-visible {
  outline: 1px dashed rgba(245,243,238,0.6);
  outline-offset: 2px;
}

/* Honeypot field — visually hidden, not rendered for sighted users */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Live-region announcer (aria-live polite) */
.live-announcer {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* =====================================================
   NAVIGATION — Glow Menu (desktop) + Bottom Tab (mobile)
   v1.0
===================================================== */

/* ══ DESKTOP — floating pill, center-top ══ */
.site-nav {
  display: none;  /* shown at 769px+ */
  position: fixed;
  top: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(245,243,238,0.10);
  box-shadow:
    0 1px 0 rgba(245,243,238,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.35),
    0 12px 40px -8px rgba(0,0,0,0.45),
    0 2px 8px -2px rgba(0,0,0,0.25);
  overflow: hidden;
}
@media (min-width: 769px) { .site-nav { display: block; } }

/* Ambient glow across full container on hover */
.snav-bg-glow {
  position: absolute; inset: -8px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(245,243,238,0.06) 0%, transparent 70%);
  transition: opacity 0.5s ease;
  z-index: 0;
}
.site-nav:hover .snav-bg-glow { opacity: 1; }

.snav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none; margin: 0; padding: 0;
  position: relative; z-index: 1;
}

/* ── Each item ── */
.snav-item {
  position: relative;
  perspective: 600px;
}
.snav-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.snav-flipper {
  position: relative;
  border-radius: 12px;
}

/* Radial glow behind item, visible when active */
.snav-glow {
  position: absolute; inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.snav-item.is-active .snav-glow { opacity: 1; transform: scale(2); }

/* Both faces share base typography */
.snav-face {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative; z-index: 1;
}

/* Front face — default visible */
.snav-face--front {
  transform-origin: center bottom;
  color: rgba(245,243,238,0.52);
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.4s ease,
    color     0.3s ease;
}
.snav-item:hover .snav-face--front       { transform: rotateX(-90deg); opacity: 0; }
.snav-item.is-active .snav-face--front   { color: #f5f3ee; }

/* Back face — hidden, flips in on hover */
.snav-face--back {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  transform: rotateX(90deg);
  transform-origin: center top;
  opacity: 0;
  color: #f5f3ee;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.4s ease;
}
.snav-item:hover .snav-face--back { transform: rotateX(0deg); opacity: 1; }

/* ── CTA — "Start a project" pill ── */
.snav-item--cta .snav-face {
  padding: 6px 16px;
  background: rgba(245,243,238,0.10);
  border: 1px solid rgba(245,243,238,0.15);
  border-radius: 999px;
  color: rgba(245,243,238,0.82);
}
.snav-item--cta:hover .snav-face--front,
.snav-item--cta .snav-face--back {
  background: #f5f3ee;
  border-color: #f5f3ee;
  color: #050505;
  border-radius: 999px;
}
.snav-item--cta .snav-glow { display: none; }

/* Reduced motion */
@supports (prefers-reduced-motion: reduce) {
  @media (prefers-reduced-motion: reduce) {
    .snav-face--front, .snav-face--back,
    .snav-glow, .snav-bg-glow { transition: none !important; }
  }
}

/* ══ MOBILE — bottom tab bar ══ */
.site-nav-mobile {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 64px;
  z-index: 9999;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(8,8,8,0.78);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(245,243,238,0.10);
  box-shadow: 0 1px 0 rgba(245,243,238,0.06) inset;
  align-items: stretch;
  justify-content: space-around;
}
@media (max-width: 768px) {
  .site-nav-mobile { display: flex; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.snm-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  color: rgba(245,243,238,0.38);
  text-decoration: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.22s ease;
}
.snm-tab.is-active              { color: #f5f3ee; }
.snm-tab.is-active .snm-dot     { opacity: 1; transform: scale(1); }

/* Active indicator dot */
.snm-dot {
  position: absolute;
  top: 6px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #f5f3ee;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.snm-icon  { width: 20px; height: 20px; flex-shrink: 0; }
.snm-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
}

/* CTA tab */
.snm-tab--cta {
  color: #050505 !important;
  background: #f5f3ee;
  margin: 10px 6px;
  padding: 0 16px;
  border-radius: 999px;
  flex: 0 0 auto;
  gap: 5px;
}
.snm-tab--cta .snm-dot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .snm-tab, .snm-dot { transition: none; }
}