/* ============================================================
   GILLESPIE CHIMNEY SWEEPS
   Editorial / letterpress system — Fraunces + Archivo + Space Mono
   ============================================================ */
:root{
  --soot:#0e0d0a;
  --ink:#14120e;
  --ink-2:#1c1914;
  --cream:#f4eee0;
  --paper:#f7f2e6;
  --parchment:#ece2cc;
  --gold:#c9a227;
  --gold-deep:#8f6f14;
  --gold-soft:#e6cd7c;
  --ember:#d1732a;
  --ash:#a89e86;
  --text:#221e16;
  --muted:#6b6350;
  --muted-dark:#a99f86;

  --display:'Fraunces', Georgia, serif;
  --sans:'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  --wonk:"SOFT" 60, "WONK" 1;
  --rule:1px solid rgba(34,30,22,.16);
  --rule-dark:1px solid rgba(230,205,124,.20);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--text);background:var(--soot);
  line-height:1.66;font-size:17px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--soot)}

.container{width:min(1280px,90%);margin-inline:auto}
.wide{width:min(1500px,94%);margin-inline:auto}

/* ---------- display type ---------- */
h1,h2,h3,.display{
  font-family:var(--display);
  font-variation-settings:var(--wonk);
  font-weight:600;line-height:1.06;letter-spacing:-.015em;
}
.d-xl{font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.02}
.d-lg{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.06}
.d-md{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1}
.d-sm{font-size:1.3rem;line-height:1.15}
em,.it{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
.gold{color:var(--gold)}
.ghost{
  -webkit-text-stroke:1px rgba(201,162,39,.55);color:transparent;
}
.on-light .ghost{-webkit-text-stroke-color:rgba(143,111,20,.45)}

/* ---------- mono labels ---------- */
.tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);display:inline-block;
}
.on-dark .tag,.tag.light{color:var(--gold-soft)}
.tag-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted);}
.on-dark .tag-n{color:var(--muted-dark)}

/* vertical rail label */
.rail{
  position:absolute;left:-2.5rem;top:0;writing-mode:vertical-rl;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);opacity:.75;
}
.on-dark .rail{color:var(--muted-dark)}

p.body{font-size:1rem;color:#463f30;max-width:64ch}
.on-dark p.body{color:#c2b89f}
.lede{font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.6;color:#4a4335;font-weight:400}
.on-dark .lede{color:#cdc3a9}

/* ============================================================
   GRAIN + PROGRESS + CURSOR
   ============================================================ */
/* Film grain now lives in each section's own background — see the
   FILM GRAIN block near the end of this file. It used to be a fixed,
   animated, blended overlay, which cost a document-sized layer. */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-soft));z-index:95;transition:width .1s linear}
#ember-cursor{
  position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle,rgba(209,115,42,.16),rgba(201,162,39,.07) 42%,transparent 68%);
}
/* Smoke drifts OVER the page, not behind it. Sections sit at z-index 5, so
   anything below that is invisible past the hero. 55 keeps it under the
   call button (70), nav (80) and grain (90). */
#smoke-canvas{position:fixed;inset:0;z-index:55;pointer-events:none}

/* ============================================================
   NAV — masthead
   ============================================================ */
/* NOTE: the blur lives on ::before, never on .nav itself — backdrop-filter on
   .nav would make it the containing block for the fixed mobile menu inside it,
   so the menu would only translate by the nav's height instead of the viewport. */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;padding:1.5rem 0;transition:padding .4s ease}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,13,10,.86);backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .4s}
