/* ═══════════════════════════════════════════════════
   BLACK WAVE STUDIO — styles.css v6
   Sticky-stack layers with working nav anchoring.
   Deduplicated. Mobile work section fixed.
═══════════════════════════════════════════════════ */

:root {
  --ink:        #031927;
  --green:      #5e8c61;
  --green-lt:   #7aad7e;
  --peach:      #f5bca3;
  --cherry:     #5a0001;
  --white:      #ffffff;
  --off:        #f8f6f2;

  --soft-ink:   rgba(3,25,39,0.65);
  --soft-white: rgba(255,255,255,0.68);
  --rule-dark:  rgba(3,25,39,0.12);
  --rule-light: rgba(255,255,255,0.15);

  --font:  'Inter', Arial, Helvetica, sans-serif;
  --ease:  cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--ink); }
body {
  margin:0; font-family:var(--font); color:var(--white);
  background:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
img,video { display:block; max-width:100%; }
::selection { background:var(--green); color:var(--white); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ─── GRAIN ─── */
.hero-grain,.section-grain {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; opacity:0.04; mix-blend-mode:overlay;
}
.hero-grain { opacity:0.05; mix-blend-mode:multiply; }

/* ─── TYPE ─── */
h1,h2,h3 { margin:0; line-height:0.88; letter-spacing:-0.03em; text-transform:uppercase; font-weight:900; }
h1 { font-size:clamp(2.8rem,5.6vw,7.2rem); margin-bottom:1.5rem; }
h2 { font-size:clamp(2.4rem,6vw,5.8rem); margin-bottom:2rem; }
p  { margin-top:0; }

.eyebrow,.section-kicker {
  display:inline-flex; align-items:center; gap:0.65rem;
  margin-bottom:1.4rem; font-size:0.71rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
}
.eyebrow::before,.section-kicker::before {
  content:""; width:2.2rem; height:1px; background:currentColor; flex-shrink:0;
}
.kicker-green  { color:var(--green); }
.kicker-ink    { color:var(--ink); }
.kicker-cherry { color:var(--cherry); }

/* ─── BUTTONS ─── */
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  min-height:3rem; padding:0.85rem 1.5rem;
  border:1.5px solid currentColor; border-radius:3px;
  background:transparent; color:inherit;
  font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  transition:background 200ms ease,color 200ms ease,transform 200ms var(--ease),border-color 200ms ease;
  cursor:pointer;
}
.button:hover { transform:translateY(-3px); }
.button-green { background:var(--green); color:var(--white); border-color:var(--green); }
.button-green:hover { background:var(--green-lt); border-color:var(--green-lt); }
.button-ghost { color:rgba(3,25,39,0.7); border-color:rgba(3,25,39,0.25); }
.button-ghost:hover { color:var(--ink); border-color:var(--ink); }

/* ─── HEADER ─── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(248,246,242,.18);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:background .35s ease,box-shadow .35s ease;
}
.site-header.is-scrolled {
  background:rgba(248,246,242,.92);
  box-shadow:0 10px 30px rgba(3,25,39,.08);
}
.header-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.2rem 2rem; max-width:1400px; margin:0 auto;
}
.brand-mark { font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:var(--ink); }
.nav-links { display:flex; gap:2rem; align-items:center; margin-left:auto; }
.nav-links a { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); opacity:.7; transition:opacity .25s ease,color .25s ease; }
.nav-links a:hover { opacity:1; color:var(--green); }
.nav-cta { background:var(--green); color:#fff; border:none; padding:.75rem 1.2rem; border-radius:3px; font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.nav-cta:hover { background:var(--green-lt); }
.mobile-nav-cta { display:none; }

.menu-toggle { display:none; background:none; border:none; position:relative; width:42px; height:42px; }
.menu-toggle span:not(.sr-only) { position:absolute; left:10px; width:22px; height:2px; background:var(--ink); transition:transform 220ms ease,opacity 220ms ease,top 220ms ease; }
.menu-toggle span:nth-child(1) { top:12px; }
.menu-toggle span:nth-child(2) { top:20px; }
.menu-toggle span:nth-child(3) { top:28px; }
.site-header.menu-open .menu-toggle span:nth-child(1) { top:20px; transform:rotate(45deg); }
.site-header.menu-open .menu-toggle span:nth-child(2) { opacity:0; }
.site-header.menu-open .menu-toggle span:nth-child(3) { top:20px; transform:rotate(-45deg); }

/* ─── HERO ─── */
.hero {
  position:relative; width:100%; min-height:115vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; padding:9rem 2rem 6rem;
  background:var(--off); color:var(--ink); text-align:center;
}
.hero-mesh {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 18% 28%,rgba(94,140,97,0.2) 0%,transparent 70%),
    radial-gradient(ellipse 50% 45% at 82% 68%,rgba(245,188,163,0.22) 0%,transparent 65%),
    radial-gradient(ellipse 38% 32% at 58% 18%,rgba(90,0,1,0.07) 0%,transparent 60%);
}
.hero-copy   { position:relative; z-index:3; width:min(100%,88rem); }
.hero .eyebrow { color:var(--cherry); justify-content:center; }
.headline-line { display:block; overflow:hidden; white-space:nowrap; }
.hero-word   { display:inline-block; padding-right:0.12em; will-change:transform,opacity; }
.hero-letter { display:inline-block; will-change:transform,opacity; }
.hero-subtext {
  position:relative; z-index:3; max-width:44rem; margin:0 auto;
  color:var(--soft-ink); font-size:clamp(1rem,1.45vw,1.18rem); line-height:1.78;
}
.button-row {
  position:relative; z-index:3; display:flex; flex-wrap:wrap;
  justify-content:center; gap:0.85rem; margin-top:2.2rem;
}
.hero-orbit { position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; }
.hero-orbit span { position:absolute; border-radius:50%; border:1px solid rgba(3,25,39,0.09); }
.hero-orbit span:nth-child(1) { width:min(88vw,78rem); height:min(36vw,28rem); }
.hero-orbit span:nth-child(2) { width:min(66vw,56rem); height:min(24vw,18rem); border-color:rgba(94,140,97,0.18); }

