/* ERG Enterprises — STUDIO DARK (alternate identity)
   ==================================================================
   Lives alongside the ivory site rather than replacing it. `styles.css` and
   this file are two complete, incompatible identities — never load both.

   WHY THIS EXISTS
   The ivory site uses Cormorant Garamond on warm off-white with italic second
   lines. So do yrstrulydes and Sweets by Ash. Emily's flagship therefore read
   as one of her own client projects, which undercuts the pitch. This identity
   is deliberately the opposite of everything she builds for clients.

   THE RULES THAT HOLD IT TOGETHER
   1. No chromatic accent anywhere. Warm near-black and warm off-white, full
      stop. All colour on the page comes from the client photography in the
      project cards — a brand colour would compete with five client brands and
      lose to all of them.
   2. Text is #F4F1EC, not #FFF, and the black is warm-tinted, not blue-black.
      That warmth is the whole difference between this and a SaaS dashboard.
   3. Mono is for labels and numerals only, never body copy. Small doses read
      as "built by hand"; large doses read as a terminal.
   4. The process numerals are a design element — oversized, low-contrast, set
      beside the words. Not badges, not a feature list.
   ================================================================== */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:      #0A0A0B;
  --bg-2:    #101012;
  --ink:     #F4F1EC;
  --mid:     #8E8981;
  --faint:   #56534E;
  --line:    rgba(244, 241, 236, 0.10);
  --line-2:  rgba(244, 241, 236, 0.18);
  --surface: rgba(244, 241, 236, 0.035);

  --sans: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.42);
  --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.55);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(1.5rem, 5vw, 6rem);
  --gap: clamp(6rem, 15vh, 13rem);
}

html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
picture { display: contents; }

/* ---------------- background layers ---------------- */

.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb { position: absolute; border-radius: 50%; filter: blur(100px); }
.amb-1 {
  width: 58vw; height: 58vw; top: -22vw; right: -12vw;
  background: radial-gradient(circle, rgba(255,226,189,.10), rgba(255,226,189,0) 68%);
  animation: drift1 30s ease-in-out infinite alternate;
}
.amb-2 {
  width: 46vw; height: 46vw; bottom: 4vh; left: -14vw;
  background: radial-gradient(circle, rgba(150,178,255,.07), rgba(150,178,255,0) 68%);
  animation: drift2 38s ease-in-out infinite alternate;
}
@keyframes drift1 { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-5vw,6vh,0) scale(1.14)} }
@keyframes drift2 { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(6vw,-5vh,0) scale(1.18)} }

/* a faint technical grid, masked so it never becomes wallpaper */
.grid-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(244,241,236,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,236,.035) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 76%);
          mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 76%);
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px;
  margin: -210px 0 0 -210px; border-radius: 50%;
  z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,232,200,.09), rgba(255,232,200,0) 66%);
  transition: opacity 500ms var(--ease); will-change: transform;
}
body.pointer-fine .glow.on { opacity: 1; }

.nav, main, .footer { position: relative; z-index: 3; }

/* ---------------- type ---------------- */

h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 500; letter-spacing: -.042em; line-height: .98; }
h1 { font-size: clamp(3rem, 8.4vw, 6.6rem); }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h3 { font-size: 1.45rem; letter-spacing: -.03em; line-height: 1.15; }
h1 em, h2 em, .footer-statement em { font-style: normal; color: var(--faint); }

.eyebrow {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase; color: var(--mid); margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); opacity: .55; margin-right: .8rem; vertical-align: .15em;
}

.intro { font-size: 1.06rem; line-height: 1.78; color: var(--mid); max-width: 54ch; margin: 1.9rem 0 0; }

.rule-soft { padding: 0 var(--pad); margin: clamp(4rem,9vh,6.5rem) 0 0; }
.rule-soft span {
  display: block; height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 14%, var(--line) 86%, transparent);
  transform: scaleX(0); transition: transform 1.4s var(--ease-soft);
}
.rule-soft.is-in span { transform: scaleX(1); }

/* ---------------- buttons ---------------- */

.btn, .btn-ghost {
  position: relative; display: inline-block; overflow: hidden; isolation: isolate;
  font-family: var(--sans); font-size: .92rem; font-weight: 400; letter-spacing: -.01em;
  text-decoration: none; padding: .95rem 1.7rem; border-radius: var(--r); cursor: pointer;
  transform: translate3d(var(--mx,0px), calc(var(--my,0px) + var(--lift,0px)), 0);
  transition: transform 420ms var(--ease-soft), box-shadow 420ms var(--ease),
              background 260ms var(--ease), border-color 260ms var(--ease);
  will-change: transform;
}
.btn { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn:hover { box-shadow: 0 0 0 1px rgba(244,241,236,.2), 0 14px 40px rgba(244,241,236,.12); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: rgba(244,241,236,.4); background: var(--surface); }
.btn:hover, .btn-ghost:hover { --lift: -2px; }
.btn:active, .btn-ghost:active { --lift: 0px; }
.btn::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.18) 50%, transparent 64%);
  transform: translateX(-120%); transition: transform 900ms var(--ease-soft);
}
.btn:hover::before, .btn-ghost:hover::before { transform: translateX(120%); }