.nav::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(230,205,124,.18);opacity:0;transition:opacity .4s}
.nav.scrolled{padding:.7rem 0}
.nav.scrolled::before,.nav.solid::before{opacity:1}
.nav.scrolled::after{opacity:1}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img.mark{height:40px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand img.word{height:22px;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#d8cfb8;text-decoration:none;position:relative;padding:.3rem 0;transition:color .3s
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .4s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover{color:var(--gold-soft)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--gold-soft)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;z-index:88}
.nav-toggle span{display:block;width:26px;height:1.5px;background:var(--cream);margin:6px 0;transition:.35s}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- buttons: letterpress stamp ---------- */
.stamp{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:.95rem 1.7rem;border:1.5px solid var(--soot);background:var(--gold);color:var(--soot);
  box-shadow:4px 4px 0 var(--soot);transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;
  border-radius:0;
}
.stamp:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--soot)}
.stamp.ghost-btn{background:transparent;color:var(--cream);border-color:rgba(244,238,224,.5);box-shadow:4px 4px 0 rgba(244,238,224,.22)}
.stamp.ghost-btn:hover{box-shadow:0 0 0 rgba(244,238,224,.22);border-color:var(--gold);color:var(--gold-soft)}
.stamp.dark{background:var(--soot);color:var(--gold-soft);border-color:var(--soot);box-shadow:4px 4px 0 rgba(143,111,20,.5)}
.stamp.dark:hover{box-shadow:0 0 0 rgba(143,111,20,.5)}
.stamp.sm{padding:.6rem 1.1rem;font-size:.66rem;box-shadow:3px 3px 0 var(--soot)}
.stamp.sm:hover{transform:translate(3px,3px)}
.textlink{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.25rem;color:var(--gold-deep);
  transition:opacity .3s
}
.on-dark .textlink{color:var(--gold-soft)}
.textlink:hover{opacity:.6}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--soot);padding:clamp(7rem,13vh,9rem) 0 clamp(3rem,8vh,5.5rem)}
.hero-media{position:absolute;inset:-50px;z-index:0;will-change:transform}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(.82) contrast(1.06)}
.hero-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(10,9,7,.90) 0%,rgba(10,9,7,.62) 42%,rgba(10,9,7,.30) 70%,rgba(10,9,7,.55) 100%),
  linear-gradient(180deg,rgba(10,9,7,.72) 0%,transparent 26%,transparent 52%,rgba(10,9,7,.92) 100%)}
