/* ============================================================
   Stewart Dirt Worx — industrial design system
   Black / white / SDW red (#ff302f). Oswald condensed display +
   Inter body. Heavy, rugged, sharp edges, chevron motif. No italics.
   Mobile-first, WCAG AA.
   ============================================================ */

:root {
  --paper:      #0d0d0d;   /* page background - blacked out */
  --paper-2:    #151515;   /* alt band */
  --panel:      #171717;   /* cards / forms */
  --ink:        #f4f4f3;   /* primary text on dark */
  --ink-soft:   #c7c7c5;   /* secondary — 10:1 on paper */
  --ink-faint:  #9d9d9b;   /* meta — 4.8:1 */
  --red:        #ff302f;   /* brand accent */
  --red-deep:   #d61f1e;   /* hover fills */
  --red-text:   #ff5b57;   /* readable red on dark (5.3:1) */
  --line:       #262626;
  --line-strong:#3a3a3a;
  --night:      #0e0e0e;   /* dark band */
  --night-2:    #1a1a1a;
  --night-ink:  #f4f4f4;
  --night-soft: #a6a6a6;
  --ok:#2f6b3a; --err:#d61f1e;

  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --sans:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.28rem + 1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.8vw, 4rem);
  --step-5:  clamp(2.8rem, 1.9rem + 4.2vw, 5.2rem);

  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:140px;
  --container: 1240px;
  --measure: 62ch;
  --radius: 0px;                       /* sharp, industrial */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 18px 50px -26px rgba(0,0,0,0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
::selection { background: var(--red); color: #fff; }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.02;
  letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; }
em, i { font-style: normal; }        /* house style: no italics */
p  { margin: 0 0 var(--s4); max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background: var(--red); color:#fff; padding:12px 20px; }
.skip-link:focus { left:0; }
[id] { scroll-margin-top: 90px; }

/* top utility bar */
.topbar { background:#000; color: rgba(244,244,244,.75); font-size:.78rem; letter-spacing:.04em;
  border-bottom: 1px solid rgba(255,255,255,.07); }
.topbar-row { display:flex; align-items:center; gap: clamp(14px, 2.5vw, 30px); min-height: 38px; }
.topbar-spacer { flex:1; }
.topbar-item { display:inline-flex; align-items:center; gap:7px; color: inherit; text-decoration:none;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.topbar-item svg { color: var(--red); flex-shrink:0; }
a.topbar-item:hover { color:#fff; }
.topbar-phone { color:#fff; }
@media (max-width:860px){ .topbar-item:not(.topbar-phone){ display:none; } .topbar-spacer{ display:none; }
  .topbar-row{ justify-content:center; } }

/* eyebrow with chevron motif */
.eyebrow { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--red-deep);
  margin-bottom: var(--s4); }
.eyebrow::before { content: "\00BB"; color: var(--red); font-weight: 700; font-size: 1.1em; letter-spacing: -2px; }
.eyebrow.center::after { content: "\00AB"; color: var(--red); font-weight: 700; }
.index-num { font-family: var(--display); font-size: 1rem; color: var(--red); font-weight: 700; }

/* header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--night);
  border-bottom: 1px solid rgba(255,255,255,.08); transition: min-height .3s var(--ease); }
.header-bar { display: flex; align-items: center; gap: var(--s5); min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 40px; width: auto; transition: height .3s var(--ease); }
.site-header.scrolled .header-bar { min-height: 58px; }
.site-header.scrolled .brand img { height: 34px; }
/* header CTA stays quiet — the page keeps one red action at a time */
.header-cta.btn { background: transparent; border-color: rgba(255,255,255,.5); color: #fff;
  padding: 11px 20px; min-height: 42px; font-size: .82rem; }
.header-cta.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.main-nav a { position: relative; text-decoration: none; color: var(--night-ink); font-weight: 600;
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding: 10px 13px; white-space: nowrap;
  transition: color .2s var(--ease); }
.main-nav a::after { content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px;
  background: var(--red); transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease); }
.main-nav a:hover { color:#fff; }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a.btn { color:#fff; }
.main-nav a.btn::after { display:none; }
.header-cta { margin-left: 10px; }
.nav-toggle { display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.35);
  color:var(--night-ink); border-radius:0; padding:10px 14px; cursor:pointer; min-width:44px; min-height:44px;
  align-items:center; gap:8px; font:inherit; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width: 1000px) {
  .nav-toggle { display:inline-flex; }
  .main-nav { position: absolute; top:100%; left:0; right:0; flex-direction: column; align-items: stretch;
    background: var(--night); border-bottom: 3px solid var(--red); padding: 12px 20px 24px;
    display: none; box-shadow: var(--shadow); }
  .main-nav.open { display:flex; }
  .main-nav a { padding: 15px 12px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav a::after { display:none; }
  .header-cta { margin: 14px 0 0; }
}

/* buttons — sharp, bold */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 26px; min-height: 48px; border-radius: 0; cursor: pointer; text-decoration: none;
  border: 2px solid var(--red); background: var(--red); color:#fff;
  transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color:#fff; }
.btn-dark { background: var(--ink); border-color: var(--ink); color:#fff; }
.btn-dark:hover { background:#000; border-color:#000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color:#fff; }
.hero .btn-ghost, .section-night .btn-ghost, .on-dark .btn-ghost { color:#fff; border-color:#fff; }
.hero .btn-ghost:hover, .section-night .btn-ghost:hover, .on-dark .btn-ghost:hover { background:#fff; color:var(--ink); }
.btn-lg { padding: 17px 34px; min-height: 56px; font-size: .98rem; }
.tlink { display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none;
  color: var(--red-deep); letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; }
.tlink svg { transition: transform .3s var(--ease-out); }
.tlink:hover { color: var(--ink); }
.tlink:hover svg { transform: translateX(5px); }

/* hero */
.hero { position: relative; isolation: isolate; color: var(--night-ink); overflow: hidden; background: var(--night); }
.hero-media { position: absolute; inset: 0; z-index:-1; }
.hero-media img { width:100%; height:100%; object-fit: cover; }
.hero-media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.38) 42%, rgba(10,10,10,.88) 100%),
    linear-gradient(95deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.35) 45%, transparent 72%); }
.hero-inner { padding-block: clamp(110px, 20vh, 220px) clamp(70px, 12vh, 120px); max-width: 940px; position:relative; }
.hero .eyebrow { color: #fff; }
.hero .eyebrow::before { color: var(--red); }
.hero h1 { color:#fff; font-size: var(--step-5); font-weight: 700; }
.hero h1 .red { color: var(--red); }
/* homepage hero composition — restrained, confident */
.hero--home .hero-inner { padding-block: clamp(96px, 16vh, 170px) clamp(90px, 14vh, 150px); }
.hero--home h1 { max-width: 17ch; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero-meta-right { margin-left:auto; }
.tlink-light { color:#fff; padding: 12px 4px; }
.tlink-light:hover { color: var(--red); }
/* inner-page heroes carry full-sentence headings -> smaller, tighter */
.hero--page .hero-inner { padding-block: clamp(84px, 15vh, 150px) clamp(48px, 8vh, 84px); max-width: 900px; }
.hero--page h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
.hero .lede { color: rgba(244,244,244,.92); max-width: 54ch; margin-top: var(--s4); }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-meta { position:absolute; left:0; right:0; bottom: 22px; }
.hero-meta .container { display:flex; align-items:center; gap: var(--s4); flex-wrap:wrap;
  border-top: 2px solid var(--red); padding-top: 16px; }
.hero-meta span { font-size: .76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: rgba(244,244,244,.85); display:inline-flex; align-items:center; gap:10px; }
.hero-meta span + span::before { content:"\00BB"; color: var(--red); margin-right: 8px; }
@media (max-width:720px){ .hero-meta{ display:none; } .hero-inner{ padding-bottom: clamp(48px,9vh,80px); }
  .hero-actions .btn{ width:100%; } }

/* sections */
.section { padding-block: clamp(60px, 10vw, 140px); }
.section-tight { padding-block: clamp(44px, 7vw, 90px); }
.section-wash { background: var(--paper-2); }
.section-night { background: var(--night); color: var(--night-ink); }
.section-night h2,.section-night h3 { color:#fff; }
.section-night p { color: var(--night-soft); }
.section-night .eyebrow { color:#fff; }
.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 64px); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
/* ghost index number on section headers */
.section-head.has-num { position:relative; max-width:none; }
.section-head.has-num > * { max-width: 680px; position:relative; z-index:1; }
.section-head.has-num::after { content: attr(data-num); position:absolute; right:0; top:50%;
  transform: translateY(-52%); font-family: var(--display); font-weight:700; line-height:1;
  font-size: clamp(5rem, 11vw, 10rem); color: transparent; -webkit-text-stroke: 1.5px var(--line-strong);
  pointer-events:none; user-select:none; z-index:0; }
.section-night .section-head.has-num::after { -webkit-text-stroke-color: rgba(255,255,255,.16); }
@media (max-width:860px){ .section-head.has-num::after { display:none; } }

/* editorial split */
.split { display:grid; gap: clamp(28px,5vw,72px); align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; }
  .split.wide-media{ grid-template-columns:1.1fr .9fr; } .split.reverse > .split-media{ order:2; } }
.split-copy { max-width: 54ch; }
.split-media { position: relative; }
.figure { position: relative; overflow: hidden; border-radius:0; }
.figure::before { content:""; position:absolute; left:0; top:0; width:56px; height:4px; background: var(--red); z-index:2; }
.figure img { width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; transition: transform 1.2s var(--ease-out); }
.figure.tall img { aspect-ratio: 4/5; }
.figure:hover img { transform: scale(1.05); }
/* portrait motion clip (real job footage) */
.figure-video { max-width: 420px; margin-inline: auto; background: var(--night); box-shadow: var(--shadow); }
.figure-video video { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 27/39; }
.figure-cap { position:absolute; left:0; bottom:0; z-index:2; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:#fff; background: var(--red); padding:8px 14px; }

/* checklist */
.checklist { list-style:none; padding:0; margin:0 0 var(--s5); display:grid; gap: 16px; }
.checklist li { padding-left: 34px; position:relative; color: var(--ink-soft); font-size: 1.02rem; }
.checklist li strong { color: var(--ink); font-weight:700; }
.checklist li::before { content:"\00BB"; position:absolute; left:0; top:-2px; color: var(--red);
  font-weight:700; font-size:1.4em; }

/* service cards */
.grid { display:grid; gap: clamp(16px,2vw,26px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px,100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); }
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius:0;
  overflow: hidden; display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red); }
.card-media { aspect-ratio: 3/2; overflow:hidden; background: var(--night); }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: var(--s5); display:flex; flex-direction:column; gap: 10px; flex:1; }
.card-body h3 { margin:0; }
.card-body p { color: var(--ink-soft); font-size:.98rem; margin:0; }
.card-body .index-num { position:absolute; top: var(--s4); right: var(--s5); }
.card-link { margin-top:auto; padding-top: var(--s4); }
/* compact service list card (no image) */
.svc { position:relative; border-top: 3px solid var(--ink); padding: var(--s4) 0 var(--s5); transition: border-color .3s var(--ease); }
.svc:hover { border-top-color: var(--red); }
.svc { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.svc .index-num { display:block; margin-bottom: 6px; }
.svc-go { margin-top: var(--s4); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink); display:inline-flex; align-items:center; gap:8px; }
.svc-go svg { color: var(--red); }
.svc:hover .svc-go { color: var(--red-deep); }
.svc-go svg { transition: transform .3s var(--ease-out); }
.svc:hover .svc-go svg { transform: translateX(5px); }
.svc h3 { font-size: 1.35rem; margin-bottom: 8px; }
.svc p { color: var(--ink-soft); font-size:.96rem; margin:0; }

/* gallery */
.gallery-grid { display:grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); }
@media (min-width:900px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
.gallery-grid a { display:block; overflow:hidden; aspect-ratio: 1; position: relative; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-out); }
.gallery-grid a::after { content:""; position:absolute; inset:0; background: rgba(255,48,47,0); transition: background .35s var(--ease); }
.gallery-grid a:hover img { transform: scale(1.07); }
.gallery-grid a:hover::after { background: rgba(255,48,47,.14); }
.mosaic { display:grid; gap:10px; grid-template-columns: repeat(6,1fr); }
.mosaic a { position:relative; overflow:hidden; aspect-ratio: 4/3; }
.mosaic img { width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-out); }
.mosaic a:hover img { transform: scale(1.06); }
.mosaic a::before, .gallery-grid a::before { content:"View \00BB"; position:absolute; left:0; bottom:0; z-index:2;
  background: var(--red); color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding: 7px 13px; transform: translateY(110%); transition: transform .35s var(--ease); }
.mosaic a:hover::before, .gallery-grid a:hover::before { transform: translateY(0); }
.mosaic .m-a { grid-column: span 3; grid-row: span 2; aspect-ratio:auto; }
.mosaic .m-b { grid-column: span 3; } .mosaic .m-c { grid-column: span 3; }
@media (max-width:720px){ .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic .m-a{ grid-column:span 2; } .mosaic .m-b,.mosaic .m-c{ grid-column:span 1; } }

/* stats band */
.stats { display:grid; gap: clamp(18px,3vw,40px); grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.stat { border-left: 3px solid var(--red); padding-left: var(--s4); }
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem,4.5vw,3.2rem); line-height:1;
  color:#fff; display:block; }
.stat .lbl { display:block; margin-top: 8px; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--night-soft); }

/* scroll progress bar */
.scroll-progress { position: fixed; top:0; left:0; right:0; height:3px; z-index:300;
  background: var(--red); transform-origin: 0 50%; transform: scaleX(0); pointer-events:none; }

/* hero entrance stagger (home only) */
@keyframes riseIn { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
.hero--home .eyebrow, .hero--home h1, .hero--home .lede, .hero--home .hero-actions {
  animation: riseIn .8s var(--ease-out) both; }
.hero--home h1 { animation-delay:.12s; }
.hero--home .lede { animation-delay:.24s; }
.hero--home .hero-actions { animation-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .hero--home .eyebrow,.hero--home h1,.hero--home .lede,.hero--home .hero-actions{ animation:none; } }

/* service-name marquee band */
.marquee { background: var(--night); border-block: 1px solid rgba(255,255,255,.08);
  overflow:hidden; padding-block: 18px; position:relative; }
.marquee-track { display:flex; gap: 56px; width:max-content; animation: marquee 36s linear infinite; }
.marquee span { font-family: var(--display); font-weight:700; font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  text-transform:uppercase; letter-spacing:.03em; line-height:1; white-space:nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3);
  display:inline-flex; align-items:center; gap: 56px; }
.marquee span::after { content:"\00BB"; color: var(--red); -webkit-text-stroke: 0; font-size:.85em; }
@keyframes marquee { to { transform: translateX(calc(-100%/3)); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* prev / next service pager */
.svc-pager { display:grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--line); }
.svc-pager a { display:flex; flex-direction:column; gap: 6px; padding: clamp(28px,4vw,48px) clamp(20px,4vw,56px);
  text-decoration:none; transition: background .25s var(--ease); }
.svc-pager a:hover { background: var(--paper-2); }
.pager-prev { align-items:flex-start; text-align:left; }
.pager-next { align-items:flex-end; text-align:right; }
.pager-k { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); }
.pager-k svg { color: var(--red); }
.pager-name { font-family: var(--display); font-weight:600; font-size: clamp(1.3rem,2.4vw,1.9rem);
  text-transform:uppercase; color: var(--ink); }
.svc-pager a:hover .pager-name { color: var(--red-deep); }
.pager-all { align-items:center; justify-content:center; text-align:center; border-inline: 1px solid var(--line);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); line-height:1.7; }
.pager-all:hover { color: var(--ink); }
@media (max-width:640px){ .svc-pager{ grid-template-columns:1fr 1fr; } .pager-all{ display:none; }
  .pager-name{ font-size:1.05rem; } }

/* gallery lightbox */
.lightbox { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  background: rgba(8,8,8,.94); opacity:0; pointer-events:none; transition: opacity .3s var(--ease); }
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 84vh; object-fit:contain;
  box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.lb-count { position:absolute; top:18px; left:22px; color:#fff; font-family: var(--display);
  font-weight:600; font-size:1.05rem; letter-spacing:.08em; }
.lb-btn { position:absolute; background: none; border: 1px solid rgba(255,255,255,.35); color:#fff;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease); border-radius:0; }
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-close { top:14px; right:16px; }
.lb-prev { left:16px; top:50%; transform: translateY(-50%); }
.lb-next { right:16px; top:50%; transform: translateY(-50%); }
@media (max-width:640px){ .lb-prev{ left:6px; } .lb-next{ right:6px; } .lightbox img{ max-width:96vw; } }

/* subtle industrial texture for wash sections */
.section-textured { position:relative; }
.section-textured::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(19,19,19,.07) 1px, transparent 1.5px);
  background-size: 22px 22px; }
.section-textured > * { position:relative; }

/* CTA band */
.cta-band { text-align:center; position:relative; overflow:hidden; border-top: 4px solid var(--red); }
.cta-stripes { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 26px); }
.cta-band .container { position:relative; }
.cta-title { max-width: 22ch; margin-inline:auto; color:#fff; font-size: var(--step-3); }

/* forms */
.form-card { background: var(--paper); border:1px solid var(--line); border-top: 4px solid var(--red); border-radius:0;
  padding: clamp(24px,4vw,44px); box-shadow: var(--shadow); }
.form-grid { display:grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .full{ grid-column:1/-1; } }
.field label { display:block; font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea { width:100%; font:inherit; font-size:16px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:0; padding: 13px 15px; background:#121212; min-height:50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,48,47,.15); }
.field .hint { font-size:.82rem; color: var(--ink-faint); margin-top:6px; }
.form-status { margin-top: var(--s4); font-weight:700; }
.form-status.ok { color: var(--ok); } .form-status.err { color: var(--err); }
.hp-field { position:absolute; left:-9999px; height:0; overflow:hidden; }

/* contact list */
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap: var(--s4); }
.contact-list a { font-weight:700; text-decoration:none; color: var(--ink); }
.contact-list a:hover { color: var(--red-deep); }
.contact-list .k { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:4px; }

/* footer */
.site-footer { background: var(--night); color: var(--night-ink); padding-block: clamp(56px,8vw,100px) var(--s5);
  border-top: 4px solid var(--red); position:relative; overflow:hidden; }
.footer-word { font-family: var(--display); font-weight:700; text-transform:uppercase; line-height:.9;
  font-size: clamp(2.4rem, 6.5vw, 5.4rem); letter-spacing:.01em; color:#fff;
  margin-bottom: clamp(40px, 6vw, 72px); user-select:none; }
.footer-word span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }
.footer-grid { display:grid; gap: var(--s6); grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap: var(--s5); } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h3 { font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-family: var(--sans); font-weight:700; margin-bottom: var(--s4); color: var(--red); }
.site-footer a { color: var(--night-ink); text-decoration:none; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap: 4px; }
.footer-links a { display:inline-block; padding:6px 0; }
.footer-brand img { height:52px; width:auto; margin-bottom: var(--s4); }
.footer-brand p { color: var(--night-soft); font-size:.95rem; max-width: 34ch; }
.footer-contact .footer-phone { display:inline-block; font-family: var(--display); font-weight:700;
  font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing:.02em; color:#fff; margin-bottom: var(--s3); }
.footer-contact .footer-phone:hover { color: var(--red); text-decoration:none; }
.footer-muted { color: var(--night-soft); padding: 6px 0; display:inline-block; }
.footer-cta { margin-top: var(--s4); }
.site-footer a.footer-cta:hover { text-decoration:none; color:#fff; }
.footer-note { margin-top: var(--s7); padding-top: var(--s4); border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap: var(--s4); justify-content:space-between; font-size:.85rem; color: var(--night-soft); }
.to-top { font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }

/* prose (legal) */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s6); font-size: var(--step-2); }
.prose h3 { margin-top: var(--s5); font-size: 1.2rem; }
.prose ul { color: var(--ink-soft); }

/* reveal */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.07s; } .reveal[data-delay="2"]{ transition-delay:.14s; } .reveal[data-delay="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

.center { text-align:center; } .mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .mi-auto{ margin-inline:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }

/* service image cards */
.svc-grid { display:grid; gap: clamp(16px,1.8vw,24px); grid-template-columns: repeat(3, 1fr); }
.svc-card { position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: var(--paper); border:1px solid var(--line); overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--red); }
.svc-card-media { position:relative; height: 232px; overflow:hidden; background: var(--night); }
.svc-card-media img { width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-out); }
.svc-card:hover .svc-card-media img { transform: scale(1.06); }
.svc-card-num { position:absolute; left:0; bottom:0; font-family: var(--display); font-weight:700;
  font-size:1.05rem; color:#fff; background: var(--red); padding: 5px 13px; letter-spacing:.05em; }
.svc-card-body { padding: var(--s4) var(--s4) calc(var(--s4) + 4px); display:flex; flex-direction:column; gap: 8px; flex:1; }
.svc-card-body h3 { margin:0; font-size: 1.3rem; }
.svc-card-body p { color: var(--ink-soft); font-size:.95rem; margin:0; line-height:1.55; }
.svc-card .svc-go { margin-top: auto; padding-top: 6px; }
.svc-wide { grid-column: span 2; }
@media (max-width: 920px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card:first-child { grid-column: span 1; }   /* flagship back to single */
  .svc-wide:last-child { grid-column: span 2; }    /* last card fills the row */
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-wide { grid-column: span 1 !important; }
  .svc-card-media { height: 210px; }
}


/* ============================================================
   BLACKOUT THEME - black + red, animated, industrial
   (appended overrides; token flip above does the heavy lifting)
   ============================================================ */

/* red text that reads on black */
a { color: var(--red-text); }
.eyebrow, .index-num, .svc-go, .tlink { color: var(--red-text); }
.svc:hover .svc-go, .tlink:hover { color: #fff; }
.contact-list a:hover { color: var(--red-text); }
.svc-pager a:hover .pager-name { color: var(--red-text); }

/* ambient red atmosphere on the page */
body {
  background-image:
    radial-gradient(900px 460px at 85% -6%, rgba(255, 48, 47, 0.07), transparent 60%),
    radial-gradient(760px 420px at -10% 42%, rgba(255, 48, 47, 0.05), transparent 55%);
  background-attachment: fixed;
}

/* hero: pulsing red glow + animated accent bar under the headline */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px 340px at 18% 62%, rgba(255, 48, 47, 0.16), transparent 68%);
  animation: glowPulse 6.5s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.12); }
}
.hero h1 { position: relative; padding-bottom: 22px; }
.hero h1::after {
  content: ""; position: absolute; left: 2px; bottom: 0; height: 5px; width: 96px;
  background: linear-gradient(90deg, var(--red), rgba(255,48,47,0.25));
  transform-origin: left; animation: barGrow 0.9s var(--ease-out) 0.9s both;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cards: dark panels, red glow lift, scanline sweep on hover */
.svc-card, .form-card { background: var(--panel); }
.svc-card:hover {
  box-shadow: 0 24px 70px -24px rgba(255, 48, 47, 0.4), 0 18px 50px -26px rgba(0,0,0,0.9);
}
.svc-card-media { position: relative; }
.svc-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 46%, rgba(255,48,47,0.10) 52%, transparent 66%);
  transform: translateX(-130%);
}
.svc-card:hover .svc-card-media::after { animation: scanSweep 0.9s var(--ease-out) forwards; }
@keyframes scanSweep { to { transform: translateX(130%); } }