.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .16; pointer-events: none; animation: rippleOut 620ms var(--ease) forwards; }
@keyframes rippleOut { to { transform: scale(2.4); opacity: 0; } }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* ---------------- nav ---------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 2rem;
  padding: 1.4rem var(--pad); transition: padding 480ms var(--ease);
}
.nav.stuck { padding: .8rem var(--pad); }
/* frost on ::after, never on .nav — a filter there traps the fixed mobile menu */
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 480ms var(--ease), border-color 480ms var(--ease), backdrop-filter 480ms var(--ease);
}
.nav.stuck::after {
  background: rgba(10,10,11,.72); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.wordmark { font-size: .95rem; font-weight: 500; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
.nav-menu { position: relative; display: flex; gap: 1.9rem; }
.nav-menu a {
  font-family: var(--mono); font-size: .68rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--mid);
  padding: .2rem 0; transition: color 260ms var(--ease); white-space: nowrap;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--ink); }
.nav-toggle { display: none; position: relative; width: 34px; height: 26px; padding: 0; background: none; border: none; cursor: pointer; }
.nav-toggle span { position: absolute; left: 4px; right: 4px; height: 1px; background: var(--ink); transition: transform 420ms var(--ease-soft); }
.nav-toggle span:nth-child(1) { top: 9px; }
.nav-toggle span:nth-child(2) { top: 16px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------------- hero: type leads, photograph is a layer behind ---------------- */

.hero {
  position: relative; min-height: 92svh; display: flex; align-items: center;
  padding: clamp(6rem,14vh,10rem) var(--pad) clamp(4rem,9vh,7rem);
  overflow: hidden; margin-top: -76px;
}
.hero-media {
  position: absolute; inset: 0 0 0 auto; width: min(56%, 900px); will-change: transform;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
          mask-image: linear-gradient(to right, transparent, #000 38%);
}
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  opacity: .34; transform: scale(1.04);
  animation: heroDrift 34s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1%,-1.2%,0); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 22%, rgba(10,10,11,.72) 52%, rgba(10,10,11,.35) 100%),
    linear-gradient(to top, var(--bg) 2%, transparent 40%);
}
.hero-text {
  position: relative; z-index: 2; max-width: 62rem;
  transform: translate3d(var(--px,0px), var(--py,0px), 0);
  transition: transform 900ms var(--ease-soft);
}
.hero-eyebrow {
  overflow: hidden; margin: 0 0 1.9rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase; color: var(--mid);
}
.hero-eyebrow span { display: block; transform: translateY(110%); transition: transform 900ms var(--ease-soft) 150ms; }
.hero-h1 { max-width: 17ch; }
.hero-h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-h1 .w { display: inline-block; transform: translateY(105%); transition: transform 1050ms var(--ease-soft); }
.hero-sub { overflow: hidden; margin: 2.1rem 0 0; max-width: 46ch; }
.hero-sub span {
  display: block; font-size: 1.06rem; line-height: 1.78; color: var(--mid);
  transform: translateY(110%); transition: transform 900ms var(--ease-soft) 620ms;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 800ms var(--ease) 760ms, transform 800ms var(--ease-soft) 760ms;
}
.trust-bar {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; list-style: none;
  margin: 3rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); max-width: 46rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity 800ms var(--ease) 930ms, transform 800ms var(--ease-soft) 930ms;
}
.trust-bar li {
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid); white-space: nowrap;
}
body.loaded .hero-eyebrow span, body.loaded .hero-sub span, body.loaded .hero-h1 .w { transform: translateY(0); }
body.loaded .hero-cta, body.loaded .trust-bar { opacity: 1; transform: translateY(0); }
.hero-h1 .line:nth-child(1) .w:nth-child(1) { transition-delay: 240ms; }
.hero-h1 .line:nth-child(1) .w:nth-child(2) { transition-delay: 300ms; }
.hero-h1 .line:nth-child(2) .w:nth-child(1) { transition-delay: 360ms; }
.hero-h1 .line:nth-child(2) .w:nth-child(2) { transition-delay: 410ms; }
.hero-h1 .line:nth-child(2) .w:nth-child(3) { transition-delay: 460ms; }
.hero-cue {
  position: absolute; z-index: 2; right: var(--pad); bottom: clamp(3rem,7vh,5rem);
  width: 1px; height: 60px; background: var(--line-2); overflow: hidden;
}
.hero-cue span { position: absolute; inset: 0; background: var(--ink); animation: cueRun 2.6s var(--ease) infinite; }
@keyframes cueRun { 0%{transform:translateY(-100%)} 60%{transform:translateY(100%)} 100%{transform:translateY(100%)} }

