/* FB Code LLC — red mark on ink or frost. Theme is set by data-theme on <html>.
   Brand red #E00B07 and frost #ECF1F5 are sampled from the logo files in ../brand/new. */

:root{
  /* Brand palette. Referenced by the ground blocks below, never used directly. */
  --c-red:#E00B07;
  --c-red-hot:#FF2A1F;
  --c-red-deep:#7A0604;
  --c-red-ink:#3A0605;
  --c-frost:#ECF1F5;
  --c-ink:#08080A;

  --wrap:1280px;
  --gutter:clamp(20px, 5vw, 60px);

  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display:"Inter Tight", var(--sans);
  --serif:"Instrument Serif", ui-serif, Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:18px;
  --radius-sm:10px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,.84,.32,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.5s;
}

/* ---------- Grounds ----------
   A .paper section flips whichever ground the page is on, so banding survives
   both themes. All four selectors resolve at 0,1,0 except
   [data-theme="light"] .paper at 0,2,0, which lets a band invert back to ink.
   Do not reorder these two blocks. */

/* Ink ground */
:root,
[data-theme="light"] .paper{
  color-scheme:dark;

  --bg:var(--c-ink);
  --bg-raised:#0F0F12;
  --surface:rgb(255 255 255 / .035);
  --surface-hover:rgb(255 255 255 / .065);
  --contrast:var(--c-frost);
  --on-contrast:var(--c-ink);

  --text:var(--c-frost);
  --text-dim:rgb(236 241 245 / .68);
  --text-faint:rgb(236 241 245 / .5);
  --rule:rgb(236 241 245 / .09);
  --rule-strong:rgb(236 241 245 / .18);

  /* #FF4D47 on ink is 6:1; the logo red itself is kept for fills and large type. */
  --accent:#FF4D47;
  --danger:#FF8A7A;
  --field-bg:rgb(255 255 255 / .03);
  --field-bg-focus:rgb(255 255 255 / .06);
  --spot:rgb(224 11 7 / .16);

  --sheen:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-sm:0 1px 2px rgb(0 0 0 / .5);
  --shadow-md:0 10px 24px -8px rgb(0 0 0 / .7), 0 2px 6px -2px rgb(0 0 0 / .5);
  --shadow-lg:0 30px 60px -20px rgb(0 0 0 / .85), 0 10px 24px -10px rgb(0 0 0 / .6);
  --glow:0 14px 40px -12px rgb(224 11 7 / .7);
}

/* Frost ground */
[data-theme="light"],
.paper{
  color-scheme:light;

  --bg:var(--c-frost);
  --bg-raised:#F6F8FA;
  --surface:rgb(255 255 255 / .62);
  --surface-hover:#FFFFFF;
  --contrast:#0E0F12;
  --on-contrast:var(--c-frost);

  --text:#0E0F12;
  --text-dim:rgb(14 15 18 / .7);
  --text-faint:rgb(14 15 18 / .56);
  --rule:rgb(14 15 18 / .1);
  --rule-strong:rgb(14 15 18 / .2);

  /* #C80A06 on frost is 5.2:1. */
  --accent:#C80A06;
  --danger:#B4291A;
  --field-bg:rgb(255 255 255 / .6);
  --field-bg-focus:#FFFFFF;
  --spot:rgb(224 11 7 / .09);

  --sheen:inset 0 1px 0 rgb(255 255 255 / .9);
  --shadow-sm:0 1px 2px rgb(14 15 18 / .07);
  --shadow-md:0 10px 24px -8px rgb(14 15 18 / .14), 0 2px 6px -2px rgb(14 15 18 / .08);
  --shadow-lg:0 30px 60px -20px rgb(14 15 18 / .25), 0 10px 24px -10px rgb(14 15 18 / .12);
  --glow:0 14px 40px -12px rgb(224 11 7 / .5);
}

