/* ============================================================
   STOCCHI STUDIO — refined design
   Neutral bone palette dominates. Teal + brick used as
   rare, intentional accents — never wallpaper.
============================================================ */

:root {
  --bone:        #faf6ec;            /* paper */
  --bone-2:      #f3ecd9;            /* sunken card surface */
  --bone-3:      #ebe2cb;            /* deeper cream for tags / wells */
  --paper:       #ffffff;
  --ink:         #1a1a1a;            /* canonical, used sparingly */
  --ink-2:       #3b362f;            /* warm body text */
  --ink-3:       #5a5247;            /* secondary */
  --muted:       #8a8276;
  --rule:        rgba(26, 26, 26, 0.10);
  --rule-2:      rgba(26, 26, 26, 0.18);
  --rule-3:      rgba(26, 26, 26, 0.30);
  --teal:        #1e6e6e;
  --teal-d:      #155454;
  --teal-soft:   rgba(30, 110, 110, 0.08);
  --teal-line:   rgba(30, 110, 110, 0.40);
  --brick:       #c4392a;
  --brick-d:     #9a2a1d;
  --brick-soft:  rgba(196, 57, 42, 0.08);
  --brick-line:  rgba(196, 57, 42, 0.40);

  --shadow-sm:   0 1px 2px rgba(26,26,26,0.04), 0 2px 8px rgba(26,26,26,0.04);
  --shadow-md:   0 1px 2px rgba(26,26,26,0.05), 0 8px 24px rgba(26,26,26,0.06);
  --shadow-lg:   0 4px 12px rgba(26,26,26,0.06), 0 20px 48px rgba(26,26,26,0.08);
  --shadow-hover:0 4px 16px rgba(26,26,26,0.08), 0 24px 60px rgba(26,26,26,0.10);

  --max:         1320px;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bone);   /* solid fallback if WebGL fails */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* When the global scene is mounted, body bg becomes transparent so the
   fixed scene shows through every page. */
body.has-scene { background: transparent; }
body.has-scene::before { display: none; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
::selection { background: var(--brick); color: var(--bone); }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }

/* ===== Subtle paper grain (decorative) ===== */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(26,26,26,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.nav, section, footer, .stocchi-credit { position: relative; z-index: 1; }

/* ============================================================
   Type
============================================================ */

.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.kicker::before, .eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--brick);
  flex-shrink: 0;
}

/* Hero headline — only one accent line, rest is flat ink */
.h-hero {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 12vw, 184px);
  line-height: 0.86;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.h-hero.accent {
  color: var(--bone);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 0.06em 0.06em 0 var(--teal);
}

/* Standard section heading — flat, clean Anton */
.h-section {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.h-section .em {
  color: var(--brick);
  font-style: normal;
  display: inline-block;
}
.h-section .em::after { content: none; display: none; }
@keyframes scaleX-in { to { transform: scaleX(1); } }

.h-card {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 0.96;
  color: var(--ink);
}

.lede {
  font-family: "Inter", sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 60ch;
  font-weight: 400;
}

/* Brand pill — small accent only */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brick);
  color: var(--paper);
  padding: 6px 14px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bone);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.7); }
}

/* ============================================================
   Layout
============================================================ */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

section {
  padding: 110px 0;
  border-top: 1px solid var(--rule);
}
section:first-of-type { border-top: none; }
@media (max-width: 720px) { section { padding: 72px 0; } }

/* ============================================================
   Glass system — when scene is mounted, every standard section is
   fully transparent and the WebGL scene scrolls behind everything.
   Only deliberate "surfaces" (cards, panels, the form, footer)
   get their own translucent glass treatment.
============================================================ */

/* Sections are completely seamless — no dividers, no backgrounds. */
body.has-scene section {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
}
body.has-scene .scene-hero-section,
body.has-scene .pagehead {
  border-top: none !important;
}
body.has-scene .pagehead {
  padding: 100px 0 56px;
}

/* SEAMLESS MODE — every card-like surface is invisible. Just text floats
   over the scene with text-shadow for legibility. The contact form inputs
   are the one exception (they need interactive surfaces). */
body.has-scene :where(
  .pagehead .wrap,
  .navcards .card,
  .svc-grid .svc,
  .story,
  .story .lede-card,
  .hq-card,
  .case-side,
  .case-body,
  .morework .mw,
  .form-card,
  .faq,
  .trust-row a,
  .contact-pills a,
  .contact-pills span
) {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Kill decorative gradients / hover washes inside cards */
body.has-scene .navcards .card::before,
body.has-scene .svc-grid .svc::before {
  display: none !important;
}
body.has-scene .navcards .card .corner {
  display: none !important;
}

/* Kill chunky pre-launch "thumb" frames around case + project images so
   the photos sit cleanly over the scene with just rounded corners. */
body.has-scene .proj .canvas,
body.has-scene .case-hero,
body.has-scene .morework .mw .thumb {
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(20, 60, 70, 0.18) !important;
}

/* Drop the lede-card's brick stripe — it was a card affordance */
body.has-scene .story .lede-card::before { display: none !important; }

/* Story chapters use soft hairlines for separation between paragraphs */
body.has-scene .story .chapter {
  border-top-color: rgba(26, 26, 26, 0.14) !important;
}
body.has-scene .story .chapter:last-child { border-bottom: none !important; }

/* FAQ uses soft hairlines too */
body.has-scene .faq { border-top: 1px solid rgba(26, 26, 26, 0.14) !important; }
body.has-scene .faq details {
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
}
body.has-scene .faq details:last-child { border-bottom: none; }

/* ============================================================
   Text legibility — every text element gets a soft white shadow so
   it reads cleanly against the moving scene without needing a panel.
============================================================ */

/* Headlines + display text — tight shadow + soft glow, OK to use the wider
   halo because Anton at 40-160px holds up even with the outer glow. */
body.has-scene .pagehead h1,
body.has-scene .section-head .h-section,
body.has-scene .h-section,
body.has-scene .h-card,
body.has-scene .navcards .card h3,
body.has-scene .svc-grid .svc h3,
body.has-scene .story .lede-card,
body.has-scene .hq-card h2,
body.has-scene .case-body h2,
body.has-scene .proj h2,
body.has-scene .morework .mw .meta,
body.has-scene .scene-tag,
body.has-scene .form-card h3,
body.has-scene .foot-tag,
body.has-scene .cta-strip h2 {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55), 0 0 14px rgba(255, 255, 255, 0.30);
}

/* Body text — TIGHT shadow only. The wider outer glow on small Inter
   text (14-17px) was bleeding into the glyphs and making it look washed out.
   Also bump weight to 500 for stronger visual presence. */