.hero-inner{position:relative;z-index:3;width:100%}
.hero-top{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(1.2rem,3vh,2.2rem);padding-right:clamp(0px,15vw,15rem)}
.hero-top .line{flex:1;height:1px;background:rgba(230,205,124,.35)}
.hero-top .tag{color:var(--gold-soft)}
.hero h1{color:#faf6ea;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero h1 .l2{display:block;padding-left:clamp(0px,7vw,7rem)}
.hero h1 .l3{display:block;padding-left:clamp(0px,3vw,3rem)}
.hero-sub{
  margin-top:clamp(1.4rem,3vh,2.2rem);display:flex;gap:clamp(1.5rem,4vw,4rem);align-items:flex-end;
  flex-wrap:wrap;justify-content:space-between;
}
.hero-sub p{max-width:36ch;color:#ddd3ba;font-size:1.02rem}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
/* masthead rule of facts */
.hero-facts{
  margin-top:clamp(1.6rem,4vh,2.8rem);border-top:1px solid rgba(230,205,124,.25);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero-facts div{padding:1rem 1.2rem 0 0;border-right:1px solid rgba(230,205,124,.14)}
.hero-facts div:last-child{border-right:none}
.hero-facts b{display:block;font-family:var(--display);font-variation-settings:var(--wonk);font-size:1.6rem;color:var(--gold-soft);line-height:1}
.hero-facts span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#a49a82}

/* orbital badge */
.orbit{position:absolute;right:clamp(1.5rem,4.5vw,5rem);top:clamp(6.5rem,15vh,9.5rem);z-index:4;width:clamp(150px,16vw,244px);height:clamp(150px,16vw,244px)}
.orbit .ring{position:absolute;inset:0;animation:spin 26s linear infinite}
.orbit .ring text{font-family:var(--mono);font-size:8.2px;letter-spacing:3.25px;fill:var(--gold-soft);text-transform:uppercase}
.orbit .core{position:absolute;inset:20%;border-radius:50%;background:rgba(14,13,10,.55);backdrop-filter:blur(4px);border:1px solid rgba(230,205,124,.45);display:flex;align-items:center;justify-content:center}
.orbit .core img{width:74%;height:auto}
@keyframes spin{to{transform:rotate(360deg)}}

.scroll-line{position:absolute;left:50%;bottom:0;z-index:4;width:1px;height:64px;background:linear-gradient(180deg,transparent,var(--gold-soft));overflow:hidden}
.scroll-line::after{content:"";position:absolute;inset:0;background:var(--soot);animation:wipe 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes wipe{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;background:var(--soot);
  border-top:1px solid rgba(230,205,124,.22);border-bottom:1px solid rgba(230,205,124,.22);
  padding:.9rem 0;z-index:5;
}
.marquee.light{background:var(--gold);border-color:var(--soot)}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee span{
  font-family:var(--display);font-variation-settings:var(--wonk);font-style:italic;
  font-size:clamp(1.1rem,2vw,1.7rem);color:var(--cream);padding:0 1.5rem;white-space:nowrap;display:flex;align-items:center;gap:1.5rem
}
.marquee.light span{color:var(--soot)}
.marquee span::after{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:inline-block}
.marquee.light span::after{background:var(--soot)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ============================================================
   SECTIONS
   ============================================================ */
section{position:relative}
.sect{padding:clamp(3.5rem,7vw,6rem) 0;position:relative;z-index:5}
.sect-sm{padding:clamp(2.5rem,4.5vw,3.8rem) 0;position:relative;z-index:5}
.on-light{background:var(--paper);color:var(--text)}
.on-light.alt{background:var(--parchment)}
.on-dark{background:var(--ink);color:var(--cream)}
.on-dark.soot{background:var(--soot)}

/* editorial section head: label left, headline right — never centered */
.head{display:block;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.head .head-l{display:flex;gap:1rem;align-items:baseline;padding-top:.5rem;border-top:2px solid currentColor;color:var(--gold-deep);max-width:300px;margin-bottom:1.3rem}
.on-dark .head .head-l{color:var(--gold-soft)}
.head .head-l .n,.head .head-l .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.head .head-l .t{opacity:.72}
.head > div{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.2rem,3.5vw,3.2rem);align-items:end}
.head > div > h2{grid-column:1;margin:0}
.head > div > h2:only-child{grid-column:1/-1;max-width:22ch}
.head-sub{grid-column:2;max-width:46ch;margin-bottom:.15rem}
@media(max-width:840px){
  .head > div{grid-template-columns:1fr;align-items:start;gap:.9rem}
  .head > div > h2,.head-sub{grid-column:1}
}

/* word reveal */
/* padding + negative margin gives descenders room inside the clip box */
.rv-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.rv-word i{display:inline-block;font-style:inherit;transform:translateY(118%);transition:transform .85s cubic-bezier(.16,.9,.28,1)}
.rv.visible .rv-word i{transform:translateY(0)}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.9,.28,1)}
.fade.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv-word i{transform:none}.fade{opacity:1;transform:none}
  #grain,.orbit .ring,.marquee-track,.scroll-line::after{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   FEATURE: portrait + dossier
   ============================================================ */
.dossier{display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:center 72%;filter:grayscale(.28) contrast(1.05)}
.portrait::after{content:"";position:absolute;inset:0;border:1px solid rgba(143,111,20,.55);transform:translate(14px,14px);pointer-events:none}
.portrait figcaption{
  position:absolute;left:0;bottom:-1px;background:var(--soot);color:var(--cream);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.6rem .9rem;max-width:88%
}
.portrait .stamp-seal{
  position:absolute;right:-18px;top:-18px;width:96px;height:96px;border-radius:50%;
  border:1.5px solid var(--gold-deep);background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transform:rotate(-9deg);
}
.portrait .stamp-seal b{font-family:var(--display);font-variation-settings:var(--wonk);font-size:1.5rem;line-height:1;color:var(--gold-deep)}
.portrait .stamp-seal span{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* photo crop variants */
.portrait.tall img{aspect-ratio:3/4;height:auto;object-position:center 22%}
.portrait.p45 img{aspect-ratio:4/5;height:auto;object-position:center 20%}
.portrait.sq img{aspect-ratio:1/1;height:auto;object-position:center 34%}
.portrait.wide img{aspect-ratio:4/3;height:auto;object-position:center 55%}
.portrait.mute img{filter:grayscale(.72) contrast(1.08) saturate(.9)}

/* overlapping dossier pair */
.portrait-pair{position:relative}
.portrait-pair .inset{position:absolute;right:-44px;bottom:-40px;width:47%;box-shadow:0 20px 44px rgba(14,13,10,.3)}
.portrait-pair .inset img{border:7px solid var(--paper)}
.portrait-pair .inset::after{inset:7px;transform:none;border-color:rgba(143,111,20,.5)}
.portrait-pair .inset figcaption{left:7px;bottom:7px;font-size:.52rem;padding:.4rem .6rem;max-width:calc(100% - 14px)}

/* about: before the sweep */
.story-photos{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.story-photos p{margin-bottom:1.1rem;color:#463f30;max-width:56ch}
.story-photos .sq{width:min(74%,420px);margin-top:clamp(1.4rem,3vw,2.2rem)}

/* side-portrait layouts */
.creds-photo{display:grid;grid-template-columns:.72fr 2fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.note-photo{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}

.dossier-copy h2{margin-bottom:1.1rem}
.dossier-copy p{margin-bottom:1.1rem;color:#463f30;max-width:60ch}
.dossier-copy p strong{color:var(--text)}
/* spec table instead of stat cards */
.spec{margin-top:2rem;border-top:var(--rule)}
.spec div{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:var(--rule)}
.spec .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.spec .dot{border-bottom:1px dotted rgba(34,30,22,.25);transform:translateY(-4px)}
.spec .v{font-family:var(--display);font-variation-settings:var(--wonk);font-size:1.25rem;color:var(--gold-deep)}
.sigline{margin-top:1.8rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.sigline .nm{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-size:1.5rem;color:var(--text)}
.sigline .rl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   INDEX LIST (services) — replaces card grid
   ============================================================ */
.index-wrap{position:relative;margin-top:clamp(1.5rem,3vw,2.4rem)}
.index-list{position:relative;z-index:1;border-top:var(--rule-dark)}
.ix{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.1rem,1.9vw,1.5rem) clamp(.5rem,1.5vw,1.2rem);
  border-bottom:var(--rule-dark);text-decoration:none;position:relative;
  transition:padding-left .45s cubic-bezier(.16,.9,.28,1),color .35s
}
.ix::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,162,39,.12),transparent 62%);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,.9,.28,1)}
.ix:hover::before{transform:scaleX(1)}
.ix:hover{padding-left:clamp(1.2rem,3vw,2.6rem)}
.ix .n{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--gold);opacity:.75;min-width:2.2rem}
.ix h3{position:relative;font-size:clamp(1.2rem,1.9vw,1.6rem);color:var(--cream);transition:color .35s}
.ix:hover h3{color:var(--gold-soft)}
.ix .d{position:relative;font-size:.95rem;color:var(--muted-dark);max-width:40ch;display:none}
.ix .p{position:relative;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;color:var(--gold-soft);white-space:nowrap}
.ix .ar{position:relative;width:34px;height:34px;border:1px solid rgba(230,205,124,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-soft);transition:background .35s,color .35s,transform .45s}
.ix:hover .ar{background:var(--gold);color:var(--soot);transform:rotate(-45deg)}
@media(min-width:1000px){.ix .d{display:block}
  .ix{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto auto}}

/* ============================================================
   LEDGER (why sweeping) — numbered editorial rows
   ============================================================ */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem);margin-top:clamp(1.2rem,2.5vw,2rem)}
.lg{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.5rem 0;border-top:var(--rule-dark);align-items:start}
.lg .n{font-family:var(--mono);font-size:.7rem;color:var(--gold);opacity:.7;padding-top:.35rem}
.lg h3{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.01em;color:var(--cream);margin-bottom:.35rem;line-height:1.35}
.lg p{font-size:.92rem;color:var(--muted-dark);max-width:40ch}

/* pull statement — a single well-set line, no ghost numerals */
.pull{border-top:2px solid rgba(230,205,124,.55);padding-top:1.6rem;max-width:74ch}
.pull p{font-family:var(--display);font-variation-settings:var(--wonk);font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.34;color:var(--cream);letter-spacing:-.01em}
.pull p b{font-weight:700;color:var(--gold-soft)}
.on-light .pull{border-top-color:rgba(143,111,20,.55)}
.on-light .pull p{color:var(--text)}
.on-light .pull p b{color:var(--gold-deep)}

/* ============================================================
   MAP
   ============================================================ */
.map-block{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2rem,5vw,3.5rem)}
.map-frame{position:relative;background:#f3ead4;padding:12px;border:1px solid rgba(143,111,20,.35)}
.map-frame::before{content:"";position:absolute;inset:12px;border:1px solid rgba(143,111,20,.4);pointer-events:none}
.map-frame svg{display:block;width:100%;height:auto}
.map-town{font-family:var(--sans);font-size:15px;font-weight:600;fill:#3d3623;letter-spacing:.01em}
.map-town-sub{font-family:var(--sans);font-size:12.5px;font-weight:500;fill:#8a7f63;font-style:italic}
.map-hq-label{font-family:var(--display);font-size:23px;font-weight:700;fill:#171307;letter-spacing:.03em}
@keyframes ringPulse{0%{transform:scale(.6);opacity:.75}100%{transform:scale(1.55);opacity:0}}
.hq-ring{transform-origin:center;transform-box:fill-box;animation:ringPulse 3.2s ease-out infinite}
.hq-ring.d2{animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){.hq-ring{animation:none;opacity:.3}}
/* town list as index, not chips */
.towns{margin-top:1.6rem;border-top:var(--rule)}
.towns a,.towns span{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.68rem 0;border-bottom:var(--rule);text-decoration:none;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#4b4433;transition:padding-left .35s,color .35s}
.towns a:hover{padding-left:.6rem;color:var(--gold-deep)}
.towns .mi{color:var(--muted);font-size:.68rem}
.towns .hq{color:var(--gold-deep);font-weight:700}

/* ============================================================
   FAQ — hairline, no boxes
   ============================================================ */
.faq-list{border-top:var(--rule);margin-top:clamp(1.5rem,4vw,2.5rem)}
.faq{border-bottom:var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:baseline;
  padding:1.15rem 0;font-family:var(--display);font-variation-settings:var(--wonk);
  font-size:clamp(1.08rem,1.6vw,1.32rem);color:var(--text);transition:color .3s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-deep)}
.faq summary .qn{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;color:var(--gold-deep);opacity:.8}
.faq summary .pm{width:22px;height:22px;position:relative;flex:none}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--gold-deep);transition:transform .4s cubic-bezier(.16,.9,.28,1)}
.faq summary .pm::before{left:0;top:10.5px;width:22px;height:1.5px}
.faq summary .pm::after{left:10.5px;top:0;width:1.5px;height:22px}
.faq[open] summary .pm::after{transform:rotate(90deg)}
.faq-body{padding:0 0 1.4rem calc(1.4rem + 2.2rem);color:var(--muted);max-width:70ch;font-size:.98rem}
.faq-body a{color:var(--gold-deep);font-weight:600}

/* ============================================================
   SERVICE DETAIL (services page)
   ============================================================ */
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center;padding:clamp(2.2rem,4.5vw,3.8rem) 0;border-bottom:var(--rule)}
.svc-block:last-of-type{border-bottom:none}
.svc-block .art{background:var(--soot);position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(143,111,20,.4)}
.svc-block .art svg.scene{width:100%;height:100%;position:relative;z-index:1}
.svc-block .art .art-ring{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 45%,rgba(201,162,39,.18),transparent 58%)}
.svc-block .art .idx{position:absolute;left:1rem;top:.4rem;z-index:2;font-family:var(--display);font-variation-settings:var(--wonk);font-size:5rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(230,205,124,.4)}
.svc-block.flip .art{order:2}
.svc-block h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:.45rem 0 .9rem}
.svc-block p{color:#463f30;margin-bottom:1.1rem;max-width:52ch}
.svc-block ul{list-style:none;margin:1.2rem 0 1.6rem;border-top:var(--rule)}
.svc-block li{padding:.72rem 0 .72rem 2rem;border-bottom:var(--rule);position:relative;font-size:.95rem;color:#463f30}
.svc-block li::before{content:"—";position:absolute;left:0;color:var(--gold-deep);font-family:var(--mono)}
.pricetag{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soot);background:var(--gold);padding:.42rem .9rem;border:1.5px solid var(--soot);box-shadow:3px 3px 0 var(--soot)}

/* ============================================================
   PRICES
   ============================================================ */
.tariff{margin-top:clamp(2rem,5vw,3.5rem);border-top:2px solid var(--soot)}
.tariff-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.2rem,2.4vw,1.9rem) 0;border-bottom:var(--rule);position:relative;transition:padding-left .4s
}
.tariff-row:hover{padding-left:1rem}
.tariff-row .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--gold-deep);min-width:2rem}
.tariff-row h3{font-size:clamp(1.15rem,1.8vw,1.5rem);margin-bottom:.35rem}
.tariff-row p{font-size:.92rem;color:var(--muted);max-width:52ch}
.tariff-row .amt{font-family:var(--display);font-variation-settings:var(--wonk);font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--gold-deep);white-space:nowrap;line-height:1}
.tariff-row .amt small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.headline-price{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:end;border-bottom:2px solid var(--soot);padding-bottom:1.6rem}
.headline-price .fig{font-family:var(--display);font-variation-settings:var(--wonk);font-size:clamp(3.6rem,8vw,6.4rem);line-height:.82;color:var(--soot);letter-spacing:-.03em}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,4vw,3rem);margin-top:2rem}
.incl div{padding:.72rem 0;border-bottom:var(--rule);font-size:.93rem;color:#463f30;display:flex;gap:.8rem}
.incl div::before{content:"✓";color:var(--gold-deep);font-weight:700}
.notes{margin-top:2.5rem;border-left:2px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;max-width:64ch}
.notes p{font-size:.9rem;color:var(--muted);margin-bottom:.6rem}
.notes p:last-child{margin:0}

/* ============================================================
   PROCESS — vertical timeline
   ============================================================ */
.steps{margin-top:clamp(2rem,5vw,3.5rem);border-top:var(--rule)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1rem,4vw,3rem);padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:var(--rule);align-items:baseline;transition:background .4s}
.step:hover{background:rgba(201,162,39,.06)}
.step .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--gold-deep)}
.step h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.step p{font-size:.95rem;color:var(--muted)}

