/* =========================================================
   Willow Construction — Cinematic Hero + Deep Header
   - Wordmark: Willow styled same as Construction; red circle removed
   ========================================================= */

/* Optional local font mapping for Neue Haas Grotesk Display */
@font-face{
  font-family: "Neue Haas Grotesk Display";
  src: local("Neue Haas Grotesk Display"),
       local("Neue Haas Grotesk Display Pro"),
       local("NHaasGroteskTXPro-75Bd"),
       local("NHaasGroteskTX Pro Display");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base / tokens ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: #0b0f10;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root{
  --accent: #E11928;
  --ink-dim: rgba(255,255,255,.72);
  --ink-faint: rgba(255,255,255,.42);
  --display-font: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --header-h: clamp(60px, 7.8vw, 76px);
  --header-h-scrolled: clamp(54px, 6.8vw, 68px);
}

/* ---------- Deep Header ---------- */
.site-header{ position: fixed; inset-inline: 0; top: 0; z-index: 60; }
.header__inner{
  position: relative; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; width: min(100% - 2rem, 1240px); margin: 0 auto;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(7,10,12,.78), rgba(7,10,12,.42) 60%, rgba(7,10,12,0)),
    radial-gradient(120% 120% at 50% -40%, rgba(255,255,255,.08), transparent 60%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 12px 36px rgba(225,25,40,.12);
  transition: opacity .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
  opacity: .98;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height: 44px; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0) 30%),
    radial-gradient(80% 70% at 50% 0%, rgba(225,25,40,.26), rgba(225,25,40,0) 65%);
  filter: blur(14px); opacity: .75;
}
.site-header.is-scrolled .header__inner{ height: var(--header-h-scrolled); }
.site-header.is-scrolled::before{
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  opacity: 1;
}

/* ---------- Brand ---------- */
.brand{
  display: inline-flex; align-items: center; gap: .7rem;
  color: #fff; text-decoration: none;
}
.brand__logo{
  height: clamp(30px, 3.8vw, 40px);
  width: auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Wordmark container uses the display font for cohesion with hero */
.brand__wordmark{
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--display-font);
  line-height: 1;
}

/* IDENTICAL styling for both words */
.brand__word--mono{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .26em;        /* same wide tracking as previous "Construction" */
  color: var(--ink-dim);
  font-size: clamp(.88rem, 1.1vw, 1.02rem);
  opacity: .95;
}

/* Hover polish */
.brand:hover .brand__word--mono{
  color: #fff; opacity: 1;
}

/* ---------- Top navigation ---------- */
.topnav{ display: flex; gap: 1.6rem; align-items: center; }
.topnav a{
  color: var(--ink-faint); text-decoration: none; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
  position: relative; padding-bottom: 6px; transition: color .2s ease;
}
.topnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.topnav a:hover{ color:#fff }
.topnav a:hover::after{ transform: scaleX(1); }
@media (max-width: 1020px){ .topnav{ display:none; } }

/* ---------- Right controls ---------- */
.header__right{ display:flex; align-items:center; gap:.8rem }
.hamburger{
  width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); cursor: pointer; display: grid; place-items:center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease;
}
.hamburger:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.hamburger__bar,
.hamburger__bar::before,
.hamburger__bar::after{
  content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative;
}
.hamburger__bar::before{ position:absolute; top:-6px; }
.hamburger__bar::after{ position:absolute; top:6px; }

/* ---------- Left index ---------- */
.index-nav{
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  z-index: 35; color: var(--ink-dim); letter-spacing: .12em;
}
.index-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem }
.index-nav li{ display:grid; grid-template-columns: auto 1fr; gap:.5rem; align-items:center }
.index-nav .idx{ font-size:.7rem; opacity:.7 }
.index-nav .label{ font-size:.8rem; text-transform:uppercase; opacity:.75 }
@media (max-width: 880px){ .index-nav{ display:none } }

/* ---------- Socials ---------- */
.socials{
  position: fixed; right: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start;
}
.socials a{
  color: var(--ink-faint); text-decoration: none; font-weight: 600;
  letter-spacing: .1em; writing-mode: horizontal-tb;
}
.socials a:hover{ color:#fff }
@media (max-width: 880px){ .socials{ display:none } }

/* ---------- HERO ---------- */
.hero--cinematic{ position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; }
@supports (min-height: 100dvh){ .hero--cinematic{ min-height: 100dvh; } }

.hero__image{
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-image, url('assets/construction-hero.jpg'));
  background-size: cover; background-position: center;
  filter: saturate(104%) contrast(102%) brightness(0.92);
  transform: translateZ(0);
}
.hero__scrim{
  position:absolute; inset:0; z-index: 1;
  background-image:
    radial-gradient(120vh 80vh at 50% 40%, rgba(0,0,0,.45), transparent 65%),
    linear-gradient(120deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.06) 72%, rgba(0,0,0,0) 90%);
}
/* Bottom red glow in hero */
.hero__glow{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(90vh 48vh at 50% 100%, rgba(225,25,40,.38), rgba(225,25,40,.18) 40%, rgba(225,25,40,0) 72%),
    radial-gradient(120vh 56vh at 50% 100%, rgba(225,25,40,.16), rgba(225,25,40,0) 65%),
    linear-gradient(to top, rgba(225,25,40,.10), rgba(225,25,40,0) 40%);
  mix-blend-mode: screen;
}
.hero__texture{
  position:absolute; inset:-10% -10% -10% -10%; z-index: 3; pointer-events:none;
  background:
    radial-gradient(320px 220px at 20% 30%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(260px 180px at 70% 20%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(300px 230px at 60% 70%, rgba(255,255,255,.04), transparent 70%);
  mix-blend-mode: soft-light; filter: blur(2px);
}

/* Headline block: centered vertically, shifted LEFT by 1.5 inches */
.hero__content{
  position: absolute; z-index: 5; top: 50%; left: calc(50% - 0in);
  transform: translate(-50%, -50%);
  width: min(100% - 2rem, 1100px); text-align: center;
}
/* Headline — display font */
.hero__title{
  margin: 0 0 .9rem 0; font-family: var(--display-font); font-weight: 800;
  text-transform: uppercase; letter-spacing: clamp(.22em, .8vw, .38em);
  font-size: clamp(2.8rem, 9vw, 6.6rem); line-height: 1.06;
}
.hero__title span{ display:block }

/* CTA */
.hero__cta{
  --rule-w: 44px;
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: .7rem;
  margin-top: .2rem; color: rgba(255,255,255,.92); text-decoration: none;
  font-weight: 700; letter-spacing: .1em; font-size: .82rem; text-transform: none;
}
.hero__cta .rule{ width: var(--rule-w); height: 2px; background: var(--accent); border-radius: 2px; transition: width .25s ease; }
.hero__cta .label{ position: relative; padding-bottom: 4px; }
.hero__cta .label::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255,255,255,.45); transition: background .25s ease, transform .25s ease;
}
.hero__cta svg{ width: 20px; height: 20px; opacity: .85; transition: transform .25s ease; }
.hero__cta:hover .rule{ width: calc(var(--rule-w) + 16px); }
.hero__cta:hover .label::after{ background: var(--accent); transform: translateY(-1px); }
.hero__cta:hover svg{ transform: translateX(3px); }

/* Bottom ruler ticks */
.hero__ruler{
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 4;
  background:
    linear-gradient(to top, rgba(255,255,255,.08), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 40px);
  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.1));
  opacity: .35;
}
/* ========== MANIFESTO ========== */
.manifesto{
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
  background: #0b0f10;
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 1;
}
/* gentle red ambience at the top edge of the section */
.manifesto::before{
  content:"";
  position:absolute; inset: -40px 0 auto 0; height: 80px; z-index: -1; pointer-events:none;
  background: radial-gradient(80% 100% at 50% 100%, rgba(225,25,40,.16), rgba(225,25,40,0) 70%);
  filter: blur(18px); opacity: .8;
}

.mf__wrap{ width: min(100% - 2rem, 1240px); margin: 0 auto; }

/* Lede */
.mf__lede{ max-width: 940px; margin-bottom: clamp(40px, 6vw, 72px); }
.eyebrow{
  margin: 0 0 .75rem 0;
  font: 700 .78rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint);
}
.mf__title{
  margin: 0 0 .9rem 0;
  font-family: var(--display-font);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: clamp(.20em, .7vw, .34em);
  font-size: clamp(2.2rem, 7.5vw, 4.8rem);
  line-height: 1.05;
}
.mf__title span{ display:block }
.mf__intro{
  margin: 0; color: var(--ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7; max-width: 72ch;
}

/* Principles grid */
.mf__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px){ .mf__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .mf__grid{ grid-template-columns: 1fr; } }

