/* ============================================================
   ASHMAK MEDIA — Cinematic site stylesheet
   Palette: sky-blue key-light on bright daylight white
   Type: Poppins (display) + Lato (body)
   ============================================================ */

:root{
  --ink:        #f5f8fc;   /* page background */
  --ink-2:      #eaf1fa;   /* raised panels   */
  --ink-3:      #ffffff;   /* cards / inputs  */
  --bone:       #10192b;   /* primary text    */
  --mute:       #5b6579;   /* secondary text  */
  --tungsten:   #670e10;   /* brand maroon accent, matched to the logo */
  --tungsten-2: #4a0a0c;
  --line:       rgba(16,25,43,.12);
  --line-soft:  rgba(16,25,43,.07);
  --display:    "Poppins", "Segoe UI", system-ui, sans-serif;
  --body:       "Lato", "Segoe UI", system-ui, sans-serif;
  --mono:       "Courier New", ui-monospace, monospace;
  --max:        1180px;
  --radius:     10px;
  --shadow:     0 24px 60px rgba(16,25,43,.12);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--tungsten); color:var(--ink); }

.container{ width:min(var(--max), calc(100% - 48px)); margin-inline:auto; }

/* ---------- type scale ---------- */
h1,h2,h3,.display{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.5px; }
h1{ font-size:clamp(2.6rem, 6.4vw, 5rem); }
h2{ font-size:clamp(2rem, 4vw, 3.1rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
.lead{ color:var(--mute); font-size:1.06rem; max-width:56ch; }
.accent{ color:var(--tungsten); font-style:italic; }
/* keeps hyphenated words like "in-house." whole — a line may break before
   them, never across the hyphen */
.nowrap{ white-space:nowrap; }

/* eyebrow — slate-style label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--tungsten); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--tungsten); }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--tungsten), var(--tungsten-2));
  z-index:300; transition:width .12s linear;
}

/* ---------- skip link & focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:10px; z-index:200;
  background:var(--tungsten); color:var(--ink); padding:10px 18px; border-radius:6px;
  font-weight:700; font-size:.85rem;
}
.skip-link:focus{ left:10px; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--tungsten); outline-offset:3px; border-radius:4px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(245,248,252,.85);
  backdrop-filter:blur(14px);
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background:rgba(245,248,252,.92);
  box-shadow:0 1px 0 var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; flex-wrap:wrap; row-gap:10px;
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.brand-logo{ height:30px; width:auto; display:block; }
.brand-location{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.28em;
  color:var(--mute); text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:.86rem; font-weight:500; letter-spacing:.04em; color:var(--mute);
  transition:color .25s;
  position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--tungsten); transition:width .3s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--bone); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{
  border:1px solid var(--tungsten); color:var(--tungsten) !important;
  padding:10px 22px !important; border-radius:999px; font-weight:600;
  transition:background .25s, color .25s;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--tungsten); color:var(--ink) !important; }

.nav-toggle{
  display:none; background:var(--ink-3); border:1px solid var(--line);
  border-radius:6px; width:44px; height:40px; position:relative;
  box-shadow:0 1px 4px rgba(16,25,43,.08); transition:background .2s, border-color .2s;
}
.nav-toggle:hover{ border-color:var(--tungsten); }
.nav-toggle[aria-expanded="true"]{ background:var(--ink-2); border-color:var(--tungsten); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:11px; width:22px; height:2px;
  background:var(--bone); transition:transform .3s, opacity .3s;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ left:0; top:-7px; }
.nav-toggle span::after{ left:0; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — cinematic letterbox
   ============================================================ */
.hero{
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  padding:140px 0 90px;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2; transform-origin:center center;
  background:
    radial-gradient(1100px 640px at 78% 22%, rgba(103,14,16,.14), transparent 60%),
    radial-gradient(900px 600px at 12% 85%, rgba(90,140,220,.14), transparent 62%),
    linear-gradient(180deg, #f7fafd 0%, #eef4fc 55%, #f7fafd 100%);
  background-size:160% 160%;
  animation:auroraDrift 20s ease-in-out infinite alternate, heroZoom 17s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{ background-position:15% 10%; }
  50%{ background-position:60% 55%; }
  100%{ background-position:30% 80%; }
}
/* slow Ken-Burns style zoom, landing section only */
@keyframes heroZoom{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.12); }
}
/* film grain */
.hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
/* cursor-reactive spotlight */
.hero-spot{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(480px 480px at var(--mx,50%) var(--my,25%), rgba(103,14,16,.16), transparent 70%);
  opacity:0; transition:opacity .4s ease;
}
.hero:hover .hero-spot{ opacity:1; }
/* letterbox bars */
.hero::before,.hero::after{
  content:""; position:absolute; left:0; right:0; height:52px; background:var(--bone); z-index:1;
}
.hero::before{ top:0; } .hero::after{ bottom:0; }

.hero-inner{
  position:relative; z-index:2; display:grid;
  grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
/* Sized for the hero's half-width column: the global h1 clamp (5rem) forced
   "Crafting narrative" to wrap, turning the intended 2 lines into 4. */
.hero h1{ font-size:clamp(2.2rem, 4.6vw, 3.6rem); max-width:20ch; margin:8px 0 26px; }
.hero .lead{ margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* cinematic entrance — powering on */
.hero-inner .eyebrow,
.hero-inner h1,
.hero-inner .lead,
.hero-inner .hero-actions{
  opacity:0; transform:translateY(24px);
  animation:heroUp .85s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-inner .eyebrow{ animation-delay:.05s; }
.hero-inner h1{ animation-delay:.18s; }
.hero-inner .lead{ animation-delay:.34s; }
.hero-inner .hero-actions{ animation-delay:.5s; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

/* ---------- hero featured-work visual ---------- */
.hero-visual{
  position:relative; display:block; justify-self:center;
  opacity:0; transform:translateY(24px) rotate(3deg);
  animation:heroUp .85s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay:.62s;
  transition:transform .4s ease;
}
.hero-visual:hover{ transform:rotate(0deg) translateY(-4px); }
.hero-visual-frame{
  width:min(360px,80vw); aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; position:relative; border:1px solid var(--line);
  box-shadow:var(--shadow); transform:rotate(3deg); transition:transform .4s ease;
  background:
    radial-gradient(420px 420px at 70% 20%, rgba(103,14,16,.07), transparent 65%),
    var(--ink-2);
  display:grid; place-items:center; padding:36px;
}
.hero-visual:hover .hero-visual-frame{ transform:rotate(0deg); }
.hero-sketch{
  width:100%; height:100%; color:var(--tungsten);
  transition:transform .6s ease;
}
.hero-visual:hover .hero-sketch{ transform:scale(1.04); }
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
}


/* faint scanning sweep, ties the hero to a "recording" instrument feel */
.hero-scan{
  position:absolute; left:0; right:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(103,14,16,.55), transparent);
  top:12%; opacity:0;
  animation:scanSweep 7s ease-in-out infinite;
}
@keyframes scanSweep{
  0%{ top:14%; opacity:0; }
  6%{ opacity:.8; }
  50%{ top:86%; opacity:.45; }
  62%{ opacity:0; }
  100%{ top:86%; opacity:0; }
}

/* autofocus lock — brackets snap onto the frame once, like a camera confirming focus */
.af-lock{
  position:absolute; z-index:2; width:60px; height:60px;
  right:9%; top:38%; pointer-events:none;
  opacity:0; animation:afLock 3s ease-out forwards; animation-delay:1.15s;
}
.af-lock i{ position:absolute; width:14px; height:14px; border:2px solid var(--tungsten); }
.af-lock i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.af-lock i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.af-lock i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.af-lock i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
@keyframes afLock{
  0%{ opacity:0; transform:scale(1.7); }
  16%{ opacity:1; transform:scale(1.12); }
  26%{ transform:scale(1); }
  75%{ opacity:1; }
  100%{ opacity:0; transform:scale(.94); }
}
@media (max-width:900px){ .af-lock{ display:none; } }

.frame-corner{
  position:absolute; width:26px; height:26px; border:2px solid rgba(16,25,43,.28); z-index:2;
  opacity:0; animation:focusRack 1s cubic-bezier(.2,.9,.3,1) forwards; animation-delay:.65s;
}
@keyframes focusRack{
  0%{ opacity:0; transform:scale(1.6); border-color:var(--tungsten); }
  55%{ opacity:1; border-color:var(--tungsten); }
  100%{ opacity:1; transform:scale(1); border-color:rgba(16,25,43,.28); }
}
.fc-tl{ top:108px; left:24px; border-right:0; border-bottom:0; }
.fc-tr{ top:108px; right:24px; border-left:0; border-bottom:0; }
.fc-bl{ bottom:78px; left:24px; border-right:0; border-top:0; }
.fc-br{ bottom:78px; right:24px; border-left:0; border-top:0; }

.scroll-hint{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; color:var(--mute);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint::after{
  content:""; width:1px; height:34px; background:linear-gradient(var(--tungsten), transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top; } 60%{ transform:scaleY(1);} 100%{ opacity:0; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px; border-radius:999px; font-weight:600; font-size:.92rem;
  letter-spacing:.02em; transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  border:1px solid transparent;
  position:relative; overflow:hidden;
}
.btn-solid{ background:var(--tungsten); color:var(--ink); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(103,14,16,.28); }
.btn-solid::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); transition:left .65s ease;
}
.btn-solid:hover::after{ left:130%; }
.btn-ghost{ border-color:var(--line); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--tungsten); color:var(--tungsten); transform:translateY(-2px); }
.btn-play svg{ width:14px; height:14px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:110px 0; position:relative; }
.section-alt{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
/* 720px forced "in-house." to break across the hyphen at desktop widths —
   the headings need ~780px. .lead keeps its own 56ch measure, so widening
   here only affects the h2. */
.section-head{ margin-bottom:60px; max-width:880px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head h2{ margin-bottom:16px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint::after{ animation:none; }
  html{ scroll-behavior:auto; }
  .hero-bg{ animation:none; }
  .hero-spot{ display:none; }
  .hero-inner .eyebrow,
  .hero-inner h1,
  .hero-inner .lead,
  .hero-inner .hero-actions,
  .hero-visual,
  .frame-corner{
    opacity:1; transform:none; animation:none;
  }
  .play-badge::before{ animation:none; display:none; }
  .btn-solid::after{ display:none; }
  .hero-scan{ display:none; }
  .af-lock{ display:none; }
}

/* ---------- showreel band ---------- */
.reel-band{ position:relative; }
.reel-frame{
  position:relative; aspect-ratio:2.39/1; border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(600px 300px at 30% 40%, rgba(103,14,16,.35), transparent 60%),
    radial-gradient(500px 320px at 75% 70%, rgba(90,60,180,.3), transparent 65%),
    linear-gradient(120deg, #141a2c, #0c101c 70%);
  border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; place-items:center; cursor:pointer;
}
.reel-frame.has-poster{ background-size:cover; background-position:center; }
.reel-frame:hover .play-badge{ transform:scale(1.07); background:var(--tungsten); color:var(--ink); }
.play-badge{
  position:relative;
  width:92px; height:92px; border-radius:50%; border:1.5px solid var(--tungsten);
  color:var(--tungsten); display:grid; place-items:center;
  background:rgba(245,248,252,.85); backdrop-filter:blur(6px);
  transition:transform .3s, background .3s, color .3s;
}
.play-badge::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1.5px solid var(--tungsten); opacity:0;
  animation:ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse{
  0%{ transform:scale(.78); opacity:.55; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.play-badge svg{ width:26px; height:26px; margin-left:4px; }
.reel-caption{
  position:absolute; left:24px; bottom:18px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.24em; color:var(--mute); text-transform:uppercase;
}

/* ---------- services ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

/* Service cards sit on a grid that only ever uses full rows, so the four
   services never leave a lone card stranded on a row of its own:
   4 across on desktop -> 2 x 2 on tablet -> stacked on phones. */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:stretch; }
@media (max-width:1024px){ .svc-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width:600px){ .svc-grid{ grid-template-columns:1fr; gap:18px; } }

.svc-card{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:38px 30px; transition:transform .3s, border-color .3s;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
@media (max-width:1200px) and (min-width:1025px){ .svc-card{ padding:32px 24px; } }
@media (max-width:600px){ .svc-card{ padding:30px 24px; } }
.svc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--tungsten), transparent 70%);
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.svc-card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:var(--shadow); }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-icon{
  width:52px; height:52px; border:1px solid var(--tungsten); border-radius:8px;
  display:grid; place-items:center; color:var(--tungsten); margin-bottom:24px;
  transition:transform .35s ease, background .3s ease, color .3s ease;
}
.svc-card:hover .svc-icon{
  transform:scale(1.1) rotate(-6deg); background:var(--tungsten); color:var(--ink);
}
.svc-icon svg{ width:24px; height:24px; }
.svc-card h3{ margin-bottom:12px; }
.svc-card p{ color:var(--mute); font-size:.95rem; }
/* margin-top:auto pins the link to the card floor, so "Explore" lines up
   across the row no matter how long each description runs. */
.svc-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:auto; padding-top:20px;
  font-size:.84rem; font-weight:600; color:var(--tungsten);
}
.svc-link svg{ width:14px; height:14px; transition:transform .25s; }
.svc-link:hover svg{ transform:translateX(4px); }

/* ---------- portfolio / slates ---------- */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
  background:none; border:1px solid var(--line); color:var(--mute);
  padding:9px 22px; border-radius:999px; font-size:.82rem; font-weight:600;
  letter-spacing:.04em; transition:all .25s;
}
.filter-btn:hover{ color:var(--bone); border-color:var(--bone); }
.filter-btn.active{ background:var(--tungsten); border-color:var(--tungsten); color:var(--ink); }

/* ---------- subcategory pills (second filter tier) ---------- */
.subfilter-bar{
  display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
  margin:-8px 0 32px; scrollbar-width:none;
  animation:subfilterIn .35s ease both;
}
.subfilter-bar::-webkit-scrollbar{ display:none; }
.subfilter-bar[hidden]{ display:none; }
@keyframes subfilterIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.subfilter-btn{
  flex:0 0 auto; background:none; border:1px solid transparent; color:var(--mute);
  padding:6px 16px; border-radius:999px; font-size:.74rem; font-weight:600;
  letter-spacing:.03em; transition:all .2s; white-space:nowrap;
}
.subfilter-btn:hover{ color:var(--tungsten); }
.subfilter-btn.active{ background:var(--line-soft); color:var(--ink); border-color:var(--line); }

.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (min-width:1440px){ .work-grid{ grid-template-columns:repeat(4,1fr); } }

/* Homepage "Recent productions" always shows one card per category (4 max),
   so it needs its own 4-up grid instead of the portfolio page's 3-up. */
#home-work-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ #home-work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ #home-work-grid{ grid-template-columns:1fr; } }
.work-card{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  aspect-ratio:4/3; border:1px solid var(--line-soft);
  transition:transform .35s, box-shadow .35s;
}
.work-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.work-card.hidden{ display:none; }
.work-poster{ position:absolute; inset:0; overflow:hidden; background:var(--ink-2); transition:transform .5s ease; }
.work-card:hover .work-poster{ transform:scale(1.05); }
.work-poster img{
  width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block;
  opacity:0; transition:opacity .45s ease, transform .5s ease;
}
.work-poster img.loaded{ opacity:1; }
.work-card:hover .work-poster img{ transform:scale(1.05); }
@keyframes posterShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.work-poster.img-loading::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 50%, var(--ink-2) 75%);
  background-size:200% 100%; animation:posterShimmer 1.4s ease-in-out infinite;
}
/* poster palettes */
.poster-1{ background:radial-gradient(420px 300px at 30% 30%, rgba(224,169,62,.5), transparent 65%), linear-gradient(135deg,#221a10,#0d0b09); }
.poster-2{ background:radial-gradient(420px 300px at 70% 35%, rgba(90,140,220,.42), transparent 65%), linear-gradient(135deg,#101622,#0a0c11); }
.poster-3{ background:radial-gradient(420px 300px at 40% 70%, rgba(200,70,70,.4), transparent 65%), linear-gradient(135deg,#1e1012,#0e0a0b); }
.poster-4{ background:radial-gradient(420px 300px at 65% 60%, rgba(110,190,150,.38), transparent 65%), linear-gradient(135deg,#0f1a16,#0a0e0c); }
.poster-5{ background:radial-gradient(420px 300px at 30% 60%, rgba(170,110,220,.4), transparent 65%), linear-gradient(135deg,#170f1e,#0d0a10); }
.poster-6{ background:radial-gradient(420px 300px at 70% 30%, rgba(224,140,62,.45), transparent 65%), linear-gradient(135deg,#201409,#0f0b07); }
.work-poster::after{ /* subtle grain on posters */
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}
.work-play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--tungsten);
  color:var(--tungsten); display:grid; place-items:center;
  background:rgba(245,248,252,.85); backdrop-filter:blur(6px);
  transition:transform .3s, background .3s, color .3s;
}
.work-play-badge svg{ width:18px; height:18px; margin-left:2px; }
.work-card:hover .work-play-badge{ transform:translate(-50%,-50%) scale(1.12); background:var(--tungsten); color:var(--ink); }
.work-meta{
  position:absolute; inset:auto 0 0 0; padding:22px;
  background:linear-gradient(transparent, rgba(5,5,7,.92));
  transform:translateY(8px); opacity:.92; transition:transform .3s, opacity .3s;
}
.work-card:hover .work-meta{ transform:none; opacity:1; }
.work-tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase; color:#f0b8b9;
}
.work-meta h3{ font-size:1.25rem; margin-top:6px; color:#ffffff; }
.work-slate{
  position:absolute; top:16px; left:16px; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.2em; color:rgba(242,239,233,.55);
}

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center; }
.stat b{
  font-family:var(--display); font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-weight:700; color:var(--tungsten); display:block; line-height:1;
}
.stat span{ font-size:.82rem; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:10px; }

/* ---------- testimonials ---------- */
.quote-card{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:36px 32px; position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.quote-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line); }
.quote-card::before{
  content:"\201C"; font-family:var(--display); font-size:4rem; color:var(--tungsten);
  position:absolute; top:6px; left:24px; opacity:.5; line-height:1;
}
.quote-card p{ margin-top:26px; color:var(--bone); font-size:.98rem; }
.quote-who{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.quote-avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--tungsten), var(--tungsten-2));
  color:var(--ink); font-weight:700; font-size:.9rem; overflow:hidden;
}
.quote-avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; }
.quote-who b{ display:block; font-size:.92rem; }
.quote-who span{ font-size:.78rem; color:var(--mute); }

/* ---------- leadership quote slider ---------- */
.quote-slider{ max-width:520px; margin:0 auto; position:relative; }
.quote-slider-track{ position:relative; transition:height .45s cubic-bezier(.4,0,.2,1); }
.quote-slide{
  position:absolute; inset:0; opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1); pointer-events:none;
}
.quote-slide.active{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.quote-slide .quote-card{ text-align:left; }
.quote-slide .quote-avatar{ width:56px; height:56px; }

.quote-slider-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:32px; }
.quote-slider[data-count="1"] .quote-slider-controls{ display:none; }
.quote-slider-arrow{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--ink-3); color:var(--bone); display:grid; place-items:center; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.quote-slider-arrow svg{ width:18px; height:18px; }
.quote-slider-arrow:hover{ border-color:var(--tungsten); color:var(--tungsten); }
.quote-slider-dots{ display:flex; align-items:center; gap:8px; }
.quote-slider-dots .dot{
  width:8px; height:8px; border-radius:5px; background:var(--line); border:none; padding:0;
  cursor:pointer; position:relative; transition:width .3s ease, background .3s ease;
}
/* The visible dot is 8px — far below a usable touch target. This invisible
   pad grows the hit area to ~38px tall without changing the design. It also
   replaces the old overflow:hidden, which clipped any such expansion. */
.quote-slider-dots .dot::before{
  content:""; position:absolute; inset:-15px -4px;
}
.quote-slider-dots .dot.active{ width:26px; background:var(--line); }
.quote-slider-dots .dot.active::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--tungsten); transform:scaleX(0);
  transform-origin:left; animation:dotFill 6.5s linear forwards;
}
@keyframes dotFill{ to{ transform:scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  .quote-slide{ transition:none; }
  .quote-slider-dots .dot.active::after{ animation:none; transform:scaleX(1); }
}
@media (max-width:480px){
  .quote-slider-mark{ font-size:4rem; }
}

/* ---------- process (numbered = real sequence) ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; }
.step{
  border-top:1px solid var(--line); padding-top:24px; counter-increment:step; position:relative;
}
.step::before{
  content:"0" counter(step); font-family:var(--mono); color:var(--tungsten);
  font-size:.78rem; letter-spacing:.2em;
}
.step h3{ margin:12px 0 10px; font-size:1.2rem; }
.step p{ color:var(--mute); font-size:.92rem; }

/* ---------- blog cards ---------- */
.post-card{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; transition:transform .3s, border-color .3s; display:flex; flex-direction:column;
}
.post-card:hover{ transform:translateY(-6px); border-color:var(--line); }
.post-thumb{ aspect-ratio:16/9; position:relative; }
.post-body{ padding:28px; flex:1; display:flex; flex-direction:column; }
.post-date{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; color:var(--mute); text-transform:uppercase; }
.post-body h3{ margin:12px 0 10px; font-size:1.22rem; }
.post-body p{ color:var(--mute); font-size:.92rem; flex:1; }

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center; padding:120px 0; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 50% 110%, rgba(103,14,16,.18), transparent 70%);
}
.cta-band h2{ max-width:20ch; margin:0 auto 20px; position:relative; }
.cta-band .lead{ margin:0 auto 40px; position:relative; }
.cta-band .hero-actions{ justify-content:center; position:relative; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  padding:190px 0 90px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(103,14,16,.12), transparent 60%),
    linear-gradient(180deg,#eef4fc,#f5f8fc);
}
.page-hero h1{ max-width:16ch; margin-top:8px; }
.page-hero .lead{ margin-top:22px; }
.crumbs{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--mute); text-transform:uppercase; }
.crumbs a:hover{ color:var(--tungsten); }

