/* ==========================================================
   TMT Creative House — Stylesheet
   Palette, type, and spacing follow style-guide.md
   ========================================================== */

:root{
  --bg:#07080C;
  --panel:#0E1118;
  --surface:#12151D;
  --border:#1F2430;
  --navy:#1B3A6B;
  --navy-light:#3B6EC9;
  --red:#E23B3B;
  --text:#E9EDF5;
  --muted:#9AA4B8;
  --white:#FFFFFF;
  --accent:#E4FF4D;

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-6:48px;
  --space-8:64px;

  --radius:12px;
  --radius-sm:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth; scroll-padding-top:90px;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* legacy Edge/IE */
}
html::-webkit-scrollbar{display:none;} /* Chrome/Safari/Edge Chromium */

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body::-webkit-scrollbar{display:none;}

h1,h2,h3,h4{
  font-family:inherit;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 var(--space-2);
  line-height:1.1;
}
h2{font-size:clamp(1.9rem,3.2vw,2.6rem);}
h3{font-size:1.2rem;}
p{margin:0 0 var(--space-2); color:var(--muted);}
a{color:inherit; text-decoration:none;}

/* width:100% matters here: every stacked section (.hero, .impact-section,
   .work-section, ...) is a column-direction flex container so it can
   vertically center its content, and flex auto-margins (from margin:0 auto,
   just above) opt an item OUT of stretch sizing — without an explicit
   width, a .container would shrink to fit whatever's inside it instead of
   consistently filling up to max-width. That's exactly what made
   .impact-layout render narrower than .work-layout despite both using this
   same class: impact's content simply needs less horizontal space than
   work's carousel does, so only impact was visibly affected. */
.container{width:100%; max-width:1400px; margin:0 auto; padding:0 var(--space-3);}
.center{text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(7,8,12,0.85);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--border);
}
.nav-inner{
  max-width:1400px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-links{display:flex; gap:28px;}
.nav-links a{font-size:0.9rem; color:var(--text); opacity:.75; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{padding:10px 22px; font-size:0.85rem;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--text); display:block;}

.brand{display:flex; align-items:center; gap:8px; color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:0.03em; font-size:1rem;}
.brand-mark{font-size:1rem; line-height:1;}

/* ---------- Hero ---------- */
/* Scroll-stacked section cards: each major section is pinned to the top of
   the viewport (position:sticky) with an increasing z-index in scroll order,
   so instead of scrolling away, each new section rises up and covers the
   previous one — like a stack of cards. See the matching rules on
   .impact-section, .work-section, .results-section and .contact-section. */
.hero{
  position:sticky;
  top:0;
  z-index:1;
  min-height:100vh;
  display:flex;
  overflow:hidden;
  padding:100px 0 0;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(6,6,10,0.6) 0%, transparent 16%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7,8,12,0.85) 8%, transparent 22%),
    url("../img/hero-bg.webp");
  background-size:100% 100%, 100% 100%, cover;
  background-position:top, bottom, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-color:var(--bg);
  z-index:0;
}
.hero-inner{
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto; padding:0 var(--space-3);
  width:100%;
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:var(--space-4);
}
.hero-copy{max-width:620px; align-self:center; padding-top:0; padding-bottom:0; transform:translateY(20px);}
.hero-eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.75rem; font-weight:700;
  color:var(--text); margin:0 0 var(--space-3);
}
.eyebrow-dot{width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; flex:none;}
.hero-headline{
  text-transform:uppercase;
  font-size:clamp(2.6rem,5.2vw,4.6rem);
  line-height:1.02;
  letter-spacing:-0.01em;
  font-weight:800;
  color:var(--white);
  margin:0 0 var(--space-3);
}
.hero-headline .accent{color:var(--accent);}
.hero-sub{font-size:1.05rem; max-width:480px; color:var(--text); opacity:.82; margin:0 0 var(--space-4);}
.hero-sub .accent{color:var(--accent); font-weight:700; opacity:1;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.btn-arrow{display:inline-block; transition:transform .2s var(--ease);}
.btn-accent:hover .btn-arrow,
.btn-outline-accent:hover .btn-arrow{transform:translate(2px,-2px);}

.btn-accent,
.btn-outline-accent{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.02) 100%);
  background-color:rgba(18,20,16,0.4);
  color:var(--accent);
  border:1px solid rgba(228,255,77,0.5);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -10px 14px -10px rgba(0,0,0,0.5),
    0 8px 20px -8px rgba(0,0,0,0.5),
    0 0 14px rgba(228,255,77,0.12);
  transition:box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
}
.btn-accent::before,
.btn-outline-accent::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-65%; left:-15%;
  width:55%; height:180%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.55), transparent 72%);
  filter:blur(4px);
  transform:rotate(-18deg);
  opacity:.7;
  pointer-events:none;
}
.btn-accent{font-size:0.85rem;}
.btn-accent:hover,
.btn-outline-accent:hover{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.04) 100%);
  background-color:var(--accent);
  color:#0a0a08;
  border-color:rgba(228,255,77,0.9);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -10px 14px -10px rgba(0,0,0,0.3),
    0 10px 26px -6px rgba(0,0,0,0.55),
    0 0 26px rgba(228,255,77,0.55),
    0 0 56px rgba(228,255,77,0.28);
}

