/* ============================================================
   INNER PAGES

   DERIVED, NOT APPROVED. The comp covers the homepage only. Everything
   here is assembled from components the comp already defines — .eyebrow,
   .d1/.d2/.d3, .lede, .svc-row, .ph, .btn, .cta, and the mono/uppercase
   list treatment from .car-roles — so that Katie is reacting to a known
   vocabulary rather than to new design.

   Three genuinely new values, all called out where they appear:
     1. .mast .d1 display size (between the comp's .d1 and .d2)
     2. .prose body-copy scale (copied from the comp's .faq .ans)
     3. the .quotes and .creds grids, which have no comp equivalent
   ============================================================ */

/* ---------- shared section padding ----------
   The comp repeated padding-block:clamp(3.4rem,8vh,5.6rem) as an inline
   style on four sections. Inner pages use it often enough to earn a class;
   the homepage keeps its inline styles so its parity is untouched. */
.pad-block{padding-block:clamp(3.4rem,8vh,5.6rem)}

/* Two .on-paper sections in a row read as one continuous block. The rule
   separates them; suppressing the star band stops the motif repeating
   mid-page, for the same reason the comp suppresses it on the FAQ.
   Specificity 0,2,0 beats .on-paper::before regardless of source order. */
.pad-block.alt{border-top:1px solid var(--line-d)}
.pad-block.alt::before{content:none}

/* ---------- masthead ----------
   The homepage hero with the film and the 100svh removed. Dark ground so
   the fixed nav, which is transparent until it scrolls, still reads. */
.mast{background:var(--grey-d);border-bottom:1px solid var(--line-l)}
.mast-in{
  padding-top:calc(var(--navh) + clamp(2.2rem,6vh,4.2rem));
  padding-bottom:clamp(2.2rem,6vh,4.2rem);
}
/* NEW VALUE. The comp's .d1 tops out at 6rem, which is a homepage-hero
   size and shouts at a page titled "Utility Right of Way & Road Building".
   .d2 tops out at 3.3rem and reads as a section heading rather than a page
   title. This sits between them. */
.mast .d1{font-size:clamp(2.1rem,5.2vw,4.2rem);max-width:18ch}
.mast .eyebrow{margin-bottom:1rem}
.mast .lede{max-width:46ch;margin:1.2rem 0 0}
.mast-back{transition:color .2s}
.mast-back:hover{color:var(--orange)}

/* ---------- masthead with a long intro ----------
   MEASURED PROBLEM, not a preference. Every masthead on the site lands
   between 405px and 531px tall. Leadership came out at 633 — a full
   130px taller than the next tallest — because its lede is the deck's
   whole hero paragraph at 379 characters, and at the 46ch measure above
   that stacks to SIX lines where every other page runs one to three.
   Page to page the header visibly changed size.

   Widening the measure alone cannot fix it: 379 characters over three
   lines needs ~126 characters a line, which is well past the point where
   a line is comfortable to read. Two columns gets the same reduction
   while keeping each line around 60 — so the text spans the width of the
   page, as it should on a page with this much to say, and the block is
   three lines deep instead of six.

   Single column below 900px, where there is no width to give. */
.mast--wide .lede{max-width:74ch}
@media(min-width:900px){
  .mast--wide .lede{
    max-width:none;
    columns:2;column-gap:clamp(2rem,4vw,3.6rem);
  }
  /* Stops a column breaking after one line and orphaning the rest. */
  .mast--wide .lede{orphans:2;widows:2}
}

/* ---------- prose (the_content) ---------- */
.prose{max-width:70ch}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
/* Scale, line-height and opacity lifted from the comp's .faq .ans, which
   is its only established body-copy-on-paper treatment. */
.prose p{font-size:.95rem;line-height:1.68;opacity:.78;margin:0 0 1.15rem}
.prose h2{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:-.03em;line-height:1.1;font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  margin:2.4rem 0 1rem;
}
.prose h3{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:400;color:var(--earth-t);
  margin:2rem 0 .8rem;
}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--earth-t)}
.prose strong{font-weight:500}

/* Capability lists get the comp's .car-roles treatment — mono, uppercase,
   one bordered row each. It is the design's existing way of rendering "a
   list of things we do", and these lists are exactly that. Borders switch
   to --line-d because this sits on paper rather than on dark ground. */
.prose ul{list-style:none;margin:1.2rem 0 1.6rem;padding:0;border-top:1px solid var(--line-d)}
.prose ul li{
  padding:.72rem 0;border-bottom:1px solid var(--line-d);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;opacity:.78;line-height:1.5;
}
.prose ol{margin:1.2rem 0 1.6rem;padding-left:1.2rem}
.prose ol li{font-size:.95rem;line-height:1.68;opacity:.78;margin-bottom:.5rem}

