/* ==========================================================================
   VENADO INFRASTRUCTURE — Homepage
   --------------------------------------------------------------------------
   The Venado design system, third build. Palette, type, header, buttons,
   eyebrows, rules, reveal timing and footer are shared with Venado Commercial
   and Venado Restoration. The colours are sampled from the logo file, not
   chosen: deep forest from the VENADO wordmark, champagne from the division
   line, and the antler's own gold rebuilt as the --foil gradient.

   Where Infrastructure departs from its two siblings:
     · graphite leads. Commercial leads on dark bands, Restoration on paper.
       Infrastructure treats the dark as the field and the paper blocks as
       drawing sheets laid on it.
     · monospace is the working voice, not the caption voice. Anything an
       estimator would read off a sheet is set in mono.
     · a drawing-sheet language runs through the page: title blocks, dimension
       lines, station ticks, sheet grids, coordinate annotations, unit chips.
     · the signature device is the SEQUENCE RAIL — one continuous rule down
       the left of three full-width strata, 01 DIRT / 02 UTILITIES /
       03 CONCRETE, in the order the work is actually built.
     · every CTA is the bid list. There is no phone-led path, because no
       number has been supplied.

   THE DATA RULE. Nothing here invents a client fact. Equipment, quantities,
   typical project sizes, project names, scopes, contact details and the cut
   sheet are all unset. They render as .dn — an obviously bracketed, amber-
   marked monospace placeholder — so no visitor and no reviewer can mistake a
   placeholder for a claim.

    1  tokens              9  quantities
    2  base / reset       10  equipment & capabilities
    3  primitives         11  projects
    4  technical language 12  built for the bid
    5  header / nav       13  sitework first
    6  hero               14  bid invitation
    7  spec bar           15  family + footer
    8  the strata         16  responsive   17  motion
   ========================================================================== */

