/* Groundwork Concrete & Flatwork — round 3, "the bid packet, photographed"
   ────────────────────────────────────────────────────────────────────────────
   IDENTITY BEFORE LAYOUT (references/identity-first.md).

   The identity is built out of eight public-domain photographs of concrete
   flatwork being done — a chute unloading, a bull float, a rebar mat over
   packed base, a power trowel at night, a joint saw, a broom finish. Every
   ground on this page is one of those frames or a colour sampled out of them.
   Credits sit in the footer; the images are archival, not this company's jobs.

   PALETTE — sampled with img/palette.py (output kept in img/palette-output.txt).
   Weighted across all eight frames the photographs answer:
     #0f0c0c  6.2%   warm near-black          (night pour, the chute's shadow)
     #97938b  5.5%   wet-slab gray            (the largest single mid-tone)
     #a09c97  4.9%   cured concrete gray
     #807e75  4.4%   damp gray
     #e4e3e2  4.5%   dry slab / paper white
     #cbc8b1  3.9%   dust on cream
     #373629  5.1%   ground and form lumber
     #a0b2d1 (screed-street, 14%)  cold morning sky
   The photographs and the company's own artifacts agree — this trade is warm
   neutrals — so the founder's four artifact colours keep their rank (the shop
   wall mistint, the van's black vinyl, the bid paper, the marking crew's
   yellow) and the sampled values fill in underneath them as the photographic
   greys the site did not previously own.

   ACCENTS — exactly two, deliberately (identity-first sec.2/sec.4):
     1. --yellow  #F5C400  the founder's safety yellow. Still the star.
     2. --sky     #A6B7D4  sampled from the Alaska sky in the screeding frame;
                           spent only on archival tags and photo captions, so
                           it never competes with the yellow for the eye.

   TYPE — no serif is added. identity-first sec.5 asks for one face that evokes
   the subject; here the subject already issued its own two faces (the van's
   condensed gothic, the bid sheet's office sans) and the BRIEF's artifacts
   outrank a formula. Nothing on this page fights the brand, so nothing is
   killed.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --ink:#1A1B1C;          /* van vinyl */
  --ink-soft:#55524A;     /* faded typewriter ribbon, AA on paper */
  --paper:#F3F0E9;        /* the bid sheet */
  --slab:#DDD8CD;         /* the office wall mistint */
  --rule:#C7C1B4;         /* ruled line */
  --yellow:#F5C400;       /* the marking crew's paint */
  --paper-ink:#EDEAE2;    /* ink on dark */
  --dark-soft:#B9B5AC;    /* secondary on dark, AA */
  /* sampled out of the photographs */
  --pour:#0F0C0C;         /* warm near-black, the deepest ground in the set */
  --wet:#97938B;          /* wet-slab gray */
  --sky:#A6B7D4;          /* accent 2: the cold morning in the screeding frame */
  --display:'Oswald', 'Arial Narrow', sans-serif;
  --body:'Public Sans', Arial, sans-serif;
  /* vertical rhythm (spacing.md, local-trade genre, dense spec-sheet pole):
     tight 96px = 0.8x base, clustered on trust content;
     base 120px walking beat (dense end of the 100-202 trade range — this page is a data sheet);
     grand 240px = 2.0x, spent twice: before the bid module and before the call ask. */
  --gap-tight:6rem;
  --gap-base:7.5rem;
  --gap-grand:15rem;
  /* heading-to-subtext distance; buttons sit at 2x it (identity-first sec.7) */
  --hgap:1.25rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
[id]{scroll-margin-top:5.5rem}