body.has-scene .pagehead .lede,
body.has-scene .section-head .lede,
body.has-scene .navcards .card p,
body.has-scene .navcards .card .num,
body.has-scene .navcards .card .cta,
body.has-scene .svc-grid .svc p,
body.has-scene .svc-grid .svc .num,
body.has-scene .chapter p,
body.has-scene .chapter .num,
body.has-scene .hq-card .sub,
body.has-scene .hq-card h4,
body.has-scene .hq-card .next,
body.has-scene .case-body p,
body.has-scene .case-side h4,
body.has-scene .case-side dt,
body.has-scene .case-side dd,
body.has-scene .case-side ul li,
body.has-scene .case-side .chip,
body.has-scene .morework .mw .industry,
body.has-scene .proj .num-tag,
body.has-scene .proj .excerpt,
body.has-scene .faq summary,
body.has-scene .faq .answer,
body.has-scene .scene-scroll-hint,
body.has-scene .scene-scroll-hint span,
body.has-scene .trust-row a,
body.has-scene .contact-pills a,
body.has-scene .contact-pills span,
body.has-scene .form-card .stepper,
body.has-scene .field label,
body.has-scene fieldset legend,
body.has-scene .foot-grid h4,
body.has-scene .foot-grid a,
body.has-scene .foot-grid p,
body.has-scene .foot-grid li,
body.has-scene .foot-bottom,
body.has-scene .stocchi-credit .label {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Even tighter weight bump on the smallest body paragraphs */
body.has-scene .navcards .card p,
body.has-scene .svc-grid .svc p,
body.has-scene .chapter p,
body.has-scene .case-body p,
body.has-scene .proj .excerpt,
body.has-scene .faq .answer,
body.has-scene .pagehead .lede,
body.has-scene .section-head .lede,
body.has-scene .hq-card .next,
body.has-scene .case-side dd,
body.has-scene .case-side ul li,
body.has-scene .scene-tag {
  font-weight: 500;
}

/* Link CTAs inside cards get an underline animation on hover (no card lift) */
body.has-scene .navcards .card { transform: none !important; }
body.has-scene .svc-grid .svc { transform: none !important; }
body.has-scene .morework .mw { transform: none !important; }
/* (hover color overrides handled in the FINAL OVERRIDES block below) */

/* ============================================================
   Navbar
============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 236, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s var(--ease-soft);
}
.nav.scrolled { box-shadow: 0 1px 0 var(--rule), 0 8px 24px rgba(26,26,26,0.04); }

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-inner > .brand     { justify-self: start; }
.nav-inner > .nav-links { justify-self: center; }
.nav-inner > .nav-extras { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.nav-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-2);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s var(--ease-out), background .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.nav-ig:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.nav-ig svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .nav-inner { padding: 12px 20px; } }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .3s var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }
.brand-logo { height: 42px; width: auto; }
@media (max-width: 720px) { .brand-logo { height: 34px; } }

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  position: relative;
  padding: 10px 14px;
  color: var(--ink-2);
  transition: color .2s var(--ease-soft);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 6px;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--bone);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: background .25s var(--ease-soft), transform .25s var(--ease-out);
}
.nav-cta:hover { background: var(--brick); transform: translateY(-1px); }
.nav-cta .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brick);
  transition: background .25s var(--ease-soft);
}
.nav-cta:hover .dot { background: var(--bone); }

@media (max-width: 880px) { .nav-links { display: none; } }

/* ============================================================
   Buttons
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: transform .25s var(--ease-out),
              background .25s var(--ease-soft),
              color .25s var(--ease-soft),
              border-color .25s var(--ease-soft),
              box-shadow .25s var(--ease-soft);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--brick);
  border-color: var(--brick);
  box-shadow: var(--shadow-md);
}

.btn-brick {
  background: var(--brick);
  color: var(--paper);
  border-color: var(--brick);
}
.btn-brick:hover { background: var(--brick-d); border-color: var(--brick-d); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.btn-outline { background: var(--paper); border-color: var(--rule-2); }
.btn-outline:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

.arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Scene background — fixed, behind everything, on every page
============================================================ */

.scene-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: #cfe3ec;   /* day-sky fallback before WebGL boots */
  isolation: isolate;
  overflow: hidden;
}
.scene-bg .scene-shader,
.scene-bg .scene-three,
.scene-bg .scene-haze,
.scene-bg .scene-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.scene-bg .scene-shader { z-index: 1; }
.scene-bg .scene-three  { z-index: 3; }

/* All scrollable content sits above the fixed scene */
.nav, section, footer, .stocchi-credit { position: relative; z-index: 1; }

/* Aliases retained so existing markup keeps working — shader/three/haze/
   fallback rules below also apply when used inside a .scene-bg wrapper. */
.scene-shader,
.scene-three,
.scene-haze,
.scene-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.scene-shader { z-index: 1; }
.scene-three  { z-index: 3; }

/* Soft horizon haze (lives inside .scene-bg or anywhere with a parent) */
.scene-haze {
  z-index: 2;
  top: 50%;
  height: 22vh;
  transform: translateY(-50%);
  background: linear-gradient(to bottom,
    rgba(255,245,225,0) 0%,
    rgba(255,235,200,0.30) 48%,
    rgba(255,235,200,0.14) 72%,
    rgba(255,235,200,0)   100%);
  filter: blur(8px);
}

/* CSS gradient fallback (visible only if WebGL fails) — Day palette */
.scene-fallback {
  z-index: 0;
  background:
    linear-gradient(to bottom,
      #9ec5d6 0%,
      #d4e6ec 40%,
      #f4e6cf 56%,
      #cfe6e8 64%,
      #6db1bd 100%);
}

/* Home hero — sits on top of the global fixed scene-bg */
.scene-hero-section {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 640px;
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  overflow: hidden;
}
.scene-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px 32px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 720px) {
  .scene-overlay { padding: 80px 20px 60px; }
  .scene-hero-section { min-height: 560px; }
}

.scene-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* logo sits in upper-third of the hero — not vertical-center */
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  padding-top: 4vh;
}

/* Big floating Stocchi logo as the centerpiece */
.scene-logo {
  width: min(720px, 62vw);
  filter: drop-shadow(0 18px 30px rgba(20, 60, 70, 0.30));
  animation: logo-float 7s ease-in-out infinite;
}
.scene-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 720px) {
  .scene-logo { width: 80vw; }
}

.scene-tag {
  margin: 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.005em;
  color: #1c2530;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90vw;
}
.scene-tag em { font-style: italic; opacity: 0.85; }
.scene-tag .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.6;
}

.scene-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(28, 37, 48, 0.78);
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
  padding-bottom: 8px;
}
.scene-scroll-hint .line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, #1c2530, transparent);
  animation: scroll-pulse 2.6s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-logo { animation: none; }
}

/* ============================================================
   Nav over the scene — transparent until you scroll
============================================================ */

