/* ==========================================================================
   StreetHello homepage (index.php) — page layout
   Ported from the approved design, proto/final/assets/css/pages.css section A
   (DESIGN-SPEC §6.1, §10). Depends on styles.css (tokens, components, replay figure,
   FAQ disclosure, steps, rates table). Loaded only by index.php via $pageStylesheets.
   ========================================================================== */

/* Hero */
.hero { padding-block: clamp(24px, 3.4vw, 52px) clamp(48px, 5vw, 80px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.hero__text .kicker { margin-bottom: clamp(16px, 1.8vw, 26px); }
.hero__title em { display: block; }
.hero__body .lead { margin-top: clamp(18px, 2vw, 28px); max-width: 32em; }
.hero__actions { margin-top: clamp(24px, 2.6vw, 34px); }
.hero__assure { margin-top: var(--space-4); max-width: 34em; font-size: var(--fs-caption); color: var(--text-muted); text-wrap: pretty; }
.hero__assure-short { display: none; }
@media (max-width: 1079px) { .hero__assure-long { display: none; } .hero__assure-short { display: inline; } }
.hero__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Phones: shorter lead (the second sentence is repeated in the replay caption) and full-width actions */
@media (max-width: 759px) {
  .hero__lead-more { display: none; }
  .hero__assure { margin-top: var(--space-3); text-align: center; }
  .hero__call { margin-top: var(--space-1); padding-top: 0; border-top: 0; justify-content: center; }
}
/* Tablet and small laptop: headline left, lead and actions right, replay full width below */
@media (min-width: 760px) and (max-width: 1079px) {
  .hero__copy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .hero__text { padding-top: 6px; }
  .hero__title { font-size: clamp(2.5rem, 5.2vw, 3.5rem); }
  .hero__body .lead { margin-top: 0; font-size: 1.125rem; }
  .hero__actions { margin-top: var(--space-5); }
  .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 26rem; }
  .hero__ctas .btn { width: 100%; }
}
@media (min-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); column-gap: clamp(40px, 4vw, 56px); align-items: start; }
  .hero__copy { padding-top: 18px; }
  .hero__title { font-size: clamp(2.75rem, 4.3vw, 3.875rem); }
}
/* From 1280px the copy column never drops below the two actions side by side (26.625rem, as below), so
   the actions do not stack again between 1280 and 1399px after sitting side by side at 1229–1279px.
   1440px is unchanged (the copy column is wider than that there). */
@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(26.625rem, 1fr) minmax(0, 1.76fr); }
  .hero__body .lead { font-size: 1.25rem; }
}
/* Production refinement: from 1080px the copy column is sometimes narrower than the two
   actions side by side (about 1080–1240 and 1280–1380px, including 1366px laptops), where the
   prototype wrapped them into a ragged pair. There they stack at equal width, as the design
   stacks them from 760 to 1079px, until the row fits. 1440px and 1024px are unchanged.
   The threshold is the two pills' width (425px at a 16px root size) in rem, so it follows a
   larger default text size. */
@media (min-width: 1080px) {
  .hero__actions { container-type: inline-size; }
  @container (width < 26.625rem) {
    .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 26rem; }
    .hero__ctas .btn { width: 100%; }
  }
}

/* Production refinement: from 1080 to 1279px the hero splits 1 : 1.45 and the replay figure is
   only 557–663px wide. There the on-map credit would cover the baked "Bird Estate" label and
   the inline legend would squeeze the scrubber to 133–239px, so both move into the caption, as
   they do on phones. Keyed to the figure, an inline-size container (.replay); it is at least
   681px wide from 760 to 1079px. From 1280px the copy column keeps the two actions' width, so the
   figure is 670px at 1280 and passes 670px at about 1292px: the caption keeps them until then. */
@container (max-width: 670px) {
  .hero__figure .replay__credit { display: none; }
  .hero__figure .replay__caption .replay__credit-text { display: block; }
  .hero__figure .replay__credit-text a { color: inherit; text-underline-offset: 0.2em; }
  .hero__figure .replay__controls .legend { display: none; }
  .hero__figure .replay__caption .legend { display: flex; margin-bottom: 4px; }
}
/* No lone last word in the short replay lines */
.hero__figure .replay__caption > p { text-wrap: pretty; }

