/* =====================================================================
   IRIS MEDIA — GLOBAL DESIGN SYSTEM
   ---------------------------------------------------------------------
   Extends the "Coming Soon" reference: warm film palette, Bebas Neue +
   JetBrains Mono, viewfinder/cinematography motifs (corner brackets,
   REC dot, grain + vignette). One stylesheet, no build step.

   TABLE OF CONTENTS
   01 Tokens (color, type, space, motion)
   02 Reset & base
   03 Film overlays (grain, vignette)
   04 Typography
   05 Layout (container, section, grid, section labels)
   06 Buttons
   07 Header & navigation (+ mobile menu)
   08 Footer
   09 Media frame (viewfinder placeholder)
   10 Cards (project, service, metric)
   11 Process
   12 Forms (multi-step contact)
   13 Reveal / motion
   14 Utilities
   ===================================================================== */

/* 01 — TOKENS ========================================================= */
:root{
  /* Core palette (from reference) */
  --bg:#121210;
  --bg-alt:#181816;
  --bg-elev:#1c1c19;
  --bg-elev-2:#222220;

  --cream:#ECE6D8;
  --cream-dim:rgba(236,230,216,0.56);
  --cream-faint:rgba(236,230,216,0.34);
  --cream-ghost:rgba(236,230,216,0.16);

  --amber:#E39A3B;
  --amber-bright:#F0A94A;
  --amber-glow:rgba(227,154,59,0.55);
  --amber-soft:rgba(227,154,59,0.12);

  --moss:#7E9E86;
  --moss-soft:rgba(126,158,134,0.14);

  --line:rgba(236,230,216,0.13);
  --line-strong:rgba(236,230,216,0.22);

  /* Type */
  --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale */
  --fs-display:clamp(3rem, 9vw, 7.5rem);
  --fs-h1:clamp(2.6rem, 6.5vw, 5rem);
  --fs-h2:clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3:clamp(1.5rem, 2.8vw, 2rem);
  --fs-body:clamp(0.95rem, 1.05vw, 1.05rem);
  --fs-small:0.8125rem;
  --fs-label:0.6875rem;

  /* Spacing scale */
  --sp-1:0.5rem;
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4rem;
  --sp-7:6rem;
  --sp-8:8rem;

  --section-y:clamp(4.5rem, 11vh, 9rem);
  --maxw:1200px;
  --maxw-narrow:760px;
  --gutter:clamp(1.25rem, 5vw, 3rem);

  --radius:4px;
  --radius-lg:8px;

  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --dur:0.5s;

  --header-h:76px;
}

/* 02 — RESET & BASE =================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

html,body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100%; }
img,video{ height:auto; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; cursor:pointer; }
fieldset{ border:0; min-width:0; }
input,textarea,select{ font-family:inherit; }

::selection{ background:var(--amber); color:#161410; }

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

/* Skip link */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:200;
  background:var(--amber);
  color:#161410;
  padding:0.6rem 1rem;
  font-size:var(--fs-small);
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:top 0.2s var(--ease);
}
.skip-link:focus{ top:0.75rem; }

/* 03 — FILM OVERLAYS ================================================== */
.grain{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0.045;
  mix-blend-mode:overlay;
  z-index:90;
}

.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.5) 100%);
  z-index:89;
}

/* 04 — TYPOGRAPHY ===================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:0.95;
  letter-spacing:0.01em;
  text-transform:uppercase;
}

.display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  line-height:0.9;
  text-transform:uppercase;
  letter-spacing:0.005em;
}

h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }

.accent{ color:var(--amber); }
.moss{ color:var(--moss); }

p{ font-size:var(--fs-body); color:var(--cream-dim); }
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  line-height:1.6;
  color:var(--cream);
  font-weight:400;
}

strong{ color:var(--cream); font-weight:600; }

/* Mono label — the "camera HUD readout" motif */
.label{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  max-width:100%;
  gap:0.5em 0.7em;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--cream-dim);
  font-weight:500;
}
.label .idx{ color:var(--amber); }
.label::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--line-strong);
}
.label.no-rule::before{ display:none; }

/* REC dot (reference motif, reusable) */
.rec-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 8px 1px var(--amber-glow);
  animation:pulse 1.8s ease-in-out infinite;
  flex:none;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* 05 — LAYOUT ========================================================= */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container.narrow{ max-width:var(--maxw-narrow); }