.hero-portrait{
  position:relative;
  justify-self:end;
  align-self:end;
  height:100%;
  display:flex;
  align-items:flex-end;
}
.hero-portrait img{
  display:block;
  height:clamp(480px,64vw,560px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}
.portrait-tag{
  position:absolute; top:30%; right:-8px;
  text-align:left;
  padding-left:12px;
  border-left:1px solid rgba(228,255,77,0.5);
}
.portrait-tag.reveal{
  opacity:0;
  transform:translateX(18px);
  transition:opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s;
}
.portrait-tag.reveal.in{opacity:1; transform:translateX(0);}
.portrait-name{display:block; font-weight:800; letter-spacing:0.04em; color:var(--accent); font-size:0.85rem; text-transform:uppercase; white-space:nowrap;}
.portrait-role{display:block; font-size:0.72rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;}

/* ---------- Impact ---------- */
#impact.impact-section{
  position:sticky; top:0; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg);
  padding:110px 0 var(--space-4);
  box-shadow:0 -40px 80px rgba(0,0,0,0.55);
  border-top:1px solid rgba(255,255,255,0.06);
}
.impact-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-6); align-items:start;}
.impact-eyebrow{
  display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; font-weight:700;
  color:var(--accent); margin:0 0 var(--space-3);
}
.impact-headline{
  font-family:'Anton', 'Inter', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1;
  letter-spacing:0.01em;
  color:var(--white);
  margin:0 0 var(--space-3);
}
.impact-headline .line{display:block;}
.impact-headline .accent{color:var(--accent);}
.impact-sub{font-size:1.05rem; max-width:520px; color:var(--text); opacity:.8; margin:0;}
.impact-sub .accent{color:var(--accent); opacity:1; font-weight:600;}

.impact-stats-stack{
  display:flex; flex-direction:column;
  max-width:480px;
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:20px;
  padding:0 var(--space-4);
}
.impact-stat-row{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) 0;
}
.impact-stat-row:not(:last-child){
  border-bottom:1px solid var(--border);
}
.impact-icon{
  flex:none;
  width:64px; height:64px;
  display:block;
  opacity:0; transform:scale(0.4);
  transition:opacity .45s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.impact-icon.in{opacity:1; transform:scale(1);}
.impact-stat-text{display:flex; flex-direction:column;}
.impact-num{
  display:block;
  font-size:clamp(2.4rem,4.4vw,3.2rem);
  font-weight:800;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  line-height:1.1;
}
.impact-label{display:block; font-size:1rem; color:var(--text); margin-top:2px;}
.impact-desc{display:block; font-size:0.82rem; color:var(--muted); margin-top:6px; max-width:320px;}

.impact-team{position:relative; margin-top:var(--space-4); min-height:130px;}
.impact-team-graphic{
  position:absolute; left:-8px; right:0; top:14px;
  width:100%; height:auto;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.7s cubic-bezier(.22,.61,.36,1) .15s;
}
.impact-team.reveal.in .impact-team-graphic{clip-path:inset(0 0 0 0);}
.impact-team-row{position:relative; z-index:1; display:flex; align-items:center; gap:14px;}
.impact-avatars{display:flex;}
.impact-avatar{
  width:76px; height:76px; border-radius:50%;
  background:#14150a; border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--text);
  margin-left:-18px;
  overflow:hidden;
  box-shadow:0 0 14px rgba(228,255,77,0.3);
}
.impact-avatar:first-child{margin-left:0;}
.impact-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.impact-team-text{font-size:0.92rem; color:var(--text); margin:0;}
.impact-team-text .accent{color:var(--accent); font-weight:600;}

/* ---------- Work ---------- */
#work.work-section{
  position:sticky; top:0; z-index:3;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:110px 0 var(--space-6);
  box-shadow:0 -40px 80px rgba(0,0,0,0.55);
  border-top:1px solid rgba(255,255,255,0.06);
}
.work-section{overflow:hidden;}
.work-section-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(6,6,10,0.94) 0%, rgba(6,6,10,0.8) 55%, rgba(6,6,10,0.35) 100%),
    url("../img/hero-bg.webp");
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-color:var(--bg);
}
.work-layout{position:relative; z-index:1; display:grid; grid-template-columns:300px 1fr; gap:var(--space-6); min-height:500px;align-items:center;}
.work-intro{padding-top:4px;}
.work-eyebrow{display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; font-weight:700; color:var(--accent); margin:0 0 var(--space-2);}
.work-headline{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,4vw,2.9rem); line-height:1; letter-spacing:0.01em; color:var(--white);
  margin:0 0 var(--space-2);
}
.work-headline .line{display:block;}
.work-headline .accent{color:var(--accent);}
.work-sub{font-size:0.95rem; color:var(--text); opacity:.8; margin:0 0 var(--space-3); max-width:320px;}
.work-sub .accent{color:var(--accent); opacity:1; font-weight:600;}