/* ================================ 1. TOKENS =============================== */
:root {

  /* ---- Brand, sampled from the logo. Unchanged across the family. -------- */
  --brand-primary:   #1C2B1C;  /* VENADO wordmark, deep forest            */
  --brand-secondary: #CFB26A;  /* the division line under the wordmark    */
  --brand-accent:    #DDA83A;  /* antler gold, mid tone                   */
  --brand-dark:      #0D160D;  /* the ground the mark is set on           */
  --brand-darkest:   #070C07;
  --brand-light:     #EFF0EE;  /* the lockup background                   */
  --brand-text:      #1C2B1C;
  --brand-muted:     #7A8377;
  --brand-border:    #D5DAD2;

  /* The antler gradient, rebuilt. Dark base at the root, bright at the tip. */
  --foil: linear-gradient(118deg,
          #7C4810 0%, #A9741A 15%, #E0A93A 36%, #FDE28A 51%,
          #F9BF4B 63%, #BC8F1E 83%, #8A5412 100%);
  --foil-line: linear-gradient(90deg,
          #7C4810 0%, #BC8F1E 22%, #FDE28A 50%, #BC8F1E 78%, #7C4810 100%);

  /* ---- Working aliases -------------------------------------------------- */
  --ink:        var(--brand-primary);
  --ink-deep:   var(--brand-dark);
  --ink-black:  var(--brand-darkest);
  --ink-3:      #243324;
  --ink-line:   #2F3B2C;
  --ink-line-2: #3D4B39;
  --ink-soft:   #555F53;
  --ink-mute:   var(--brand-muted);

  --paper:      var(--brand-light);
  --paper-2:    #E7E9E4;
  --paper-3:    #DFE2DC;
  --card:       #FBFBFA;
  --hairline:   var(--brand-border);
  --hairline-2: #C4CBC1;

  --bronze:     #7C4810;
  --amber:      #BC8F1E;
  --gold:       var(--brand-accent);
  --gold-hi:    #F9BF4B;
  --gold-pale:  #FDE28A;
  --champagne:  var(--brand-secondary);

  /* ---- Infrastructure only ----------------------------------------------
     Sitework is aggregate, subgrade and concrete, not joinery. Three cooled
     greys sit alongside the brand greens so the technical surfaces read as
     material rather than as luxury. They are neutral against the forest, not
     a second palette.                                                       */
  --slate:      #171C18;   /* the field the drawing sheets lie on          */
  --slate-2:    #212822;   /* raised technical panels                      */
  --slate-3:    #313A32;   /* rules on slate                               */
  --grid-dark:  rgba(239,240,238,.055);
  --grid-light: rgba(28,43,28,.045);

  /* on-dark text */
  --on-dark:     #EFF0EE;
  --on-dark-70:  rgba(239,240,238,.72);
  --on-dark-55:  rgba(239,240,238,.56);
  --on-dark-40:  rgba(239,240,238,.40);

  /* ---- Type ------------------------------------------------------------- */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-nano:    0.625rem;
  --fs-eyebrow: 0.6875rem;
  --fs-micro:   0.75rem;
  --fs-small:   0.9375rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.125rem, 1rem + 0.52vw, 1.4375rem);
  --fs-h3:      clamp(1.375rem, 1.13rem + 1vw, 1.9375rem);
  --fs-h2:      clamp(2.125rem, 1.24rem + 3.35vw, 4.25rem);
  --fs-h1:      clamp(2.5rem, 1rem + 5.9vw, 6rem);

  /* ---- Space ------------------------------------------------------------ */
  --shell:     1320px;
  --gutter:    clamp(20px, 4.6vw, 72px);
  --section-y: clamp(84px, 9.6vw, 168px);
  --header-h:  92px;

  --line:      1px solid var(--hairline);
  --line-2:    1px solid var(--hairline-2);
  --line-dark: 1px solid var(--slate-3);

  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease2: cubic-bezier(.16, 1, .3, 1);
}

/* ============================ 2. BASE / RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--brand-text);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.64;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
::selection { background: var(--gold-pale); color: var(--ink-black); }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.skip-link {
  position: absolute; left: 16px; top: -90px; z-index: 400;
  background: var(--ink-black); color: var(--on-dark);
  padding: 13px 20px; text-decoration: none;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--slate-3);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Scroll progress, in the antler gradient */
.progress {
  position: fixed; inset: 0 0 auto; z-index: 300;
  height: 2px; background: var(--foil-line);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* ============================= 3. PRIMITIVES ============================= */

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 500 var(--fs-eyebrow)/1 var(--mono);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before { content: ""; flex: none; width: 30px; height: 2px; background: var(--foil-line); }
.eyebrow--light { color: var(--gold-pale); }

.h2 {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.028em;
  margin-top: 26px; text-wrap: balance;
}
.h2--light { color: var(--on-dark); }
.h3 {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
  font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.018em;
}

.lede { font-size: var(--fs-lede); line-height: 1.54; color: var(--ink-soft); max-width: 54ch; font-weight: 350; }
.lede--light { color: var(--on-dark-70); }

.label {
  font: 500 var(--fs-nano)/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-mute);
}
.label--light { color: var(--on-dark-40); }
.rule { height: 1px; background: var(--hairline-2); border: 0; }
.rule--foil { height: 2px; background: var(--foil-line); border: 0; }

/* -- Buttons ------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 19px 34px; text-decoration: none;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.btn > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; }

.btn--foil { color: var(--ink-black); background: var(--foil); }
.btn--foil::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .85s var(--ease2);
}
.btn--foil:hover::after { transform: translateX(110%); }

.btn--ghost { border-color: rgba(239,240,238,.34); color: var(--on-dark); background: transparent; }
.btn--ghost:hover { border-color: var(--gold-pale); color: var(--gold-pale); }
.btn--outline { border-color: var(--hairline-2); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--sm { padding: 14px 22px; letter-spacing: .13em; }
.btn--full { width: 100%; }
.btn .ico { flex: none; width: 13px; height: 13px; fill: currentColor; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronze); text-decoration: none;
  padding-bottom: 10px; position: relative;
}
.link-arrow::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .32; transition: opacity .3s var(--ease);
}
.link-arrow span { transition: transform .3s var(--ease); }
.link-arrow:hover::before { opacity: 1; }
.link-arrow:hover span { transform: translateX(6px); }
.link-arrow--light { color: var(--gold); }

/* -- The Venado mark. The supplied file, never redrawn or recoloured. ----- */
.antler { display: block; flex: none; width: auto; max-width: none; }

/* -- Bands --------------------------------------------------------------- */
.band--ink    { background: var(--ink-deep); color: var(--on-dark); }
.band--black  { background: var(--ink-black); color: var(--on-dark); }
.band--slate  { background: var(--slate); color: var(--on-dark); }
.band--paper  { background: var(--paper-2); }

/* -- Reveal -------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.is-in { opacity: 1; transform: none; transition: opacity .85s var(--ease2), transform .85s var(--ease2); }
.reveal[data-delay="1"].is-in { transition-delay: .08s; }
.reveal[data-delay="2"].is-in { transition-delay: .16s; }
.reveal[data-delay="3"].is-in { transition-delay: .24s; }
.reveal[data-delay="4"].is-in { transition-delay: .32s; }
.reveal[data-delay="5"].is-in { transition-delay: .40s; }

/* ======================= 4. THE TECHNICAL LANGUAGE ======================= *
   The vocabulary that makes this page read as bid documents rather than
   marketing: title blocks, dimension lines, station ticks, sheet grids, unit
   chips, and the DATA NOTE placeholder.                                     */

/* -- DATA NOTE ------------------------------------------------------------
   Every fact the client has not supplied renders through this class. It has
   to be impossible to mistake for a real value, so it carries brackets in the
   markup, a monospace face, a dotted rule and an amber warning tick. Long
   strings may break rather than push a phone-width page wider than the
   screen.                                                                   */
.dn {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-weight: 400; font-size: .9em;
  letter-spacing: .02em; color: var(--ink-mute);
  border-bottom: 1px dotted var(--hairline-2);
  overflow-wrap: anywhere;
}
.dn::before {
  content: ""; align-self: center; flex: none;
  width: 7px; height: 6px; background: var(--amber);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.dn--light { color: var(--on-dark-55); border-bottom-color: var(--slate-3); }
.dn--block { display: flex; }

/* -- Drawing-sheet title block -------------------------------------------
   Stacked key/value cells with the hard corner rules of a real sheet title
   block. Used at the foot of the hero and at the head of the bid form.      */
.tblock {
  border: 1px solid var(--slate-3);
  background: rgba(7,12,7,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tblock__cell { padding: 13px 17px; border-right: 1px solid var(--slate-3); border-bottom: 1px solid var(--slate-3); }
.tblock__cell:nth-child(2n) { border-right: 0; }
.tblock__cell:nth-last-child(-n+2) { border-bottom: 0; }
.tblock__k { display: block; font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.tblock__v { display: block; margin-top: 9px; font: 400 var(--fs-micro)/1.25 var(--mono); letter-spacing: .04em; color: var(--on-dark-70); }
.tblock--light { background: var(--card); border-color: var(--hairline-2); }
.tblock--light .tblock__cell { border-color: var(--hairline); }
.tblock--light .tblock__k { color: var(--bronze); }
.tblock--light .tblock__v { color: var(--ink-soft); }

/* -- Dimension line -------------------------------------------------------
   A measured span: witness ticks at both ends and the label sitting on the
   line the way a dimension string does. Used as a section divider.          */
.dim { display: flex; align-items: center; gap: 14px; width: 100%; }
.dim__end { flex: none; width: 1px; height: 13px; background: currentColor; opacity: .55; }
.dim__run { flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }
.dim__txt {
  /* The label must be able to shrink and wrap: on a 320px phone a long
     dimension string would otherwise push past its own section. */
  flex: 0 1 auto; min-width: 0; text-align: center;
  font: 500 var(--fs-nano)/1.6 var(--mono);
  letter-spacing: .24em; text-transform: uppercase; opacity: .75;
}
.dim--ink { color: var(--ink-mute); }
.dim--light { color: var(--on-dark-40); }

/* -- Station ticks: the chainage rule that heads a technical block -------- */
.ticks { display: flex; align-items: flex-end; height: 13px; }
.ticks i { flex: 1 1 0; height: 5px; border-left: 1px solid currentColor; opacity: .28; }
.ticks i:nth-child(5n+1) { height: 12px; opacity: .6; }
.ticks--light { color: var(--on-dark); }
.ticks--ink { color: var(--ink); }

/* -- Sheet grid: the faint blueprint ruling behind technical bands ------
   Drawn as two tiled hairline gradients on a transparent element. It carries
   no mask: a masked overlay this tall promotes a compositing layer that
   Chrome then fails to raster, which blanks everything painted under it. The
   grid is instead kept low enough in alpha that it needs no fade, and it
   always ends on a section boundary, so there is no cut edge to hide. */
.grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.grid-bg--dark {
  background-image: linear-gradient(var(--grid-dark) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 68px 68px;
}
.grid-bg--light {
  background-image: linear-gradient(var(--grid-light) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* -- Unit chip: CY, LF, SF, TONS ------------------------------------------
   The units are real. The values behind them are not supplied, so a chip is
   never rendered next to an invented number.                                */
.unit {
  display: inline-block; padding: 4px 9px;
  font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronze); border: 1px solid var(--hairline-2); background: var(--card);
}
.unit--light { color: var(--gold); border-color: var(--slate-3); background: rgba(239,240,238,.04); }

/* -- Annotation: a small corner callout in survey voice ------------------- */
.annot {
  font: 400 var(--fs-nano)/1.7 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
}
.annot--light { color: var(--on-dark-40); }

/* ============================ 5. HEADER / NAV ============================ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--header-h);
  background: transparent;
  transition: height .4s var(--ease), background .4s var(--ease);
}
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--foil-line); opacity: 0;
  transition: opacity .4s var(--ease);
}
.header.is-stuck {
  height: 70px;
  background: rgba(13,22,13,.93);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.header.is-stuck::after { opacity: .55; }

.header__inner {
  height: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* -- Brand lockup. The supplied antler mark, with VENADO / INFRASTRUCTURE
   typeset in the same construction as the Commercial lockup. -------------- */
/* The lockup sits above the mobile drawer: the brief puts the mark first in
   the mobile priority order, so it must stay visible with the menu open. */
.brand {
  position: relative; z-index: 210;
  display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--on-dark);
}
.brand__mark { height: 42px; transition: height .4s var(--ease); }
.brand__type { display: flex; flex-direction: column; gap: 5px; }
.brand__word {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  font-size: 1.3125rem; line-height: .9; letter-spacing: .1em; text-transform: uppercase;
  transition: font-size .4s var(--ease);
}
.brand__div {
  font: 500 .5rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase;
  color: var(--champagne); padding-left: .1em;
}
.header.is-stuck .brand__mark { height: 34px; }
.header.is-stuck .brand__word { font-size: 1.125rem; }

/* -- Nav ----------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 23px; }
.nav__link {
  position: relative; display: block; text-decoration: none; padding-block: 6px;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(239,240,238,.66);
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--foil-line);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease2);
}
.nav__link:hover { color: var(--on-dark); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--gold-pale); }

.nav__cta { flex: none; }
.nav__foot { display: none; }

/* Compact bid button that takes the bar once the full nav collapses. */
.bidbtn { display: none; }

.burger {
  display: none; position: relative; z-index: 210;
  width: 46px; height: 46px; margin-right: -12px;
  background: none; border: 0; cursor: pointer; padding: 0;
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px;
}
.burger span {
  display: block; width: 28px; height: 1.5px; background: var(--on-dark);
  transition: transform .35s var(--ease), width .35s var(--ease);
}
.burger span:last-child { width: 19px; }
.burger.is-open span:first-child { transform: translateY(4.75px) rotate(45deg); }
.burger.is-open span:last-child { width: 28px; transform: translateY(-4.75px) rotate(-45deg); }

/* =============================== 6. HERO ================================= */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--ink-black);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 54% 58%;
  filter: saturate(.62) contrast(1.1) brightness(.9);
}
/* Two scrims: one vertical for the copy block, one raking so the far side of
   the pad keeps its equipment and its light. Brand ink, never neutral. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(7,12,7,.97) 0%, rgba(7,12,7,.82) 30%, rgba(13,22,13,.3) 64%, rgba(13,22,13,.55) 100%),
    linear-gradient(102deg, rgba(7,12,7,.93) 0%, rgba(7,12,7,.7) 40%, rgba(23,28,24,.28) 66%, rgba(13,22,13,.5) 100%);
}

/* The sheet grid, laid over the photograph the way a drawing overlays a site */
.hero__grid { z-index: 1; }

/* The mark, oversized and barely there, behind the type */
.hero__watermark {
  position: absolute; z-index: 1; pointer-events: none;
  right: -6%; bottom: -4%;
  width: clamp(230px, 30vw, 480px); height: auto;
  opacity: .12;
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: calc(var(--header-h) + clamp(56px, 8vw, 108px)) var(--gutter) clamp(44px, 5vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 48px;
  color: var(--on-dark);
}

/* -- The scope line: DIRT — UTILITIES — CONCRETE -------------------------
   The three words are the positioning. They are set as a measured string,
   each term boxed like a scope item on a bid form.                          */
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.scope span {
  padding: 8px 14px; border: 1px solid var(--slate-3);
  background: rgba(7,12,7,.5);
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-pale);
}
.scope i { font-style: normal; color: var(--on-dark-40); font-family: var(--mono); }

.hero__title {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-size: var(--fs-h1); line-height: .95; letter-spacing: -.038em;
  margin-top: 26px; max-width: 15ch;
}
.hero__title em {
  font-style: normal;
  background: var(--foil); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__lede {
  margin-top: 26px; max-width: 50ch;
  font-size: var(--fs-lede); line-height: 1.56; font-weight: 350;
  color: var(--on-dark-70);
}
.hero__lede strong { color: var(--on-dark); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }

/* The hero title block sits in the corner of the sheet, as it would on a
   drawing. Every value in it is a DATA NOTE. */
.hero__tblock { width: 300px; }

/* -- Spec bar: what a buyer is qualifying, in four cells ------------------ */
.spec {
  position: relative; z-index: 3;
  border-top: 1px solid var(--slate-3);
  background: rgba(7,12,7,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.spec__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec__cell {
  padding: 22px 28px 22px 0; border-right: 1px solid var(--slate-3);
  display: flex; flex-direction: column; gap: 9px;
}
.spec__cell:not(:first-child) { padding-left: 28px; }
.spec__cell:last-child { border-right: 0; }
.spec__k { font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.spec__v { font-size: var(--fs-small); line-height: 1.35; color: var(--on-dark-70); font-weight: 350; }

/* ============================= 8. THE STRATA =============================
   The signature device. Three full-width strata in the order the work is
   actually built — 01 dirt, 02 utilities, 03 concrete — threaded by one
   continuous rail down the left edge. Not three rounded cards: three courses
   of a section, each heavy enough to carry a photograph and a quantity list.
   The rail is the whole point. It says these are one package, self-performed
   end to end, not three subcontracts stapled together.                      */
.strata { position: relative; background: var(--paper); overflow: hidden; }
.strata__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 72px); align-items: end;
  padding-bottom: clamp(34px, 4vw, 54px);
}
.strata__head .h2 { font-size: clamp(2.25rem, 1.25rem + 3.6vw, 4.5rem); }
.strata__note { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); max-width: 46ch; }
.strata__note strong { color: var(--ink); font-weight: 500; }
.strata__ticks { position: relative; z-index: 2; margin-bottom: 10px; }

.strata__list { position: relative; z-index: 2; border-top: 1px solid var(--ink); }

/* One stratum. The rail lives in the first column and never breaks. */
.stratum {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, .92fr);
  gap: 0 clamp(24px, 3.4vw, 56px);
  border-bottom: 1px solid var(--hairline-2);
  transition: background .5s var(--ease);
}
.stratum:hover { background: var(--paper-2); }

/* The rail: a hairline through the number column, unbroken across all three,
   with a solid node at each stratum. */
.stratum__rail { position: relative; }
.stratum__rail::before {
  content: ""; position: absolute; left: 33px; top: 0; bottom: 0; width: 1px;
  background: var(--hairline-2);
}
.stratum:last-child .stratum__rail::before { bottom: auto; height: 74px; }
.stratum__node {
  position: absolute; left: 27px; top: 68px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--bronze);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.stratum:hover .stratum__node { background: var(--gold); transform: scale(1.25); }

.stratum__n {
  display: block; padding-top: clamp(38px, 4.4vw, 62px);
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: .84; letter-spacing: -.05em;
  color: var(--ink); text-align: right; padding-right: 26px;
}
.stratum:hover .stratum__n {
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.stratum__body {
  padding-block: clamp(38px, 4.4vw, 62px) clamp(34px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.stratum__k { font: 500 var(--fs-eyebrow)/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); }
.stratum__t {
  margin-top: 16px;
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: .98; letter-spacing: -.03em;
}
.stratum__p { margin-top: 18px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); max-width: 42ch; }

/* The scope list. These four or five items are the whole capability — the
   brief permits nothing beyond them, so the list is closed, not a sample. */
.stratum__scope { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 0; width: 100%; max-width: 46ch; }
.stratum__scope li {
  position: relative; padding: 11px 0 11px 22px; width: 100%;
  border-top: 1px solid var(--hairline);
  font: 500 var(--fs-small)/1.4 var(--body); color: var(--ink);
}
.stratum__scope li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 1px;
  background: var(--bronze);
}
.stratum__scope li:last-child { border-bottom: 1px solid var(--hairline); }

/* The measured line: the units this stratum is bid in, with the value unset */
.stratum__meas { margin-top: 26px; width: 100%; max-width: 46ch; }
.stratum__units { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.stratum__media { position: relative; overflow: hidden; background: var(--paper-3); align-self: stretch; }
.stratum__media img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
  filter: saturate(.62) contrast(1.08);
  transition: transform 1.3s var(--ease2), filter .6s var(--ease);
}
.stratum:hover .stratum__media img { transform: scale(1.04); filter: saturate(.88) contrast(1.05); }
.stratum__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,12,7,.42), rgba(7,12,7,0) 58%);
  transition: opacity .6s var(--ease);
}
.stratum:hover .stratum__media::after { opacity: .55; }
/* the frame annotation, bottom left of every photograph */
.stratum__frame {
  position: absolute; z-index: 2; left: 16px; bottom: 14px;
  color: var(--on-dark-70);
}

/* ============================ 9. QUANTITIES ==============================
   The proof section. It builds the visual system for speaking in quantities
   without inventing a single number: real units, real field names, and a
   value slot that is openly unset. An estimator reads this as "they know how
   work is measured and they will give me the numbers", not as a claim.      */
.qty { position: relative; overflow: hidden; }
.qty__inner { position: relative; z-index: 2; }
.qty__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 72px); align-items: end;
}
.qty__note { font-size: var(--fs-small); line-height: 1.72; color: var(--on-dark-55); max-width: 44ch; }
.qty__note strong { color: var(--on-dark); font-weight: 500; }

