/* ==========================================================================
   Flanagan Concrete — stylesheet

   The site wears the livery of the Flanagan mixer trucks: a cab-yellow panel,
   the name signwritten in wide green capitals, a dark green bumper, all set
   against the grey of cured concrete. Light and dark modes share one set of
   semantic tokens; the yellow cab panel and header stay the same in both.

   Structure: tokens → base → type → controls → header → hero → sections → parts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Livery: fixed in both modes */
  --cab:      #f2b41f;  /* cab yellow */
  --letter:   #0f5446;  /* signwriter green, the lettering on the cab */
  --ink:      #0b1e1b;  /* bumper green taken near-black */
  --concrete: #e3e2dd;  /* cured concrete */
  --shutter:  #d1d0c9;  /* shuttered concrete */

  /* Semantic: light mode */
  --bg:          var(--concrete);
  --bg-alt:      var(--shutter);
  --bg-deep:     var(--ink);        /* footer, call card */
  --text:        var(--ink);
  --text-soft:   #4a5a55;
  --heading:     var(--letter);
  --link:        var(--letter);
  --rule:        var(--shutter);    /* row dividers on --bg */
  --rule-alt:    var(--concrete);   /* row dividers on --bg-alt */
  --rule-strong: var(--ink);        /* the heavy rule that opens a group */
  --card:        var(--concrete);   /* cards sitting on --bg-alt */
  --btn-bg:      var(--ink);
  --btn-fg:      var(--concrete);
  --btn-hover:   var(--letter);
  --field:       #f4f3ef;
  --field-edge:  #6f7d78;
  --placeholder: #66746f;
  --error:       #9b2c13;
  --focus:       var(--ink);

  /* On the deep green footer and call card */
  --on-deep:      #e3e2dd;
  --on-deep-soft: #a9b5b0;
  --rule-on-deep: rgba(227, 226, 221, 0.18);

  --f-display: "Archivo", "Arial Black", sans-serif;
  --f-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-label:   "Barlow Semi Condensed", "Arial Narrow", sans-serif;

  --wrap:   1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --band:   clamp(64px, 9vw, 128px);
  --radius: 4px;   /* one radius for every button, field and card */
  --top-h:  72px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--ink);
    --bg-alt:      #12302b;
    --bg-deep:     #06110f;
    --text:        var(--concrete);
    --text-soft:   #a9b5b0;
    --heading:     var(--cab);
    --link:        var(--cab);
    --rule:        rgba(227, 226, 221, 0.16);
    --rule-alt:    rgba(227, 226, 221, 0.16);
    --rule-strong: var(--concrete);
    --card:        var(--ink);
    --btn-bg:      var(--cab);
    --btn-fg:      var(--ink);
    --btn-hover:   var(--concrete);
    --field:       #12302b;
    --field-edge:  #7a8f8a;
    --placeholder: #93a39e;
    --error:       #f29a7c;
    --focus:       var(--cab);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Components that set their own display must still disappear when hidden */
[hidden] { display: none !important; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--cab);
  font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Type
   Display is Archivo at full expansion, the nearest match to the cab
   lettering. It is only ever used in capitals, for names and headings.
   -------------------------------------------------------------------------- */
.h1,
.h2,
.h3 {
  font-family: var(--f-display);
  font-stretch: 125%;
  text-transform: uppercase;
  color: var(--heading);
  text-wrap: balance;
}
.h1 { font-weight: 800; font-size: clamp(2.2rem, 6.6vw, 5.6rem); line-height: 0.98; }
.h2 { font-weight: 800; font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1; }
.h3 { font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.08; }

.label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  max-width: 52ch;
}

.prose p { max-width: 62ch; }
.prose p + p { margin-top: 18px; }

/* --------------------------------------------------------------------------
   4. Controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* On the deep green footer and call card the button is always yellow */
.btn--cab { background: var(--cab); color: var(--ink); }
.btn--cab:hover { background: var(--concrete); }

/* A labelled link with an arrow: for "go and read more" rather than "act" */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: var(--link);
}
.arrow::after { content: "→"; display: inline-block; transition: transform 0.2s; }
.arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header: the top of the cab (yellow in both modes)
   -------------------------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cab);
  color: var(--ink);
  border-bottom: 4px solid var(--ink);
  --focus: var(--ink);
}