.work-showcase{min-width:0;}
.work-cards-wrap{position:relative; overflow:hidden;}
.work-cards{
  position:relative; z-index:1;
  display:flex;
  /* Keep physical cards relatively close — the transforms create the
     visual circular spacing. */
  gap:26px;
  align-items:flex-end;
  /* Vertical movement is now subtle (shallow arc), so this is modest —
     just enough room for the slight lift/dip, not a deep bowl. */
  padding:52px 90px 64px;
  overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  scrollbar-width:none;
  /* Wider perspective so the row reads as a level horizontal cover-flow
     rather than a tight, dramatically-bending bowl. */
  perspective:1200px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
}
.work-cards::-webkit-scrollbar{display:none;}
.work-card-media{
  position:relative;
  flex:0 0 clamp(200px,25vw,270px);
  aspect-ratio:9 / 16;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:12px;
  color:inherit; text-decoration:none;
  scroll-snap-align:center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:
    transform .65s cubic-bezier(.22,.61,.36,1),
    filter .65s cubic-bezier(.22,.61,.36,1),
    border-color .4s ease,
    box-shadow .5s ease;
  will-change:transform, filter;
}
/* Dimensions (flex-basis/aspect-ratio) never change — the 3D placement
   (rotate/scale/depth/brightness) is driven per-card from JS as a function
   of distance from the active card, so the carousel layout never jumps.
   No default `transform` here — JS owns it exclusively, so there's no
   conflicting value to transition from/to on first paint. */
.work-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
  pointer-events:none;
}
.work-card-media--featured{
  border-color:rgba(228,255,77,0.9);
  box-shadow:
    0 0 0 1px rgba(228,255,77,0.3),
    0 0 35px rgba(228,255,77,0.18),
    0 30px 70px rgba(0,0,0,0.65);
  filter:brightness(1.05);
}
.card-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 60%, transparent 100%);
  background-color:rgba(10,10,10,0.4);
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(0,0,0,0.4);
  transition:transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.work-card-media:hover .card-play{transform:translate(-50%,-50%) scale(1.08); background-color:var(--accent); color:#0a0a0a; border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 0 20px rgba(228,255,77,0.45);}
.card-bottom{position:relative; z-index:2; margin-top:auto; display:flex; flex-direction:column; gap:4px;}
.card-quote{color:var(--text); font-size:0.85rem; font-weight:600; line-height:1.3; margin:0 0 2px;}
.card-quote .accent{color:var(--accent);}
.card-views{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text); font-size:0.76rem; font-weight:600;
}
.card-title{font-size:0.98rem; color:var(--text); margin:0;}

/* ---------- Portfolio page (/work.html) ---------- */
/* Nav is fixed (~64px); this clears it without the old oversized gap. */
.work-all-section{padding:104px 0 var(--space-8); background:var(--bg);}
.work-all-back{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); font-size:0.85rem; margin-bottom:var(--space-3);
  transition:color .2s;
}
.work-all-back:hover{color:var(--accent);}

.portfolio-hero{margin-bottom:var(--space-5, 40px);}
/* Headline on one line, supporting copy sitting to its right (baseline-aligned),
   stacking under it only on narrow screens. */
.portfolio-hero-row{
  display:flex; align-items:flex-end; flex-wrap:wrap;
  gap:var(--space-3) var(--space-6);
}
.work-all-headline{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.4rem); line-height:1; letter-spacing:0.01em;
  color:var(--white); margin:0; white-space:nowrap;
}
.work-all-headline .accent{color:var(--accent);}
.portfolio-hero-sub{flex:1 1 300px; max-width:none; margin:0 0 6px; opacity:.85;}

/* Main tabs — Longform / Shortform. Two bold, minimal tabs with an animated
   accent underline; inactive stays muted. */