.paper{
  background:var(--bg);
  color:var(--text);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Film grain over everything, the same texture as the gradient logo plate. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after{opacity:.04;}

::selection{background:var(--c-red);color:#fff;}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;}
button,input,select,textarea{font:inherit;color:inherit;}

.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after{
  transition:background-color .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease), fill .32s var(--ease) !important;
}

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

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

.skip-link{
  position:absolute;
  left:16px;
  top:-60px;
  z-index:200;
  padding:10px 16px;
  background:var(--c-red);
  color:#fff;
  border-radius:8px;
  font-weight:600;
}
.skip-link:focus{top:16px;}

/* ---------- Type ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
}
h1{font-size:clamp(44px, 7.2vw, 108px);}
h2{font-size:clamp(32px, 4.4vw, 60px);}
h3{font-size:clamp(20px, 1.7vw, 24px);letter-spacing:-.02em;line-height:1.2;}

h1 em, h2 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  padding-right:.06em;
  background:linear-gradient(100deg, var(--c-red-hot) 0%, var(--c-red) 45%, #FF7A5C 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

p{color:var(--text-dim);}

.lede{
  font-size:clamp(17px, 1.45vw, 20px);
  line-height:1.6;
  color:var(--text-dim);
  max-width:60ch;
  text-wrap:pretty;
}

.label,
.num,
.crumb{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.label--signal{color:var(--accent);}

.label--pill{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 10px;
  border:1px solid var(--rule-strong);
  border-radius:999px;
  background:var(--surface);
  backdrop-filter:blur(8px);
}
.label--pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--c-red);
  box-shadow:0 0 0 4px rgb(224 11 7 / .22);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  50%{box-shadow:0 0 0 8px rgb(224 11 7 / 0);}
}

/* ---------- Mark ----------
   The mark is a mask over currentColor, so it follows the theme and stays a
   single source file. Never rotated, mirrored or recoloured outside red/frost/ink. */

.mark{
  display:inline-block;
  width:auto;
  height:34px;
  aspect-ratio:2364 / 3027;
  background:currentColor;
  -webkit-mask:url("../img/mark.svg") center / contain no-repeat;
  mask:url("../img/mark.svg") center / contain no-repeat;
}

/* ---------- Buttons ---------- */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn .arrow{display:inline-block;transition:transform var(--t) var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:hover .arrow{transform:translateX(4px);}
.btn:active{transform:translateY(0);}

.btn--solid{background:var(--contrast);color:var(--on-contrast);}

.btn--ghost{
  background:var(--surface);
  border-color:var(--rule-strong);
  color:var(--text);
  backdrop-filter:blur(10px);
}
.btn--ghost:hover{border-color:var(--text-faint);background:var(--surface-hover);}

.btn--signal{
  background:linear-gradient(135deg, var(--c-red-hot), var(--c-red) 55%, #B80905);
  color:#fff;
  box-shadow:var(--glow), inset 0 1px 0 rgb(255 255 255 / .25);
}
.btn--signal:hover{box-shadow:0 20px 50px -12px rgb(224 11 7 / .85), inset 0 1px 0 rgb(255 255 255 / .25);}

/* A light sweep across signal and solid buttons on hover. */
.btn--signal::after,
.btn--solid::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn--solid::after{background:linear-gradient(110deg, transparent 30%, rgb(224 11 7 / .25) 50%, transparent 70%);}
.btn--signal:hover::after,
.btn--solid:hover::after{transform:translateX(120%);}

.btn--block{width:100%;}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--rule);
  box-shadow:0 10px 30px -20px rgb(0 0 0 / .6);
}
.site-header > .wrap{
  display:flex;
  align-items:center;
  gap:32px;
  height:76px;
}

.lockup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  transition:transform var(--t) var(--ease);
}
.lockup .mark{color:var(--c-red);height:36px;transition:filter var(--t) var(--ease);}
.lockup:hover{transform:translateY(-1px);}
.lockup:hover .mark{filter:drop-shadow(0 4px 14px rgb(224 11 7 / .55));}
.lockup-type{display:flex;align-items:baseline;gap:6px;}
.lockup-name{
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.03em;
}
.lockup-llc{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--text-faint);
}

