/*
Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
Proprietary and confidential. See LICENSE at the repository root.

Home page only (index.html), linked after style.css. Round 4 (2026-09-23), copy v3. The home sections themselves
live in style.css section 6; this file adds only what v3's new content needs:
  1  The hours band on Home: smaller figures, so steps 1 to 4 then hours 1 and 2 don't read as one sequence
  2  "I'm Phil LeNir.": the story told short, beside the facts (.letter-story)
  3  "Things I've built with AI": four tiles, two by two, each a whole-card link to work.html#card-n (.tiles, .tile-link)
  4  "In their words": client quotes with the company's logo (.voices), added 2026-09-24 on the built site
The close is the shared .cta-band (style.css): the big price block left Home on Phil's answer of 2026-09-23.
Round 5 (2026-09-23, review 07): "AI changed everything." is set in the story at body size (no display line); the
tiles are cut to four and wear the same covers as their Work cards (the cover styles now live in style.css); the
4px hover lift is gone; on a phone the tiles take a 2:1 floor.
*/

/* ---------- 1  The hours band, Home only (Coaching has no steps before it, so its figures stay 8rem) ---------- */
.home-shapes .shape-fig b { font-size: 5rem; }
@media (max-width: 900px) { .home-shapes .shape-fig b { font-size: 4rem; } }

/* ---------- 2  I'm Phil LeNir: facts on the left, the story on the right ---------- */
.letter-story { border-top: 2px solid var(--forest); padding-top: 28px; }
.letter-story p { font-size: 1.25rem; line-height: 1.65; }
.letter-story p + p { margin-top: 1em; }
.letter-story .letter-foot { margin-top: 36px; }
@media (max-width: 1000px) { .letter-body p { max-width: var(--measure); } .letter-story { max-width: 40rem; } }
@media (max-width: 640px) { .letter-story p { font-size: 1.1875rem; } }

/* ---------- 3  Things I've built with AI: tiles on sage ----------
   DOM order is heading first (for screen readers), then the tile, the label and the line. CSS puts the tile and
   the label back above the heading. The heading's link is stretched over the whole card, so the tile, the words and
   the label are all one tap target; the focus ring is drawn round the whole card. Hover underlines the title only. */
.tiles .tile { position: relative; }
.tiles .card-media { order: -2; }
.tiles .card-meta { order: -1; }
.tile-link {
  color: inherit; text-decoration: underline;
  text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px;
  transition: text-decoration-color .2s ease;
}
.tile-link::after { content: ""; position: absolute; inset: -12px; border-radius: 18px; }
.tile:hover .tile-link { text-decoration-color: var(--amber-dot); }
.tile-link:focus-visible { outline: none; }
.tile-link:focus-visible::after { outline: 3px solid var(--forest); outline-offset: 0; }
.built-foot { margin-top: 64px; }
@media (max-width: 720px) {
  .built-head { margin-bottom: 40px; }  /* the shared .section-head's 64px, cut where the tiles go to one column */
  .built-foot { margin-top: 48px; }
  .tiles .card-tile { min-height: calc((100vw - 2 * var(--gutter)) * 0.5); }  /* 2:1 floor: a shorter phone page */
}

/* ---------- Mockup notes under step 1 (hidden with the notes; .note-row carries the hide rule) ---------- */
.step-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- The four covers at one scale in the 2 x 2 (Work's wide card 1 sets its cover bigger) ---------- */
.tiles .tile-say { font-size: clamp(2rem, 3.3vw, 3.125rem); max-width: 14ch; line-height: 1.1; }
@media (max-width: 720px) { .tiles .tile-say { font-size: 1.875rem; } }
@media (max-width: 400px) { .tiles .tile-say { font-size: 1.75rem; } }

/* Second sentence of the "who it's for" statement (Phil, 2026-09-23): its own line, lighter, still Besley */
.statement .statement-2 { display: block; margin-top: 0.35em; font-size: 0.56em; font-weight: 600; line-height: 1.2; color: var(--forest); }

/* ---------- 4  In their words (2026-09-24, built site) ----------
   Each quote is the person's own words, verbatim. The French page shows translations Phil approved, marked by
   .voices-note (« Traduction libre de l'anglais. »). No photos for now (Phil, 2026-09-24): the company's logo stands
   in, with alt="" because the caption names the business. Each logo is the company's own light-background file,
   except CFS, which publishes only white lettering: its lettering is recoloured to the shield's navy.
   The first figure leads, set like the pull quote. The next two pair up below, captions pushed to the bottom so they line
   up. A fourth (.voice-wide, Brigitte Skeene, 2026-10-06) closes the section on a full row, in the paired type, at reading width. A caption wraps its logo under the name when the column is too narrow for both (a 320 px phone). */
.voices-note { margin-top: 14px; font-size: var(--fs-small); color: var(--muted); }
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; margin-top: 56px; }
.voice { display: flex; flex-direction: column; margin: 0; padding-top: 28px; border-top: 2px solid var(--forest); }
.voice-lead { grid-column: 1 / -1; }
.voice-quote { margin: 0; font: 500 1.3125rem/1.55 var(--display); color: var(--ink); text-wrap: pretty; }
.voice-quote p { margin: 0; }
.voice-lead .voice-quote {
  max-width: 24em;
  font: italic 700 clamp(1.75rem, 3vw, 2.5rem)/1.2 var(--display);
  color: var(--forest); letter-spacing: -0.01em; text-wrap: balance;
}
.voice-who {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: auto; padding-top: 28px;
}
.voice-name { flex: 1 1 12rem; }
.voice-name strong { display: block; font: 800 1.125rem/1.25 var(--display); color: var(--forest); }
.voice-name span { display: block; margin-top: 3px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.voice-lead .voice-who { justify-content: flex-start; column-gap: 40px; }
.voice-lead .voice-name { flex: 0 1 auto; }
.voice-wide { grid-column: 1 / -1; }
.voice-wide .voice-quote { max-width: var(--measure); }
.voice-wide .voice-who { justify-content: flex-start; column-gap: 40px; }
.voice-wide .voice-name { flex: 0 1 auto; }
.voice-logo { flex: none; width: auto; height: 48px; }   /* CFS, Parts4Engines, Talent IQ */
.voice-logo-sirrius { height: 19px; }                     /* a bare wordmark: shorter, to weigh the same */
@media (max-width: 760px) {
  .voices { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 40px; }
  .voice-quote { font-size: 1.1875rem; }
  .voice-who { flex-direction: column; align-items: flex-start; gap: 14px; }   /* logo under the name, every figure alike */
  .voice-name { flex: none; }   /* its 12rem basis would become a height in a column */
}