/* ==========================================================================
   Top 100 Leaders in Construction 2026
   Palette from Angela's branding document. Every contrast figure below is
   measured, not estimated, and is recorded because it CONSTRAINS use:

     gold     #C8971B  on white  2.66:1   never text on white, at any size
     silver   #BBBBBD  on white  1.92:1   hairlines and decoration only
     charcoal #4D4D4F  on white  8.43:1   body text and headings
     white    #FFFFFF  on ink   15.88:1

   Two findings that shape the whole system:

   1. White text on a gold button is 2.66:1 and fails. The reflex on a gold CTA
      is white text and it is unreadable. Dark ink on gold is 6.54:1. Every gold
      button here carries dark text.
   2. Charcoal is too light to be the dark-band ground: gold on charcoal is only
      3.17:1. Ink #222224 gives gold 5.97:1 and silver 8.29:1, so dark bands use
      ink and charcoal stays a text colour.
   ========================================================================== */

/* Self-hosted, no Google Fonts request at runtime. Both families came down as
   VARIABLE fonts: one file covers every weight, which is why there is a single
   src per family and a weight RANGE rather than one @font-face per weight.
   font-display: swap so text is readable while the file loads rather than
   invisible. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand, exact, from the branding document */
  --gold:        #C8971B;   /* 2.66:1 on white  -> fills, rules, accents only */
  --silver:      #BBBBBD;   /* 1.92:1 on white  -> hairlines, decoration only */
  --charcoal:    #4D4D4F;   /* 8.43:1 on white  -> body text                  */
  --white:       #FFFFFF;

  /* derived, each with the job its contrast allows */
  --gold-text:   #9A6E08;   /* 4.56:1 on white  -> the ONLY gold safe as text on light */
  --gold-dark:   #A8790A;   /* hover fill, 3.89:1 on white                     */
  /* Gold TEXT on a dark ground. Brand gold is 5.97:1 on flat ink and passes
     there, but a photograph is not flat ink: over warm construction imagery the
     13px eyebrow measured 3.48:1 against its own lightest pixel, because gold
     and a sunlit brown sit at similar luminance. This tone keeps the gold
     reading as gold and clears 4.5:1 over the same photograph. Never use it on
     a light ground: it is LIGHTER than --gold, so it is worse there. */
  --gold-on-dark: #E8C773;
  --ink:         #222224;   /* dark band ground: gold 5.97, silver 8.29, white 15.88 */
  --ink-deep:    #1A1A1C;   /* text on gold, 6.54:1                            */
  --paper:       #FAF9F7;   /* warm off-white section tint                     */
  --line:        rgba(77, 77, 79, 0.16);
  --line-dark:   rgba(255, 255, 255, 0.18);
  --muted:       #6E6E70;   /* 5.517:1 on white -> secondary text              */
  --muted-dark:  rgba(255, 255, 255, 0.72);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Type scale. Every font-size in this file must reference one of these, so a
     scale change is one edit rather than a sweep. */
  --fs-display: clamp(38px, 6vw, 76px);
  --fs-h1:      clamp(32px, 4.6vw, 58px);
  --fs-h2:      clamp(26px, 3.2vw, 40px);
  --fs-h3:      clamp(20px, 1.9vw, 26px);
  --fs-lead:    clamp(18px, 1.5vw, 22px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-micro:   13px;

  --nav-h: 79px;
  --maxw: 1160px;
  --maxw-prose: 720px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(56px, 7vw, 104px);
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--ink); margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
strong { font-weight: 650; color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 20px; background: var(--ink); color: var(--white); text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* The prose column is LEFT aligned inside the page container, not centred. A
   centred 720px column inside a 1160px container reads as a centred page, which
   fights the plumb line running down the left of every other section. */
.wrap--prose { max-width: calc(var(--maxw-prose) + var(--gutter) * 2); margin-right: auto; margin-left: 0; }
.section { padding: var(--section-y) 0; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--muted-dark); }
/* Any heading on a dark ground, not just the ones inside .section--ink. The
   narrower version of this rule left the hero's own h2 painting in --ink on an
   --ink background, roughly 1:1, effectively invisible, and no check caught it
   because the colour was never "gold on light". Scope it to the ground. */