.nav.nav-on-scene {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .3s var(--ease-soft), border-bottom-color .3s var(--ease-soft), backdrop-filter .3s var(--ease-soft);
}
.nav.nav-on-scene .nav-links a {
  color: #1c2530;
  text-shadow: 0 1px 2px rgba(255,255,255,0.55), 0 0 10px rgba(255,255,255,0.25);
}
.nav.nav-on-scene .brand-logo {
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.5));
}
.nav.nav-on-scene .nav-links a::after { background: #1c2530; }
.nav.nav-on-scene .nav-links a.active { color: #1c2530; }
.nav.nav-on-scene .nav-cta {
  background: var(--brick);
  color: #fbf3e1;
  border: 1.5px solid #1a2530;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #1a2530;
}
.nav.nav-on-scene .nav-cta:hover {
  background: var(--brick-d);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #1a2530;
}
.nav.nav-on-scene .nav-cta .dot { background: #fbf3e1; }

/* Nav stays seamless even when scrolled — just a hairline at bottom */
.nav.nav-on-scene.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(26, 26, 26, 0.14);
  box-shadow: none;
}
.nav.nav-on-scene.scrolled .brand-logo,
.nav.nav-on-scene.scrolled .nav-links a,
.nav.nav-on-scene.scrolled .nav-cta { filter: none; }
.nav.nav-on-scene.scrolled .nav-links a { color: var(--ink-2); }
.nav.nav-on-scene.scrolled .nav-links a::after { background: var(--ink); }
.nav.nav-on-scene.scrolled .nav-links a.active { color: var(--ink); }
.nav.nav-on-scene.scrolled .nav-cta {
  background: var(--ink);
  color: var(--bone);
  border: none;
}
.nav.nav-on-scene.scrolled .nav-cta:hover { background: var(--brick); }
.nav.nav-on-scene.scrolled .nav-cta .dot { background: var(--brick); }

@media (prefers-reduced-motion: reduce) {
  .scene-shader, .scene-three { display: none; }
  .scene-fallback { background:
    linear-gradient(to bottom, #6a92ad 0%, #f1b07a 45%, #e57b67 55%, #1f4e58 100%); }
}

/* ============================================================
   Legacy hero (used on inner pages) — kept around but currently
   only the home page uses .scene-stage; pagehead handles others.
============================================================ */

.hero {
  padding: 96px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  margin-bottom: 64px;
}
.hero-headline { margin: 0; }
.hero-headline > span { display: block; }

.hero-sub {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  margin-top: 64px;
  align-items: end;
}
.hero-sub .right {
  border-left: 1px solid var(--rule-2);
  padding-left: 32px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-3);
}
.hero-sub .right strong { font-weight: 600; color: var(--ink); }
.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hero-sub { grid-template-columns: 1fr; gap: 32px; }
  .hero-sub .right {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rule-2);
    padding-top: 24px;
  }
}

/* ============================================================
   Trusted-by (refined — not a black slab)
============================================================ */

.trust {
  background: transparent;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 0;
  overflow: hidden;
}
.trust-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.trust-label::before, .trust-label::after {
  content: "";
  width: 36px; height: 1.5px;
  background: var(--brick);
  display: inline-block;
}
.trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  padding: 0 32px;
}
.trust-row a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  transition: transform .3s var(--ease-out), border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.trust-row a:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.trust-row img {
  width: 24px; height: 24px;
  object-fit: contain;
  border-radius: 4px;
  transition: transform .4s var(--ease-out);
}
.trust-row a:hover img { transform: scale(1.08) rotate(-2deg); }

/* ============================================================
   Page header
============================================================ */

.pagehead {
  padding: 100px 0 56px;
  text-align: center;
}
.pagehead .kicker { justify-content: center; }
.pagehead h1 {
  font-family: "Anton", sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin: 22px auto 24px;
  color: var(--ink);
  max-width: 18ch;
}
.pagehead h1 .accent {
  color: var(--brick);
  display: inline-block;
}
.pagehead h1 .accent::after { content: none; display: none; }
.pagehead .lede { margin: 0 auto; text-align: center; }

/* ============================================================
   Section head (eyebrow + title)
============================================================ */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.section-head .lede { margin-top: 18px; }
@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
}

/* ============================================================
   Home — Navigation Cards (refined)
============================================================ */

.navcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.navcards .card {
  display: block;
  position: relative;
  padding: 36px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  min-height: 260px;
  overflow: hidden;
  transition: transform .35s var(--ease-out),
              border-color .3s var(--ease-soft),
              box-shadow .3s var(--ease-soft);
  isolation: isolate;
}
.navcards .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brick-soft) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
  z-index: -1;
}
.navcards .card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-3);
  box-shadow: var(--shadow-hover);
}
.navcards .card:hover::before { opacity: 1; }

.navcards .card .num {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brick);
}
.navcards .card h3 {
  font-family: "Anton", sans-serif;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 0.96;
  margin: 18px 0 14px;
  color: var(--ink);
  transition: color .2s var(--ease-soft);
}
.navcards .card p {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 0 28px;
}
.navcards .card .cta {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  position: relative;
  padding-bottom: 4px;
}
.navcards .card .cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.navcards .card:hover .cta { color: var(--brick); }
.navcards .card:hover .cta::after { transform: scaleX(1); }

.navcards .card .corner {
  position: absolute;
  top: 28px; right: 28px;
  width: 40px; height: 40px;
  border: 1px solid var(--rule-2);
  background: var(--bone);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink);
  transition: all .35s var(--ease-out);
}
.navcards .card:hover .corner {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: rotate(-45deg);
}

@media (max-width: 720px) {
  .navcards { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   About — Story zigzag + HQ
============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
}
.story .lede-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px 36px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.story .lede-card::before {
  content: "";
  position: absolute;
  left: -1px; top: 24px;
  width: 4px; height: calc(100% - 48px);
  background: var(--brick);
  border-radius: 4px;
}
.story .lede-card strong { font-weight: 400; color: var(--brick); }

.chapter {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  transition: padding-left .3s var(--ease-out);
}
.chapter:hover { padding-left: 8px; }
.chapter:last-child { border-bottom: 1px solid var(--rule); }
.chapter .num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 44px;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.01em;
}
.chapter p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.chapter p strong { color: var(--ink); font-weight: 600; }

.hq-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 110px;
  box-shadow: var(--shadow-md);
}
.hq-card h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: 0;
  margin-bottom: 6px;
  color: var(--ink);
}
.hq-card .sub {
  color: var(--brick);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 14px;
  margin-bottom: 20px;
}
.hq-card .photo {
  border-radius: 12px;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--bone-2);
}
.hq-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.hq-card:hover .photo img { transform: scale(1.04); }
.hq-card .next { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .hq-card { position: static; }
}

