/* ============================================================
   RESPAWN CULTURE — websites
   Design system + page styles
   ============================================================ */

:root{
  /* Surfaces — warm off-white, the way a professional services site reads.
     The old near-black palette came from the clothing brand and made this
     look like a fashion label rather than a firm you'd hire. */
  --page:     #FBF8F4;
  --surface:  #FFFFFF;
  --surface-2:#F3EDE5;
  --ink:      #14110F;   /* headings */
  --ink-2:    #4A443F;   /* body */
  --ink-3:    #6B645D;   /* muted — 5.0:1 on --surface-2, the tightest case */
  --line:     rgba(20,17,15,.12);
  --line-2:   rgba(20,17,15,.22);

  /* Brand. --fire fills large shapes; --fire-ink is the darker tone used for
     small text on light, where #FF6B00 fails contrast. */
  --fire:     #FF6B00;
  --fire-ink: #B44800;
  --blood:    #CC2200;
  --gold-hi:  #FFB020;
  --wa:       #1FA855;

  --shadow-1: 0 1px 2px rgba(20,17,15,.05), 0 6px 18px -10px rgba(20,17,15,.16);
  --shadow-2: 0 2px 6px rgba(20,17,15,.06), 0 18px 40px -20px rgba(20,17,15,.26);

  --display:  'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --body:     'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:    'Fraunces', Georgia, 'Times New Roman', serif;

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --pop:      cubic-bezier(.34,1.56,.64,1);

  --gut:      clamp(20px, 5vw, 72px);
  --maxw:     1280px;
  --nav-h:    74px;
  --bar-h:    38px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--page);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:clamp(15.5px,.5vw + 14px,17px);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.menu-open{ overflow:hidden; }

img,svg,video,canvas{ display:block; max-width:100%; }
/* Headings take the strongest ink by default; body text stays a step softer.
   Components on the dark bands (footer, top bar) override this themselves. */
h1,h2,h3,h4,h5,h6{ color:var(--ink); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--fire); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--fire-ink); color:#fff; padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0; }

/* Film grain removed with the light theme — it read as gritty rather than
   crafted once the background went pale. */
.grain{ display:none; }

/* ── sound toggle ───────────────────────────────────────────── */
/* Lives in the top bar rather than floating over the page. As a fixed sticker
   it collided with whatever content happened to sit at the bottom-left. */
.sound{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font-size:10px; font-weight:700; letter-spacing:.2em;
  color:rgba(244,239,230,.55);
  transition:color .2s var(--ease);
  margin-left:auto;
}
.sound:hover{ color:#F4EFE6; }
.sound__icon{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.sound__icon i{ width:2px; height:3px; background:currentColor; display:block; transition:height .2s var(--ease); }
.sound.on{ color:var(--fire); }
.sound.on .sound__icon i{ animation:eq .9s ease-in-out infinite; }
.sound.on .sound__icon i:nth-child(2){ animation-delay:.12s }
.sound.on .sound__icon i:nth-child(3){ animation-delay:.24s }
.sound.on .sound__icon i:nth-child(4){ animation-delay:.36s }
.sound.on .sound__icon i:nth-child(5){ animation-delay:.48s }
@keyframes eq{ 0%,100%{ height:3px } 50%{ height:11px } }

/* ── contact bar ────────────────────────────────────────────── */
/* Phone, email and location above the nav. Both the local agencies we were
   measured against lead with this, and for a services business it is the
   single cheapest credibility signal there is. */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:51;
  height:var(--bar-h);
  background:#100D0C; color:rgba(244,239,230,.72);
  display:flex; align-items:center;
  font-size:12.5px;
}
.topbar__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:26px;
}
.topbar__item{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:color .2s var(--ease);
}
.topbar__item svg{ color:var(--fire); flex:0 0 auto; }
a.topbar__item:hover{ color:#F4EFE6; }
.topbar__item--place{ color:rgba(244,239,230,.55); }

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:var(--bar-h); left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; gap:24px;
  padding-inline:var(--gut);
  border-bottom:1px solid transparent;
  transition:background 0.24s var(--ease), border-color 0.24s var(--ease), height 0.24s var(--ease);
}
.nav.stuck{
  background:rgba(251,248,244,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  height:64px;
}
/* Inner pages have no full-bleed hero behind the bar, so it needs a surface. */
body:not(.page-home) .nav{
  background:rgba(251,248,244,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}

.nav__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; padding:4px 0; }
.nav__brand img{ width:34px; height:34px; object-fit:contain; }
.nav__brandtext{
  font-family:var(--display); font-size:21px; letter-spacing:.06em; line-height:1;
  display:flex; flex-direction:column;
}
.nav__brandtext em{
  font-style:normal; font-size:10.5px; letter-spacing:.36em;
  color:var(--fire-ink); font-family:var(--body); font-weight:700;
}
.nav__links{ display:flex; gap:28px; }
.nav__link{
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--fire); transition:width 0.21s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ width:100%; }
.nav__link.is-current{ color:var(--ink); }
.nav__link.is-current::after{ width:100%; }