body{
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
img,svg{max-width:100%;height:auto}
img{display:block}
a{color:inherit}

.wrap{max-width:1220px;margin:0 auto;padding:0 1.25rem}

/* ── skip link ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper-ink);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sec-dark :focus-visible,.on-photo :focus-visible{outline-color:var(--yellow)}

/* ── TEXTURE, sec.4: noise over the darks, ruled paper on the cream ──
   Noise is here because it lifts apparent contrast on a photograph, not for
   decoration. Two surfaces total, which is visual-interest.md sec.3's ceiling. */
.noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity:.30;mix-blend-mode:overlay;
}
.noise-strong::before{opacity:.55}
/* the cream section gets ruled paper instead of grain */
.graph{
  background-color:var(--paper);
  background-image:
    linear-gradient(to right, rgba(85,82,74,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(85,82,74,.085) 1px, transparent 1px),
    linear-gradient(to right, rgba(85,82,74,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(85,82,74,.16) 1px, transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}

/* ── photographic grounds ── */
.hero,.on-photo{position:relative;isolation:isolate;overflow:hidden;background-color:var(--pour);color:var(--paper-ink);
  /* secondary type sits on a photograph, so it runs brighter than on flat dark */
  --dark-soft:#D9D5CC}
.on-photo>.bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.on-photo>.scrim{position:absolute;inset:0;z-index:-1}
.on-photo .wrap{position:relative;z-index:1}
.arch{
  font-family:var(--body);font-weight:700;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sky);
}
figcaption .arch{display:block;margin-top:.3rem}

/* ── for-sale banner ── */
.forsale{background:var(--ink);color:var(--paper-ink);font-size:.8125rem}
.forsale-in{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:center;padding:.5rem 1.25rem}
.forsale a{color:var(--yellow)}

/* ── header ── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.head-in{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.25rem}
.mark{text-decoration:none;display:inline-block}
.mark-main{
  font-family:var(--display);font-weight:600;font-size:1.375rem;
  letter-spacing:.06em;text-transform:uppercase;display:block;line-height:1.1;
}
.mark-bar{display:block;height:5px;background:var(--yellow);margin-top:2px}
.mark-sub{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.nav{display:flex;gap:1.25rem;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.875rem;font-weight:700;
  letter-spacing:.02em;padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--yellow)}
.head-cta{display:flex;align-items:center;gap:1rem}
.tel{font-family:var(--display);font-weight:600;font-size:1rem;text-decoration:none;letter-spacing:.03em;white-space:nowrap}
.tel:hover{color:var(--ink-soft)}
.menu{display:none;background:none;border:2px solid var(--ink);width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu span{display:block;width:20px;height:2px;background:var(--ink)}

@media (max-width:860px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:2px solid var(--ink);
    flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.65rem 0;border-bottom:1px solid var(--rule);font-size:1rem}
  .menu{display:flex}
  .tel{font-size:1rem}
}
@media (max-width:480px){
  .head-in{gap:.75rem}
  .mark-sub{display:none}
}

/* ── document framing: the bid sheet ── */
.doc-label{
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:baseline;gap:.75rem;
}
.doc-label::after{content:"";flex:1;border-bottom:1px solid var(--rule)}
.sec-dark .doc-label,.on-photo .doc-label{color:var(--dark-soft)}
.sec-dark .doc-label::after,.on-photo .doc-label::after{border-bottom-color:rgba(237,234,226,.28)}

/* ── HERO: the bid sheet laid on the tailgate ──
   Background is a photograph, noise over it, vignette baked in (sec.7). */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--pour);color:var(--paper-ink);
  padding:3.5rem 0 4rem;border-bottom:2px solid var(--ink);
}
.hero>.bg{
  position:absolute;inset:0;z-index:-2;
  background:url("../img/hero-chute.webp") center 42% / cover no-repeat;
}
.hero>.scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(9,8,8,.80) 0%, rgba(9,8,8,.72) 34%, rgba(9,8,8,.40) 58%, rgba(9,8,8,.22) 100%),
    linear-gradient(to bottom, rgba(9,8,8,.88) 0%, rgba(9,8,8,.66) 28%, rgba(9,8,8,.08) 52%, rgba(9,8,8,.52) 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.25rem 2.5rem;
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-soft);
  border-bottom:1px solid rgba(237,234,226,.3);padding-bottom:.75rem;margin-bottom:2.25rem;
}
.hero-meta strong{color:var(--paper-ink);font-weight:700}
.hero-grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,10fr);gap:2rem 4.5rem;align-items:center;max-width:1220px}
.hero h1{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.08;letter-spacing:.01em;
  max-width:19ch;color:#FFFDF8;
  text-shadow:0 2px 18px rgba(6,5,5,.85);
}
.hero-lede{font-size:1.125rem;max-width:56ch;margin-top:var(--hgap);color:var(--paper-ink);text-shadow:0 1px 10px rgba(6,5,5,.85)}
/* buttons at 2x the heading-to-subtext distance (identity-first sec.7) */
.hero-act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:calc(var(--hgap) * 2.4)}