.nav{
  display:flex;
  gap:6px;
  margin-left:auto;
}
.nav a{
  position:relative;
  padding:8px 14px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-dim);
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav a:hover{color:var(--text);background:var(--surface);}
.nav a[aria-current="page"]{color:var(--text);}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:1px;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--c-red);
  box-shadow:0 0 10px var(--c-red);
}

.header-tools{display:flex;align-items:center;gap:10px;}
.header-cta{min-height:40px;padding:0 18px;font-size:14px;}

.theme-btn,
.menu-btn{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--rule-strong);
  background:var(--surface);
  color:var(--text-dim);
  cursor:pointer;
  transition:transform var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.theme-btn:hover,
.menu-btn:hover{transform:translateY(-2px);color:var(--text);border-color:var(--text-faint);box-shadow:var(--shadow-md);}
.theme-btn svg{width:18px;height:18px;grid-area:1 / 1;transition:opacity var(--t) var(--ease), transform var(--t-slow) var(--ease);}
.theme-btn .i-moon{opacity:0;transform:rotate(-40deg) scale(.6);}
[data-theme="light"] .theme-btn .i-sun{opacity:0;transform:rotate(40deg) scale(.6);}
[data-theme="light"] .theme-btn .i-moon{opacity:1;transform:none;}

.menu-btn{display:none;gap:4px;align-content:center;}
.menu-btn span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.mobile-nav{
  display:none;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--rule);
}
.mobile-nav .wrap{display:flex;flex-direction:column;gap:4px;padding-top:12px;padding-bottom:24px;}
.mobile-nav a:not(.btn){padding:14px 0;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--rule);}
.mobile-nav .btn{margin-top:16px;}
.mobile-nav.is-open{display:block;}

@media (max-width:899px){
  .nav,.header-cta{display:none;}
  .menu-btn{display:grid;}
  .header-tools{margin-left:auto;}
}

/* ---------- Aurora ----------
   The drifting red field behind the hero, taken from the gradient logo plate. */