/* The board: six measured fields, each a unit and an unset value. */
.qty__board {
  margin-top: clamp(40px, 4.6vw, 68px);
  border: 1px solid var(--slate-3);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--slate-2);
}
.qty__cell {
  padding: clamp(22px, 2.6vw, 34px);
  border-right: 1px solid var(--slate-3); border-bottom: 1px solid var(--slate-3);
  display: flex; flex-direction: column; gap: 16px;
  transition: background .4s var(--ease);
}
.qty__cell:hover { background: rgba(239,240,238,.03); }
.qty__cell:nth-child(3n) { border-right: 0; }
.qty__cell:nth-last-child(-n+3) { border-bottom: 0; }
.qty__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.qty__k { font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-40); }
/* The value slot. Deliberately empty, and dimensioned like a field on a form
   so the shape of the answer is obvious. */
.qty__slot {
  min-height: 62px; display: flex; align-items: center;
  border-bottom: 1px solid var(--slate-3);
}
.qty__desc { font-size: var(--fs-micro); line-height: 1.65; color: var(--on-dark-55); }

.qty__media { position: relative; margin-top: clamp(40px, 4.6vw, 68px); overflow: hidden; }
.qty__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.55) contrast(1.12) brightness(.86);
}
.qty__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,12,7,.78), rgba(7,12,7,.1) 62%);
}
.qty__cap {
  position: absolute; z-index: 2; left: clamp(16px, 2.4vw, 30px); bottom: clamp(14px, 2.2vw, 26px);
  right: clamp(16px, 2.4vw, 30px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}

/* ==================== 10. EQUIPMENT & CAPABILITIES =======================
   The estimator's resource centre. Not marketing: a qualification packet laid
   out the way a prequal form is. Three blocks — the equipment schedule, the
   typical project size, and the cut sheet — every value unset.              */
.eq { position: relative; background: var(--paper); overflow: hidden; }
.eq__inner { position: relative; z-index: 2; }
.eq__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.eq__note { font-size: var(--fs-small); line-height: 1.72; color: var(--ink-soft); max-width: 44ch; }
.eq__note strong { color: var(--ink); font-weight: 500; }

.eq__grid {
  margin-top: clamp(40px, 4.6vw, 66px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 2.8vw, 40px); align-items: start;
}
.eq__side { display: flex; flex-direction: column; gap: clamp(24px, 2.8vw, 40px); }

.sheet {
  background: var(--card); border: 1px solid var(--hairline-2);
  border-top: 2px solid var(--gold);
}
.sheet__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--hairline);
}
.sheet__ttl {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
  font-size: 1.3125rem; letter-spacing: -.016em;
}
.sheet__body { padding: clamp(20px, 2.4vw, 30px); }