/* the scatter: bigger element lower, smaller on top, and neither one of them
   ever crosses into the copy — the column gap is the margin of safety. */
.hero-scatter{position:relative;padding-top:3.25rem;padding-right:2.5rem}
.card{
  background:var(--paper);border:2px solid var(--ink);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.plan-card{padding:1rem 1rem .75rem;transform:rotate(-.7deg)}
.plan-card figcaption{font-size:.8125rem;color:var(--ink-soft);margin-top:.4rem;text-align:center}
.shot-card{
  position:absolute;top:0;right:0;width:44%;max-width:220px;
  padding:.4rem .4rem .5rem;transform:rotate(2.2deg);
}
.shot-card img{width:100%}
.shot-card figcaption{font-size:.6875rem;line-height:1.35;color:var(--ink-soft);margin-top:.35rem}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-scatter{padding-top:2.5rem;padding-right:0;max-width:430px}
  .shot-card{width:38%;max-width:150px;right:-.5rem}
}
@media (max-width:480px){
  .shot-card{position:static;width:60%;max-width:190px;margin:1rem 0 0 auto;transform:rotate(1.6deg)}
}

.btn{
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;padding:.8rem 1.5rem;border:2px solid var(--yellow);
}
.btn:hover{background:#FFD728;border-color:#FFD728}
.btn:active{transform:translateY(1px)}
.btn-line{background:transparent;color:var(--paper-ink);border-color:var(--paper-ink)}
.btn-line:hover{background:var(--paper-ink);color:var(--ink);border-color:var(--paper-ink)}
/* the same pair, on paper */
.on-paper .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-paper .btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.on-paper .btn-line{background:transparent;color:var(--ink)}
.on-paper .btn-line:hover{background:var(--ink);color:var(--paper)}

/* ── the figure band: the flip off the photograph and back onto paper ── */
.figure-band{background:var(--paper);border-bottom:2px solid var(--ink);padding:2.25rem 0 2.75rem}
.figure{overflow:hidden}
.figure-in{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2rem}
.fig-num{
  font-family:var(--display);font-weight:600;
  font-size:clamp(5.5rem, 17vw, 15rem);
  line-height:.95;letter-spacing:-.01em;white-space:nowrap;
}
.fig-num sup{font-size:.35em;vertical-align:.9em;font-weight:600}
.fig-side{max-width:30ch;padding-bottom:.6rem}
.fig-side .fig-unit{
  font-family:var(--display);font-weight:600;font-size:1.375rem;text-transform:uppercase;letter-spacing:.06em;
  display:block;
  border-bottom:5px solid var(--yellow);padding-bottom:.25rem;margin-bottom:.5rem;
}
.fig-side p{font-size:.875rem;color:var(--ink-soft)}

/* ── generic section: half a base beat each side, so section-to-section = base ── */
.sec{padding:calc(var(--gap-base)/2) 0;position:relative}
.sec-slab{background:var(--slab)}
/* grand pause #1: the bid module is the star — the silence lands before it. */
#bid{padding-top:calc(var(--gap-grand) - 2.5rem)}
/* tight beat: trust content packs against its argument (0.8x base to each neighbor) */
#says{padding:calc(var(--gap-tight) - var(--gap-base)/2) 0}
/* grand pause #2: spent on the paper side, before the dark call-Curt ask */
#area{padding-bottom:calc(var(--gap-grand) - var(--gap-base)/2)}
@media (max-width:760px){
  :root{--gap-tight:4rem;--gap-base:5rem;--gap-grand:9rem}
}
.sec-dark{background:var(--ink);color:var(--paper-ink)}
.sec h2{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.625rem, 2.6vw, 2.25rem);line-height:1.15;letter-spacing:.01em;
  margin:.75rem 0 1rem;max-width:24ch;
}
.sec-lede{font-size:1.125rem;max-width:60ch}
.sec-dark .sec-lede,.on-photo .sec-lede{color:var(--paper-ink)}