.portfolio-tabs{
  display:flex; gap:var(--space-5, 40px);
  margin-bottom:var(--space-6);
  border-bottom:1px solid var(--border);
}
.portfolio-tab{
  position:relative;
  padding:0 2px 14px;
  background:none; border:none; cursor:pointer;
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); letter-spacing:0.04em; line-height:1;
  color:var(--muted);
  transition:color .25s var(--ease);
}
.portfolio-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.portfolio-tab:hover{color:var(--text);}
.portfolio-tab.is-active{color:var(--accent);}
.portfolio-tab.is-active::after{transform:scaleX(1);}

/* Panels cross-fade on tab switch (JS toggles [hidden] + .is-active). */
.portfolio-panel{opacity:0; transition:opacity .3s var(--ease);}
.portfolio-panel.is-active{opacity:1;}
.portfolio-panel[hidden]{display:none;}
.portfolio-empty{color:var(--muted); padding:var(--space-6) 0; font-size:0.95rem;}

/* Internal category group inside a panel */
.portfolio-group{margin-bottom:var(--space-8);}
.portfolio-group:last-child{margin-bottom:0;}
.portfolio-group-title{
  display:flex; align-items:center; gap:16px;
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.45rem); letter-spacing:0.08em;
  color:var(--white); margin:0 0 var(--space-3);
}
.portfolio-group-title::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(228,255,77,0.45), rgba(255,255,255,0.04));
}

/* Portfolio grid — mixed vertical / horizontal cards */
.work-grid-all{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow:row dense;
  align-items:start;
  gap:var(--space-3);
}
.work-grid-all .work-card-media{
  aspect-ratio:9 / 16;
  transition:transform .4s var(--ease), filter .3s ease, border-color .3s ease,
             box-shadow .4s ease;
  will-change:auto;
}
.work-grid-all .work-card-media--horizontal{
  aspect-ratio:16 / 9;
  grid-column:span 2;
}
/* Static grid, not a carousel — JS never sets an inline transform here, so a
   plain hover lift works. */
.work-grid-all .work-card-media:hover{
  transform:translateY(-5px);
  border-color:rgba(228,255,77,0.6);
  box-shadow:
    0 0 0 1px rgba(228,255,77,0.18),
    0 24px 55px rgba(0,0,0,0.55),
    0 0 40px rgba(228,255,77,0.12);
}
.work-grid-all .work-card-media:hover .work-card-thumb{transform:scale(1.06);}
.work-grid-all .work-card-media--featured{transform:none;}
.work-grid-all .work-card-media--featured:hover{transform:translateY(-5px);}
.work-card-thumb{transition:transform .5s var(--ease);}

/* Portfolio CTA */
.portfolio-cta-section{padding:var(--space-8) 0 var(--space-6);}
.portfolio-cta{
  text-align:center; max-width:640px; margin:0 auto;
  padding:var(--space-6) var(--space-4);
  border:1px solid var(--border); border-radius:20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(228,255,77,0.08), transparent 60%),
    rgba(255,255,255,0.02);
}
.portfolio-cta-headline{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05; letter-spacing:0.01em;
  color:var(--white); margin:0 0 var(--space-2);
}
.portfolio-cta-headline .accent{color:var(--accent);}
.portfolio-cta-sub{color:var(--muted); margin:0 0 var(--space-4);}

/* ---------- Work card thumbnail (YouTube poster frame) ---------- */
/* Sits behind the ::after gradient overlay and the card-top/card-bottom
   content (both z-index:2), so it reads as the card background without
   changing any of the existing card layout. */
.work-card-thumb{
  position:absolute; inset:0; z-index:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  background:#12151d;
}
/* Fallback only if a video has no thumbnail at any size (dead/removed): show a
   branded dark panel rather than a broken-image icon or empty card. */