.aurora{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.aurora i{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.75;
  will-change:transform;
}
.aurora i:nth-child(1){
  width:56vw;height:56vw;max-width:820px;max-height:820px;
  right:-12vw;top:-18vw;
  background:radial-gradient(circle, var(--c-red) 0%, transparent 65%);
  animation:drift-a 22s var(--ease) infinite alternate;
}
.aurora i:nth-child(2){
  width:44vw;height:44vw;max-width:640px;max-height:640px;
  right:16vw;top:22vh;
  background:radial-gradient(circle, var(--c-red-deep) 0%, transparent 65%);
  animation:drift-b 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(3){
  width:38vw;height:38vw;max-width:560px;max-height:560px;
  left:-14vw;bottom:-20vw;
  background:radial-gradient(circle, #5A0503 0%, transparent 65%);
  animation:drift-a 30s var(--ease) infinite alternate-reverse;
}
[data-theme="light"] .aurora i{opacity:.32;}
[data-theme="light"] .aurora i:nth-child(2),
[data-theme="light"] .aurora i:nth-child(3){background:radial-gradient(circle, #FF6A5C 0%, transparent 65%);}

@keyframes drift-a{
  to{transform:translate3d(-8vw, 6vh, 0) scale(1.15);}
}
@keyframes drift-b{
  to{transform:translate3d(6vw, -8vh, 0) scale(.9);}
}

/* A faint engineering grid, faded out toward the edges. */
.grid-lines{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  margin-top:-76px;
  padding:calc(76px + clamp(56px, 9vh, 120px)) 0 clamp(56px, 8vh, 96px);
  min-height:min(100vh, 980px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero > .wrap{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .9fr);
  align-items:center;
  gap:clamp(32px, 5vw, 80px);
}
.hero-copy{display:flex;flex-direction:column;gap:28px;}
.hero-copy h1{max-width:12ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}

.hero-art{
  position:relative;
  justify-self:center;
  width:min(100%, 440px);
  transform:translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 18px), 0);
  transition:transform .6s var(--ease-out);
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:8% 4%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle, rgb(224 11 7 / .55), transparent 70%);
  filter:blur(40px);
}
.hero-mark{width:100%;height:auto;overflow:visible;}
.hero-mark .outline path{
  fill:none;
  stroke:var(--c-red);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.hero-mark .outline{
  transform:translate(70px, 70px);
  opacity:.7;
  transition:opacity .5s var(--ease);
}
/* The solid fill sits on the inner group so hover can fade it without
   fighting the entry animation, which holds opacity on .solid itself. */
.hero-mark .solid > g{transition:opacity .5s var(--ease), fill-opacity .5s var(--ease);}
.hero-mark .solid{fill:var(--c-frost);filter:drop-shadow(0 30px 40px rgb(0 0 0 / .45));}
[data-theme="light"] .hero-mark .solid{fill:var(--c-red);filter:drop-shadow(0 30px 40px rgb(224 11 7 / .25));}
[data-theme="light"] .hero-mark .outline path{stroke:#0E0F12;}

/* Draw-on: the outline traces itself, then the solid mark fades up over it. */
.js .hero-mark .outline path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 2.4s var(--ease-out) .2s forwards;
}
.js .hero-mark .solid{
  opacity:0;
  animation:rise 1.2s var(--ease-out) 1.1s forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes redraw{
  from{stroke-dashoffset:1;}
  to{stroke-dashoffset:0;}
}

/* Hover: back to the outline-only state from page load — the fill fades,
   the outline slides into the mark's place and traces itself again. */
.hero-art{cursor:default;}
.hero-art::before{transition:opacity .5s var(--ease);}
.hero-art:hover::before{opacity:0;}
.hero-art:hover .solid > g{opacity:0;fill-opacity:0;}
.hero-art:hover .outline{opacity:1;}
.hero-art:hover .outline path{stroke-width:2;}
.js .hero-art:hover .outline path{animation:redraw 1.4s var(--ease-out) forwards;}
@keyframes rise{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

.hero-meta{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  padding-top:28px;
  margin-top:clamp(16px, 4vh, 40px);
  border-top:1px solid var(--rule);
}
.hero-meta .label{display:inline-flex;align-items:center;gap:10px;}
.hero-meta .label::before{content:"";width:14px;height:1px;background:var(--c-red);}

/* Staggered entry for hero copy. */
.js .hero-copy > *{opacity:0;animation:rise .9s var(--ease-out) forwards;}
.js .hero-copy > :nth-child(1){animation-delay:.05s;}
.js .hero-copy > :nth-child(2){animation-delay:.15s;}
.js .hero-copy > :nth-child(3){animation-delay:.28s;}
.js .hero-copy > :nth-child(4){animation-delay:.4s;}

@media (max-width:899px){
  .hero{min-height:0;}
  .hero > .wrap{grid-template-columns:1fr;}
  .hero-art{width:min(40%, 170px);justify-self:start;order:-1;}
}

/* ---------- Page hero (inner pages) ---------- */

.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:-76px;
  padding:calc(76px + clamp(64px, 11vh, 140px)) 0 clamp(48px, 8vh, 96px);
}
.page-hero .aurora i{opacity:.5;}
.page-hero .aurora i:nth-child(2){display:none;}
.page-hero .wrap{display:flex;flex-direction:column;gap:24px;}
.page-hero h1{font-size:clamp(40px, 6vw, 88px);max-width:16ch;}
.crumb{display:flex;gap:10px;align-items:center;}
.crumb a{transition:color var(--t) var(--ease);}
.crumb a:hover{color:var(--accent);}
.crumb .sep{opacity:.5;}

/* ---------- Sections ---------- */

.section{padding:clamp(72px, 11vw, 140px) 0;position:relative;}
.section--tight{padding:clamp(40px, 6vw, 64px) 0;}
.section--flush{padding-top:0;}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(36px, 5vw, 64px);
}
.section-head h2{max-width:18ch;}
.section-link{
  font-weight:600;
  font-size:15px;
  color:var(--text);
  white-space:nowrap;
  padding-bottom:4px;
  background:linear-gradient(var(--c-red), var(--c-red)) left bottom / 0 1.5px no-repeat;
  transition:background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.section-link:hover{background-size:100% 1.5px;color:var(--accent);}

.split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
@media (max-width:899px){
  .split{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;}
}

/* ---------- Cards (shared) ----------
   Glass surface with a pointer-following red spotlight (--x/--y set by site.js). */

.card,
.service-row,
.measure,
.work-card .work-thumb,
.form,
.notice{
  --x:50%;
  --y:0%;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(24px, 2.6vw, 36px);
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--rule);
  box-shadow:var(--sheen), var(--shadow-sm);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(420px circle at var(--x) var(--y), var(--spot), transparent 60%);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.card::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--c-red), transparent);
  transform:scaleX(0);
  transition:transform var(--t-slow) var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--rule-strong);
  box-shadow:var(--sheen), var(--shadow-lg);
}
.card:hover::before{opacity:1;}
.card:hover::after{transform:scaleX(1);}
.card p{font-size:15.5px;}

/* ---------- Services (home) — bento ---------- */

.services{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:16px;
}
.service{min-height:280px;justify-content:flex-end;}
.service:nth-child(1){grid-column:span 4;}
.service:nth-child(2){grid-column:span 2;}
.service:nth-child(3){grid-column:span 2;}
.service:nth-child(4){grid-column:span 4;}
.service .num{
  position:absolute;
  top:clamp(24px, 2.6vw, 36px);
  left:clamp(24px, 2.6vw, 36px);
  color:var(--accent);
}
.service .glyph{
  position:absolute;
  right:-4%;
  top:-14%;
  height:120%;
  width:auto;
  aspect-ratio:2364 / 3027;
  color:var(--text);
  opacity:.035;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out);
}
.service:hover .glyph{opacity:.08;transform:translateY(-8px);}
.service h3{font-size:clamp(24px, 2.4vw, 34px);letter-spacing:-.03em;}
.service p{max-width:52ch;}
@media (max-width:899px){
  .services{grid-template-columns:1fr;}
  .service:nth-child(n){grid-column:auto;}
  .service{min-height:220px;}
}