/* ---------- about ---------- */
.about-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }

/* About page intro — the logo panel sits opposite the copy on the same split
   grid the "Meet the founder" block uses, so the page opens and continues on
   one rhythm. Collapses to a stacked, logo-first layout on tablets down. */
.about-intro{
  display:grid; grid-template-columns:1.15fr .85fr; gap:64px;
  align-items:center; margin-top:30px;
}
/* The opening statement carries the page, so it runs a step larger than
   .lead without reaching h2 size. */
.about-statement{
  margin-top:18px; font-size:1.16rem; line-height:1.75; color:var(--mute);
  max-width:34em;
}
.about-statement b{ color:var(--bone); font-weight:700; }
.about-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.about-chips li{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tungsten);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  background:var(--ink-3); white-space:nowrap;
}
.about-logo-panel{
  display:grid; place-items:center; gap:20px; text-align:center;
  padding:66px 40px; position:relative; overflow:hidden;
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* same maroon hairline the service cards carry, so the panel reads as part
   of the existing card system rather than a one-off */
.about-logo-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--tungsten), transparent 70%);
}
.about-logo-mark{ width:min(300px, 80%); height:auto; }
.about-logo-tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.28em;
  color:var(--mute); text-transform:uppercase;
}
/* Headline block below the split — heading left, copy right, on the same
   two-column rhythm as the intro above it. */