/* ═══════════════════════════════════════════════════
   STACKED STICKY LAYERS
   .layer-wrap  → normal-flow block, defines the REAL document
                  position used for nav anchoring (id lives here)
   .layer-sticky → the visually pinned panel inside it
   This split is what makes nav-link scrolling reliable: anchor
   targets are never sticky elements themselves, so their
   offsetTop is always stable regardless of scroll/pin state.
═══════════════════════════════════════════════════ */
.layer-wrap {
  position:relative;
  min-height:100vh;
}
.layer-sticky {
  position:sticky;
  top:0;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  /* --wipe-top: percentage of the section still clipped away from
     the top. Starts at 100 (fully hidden, previous section fully
     visible beneath) and eases down to 0 (fully revealed) as the
     user scrolls through this section. Driven by JS — see
     setupLayerWipe() in script.js — which remaps raw scroll
     progress through an easing curve before writing this value,
     producing the slow-fast-slow cover speed. Using clip-path
     (a hard edge) rather than opacity is what sells the
     "card sliding over card" feel instead of a cross-fade. */
  --wipe-top: 100;
  clip-path: inset(calc(var(--wipe-top) * 1%) 0 0 0);
  will-change: clip-path;
}
.layer-inner {
  position:relative; z-index:2;
  width:100%;
  max-width:1200px; margin:0 auto;
  padding:clamp(5.5rem,9vw,8rem) clamp(1.4rem,5vw,5rem) clamp(4rem,7vw,6rem);
}