/* The equipment schedule, laid out as a real schedule with its columns
   headed and its rows unset. */
.sched { width: 100%; }
.sched thead th {
  text-align: left; padding: 0 0 12px;
  font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze); border-bottom: 1px solid var(--hairline-2);
}
.sched thead th + th { padding-left: 16px; }
.sched tbody td { padding: 15px 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.sched tbody td + td { padding-left: 16px; }
.sched tbody tr:last-child td { border-bottom: 0; }
.sched__cls { font: 500 var(--fs-small)/1.4 var(--body); color: var(--ink); }
.sched__sub { display: block; margin-top: 5px; font-size: var(--fs-micro); color: var(--ink-mute); line-height: 1.5; }

/* The cut sheet. No file exists yet, so no download is offered — the plate
   states the filename that will exist and the action requests it instead. */
.cutsheet { display: flex; flex-direction: column; gap: 18px; }
.cutsheet__plate {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; background: var(--paper-2); border: 1px dashed var(--hairline-2);
}
.cutsheet__ico { flex: none; width: 34px; height: 42px; fill: none; stroke: var(--bronze); stroke-width: 1.4; }
.cutsheet__meta { min-width: 0; }
.cutsheet__file { font: 500 var(--fs-micro)/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.cutsheet__state { display: block; margin-top: 7px; }

/* The equipment strip: the yard, wide and low, under the schedule. */
.eq__strip { position: relative; margin-top: clamp(34px, 4vw, 58px); overflow: hidden; }
.eq__strip img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; filter: saturate(.6) contrast(1.06); }
.eq__strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,12,7,.5), rgba(7,12,7,0) 55%); }
.eq__stripcap { position: absolute; z-index: 2; left: clamp(16px, 2.4vw, 28px); bottom: clamp(14px, 2vw, 22px); color: var(--on-dark-70); }