.work-card-thumb--failed{
  background:radial-gradient(120% 120% at 30% 20%, #1a1d27, #0b0c11);
}

/* ---------- Video modal (lazy YouTube player) ---------- */
/* The iframe is created only when a card is clicked and removed from the DOM
   on close, so nothing YouTube-related loads on first paint. */
.work-modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.work-modal.is-open{display:flex;}
.work-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(4,5,8,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.work-modal-dialog{
  position:relative; z-index:1;
  /* Width drives the box; height follows the 9:16 Shorts ratio and is capped
     to the viewport so the player never overflows on any screen. */
  width:min(92vw, calc(88vh * 9 / 16), 440px);
  aspect-ratio:9 / 16;
  max-height:88vh;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(228,255,77,0.35);
  box-shadow:
    0 0 0 1px rgba(228,255,77,0.14),
    0 40px 120px rgba(0,0,0,0.7),
    0 0 60px rgba(228,255,77,0.12);
  animation:workModalPop .4s cubic-bezier(.22,.61,.36,1);
}
/* Horizontal (16:9) videos: widen the dialog and switch the ratio so the
   player is never stretched or cropped. */
.work-modal--horizontal .work-modal-dialog{
  width:min(92vw, calc((88vh) * 16 / 9), 960px);
  aspect-ratio:16 / 9;
}
.work-modal-frame,
.work-modal-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.work-modal-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 60%, transparent 100%);
  background-color:rgba(10,10,10,0.5);
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(0,0,0,0.45);
  cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.work-modal-close:hover{
  transform:scale(1.08);
  background-color:var(--accent); color:#0a0a0a; border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 0 20px rgba(228,255,77,0.45);
}
body.work-modal-open{overflow:hidden;}
@keyframes workModalPop{
  from{opacity:0; transform:scale(0.92);}
  to{opacity:1; transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .work-modal-dialog{animation:none;}
}

/* ---------- Client Results ---------- */
#results.results-section{
  position:sticky; top:0; z-index:4;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:110px 0 var(--space-6);
  box-shadow:0 -40px 80px rgba(0,0,0,0.55);
  border-top:1px solid rgba(255,255,255,0.06);
}
.results-section{background:var(--bg);}
.results-layout{display:grid; grid-template-columns:300px 1fr; gap:var(--space-6); align-items:start; min-height:410px;}
.results-eyebrow{display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; font-weight:700; color:var(--accent); margin:0 0 var(--space-3);}
.results-headline{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1; letter-spacing:0.01em; color:var(--white);
  margin:0;
}
.results-headline .line{display:block;}
.results-headline .accent{color:var(--accent);}
.results-underline{display:block; width:40px; height:3px; background:var(--accent); margin:var(--space-3) 0 var(--space-4);}
.results-sub{font-size:0.98rem; color:var(--text); opacity:.82; margin:0 0 var(--space-4); max-width:340px;}
.results-sub .accent{color:var(--accent); opacity:1; font-weight:700;}

.results-main{min-width:0;}
.results-label{
  text-transform:uppercase; letter-spacing:0.08em; font-size:0.85rem; font-weight:700;
  color:var(--text); margin:0 0 var(--space-3);
}

.results-testimonials{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-bottom:var(--space-6);}
.results-testimonial{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px; padding:var(--space-4);
}
.results-quote-mark{color:var(--accent); font-family:Georgia,serif; font-size:2.4rem; line-height:1; margin-bottom:4px;}
.results-quote{font-size:0.92rem; color:var(--text); opacity:.9; line-height:1.55; margin:0 0 var(--space-4); flex:1;}
.results-quote .accent{color:var(--accent); opacity:1; font-weight:700;}
.results-testimonial-divider{height:1px; background:var(--border); margin:0 0 var(--space-3);}
.results-person{display:flex; align-items:center; gap:12px;}
.results-avatar{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--accent); font-size:0.9rem;
}
.results-person strong{display:block; font-size:0.86rem; color:var(--text); font-weight:700;}
.results-person small{display:block; font-size:0.76rem; color:var(--muted); margin-top:2px;}

/* Full-bleed marquee — breaks out of .container to span the entire viewport
   width, with the logo track duplicated back-to-back and animated in a
   continuous leftward loop (seamless: the second copy is pixel-identical). */
.results-logos-marquee{
  position:relative;
  padding-top:var(--space-4);
  border-top:1px solid var(--border);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.results-logos-label{max-width:1400px; margin:0 auto var(--space-3); padding:0 var(--space-3);}
.results-logos-track{
  display:flex; width:max-content;
  animation:results-logos-scroll 28s linear infinite;
}
.results-logos-group{
  display:flex; align-items:center; flex:none;
  gap:var(--space-6);
  padding:0 var(--space-3);
}
.results-logos-group span{
  color:var(--muted); font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  font-size:1.05rem; opacity:.55; white-space:nowrap; transition:opacity .2s, color .2s;
}
.results-logos-group span:hover{opacity:1; color:var(--text);}
@keyframes results-logos-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .results-logos-track{animation:none;}
}


/* ---------- Contact ---------- */
/* Fixed to one viewport, matching the other stacked cards (e.g. #results).
   The footer is a separate element (see .site-footer-section below), not a
   child of this section, so it can rise up and cover it independently. */
#contact.contact-section{
  position:sticky; top:0; z-index:5;
  height:100vh;
  background:var(--bg);
  padding:98px 0;
  box-shadow:0 -40px 80px rgba(0,0,0,0.55);
  border-top:1px solid rgba(255,255,255,0.06);
}
.contact-section{overflow:hidden;}
/* Blur amount is set inline (main.js), proportional in real time to how
   much of the footer has scrolled into view — 10% of the footer visible
   means 10% of the max blur here, and so on up to fully covered. It lives
   on this wrapper, one level below #contact, rather than directly on
   #contact: a filter on a position:sticky element breaks its sticky
   positioning in Chromium (the browser stops tracking it correctly against
   the viewport once filtered), so it has to be a level down. No CSS
   transition here on purpose — it's already updated every scroll frame, so
   easing it would just make it visibly lag behind the real scroll position. */