.mf__card{
  position: relative;
  padding: 20px 18px 18px 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 12px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.mf__card::before{
  content:""; position:absolute; inset: -30% -30% auto -30%; height: 2px; top: 0;
  background: linear-gradient(90deg, rgba(225,25,40,.0), rgba(225,25,40,.45), rgba(225,25,40,.0));
  opacity: .75; filter: blur(0.3px);
}
.mf__card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.mf__num{
  display:inline-block;
  font: 700 .75rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .55rem;
}
.mf__h3{
  margin: 0 0 .35rem 0;
  font-family: var(--display-font); font-weight: 800; text-transform: uppercase;
  letter-spacing: .16em; font-size: 1.05rem;
}
.mf__card p{ margin: 0; color: var(--ink-dim); line-height: 1.6; font-size: .98rem; }

/* Metrics strip */
.mf__metrics{
  margin-top: clamp(36px, 6vw, 72px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
@media (max-width: 880px){ .mf__metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric{
  padding: 18px 12px;
  display: grid; gap: 4px; justify-items: center;
  border-right: 1px solid rgba(255,255,255,.06);
}
.metric:last-child{ border-right: none; }
.val{
  font-family: var(--display-font);
  font-weight: 900; letter-spacing: .08em;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.plus{ font-weight: 800; }
.unit{ font-weight: 800; }
.label{
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .18em;
  font: 700 .72rem/1.2 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity: 1; transform: none; }
.reveal{ transition-delay: var(--d, 0ms); }
/* Fade the left index away when the hero is off-screen */
.index-nav{
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* Hidden state applied by JS */
.index-nav.is-out{
  opacity: 0;
  transform: translate(-8px, -50%); /* keep the -50% Y centering, nudge left slightly */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .index-nav{ transition: none; }
}
/* Early fade (same visuals as .is-out) */
.index-nav.is-out-early{
  opacity: 0;
  transform: translate(-8px, -50%);
  pointer-events: none;
}
/* Force an earlier hide state ~200px before hero ends */
.index-nav.is-earlyhide {
  opacity: 0;
  transform: translate(-8px, -50%); /* keep vertical centering, nudge left */
  pointer-events: none;
}
/* =========================================
   PROJECTS — Vertical Alternating Rail
   ========================================= */
#projects.projects-rail{
  position: relative;
  background: #0b0f10;
  padding-block: clamp(64px, 8vw, 120px);
  overflow: hidden;
}

/* soft ambient red glow behind the rail */
#projects.projects-rail::before{
  content:"";
  position:absolute; inset: -40px 0 auto 0; height: 120px; pointer-events:none;
  background: radial-gradient(80% 100% at 50% 100%, rgba(225,25,40,.18), rgba(225,25,40,0) 70%);
  filter: blur(18px); opacity: .8;
}

.projwrap{ width: min(100% - 2rem, 1240px); margin: 0 auto; position: relative; }
.projhead{ display: grid; gap: .6rem; margin-bottom: clamp(22px, 3vw, 34px); }
.projtitle{
  margin: 0;
  font-family: var(--display-font);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: clamp(.18em, .7vw, .32em);
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  line-height: 1.06;
}

/* The vertical rail */
.projlist{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 40px); }
.projlist::before{
  content:""; position:absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow: 0 0 0 1px rgba(225,25,40,.08);
  transform: translateX(-1px);
}

/* Each row (alternates left/right via nth-child) */
.projitem{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  padding-block: clamp(8px, 1.6vw, 12px);
}

/* Center dot */
.projitem::before{
  content:""; position:absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 4px rgba(225,25,40,.18), 0 8px 22px rgba(225,25,40,.36);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Media / text placement */
.projmedia{ grid-column: 1 / span 6; }
.projmeta { grid-column: 7 / -1; }

.projitem:nth-child(even) .projmedia{ grid-column: 7 / -1; }
.projitem:nth-child(even) .projmeta { grid-column: 1 / span 6; }

/* Image card */
.projmedia{
  border-radius: 16px; overflow: hidden;
  background: #0e1214;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.projmedia img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(104%) contrast(102%) brightness(.96);
  transform: scale(1.02);
  transition: transform .6s ease, filter .6s ease;
}
.projmedia:hover img{ transform: scale(1.05); filter: brightness(1.03) saturate(106%); }

/* Text block */
.projmeta{
  display: grid; gap: .5rem;
  padding: clamp(12px, 1.6vw, 16px);
  background: linear-gradient(180deg, rgba(8,10,12,.55), rgba(8,10,12,.28));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}

.projtag{
  display: inline-block;
  font: 800 .68rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: rgba(225,25,40,.9);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  width: max-content;
}
.projname{
  margin: 0;
  font-family: var(--display-font);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(1.02rem, 1.4vw, 1.24rem);
}
.projdesc{
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
  line-height: 1.6;
}

/* Reveal on scroll (paired with tiny JS below) */
.reveal-l, .reveal-r{
  opacity: 0;
  transform: translateX(var(--x, 0));
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0ms);
}
.reveal-l{ --x: -18px; }
.reveal-r{ --x:  18px; }
.is-in{ opacity: 1; transform: none; }

/* Responsive: stack on one column; keep polish */
@media (max-width: 860px){
  .projlist::before{ left: 14px; }
  .projitem{ grid-template-columns: 1fr; gap: 12px; padding-left: 28px; }
  .projitem::before{ left: 14px; top: 26px; transform: translate(-50%, -50%); }
  .projmedia, .projmeta{ grid-column: 1 / -1; }
  /* keep image first */
  .projitem:nth-child(even) .projmedia,
  .projitem:nth-child(even) .projmeta{ grid-column: 1 / -1; }
  .reveal-l, .reveal-r{ --x: 0; } /* no slide on tiny screens */
}
@media (prefers-reduced-motion: reduce){
  .reveal-l, .reveal-r{ transition: none; transform: none; opacity: 1; }
  .projmedia img{ transition: none; transform: none; }
}
/* --- FIX: keep even-row text aligned with its image --- */
#projects.projects-rail .projitem {
  /* allow backfilling so items can occupy earlier columns */
  grid-auto-flow: dense;
}

/* lock both halves into the same grid row */
#projects.projects-rail .projmedia,
#projects.projects-rail .projmeta {
  grid-row: 1;
}

/* neutralize any old “filmstrip” absolute caption rules leaking in */
#projects.projects-rail .projmeta {
  position: static;
  inset: auto;
}

/* make the media a consistent panel; image covers it cleanly */
#projects.projects-rail .projmedia {
  aspect-ratio: 16 / 10;
  height: auto;
}
#projects.projects-rail .projmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* when stacking on small screens, let them flow one after another */
@media (max-width: 860px){
  #projects.projects-rail .projmedia,
  #projects.projects-rail .projmeta { grid-row: auto; }
}
/* =======================================================
   PROJECTS — Depth Pack (ambient, grid, connectors, polish)
   Scope: #projects.projects-rail only
   ======================================================= */
#projects.projects-rail{
  /* easy dials */
  --beam-alpha: .16;
  --grid-alpha: .055;
  --halo-alpha: .24;
  --parallax: 0; /* set by JS (optional) */
  background:
    radial-gradient(140% 120% at 50% -10%, #101418 0%, #0b0f10 52%),
    linear-gradient(#0b0f10, #0b0f10);
}

/* extra bottom ambience to bookend the existing top glow */


/* subtle blueprint grid on the section surface */
#projects.projects-rail .projwrap{ position: relative; }
#projects.projects-rail .projwrap::before{
  content:""; position:absolute; inset:-2rem; z-index: 0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,var(--grid-alpha)) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,var(--grid-alpha)) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(120% 90% at 50% 44%, rgba(0,0,0,.95) 0, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
  mix-blend-mode: soft-light; opacity: .35; filter: blur(.2px);
}

/* diagonal light beams with a tiny scroll drift */
#projects.projects-rail .projwrap::after{
  content:""; position:absolute; inset:-10% -20%; z-index: 0; pointer-events:none;
  background:
    linear-gradient(65deg,  rgba(225,25,40,var(--beam-alpha)), transparent 40%),
    linear-gradient(-65deg, rgba(255,255,255,.05),               transparent 36%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transform: translateY(calc(var(--parallax) * -26px));
}

/* rail halo to lift the center line off the page */
#projects.projects-rail .projlist{ position: relative; z-index: 1; }
#projects.projects-rail .projlist::after{
  content:""; position:absolute; left:50%; top:-40px; bottom:-40px; width: 160px; pointer-events:none;
  transform: translateX(-50%);
  background:
    radial-gradient(80px 80px at 50% 10%, rgba(225,25,40,var(--halo-alpha)), rgba(225,25,40,0) 70%),
    radial-gradient(120px 120px at 50% 55%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);
  filter: blur(20px);
}

/* connector lines from the dot toward the text panel (left/right) */
#projects.projects-rail .projitem{ z-index: 1; }
#projects.projects-rail .projitem::after{
  content:""; position:absolute; top:50%; left:50%; transform: translateY(-50%);
  width: clamp(52px, 8vw, 110px); height: 2px; pointer-events:none;
  background: linear-gradient(to right, rgba(225,25,40,.32), rgba(255,255,255,.18) 60%, transparent);
  opacity: .8;
}
#projects.projects-rail .projitem:nth-child(even)::after{
  left: auto; right: 50%;
  background: linear-gradient(to left, rgba(225,25,40,.32), rgba(255,255,255,.18) 60%, transparent);
}

/* richer image card lighting */
#projects.projects-rail .projmedia{
  position: relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 18px 60px rgba(225,25,40,.06);
}
#projects.projects-rail .projmedia::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0) 18%),
    radial-gradient(100% 40% at 50% 0%, rgba(225,25,40,.12), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.20), transparent 50%);
  mix-blend-mode: screen; opacity: .9;
}

/* glass meta card: stronger glass + inner lift */
#projects.projects-rail .projmeta{
  background: linear-gradient(180deg, rgba(10,12,14,.65), rgba(10,12,14,.30));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
#projects.projects-rail .projmeta::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(80% 80%   at 100% 100%, rgba(225,25,40,.10), transparent 66%);
  mix-blend-mode: overlay; opacity: .6;
}

/* beef up the dot glow on hover for a bit of life */
#projects.projects-rail .projitem:hover::before{
  box-shadow: 0 0 0 4px rgba(225,25,40,.22), 0 10px 26px rgba(225,25,40,.38);
}

/* keep the extra decoration off on small screens for clarity */
@media (max-width: 860px){
  #projects.projects-rail .projwrap::before,
  #projects.projects-rail .projwrap::after,
  #projects.projects-rail .projlist::after,
  #projects.projects-rail .projitem::after{
    display: none;
  }
}
/* =======================================================
   PROJECTS — Depth Pack PLUS
   Perspective floor, occlusion shadows, 3D tilt + parallax
   Scope: #projects.projects-rail
   ======================================================= */

#projects.projects-rail{
  /* Quick dials */
  --floor-alpha: .07;           /* brightness of the floor grid lines */
  --fog-alpha: .22;             /* atmospheric fade through the list */
  --contact: rgba(0,0,0,.54);   /* strength of contact shadows */
  --lift-amount: 1.5px;         /* baseline micro‑lift for media panels */
}

/* Perspective floor grid + stronger bottom ambience */


/* Subtle atmospheric fade so items feel farther away down the stack */
#projects.projects-rail .projlist{
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1),
    rgba(0,0,0,.98) 8%,
    rgba(0,0,0,.86) 55%,
    rgba(0,0,0,.60) 78%,
    rgba(0,0,0,0) 100%
  );
}

/* Contact shadows beneath media + glass card (occlusion for depth) */
#projects.projects-rail .projmedia,
#projects.projects-rail .projmeta{
  position: relative; isolation: isolate; z-index: 0;
}
#projects.projects-rail .projmedia::after,
#projects.projects-rail .projmeta::after{
  content:""; position:absolute; left: 6%; right: 6%; bottom: -14px; height: 26px;
  background: radial-gradient(60% 80% at 50% 50%, var(--contact), transparent 70%);
  filter: blur(12px);
  opacity: .55; z-index: -1; border-radius: 50%;
}
#projects.projects-rail .projmeta::after{ bottom: -10px; height: 20px; opacity: .38; }