/* ============================= 11. PROJECTS ==============================
   Not a portfolio. A record sheet. Each entry leads with what was performed
   and in what units, because that is the only thing an estimator is reading
   for. The photograph supports the record; it does not lead it.             */
.proj { background: var(--paper-2); }
.proj__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.proj__note { font-size: var(--fs-small); line-height: 1.72; color: var(--ink-soft); max-width: 44ch; }
.proj__list { margin-top: clamp(38px, 4.4vw, 62px); border-top: 1px solid var(--ink); }

.rec {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: 0 clamp(26px, 3.4vw, 56px);
  padding-block: clamp(30px, 3.4vw, 48px);
  border-bottom: 1px solid var(--hairline-2);
}
.rec__media { position: relative; overflow: hidden; background: var(--paper-3); }
.rec__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.6) contrast(1.08);
  transition: transform 1.3s var(--ease2), filter .6s var(--ease);
}
.rec:hover .rec__media img { transform: scale(1.04); filter: saturate(.85); }
.rec__no {
  position: absolute; z-index: 2; left: 0; top: 0;
  padding: 9px 14px; background: var(--ink-black);
  font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-pale);
}

.rec__body { display: flex; flex-direction: column; }
.rec__name {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); line-height: 1.06; letter-spacing: -.022em;
  margin-bottom: 4px;
}
/* the record fields — scope, quantity, units, project size */
.rec__dl { margin-top: 22px; border-top: 1px solid var(--hairline-2); }
.rec__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.rec__row dt { font: 500 var(--fs-nano)/1.8 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.rec__row dd { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
/* work performed, as scope chips that map to the three strata */
.rec__work { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.rec__work span {
  padding: 7px 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}

/* ========================= 12. BUILT FOR THE BID =========================
   The strongest block on the page, and the one the whole site exists for.
   It says qualification is a short conversation, then lists the five things
   Venado can hand over, each anchored to where it lives on this page.       */
.bid { position: relative; background: var(--ink-black); color: var(--on-dark); overflow: hidden; }
.bid__inner { position: relative; z-index: 2; }
.bid__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(34px, 4.6vw, 88px); align-items: start;
}
.bid__title { margin-top: 26px; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem); line-height: .95; letter-spacing: -.036em;
  font-family: var(--display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
.bid__lede { margin-top: 26px; }
.bid__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* The index of what is available. Numbered, anchored, hover-lit. */
.bidx { border-top: 1px solid var(--slate-3); }
.bidx__row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 19px 0; border-bottom: 1px solid var(--slate-3);
  text-decoration: none; color: var(--on-dark);
  transition: padding-left .35s var(--ease), color .3s var(--ease);
}
.bidx__row:hover { padding-left: 12px; color: var(--gold-pale); }
.bidx__n { font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .16em; color: var(--gold); }
.bidx__t { font-size: var(--fs-body); font-weight: 400; }
.bidx__s { font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-40); }
.bidx__row:hover .bidx__s { color: var(--gold); }

/* ========================= 13. SITEWORK FIRST ============================
   The Commercial connection. Deliberately short: it names the relationship
   and stops, so the two brands stay distinct.                               */
.first { background: var(--paper); padding-block: clamp(56px, 6.4vw, 104px); }
.first__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.first__media { position: relative; overflow: hidden; }
.first__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.6) contrast(1.06); }
.first__t {
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); line-height: 1; letter-spacing: -.03em;
  margin-top: 22px;
}
.first__p { margin-top: 20px; font-size: var(--fs-small); line-height: 1.72; color: var(--ink-soft); max-width: 48ch; }
.first__p strong { color: var(--ink); font-weight: 500; }
.first__seq { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.first__seq b {
  font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  padding: 9px 13px; border: 1px solid var(--hairline-2); color: var(--ink); background: var(--card);
}
.first__seq i { font-style: normal; color: var(--bronze); font-family: var(--mono); font-size: var(--fs-micro); }

/* ========================= 14. BID INVITATION ============================
   The contact experience is one thing: a bid invitation. Seven fields, no
   more. Company, name, email, phone, project, scope, bid date. It is headed
   by a title block so it reads as a form off a bid package.                 */
.inv { position: relative; background: var(--slate); color: var(--on-dark); overflow: hidden; }
.inv__inner { position: relative; z-index: 2; }
.inv__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(30px, 4.4vw, 76px); align-items: start;
}
.inv__title { margin-top: 26px; font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4.25rem); line-height: .98; letter-spacing: -.034em;
  font-family: var(--display); font-weight: 400; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
