/* =========================================================
   ESSENTIAL STRIPING — asphalt & traffic paint
   Palette is functional: yellow = paint, blue = ADA, red = fire lane.
   ========================================================= */

:root{
  --asphalt:      #0E0F11;
  --asphalt-2:    #141619;
  --asphalt-3:    #1B1E22;
  --seam:         #24282E;

  --paint:        #FFC400;   /* DOT traffic yellow */
  --paint-dim:    #C99A00;
  --white:        #F4F5F3;   /* traffic-paint white, slightly warm */
  --ada:          #2F6BE0;   /* accessible-parking blue */
  --ada-soft:     #6E9BF0;
  --fire:         #E23B26;   /* fire lane red */

  --ink:          #F4F5F3;
  --ink-2:        #A8AEB7;
  --ink-3:        #858C96;

  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 3px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

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

body{
  margin:0;
  background:var(--asphalt);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* asphalt grain over everything */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:900;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--paint); color:#000; padding:12px 20px; font-weight:800;
}
.skip:focus{ left:12px; top:12px; }

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

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.01em; }

h1{
  font-family:var(--display);
  font-size:clamp(3.1rem, 7.4vw, 6.1rem);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:.22em 0 .38em;
}
h1 .hl{
  color:var(--paint);
  position:relative;
  display:inline-block;
}
h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:.07em;
  background:var(--paint); opacity:.35;
  transform:scaleX(0); transform-origin:left;
  animation:swipe 1s var(--ease) .85s forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

h2{
  font-family:var(--display);
  font-size:clamp(2.05rem, 4.4vw, 3.5rem);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.015em;
}

h3{ font-family:var(--body); font-weight:800; font-size:1.24rem; letter-spacing:-.01em; }
h4{ font-family:var(--mono); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

p{ margin:0 0 1.1em; }
b,strong{ font-weight:800; color:var(--white); }

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--paint);
  display:flex; align-items:center; gap:10px;
  margin:0 0 1.1em;
}
.eyebrow--blue{ color:var(--ada-soft); }
.eyebrow .dot{
  width:7px; height:7px; background:currentColor; flex:0 0 auto;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.lede{ font-size:clamp(1.02rem,1.55vw,1.19rem); color:var(--ink-2); max-width:56ch; line-height:1.7; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--paint); --fg:#0B0C0D;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:800; font-size:.94rem;
  letter-spacing:.005em;
  padding:14px 24px; border:2px solid var(--bg); border-radius:var(--r);
  cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .18s, color .18s, border-color .18s;
}
.btn svg{ width:17px; height:17px; fill:currentColor; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px color-mix(in srgb, var(--bg) 75%, transparent); }
.btn:active{ transform:translateY(0); }

.btn--lg{ padding:17px 30px; font-size:1.02rem; }
.btn--paint{ --bg:var(--paint); --fg:#0B0C0D; }
.btn--blue{ --bg:var(--ada); --fg:#fff; }
.btn--outline{
  background:transparent; color:var(--ink); border-color:#333940;
}
.btn--outline:hover{ border-color:var(--paint); color:var(--paint); box-shadow:none; }
.btn--ghost{
  background:transparent; color:var(--ink-2); border-color:transparent;
  font-weight:600; padding:14px 12px;
}
.btn--ghost:hover{ color:var(--paint); transform:none; box-shadow:none; }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:sticky; top:0; z-index:500;
  background:color-mix(in srgb, var(--asphalt) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background .3s, box-shadow .3s;
}
.hdr.is-stuck{ background:color-mix(in srgb, var(--asphalt) 96%, transparent); box-shadow:0 12px 34px -22px #000; }

.hdr__in{ display:flex; align-items:center; gap:28px; height:74px; }

/* the painted lane line under the header */
.hdr__rule{
  height:2px;
  background:repeating-linear-gradient(90deg,
    var(--paint) 0 34px, transparent 34px 62px);
  opacity:.28;
}

.logo{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.logo__image{
  width:auto;
  height:58px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.12));
  transition:transform .25s var(--ease);
}
.logo:hover .logo__image{ transform:translateY(-1px) scale(1.02); }
.logo__mark{ display:flex; gap:3px; align-items:flex-end; height:22px; }
.logo__mark i{ display:block; width:4px; height:22px; background:var(--white); border-radius:1px; }
.logo__mark i:first-child{ background:var(--paint); }
.logo:hover .logo__mark i{ animation:tick .5s var(--ease); }
.logo:hover .logo__mark i:nth-child(2){ animation-delay:.06s; }
.logo:hover .logo__mark i:nth-child(3){ animation-delay:.12s; }
@keyframes tick{ 50%{ transform:scaleY(.62); } }

/* wordmark lockup mirrors the badge: ESSENTIAL over LINE STRIPING LLC */
.logo__txt{ display:flex; flex-direction:column; gap:1px; line-height:1; }
.logo__txt b{
  font-family:var(--display); font-weight:400; font-size:1.16rem;
  text-transform:uppercase; letter-spacing:.005em; color:var(--white);
}
.logo__txt em{
  font-family:var(--body); font-style:normal; font-weight:800;
  font-size:.545rem; letter-spacing:.185em; text-transform:uppercase;
  color:var(--paint);
}

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-size:.88rem; font-weight:600; color:var(--ink-2);
  position:relative; padding:4px 0;
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--paint); transform:scaleX(0); transform-origin:right;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.hdr__cta{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:42px; height:42px; background:none; border:1px solid var(--seam);
  border-radius:var(--r); cursor:pointer; padding:0;
}
.burger i{ display:block; width:18px; height:2px; background:var(--ink); margin-inline:auto; transition:.25s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobnav{
  position:sticky; top:74px; z-index:499;
  background:var(--asphalt-2); border-bottom:1px solid var(--seam);
  padding:10px var(--gut) 20px; display:none; flex-direction:column;
}
.mobnav:not([hidden]){ display:flex; }
@media (min-width:861px){ .mobnav{ display:none !important; } }
.mobnav a{ padding:13px 0; border-bottom:1px solid var(--seam); font-weight:600; }
.mobnav__reviews{ color:var(--paint); letter-spacing:.05em; text-decoration:none; }
.mobnav__reviews span{ margin-left:8px; color:#fff; letter-spacing:0; }
.mobnav__call{
  margin-top:14px; background:var(--paint); color:#0B0C0D !important;
  text-align:center; border-radius:var(--r); font-weight:800; border:0 !important;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding:clamp(48px,7vw,86px) 0 0; overflow:hidden; }

.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:820px; pointer-events:none;
  background:
    radial-gradient(58% 46% at 22% 34%, rgba(255,196,0,.10), transparent 68%),
    radial-gradient(46% 40% at 82% 18%, rgba(47,107,224,.10), transparent 70%);
  filter:blur(8px);
}

.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,72px);
  align-items:center;
  padding-bottom:clamp(50px,7vw,90px);
}