.nav__cta{
  border:1px solid var(--line-2); padding:11px 20px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color 0.21s var(--ease), border-color 0.21s var(--ease);
}
.nav__cta span{ position:relative; z-index:1; }
.nav__cta::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,#A81C00,var(--fire-ink));
  transform:translateY(101%); transition:transform 0.24s var(--ease);
}
.nav__cta:hover{ color:#fff; border-color:var(--fire); }
.nav__cta:hover::before{ transform:translateY(0); }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:46px; height:46px; margin-right:-8px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav__burger i{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform 0.21s var(--ease); }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:45;
  background:var(--page);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--bar-h) + var(--nav-h)) var(--gut) 40px;
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu__nav{ display:flex; flex-direction:column; }
.mobilemenu__link{
  font-family:var(--display); font-size:clamp(30px,8.5vw,46px); letter-spacing:.02em;
  padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink);
}
.mobilemenu__link.is-current{ color:var(--fire-ink); }
.mobilemenu__cta{
  margin-top:26px; text-align:center;
  background:linear-gradient(120deg,#A81C00,var(--fire-ink)); color:#fff;
  padding:18px 24px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px;
}
.mobilemenu__wa{
  margin-top:14px; text-align:center; padding:16px;
  border:1px solid rgba(37,211,102,.35); color:var(--wa);
  font-size:13px; font-weight:600; letter-spacing:.04em;
}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; border:1px solid var(--line-2);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden; cursor:pointer; background:transparent;
  transition:color 0.21s var(--ease), border-color 0.21s var(--ease), transform .18s var(--pop);
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,#A81C00 0%,var(--fire-ink) 55%,#E05F00 130%);
  transform:translateY(101%); transition:transform 0.25s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#fff; border-color:var(--fire); }
.btn:active{ transform:scale(.98); }
.btn--ghost{ background:var(--surface); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--fire-ink); }
.btn--fire{ border-color:var(--fire-ink); color:#fff; }
.btn--fire::before{ transform:translateY(0); }
.btn--fire:hover::before{ transform:translateY(-101%); }
.btn--fire:hover{ color:var(--fire-ink); }
.btn--block{ display:flex; width:100%; }

/* ── hero (home only) ───────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--bar-h) + var(--nav-h) + 24px) 0 78px;
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34vh;
  background:linear-gradient(180deg,transparent,var(--page) 84%);
  pointer-events:none; z-index:2;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
/* Stands in for the additive halo that only worked on a dark page. */
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-4%; top:44%; transform:translateY(-50%);
  width:min(760px,58vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,138,32,.20) 0%, rgba(255,138,32,.07) 42%, transparent 68%);
}
.hero__fallback{ position:absolute; top:22%; right:12%; width:min(340px,38vw); opacity:.85; }

.hero__copy{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--fire);
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(255,107,0,.55)} 70%,100%{box-shadow:0 0 0 12px rgba(255,107,0,0)} }

.hero__title{
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(58px, min(9.2vw, 13vh), 148px);
  line-height:.86; letter-spacing:.005em; margin:0 0 26px; text-transform:uppercase;
}
.hero__title .line{ display:block; overflow:hidden; }
/* The gradient is clipped to the text, so it must live on whichever element
   holds the characters — once JS splits the line into .w spans, the parent has
   no direct text left to clip against. Hence both selectors. */
