/*
  Homeowner pages: /repair, /bid-check, /renovations, /real-result and
  /film-a-repair-guide. Layout only. Colors, type and components come from
  /assets/grainwork.css.
*/

/* Hero */
.c-hero { padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 104px); }
.c-hero .split { align-items: center; }
.c-hero .lede { margin-top: 24px; }
.c-hero .estimate--flat { margin-top: 32px; max-width: 30rem; }

/* Renovations: the words on the left and the slider, the hero's proof, beside them. The
   frame stays near the photographs' own 1084px width so the picture holds its sharpness. */
.c-hero--pair { padding-top: clamp(28px, 4vw, 72px); }
.c-hero__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: center;
}
.c-hero__pair-head { max-width: 30rem; }
.c-hero__pair-head .lede { margin-top: 20px; }
@media (max-width: 1000px) {
  .c-hero__pair { grid-template-columns: minmax(0, 1fr); }
  .c-hero__pair-head { max-width: 40rem; }
}
.c-store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.c-store-row .store-choice { margin-top: 0; }
.c-store-row .store-note { margin-top: 0; max-width: 24rem; }
.c-hero--pair .hero__media { margin-top: 0; }

/* Store buttons */
.store-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.store-choice .button,
.store-choice .store-link { min-width: 188px; }
/* On the dark closing band the official store badges turn light. */
/* (.band .store-choice raises specificity above the system's .band a rule.) */
.band .store-choice .store-link { background: var(--on-dark); color: var(--forest-deep); }
.band .store-choice .store-link:hover { background: var(--paper-raised); color: var(--forest-deep); }
.store-note { margin-top: 14px; font-size: var(--text-small); color: var(--muted); max-width: 34rem; }
.band .store-note { color: var(--on-dark-muted); }

/* The estimate, set as type: no card, no box. A hairline opens it. */
.estimate { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.estimate__label { font: 600 var(--text-eyebrow)/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.estimate__title { margin-top: 12px; font: 500 var(--text-h3)/1.2 var(--serif); letter-spacing: -0.01em; color: var(--heading); }
.estimate__amount { margin-top: 18px; font: 500 clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--heading); white-space: nowrap; }
.estimate__sub { margin-top: 6px; font-size: var(--text-small); color: var(--muted); }
.estimate .facts { margin-top: 18px; }
.estimate__note { margin-top: 12px; font-size: var(--text-caption); line-height: 1.45; color: var(--muted); }
.estimate .text-link { margin-top: 10px; min-height: 44px; }

.facts { margin: 0; display: grid; }
.facts > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--ink); }
.facts dd { margin: 0; color: var(--muted); }
.facts--large > div { padding: 18px 0; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
.facts--large dd strong { display: block; color: var(--ink); font-weight: 600; }
.facts dd .text-link { display: flex; width: fit-content; min-height: 44px; }
@media (max-width: 560px) {
  .facts--large > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts--large dt { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
}

/* Playable real video. In a single column it is centred at 320px, its caption under it at
   the same width, on every page (the homepage and /agents follow the same rule). */
.c-video { margin: 0; width: 100%; max-width: 320px; }
.c-video figcaption { margin-top: 16px; font-size: var(--text-caption); color: var(--faint); }
@media (max-width: 400px) { .c-video { max-width: none; } }

/* Renovations: the before-and-after slider (.compare in grainwork.css) beside the words,
   inside the gutter with the shared radius at every width. */
.c-compare { margin: 0; min-width: 0; }
.c-compare .provenance { margin-top: 14px; }

/* Filming guide: the five shots are the first screen, set large under the words. */
.c-guide__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
}
.c-guide__aside .lede { margin-top: 0; }
/* The aside's first line sits level with the headline's first line, under the eyebrow. */
@media (min-width: 901px) {
  .c-guide__aside { padding-top: calc(var(--text-eyebrow) * 1.3 + 16px + 0.5rem); }
}
.c-guide__aside .store-choice { margin-top: 24px; }
@media (max-width: 900px) {
  .c-guide__top { grid-template-columns: minmax(0, 1fr); }
}
.c-guide .timeline--hero { margin-top: clamp(56px, 7vw, 104px); }
.timeline--hero li { padding-top: 22px; }
.timeline--hero .timeline__time { font: 500 clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem)/1.1 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.timeline--hero h3 { font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.625rem); }
/* Filming guide timeline */
.timeline { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.timeline li { padding-top: 18px; border-top: 2px solid var(--accent); }
.timeline__time { display: block; margin-bottom: 12px; font: 600 var(--text-eyebrow)/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.timeline h3 { font-size: var(--text-h3); margin-bottom: 8px; }
.timeline p { color: var(--muted); }
@media (max-width: 1060px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } }
@media (max-width: 720px) { .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } }

.say-list { margin: 0; padding: 0; list-style: none; }
.say-list li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); }
.say-list li:last-child { border-bottom: 1px solid var(--line); }

.safe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: 8px; }
.safe-grid > div { padding: 20px 0; border-top: 1px solid var(--line); }
.safe-grid h3 { font: 600 var(--text-h4)/1.35 var(--sans); color: var(--ink); }
.safe-grid p { margin-top: 6px; color: var(--muted); }
@media (max-width: 720px) { .safe-grid { grid-template-columns: minmax(0, 1fr); } }