/* Richer specular edge on the media frame (keeps existing highlight, adds rim) */
#projects.projects-rail .projmedia::before{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    radial-gradient(100% 40% at 50% 0%, rgba(225,25,40,.12), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.25), transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 20%, transparent 80%, rgba(255,255,255,.10));
  opacity: .95;
}

/* Micro 3D tilt + lift (odd leans left, even leans right) */
#projects.projects-rail .projmedia{
  transform-style: preserve-3d;
  will-change: transform;
  --rotY: 0deg;                 /* JS adjusts on pointer; fallback below */
  --lift: var(--lift-amount);
}
#projects.projects-rail .projitem:nth-child(odd)  .projmedia:hover { --rotY: -7deg; }
#projects.projects-rail .projitem:nth-child(even) .projmedia:hover { --rotY:  7deg; }

/* Scroll parallax: image + text drift opposite ways around viewport center */
#projects.projects-rail .projmedia{ --pY: calc(var(--ply, 0) * -12px); }
#projects.projects-rail .projmeta { --pY: calc(var(--ply, 0) *  12px); }

/* Combine reveal X‑slide with the new Y‑parallax + tilt */
#projects.projects-rail .reveal-l,
#projects.projects-rail .reveal-r{
  transform:
    translateX(var(--x, 0))
    translateY(calc(var(--pY, 0) + var(--lift, 0px)))
    rotateY(var(--rotY, 0deg));
}
#projects.projects-rail .is-in{
  opacity: 1;
  transform:
    translateY(calc(var(--pY, 0) + var(--lift, 0px)))
    rotateY(var(--rotY, 0deg));
}

/* Mobile: keep depth, reduce intensity for clarity/perf */
@media (max-width: 860px){
  
  #projects.projects-rail .projmedia::after,
  #projects.projects-rail .projmeta::after{ opacity: .32; filter: blur(10px); }
  #projects.projects-rail .projmedia{ --pY: 0px; }
  #projects.projects-rail .projmeta { --pY: 0px; }
}
@media (prefers-reduced-motion: reduce){
  #projects.projects-rail .projmedia,
  #projects.projects-rail .projmeta{ --pY: 0px; --rotY: 0deg; --lift: 0px; }
}
/* =======================================================
   PROJECTS — Bottom visibility + Static Depth (no motion)
   Scope: #projects.projects-rail
   ======================================================= */

/* 1) Ensure the last project is fully visible (remove fade-out) */
#projects.projects-rail .projlist{
  -webkit-mask-image: none;
          mask-image: none;
}

/* 2) Add generous bottom breathing room so the last row isn't cramped */
#projects.projects-rail{
  padding-bottom: clamp(120px, 12vw, 200px);
}

/* 3) Replace the floor with a static "plinth" that lifts the bottom visually.
      (This overrides any previous #projects.projects-rail::after rules.) */


/* 4) Local contrast boost for the bottom-most project only */
#projects.projects-rail .projitem:last-child .projmedia{
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 30px 90px rgba(225,25,40,.10);            /* faint accent bloom */
  border: 1px solid rgba(255,255,255,.12);
}
#projects.projects-rail .projitem:last-child .projmedia::before{
  /* stronger specular to stand off the dark background */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 22%),
    linear-gradient(to top,    rgba(0,0,0,.24),       transparent 50%);
  mix-blend-mode: screen; opacity: .95; border-radius: inherit;
}
#projects.projects-rail .projitem:last-child .projmeta{
  background: linear-gradient(180deg, rgba(12,14,16,.70), rgba(12,14,16,.34));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 16px 40px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* 5) A clearer rail glow near the bottom so the timeline doesn’t disappear */
#projects.projects-rail .projlist::after{
  content:""; position:absolute; left:50%; transform: translateX(-50%);
  top: -40px; bottom: -40px; width: 160px; pointer-events:none;
  background:
    radial-gradient(120px 160px at 50% 88%, rgba(225,25,40,.28), rgba(225,25,40,0) 70%),
    radial-gradient(200px 220px at 50% 60%, rgba(255,255,255,.10), rgba(255,255,255,0) 75%);
  filter: blur(22px); opacity: .95;
  z-index: 0;
}

/* 6) Heavier contact shadows (static occlusion = depth without motion) */
#projects.projects-rail .projmedia::after,
#projects.projects-rail .projmeta::after{
  background: radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,.60), transparent 70%);
  opacity: .55;
}

/* 7) No motion: kill hovers and reveals inside the Projects section */
#projects.projects-rail .projmedia img{
  transform: none !important;
  transition: none !important;
}
#projects.projects-rail .reveal-l,
#projects.projects-rail .reveal-r{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* =======================================================
   SERVICES — Concrete Slab (Light) with Depth, No Motion
   Section id: #services.services-slab.services--light
   ======================================================= */
#services.services-slab{
  position: relative; isolation: isolate;
  padding-block: clamp(76px, 10vw, 140px);
  overflow: hidden;
}

/* Light theme palette — gives the page contrast/“umph” */
#services.services--light{
  --svc-ink: #0b0f10;                  /* dark ink for text */
  --svc-ink-dim: rgba(11,15,16,.72);   /* body text */
  --svc-ink-faint: rgba(11,15,16,.52); /* labels */
  --svc-stroke: rgba(11,15,16,.10);    /* borders */
  --svc-card-bg1: rgba(255,255,255,.92);
  --svc-card-bg2: rgba(255,255,255,.78);
  --svc-card-hl: rgba(255,255,255,.50);
  color: var(--svc-ink);
  background:
    /* soft accent glow from the top */
    radial-gradient(120% 80% at 50% 0%,
      rgba(225,25,40,.12), rgba(225,25,40,0) 60%),
    /* gentle vertical tint */
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 60%, #e8eef5 100%);
}

/* Blueprint grid texture (very subtle) */
#services.services--light::before{
  content:""; position:absolute; inset:-6% -10%; pointer-events:none; z-index: 0;
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, transparent 1px 40px);
  mix-blend-mode: multiply; opacity: .16; filter: blur(.2px);
  mask-image: radial-gradient(140% 100% at 50% 30%, #000 0, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
}

/* Bottom vignette plate so the section feels grounded */
#services.services--light::after{
  content:""; position:absolute; left:-8%; right:-8%; bottom:-60px; height: clamp(220px, 32vw, 400px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(225,25,40,.18), rgba(225,25,40,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  transform: perspective(1200px) rotateX(62deg);
  transform-origin: 50% 100%;
  mix-blend-mode: multiply; opacity: .55; filter: blur(.25px);
}

/* Content wrap */
#services .svcwrap{ position: relative; z-index: 1; width: min(100% - 2rem, 1240px); margin: 0 auto; }

/* Header */
#services .svchead{ max-width: 1000px; margin-bottom: clamp(28px, 4vw, 44px); }
#services .svctitle{
  margin: 0 0 .4rem 0;
  font-family: var(--display-font);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: clamp(.18em, .7vw, .32em);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.06; color: var(--svc-ink);
}
#services .eyebrow{ color: var(--svc-ink-faint); }
#services .svclede{
  margin: 0; color: var(--svc-ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.7;
}

/* Grid of embossed cards (depth without motion) */
#services .svcgrid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1080px){ #services .svcgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  #services .svcgrid{ grid-template-columns: 1fr; } }

#services .svccard{
  position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--svc-card-bg1), var(--svc-card-bg2));
  border: 1px solid var(--svc-stroke);
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),        /* drop */
    0 1px 0 var(--svc-card-hl) inset,   /* top inner highlight */
    0 -1px 0 rgba(0,0,0,.05) inset;     /* bottom inner shade */
  padding: clamp(16px, 2vw, 18px);
}

/* Red accent “service badge”, echoed from Projects tag but adapted for light bg */
#services .svcbadge{
  display: inline-block;
  font: 800 .68rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 6px rgba(225,25,40,.28);
  margin-bottom: .55rem;
}

/* Card heading + copy */
#services .svch3{
  margin: 0 0 .25rem 0;
  font-family: var(--display-font); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 1.02rem; color: var(--svc-ink);
}
#services .svctxt{ margin: 0 0 .6rem 0; color: var(--svc-ink-dim); line-height: 1.6; }

/* Pill list of typical inclusions */
#services .svcpills{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
#services .svcpills li{
  padding: 7px 10px; border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--svc-ink); font-weight: 600; letter-spacing: .02em;
  font-size: .82rem;
}

/* Subtle card specular + base shadow (static) */
#services .svccard::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 24%),
    radial-gradient(140% 80% at 0% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 40%),
    linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,0) 42%);
  mix-blend-mode: screen; opacity: .7;
}
#services .svccard::after{
  content:""; position:absolute; left: 8%; right: 8%; bottom: -14px; height: 24px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,.26), transparent 70%);
  filter: blur(10px); opacity: .55; border-radius: 50%;
}

/* Bottom “spec bar” — engraved strip for depth */
#services .svcbar{
  margin-top: clamp(24px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--svc-stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 26px rgba(0,0,0,.08);
}
@media (max-width: 860px){ #services .svcbar{ grid-template-columns: 1fr; } }

#services .svcspec{
  display: grid; grid-template-columns: 140px 1fr; align-items: center;
  padding: 14px 16px; border-right: 1px solid var(--svc-stroke);
}
#services .svcspec:last-child{ border-right: none; }
@media (max-width: 860px){
  #services .svcspec{ grid-template-columns: 120px 1fr; border-right: none; border-bottom: 1px solid var(--svc-stroke); }
  #services .svcspec:last-child{ border-bottom: none; }
}
#services .spk{ font: 800 .74rem/1 "Inter", system-ui; letter-spacing: .18em; text-transform: uppercase; color: var(--svc-ink-faint); }
#services .spv{ font-weight: 700; color: var(--svc-ink); }

/* Optional: Dark theme variant (keep if you later want all-dark site)
#services.services--dark{
  --svc-ink: #fff; --svc-ink-dim: rgba(255,255,255,.72); --svc-ink-faint: rgba(255,255,255,.52);
  --svc-stroke: rgba(255,255,255,.10);
  --svc-card-bg1: rgba(16,18,20,.92); --svc-card-bg2: rgba(16,18,20,.74); --svc-card-hl: rgba(255,255,255,.06);
  color: var(--svc-ink);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,25,40,.18), rgba(225,25,40,0) 60%),
    linear-gradient(180deg, #0e1316 0%, #0b0f10 60%, #0a0e10 100%);
}
#services.services--dark::before{ background:
  repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px);
  mix-blend-mode: normal; opacity: .10;
}
#services.services--dark .svcpills li{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #fff; }
*/
/* =======================================================
   MANIFESTO — Light Concrete Slab (matches Services)
   Scope: #manifesto.manifesto--light
   ======================================================= */