/* ---------- Steps ---------- */

.steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  counter-reset:step;
}
.step{padding-top:clamp(56px, 6vw, 80px);}
.step::before{z-index:-1;}
.step .label{
  position:absolute;
  top:clamp(24px, 2.6vw, 36px);
  left:clamp(24px, 2.6vw, 36px);
  color:var(--accent);
}
.step h3{font-size:clamp(26px, 2.6vw, 36px);letter-spacing:-.035em;}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width:599px){.steps{grid-template-columns:1fr;}}

/* ---------- Measures ---------- */

.measures{display:grid;gap:0;}
.measure{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.4fr);
  gap:8px 32px;
  padding:28px 0;
  border-top:1px solid var(--rule);
}
.measure:last-child{border-bottom:1px solid var(--rule);}
.measure::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:100%;
  background:linear-gradient(90deg, var(--c-red), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--ease-out);
}
.reveal.is-in .measure::before{transform:scaleX(1);}
.reveal.is-in .measure:nth-child(2)::before{transition-delay:.12s;}
.reveal.is-in .measure:nth-child(3)::before{transition-delay:.24s;}
.measure h3{font-size:22px;}
.section > .wrap > .measures .measure{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);}
@media (max-width:599px){.measure{grid-template-columns:1fr;}}

/* ---------- Work ---------- */

.work-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(20px, 2.4vw, 32px);
}
.work-grid--feature{grid-template-columns:repeat(2, minmax(0, 1fr));}
.work-card{display:flex;flex-direction:column;gap:10px;}
.work-card h3{margin-top:12px;transition:color var(--t) var(--ease);}
.work-card p{font-size:15px;}
.work-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.work-card .tags li{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--rule);
  color:var(--text-faint);
}