.section{ padding-block:var(--section-y); }
.section.tight{ padding-block:clamp(3rem, 7vh, 5rem); }

.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  max-width:640px;
  margin-bottom:var(--sp-6);
}
.section-head h2{ font-size:var(--fs-h2); }
.section-head p{ max-width:52ch; }

.rule{ height:1px; background:var(--line); border:0; }

.grid{ display:grid; gap:var(--sp-4); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }

/* Corner brackets (viewfinder framing) — reusable decorator */
.brackets{ position:relative; }
.brackets::before,
.brackets::after,
.brackets > .bk-b::before,
.brackets > .bk-b::after{
  content:"";
  position:absolute;
  width:20px; height:20px;
  border:1.5px solid var(--cream-ghost);
  pointer-events:none;
  transition:border-color var(--dur) var(--ease);
}
.brackets::before{ top:0; left:0; border-right:0; border-bottom:0; }
.brackets::after{ top:0; right:0; border-left:0; border-bottom:0; }
.brackets > .bk-b{ position:absolute; inset:0; pointer-events:none; }
.brackets > .bk-b::before{ bottom:0; left:0; border-right:0; border-top:0; }
.brackets > .bk-b::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* 06 — BUTTONS ======================================================== */
.btn{
  --btn-fg:var(--cream);
  --btn-bg:transparent;
  --btn-bd:var(--line-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.65em;
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  padding:0.95rem 1.6rem;
  border-radius:var(--radius);
  position:relative;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform 0.2s var(--ease);
  white-space:nowrap;
}
.btn .arrow{ transition:transform 0.3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  --btn-fg:#161410;
  --btn-bg:var(--amber);
  --btn-bd:var(--amber);
}
.btn-primary:hover{ --btn-bg:var(--amber-bright); --btn-bd:var(--amber-bright); }

.btn-ghost:hover{
  --btn-bg:var(--cream);
  --btn-fg:#161410;
  --btn-bd:var(--cream);
}

.btn-line{ --btn-bd:var(--line-strong); }
.btn-line:hover{ --btn-bd:var(--amber); --btn-fg:var(--amber); }

.btn-sm{ padding:0.65rem 1.1rem; font-size:var(--fs-label); }
.btn-block{ width:100%; }

/* Inline text link with amber underline (reference style) */
.link{
  color:var(--cream);
  border-bottom:1px solid var(--amber);
  padding-bottom:2px;
  transition:color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link:hover{ color:var(--amber); }

.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-size:var(--fs-small);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream);
  transition:color 0.25s var(--ease), gap 0.25s var(--ease);
}
.arrow-link .arrow{ color:var(--amber); transition:transform 0.3s var(--ease); }
.arrow-link:hover{ color:var(--amber); }
.arrow-link:hover .arrow{ transform:translateX(4px); }

/* 07 — HEADER & NAV =================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:linear-gradient(to bottom, rgba(18,18,16,0.85), rgba(18,18,16,0));
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(18,18,16,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}

/* Logo / wordmark with aperture mark */
.brand{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  z-index:120;
}
.brand .aperture{
  width:26px; height:26px;
  color:var(--amber);
  transition:transform 0.6s var(--ease);
}
.brand:hover .aperture{ transform:rotate(60deg); }
.brand .wordmark{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
}
.brand .wordmark b{ color:var(--amber); font-weight:400; }

/* Desktop nav */
.nav{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-links{ display:flex; align-items:center; gap:var(--sp-4); list-style:none; }
.nav-links a{
  font-size:var(--fs-small);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream-dim);
  position:relative;
  padding:0.4rem 0;
  transition:color 0.25s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:1px;
  background:var(--amber);
  transition:width 0.3s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:var(--cream); }

/* Hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  background:none;
  border:0;
  z-index:120;
}
.nav-toggle span{
  display:block;
  width:24px; height:1.5px;
  margin-inline:auto;
  background:var(--cream);
  transition:transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Full-screen mobile menu */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:110;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; }