/* ============================================================
   Services — Grid + FAQ
============================================================ */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-grid .svc {
  padding: 36px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  transition: transform .3s var(--ease-out),
              border-color .25s var(--ease-soft),
              box-shadow .3s var(--ease-soft);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc-grid .svc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--teal-soft) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
  z-index: -1;
}
.svc-grid .svc:hover {
  transform: translateY(-4px);
  border-color: var(--rule-3);
  box-shadow: var(--shadow-md);
}
.svc-grid .svc:hover::before { opacity: 1; }
.svc-grid .svc .num {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brick);
}
.svc-grid .svc h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05;
  margin: 16px 0 18px;
  color: var(--ink);
}
.svc-grid .svc p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 28px 4px;
  transition: padding-left .3s var(--ease-out);
}
.faq details:hover { padding-left: 12px; }
.faq details[open] { padding-left: 12px; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  color: var(--ink);
  transition: color .2s var(--ease-soft);
}
.faq summary:hover { color: var(--brick); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 16px; height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out);
  color: var(--ink);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-3);
  margin-top: 16px;
  max-width: 75ch;
  animation: fadeIn .4s var(--ease-soft);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Work — Project zigzag (refined)
============================================================ */

.proj {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 72px;
  padding: 88px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.proj:last-child { border-bottom: none; }
.proj.flip { grid-template-columns: 1.3fr 1fr; }
.proj.flip .info { order: 2; }
.proj.flip .canvas { order: 1; }
@media (max-width: 900px) {
  .proj, .proj.flip { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .proj.flip .info { order: 0; }
  .proj.flip .canvas { order: 1; }
}

.proj .num-tag {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brick);
  margin-bottom: 8px;
}
.proj .industry {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 18px;
}
.proj h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin-bottom: 22px;
  color: var(--ink);
}
.proj h2 a {
  background-image: none;
  padding-bottom: 0;
}
.proj h2 a:hover { background-size: 0; }
.proj .excerpt {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-3);
  margin-bottom: 28px;
  max-width: 50ch;
}
.proj .actions { display: flex; gap: 14px; flex-wrap: wrap; }

.proj .canvas {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bone-2);
  box-shadow: var(--shadow-md);
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-soft);
}
.proj .canvas:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.proj .canvas img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease-out);
}
.proj .canvas:hover img { transform: scale(1.04); }
.proj .canvas .num {
  position: absolute;
  top: 22px; left: 26px;
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper);
  background: rgba(26,26,26,0.7);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.proj .canvas .badge {
  position: absolute;
  top: 22px; right: 26px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  background: var(--brick);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ============================================================
   Case study layout
============================================================ */

.case-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.case-hero {
  border-radius: 20px;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 64px;
  box-shadow: var(--shadow-lg);
  background: var(--bone-2);
}
.case-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.case-hero:hover img { transform: scale(1.03); }

.case-body h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 40px 0 16px;
  color: var(--ink);
  position: relative;
  padding-left: 22px;
}
.case-body h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em; bottom: 0.18em;
  width: 3px;
  background: var(--brick);
  border-radius: 3px;
}
.case-body h2:first-child { margin-top: 0; }
.case-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1em;
}
.case-body p strong { color: var(--ink); font-weight: 600; }
.case-body .live-btn { margin-top: 28px; }

.case-side {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px;
  position: sticky;
  top: 110px;
  box-shadow: var(--shadow-md);
}
.case-side h4 {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
}
.case-side h4 + h4 { margin-top: 32px; }
.case-side dl { margin: 0 0 18px; padding: 0; }
.case-side dt {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 800;
  margin-top: 14px;
}
.case-side dt:first-child { margin-top: 0; }
.case-side dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.case-side .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case-side .chip {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid rgba(26, 26, 26, 0.20);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
}
.case-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}
.case-side ul li::before { content: "→ "; color: var(--brick); font-weight: 700; }

@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; gap: 32px; }
  .case-side { position: static; }
}