.work-thumb{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(224 11 7 / .35), transparent 60%),
    linear-gradient(160deg, var(--bg-raised), var(--bg));
  border:1px solid var(--rule);
  box-shadow:var(--sheen), var(--shadow-md);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t) var(--ease);
}
.work-thumb > span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* A browser window floating in the red-lit frame. */
.work-thumb .window{
  position:absolute;
  left:7%;
  right:7%;
  top:11%;
  bottom:-6%;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  background:#111;
  box-shadow:0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .08);
  transition:transform .8s var(--ease-out);
}
.work-thumb .window::before{
  content:"";
  display:block;
  height:22px;
  background:
    radial-gradient(circle at 12px 11px, #FF5F57 3.5px, transparent 4px),
    radial-gradient(circle at 24px 11px, #FEBC2E 3.5px, transparent 4px),
    radial-gradient(circle at 36px 11px, #28C840 3.5px, transparent 4px),
    #1C1C20;
  border-bottom:1px solid rgb(255 255 255 / .06);
}
.work-thumb img{
  width:100%;
  height:calc(100% - 22px);
  object-fit:cover;
  object-position:top left;
}
.work-card:hover .work-thumb{
  transform:translateY(-6px);
  box-shadow:var(--sheen), var(--shadow-lg);
  border-color:var(--rule-strong);
}
.work-card:hover .work-thumb .window{transform:translateY(-4%) scale(1.02);}
.work-card:hover h3{color:var(--accent);}

@media (max-width:1023px){.work-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width:640px){.work-grid,.work-grid--feature{grid-template-columns:1fr;}}

.notice{
  margin-bottom:40px;
  padding:20px 24px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--rule-strong);
  background:var(--surface);
}
.notice strong{display:block;margin-bottom:4px;font-family:var(--display);}
.notice code{font-family:var(--mono);font-size:.9em;}

/* ---------- Marquee (stack) ---------- */

.stack-row{
  display:flex;
  align-items:center;
  gap:32px;
}
.stack-row > .label{flex:none;}
.marquee{
  flex:1;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stack-tags{
  display:flex;
  gap:12px;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee:hover .stack-tags{animation-play-state:paused;}
.stack-tags li{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:var(--surface);
  font-family:var(--mono);
  font-size:13px;
  color:var(--text-dim);
  white-space:nowrap;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.stack-tags li:hover{border-color:var(--c-red);color:var(--text);}
@keyframes marquee{to{transform:translateX(calc(-50% - 6px));}}
@media (max-width:599px){.stack-row{flex-direction:column;align-items:flex-start;gap:16px;}.marquee{width:100%;}}

/* ---------- Big statement band ---------- */

.statement{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px, 4.6vw, 64px);
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--text);
  max-width:22ch;
  text-wrap:balance;
}
.statement em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}

/* ---------- Service rows (services, approach) ---------- */

.service-rows{display:grid;gap:12px;}
.service-row{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0, .8fr) minmax(0, 1.6fr);
  gap:16px 40px;
  padding:clamp(24px, 3vw, 40px);
  border-radius:var(--radius);
  border:1px solid var(--rule);
  background:var(--surface);
  box-shadow:var(--sheen);
  overflow:hidden;
  isolation:isolate;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-slow) var(--ease);
}
.service-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(520px circle at var(--x) var(--y), var(--spot), transparent 60%);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.service-row::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:linear-gradient(var(--c-red-hot), var(--c-red));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--t-slow) var(--ease-out);
}
.service-row:hover{border-color:var(--rule-strong);box-shadow:var(--sheen), var(--shadow-md);}
.service-row:hover::before{opacity:1;}
.service-row:hover::after{transform:scaleY(1);}
.service-row .num{color:var(--accent);padding-top:6px;}
.service-row h3{font-size:clamp(24px, 2.4vw, 32px);letter-spacing:-.03em;}
.service-row p{margin-bottom:18px;}
.service-row ul{display:flex;flex-wrap:wrap;gap:8px;}
.service-row li{
  font-size:13px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--rule);
  color:var(--text-dim);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.service-row:hover li{border-color:var(--rule-strong);color:var(--text);}
