@font-face{font-family:'Archivo';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Archivo-400-italic.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Archivo-600.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/BigShouldersDisplay-500.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/BigShouldersDisplay-700.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/BigShouldersDisplay-800.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/BigShouldersDisplay-900.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpaceMono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/SpaceMono-700.woff2') format('woff2');}
/* Spagnola Land Solutions
   chassis  : the-datum  — a survey datum rail down the page, blocks hang off it
   signature: the-cut    — procedural terrain section resolving to a flat grade
   palette  : sampled from the logo (#B62025 crimson, #58585A graphite)
   type     : Big Shoulders Display / Archivo / Space Mono
   NOTE: base rules are declared ABOVE their media queries throughout. */

:root{
  --ink:#0E1013; --surface:#14171C; --raise:#1C2027;
  --crimson:#B62025; --crimson-lift:#D82E33;
  --graphite:#58585A; --clay:#B0714A;
  --bone:#F1EDE7; --muted:#8A8F98;
  --rail:56px; --pad:clamp(18px,4vw,64px);
  --max:1320px;
  /* Fonts are self-hosted (see fetch_fonts.py). Fallbacks stay CONDENSED so a
     failed face never doubles the headline's width — that reflow is what
     exposed the Google Fonts dependency in the first place. */
  --disp:"Big Shoulders Display","Oswald","Arial Narrow","Haettenschweiler",
         "Franklin Gothic Condensed",sans-serif-condensed,sans-serif;
  --body:"Archivo","Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,"Consolas",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font:400 clamp(15px,1.05vw,17px)/1.62 var(--body);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px;top:0;background:var(--crimson);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--crimson-lift);outline-offset:3px}

/* ---------------------------------------------------------------- chrome */
.chrome{position:sticky;top:0;z-index:100;background:rgba(14,16,19,.92);backdrop-filter:blur(10px);border-bottom:1px solid #262b33}
.demo{display:flex;gap:10px;align-items:center;justify-content:center;background:var(--crimson);color:#fff;padding:7px 14px}
.demo p{margin:0;font:500 11.5px/1.4 var(--body);letter-spacing:.02em;text-align:center}
.demo__dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.nav{max-width:var(--max);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:20px}
.nav__brand{flex:none;display:block}
.nav__brand img{width:clamp(140px,15vw,190px);height:auto}
.nav__links{display:flex;gap:clamp(12px,1.7vw,28px);margin-left:auto}
.nav__links a{
  font:700 12.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);padding:10px 0;position:relative;white-space:nowrap;
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--crimson-lift);transition:right .28s ease}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.nav__cta{
  flex:none;display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
  background:var(--crimson);color:#fff;padding:11px 16px;
  font:700 14px/1 var(--mono);letter-spacing:.01em;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .2s ease;
}
.nav__cta:hover{background:var(--crimson-lift)}
.nav__cta-l{font-family:var(--body);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.nav__toggle{display:none}

/* ------------------------------------------------------------ datum rail */
.rail{position:relative;padding-left:var(--rail)}
.rail::before{
  content:"";position:absolute;left:calc(var(--rail) / 2);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,#2E343D 8%,#2E343D 92%,transparent);
}
.rail__tick{
  position:absolute;left:0;width:var(--rail);text-align:center;
  font:400 10px/1 var(--mono);color:var(--graphite);letter-spacing:.04em;
}
.rail__tick::before{content:"";position:absolute;left:calc(50% - 5px);top:-11px;width:11px;height:1px;background:var(--crimson)}

/* --------------------------------------------------------------- section */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,132px) var(--pad)}
.sec--tight{padding-top:clamp(40px,5vw,70px)}
.sec__head{margin-bottom:clamp(28px,4vw,52px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--crimson-lift);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--crimson)}
.sec h2{font-size:clamp(34px,5.4vw,68px)}
.sec__lede{max-width:56ch;color:#C6C9CE;font-size:clamp(16px,1.25vw,19px);margin-top:18px}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;border-bottom:1px solid #262b33;overflow:hidden}
/* --cutH reserves the section band at the foot of the hero. Both hero columns
   are padded clear of it, so the datum never crosses the photo or the CTAs. */
.hero{--cutH:clamp(112px,13vw,168px)}
.hero__grid{
  max-width:var(--max);margin:0 auto;
  padding:clamp(34px,5vw,64px) var(--pad) var(--cutH);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(22px,3.4vw,54px);align-items:center;min-height:min(78vh,720px);
}
.hero__copy{position:relative;z-index:3;padding-bottom:clamp(30px,4vw,56px)}
.hero h1{font-size:clamp(46px,7.6vw,104px);font-weight:900;letter-spacing:-.02em}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){color:var(--crimson-lift)}
.hero__sub{max-width:46ch;margin-top:22px;color:#C6C9CE;font-size:clamp(15px,1.2vw,18.5px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:700 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  padding:16px 24px;transition:transform .18s ease,background .2s ease,border-color .2s ease;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.btn--p{background:var(--crimson);color:#fff}
.btn--p:hover{background:var(--crimson-lift);transform:translateY(-2px)}
.btn--s{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px #3A4049}
.btn--s:hover{box-shadow:inset 0 0 0 1.5px var(--bone);transform:translateY(-2px)}

.hero__panel{position:relative;align-self:stretch;min-height:clamp(280px,42vw,560px)}
.hero__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,16,19,.55),transparent 42%);pointer-events:none}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__stamp{
  position:absolute;left:0;bottom:16px;z-index:4;background:var(--ink);
  padding:9px 14px;font:400 10.5px/1.5 var(--mono);color:var(--muted);letter-spacing:.05em;
  border-left:2px solid var(--crimson);
}
/* the-cut — a full-bleed section band at the foot of the hero. It occupies its
   own reserved strip (--cutH) so it never overlaps content. */