.inv__lede { margin-top: 24px; }
.inv__steps { margin-top: 32px; border-top: 1px solid var(--slate-3); }
.inv__step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--slate-3); }
.inv__step b { font: 500 var(--fs-micro)/1.5 var(--mono); letter-spacing: .14em; color: var(--gold); }
.inv__step span { font-size: var(--fs-small); color: var(--on-dark-70); line-height: 1.55; }
.inv__direct { margin-top: 32px; border-top: 1px solid var(--slate-3); }
.inv__d { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--slate-3); }
.inv__d dt { font: 500 var(--fs-nano)/1.8 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.inv__d dd { margin: 0; font-size: var(--fs-small); color: var(--on-dark-70); }

/* The form panel: a drawing sheet laid on the dark field. */
.invform { background: var(--card); border: 1px solid var(--hairline-2); color: var(--ink); }
.invform__head { border-bottom: 1px solid var(--hairline); }
.invform__body { padding: clamp(24px, 3vw, 40px); }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: 500 var(--fs-nano)/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 10px;
}
.field__opt { color: var(--ink-mute); letter-spacing: .14em; }
.field__input {
  width: 100%; padding: 14px 15px; background: var(--paper);
  border: 1px solid var(--hairline-2); color: var(--ink);
  font-size: var(--fs-small); border-radius: 0;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field__input::placeholder { color: var(--ink-mute); }
.field__input:hover { border-color: var(--champagne); }
.field__input:focus { border-color: var(--gold); background: var(--card); outline-offset: 1px; }
.field__input--date { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .06em; }
.field__input--area { resize: vertical; min-height: 104px; line-height: 1.55; }

/* Scope is the three strata, chosen rather than typed. It is the fastest
   possible answer to the only question that sorts a bid invitation. */
.scopeset { border: 0; padding: 0; margin: 0 0 18px; }
.scopeset legend { padding: 0; }
.scopepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 15px 14px; border: 1px solid var(--hairline-2); background: var(--paper);
  font: 500 var(--fs-micro)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.pick span::after {
  content: attr(data-u); font-size: var(--fs-nano); letter-spacing: .18em; color: var(--ink-mute);
}
.pick:hover span { border-color: var(--champagne); }
.pick input:checked + span { border-color: var(--gold); background: var(--ink); color: var(--gold-pale); }
.pick input:checked + span::after { color: var(--champagne); }
.pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.form__note { margin-top: 18px; font: 400 var(--fs-nano)/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.form__note.is-ok { color: var(--bronze); }
.form__note.is-err { color: #A6462A; }

/* ======================= 15. FAMILY + CLOSE + FOOTER ===================== */
.family { background: var(--paper); padding-block: clamp(48px, 5.6vw, 84px); border-top: var(--line); }
.family__inner { display: flex; align-items: center; gap: clamp(22px, 3.4vw, 48px); flex-wrap: wrap; }
.family__logo { width: clamp(176px, 19vw, 240px); height: auto; flex: none; }
.family__text { font-size: var(--fs-small); line-height: 1.66; color: var(--ink-soft); max-width: 58ch; padding-left: clamp(22px, 3.4vw, 48px); border-left: var(--line-2); }
.family__text strong { color: var(--ink); font-weight: 500; }

.close { position: relative; background: var(--ink-black); color: var(--on-dark); padding-block: clamp(88px, 9.6vw, 168px); overflow: hidden; }
.close__media { position: absolute; inset: 0; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; opacity: .58; }
.close__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,12,7,.96) 0%, rgba(7,12,7,.76) 44%, rgba(13,22,13,.5) 100%);
}
.close__mark {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: clamp(230px, 30vw, 460px); height: auto; opacity: .1; pointer-events: none;
}
.close__inner { position: relative; z-index: 2; }
.close__inner > * { max-width: 900px; }
.close__title {
  margin-top: 26px;
  font-family: var(--display); font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-size: clamp(2.5rem, 1.1rem + 5vw, 5.5rem); line-height: .95; letter-spacing: -.038em;
}
.close__lede { margin-top: 24px; max-width: 48ch; font-size: var(--fs-lede); line-height: 1.56; font-weight: 350; color: var(--on-dark-70); }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.close__dim { margin-top: 44px; max-width: 640px; }