.section--ink h1, .section--ink h2, .section--ink h3,
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--white); }

/* --------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 14px;
}
/* On the ink ground the plain brand gold is 5.97:1, so the darkened text
   variant is not needed and the brand colour itself can be used. */
.section--ink .eyebrow, .on-ink .eyebrow { color: var(--gold-on-dark); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--charcoal); }
.section--ink .lead { color: var(--muted-dark); }
.h-display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.measure { max-width: 62ch; }

.rule { width: 64px; height: 3px; background: var(--gold); border: 0; margin: 26px 0; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
/* Dark ink on gold is 6.54:1. White on gold would be 2.66:1 and fail, which is
   why this rule exists rather than the more obvious white. */
.btn--gold { background: var(--gold); color: var(--ink-deep); border-color: var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--charcoal); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); }
.section--ink .btn--ghost, .on-ink .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.55); }
.section--ink .btn--ghost:hover, .on-ink .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; gap: 24px; min-height: calc(var(--nav-h) - 1px); }
.nav__logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--charcoal);
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); border-bottom-color: var(--gold); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.nav__cta { padding: 12px 22px; }
.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0; background: none;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--ink); }

/* The typographic lockup stands in until the real logo arrives. It is
   deliberately plain so it does not read as a finished mark. */
/* Her supplied logo. The artwork came as a JPEG on a white sheet, which is exactly the
   header ground, so it needs no cut-out here and carries no keying artefacts. The footer
   keeps the text lockup below, because that ground is dark. */
.nav__logo-img { display: block; height: 66px; width: auto; }
@media (max-width: 900px) { .nav__logo-img { height: 52px; } }

.lockup { display: grid; line-height: 1; }
.lockup__top { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.lockup__sub { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); margin-top: 5px; }
.on-ink .lockup__top { color: var(--white); }
.on-ink .lockup__sub { color: var(--gold); }

.nav-mobile { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav-mobile[data-open] { display: block; border-bottom: 1px solid var(--line); background: var(--white); }
  .nav-mobile a {
    display: block; padding: 15px var(--gutter); font-size: var(--fs-small); font-weight: 600;
    text-decoration: none; color: var(--charcoal); border-top: 1px solid var(--line);
  }
  .nav-mobile .btn { margin: 16px var(--gutter) 22px; }
}

/* --------------------------------------------------------------- hero */
.hero { background: var(--ink); color: var(--muted-dark); padding: clamp(64px, 9vw, 128px) 0; }
.hero h1 { color: var(--white); font-size: var(--fs-display); }
.hero__lead { font-size: var(--fs-lead); color: var(--white); margin: 26px 0 0; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* --------------------------------------------------------------- page hero (interior) */
/* Interior page heroes take the same full-bleed photograph treatment as the
   homepage. The scrim is heavier here than on the homepage because these heroes
   are shorter, so the copy sits closer to the top of the frame where sky and
   blown highlights usually are. Measured, not guessed: see
   tools/browser/hero.test.js, which audits every hero on every page against the
   pixels actually rendered behind the text. */
.page-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--muted-dark); padding: clamp(52px, 7vw, 92px) 0; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(26,26,28,.96) 0%, rgba(26,26,28,.9) 46%, rgba(26,26,28,.62) 100%),
    linear-gradient(0deg, rgba(26,26,28,.6) 0%, rgba(26,26,28,.2) 60%);
}
.page-hero .wrap { position: relative; z-index: 2; }
/* A page-hero headline set to the full container width runs to 60+ characters a
   line and reads as a banner rather than a heading. Capped to a measure. */
.page-hero h1 { color: var(--white); font-size: var(--fs-h1); max-width: 17ch; }
.page-hero p { margin-top: 18px; max-width: 60ch; }