.mobile-menu::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 0%, rgba(227,154,59,0.06), transparent 55%);
  pointer-events:none;
}
.mobile-menu ol{ list-style:none; margin-top:auto; }
.mobile-menu li{
  border-top:1px solid var(--line);
  opacity:0;
  transform:translateY(12px);
}
.mobile-menu li:last-child{ border-bottom:1px solid var(--line); }
body.menu-open .mobile-menu li{
  animation:menuIn 0.5s var(--ease) forwards;
}
body.menu-open .mobile-menu li:nth-child(1){ animation-delay:0.08s; }
body.menu-open .mobile-menu li:nth-child(2){ animation-delay:0.14s; }
body.menu-open .mobile-menu li:nth-child(3){ animation-delay:0.20s; }
body.menu-open .mobile-menu li:nth-child(4){ animation-delay:0.26s; }
body.menu-open .mobile-menu li:nth-child(5){ animation-delay:0.32s; }
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.mobile-menu a{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1.15rem 0.25rem;
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 11vw, 3.5rem);
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
  transition:color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.mobile-menu a .num{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:var(--amber);
}
.mobile-menu a:hover,.mobile-menu a:focus-visible{ color:var(--amber); padding-left:0.9rem; }
.mobile-menu .mm-cta{ margin-top:1.75rem; }
.mobile-menu .mm-meta{
  margin-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 1.5rem;
  font-size:var(--fs-label);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream-faint);
}
.mobile-menu .mm-meta a{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  color:var(--cream-dim);
  padding:0;
}
.mobile-menu .mm-meta a:hover{ color:var(--amber); padding-left:0; }

/* 08 — FOOTER ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding-block:var(--sp-7) var(--sp-4);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--sp-5);
  padding-bottom:var(--sp-6);
}
.footer-brand .wordmark{
  font-family:var(--font-display);
  font-size:2rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.footer-brand .wordmark b{ color:var(--amber); font-weight:400; }
.footer-brand p{ margin-top:var(--sp-2); max-width:34ch; font-size:var(--fs-small); }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.18em;
  color:var(--cream-faint);
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
  font-weight:600;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a{
  font-size:var(--fs-small);
  color:var(--cream-dim);
  transition:color 0.25s var(--ease);
}
.footer-col a:hover{ color:var(--amber); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4);
  justify-content:space-between;
  align-items:center;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-label);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

/* 09 — MEDIA FRAME (viewfinder placeholder) ========================== */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:
    linear-gradient(135deg, var(--bg-elev), var(--bg-alt));
  border:1px solid var(--line);
  border-radius:var(--radius);
  aspect-ratio:16/9;
}
.media-frame.portrait{ aspect-ratio:4/5; }
.media-frame.square{ aspect-ratio:1/1; }
.media-frame.tall{ aspect-ratio:3/4; }
.media-frame img,.media-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* subtle diagonal texture for empty placeholders */
.media-frame.is-placeholder::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -45deg, transparent, transparent 12px,
    rgba(236,230,216,0.018) 12px, rgba(236,230,216,0.018) 13px);
}
/* HUD readout overlay for placeholder frames */
.media-frame .hud{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:0.9rem 1rem;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cream-faint);
  pointer-events:none;
}
.media-frame .hud .row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.media-frame .hud .tag{ color:var(--amber); }
.media-frame .center-label{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cream-faint);
}
/* play button for showreel/video placeholders */
.play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:76px; height:76px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(18,18,16,0.4);
  display:grid;
  place-items:center;
  color:var(--cream);
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  backdrop-filter:blur(2px);
}
.play-btn svg{ margin-left:3px; }
a:hover .play-btn,.play-btn:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:#161410;
  transform:translate(-50%,-50%) scale(1.06);
}

/* 10 — CARDS ========================================================== */
/* Project card */
.project-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  position:relative;
}
.project-card .media-frame{ transition:border-color var(--dur) var(--ease); }
.project-card:hover .media-frame{ border-color:var(--line-strong); }
.project-card .thumb{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.project-card .thumb img{ transition:transform 0.7s var(--ease); }
.project-card:hover .thumb img{ transform:scale(1.04); }
.project-card .meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.project-card .cat{
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber);
}
.project-card .metric{
  font-size:var(--fs-label);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--moss);
}
.project-card h3{ font-size:var(--fs-h3); }
.project-card .role,
.project-card .desc{ font-size:var(--fs-small); color:var(--cream-dim); }
.project-card .role{ color:var(--cream-faint); letter-spacing:0.04em; }