.footer { background: var(--ink); color: var(--on-dark); padding-block: clamp(56px, 6vw, 88px) clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink-line-2); }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4.4vw, 76px);
  padding-bottom: clamp(38px, 4.4vw, 62px); border-bottom: 1px solid var(--ink-line);
}
.footer .brand__mark { height: 56px; }
.footer .brand__word { font-size: 1.5rem; }
.footer__blurb { margin-top: 26px; font-size: var(--fs-small); line-height: 1.66; color: var(--on-dark-55); max-width: 42ch; }
.footer__ttl { font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.footer__nav { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.footer__nav a { text-decoration: none; font-size: var(--fs-small); color: var(--on-dark-70); transition: color .25s var(--ease); }
.footer__nav a:hover { color: var(--gold-pale); }
.footer__contact { display: flex; flex-direction: column; gap: 13px; font-size: var(--fs-small); color: var(--on-dark-70); }
.footer__bottom {
  margin-top: clamp(24px, 2.6vw, 34px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px;
  font: 400 var(--fs-nano)/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-40);
}

/* ============================ 16. RESPONSIVE =============================
   Checked at 1440 / 1280 / 1024 / 768 / 620 / 480 / 390 / 375 / 320.
   The mobile priority the brief sets is: mark, bid CTA, hero positioning,
   the three strata, equipment, projects, the invitation form. Nothing in
   that list is ever hidden — the technical labels shrink but stay legible,
   and no monospace string is allowed to widen the page.                    */

/* 1400 — the nav carries a CTA button, so it tightens earlier than usual */
@media (max-width: 1400px) {
  .nav { gap: 22px; }
  .nav__list { gap: 18px; }
}

/* 1280 */
@media (max-width: 1280px) {
  :root { --shell: 1180px; }
  .stratum { grid-template-columns: 82px minmax(0, 1fr) minmax(0, .84fr); }
  .stratum__rail::before { left: 27px; }
  .stratum__node { left: 21px; }
  .eq__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
}

/* 1160 — the nav, the lockup and the bid CTA no longer share one line */
@media (max-width: 1160px) {
  :root { --header-h: 74px; }

  .burger { display: flex; }
  .nav__cta { display: none; }

  /* The bid list is the primary action, so it stays in the bar as a compact
     button the moment the full nav collapses. */
  .bidbtn {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: auto; padding: 12px 16px; text-decoration: none;
    background: var(--foil); color: var(--ink-black);
    font: 500 var(--fs-nano)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  }
  body.is-locked .bidbtn { opacity: 0; pointer-events: none; }

  .nav {
    position: fixed; inset: 0; z-index: 190;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(var(--header-h) + 30px) var(--gutter) 40px;
    background: var(--ink-black);
    transform: translateY(-101%); visibility: hidden;
    transition: transform .55s var(--ease2), visibility .55s;
    overflow-y: auto; overflow-x: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; border-top: 1px solid var(--ink-line); }
  .nav__list li { border-bottom: 1px solid var(--ink-line); }
  .nav__link {
    display: block; padding: 18px 0;
    font-family: var(--display); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
    font-size: 1.625rem; font-weight: 400; letter-spacing: -.02em; text-transform: none;
    color: var(--on-dark);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--gold-pale); }
  /* in the drawer the bid CTA leads, full width */
  .nav__cta {
    display: flex; order: -1; margin-bottom: 24px; width: 100%;
  }
  .nav__foot {
    display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding-top: 22px;
    border-top: 1px solid var(--ink-line);
    font: 400 var(--fs-nano)/1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-40); overflow-wrap: anywhere;
  }
  body.is-locked { overflow: hidden; }

  .strata__head, .qty__head, .eq__head, .proj__head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bid__grid { grid-template-columns: minmax(0, 1fr); }
  .inv__grid { grid-template-columns: minmax(0, 1fr); }
  .eq__grid { grid-template-columns: minmax(0, 1fr); }
  .first__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brandcol { grid-column: 1 / -1; }
}

/* 1024 — the strata drop their photo column and stack it under the copy */
@media (max-width: 1024px) {
  .stratum { grid-template-columns: 74px minmax(0, 1fr); }
  .stratum__rail::before { left: 23px; }
  .stratum__node { left: 17px; }
  .stratum__n { font-size: clamp(2.25rem, 6vw, 3rem); padding-right: 18px; }
  .stratum__media { grid-column: 2; margin-bottom: clamp(30px, 4vw, 44px); }
  .stratum__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .stratum__body { padding-bottom: 0; }
  .qty__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qty__cell:nth-child(3n) { border-right: 1px solid var(--slate-3); }
  .qty__cell:nth-child(2n) { border-right: 0; }
  .qty__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--slate-3); }
  .qty__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .rec { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rec__media img { aspect-ratio: 16 / 9; }
}