/* --------------------------------------------------------------- generic grids */
.grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card { padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.card__num { font-family: var(--serif); font-size: var(--fs-h3); color: var(--gold-text); }
.card h3 { margin: 12px 0 10px; font-size: var(--fs-h3); }
.card p { color: var(--muted); font-size: var(--fs-small); }
.section--ink .card { background: rgba(255,255,255,.04); border-color: var(--line-dark); }
.section--ink .card p { color: var(--muted-dark); }
.section--ink .card__num { color: var(--gold-on-dark); }

/* --------------------------------------------------------------- criteria list */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 34px; margin-bottom: 14px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 9px;
  border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; color: var(--ink);
}
.faq__q::after { content: "+"; flex: 0 0 auto; font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--gold-text); }
.faq__q[aria-expanded="true"]::after { content: "\2212"; }
.faq__a { padding: 0 0 24px; color: var(--muted); max-width: 68ch; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------- prose (legal pages) */
.prose h2 { font-size: var(--fs-h3); margin: 40px 0 14px; }
.prose h3 { font-size: var(--fs-lead); margin: 28px 0 10px; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose ul { color: var(--charcoal); }
.prose .updated { font-size: var(--fs-small); color: var(--muted); }

/* --------------------------------------------------------------- callout */
.callout { padding: 26px 30px; background: var(--paper); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; }
.callout p { font-size: var(--fs-small); color: var(--charcoal); }

/* --------------------------------------------------------------- footer */
.footer { background: var(--ink); color: var(--muted-dark); padding: 64px 0 34px; font-size: var(--fs-small); }
.footer a { color: var(--muted-dark); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--white); text-decoration: underline; }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer h2 { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  font-size: var(--fs-micro); color: rgba(255,255,255,.6);
}
.footer__epic { margin-top: 14px; color: rgba(255,255,255,.6); }

/* ==========================================================================
   THE PLUMB LINE
   --------------------------------------------------------------------------
   Replaces the alternating full-width colour bands, which give a page a
   striped rhythm where every section shouts equally and nothing leads.

   A plumb line is the oldest tool on a building site for establishing true
   vertical, which is also what this program claims good leaders do for the
   people around them. So the page is stitched together by one continuous
   hairline running down the content column, with survey-style markers on it.

   What that buys, structurally:
   - Sections no longer need a background change to feel separate, because the
     line already carries continuity. Background changes become RARE: on the
     homepage there are three below the nav, not one per section. The hero, one
     full-bleed feature band, and one tinted band under the questions. Each is
     therefore a signal rather than a stripe.
   - Separation comes from horizontal OFFSET instead. The eye moves left/right
     down the page rather than being cut by repeated horizontal edges.
   - One panel deliberately straddles a section boundary, so the last hard
     horizontal edge on the page is broken too.

   The line is built from a ::before on each band rather than one long element,
   so consecutive bands form an unbroken line with no measuring and no JS. Each
   band declares --band-bg, which the markers use to punch a hole in the line so
   it reads as passing behind them.
   ========================================================================== */

.band {
  --band-bg: var(--white);
  --spine-x: 40px;
  position: relative;
  background: var(--band-bg);
  padding: clamp(52px, 6.5vw, 92px) 0;
}
.band--paper { --band-bg: var(--paper); }
.band--ink { --band-bg: var(--ink); color: var(--muted-dark); }
.band--ink h2, .band--ink h3 { color: var(--white); }

/* The line itself. Sits inside the wrap's gutter so it aligns with the text
   column rather than floating at the viewport edge. */
/* The line must run the FULL height of the band so consecutive bands join
   without a seam, which means it hangs off .band (full-bleed) rather than off
   the centred .band__inner. But it must align with the CENTRED column, not the
   viewport edge. So its left is computed the same way the column's is: half the
   leftover width, plus the gutter, plus the spine offset. The markers below use
   the identical expression measured from .band__inner, which is why the two
   line up at every width. Getting this wrong is invisible in code and obvious
   on screen: the first version put the marker 90px right of its own line. */
.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter) + var(--spine-x));
  width: 1px;
  background: var(--gold);
  opacity: .38;
}
.band--ink::before { opacity: .55; }