/* ---------------- reveals ---------------- */

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease-soft); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-img] { overflow: hidden; }
[data-reveal-img] img { opacity: 0; transform: scale(1.045); transition: opacity 450ms var(--ease), transform 800ms var(--ease-soft); }
[data-reveal-img].is-in img { opacity: 1; transform: scale(1); }

/* ---------------- sections ---------------- */

.section-head { padding: 0 var(--pad) clamp(3.5rem,8vh,5.5rem); }

.intro-band { padding: var(--gap) var(--pad); display: grid; gap: 2.5rem; }
.intro-band p {
  font-size: clamp(1.6rem,3.4vw,2.5rem); font-weight: 400; letter-spacing: -.035em;
  line-height: 1.22; color: var(--ink); margin: 0; max-width: 24ch;
}
.intro-band .side p { font-size: 1.05rem; font-weight: 300; letter-spacing: 0; line-height: 1.8; color: var(--mid); max-width: 50ch; }
.intro-band .side p + p { margin-top: 1.3rem; }

/* ---------------- work cards ---------------- */

.section-work { padding: var(--gap) 0 0; }
.featured { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem,6vh,4rem); padding: 0 var(--pad); }
.feat { margin: 0; }
.feat-shot {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: var(--sh-2);
  transform: translate3d(0, var(--lift,0px), 0) perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: box-shadow 620ms var(--ease), border-color 420ms var(--ease), transform 560ms var(--ease-soft);
  will-change: transform;
}
.feat-shot img { width: 100%; height: auto; }
.feat:hover .feat-shot { --lift: -8px; box-shadow: var(--sh-3); border-color: rgba(244,241,236,.24); }
.feat:hover .feat-shot img { transform: scale(1.035); }

.shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  transform: translateX(-115%); transition: transform 1100ms var(--ease-soft);
}
.feat:hover .shine { transform: translateX(115%); }

.chrome {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  background: rgba(244,241,236,.04); border-bottom: 1px solid var(--line);
}
.chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,241,236,.14); flex: none; }
.chrome i:first-child { background: rgba(244,241,236,.22); }
.chrome-url {
  margin-left: 8px; padding: 3px 12px; border-radius: var(--r-pill);
  background: rgba(244,241,236,.05); font-family: var(--mono); font-size: .6rem;
  color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.feat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.25rem; }
.feat-meta h3 { font-size: 1.3rem; }
.site-cat { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); }
.feat-tech { margin: .7rem 0 0; font-family: var(--mono); font-size: .66rem; color: var(--faint); letter-spacing: .04em; }

.work-note { margin: clamp(3rem,7vh,4.5rem) 0 0; padding: 0 var(--pad); font-size: 1rem; line-height: 1.8; color: var(--mid); max-width: 66ch; }

/* ---------------- process: the numerals ARE the design ---------------- */

.section-process { padding: var(--gap) 0 0; }
.steps { list-style: none; margin: 0; padding: 0 var(--pad); counter-reset: step; }
.steps li {
  position: relative; counter-increment: step;
  padding: clamp(2.5rem,5vh,3.5rem) 0 clamp(2.5rem,5vh,3.5rem) clamp(4.5rem,11vw,9rem);
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.04em; line-height: 1;
  color: var(--ink); opacity: .13;
  transition: opacity 600ms var(--ease); pointer-events: none;
}
.steps li:hover::before { opacity: .3; }
.steps h3 { font-size: clamp(1.7rem,3.2vw,2.4rem); margin-bottom: .7rem; }
.steps p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--mid); max-width: 56ch; }

/* ---------------- proof ---------------- */

.proof { padding: var(--gap) var(--pad) 0; }
.proof-head { margin-bottom: clamp(3rem,7vh,4.5rem); }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.proof-grid > div { padding: 2rem 0; border-top: 1px solid var(--line); }
.proof-grid > div:last-child { border-bottom: 1px solid var(--line); }
.proof-grid dt { font-weight: 500; font-size: clamp(2.8rem,6vw,4.2rem); letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.proof-grid dt span { font-family: var(--mono); font-size: .85rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); margin-left: .4rem; }
.proof-grid dd { margin: .9rem 0 0; font-size: .95rem; line-height: 1.75; color: var(--mid); max-width: 32ch; }

/* ---------------- cta + footer ---------------- */

.cta-band {
  margin-top: var(--gap); padding: clamp(4.5rem,11vh,8rem) var(--pad);
  background: var(--bg-2); border-top: 1px solid var(--line); text-align: center;
}
.cta-band h2 { max-width: 22ch; margin: 0 auto; }
.cta-band .intro { margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 2.4rem; }