#manifesto.manifesto--light{
  position: relative; isolation: isolate;
  /* Light theme palette (echoes the Services light slab) */
  --mf-ink: #0b0f10;
  --mf-ink-dim: rgba(11,15,16,.72);
  --mf-ink-faint: rgba(11,15,16,.52);
  --mf-stroke: rgba(11,15,16,.10);
  --mf-card-bg1: rgba(255,255,255,.92);
  --mf-card-bg2: rgba(255,255,255,.78);
  --mf-card-hl: rgba(255,255,255,.50);

  color: var(--mf-ink);
  background:
    /* soft accent glow from the top (same vibe as Services) */
    radial-gradient(120% 80% at 50% 0%,
      rgba(225,25,40,.12), rgba(225,25,40,0) 60%),
    /* concrete slab tint */
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 60%, #e8eef5 100%);
  padding-block: clamp(76px, 10vw, 140px);
  border-top: none;  /* neutralize old dark divider */
}

/* Blueprint grid (very subtle, same as Services) */
#manifesto.manifesto--light::before{
  content:""; position:absolute; inset:-6% -10%; pointer-events:none; z-index: 0;
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, transparent 1px 40px);
  mix-blend-mode: multiply; opacity: .16; filter: blur(.2px);
  mask-image: radial-gradient(140% 100% at 50% 30%, #000 0, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
}

/* Bottom plinth so the section feels grounded (no motion) */
#manifesto.manifesto--light::after{
  content:""; position:absolute; left:-8%; right:-8%; bottom:-60px; height: clamp(220px, 32vw, 400px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(225,25,40,.18), rgba(225,25,40,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  transform: perspective(1200px) rotateX(62deg);
  transform-origin: 50% 100%;
  mix-blend-mode: multiply; opacity: .55; filter: blur(.25px);
}

/* Wrap */
#manifesto.manifesto--light .mf__wrap{ position: relative; z-index: 1; width: min(100% - 2rem, 1240px); margin: 0 auto; }

/* Lede + headings (dark ink on light) */
#manifesto.manifesto--light .eyebrow{ color: var(--mf-ink-faint); }
#manifesto.manifesto--light .mf__title{ color: var(--mf-ink); }
#manifesto.manifesto--light .mf__intro{ color: var(--mf-ink-dim); }

/* Cards — embossed, static depth (no animation needed) */
#manifesto.manifesto--light .mf__grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px){ #manifesto.manifesto--light .mf__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  #manifesto.manifesto--light .mf__grid{ grid-template-columns: 1fr; } }

#manifesto.manifesto--light .mf__card{
  position: relative; border-radius: 14px; overflow: hidden;
  padding: 20px 18px 18px 18px;
  background: linear-gradient(180deg, var(--mf-card-bg1), var(--mf-card-bg2));
  border: 1px solid var(--mf-stroke);
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    inset 0 1px 0 var(--mf-card-hl),
    inset 0 -1px 0 rgba(0,0,0,.05);
  transition: none; /* static look by default */
}
#manifesto.manifesto--light .mf__card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 24%),
    radial-gradient(140% 80% at 0% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 40%),
    linear-gradient(0deg, rgba(0,0,0,.04), rgba(0,0,0,0) 42%);
  mix-blend-mode: screen; opacity: .7;
}
#manifesto.manifesto--light .mf__card::after{
  content:""; position:absolute; left: 8%; right: 8%; bottom: -14px; height: 24px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,.26), transparent 70%);
  filter: blur(10px); opacity: .55; border-radius: 50%;
}

/* Numbers, headings, body on light */
#manifesto.manifesto--light .mf__num{
  color: var(--accent);
}
#manifesto.manifesto--light .mf__h3{
  color: var(--mf-ink);
}
#manifesto.manifesto--light .mf__card p{
  color: var(--mf-ink-dim);
}

/* Metrics strip — styled like the Services spec bar */
#manifesto.manifesto--light .mf__metrics{
  margin-top: clamp(28px, 4vw, 44px);
  border-top: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--mf-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 26px rgba(0,0,0,.08);
}
@media (max-width: 880px){ #manifesto.manifesto--light .mf__metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#manifesto.manifesto--light .metric{
  border-right: 1px solid var(--mf-stroke);
  padding: 18px 12px;
}
#manifesto.manifesto--light .metric:last-child{ border-right: none; }

#manifesto.manifesto--light .val{
  color: var(--mf-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.40);
}
#manifesto.manifesto--light .label{
  color: var(--mf-ink-faint);
}

/* Keep any previous dark-theme reveal transitions from kicking in here */
#manifesto.manifesto--light .reveal{ opacity: 1; transform: none; transition: none; } /* static by default */
/* =======================================================
   GLOBAL X-OVERFLOW FIX (no layout changes)
   ======================================================= */

/* 1) Never allow the page to scroll sideways */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; } /* fallback for older browsers */
}

/* 2) Clip sections that use wide pseudo-elements / blurs */
.hero--cinematic,
#manifesto,
#services,
#projects {
  overflow-x: clip;    /* clip decorations extending left/right */
  overflow-y: visible; /* keep vertical shadows/glows visible */
}

/* 3) Paint containment avoids pseudo-layers affecting layout bounds */
.manifesto--light,
.services-slab,
.projects-rail {
  contain: paint;
}

/* 4) Safari safety: clip x-overflow when blur/filters expand bounds */
@supports (-webkit-touch-callout: none) {
  .hero--cinematic,
  #manifesto,
  #services,
  #projects { overflow-x: hidden; }
}

/* 5) If any legacy 'filmstrip' scroller markup is still on the page,
      disable its horizontal scrolling behavior */
#projects .projtrack {
  overflow-x: hidden;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
}
/* =======================================================
   HERO → MANIFESTO SEAM
   Extend the hero's vertical ruler ticks into Manifesto
   (works for both dark and light Manifesto themes)
   ======================================================= */

/* Ensure the section clips wide decoration (keeps x-scroll off) */
#manifesto{ position: relative; overflow-x: clip; }

/* Base wrapper must be a stacking context so the seam can sit behind content */
#manifesto .mf__wrap{ position: relative; z-index: 1; }

/* Full-bleed seam band aligned to the viewport (not the inner wrap) */
#manifesto .mf__wrap::before{
  content:"";
  position: absolute;
  top: -1px;                /* kisses the hero/manifesto boundary */
  left: 50%;
  width: 100vw;             /* matches hero's ruler width */
  height: 150px;            /* how far the ticks run into Manifesto */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;               /* behind manifesto content, above section bg */

  /* DARK-MODE default (matches hero): 1px lines every 40px */
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.22) 0 1px,
      transparent            1px 40px),
    linear-gradient(to bottom, rgba(255,255,255,.08), transparent 60%);
  opacity: .50;

  /* Fade downward so lines disappear gracefully inside Manifesto */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* Light slab variant: darker ticks that read on the light background */
#manifesto.manifesto--light .mf__wrap::before{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px,
      transparent      1px 40px),
    linear-gradient(to bottom, rgba(0,0,0,.06), transparent 60%);
  opacity: .45;
  mix-blend-mode: multiply; /* lets the ticks sit naturally on the light slab */
}

/* If you ever tighten the line spacing in the hero,
   keep them synchronized here too (hero uses 40px today). */
   /* =======================================================
   HERO → MANIFESTO SEAM — start exactly at the boundary
   Align seam band to the section's top edge, not after padding
   ======================================================= */

/* 1) Expose the actual top padding as a variable per theme */
#manifesto{ --mf-pad-top: clamp(72px, 10vw, 140px); }             /* dark (original) manifesto */
#manifesto.manifesto--light{ --mf-pad-top: clamp(76px, 10vw, 140px); } /* light slab variant */

/* 2) Ensure the wrapper creates a stacking context for the seam */
#manifesto .mf__wrap{ position: relative; z-index: 1; }

/* 3) Reposition the seam band to the true top of the section */
#manifesto .mf__wrap::before{
  content:"";
  position: absolute;

  /* Pull up by the section's top padding so the band starts at the hero/manifesto divide */
  top: calc(-1 * var(--mf-pad-top));

  left: 50%;
  width: 100vw;                 /* full-bleed like the hero ruler */
  height: 150px;                /* how far the ticks run into Manifesto */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;

  /* default (dark) ticks to match hero: light lines every 40px + soft fade */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 40px),
    linear-gradient(to bottom, rgba(255,255,255,.08), transparent 60%);
  opacity: .50;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
}

/* 4) Light slab variant: swap tick color to read on light bg */
#manifesto.manifesto--light .mf__wrap::before{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 40px),
    linear-gradient(to bottom, rgba(0,0,0,.06), transparent 60%);
  opacity: .45;
  mix-blend-mode: multiply;
}

/* Keep horizontal scroll off while allowing vertical decoration */
#manifesto{ overflow-x: clip; overflow-y: visible; }
/* =======================================================
   LOWER→UPPER BRIDGE
   A red‑tinted "riser" coming FROM the section below
   into Manifesto. No markup or JS changes.
   ======================================================= */

/* Keep clipping so we don't reintroduce horizontal scroll */
#manifesto{ position: relative; overflow-x: clip; }

/* Remove/override any older Manifesto plinth rule */
#manifesto::after{ content: none; }