.top__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--top-h) - 4px);
}

.brand {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  font-family: var(--f-display);
  font-stretch: 125%;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.brand__name { font-weight: 800; font-size: 1.15rem; color: var(--letter); }
.brand__trade { font-weight: 700; font-size: 0.75rem; margin-top: 4px; letter-spacing: 0.12em; }

.top__nav { display: none; gap: 28px; margin-right: 12px; }
.top__nav a {
  padding: 12px 0;
  border-bottom: 3px solid transparent;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.top__nav a:hover,
.top__nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.top__call {
  min-height: 48px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--concrete);
}
.top__call:hover { background: var(--letter); }
.top__call svg { width: 20px; height: 20px; }
.top__num { display: none; }

.top__menu {
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.top__menu:hover { background: var(--ink); color: var(--cab); }

@media (min-width: 480px) {
  .brand__name { font-size: 1.3rem; }
  .top__num { display: inline; }
}
@media (min-width: 900px) {
  .top__nav { display: flex; }
  .top__menu { display: none; }
}

.menu {
  position: fixed;
  inset: var(--top-h) 0 0 0;
  z-index: 49;
  overflow-y: auto;
  padding: 24px var(--gutter) 40px;
  background: var(--ink);
  color: var(--on-deep);
  --focus: var(--cab);
}
.menu nav { display: grid; }
.menu nav a {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-on-deep);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.75rem;
  text-transform: uppercase;
  text-decoration: none;
}
.menu nav a:hover,
.menu nav a[aria-current="page"] { color: var(--cab); }
.menu__call { margin-top: 32px; }
.menu__call p { color: var(--on-deep-soft); }
.menu__call a {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--cab);
  text-decoration: none;
}
@media (min-width: 900px) { .menu { display: none; } }

/* --------------------------------------------------------------------------
   6. Home hero: concrete running down a chute, under a bumper-green wash.
   Four text elements only: the trades line, the name, one sentence, the calls
   to action. The name and phone number take the cab yellow, so the livery
   reads the same as the yellow header above it. Same in light and dark mode.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(calc(100svh - var(--top-h)), 960px);
  background: var(--ink);
  color: var(--concrete);
  --focus: var(--cab);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The wash never drops below 68% bumper green, so text stays at WCAG AA over
   the brightest frame of the video. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 30, 27, 0.9) 0%, rgba(11, 30, 27, 0.78) 50%, rgba(11, 30, 27, 0.68) 100%);
}

.hero__inner { width: 100%; padding-block: clamp(36px, 6vw, 88px) clamp(40px, 6vw, 80px); }

/* Inner pages: the same video header, shorter, with the page title and intro */
.hero--page { min-height: min(62svh, 600px); }
.hero--page .h1 { color: var(--cab); max-width: 18ch; }
.hero--page .lead { margin-top: 22px; color: var(--concrete); }
.hero--page .hero__inner { padding-top: clamp(96px, 10vw, 140px); }

/* The line of trades painted above the name on a truck door */
.hero__trades {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete);
}
/* Each trade stays on one line; the line may only break after a comma */
.hero__trades span { white-space: nowrap; }

.hero__name {
  margin-top: clamp(14px, 2vw, 26px);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  /* Sized so each word spans the content width, like lettering across a cab;
     the cap stops it overrunning the 1320px column on wide screens. */
  font-size: clamp(2.2rem, 11.6vw, 10rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--cab);
}
.hero__name span { display: block; }

.hero__foot {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 4.5vw, 64px);
}
.hero__sub { font-size: 1.25rem; font-weight: 500; max-width: 36ch; }

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.75rem, 8vw, 3.5rem);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cab);
}
.hero__phone svg { width: 0.8em; height: 0.8em; flex: none; }
.hero__phone:hover { color: var(--concrete); }

.hero .btn { background: var(--cab); color: var(--ink); }
.hero .btn:hover { background: var(--concrete); }

/* Mid widths: the sentence takes its own row so it never wraps past four
   lines, with the two calls to action side by side underneath. */