.footer { background: var(--bg); border-top: 1px solid var(--line); padding: var(--gap) 0 2.5rem; }
.footer-statement {
  margin: 0 0 clamp(3.5rem,9vh,6rem); padding: 0 var(--pad);
  font-weight: 500; font-size: clamp(2.4rem,7vw,5.6rem); line-height: .98; letter-spacing: -.05em; color: var(--ink);
}
.footer-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem 1.5rem; padding: clamp(3rem,7vh,4.5rem) var(--pad); }
.footer-col-label { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mid); margin-bottom: .9rem; }
.footer-col a, .footer-static { display: inline-flex; align-items: center; gap: .6rem; font-size: .98rem; text-decoration: none; color: var(--mid); transition: color 300ms var(--ease); word-break: break-word; }
.footer-col a:hover { color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: .28rem 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem var(--pad) 0; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--mid); }

/* a small ribbon so it is obvious which version you are looking at */
.variant-note {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 150; display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(16,16,18,.86); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid);
}
.variant-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }

/* ---------------- small screens ---------------- */

@media (max-width: 759px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    flex-direction: column; justify-content: center; gap: 0; padding: var(--pad);
    background: #0C0C0E; border-left: 1px solid var(--line);
    transform: translateX(100%); visibility: hidden;
    transition: transform 560ms var(--ease-soft), visibility 560ms;
  }
  .nav-menu.open { transform: translateX(0); visibility: visible; }
  .nav-menu a {
    font-family: var(--sans); font-size: 1.7rem; font-weight: 400;
    letter-spacing: -.035em; text-transform: none; color: var(--ink);
    padding: .7rem 0; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateX(24px);
    transition: opacity 460ms var(--ease), transform 560ms var(--ease-soft);
  }
  .nav-menu.open a { opacity: 1; transform: none; }
  .nav-menu.open a:nth-child(1){transition-delay:120ms}
  .nav-menu.open a:nth-child(2){transition-delay:175ms}
  .nav-menu.open a:nth-child(3){transition-delay:230ms}
  .nav-menu.open a:nth-child(4){transition-delay:285ms}
  body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

  .hero-media { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero-img { opacity: .22; }
  .hero::after { background: linear-gradient(to bottom, rgba(10,10,11,.6) 0%, rgba(10,10,11,.4) 28%, rgba(10,10,11,.92) 76%, var(--bg) 100%); }
  .variant-note { font-size: .55rem; gap: 10px; padding: 9px 14px; }
}

/* ---------------- wider screens ---------------- */

@media (min-width: 760px) {
  .nav {
    top: .9rem; width: min(1400px, calc(100% - 2 * var(--pad))); margin: 0 auto;
    padding: .9rem 1.6rem; border-radius: var(--r-pill);
  }
  .nav.stuck { padding: .7rem 1.6rem; }
  .nav::after { border-radius: inherit; border-bottom: none; border: 1px solid transparent; }
  .nav.stuck::after { background: rgba(10,10,11,.7); border-color: var(--line); box-shadow: var(--sh-2); }
  .hero { margin-top: calc(-.9rem - 64px); }

  .intro-band { grid-template-columns: 1fr 1fr; gap: clamp(3rem,6vw,5.5rem); }
  .featured { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2.5rem); }
  .proof-grid { grid-template-columns: repeat(4,1fr); column-gap: clamp(1.5rem,3vw,3rem); }
  .proof-grid > div { border-bottom: 1px solid var(--line); padding: 2.25rem 0; }
  .steps li { padding-left: clamp(6rem,13vw,11rem); }
  .footer-cols { grid-template-columns: repeat(4,1fr); gap: 2rem; }
}

/* ---------------- touch: strip what a phone GPU pays for ---------------- */

@media (hover: none), (max-width: 900px) {
  .ambient, .grain, .grid-layer { display: none; }
  .hero-img { animation: none; }
  .nav.stuck::after, .nav-menu, .variant-note { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.stuck::after { background: rgba(10,10,11,.96); }
  .variant-note { background: #131315; }
  .feat-shot, .btn, .btn-ghost { will-change: auto; }
  .chrome { height: 32px; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-img] img, .hero-eyebrow span, .hero-sub span, .hero-h1 .w, .hero-cta, .trust-bar {
    opacity: 1 !important; transform: none !important;
  }
  .rule-soft span { transform: scaleX(1) !important; }
  .grain, .amb, .glow, .hero-cue { animation: none !important; }
  .glow { display: none; }
  .hero-text { transform: none !important; }
}

/* ==================================================================
   COMPONENTS FOR THE REMAINING PAGES
   Everything below is used by work / services / packages / about /
   contact / 404. Same tokens, same rules as the top of this file.
   ================================================================== */

/* ---------------- entrance screen ---------------- */

.veil {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  transition: transform 850ms var(--ease-soft), visibility 850ms;
  will-change: transform;
}
body.loaded .veil { transform: translateY(-101%); visibility: hidden; }
.no-entrance .veil { display: none; }
.veil-inner { text-align: center; }
.veil-mark, .veil-sub { display: block; overflow: hidden; }
.veil-mark {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.04em; color: var(--ink);
  animation: veilRise 900ms var(--ease-soft) both;
}
.veil-sub {
  margin-top: .9rem; font-family: var(--mono); font-weight: 400; font-size: .62rem;
  letter-spacing: .3em; text-indent: .15em; text-transform: uppercase; color: var(--mid);
  animation: veilRise 900ms 110ms var(--ease-soft) both;
}
@keyframes veilRise { from{opacity:0;transform:translateY(115%)} to{opacity:1;transform:translateY(0)} }
.veil-bar {
  position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%);
  width: min(180px, 42vw); height: 1px; background: var(--line); overflow: hidden;
}
.veil-bar i {
  display: block; height: 100%; width: 100%; background: var(--ink); opacity: .7;
  transform: scaleX(0); transform-origin: 0 50%;
  animation: veilFill 950ms 80ms var(--ease) forwards;
}
@keyframes veilFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%; background: var(--ink); opacity: .55;
  transform: scaleX(0); transform-origin: 0 50%;
}