.contact-blur-layer{
  position:relative;
  height:100%;
}
.contact-bg{
  position:absolute; z-index:0;
  /* .contact-blur-layer is only as tall as #contact's content box, so bleed the
     background up/down past the section's vertical padding (98px) to fill the
     whole section. #contact has overflow:hidden, so the excess is clipped. */
  top:-98px; right:0; bottom:-98px; left:0;
  background:
    radial-gradient(45% 55% at 10% 95%, rgba(140,60,230,0.32), transparent 70%),
    radial-gradient(40% 50% at 28% 65%, rgba(230,60,60,0.24), transparent 70%),
    var(--bg);
}
.contact-layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.05fr; grid-template-rows:1fr;
  gap:var(--space-6); align-items:stretch;
  height:100%;
}
.contact-intro{display:flex; flex-direction:column; justify-content:center; min-height:0;}
.contact-eyebrow{display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; font-weight:700; color:var(--accent); margin:0 0 var(--space-3);}
.contact-headline{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1; letter-spacing:0.01em; color:var(--white);
  margin:0;
}
.contact-headline .line{display:block;}
.contact-headline .accent{color:var(--accent);}
.contact-underline{display:block; width:40px; height:3px; background:var(--accent); margin:var(--space-3) 0 var(--space-4);}
.contact-sub{font-size:0.98rem; color:var(--text); opacity:.82; margin:0 0 var(--space-4); max-width:420px;}
.contact-sub .accent{color:var(--accent); opacity:1; font-weight:700;}

/* Premium dark glass panel — subtle, not "frosted windows glass": low blur,
   near-invisible border, a soft outer shadow and a hairline inner highlight
   along the top edge to read as glass without looking gradient-heavy. */
.contact-form-wrap{
  position:relative;
  width:100%;
  max-width:850px;
  height:100%;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:rgba(12,14,20,0.72);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid rgba(150,165,190,0.20);
  border-radius:24px;
  padding:40px 40px 36px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.contact-form-wrap::-webkit-scrollbar{display:none;}

.contact-form-top{display:flex; align-items:center; justify-content:space-between; margin:0 0 12px;}
.contact-form-kicker{
  display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.7rem; font-weight:700;
  color:var(--accent); margin:0;
}
.contact-form-kicker-line{width:22px; height:1.5px; background:var(--accent); display:inline-block;}
.contact-form-step{text-transform:uppercase; letter-spacing:0.08em; font-size:0.7rem; color:var(--muted); margin:0;}
.contact-form-title{font-size:1.35rem; font-weight:800; color:var(--white); margin:0 0 8px; line-height:1.3;}
.contact-form-desc{font-size:0.85rem; color:var(--muted); margin:0 0 32px;}

.contact-row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
.contact-field{position:relative; margin-bottom:28px;}
.contact-row-2 .contact-field{margin-bottom:0;}
.contact-field input{
  width:100%; height:62px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(120,140,170,0.22);
  border-radius:16px;
  color:#E8EAF0;
  padding:0 20px;
  font-family:inherit; font-size:0.9rem;
  transition:border-color .2s, box-shadow .2s;
}
.contact-field textarea{
  width:100%;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(120,140,170,0.22);
  border-radius:16px;
  color:#E8EAF0;
  padding:20px;
  font-family:inherit; font-size:0.9rem;
  transition:border-color .2s, box-shadow .2s;
}
.contact-field input:hover,
.contact-field textarea:hover{border-color:rgba(120,140,170,0.4);}
.contact-field input:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:rgba(220,255,60,0.65);
  box-shadow:0 0 0 3px rgba(220,255,60,0.08);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:rgba(210,215,225,0.60);}
.field-icon{position:absolute; top:50%; right:20px; transform:translateY(-50%); color:rgba(154,164,184,0.8); pointer-events:none; display:flex;}
.field-icon--textarea{top:20px; right:auto; left:20px; transform:none;}
.contact-textarea-wrap textarea{padding-left:48px;}