.band__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Content clears the line. The offset variants below then move it further,
   which is what creates the rhythm that the removed colour bands used to. */
.band__body { padding-left: calc(var(--spine-x) + 44px); max-width: 760px; }
.band--offset .band__body { margin-left: auto; }
.band--wide .band__body { max-width: none; }

/* Survey marker. Absolutely positioned ON the line, with the band's own
   background behind it so the hairline appears to run underneath. */
.band__marker {
  position: absolute;
  left: calc(var(--gutter) + var(--spine-x));
  top: 4px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--band-bg);
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}
.band--ink .band__marker { color: var(--gold-on-dark); }
.band__marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold);
  opacity: .5;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  /* The line moves to the very edge of the gutter and the content stops
     indenting for it: at this width an indent costs more than the rhythm is
     worth. */
  .band { --spine-x: 0px; }
  .band::before { left: calc(var(--gutter) / 2); }
  .band__body { padding-left: 0; max-width: none; }
  .band__marker { position: static; transform: none; width: auto; height: auto; place-items: start; margin-bottom: 14px; background: none; }
  .band__marker::after { display: none; }
}

/* --------------------------------------------------------------- overlap
   One panel straddles the boundary between two bands. This is the only place
   on the page where a hard horizontal edge is broken, which is why it reads as
   deliberate rather than as a stray card. The band below it gets top padding
   to make room, so nothing collides at any width. */
/* --------------------------------------------------------------- overlap
   One panel straddles the boundary between two bands. It is the only place on
   the page where a hard horizontal edge is broken, which is what makes it read
   as deliberate rather than as a stray card.

   It is the LAST child of the band ABOVE and hangs DOWN on a negative
   margin-bottom. Three earlier shapes failed, all of which looked right in the
   stylesheet:
   - negative margin-BOTTOM on a panel at the TOP of the lower band moves
     everything after it and leaves the panel inside its own band;
   - negative margin-TOP on that panel is eaten by the band's own padding-top;
   - and holding the distance as separate literals let a 92px padding-bottom
     silently cancel an 84px negative margin at one width only.

   --overhang is now the single number. It drives the negative margin and the
   padding restored below, so the two cannot drift apart. */
.band--has-overlap { --overhang: 84px; padding-bottom: 0; }

.overlap {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: calc(-1 * var(--overhang));
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--gold);
  color: var(--ink-deep);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(34, 34, 36, .18);
}
.overlap h2, .overlap h3 { color: var(--ink-deep); }
.overlap p { color: rgba(26, 26, 28, .84); }
.overlap__grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 800px) { .overlap__grid { grid-template-columns: 1.5fr auto; gap: 34px; } }

.band--after-overlap { --overhang: 84px; padding-top: calc(var(--overhang) + clamp(44px, 5vw, 72px)); }

@media (max-width: 760px) {
  .band--has-overlap, .band--after-overlap { --overhang: 56px; }
}

/* --------------------------------------------------------------- feature band
   Full-bleed photography with the copy sitting on it. The scrim is a gradient
   rather than a flat wash so the image still reads as an image at the edges
   while the text sits on ground dark enough to measure. */
.feature { position: relative; padding: clamp(78px, 10vw, 140px) 0; background: var(--ink); overflow: hidden; }
.feature__media { position: absolute; inset: 0; z-index: 0; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(26,26,28,.94) 0%, rgba(26,26,28,.86) 42%, rgba(26,26,28,.55) 100%);
}
.feature .wrap { position: relative; z-index: 2; }
.feature h2 { color: var(--white); }
.feature p { color: rgba(255,255,255,.86); }