.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 30px; }

.hero__chips{
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--seam);
  display:flex; flex-wrap:wrap; gap:12px 32px;
}
.hero__chips li{ font-size:.86rem; color:var(--ink-3); }
.hero__chips b{
  display:block; font-family:var(--mono); font-weight:700; font-size:.94rem;
  color:var(--paint); letter-spacing:.02em; text-transform:uppercase;
}

/* ---- engineering plan ---- */
.plan__frame{
  position:relative;
  background:
    linear-gradient(180deg, var(--asphalt-2), #101215);
  border:1px solid var(--seam);
  border-radius:var(--r);
  padding:26px 22px 18px;
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 rgba(255,255,255,.03);
}
.plan__frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--r);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:26px 26px;
}
.plan__tag{
  position:absolute; top:-9px; left:20px;
  background:var(--asphalt); padding:0 10px;
  font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.22em; color:var(--ink-3);
}
.plan{ width:100%; height:auto; position:relative; }

.p-edge{ stroke:#2B3037; stroke-width:2; stroke-dasharray:7 6; }

.stall{
  stroke:var(--white); stroke-width:4.5; stroke-linecap:round;
  stroke-dasharray:150; stroke-dashoffset:150;
  animation:draw .62s var(--ease) forwards;
}
.bank .stall:nth-child(1){ animation-delay:.30s } .bank .stall:nth-child(2){ animation-delay:.36s }
.bank .stall:nth-child(3){ animation-delay:.42s } .bank .stall:nth-child(4){ animation-delay:.48s }
.bank .stall:nth-child(5){ animation-delay:.54s } .bank .stall:nth-child(6){ animation-delay:.60s }
.bank .stall:nth-child(7){ animation-delay:.66s } .bank .stall:nth-child(8){ animation-delay:.72s }
.bank .stall:nth-child(9){ animation-delay:.78s } .bank .stall:nth-child(10){ animation-delay:.84s }
.bank--2 .stall{ animation-delay:.9s }
.bank--2 .stall:nth-child(4){ animation-delay:.96s } .bank--2 .stall:nth-child(5){ animation-delay:1.02s }
.bank--2 .stall:nth-child(6){ animation-delay:1.08s } .bank--2 .stall:nth-child(7){ animation-delay:1.14s }
.bank--2 .stall:nth-child(8){ animation-delay:1.20s } .bank--2 .stall:nth-child(9){ animation-delay:1.26s }
.bank--2 .stall:nth-child(10){ animation-delay:1.32s } .bank--2 .stall:nth-child(11){ animation-delay:1.38s }
.bank--2 .stall:nth-child(12){ animation-delay:1.44s }
.stall.is-ada{ stroke:var(--ada-soft); }

@keyframes draw{ to{ stroke-dashoffset:0; } }

.p-ada-fill{ fill:var(--ada); opacity:0; animation:fadein .7s ease 1.35s forwards; }
@keyframes fadein{ to{ opacity:.15; } }

.p-hatch path{
  stroke:var(--ada-soft); stroke-width:2.4; opacity:0;
  animation:fadein2 .5s ease 1.5s forwards;
}
@keyframes fadein2{ to{ opacity:.75; } }

.p-center{
  stroke:var(--paint); stroke-width:3.5; stroke-dasharray:22 18;
  opacity:0; animation:fadein3 .8s ease 1.15s forwards;
}
@keyframes fadein3{ to{ opacity:.9; } }

.p-arrow path{ stroke:var(--white); stroke-width:3; fill:none; opacity:0;
  animation:fadein2 .5s ease 1.55s forwards; }

.p-isa{ stroke:var(--ada-soft); stroke-width:2.6; fill:none; stroke-linecap:round;
  opacity:0; animation:fadein2 .6s ease 1.62s forwards; }
.p-isa circle{ fill:var(--ada-soft); stroke:none; }

.p-fire-line{ stroke:var(--fire); stroke-width:3.5; opacity:0; animation:fadein3 .6s ease 1.7s forwards; }
.p-fire-hatch{ stroke:var(--fire); stroke-width:2.6; opacity:0; animation:fadein2 .6s ease 1.8s forwards; }

.p-dim path{ stroke:var(--ink-3); stroke-width:1.4; fill:none; opacity:0;
  animation:fadein2 .6s ease 1.9s forwards; }

.p-label{
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.12em; fill:var(--ink-3);
  opacity:0; animation:fadein4 .6s ease 1.95s forwards;
}
@keyframes fadein4{ to{ opacity:1; } }
.p-label--fire{ fill:var(--fire); }
.p-label--ada{ fill:var(--ada-soft); }

/* painted lane divider between sections */
.lanerule{
  height:3px;
  background:repeating-linear-gradient(90deg, var(--white) 0 46px, transparent 46px 80px);
  opacity:.14;
}

/* =========================================================
   CREDENTIAL STRIP
   ========================================================= */
.strip{ background:var(--asphalt-2); border-bottom:1px solid var(--seam); }
.strip__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--seam);
  border-inline:1px solid var(--seam);
}
.strip__item{ background:var(--asphalt-2); padding:26px clamp(16px,2vw,28px); }
.strip__item b{
  display:block; font-size:.98rem; margin-bottom:4px;
  color:var(--white); font-weight:800;
}
.strip__item span{ font-size:.82rem; color:var(--ink-3); line-height:1.5; display:block; }

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{ padding:clamp(72px,9vw,124px) 0; }
.sec--tight{ padding-top:0; }

.sec__head{ max-width:800px; margin-bottom:clamp(38px,5vw,60px); }
.sec__sub{ color:var(--ink-2); max-width:60ch; margin-top:1.1em; font-size:1.02rem; }