/* z-index ladder — each layer covers the one before as it scrolls over it */
#intro    .layer-sticky { z-index:10; }
#services .layer-sticky { z-index:11; }
.work                   { position:relative; z-index:12; }
#clients  .layer-sticky { z-index:13; }
#about    .layer-sticky { z-index:14; }
#cta      .layer-sticky { z-index:15; }

/* section colours */
.section-ink    { background:var(--ink);    color:var(--white); }
.section-green  { background:var(--green);  color:var(--white); }
.section-cherry { background:var(--cherry); color:var(--white); }
.section-white  { background:var(--white);  color:var(--ink); }

/* body text muting */
.section-ink    p:not(.section-kicker):not(.founder-role),
.section-green  p:not(.section-kicker),
.section-cherry p:not(.section-kicker) { color:var(--soft-white); }
.section-white  p:not(.section-kicker):not(.founder-role) { color:var(--off); }

/* top shadow — cast-on-top-of-previous feel as each layer slides over */
.layer-sticky::before {
  content:""; position:absolute; top:0; left:0; right:0; height:8px; z-index:5;
  background:linear-gradient(to bottom,rgba(0,0,0,0.22),transparent);
  pointer-events:none;
}

/* ─── INTRO ─── */
.intro-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-top:1.5rem; }
.intro-right p { font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.82; max-width:36rem; }
.intro-tags { display:flex; gap:0.55rem; margin-top:2rem; flex-wrap:wrap; }
.intro-tags span {
  padding:0.5rem 0.9rem; border:1px solid var(--rule-light); border-radius:2px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}

/* ─── SERVICES ─── */
.services .layer-inner { text-align:center; }
.services-hl { font-size:clamp(2.6rem,5.5vw,5rem); max-width:85vw; margin:0 auto 3rem; text-align:center; line-height:0.9; }
.service-list { display:grid; border-top:1px solid rgba(255,255,255,0.25); max-width:80vw; margin:0 auto; text-align:left; }
.service-link {
  display:grid; grid-template-columns:4rem 1fr auto; gap:1.5rem; align-items:center;
  padding:1.8rem 1rem; border:none; border-bottom:1px solid rgba(255,255,255,0.2);
  background:transparent; color:var(--white); text-align:left; cursor:pointer;
  position:relative; overflow:hidden; transition:color 280ms ease, padding-left 280ms ease;
}
.service-link::before {
  content:""; position:absolute; inset:0; background:var(--white);
  transform:translateX(-101%); transition:transform 380ms cubic-bezier(0.22,1,0.36,1); z-index:0;
}
.service-link:hover::before  { transform:translateX(0); }
.service-link:hover          { color:var(--green); padding-left:1.6rem; }
.service-link:hover .service-num   { color:var(--green); }
.service-link:hover .service-arrow { color:var(--green); transform:translateX(6px); }
.service-num,.service-name,.service-arrow { position:relative; z-index:1; }
.service-num { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.5); transition:color 280ms ease; }
.service-name { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-0.03em; line-height:1; text-transform:uppercase; }
.service-arrow { font-size:1.3rem; color:rgba(255,255,255,0.6); transition:transform 280ms ease,color 280ms ease; }

/* ═══════════════════════════════════════════════════
   WORK — consolidated (previously two conflicting
   rule sets; merged into one here)
═══════════════════════════════════════════════════ */
.work {
  background:var(--white);
  color:var(--ink);
  padding:clamp(3.5rem,5vw,5rem) 0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.work .layer-inner {
  max-width:none;
  padding:0 0 clamp(1.4rem,4vw,4rem);
}
.work-header {
  padding:0 clamp(1.4rem,4vw,4rem);
  margin-bottom:1.8rem;
}
.work-header h2 { color:var(--ink); margin-bottom:0.8rem; }

.filter-tabs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.6rem; }
.filter-tabs button {
  min-height:2.3rem; padding:0.5rem 0.9rem;
  border:1.5px solid rgba(3,25,39,0.18); border-radius:2px;
  background:transparent; color:rgba(3,25,39,0.6);
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; transition:all 180ms ease;
}
.filter-tabs button.active,
.filter-tabs button:hover { background:var(--green); border-color:var(--green); color:var(--white); }

