/* Pack: Ironbark — the trade look.

   For the people someone calls when something is broken: builders, roofers,
   plumbers, sparkies, tow trucks. Heavy, squared off, high contrast. A dark
   header and a dark hero band, then warm white below it, so the page opens
   with the business's name at full weight rather than easing into it.

   Burnt orange rather than the obvious safety yellow. Yellow is a surface
   colour and never a text colour — #ffc933 on white is about 1.6:1 — and a
   pack that wants an accent it can also set type in needs one that passes on
   both papers. This one is ~5.5:1 on white, and --accent-light is the version
   that survives on the band.

   Loaded after site.css; see the note there about why every value is restated
   rather than diffed. */
:root {
  /* Warm-neutral rather than cool: a trade site sitting next to photographs of
     brick, timber and dirt. */
  --ink: #14110f;
  --muted: #574e48;
  --line: #ded7cf;
  --paper: #ffffff;
  --wash: #f4f1ec;
  --accent: #b8420f;
  --accent-deep: #8a300a;
  --accent-light: #f0873f;
  --on-accent: #ffffff;
  --band: #14110f;
  --on-band: #f5efe9;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Space Grotesk is the self-hosted display face (site.css @font-face) — a
     tighter, more mechanical grotesque that suits the caps headline; Inter
     and the system stack are the fallback. */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --catchline-weight: 500;
  /* The whole voice of this pack is in these four lines: heavier, tighter,
     larger, and the headline in caps. */
  --h1-size: 2.7rem;
  --h1-size-wide: 4.5rem;
  --h2-size: 1.8rem;
  --lead-size: 1.1rem;
  --display-weight: 700;
  --display-tracking: -.03em;
  --kicker-tracking: .16em;

  /* Squared off. Not zero — a 0px radius reads as unstyled rather than as a
     decision — but close enough to look built rather than designed. */
  --radius-card: 3px;
  --radius-cta: 3px;
  --radius-shot: 3px;
  --card-bg: var(--paper);
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --card-pad: 2rem;

  --section-y: 4.5rem;
  --hero-y: 6rem;

  /* The header joins the hero band rather than sitting above it. */
  --header-bg: var(--band);
  --header-ink: var(--on-band);
  --header-border: 0;
}

/* Caps on the headline only. The business name is short and the lead is not;
   a paragraph in caps is a paragraph nobody reads. */
.hero h1 { text-transform: uppercase; }

/* Section headings get the same rule the service cards do, so the page reads
   as one system rather than as cards plus everything else. */
section > h2 {
  padding-top: .75rem;
  border-top: 3px solid var(--accent);
  display: inline-block;
}

.hero h1 { max-width: 14ch; line-height: 1.04; }
.hero .kicker { margin-bottom: 1.5rem; }
.hero-scrim {
  background: linear-gradient(90deg, rgba(10, 12, 16, .9), rgba(10, 12, 16, .72));
}

/* A working service sheet: a strong benefits band, numbered service rows,
   plain work photographs and a square, clearly bounded enquiry area. */
.pack-ironbark .why-us {
  max-width: none; background: var(--band); color: var(--on-band);
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
}
.pack-ironbark .why-us > h2 { border-color: var(--accent-light); }
.pack-ironbark .why-us .card { background: transparent; border: 0; padding: 1rem 0; text-align: left; }
.pack-ironbark .why-us .card p { color: var(--on-band); }
.pack-ironbark .why-us .card-icon { background: transparent; color: var(--accent-light); margin-inline: 0; }
.pack-ironbark .services .cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pack-ironbark :is(.services, .gallery) > h2 { display: block; }
.pack-ironbark .services .card {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem 1rem;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 1.75rem 0; background: transparent;
}
.pack-ironbark .card-index { grid-row: span 2; margin: 0; font-size: 1.4rem; }
.pack-ironbark .services .card p { grid-column: 2; margin: 0; }
/* A service the owner named but never described has no <p>, and on desktop
   the description column then sits empty beside a capped title — a row that
   reads as unfinished. Let the title take the row instead. */
.pack-ironbark .services .card h3:last-child { grid-column: 2 / -1; }
.pack-ironbark .about-copy { max-width: 44rem; }
.pack-ironbark .gallery .cards { gap: .5rem; }
.pack-ironbark .gallery .shot { border-radius: 0; aspect-ratio: 3 / 2; }
.pack-ironbark .testimonial { border: 0; border-top: 3px solid var(--accent); border-radius: 0; }
.pack-ironbark .testimonial .quote::before { content: none; }
.pack-ironbark .testimonial:only-child { grid-column: 1 / -1; }
.pack-ironbark .testimonial .quote { max-width: 42rem; }
/* No separator of its own. Every section heading in this pack already carries
   a 3px accent rule above it (see `section > h2`), so a second, heavier rule
   a few centimetres further up read as an unrelated stripe rather than as the
   start of a section — the page went "stripey" at exactly the point that
   matters most. The enquiry form is a card on its own wash background, which
   is what marks Contact out; it does not need a black bar as well.

   Ledger does separate Contact, with a 3px double rule, and that is not the
   same thing: Ledger draws no rule above its headings, so its one is the only
   rule on the page rather than the second one in a few centimetres. */
/* --- the desktop width ------------------------------------------------------
   Every section here used to put its heading in a narrow column with the
   content beside it. With nine short generated fields that produced two
   half-empty columns down the whole page: About's copy stopped two-thirds of
   the way across with nothing under the heading, Operating hours was two
   lines against an empty right half, and Where we work was one suburb pill
   stranded beside a small square map. The owner's word for it was that there
   was "so much empty space in its multi-column approach".

   The heading goes on top and the content takes the measure. Nothing is
   stretched to reach the edges — the copy keeps a reading width — but the
   things that can honestly use the width now get it. */
@media (min-width: 48rem) {
  /* Long enough to read, short enough not to run the full 64rem. */
  .pack-ironbark .about-copy { max-width: 42rem; }

  /* The map and hours treatment that started here is now every pack's, in
     site.css (#256). */
}

/* The cap that kept inputs a comfortable width when the form was one column.
   In two it is what keeps the form in the left two-thirds of the section
   while the rest of the page uses the measure, so it lifts from the
   breakpoint the second column starts at. */
.pack-ironbark .enquiry-form { max-width: 48rem; }
@media (min-width: 48rem) { .pack-ironbark .enquiry-form { max-width: none; } }
.pack-ironbark .enquiry-form :is(input, select, textarea) { border-radius: 2px; }
@media (min-width: 900px) {
  /* The title column used to be minmax(0, 1fr) — an equal fractional share of
     a card that can be 900px+ wide, so a two-word service name like "Decks &
     pergolas" left-aligned in it and left a wide dead gap before the
     description started in the next column. Capping it to a label-sized
     column closes that gap; the description column still gets whatever's
     left via 1fr rather than a fixed ratio against the now-bounded title. */
  /* Three across (#261, finding 11.8). The rows used to run the full measure
     with a title column and a description column, which left three short
     services as three long, mostly empty lines. As three columns each card
     stacks its number, title and description, and the rule sits on top. */
  .pack-ironbark .services .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
  .pack-ironbark .services .card {
    grid-template-columns: minmax(0, 1fr); gap: .5rem;
    border-bottom: 0; border-top: 2px solid var(--ink); padding: 1.25rem 0 0;
  }
  .pack-ironbark .services .card .card-index { grid-row: auto; }
  .pack-ironbark .services .card p,
  .pack-ironbark .services .card h3:last-child { grid-column: 1; }
}