@media (min-width: 960px) {
  .hero__foot {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: end;
    gap: 28px 48px;
  }
  .hero__sub { grid-column: 1 / -1; }
}
/* Wide: sentence, phone and button share one row */
@media (min-width: 1200px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto auto; justify-content: stretch; }
  .hero__sub { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   6b. Home hero, 3D pour (assets/js/pour.js)
   Without .pour-3d on <html> (no WebGL 2, or three.js failed to load) the
   stage dissolves into the hero above and it reads as a still photo hero.
   With it, the hero is one screen tall and plays, like a film, a slab being
   poured, levelled, set and built on, starting on the first scroll.
   -------------------------------------------------------------------------- */
.pour__stage { display: contents; }
.hero__media picture { display: contents; }
.pour__canvas,
.pour__steps,
.pour__bar { display: none; }

.pour-3d .hero--pour {
  display: block;
  overflow: visible;
  min-height: 0;
  height: calc(100svh - var(--top-h));
}
.pour-3d .hero--pour::before { content: none; }

/* Hold the page still until the scene has drawn its first frame (usually
   about a second), so nobody scrolls into an empty stage. The gutter stays
   reserved so nothing shifts sideways when the scrollbar comes back. */
.pour-3d { scrollbar-gutter: stable; }
.pour-loading,
.pour-loading body,
.pour-playing,
.pour-playing body { overflow: hidden; }
.pour-loading body,
.pour-playing body { touch-action: none; overscroll-behavior: none; }

.pour-3d .pour__stage {
  position: sticky;
  top: var(--top-h);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100svh - var(--top-h));
}

/* Bumper green while three.js loads, then the scene fades in */
.pour-3d .hero--pour picture { display: none; }
.pour-3d .pour__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pour-3d .hero--pour.is-ready .pour__canvas { opacity: 1; }

/* Shade behind the text: along the bottom on phones, the left on wide screens */
.pour-3d .pour__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 30, 27, 0.94) 0%, rgba(11, 30, 27, 0.8) 34%, rgba(11, 30, 27, 0) 62%);
}
@media (min-aspect-ratio: 21 / 20) {
  .pour-3d .pour__stage::before {
    background:
      linear-gradient(90deg, rgba(11, 30, 27, 0.86) 0%, rgba(11, 30, 27, 0.6) 34%, rgba(11, 30, 27, 0) 58%),
      linear-gradient(0deg, rgba(11, 30, 27, 0.85) 0%, rgba(11, 30, 27, 0) 50%);
  }
}

.pour-3d .hero--pour .hero__inner { will-change: opacity, transform; }

.pour-3d .pour__steps {
  display: grid;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: clamp(44px, 6vw, 84px);
  list-style: none;
}
.pour__steps li {
  grid-area: 1 / 1;
  align-self: end;
  max-width: 34rem;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.pour__label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete);
}
.pour__title {
  margin-top: 10px;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--cab);
}
.pour__text {
  margin-top: 18px;
  max-width: 36ch;
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--concrete);
}

.pour__steps .btn { margin-top: 26px; }