/* More work mini-grid */
.morework {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.morework .mw {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .3s var(--ease-soft);
}
.morework .mw:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.morework .mw .thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bone-2);
}
.morework .mw .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.morework .mw:hover .thumb img { transform: scale(1.06); }
.morework .mw .meta {
  padding: 20px 24px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.morework .mw .industry {
  font-family: "Inter", sans-serif;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 720px) { .morework { grid-template-columns: 1fr; } }

/* ============================================================
   Contact — pills + 3-step form
============================================================ */

.contact-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.contact-pills a, .contact-pills span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.contact-pills a:hover {
  transform: translateY(-2px);
  border-color: var(--brick);
  box-shadow: var(--shadow-sm);
}
.contact-pills span { background: transparent; border: none; color: var(--muted); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 40px;
  max-width: 760px;
  margin: 64px auto 0;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) { .form-card { padding: 24px; border-radius: 14px; } }

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.stepper .step { display: inline-flex; align-items: center; gap: 8px; transition: color .25s var(--ease-soft); }
.stepper .num {
  width: 26px; height: 26px;
  border: 1.5px solid var(--rule-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  color: var(--ink);
  font-size: 12px;
  transition: all .3s var(--ease-soft);
}
.stepper .step.active .num { background: var(--brick); color: var(--paper); border-color: var(--brick); }
.stepper .step.active { color: var(--ink); }
.stepper .sep { flex: 1; height: 1.5px; background: var(--rule-2); transition: background .3s var(--ease-soft); }
.stepper .sep.is-on { background: var(--brick); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field label, fieldset legend {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 0;
}
.field input, .field textarea, .field select {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  background: var(--bone);
  border: 1px solid var(--rule-2);
  padding: 14px 16px;
  border-radius: 10px;
  color: var(--ink);
  outline: none;
  transition: border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft), background .25s var(--ease-soft);
}
body.has-scene .field input,
body.has-scene .field textarea,
body.has-scene .field select {
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
body.has-scene .field input:focus,
body.has-scene .field textarea:focus,
body.has-scene .field select:focus {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(26, 26, 26, 0.45);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.field textarea { resize: vertical; min-height: 130px; font-family: "Inter", sans-serif; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--rule-2);
  background: var(--bone);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all .25s var(--ease-soft);
  color: var(--ink-2);
}
body.has-scene .chip {
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}
body.has-scene .chip:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(26, 26, 26, 0.50);
  color: var(--ink);
}
body.has-scene .chip.is-on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  text-shadow: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.chip.is-on {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

.step-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.step-pane { display: none; animation: paneIn .35s var(--ease-out); }
.step-pane.is-active { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.form-success {
  text-align: center;
  padding: 56px 24px;
}
.form-success .check {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  margin: 0 auto 22px;
  box-shadow: 0 0 0 6px var(--brick-soft);
  animation: checkIn .55s var(--ease-out);
}
@keyframes checkIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.form-success h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 40px;
  margin-bottom: 12px;
  color: var(--ink);
}

/* ============================================================
   CTA strip — refined (cream with brick accent, not solid red)
============================================================ */

.cta-strip {
  border-top: 1px solid var(--rule);
  background: var(--bone-2);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--brick-soft) 0%, transparent 60%);
  transform: translateX(-50%);
  pointer-events: none;
}
.cta-strip h2 {
  margin: 16px auto 32px;
  max-width: 22ch;
  text-align: center;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.cta-strip h2 .accent { color: var(--brick); }
.cta-strip .wrap { text-align: center; position: relative; z-index: 2; }
.cta-strip .kicker { color: var(--muted); justify-content: center; }

/* ============================================================
   Footer — warm dark, not pure ink slab
============================================================ */

footer.foot {
  background: #1c1813;     /* solid fallback (overridden by glass when has-scene) */
  color: #f5ecd9;
  border-top: 1px solid var(--rule-2);
  padding: 88px 0 28px;
}
body.has-scene footer.foot {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ink-2);
  border-top: 1px solid rgba(26, 26, 26, 0.14);
  box-shadow: none;
}
body.has-scene .foot-tag,
body.has-scene .foot-grid h4,
body.has-scene .foot-grid a,
body.has-scene .foot-grid p,
body.has-scene .foot-bottom {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55), 0 0 10px rgba(255, 255, 255, 0.25);
}
body.has-scene .foot-tag { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
body.has-scene .foot-grid h4 { color: var(--brick); }
body.has-scene .foot-grid p[style] { color: var(--ink-3) !important; }
body.has-scene .foot-grid a { color: var(--ink-2); }
body.has-scene .foot-grid a:hover { color: var(--brick); }
body.has-scene .foot-grid a::after { background: var(--brick); }
body.has-scene .foot-cta {
  background: var(--brick);
  color: var(--paper);
  border-color: var(--brick);
}
body.has-scene .foot-cta:hover { background: var(--brick-d); border-color: var(--brick-d); }
body.has-scene .foot-bottom {
  border-top-color: rgba(26, 26, 26, 0.18);
  color: var(--muted);
}
body.has-scene .foot-status .dot { background: var(--brick); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
img.foot-tag {
  display: block;
  width: clamp(200px, 20vw, 280px);
  height: auto;
  margin-bottom: 18px;
  /* No filter — drop-shadow rasterizes the SVG and softens the edges.
     The SVG already has a teal extrusion built in, so it stands on its own. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.foot-tag {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  color: #f5ecd9;
}
.foot-tag .em { color: var(--brick); }
.foot-grid h4 {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(232,223,200,0.55);
  margin: 0 0 16px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2.1; }
.foot-grid a {
  color: #e8dfc8;
  position: relative;
  transition: color .25s var(--ease-soft);
}
.foot-grid a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.foot-grid a:hover { color: #fff; }
.foot-grid a:hover::after { transform: scaleX(1); }

.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 11px 20px;
  background: transparent;
  color: #f5ecd9;
  border: 1.5px solid rgba(245,236,217,0.3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all .3s var(--ease-soft);
}
.foot-cta:hover {
  background: var(--brick);
  border-color: var(--brick);
  transform: translateY(-1px);
}

.foot-bottom {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid rgba(245,236,217,0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(232,223,200,0.55);
}
.foot-status { display: inline-flex; align-items: center; gap: 8px; }
.foot-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brick);
  box-shadow: 0 0 0 3px var(--brick-soft);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Stocchi credit footer (canonical pattern) */
.stocchi-credit {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 28px 0;
}
.stocchi-credit-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.stocchi-credit a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 10px 22px 10px 18px;
  transition: all .35s var(--ease-out);
}
.stocchi-credit a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px rgba(30,110,110,0.35), 0 0 0 4px rgba(196,57,42,0.18);
}
.stocchi-credit .label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.stocchi-credit img {
  height: 30px; width: auto;
  transition: transform .35s var(--ease-out);
}
.stocchi-credit a:hover img { transform: rotate(-3deg) scale(1.05); }

/* Seamless credit bar — just text + logo, no chrome */
body.has-scene .stocchi-credit {
  background: transparent !important;
  border-top: 1px solid rgba(26, 26, 26, 0.14);
  box-shadow: none;
}
body.has-scene .stocchi-credit a {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
body.has-scene .stocchi-credit a:hover {
  background: transparent !important;
  box-shadow: none !important;
}
body.has-scene .stocchi-credit .label {
  color: var(--ink-3);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}
body.has-scene .stocchi-credit img {
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.5));
}

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================================
   Reveal-on-scroll (managed by reveal.js)
============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-stagger="1"].is-revealed { transition-delay: .08s; }
[data-reveal][data-stagger="2"].is-revealed { transition-delay: .16s; }
[data-reveal][data-stagger="3"].is-revealed { transition-delay: .24s; }
[data-reveal][data-stagger="4"].is-revealed { transition-delay: .32s; }
[data-reveal][data-stagger="5"].is-revealed { transition-delay: .40s; }
[data-reveal][data-stagger="6"].is-revealed { transition-delay: .48s; }