/* ── the dominating photograph on the cream section (sec.7) ── */
.bigshot{margin:2.25rem 0 0;border:2px solid var(--ink);background:var(--ink)}
.bigshot img{width:100%}
.bigshot figcaption{
  padding:.7rem 1rem .85rem;color:var(--paper-ink);font-size:.875rem;
  display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;align-items:baseline;
}

/* ── the bid lines ── */
.bidlines{margin-top:2.5rem;border-top:2px solid var(--ink)}
.bl{
  display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;
  gap:.25rem 3rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}
.bl-num{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.5rem, 5vw, 3.5rem);line-height:1;white-space:nowrap;
}
.bl-num .per{font-size:.32em;font-weight:600;letter-spacing:.05em;color:var(--ink-soft)}
.bl-body h3{font-family:var(--display);font-weight:600;font-size:1.125rem;text-transform:uppercase;letter-spacing:.04em}
.bl-body p{margin-top:.35rem;max-width:62ch}
.bl-body .aside{font-size:.875rem;color:var(--ink-soft);margin-top:.4rem}
@media (max-width:640px){
  .bl{grid-template-columns:1fr;gap:.5rem}
}

/* worked example: the bid total */
.total{
  margin-top:2.5rem;background:var(--slab);border:2px solid var(--ink);
  max-width:640px;padding:1.5rem 1.75rem;
}
.total h3{font-family:var(--display);font-weight:600;font-size:1.125rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1rem}
.total dl div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--rule)}
.total dd{font-weight:700;font-variant-numeric:tabular-nums}
.total .tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:.35rem;padding-top:.65rem}
.total .tot dd{font-family:var(--display);font-weight:600;font-size:1.75rem;background:var(--yellow);padding:0 .4rem}
.total .tnote{font-size:.875rem;color:var(--ink-soft);margin-top:1rem}

/* ── Attachment A: the drawing, and the photograph of the same thing ── */
.spec-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:start;margin-top:2rem}
.spec-copy p{margin-top:1rem;max-width:52ch;color:var(--paper-ink)}
.spec-copy p:first-child{margin-top:0}
.spec-copy .gravel{background:var(--yellow);color:var(--ink);font-weight:700;padding:0 .25rem}
.spec-fig figcaption{font-size:.875rem;color:var(--dark-soft);margin-top:.75rem}
.base-fig{margin-top:1.75rem;border:1px solid rgba(237,234,226,.25)}
.base-fig img{width:100%}
.base-fig figcaption{font-size:.8125rem;color:var(--dark-soft);padding:.6rem .75rem .7rem}
@media (max-width:900px){
  .spec-grid{grid-template-columns:1fr;gap:2rem}
}

/* ── the week ── */
.week-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:2rem 3rem;align-items:end}
.week-fig{border:2px solid var(--ink);background:var(--ink);align-self:end}
.week-fig img{width:100%}
.week-fig figcaption{padding:.55rem .75rem .7rem;font-size:.8125rem;color:var(--paper-ink)}
@media (max-width:760px){
  .week-head{grid-template-columns:1fr}
  .week-fig{max-width:340px}
}
.week{margin-top:2.5rem;border-top:2px solid var(--ink)}
.day{
  display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:.25rem 3rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}