/* Prose on dark ground (the Contact page sits inside .cta). */
.prose--dark p{opacity:.82}
.prose--dark h2,.prose--dark h3{color:var(--paper)}
.prose--dark ul{border-top-color:var(--line-l)}
.prose--dark ul li{border-bottom-color:var(--line-l);opacity:.72}

/* ---------- testimonials ----------
   NEW GRID, no comp equivalent. The quote itself deliberately does NOT use
   the comp's .coo blockquote treatment: that is uppercase display type
   sized for a short pull quote, and these run to 30 words, where uppercase
   display becomes hard work. Body copy plus the comp's .sig attribution
   keeps it readable and still entirely within the design's vocabulary. */
.quotes-sec{background:var(--grey)}
.quotes{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:900px){.quotes{grid-template-columns:1fr 1fr;gap:3rem}}
.quote{margin:0;padding-left:1.3rem;border-left:3px solid var(--orange)}
.quote blockquote{
  margin:0;font-size:clamp(1rem,1.3vw,1.12rem);font-weight:300;
  line-height:1.6;opacity:.88;
}
.quote .sig{
  display:block;margin-top:1.1rem;padding-top:.9rem;
  border-top:1px solid var(--line-l);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.74;line-height:1.9;font-style:normal;
}

/* ---------- credentials ----------
   Placeholders until the client supplies the four logos AND tells us what
   they certify. See the CONTENT NEEDED note in page-about.php. */
.creds{display:grid;gap:1px;grid-template-columns:repeat(2,1fr);background:var(--line-d);border:1px solid var(--line-d)}
@media(min-width:760px){.creds{grid-template-columns:repeat(4,1fr)}}
.cred{position:relative;aspect-ratio:3/2;background:var(--paper)}

/* ---------- footer address ----------
   The comp's footer address was three short lines. It now carries a street
   address and phone as well, so it needs a little more room to breathe. */
.foot .addr{max-width:34ch}

/* ============================================================
   ROUND-ONE FEEDBACK — newly filled photography slots
   ============================================================ */

/* Slot 8. .coo-img is a 4/5 box with overflow hidden; the comp only ever
   put a .ph placeholder in it, so it never needed image rules. */
.coo-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}

/* Slot 9. The comp's .cta had no media layer at all — .cta-scrim sat
   straight on the body background. The scrim's rgba(21,22,22,.8) is
   unchanged, so form and copy contrast over the photograph is the same as
   it was over flat ground. */
.cta-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta-media img{width:100%;height:100%;object-fit:cover}

/* ---------- masthead with a photograph ----------
   Same construction as the homepage hero: media, scrim, content, in three
   stacked layers. The scrim is the hero's own gradient, not the values
   panels' — this one only ever sits under display type at 4.2rem, never
   under body copy, so it can be lighter without a contrast question. */
.mast--media{position:relative;overflow:hidden}
.mast-media{position:absolute;inset:0;z-index:0}
.mast-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.mast-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,22,22,.72) 0%,rgba(21,22,22,.55) 40%,rgba(21,22,22,.88) 100%);
}
.mast--media .mast-in{position:relative;z-index:2}
.mast--media .mast-in{
  padding-top:calc(var(--navh) + clamp(3rem,9vh,6rem));
  padding-bottom:clamp(3rem,9vh,6rem);
}

/* Slot 8 aspect ratio. The comp set .coo-img to 4/5, sized for the portrait
   crew shot it specified. Every people frame in the client's set is
   landscape (1.75:1), and a 4/5 box crops ~62% of the width out of one —
   which reduced a photograph of three of the team to a photograph of one
   of them. Widening the box to 3/2 keeps the group intact. This IS a
   change to the comp's layout, made because the photography that arrived
   is a different shape from the photography that was briefed. Flagged. */
.coo-img{aspect-ratio:3/2}

/* A .cta used as the FIRST section on a page, with no masthead above it.
   The fixed nav is --navh tall and overlays the top of the document, so
   without this the eyebrow sits under it wherever .contact-in's own
   padding-block (clamp 3.4rem-5.6rem) computes smaller than --navh — which
   it does at narrow viewports. Matches the masthead's top-padding formula
   so the rhythm is identical to every other page. */
.cta--first .contact-in{
  padding-top:calc(var(--navh) + clamp(2.2rem,6vh,4.2rem));
}