/* ============================================================================
   ET3 Media — shared component layer   v1.0
   ----------------------------------------------------------------------------
   Imported by every marketing page right after /et3-tokens.css. Holds the
   header, footer, buttons, cards, project cards, lightbox, contact dialog,
   pricing, forms, hero scene and the intro overlay. Pages keep only their own
   layout rules in a small inline <style>.

   Art direction (redesign brief): ~80% quiet surfaces and readable content,
   ~15% brand accents, ~5% theatre. So:
     • the full neon scene (sunset, horizon, perspective floor) lives in .scene
       — the hero — and nowhere else;
     • the body grid is faint and paragraphs sit on opaque surfaces;
     • cyan is the action colour, magenta is emphasis/feedback, yellow is rare;
     • chromatic text offsets are reserved for .h-chroma (major headlines);
     • strong glow marks the primary action only;
     • the angular corner brackets (.corners) are the recurring signature.
   ============================================================================ */

/* ── 0. Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; background:var(--void); }
body{
  color:var(--text); font-family:var(--font-sans);
  font-size:var(--text-base); line-height:var(--lh-body);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    linear-gradient(var(--grid-quiet) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--grid-quiet) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--void);
}
::selection{ background:var(--magenta); color:#fff; }
a{ color:inherit; text-decoration:none; }
p a, li a, .prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
p a:hover, li a:hover, .prose a:hover{ color:var(--cream); }
.site-nav a, .site-footer a, .dialog__list a, .project, .card--link{ text-decoration:none; }
img, svg, video, canvas{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
:focus{ outline:none; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius); }
[hidden]{ display:none !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute; left:16px; top:-64px; z-index:1000;
  background:var(--cyan); color:var(--void); font-weight:700; padding:12px 16px; border-radius:var(--radius);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); position:relative; }
.wrap--wide{ max-width:var(--container-wide); }
.wrap--narrow{ max-width:var(--container-narrow); }

/* ── 1. Type ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:var(--lh-tight); color:var(--text); text-wrap:balance; }
p{ margin:0 0 1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
.lede{ font-size:var(--text-lg); color:var(--text); }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.measure{ max-width:var(--measure); }
.center{ text-align:center; }
.center p, .center .measure{ margin-left:auto; margin-right:auto; }

/* display headline: uppercase Audiowide, used for short major statements */
.h-display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:1.04;
}
.h-display--1{ font-size:var(--h1); }
.h-display--2{ font-size:var(--h2); }
/* chromatic offset — major headlines only (hero, final CTA) */
.h-chroma{ text-shadow:-2px 0 0 var(--magenta), 2px 0 0 var(--cyan), 0 0 34px rgba(255,255,255,.22); }
.h-chroma .accent{ color:var(--accent); text-shadow:-2px 0 0 var(--magenta), 2px 0 0 #fff, 0 0 22px var(--accent-glow); }
/* section title: short, uppercase, no offsets */
.sec-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:var(--h2); letter-spacing:.01em; line-height:1.1; margin:0 0 var(--s4);
}
.sec-title--sm{ font-size:var(--h3); }
/* subheads: readable family, sentence case */
.sub-title{ font-family:var(--font-sans); font-weight:700; font-size:var(--h3); margin:0 0 var(--s2); }
.sec-intro{ color:var(--text-muted); font-size:var(--text-lg); max-width:var(--measure); margin:0; }
.sec-head{ margin-bottom:var(--s7); }
.sec-head--center{ text-align:center; }
.sec-head--center .sec-intro{ margin-left:auto; margin-right:auto; }

/* terminal label: organizes sections */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s3);
}
.kicker::before{ content:"// "; color:var(--magenta); }
.kicker--yellow{ color:var(--hot-yellow); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-soft); background:var(--accent-faint);
  padding:6px 12px; border-radius:999px;
}
.tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.tag--plain{ color:var(--text-muted); border-color:var(--edge-soft); background:transparent; }