.day-name{font-family:var(--display);font-weight:600;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.day-name small{display:block;font-family:var(--body);font-weight:700;font-size:.8125rem;letter-spacing:.1em;color:var(--ink-soft)}
.day p{max-width:62ch}
@media (max-width:640px){
  .day{grid-template-columns:1fr;gap:.5rem}
}

/* ── what Curt says: the inverted section, photograph as the ground ──
   Stronger noise, mid-size text, nothing display-scale (identity-first sec.7). */
#says>.bg{background-image:url("../img/night-trowel.webp");background-position:center 40%}
#says>.scrim{
  background:
    linear-gradient(to bottom, rgba(8,7,6,.62) 0%, rgba(8,7,6,.34) 32%, rgba(8,7,6,.64) 100%),
    linear-gradient(80deg, rgba(8,7,6,.30) 0%, rgba(8,7,6,.00) 55%, rgba(8,7,6,.34) 100%);
}
#says h2{color:#FFFDF8}
.saying{margin-top:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.75rem 2rem}
.say{border-left:5px solid var(--yellow);padding:.9rem 1.25rem .9rem 1.25rem;
  background:linear-gradient(90deg, rgba(8,7,6,.74) 0%, rgba(8,7,6,.62) 70%, rgba(8,7,6,.50) 100%);}
.say blockquote{font-size:1.125rem;line-height:1.55;max-width:50ch;color:#FFFDF8;text-shadow:0 1px 10px rgba(6,5,5,.9)}
.say p{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-soft);margin-top:.6rem}
@media (max-width:760px){
  .saying{grid-template-columns:1fr}
}

/* ── season counted: the numerals stand on a photograph of the material ── */
#season>.bg{background-image:url("../img/broom-band.webp");background-position:center}
#season>.scrim{background:linear-gradient(to bottom, rgba(12,11,10,.86) 0%, rgba(12,11,10,.58) 16%, rgba(12,11,10,.48) 45%, rgba(12,11,10,.68) 100%)}
.season{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.5rem}
.sn-num{
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.5rem, 8vw, 6.5rem);line-height:1;display:block;
  color:#FFFDF8;text-shadow:0 2px 20px rgba(6,5,5,.9);
}
.sn .zero{color:var(--yellow)}
.sn p{margin-top:.5rem;max-width:34ch;color:var(--dark-soft)}
.season-note{margin-top:2.5rem;max-width:62ch;color:var(--paper-ink);border-top:1px solid rgba(237,234,226,.28);padding-top:1.5rem}
@media (max-width:760px){
  .season{grid-template-columns:1fr;gap:1.75rem}
}

/* ── area ── */
.towns{
  list-style:none;margin-top:2rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  gap:.4rem 1.5rem;max-width:960px;
}
.towns li{border-bottom:1px solid var(--rule);padding:.35rem 0;font-size:.875rem}
.area-note{margin-top:1.75rem;max-width:60ch;color:var(--ink-soft)}

/* ── call Curt: heavy type, left-aligned, on an image ── */
#call>.bg{background-image:url("../img/cta-saw.webp");background-position:center 55%}
#call>.scrim{
  background:
    linear-gradient(95deg, rgba(8,7,6,.84) 0%, rgba(8,7,6,.76) 42%, rgba(8,7,6,.46) 72%, rgba(8,7,6,.30) 100%),
    linear-gradient(to bottom, rgba(8,7,6,.78) 0%, rgba(8,7,6,.34) 16%, rgba(8,7,6,.02) 48%, rgba(8,7,6,.50) 100%);
}
#call h2{color:#FFFDF8}
.call-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;margin-top:2rem;align-items:start}
.bigtel{margin-top:1.25rem}
.bigtel a{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.25rem, 6vw, 4.5rem);line-height:1.05;
  text-decoration:none;color:#FFFDF8;
  border-bottom:6px solid var(--yellow);
  text-shadow:0 2px 16px rgba(6,5,5,.9);
}
.bigtel a:hover{color:var(--yellow)}
.call-copy p{max-width:56ch;margin-top:1rem;color:var(--paper-ink)}
.vm{
  background:rgba(20,19,18,.88);border-left:5px solid var(--yellow);
  padding:1.25rem 1.5rem;backdrop-filter:blur(3px);
}
.vm h3{font-family:var(--display);font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dark-soft)}
.vm blockquote{margin-top:.75rem;font-size:1.125rem;line-height:1.6;color:var(--paper-ink)}
.meta{margin-top:1.75rem}
.meta div{display:flex;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(237,234,226,.24);font-size:.875rem}
.meta dt{min-width:5.5rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;color:var(--dark-soft);padding-top:.1rem}
.meta dd{color:var(--paper-ink)}
.meta a{color:var(--paper-ink)}
.meta a:hover{color:var(--yellow)}
@media (max-width:860px){
  .call-grid{grid-template-columns:1fr;gap:2rem}
}