/* Services */
.services { padding-block: clamp(24px, 3vw, 48px) var(--section-pad); }
.services__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.services__intro p { max-width: 34em; }
@media (min-width: 1080px) {
  .services__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: var(--space-8); }
  .services__intro p { padding-bottom: 10px; }
}
.services__list { display: grid; margin-top: clamp(40px, 5vw, 72px); }
.service { display: flex; flex-direction: column; }
.service + .service { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--rule); }
.service__art { width: 160px; height: 120px; margin-bottom: var(--space-5); margin-left: -2px; }
.service__dept {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: 1.0625rem;
  color: var(--text-muted);
}
.service__num { font-variant-numeric: lining-nums; color: var(--accent-text); }
.service__num::after { content: "—"; margin-left: 10px; color: var(--paper-300); font-style: normal; }
.service h3 { margin-top: 6px; }
.service > p { margin-top: var(--space-4); max-width: 30em; }
.service .ticks { margin-top: var(--space-4); font-size: var(--fs-small); font-weight: 500; color: var(--text-strong); }
.service .link-arrow { margin-top: auto; padding-top: var(--space-5); align-self: flex-start; }
@media (min-width: 900px) {
  .services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service { padding-inline: clamp(24px, 2.6vw, 40px); }
  .service:first-child { padding-left: 0; }
  .service:last-child { padding-right: 0; }
  .service + .service { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--rule); }
}

/* Spot illustrations (hairline, two inks) */
.spot { overflow: visible; }
.spot * { vector-effect: non-scaling-stroke; }
.spot__street { fill: none; stroke: rgba(18, 53, 46, 0.13); stroke-width: 3.5; stroke-linecap: round; }
.spot__street--fine { stroke-width: 2; stroke: rgba(18, 53, 46, 0.22); }
.spot__area { fill: var(--green-100); stroke: var(--green-900); stroke-width: 1.25; stroke-dasharray: 4 4; stroke-linejoin: round; }
.spot__sheet rect:first-child { fill: var(--paper-0); stroke: var(--green-900); stroke-width: 1.25; filter: drop-shadow(0 8px 10px rgba(18, 53, 46, 0.18)); }
.spot__accent-bar { stroke: var(--terra-600); stroke-width: 4; stroke-linecap: round; }
.spot__lines { fill: none; stroke: rgba(18, 53, 46, 0.4); stroke-width: 1.25; stroke-linecap: round; }
.spot__tile { fill: var(--terra-100); stroke: none; }
.spot__route { fill: none; stroke: var(--terra-600); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spot__start { fill: var(--paper-0); stroke: var(--green-900); stroke-width: 1.5; }
.spot__halo { fill: rgba(157, 48, 31, 0.14); stroke: none; }
.spot__dot { fill: var(--terra-600); stroke: var(--paper-0); stroke-width: 2; }
.spot__ring { fill: none; stroke: rgba(18, 53, 46, 0.3); stroke-width: 1.25; stroke-dasharray: 3 5; }
.spot__ring--inner { stroke: rgba(157, 48, 31, 0.5); stroke-dasharray: none; fill: rgba(246, 224, 215, 0.45); }
.spot__phone { fill: var(--paper-0); stroke: var(--green-900); stroke-width: 1.25; filter: drop-shadow(0 8px 10px rgba(18, 53, 46, 0.18)); }
.spot__screen { fill: var(--green-50); stroke: rgba(18, 53, 46, 0.25); stroke-width: 1; }
.spot__pin { fill: var(--terra-600); stroke: var(--paper-0); stroke-width: 1.5; }
.spot__pin-dot { fill: var(--paper-0); }

/* How it works */
.how { padding-block: var(--section-pad); background: var(--surface-alt); }
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) {
  .how__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "steps view" "key key";
    column-gap: clamp(48px, 7vw, 120px);
    row-gap: var(--space-7);
    align-items: center;
  }
  .how__steps { grid-area: steps; }
  .how__grid > .cv { grid-area: view; }
  /* The key runs full width under steps and illustration, so the two columns end together */
  .how__key { grid-area: key; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .how__key .cv-key { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; column-gap: var(--space-6); }
  .how__key .link-arrow { grid-column: 1; grid-row: 2; }
}
.how__key { padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); }
.how__key .link-arrow { margin-top: var(--space-3); }
.cv-key { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.cv-key li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); font-size: var(--fs-small); }
.cv-key b { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--terra-600); color: var(--paper-50); font-size: 0.75rem; }
.cv-key strong { display: block; color: var(--text-strong); font-weight: 600; }
.cv-key span { color: var(--text-muted); }