.line--accent,
.line--accent .w{
  background:linear-gradient(100deg,var(--blood) 0%,#E85D04 45%,var(--fire) 75%,var(--blood) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ to{ background-position:220% 0; } }

.hero__sub{
  max-width:42ch; margin:0 0 28px;
  color:var(--ink-2); font-size:clamp(15px,.8vw + 12px,18px); line-height:1.66;
}
.hero__sub em{ font-family:var(--serif); font-style:italic; color:var(--ink); font-size:1.06em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{
  position:absolute; z-index:3; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:9px; letter-spacing:.3em; color:var(--ink-3);
}
.hero__scroll i{ display:block; width:1px; height:34px; background:linear-gradient(180deg,var(--fire),transparent); animation:drop 1.9s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ── page header (inner pages) ──────────────────────────────── */
.phead{
  position:relative;
  padding:calc(var(--bar-h) + var(--nav-h) + clamp(40px,6vw,80px)) 0 clamp(40px,6vw,72px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 62% 100% at 88% 40%, rgba(255,107,0,.10), transparent 70%),
    var(--surface-2);
  overflow:hidden;
}
.phead__title{
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(44px,7.4vw,104px);
  line-height:.9; letter-spacing:.01em; margin:0 0 20px; text-transform:uppercase;
}
.phead__lede{ margin:0; color:var(--ink-2); max-width:60ch; font-size:clamp(15.5px,.6vw+14px,19px); }
.phead__mark{ width:96px; height:96px; object-fit:contain; margin-bottom:20px; filter:drop-shadow(0 0 24px rgba(255,107,0,.45)); }
.phead--404{ text-align:center; }
.phead--404 .phead__mark{ margin-inline:auto; }
.phead--404 .phead__lede{ margin-inline:auto; }

.crumbs{
  display:flex; gap:10px; align-items:center; margin-bottom:22px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs a{ color:var(--fire-ink); }
.crumbs a:hover{ text-decoration:underline; }

/* ── sections ───────────────────────────────────────────────── */
.section{ padding:clamp(64px,8vw,120px) 0; position:relative; }
.section--alt{ background:var(--surface-2); border-block:1px solid var(--line); }

.shead{ max-width:820px; margin:0 auto clamp(40px,5vw,68px); text-align:center; }
.shead--split{
  max-width:none; display:grid; grid-template-columns:1fr 1fr;
  gap:32px; text-align:left; align-items:end;
}
.shead__num{
  display:inline-block; margin-bottom:14px;
  font-size:11px; font-weight:700; letter-spacing:.28em; color:var(--fire-ink);
  text-transform:uppercase;
}
.shead__num::before{ content:'— '; color:var(--ink-3); }
.shead__title{
  color:var(--ink);
  font-family:var(--display);
  font-size:clamp(34px,5.4vw,72px);
  line-height:.94; letter-spacing:.01em; margin:0 0 20px; text-transform:uppercase;
}
.shead--split .shead__title{ margin-bottom:0; }
.shead__lede{ color:var(--ink-2); margin:0 auto; max-width:62ch; }
.shead--split .shead__lede{ margin:0; }

.section__more{ margin-top:clamp(30px,4vw,48px); text-align:center; }

/* ── tiles (home) ───────────────────────────────────────────── */
.tiles{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  background:var(--line); border:1px solid var(--line);
}
.tile{
  background:var(--surface); padding:clamp(26px,2.8vw,38px);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:background 0.24s var(--ease);
}
.tile::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--blood),var(--fire),var(--gold-hi));
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.tile:hover{ background:var(--surface); box-shadow:var(--shadow-2); }
.tile:hover::after{ transform:scaleX(1); }
.tile__n{ font-size:11px; font-weight:800; letter-spacing:.28em; color:var(--fire-ink); margin-bottom:20px; }
.tile h3{
  color:var(--ink);
  font-family:var(--display); font-size:clamp(24px,2.2vw,31px);
  line-height:1.02; letter-spacing:.02em; margin:0 0 14px; text-transform:uppercase;
}
.tile p{ margin:0 0 22px; color:var(--ink-2); font-size:15px; flex:1; }
.tile__more{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fire-ink); display:inline-flex; align-items:center; gap:8px;
}
.tile__more i{ font-style:normal; transition:transform .3s var(--ease); }
.tile:hover .tile__more i{ transform:translateX(5px); }

/* ── promise band ───────────────────────────────────────────── */
.stats{ background:var(--surface-2); border-block:1px solid var(--line); }
.stats__grid{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--line); border-inline:1px solid var(--line);
}
.stat{ background:var(--surface-2); padding:clamp(28px,3.4vw,46px) clamp(20px,2vw,30px); text-align:center; }
.stat b{
  display:block; font-family:var(--display);
  font-size:clamp(23px,2.3vw,32px); line-height:1.08; letter-spacing:.02em; color:var(--ink);
}
.stat span{ display:block; margin-top:14px; font-size:13.5px; color:var(--ink-3); }

/* ── split rows (inner pages) ───────────────────────────────── */
.split{ display:grid; grid-template-columns:minmax(220px,.9fr) 1.6fr; gap:clamp(28px,5vw,80px); align-items:start; }
.split__side{ position:sticky; top:calc(var(--bar-h) + var(--nav-h) + 24px); }
.split__n{
  display:block; font-family:var(--display); font-size:clamp(36px,4vw,58px); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--ink-3); margin-bottom:12px;
}
.split__side h2{
  font-family:var(--display); font-size:clamp(28px,3.4vw,46px);
  line-height:.96; letter-spacing:.01em; margin:0; text-transform:uppercase;
}
.split__body > p{ margin:0 0 20px; color:var(--ink-2); max-width:62ch; }
.split__body > p:first-child{ color:var(--ink); font-size:clamp(16px,.7vw+14px,19px); }