/* ── 2. Sections + surfaces ─────────────────────────────────────────────── */
section{ position:relative; }
.section{ padding:var(--section-pad) 0; }
.section--tight{ padding:calc(var(--section-pad) * .6) 0; }
/* quiet: near-solid ground behind reading content, pricing, forms, portfolios */
.section--quiet{ background:linear-gradient(180deg, rgba(17,11,32,.92), rgba(17,11,32,.96)); border-top:1px solid var(--edge-soft); border-bottom:1px solid var(--edge-soft); }
.section--void{ background:var(--void); }
.surface{ background:var(--surface); border:var(--border); border-radius:var(--radius); padding:var(--s5); }
.divider{ border:0; border-top:1px solid var(--edge-soft); margin:0; }

/* corner brackets — the brand signature. Add .corners to any bordered box. */
.corners{ position:relative; }
.corners::before,.corners::after{ content:""; position:absolute; width:var(--corner); height:var(--corner); pointer-events:none; z-index:3; }
.corners::before{ left:-1px; top:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.corners::after{ right:-1px; bottom:-1px; border-bottom:2px solid var(--magenta); border-right:2px solid var(--magenta); }

/* ── 3. Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border-radius:var(--radius);
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-sm);
  letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
  border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ background:var(--accent-faint); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn .arrow{ transition:transform var(--dur) var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
/* primary: cyan fill, magenta offset, the ONE strong glow */
.btn--primary{
  background:var(--accent); color:var(--void); border-color:var(--accent);
  box-shadow:4px 4px 0 0 var(--magenta), 0 0 22px var(--accent-glow);
}
.btn--primary:hover{ background:var(--accent); filter:brightness(1.08); box-shadow:5px 5px 0 0 var(--magenta), 0 0 30px var(--accent-glow); transform:translate(-1px,-1px); }
.btn--primary:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 0 var(--magenta); }
.btn--ghost{ color:var(--text); border-color:var(--edge-soft); }
.btn--ghost:hover{ color:var(--accent); border-color:var(--accent-soft); background:transparent; }
.btn--sm{ min-height:44px; padding:10px 16px; font-size:var(--text-xs); }
@media (max-width:480px){ .btn{ white-space:normal; text-align:center; } }
.btn--block{ width:100%; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none !important; filter:none !important; }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:700; font-size:var(--text-sm); letter-spacing:.04em; text-transform:uppercase; color:var(--text);
  background:none; border:0; padding:0; cursor:pointer;
}
.link-arrow .arrow{ color:var(--accent); transition:transform var(--dur) var(--ease); }
.link-arrow:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--accent); }
.link-arrow:hover .arrow{ transform:translateX(3px); }
.cta-row{ display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; }
.cta-row--center{ justify-content:center; }

/* ── 4. Header + navigation ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(10,6,18,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled{ background:rgba(10,6,18,.94); border-bottom-color:var(--edge-soft); }
.site-header__inner{
  max-width:var(--container-wide); margin:0 auto; padding:0 var(--gutter);
  height:var(--header-h); display:flex; align-items:center; gap:var(--s5);
}
.site-logo{ display:inline-flex; align-items:center; min-height:44px; margin-right:auto; }
.site-logo img{ height:30px; width:auto; filter:drop-shadow(0 0 6px rgba(0,240,255,.55)); }
.nav-toggle{
  display:none; align-items:center; gap:10px; min-height:44px; padding:8px 12px;
  background:transparent; border:1px solid var(--edge-soft); border-radius:var(--radius);
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer;
}
.nav-toggle .bars{ width:18px; height:2px; background:currentColor; box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }
.site-nav{ display:flex; align-items:center; gap:var(--s5); }
.site-nav__close{ display:none; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--s2); }
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--radius);
  font-weight:600; font-size:var(--text-sm); letter-spacing:.02em; color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-nav a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.site-nav a[aria-current="page"]{ color:var(--cyan); }
.site-nav .nav-util{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.06em; color:var(--text-faint); }
.site-nav .nav-util:hover{ color:var(--text); }
.site-nav .btn{ margin-left:var(--s2); }
/* The nav-link colour/hover rules above outrank .btn--primary; restate the
   primary button inside the nav so it keeps dark text on the cyan fill. */
.site-nav a.btn--primary, .site-nav a.btn--primary:hover{ color:var(--void); background:var(--accent); }

