/* =============================================================
   blkframe.studio — art-directed build
   Concept: the black frame, alive. Loud color, big type, motion.
   Display: Anton. Body/UI: Inter. Zero deps, vanilla.
   ============================================================= */

/* ---- Tokens ----------------------------------------------- */
:root {
  --bg:        #070708;
  --bg-2:      #0d0d0f;
  --bg-elev:   #121214;
  --bg-elev-2: #18181c;

  --text:      #f5f5f7;
  --text-dim:  #a6a6ad;
  --text-faint:#6a6a72;

  --line:        rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.20);

  --accent:   #ff5a1f;   /* orange */
  --accent-2: #ff2d9b;   /* magenta */
  --accent-3: #8b5cf6;   /* violet  */
  --accent-soft: rgba(255,45,155,0.22);
  --grad:  linear-gradient(100deg, #ff5a1f 0%, #ff2d9b 50%, #8b5cf6 100%);
  --grad-2: linear-gradient(120deg, #8b5cf6, #ff2d9b, #ff5a1f);

  --display: "Anton", "Inter", system-ui, sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;  --space-6:4rem; --space-7:6rem;   --space-8:7.5rem; --space-9:11rem;

  --maxw: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --t:.45s; --t-fast:.22s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 4px;
}

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- Reset ------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "ss01","cv01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
::selection { background: var(--accent-2); color:#fff; }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px; }

/* film grain */
body::after {
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:.045;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(2) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,2%)}
}

/* ---- Type utilities --------------------------------------- */
.display { font-family:var(--display); font-weight:400; line-height:.92; letter-spacing:-.01em; text-transform:uppercase; }
.grad-text {
  background:var(--grad); background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:hue 5s var(--ease) infinite alternate;
}
@keyframes hue { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

.eyebrow {
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before { content:""; width:26px; height:2px; background:var(--grad); }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block: clamp(var(--space-6), 12vw, var(--space-9)); position:relative; }

/* ============================================================
   Hero entrance (plays on load — replaces the loader)
   ============================================================ */
.hero .eyebrow, .hero h1 .line, .hero-sub, .hero-actions, .hero-reel {
  opacity:0; transform:translateY(26px); animation:enter .85s var(--ease-out) both;
}
.hero .eyebrow      { animation-delay:.05s; }
.hero h1 .line:nth-child(1){ animation-delay:.14s; }
.hero h1 .line:nth-child(2){ animation-delay:.22s; }
.hero h1 .line:nth-child(3){ animation-delay:.30s; }
.hero-sub           { animation-delay:.40s; }
.hero-actions       { animation-delay:.50s; }
.hero-reel          { animation-delay:.30s; transform:translateY(40px) scale(.98); }
@keyframes enter { to { opacity:1; transform:none; } }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2) var(--gutter);
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), padding var(--t) var(--ease);
}
.site-header.is-scrolled { background:rgba(7,7,8,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.wordmark { font-family:var(--display); font-size:1.35rem; letter-spacing:.02em; text-transform:uppercase; }
.nav { display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); }
.nav__link { font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
  position:relative; padding:.4rem 0; transition:color var(--t-fast) var(--ease); }
.nav__link::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease-out); }
.nav__link:hover { color:var(--text); }
.nav__link:hover::after { transform:scaleX(1); }
@media (max-width:620px){
  .nav__link.is-optional { display:none; }
  .wordmark { font-size:1.15rem; }
  .nav__link { font-size:.72rem; letter-spacing:.06em; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:1.05rem 1.7rem; border-radius:var(--radius); border:1px solid transparent; min-height:50px;
  position:relative; overflow:hidden; will-change:transform;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn .arrow { transition:transform var(--t) var(--ease-out); }
.btn:hover .arrow { transform:translateX(4px); }
.btn-primary { background:#fafafa; color:#0a0a0a; }
.btn-primary:hover { box-shadow:0 0 0 4px var(--accent-soft); }
.btn-grad { background:var(--grad); background-size:200% 100%; color:#fff; animation:hue 5s var(--ease) infinite alternate; }
.btn-grad:hover { box-shadow:0 14px 40px -12px var(--accent-2); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent-2); color:#fff; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position:relative; min-height:100svh; display:grid; align-items:center; padding-top:var(--space-7); padding-bottom:var(--space-6); overflow:hidden; }
.hero-grid { position:relative; z-index:1; display:grid; gap:clamp(var(--space-4),5vw,var(--space-6)); align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.25fr .75fr; } }

.hero h1 { font-size:clamp(3.2rem, 12vw, 9.5rem); margin-block:var(--space-3) var(--space-4); }
.hero h1 .line { display:block; }
.hero h1 .muted { color:var(--text-faint); }
.hero-sub { color:var(--text-dim); font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:40ch; margin-bottom:var(--space-4); line-height:1.5; }
.hero-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }

.status { display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; }
.status .dot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 0 var(--accent-soft); animation:pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--accent-soft)} 70%{box-shadow:0 0 0 9px rgba(255,45,155,0)} 100%{box-shadow:0 0 0 0 rgba(255,45,155,0)} }