.contact-field-label{font-size:0.78rem; color:var(--text); opacity:.75; margin:0 0 8px;}
.contact-section-label{
  text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem; font-weight:700;
  color:var(--text); opacity:.8; margin:0 0 16px;
}
.required-mark{color:#ff5c5c;}

.contact-textarea-wrap{position:relative; margin-bottom:32px;}
.contact-textarea-wrap textarea{resize:vertical; min-height:144px; padding-bottom:32px;}
.contact-char-count{
  position:absolute; bottom:14px; right:20px;
  font-size:0.7rem; color:var(--muted); pointer-events:none;
}

.contact-option-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px;}
.contact-option-card{
  position:relative; cursor:pointer;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  min-height:104px; padding:20px; border-radius:16px;
  border:1px solid rgba(120,140,170,0.22); background:rgba(255,255,255,0.02);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.contact-option-card input{position:absolute; opacity:0; width:0; height:0;}
.contact-option-card:hover{border-color:rgba(120,140,170,0.4); background:rgba(255,255,255,0.035);}
.contact-option-card:has(input:checked){
  border-color:#DFFF3C; background:rgba(220,255,60,0.06);
  box-shadow:0 0 24px rgba(220,255,60,0.10);
}
.contact-option-icon{
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(120,140,170,0.3); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.contact-option-card:has(input:checked) .contact-option-icon{border-color:var(--accent); color:var(--accent);}
.contact-option-title{font-size:0.85rem; font-weight:700; color:var(--white);}
.contact-option-card:has(input:checked) .contact-option-title{color:var(--accent);}
.contact-option-desc{font-size:0.7rem; color:var(--muted); line-height:1.35;}

.contact-pill-group{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px;}
.contact-pill{position:relative; cursor:pointer;}
.contact-pill input{position:absolute; opacity:0; width:0; height:0;}
.contact-pill span{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; padding:0 30px; border-radius:999px;
  border:1px solid rgba(120,140,170,0.22); color:var(--text); background:rgba(255,255,255,0.02);
  font-size:0.85rem; transition:all .2s;
}
.contact-pill:hover span{border-color:rgba(120,140,170,0.4);}
.contact-pill input:checked + span{
  border-color:#DFFF3C; color:var(--accent); background:rgba(220,255,60,0.05);
  box-shadow:0 0 12px rgba(220,255,60,0.15);
}

.contact-submit{
  width:100%; justify-content:center;
  height:64px; margin-bottom:24px;
  font-size:0.85rem; letter-spacing:0.1em;
  box-shadow:0 8px 30px rgba(228,255,77,0.22);
}
.contact-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 38px rgba(228,255,77,0.32);
}
.contact-submit[disabled]{opacity:.65; cursor:default; transform:none; box-shadow:0 8px 30px rgba(228,255,77,0.14);}
.contact-form-status{
  margin:-12px 0 24px; font-size:0.85rem; font-weight:600; line-height:1.4;
}
.contact-form-status--ok{color:var(--accent);}
.contact-form-status--error{color:var(--red);}

/* Three equal-width cells so the divider lines land at exactly 1/3 and 2/3 —
   equal distance from each other and from the row edges. */
.contact-trust-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  padding-top:8px; border-top:1px solid var(--border);
}
.contact-trust-item{
  display:flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--muted);
  white-space:nowrap;
  padding:2px 14px;
  border-right:1px solid var(--border);
}
.contact-trust-item:first-child{padding-left:0;}
.contact-trust-item:nth-child(2){justify-content:center;}
.contact-trust-item:last-child{justify-content:flex-end; padding-right:0; border-right:none;}
.contact-trust-icon{color:var(--accent); display:flex; flex:none;}

/* Standalone footer — a sibling of #contact, not nested inside it, so it
   can rise up and cover the (blurred) contact card at the very end of the
   scroll instead of scrolling away together with it. Sits above #contact
   in the stacking order (z-index) but keeps its own natural, compact
   height rather than filling the full viewport like the card sections. */
.site-footer-section{
  position:relative; z-index:6;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid var(--border);
  box-shadow:0 -30px 60px rgba(0,0,0,0.6);
}
/* Faint diagonal glow + arc in the top-left corner, matching the reference
   footer — decorative only, kept subtle enough not to compete with content. */
.site-footer-section::before{
  content:""; position:absolute; z-index:0;
  top:-60%; left:-15%; width:60%; height:220%;
  background:radial-gradient(ellipse at center, rgba(228,255,77,0.14), transparent 70%);
  pointer-events:none;
}
.site-footer{
  position:relative; z-index:1;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4);
  padding:var(--space-4) 0 var(--space-3);
}
.footer-brand{flex:1 1 220px; min-width:200px;}
.footer-logo{
  font-family:'Anton','Inter',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:1.5rem; line-height:1; color:var(--white); margin:0 0 5px;
  display:flex; flex-direction:column;
}
.footer-logo span{font-family:'Inter',sans-serif; font-size:0.58rem; font-weight:700; letter-spacing:0.24em; color:var(--muted); margin-top:4px; text-transform:uppercase;}
.footer-tagline{font-size:0.8rem; color:var(--text); text-transform:uppercase; letter-spacing:0.04em; margin:0;}
.footer-tagline .accent{color:var(--accent); font-weight:700;}