/* ==========================================================================
   HERO MEDIA
   Takes a still or a looping video behind the copy. Three things matter:

   1. The scrim is measured, not guessed. Copy sits over the LEFT of the frame
      where the gradient is heaviest, so the headline keeps its contrast even
      over a bright sky, while the right of the frame stays legible as an image.
   2. .hero__fallback paints underneath, so the hero is never a bare rectangle
      while the media loads, and is still a designed hero if no media is
      supplied at all.
   3. The video is decorative: muted, inert to clicks, and dropped entirely for
      anyone who asked for reduced motion. A hero video must never be the only
      carrier of meaning, so nothing is written into it that is not also in the
      HTML.
   ========================================================================== */

.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 3; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* Deliberate placeholder, not an accident: an architectural grid in brand
   charcoal with a low gold rake across it. Reads as a designed ground on its
   own, and is completely hidden the moment real media is dropped in. */
.hero__fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(118deg, rgba(200,151,27,.14) 0%, rgba(200,151,27,0) 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 92px),
    radial-gradient(120% 90% at 78% 18%, #34343a 0%, #222224 55%, #1a1a1c 100%);
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(95deg, rgba(26,26,28,.95) 0%, rgba(26,26,28,.88) 38%, rgba(26,26,28,.52) 72%, rgba(26,26,28,.38) 100%),
    linear-gradient(0deg, rgba(26,26,28,.72) 0%, rgba(26,26,28,0) 38%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media video { display: none; }
}

/* ==========================================================================
   CONCAVE EDGES
   --------------------------------------------------------------------------
   Bends the horizontal divider between a dark band and the light one beside it,
   so the light side appears to press INTO the dark side rather than meeting it
   on a ruled line.

   Built from two very wide ellipses filled with the ADJACENT band's colour,
   each straddling one edge. `overflow: hidden` on the band throws away the
   outer half, leaving a single shallow arc. That is why the effect needs no
   SVG, no image and no extra markup.

   The geometry is deliberately shallow. --concave-depth is how far the light
   side intrudes at the centre; --concave-spread is how much wider than the band
   the ellipse is. Spread is what controls whether this reads as a CURVE or just
   as a shorter band: at 100% the arc runs to zero at both edges and the
   tangents turn vertical, which looks like a lens; far above that the arc
   flattens until the band merely looks trimmed. 112% keeps a visible bend in
   the middle while still meeting the edges softly.

   The ellipses carry the light colour, so they must sit ABOVE the band's own
   photograph and scrim, hence z-index 3.
   ========================================================================== */

.concave {
  --concave-depth: clamp(26px, 3.4vw, 52px);
  --concave-spread: 112%;
  --concave-color: var(--white);
  position: relative;
  overflow: hidden;
}
.concave::before,
.concave::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: calc((100% - var(--concave-spread)) / 2);
  width: var(--concave-spread);
  height: calc(var(--concave-depth) * 2);
  background: var(--concave-color);
  border-radius: 50%;
  pointer-events: none;
}
.concave::before { top: calc(var(--concave-depth) * -1); }
.concave::after { bottom: calc(var(--concave-depth) * -1); }

/* Only one edge, for a band whose other side is not a colour change. */
.concave--top-only::after { display: none; }
.concave--bottom-only::before { display: none; }

/* The copy has to clear the deepest point of the arc, or a heading collides
   with a curve that is not part of any element's box. */
.concave > .wrap { padding-top: var(--concave-depth); padding-bottom: var(--concave-depth); }

@media (max-width: 760px) {
  /* A curve of the same depth across a narrow viewport is proportionally much
     deeper and starts to read as a shape rather than an edge. */
  .concave { --concave-depth: 20px; --concave-spread: 128%; }
}

