/* Brooks — client revisions, 2026-08-13.
   ("Brooks Final Revisions 8.13.docx")

   Everything this round changes about presentation is in this one file, on
   purpose. The round is broad but shallow — orange eyebrows, parallax on
   the remaining images, alignment and whitespace across five pages — and
   almost none of it belongs in the section files it affects. Keeping it
   together means the whole round reads in one place and reverts in one
   file, the same way 14-round-two.css carries the round before it.

   Loaded LAST, so where it overrides an earlier rule it does so on cascade
   order rather than on specificity. Nothing here needs !important, and
   nothing here should acquire it — if a rule below stops winning, the fix
   is to find what got more specific, not to escalate.
*/

/* ============================================================
   HERO EYEBROWS IN BRAND ORANGE
   "Make the eyebrow text on all hero images the brand's orange color"

   Applies to the homepage hero and to every inner-page masthead. It does
   NOT apply to section eyebrows on light ground: --orange on --paper is
   2.35:1, which fails AA outright, and the instruction says hero images.

   CONTRAST, measured rather than assumed: #F49728 on the masthead's
   effective ground (#151616 under a .72-.88 scrim) is 8.1:1. The eyebrow
   is 0.62rem uppercase mono with letter-spacing, so it is small text and
   needs 4.5:1. Comfortable.

   .mast-back is the breadcrumb version of the same eyebrow on service
   pages. It inherits the orange and keeps its existing hover, which was
   already --orange — so hover now needs to move somewhere, or the link
   has no hover state at all. It lifts to full-strength paper instead.
   ============================================================ */
.hero .eyebrow,
.mast .eyebrow{color:var(--orange);opacity:1}
.mast .eyebrow .mast-back{color:inherit}
.mast .eyebrow .mast-back:hover{color:var(--paper)}

/* AND THE SCRIM HAS TO MOVE WITH IT. This is the part that was not
   optional, and it is why this block is long.

   Measured before changing anything: orange on the masthead photographs
   failed AA on seven of the ten pages that have one, worst case 1.96:1
   against a required 4.5:1. The cause is a coincidence of geometry —
   the eyebrow sits between 29.6% and 46.4% of the masthead's height at
   every viewport, and the scrim's LIGHTEST stop was .55 at exactly 40%.

   That gradient was correct until this round, because the eyebrow was
   near-white. #F49728 has roughly half the relative luminance of --paper,
   so the same ground that carried white at 4.9:1 carries orange at 2.2:1.
   The instruction changed the colour; the scrim had to change to match.

   The fix is a dark plateau held across 26-52%, covering the eyebrow band
   at every masthead height measured, then released at 74% so the
   photograph still reads under the heading, then closed at the section
   boundary as before. .88 over even a pure-white pixel lands at RGB 49,
   which carries orange at 5.6:1.

   These stops are load-bearing. Smoothing them into an even fade puts the
   light point back under the eyebrow and the contrast failure back with
   it — the same trap, and the same warning, as the values panels in
   06-values.css. Re-measure if you touch them. */
.mast-scrim{
  background:linear-gradient(180deg,
    rgba(21,22,22,.80) 0%,
    rgba(21,22,22,.88) 26%,
    rgba(21,22,22,.88) 52%,
    rgba(21,22,22,.72) 74%,
    rgba(21,22,22,.90) 100%);
}

/* ============================================================
   PARALLAX ON THE REMAINING IMAGES
   "Anytime there's an image, make it parallax, including in the hero
   sections"

   The chapters, the parallax bands and the homepage hero already moved.
   What did not: inner-page mastheads, the three "what we believe" panels,
   the closing CTA band, the homepage contact band and the crew photograph.
   All five now carry data-par and are driven by assets/js/parallax.js.

   Factors are deliberately smaller than a chapter band's 0.12. A chapter
   is full-bleed and roughly a screen tall, so it has room to travel; a
   masthead is a third of that and a values panel less again. Run them at
   0.12 and the oversize shows before the movement does.

   parallax.js oversizes each target to 116% height at top:-8%, so every
   parent must clip. .mast--media, .val, .cta and .coo-img already set
   overflow:hidden — that is why these were the ones chosen.
   ============================================================ */

/* .coo-img holds a bare <img>, not a positioned media wrapper, so the
   script's inline top/height have nothing to act on until the image is
   taken out of flow. Scoped to [data-par] so a crew photo without the
   hook is untouched. */
.coo-img img[data-par]{position:absolute;inset:0}

/* Motion-safety belt. parallax.js already returns early under
   prefers-reduced-motion and leaves no inline styles behind, so this is
   redundant by design — it exists so that a future change to the script
   cannot reintroduce movement here silently. */