/* page transition: arrival only. An exit fade is a real wait — see app.js. */
body.page-loading main, body.page-loading .footer { opacity: 0; transform: translateY(8px); }
main, .footer { opacity: 1; transform: none; transition: opacity 240ms var(--ease), transform 300ms var(--ease-soft); }

.footer-rule { padding: 0 var(--pad); }
.footer-rule span {
  display: block; height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 12%, var(--line) 88%, transparent);
  transform: scaleX(0); transition: transform 1.4s var(--ease-soft);
}
.footer-rule.is-in span { transform: scaleX(1); }

/* ---------------- inner-page hero ---------------- */

.page-hero { padding: clamp(7rem,17vh,12rem) var(--pad) clamp(4rem,9vh,7rem); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 19ch; }
.page-hero .intro { max-width: 56ch; }
.page-hero-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  margin: 2.6rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); list-style: none;
}
.page-hero-meta li {
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
}
.page-hero-meta li a { text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }

/* ---------------- case studies ---------------- */

.cases { display: flex; flex-direction: column; gap: clamp(5rem,12vh,9rem); padding: 0 var(--pad); }
.case { margin: 0; }
.case-shot {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: var(--sh-2);
  transform: translate3d(0, var(--lift,0px), 0) perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: box-shadow 620ms var(--ease), border-color 420ms var(--ease), transform 560ms var(--ease-soft);
  will-change: transform;
}
.case-shot img { width: 100%; height: auto; }
.case:hover .case-shot { --lift: -8px; box-shadow: var(--sh-3); border-color: rgba(244,241,236,.24); }
.case:hover .case-shot img { transform: scale(1.035); }
.case:hover .shine, .content-stack figure:hover .shine, .portrait:hover .shine { transform: translateX(115%); }

.case-body { padding-top: 2rem; }
.case-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem 1.2rem; }
.case-head h2, .case-head h3 { font-size: clamp(1.9rem,3.6vw,2.7rem); }

.tag {
  font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .35rem .85rem; white-space: nowrap;
}
.tag-live { color: var(--ink); border-color: rgba(244,241,236,.4); }

.case-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.5rem;
  margin: 1.8rem 0 0; padding: 1.4rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.case-facts dt {
  font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-bottom: .35rem;
}
.case-facts dd { margin: 0; font-size: .95rem; line-height: 1.5; }

.case-story { margin-top: 1.7rem; }
.case-story p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.75; color: var(--mid); max-width: 54ch; }
.case-story p:last-child { margin-bottom: 0; }
.case-label {
  display: block; font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: .3rem;
}
.case-visit, .site-visit {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.9rem; padding: .75rem 1.3rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: .85rem; font-weight: 400; text-decoration: none;
  transform: translate3d(var(--mx,0px), var(--my,0px), 0);
  transition: transform 400ms var(--ease-soft), background 260ms var(--ease), border-color 260ms var(--ease);
}
.case-visit:hover, .site-visit:hover { background: var(--surface); border-color: rgba(244,241,236,.4); }
.case-visit i { font-style: normal; transition: transform 400ms var(--ease-soft); }
.case-visit:hover i { transform: translateX(4px); }

/* ---------------- about ---------------- */

.section-about { padding: var(--gap) var(--pad); }
.section-about p { color: var(--mid); max-width: 58ch; font-size: 1.05rem; line-height: 1.85; }
.about-body p + p { margin-top: 1.5rem; }
.sig { font-size: 1.05rem; color: var(--ink); margin-top: 2.5rem; }

.portrait {
  position: relative; margin: clamp(2.5rem,6vh,3.5rem) 0 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--sh-2); max-width: 26rem;
  transition: box-shadow 620ms var(--ease);
}
.portrait:hover { box-shadow: var(--sh-3); }
.portrait img { width: 100%; height: auto; transition: transform 900ms var(--ease-soft); }
.portrait:hover img { transform: scale(1.03); }