/* ── footer ── */
.site-foot{border-top:2px solid var(--ink);padding:2.5rem 0 2rem;background:var(--slab)}
.foot-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.foot-mark{font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:.06em;text-transform:uppercase}
.foot-bar{display:block;width:9rem;height:4px;background:var(--yellow);margin-top:2px}
.foot-in p{max-width:44ch;font-size:.875rem}
.foot-in a{font-size:.875rem}
.credits{margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.25rem}
.credits h2{
  font-family:var(--body);font-weight:700;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.credits p{font-size:.8125rem;color:var(--ink-soft);margin-top:.65rem;max-width:100ch}
.credits ul{list-style:none;margin-top:.65rem;display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));max-width:1100px}
.credits li{font-size:.75rem;line-height:1.5;color:var(--ink-soft)}
.credits b{font-weight:700;color:var(--ink)}
.foot-fine{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:2rem;font-size:.8125rem;color:var(--ink-soft)}

/* ════════════════════════════════════════════════════════════════════════════
   MOTION — two themes, repeated the whole way down (identity-first sec.9).
   Nothing else moves. Both are prefers-reduced-motion guarded and both are
   no-ops with JavaScript dead, because the hidden states are only armed once
   the inline bootstrap has put .js on <html>.

   ── MOTION THEME 1: "SET" ──────────────────────────────────────────────────
   Concrete arrives wet and goes off. Every block on this page enters the same
   way: 14px low, slightly blurred, and it settles and sharpens. One curve, one
   distance, used on every section from the bid lines to the voicemail, so the
   repetition reads as the page's own habit rather than a library of reveals.

   ── MOTION THEME 2: "SCREED PASS" ──────────────────────────────────────────
   A screed is pulled steadily across a slab in one direction. Every
   photographic ground drifts at that same steady rate as you scroll past it,
   and the seams between the photograph sections and the paper sections are
   handed off the same way: the outgoing block slides up and blurs out while
   the incoming band passes over the top of it. It runs at the hero-to-bid-
   sheet seam, and again in reverse coming into the call-Curt section, so the
   photograph reads as one continuous ground behind the paperwork.
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference){
  /* THEME 1 — "SET" */
  .js [data-rise]{
    opacity:0;transform:translateY(14px);filter:blur(5px);
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1), filter .55s ease;
  }
  .js [data-rise].on{opacity:1;transform:none;filter:none}

  /* THEME 2 — "SCREED PASS", the drift */
  .js .drift>.bg{
    will-change:transform;
    transform:translate3d(0, var(--drift, 0px), 0) scale(1.12);
  }
  /* THEME 2 — "SCREED PASS", the seam handoff.
     The move is applied to the inner .wrap, never to the section box, so the
     outgoing block can slide up and blur without opening a gap in the flow. */
  .js [data-seam="out"]>.wrap{
    will-change:transform,filter,opacity;
    transform:translate3d(0, var(--seam-y, 0px), 0);
    filter:blur(var(--seam-blur, 0px));
    opacity:var(--seam-o, 1);
  }
}
/* The incoming half of the handoff needs no script: the band simply passes over
   the top of whatever is sliding out behind it. Runs at both seams. */
[data-seam="in"]{position:relative;z-index:2;box-shadow:0 -20px 38px rgba(10,9,8,.32)}