/* Customer-view illustration — real text sizes, never scaled below 12px */
.cv { margin: 0; }
.cv .caption { margin-top: var(--space-3); }
.cv__window {
  padding: 16px;
  border: 1px solid rgba(18, 53, 46, 0.14);
  border-radius: var(--radius-l);
  background: #F3EBDD;
  box-shadow: var(--shadow-print);
  color: var(--green-900);
  font-size: 0.8125rem;
  line-height: 1.35;
  user-select: none;
}
.cv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 14px; }
.cv__head small { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra-600); }
.cv__head strong { display: block; margin-top: 2px; font-size: 1.0625rem; letter-spacing: -0.01em; }
.cv__print { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(18, 53, 46, 0.25); border-radius: 8px; background: #FFFDF7; font-weight: 600; white-space: nowrap; }
.cv__print .icon { width: 15px; height: 15px; }
.cv__card { padding: 12px; border: 1px solid rgba(18, 53, 46, 0.1); border-radius: 10px; background: #FFFDF7; }
.cv__row { display: flex; justify-content: space-between; align-items: baseline; }
.cv__row strong { font-size: 0.9375rem; }
.cv__row span { color: #4F5F59; }
.cv__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cv__chips > span { padding: 5px 10px; border: 1px solid rgba(18, 53, 46, 0.25); border-radius: 999px; font-weight: 600; background: #FFFDF7; }
.cv__map { position: relative; margin-top: 10px; overflow: hidden; border-radius: 8px; aspect-ratio: 400 / 220; }
.cv__map svg { width: 100%; height: 100%; }
.cv__legend { display: flex; gap: 16px; margin-top: 8px; color: #4F5F59; }
.cv__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cv__sw-area { width: 12px; height: 12px; border-radius: 2px; background: rgba(46, 107, 85, 0.2); border: 1px solid var(--portal-area); }
.cv__sw-route { width: 18px; height: 3px; border-radius: 3px; background: var(--portal-area); }
.marker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--terra-600);
  color: var(--paper-50);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--paper-50), 0 6px 12px -4px rgba(18, 53, 46, 0.45);
  transform: translate(-50%, -50%);
}
.marker--inline { position: static; transform: none; margin-left: 4px; width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--paper-50); }
@media (max-width: 599px) {
  .cv__window .marker { display: none; }
  .cv__window { padding: 12px; }
  .cv__head strong { font-size: 0.9375rem; }
  /* The illustration's A, B and C markers are hidden here, so the key drops its matching badges too. */
  .cv-key b { display: none; }
  .cv-key li { grid-template-columns: minmax(0, 1fr); }
}
/* Below 360px the mock-up's "Print / save as PDF" label may wrap rather than push the page wider (it did by
   4px at 320px with WCAG 1.4.12 text spacing). */
@media (max-width: 359px) { .cv__print { white-space: normal; } }

/* Quote and consultation band */
.start { padding-block: var(--section-pad); background: var(--surface-inverse); color: var(--on-inverse); }
.start__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); }
.start__intro { max-width: 36em; color: var(--on-inverse-muted); font-size: var(--fs-lead); line-height: 1.5; }
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) {
  .start__head, .start__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); column-gap: clamp(48px, 6vw, 112px); }
  .start__head { align-items: end; }
  .start__intro { padding-bottom: 8px; font-size: var(--fs-body); }
  .start__grid { align-items: start; }
}
.start__head .display-l em { display: block; }
.modes { display: grid; gap: var(--space-3); }
.modes > li { display: flex; }
.modes .mode { flex: 1 1 auto; }
@media (min-width: 620px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 20px;
  column-gap: var(--space-4);
  align-items: center;
  min-height: 92px;
  padding: var(--space-4);
  border: 1px solid var(--rule-inverse);
  border-radius: var(--radius-m);
  color: var(--on-inverse);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .mode:hover { background: rgba(247, 242, 232, 0.06); border-color: rgba(247, 242, 232, 0.4); } }