.project-reel {
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  padding-bottom:1rem;
}
.project-reel::-webkit-scrollbar { height:6px; }
.project-reel::-webkit-scrollbar-thumb { background:rgba(3,25,39,0.18); border-radius:3px; }

.project-flex {
  display:flex; gap:1.4rem;
  width:max-content; min-width:100%;
  padding:0 clamp(1.4rem,4vw,4rem);
}
.project-card {
  position:relative; flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; border-radius:8px; padding:1.4rem;
  border:1px solid rgba(3,25,39,0.1);
  cursor:pointer;
  transition:transform 350ms ease, box-shadow 350ms ease;
}
.project-card.landscape{
  width:clamp(520px,42vw,700px);
    aspect-ratio:16/9;
}
.project-card.portrait{
  width:clamp(300px,24vw,380px);
    aspect-ratio:4/5;
}
.project-card.square{
  width:clamp(360px,28vw,480px);
    aspect-ratio:1/1;
}

.project-card:hover { transform:translateY(-10px); box-shadow:0 20px 60px rgba(0,0,0,.18); }
.project-card[hidden] { display:none; }

.project-art { position:absolute; inset:0; z-index:0; overflow: hidden; transition:transform 500ms var(--ease); }
.project-art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:top center;
    transition:transform .5s var(--ease);
}
.project-card:hover .project-art img{ transform:scale(1.06); }

.card-novamark .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%,rgba(94,140,97,.6),transparent 60%); }
.card-aurum .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%,rgba(200,130,26,.5),transparent 60%); }
.card-ignite .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,rgba(200,60,30,.5),transparent 55%); }
.card-apex .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 50%,rgba(26,100,160,.4),transparent 60%); }
.card-drift .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 40% 30%,rgba(160,80,220,.4),transparent 60%); }
.card-horizon .project-art::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%,rgba(80,160,120,.4),transparent 60%); }

.card-meta { position:relative; z-index:2; }
.card-meta p { margin-bottom:.2rem; font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgb(255, 255, 255); }
.card-meta h3 { font-size:clamp(1.6rem,2.5vw,2.4rem); line-height:1; color:var(--white); margin-bottom:.4rem; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.card-meta small { font-size:.7rem; color:rgba(255, 255, 255, 0.938); }
.project-card::before { content:''; position:absolute; inset:35% 0 0 0; z-index:1; background:linear-gradient(to bottom,transparent,rgba(0,0,0,.72)); }
.project-overlay-link{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    color:#fff;
    text-decoration:none;
    opacity:0;
    transition:.3s;
}
.project-card:hover .project-overlay-link{
    opacity:1;
}
.project-overlay-link span{
    padding:.8rem 1.2rem;
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    background:rgba(255,255,255,.1);
}
/* ─── CLIENTS ─── */

.clients h2{
    margin-bottom:2rem;
}
.client-strip{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--rule-light);
    border-left:1px solid var(--rule-light);
    margin-top:2rem;
}
.client-logo{
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    border-right:1px solid var(--rule-light);
    border-bottom:1px solid var(--rule-light);
}
.client-logo img{
    max-width:75%;
    max-height:55px;
    width:auto;
    height:auto;
    object-fit:contain;
    opacity:.75;
    filter:brightness(0) invert(1);
    transition:
        opacity .35s ease,
        transform .35s ease;
}   
.logo-edgience img{
    max-height:90px;
}     
.logo-kavery img{
    max-height:90px;
}
.logo-mb img{
    max-height:85px;
}
.logo-voltek img{
    max-height:55px;
}
.logo-wesper img{
    max-height:150px;
}

.client-logo:hover img{
    opacity:1;
    transform:scale(1.05);
}

