/* Garibay Concrete, Inc. - Nipomo - spec build #43
   ---------------------------------------------------------------------------
   PHOTO-LED, and the structure is the TWO CLASSIFICATIONS.

   He holds A GENERAL ENGINEERING and C-8 CONCRETE, and the photographs split
   cleanly along that line: boom-pump pours into formed hillside footings,
   tiered retaining walls and a pier foundation on one side; a big slab pour,
   poured stairs and a finished plaza on the other. So the page is two work
   bands, each led by a classification, and the photographs make the argument.

   ⚠ TWO CLASSIFICATIONS HAVE BEEN PRESENTED TWICE BEFORE AND THIS MUST NOT
   REPEAT EITHER: #35 used two giant mono glyphs on a divided dark band, #40
   small mono tags on paper. Here they are SECTION HEADINGS with the work
   underneath - not a badge, not a tag cluster.

   Structure against the predecessors:
     #37 text beside one photo   #38 text above one full-bleed photo
     #39 text over a photo       #40 a triptych, three edge to edge
     #41 no photos, review spine #42 one thesis photo beside its caption
   Here: no hero photograph at all, then two asymmetric photo bands (one large
   frame with two stacked beside it).

   ⚠⚠ ONE REVIEW, 5.0, WITH NO TEXT. As with #42 there is NO testimonial
   section and there must not be one. What carries the page is the state record,
   the photographs, and the scale of the work visible in them.

   ⭐ A CREW IS SUPPORTABLE HERE, UNLIKE #42. The workers comp record carries
   52052 and 52012 (concrete/cement, high and low wage) AND 8810 Clerical Office
   Employees, the licence is a Corporation, and the photographs show hi-vis
   crews on site. #42 was Sole Ownership with no second person in any published
   photo, so that page asserted nothing; this one may.

   ⚠ THE TENURE TRAP. The licence was issued 2017-06-02 but the register also
   says "05/29/2020 - LICENSE REISSUED TO ANOTHER ENTITY", and the reissue date
   is 2020-05-29. THE CORPORATION HAS HELD IT SINCE 2020, NOT 2017. The page
   states both dates and claims neither as continuous tenure.

   ⚠ IDENTIFIABLE PEOPLE. Five of the six published photographs contain workers,
   all of them distant hi-vis crew - bent over, turned away, faces a handful of
   pixels. Checked at 2x magnification: no resolvable face in any of them, and
   they render smaller on the page than in that check. That is a different case
   from #40's p10 (a person as the subject) and #42's p08 (a close reflection of
   a face), both of which were cut. The standard applied here is "no resolvable
   face", and it is recorded so the judgement can be re-examined.

   ⭐⭐ THE PALETTE HAD NO OBVIOUS ACCENT AND THE FIRST TWO PASSES FOUND NOTHING
   USABLE. The dominant hues are sky-blue 210-224 (collides with #38 at 218),
   earth 15-29 (#39 at 15) and earth 30-44 (#40 at 39). The hi-vis and the green
   boom pump measured only 250-500 pixels each - far too small to sample as a
   brand colour, and a third earth-toned concrete page would have read as a
   template.

   Filtering to STRONGLY saturated pixels only (s >= 0.62) found the real
   man-made colour on site: hue 350-359, 949 px, #B6323F - the red buckets,
   tooling and truck that recur across the set. No previous build has used a
   red, and hue 354 sits 20 degrees off #39's stain and is a saturated crimson
   against that build's desaturated brown.

   ⚠⚠ AND IT DIES ON THE DARK GROUND: 2.45 on the slate. The light-grounds-only
   trap for the FIFTH time in six builds (#38 2.12, #39 1.95, #40 1.84, #42
   2.58). Checked before choosing, so the slate band uses white and #E2707A.

   ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED.
     #1E2A33  on white 14.64 | on paper 13.09 | white on it 14.64
     #B6323F  on white  5.97 | on paper  5.34                  -> body text ok
     #9C2733  white on it 7.63                                 -> hover
     #4C5257  on white  7.92 | on paper  7.08                  -> muted body
     #E2707A  on slate  4.76 | on white 3.07   DARK GROUNDS ONLY
     #C9CFD4  on slate  9.31                                   -> body on dark
     #939BA2  on slate  5.20                                   -> labels on dark
   --------------------------------------------------------------------------- */