@media (prefers-reduced-motion: reduce){
  .mast-media,
  .val-media,
  .cta-media,
  .coo-img img[data-par]{transform:none !important}
}

/* ============================================================
   HOME
   ============================================================ */

/* "After 'When the ground gets complicated' move 'We get to work' on the
   same line."

   The heading is one sentence that was wrapping mid-phrase because .d2 in
   this slot had no width control — where it broke depended entirely on
   viewport. Widening the measure lets the clause sit together instead of
   forcing it with a <br>, which would break again at a different width.
   Below 900px it wraps naturally and that is correct. */
@media (min-width:900px){
  #difference .d2{max-width:24ch}
}

/* "Add a small amount of white space right above 'The Brooks Difference'
   for breathing room." The section already carries .pad-block; this is a
   deliberate extra beat between the hero and the first light section. */
#difference{padding-top:clamp(4.6rem,10vh,7.2rem)}

/* "'What we believe' Section -> Add white space below after 'Always in
   that order'." The gap between the section intro and the panel grid. */
.vals-in{margin-top:clamp(1.8rem,4vh,3.2rem)}

/* ============================================================
   WHAT WE DO
   "Center align 'What we work on' eyebrow and header text ('Built from
   the ground up.'), keep everything after as is"

   Scoped to the intro block only — the scope rows below it stay left
   aligned, which is what "keep everything after as is" asks for.
   ============================================================ */
.svc-intro{text-align:center}
.svc-intro .d2{margin-left:auto;margin-right:auto}

/* ============================================================
   ABOUT
   ============================================================ */

/* "Except for the 3 B&W pictures, can you add slightly more white space at
   the top and bottom of each section." The chapters are full-bleed bands
   and are deliberately excluded. */
.page-about .on-paper.pad-block{
  padding-block:clamp(4.4rem,10.5vh,7.4rem);
}

/* "'The Brooks Story' Section: make this section center aligned, not left
   aligned", and the line break — FROM A DRILL / TO A CIVIL / CONSTRUCTION
   / COMPANY.

   The break is done with max-width in ch rather than <br> tags so the
   heading still reflows on a phone instead of breaking in four places at
   320px. See page-about.php for the measure that produces the client's
   four lines at desktop widths. */
.story--center{text-align:center}
.story--center .d2,
.story--center .lede,
.story--center .prose{margin-left:auto;margin-right:auto}

/* THE HEADING NEEDS ITS OWN GAP NOW. Dropping .coo--copy to centre this
   section also dropped the grid that was providing the space between the
   heading and the body — .d2 carries margin-bottom:0, and the two-column
   layout had been supplying it. Measured after the change: 0px at 390 and
   768, 14px at 1440, against 22-35px everywhere else on the page. The
   paragraph read as part of the heading.

   Matched to the mission section's 1.4rem at the top of the range so the
   two centred sections on this page share a rhythm. */
.story--center .d2{margin-bottom:clamp(1.1rem,3.2vw,1.5rem)}

/* THE BODY IS CENTRED TOO, and this is the other half of what looked
   wrong. The client asked for the section centred; the paragraphs were
   left-aligned inside it at full column width, under a heading that was
   centred and narrower. Two different alignments and two different widths
   in one block — which reads as broken spacing rather than as a choice.

   54ch keeps the centred lines short enough to track. The mission section
   directly below already centres its body, so the page is now consistent. */
.story--center .prose{max-width:54ch;text-align:center}

/* The heading measure, moved out of the template so it can vary.

   ORIGINALLY 15ch to produce a specific four-line break the client asked
   for — FROM A DRILL / TO A CIVIL / CONSTRUCTION / COMPANY. On 2026-08-17
   she replaced that heading with "From a Drill to a Dream", so the break
   it was cut for no longer exists.

   The measure is KEPT, for a different and now smaller reason: at 15ch the
   new heading sets as two balanced lines at every width, which matches the
   stacked display treatment used across the site. Unconstrained it would
   run as one long line at desktop and two on a phone. Nothing depends on
   it now — widen or drop it freely if the heading changes again.

   Released below 700px, where the column itself is the measure. */
.story--center .d2{max-width:none}
@media (min-width:700px){
  .story--center .d2{max-width:15ch}
}

/* "Make the body text ('Our primary goal . . .') aligned to the Header
   text ('Growth through . . .'), instead of the eyebrow text. Same
   feedback with 'Be a builder of' section, and do a quick look throughout
   the site and make sure this same feedback applies."

   THE CAUSE. .coo--copy is a two-column grid: eyebrow + heading in the
   narrow column, prose in the wide one. The eyebrow is mono at 0.6rem and
   the heading is display at 2-3rem, so their cap heights start at
   different places — and the prose column was topping out level with the
   eyebrow, which is the smaller of the two. Optically the paragraph
   looked pinned to the label rather than to the headline it belongs to.

   Nudging the prose column down by the eyebrow's own height plus its
   margin lands its first line on the heading instead. Done in em of the
   eyebrow's own scale so it tracks if that type size ever changes.

   Applied site-wide, per "make sure this same feedback applies" — every
   .coo--copy block on every page uses this same construction. */