/* ---------------- packages ---------------- */

.section-services { position: relative; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.services-top { padding: var(--gap) var(--pad); }
.section-head-flush { padding-left: 0; padding-right: 0; }

.packages { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: clamp(1rem,3vh,2rem); }
.card {
  position: relative; padding: 2.6rem 2.1rem;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  transform: translate3d(0, var(--lift,0px), 0) perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 560ms var(--ease-soft), box-shadow 560ms var(--ease),
              background 420ms var(--ease), border-color 420ms var(--ease);
  will-change: transform;
}
.card:hover { --lift: -6px; background: rgba(244,241,236,.055); border-color: rgba(244,241,236,.2); box-shadow: var(--sh-2); }
.card[data-reveal].is-in {
  transform: translate3d(0, var(--lift,0px), 0) perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.package { display: flex; flex-direction: column; }
.package.featured { background: rgba(244,241,236,.07); border-color: rgba(244,241,236,.24); }
.card-flag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-family: var(--mono); font-size: .56rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: .32rem .8rem;
}
.pkg-top h2, .pkg-top h3 { font-size: clamp(1.7rem,3.2vw,2.2rem); }
.pkg-for { margin: .8rem 0 0; font-size: .98rem; line-height: 1.7; color: var(--mid); max-width: 36ch; }
.pkg-line {
  margin: 1.6rem 0 0; padding: 1.1rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .95rem; line-height: 1.65; color: var(--mid);
}
.pkg-line span {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: .3rem;
}
.package ul { list-style: none; padding: 0; margin: 1.5rem 0 0; flex: 1; }
.package li { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.6; }
.pkg-foot { margin-top: 2rem; }
.pkg-meta { margin: 0 0 .5rem; font-size: .9rem; color: var(--mid); }
.pkg-meta span {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: .2rem;
}
.pkg-foot .pkg-meta:last-of-type { margin-bottom: 0; }
.price {
  font-weight: 500; font-size: clamp(2.6rem,5vw,3.4rem);
  letter-spacing: -.045em; line-height: 1.05; margin: .2rem 0 1.6rem;
}
.price .per { font-family: var(--mono); font-size: .8rem; font-weight: 400; letter-spacing: 0; color: var(--mid); }

/* ---------------- services ---------------- */

.svc-list { padding: 0 var(--pad); }
.svc { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: clamp(2.75rem,6vh,4rem) 0; border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc h2 { font-size: clamp(1.8rem,3.4vw,2.6rem); }
.svc-lead { margin: 0; font-size: 1.02rem; line-height: 1.8; color: var(--mid); max-width: 58ch; }
.svc-lead + .svc-lead { margin-top: 1.1rem; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.svc-tags li {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .4rem .9rem;
}

/* ---------------- why ---------------- */

.why { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 var(--pad); }
.why li { list-style: none; padding: 2.1rem 0; border-top: 1px solid var(--line); }
.why li:last-child { border-bottom: 1px solid var(--line); }
.why h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.why p { margin: 0; font-size: .98rem; line-height: 1.8; color: var(--mid); max-width: 48ch; }

/* ---------------- photography section ---------------- */

.section-content { padding: var(--gap) var(--pad); display: grid; gap: clamp(3.5rem,8vh,5rem); }
.content-copy p { margin: 1.4rem 0 0; font-size: 1.05rem; line-height: 1.8; color: var(--mid); max-width: 48ch; }
.content-list { list-style: none; margin: 1.9rem 0 0; padding: 0; max-width: 42ch; }
.content-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.content-list li:first-child { border-top: 1px solid var(--line); }
.content-copy .btn-ghost { margin-top: 2rem; }
.content-stack { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; align-items: start; }
.content-stack figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: box-shadow 560ms var(--ease); will-change: transform;
}
.content-stack figure:hover { box-shadow: var(--sh-2); }
.content-stack img { width: 100%; height: clamp(190px,30vw,340px); object-fit: cover; transition: transform 900ms var(--ease-soft); }
.content-stack figure:hover img { transform: scale(1.06); }
/* The stagger must be scoped under .content-stack. `.content-stack figure`
   above is one class + one type, which outranks a bare `.cs-b`, so the offsets
   silently flattened and all three sat on the same baseline. */
.content-stack .cs-a { margin-top: 0; }
.content-stack .cs-b { margin-top: 2.5rem; }
.content-stack .cs-c { margin-top: 1rem; }

/* ---------------- comparison table + faq ---------------- */

.compare-wrap { padding: 0 var(--pad); overflow-x: auto; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-weight: 500; font-size: 1.2rem; letter-spacing: -.03em; border-bottom: 1px solid var(--line-2); }
.compare thead th:first-child {
  font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
}
.compare tbody th { font-weight: 300; font-size: .95rem; color: var(--mid); width: 34%; }
.compare .yes::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); vertical-align: .1em; }
.compare .no::before { content: ""; display: inline-block; width: 12px; height: 1px; background: var(--faint); vertical-align: .3em; }