.hero-reel { position:relative; width:min(100%,380px); margin-inline:auto; aspect-ratio:9/16; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 50px 100px -45px rgba(0,0,0,.95); --h:24; }
.hero-reel::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); opacity:.5; mix-blend-mode:overlay; }

.scroll-cue { position:absolute; left:var(--gutter); bottom:var(--space-4); z-index:1; display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.scroll-cue::before { content:""; width:34px; height:1px; background:var(--text-faint); animation:cue 1.8s var(--ease) infinite; transform-origin:left; }
@keyframes cue { 0%,100%{transform:scaleX(.4); opacity:.4} 50%{transform:scaleX(1); opacity:1} }

/* vertical editorial label */
.v-label { position:absolute; right:var(--gutter); top:50%; z-index:1; writing-mode:vertical-rl; transform:translateY(-50%);
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-faint); }
@media (max-width:980px){ .v-label{ display:none; } }

/* ============================================================
   Marquee (seamless)
   ============================================================ */
.marquee { border-block:1px solid var(--line); padding-block:var(--space-3); overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display:inline-flex; width:max-content; will-change:transform; }
.marquee span { font-family:var(--display); font-size:clamp(1.6rem,4.2vw,3rem); letter-spacing:.01em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:var(--space-4); margin-right:var(--space-4); color:var(--text); }
.marquee span:nth-of-type(4n+1){ color:var(--accent); }
.marquee span:nth-of-type(4n+2){ color:#fff; }
.marquee span:nth-of-type(4n+3){ color:var(--accent-2); }
.marquee span:nth-of-type(4n+4){ color:var(--accent-3); }
.marquee span::after { content:"✷"; color:var(--accent-2); font-size:.6em; }

/* ============================================================
   Light / inverted section (breaks the dark, adds rhythm)
   ============================================================ */
.section--light { background:#f2f1ec; color:#0b0b0c; }
.section--light .dim { color:#9a978d; }
.section--light ::selection { background:#0b0b0c; color:#fff; }

/* ============================================================
   Manifesto band
   ============================================================ */
.manifesto { padding-block: clamp(var(--space-7), 16vw, var(--space-9)); }
.manifesto p { font-family:var(--display); font-size:clamp(2rem,6.5vw,5.5rem); line-height:.98; text-transform:uppercase; max-width:18ch; }
.manifesto .dim { color:var(--text-faint); }
.section--light.manifesto .dim { color:#9a978d; }

/* ============================================================
   Work — dual film-strip rows
   ============================================================ */
.work-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5); }
.work-head h2 { font-size:clamp(2.2rem,6vw,4.5rem); }
.work-head .link { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; gap:.5rem; align-items:center; border-bottom:1.5px solid var(--accent-2); padding-bottom:3px; }
.work-head .link:hover { color:var(--accent-2); }

.strip { overflow:hidden; white-space:nowrap; padding-block:var(--space-1); }
.strip + .strip { margin-top:var(--space-2); }
.strip-track { display:inline-flex; width:max-content; will-change:transform; }

.tile {
  position:relative; flex:0 0 auto; width:clamp(180px, 22vw, 300px); aspect-ratio:9/16;
  border-radius:var(--radius); overflow:hidden; background:#0c0c0d; border:1px solid var(--line);
  margin-right:var(--space-2); isolation:isolate;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.tile:hover { border-color:var(--accent-2); transform:translateY(-6px) scale(1.02); box-shadow:0 30px 60px -28px rgba(255,45,155,.45); }

/* grid variant (work page) */
.grid { display:grid; grid-template-columns:1fr; gap:var(--space-2); }
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-3);} }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(3,1fr);} }
.grid .tile { width:auto; margin-right:0; }

/* living placeholder layers */
.ph { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 18%, hsl(var(--h,30) 70% 26%), transparent 62%),
    conic-gradient(from var(--ang), transparent 0deg, hsl(var(--h,30) 85% 45% / .55) 90deg, transparent 180deg, hsl(var(--h,30) 80% 38% / .4) 300deg, transparent 360deg),
    #0b0b0c;
  animation:spin 9s linear infinite; }