/* ==========================================================================
   HERO SIZE
   --------------------------------------------------------------------------
   The hero is one viewport tall and never more. Measured before this was
   built: the original hero overflowed on every common laptop height (98px over
   at 1440x800, 124px at 1366x768, 163px at 1280x720) and by 312 to 516px on
   phones. The practical detail that caused most of that bulk now lives in the
   .intro section immediately below, where it can breathe.

   --nav-h is shared with the nav's own min-height, so "one viewport" cannot
   drift from whatever the nav actually measures.

   100svh, not 100vh: on mobile 100vh is the tallest the viewport ever gets,
   with the browser chrome retracted, so a 100vh hero is cut off on load, which
   is the exact failure this is meant to prevent.
   ========================================================================== */

.hero {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: center;
  padding: clamp(28px, 4vw, 56px) 0;
}
.hero__body { position: relative; z-index: 3; }

/* ==========================================================================
   INTRO
   The statement and the practical facts, directly under the hero. Deliberately
   outside the numbered plumb-line sequence: it is a summary, not one of the
   four steps, so it carries no marker and the line starts at 01 below it.
   ========================================================================== */

.intro { padding: clamp(48px, 6vw, 88px) 0; background: var(--white); }
.intro__statement { max-width: 20ch; }
.intro__lead { margin-top: 20px; max-width: 56ch; }

.facts { display: grid; gap: 0; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; border-top: 2px solid var(--gold); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .fact { border-bottom: 0; padding-right: 28px; } }
/* On this LIGHT ground the brand gold is 2.66:1 and unusable as text, so the
   labels take the darkened --gold-text at 4.56:1. The identical markup on the
   dark hero could use plain --gold; moving it here changes what is legal. */
.fact dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.fact dd { margin: 8px 0 0; font-family: var(--serif); font-size: var(--fs-h3); color: var(--ink); }

/* Height-aware compression. Sizing a hero on viewport WIDTH alone is what
   overflowed the common laptop heights: 1366x768 and 1280x720 are wide enough
   to get the full display type and short enough that it does not fit. These
   queries key on height, which is the dimension that is actually scarce. */
@media (min-width: 700px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(32px, 4vw, 52px); }
  .hero { padding: 24px 0; }
  .hero__lead { font-size: 18px; }
}
@media (min-width: 700px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(28px, 3.4vw, 42px); }
  .hero__lead { font-size: 17px; }
}

@media (max-width: 700px) {
  .hero { padding: 26px 0; }
  .hero__lead { margin-top: 20px; }
  .fact { padding: 16px 0; }
  .fact dd { font-size: var(--fs-body); }
}
/* Small, short phones. A 375x667 or 360x640 screen has roughly 560px of usable
   height once the nav is removed, which the default phone sizing overran. */
@media (max-width: 700px) and (max-height: 740px) {
  .hero h1 { font-size: clamp(24px, 6.6vw, 30px); }
  .hero__lead { font-size: 15px; margin-top: 16px; }
  .hero__actions { margin-top: 22px; gap: 10px; }
  .hero__actions .btn { padding: 13px 24px; }
}
@media (max-width: 700px) and (max-height: 620px) {
  .hero { padding: 16px 0; }
  .hero h1 { font-size: 22px; }
  .hero__lead { font-size: 14px; margin-top: 12px; }
  .hero__actions { margin-top: 16px; }
}

/* Mobile hero scrim. On a phone the copy runs the full width, so the horizontal
   gradient that protects it on desktop (heavy on the left, where the text is)
   protects nothing: the brightest part of the frame, the sun, sits dead centre
   behind the headline. Measured against the actual video frame rather than the
   still, because the video is brighter: the eyebrow came in at 3.33:1 against
   its own lightest pixel and needed 4.5. */
@media (max-width: 700px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(26,26,28,.9) 0%, rgba(26,26,28,.82) 40%, rgba(26,26,28,.92) 100%),
      linear-gradient(95deg, rgba(26,26,28,.5) 0%, rgba(26,26,28,.35) 100%);
  }
}

/* The hero headline is capped to a display measure. Left uncapped it ran the
   full 1064px column, which at 76px is a banner rather than a headline. */
.hero h1 { max-width: 15ch; }
@media (max-width: 700px) { .hero h1 { max-width: none; } }