.mode svg:first-child { width: 52px; height: 52px; }
.mode__shape { fill: none; stroke: var(--on-inverse); stroke-width: 1.5; stroke-linejoin: round; }
.mode__handle { fill: var(--green-900); stroke: var(--on-inverse); stroke-width: 1.5; }
.mode__accent, .mode__pin { fill: var(--on-inverse-accent); stroke: none; }
.mode__text strong { display: block; font-weight: 600; }
.mode__text > span { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--on-inverse-muted); line-height: 1.45; }

.mode__arrow { width: 18px; height: 18px; color: var(--on-inverse-muted); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mode:hover .mode__arrow { transform: translateX(3px); color: var(--on-inverse); } }
.start__rates { margin-top: var(--space-6); }
.start__note { margin-top: var(--space-3); max-width: 40em; font-size: var(--fs-caption); color: var(--on-inverse-muted); }
.start__ctas { margin-top: var(--space-6); }
/* Production addition: "Find a saved Quote" stands alone as an action, so it gets the 44px
   target the spec gives links (§4, §8); the text and underline do not move. */
.start__ctas > .link { display: inline-flex; align-items: center; min-height: 44px; }
/* Stacked on phones: the taller target reaches into the gaps, half the difference between the
   line box (27.2px) and 44px on each side; the px value is the fallback where lh is unsupported. */
@media (max-width: 759px) { .start__ctas > .link { margin-block: -8.4px; margin-block: calc((1lh - 44px) / 2); } }

.talk { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--paper-100); color: var(--text); }
.talk .kicker { color: var(--accent-text); }
.talk h3, .on-inverse .talk .display-m { margin-top: var(--space-4); color: var(--text-strong); }
.talk > p { margin-top: var(--space-3); }
.talk .btn { margin-top: var(--space-5); }
@media (max-width: 759px) { .talk .btn { width: 100%; } }
.talk__phone { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.talk__phone small { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.talk__focus { margin-top: var(--space-4) !important; font-size: var(--fs-caption); color: var(--text-muted); }
.on-paper .phone-display { color: var(--text-strong); }

/* Questions */
.faq { padding-block: var(--section-pad); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1080px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "intro list" "aside list"; grid-template-rows: auto 1fr; column-gap: clamp(48px, 7vw, 120px); row-gap: var(--space-6); }
  .faq__intro { grid-area: intro; }
  .faq__grid > .faq__list { grid-area: list; }
  .faq__aside { grid-area: aside; align-self: start; }
}
.faq__intro .lead { margin-top: var(--space-5); max-width: 24em; }
.aside-card .kicker { display: flex; }
.aside-card h3 { margin-top: var(--space-3); }
.aside-card p:not(.kicker) { margin-top: var(--space-2); font-size: var(--fs-small); }
.aside-card small { display: block; margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--text-muted); }
.aside-card .link-arrow { margin-top: var(--space-2); }

/* Production refinement, 760–1079px (the design shows this band only at the fold): the lower sections were
   single full-width blocks. The customer-view illustration keeps a readable size, the talk card puts the
   phone number beside its copy, and the ROI card keeps a card's measure. */
@media (min-width: 760px) and (max-width: 1079px) {
  .how__grid > .cv { justify-self: center; width: 100%; max-width: 40rem; }
  .talk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .talk > * { grid-column: 1; }
  .talk > .btn { justify-self: start; }
  .talk > .talk__phone { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; padding-top: 0; border-top: 0; }
  .talk > .talk__focus { grid-column: 2; grid-row: 4; align-self: center; margin-top: var(--space-5) !important; }
  .faq__aside { max-width: 36rem; }
}


/* Keyboard focus: when Tab scrolls the next control into view from below, keep its 3px ring
   (3px offset) clear of the viewport edge. Page-level until the shell adopts it for every page. */
html { scroll-padding-bottom: 24px; }

/* Production addition: homepage-faq.js wraps each answer in this panel to ease its height
   open and closed; without JavaScript the native <details> opens instantly. */
.faq__panel { overflow: hidden; }