/* ---------- service cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.card{
  position:relative;
  background:linear-gradient(180deg, var(--asphalt-2), #101216);
  border:1px solid var(--seam);
  border-radius:var(--r);
  padding:34px 30px 32px;
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, var(--accent), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.card:hover{ transform:translateY(-5px); border-color:#343A42; box-shadow:0 30px 60px -40px #000; }
.card:hover::before{ opacity:.09; }

.card__bar{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.card--white{ --accent:var(--white); }
.card--blue { --accent:var(--ada); }
.card--red  { --accent:var(--fire); }

.card__no{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.24em; color:var(--accent); opacity:.85; margin:0 0 14px;
}
.card h3{ margin-bottom:12px; font-size:1.34rem; }
.card h3 a{ color:inherit; text-decoration:none; }
.card h3 a:hover{ color:var(--accent); }
.card > p{ color:var(--ink-2); font-size:.95rem; line-height:1.68; }

.card__list{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--seam); }
.card__list li{
  position:relative; padding-left:22px; margin-bottom:9px;
  font-size:.88rem; color:var(--ink-2);
}
.card__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:11px; height:2px; background:var(--accent); opacity:.75;
}

/* ---------- also do ---------- */
.alsodo{
  margin-top:26px; padding:26px 30px;
  background:var(--asphalt-2); border:1px solid var(--seam); border-radius:var(--r);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 26px;
}
.alsodo__label{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paint);
  margin:0; flex:0 0 auto;
}
.alsodo ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin:0; padding:0; }
.alsodo li{
  font-size:.83rem; color:var(--ink-2);
  padding:6px 13px; border:1px solid var(--seam); border-radius:100px;
  transition:border-color .2s, color .2s;
}
.alsodo li:hover{ border-color:var(--paint); color:var(--white); }
.alsodo a{ color:inherit; text-decoration:none; }

/* =========================================================
   ADA FEATURE
   ========================================================= */
.ada{
  background:
    linear-gradient(180deg, #0C0E11, #101318 60%, #0C0E11),
    var(--asphalt-2);
  border-block:1px solid var(--seam);
  padding:clamp(72px,9vw,120px) 0;
  position:relative; overflow:hidden;
}
.ada::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:radial-gradient(50% 50% at 12% 0%, rgba(47,107,224,.13), transparent 70%);
  pointer-events:none;
}
.ada__in{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,66px);
  align-items:start;
}
.ada__copy h2{ margin-bottom:.6em; }
.ada__copy p{ color:var(--ink-2); max-width:56ch; }
.ada__kicker{
  border-left:3px solid var(--ada); padding:2px 0 2px 18px;
  color:var(--ink) !important; font-size:1.02rem;
}
.ada__copy .btn{ margin-top:12px; }

.ada__specs{
  background:var(--asphalt); border:1px solid var(--seam); border-radius:var(--r);
  padding:28px 28px 12px;
}
.ada__specs-t{
  font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ada-soft); margin:0 0 20px;
}
.ada__specs dl{ margin:0; }
.ada__specs div{ padding:13px 0; border-top:1px solid var(--seam); }
.ada__specs div:first-of-type{ border-top:0; padding-top:0; }
.ada__specs dt{ font-weight:800; font-size:.92rem; color:var(--white); }
.ada__specs dd{ margin:3px 0 0; font-size:.85rem; color:var(--ink-3); line-height:1.55; }

/* =========================================================
   PROCESS
   ========================================================= */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step{
  padding:30px 26px 30px 0; position:relative;
  border-top:2px solid var(--seam);
}
.step + .step{ padding-left:26px; }
.step::after{
  content:""; position:absolute; top:-2px; left:0; height:2px; width:0;
  background:var(--paint); transition:width .7s var(--ease);
}
.step.in::after{ width:100%; }
.step:nth-child(2)::after{ transition-delay:.12s; }
.step:nth-child(3)::after{ transition-delay:.24s; }
.step:nth-child(4)::after{ transition-delay:.36s; }

.step__no{
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; color:var(--paint); display:block; margin-bottom:14px;
}
.step h3{ margin-bottom:9px; }
.step p{ font-size:.9rem; color:var(--ink-3); line-height:1.65; margin:0; }

/* =========================================================
   STATS
   ========================================================= */
.stats{
  background:var(--paint); color:#0B0C0D;
  padding:clamp(40px,5vw,58px) 0;
  position:relative; overflow:hidden;
}
.stats::before{
  content:""; position:absolute; inset:0; opacity:.09;
  background:repeating-linear-gradient(-45deg, #000 0 16px, transparent 16px 34px);
}
.stats__in{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:left; }
.stat b{
  display:block; font-family:var(--display); font-size:clamp(2.7rem,5.4vw,4.2rem);
  line-height:.9; letter-spacing:-.02em;
}
.stat span{
  display:block; margin-top:9px;
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.72; line-height:1.5;
}

/* =========================================================
   WHO
   ========================================================= */
.who{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--seam);
      border:1px solid var(--seam); border-radius:var(--r); overflow:hidden; }
.who__i{ background:var(--asphalt); padding:26px 24px; transition:background .3s; }
.who__i:hover{ background:var(--asphalt-3); }
.who__i h3{ font-size:1.02rem; margin-bottom:7px; }
.who__i p{ margin:0; font-size:.85rem; color:var(--ink-3); line-height:1.6; }

/* =========================================================
   SERVICE AREA
   ========================================================= */