/* 860 */
@media (max-width: 860px) {
  .spec__grid { grid-template-columns: repeat(2, 1fr); }
  .spec__cell { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--slate-3); }
  .spec__cell:nth-child(2n) { border-right: 0; padding-left: 20px; }
  .spec__cell:nth-child(2n+1) { padding-left: 0; }
  .spec__cell:nth-last-child(-n+2) { border-bottom: 0; }

  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--header-h) + clamp(72px, 14vw, 112px)); gap: 34px; }
  .hero__title { max-width: 13ch; }
  .hero__tblock { width: 100%; max-width: 420px; }
  .hero__watermark { right: -18%; bottom: 14%; width: min(60vw, 360px); opacity: .1; }

  .family__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .family__text { padding-left: 0; border-left: 0; padding-top: 20px; border-top: var(--line-2); width: 100%; }

  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer__brandcol { grid-column: auto; }
}

/* 620 — phone. The rail moves out of its own column and runs under the
   number instead, so the copy gets the full width. */
@media (max-width: 620px) {
  :root { --fs-body: 1rem; --header-h: 66px; }

  .hero__inner { padding-bottom: clamp(32px, 6vw, 48px); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { width: 100%; }
  .hero__media img { object-position: 60% 58%; }
  /* the phone crop puts the copy over the brightest plant in the frame, so
     the vertical scrim is carried further up the frame here */
  .hero__media::after {
    background: linear-gradient(to top, rgba(7,12,7,.97) 0%, rgba(7,12,7,.9) 42%, rgba(7,12,7,.72) 74%, rgba(13,22,13,.6) 100%);
  }
  .hero__title { max-width: none; }
  .scope span { padding: 7px 11px; letter-spacing: .18em; }

  .brand__mark { height: 34px; }
  .brand__word { font-size: 1.125rem; }
  .brand__div { letter-spacing: .24em; }
  .header.is-stuck .brand__mark { height: 29px; }
  .header.is-stuck .brand__word { font-size: 1rem; }
  .nav__link { font-size: 1.4375rem; padding: 15px 0; }

  .stratum { grid-template-columns: minmax(0, 1fr); }
  .stratum__rail { display: flex; align-items: center; gap: 14px; padding-top: clamp(30px, 7vw, 40px); }
  .stratum__rail::before { left: 0; right: 0; top: auto; bottom: 6px; width: auto; height: 1px; }
  .stratum:last-child .stratum__rail::before { height: 1px; bottom: 6px; }
  .stratum__node { position: static; flex: none; }
  .stratum__n { padding: 0; text-align: left; font-size: 2.25rem; }
  .stratum__body { padding-top: 20px; }
  .stratum__media { grid-column: 1; }
  .stratum__scope, .stratum__meas { max-width: none; }

  .qty__board { grid-template-columns: minmax(0, 1fr); }
  .qty__cell { border-right: 0 !important; border-bottom: 1px solid var(--slate-3) !important; }
  .qty__cell:last-child { border-bottom: 0 !important; }
  .qty__slot { min-height: 52px; }

  .sched thead th { font-size: 8px; letter-spacing: .14em; }
  .sched thead th + th, .sched tbody td + td { padding-left: 10px; }

  .rec__row { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 12px 0; }
  .bidx__row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .bidx__s { grid-column: 2; }

  .form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scopepick { grid-template-columns: minmax(0, 1fr); }
  .inv__d { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .inv__step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }

  .close__actions { flex-direction: column; align-items: stretch; }
  .close__actions .btn { width: 100%; }
  .bid__actions { flex-direction: column; align-items: stretch; }
  .bid__actions .btn { width: 100%; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* 480 */
@media (max-width: 480px) {
  .tblock { grid-template-columns: minmax(0, 1fr); }
  .tblock__cell { border-right: 0; }
  .tblock__cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--slate-3); }
  .tblock__cell:last-child { border-bottom: 0; }
  .tblock--light .tblock__cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .tblock--light .tblock__cell:last-child { border-bottom: 0; }
  .dim__txt { letter-spacing: .16em; }
  .eq__strip img { aspect-ratio: 3 / 2; }
}

/* 400 — small phone */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .btn { padding: 17px 20px; letter-spacing: .1em; }
  .eyebrow { letter-spacing: .2em; gap: 11px; }
  .eyebrow::before { width: 22px; }
  .header__inner { gap: 12px; }
  .burger { width: 40px; margin-right: -8px; }
  .bidbtn { padding: 11px 12px; letter-spacing: .12em; }
  .rec__work span { letter-spacing: .14em; padding: 6px 9px; }
  .spec__k, .qty__k { letter-spacing: .2em; }
}

/* 360 — the narrowest phones the brief asks for, plus a margin */
@media (max-width: 360px) {
  .spec__grid { grid-template-columns: minmax(0, 1fr); }
  .spec__cell { border-right: 0 !important; padding-left: 0 !important; }
  .spec__cell:last-child { border-bottom: 0; }
  .bidbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bidbtn::after { content: "BID"; }
  .scope { gap: 7px; }
  .scope i { display: none; }
  .first__seq b { letter-spacing: .16em; }
}

/* ============================== 17. MOTION =============================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .is-in { transition: none !important; }
  .stratum:hover .stratum__media img { transform: none; }
  .rec:hover .rec__media img { transform: none; }
  .stratum:hover .stratum__node { transform: none; }
  .bidx__row:hover { padding-left: 0; }
  .btn--foil::after { display: none; }
  .progress { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Foil text needs a real colour anywhere background-clip: text is missing,
   and in print, where the gradient does not carry. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title em, .stratum:hover .stratum__n { background: none; color: var(--gold); }
}

@media print {
  .header, .progress, .burger, .hero__watermark, .close__mark, .grid-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__title em { background: none !important; color: #7C4810 !important; -webkit-text-fill-color: #7C4810 !important; }
  .band--slate, .band--black, .band--ink, .inv, .bid, .qty { background: #fff !important; color: #000 !important; }
}