/* Shown while the film plays */
.pour__skip {
  position: absolute;
  top: clamp(16px, 2.4vw, 28px);
  right: var(--gutter);
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid rgba(227, 226, 221, 0.5);
  border-radius: var(--radius);
  background: rgba(11, 30, 27, 0.6);
  color: var(--concrete);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pour__skip:hover { border-color: var(--cab); color: var(--cab); }

/* How far through the pour you are */
.pour-3d .pour__bar {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--cab);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* While loading, the same bar runs back and forth */
.pour-loading .pour__bar {
  right: auto;
  width: 30%;
  transform: none;
  animation: pour-loading 1.1s ease-in-out infinite alternate;
}
@keyframes pour-loading {
  from { left: 0; }
  to { left: 70%; }
}


/* --------------------------------------------------------------------------
   7. Sections
   One theme per page: sections alternate between two tints of the same mode.
   Headings stack above their text; there are no split section headers.
   -------------------------------------------------------------------------- */
.band { padding-block: var(--band); }
.band--alt { background: var(--bg-alt); --rule: var(--rule-alt); }

.band__head { margin-bottom: clamp(32px, 4.5vw, 56px); }
.band__head .lead { margin-top: 18px; }


/* Photos: a single radius, no overlays, no captions on stock material */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.photo picture,
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Full-width photo closing the pit-to-pour band */
.photo--wide { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 10; }
.photo--wide img { object-position: 70% 50%; }
@media (min-width: 760px) { .photo--wide { aspect-ratio: 2000 / 860; } }

/* --------------------------------------------------------------------------
   8. Products
   -------------------------------------------------------------------------- */
.make { display: grid; gap: 40px; }
.make .photo { aspect-ratio: 16 / 10; }
@media (min-width: 1000px) {
  .make { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; }
  .make .photo { position: sticky; top: calc(var(--top-h) + 24px); aspect-ratio: 4 / 5; }
}

.products { list-style: none; border-top: 3px solid var(--rule-strong); }
.product {
  display: grid;
  gap: 10px;
  padding-block: clamp(22px, 2.6vw, 32px);
  border-bottom: 2px solid var(--rule);
}
.product__desc { max-width: 46ch; }
.product__note { color: var(--text-soft); font-size: 1rem; }

/* Products page: one block per product */
.detail {
  display: grid;
  gap: 20px 64px;
  padding-block: clamp(32px, 5vw, 64px);
  border-top: 3px solid var(--rule-strong);
}
.detail .photo { margin-top: 24px; aspect-ratio: 4 / 3; }
@media (min-width: 960px) {
  .detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.detail .arrow { margin-top: 18px; }

.ticks { list-style: none; margin-top: 24px; max-width: 62ch; }
.ticks li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
}
.ticks li + li { border-top: 2px solid var(--rule); }
.ticks li span {
  flex: none;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   9. Pit to pour: a real sequence, so it is numbered
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
  list-style: none;
  display: grid;
  gap: 40px;
}
.step__n {
  position: relative;
  display: inline-block;
  padding-right: 16px;
  background: var(--bg-alt);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--heading);
}
.step .h3 { margin-top: 14px; color: var(--text); }
.step p { margin-top: 10px; color: var(--text-soft); max-width: 34ch; }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  /* The conveyor: one line carrying the material through all four stages */
  .steps::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 1.625rem;
    height: 3px;
    background: var(--rule-strong);
  }
}

/* --------------------------------------------------------------------------
   10. Where: the yard and how far it is
   -------------------------------------------------------------------------- */
.where { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; }
}
.where__addr {
  margin-block: 26px 18px;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--heading);
}
.where__addr strong { display: block; margin-top: 10px; color: var(--text); }
.where__yard p { max-width: 40ch; }
.where__yard .btn { margin-top: 26px; }