/* ─── ABOUT ─── */
.founder .layer-inner { position:relative; z-index:3; }
.founder-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-top:1.5rem; }
.founder-card { border-left:5px solid var(--cherry); background:var(--off); border-radius:0 4px 4px 0; padding:2rem; }
.founder-role { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cherry) !important; margin-bottom:.4rem; }
.founder-name { font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:900; letter-spacing:-.03em; text-transform:uppercase; line-height:1; margin-bottom:1.4rem; color:var(--ink); }
.founder-card blockquote { margin:0; font-size:1.1rem; line-height:1.65; color:var(--soft-ink) !important; font-style:italic; }

/* ─── CTA ─── */
.cta { text-align:center; overflow:hidden; }
.cta-content { position:relative; z-index:2; width:100%; }
.cta h2 { margin-bottom:1.4rem; }
.cta p { max-width:36rem; margin:0 auto 2.5rem; font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.72; }
.cta-marquee {
  position:absolute; top:1.2rem; left:0; display:flex; width:200%;
  color:rgba(255,255,255,.07); font-size:clamp(3rem,7.5vw,5rem);
  font-weight:900; letter-spacing:-.04em; text-transform:uppercase; white-space:nowrap;
  pointer-events:none; z-index:1; line-height:1;
}

/* ─── DRAWER ─── */
.drawer-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(3,25,39,.55); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity 350ms ease;
}
.drawer-overlay.is-open { opacity:1; pointer-events:all; }
.contact-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:301;
  width:min(480px,100vw); background:var(--off); color:var(--ink);
  transform:translateX(100%); transition:transform 420ms var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.contact-drawer.is-open { transform:translateX(0); }
.drawer-close {
  position:absolute; top:1.3rem; right:1.3rem;
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border:1px solid var(--rule-dark); border-radius:3px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background 180ms ease; z-index:10;
}
.drawer-close:hover { background:rgba(3,25,39,.08); }
.drawer-inner { padding:3.5rem 2rem 2.5rem; }
.drawer-kicker {
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:.65rem; display:flex; align-items:center; gap:.55rem;
}
.drawer-kicker::before { content:''; width:1.8rem; height:1px; background:currentColor; flex-shrink:0; }
.drawer-hl {
  font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:900;
  letter-spacing:-.03em; text-transform:uppercase; line-height:.9;
  margin-bottom:2rem; color:var(--ink);
}
.drawer-form { display:grid; gap:1rem; }
.drawer-form label { display:grid; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--soft-ink); }
.drawer-form input,.drawer-form select,.drawer-form textarea {
  width:100%; padding:.8rem .9rem; border:1px solid var(--rule-dark); border-radius:3px;
  background:var(--white); color:var(--ink); font-size:.92rem; outline:none;
  transition:border-color 180ms ease;
}
.drawer-form input:focus,.drawer-form select:focus,.drawer-form textarea:focus { border-color:var(--green); }
.drawer-form textarea { resize:vertical; }
.drawer-submit {
  width:100%; padding:.95rem; margin-top:.4rem; background:var(--green); color:var(--white);
  border:none; border-radius:3px; font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; transition:background 200ms ease,transform 200ms ease;
}
.drawer-submit:hover { background:var(--green-lt); transform:translateY(-2px); }
.form-success {
  margin:0; padding:.85rem; background:rgba(94,140,97,.1); border:1px solid rgba(94,140,97,.28);
  border-radius:3px; color:var(--green); font-size:.86rem; font-weight:600; text-align:center;
}
.drawer-details {
  display:grid; gap:.45rem; margin-top:1.8rem; padding-top:1.3rem;
  border-top:1px solid var(--rule-dark); font-size:.78rem; font-weight:600; color:var(--soft-ink);
}
.drawer-details a:hover { color:var(--green); }