.cut{position:absolute;left:0;right:0;bottom:0;height:var(--cutH);z-index:1;pointer-events:none;
     border-top:1px solid #22272F;background:linear-gradient(180deg,transparent,rgba(28,32,39,.5))}
.cut canvas{width:100%;height:100%;display:block}

/* --------------------------------------------------------------- figures */
.figs{background:var(--surface);border-block:1px solid #262b33}
.figs__in{max-width:var(--max);margin:0 auto;padding:clamp(26px,3.4vw,46px) var(--pad)}
.figs__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,28px)}
.figs__head .eyebrow{margin:0}
.figs__note{margin:0;font-size:13.5px;color:var(--muted)}
/* FIVE figures, five columns — an auto-fit grid orphaned the 6th onto its own
   row with a dead gap beside it. Fixed count, fixed columns, no orphan. */
.figs ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2.4vw,34px);grid-template-columns:repeat(5,minmax(0,1fr))}
.fig{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:2px solid #2E343D}
.fig__n{font:700 clamp(30px,3.6vw,50px)/1 var(--disp);color:var(--bone);font-variant-numeric:tabular-nums}
.fig__u{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crimson-lift)}
.fig__l{margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}

/* -------------------------------------------------------------- services */
.svcs{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.svc{background:var(--surface);border:1px solid #262b33;transition:border-color .25s ease,transform .25s ease}
.svc:hover{border-color:var(--crimson);transform:translateY(-3px)}
.svc__link{text-decoration:none;display:block;height:100%}
.svc__img{aspect-ratio:4/3;overflow:hidden;background:var(--raise)}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc__img img{transform:scale(1.045)}
.svc__body{padding:22px 22px 26px}
.svc__h{font-size:clamp(24px,2.4vw,32px)}
.svc__p{margin:10px 0 14px;font-size:14.5px;color:#C0C4CA}
.svc__list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svc__list li{font:400 11px/1 var(--mono);letter-spacing:.03em;color:var(--muted);background:var(--raise);padding:6px 9px}
.svc__go{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--crimson-lift)}
.svc__go i{font-style:normal;transition:transform .25s ease;display:inline-block}
.svc:hover .svc__go i{transform:translateX(5px)}

/* --------------------------------------------------- before / after pair */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.ba__side{margin:0;position:relative}
.ba__img{aspect-ratio:3/4;overflow:hidden;background:var(--raise)}
.ba__img img{width:100%;height:100%;object-fit:cover}
.ba__side figcaption{position:absolute;left:0;top:0}
.ba__tag{
  display:inline-block;background:var(--graphite);color:#fff;padding:8px 14px;
  font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.ba__tag--on{background:var(--crimson)}
.ba__note{margin-top:22px;max-width:62ch;color:#C6C9CE}
.ba__where{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* -------------------------------------------------------------- projects */
.projs{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.proj{margin:0;position:relative;background:var(--surface);border:1px solid #22272F;overflow:hidden}
.proj__img{overflow:hidden;background:var(--raise)}
.proj__img img{width:100%;height:auto;display:block;transition:transform .55s ease}
.proj:hover .proj__img img{transform:scale(1.04)}
.proj__cap{padding:14px 16px 18px}
.proj__cap b{display:block;font:700 14.5px/1.25 var(--body)}
.proj__cap span{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.5}

/* --------------------------------------------------------------- reviews */
.revwrap{background:var(--surface);border-block:1px solid #262b33}
.rev{margin:0;background:var(--raise);border:1px solid #262b33;padding:24px;break-inside:avoid}
.rev p{font-size:14.8px;line-height:1.6;color:#D6D9DD;margin:0 0 16px}
.rev p::before{content:"\201C"}
.rev p::after{content:"\201D"}
.rev cite{font-style:normal;display:flex;flex-direction:column;gap:2px}
.rev cite b{font:700 13px/1.2 var(--body);letter-spacing:.02em}
.rev cite span{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-lift)}
.rev--big{background:transparent;border:0;border-left:3px solid var(--crimson);padding:6px 0 6px 26px;margin-bottom:clamp(24px,3vw,40px)}
.rev--big p{font-size:clamp(17px,1.7vw,23px);line-height:1.5;color:var(--bone)}
.revgrid{columns:3 300px;column-gap:clamp(12px,1.5vw,18px)}
.revgrid .rev{margin-bottom:clamp(12px,1.5vw,18px);display:inline-block;width:100%}
.stars{display:flex;gap:4px;align-items:center;margin-bottom:12px}
.stars i{width:13px;height:13px;background:var(--crimson-lift);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);font-style:normal}
.stars em{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-left:7px}

/* ----------------------------------------------------------------- about */
.about{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.about__img{position:relative}
.about__img img{width:100%;height:auto}
.about__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #2E343D;pointer-events:none}
.about__body p{color:#C6C9CE;font-size:clamp(15px,1.2vw,17.5px)}
.about__pull{margin-top:26px;padding-left:20px;border-left:3px solid var(--crimson)}
.about__pull b{display:block;font:700 clamp(18px,2vw,26px)/1.3 var(--disp);text-transform:uppercase}
.about__pull span{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ----------------------------------------------------------------- areas */
.areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.areas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.areas li{
  font:400 12.5px/1 var(--mono);color:var(--bone);background:var(--raise);
  border:1px solid #2A3038;padding:10px 13px;letter-spacing:.02em;
}
.areas__note{color:var(--muted);font-size:14.5px;max-width:52ch}

/* ------------------------------------------------------------------- faq */
.faq{border-bottom:1px solid #262b33;padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font:700 clamp(16px,1.5vw,20px)/1.35 var(--body);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 26px/1 var(--mono);color:var(--crimson-lift)}
.faq[open] summary::after{content:"\2212"}
.faq p{margin:0 0 20px;color:var(--muted);max-width:66ch}

/* ------------------------------------------------------------------- CTA */
.cta{background:var(--crimson);color:#fff;text-align:center}
.cta h2{font-size:clamp(32px,5vw,62px)}
.cta p{max-width:48ch;margin:16px auto 28px;color:rgba(255,255,255,.9)}
.cta .btn--p{background:var(--ink);color:#fff}
.cta .btn--p:hover{background:#000}
.cta .btn--s{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
.cta .btn--s:hover{box-shadow:inset 0 0 0 1.5px #fff}
.cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--surface);border-top:1px solid #262b33}
.foot__in{max-width:var(--max);margin:0 auto;padding:clamp(44px,6vw,76px) var(--pad) 34px;display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.foot__brand img{width:210px;height:auto}
.foot__blurb{margin-top:16px;color:var(--muted);font-size:14px;max-width:40ch}
.foot__col h2{font-size:15px;letter-spacing:.12em;color:var(--muted);margin-bottom:14px;font-family:var(--mono);font-weight:700;text-transform:uppercase}
.foot__col a{display:block;text-decoration:none;color:#C6C9CE;padding:5px 0;font-size:14.5px}
.foot__col a:hover{color:var(--crimson-lift)}
.foot__col p{color:var(--muted);font-size:14px;margin-top:8px}
.foot__big{font:700 clamp(20px,2.2vw,28px)/1 var(--mono)!important;color:var(--bone)!important;padding-bottom:10px!important}
.foot__bar{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 92px;border-top:1px solid #262b33;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot__bar p{margin:0;font-size:12.5px;color:var(--graphite)}
.foot__bar a{color:var(--graphite)}

/* ------------------------------------------------------- mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--crimson);color:#fff;text-decoration:none;
  padding:11px 16px;text-align:center;box-shadow:0 -6px 20px rgba(0,0,0,.4);
}
.callbar strong{display:block;font:700 17px/1.2 var(--mono)}
.callbar span{display:block;font-size:11.5px;opacity:.9}

/* ------------------------------------------------------- FILM HERO -------
   Full-bleed cycling loops cut from the client's own brand video. Copy rides a
   hard-edged plate over the footage — TASTE.md: a subject that fills the frame
   needs a PANEL or a PLATE, never copy stacked above it. */
.hero--film{--cutH:clamp(74px,8vw,110px);min-height:min(88vh,780px);display:flex;align-items:stretch;isolation:isolate}
.hl{position:absolute;inset:0;overflow:hidden;background:var(--ink);z-index:0}
.hl__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;will-change:opacity;
}
.hl__v.is-on{opacity:1}
.hl__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.78) 34%,rgba(10,11,13,.18) 62%,rgba(10,11,13,.42) 100%),
    linear-gradient(0deg,rgba(10,11,13,.88) 0%,transparent 42%);
}
.hero__in{
  position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%;
  padding:clamp(48px,7vw,96px) var(--pad) calc(var(--cutH) + clamp(30px,4vw,56px));
  display:flex;align-items:center;
}
/* plate is wide enough to hold "YOU BUILD ON." on ONE line — at 640px the
   headline broke to four lines and lost the three-beat rhythm */
.hero__plate{max-width:min(62ch,780px)}
.hero--film h1{font-size:clamp(44px,6.6vw,94px);font-weight:900;letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero--film h1 span{display:block}
.hero--film h1 span:nth-child(2){color:var(--crimson-lift)}
.hero--film .hero__sub{max-width:44ch;color:#DCDFE3;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero--film .eyebrow{color:#F0B9BB}

/* loop rail — labels what is on screen; clickable but never REQUIRED */
.hl__rail{
  position:absolute;right:var(--pad);bottom:calc(var(--cutH) + 16px);z-index:3;
  display:flex;gap:7px;
}
.hl__t{
  appearance:none;background:none;border:0;padding:7px 3px;cursor:pointer;
}
.hl__t span{display:block;width:26px;height:3px;background:rgba(241,237,231,.34);transition:background .3s ease,width .3s ease}
.hl__t:hover span{background:rgba(241,237,231,.7)}
.hl__t.is-on span{background:var(--crimson-lift);width:40px}

/* ----------------------------------------- interior page lead (services) */
.lead{border-bottom:1px solid #262b33;background:linear-gradient(180deg,var(--surface),var(--ink))}
.lead__grid{
  max-width:var(--max);margin:0 auto;padding:clamp(38px,5.5vw,74px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,3.6vw,56px);align-items:center;
}
.lead__grid--solo{grid-template-columns:minmax(0,1fr);max-width:min(var(--max),960px)}
.lead h1{font-size:clamp(40px,6.4vw,88px);font-weight:900;letter-spacing:-.02em}
.lead h1 span{display:block}
.lead h1 span:nth-child(2){color:var(--crimson-lift)}
.lead__panel{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--raise)}
.lead__panel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #2E343D}
.lead__img{width:100%;height:100%;object-fit:cover}
.lead__chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.lead__chips li{font:400 11.5px/1 var(--mono);color:var(--bone);background:var(--raise);border:1px solid #2A3038;padding:9px 12px}
.lead__two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(26px,4vw,60px);align-items:start}
.lead__prose p{color:#C6C9CE;font-size:clamp(15px,1.2vw,17.5px)}
.lead__jobs{background:var(--surface);border:1px solid #262b33;padding:clamp(20px,2.6vw,30px)}
.lead__jobsh{font-size:clamp(19px,2vw,25px);margin-bottom:16px}
.lead__jobs ul{list-style:none;margin:0;padding:0}
.lead__jobs li{
  position:relative;padding:11px 0 11px 22px;border-bottom:1px solid #22272F;
  font-size:14.2px;line-height:1.5;color:#C6C9CE;
}
.lead__jobs li:last-child{border-bottom:0}
.lead__jobs li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:2px;background:var(--crimson)}
.lead__jobsnote{margin:16px 0 0;font:400 12px/1.5 var(--mono);color:var(--graphite)}

/* --------------------------------------------------- reveals are OPT-IN.
   Content is visible by default; only a JS-capable browser opts into hiding.
   Anything that cannot run JS still sees everything.                      */
html.js-reveal .reveal{opacity:0;transform:translateY(16px)}
html.js-reveal .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

/* =========================== media queries (all bases declared above) === */
@media (max-width:1080px){
  .about{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .lead__two{grid-template-columns:1fr}
  .figs ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .figs ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero--film{min-height:min(84vh,660px)}
  .hero--film h1{font-size:clamp(40px,9.6vw,64px)}
  .hl__scrim{background:
    linear-gradient(0deg,rgba(10,11,13,.95) 0%,rgba(10,11,13,.6) 46%,rgba(10,11,13,.25) 100%)}
  .hero__in{align-items:flex-end}
  .lead__grid{grid-template-columns:1fr}
  .lead__panel{aspect-ratio:16/10}
  .hero__grid{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .hero{--cutH:clamp(84px,17vw,120px)}
  .hero__panel{min-height:clamp(240px,58vw,420px);margin-inline:calc(var(--pad) * -1)}
  .hero__copy{padding-bottom:26px}
  .revgrid{columns:2 280px}
}
@media (max-width:760px){
  :root{--rail:32px}
  /* buy vertical space so the photograph clears the fold — a text-only first
     screen on mobile is a failure this repo has already shipped once */
  .hero__grid{padding-top:20px}
  .hero h1{font-size:clamp(38px,10.4vw,52px)}
  .hero__sub{margin-top:14px;font-size:15px}
  .hero__cta{margin-top:18px;gap:9px}
  .hero__cta .btn{padding:13px 18px;font-size:13px;flex:1 1 auto;justify-content:center}
  .nav{flex-wrap:wrap;gap:12px}
  /* Fit logo + phone + toggle on ONE row. At 390px the full-size trio measures
     ~400px and wraps, costing ~70px of chrome above the fold. Shrink all three
     rather than stacking them. ONE margin-left:auto, on the phone. */
  .nav{padding-block:9px}
  .nav__brand img{width:clamp(104px,30vw,124px)}
  /* the three bars must STACK. Laid out in a row (flex default) with the old
     negative-margin hack they collapse into a single dash. */
  .nav__toggle{
    display:flex;order:3;margin-left:9px;flex-direction:column;justify-content:center;
    align-items:center;gap:4px;background:none;
    border:1px solid #3A4049;color:var(--bone);padding:11px 10px;cursor:pointer;
  }
  /* label stays for screen readers — display:none would strip the button's
     accessible name and leave an unlabelled control */
  .nav__toggle em{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .nav__toggle span{display:block;width:18px;height:2px;background:var(--bone);
    transition:transform .25s ease,opacity .2s ease}
  .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* the eyebrow is one long line; at 360 it wraps and looks like a mistake */
  .hero--film .eyebrow{font-size:9.5px;letter-spacing:.11em}
  .nav__toggle em{font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;font-style:normal}
  .nav__links{
    order:4;flex-basis:100%;flex-direction:column;gap:0;margin-left:0;
    display:none;border-top:1px solid #262b33;padding-top:6px;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:13px 0;border-bottom:1px solid #1E232A;font-size:14px}
  .nav__cta{order:2;margin-left:auto;padding:9px 11px;font-size:12.5px}
  .nav__cta-l{display:none}
  .demo p{font-size:10.5px}
  .ba{grid-template-columns:1fr}
  .revgrid{columns:1}
  .foot__in{grid-template-columns:1fr}
  .callbar{display:block}
  .rail{padding-left:0}
  .rail::before,.rail__tick{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  /* a reveal must still RESOLVE — never leave content stuck at opacity 0 */
  html.js-reveal .reveal{opacity:1;transform:none}
}
@media print{.chrome,.callbar,.cut{display:none}body{background:#fff;color:#000}}