/* clickable card affordance */
.card-tag{
  position:absolute;
  top:0.75rem; left:0.75rem;
  z-index:2;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream);
  background:rgba(18,18,16,0.7);
  border:1px solid var(--line);
  padding:0.3rem 0.55rem;
  border-radius:2px;
  backdrop-filter:blur(4px);
}

/* Homepage "Selected Work" — uniform thumbnails for a clean aligned row */
[data-featured-work] .media-frame{ aspect-ratio:4/3; }

/* Service card */
.service-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-4);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card:hover{ border-color:var(--line-strong); background:var(--bg-elev); transform:translateY(-3px); }
.service-card .sc-num{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  color:var(--amber);
}
.service-card h3{ font-size:var(--fs-h3); }
.service-card p{ font-size:var(--fs-small); }
.service-card ul{ list-style:none; display:flex; flex-wrap:wrap; gap:0.4rem 0.5rem; margin-top:auto; padding-top:var(--sp-2); }
.service-card li{
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cream-faint);
  border:1px solid var(--line);
  padding:0.28rem 0.55rem;
  border-radius:2px;
}

/* Metric / stat block */
.metric-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat{
  background:var(--bg-alt);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  transition:background var(--dur) var(--ease);
}
.stat:hover{ background:var(--bg-elev); }
.stat .num{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 5vw, 4rem);
  line-height:0.9;
  color:var(--cream);
}
.stat .num em{ color:var(--amber); font-style:normal; }
.stat .lbl{
  font-size:var(--fs-label);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

/* 11 — PROCESS ======================================================== */
.process{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line);
}
.process-step{
  padding:var(--sp-4) var(--sp-3) var(--sp-3) 0;
  border-top:2px solid transparent;
  margin-top:-1px;
  position:relative;
  transition:border-color var(--dur) var(--ease);
}
.process-step + .process-step{ padding-left:var(--sp-3); border-left:1px solid var(--line); }
.process-step:hover{ border-top-color:var(--amber); }
.process-step .step-num{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  color:var(--amber);
  margin-bottom:var(--sp-3);
  display:block;
}
.process-step h3{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.process-step p{ font-size:var(--fs-small); }

/* 12 — FORMS ========================================================== */
.field{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:var(--sp-3); }
.field label{
  font-size:var(--fs-label);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
}
.field label .req{ color:var(--amber); }
.input,.textarea,select.input{
  font-family:var(--font-mono);
  font-size:var(--fs-small);
  color:var(--cream);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.9rem 1rem;
  width:100%;
  transition:border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--cream-faint); }