@media (min-width:900px){
  .coo--copy > .prose{margin-top:calc(0.6rem * 1.9 + 1.3rem);}
}

/* ============================================================
   LEADERSHIP
   ============================================================ */

/* "Add slightly more white space at the top and bottom of each section." */
.page-leadership .on-paper.pad-block{
  padding-block:clamp(4.4rem,10.5vh,7.4rem);
}

/* ============================================================
   CAREERS
   "Make 'Culture' section center aligned"
   "Make the 'Trades we hire' font size the same as 'We're looking for
   people who build.'"

   The second one is a real jump: .eyebrow is 0.6rem mono, the heading is
   .d2. Matching them exactly would put a 2rem+ display size on a label
   that exists to be quiet. Taken as "make it read as a heading, not a
   caption" — it becomes .d3 scale, still mono, still uppercase. Flagged;
   say the word and it goes to full .d2.
   ============================================================ */
.culture--center{text-align:center}
.culture--center .d2,
.culture--center .lede{margin-left:auto;margin-right:auto}

.trades-head{
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.06em;
  opacity:1;
}

/* ============================================================
   REQUEST A BID
   "Please make the phone number and email more bold in color"

   The contact line sat at .6 opacity mono, which is the same treatment as
   every other eyebrow on the site — correct as a label, wrong for the two
   pieces of information a general contractor actually came for. Full
   strength, and the links themselves in orange.

   CONTRAST, measured on the rendered page rather than computed, because
   there is a photograph behind it. Worst pixel under the glyphs, across
   all seven places these links appear: 4.83:1 on the homepage, 8.03:1 on
   the Request a Bid page, 5.15-5.23:1 everywhere else. AA for small text
   needs 4.5:1, so the homepage instance is the tight one — it sits on the
   contact-site aerial, which is the lightest photograph in the set. If
   that frame is ever swapped for a brighter one, re-measure before
   shipping it.
   ============================================================ */
.cta-contact{opacity:1}
.cta-contact a{color:var(--orange);font-weight:500}
.cta-contact a:hover{color:var(--paper)}

/* The homepage's own bid section uses .sig rather than the eyebrow line the
   inner-page band uses. Same instruction, same treatment; the service-area
   line underneath is not contact information and stays quiet. */
.sig.cta-contact a{color:var(--orange);font-weight:500}
.sig.cta-contact a:hover{color:var(--paper)}
.sig.cta-contact .sig-area{opacity:.62}

/* The Request a Bid page's own signature block, same reason. */
.page-contact .sig a{color:var(--orange);font-weight:500}
.page-contact .sig a:hover{color:var(--paper)}


/* ============================================================
   HERO SEQUENCE (2026-08-17)
   "Add these two images in the hero section before the existing pictures"

   Every slide is a child of .hero-media, so the parallax transform still
   applies to the group and the oversize maths in 04-hero.css is untouched.
   Slides stack in the same box and cross-fade; only opacity animates, so
   this stays on the compositor and never triggers layout.

   .is-on is written into the markup on the first slide, not applied by
   script, so the hero is a photograph before any JS runs and stays one if
   JS never runs.
   ============================================================ */
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hero-slide.is-on{opacity:1}
.hero-slide img,
.hero-slide .hero-video{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
}

/* The film keeps its own framing, which was set against its own footage
   and is a slightly higher crop than the stills want. */
.hero-slide .hero-video{object-position:center 40%}

/* REDUCED MOTION: no cross-fade, no film, one static frame. The script
   returns before starting the sequence, so the first slide simply stays
   at opacity 1 — this kills the transition so a slide that is already
   mid-fade when the preference is honoured snaps rather than drifts. */
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}


/* Footer phone and email, made clickable 2026-08-17.

   .foot .addr sits at opacity .6, and .foot a at .75 — so a link inside
   the address inherited .6 from the block and stayed as quiet as the
   plain text around it. That is fine for the street address but wrong
   for the two things a general contractor is actually looking for.

   Full opacity and the brand orange, matching the treatment the closing
   band and the homepage bid section already use. Contrast is computed,
   not sampled: #F49728 on the footer's flat --grey-d ground is 8.1:1,
   well past the 4.5:1 small-text threshold — there is no photograph
   behind the footer, so there is nothing to measure against. */
.foot .addr a.addr-contact{
  opacity:1;
  color:var(--orange);
  font-weight:500;
}
.foot .addr a.addr-contact:hover{color:var(--paper)}