.area{
  padding:clamp(72px,9vw,120px) 0;
  background:var(--asphalt-2); border-block:1px solid var(--seam);
}
.area__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
.area__more{ display:inline-block; margin-top:16px; color:var(--paint); font-weight:900; text-underline-offset:4px; }
.area__col h3{
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paint);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--seam);
}
.area__col ul{ list-style:none; margin:0; padding:0; }
.area__col li{
  font-size:.9rem; color:var(--ink-2); padding:5px 0;
  transition:color .2s, padding-left .2s;
}
.area__col li:hover{ color:var(--paint); padding-left:5px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq__wrap{ max-width:920px; }
.faq{ border-top:1px solid var(--seam); }

.q{ border-bottom:1px solid var(--seam); }
.q summary{
  list-style:none; cursor:pointer;
  padding:22px 46px 22px 0; position:relative;
  font-weight:800; font-size:1.04rem; color:var(--ink);
  transition:color .2s;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary:hover{ color:var(--paint); }
.q summary::after,
.q summary::before{
  content:""; position:absolute; right:8px; top:50%;
  background:var(--paint); transition:transform .3s var(--ease), opacity .3s;
}
.q summary::after{ width:14px; height:2px; margin-top:-1px; }
.q summary::before{ width:2px; height:14px; margin-top:-7px; right:14px; }
.q[open] summary::before{ transform:rotate(90deg); opacity:0; }
.q[open] summary{ color:var(--paint); }

.q__a{ padding:0 46px 24px 0; animation:slidein .35s var(--ease); }
.q__a p{ margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.72; }
@keyframes slidein{ from{ opacity:0; transform:translateY(-6px); } }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(76px,9vw,124px) 0;
  background:linear-gradient(180deg, #0C0E11, #14171B);
  border-top:1px solid var(--seam);
  text-align:center;
}
.cta__hazard{
  position:absolute; inset:auto 0 0 0; height:14px;
  background:repeating-linear-gradient(-45deg,
    var(--paint) 0 22px, #0B0C0D 22px 44px);
  opacity:.85;
}
.cta__in{ position:relative; max-width:780px; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ margin-bottom:.5em; }
.cta__sub{ color:var(--ink-2); font-size:1.06rem; max-width:56ch; margin-inline:auto; }
.cta__btns{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{ background:var(--asphalt); padding:clamp(52px,6vw,74px) 0 0; }
.ftr__in{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:44px;
}
.ftr__brand p{ color:var(--ink-3); font-size:.9rem; max-width:34ch; margin:16px 0 14px; }
.ftr__phone{
  font-family:var(--display); font-size:1.6rem; color:var(--paint);
  letter-spacing:.01em; display:inline-block;
  transition:opacity .2s;
}
.ftr__phone:hover{ opacity:.75; }

.ftr__col a{
  display:block; font-size:.89rem; color:var(--ink-2); padding:6px 0;
  transition:color .2s, padding-left .2s;
}
.ftr__col a:hover{ color:var(--paint); padding-left:4px; }
.ftr__col h2{
  margin-bottom:12px;
  color:#9AA1AA;
  font:700 .72rem var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ftr__note{ font-size:.85rem; color:var(--ink-3); margin:0 0 12px; line-height:1.6; }

.ftr__base{
  border-top:1px solid var(--seam);
  padding-block:22px 26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.ftr__base p{ margin:0; font-size:.8rem; color:var(--ink-3); }
.ftr__fine{ font-family:var(--mono); font-size:.72rem !important; letter-spacing:.04em; }

/* =========================================================
   STICKY MOBILE CALL
   ========================================================= */
.stickycall{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  display:none; align-items:center; justify-content:center; gap:10px;
  background:var(--paint); color:#0B0C0D;
  padding:15px 16px; font-weight:800; font-size:.94rem;
  box-shadow:0 -10px 30px -14px #000;
}
.stickycall svg{ width:17px; height:17px; fill:currentColor; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:1; transform:none; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.io{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.io.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__plan{ max-width:560px; }
  .cards{ grid-template-columns:1fr; }
  .ada__in{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step + .step{ padding-left:0; }
  .step:nth-child(even){ padding-left:26px; }
  .who{ grid-template-columns:repeat(2,1fr); }
  .area__grid{ grid-template-columns:repeat(3,1fr); }
  .strip__in{ grid-template-columns:repeat(2,1fr); }
  .ftr__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .hdr__cta{ order:2; }
  .hide-sm{ display:none; }
  .hdr__cta .btn--paint span{ display:none; }
  .hdr__cta .btn--paint{ padding:12px 15px; }
  .hdr__cta .btn--paint svg{ width:19px; height:19px; }
}

@media (max-width:640px){
  body{ font-size:16px; padding-bottom:56px; }
  .stickycall{ display:flex; }
  .stats__in{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .who{ grid-template-columns:1fr; }
  .area__grid{ grid-template-columns:repeat(2,1fr); }
  .strip__in{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step:nth-child(even){ padding-left:0; }
  .ftr__in{ grid-template-columns:1fr; gap:28px; }
  .alsodo{ flex-direction:column; align-items:flex-start; }
  .hero__btns .btn{ width:100%; }
  .cta__btns .btn{ width:100%; }
  .ftr__base{ flex-direction:column; }
  .q summary{ font-size:.98rem; }
}

@media (max-width:400px){
  .area__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   MOTION / PRINT
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal,.io{ opacity:1 !important; transform:none !important; }
  .stall{ stroke-dashoffset:0 !important; }
  .p-ada-fill{ opacity:.15 !important; }
  .p-hatch path,.p-center,.p-arrow path,.p-isa,
  .p-fire-line,.p-fire-hatch,.p-dim path,.p-label{ opacity:.85 !important; }
  .step::after{ width:100% !important; }
}

/* =========================================================
   SURFACE-INSPIRED REDESIGN
   White information header + black navigation + photographic
   hero, adapted to Essential's black/yellow/white identity.
   ========================================================= */

:root{
  --paper:#FFFFFF;
  --paper-2:#F5F3ED;
  --black:#080808;
  --soft-black:#151515;
  --line:#D9D7D0;
  --shadow:0 24px 60px rgba(0,0,0,.12);
  --wrap:1320px;
  --r:8px;
}

html{ scroll-padding-top:176px; }

body{
  background:var(--paper);
  color:var(--black);
}

body::after{ opacity:.018; mix-blend-mode:multiply; }
b,strong{ color:inherit; }

h1,h2{ letter-spacing:-.025em; }
h2{ color:var(--black); }

.eyebrow{
  color:var(--black);
  font-size:.72rem;
  font-weight:700;
}
.eyebrow .dot{ background:var(--paint); color:var(--paint); }
.eyebrow--blue{ color:var(--paint); }

.btn{ border-radius:6px; text-transform:none; }
.btn--light{
  --bg:rgba(255,255,255,.09);
  --fg:var(--white);
  border-color:rgba(255,255,255,.58);
  backdrop-filter:blur(8px);
}
.btn--light:hover{ background:#fff; color:#000; box-shadow:none; }
.btn--outline{ color:var(--white); border-color:rgba(255,255,255,.42); }

/* header */
.hdr{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.hdr.is-stuck{ background:#fff; box-shadow:0 14px 34px -24px rgba(0,0,0,.55); }

.brandbar{ background:#fff; color:#000; }
.brandbar__in{
  height:112px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:36px;
}
.brandbar__service{
  display:flex;
  align-items:center;
  gap:16px;
  color:#000;
  text-decoration:none;
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.brandbar__service:hover{ color:#6E5500; transform:translateY(-1px); }
.brandbar__service:focus-visible{ border-radius:4px; }
.brandbar__service > span:last-child{ display:flex; flex-direction:column; line-height:1.08; }
.brandbar__service small,
.brandbar__phone small{
  display:block;
  font-family:var(--mono);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6D6D6D;
  margin-bottom:5px;
}
.brandbar__service b{ color:inherit; font-size:1rem; }
.brandbar__stars{ color:var(--paint); letter-spacing:.12em; font-size:.84rem; }

.brandbar .logo{ transform:none; transform-origin:center; }
.brandbar .logo__image{ height:100px; }
.brandbar .logo__mark i{ background:#111; }
.brandbar .logo__mark i:first-child{ background:var(--paint); }
.brandbar .logo__txt b{ color:#000; font-size:1.32rem; }
.brandbar .logo__txt em{ color:#6E5700; }

.brandbar__actions{ justify-self:end; display:flex; align-items:center; gap:28px; }
.estimate-link{
  color:#000;
  font-weight:800;
  font-size:.86rem;
  padding-bottom:3px;
  border-bottom:3px solid var(--paint);
}
.brandbar__phone{ text-align:right; line-height:1; }
.brandbar__phone b{ font-family:var(--display); font-weight:400; font-size:1.42rem; }

.navband{ background:#050505; color:#fff; }
.hdr__in{ height:62px; gap:28px; }
.nav{ margin:0; flex:1; justify-content:center; gap:clamp(22px,3.4vw,52px); }
.nav a{ color:#fff; font-size:.88rem; font-weight:700; padding:20px 0; }
.nav a:hover{ color:var(--paint); }
.nav a::after{ bottom:9px; }
.navband__cta{
  flex:0 0 auto;
  color:#050505;
  background:var(--paint);
  padding:10px 16px;
  border-radius:4px;
  font-size:.8rem;
  font-weight:900;
}
.navband__cta span{ margin-left:8px; }
.hdr__rule{ display:none; }
.burger{ border-color:#343434; }
.burger i{ background:#fff; }

.mobnav{
  top:174px;
  background:#101010;
  border-color:#252525;
  color:#fff;
}

/* photographic hero */
.hero{
  min-height:clamp(650px,73vh,790px);
  padding:0;
  display:flex;
  align-items:stretch;
  color:#fff;
  background-image:var(--hero-image, image-set(
    url('/assets/essential-striping-hero-2026.avif') type('image/avif'),
    url('/assets/essential-striping-hero-2026.jpg') type('image/jpeg')
  ));
  background-size:cover;
  background-position:center 52%;
  isolation:isolate;
}
.hero__shade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.69) 38%, rgba(0,0,0,.20) 72%, rgba(0,0,0,.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 40%);
}
.hero__in{
  width:100%;
  grid-template-columns:minmax(0,760px);
  align-content:center;
  gap:0;
  padding-top:clamp(64px,8vw,110px);
  padding-bottom:clamp(90px,10vw,130px);
}
.hero__copy{ max-width:740px; }
.hero__kicker{
  margin:0 0 22px;
  color:var(--paint);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.hero h1{
  color:#fff;
  font-size:clamp(4rem,8.8vw,8rem);
  line-height:.85;
  margin:0 0 28px;
  text-shadow:0 7px 30px rgba(0,0,0,.32);
}
.hero h1 .hl{ color:var(--paint); }
.hero h1 .hl::after{ display:none; }
.hero .lede{
  color:#fff;
  font-size:clamp(1.08rem,1.55vw,1.28rem);
  max-width:58ch;
  line-height:1.62;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.hero__proof{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:30px 0 22px;
}
.hero__proof span{
  position:relative;
  padding-left:20px;
  color:#fff;
  font-size:.86rem;
  font-weight:800;
}
.hero__proof span::before{
  content:"";
  position:absolute;
  left:0;
  top:.43em;
  width:9px;
  height:5px;
  border-left:2px solid var(--paint);
  border-bottom:2px solid var(--paint);
  transform:rotate(-45deg);
}
.hero__btns{ margin:0; }
.hero__caption{
  position:absolute;
  right:var(--gut);
  bottom:26px;
  max-width:320px;
  padding:11px 15px;
  color:#111;
  background:var(--paint);
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero__glow,.hero__chips,.hero__plan,.lanerule{ display:none; }

/* intro */
.intro{
  background:#fff;
  padding:clamp(72px,8vw,112px) 0;
  border-bottom:1px solid var(--line);
}
.intro__in{
  display:grid;
  grid-template-columns:.72fr 2fr .72fr;
  align-items:start;
  gap:clamp(28px,5vw,76px);
}
.intro h2{
  font-family:var(--body);
  font-size:clamp(2.2rem,4vw,4.2rem);
  font-weight:900;
  line-height:1.02;
  text-transform:none;
  margin-bottom:24px;
}
.intro p:not(.eyebrow){ color:#505050; max-width:70ch; font-size:1.08rem; }
.intro__link{
  justify-self:end;
  font-weight:900;
  padding-bottom:7px;
  border-bottom:3px solid var(--paint);
  white-space:nowrap;
}
.intro__link span{ color:#8C6B00; margin-left:8px; }

/* credential strip */
.strip{ background:#080808; border:0; }
.strip__in{ background:#252525; border-color:#252525; }
.strip__item{ background:#080808; padding-block:30px; }
.strip__item b{ color:#fff; }
.strip__item span{ color:#9E9E9E; }

/* light sections */
.sec{ background:#fff; color:#111; }
.sec__head{ max-width:900px; }
.sec__head h2{ color:#111; font-size:clamp(2.7rem,5vw,5rem); line-height:.95; }
.sec__sub{ color:#5E5E5E; }
.sec .eyebrow{ color:#111; }

.cards{ gap:24px; }
.card{
  background:#fff;
  border:1px solid #D9D9D5;
  color:#111;
  border-radius:8px;
  padding:38px 32px 34px;
  box-shadow:0 16px 38px rgba(0,0,0,.055);
}
.card::before{ background:linear-gradient(180deg,rgba(255,196,0,.18),transparent 42%); }
.card:hover{ border-color:#B5B2A9; box-shadow:var(--shadow); }
.card__bar{ height:7px; background:var(--paint); }
.card--white,.card--blue,.card--red{ --accent:var(--paint); }
.card__no{ color:#8B6A00; }
.card h3{ color:#111; font-size:1.46rem; }
.card > p,.card__list li{ color:#5B5B5B; }
.card__list{ border-color:#E4E2DC; }
.card__list li::before{ background:#111; }

.alsodo{ background:#111; border:0; border-radius:8px; }
.alsodo li{ color:#D1D1D1; border-color:#3A3A3A; }
.alsodo li:hover{ color:#fff; }

/* ADA feature stays dark but uses the brand palette */
.ada{
  color:#fff;
  background:#090909;
  border:0;
}
.ada::before{
  background:
    linear-gradient(115deg,rgba(255,196,0,.11),transparent 48%),
    repeating-linear-gradient(-45deg,transparent 0 42px,rgba(255,255,255,.022) 42px 43px);
}
.ada h2{ color:#fff; font-size:clamp(2.7rem,5vw,4.8rem); }
.ada__copy p{ color:#C4C4C4; }
.ada__kicker{ border-left-color:var(--paint); color:#fff !important; }
.btn--blue{ --bg:var(--paint); --fg:#080808; }
.ada__specs{ background:#151515; border-color:#303030; }
.ada__specs-t{ color:var(--paint); }
.ada__specs div{ border-color:#303030; }
.ada__specs dt{ color:#fff; }
.ada__specs dd{ color:#A3A3A3; }

/* process + proof */
#process{ background:var(--paper-2); }
.step{ border-color:#BDBAB1; }
.step h3{ color:#111; }
.step p{ color:#5F5F5F; }
.step__no{ color:#6E5500; }

.stats{ background:var(--paint); }
.stats::before{ opacity:.055; }

.sec--tight{ padding-top:clamp(72px,8vw,110px); }
.who{ background:#D7D4CB; border-color:#D7D4CB; }
.who__i{ background:#fff; }
.who__i:hover{ background:#F3F1EB; }
.who__i h3{ color:#111; }
.who__i p{ color:#666; }

/* service area */
.area{ background:#0B0B0B; color:#fff; border:0; }
.area .sec__head h2{ color:#fff; }
.area .eyebrow{ color:var(--paint); }
.area .sec__sub{ color:#B9B9B9; }
.area__col h3{ color:var(--paint); border-color:#333; }
.area__col li{ color:#BEBEBE; }

/* FAQ */
#faq{ background:#fff; }
.faq{ border-color:#CCCAC3; }
.q{ border-color:#CCCAC3; }
.q summary{ color:#111; font-size:1.08rem; }
.q[open] summary,.q summary:hover{ color:#6E5500; }
.q__a p{ color:#555; }
.q summary::before,.q summary::after{ background:#111; }

/* CTA and footer */
.cta{ background:#111; color:#fff; border:0; }
.cta h2{ color:#fff; font-size:clamp(3rem,6vw,5.8rem); }
.cta__sub{ color:#C8C8C8; }
.cta .eyebrow{ color:var(--paint); }

.ftr{ background:#050505; color:#fff; }
.ftr .logo__image{ height:116px; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.ftr .logo__txt b{ color:#fff; }
.ftr__brand p,.ftr__note,.ftr__base p{ color:#919191; }
.ftr__col a{ color:#C6C6C6; }
.ftr__base{ border-color:#272727; }

@media (max-width:1080px){
  .brandbar__service{ display:none; }
  .brandbar__in{ grid-template-columns:auto 1fr; }
  .brandbar .logo{ transform:none; }
  .brandbar .logo__image{ height:82px; }
  .hero__in{ grid-template-columns:minmax(0,760px); }
  .intro__in{ grid-template-columns:1fr 2.2fr; }
  .intro__link{ grid-column:2; justify-self:start; }
}

@media (max-width:860px){
  html{ scroll-padding-top:136px; }
  .brandbar__in{ height:78px; }
  .brandbar .logo__image{ height:68px; }
  .brandbar__phone small{ display:none; }
  .brandbar__phone b{ font-family:var(--body); font-weight:900; font-size:.9rem; }
  .navband .hdr__in{ height:58px; }
  .navband .burger{ margin-left:auto; }
  .mobnav{ top:136px; }
  .hero{ min-height:690px; background-position:58% center; }
  .hero__shade{ background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.50)); }
}

@media (max-width:640px){
  html{ scroll-padding-top:118px; }
  .brandbar__in{ height:70px; gap:12px; padding-inline:18px; }
  .brandbar .logo__image{ height:60px; }
  .brandbar .logo__txt b{ font-size:1.04rem; }
  .brandbar .logo__txt em{ font-size:.46rem; }
  .brandbar .logo__mark{ display:none; }
  .brandbar__actions{ gap:8px; }
  .brandbar__phone b{ font-size:.78rem; }
  .navband .hdr__in{ height:48px; }
  .burger{ width:38px; height:36px; }
  .mobnav{ top:118px; }
  .hero{ min-height:660px; background-position:64% center; }
  .hero__shade{ background:linear-gradient(90deg,rgba(0,0,0,.91),rgba(0,0,0,.56)); }
  .hero__in{ padding-top:58px; padding-bottom:86px; }
  .hero h1{ font-size:clamp(3.5rem,17vw,5rem); }
  .hero__proof{ flex-direction:column; gap:8px; }
  .hero__caption{ display:none; }
  .intro__in{ grid-template-columns:1fr; }
  .intro__link{ grid-column:auto; }
  .intro h2{ font-size:2.45rem; }
  .sec__head h2,.ada h2{ font-size:2.7rem; }
  .cards{ gap:16px; }
}

/* =========================================================
   PROJECT ALBUM + VIDEO
   ========================================================= */

.projects{
  position:relative;
  padding:clamp(84px,10vw,140px) 0;
  color:#111;
  background:var(--white);
  overflow:hidden;
}
.projects::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:clamp(130px,20vw,300px);
  height:9px;
  background:var(--paint);
}
.projects__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);
  align-items:end;
  gap:clamp(30px,7vw,100px);
  margin-bottom:clamp(34px,5vw,66px);
}
.projects .eyebrow{ color:#735A00; }
.projects h2{ color:#111; font-size:clamp(3rem,7vw,6rem); }
.projects__head > p{
  max-width:44ch;
  margin:0 0 7px;
  color:#5E6063;
  font-size:1rem;
  line-height:1.7;
}

.project-gallery{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(190px,21vw,280px);
  gap:10px;
}
.gallery-card{
  position:relative;
  grid-column:span 4;
  min-width:0;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:#111;
  border:0;
  cursor:zoom-in;
  text-align:left;
}
.gallery-card--feature{ grid-column:span 7; grid-row:span 2; }
.gallery-card--feature + .gallery-card{ grid-column:span 5; }
.gallery-card--feature + .gallery-card + .gallery-card{ grid-column:span 5; }
.gallery-card--solo{ grid-column:1 / -1; grid-row:span 2; }
.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease),filter .4s;
}
.gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  border:0 solid var(--paint);
  pointer-events:none;
  transition:border-width .25s var(--ease);
}
.gallery-card:hover img{ transform:scale(1.045); filter:saturate(1.07) contrast(1.03); }
.gallery-card:hover::after{ border-width:6px; }
.gallery-card__overlay{
  position:absolute;
  inset:auto 0 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:4px 20px;
  padding:clamp(18px,3vw,34px);
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
}
.gallery-card__overlay small{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:.61rem;
  font-style:normal;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paint);
}
.gallery-card__overlay strong{
  font-size:clamp(.92rem,1.5vw,1.28rem);
  line-height:1.15;
}
.gallery-card__overlay i{ font-size:1.5rem; font-style:normal; line-height:1; }
.project-gallery__empty{
  min-height:320px;
  display:grid;
  place-content:center;
  text-align:center;
  background:#E8E7E2;
  border:1px dashed #A8A49A;
}
.project-gallery__empty span{ font:700 .63rem var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.project-gallery__empty strong{ margin-top:8px; color:#111; font-size:1.3rem; }

.project-video{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  min-height:520px;
  margin-top:clamp(48px,7vw,88px);
  color:#fff;
  background:#0A0B0D;
  box-shadow:0 34px 90px rgba(0,0,0,.2);
}
.project-video__copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,6vw,76px);
  overflow:hidden;
}
.project-video__copy::after{
  content:"";
  position:absolute;
  right:-72px;
  bottom:34px;
  width:220px;
  height:9px;
  background:var(--paint);
  transform:rotate(-48deg);
  opacity:.45;
}
.project-video__number{
  position:absolute;
  top:24px;
  right:24px;
  color:#5A6068;
  font:700 .6rem var(--mono);
  letter-spacing:.16em;
}
.project-video .eyebrow{ color:var(--paint); }
.project-video h2{ color:#fff; font-size:clamp(3rem,5.4vw,5.2rem); }
.project-video__copy > p:last-child{ max-width:38ch; margin:24px 0 0; color:#AEB2B8; line-height:1.7; }
.project-video__media{
  position:relative;
  min-height:420px;
  overflow:hidden;
  background:#15181C;
}
.project-video__media iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
.project-video__placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  padding:30px;
  text-align:center;
  background:
    linear-gradient(116deg,transparent 49%,rgba(255,196,0,.52) 49.2%,rgba(255,196,0,.52) 50.4%,transparent 50.6%),
    radial-gradient(circle at 50% 45%,#292D33,#111316 70%);
}
.project-video__play{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  padding-left:5px;
  color:#111;
  background:var(--paint);
  border-radius:50%;
  font-size:1.45rem;
  box-shadow:0 0 0 14px rgba(255,196,0,.12);
}
.project-video__placeholder strong{ font-size:1.15rem; }
.project-video__placeholder small{ color:#9EA3AA; }

.gallery-lightbox{
  width:min(1120px,calc(100% - 36px));
  max-height:calc(100vh - 36px);
  padding:0;
  overflow:visible;
  color:#fff;
  background:#08090A;
  border:1px solid #34383E;
  box-shadow:0 35px 120px rgba(0,0,0,.75);
}
.gallery-lightbox::backdrop{ background:rgba(0,0,0,.9); backdrop-filter:blur(8px); }
.gallery-lightbox figure{ margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; max-height:calc(100vh - 38px); }
.gallery-lightbox img{ width:100%; max-height:calc(100vh - 170px); object-fit:contain; background:#050505; }
.gallery-lightbox figcaption{ padding:18px 22px 21px; border-top:4px solid var(--paint); }
.gallery-lightbox figcaption span{ display:block; color:var(--paint); font:700 .58rem var(--mono); letter-spacing:.15em; }
.gallery-lightbox figcaption strong{ display:block; margin-top:4px; font-size:1.05rem; }
.gallery-lightbox figcaption p{ margin:4px 0 0; color:#AEB2B8; font-size:.82rem; }
.gallery-lightbox__close,.gallery-lightbox__nav{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  color:#111;
  background:var(--paint);
  border:0;
  border-radius:50%;
  cursor:pointer;
}
.gallery-lightbox__close{ top:-15px; right:-15px; width:40px; height:40px; font-size:1.5rem; }
.gallery-lightbox__nav{ top:50%; width:46px; height:46px; font-size:1.25rem; transform:translateY(-50%); }
.gallery-lightbox__nav--prev{ left:16px; }
.gallery-lightbox__nav--next{ right:16px; }

@media (max-width:860px){
  .projects__head,.project-video{ grid-template-columns:1fr; }
  .project-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:250px; }
  .gallery-card,.gallery-card--feature,.gallery-card--feature + .gallery-card,.gallery-card--feature + .gallery-card + .gallery-card{ grid-column:span 1; grid-row:span 1; }
  .gallery-card--feature,.gallery-card--solo{ grid-column:1 / -1; grid-row:span 2; }
  .project-video{ min-height:0; }
  .project-video__media{ min-height:390px; }
}

@media (max-width:640px){
  .projects{ padding:74px 0; }
  .projects__head{ margin-bottom:30px; }
  .project-gallery{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .gallery-card,.gallery-card--feature,.gallery-card--solo,.gallery-card--feature + .gallery-card,.gallery-card--feature + .gallery-card + .gallery-card{ grid-column:1; grid-row:span 1; }
  .gallery-card:first-child{ min-height:340px; }
  .project-video{ margin-top:42px; }
  .project-video__copy{ padding:44px 24px; }
  .project-video__media,.project-video__media iframe{ min-height:240px; }
  .gallery-lightbox__nav{ top:auto; bottom:92px; }
  .gallery-lightbox__nav--prev{ left:12px; }
  .gallery-lightbox__nav--next{ right:12px; }
}

/* =========================================================
   DYNAMIC ESTIMATE FORM
   ========================================================= */

.hero{
  min-height:clamp(760px,86vh,920px);
}

.hero__in{
  grid-template-columns:minmax(0,1.15fr) minmax(350px,.72fr);
  align-items:center;
  gap:clamp(34px,5vw,76px);
}

.hero h1{ font-size:clamp(4rem,7vw,6.9rem); }

.estimate-card{
  width:100%;
  max-width:470px;
  justify-self:end;
  padding:24px;
  color:#111;
  background:rgba(255,255,255,.97);
  border-top:7px solid var(--paint);
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
}

.estimate-card__head{ margin-bottom:16px; }
.estimate-card__tag{
  display:block;
  margin-bottom:7px;
  color:#735A00;
  font-family:var(--mono);
  font-size:.59rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.estimate-card h2{
  color:#111;
  font-family:var(--body);
  font-size:1.62rem;
  font-weight:900;
  line-height:1.08;
  text-transform:none;
  letter-spacing:-.025em;
}
.estimate-card__head p{
  margin:6px 0 0;
  color:#666;
  font-size:.82rem;
  line-height:1.45;
}

.estimate-form{ display:grid; gap:11px; }
.estimate-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field{ display:grid; gap:4px; }
.field > span{
  color:#363636;
  font-size:.68rem;
  font-weight:800;
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:42px;
  margin:0;
  padding:10px 11px;
  color:#111;
  background:#F7F6F2;
  border:1px solid #D6D3CA;
  border-radius:4px;
  font:600 .78rem/1.3 var(--body);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ min-height:58px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#999; font-weight:400; }
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;
  border-color:#A77F00;
  box-shadow:0 0 0 3px rgba(255,196,0,.22);
}
.field [aria-invalid="true"]{ border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.13); }

.photo-field{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  color:#111;
  background:#FFF9E5;
  border:1px dashed #B58B00;
  border-radius:5px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.photo-field:hover{ background:#FFF4C9; border-color:#7D6000; }
.photo-field__icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#111;
  background:var(--paint);
  border-radius:50%;
  font-size:1.2rem;
  line-height:1;
}
.photo-field > span:nth-child(2){ display:flex; flex-direction:column; line-height:1.25; }
.photo-field b{ font-size:.75rem; }
.photo-field small{ color:#756E5C; font-size:.63rem; }
.photo-field input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.estimate-photo-preview{
  display:grid;
  grid-template-columns:54px 1fr;
  align-items:center;
  gap:10px;
  padding:7px;
  background:#F1F0EC;
  border-radius:5px;
}
.estimate-photo-preview[hidden]{ display:none; }
.estimate-photo-preview img{ width:54px; height:42px; object-fit:cover; border-radius:3px; }
.estimate-photo-preview button{
  justify-self:start;
  padding:0;
  color:#7A2500;
  background:none;
  border:0;
  font:800 .68rem var(--body);
  cursor:pointer;
}
.website-field{ position:absolute; left:-9999px; }

.estimate-form__submit{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  color:#090909;
  background:var(--paint);
  border:0;
  border-radius:5px;
  font:900 .82rem var(--body);
  cursor:pointer;
  transition:transform .2s,background .2s;
}
.estimate-form__submit:hover{ background:#FFD13D; transform:translateY(-1px); }
.estimate-form__submit:disabled{ opacity:.62; cursor:wait; transform:none; }
.estimate-form__note{ margin:0; color:#777; font-size:.58rem; line-height:1.4; }
.estimate-form__status{ min-height:0; margin:0; font-size:.72rem; font-weight:800; line-height:1.4; }
.estimate-form__status.is-error{ color:#A52A20; }
.estimate-form__status.is-success{ color:#176A38; }

.estimate-success{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(22px,4vw,34px);
  color:#111;
  background:
    linear-gradient(135deg,rgba(255,196,0,.18),transparent 54%),
    #FFFDF5;
  border:2px solid var(--paint);
  border-radius:5px;
  box-shadow:inset 0 0 0 7px rgba(255,196,0,.09);
}
.estimate-success__icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  color:#111;
  background:var(--paint);
  border-radius:50%;
  font-size:2rem;
  font-weight:900;
  box-shadow:0 0 0 10px rgba(255,196,0,.17);
}
.estimate-success__label{
  color:#715700;
  font:700 .62rem var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.estimate-success h2{ margin:10px 0 13px; color:#111; font-size:clamp(2rem,4vw,2.8rem); line-height:1; text-transform:uppercase; }
.estimate-success p{ margin:0; color:#555; font-size:.9rem; line-height:1.65; }
.estimate-success__call{ margin-top:24px; color:#111; font-size:.78rem; font-weight:900; text-decoration:underline; text-decoration-color:var(--paint); text-decoration-thickness:3px; text-underline-offset:4px; }
.estimate-success button{
  min-height:44px;
  margin-top:24px;
  padding:10px 14px;
  color:#fff;
  background:#111;
  border:0;
  border-radius:4px;
  font:800 .75rem var(--body);
  cursor:pointer;
}

@media (max-width:1080px){
  .hero{ min-height:auto; }
  .hero__in{
    grid-template-columns:1fr;
    align-items:start;
    padding-top:clamp(68px,8vw,100px);
    padding-bottom:clamp(86px,10vw,120px);
  }
  .hero__copy{ max-width:760px; }
  .estimate-card{ max-width:620px; justify-self:start; }
}

@media (max-width:640px){
  .hero__in{ padding-top:52px; padding-bottom:82px; gap:36px; }
  .estimate-card{ padding:20px 17px; }
  .estimate-form__row{ grid-template-columns:1fr; }
  .estimate-card h2{ font-size:1.48rem; }
}

/* Mobile usability pass: compact hierarchy, reliable touch targets and safe-area spacing. */
@media (max-width:640px){
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  .brandbar__phone{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  .burger{ width:44px; height:44px; }
  .mobnav{
    max-height:calc(100dvh - 118px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .mobnav a{ min-height:48px; display:flex; align-items:center; padding:10px 0; }
  .mobnav__call{ justify-content:center; }
  .stickycall{
    min-height:58px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    font-size:.9rem;
    line-height:1.2;
    transition:transform .2s var(--ease), visibility .2s;
  }
  .stickycall svg{ flex:0 0 auto; }
  .stickycall span{ white-space:nowrap; }
  .menu-is-open .stickycall{
    transform:translateY(110%);
    visibility:hidden;
    pointer-events:none;
  }
  .estimate-has-focus .stickycall{
    transform:translateY(110%);
    visibility:hidden;
    pointer-events:none;
  }
  .hero__in{ padding-top:40px; padding-bottom:72px; gap:28px; }
  .hero .lede{ font-size:1rem; line-height:1.58; }
  .hero__proof{ margin:20px 0; }
  .hero__btns .btn[href^="tel:"]{ display:none; }
  .estimate-card{ width:100%; scroll-margin-top:132px; }
  .field input,.field select,.field textarea{
    min-height:48px;
    font-size:16px;
  }
  .field textarea{ min-height:92px; }
  .estimate-form__submit{ min-height:50px; }
  .ftr__col a{ min-height:44px; display:flex; align-items:center; padding:8px 0; }
}

@supports selector(body:has(*)){
  @media (max-width:640px){
    body:has(.estimate-form input:focus) .stickycall,
    body:has(.estimate-form select:focus) .stickycall,
    body:has(.estimate-form textarea:focus) .stickycall{
      transform:translateY(110%);
      visibility:hidden;
      pointer-events:none;
    }
  }
}

@media (max-width:360px){
  .brandbar__in{ padding-inline:16px; }
  .brandbar .logo__image{ height:56px; }
  .brandbar__phone b{ font-size:.76rem; }
  .hero h1{ font-size:clamp(2.75rem,14.5vw,3.3rem); line-height:.9; letter-spacing:-.025em; }
  .hero__kicker{ font-size:.65rem; letter-spacing:.16em; }
  .hero__in{ padding-top:34px; }
  .estimate-card{ padding:20px 16px; }
}