/* ============================================================
   CLIENT REVISIONS
   Loaded after style.css, so anything here wins without that file
   needing to be touched on a live site.
   ============================================================ */

/* ------------------------------------------------------------
   Services is a button now, not a link.

   It used to be an anchor pointing at Residential, which meant
   clicking the parent skipped the choice the panel exists to offer.
   A button carries none of an anchor's default styling, so the pieces
   the link rule gave it have to be restated.
   ------------------------------------------------------------ */
.nav__link--parent{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Desktop: match the anchors beside it exactly. */
@media(min-width:1025px){
  .nav__link--parent{
    display:inline-flex;align-items:center;gap:6px;
    padding-block:8px;
    font-size:.95rem;font-weight:600;
    letter-spacing:0;
    color:var(--white);
    border-bottom:2px solid transparent;
    transition:color .18s ease-out,border-color .18s ease-out;
  }
  .nav__item:hover .nav__link--parent,
  .nav__link--parent:hover{color:var(--amber)}
}

/* ------------------------------------------------------------
   Mega panel: two columns instead of five.

   The service list is now Residential and Commercial, eight items
   each, so the panel is two tall columns rather than five short ones.
   Narrower and easier to scan.
   ------------------------------------------------------------ */
.mega__inner--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px;
  margin-inline:auto;
}

/* The column heading is a link now, so the category itself is
   reachable without picking a service first. */
.mega__col h4 a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease-out;
}
.mega__col h4 a:hover{color:var(--white)}

@media(max-width:1024px){
  /* The sheet stacks, so the two-column rule is undone here. */
  .mega__inner--two{
    grid-template-columns:1fr;
    max-width:none;
    margin-inline:0;
  }

  /* Button inside the sheet: full-width row like the anchors. */
  .nav__link--parent{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;
    min-height:56px;
    padding:0 var(--gutter);
    font-size:1.0625rem;font-weight:600;
    color:var(--white);
    text-align:left;
  }
  .nav__link--parent:active{background:rgba(255,255,255,.06)}
  .nav__link--parent:focus{outline:none}
  .nav__link--parent:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
}

/* ------------------------------------------------------------
   Service-area columns (the /service-areas/ page).

   The client noted the cities were "very spread out … such a large
   empty space". Two columns of fourteen at a generous line height.
   Narrower columns close the gap without shrinking the type to the
   point of being hard to read.
   ------------------------------------------------------------ */
.areas__col ul{
  columns:2;
  column-gap:var(--s5);
}
.areas__col li{
  margin-bottom:6px;
  font-size:.94rem;
  line-height:1.5;
}
@media(min-width:900px){
  .areas{gap:var(--s6) var(--s7)}
  .areas__col ul{columns:2}
}
@media(max-width:560px){
  .areas__col ul{columns:2;column-gap:var(--s4)}
  .areas__col li{font-size:.88rem;margin-bottom:5px}
}

/* --------------------------------------------------------------
   Service areas on the home page: chips, not a grid of one.

   .areas was written for .areas__col wrappers -- a grid of
   minmax(260px,1fr) columns. The home page puts bare <span> city
   names straight inside it, so every city became its own 260px grid
   cell: one per row on a phone, a 2,000px column of mostly empty
   space. That is the client's "cities are very spread out" note
   exactly, and it is worst on the device most visitors use.

   Flex-wrap instead, so the names flow and fill each line. Scoped
   with :not(:has(.areas__col)) so the service-areas page, which does
   use the column wrappers, keeps the layout above untouched.
   ------------------------------------------------------------ */
.areas:not(:has(.areas__col)){
  display:flex;
  flex-wrap:wrap;
  gap:10px 8px;
}
.areas:not(:has(.areas__col)) span{
  display:inline-block;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-size:.9rem;
  line-height:1.2;
  color:rgba(255,255,255,.82);
  transition:border-color .18s ease-out,color .18s ease-out;
}
.areas:not(:has(.areas__col)) span:hover{
  border-color:var(--amber);
  color:var(--white);
}
@media(max-width:560px){
  .areas:not(:has(.areas__col)){gap:8px 6px}
  .areas:not(:has(.areas__col)) span{
    padding:6px 12px;
    font-size:.84rem;
  }
}