/* Initial hero fade-up still works */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .9s var(--ease-out) forwards;
}
.fade-up.d2 { animation-delay: .1s; }
.fade-up.d3 { animation-delay: .2s; }
.fade-up.d4 { animation-delay: .3s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   GLOBAL BODY TEXT BUMP — every paragraph + caption + label-style
   text reads at 18px, weight 600, pure ink black for clear legibility.
============================================================ */
body.has-scene .navcards .card p,
body.has-scene .svc-grid .svc p,
body.has-scene .proj .excerpt,
body.has-scene .case-body p,
body.has-scene .case-side dd,
body.has-scene .case-side ul li,
body.has-scene .faq .answer,
body.has-scene .pagehead .lede,
body.has-scene .section-head .lede,
body.has-scene .scene-tag,
body.has-scene .foot-grid p,
body.has-scene .foot-grid ul li a,
body.has-scene .stocchi-credit .label,
body.has-scene .hq-card .next,
body.has-scene .timeline .desc {
  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
}
body.has-scene .navcards .card p {
  max-width: 44ch;
}
body.has-scene .pagehead .lede,
body.has-scene .section-head .lede,
body.has-scene .scene-tag {
  font-size: 22px !important;
}

/* ============================================================
   MOBILE OPTIMIZATION
============================================================ */

/* Tablet / small desktop */
@media (max-width: 1024px) {
  body.has-scene .pagehead h1,
  body.has-scene .h-section,
  body.has-scene .h-hero {
    font-size: clamp(40px, 7vw, 80px) !important;
  }
  .scene-overlay { padding: 80px 24px 70px !important; }
  .scene-logo { width: min(560px, 70vw) !important; }
}

/* Mobile portrait */
@media (max-width: 720px) {
  /* Nav stacks: brand smaller, links wrap, IG icon stays */
  .nav-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px 16px;
  }
  .nav-inner > .nav-links {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 0 4px;
    max-width: 100%;
  }
  .nav-inner > .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .nav-links a.active {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .brand-logo { height: 32px !important; }
  .nav-ig { width: 32px !important; height: 32px !important; }
  .nav-ig svg { width: 16px !important; height: 16px !important; }

  /* Scene hero — make sure logo + tagline fit comfortably */
  .scene-hero-section { min-height: 100vh; }
  .scene-overlay { padding: 64px 16px 56px !important; }
  .scene-logo { width: 84vw !important; }
  body.has-scene .scene-tag {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding: 0 16px;
    flex-direction: column;
    gap: 4px !important;
  }
  body.has-scene .scene-tag .dot { display: none; }

  /* Big display headlines scale down on mobile */
  body.has-scene .pagehead h1,
  body.has-scene .h-section,
  body.has-scene .h-hero {
    font-size: clamp(36px, 9vw, 56px) !important;
  }
  body.has-scene .pagehead {
    padding: 80px 0 40px !important;
  }
  body.has-scene section { padding: 56px 0 !important; }

  /* Navcards / project cards / footer — stack to single column */
  .navcards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .morework { grid-template-columns: 1fr !important; }
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .case-side { position: static !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* Project zigzag — image on top, text below, no flip on mobile */
  .proj, .proj.flip {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 !important;
  }
  .proj.flip .info { order: 2; }
  .proj.flip .canvas { order: 1; }
  .proj .canvas, .case-hero { aspect-ratio: 16 / 10; }

  /* Body text — keep readable + bold on mobile */
  body.has-scene .navcards .card p,
  body.has-scene .svc-grid .svc p,
  body.has-scene .proj .excerpt,
  body.has-scene .case-body p,
  body.has-scene .case-side dd,
  body.has-scene .case-side ul li,
  body.has-scene .faq .answer,
  body.has-scene .pagehead .lede,
  body.has-scene .section-head .lede,
  body.has-scene .foot-grid p,
  body.has-scene .foot-grid ul li a {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  /* Service tile heading — scale down */
  body.has-scene .svc-grid .svc h3 {
    font-size: 28px !important;
  }
  body.has-scene .navcards .card h3 {
    font-size: 36px !important;
  }
  body.has-scene .proj h2 a,
  body.has-scene .proj h2 {
    font-size: 40px !important;
  }
  body.has-scene .lede-card,
  body.has-scene .story .lede-card {
    font-size: 26px !important;
    padding: 24px 24px !important;
  }
  body.has-scene .chapter p { font-size: 17px !important; }

  /* About grid — already single column, tighten margins */
  .about-grid { padding: 0 8px; }

  /* Footer logo image */
  img.foot-tag {
    width: clamp(180px, 50vw, 240px) !important;
  }

  /* Section head — stack title and CTA vertically */
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Contact form */
  .form-card { padding: 24px !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .stepper { font-size: 10px !important; gap: 8px !important; }

  /* CTA strip — smaller */
  body.has-scene .cta-strip { padding: 56px 0 !important; }
  body.has-scene .cta-strip h2 {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  /* Page head wrap — full width on mobile */
  body.has-scene .pagehead .wrap {
    padding: 0 16px !important;
  }

  /* FAQ — bigger tap targets */
  body.has-scene .faq summary {
    font-size: 18px !important;
    padding: 8px 0 !important;
  }

  /* Tap targets — minimum 44px height for buttons/links */
  .btn, .foot-cta, .case-link, .nav-cta {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* Very small mobile (iPhone SE, etc) */
@media (max-width: 380px) {
  .nav-links a { font-size: 11px !important; padding: 6px 6px !important; }
  .scene-logo { width: 90vw !important; }
  body.has-scene .pagehead h1,
  body.has-scene .h-section {
    font-size: 32px !important;
  }
}

/* ============================================================
   FINAL OVERRIDES — black text, hide eyebrows, brick on all
   interactive hovers. Kept at the bottom so they win specificity.
============================================================ */

/* Remap secondary-text variables to pure ink — every paragraph,
   list item, label, etc that read 'gray' is now black. */
body.has-scene {
  --ink-2: var(--ink);
  --ink-3: var(--ink);
  --muted: var(--ink);
  color: var(--ink);
}

/* Hide every eyebrow / kicker on the site for a cleaner read */
body.has-scene .kicker,
body.has-scene .eyebrow,
body.has-scene .trust-label {
  display: none !important;
}

/* Default link color is ink. We do NOT apply a universal hover-color rule
   on `a *` — descendants of card-wrapper anchors should keep their own
   color (small text in nav cards stays dark on hover for legibility). */
body.has-scene a {
  color: var(--ink);
  transition: color .18s var(--ease-soft), -webkit-text-stroke .18s var(--ease-soft);
}

/* Section headings + subtitles always pure ink */
body.has-scene .pagehead h1,
body.has-scene .pagehead .lede,
body.has-scene .h-section,
body.has-scene .h-card,
body.has-scene .navcards .card h3,
body.has-scene .navcards .card p,
body.has-scene .navcards .card .num,
body.has-scene .navcards .card .cta,
body.has-scene .svc-grid .svc h3,
body.has-scene .svc-grid .svc p,
body.has-scene .svc-grid .svc .num,
body.has-scene .story .lede-card,
body.has-scene .chapter p,
body.has-scene .chapter .num,
body.has-scene .hq-card h2,
body.has-scene .hq-card .sub,
body.has-scene .hq-card h4,
body.has-scene .hq-card .next,
body.has-scene .hq-card .stat,
body.has-scene .case-body p,
body.has-scene .case-body h2,
body.has-scene .case-side h4,
body.has-scene .case-side dt,
body.has-scene .case-side dd,
body.has-scene .case-side ul li,
body.has-scene .case-side .chip,
body.has-scene .morework .mw .meta,
body.has-scene .morework .mw .industry,
body.has-scene .proj h2,
body.has-scene .proj h2 a,
body.has-scene .proj .num-tag,
body.has-scene .proj .excerpt,
body.has-scene .faq summary,
body.has-scene .faq .answer,
body.has-scene .scene-tag,
body.has-scene .scene-scroll-hint,
body.has-scene .scene-scroll-hint span,
body.has-scene .trust-row a,
body.has-scene .contact-pills a,
body.has-scene .contact-pills span,
body.has-scene .form-card h3,
body.has-scene .form-card .stepper,
body.has-scene .form-card .stepper .step,
body.has-scene .field label,
body.has-scene fieldset legend,
body.has-scene .foot-grid h4,
body.has-scene .foot-grid a,
body.has-scene .foot-grid p,
body.has-scene .foot-grid li,
body.has-scene .foot-bottom,
body.has-scene .foot-bottom span,
body.has-scene .stocchi-credit .label,
body.has-scene .timeline .desc,
body.has-scene .case-body p strong,
body.has-scene .chapter p strong {
  color: var(--ink) !important;
}

/* Hover states — instead of brick, use the logo font style:
   white fill with black outline, no shadow. */
body.has-scene .navcards .card:hover h3,
body.has-scene .svc-grid .svc:hover h3,
body.has-scene .morework .mw:hover .meta,
body.has-scene .faq summary:hover,
body.has-scene .proj h2 a:hover,
body.has-scene .case-link:hover,
body.has-scene .trust-row a:hover,
body.has-scene .contact-pills a:hover {
  color: #ffffff !important;
  -webkit-text-stroke: 2px #1a1a1a;
  text-shadow: none !important;
}
body.has-scene .navcards .card:hover p,
body.has-scene .navcards .card:hover .cta,
body.has-scene .navcards .card:hover .num,
body.has-scene .svc-grid .svc:hover .num,
body.has-scene .svc-grid .svc:hover p,
body.has-scene .morework .mw:hover .industry {
  color: #ffffff !important;
  -webkit-text-stroke: 1px #1a1a1a;
  text-shadow: none !important;
}

/* Foot-cta button — brick by default, deeper brick on hover */
/* CTA buttons — Stocchi logo style as DEFAULT (always visible).
   Hover = subtle lift + deeper extrusion. */
/* CTA buttons — plain ink-black uppercase text. No Stocchi 3D, no chunky
   button chrome. Subtle hover: slight lift + brick color shift. */
body.has-scene .foot-grid a.foot-cta,
body.has-scene .cta-strip a.btn-primary,
body.has-scene .cta-strip a.btn-brick,
body.has-scene .actions a.btn-primary,
body.has-scene .actions a.btn-ghost,
body.has-scene a.foot-cta,
body.has-scene a.btn-primary,
body.has-scene a.btn-brick,
body.has-scene a.btn-ghost,
body.has-scene a.btn-outline,
body.has-scene a.btn,
body.has-scene button.btn,
body.has-scene button.btn-primary,
body.has-scene button.btn-brick,
body.has-scene .form-card button.btn,
body.has-scene .step-actions button.btn-primary,
body.has-scene .step-actions button.btn-ghost,
body.has-scene .step-actions button.btn-brick,
body.has-scene .hq-card a.btn-primary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
  transform: none !important;
  transition: transform 160ms ease, color 160ms ease !important;
}
body.has-scene .foot-grid a.foot-cta:hover,
body.has-scene .cta-strip a.btn-primary:hover,
body.has-scene .cta-strip a.btn-brick:hover,
body.has-scene .actions a.btn-primary:hover,
body.has-scene .actions a.btn-ghost:hover,
body.has-scene a.foot-cta:hover,
body.has-scene a.btn-primary:hover,
body.has-scene a.btn-brick:hover,
body.has-scene a.btn-ghost:hover,
body.has-scene a.btn-outline:hover,
body.has-scene a.btn:hover,
body.has-scene button.btn:hover,
body.has-scene button.btn-primary:hover,
body.has-scene button.btn-brick:hover,
body.has-scene .form-card button.btn:hover,
body.has-scene .step-actions button.btn-primary:hover,
body.has-scene .step-actions button.btn-ghost:hover,
body.has-scene .step-actions button.btn-brick:hover,
body.has-scene .hq-card a.btn-primary:hover {
  transform: translateY(-2px) !important;
  color: var(--ink) !important;
}
body.has-scene .btn:hover .arrow,
body.has-scene .foot-cta:hover .arrow { transform: translateX(4px); }

/* Accent words in big headlines now use the Stocchi logo style:
   white fill + black outline, no extruded shadow. */
body.has-scene .h-section .em,
body.has-scene .pagehead h1 .accent,
body.has-scene .cta-strip h2 .accent {
  color: #ffffff !important;
  -webkit-text-stroke: 2px #1a1a1a;
  text-shadow: none !important;
  font-style: normal;
}

/* Drop secondary borders on chapter / faq dividers from --rule (which
   we just overrode) back to a fixed black with low alpha. */
body.has-scene .chapter,
body.has-scene .faq details {
  border-color: rgba(26, 26, 26, 0.18) !important;
}

/* Strip the radial brick glow halo on cta-strip — it was a card affordance */
body.has-scene .cta-strip::before { display: none !important; }
body.has-scene .cta-strip { padding: 80px 0 !important; }

/* ============================================================
   Final adjustments — kill ALL dividing lines, center copyright,
   stronger body weight, navcard logo-style hover, image-link overlay.
============================================================ */

/* No more section/footer/credit/project/chapter dividers anywhere */
body.has-scene section,
body.has-scene .scene-hero-section,
body.has-scene .pagehead,
body.has-scene .cta-strip,
body.has-scene footer.foot,
body.has-scene .stocchi-credit,
body.has-scene .stocchi-credit a,
body.has-scene .nav,
body.has-scene .nav.nav-on-scene,
body.has-scene .nav.nav-on-scene.scrolled,
body.has-scene .faq,
body.has-scene .faq details,
body.has-scene .chapter,
body.has-scene .proj,
body.has-scene .case-body h2,
body.has-scene .case-grid,
body.has-scene .morework .mw .thumb,
body.has-scene .foot-bottom,
body.has-scene .foot-grid {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* Kill the brick bar to the left of case-body h2 (decorative) */
body.has-scene .case-body h2::before { display: none !important; }
/* Subtle spacing on chapters / faq items so they still breathe without lines */
body.has-scene .chapter { padding: 18px 0 !important; }
body.has-scene .faq details { padding: 22px 0 !important; }
body.has-scene .proj { padding: 60px 0 !important; }

/* Center the footer copyright */
body.has-scene .foot-bottom {
  justify-content: center !important;
  text-align: center;
}
body.has-scene .foot-bottom > span { display: inline-block; }

/* Body text — weight 700 for stronger visibility */
body.has-scene .pagehead .lede,
body.has-scene .section-head .lede,
body.has-scene .navcards .card p,
body.has-scene .navcards .card .num,
body.has-scene .navcards .card .cta,
body.has-scene .svc-grid .svc p,
body.has-scene .svc-grid .svc .num,
body.has-scene .chapter p,
body.has-scene .chapter .num,
body.has-scene .hq-card .sub,
body.has-scene .hq-card .next,
body.has-scene .case-body p,
body.has-scene .case-side dt,
body.has-scene .case-side dd,
body.has-scene .case-side ul li,
body.has-scene .case-side .chip,
body.has-scene .morework .mw .meta,
body.has-scene .morework .mw .industry,
body.has-scene .proj .num-tag,
body.has-scene .proj .excerpt,
body.has-scene .faq summary,
body.has-scene .faq .answer,
body.has-scene .scene-tag,
body.has-scene .scene-scroll-hint,
body.has-scene .scene-scroll-hint span,
body.has-scene .form-card .stepper,
body.has-scene .field label,
body.has-scene fieldset legend,
body.has-scene .foot-grid h4,
body.has-scene .foot-grid a,
body.has-scene .foot-grid p,
body.has-scene .foot-grid li,
body.has-scene .foot-bottom,
body.has-scene .stocchi-credit .label,
body.has-scene .case-link {
  font-weight: 700 !important;
}

/* ============================================================
   Stocchi logo style — white fill + 2px black outline + teal 3D
   extruded shadow. Used for static accent words and big-text
   hovers. Smaller text stays dark black for legibility.
============================================================ */

body.has-scene .stocchi-style,
body.has-scene .h-section .em,
body.has-scene .pagehead h1 .accent,
body.has-scene .cta-strip h2 .accent {
  /* Match the Stocchi wordmark exactly: Helvetica Neue 900 italic */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  -webkit-text-stroke: 2px #1a1a1a;
  text-shadow:
    1px 1px 0 var(--teal),
    2px 2px 0 var(--teal),
    3px 3px 0 var(--teal),
    4px 4px 0 var(--teal),
    5px 5px 0 var(--teal),
    6px 6px 0 var(--teal) !important;
}

/* Hide every number-label across the site */
body.has-scene .navcards .card .num,
body.has-scene .svc-grid .svc .num,
body.has-scene .proj .num-tag,
body.has-scene .proj .canvas .num,
body.has-scene .proj .canvas .badge,
body.has-scene .chapter .num {
  display: none !important;
}

/* Stocchi logo style is ONLY for: navcard headings, project titles on /work,
   morework "meta" (clickable case study previews), and the footer wordmark.
   Service tiles, FAQ, case-link, contact-pills, etc are plain ink black. */
body.has-scene .navcards .card h3,
body.has-scene .morework .mw .meta,
body.has-scene .proj h2 a,
body.has-scene .svc-grid .svc h3,
body.has-scene .story .lede-card strong,
body.has-scene .foot-grid p.foot-tag,
body.has-scene footer.foot p.foot-tag {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  -webkit-text-stroke: 2px #1a1a1a !important;
  text-shadow:
    1px 1px 0 var(--teal),
    2px 2px 0 var(--teal),
    3px 3px 0 var(--teal),
    4px 4px 0 var(--teal),
    5px 5px 0 var(--teal),
    6px 6px 0 var(--teal) !important;
  transform: translateY(0);
  transition:
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover — text lifts + extrusion deepens (only on actually-clickable items) */
body.has-scene .navcards .card:hover h3,
body.has-scene .morework .mw:hover .meta,
body.has-scene .proj h2 a:hover {
  transform: translateY(-3px);
  text-shadow:
    1px 1px 0 var(--teal),
    2px 2px 0 var(--teal),
    3px 3px 0 var(--teal),
    4px 4px 0 var(--teal),
    5px 5px 0 var(--teal),
    6px 6px 0 var(--teal),
    7px 7px 0 var(--teal),
    8px 8px 0 var(--teal),
    9px 9px 0 var(--teal) !important;
}

/* Service tiles — NOT interactive (just info blocks). Default cursor + no
   hover transform, but the h3 keeps the Stocchi 3D logo treatment. */
body.has-scene .svc-grid .svc {
  cursor: default !important;
}
body.has-scene .svc-grid .svc:hover h3 {
  transform: none !important;
}

/* FAQ summaries — plain ink Anton with a clear interactive hover cue:
   slide right slightly + + icon turns brick + subtle teal glow underneath. */
body.has-scene .faq summary {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55) !important;
  transform: translateX(0);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease,
    text-shadow 180ms ease;
}
body.has-scene .faq summary:hover {
  color: var(--ink) !important;
  transform: translateX(8px) !important;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.55),
    2px 2px 0 rgba(30, 110, 110, 0.30) !important;
}
/* + icon goes brick on hover for clear color cue */
body.has-scene .faq summary:hover::after {
  color: var(--brick) !important;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat !important;
  transform: scale(1.15) !important;
}
body.has-scene .faq details[open] summary:hover {
  transform: translateX(8px) !important;
}
body.has-scene .faq details[open] summary:hover::after {
  transform: scale(1.15) rotate(45deg) !important;
}

/* Case-link "Read case study →" — plain ink text, no Stocchi 3D */
body.has-scene .case-link,
body.has-scene .case-link:hover {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55) !important;
  transform: none !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}
/* Keep the underline animation under the case-link, but ink black */
body.has-scene .case-link::after { background: var(--ink) !important; }

/* Contact-pills (email + phone) — plain ink text, NO Stocchi 3D, NO red line */
body.has-scene .contact-pills a,
body.has-scene .contact-pills a:hover,
body.has-scene .contact-pills span {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55) !important;
  transform: none !important;
  text-transform: none !important;
  font-size: 14px !important;
}
body.has-scene .contact-pills a::after { display: none !important; }

/* Footer link list ("PAGES" column etc) — keep underline animation but BLACK */
body.has-scene .foot-grid a::after { background: var(--ink) !important; }

/* Smaller text inside cards stays dark black on hover (legibility).
   It fades very slightly toward brick to signal interactivity, but
   no white-outline that would wash it out against the scene. */
body.has-scene .navcards .card:hover p,
body.has-scene .navcards .card:hover .cta,
body.has-scene .svc-grid .svc:hover p,
body.has-scene .morework .mw:hover .industry {
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
}

/* Project images on /work + case-hero — interactive image link overlay */
.proj .canvas {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.proj .canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out), filter .3s var(--ease-soft);
}
.proj .canvas:hover img {
  transform: scale(1.04);
  filter: brightness(0.78);
}
.canvas-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity .3s var(--ease-soft);
  pointer-events: none;
  z-index: 2;
}
.proj .canvas:hover .canvas-hover,
.case-hero:hover .canvas-hover { opacity: 1; }

/* Same treatment for case-hero (now an anchor) */
a.case-hero {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
}
a.case-hero img {
  transition: transform .6s var(--ease-out), filter .3s var(--ease-soft);
}
a.case-hero:hover img {
  transform: scale(1.025);
  filter: brightness(0.78);
}

/* Case-link replacement for the old btn-ghost */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.case-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.case-link:hover::after { transform: scaleX(1); }