.about-headline{
  display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start;
  margin-top:66px; padding-top:56px;
  border-top:1px solid var(--line-soft);
}
/* a step down from the global h1 clamp — at 5rem it swamped the column */
.about-headline h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); max-width:12ch; margin:0; }
/* nudged down so the copy's first line optically sits with the headline's */
.about-headline .lead{ margin:6px 0 0; max-width:none; }

@media (max-width:900px){
  .about-intro{ grid-template-columns:1fr; gap:38px; margin-top:24px; }
  .about-logo-panel{ order:-1; padding:52px 32px; }
  .about-logo-mark{ width:min(260px, 66%); }
  .about-statement{ max-width:none; }
  .about-headline{ grid-template-columns:1fr; gap:20px; margin-top:52px; padding-top:44px; }
  .about-headline h1{ max-width:none; }
  .about-headline .lead{ margin-top:0; }
}
@media (max-width:600px){
  .about-logo-panel{ padding:40px 22px; gap:16px; }
  .about-logo-mark{ width:min(220px, 72%); }
  .about-logo-tag{ font-size:.6rem; letter-spacing:.22em; }
  .about-statement{ font-size:1.06rem; }
  .about-chips{ gap:8px; margin-top:22px; }
  .about-chips li{ font-size:.62rem; padding:7px 13px; letter-spacing:.12em; }
  .about-headline{ margin-top:44px; padding-top:38px; }
}
.founder-photo{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 20%; border-radius:var(--radius);
  border:1px solid var(--line); display:block;
}
.founder-role{
  color:var(--tungsten); font-weight:600; font-size:.92rem; letter-spacing:.04em; margin-bottom:20px;
}

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
.contact-info li{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.contact-info li:last-child{ border:0; }
.ci-icon{
  width:46px; height:46px; flex:0 0 46px; border:1px solid var(--tungsten); border-radius:8px;
  display:grid; place-items:center; color:var(--tungsten);
}
.ci-icon svg{ width:20px; height:20px; }
.contact-info b{ display:block; font-size:.95rem; margin-bottom:4px; }
.contact-info a, .contact-info span{ color:var(--mute); font-size:.92rem; }
.contact-info a:hover{ color:var(--tungsten); }

.form-card{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:40px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--mute); margin-bottom:8px; text-transform:uppercase; }
.field input, .field textarea, .field select{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  color:var(--bone); padding:14px 16px; font-family:var(--body); font-size:16px;
  transition:border-color .25s;
}
.field select{ appearance:none; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--tungsten); outline:none; }
.field textarea{ min-height:130px; resize:vertical; }
.form-note{ font-size:.8rem; color:var(--mute); margin-top:14px; }
.form-status{ margin-top:16px; font-size:.9rem; color:var(--tungsten); min-height:1.4em; }