/* --- The bridge — visually belongs to the section below --- */
#manifesto::before{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -1px;                 /* start exactly at the section divide */
  width: 100vw;                 /* full-bleed like your hero/rails */
  height: var(--bridge-h, 170px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;                   /* behind Manifesto content, above its bg */

  /* Trapezoid that narrows as it rises (angled sides, like your ref) */
  clip-path: polygon(0% 100%, 3.5% 0%, 96.5% 0%, 100% 100%);

  /* Borrowing palette from the darker section below (Projects):
     a soft red core + a little base shading. */
  background:
    radial-gradient(110% 90% at 50% 15%, rgba(225,25,40,.22), rgba(225,25,40,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);

  /* On light slab, multiply blends the plate into the concrete */
  mix-blend-mode: multiply;
  opacity: .88;

  /* Gentle softness so the edges don't feel cut with a knife */
  filter: blur(.25px);
}

/* If you're keeping Manifesto dark (no light-slab class),
   we flip blending so the bridge "lifts" into the dark. */
#manifesto:not(.manifesto--light)::before{
  background:
    radial-gradient(110% 90% at 50% 15%, rgba(225,25,40,.26), rgba(225,25,40,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: .78;
}

/* Optional: subtle top lip on the lower section to sell the handoff */
#projects{ position: relative; }
#projects::before{
  content:"";
  position:absolute; left:50%; top:-1px; transform:translateX(-50%);
  width: 100vw; height: 34px; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:.6;
}

/* Keep decorations from causing horizontal scroll in Safari */
@supports (-webkit-touch-callout: none) {
  #manifesto, #projects { overflow-x: hidden; }
}

/* Tuning knobs (optional)
   :root or section could set:
   --bridge-h: 150px;   // how far the riser climbs into Manifesto
*/
/* =======================================================
   LOWER → UPPER BRIDGE (works with current files)
   A slightly-red trapezoid that RISES from Projects INTO Manifesto
   ======================================================= */

#manifesto { position: relative; overflow-x: clip; } /* keep x-scroll off */
#manifesto .mf__wrap { position: relative; z-index: 1; } /* content above bridge */

/* Use ::after so we don't collide with the existing .manifesto::before top glow */
#manifesto::after{
  content:"";
  position:absolute;

  /* Hard reset any inherited inset from earlier rules */
  top: auto; right: auto; left: 50%; bottom: -1px;

  width: 100vw;                       /* full bleed like the hero ruler */
  height: var(--bridge-h, 180px);     /* how far it rises into Manifesto */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;                         /* behind content, above bg */

  /* Trapezoid shape (angled sides like your reference) */
  clip-path: polygon(0% 100%, 3.6% 0%, 96.4% 0%, 100% 100%);

  /* Because Manifesto + Projects are dark, we SCREEN a red core so it lifts */
  background:
    radial-gradient(110% 90% at 50% 15%, rgba(225,25,40,.26), rgba(225,25,40,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: .78;
  filter: blur(.25px); /* soften edges slightly */
}

/* If/when you switch Manifesto to the LIGHT slab, we swap blending so it sits in */
#manifesto.manifesto--light::after{
  background:
    radial-gradient(110% 90% at 50% 15%, rgba(225,25,40,.22), rgba(225,25,40,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
  mix-blend-mode: multiply;
  opacity: .88;
}
/* =======================================================
   Manifesto ↔ Next Section BRIDGE (full-bleed, black)
   - spans edge-to-edge
   - draws from the next section’s color (#0b0f10)
   - no blends, static depth
   ======================================================= */

#manifesto { position: relative; overflow-x: clip; } /* keep x-scroll off */
#manifesto .mf__wrap { position: relative; z-index: 1; } /* content above bridge */

/* Kill older bridge variants so nothing competes */
#manifesto::before { /* keep your top ambience; no change */ }
#manifesto::after  { content: none; }                      /* reset, then re-declare below */

/* Full-bleed black trapezoid rising into Manifesto */
#manifesto::after{
  content:"";
  position: absolute;
  /* Anchor to the section edges so it really spans the page */
  left: 0; right: 0; bottom: -1px;
  height: var(--bridge-h, 200px);
  pointer-events: none;
  z-index: 0;

  /* True trapezoid (tweak --bridge-inset for steeper/shallower sides) */
  --bridge-inset: 1.2%;
  clip-path: polygon(0% 100%, var(--bridge-inset) 0%, calc(100% - var(--bridge-inset)) 0%, 100% 100%);

  /* Match the lower section color exactly */
  background: #0b0f10;

  /* Soft fade so it nests under Manifesto’s background/content cleanly */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);

  /* Subtle inner lip for depth (optional—remove if you want perfectly flat) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

/* Safari safety: ensure decorations don’t trigger horizontal scroll */
@supports (-webkit-touch-callout: none) {
  #manifesto { overflow-x: hidden; }
}
/* FINAL OVERRIDE — Manifesto ↔ Projects bridge */
#manifesto::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: -1px;
  width: auto;                 /* cancel earlier 100vw rule */
  height: var(--bridge-h, 200px);
  --bridge-inset: 1.2%;
  clip-path: polygon(0% 100%, var(--bridge-inset) 0%, calc(100% - var(--bridge-inset)) 0%, 100% 100%);
  background: #0b0f10;         /* match Projects section */
  transform: none;             /* cancel earlier translateX(-50%) */
  mix-blend-mode: normal;      /* cancel red/ambient blends */
  opacity: 1;                  /* ensure solid */
  -webkit-mask-image: none;    /* remove soft fade */
          mask-image: none;
  z-index: 0;                  /* behind Manifesto content */
}

/* Ensure the light-variant doesn't reapply blending */
#manifesto.manifesto--light::after{
  background: #0b0f10;
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-mask-image: none;
          mask-image: none;
}
/* REMOVE red blur at the top of Selected Work (Projects rail) */
#projects.projects-rail::before{
  content: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
  height: 0 !important;
}
/* Turn off the old bridge on Manifesto */
#manifesto::before{ content: none !important; }

/* Host the wedge on the Selected Work section */
#projects.projects-rail, .projects-rail{
  position: relative !important;
  overflow: visible !important;
}

/* New wedge drawn by the rail (full-bleed, same bg as the rail) */
#projects.projects-rail::before, .projects-rail::before{
  content: "" !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                          /* full-bleed */
  height: var(--bridge-h, 170px);        /* adjust if you want */
  top: calc(-1 * var(--bridge-h, 170px) + 1px); /* 1px overlap kills hairline */
  background: inherit !important;        /* EXACT match to the rail’s bg */
  background-image: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  clip-path: polygon(0% 100%, 1.2% 0, 98.8% 0, 100% 100%);
  pointer-events: none;
  z-index: 0;
}
/* --- Seamless Manifesto → Projects handoff (no geometry changes) --- */

/* 1) That faint “seam” is the top lip overlay on the Projects wrapper. Kill it. */
#projects::before { content: none !important; }

/* 2) Make the wrapper (#projects) the SAME color as the rail so there’s no mismatch. */
section#projects:not(.projects-rail) { background: #0b0f10 !important; }

/* 3) Remove the 1px light edge on the trapezoid itself (doesn't change size). */
#manifesto::after {
  background: #0b0f10 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  /* keep existing width/height/clip-path/bottom as-is */
}
/* === Manifesto ↔ Projects — single, solid trapezoid hosted by Projects === */
/* Keep Manifesto above its own background, but behind the Projects wedge */
#manifesto { position: relative; z-index: 1; }  /* Manifesto stays “under” the wedge */

/* Projects hosts the wedge and sits one layer above Manifesto */
#projects.projects-rail { position: relative; z-index: 2; background: #0b0f10; }

/* The wedge: full-bleed, rises into Manifesto, no blends, no masks */
#projects.projects-rail::before{
  content:"";
  position:absolute;
  left:0; right:0;
  /* rise into Manifesto by this much; +1px kills hairlines at some zooms */
  --bridge-h: 180px;
  top: calc(-1 * var(--bridge-h) + 1px);
  height: var(--bridge-h);
  background: inherit;                    /* exactly match Projects background */
  clip-path: polygon(0% 100%, 1.2% 0, 98.8% 0, 100% 100%); /* trapezoid */
  pointer-events: none;
}
/* === OVERRIDE: stronger bottom ruler ticks in the hero === */
.hero__ruler{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 4;
  background:
    /* slightly stronger vertical glow at the bottom edge */
    linear-gradient(to top, rgba(255,255,255,.16), transparent),
    /* thicker, brighter ticks — still every 40px */
    repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 2px, transparent 2px 40px);
  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.1));
  opacity: .65; /* overall strength */
}
/* === OVERRIDE: readable, layered text shadows === */
.hero__title{
  /* a tight edge plus two soft depths; avoids the “glow” look */
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.45);
}

.hero__cta{
  text-shadow:
    0 1px 4px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.35);
}
/* === OVERRIDE: slightly deeper cinematic plate behind hero text === */
.hero__content::before{
  /* a touch darker + slightly stronger blur */
  opacity: .94;
  filter: blur(8px);
  backdrop-filter: blur(4px) saturate(125%);
  -webkit-backdrop-filter: blur(4px) saturate(125%);

  /* darker inner tones, gentle roll‑off */
  background:
    radial-gradient(120% 90% at 50% 52%,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.44) 42%,
      rgba(0,0,0,.06) 70%,
      rgba(0,0,0,0)   78%);
}

/* === OVERRIDE: title & CTA—just a hair more separation === */
.hero__title{
  text-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 3px 12px rgba(0,0,0,.42),
    0 12px 30px rgba(0,0,0,.52);
}
.hero__cta{
  text-shadow:
    0 1px 4px rgba(0,0,0,.34),
    0 8px 20px rgba(0,0,0,.42);
}
/* === OVERRIDE: Lift the Projects header to match the new trapezoid === */

/* 0) The outer dummy wrapper has inline min-height:50vh; cancel it so there's no gap above */
section#projects:not(.projects-rail){
  min-height: 0 !important;     /* overrides the inline min-height on the wrapper */
  padding: 0 !important;         /* make sure it doesn't add space */
}

/* 1) Pull the content up inside the real Projects section */
#projects.projects-rail{
  /* was: padding-block: clamp(64px, 8vw, 120px); */
  padding-top: clamp(20px, 5.2vw, 76px);
}

/* 2) (Optional) On wide screens, cap the top padding a bit tighter */
@media (min-width: 1200px){
  #projects.projects-rail{ padding-top: 56px; }
}
/* === Projects: Lede under section title === */
#projects.projects-rail .projhead .projlede{
  margin: .2rem 0 1.1rem 0;
  color: var(--ink-dim);
  max-width: 72ch;
}

/* === Projects: Quick facts grid inside each .projmeta === */
#projects.projects-rail .projfacts{
  margin: .15rem 0 .35rem 0;
  padding: 10px 12px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 8px;
}
#projects.projects-rail .projfacts li{ display: grid; gap: 4px; justify-items: start; }
#projects.projects-rail .projfacts .k{
  font: 800 .70rem/1 "Inter", system-ui;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}
#projects.projects-rail .projfacts .v{ font-weight: 700; color: #fff; }
@media (max-width: 980px){ #projects.projects-rail .projfacts{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* === Projects: 3 concise bullets for substance without a wall of text === */
#projects.projects-rail .projbullets{
  list-style: none; margin: .25rem 0 .35rem 0; padding: 0;
  display: grid; gap: 6px;
}
#projects.projects-rail .projbullets li{
  display: grid; grid-template-columns: 10px 1fr; align-items: start; gap: .6rem;
  color: var(--ink-dim); font-size: .96rem; line-height: 1.5;
}
#projects.projects-rail .projbullets li::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-top: .4rem;
  box-shadow: 0 0 0 2px rgba(225,25,40,.18);
}