:root {
  --ground: #FFFFFF;
  --paper:  #F3F2F0;   /* a WARM concrete grey, not a blue one */
  --ink:    #1E2A33;   /* SAMPLED from the formwork shadows */
  --red:    #B6323F;   /* SAMPLED from the site equipment. hue 354 */
  --red-h:  #9C2733;
  --muted:  #4C5257;
  --rule:   #E0DFDC;

  --red-l:  #E2707A;   /* DARK GROUNDS ONLY - 3.07 on white */
  --rule-d: #33424E;
  --body-d: #C9CFD4;   /* on slate 9.31 */
  --dim-d:  #939BA2;   /* on slate 5.20 */

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --wide: 1180px;
  --s-sm: 8px;  --s-md: 16px; --s-lg: 26px;
  --s-xl: 36px; --s-2xl: 60px; --sect: clamp(64px, 9vw, 108px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--red-l); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }

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

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 var(--s-md);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
/* ⚠ on the slate the accent is the LIGHT red - the sampled one is 2.45 there */
.eyebrow.on-dark { color: var(--red-l); }
.eyebrow.on-dark::before { background: var(--red-l); }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.mast { border-bottom: 1px solid var(--rule); }
.mast .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between; padding-block: 18px;
}
.mast .mark { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.mast .mark span {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 400;
}
.mast .tel {
  background: var(--red); color: #fff; font-size: 17px; font-weight: 700;   /* 5.97 */
  text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px;
}
.mast .tel:hover { background: var(--red-h); }

/* ── Hero: type only. The photographs carry their own sections. ───────── */
.hero { background: var(--paper); padding-block: clamp(58px, 8.5vw, 100px); }
.hero h1 {
  margin: 0 0 var(--s-md); max-width: 24ch;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 800;
}
.hero h1 em { font-style: normal; color: var(--red); }   /* 5.34 on paper */
.hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 58ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block; background: var(--red); color: #fff;   /* 5.97 */
  font-size: 16.5px; font-weight: 700; padding: 14px 26px;
  border-radius: 7px; text-decoration: none; border: 1px solid transparent;
}
.btn:hover { background: var(--red-h); }
.btn.ghost { background: var(--ground); color: var(--ink); border-color: #CCCBC7; }
.btn.ghost:hover { border-color: var(--red); }
.btn.light { background: var(--red-l); color: var(--ink); }   /* dark grounds */
.btn.light:hover { background: #EC8992; }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding-block: var(--sect); }
.band-paper { background: var(--paper); }
.band-slate { background: var(--ink); color: var(--body-d); }
.band-slate h2 { color: #fff; }

h2 {
  margin: 0 0 var(--s-md);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 24ch;
}
p  { margin: 0 0 var(--s-md); }
p:last-child { margin-bottom: 0; }
.intro { font-size: 19px; max-width: 60ch; color: var(--muted); }
.band-slate .intro { color: var(--body-d); }

/* the classification sits above the heading as a mono line, NOT as a badge
   (#35) and NOT as a tag cluster (#40) */
.klass {
  margin: 0 0 6px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); font-weight: 700;
}
.band-slate .klass { color: var(--red-l); }

/* ── The work bands: one large frame, two stacked beside it ───────────── */
.work { display: grid; gap: var(--s-lg); margin-top: var(--s-2xl); align-items: start; }
@media (min-width: 900px) {
  .work { grid-template-columns: 1.75fr 1fr; }   /* the big frame drives the row height; too narrow and it leaves a gap under itself */
  .work .big { grid-row: span 2; }
}
.work figure { margin: 0; }
.work img { border-radius: 10px; width: 100%; }
.work figcaption {
  margin-top: 11px; color: var(--muted); font-size: 15.5px; max-width: 52ch;
}
.work figcaption b { color: var(--ink); font-weight: 700; }

/* ── The licence record ───────────────────────────────────────────────── */
.record { margin-top: var(--s-xl); border-top: 1px solid var(--rule-d); }
.record div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-d);
  font-family: var(--mono); font-size: 14.5px;
}
.record dt { margin: 0; color: var(--dim-d); }
.record dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.record .hi dd { color: var(--red-l); }   /* 4.76 on the slate */

/* ── Hours and contact ────────────────────────────────────────────────── */
.reach { display: grid; gap: var(--s-2xl); margin-top: var(--s-xl); align-items: start; }
@media (min-width: 860px) { .reach { grid-template-columns: 1fr 1fr; } }
.hours { margin: 0; max-width: 420px; border-top: 1px solid var(--rule); }
.hours div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 14.5px;
}
.hours dt { margin: 0; color: var(--muted); }
.hours dd { margin: 0; color: var(--ink); font-weight: 600; }
.hours .shut dd { color: var(--muted); font-weight: 400; }

/* ── Letter ───────────────────────────────────────────────────────────── */
.letter p { color: var(--muted); max-width: 68ch; }
.letter strong { color: var(--ink); }
.letter .sign { margin-top: var(--s-lg); color: var(--ink); font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: var(--body-d); padding-block: var(--s-2xl) var(--s-xl); }
footer .wrap { display: grid; gap: var(--s-lg); }
@media (min-width: 700px) { footer .wrap { grid-template-columns: 1.3fr 1fr 1fr; } }
footer h4 {
  margin: 0 0 10px; color: #fff; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400;
}
footer p { margin: 0 0 4px; font-size: 15px; }
footer a { color: var(--red-l); text-decoration: none; }
footer a:hover { text-decoration: underline; }
/* grid-column is load-bearing - #41's bug, where the legal line became a fourth
   grid item and stacked under the first column */
.legal {
  grid-column: 1 / -1;
  margin-top: var(--s-xl); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-d); font-size: 12.5px; color: var(--dim-d);
}

/* ── Sticky call button, phones only ──────────────────────────────────── */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--red); padding: 13px 16px; text-align: center;
  }
  .callbar a { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px; }
  body { padding-bottom: 62px; }
}