.footer-divider{align-self:stretch; width:1px; background:var(--border); flex:none;}

.footer-info{display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4); flex:2 1 420px;}
.footer-info-item{display:flex; align-items:center; gap:10px; color:var(--text); transition:color .2s;}
a.footer-info-item:hover{color:var(--accent);}
a.footer-info-item:hover .footer-info-icon{border-color:var(--accent); color:var(--accent);}
.footer-info-icon{
  flex:none; width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--border); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.footer-info-text{display:flex; flex-direction:column; gap:2px;}
.footer-info-label{text-transform:uppercase; letter-spacing:0.08em; font-size:0.65rem; color:var(--muted);}
.footer-info-value{font-size:0.86rem; color:var(--text); white-space:nowrap;}

.footer-social{display:flex; flex-direction:column; gap:8px; flex:none;}
.footer-social p{text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem; color:var(--muted); margin:0;}
.footer-social-icons{display:flex; gap:10px;}
.footer-social-icons a{
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.footer-social-icons a:hover{border-color:var(--accent); color:var(--accent);}

.footer-bottom{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2);
  padding:var(--space-2) 0 var(--space-3);
  font-size:0.76rem; color:var(--muted);
}
.footer-legal{display:flex; gap:10px; align-items:center;}
.footer-legal a{color:var(--muted); transition:color .2s;}
.footer-legal a:hover{color:var(--text);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .impact-layout{grid-template-columns:1fr; gap:var(--space-4);}
  .impact-stats-stack{margin-top:var(--space-2);}
  .impact-team{margin-top:var(--space-4); min-height:0;}
  .impact-team-graphic{display:none;}
  .hero-inner{grid-template-columns:1fr; align-items:center; text-align:left;}
  .hero-copy{max-width:100%; align-self:auto; padding-bottom:0;}
  .hero-portrait{
    justify-self:center; align-self:auto; height:auto; margin-top:var(--space-4);
  }
  .hero-portrait img{height:clamp(360px,80vw,520px);}
  .portrait-tag{
    position:static; text-align:left; margin-top:var(--space-3);
    border-right:none; border-left:2px solid var(--accent); padding-left:12px; padding-right:0;
  }
  .work-layout{grid-template-columns:1fr;}
  .work-intro{max-width:520px;}
  /* Portfolio: headline + supporting copy stack, headline may wrap. */
  .work-all-headline{white-space:normal;}
  .portfolio-hero-sub{max-width:none;}
  .work-grid-all .work-card-media--horizontal{grid-column:span 2;}
  .results-layout{grid-template-columns:1fr;}
  .results-testimonials{grid-template-columns:1fr; gap:var(--space-3);}
  /* Below the 2-column breakpoint the intro/form pairing no longer works as
     a fixed-height row (they stack instead), so drop the fit-to-screen /
     internal-scroll treatment and let the card grow naturally like before. */
  #contact.contact-section{height:auto; min-height:100vh;}
  .contact-blur-layer{height:auto;}
  .contact-layout{
    grid-template-columns:1fr; grid-template-rows:none;
    height:auto; align-items:start;
  }
  .contact-intro{display:block;}
  .contact-form-wrap{height:auto; overflow-y:visible; padding:28px;}
  .contact-row-2{grid-template-columns:1fr;}
  .contact-option-grid{grid-template-columns:repeat(2,1fr);}
  .site-footer{flex-direction:column; align-items:flex-start; gap:var(--space-3);}
  .footer-divider{display:none;}
  .footer-info{flex-direction:column; align-items:flex-start; gap:var(--space-3); flex:none; width:100%;}
}

@media (max-width:640px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    background:var(--panel); border-bottom:1px solid var(--border);
    flex-direction:column; padding:var(--space-3); gap:var(--space-2);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-links.open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .hero{padding-top:100px;}
  .results-logos-group{gap:var(--space-4);}
  .contact-form-wrap{padding:20px;}
  .contact-option-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .contact-pill-group{gap:8px;}
  .contact-pill span{padding:0 20px;}
  .contact-trust-row{grid-template-columns:1fr; gap:10px;}
  .contact-trust-item{padding:0; border-right:none; justify-content:flex-start;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}

  /* Portfolio: single-column grid; keep each video's own orientation. */
  .work-grid-all{grid-template-columns:1fr;}
  .work-grid-all .work-card-media--horizontal{grid-column:auto;}
  .portfolio-tabs{gap:var(--space-4);}
}