@media (max-width:920px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    display:none; position:fixed; inset:0; z-index:var(--z-menu);
    background:rgba(10,6,18,.98); padding:calc(var(--header-h) + 8px) var(--gutter) var(--s7);
    flex-direction:column; align-items:stretch; gap:var(--s4); overflow:auto;
  }
  .site-nav[data-open="true"]{ display:flex; }
  .site-nav__close{
    display:inline-flex; position:absolute; top:14px; right:var(--gutter);
    align-items:center; gap:8px; min-height:44px; padding:8px 14px;
    background:transparent; border:1px solid var(--edge-soft); border-radius:var(--radius);
    font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer;
  }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; border-top:1px solid var(--edge-soft); }
  .site-nav li{ border-bottom:1px solid var(--edge-soft); }
  .site-nav a{ width:100%; min-height:56px; font-size:var(--text-lg); padding:12px 4px; }
  .site-nav .btn{ margin:var(--s4) 0 0; width:100%; min-height:56px; }
  .site-nav .nav-util{ font-size:var(--text-sm); }
}

/* ── 5. Hero scene ──────────────────────────────────────────────────────── */
.scene{ position:relative; overflow:hidden; isolation:isolate; }
.scene__sky{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 1200px 620px at 50% -10%, rgba(0,240,255,.14) 0%, rgba(39,170,225,.10) 28%, rgba(177,76,255,.08) 50%, transparent 74%),
    radial-gradient(ellipse 700px 420px at 84% 24%, rgba(255,45,154,.10), transparent 62%),
    linear-gradient(var(--grid-cyan) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--grid-cyan) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.scene__sun{
  position:absolute; left:50%; bottom:22%; z-index:-2; pointer-events:none;
  width:min(560px,90vw); aspect-ratio:1; border-radius:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,
    #F5E642 0%,#F5E642 22%, transparent 22%,transparent 27%,
    #FF8B1A 27%,#FF8B1A 36%, transparent 36%,transparent 41%,
    #FF6B1A 41%,#FF6B1A 52%, transparent 52%,transparent 58%,
    #FF2D9A 58%,#FF2D9A 72%, transparent 72%,transparent 78%,
    #B14CFF 78%,#B14CFF 100%);
  filter:brightness(.42) drop-shadow(0 0 90px rgba(255,107,26,.18));
  opacity:.9;
}
.scene__horizon{
  position:absolute; left:0; right:0; bottom:22%; height:2px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--magenta) 25%, var(--cyan) 75%, transparent);
  box-shadow:0 0 14px var(--cyan), 0 0 40px rgba(0,240,255,.35);
}
.scene__floor{
  position:absolute; left:50%; bottom:-2px; width:300%; height:24%; z-index:-1; pointer-events:none;
  transform:translateX(-50%) perspective(520px) rotateX(70deg); transform-origin:bottom center;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,240,255,.45) 78px 80px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(0,240,255,.45) 58px 60px),
    linear-gradient(to top, rgba(0,240,255,.16), transparent);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
}
.scene--compact .scene__sun{ width:min(380px,70vw); bottom:8%; }
.scene--compact .scene__horizon{ bottom:8%; }
.scene--compact .scene__floor{ height:14%; }
.scene__scanlines{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* hero headline measure — one width for every service-page hero (18ch wraps
   identically to 17ch at 360/390/600/768/1024/1440, measured) */
.hero__title{ max-width:18ch; margin:0 auto var(--s5); }
@media (max-width:560px){ .hero__title{ font-size:clamp(25px,7.1vw,34px); } }

/* ── 6. Cards ───────────────────────────────────────────────────────────── */
.card{
  background:var(--surface-2); border:var(--border); border-radius:var(--radius);
  padding:var(--s5); position:relative;
}
.card--link{ display:block; color:inherit; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--link:hover{ border-color:var(--accent-soft); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent-soft); }
.card .num{ font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.16em; color:var(--accent); display:block; margin-bottom:var(--s3); }
.card h3{ font-size:var(--h3); margin:0 0 var(--s2); }
.card p{ color:var(--text-muted); font-size:var(--text-sm); }
.card .hl{ color:var(--accent); font-weight:600; }
.grid{ display:grid; gap:var(--s5); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .grid--4{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); counter-reset:step; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:var(--s2); }
.step .ring{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4);
  background:var(--void); border:2px solid var(--accent); color:var(--accent);
  font-family:var(--font-display); font-size:18px; box-shadow:0 0 14px var(--accent-faint);
}
.step h3{ font-size:var(--text-xl); margin:0 0 var(--s2); }
.step p{ color:var(--text-muted); font-size:var(--text-sm); }