/* === Projects: skill/phase tags (pills) for quick scanning === */
#projects.projects-rail .projpills{
  display: flex; flex-wrap: wrap; gap: 8px; margin: .2rem 0 .2rem 0; padding: 0; list-style: none;
}
#projects.projects-rail .projpills li{
  padding: 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff; font-weight: 600; letter-spacing: .02em; font-size: .82rem;
}

/* === Projects: subtle CTA under each card === */
#projects.projects-rail .projcta{
  --rule-w: 44px;
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: .6rem;
  margin-top: .1rem; color: rgba(255,255,255,.92); text-decoration: none;
  font-weight: 700; letter-spacing: .08em; font-size: .82rem;
}
#projects.projects-rail .projcta .rule{
  width: var(--rule-w); height: 2px; display: block;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
}
#projects.projects-rail .projcta svg{ transition: transform .2s ease; }
#projects.projects-rail .projcta:hover svg{ transform: translateX(3px); }

/* === Small rhythm tweaks so the denser content sits comfortably === */
#projects.projects-rail .projmeta{ gap: .55rem; }  /* tighter internal spacing */
#projects.projects-rail .projdesc{ margin-bottom: .1rem; }

/* === Services ↔ Projects — exact replica of the wedge above (pure white, no grid) === */

/* Put Services above Projects so its wedge can sit over the Projects background */
#projects.projects-rail { position: relative; z-index: 2; } /* already present; safe to repeat */
#services.services-slab{
  position: relative;
  z-index: 3;                 /* wedge paints above the Projects section */
  overflow-x: clip;           /* keep horizontal scroll off */
  overflow-y: visible;        /* allow decoration to rise out of the top edge */
  contain: none;              /* let the wedge paint beyond the section bounds */
}

/* Exact “white” from the Services slab — linear gradient only (no red tint) */
#services.services--light{
  --svc-white: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 60%, #e8eef5 100%);
}

/* Use the SAME trapezoid geometry (1.2% inset) as the Manifesto↔Projects seam */
#services{ --svc-pad-top: clamp(76px, 10vw, 140px); }  /* equals Services top padding */
#services .svcwrap{ position: relative; z-index: 1; }  /* content above the wedge */
#services .svcwrap::before{
  content:"";
  position: absolute;
  left: 50%;
  width: 100vw;                                /* full‑bleed like the wedge above */
  height: var(--bridge-h, 180px);              /* same default height */
  /* Pull up by the section padding + wedge height; +1px overlap kills any hairline */
  top: calc(-1 * var(--svc-pad-top) - var(--bridge-h, 180px) + 1px);
  transform: translateX(-50%);
  background: var(--svc-white);                /* PURE Services white */
  clip-path: polygon(0% 100%, 1.2% 0, 98.8% 0, 100% 100%); /* IDENTICAL shape */
  pointer-events: none;
  z-index: 0;                                  /* behind Services content, above grid */
}

/* Ensure the Services heading always renders over the wedge */
#services .svchead{ position: relative; z-index: 2; }
/* === BRIDGES — Canonical, single source of truth ========================= */
/* One geometry, one colour, no blends, no masks, no gradients.             */

/* Keep Projects above Services so the Services wedge sits under Projects content */
#projects.projects-rail{
  position: relative;
  z-index: 2 !important;
  background: #0b0f10 !important; /* your rail colour */
}

/* Services should NOT sit above Projects; let the wedge tuck underneath */
#services.services-slab{
  position: relative;
  z-index: 0 !important;          /* was 3 in an earlier block */
  overflow-x: clip;
  overflow-y: visible;
  contain: none;
}

/* Kill any older "seam lip" on Projects that can leave a faint line */
#projects::before { content: none !important; }

/* === Manifesto ↔ Projects — hosted by Projects ========================== */
#projects.projects-rail::before{
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0;
  --bridge-h: 180px;
  top: calc(-1 * var(--bridge-h) + 1px); /* +1px hides hairlines at some zooms */
  height: var(--bridge-h);
  background: #0b0f10 !important;        /* EXACT match to Projects background */
  background-image: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  clip-path: polygon(0% 100%, 1.2% 0, 98.8% 0, 100% 100%) !important;
  pointer-events: none;
  z-index: 0;
}

/* === Projects ↔ Services — IDENTICAL shape/colour, hosted by Services === */
/* Services has top padding; expose it so we can pull the wedge up cleanly */
#services { --svc-pad-top: clamp(76px, 10vw, 140px); }

#services .svcwrap{ position: relative; z-index: 1; } /* content above wedge */

#services .svcwrap::before{
  content: "" !important;
  position: absolute !important;
  left: 50%;
  width: 100vw;                        /* full-bleed even inside a centered wrap */
  transform: translateX(-50%);
  --bridge-h: 180px;
  /* Rise into Projects by the wedge height, starting exactly at the section divide */
  top: calc(-1 * var(--svc-pad-top) - var(--bridge-h) + 1px);
  height: var(--bridge-h);
  background: #0b0f10 !important;      /* SAME colour as Projects bridge */
  background-image: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  clip-path: polygon(0% 100%, 1.2% 0, 98.8% 0, 100% 100%) !important;
  pointer-events: none;
  z-index: 0;                           /* behind Services content, under Projects */
}

/* No extra flares near the rail that could look like seams */

/* ========================= FINAL — Services↔Projects wedge (IDENTICAL GEOMETRY) ========================= */
/* Shared geometry — copy of the Manifesto wedge */
:root{ --bridge-h: 200px; --bridge-inset: 1.2%; }  /* height + side inset */

/* Stacking and visibility */
#projects.projects-rail{ position: relative !important; z-index: 0 !important; overflow-y: visible !important; overflow-x: clip !important; }
#projects.projects-rail .projwrap{ position: relative !important; z-index: 2 !important; } /* content above wedge */

/* EXACT copy of #manifesto::after geometry, but drawn at the bottom of Projects so it rises UP */
#projects.projects-rail::after{
  content:"" !important;
  position:absolute !important;

  /* Anchor to the seam exactly like the good wedge above */
  left: 0; right: 0; bottom: -1px; top: auto !important;
  width: auto; height: var(--bridge-h);

  /* IDENTICAL TRAPEZOID SHAPE */
  clip-path: polygon(0% 100%, var(--bridge-inset) 0%, calc(100% - var(--bridge-inset)) 0%, 100% 100%) !important;

  /* Reset anything that previously distorted or hid this pseudo */
  transform: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  filter: none !important; mix-blend-mode: normal !important;
  box-shadow: none !important;
  display: block !important;
  pointer-events: none !important;

  /* Visible fill: use the Services slab white so it reads against Projects */
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 60%, #e8eef5 100%) !important;

  /* Layer: between Projects bg (0) and Projects content (.projwrap:2) */
  z-index: 1 !important;
}

/* Safety: any older Services wedge attempts should not compete */
#services .svcwrap::before{ content: none !important; }
/* ======================================================================================================== */


/* =====================================================================
   BRIDGES — LOCKED (single source of truth)
   One geometry, one size, zero blends. Exact same trapezoid both places.
   This block intentionally overrides ANY earlier attempts.
   ===================================================================== */

:root{
  --bridge-h: 180px;        /* HEIGHT of the wedge (both places) */
  --bridge-inset: 1.2%;     /* SIDE SLOPE: % inset at the top edge */
}

/* 0) Hard kill any Manifesto/Services wedge attempts so nothing competes */
#manifesto::before,
#manifesto::after,
#services::before,
#services::after,
#services .svcwrap::before,
#services .svcwrap::after{
  content: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
}

/* 1) Projects section is the single host for BOTH wedges */
#projects.projects-rail{
  position: relative !important;
  z-index: 1 !important;                 /* base layer */
  background: #0b0f10 !important;
  overflow: visible !important;
}

/* Keep all Projects content above the two wedges (so text never gets covered) */
#projects.projects-rail .projwrap,
#projects.projects-rail .projhead,
#projects.projects-rail .projlist{
  position: relative;
  z-index: 2;                            /* wedges use z-index:0 */
}

/* 2) Manifesto ↔ Projects — black wedge rising into Manifesto */
#projects.projects-rail::before{
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0;
  top: calc(-1 * var(--bridge-h) + 1px); /* +1px hides hairline at some zooms */
  height: var(--bridge-h);
  background: #0b0f10 !important;        /* EXACT match to Projects bg */
  background-image: none !important;
  transform: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  mix-blend-mode: normal !important;
  clip-path: polygon(0% 100%, var(--bridge-inset) 0, calc(100% - var(--bridge-inset)) 0, 100% 100%) !important;
  pointer-events: none;
  z-index: 0;
}

/* 3) Projects ↔ Services — white wedge pushing UP into Projects
      (identical geometry, Services slab colour) */
#projects.projects-rail::after{
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0;
  bottom: 0;                              /* sits inside Projects, at its bottom edge */
  height: var(--bridge-h);
  /* exact Services slab gradient so the colour matches perfectly */
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 60%, #e8eef5 100%) !important;
  background-image: none !important;
  transform: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  mix-blend-mode: normal !important;
  clip-path: polygon(0% 100%, var(--bridge-inset) 0, calc(100% - var(--bridge-inset)) 0, 100% 100%) !important;
  pointer-events: none;
  z-index: 0;
}
/* =======================================================
   ABOUT — Company & Crew (Dark)
   Section id: #about.about
   ======================================================= */
#about.about{
  position: relative; isolation: isolate;
  padding-block: clamp(76px, 10vw, 140px);
  color: #fff;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,25,40,.14), rgba(225,25,40,0) 60%),
    linear-gradient(180deg, #0b0f10 0%, #0b0f10 100%);
  overflow-x: clip; /* consistent with other sections to prevent side scroll */
}

.ab__wrap{ width: min(100% - 2rem, 1240px); margin: 0 auto; }