/* --------------------------------------------------------------
   Featured Projects grid.

   The client asked for an even number of images that stays on two
   lines. Six tiles on the base six-column grid give three per row,
   but only because .shot happens to span 2 -- change either and the
   row count shifts silently. State both halves explicitly: the
   column count AND the span, at every breakpoint.

   The breakpoints match style.css (860 / 560) rather than sitting
   between them. An earlier 900px cut left 820px viewports reading
   the theme's 4-column rule and this file's 2-column rule at once,
   which laid the six tiles out as 2-2-1-1 instead of 2-2-2.
   ------------------------------------------------------------ */
.gallery--even{
  grid-template-columns:repeat(3,1fr);
}
.gallery--even .shot,
.gallery--even .shot--wide{
  grid-column:span 1;
}
.gallery--even .shot img,
.gallery--even .shot--wide img{
  aspect-ratio:4/3;
}
@media(max-width:860px){
  .gallery--even{grid-template-columns:repeat(2,1fr)}
  .gallery--even .shot,
  .gallery--even .shot--wide{grid-column:span 1}
}
@media(max-width:560px){
  .gallery--even{grid-template-columns:1fr}
  .gallery--even .shot,
  .gallery--even .shot--wide{grid-column:span 1}
}

/* --------------------------------------------------------------
   Project captions were invisible.

   .skel img carries z-index:2 so the photo can fade in over the
   loading placeholder. .shot figcaption is absolutely positioned at
   z-index:auto, so on every .shot that is also a .skel -- which is
   all of them -- the image painted on top of the caption and hid it
   completely.

   Found by hit-testing the caption's own coordinates: the element at
   that point came back IMG, on the home page and the gallery page
   alike. The text was in the DOM and available to screen readers the
   whole time; it simply never appeared on screen. Pre-existing, not
   introduced by the grid change above.
   ------------------------------------------------------------ */
.shot figcaption{
  z-index:3;
}

/* --------------------------------------------------------------
   Service-card checklists: the "orange boxes".

   The client wrote that the orange boxes "make this section fall
   flat, like clipart". These were the marker squares: solid amber
   with a hard 2px black border, the look of a bullet graphic pasted
   in from somewhere else. Nothing else on the site outlines a shape
   in black.

   Replaced with a thin amber check mark drawn in CSS -- same colour
   role, same scanning cue, but it belongs to the typography rather
   than sitting on top of it.
   ------------------------------------------------------------ */
.checklist li::before{
  content:"";
  position:absolute;
  left:2px;
  top:16px;
  width:11px;
  height:6px;
  border:0;
  border-left:2px solid var(--amber);
  border-bottom:2px solid var(--amber);
  background:none;
  border-radius:0;
  transform:rotate(-45deg);
}

/* --------------------------------------------------------------
   Testimonials.

   Two real testimonials, both from named people at named
   organisations, so the design gives them room rather than treating
   them as decorative pull-quotes. Two columns on desktop, stacked
   below.
   ------------------------------------------------------------ */