/* ── 7. Project cards + galleries ───────────────────────────────────────── */
.project{
  display:flex; flex-direction:column; position:relative;
  background:var(--surface-2); border:var(--border); border-radius:var(--radius); overflow:hidden;
  color:inherit; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.project:hover, a.project:focus-visible{ border-color:var(--accent-soft); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px var(--accent-soft); }
.project__frame{
  position:relative; overflow:hidden; background:#06030f; aspect-ratio:16 / 10;
}
.project__frame picture{ display:contents; }
.project__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:transform var(--dur-slow) var(--ease); }
a.project:hover .project__frame img{ transform:scale(1.03); }
.project__frame--logo{ background:#fff; display:flex; align-items:center; justify-content:center; padding:12%; }
.project__frame--logo img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.project__frame--print{ background:var(--surface); display:flex; align-items:center; justify-content:center; padding:8%; }
.project__frame--print img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); }
.project__frame.is-missing img{ display:none; }
/* text fallback for any frame whose artwork failed (inserted by et3-site.js) */
.is-missing .fb-text{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s5);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); background:var(--surface);
}
.project__bar{ display:flex; flex-direction:column; gap:4px; padding:var(--s4) var(--s4); border-top:1px solid var(--edge-soft); }
.project__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.project__name{ font-weight:700; font-size:var(--text-lg); color:var(--text); }
.project__cat{ font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
.project__meta{ font-size:var(--text-sm); color:var(--text-muted); }
.project__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.project__tags span{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-soft); padding:3px 8px; border-radius:999px; }
@media (max-width:640px){ .project__row{ flex-direction:column; align-items:flex-start; gap:2px; } .project__cat{ white-space:normal; } }
.project--feature .project__frame{ aspect-ratio:21 / 10; }
@media (max-width:760px){ .project--feature .project__frame{ aspect-ratio:16 / 11; } }
.project--feature .project__name{ font-size:var(--text-xl); }
/* 1 featured + 2 smaller */
.work-layout{ display:grid; grid-template-columns:1fr; gap:var(--s5); }
.work-layout__pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
@media (max-width:640px){ .work-layout__pair{ grid-template-columns:1fr; } }
.work-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
@media (max-width:980px){ .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .work-grid{ grid-template-columns:1fr; } }
.logo-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s4); }
@media (max-width:980px){ .logo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .logo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.logo-cell{
  background:#fff; border:var(--border); border-radius:var(--radius); aspect-ratio:4 / 3; padding:0; overflow:hidden;
  display:block; position:relative; min-width:0;
}
.logo-cell picture, .logo-cell > img{ position:absolute; inset:14% 14% 26%; display:flex; align-items:center; justify-content:center; }
.logo-cell img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; margin:auto; }
.logo-cell .name{ position:absolute; left:0; right:0; bottom:0; padding:6px 10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#333; background:rgba(255,255,255,.9); text-align:center; }
.logo-cell.is-missing{ background:var(--surface); }
.logo-cell.is-missing img{ display:none; }
.logo-cell.is-missing .name{ inset:auto 0; top:50%; transform:translateY(-50%); background:transparent; color:var(--text-faint); }
.logo-cell--dark{ background:#111; }
.logo-cell--dark .name{ color:#ddd; background:rgba(0,0,0,.7); }

/* inspect button over a frame (opens the lightbox) */
.inspect{
  position:absolute; right:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px;
  background:rgba(10,6,18,.85); border:1px solid var(--edge-soft); border-radius:var(--radius);
  font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); cursor:pointer;
}
.inspect:hover{ border-color:var(--accent); color:var(--accent); }
.inspect--top{ top:10px; bottom:auto; }

/* studio photo slot — hides itself when the image is missing (no stock photos) */
.studio__photo{ width:100%; aspect-ratio:4 / 5; background:var(--surface); border:var(--border); border-radius:var(--radius); overflow:hidden; position:relative; }
.studio__photo picture{ display:contents; }
.studio__photo img{ width:100%; height:100%; object-fit:cover; }
.studio__photo.is-missing img{ display:none; }

/* ── 8. Lightbox ────────────────────────────────────────────────────────── */
.lb{ position:fixed; inset:0; z-index:var(--z-lightbox); display:none; }
.lb.is-open{ display:block; }
.lb__backdrop{ position:absolute; inset:0; background:rgba(4,2,12,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lb__stage{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s4); padding:72px 84px 24px; }
@media (max-width:680px){ .lb__stage{ padding:68px 12px 16px; } }
.lb__imgwrap{ position:relative; display:flex; align-items:center; justify-content:center; border:1px solid var(--edge); background:#06030f; box-shadow:0 24px 60px rgba(0,0,0,.6); max-width:100%; }
.lb__img{ display:block; max-width:min(1080px,92vw); max-height:60vh; width:auto; height:auto; object-fit:contain; }
.lb__img.is-logo{ background:#fff; padding:48px 60px; min-width:min(300px,80vw); }
.lb__img.is-print{ background:var(--surface); padding:24px; }
.lb__caption{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; justify-content:center; font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; }
.lb__title{ font-weight:700; color:var(--text); }
.lb__sub{ font-weight:700; color:var(--accent); }
.lb__sub::before{ content:"\2014  "; color:var(--text-faint); }
.lb__count{ color:var(--text-faint); }
.lb__thumbs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:92vw; }
.lb__thumb{ width:76px; height:48px; border:1px solid var(--edge-soft); background:#fff; overflow:hidden; cursor:pointer; padding:0; opacity:.55; transition:opacity var(--dur-fast), border-color var(--dur-fast); }
.lb__thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.lb__thumb[aria-current="true"]{ opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.lb__close, .lb__nav{
  position:absolute; z-index:2; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(10,6,18,.7); border:1px solid var(--edge-soft); border-radius:var(--radius); color:var(--text);
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase;
  transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.lb__close{ top:16px; right:16px; min-height:44px; padding:8px 14px; }
.lb__nav{ top:50%; transform:translateY(-50%); width:56px; height:56px; font-size:26px; font-family:var(--font-sans); }
.lb__close:hover, .lb__nav:hover{ color:var(--accent); border-color:var(--accent); background:rgba(10,6,18,.9); }
.lb__prev{ left:16px; } .lb__next{ right:16px; }
@media (max-width:680px){ .lb__nav{ width:52px; height:52px; } .lb__prev{ left:6px; } .lb__next{ right:6px; } }

/* ── 9. Dialog (contact) ────────────────────────────────────────────────── */
.dialog{ position:fixed; inset:0; z-index:var(--z-dialog); display:none; }
.dialog.is-open{ display:block; }
.dialog__backdrop{ position:absolute; inset:0; background:rgba(6,2,16,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.dialog__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  padding:var(--s6) var(--s6) var(--s5); box-shadow:6px 6px 0 0 var(--magenta), 0 0 40px var(--accent-faint);
}
@media (max-width:480px){ .dialog__panel{ padding:var(--s5) var(--s4); } }
.dialog__close{
  position:absolute; top:12px; right:12px; min-height:44px; min-width:44px; padding:8px 12px; cursor:pointer;
  background:transparent; border:1px solid var(--edge-soft); border-radius:var(--radius); color:var(--text-muted);
  font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
}
.dialog__close:hover{ color:var(--accent); border-color:var(--accent); }
.dialog__title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:var(--h3); margin:0 0 var(--s2); padding-right:80px; }
.dialog__lede{ color:var(--text-muted); font-size:var(--text-sm); margin:0 0 var(--s4); }
.dialog__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--edge-soft); }
.dialog__list li{ border-bottom:1px solid var(--edge-soft); }
.dialog__list a{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:56px; padding:10px 4px; color:var(--text); }
.dialog__list a:hover{ color:var(--accent); }
.dialog__list .lbl{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); display:block; }
.dialog__list .val{ font-weight:700; font-size:var(--text-lg); display:block; }
.dialog__note{ font-size:var(--text-xs); color:var(--text-faint); margin:var(--s4) 0 0; }

/* ── 10. Pricing ────────────────────────────────────────────────────────── */
.rate-card{ background:var(--surface); border:1px solid var(--edge); border-radius:var(--radius); padding:var(--s6); position:relative; }
.rate-card .starting{ font-family:var(--font-mono); font-weight:700; font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.rate-card .big{ font-family:var(--font-display); font-size:clamp(40px,6vw,58px); color:var(--accent); line-height:1; margin-bottom:2px; }
.rate-card .big-sub{ font-size:var(--text-sm); color:var(--text-muted); margin-bottom:var(--s5); }
.rate-rows{ border-top:1px solid var(--edge-soft); }
.rate-row{ display:flex; align-items:baseline; gap:var(--s3); padding:12px 0; border-bottom:1px dashed var(--edge-soft); font-size:var(--text-sm); }
.rate-row .amt{ font-family:var(--font-mono); font-weight:700; color:var(--accent); min-width:96px; white-space:nowrap; }
.rate-row .desc{ color:var(--text-muted); }
.rate-row .opt{ margin-left:auto; font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
@media (max-width:520px){ .rate-row{ flex-wrap:wrap; row-gap:2px; } .rate-row .opt{ margin-left:0; flex-basis:100%; } }
.rate-note{ margin-top:var(--s4); font-size:var(--text-xs); color:var(--text-muted); }
.rate-note::before{ content:"▸ "; color:var(--magenta); }
.examples{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.examples th, .examples td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--edge-soft); }
.examples th{ font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.examples td.amt{ font-family:var(--font-mono); font-weight:700; color:var(--text); text-align:right; }
.examples caption{ caption-side:bottom; text-align:left; font-size:var(--text-xs); color:var(--text-faint); padding-top:8px; }

/* ── 11. Forms ──────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label, .field__label{ font-weight:600; font-size:var(--text-sm); color:var(--text); }
.field .opt{ color:var(--text-faint); font-weight:400; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field textarea, .field select{
  width:100%; min-height:48px; padding:11px 14px; font:inherit; font-size:var(--text-base); color:var(--text);
  background:rgba(255,255,255,.03); border:1px solid var(--edge-soft); border-radius:var(--radius);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.field textarea{ min-height:120px; resize:vertical; }
.field__hint{ font-size:var(--text-xs); color:var(--text-faint); }
.form-error{ color:#ff8a80; font-size:var(--text-sm); min-height:1.4em; }
.hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.checkbox{ display:flex; align-items:flex-start; gap:12px; min-height:44px; cursor:pointer; }
.checkbox input{ width:22px; height:22px; margin:2px 0 0; accent-color:var(--accent); flex:0 0 auto; }
.checkbox .txt{ font-size:var(--text-sm); }
.checkbox .txt strong{ display:block; font-size:var(--text-base); }
.checkbox .txt span{ color:var(--text-muted); }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:20ch; margin:0 auto var(--s4); }
.cta-band p{ margin-left:auto; margin-right:auto; }
.cta-band .cta-row{ justify-content:center; }

/* ── 12. Footer ─────────────────────────────────────────────────────────── */
.site-footer{
  margin-top:var(--s8); background:linear-gradient(180deg,#08041a,#060010); border-top:1px solid var(--edge); position:relative;
  padding:var(--s7) 0 var(--s6);
}
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--magenta) 30%, var(--cyan) 70%, transparent); }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6); }
@media (max-width:760px){ .site-footer__grid{ grid-template-columns:1fr; } }
.site-footer h2{ font-family:var(--font-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin:0 0 var(--s3); }
.site-footer h2::before{ content:"// "; color:var(--magenta); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.site-footer li a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-muted); font-size:var(--text-sm); }
.site-footer li a:hover{ color:var(--cyan); }
.site-footer__brand img{ height:32px; width:auto; margin-bottom:var(--s3); filter:drop-shadow(0 0 6px rgba(0,240,255,.45)); }
.site-footer__brand p{ color:var(--text-muted); font-size:var(--text-sm); max-width:38ch; }
.site-footer__bottom{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--edge-soft); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.site-footer__bottom .left::before{ content:"◢ "; color:var(--magenta); }
.site-footer__bottom a{ color:var(--text-faint); margin-left:var(--s4); display:inline-flex; align-items:center; min-height:44px; }
.site-footer__bottom a:hover{ color:var(--cyan); }

/* ── 13. Intro overlay (homepage only) ───────────────────────────────────── */
#et3-intro{ position:fixed; inset:0; z-index:var(--z-intro); background:#000; overflow:hidden; clip-path:inset(0 0 0 0); }
#et3-intro.is-wiping{ animation:et3wipeUp 600ms cubic-bezier(.7,0,.3,1) forwards; }
@keyframes et3wipeUp{ to{ clip-path:inset(0 0 100% 0); } }
#et3-intro .in-grid{ position:absolute; left:50%; bottom:0; width:320%; height:62%; transform:translateX(-50%) translateY(40%) perspective(420px) rotateX(80deg); transform-origin:bottom center; opacity:0;
  background-image:repeating-linear-gradient(90deg,transparent 0 71px,rgba(0,240,255,.5) 71px 72px), repeating-linear-gradient(0deg,transparent 0 71px,rgba(0,240,255,.5) 71px 72px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.65) 40%,transparent 92%); mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.65) 40%,transparent 92%);
  animation:et3gridRise 600ms cubic-bezier(.16,.84,.3,1) forwards; }
