/* ==========================================================================
   The calm pass, 2026-10-29: the hero and the header. Loads after
   new-styles.css and calm/foundation.css on new-home.html only; folded into
   new-styles.css on promote. Brand stays the four tokens.

   Measured on this page at 1280 x 800 before this layer: the hero was 974px
   tall (min-height 100svh plus a 646px phone), the h1 54.4px on three lines
   ("Web design in / Cape Town that / brings enquiries."), the strip 124px.
   What this layer does: the hero is padding-driven (header + 56 above, 48
   below, then the strip), the phone's height comes from the viewport so the
   hero grid and the strip fit one 1280 x 800 screen, the copy column gets the
   kicker, the ghost second button and the Google line.
   ========================================================================== */

/* ------------------------------ Header ---------------------------------- */
/* Settled header stays (Edgar, 2026-10-24); only its scrolled ground matches
   the warmed page instead of plain paper. */
.site-header.is-scrolled { background: var(--ground); }

/* ------------------------------ Hero: the box ---------------------------- */
.hero {
  min-height: 0;
  padding-top: calc(var(--header-h) + 3.5rem);        /* 76 + 56 */
}
.hero-grid {
  flex: none;
  align-items: center;
  padding-block: 0 3rem;                               /* 48 under, then the strip */
}

/* ------------------------------ Hero: the copy --------------------------- */
.hero-copy .kicker { margin-bottom: var(--s5); }
/* Edgar 2026-10-29: the copy row bigger, the h1 on two lines:
   "Web design in Cape Town / that brings enquiries." 24ch holds the first line
   and breaks before "that"; the lead widens to match. */
.hero-copy h1 { max-width: 24ch; }   /* "Expert website design / that brings enquiries." (Edgar 2026-10-29) */
/* The second line moves as one on a desktop, so the break always lands
   before "that"; on a phone it wraps freely. */
@media (min-width: 901px) { .h1-tail { white-space: nowrap; } }
.hero-copy .lead { max-width: 46ch; margin-top: var(--s5); }
/* Edgar 2026-10-29: "that big gap in the middle". The copy takes the width it
   needs at the bigger type and the phone sits at the right edge of the
   container, so the two meet instead of floating apart. */
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 4rem); }
  .hero-panel { justify-self: end; }
}
/* Wide screens: the hero's own width stops at 1120 and the phone sits in the
   middle of its column, so copy and phone read as one composition, not two
   things parked at the edges of a 1200 container. */
@media (min-width: 1300px) {
  .hero-grid { width: min(100% - var(--gutter) * 2, 1200px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--s6); }
  .hero-panel { justify-self: center; }
}
/* At 1600 and up the h1 reaches 70px, so the copy takes more of the row to
   keep its two lines; the phone column still clears the phone's 332px. */
@media (min-width: 1600px) {
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }
}
.hero-actions { gap: 12px; margin-top: var(--s6); }

/* The entrance stagger from new-styles.css counted children; the kicker is
   now first, so the order is restated here: kicker, h1, lead, buttons, badge. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .kicker { animation-delay: 0ms; }
  .hero-copy > h1 { animation-delay: 60ms; }
  .hero-copy > .lead { animation-delay: 120ms; }
  .hero-copy > .hero-actions { animation-delay: 180ms; }
  .hero-copy > .hero-trust { animation-name: hero-rise; animation-delay: 260ms; }
}

/* The Google line under the buttons: the same badge as the results section,
   as a quiet inline row. The stars keep Google's yellow, the rest is muted text,
   no box. The G, 5.0, stars, 13 reviews order comes from the badge rules. */
.hero-trust {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--s4); padding: 13px 0; min-height: 44px; border-radius: 0;   /* a link: 44px target */
  background: none; box-shadow: none;
  font-family: var(--text-font); font-weight: 500; font-size: 0.9rem; line-height: 1;
  color: var(--text-muted);
}
.hero-trust .g { width: 1.1rem; height: 1.1rem; }
.hero-trust > span:last-child { color: var(--text); font-weight: 600; }
.hero-trust .stars { font-size: var(--fs-label); letter-spacing: 0.03em; }
.hero-trust .gcount { font-size: var(--fs-small); }
.hero-trust:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 0.2em; }

/* ------------------------------ Hero: the phone -------------------------- */
/* Desktop: the phone's height comes from what is left of the viewport under
   the header, the 56 above, the 48 below and the strip, floored so it never
   goes shorter than a phone and capped at the size Edgar settled on (640).
   The width follows from the phone ratio, so the phone stays a phone at any
   viewport height. The same height sits on .hero-panel before the script
   mounts the chat, so nothing shifts when it does. */
@media (min-width: 901px) {
  .hero-panel,
  .hero-panel.is-phone {
    --hero-phone-h: clamp(512px, 100svh - var(--header-h) - 3.5rem - 3rem - 100px, 646px);
    display: flex; height: var(--hero-phone-h); min-height: 0; min-width: 272px; width: auto; max-width: 332px;
    aspect-ratio: 9 / 18.4; justify-self: center;
  }
  .hero-panel.is-phone .chat { flex: 1; min-height: 0; min-width: 0; height: auto; }
  .hero-panel.is-phone .chat-log { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ------------------------------ The facts bar (round 4) ----------------- */
/* The approved form for numbers near a hero: a quiet hairline meta bar at its
   foot (TASTE, Ironstone). Four true figures, no counts of clients. */
.hero-facts {
  list-style: none; margin: 0 auto; padding: 0; width: var(--container);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-facts li { display: flex; flex-direction: column; gap: 4px; padding: 1.25rem 1.5rem; }
.hero-facts li + li { border-left: 1px solid var(--line); }
.hero-facts strong { font-family: var(--font); font-weight: 500; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.1; }
.hero-facts span { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 900px) {
  .hero-facts { width: auto; margin-inline: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts li { padding: 1rem; }
  .hero-facts li:nth-child(3) { border-left: 0; }
  .hero-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ------------------------------ Logo strip ------------------------------ */
/* One calm row at the hero's foot: the strip is as tall as the tall Erfdevco
   mark (60px) and the row centres on it, so the 44px logos never jump it. */
.logo-strip { padding-block: 1.25rem; }                /* 20 + 60 + 20 = 100 */
.logo-track { align-items: center; min-height: 60px; }

/* ------------------------------ Phones ---------------------------------- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + var(--s6)); }
  .hero-grid { padding-block: 0 var(--s6); gap: var(--s7); }
  .hero-copy { display: grid; justify-items: center; text-align: center; }
  .hero-copy .kicker { justify-content: center; }
  .hero-copy h1 { max-width: none; }
  .hero-copy .lead { margin-inline: auto; }
  .hero-actions { width: 100%; justify-content: center; }
  .hero-trust { justify-content: center; }
}
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn--ghost { display: none; }   /* one button on a phone (Edgar 2026-10-30) */
}