.ticks{ list-style:none; margin:26px 0 0; padding:0; }
.ticks li{
  position:relative; padding:11px 0 11px 28px; font-size:15px; color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
/* A tick, not a chevron — it needs to be taller than it is wide. */
.ticks li::before{
  content:''; position:absolute; left:4px; top:15px;
  width:6px; height:11px;
  border-right:2px solid var(--fire); border-bottom:2px solid var(--fire);
  transform:rotate(45deg);
}

.inline-more{
  display:inline-flex; align-items:center; gap:9px; margin-top:8px; padding:8px 0;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fire-ink);
  border-bottom:1px solid rgba(194,78,0,.35);
}
.inline-more i{ font-style:normal; transition:transform .3s var(--ease); }
.inline-more:hover i{ transform:translateX(5px); }

/* ── interactive demo panel ─────────────────────────────────── */
.demo{
  position:relative; margin:30px 0 6px; aspect-ratio:16/10;
  border:1px solid var(--line-2);
  background:radial-gradient(ellipse at 50% 60%,#1a1016,var(--ink) 72%);
  overflow:hidden;
}
.demo canvas{ width:100%; height:100%; display:block; }
.demo__label{
  position:absolute; left:16px; bottom:14px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,230,.55);   /* the panel is dark on purpose */
}

/* ── film ───────────────────────────────────────────────────── */
.film{
  margin:0; position:relative; border:1px solid var(--line-2); background:#000;
  max-width:1000px; margin-inline:auto;
}
.film__video{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block; }

/* ── work list (home teaser) ────────────────────────────────── */
.worklist{ border-top:1px solid var(--line); }
.wrow{
  display:grid; grid-template-columns:220px 1fr auto; gap:8px 32px; align-items:center;
  padding:clamp(22px,2.6vw,32px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left 0.24s var(--ease);
}
.wrow::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--fire),var(--blood));
  transform:scaleY(0); transform-origin:top; transition:transform 0.27s var(--ease);
}
.wrow:hover{ padding-left:20px; }
.wrow:hover::before{ transform:scaleY(1); }
.wrow__kind{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fire-ink); }
.wrow h3{ font-family:var(--display); font-size:clamp(24px,2.4vw,34px); letter-spacing:.02em; margin:0; text-transform:uppercase; }
.wrow p{ margin:0; color:var(--ink-2); font-size:14.5px; grid-column:2; }
.wrow i{ font-style:normal; color:var(--fire); grid-row:1 / span 2; grid-column:3; transition:transform .3s var(--ease); }
.wrow:hover i{ transform:translateX(6px); }

/* ── projects (work page) ───────────────────────────────────── */
.proj{
  border:1px solid var(--line); background:var(--surface);
  padding:clamp(26px,3vw,44px);
  box-shadow:var(--shadow-1);
  transition:border-color 0.24s var(--ease);
}
.proj:hover{ border-color:var(--line-2); }
.proj--feature{
  display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(24px,4vw,56px); align-items:center;
  margin-bottom:clamp(18px,2.2vw,26px);
  border-color:rgba(255,107,0,.34);
  background:linear-gradient(140deg,rgba(255,107,0,.09),transparent 58%),var(--surface);
  box-shadow:var(--shadow-2);
}
/* Real screenshots, framed like a browser window. These replace the
   photography we don't have, and they are the strongest proof on the site. */