/* Distances, grouped into three bands rather than one long ruled list */
.dist__title { font-weight: 600; font-size: 1.25rem; }
.dist__note { margin-top: 4px; color: var(--text-soft); font-size: 1rem; }
.dist__groups { margin-top: 22px; border-top: 3px solid var(--rule-strong); }
.dist__group {
  display: grid;
  gap: 10px 32px;
  padding-block: 22px;
}
.dist__group + .dist__group { border-top: 2px solid var(--rule); }
@media (min-width: 560px) {
  .dist__group { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}
.dist__group dt {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--heading);
}
.dist__group dd { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.dist__group span { white-space: nowrap; font-weight: 500; }
.dist__group b {
  margin-left: 6px;
  font-family: var(--f-label);
  font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Review
   -------------------------------------------------------------------------- */
.review { max-width: 64rem; }
.review blockquote p {
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.25;
}
/* Hang the opening quote mark in the margin once there is a margin to hang it in */
@media (min-width: 760px) {
  .review blockquote p { text-indent: -0.42em; }
}
.review__by {
  margin-top: 22px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   12. Strength classes: one card per class, five cells for five classes
   -------------------------------------------------------------------------- */
.classes {
  list-style: none;
  display: grid;
  gap: 12px;
}
.class {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
}
.class__name {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--heading);
}
.class__use { font-weight: 500; }
.class__spec { color: var(--text-soft); font-size: 1rem; }
@media (min-width: 640px) {
  .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .classes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .class:last-child { grid-column: auto; }
}
.classes-note { margin-top: 24px; max-width: 62ch; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   13. Questions (native details, so they work without JavaScript)
   -------------------------------------------------------------------------- */
.faq { max-width: 60rem; border-top: 3px solid var(--rule-strong); }
.faq details { border-bottom: 2px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-block: 20px;
  list-style: none;
  font-weight: 600;
  font-size: 1.2rem;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--heading);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--heading); }
.faq details p { max-width: 62ch; padding-bottom: 24px; }

/* --------------------------------------------------------------------------
   14. About: story, timeline and the yard
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 24px 64px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.split .photo { margin-top: 28px; aspect-ratio: 4 / 3; }

.timeline { list-style: none; border-top: 3px solid var(--rule-strong); }
.timeline li {
  display: grid;
  gap: 4px 40px;
  padding-block: 22px;
}
@media (min-width: 760px) {
  .timeline li { grid-template-columns: 8rem minmax(0, 1fr); }
}
.timeline__year {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--heading);
}
.timeline h3 { font-weight: 600; font-size: 1.25rem; }
.timeline p { margin-top: 6px; max-width: 62ch; }

.facts { display: grid; border-top: 3px solid var(--rule-strong); }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
}
.facts > div { padding-block: 24px; border-bottom: 2px solid var(--rule); }
.facts dt {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--heading);
}
.facts dd { margin-top: 8px; max-width: 44ch; }
.facts dd strong { display: block; font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Contact: form and the call card
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}

.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 640px) {
  .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.field { display: grid; gap: 8px; align-content: start; }
.field__label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.req { color: var(--heading); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--field-edge);
  border-radius: var(--radius);
  background: var(--field);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--heading); }
.field__error { display: none; color: var(--error); font-weight: 600; font-size: 1rem; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); }
.field.has-error .field__error { display: block; }
.field__help { color: var(--text-soft); font-size: 1rem; }
.field__help a { color: var(--link); padding-block: 4px; }

.form__status {
  display: none;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--cab);
  color: var(--ink);
  font-weight: 500;
}
.form__status.is-visible { display: block; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form__note { color: var(--text-soft); font-size: 1rem; max-width: 52ch; }

.callcard {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--bg-deep);
  color: var(--on-deep);
  --focus: var(--cab);
}
@media (min-width: 960px) {
  .callcard { position: sticky; top: calc(var(--top-h) + 24px); }
}
.callcard__title { color: var(--on-deep-soft); }
.callcard__phone {
  display: inline-block;
  margin: 8px 0 22px;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cab);
}
.hours { width: 100%; border-collapse: collapse; }
.hours th,
.hours td {
  padding-block: 10px;
  text-align: left;
  font-weight: 500;
}
.hours tr + tr th,
.hours tr + tr td { border-top: 1px solid var(--rule-on-deep); }
.hours td { text-align: right; }
.callcard address { margin-top: 24px; font-style: normal; }
.callcard .arrow { color: var(--cab); }
.callcard__mail { margin-top: 18px; overflow-wrap: anywhere; }
.callcard__mail a { display: inline-block; padding-block: 4px; color: var(--on-deep); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.foot {
  padding-top: var(--band);
  background: var(--bg-deep);
  color: var(--on-deep);
  --focus: var(--cab);
}
.foot__grid { display: grid; gap: 56px; }
@media (min-width: 1000px) {
  .foot__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
}
.foot__call { container-type: inline-size; }
.foot__call .label { color: var(--on-deep-soft); }
.foot__phone {
  display: inline-block;
  margin-block: 10px 12px;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  /* Sized from the footer column, not the window: "045 524 111" is about 7.3
     times its font size wide, so 12cqi keeps it inside the column with room
     to spare at every width. */
  font-size: clamp(1.75rem, 12cqi, 4.5rem);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cab);
}
.foot__call .btn { margin-top: 22px; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
}
/* The yard column takes its own row under Products and Company, so the
   email address has the full width and stays on one line */
.foot__yard { grid-column: 1 / -1; container-type: inline-size; }
.foot__yard address { margin-bottom: 4px; }
.foot__cols .foot__mail {
  white-space: nowrap;
  /* The address is about 16.8 times its font size wide; this keeps it inside
     the column on the narrowest phones and at 18px everywhere else */
  font-size: clamp(0.875rem, 5.8cqi, 1.125rem);
}
.foot__cols h2 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--cab);
}
.foot__cols ul { list-style: none; }
.foot__cols a {
  display: inline-block;
  padding-block: 5px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.foot__cols a:hover { color: var(--cab); text-decoration: underline; }
.foot address { font-style: normal; color: var(--on-deep-soft); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 64px;
  padding-block: 24px;
  border-top: 1px solid var(--rule-on-deep);
  font-size: 1rem;
  color: var(--on-deep-soft);
}

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active { transform: none; }
}