@media (max-width:899px){
  .service-row{grid-template-columns:1fr;}
}

/* ---------- Facts ---------- */

.facts{display:grid;}
.facts li{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 2fr);
  gap:8px 32px;
  padding:22px 0;
  border-top:1px solid var(--rule);
  transition:padding var(--t) var(--ease);
}
.facts li:last-child{border-bottom:1px solid var(--rule);}
.facts li:hover{padding-left:10px;}
.facts .k{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;}
.facts .v{color:var(--text-dim);}
@media (max-width:599px){.facts li{grid-template-columns:1fr;}}

/* ---------- CTA band ---------- */

.cta{
  padding:clamp(40px, 6vw, 80px) 0 clamp(72px, 10vw, 120px);
}
.cta .wrap > .cta-panel,
.cta .wrap.reveal{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:clamp(40px, 6vw, 88px) clamp(28px, 6vw, 88px);
  border-radius:calc(var(--radius) + 10px);
  color:#fff;
  background:
    radial-gradient(90% 120% at 100% 0%, var(--c-red-hot) 0%, transparent 55%),
    radial-gradient(70% 120% at 70% 120%, #2A0403 0%, transparent 60%),
    linear-gradient(135deg, var(--c-red) 0%, #A50805 55%, var(--c-red-deep) 100%);
  box-shadow:0 40px 100px -40px rgb(224 11 7 / .7);
  max-width:calc(var(--wrap) - 2 * var(--gutter));
  width:calc(100% - 2 * var(--gutter));
}
.cta .wrap.reveal::before{
  content:"";
  position:absolute;
  right:-4%;
  top:-30%;
  height:170%;
  aspect-ratio:2364 / 3027;
  z-index:-1;
  background:#fff;
  opacity:.09;
  -webkit-mask:url("../img/mark.svg") center / contain no-repeat;
  mask:url("../img/mark.svg") center / contain no-repeat;
}
.cta h2{color:#fff;max-width:16ch;}
.cta p{color:rgb(255 255 255 / .82);margin-top:16px;max-width:48ch;font-size:18px;}
.cta .btn--signal{
  background:#fff;
  color:var(--c-red);
  box-shadow:0 20px 40px -14px rgb(0 0 0 / .45);
  flex:none;
}
.cta .btn--signal::after{background:linear-gradient(110deg, transparent 30%, rgb(224 11 7 / .18) 50%, transparent 70%);}
@media (max-width:767px){
  .cta .wrap.reveal{flex-direction:column;align-items:flex-start;}
}

/* ---------- Contact ---------- */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  gap:clamp(32px, 6vw, 88px);
  align-items:start;
}
.contact-grid .section-head{margin-bottom:24px;}
.contact-grid .section-head h2{font-size:clamp(26px, 3vw, 36px);}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr;}}

.form{
  position:relative;
  display:grid;
  gap:18px;
  padding:clamp(24px, 3.4vw, 44px);
  border-radius:calc(var(--radius) + 6px);
  border:1px solid var(--rule-strong);
  background:var(--surface);
  backdrop-filter:blur(14px);
  box-shadow:var(--sheen), var(--shadow-lg);
}
.form::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(60% 50% at 100% 0%, rgb(224 11 7 / .25), transparent 70%);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:599px){.field-row{grid-template-columns:1fr;}}
.field{display:grid;gap:8px;}
.field > span:first-child{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--rule-strong);
  background:var(--field-bg);
  font-size:15.5px;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.field textarea{resize:vertical;min-height:140px;}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-faint);}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:var(--text-faint);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--c-red);
  background:var(--field-bg-focus);
  box-shadow:0 0 0 4px rgb(224 11 7 / .18);
}
.field-error{font-size:13px;color:var(--danger);min-height:0;}
.field.has-error input,
.field.has-error textarea{border-color:var(--danger);}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.form-note{font-size:13px;color:var(--text-faint);text-align:center;}
.form-status{display:none;padding:14px 16px;border-radius:12px;border:1px solid var(--rule-strong);font-size:14.5px;}
.form-status.is-visible{display:block;}
.form-status.is-error{border-color:var(--danger);color:var(--danger);}