@keyframes et3gridRise{ 0%{ opacity:0; transform:translateX(-50%) translateY(70%) perspective(420px) rotateX(86deg); } 100%{ opacity:.18; transform:translateX(-50%) translateY(0%) perspective(420px) rotateX(80deg); } }
#et3-intro .in-horizon{ position:absolute; left:0; right:0; top:38%; height:1px; opacity:0; background:linear-gradient(90deg,transparent,var(--cyan) 30%,#fff 50%,var(--cyan) 70%,transparent); box-shadow:0 0 14px rgba(0,240,255,.7),0 0 38px rgba(0,240,255,.35); animation:et3fadeIn 700ms 180ms ease-out forwards; }
#et3-intro .in-logo{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; user-select:none; }
#et3-intro .in-logo img{ width:clamp(220px,56vw,560px); height:auto; opacity:0; animation:et3Materialize 800ms 450ms steps(1,end) forwards; }
@keyframes et3Materialize{ 0%{ opacity:0; filter:drop-shadow(-9px 0 var(--magenta)) drop-shadow(9px 0 var(--cyan)); transform:translate(-4px,3px) skewX(-3deg); } 8%{ opacity:1; } 16%{ transform:translate(5px,-1px) skewX(2deg); filter:drop-shadow(11px 0 var(--magenta)) drop-shadow(-8px 0 var(--cyan)); } 24%{ opacity:.45; } 32%{ opacity:1; transform:translate(-3px,0); filter:drop-shadow(-7px 0 var(--magenta)) drop-shadow(7px 0 var(--cyan)); } 44%{ transform:translate(2px,0); filter:drop-shadow(5px 0 var(--magenta)) drop-shadow(-5px 0 var(--cyan)); } 58%{ opacity:.8; } 70%{ opacity:1; transform:none; filter:drop-shadow(-1px 0 var(--magenta)) drop-shadow(1px 0 var(--cyan)); } 100%{ opacity:1; transform:none; filter:drop-shadow(0 0 18px rgba(0,240,255,.9)) drop-shadow(0 0 40px rgba(0,240,255,.4)); } }
#et3-intro .in-status{ font-family:var(--font-mono); font-size:clamp(14px,2vw,18px); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-top:1.6em; opacity:0; animation:et3fadeIn 320ms 1300ms ease-out forwards; }
#et3-intro .in-cursor{ display:inline-block; margin-left:.15em; animation:et3blink 760ms steps(1,end) infinite; }
@keyframes et3fadeIn{ to{ opacity:1; } } @keyframes et3blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
#et3-intro .in-skip{ position:absolute; right:18px; bottom:16px; min-height:44px; padding:8px 14px; background:rgba(0,0,0,.4); border:1px solid rgba(0,240,255,.35); border-radius:var(--radius); font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); cursor:pointer; opacity:0; animation:et3fadeIn 400ms 700ms ease-out forwards; }
#et3-intro .in-skip:focus-visible{ box-shadow:0 0 0 3px #000, 0 0 0 6px var(--cyan); }

/* ── 14. Motion ─────────────────────────────────────────────────────────── */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.dialog.is-open .dialog__backdrop, .lb.is-open .lb__backdrop{ animation:fadeIn var(--dur) var(--ease); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
}