.proj__shot{
  margin:0 0 22px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow-1);
  position:relative; padding-top:26px;
}
.proj__shot::before{
  content:''; position:absolute; top:0; left:0; right:0; height:26px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.proj__shot::after{
  content:''; position:absolute; top:9px; left:12px;
  width:8px; height:8px; border-radius:50%;
  background:#E0534A;
  box-shadow:14px 0 0 #E5A93C, 28px 0 0 #58B368;
}
.proj__shot img{ width:100%; height:auto; display:block; }
.proj__shot--feature{ margin:0; }
.proj__tag{
  display:inline-block; margin-bottom:16px;
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:5px 10px;
}
.proj__tag--live{ color:#137A3C; border-color:rgba(19,122,60,.4); background:rgba(19,122,60,.09); }
.proj h2{
  font-family:var(--display); font-size:clamp(28px,3vw,44px);
  letter-spacing:.02em; line-height:1; margin:0 0 6px; text-transform:uppercase;
}
.proj__kind{ margin:0 0 18px !important; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fire-ink); }
.proj p{ margin:0 0 16px; color:var(--ink-2); font-size:15px; }
.proj__meta{ margin:22px 0 0; display:grid; gap:10px; border-top:1px solid var(--line); padding-top:18px; }
.proj__meta div{ display:flex; gap:14px; font-size:13.5px; }
.proj__meta dt{ color:var(--ink-3); min-width:110px; flex:0 0 auto; }
.proj__meta dd{ margin:0; color:var(--ink); }
.projgrid{ display:grid; gap:clamp(18px,2.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.note{
  margin:clamp(30px,4vw,48px) 0 0; padding:20px 22px;
  border-left:3px solid var(--fire); background:var(--surface-2);
  color:var(--ink-2); font-size:14.5px;
}

/* ── steps ──────────────────────────────────────────────────── */
/* Explicit placement. With four children in an implicit grid, auto-placement
   drops the paragraph into the narrow number column — which is exactly what
   went wrong before. Every cell is positioned by hand. */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:step; }
.step{
  display:grid; grid-template-columns:92px minmax(0,1fr) 150px;
  gap:0 clamp(20px,3vw,40px); align-items:start;
  padding:clamp(26px,3vw,44px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left 0.27s var(--ease);
}
.step::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--fire),var(--blood));
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease);
}
.step:hover{ padding-left:20px; }
.step:hover::before{ transform:scaleY(1); }
.step__n{
  grid-column:1; grid-row:1;
  font-family:var(--display); font-size:clamp(34px,3.6vw,52px); line-height:.9;
  color:transparent; -webkit-text-stroke:1px var(--ink-3);
  transition:-webkit-text-stroke-color 0.24s var(--ease);
}
.step:hover .step__n{ -webkit-text-stroke-color:var(--fire); }
.step__body{ grid-column:2; grid-row:1; min-width:0; }
.step__body h2{
  font-family:var(--display); font-size:clamp(24px,2.4vw,34px);
  letter-spacing:.02em; margin:0 0 10px; text-transform:uppercase;
}
.step__body p{ margin:0; color:var(--ink-2); font-size:15px; max-width:62ch; }
.step__t{
  grid-column:3; grid-row:1;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  text-align:right; padding-top:10px;
}