.input:focus,.textarea:focus,select.input:focus{
  outline:none;
  border-color:var(--amber);
  background:var(--bg-elev);
}
.textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field.error .input,.field.error .textarea{ border-color:#c8624a; }
.field-error{
  font-size:0.7rem;
  letter-spacing:0.06em;
  color:#e0836c;
  min-height:1em;
}

/* selectable option cards (services, budget) */
.option-grid{ display:grid; gap:0.75rem; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.option{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:1rem 1.1rem;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color 0.25s var(--ease), background 0.25s var(--ease);
  font-size:var(--fs-small);
}
.option:hover{ border-color:var(--line-strong); background:var(--bg-elev); }
.option input{ position:absolute; opacity:0; pointer-events:none; }
.option .box{
  width:18px; height:18px;
  border:1px solid var(--line-strong);
  border-radius:3px;
  flex:none;
  display:grid; place-items:center;
  transition:border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.option .box svg{ opacity:0; transform:scale(0.6); transition:opacity 0.2s var(--ease), transform 0.2s var(--ease); color:#161410; }
.option.radio .box{ border-radius:50%; }
.option :checked ~ .box{ background:var(--amber); border-color:var(--amber); }
.option :checked ~ .box svg{ opacity:1; transform:none; }
.option:has(:checked){ border-color:var(--amber); background:var(--amber-soft); }
.option:has(:focus-visible){ outline:2px solid var(--amber); outline-offset:2px; }
.option .opt-label{ line-height:1.3; }

/* multi-step */
.form-steps{ position:relative; }
.form-step{ display:none; }
.form-step.active{ display:block; animation:stepIn 0.45s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.step-head{ margin-bottom:var(--sp-4); }
.step-head .step-kicker{
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:0.6rem;
}
.step-head h3{ font-size:var(--fs-h3); }
.step-head p{ font-size:var(--fs-small); margin-top:0.5rem; }

/* progress bar */
.progress{ margin-bottom:var(--sp-4); }
.progress-track{ height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:2px; }
.progress-fill{ position:absolute; inset:0 auto 0 0; width:20%; background:var(--amber); transition:width 0.5s var(--ease); }
.progress-meta{
  display:flex; justify-content:space-between; margin-top:0.7rem;
  font-size:var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-faint);
}
.progress-meta .cur{ color:var(--cream); }

.form-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:var(--sp-4); }
.form-nav [data-next],.form-nav [data-submit]{ margin-left:auto; }

/* success state */
.form-success{ display:none; text-align:center; padding:var(--sp-5) 0; }
.form-success.active{ display:block; animation:stepIn 0.5s var(--ease); }
.form-success .ok{
  width:64px; height:64px; margin:0 auto var(--sp-3);
  border-radius:50%; border:1px solid var(--amber);
  display:grid; place-items:center; color:var(--amber);
}
.form-success h3{ font-size:var(--fs-h2); }
.form-success p{ max-width:44ch; margin:var(--sp-2) auto 0; }

/* 13 — REVEAL / MOTION =============================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay:var(--reveal-delay, 0s);
}
[data-reveal].in{ opacity:1; transform:none; }

/* 14 — UTILITIES ===================================================== */
.stack-1 > * + *{ margin-top:var(--sp-1); }
.stack-2 > * + *{ margin-top:var(--sp-2); }
.stack-3 > * + *{ margin-top:var(--sp-3); }
.stack-4 > * + *{ margin-top:var(--sp-4); }
.mt-2{ margin-top:var(--sp-2); }
.mt-3{ margin-top:var(--sp-3); }
.mt-4{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); }
.mb-4{ margin-bottom:var(--sp-4); }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.maxw-narrow{ max-width:var(--maxw-narrow); }
.btn-row{ display:flex; flex-wrap:wrap; gap:0.9rem; }
.btn-row.center{ justify-content:center; }
.hide{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Homepage hero — clears the fixed header */
.hero{ padding-top:calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)); }

/* Page hero (shared across inner pages) */
.page-hero{
  padding-top:calc(var(--header-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom:clamp(2.5rem, 6vh, 4.5rem);
}
.page-hero h1{ font-size:var(--fs-display); line-height:0.9; }
.page-hero .lead{ max-width:56ch; margin-top:var(--sp-3); }

/* Filter bar (Work page) */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.filter-bar button{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cream-dim);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.55rem 0.95rem;
  transition:color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.filter-bar button:hover{ color:var(--cream); border-color:var(--line-strong); }
.filter-bar button.is-active{ color:#161410; background:var(--amber); border-color:var(--amber); }

/* Editorial work grid — a couple of items span wider for rhythm */
.work-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--sp-4);
}
.work-grid .project-card{ grid-column:span 2; }
.work-grid .project-card:nth-child(7n+1){ grid-column:span 3; }
.work-grid .project-card:nth-child(7n+4){ grid-column:span 3; }
@media (max-width:960px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .work-grid .project-card,
  .work-grid .project-card:nth-child(7n+1),
  .work-grid .project-card:nth-child(7n+4){ grid-column:span 1; }
}
@media (max-width:560px){
  .work-grid{ grid-template-columns:1fr; }
}

/* Results / dashboard frame */
.dash{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--bg-elev), var(--bg-alt));
  padding:var(--sp-4);
  overflow:hidden;
}
.dash-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:var(--sp-3); margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-faint);
}
.dash-head .dot{ display:inline-flex; align-items:center; gap:0.5rem; }
.dash-chart{ width:100%; height:auto; }