/* quote */
.bigquote{max-width:22ch;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.24;color:var(--text)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:end}
.quote-grid .rest{font-size:1.05rem;color:#463f30;max-width:46ch}
.quote-grid .who{margin-top:1.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}

/* credential slabs */
.creds{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-dark)}
.creds.four{grid-template-columns:repeat(4,1fr)}
.creds div{padding:2rem 1.6rem 2rem 0;border-right:var(--rule-dark)}
.creds div:last-child{border-right:none}
.creds h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--cream);margin-bottom:.5rem}
.creds p{font-size:.9rem;color:var(--muted-dark)}
.creds .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--gold);display:block;margin-bottom:1rem}

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero{position:relative;padding:clamp(9rem,18vh,13rem) 0 clamp(3rem,7vw,5rem);background:var(--soot);overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;opacity:.26;
  background:url('hero-poster.jpg') center 30%/cover no-repeat;filter:grayscale(.5) contrast(1.1)
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,10,.75),rgba(14,13,10,.35) 45%,var(--soot))}
.page-hero .container,.page-hero .wide{position:relative;z-index:2}
.page-hero h1{color:#faf6ea;margin:.8rem 0}
.crumbs{display:flex;gap:.6rem;list-style:none;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#8f8871}
.crumbs a{color:#bdb49a;text-decoration:none}
.crumbs a:hover{color:var(--gold-soft)}
.crumbs li+li::before{content:"/";margin-right:.6rem;opacity:.5}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,5rem);margin-top:clamp(2rem,5vw,3.5rem);align-items:start}
.c-list{border-top:var(--rule-dark)}
.c-list a,.c-list div.row{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.3rem 0;border-bottom:var(--rule-dark);text-decoration:none;align-items:baseline;transition:padding-left .4s}
.c-list a:hover{padding-left:.7rem}
.c-list .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.c-list .v{font-family:var(--display);font-variation-settings:var(--wonk);font-size:1.15rem;color:var(--cream);word-break:break-word;line-height:1.2}
.c-list a:hover .v{color:var(--gold-soft)}
.form-panel{background:var(--paper);color:var(--text);padding:clamp(1.8rem,3.4vw,3.4rem);box-shadow:0 40px 90px rgba(0,0,0,.5);border:1px solid rgba(143,111,20,.35);position:relative}
.form-panel h3{color:var(--text);font-size:1.35rem}
.form-panel::before{content:"";position:absolute;inset:9px;border:1px solid rgba(143,111,20,.22);pointer-events:none}
.form-panel h3{font-size:1.7rem;margin-bottom:.4rem}
.form-panel .fsub{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.fg{margin-bottom:1.6rem;position:relative}
label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
input,select,textarea{
  width:100%;padding:.55rem 0;border:none;border-bottom:1px solid rgba(34,30,22,.3);
  background:transparent;font-family:var(--sans);font-size:1rem;color:var(--text);border-radius:0;
  transition:border-color .35s
}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--gold-deep)}
select{cursor:pointer}
textarea{resize:vertical;min-height:90px}
.f-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
.fnote{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fnote a{color:var(--gold-deep);font-weight:700}
.fstatus{margin-top:1.2rem;padding:.9rem 1.1rem;font-size:.92rem;display:none;border-left:3px solid}
.fstatus.ok{display:block;background:rgba(120,150,90,.12);border-color:#6f8c4a;color:#3d5c2a}
.fstatus.err{display:block;background:rgba(190,90,50,.1);border-color:#b8632f;color:#7c3a1d}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{background:var(--gold);color:var(--soot);padding:clamp(3.5rem,8vw,6rem) 0;position:relative;z-index:5;overflow:hidden}
.cta-in{display:grid;grid-template-columns:1.4fr auto;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--soot)}
.cta p{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-top:1rem;opacity:.72}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--soot);color:var(--muted-dark);padding:clamp(3rem,7vw,5rem) 0 2rem;position:relative;z-index:5;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;border-bottom:var(--rule-dark)}
.foot-top img{height:44px;width:auto;margin-bottom:1.4rem}
.foot-top p{font-size:.9rem;max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.2rem;font-weight:400}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:.6rem}
.foot-col a{font-size:.92rem;text-decoration:none;color:#cfc6ab;transition:color .3s}
.foot-col a:hover{color:var(--gold-soft)}
.foot-word{
  font-family:var(--display);font-variation-settings:var(--wonk);font-weight:700;
  font-size:clamp(2.2rem,9vw,7.5rem);line-height:.9;color:transparent;
  -webkit-text-stroke:1px rgba(230,205,124,.18);margin:2.5rem 0 1.5rem;text-align:center;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden
}
.foot-bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7d755f}
.foot-bot a{color:#9a9075;text-decoration:none}

/* mobile call */
.call-fab{display:none;position:fixed;right:1rem;bottom:1rem;z-index:70;width:54px;height:54px;background:var(--gold);border:1.5px solid var(--soot);box-shadow:3px 3px 0 var(--soot);align-items:center;justify-content:center}
.call-fab svg{width:22px;height:22px;color:var(--soot)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .ledger{grid-template-columns:1fr}
  .creds,.creds.four{grid-template-columns:1fr}
  .creds div{border-right:none;border-bottom:var(--rule-dark);padding-right:0}
  .creds div:last-child{border-bottom:none}
}
@media(max-width:900px){
  body{font-size:16px}
  .dossier,.map-block,.contact-grid,.svc-block,.quote-grid,.cta-in,.foot-top,
  .story-photos,.creds-photo,.note-photo{grid-template-columns:1fr}
  .portrait-pair .inset{position:relative;right:auto;bottom:auto;width:min(68%,340px);margin:1.7rem 0 0 auto;box-shadow:none}
  .story-photos .sq{width:min(68%,340px);margin-left:auto}
  .note-photo .portrait,.creds-photo .portrait{width:min(60%,300px)}
  .svc-block.flip .art{order:0}
  .hero-facts{grid-template-columns:1fr 1fr}
  .hero-facts div:nth-child(2){border-right:none}
  .head{grid-template-columns:1fr}
  .head .head-l{display:flex;gap:1rem;align-items:baseline}
  .rail{display:none}
  .orbit{display:none}
  .nav-links{
    position:fixed;inset:0;background:var(--soot);flex-direction:column;justify-content:center;
    gap:2rem;transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:85
  }
  .nav-links.open{transform:none}
  .nav-links a{font-family:var(--display);font-variation-settings:var(--wonk);font-size:2rem;letter-spacing:-.02em;text-transform:none;color:var(--cream)}
  .nav-toggle{display:block}
  .nav .stamp{display:none}
  .call-fab{display:flex}
  .step{grid-template-columns:auto 1fr}
  .portrait .stamp-seal{width:76px;height:76px;right:-8px;top:-8px}
  #ember-cursor{display:none}
}
@media(max-width:620px){
  .f2,.incl{grid-template-columns:1fr}
  .ix{grid-template-columns:auto 1fr auto;gap:.9rem}
  .ix .ar{display:none}
  .hero h1 .l2,.hero h1 .l3{padding-left:0}
  .headline-price{grid-template-columns:1fr}
  .tariff-row{grid-template-columns:auto 1fr}
  .tariff-row .amt{grid-column:2;margin-top:.6rem}
}

@media(max-width:900px){
  .hero-top{padding-right:0;flex-wrap:wrap;gap:.5rem 1rem}
  .hero-top .line{display:none}
}


/* ============================================================
   Short-viewport tuning: laptops (~700–860px tall) get a smaller
   hero so the headline never crowds the masthead.
   ============================================================ */
@media (min-width:900px) and (max-height:900px){
  .hero .d-xl{font-size:clamp(2.2rem,4vw,3.4rem)}
  .hero-sub{margin-top:clamp(1rem,2vh,1.6rem)}
  .hero-sub p{font-size:.95rem;max-width:32ch}
  .hero-facts{margin-top:clamp(1rem,2.4vh,1.8rem)}
  .hero-facts div{padding-top:.7rem}
  .hero-facts b{font-size:1.3rem}
  .hero-top{margin-bottom:clamp(.7rem,1.6vh,1.4rem)}
  .orbit{width:clamp(140px,12vw,180px);height:clamp(140px,12vw,180px);top:clamp(5.5rem,12vh,7.5rem)}
}
@media (min-width:900px) and (max-height:720px){
  .hero .d-xl{font-size:clamp(2rem,3.4vw,2.9rem)}
  .hero-facts{display:none}
  .scroll-line{display:none}
}


/* ============================================================
   SMOKE — real chimney-smoke plumes.
   assets/smoke-1..3.webp are procedurally generated wisp textures
   (elongated filaments, rising column that bends and dissipates).
   They're used as CSS masks so one texture can be tinted light on
   dark sections and dark on cream ones.

   In-document, not a fixed overlay: fixed layers render only once
   in a full-page screenshot and scroll independently of content.
   They also render for reduced-motion users — the media query only
   stops the drift, it doesn't remove the smoke.

   >>> TO DIAL THE SMOKE UP OR DOWN, CHANGE --smoke BELOW. <<<
       1 = as delivered, 0.5 = half strength, 0 = off.
   ============================================================ */
:root{--smoke:1}
.smokeplume{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--smoke);contain:paint}
.smokeplume i{
  position:absolute;display:block;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transform:scaleX(var(--flip,1));
  animation-name:none;                 /* switched on per section — see below */
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
/* PERF: only sections currently on (or near) the screen animate their smoke.
   An off-screen composited animation still costs the compositor a commit
   every frame, and this page has eight smoke-bearing sections. site.js adds
   .plume-live via an IntersectionObserver with a 40% margin, so the drift is
   already running well before a section scrolls into view. */
.plume-live .smokeplume i{animation-name:plume}
/* tint per section type */
.on-light .smokeplume i{background:rgb(92,80,58)}
.on-light.alt .smokeplume i{background:rgb(84,72,50)}
.on-dark .smokeplume i,.page-hero .smokeplume i,footer .smokeplume i{background:rgb(230,220,199)}
.cta .smokeplume i{background:rgb(78,60,16)}

/* Rises, leans — then settles back. Long cycle so it lingers.
   PERF: the scale range used to be .86 → 1.16. Chrome rasterises a masked
   layer at the largest scale in the animation and re-rasterises as it grows,
   so a wide scale range on a ~1300px masked element is expensive. The drift
   distance now does the work and the scale barely moves. */
@keyframes plume{
  0%   {transform:translate3d(0,14%,0)    scale(.86) rotate(-2deg)}
  30%  {transform:translate3d(5%,-1%,0)   scale(1.00) rotate(1.5deg)}
  60%  {transform:translate3d(-4%,-13%,0) scale(1.16) rotate(-1.5deg)}
  100% {transform:translate3d(0,14%,0)    scale(.86) rotate(-2deg)}
}
/* content must sit above its section's smoke */
.sect > .container,.sect > .wide,.sect-sm > .container,.sect-sm > .wide,
.cta > .container,footer > .container,.page-hero > .wide,.page-hero > .container{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
  .smokeplume i,.plume-live .smokeplume i{animation-name:none;transform:scaleX(var(--flip,1)) scale(1.04)}
}

/* ============================================================
   FILM GRAIN — baked into each section's own paint.

   PERF, and please read before "simplifying" this back:
   the grain used to be a single fixed, animated, mix-blend-mode:overlay
   <div> covering the page. A blended FIXED layer forces the browser to keep
   a document-sized backdrop layer — 1512x8082 (~12 megapixels) on this
   site — and to re-blend the viewport on every scroll frame. That was a
   large part of the desktop scroll jank.

   background-blend-mode only blends an element's OWN background layers
   together, so the grain is rasterised once with the section and costs
   nothing at all while scrolling. No extra layer, no per-frame blend.

   >>> TO DIAL THE GRAIN, EDIT THE THREE slope= VALUES IN --grain-tex. <<<
       slope='.25' = as delivered. Lower = subtler, 0 = perfectly flat.
       Keep intercept = (1 - slope) / 2 so the noise stays centred on mid
       grey — that is what makes 'overlay' tint-neutral. And keep
       color-interpolation-filters='sRGB': without it feTurbulence works in
       linear light, the noise centres on ~0.74 instead of 0.5, and every
       section visibly lightens.
   ============================================================ */
:root{
  --grain-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.25' intercept='0.375'/%3E%3CfeFuncG type='linear' slope='0.25' intercept='0.375'/%3E%3CfeFuncB type='linear' slope='0.25' intercept='0.375'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size:220px 220px;
}
.sect.on-light,.sect.on-dark,.sect-sm.on-light,.sect-sm.on-dark,
.on-dark.soot,.cta,footer,.hero,.page-hero{
  background-image:var(--grain-tex);
  background-repeat:repeat;
  background-size:var(--grain-size);
  background-blend-mode:overlay;
  opacity:1;
}
/* the hero and interior page headers sit over media, so their grain rides
   on the existing shade layers rather than on a flat colour */
.hero-shade{
  background-image:var(--grain-tex),
    linear-gradient(100deg,rgba(10,9,7,.90) 0%,rgba(10,9,7,.62) 42%,rgba(10,9,7,.30) 70%,rgba(10,9,7,.55) 100%),
    linear-gradient(180deg,rgba(10,9,7,.72) 0%,transparent 26%,transparent 52%,rgba(10,9,7,.92) 100%);
  background-size:var(--grain-size),auto,auto;
  background-blend-mode:overlay,normal,normal;
}
.page-hero::after{
  background-image:var(--grain-tex),
    linear-gradient(180deg,rgba(14,13,10,.75),rgba(14,13,10,.35) 45%,var(--soot));
  background-size:var(--grain-size),auto;
  background-blend-mode:overlay,normal;
}
@media(prefers-reduced-motion:no-preference){}