/* ── needs grid ─────────────────────────────────────────────── */
.need{ display:grid; gap:clamp(18px,2.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.need__item{ border:1px solid var(--line); background:var(--surface); padding:clamp(24px,2.6vw,32px); box-shadow:var(--shadow-1); }
.need__item h3{
  font-family:var(--display); font-size:clamp(22px,2vw,28px);
  letter-spacing:.02em; margin:0 0 12px; text-transform:uppercase;
}
.need__item p{ margin:0; color:var(--ink-2); font-size:14.5px; }

/* ── faq ────────────────────────────────────────────────────── */
.faq{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:clamp(20px,2vw,27px); letter-spacing:.02em;
  text-transform:uppercase; transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--fire); border-bottom:2px solid var(--fire);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary{ color:var(--fire-ink); }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq p{ margin:0 0 24px; color:var(--ink-2); max-width:62ch; font-size:15px; }

/* ── cta band ───────────────────────────────────────────────── */
.cta{
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255,107,0,.14), transparent 70%),
    var(--surface-2);
  padding:clamp(56px,7vw,100px) 0;
}
.cta__inner{ text-align:center; }
.cta__title{
  color:var(--ink);
  font-family:var(--display); font-size:clamp(32px,5vw,66px);
  line-height:.96; letter-spacing:.01em; margin:0 0 18px; text-transform:uppercase;
}
.cta__inner > p{ margin:0 auto 30px; color:var(--ink-2); max-width:52ch; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ── price cards (cost) ─────────────────────────────────────── */
.twoup{
  display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-bottom:clamp(30px,4vw,52px);
}
.pricecard{
  border:1px solid var(--line); background:var(--surface);
  padding:clamp(26px,3vw,40px);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.pricecard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.pricecard--feature{
  border-color:rgba(255,107,0,.4);
  background:linear-gradient(160deg,rgba(255,107,0,.09),transparent 55%),var(--surface);
  box-shadow:var(--shadow-2);
}
.pricecard__tag{
  align-self:flex-start; margin-bottom:18px;
  font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:6px 11px;
}
.pricecard__tag--on{ color:var(--fire-ink); border-color:rgba(255,107,0,.5); background:rgba(255,107,0,.10); }
.pricecard h2{
  font-family:var(--display); font-size:clamp(28px,3vw,42px);
  letter-spacing:.02em; line-height:1; margin:0 0 10px; text-transform:uppercase;
}
.pricecard__lead{ margin:0 0 16px !important; color:var(--ink) !important; font-size:16.5px; }
.pricecard p{ margin:0 0 6px; color:var(--ink-2); font-size:15px; }
.pricecard .ticks{ margin-top:20px; }
.pricecard .ticks li{ font-size:14.5px; }

/* ── quote block (cost) ─────────────────────────────────────── */
.quote{
  max-width:760px; margin-inline:auto; text-align:center;
  border:1px solid var(--line); background:var(--surface);
  padding:clamp(30px,4vw,56px);
  box-shadow:var(--shadow-1);
}
.quote__lead{
  font-family:var(--display); font-size:clamp(28px,3.4vw,48px);
  line-height:1.04; margin:0 0 22px; color:var(--ink); text-transform:uppercase;
}
.quote p{ color:var(--ink-2); margin:0 0 18px; }
.quote__note{
  border-top:1px solid var(--line); padding-top:20px; margin-top:26px !important;
  font-size:14px !important; color:var(--ink-3) !important;
}
.quote__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }

/* ── contact ────────────────────────────────────────────────── */
.contact__grid{ display:grid; gap:clamp(32px,5vw,70px); grid-template-columns:1fr 1.05fr; align-items:start; }

.wa{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid rgba(31,168,85,.35); background:rgba(31,168,85,.07);
  padding:18px 22px; color:var(--wa);
  transition:background 0.21s var(--ease), transform .25s var(--pop), border-color 0.21s var(--ease);
}
.wa:hover{ background:rgba(31,168,85,.13); border-color:rgba(31,168,85,.6); transform:translateY(-2px); }
.wa span{ display:flex; flex-direction:column; line-height:1.35; }
.wa b{ font-size:17px; letter-spacing:.03em; color:#0B3D22; font-weight:700; }
.wa em{ font-style:normal; font-size:12.5px; color:rgba(11,61,34,.62); }

.contact__meta{ margin:30px 0 0; display:grid; gap:14px; }
.contact__meta div{ display:flex; gap:16px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.contact__meta dt{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); width:96px; flex:0 0 auto; padding-top:3px; }
.contact__meta dd{ margin:0; font-size:14.5px; color:var(--ink-2); }
.contact__meta a{ color:var(--ink); border-bottom:1px solid var(--line-2); transition:color .3s var(--ease); }
.contact__meta a:hover{ color:var(--fire-ink); border-color:var(--fire-ink); }

.contact__note{ margin-top:34px; padding:24px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1); }
.contact__note h2{
  font-family:var(--display); font-size:22px; letter-spacing:.03em;
  margin:0 0 14px; text-transform:uppercase;
}
.contact__note ol{ margin:0 0 14px; padding-left:20px; color:var(--ink-2); font-size:14.5px; }
.contact__note li{ margin-bottom:8px; }
.contact__note p{ margin:0; font-size:13.5px; color:var(--ink-3); }

/* ── form ───────────────────────────────────────────────────── */
.form{ border:1px solid var(--line); background:var(--surface); padding:clamp(24px,3vw,38px); display:grid; gap:18px; box-shadow:var(--shadow-1); }
.form__row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:8px; border:0; padding:0; margin:0; min-width:0; }
.field > span, .field legend{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:0;
}
.field input, .field select, .field textarea{
  background:var(--page); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--body); font-size:16px; padding:14px 15px; width:100%;
  border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%239d968d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px; cursor:pointer;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--fire); background:var(--surface); }