.quotes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);
  margin-bottom:var(--s6);
}
.quote{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:var(--s5);
  background:var(--paper,#F4F5F7);
  border:1px solid var(--hairline,rgba(0,0,0,.1));
  border-top:3px solid var(--amber,#F59E0B);
  border-radius:6px;
}
.quote blockquote{
  margin:0 0 var(--s4);
  padding:0;
  border:0;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
}
.quote blockquote p{margin:0 0 var(--s3)}
.quote blockquote p:last-child{margin-bottom:0}
.quote figcaption{
  margin-top:auto;
  padding-top:var(--s4);
  border-top:1px solid var(--hairline,rgba(0,0,0,.1));
  font-size:.88rem;
  line-height:1.5;
  color:var(--slate);
}
.quote figcaption b{
  display:block;
  font-size:.95rem;
  color:var(--ink);
}
@media(max-width:820px){
  .quotes{grid-template-columns:1fr;gap:var(--s4)}
}

/* ============================================================
   CONTRAST
   Measured against the rendered pages rather than read off the
   stylesheet. Everything below fixes text that failed WCAG AA.
   ============================================================ */

/* --------------------------------------------------------------
   Prose inside dark bands.

   .guide p is var(--slate), a dark grey chosen for prose on white.
   The About rewrite puts two .guide blocks inside .band--ink, where
   that same grey measured 3.31:1 against the near-black ground --
   below the 4.5:1 AA needs for body text, and visibly harder to read
   than the identical paragraphs on the light bands.

   var(--dim) is the token the theme already uses for muted text on
   ink elsewhere, and measures 8.65:1 here.
   ------------------------------------------------------------ */
.band--ink .guide p,
.band--ink .guide li{
  color:var(--dim);
}
.band--ink .guide h2,
.band--ink .guide h3{
  color:var(--white);
}

/* --------------------------------------------------------------
   Buttons inside .guide prose.

   style.css hands a .btn its own colour inside a coloured band with
   a :where() guard, which contributes no specificity on purpose. But
   .guide a is 0,2,0 and beats it, so a .btn placed inside a guide
   block keeps the link colour: on the Gallery page that put orange
   text on the amber button fill at 1.66:1, close to unreadable.

   Same failure class as the black-on-black CTA fixed earlier in this
   project, reached through a different selector. Buttons opt out of
   the prose link styling entirely.
   ------------------------------------------------------------ */
.guide a.btn{
  color:var(--ink);
  text-decoration:none;
}
.guide a.btn:hover{color:var(--ink)}
.guide a.btn--ink,
.guide a.btn--ghost,
.guide a.btn--ink:hover,
.guide a.btn--ghost:hover{color:var(--white)}

/* --------------------------------------------------------------
   Orange as text on light grounds.

   --orange (#FF6600) is a fill colour: white type on an orange
   button is what it was picked for. As text on white it measures
   2.94:1, and on the paper band 2.69:1, both under the 4.5:1 AA
   needs at these sizes. That covers the body links, the eyebrow
   labels, the "/ 01" indices, the numbered points and the contact
   card's field labels.

   #C2410C is the same hue two steps darker: 5.18:1 on white and
   4.75:1 on paper. Small decorative labels are exactly the text
   worth darkening -- nothing is lost visually, and at 10-12px they
   are what a low-vision reader loses first.

   Dark bands keep the brighter tokens: amber on ink is 11.2:1 and
   orange on ink 6.74:1, so both already pass there.
   ------------------------------------------------------------ */
:not(.band--ink) > .inner .guide a:not(.btn),
.contact__note a,
.faq details a{
  color:#C2410C;
}
:not(.band--ink) > .inner .guide a:not(.btn):hover,
.contact__note a:hover,
.faq details a:hover{
  color:var(--ink);
}

:where(.band--white, .band--paper, .band) .eyebrow,
:where(.band--white, .band--paper, .band) .intro .eyebrow,
.caps--light .cap__idx,
.points__num,
.contact__list dt{
  color:#C2410C;
}

/* The ink bands keep the brighter tokens: they pass there. */
.band--ink .eyebrow,
.band--ink .intro .eyebrow,
.band--ink .cap__idx,
.band--ink .points__num,
.band--ink .guide a:not(.btn){
  color:var(--amber);
}

/* --------------------------------------------------------------
   White on orange.

   .card__tag is white on ink and fine. Its --alt variant swaps the
   ground to orange, where white lands at 2.94:1. Ink on that same
   orange is 6.74:1, and matches how every button already treats the
   brand fills.
   ------------------------------------------------------------ */
.card__tag--alt{color:var(--ink)}

/* Fluent Forms ships its own submit-button colours; give it ink
   text like every other button on the site. */
.ff-btn.ff-btn-submit{color:var(--ink)}

/* Hero kicker sits on a photo scrim, so it needs to hold up over
   whatever image is behind it rather than over a flat colour. */
.hero__status{color:rgba(255,255,255,.94)}