@keyframes spin { to { --ang:360deg; } }
.ph::before { content:""; position:absolute; inset:-20%;
  background:radial-gradient(circle at 40% 40%, hsl(var(--h,30) 95% 58% / .5), transparent 48%);
  animation:float 7s var(--ease) infinite alternate; }
@keyframes float { 0%{transform:translate(-8%,6%)} 100%{transform:translate(10%,-8%) scale(1.1)} }
.ph::after { content:""; position:absolute; top:-50%; left:-60%; width:50%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform:rotate(18deg);
  animation:sweep 4.5s var(--ease) infinite; }
@keyframes sweep { 0%{left:-60%} 55%,100%{left:160%} }
.tile::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); opacity:.5; mix-blend-mode:overlay; }
.tile::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 48%); }
.tile video { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; }
.tile:hover .ph { animation-duration:3.5s; }
.tile:hover .ph::after { animation-duration:1.8s; }

.tile-label { position:absolute; left:var(--space-2); bottom:var(--space-2); z-index:3; display:flex; flex-direction:column; gap:2px; white-space:normal; }
.tile-label .idx { font-size:.7rem; font-weight:800; letter-spacing:.12em; color:var(--accent-2); }
.tile-label .name { font-family:var(--display); font-size:1.15rem; letter-spacing:.02em; line-height:1; }
.tile-label .cat { font-size:.68rem; color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }

/* ============================================================
   Value trio
   ============================================================ */
.trio { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:760px){ .trio{ grid-template-columns:repeat(3,1fr); gap:var(--space-5);} }
.trio .item { border-top:1px solid var(--line-strong); padding-top:var(--space-3); }
.trio .item h3 { font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:.5rem; }
.trio .item p { color:var(--text-dim); max-width:32ch; }

/* ============================================================
   How it works
   ============================================================ */
.steps { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--space-5);} }
.step { border-top:1px solid var(--line-strong); padding-top:var(--space-3); }
.step .num { font-family:var(--display); font-size:2.2rem; line-height:1; }
.step .num span { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.step h3 { font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2rem); margin:.5rem 0 .6rem; }
.step p { color:var(--text-dim); max-width:34ch; }

/* ============================================================
   Pricing
   ============================================================ */
.plans { display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:860px){ .plans{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.plan { position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4) var(--space-3);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease-out); }
.plan:hover { border-color:var(--line-strong); transform:translateY(-4px); }
.plan.is-featured { border-color:transparent;
  background-image:linear-gradient(var(--bg-elev-2),var(--bg-elev-2)), var(--grad);
  background-origin:border-box; background-clip:padding-box, border-box;
  box-shadow:0 30px 70px -30px rgba(255,45,155,.45); }
.plan .badge { position:absolute; top:0; right:var(--space-3); transform:translateY(-50%);
  background:var(--grad); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .6rem; border-radius:2px; }