.map-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:80px; }
.map-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-bottom:12px; display:block;
}
.map-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  filter:grayscale(.25) contrast(1.02); height:420px; margin-top:80px;
}
.map-grid .map-frame{ margin-top:0; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- legal pages ---------- */
.legal{ max-width:820px; }
.legal h2{ font-size:1.6rem; margin:52px 0 16px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ color:var(--mute); font-size:.96rem; }
.legal ul{ list-style:disc; padding-left:22px; margin:14px 0; }
.legal li{ margin-bottom:8px; }
.legal .updated{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--tungsten); text-transform:uppercase; }
.legal strong{ color:var(--bone); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line-soft); background:var(--ink-2);
  padding:80px 0 0; margin-top:0;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:64px;
}
.footer-grid h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.28em; color:var(--mute);
  text-transform:uppercase; margin-bottom:22px; font-weight:400;
}
.footer-grid p{ color:var(--mute); font-size:.92rem; max-width:34ch; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ color:var(--mute); font-size:.92rem; transition:color .25s; }
.footer-links a:hover{ color:var(--tungsten); }
.footer-contact li{ color:var(--mute); font-size:.9rem; margin-bottom:12px; display:flex; gap:10px; }
.footer-contact a:hover{ color:var(--tungsten); }
.footer-bottom{
  border-top:1px solid var(--line-soft); padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:var(--mute);
}
.footer-bottom a:hover{ color:var(--tungsten); }
.socials{ display:flex; gap:12px; margin-top:24px; }
.socials a{
  width:40px; height:40px; border:1px solid var(--line); border-radius:8px;
  display:grid; place-items:center; color:var(--mute); transition:all .25s;
}
.socials a:hover{ border-color:var(--tungsten); color:var(--tungsten); transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; }

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.fabs{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:12px; }
.fab{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45); transition:transform .25s;
}
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab svg{ width:24px; height:24px; }
.fab-wa{ background:#25d366; color:#fff; }
.fab-call{ background:var(--tungsten); color:var(--ink); }
.fab-ig{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color:#fff;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(10,15,26,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:none; place-items:center; padding:16px;
}
.lightbox.open{ display:grid; }
.lb-inner{ width:min(1140px,92vw); position:relative; opacity:0; transform:scale(.94) translateY(10px); }
.lightbox.open .lb-inner{ animation:lbIn .38s cubic-bezier(.2,.8,.2,1) forwards; }
.lb-inner.lb-anim-out{ animation:lbOut .22s ease forwards; }
@keyframes lbIn{ to{ opacity:1; transform:none; } }
@keyframes lbOut{ to{ opacity:0; transform:scale(.96); } }
@media (prefers-reduced-motion:reduce){
  .lb-inner{ opacity:1; transform:none; animation:none; }
}
.lb-media{
  border-radius:var(--radius); overflow:hidden; position:relative;
  border:1px solid rgba(245,248,252,.16); background:#000;
  transition:opacity .15s ease;
}
.lb-media.is-video{ aspect-ratio:16/9; }
.lb-media.is-image{ aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }
.lb-media iframe{ width:100%; height:100%; border:0; }
.lb-media img{
  width:auto; height:auto; max-width:100%; max-height:82vh; object-fit:contain;
  display:block; touch-action:none; opacity:0; transition:opacity .3s ease;
  transform-origin:center center; user-select:none; -webkit-user-select:none;
}
.lb-media img.loaded{ opacity:1; }
.lb-media .lb-poster{ width:100%; height:100%; display:grid; place-items:center; color:rgba(245,248,252,.6); font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(245,248,252,.25);
  background:rgba(10,15,26,.55); color:#f5f8fc; display:grid; place-items:center; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.lb-nav:hover{ border-color:var(--tungsten); color:var(--tungsten); background:rgba(10,15,26,.8); }
.lb-nav svg{ width:20px; height:20px; }
.lb-prev{ left:-64px; }
.lb-next{ right:-64px; }
.lb-nav[hidden]{ display:none; }
@media (max-width:1120px){
  .lb-prev{ left:8px; }
  .lb-next{ right:8px; }
}
@media (max-width:640px){
  /* shrink the outer margin (not the media itself) so the photo/video stays
     as large as possible, with just enough edge room for small nav buttons */
  .lightbox{ padding:8px; }
  .lb-close{ top:-44px; }
  .lb-nav{ width:34px; height:34px; }
  .lb-nav svg{ width:15px; height:15px; }
  .lb-prev{ left:-2px; }
  .lb-next{ right:-2px; }
}
.lb-caption{ margin-top:16px; display:flex; justify-content:space-between; color:rgba(245,248,252,.6); font-size:.9rem; }
.lb-close{
  position:absolute; top:-52px; right:0; background:none; border:1px solid rgba(245,248,252,.25);
  color:#f5f8fc; width:42px; height:42px; border-radius:50%; font-size:1.1rem;
}
.lb-close:hover{ border-color:var(--tungsten); color:var(--tungsten); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .grid-4, .stats, .process{ grid-template-columns:repeat(2,1fr); }
  .work-grid, .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .about-split, .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-links{
    position:fixed; top:0; left:0; right:0; height:100vh; height:100svh;
    background:rgba(245,248,252,.98); backdrop-filter:blur(16px);
    flex-direction:column; justify-content:center; gap:26px;
    transform:translateY(-100%); transition:transform .4s ease; z-index:99;
    width:100%;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.2rem; }
  .nav-toggle{ display:block; position:relative; z-index:100; }
}
@media (max-width:720px){
  body{ font-size:15.5px; }
  .section{ padding:80px 0; }
  .work-grid, .grid-3, .grid-2, .form-row{ grid-template-columns:1fr; }
  .frame-corner{ display:none; }
  .hero::before,.hero::after{ height:30px; }
  .reel-frame{ aspect-ratio:16/9; }
  .play-badge{ width:70px; height:70px; }
  .stats,.process{ grid-template-columns:1fr 1fr; gap:34px 18px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .form-card{ padding:28px 22px; }
  .fabs{ right:16px; bottom:16px; }
  .map-frame{ height:280px; margin-top:56px; }
  .map-grid{ grid-template-columns:1fr; gap:20px; margin-top:56px; }
  .map-grid .map-frame{ margin-top:0; }
  .filter-bar{ padding-right:74px; }
}
@media (max-width:420px){
  .stats,.process,.grid-4{ grid-template-columns:1fr; }
}
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:110px 0 50px; }
  .af-lock{ display:none; }
}

/* ============================================================
   TOUCH + MOTION REFINEMENTS
   ============================================================ */

/* A tap latches :hover on touch screens, so lift/scale effects stay stuck
   after the finger lifts. Cancel the movement there — colour and border
   changes are harmless and still give tap feedback. */
@media (hover: none){
  .hero-visual:hover,
  .btn-solid:hover,
  .btn-ghost:hover,
  .svc-card:hover,
  .work-card:hover,
  .quote-card:hover,
  .post-card:hover,
  .socials a:hover,
  .fab:hover{ transform:none; }
  .svc-card:hover,
  .work-card:hover,
  .quote-card:hover{ box-shadow:none; }
  .hero-visual:hover .hero-sketch,
  .work-card:hover .work-poster,
  .work-card:hover .work-poster img,
  .reel-frame:hover .play-badge{ transform:none; }
  /* keep the badge centred — it is positioned by its own transform */
  .work-card:hover .work-play-badge{ transform:translate(-50%,-50%); }
}

/* Animations the earlier reduced-motion blocks missed. posterShimmer is the
   important one: it loops forever behind every loading poster. */
@media (prefers-reduced-motion: reduce){
  .work-poster.img-loading::before{ animation:none; }
  .subfilter-bar{ animation:none; }
  .quote-slider-track{ transition:none; }
  .svc-card, .work-card, .quote-card, .post-card,
  .btn, .fab, .socials a, .svc-icon, .work-poster{ transition:none; }
}

/* Below ~420px the clamp floor still overflowed "Crafting narrative" onto its
   own line, pushing the hero heading to 3-4 lines. */
@media (max-width:420px){
  .hero h1{ font-size:1.95rem; }
}
/* 360px-class phones: "Igniting imagination" (the longer of the two lines)
   still overran the 312px column. */
@media (max-width:375px){
  .hero h1{ font-size:1.75rem; }
}

/* Touch targets: footer and legal links rendered ~12px tall, well under the
   44px guideline. Padding grows the hit area without moving the text. */
@media (max-width:600px){
  .footer-links a,
  .footer-contact a,
  .footer-bottom a{ display:inline-block; padding:9px 0; }
  .footer-links li,
  .footer-contact li{ margin-bottom:4px; }
  .footer-bottom{ line-height:2.2; }
  .socials a{ width:44px; height:44px; }
  /* micro-labels were rendering at 9.6px — under the practical legible floor */
  .brand-location{ font-size:.66rem; letter-spacing:.2em; }
  .work-slate, .work-tag{ font-size:.68rem; letter-spacing:.18em; }
}