/* ---------- Footer ---------- */

.site-footer{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--rule);
  padding:clamp(56px, 8vw, 96px) 0 32px;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr);
  gap:48px;
}
.footer-blurb{margin-top:20px;max-width:36ch;font-size:15px;}
.footer-cols{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:32px;}
.footer-col ul{display:grid;gap:10px;margin-top:16px;}
.footer-col a{font-size:15px;color:var(--text-dim);transition:color var(--t) var(--ease);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.footer-bottom p{font-size:13px;color:var(--text-faint);}
@media (max-width:899px){
  .footer-top{grid-template-columns:1fr;}
}
@media (max-width:599px){
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;}
}

/* ---------- Prose (privacy and other long-form pages) ---------- */

.prose{
  max-width:68ch;
  display:grid;
  gap:18px;
}

.prose h2{
  margin-top:22px;
  font-size:clamp(1.25rem, 1.9vw, 1.5rem);
}

.prose p{color:var(--text-dim);}
.prose strong{color:var(--text);font-weight:500;}

.prose a{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--rule-strong);
  transition:text-decoration-color var(--t) var(--ease), color var(--t) var(--ease);
}
.prose a:hover{color:var(--accent);text-decoration-color:var(--accent);}

.prose .facts{margin-top:4px;}
.prose .facts .v{color:var(--text-dim);}

/* ---------- Reveal ----------
   STAGGER_STEP_MS and REVEAL_MS in site.js must match the 70ms steps and --t-slow. */

.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js .reveal.is-in{opacity:1;transform:none;}

.js .reveal.stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js .reveal.stagger.is-in > *{opacity:1;transform:none;}
.js .reveal.stagger.is-in > :nth-child(2){transition-delay:70ms;}
.js .reveal.stagger.is-in > :nth-child(3){transition-delay:140ms;}
.js .reveal.stagger.is-in > :nth-child(4){transition-delay:210ms;}
.js .reveal.stagger.is-in > :nth-child(5){transition-delay:280ms;}
.js .reveal.stagger.is-in > :nth-child(6){transition-delay:350ms;}
.js .reveal.stagger.is-in > :nth-child(7){transition-delay:420ms;}
.js .reveal.stagger.is-in > :nth-child(8){transition-delay:490ms;}
.js .reveal.stagger.is-in > :nth-child(n+9){transition-delay:560ms;}

/* The marquee list is long and moving; it fades in as one piece. */
.js .reveal.stagger.stack-tags > *{opacity:1;transform:none;}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001s !important;
    transition-delay:0s !important;
  }
  .aurora i{animation:none !important;}
  .stack-tags{animation:none !important;flex-wrap:wrap;width:auto;}
  .stack-tags [aria-hidden="true"]{display:none;}
  .card:hover,
  .btn:hover,
  .work-card:hover .work-thumb,
  .work-card:hover .work-thumb .window,
  .theme-btn:hover,
  .menu-btn:hover{transform:none;}
  .hero-art{transform:none;}
}

/* ---------- Late additions ---------- */

.cta h2 em{background:none;color:#fff;}

.case-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:24px clamp(32px, 6vw, 96px);
  align-items:end;
  margin-bottom:clamp(36px, 5vw, 64px);
}
.case-head h2{margin-top:14px;}
@media (max-width:899px){.case-head{grid-template-columns:1fr;}}
.page-hero .aurora,
.page-hero .grid-lines{
  -webkit-mask-image:linear-gradient(#000 55%, transparent);
  mask-image:linear-gradient(#000 55%, transparent);
}