/* Sections that hold one idea */
.c-copy h2 + .lede,
.c-copy h2 + p { margin-top: 18px; }
.c-copy .note { margin-top: 28px; }
.c-section-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 48px); }
.c-section-head h2 + p { margin-top: 16px; }
.c-section-head p:not(.eyebrow) { color: var(--muted); font-size: var(--text-lede); line-height: 1.5; }
.c-share { max-width: 44rem; margin-bottom: 40px; }

/* Closing band */
.c-closing .wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.c-closing .lede { margin-top: 18px; }

/* Phones: the store badges keep their own size side by side, as on the homepage. Only the
   single filled button that replaces them on a phone (consumer.js) takes the full width. */
@media (max-width: 720px) {
  .store-choice .store-link { min-width: 0; }
  .store-choice .button { flex: 1 1 100%; }
}
.c-copy .quote { margin-top: 32px; }
.c-copy > p + p { margin-top: 16px; }
.c-closing { text-align: center; }
.c-closing h2 { max-width: 22ch; margin-inline: auto; }
.c-closing .lede { margin-inline: auto; }
.c-closing .store-choice { justify-content: center; }
.c-closing .store-note { margin-inline: auto; }

/* Links that sit on their own line keep a full-size tap target */
.steps .text-link,
.c-copy > .text-link { min-height: 44px; }
.steps .text-link { margin-top: 6px; }
.c-copy > .text-link { margin-top: 20px; }

.c-try { margin-top: 32px; font: 560 var(--text-h4)/1.3 var(--serif); color: var(--heading); }
.c-try + .store-choice { margin-top: 16px; }


/* Two columns that share a top line: the eyebrow on the left and the first row on the right. */
.c-split-top { align-items: start; }
.c-copy--beside-heading p { color: var(--muted); }
@media (min-width: 901px) {
  .c-copy--beside-heading { padding-top: calc(var(--text-eyebrow) * 1.3 + 16px + 0.6rem); }
}


.c-hero h1 { font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }

/* /real-result: the real video centred in its column, the words centred on its height. */
.c-hero__reel { display: flex; justify-content: center; }

/* Bid Check: the two prices are the first screen's right column, set as type. The section's
   eyebrow and the first price share the headline's top line. */
.c-hero .c-hero__split--top { align-items: start; }
.c-hero__prices h2.eyebrow { margin-bottom: 0; padding-bottom: 18px; }
.c-hero__prices .note { margin-top: 20px; max-width: 30rem; }
@media (min-width: 901px) { .c-hero__prices { padding-top: 6px; } }

/* Bid Check: what it costs, set as type beside the words. */
.c-prices { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.c-prices > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.c-prices dt {
  font: 500 clamp(2.75rem, 1.8rem + 3vw, 4.5rem)/1 var(--serif);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--heading);
}
.c-prices dd { margin: 0; color: var(--muted); max-width: 22rem; }
@media (max-width: 480px) {
  .c-prices > div { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 0; }
}


/* "More in the Grainwork app": three plain items under a rule, no boxes. */
.c-more .card {
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.c-more .card--link:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.c-more .card--link:hover h3 { color: var(--accent); }
.c-more .card h3 { transition: color 0.15s ease; }
.c-more .card .text-link { min-height: 44px; }

/* Renovations: how the photo is handled, one muted line under the steps. */
.c-photo-note { margin-top: clamp(28px, 3vw, 40px); max-width: 44rem; }
.c-photo-note .text-link { display: inline; margin-left: 4px; padding-block: 12px; }

/* One line that points to the other homeowner pages, where a three-up would repeat. */
.section.c-also { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.c-also__line { max-width: 44rem; font: 500 var(--text-h3)/1.35 var(--serif); letter-spacing: -0.01em; color: var(--heading); text-wrap: pretty; }
.c-also__line a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.c-also__line a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* /repair: the real range is the hero's visual, set large in the right column, with one
   line under it saying what it was for and where the whole estimate is. No photograph. */
.c-hero__figure { align-self: center; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.c-hero__amount {
  font: 500 clamp(3.5rem, 2rem + 5vw, 6.5rem)/0.95 var(--serif);
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--heading);
  white-space: nowrap;
}
.c-hero__amount-what { margin-top: 22px; max-width: 26rem; color: var(--muted); text-wrap: pretty; }
.c-hero__amount-what .text-link { display: inline-flex; min-height: 44px; margin-left: 2px; }
@media (max-width: 900px) { .c-hero__figure { margin-top: 8px; } }
@media (max-width: 420px) { .c-hero__amount { font-size: 3.1rem; } }
.c-promise-line { margin-top: 10px; max-width: 30rem; font-size: var(--text-small); color: var(--faint); }
.c-also .eyebrow { margin-bottom: 16px; }
h2.c-also__line a { text-decoration: none; }
h2.c-also__line a::after { content: " →"; }
h2.c-also__line a:hover { text-decoration: underline; }
.c-also__more { margin-top: 18px; color: var(--muted); }
.c-also__more a { color: var(--accent); }