/* Services panels */
.svc-panel{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-5);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease);
}
.svc-panel:hover{ border-color:var(--line-strong); }
.svc-panel .svc-num{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:0.16em;
  color:var(--amber);
}
.svc-panel h3{ font-size:var(--fs-h2); }
.svc-panel > p{ font-size:var(--fs-small); max-width:46ch; }
.svc-list{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:var(--sp-2); }
.svc-list li{
  font-size:0.75rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--cream-dim);
  border:1px solid var(--line);
  padding:0.4rem 0.7rem;
  border-radius:var(--radius);
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.svc-list li:hover{ border-color:var(--line-strong); color:var(--cream); }
.svc-list li.soon{
  color:var(--moss);
  border-color:var(--moss-soft);
  background:var(--moss-soft);
}

/* FAQ accordion (native <details>) */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:var(--sp-3) 0;
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--cream);
  transition:color 0.25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--amber); }
.faq summary .sign{
  flex:none;
  width:22px; height:22px;
  position:relative;
  transition:transform 0.35s var(--ease);
}
.faq summary .sign::before,
.faq summary .sign::after{
  content:""; position:absolute; background:var(--amber);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq summary .sign::before{ width:14px; height:1.5px; }
.faq summary .sign::after{ width:1.5px; height:14px; transition:transform 0.35s var(--ease); }
.faq details[open] summary .sign::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq details[open] summary{ color:var(--amber); }
.faq .faq-body{ padding:0 0 var(--sp-3); max-width:64ch; }
.faq .faq-body p{ font-size:var(--fs-small); }

/* Contact layout */
.contact-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:var(--sp-6);
  align-items:start;
}
.contact-aside{ position:sticky; top:100px; }
.contact-aside .lead{ margin-top:var(--sp-3); }
.contact-card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem, 3vw, 2.5rem);
}
.contact-detail{
  display:flex; flex-direction:column; gap:0.3rem;
  padding:var(--sp-3) 0;
  border-top:1px solid var(--line);
}
.contact-detail:first-of-type{ border-top:0; padding-top:0; }
.contact-detail .k{
  font-size:var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; color:var(--cream-faint);
}
.contact-detail .v{ font-size:var(--fs-small); color:var(--cream); }
.contact-detail .v a{ color:var(--cream); border-bottom:1px solid var(--amber); }
.contact-detail .v a:hover{ color:var(--amber); }

/* Review summary (step 5) */
.review-list{ list-style:none; }
.review-list li{
  display:flex; flex-wrap:wrap; gap:0.5rem 1rem; justify-content:space-between;
  padding:0.85rem 0; border-top:1px solid var(--line);
  font-size:var(--fs-small);
}
.review-list li:first-child{ border-top:0; }
.review-list .rk{ color:var(--cream-faint); text-transform:uppercase; letter-spacing:0.1em; font-size:var(--fs-label); }
.review-list .rv{ color:var(--cream); text-align:right; max-width:60%; }
.review-list .rv.empty{ color:var(--cream-faint); font-style:italic; }
.review-list .rv button{
  background:none; border:0; color:var(--amber); font-size:var(--fs-label);
  letter-spacing:0.1em; text-transform:uppercase; padding:0; margin-left:0.6rem; cursor:pointer;
}
.review-list .rv button:hover{ text-decoration:underline; }

@media (max-width:860px){
  .contact-layout{ grid-template-columns:1fr; gap:var(--sp-4); }
  .contact-aside{ position:static; }
}

/* Big CTA band */
.cta-band{
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(227,154,59,0.07), transparent 55%),
    var(--bg-alt);
}
.cta-band .inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-block:var(--section-y);
}
.cta-band h2{ font-size:var(--fs-h1); max-width:16ch; }
.cta-band p{ margin-top:var(--sp-2); max-width:40ch; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .footer-brand{ grid-column:1 / -1; }
  .process{ grid-template-columns:repeat(2,1fr); }
  .process-step,.process-step + .process-step{ border-left:0; padding-left:0; padding-right:var(--sp-3); }
}

@media (max-width:760px){
  .nav-links,.nav > .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .cta-band .inner{ flex-direction:column; align-items:flex-start; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:480px){
  :root{ --fs-label:0.65rem; }
  .footer-top{ grid-template-columns:1fr; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ width:100%; }
  .label{ letter-spacing:0.18em; }
  .option-grid{ grid-template-columns:1fr; }
  .site-header .container{ gap:var(--sp-2); }
  .brand .wordmark{ font-size:1.3rem; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .rec-dot{ animation:none; }
}