/* Header */
.ab__lede{ max-width: 1000px; margin-bottom: clamp(28px, 4vw, 44px); }
.ab__title{
  margin: 0 0 .4rem 0;
  font-family: var(--display-font);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: clamp(.18em, .7vw, .32em);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.06;
}
.ab__intro{
  margin: 0; color: var(--ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
}

/* Two columns: story + facts */
.ab__cols{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
@media (max-width: 980px){ .ab__cols{ grid-template-columns: 1fr; } }

.ab__copy{
  margin: 0 0 .8rem 0; color: var(--ink-dim);
  font-size: clamp(1rem, 1.2vw, 1.05rem); line-height: 1.7;
}
.ab__points{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.ab__points li{
  display: grid; grid-template-columns: 10px 1fr; align-items: start; gap: .6rem;
  color: var(--ink-dim); font-size: .98rem; line-height: 1.6;
}
.ab__points li::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-top: .45rem;
  box-shadow: 0 0 0 2px rgba(225,25,40,.18);
}

/* Right facts card */
.ab__card{
  position: relative;
  padding: clamp(14px, 2vw, 18px);
  background: linear-gradient(180deg, rgba(10,12,14,.65), rgba(10,12,14,.30));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.ab__h3{
  margin: 0 0 .5rem 0;
  font-family: var(--display-font); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 1.02rem;
}
.ab__specs{
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin: 0; padding: 0;
}
.ab__specs .spec{ display: grid; grid-template-columns: 140px 1fr; align-items: start; gap: 12px; }
@media (max-width: 560px){ .ab__specs .spec{ grid-template-columns: 120px 1fr; } }
.ab__specs .spk{
  font: 800 .74rem/1 "Inter", system-ui; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ab__specs .spv{ font-weight: 700; }

/* Divider */
.ab__rule{
  height: 1px; border: 0; margin: clamp(22px, 3vw, 34px) 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent);
}

/* Team preview */
.ab__team-block{ display: grid; gap: 12px; }
.ab__team{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 980px){ .ab__team{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ab__team{ grid-template-columns: 1fr; } }

.person{
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.person .avatar{
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  color: #fff; font-weight: 800; letter-spacing: .08em;
  position: relative;
}
.person .avatar::after{
  content: attr(data-initials);
  font: 800 .9rem/1 "Inter", system-ui;
  opacity: .92;
}
.person .name{ font-weight: 800; letter-spacing: .04em; }
.person .role{ color: var(--ink-dim); font-size: .92rem; }

/* CTA (local version of your hero CTA) */
.ab__cta{
  --rule-w: 44px;
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: .7rem;
  margin-top: clamp(16px, 3vw, 24px);
  color: rgba(255,255,255,.92); text-decoration: none;
  font-weight: 700; letter-spacing: .1em; font-size: .82rem;
}
.ab__cta .rule{ width: var(--rule-w); height: 2px; background: var(--accent); border-radius: 2px; transition: width .25s ease; display: block; }
.ab__cta .label{ position: relative; padding-bottom: 4px; }
.ab__cta .label::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255,255,255,.45); transition: background .25s ease, transform .25s ease;
}
.ab__cta:hover .rule{ width: calc(var(--rule-w) + 16px); }
.ab__cta:hover .label::after{ background: var(--accent); transform: translateY(-1px); }
.ab__cta svg{ opacity: .85; transition: transform .25s ease; }
.ab__cta:hover svg{ transform: translateX(3px); }

/* === About — headshot avatars ========================================= */
.person .avatar{
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  position: relative;
  background:
    radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Show the headshot */
.person .avatar img{
  width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: center;
  filter: saturate(104%) contrast(102%) brightness(.98);
  transform: translateZ(0);
}

/* Subtle specular on top of the photo for that glassy rim */
.person .avatar::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%),
    radial-gradient(90% 70% at 20% 10%, rgba(255,255,255,.15), transparent 60%);
  mix-blend-mode: screen; opacity: .85;
  border-radius: inherit;
}

/* Hide the initials when a photo is present */
.person .avatar--photo::after{ content: none; }

/* =======================================================
   ABOUT — Depth Pack (static, no animations)
   Reuses site tokens: --accent, --ink-dim, --display-font
   ======================================================= */
#about.about{
  /* dials */
  --about-grid: .055;         /* blueprint grid intensity */
  --about-beam: .14;          /* diagonal light beams */
  --about-contact: rgba(0,0,0,.54); /* contact shadow tone */

  position: relative;
  isolation: isolate;
  /* allow vertical glows/beams, never sideways scroll */
  overflow-y: visible;
  overflow-x: clip;
}

/* Subtle blueprint grid on the section surface */
#about.about::before{
  content:""; position:absolute; inset:-6% -10%; z-index: 0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,var(--about-grid)) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,var(--about-grid)) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(120% 90% at 50% 44%, rgba(0,0,0,.95) 0, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
  mix-blend-mode: soft-light; opacity: .35; filter: blur(.2px);
}

/* Ambient diagonal beams (very soft, ties into accent palette) */
#about .ab__wrap{ position: relative; z-index: 1; }
#about .ab__wrap::before{
  content:""; position:absolute; inset:-10% -20%; z-index: 0; pointer-events:none;
  background:
    linear-gradient(65deg,  rgba(225,25,40, var(--about-beam)), transparent 40%),
    linear-gradient(-65deg, rgba(255,255,255,.05),               transparent 36%);
  filter: blur(18px); mix-blend-mode: screen;
}

/* Top seam lip for clearer separation from Services (no geometry gimmicks) */
#about{ --about-pad-top: clamp(76px, 10vw, 140px); } /* equals About top padding */
#about .ab__wrap::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top: calc(-1 * var(--about-pad-top)); width: 100vw; height: 32px; pointer-events:none; z-index: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* Grounding “plinth” at the bottom (static vignette, no motion) */
#about.about::after{
  content:""; position:absolute; left:-8%; right:-8%; bottom:-60px; height: clamp(220px, 32vw, 400px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(225,25,40,.22), rgba(225,25,40,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  transform: perspective(1200px) rotateX(62deg);
  transform-origin: 50% 100%;
  mix-blend-mode: screen; opacity: .55; filter: blur(.25px);
}

/* Facts card — stronger glass + occlusion (static depth) */
#about .ab__card{
  background: linear-gradient(180deg, rgba(10,12,14,.70), rgba(10,12,14,.34));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 16px 40px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.08);
  position: relative; isolation: isolate;
}
#about .ab__card::before{
  content:""; position:absolute; inset:0; border-radius: 12px; pointer-events:none;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(80% 80%   at 100% 100%, rgba(225,25,40,.10), transparent 66%);
  mix-blend-mode: overlay; opacity: .6;
}
#about .ab__card::after{
  content:""; position:absolute; left: 6%; right: 6%; bottom: -12px; height: 24px; border-radius: 50%;
  background: radial-gradient(60% 80% at 50% 50%, var(--about-contact), transparent 70%);
  filter: blur(10px); opacity: .55; z-index: -1;
}

/* Team tiles — richer frame + contact shadow */
#about .person{
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 14px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
}
#about .person::after{
  content:""; position:absolute; left: 8%; right: 8%; bottom: -12px; height: 22px; border-radius: 50%;
  background: radial-gradient(60% 80% at 50% 50%, var(--about-contact), transparent 70%);
  filter: blur(9px); opacity: .50; z-index: -1;
}

/* Avatar frame: brighter rim/specular (works for photos or initials) */
#about .avatar{
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
#about .avatar::before{ opacity: .95; }

/* Divider: a touch brighter so the “stack” reads */
#about .ab__rule{
  background: linear-gradient(to right, transparent, rgba(255,255,255,.26), transparent);
}

/* Enforce no animations/reveals inside About */
#about .reveal{ opacity: 1; transform: none; transition: none; }
/* === ABOUT — No‑seams policy (clean top + bottom) ===================== */
/* Kill the top lip and the bottom plinth drawn by About itself */
#about .ab__wrap::after,
#about.about::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Keep rhythm now that we removed the seam lifts */
#about.about{
  padding-top: clamp(64px, 8vw, 120px) !important;
  padding-bottom: clamp(64px, 8vw, 120px) !important;
}

/* =======================================================
   CONTACT — Light Slab (white) + Accessible Form
   id: #contact.contact--light
   ======================================================= */
#contact.contact--light{
  /* palette local to this section (mirrors your Services light slab) */
  --ct-ink: #0b0f10;
  --ct-ink-dim: rgba(11,15,16,.72);
  --ct-ink-faint: rgba(11,15,16,.52);
  --ct-stroke: rgba(11,15,16,.10);

  position: relative; isolation: isolate;
  color: var(--ct-ink);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,25,40,.10), rgba(225,25,40,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 60%, #eef3f8 100%); /* white slab */
  padding-block: clamp(76px, 10vw, 140px);
  overflow-x: clip; overflow-y: visible;
}

#contact .ct__wrap{ width: min(100% - 2rem, 1240px); margin: 0 auto; }

#contact .ct__lede{ max-width: 1000px; margin-bottom: clamp(24px, 4vw, 36px); }
#contact .ct__title{
  margin: 0 0 .4rem 0;
  font-family: var(--display-font);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: clamp(.18em, .7vw, .32em);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.06; color: var(--ct-ink);
}
#contact .ct__intro{
  margin: 0; color: var(--ct-ink-dim);
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.7;
}

/* Form card */
#contact .ct__form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: clamp(16px, 2vw, 18px);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  border: 1px solid var(--ct-stroke);
  border-radius: 14px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.05);
}
@media (max-width: 720px){
  #contact .ct__form{ grid-template-columns: 1fr; }
}

#contact .field{ display: grid; gap: 6px; }
#contact .field--full{ grid-column: 1 / -1; }

#contact label{
  font: 800 .74rem/1 "Inter", system-ui;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ct-ink-faint);
}
#contact .req{ color: var(--accent); margin-left: .25em; }

/* Inputs, selects, textareas */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="number"],
#contact input[type="file"],
#contact select,
#contact textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ct-stroke);
  background: #fff;
  color: var(--ct-ink);
  font: 600 1rem/1.2 "Inter", system-ui;
  padding: 12px 14px;
  outline: none;
  transition: border-color .08s ease, box-shadow .08s ease; /* static feel */
}
#contact input, #contact select{ height: 44px; }
#contact textarea{ min-height: 140px; resize: vertical; }

#contact input::placeholder,
#contact textarea::placeholder{ color: var(--ct-ink-faint); }

/* Focus treatment (visible, accessible) */
#contact input:focus-visible,
#contact select:focus-visible,
#contact textarea:focus-visible{
  border-color: rgba(225,25,40,.60);
  box-shadow: 0 0 0 3px rgba(225,25,40,.18);
}