.faq { padding: 0 var(--pad); }
.faq details { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  font-size: 1.2rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.4;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-weight: 300; font-size: 1.1rem;
  color: var(--mid); transition: transform 400ms var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 1rem 0 0; font-size: .98rem; line-height: 1.8; color: var(--mid); max-width: 62ch; }

/* ---------------- contact ---------------- */

.section-contact { position: relative; padding: var(--gap) var(--pad); overflow: hidden; }
.contact-facts {
  display: grid; gap: 1.25rem 3rem; margin: 2.5rem 0 0; padding: 1.5rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 46rem;
}
.contact-facts dt {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mid); margin-bottom: .35rem;
}
.contact-facts dd { margin: 0; font-size: 1rem; color: var(--ink); }

.form, .form-light {
  display: grid; gap: 2rem; max-width: 38rem; margin-top: 3.5rem;
  padding: clamp(1.75rem,4vw,2.75rem);
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
}
.field { position: relative; }
.field label {
  position: absolute; left: 0; top: .6rem; font-size: .98rem; color: var(--mid);
  pointer-events: none; transform-origin: 0 50%;
  transition: transform 340ms var(--ease-soft), color 340ms var(--ease);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field-select label {
  transform: translateY(-1.5rem) scale(.62);
  font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
}
input, textarea, select {
  font: inherit; font-size: 1rem; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--line-2); border-radius: 0;
  padding: .6rem 0; width: 100%; transition: border-color 340ms var(--ease);
}
select { appearance: none; -webkit-appearance: none; cursor: pointer; }
select option { background: #101012; color: #F4F1EC; }
input:hover, textarea:hover, select:hover { border-bottom-color: rgba(244,241,236,.34); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--ink); }
textarea { resize: vertical; }
::placeholder { color: transparent; }
.hp { position: absolute; left: -9999px; }
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid { border-bottom-color: #b9635a; }

.checks { display: grid; gap: .75rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.checks label {
  display: flex; align-items: center; gap: .7rem; font-size: .95rem; font-weight: 300;
  letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer;
}
.checks input { width: auto; accent-color: var(--ink); }
.field-group > .field-label {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-bottom: .9rem;
}
.form-status { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--mid); max-width: 46ch; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--ink); }
.form-status strong { font-weight: 400; color: var(--ink); }