/* ─── FOOTER ─── */
.site-footer {
  position:relative; z-index:16;
  display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;
  padding:1.8rem 2.5rem; background:var(--ink); color:var(--soft-white);
  border-top:1px solid rgba(255,255,255,.07);
}
.site-footer strong { font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--white); }
.site-footer span   { font-size:.76rem; text-align:center; }
.site-footer nav    { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:1.2rem; font-size:.73rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.site-footer nav a  { opacity:.55; transition:opacity 180ms ease; }
.site-footer nav a:hover { opacity:1; }

.motion-item { will-change:transform,opacity; }

/* ─── RESPONSIVE ─── */
@media (max-width:1100px) {
  .intro-layout,.founder-grid { grid-template-columns:1fr; gap:2.5rem; }
  .client-strip { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:760px) {
  .header-row { padding:1rem 1.2rem; flex-wrap:wrap; }
  .menu-toggle { display:block; }
  .nav-cta { display:none; }

  .nav-links {
    display:none; width:100%; order:3; flex-direction:column;
    align-items:flex-start; margin:1rem 0 0; gap:0;
  }
  .nav-links.is-mobile-open {
    display:flex;
    padding:1rem 1.2rem;
    background:rgba(248,246,242,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(3,25,39,.08);
    border-radius:8px;
    box-shadow:0 20px 60px rgba(3,25,39,.15),0 1px 0 rgba(255,255,255,.8) inset;
    animation:navDropIn .25s ease both;
  }
  @keyframes navDropIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .nav-links a {
    width:100%; padding:1rem 0; border-bottom:1px solid rgba(3,25,39,.08);
    font-size:.92rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink); transition:padding-left .25s ease,color .25s ease;
  }
  .nav-links a:last-child { border-bottom:none; }
  .nav-links a:hover { color:var(--green); padding-left:12px; }

  .site-header.menu-open {
    background:rgba(248,246,242,.95);
    border-bottom:1px solid rgba(3,25,39,.08);
  }

  .mobile-nav-cta {
    display:block; margin-top:.4rem; text-align:center; padding:.8rem;
    background:var(--green); color:var(--white); font-weight:700; border-radius:3px;
  }

  /* Blur the page content behind the menu while it's open */
  body.menu-is-open main,
  body.menu-is-open .site-footer { opacity:.35; pointer-events:none; }
  main, .site-footer { transition:opacity 260ms ease; }

  .headline-line { white-space:normal; overflow:visible; }
  .hero { padding:8rem 1.25rem 4rem; }
  h1 { font-size:clamp(2.1rem,9.5vw,3.2rem); overflow-wrap:break-word; }
  .services-hl { font-size:clamp(1.9rem,8vw,2.6rem); max-width:92vw; overflow-wrap:break-word; }
  .service-name { font-size:clamp(1.2rem,6vw,1.6rem); overflow-wrap:break-word; }
  .service-link { grid-template-columns:3rem 1fr auto; gap:.8rem; }

  /* Sticky layers don't pin on mobile — too unpredictable with
     mobile browser chrome show/hide affecting viewport height,
     and the stacked-card effect reads poorly on small screens
     anyway. Falls back to normal block flow. The wipe-reveal
     clip-path is explicitly reset here too, since the JS that
     drives --wipe-top is skipped on mobile (isMobile check) —
     without this, content would default to clipped/hidden. */
  .layer-sticky { position:relative; min-height:auto; clip-path:none; }
  .layer-wrap { min-height:auto; }

  /* ── WORK: fixed mobile sizing (previously fought between two
     conflicting desktop rule sets cascading onto mobile) ── */
  .work { min-height:auto; }
  .work .layer-inner { padding-bottom:0; }
  .project-flex { gap:1.1rem; padding:0 1.25rem; }
  .project-card { width:78vw; max-width:320px; height:400px; }

  .client-strip { grid-template-columns:repeat(2,1fr); }
  .site-footer { grid-template-columns:1fr; }
  .site-footer nav { justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .layer-sticky { position:relative; clip-path:none; }
}