/* ============================================================
   LAYOUT
   Loaded after revisions.css. Each rule below was reported by the
   client, then measured on the rendered page before being written,
   so the comment records the number rather than the impression.
   ============================================================ */

/* --------------------------------------------------------------
   Logo size, header and footer.

   The header mark was 70px and the footer 44px, on the reasoning
   that the footer logo is a sign-off rather than the masthead. Asked
   to make the header a little larger and the footer match it.

   86px on desktop: the header grows from 110px to 119px, and the
   gaps either side of the nav stay at 123px, so nothing is crowded.
   The steps below it move in proportion (72 / 56) rather than being
   left at the old values, which would have made the jump between
   breakpoints larger than the jump in the type around it.

   The footer column is 356px wide and the mark renders 145px, so it
   sits comfortably at the same size.
   ------------------------------------------------------------ */
.site-header .brand img,
.footer__brand img,
.footer__brand .brand img{
  height:86px;
  width:auto;
}
@media(max-width:1100px){
  .site-header .brand img,
  .footer__brand img,
  .footer__brand .brand img{height:72px}
}
@media(max-width:560px){
  .site-header .brand img,
  .footer__brand img,
  .footer__brand .brand img{height:56px}
}

/* --------------------------------------------------------------
   Button pairs were touching.

   .gallery__cta is display:flex with no gap, so two buttons sat
   edge to edge at 0px apart -- measured on 11 blocks across 6
   pages. .hero__actions and .cta__actions already use a 12px gap;
   this matches them, and wraps rather than overflowing on a narrow
   screen.
   ------------------------------------------------------------ */
.gallery__cta{
  gap:12px;
  flex-wrap:wrap;
}

/* --------------------------------------------------------------
   Hero spacing: buttons jammed against the paragraph.

   style.css sets `.hero--inner p.hero__lead{margin-bottom:0}`, which
   was right when the lead was the last thing in the hero. The
   client's revisions added a Request a Quote / Call pair to every
   inner hero, so the buttons landed hard against the last line of
   text: measured 0px on all seven inner pages, at all three widths,
   against 48px on the home page.

   Restored to the home page's rhythm and stepped down the same way
   at each breakpoint. Scoped with :has(+ .hero__actions) so a hero
   with no buttons keeps the zero it was written with, and at 0,3,1
   it clears the 0,2,1 rule it has to beat.

   The home page is brought in line too. style.css tightens its lead
   to --s4 (16px) on a phone, with a comment explaining that the
   buttons and the trust row were being pushed below the fold. The
   client's revisions removed that trust row, so the hero it was
   tuned for no longer exists -- measured now, the buttons finish
   258px above the fold with the looser spacing.

   Every hero on the site now steps the same way: 48 / 32 / 24.
   ------------------------------------------------------------ */
.hero--inner p.hero__lead:has(+ .hero__actions){
  margin-bottom:var(--s7);
}
.hero--inner .hero__actions{
  margin-bottom:0;
}
@media(max-width:1024px){
  .hero--inner p.hero__lead:has(+ .hero__actions){margin-bottom:var(--s6)}
}
@media(max-width:560px){
  .hero--inner p.hero__lead:has(+ .hero__actions){margin-bottom:var(--s5)}
  .hero p.hero__lead{margin-bottom:var(--s5)}
}

/* --------------------------------------------------------------
   Three testimonials rather than two.

   .quotes is a two-column grid, written when the client had supplied
   two testimonials. Cory Crommett's arrived later, and three cards
   never divide into two columns -- the third strands alone on its own
   row, on the home page and the testimonials page alike.

   So: three across where there is room for it, and one below that.
   Never two. At 1440px each card is 361px, wide enough for the quote
   to read as a paragraph rather than a column of fragments; below
   1200px a third column would squeeze the text, and a single full
   width column reads better than a widow.

   .quotes--full is the testimonials page, which carries the same
   three quotes at full length.
   ------------------------------------------------------------ */