.contact-layout { display: grid; grid-template-columns: 1fr; gap: clamp(3rem,8vh,5rem); padding: var(--gap) var(--pad); }
.contact-aside .faq { padding: 0; }
.contact-aside .faq summary { font-size: 1.05rem; }
.location { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.location h3 { font-size: 1.15rem; margin-bottom: .7rem; }
.location p { margin: 0; font-size: .98rem; line-height: 1.75; color: var(--mid); max-width: 42ch; }
.location-more { margin-top: 1rem; }

/* ---------------- wider screens for the above ---------------- */

@media (min-width: 760px) {
  .case { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(2.5rem,5vw,5rem); }
  .case-body { padding-top: 0; }
  .case-flip { grid-template-columns: 1fr 1.15fr; }
  .case-flip .case-shot { order: 2; }
  .case-flip .case-body { order: 1; }

  .section-about { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(3rem,6vw,5.5rem); align-items: start; }
  .section-content { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem,6vw,5.5rem); align-items: center; }
  .why { grid-template-columns: repeat(2,1fr); column-gap: clamp(2.5rem,5vw,4.5rem); }
  .why li:nth-child(2) { border-top: 1px solid var(--line); }
  .why li:nth-child(3) { border-bottom: none; }
  .svc { grid-template-columns: 1fr 1.35fr; gap: clamp(2.5rem,5vw,5rem); }
  .contact-layout { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .contact-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 980px) {
  .packages { grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: stretch; }
  .package.featured { --lift: -1.4rem; }
  .package.featured:hover { --lift: -1.8rem; }
}

@media (hover: none), (max-width: 900px) {
  .case-shot, .card, .content-stack figure { will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .veil { display: none !important; }
  body.page-loading main, body.page-loading .footer { opacity: 1 !important; transform: none !important; }
  .footer-rule span { transform: scaleX(1) !important; }
}

/* ---------------- remaining shared chrome ---------------- */

/* Sliding indicator under the active nav link. app.js measures the link's own
   width, and re-measures after document.fonts.ready — measured against the
   fallback face it lands under the wrong word. */
.nav-ind {
  position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--ink); opacity: .8; pointer-events: none;
  transition: transform 620ms var(--ease-soft), width 620ms var(--ease-soft), opacity 300ms var(--ease);
}

/* Inner pages carry .nav-solid. On the ivory site that stopped ivory text
   sitting on an ivory ground. Here it gives the pill its frost at rest, so a
   type-led page doesn't open with the header floating in nothing.
   It must repeat the whole .stuck treatment rather than just setting a bottom
   border: above 760px the header is a pill and `border-bottom` alone paints one
   curved edge of a rounded rectangle and nothing else. */
.nav-solid::after {
  background: rgba(10,10,11,.72); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
@media (min-width: 760px) {
  .nav-solid::after { border-color: var(--line); box-shadow: var(--sh-2); }
}
/* the frost is a per-frame re-sample of everything behind it — off on touch,
   same rule as every other backdrop-filter in this file */
@media (hover: none), (max-width: 900px) {
  .nav-solid::after {
    background: rgba(10,10,11,.94);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

.to-top {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mid);
  text-decoration: none;
  transform: translate3d(var(--mx,0px), var(--my,0px), 0);
  transition: color 300ms var(--ease), transform 400ms var(--ease-soft);
}
.to-top:hover { color: var(--ink); }
.to-top i {
  width: 22px; height: 1px; background: currentColor;
  transition: transform 400ms var(--ease-soft);
}
.to-top:hover i { transform: translateY(-3px) scaleX(1.15); }

.footer-nav { list-style: none; margin: 0; padding: 0; }

.about-head .eyebrow { margin-bottom: 1.2rem; }
.about-head h2 { max-width: 14ch; }

/* ---------------- comparison table on a phone ----------------
   It stays the same side-by-side grid it is on desktop — Emily asked for it to
   fit, not to be rebuilt, and a stacked one-block-per-feature version tested
   worse: "hard to understand."

   What made it not fit was `min-width: 640px` on a 327px column, which pushed
   265px of the grid off the right edge. Removing that alone is not enough,
   because the browser then sizes columns by content and the long feature names
   squeeze the package columns to nothing. `table-layout: fixed` plus an explicit
   width on the row header is what actually holds the four columns in place.
   Type and padding come down to match; the longer values wrap.
   ------------------------------------------------------------ */

@media (max-width: 760px) {
  .compare-wrap { overflow-x: visible; }
  .compare {
    min-width: 0; width: 100%;
    table-layout: fixed;          /* without this the columns collapse unevenly */
    font-size: .72rem;
  }
  .compare th, .compare td { padding: .75rem .3rem; vertical-align: top; }
  .compare th:first-child, .compare td:first-child { padding-left: 0; }
  .compare th:last-child, .compare td:last-child { padding-right: 0; }

  .compare thead th { font-size: .8rem; letter-spacing: -.02em; line-height: 1.2; }
  /* with table-layout:fixed the column widths come from the FIRST row, so this
     has to sit on the header cell — setting it on `tbody th` does nothing and
     leaves all four columns an equal 25% */
  .compare thead th:first-child { width: 40%; font-size: .46rem; letter-spacing: .12em; }

  /* no hyphens: auto here — nothing actually overflows a 131px column at this
     size, and it was breaking "ordering" across lines as "or-dering" */
  .compare tbody th { font-size: .72rem; line-height: 1.35; color: var(--mid); }
  .compare td { font-size: .72rem; line-height: 1.35; }
}

/* On a 320px screen (iPhone SE, and the narrowest phone still worth supporting)
   the package columns fall to 54px and the word "Signature" needs 63px, so the
   header alone was overflowing its column. Give the feature column less and drop
   the header type a step; nothing else needs to change. */
@media (max-width: 360px) {
  .compare { font-size: .68rem; }
  .compare thead th { font-size: .72rem; }
  .compare thead th:first-child { width: 34%; }
  .compare th, .compare td { padding: .7rem .25rem; }
}

/* social links beside the email on the contact page. They are also in the footer
   of every page, but the footer is the bottom of the page — someone deciding
   whether to hire her wants to see the feed before they fill the form in. */
.social-inline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: .8rem 0 0; padding: 0; list-style: none;
}
.social-inline a {
  font-size: .95rem; color: var(--mid); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.social-inline a:hover { color: var(--ink); border-color: var(--line-2); }

/* The "not sent yet" panel. It used to be one line of small grey text that was
   easy to miss entirely, which is half of why pressing Send felt like nothing
   happened. It reads as a panel now, and it holds the enquiry text so the
   visitor can always get at it. */
.form-status:not(:empty) {
  margin-top: .4rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.form-routes { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; }
.form-routes a, .form-routes .copy-enquiry {
  font: inherit; font-size: .85rem; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .5rem .9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.form-routes a:hover, .form-routes .copy-enquiry:hover {
  background: rgba(244,241,236,.07); border-color: rgba(244,241,236,.4);
}
.form-fineprint { display: block; margin-top: .85rem; font-size: .85rem; color: var(--mid); }
.form-dump {
  margin-top: .8rem; font-size: .8rem; line-height: 1.55; color: var(--mid);
  border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem;
  background: rgba(0,0,0,.25); resize: vertical;
}