/* Simple invalid cue (uses native validation) */
#contact :invalid:not(:focus):not(:placeholder-shown){
  border-color: rgba(225,25,40,.60);
}

/* File input button */
#contact input[type="file"]::file-selector-button{
  font: 700 .78rem/1 "Inter", system-ui;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ct-ink);
  background: rgba(0,0,0,.04);
  border: 1px solid var(--ct-stroke);
  border-radius: 8px;
  padding: 8px 10px; margin-right: 10px; cursor: pointer;
}

/* Checkbox row */
#contact .field--checkbox{ display: flex; align-items: end; }
#contact .check{
  display: inline-grid; grid-auto-flow: column; gap: .6rem; align-items: center;
  font-weight: 700; color: var(--ct-ink);
}
#contact .check input{ width: 18px; height: 18px; }

/* Actions */
#contact .form__actions{
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-top: 4px;
}
#contact .btn{
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: .6rem;
  height: 46px; padding: 0 16px; border-radius: 10px;
  font: 800 .82rem/1 "Inter", system-ui; letter-spacing: .10em;
  border: 1px solid rgba(0,0,0,.10); cursor: pointer; text-decoration: none;
}
#contact .btn--primary{
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 20px rgba(225,25,40,.20);
}
#contact .btn--primary svg{ opacity: .9; }

/* Status text */
#contact .form__meta{ margin: 0; color: var(--ct-ink-dim); font-weight: 600; }
#contact .form__meta a{ color: var(--ct-ink); text-underline-offset: 2px; }
#contact .form__status{
  margin: 6px 0 0 0; min-height: 1.2em; font-weight: 700;
  color: var(--ct-ink-dim);
}
#contact .form__status.is-ok{
  color: #0a7a33; /* success green */
}
#contact .form__status.is-err{
  color: #b30d1a; /* error red (close to accent) */
}
/* =======================================================
   FOOTER — Dark, clean, no seams
   id: #footer.site-footer
   ======================================================= */
.site-footer{
  position: relative; isolation: isolate;
  color: #fff;
  background: #0b0f10;                 /* matches site body */
  padding-block: clamp(48px, 8vw, 80px);
  border-top: 1px solid rgba(0,0,0,.08);/* crisp boundary under the white Contact slab */
  overflow-x: clip;
}
.ft__wrap{ width: min(100% - 2rem, 1240px); margin: 0 auto; }

/* Grid: brand, nav, contact */
.ft__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 900px){
  .ft__grid{ grid-template-columns: 1fr 1fr; }
  .ft__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .ft__grid{ grid-template-columns: 1fr; }
}

/* Brand / wordmark */
.ft__home{
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: .7rem;
  color: #fff; text-decoration: none;
}
.ft__logo{ height: 34px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.ft__wordmark{
  display: inline-flex; gap: .55rem;
  font-family: var(--display-font);       /* same display font */
  text-transform: uppercase; font-weight: 700; letter-spacing: .26em;
  font-size: .98rem; color: var(--ink-dim);
}
.ft__home:hover .ft__wordmark{ color: #fff; }
.ft__tag{ margin: .6rem 0 0 0; color: var(--ink-faint); }

/* Column headings */
.ft__h3{
  margin: 0 0 .6rem 0;
  font-family: var(--display-font); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 1.02rem;
}

/* Links / lists */
.ft__list{ margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.ft__list a,
.ft__social a,
.ft__legal a{
  color: var(--ink-dim);
  text-decoration: none;
  font-weight: 600; letter-spacing: .02em;
}
.ft__list a:hover,
.ft__social a:hover,
.ft__legal a:hover{ color: #fff; }

/* Contact */
.ft__addr{ font-style: normal; color: var(--ink-dim); }
.muted{ color: var(--ink-faint); }
.ft__social{ margin: .6rem 0 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }

/* Bottom bar */
.ft__bar{
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
}
.ft__copy{ margin: 0; color: var(--ink-faint); font-weight: 600; }
.ft__legal{ margin: 0; padding: 0; list-style: none; display: flex; gap: 1rem; }

/* Accessibility helpers */
.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;
}
/* === HEADER — desktop nav right; hamburger mobile-only ================== */

/* Base: hide the hamburger unless we’re on mobile */
.header__right{ display: none !important; }

/* Desktop ( >1020px ): show the nav on the right, keep burger hidden */
@media (min-width: 1021px){
  .topnav{ display: flex !important; margin-left: auto; } /* push nav to the right */
  .header__inner{ justify-content: space-between; }       /* brand left, nav right */
  .header__right{ display: none !important; }             /* ensure burger stays off */
}

/* Mobile ( ≤1020px ): keep your existing rule that hides .topnav, show burger */
@media (max-width: 1020px){
  .header__right{ display: flex !important; }             /* hamburger visible on mobile */
}

/* Anchor target offset so fixed header never covers section titles */
section[id]{ scroll-margin-top: calc(var(--header-h-scrolled) + 8px); }
/* === HEADER — brand further left, desktop CTA, working mobile menu ===== */

/* Make the header container full-bleed and reduce left padding */
.site-header .header__inner{
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(8px, 3vw, 24px) !important;
  padding-right: clamp(8px, 3vw, 24px) !important;
}

/* Push links to the right */
.topnav{ margin-left: auto; }

/* Right cluster (CTA + burger) */
.header__right{ display: flex; align-items: center; gap: .8rem; }

/* Desktop CTA (hidden on mobile below) */
.header__cta{
  display: none;
  height: 40px; padding: 0 14px; border-radius: 10px;
  font: 800 .78rem/1 "Inter", system-ui; letter-spacing: .10em; text-transform: uppercase;
  background: var(--accent); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 18px rgba(225,25,40,.26);
}

/* Desktop: show nav + CTA; hide hamburger */
@media (min-width: 1021px){
  .topnav{ display: flex !important; }
  .header__cta{ display: inline-grid; }
  .header__right .hamburger{ display: none !important; }
}

/* Mobile: hamburger in bar; nav becomes an overlay when open */
@media (max-width: 1020px){
  .topnav{ display: none; }  /* hidden until menu opens */
  .header__cta{ display: none; }
  body.nav-open{ overflow: hidden; } /* lock scroll while menu is open */

  /* Mobile menu panel */
  .site-header.is-open .topnav{
    position: fixed; left: 0; right: 0;
    top: var(--mnav-top, var(--header-h)); bottom: 0;
    display: grid; align-content: start; gap: 14px;
    padding: 16px 20px 24px;
    background: linear-gradient(180deg, rgba(7,10,12,.98), rgba(7,10,12,.94));
    z-index: 59;
  }
  .site-header.is-open .topnav a{
    color: #fff; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; font-size: 1.02rem; padding: 10px 6px;
  }
  /* Make Contact stand out inside the panel */
  .site-header.is-open .topnav a[href="#contact"]{
    display: inline-block;
    padding: 12px 14px; border-radius: 10px;
    background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 20px rgba(225,25,40,.22);
    margin-top: 6px;
  }
}

/* Hamburger → X when open */
.hamburger__bar,
.hamburger__bar::before,
.hamburger__bar::after{
  transition: transform .25s ease, background .25s ease, top .25s ease;
}
.hamburger[aria-expanded="true"] .hamburger__bar{ background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__bar::before{ top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__bar::after{ top: 0; transform: rotate(-45deg); }

/* Fixed-header anchor offset for smooth scroll targets */
section[id]{ scroll-margin-top: calc(var(--header-h-scrolled) + 8px); }
/* === MOBILE MENU — overlay panel + burger → X ========================= */
@media (max-width: 1020px){
  /* Lock body scroll when the menu is open */
  body.nav-open { overflow: hidden; }

  /* Show the nav as a full-screen panel when header is open */
  .site-header.is-open .topnav{
    position: fixed;
    left: 0; right: 0;
    top: var(--mnav-top, var(--header-h)); /* sits right under the header */
    bottom: 0;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 20px 24px;
    background: linear-gradient(180deg, rgba(7,10,12,.98), rgba(7,10,12,.94));
    z-index: 59; /* header is 60 in your CSS */
  }
  .site-header.is-open .topnav a{
    color: #fff;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 1.02rem;
    padding: 10px 6px;
    text-decoration: none;
  }

  /* Burger transforms into X when expanded */
  .hamburger[aria-expanded="true"] .hamburger__bar{ background: transparent; }
  .hamburger[aria-expanded="true"] .hamburger__bar::before{ top: 0; transform: rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger__bar::after{  top: 0; transform: rotate(-45deg); }
}

/* Offset for anchor targets so the fixed header doesn't cover titles */
section[id]{ scroll-margin-top: calc(var(--header-h-scrolled) + 8px); }

/* Socials — mirror the left index fade behaviour */
.socials{
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* Use the same classes the index-nav uses */
.socials.is-out,
.socials.is-out-early,
.socials.is-earlyhide{
  opacity: 0;
  transform: translate(8px, -50%); /* nudge right while keeping the -50% centering */
  pointer-events: none;
}
/* === MOBILE SCROLL-TRAP KILLER (place LAST) ====================== */
/* 0) Always hint that vertical panning is intended */
.hero--cinematic { touch-action: pan-y; }

/* 1) Non-interactive hero layers must never capture touches */
.hero__image,
.hero__scrim,
.hero__glow,
.hero__texture,
.hero__ruler,
.hero__content::before {
  pointer-events: none !important;
}

/* Keep interactive things inside the hero usable */
.hero__content a,
.hero__content button { pointer-events: auto; }

/* 2) On touch devices, remove giant transforms & fragile filters */
@media (hover: none) and (pointer: coarse){
  /* Drop GPU nudge & headline translate—these trigger the trap on mobile */
  .hero__image   { transform: none !important; }
  .hero__content { transform: none !important; position: static !important; }

  /* Let the hero center the headline without transforms */
  .hero--cinematic{
    display: grid; place-items: center;
    isolation: auto;           /* avoid layering quirks on iOS */
    overflow: hidden;          /* keep your visuals clipped; safe now */
  }

  /* Backdrop filters + overflow on iOS can block root scroll; neutralize */
  .hero__content::before{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    /* (keeps readability from colors/opacity you already have) */
  }

  /* Optional: give the content a predictable width after we drop absolute centering */
  .hero__content{ width: min(100% - 2rem, 1100px); text-align: center; }
}

/* 3) Absolute failsafe (turn on only if you still see issues):
@supports (-webkit-touch-callout: none) {
  .hero--cinematic * { pointer-events: none !important; }
  .hero__content a { pointer-events: auto !important; }
}
*/