.plan header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); border-bottom:1px solid var(--line); padding-bottom:var(--space-3); }
.plan .name { font-family:var(--display); font-size:1.4rem; letter-spacing:.03em; }
.plan .price { font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); line-height:1; }
.plan .price .cur { font-size:.45em; color:var(--text-dim); margin-right:.08em; vertical-align:.5em; }
.plan ul { list-style:none; display:grid; gap:.7rem; flex:1; }
.plan li { font-size:.95rem; color:var(--text); padding-left:1.25rem; position:relative; }
.plan li::before { content:""; position:absolute; left:0; top:.6em; width:9px; height:2px; background:var(--grad); }
.plan li .dim { color:var(--text-dim); }
.plan-cta { width:100%; justify-content:center; }
.plans-note { margin-top:var(--space-4); color:var(--text-dim); font-size:.92rem; text-align:center; }
.plans-note a { color:#fff; border-bottom:1.5px solid var(--accent-2); padding-bottom:1px; }
.plans-note a:hover { color:var(--accent-2); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display:grid; gap:clamp(var(--space-4),6vw,var(--space-7)); }
@media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.contact h2 { font-size:clamp(2.8rem,8vw,6rem); max-width:11ch; }
.contact-lead { color:var(--text-dim); margin-top:var(--space-3); max-width:38ch; }

.copy-email { -webkit-appearance:none; appearance:none; background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; }
.copy-email .ce-text { border-bottom:2px solid var(--line-strong); padding-bottom:2px; transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.copy-email:hover .ce-text { border-bottom-color:var(--accent-2); color:var(--accent-2); }
.copy-email .ce-icon { width:15px; height:15px; opacity:.5; transition:opacity var(--t-fast) var(--ease); flex:none; }
.copy-email:hover .ce-icon { opacity:1; }
.copy-email .ce-status { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); opacity:0; transition:opacity var(--t-fast) var(--ease); }
.copy-email.is-copied .ce-status, .copy-email.is-failed .ce-status { opacity:1; }
.copy-email.is-failed .ce-status { color:var(--text-dim); }
.contact-copy { margin-top:var(--space-4); font-size:clamp(1.2rem,2.2vw,1.8rem); font-weight:700; letter-spacing:-.02em; }
.footer-copy { font-size:.8125rem; letter-spacing:.04em; }
.footer-copy .ce-text { border-bottom-width:1px; }

.form { display:grid; gap:var(--space-3); }
.field { display:grid; gap:.5rem; }
.field label { font-size:.72rem; color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase; }
.field label .req { color:var(--accent-2); }
.field input, .field textarea { font:inherit; font-size:1rem; color:var(--text); background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:.95rem 1rem; min-height:50px; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.field textarea { resize:vertical; min-height:120px; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder { color:var(--text-faint); }
.field input:hover, .field textarea:hover { border-color:var(--line-strong); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent-2); background:var(--bg-elev-2); }
.field .error { font-size:.8125rem; color:#f0a0a0; min-height:1em; }
.form-note { font-size:.8125rem; color:var(--text-faint); }
.form-status { font-size:.9375rem; padding:.95rem 1rem; border-radius:var(--radius); border:1px solid var(--line); display:none; }
.form-status.is-ok { display:block; color:#bfe6c4; border-color:rgba(120,200,140,.3); background:rgba(120,200,140,.08); }
.form-status.is-error { display:block; color:#f0b4b4; border-color:rgba(220,120,120,.3); background:rgba(220,120,120,.08); }

/* ============================================================
   Footer (giant wordmark)
   ============================================================ */
.site-footer { border-top:1px solid var(--line); padding-top:var(--space-6); padding-bottom:var(--space-4); overflow:hidden; }
.footer-mark { font-family:var(--display); font-size:clamp(4rem,22vw,20rem); line-height:.82; letter-spacing:-.01em; text-transform:uppercase;
  background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:hue 6s var(--ease) infinite alternate; margin-bottom:var(--space-4); }
.footer-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.footer-row .meta { color:var(--text-faint); font-size:.8125rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.footer-nav { display:flex; gap:var(--space-3); }
.footer-nav a { font-size:.8125rem; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; }
.footer-nav a:hover { color:var(--accent-2); }

/* ============================================================
   Work page specifics
   ============================================================ */
.page-hero { padding-top:calc(var(--space-9) + var(--space-4)); padding-bottom:var(--space-5); position:relative; overflow:hidden; }
.page-hero h1 { font-size:clamp(3.5rem,16vw,13rem); line-height:.85; }
.page-hero p { color:var(--text-dim); max-width:46ch; margin-top:var(--space-3); font-size:clamp(1.05rem,1.5vw,1.25rem); }

.case { display:grid; gap:var(--space-3); align-items:center; }
@media (min-width:860px){ .case{ grid-template-columns:1fr 1fr; gap:var(--space-6); } .case.flip .case-media{ order:2; } }
.case + .case { margin-top:clamp(var(--space-6), 10vw, var(--space-8)); }
.case-media { position:relative; aspect-ratio:9/16; max-height:78vh; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); isolation:isolate; }
.case-media .ph { animation-duration:11s; }
.case-num { font-family:var(--display); font-size:clamp(2rem,4vw,3rem); color:var(--text-faint); }
.case h2 { font-family:var(--display); font-size:clamp(2.2rem,5vw,4rem); margin:.4rem 0 .8rem; }
.case .cat { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }
.case p { color:var(--text-dim); max-width:42ch; margin-top:var(--space-3); }

/* ============================================================
   Reveal
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease-out); will-change:opacity,transform; }
.reveal.in-view { opacity:1; transform:none; }
[style*="--i"].reveal { transition-delay:calc(var(--i,0) * 70ms); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .hero .eyebrow, .hero h1 .line, .hero-sub, .hero-actions, .hero-reel { opacity:1 !important; transform:none !important; }
  body::after { display:none; }
  .grad-text, .footer-mark, .step .num span { -webkit-text-fill-color:transparent; }
}