/* buttons: red glow that answers hover */
.btn-primary { box-shadow: 0 10px 34px -12px rgba(255, 48, 47, 0.55); }
.btn-primary:hover { box-shadow: 0 14px 44px -12px rgba(255, 48, 47, 0.8); transform: translateY(-1px); }

/* washed band gets depth instead of grey */
.section-wash {
  background:
    radial-gradient(700px 380px at 90% 10%, rgba(255, 48, 47, 0.08), transparent 60%),
    var(--paper-2);
}

/* header: red energy line along the bottom */
.site-header { border-bottom: 1px solid rgba(255, 48, 47, 0.35); }

/* marquee strokes brighter on black */
.marquee span { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6); }
.marquee { border-block: 1px solid rgba(255, 48, 47, 0.25); }

/* CTA hazard stripes slowly drift */
.cta-stripes { animation: stripeDrift 26s linear infinite; }
@keyframes stripeDrift { to { background-position: 340px 0; } }

/* gallery tiles: red flash hover reads hotter on black */
.gallery-grid a:hover::after { background: rgba(255, 48, 47, 0.22); }
.mosaic a { outline: 1px solid var(--line); }
.gallery-grid a { outline: 1px solid var(--line); }

/* pager sits on black */
.svc-pager a:hover { background: #141414; }

/* topbar quiet on black */
.topbar { background: #0a0a0a; border-bottom: 1px solid var(--line); }

/* ghost buttons read on dark sections */
.btn-ghost { color: var(--ink); border-color: var(--ink-soft); }
.btn-ghost:hover { background: var(--ink); color: #0d0d0d; }

/* forms: red top edge + focus glow already red; darker hint text ok */
.form-card { border-color: var(--line); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9); }
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 48, 47, 0.25);
}

/* figure video panel */
.figure-video { background: var(--panel); }

/* footer melts into the page now - add separation */
.site-footer { border-top: 4px solid var(--red); background: #0a0a0a; }

/* reduced motion: the global rule already kills these animations */