.field input[aria-invalid="true"]{ border-color:var(--blood); }
.field textarea{ resize:vertical; min-height:120px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips label{ position:relative; cursor:pointer; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips span{
  display:block; padding:11px 16px; border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-2); transition:all .28s var(--ease);
}
.chips input:checked + span{ border-color:var(--fire); color:var(--fire-ink); font-weight:700; background:rgba(255,107,0,.14); }
.chips input:focus-visible + span{ outline:2px solid var(--fire); outline-offset:2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ margin:0; font-size:14px; min-height:1.4em; color:var(--ink-2); }
.form__note.ok{ color:var(--wa); }
.form__note.err{ color:var(--blood); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ── marquee ────────────────────────────────────────────────── */
.marquee{ border-block:1px solid rgba(20,17,15,.9); background:#100D0C; overflow:hidden; padding:15px 0; }
.marquee__track{ display:flex; width:max-content; animation:slide 26s linear infinite; }
.marquee__track span{
  font-family:var(--display); font-size:clamp(19px,2.2vw,30px); letter-spacing:.05em;
  padding-right:30px; white-space:nowrap; color:rgba(244,239,230,.55);
}
.marquee__track b{ color:var(--fire); font-weight:400; padding:0 12px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── footer ─────────────────────────────────────────────────── */
.foot{ background:#100D0C; color:rgba(244,239,230,.72); border-top:1px solid var(--line); padding-top:clamp(52px,6vw,84px); }
.foot__top{ display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:1fr 1.6fr; padding-bottom:clamp(38px,5vw,60px); }
.foot__brand img{ width:52px; height:52px; object-fit:contain; margin-bottom:18px; filter:drop-shadow(0 0 16px rgba(255,107,0,.35)); }
.foot__tag{ margin:0; color:rgba(244,239,230,.62); font-size:15px; line-height:1.6; }
.foot__tag em{ font-family:var(--serif); font-style:italic; color:#F4EFE6; }
.foot__nav{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.foot__nav h4{ font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,239,230,.45); margin:0 0 14px; }
.foot__nav a{ display:block; font-size:14px; color:rgba(244,239,230,.72); padding:7px 0; transition:color .3s var(--ease), transform .3s var(--ease); }
.foot__nav a:hover{ color:var(--fire); transform:translateX(4px); }

.foot__place{
  display:block; font-size:13.5px; color:rgba(244,239,230,.45); padding:7px 0;
}
.foot__wa{
  display:flex; align-items:center; gap:14px;
  /* Inside the dark footer, so it needs the footer's light ink and a light
     hairline — the shared --line/--ink-2 tokens are for pale surfaces. */
  border-block:1px solid rgba(244,239,230,.14); padding:22px 0;
  color:rgba(244,239,230,.72); transition:color 0.21s var(--ease);
}
.foot__wa svg{ color:#25D366; flex:0 0 auto; }
.foot__wa span{ font-size:clamp(14px,1.3vw,17px); }
.foot__wa b{ color:#F4EFE6; font-weight:700; }
.foot__wa i{ margin-left:auto; font-style:normal; color:var(--fire); transition:transform 0.21s var(--ease); }
.foot__wa:hover{ color:#F4EFE6; }
.foot__wa:hover i{ transform:translateX(8px); }

.foot__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:24px 0 30px; font-size:12px; color:rgba(244,239,230,.42);
}
.foot__bar p{ margin:0; }

/* ── floating whatsapp ──────────────────────────────────────── */
.wafab{
  position:fixed; right:22px; bottom:22px; z-index:41;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:#fff;
  box-shadow:0 10px 28px -8px rgba(31,168,85,.55);
  transform:scale(0);
  transition:transform 0.27s var(--pop), box-shadow 0.21s var(--ease);
}
.wafab.show{ transform:scale(1); }
.wafab:hover{ transform:scale(1.08); }

/* ── reveal base ────────────────────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(14px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity .38s var(--ease-out), transform .38s var(--ease-out); }
[data-split] .w{ display:inline-block; will-change:transform; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1040px){
  .split{ grid-template-columns:1fr; gap:24px; }
  .split__side{ position:static; }
  .proj--feature{ grid-template-columns:1fr; }
  .proj__shot--feature{ order:-1; }
  .shead--split{ grid-template-columns:1fr; align-items:start; }
  .contact__grid, .foot__top{ grid-template-columns:1fr; }
  .step{ grid-template-columns:74px minmax(0,1fr); }
  .step__t{ grid-column:2; grid-row:2; text-align:left; padding-top:14px; }
}

@media (max-width:880px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .form__row{ grid-template-columns:1fr; }
}

/* ── phone ──────────────────────────────────────────────────────
   Bigger tap targets, no accidental zoom on focus, less vertical
   padding, and room for the browser chrome at the bottom. */
@media (max-width:720px){
  :root{ --nav-h:62px; --bar-h:34px; }
  .topbar{ font-size:12px; }
  .topbar__in{ gap:14px; }
  .topbar__item--place{ display:none; }
  .topbar__item:nth-child(2){ display:none; }   /* email hides; tap-to-call stays */
  body{ font-size:16px; }

  a, button, label, summary{ -webkit-tap-highlight-color:transparent; }

  /* The phoenix becomes a banner above the copy rather than a layer behind
     it — a translucent emblem under dark text was simply unreadable. */
  .hero{ display:block; min-height:0; padding-bottom:56px; }
  .hero__canvas{
    position:relative; inset:auto; z-index:1;
    width:100%; height:132px; margin-bottom:10px;
  }
  .hero::before{
    width:min(420px,90vw); right:auto; left:50%;
    transform:translate(-50%,-50%); top:calc(var(--bar-h) + var(--nav-h) + 90px);
  }
  .hero__copy{ padding-inline:var(--gut); }
  .hero__scroll{ display:none; }

  .section{ padding:56px 0; }
  .phead{ padding:calc(var(--nav-h) + 40px) 0 40px; }
  .shead{ margin-bottom:34px; }

  .sound__label{ display:none; }   /* icon only on a phone */
  .wafab{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:58px; height:58px; }
  .foot__bar{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

  .marquee{ padding:12px 0; }
  .marquee__track span{ font-size:19px; padding-right:20px; }

  .tiles{ grid-template-columns:1fr; }
  .tile{ padding:26px 22px; }
  .stats__grid{ grid-template-columns:1fr; }
  .need, .projgrid{ grid-template-columns:1fr; }
  .proj, .need__item{ padding:24px 20px; }
  .demo{ aspect-ratio:4/3; }

  /* Single column: the number sits above the text, nothing squeezed. */
  .step{ grid-template-columns:1fr; gap:8px; padding:26px 0; }
  .step:hover{ padding-left:0; }
  .step__n{ grid-column:1; grid-row:1; font-size:32px; }
  .step__body{ grid-column:1; grid-row:2; }
  .step__t{ grid-column:1; grid-row:3; text-align:left; padding-top:12px; }

  .wrow{ grid-template-columns:1fr auto; gap:6px 16px; }
  .wrow p{ grid-column:1; }
  .wrow i{ grid-row:1 / span 3; grid-column:2; align-self:center; }
  .wrow:hover{ padding-left:0; }

  .quote{ padding:26px 20px; }
  .quote__actions .btn, .cta__actions .btn, .hero__actions .btn{ width:100%; }
  .form{ padding:22px 18px; }
  .chips span{ padding:12px 16px; font-size:14px; }
  .btn{ padding:17px 26px; }

  .faq summary{ padding:20px 40px 20px 0; }
  .contact__note{ padding:22px 18px; }
  .contact__meta div{ flex-direction:column; gap:4px; }
  .contact__meta dt{ width:auto; }

  .foot__nav{ grid-template-columns:1fr 1fr; gap:20px; }
  .foot__nav a{ padding:10px 0; }
  .foot__wa i{ display:none; }
  .nav__brand{ padding:6px 0; }
}

@media (max-width:520px){
  .foot__bar{ flex-direction:column; }
  .foot__nav{ grid-template-columns:1fr; }
}

/* Landscape phones are short — never let the hero eat the whole screen. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 28px) 0 56px; }
  .hero__scroll{ display:none; }
}

/* ── accessibility ──────────────────────────────────────────── */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--fire); outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .grain{ display:none; }
  .wafab{ transform:scale(1); }
}