@media(min-width:1201px){
  .quotes--three,
  .quotes--full{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:1200px){
  .quotes--three,
  .quotes--full{
    grid-template-columns:1fr;
  }
}

/* --------------------------------------------------------------
   FAQ block left a wide empty margin.

   .faq is capped at 72ch, which inside the 1180px inner stopped the
   rows at 881px and left roughly a third of the band empty on the
   right. The block was already aligned with its own heading, so
   centring it would have pulled it out of line with that heading --
   the measure was simply too narrow for a row that is a question on
   the left and a chevron pushed to the right.

   A question is one short line, not a paragraph, so the 72ch reading
   measure does not apply here the way it does to prose. Widening it
   fills the band and keeps the left edge where it belongs.
   ------------------------------------------------------------ */
.faq{
  max-width:none;
}

/* --------------------------------------------------------------
   Headings and body text did not line up.

   .intro runs the full width of the inner and starts at its left
   edge. .guide is capped at 72ch and centres itself with
   margin-inline:auto, so its first line began 213px further right
   than the heading directly above it. Every section on the About
   page carried the same stagger, and the service pages the same.

   Left-aligning the prose to the heading fixes it. The 72ch measure
   stays -- that is what keeps a long line readable -- it just stops
   floating away from the column it belongs to.

   This applies to standalone .guide blocks too. An earlier version
   kept those centred, on the reasoning that with no heading above
   them there was nothing to line up against. Measured on the page
   that was wrong: on Gallery and Testimonials the block started at
   357px while every other section on the same page started at 154px,
   so the section read as indented rather than centred.
   ------------------------------------------------------------ */
.guide{
  margin-inline:0;
}

/* --------------------------------------------------------------
   Gallery grid was ragged.

   Nine tiles on a six-column grid, two of them .shot--wide spanning
   3 and the rest spanning 2, laid out 2-3-3-1: the first row left a
   whole column empty, the widths were uneven, and the ninth tile
   stranded alone on the last row.

   Every tile the same width instead, three across. Nine divides
   into that exactly, so the block reads 3-3-3.

   Below 860px it becomes a centred flex row rather than a grid.
   Nine tiles in two columns always leaves one over, and a lone tile
   centred under the row above looks deliberate where the same tile
   pinned to the left edge looks like a mistake.
   ------------------------------------------------------------ */
@media(min-width:861px){
  .gallery{
    grid-template-columns:repeat(3,1fr);
  }
  .gallery .shot,
  .gallery .shot--wide{
    grid-column:span 1;
  }
  .gallery .shot--wide img{
    aspect-ratio:4/3;
  }
}
@media(max-width:860px) and (min-width:561px){
  .gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  .gallery .shot,
  .gallery .shot--wide{
    flex:0 1 calc(50% - var(--s4) / 2);
    grid-column:auto;
  }
  .gallery .shot--wide img{
    aspect-ratio:4/3;
  }
}

/* --------------------------------------------------------------
   Mega panel was narrow and very tall.

   The panel is built for four columns across the full 1180px inner.
   Cutting it to the client's two categories kept the four-column
   proportions but capped the whole thing at 760px, so the panel
   opened 1180px wide with its content squeezed into the middle:
   420px of empty dark space on the right, and the eight services in
   each category stacked into a 625px drop.

   Full width, with each category's list flowing into two sub-columns
   instead. Same sixteen services, same two headings, but the panel
   is 376px rather than 625px -- which also matters on a 768px laptop,
   where the taller version ran past the bottom of the screen.
   ------------------------------------------------------------ */
@media(min-width:1101px){
  .mega__inner--two{
    max-width:var(--maxw);
    grid-template-columns:1fr 1fr;
  }
  .mega__inner--two .mega__col ul{
    columns:2;
    column-gap:var(--s6);
  }
  .mega__inner--two .mega__col li{
    break-inside:avoid;
  }
}

/* --------------------------------------------------------------
   Contact form button was a different orange.

   Fluent Forms prints a per-form <style> block into the page that
   sets the submit button to rgb(234,88,12) with white text. Nothing
   else on the site uses that colour, so the one button a visitor is
   meant to press looked like it belonged to another website.

   Everything else about it already matches -- padding, radius, font,
   weight, size -- so only the two colours are restated here, to the
   amber and ink every other primary button uses. That also takes the
   label from 3.56:1 to 9.22:1.

   !important is load-bearing rather than lazy: the plugin's rule is
   in a <style> block printed after the theme's stylesheets, so no
   selector written here can outrank it on the cascade.
   ------------------------------------------------------------ */
form.fluent_form_3 .ff-btn-submit,
form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style){
  background-color:var(--amber) !important;
  color:var(--ink) !important;
}
form.fluent_form_3 .ff-btn-submit:hover,
form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):hover{
  background-color:var(--orange) !important;
  color:var(--white) !important;
}

/* --------------------------------------------------------------
   Footer spacing.

   The Company column carries a second heading -- Contact -- below
   its list, so the footer reads as four columns rather than five.
   That heading sat 10px under the list above it, close enough to
   read as part of the same group. The licence line had the same
   problem against the blurb: 0px, so two unrelated sentences ran
   together.

   Both needed the selector weight raising, not just a margin. The
   heading is matched by `.footer__col h2` (0,2,0) and the licence by
   `.wp-site-blocks p` (0,1,1), so a bare class at 0,1,0 lost and the
   first version of this rule computed to 0px. Matching the weight is
   the fix -- the same specificity trap the hero paragraphs hit
   earlier in this project.
   ------------------------------------------------------------ */
.footer__col h2.footer__col-second{
  margin-top:var(--s6);
}

.wp-site-blocks p.footer__licence,
p.footer__licence{
  margin-top:var(--s4);
}