/* ==========================================================================
   Home page design pass, 23 October 2026.
   Loaded on the home page only, after styles.css, so the About page and the
   HQ Test keep their own look. Every rule is prefixed with `.home` (the class
   on the home page body) so it outranks the layered rules in styles.css
   without !important.

   Design only. Nothing is removed, no section moves, no colour changes its
   meaning. The aim is a calmer page that reads faster:

   1. One type scale. Every section headline was its own size, up to 6.5rem,
      and most ran to three or four lines. They now share one scale and
      balance across two lines.
   2. One shape rule. Buttons 12px, cards and photos 16px, small tags pill.
   3. One rhythm. Sections share one vertical padding, headings one gap.
   4. Quieter surfaces. The dark grid texture, the button glow and the card
      shadows are turned down so the copy and the amber button carry the page.
   5. Readable text. Body copy is a step larger and darker, lines are capped
      at a comfortable measure, and headings wrap evenly.
   ========================================================================== */

.home {
  --radius-card: 16px;
  --radius-button: 12px;
  --section-pad: clamp(80px, 9vw, 128px);
  --hairline: rgba(12, 46, 51, 0.1);
  --hairline-dark: rgba(250, 250, 248, 0.12);
  --card-shadow: 0 1px 2px rgba(12, 46, 51, 0.04), 0 12px 32px -12px rgba(12, 46, 51, 0.12);
  --ink-soft: #3f4d4f;
  --leak-tint: #f8e6e3;

  font-size: 17px;
  color: var(--graphite);
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.home :where(h1, h2, h3) {
  text-wrap: balance;
}

.home :where(p, li, blockquote) {
  text-wrap: pretty;
}

.home h2,
.home .section-heading h2,
.home .problem .section-heading h2,
.home .testimonials .section-heading h2,
.home .statement-copy h2,
.home .guarantee-intro h2,
.home .closing h2 {
  margin-bottom: 20px;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}

.home .section-heading > p:not(.eyebrow) {
  max-width: 54ch;
  margin-inline: auto;
  font-size: 1.08rem;
}

/* Eyebrows keep their words and their capitals. The arrows in front of them
   were five different glyphs doing one job, so the mark becomes a single
   short rule in the same colour. */
.home .eyebrow {
  margin-bottom: 18px;
  gap: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.home .eyebrow-mark {
  display: inline-block;
  width: 18px;
  height: 2px;
  flex: 0 0 18px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--electric);
  color: transparent;
  font-size: 0;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

/* The 16px grid read as noise behind the type. A wider, fainter grid keeps
   the texture without competing with the words. */
.home .grid-surface {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}

.home .operator-proof,
.home .process,
.home .testimonials,
.home .guarantees,
.home .about,
.home .closing {
  padding-block: var(--section-pad);
}

.home .section-heading {
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   Buttons. One flat amber, one soft shadow, no glow.
   -------------------------------------------------------------------------- */

.home .button-primary,
.home .site-nav .nav-cta {
  border-radius: var(--radius-button);
  letter-spacing: -0.005em;
}

.home .button-primary,
.home .section-dark .button-primary,
.home .hero .button-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(12, 46, 51, 0.18),
    0 10px 24px -10px rgba(12, 46, 51, 0.45);
}

.home .button-primary:hover,
.home .section-dark .button-primary:hover,
.home .hero .button-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(12, 46, 51, 0.18),
    0 16px 32px -12px rgba(12, 46, 51, 0.5);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.home .nav-shell {
  min-height: 64px;
  padding: 8px 8px 8px 18px;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 28px rgba(6, 26, 29, 0.12);
}

.home .site-nav .nav-cta {
  min-height: 46px;
  padding: 12px 20px;
}

/* --------------------------------------------------------------------------
   Hero and the numbers under it.
   The numbers sit on the hero's own surface as one band. On desktop the hero
   fills the first screen on its own and the numbers start at its bottom edge,
   so the opening view is only the question and the button, and the proof
   arrives with the first scroll.
   -------------------------------------------------------------------------- */

.home .hero {
  min-height: 0;
  padding: clamp(124px, 14.5vh, 176px) 0 clamp(48px, 7vh, 88px);
}

@media (min-width: 1051px) {
  .home .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 112px 0 56px;
  }
}

.home .hero-centered h1 {
  margin-bottom: 24px;
  font-size: clamp(2.6rem, 4.7vw, 4.4rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
}

.home .hero-centered .eyebrow {
  margin-bottom: 28px;
}

.home .hero-centered .hero-lede {
  max-width: 54ch;
  margin-bottom: 32px;
  color: rgba(250, 250, 248, 0.74);
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  line-height: 1.6;
}

.home .hero-centered .hero-actions {
  margin-bottom: 20px;
}

.home .hero-primary-cta {
  min-width: 280px;
  min-height: 60px;
  padding: 16px 36px;
}

/* One quiet line, centred under the button. */
.home .hero-note {
  color: rgba(250, 250, 248, 0.66);
  font-size: 0.86rem;
}

.home .hero .hero-note {
  text-align: center;
}

/* Space, not a dot, keeps items apart where a dot used to be drawn: the
   note after "A rough guess" and the parts of the footer legal line. */
.home .estimate-note {
  margin-left: 14px;
}

.home .estimate-note::before {
  content: none;
}

.home .footer-legal {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
}

.home .footer-legal-dot {
  display: none;
}

.home .metric-rail {
  position: relative;
  background: var(--deep-teal);
  color: var(--cloud);
}

.home .metric-grid {
  border: 0;
  border-top: 1px solid var(--hairline-dark);
}

.home .metric {
  display: flex;
  min-height: 0;
  padding: 28px 28px 36px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-right: 1px solid var(--hairline-dark);
}

.home .metric:first-child {
  padding-left: 0;
}

.home .metric:last-child {
  border-right: 0;
}

.home .metric strong {
  color: var(--cloud);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.home .metric span {
  max-width: 30ch;
  color: rgba(250, 250, 248, 0.64);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Problem
   -------------------------------------------------------------------------- */

/* The problem section still fits one screen on desktop, so its padding
   follows the screen height rather than the shared section rhythm. */
.home .problem {
  padding-block: clamp(64px, 9vh, 112px);
}

.home .problem .section-heading h2 {
  max-width: 24ch;
}

.home .pain-grid {
  gap: 20px;
}

.home .pain-card {
  padding: 32px;
  border-color: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* The icon sits on a small tint of the problem colour, so it reads as a
   mark rather than a stray line drawing. */
.home .pain-card > svg {
  width: 48px;
  height: 48px;
  margin: 0 0 28px;
  padding: 11px;
  border-radius: 12px;
  background: var(--leak-tint);
  stroke-width: 1.6;
}

.home .pain-card h3 {
  margin-bottom: 12px;
  font-size: clamp(1.25rem, 1.55vw, 1.45rem);
  line-height: 1.25;
}

.home .pain-card p {
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.6;
}

.home .pain-bridge {
  max-width: 40ch;
  margin-top: 40px;
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Estimator. Still one screen on desktop; only its finish changes.
   -------------------------------------------------------------------------- */

.home .estimator-photo,
.home .estimator-photo img {
  border-radius: var(--radius-card);
}

.home .calculator-card {
  border-color: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* Each slider sat inline on a full text line, so every group carried a
   line box of empty space under its helper text. As a block it takes only
   its own height, plus room for the thumb. */
.home .estimator input[type="range"] {
  display: block;
  margin-top: 12px;
}

.home .estimator .range-ends {
  margin-top: 9px;
  line-height: 1.2;
}

.home .calculator-total {
  border-top-color: var(--hairline);
}

.home .control-group {
  border-top-color: var(--hairline);
}

@media (min-width: 1051px) {
  .home .estimator {
    padding: clamp(20px, 3.5vh, 48px) 0;
  }

  .home .estimator .section-heading {
    margin-bottom: 14px;
  }

  .home .estimator .section-heading h2 {
    margin-bottom: 0;
    font-size: clamp(1.8rem, 2.3vw, 2.15rem);
  }

  .home .estimator .calculator-head {
    margin-bottom: 4px;
  }

  .home .estimator .calculator-head h3 {
    font-size: 1.45rem;
  }

  .home .estimator .control-group {
    padding: 6px 0 7px;
  }

  .home .estimator .control-group > p {
    margin: 1px 0 0;
  }

  .home .estimator .range-ends {
    margin-top: 7px;
  }

  .home .estimator .calculator-total {
    padding: 8px 0 6px;
  }

  .home .estimator .calculator-total strong {
    font-size: clamp(2.2rem, 3vw, 2.75rem);
  }

  .home .estimator .calculator-card .button-primary {
    min-height: 52px;
    padding-block: 14px;
  }

  .home .estimator .privacy-line {
    margin-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   Cost statement
   -------------------------------------------------------------------------- */

.home .statement-lede {
  max-width: 48ch;
  color: rgba(250, 250, 248, 0.72);
  font-size: 1.05rem;
  line-height: 1.65;
}

.home .statement-benefits strong {
  font-size: 1.05rem;
}

.home .statement-benefits p {
  color: rgba(250, 250, 248, 0.66);
  font-size: 0.94rem;
}

.home .statement-poster {
  border-color: var(--hairline-dark);
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------------------
   Operator proof
   -------------------------------------------------------------------------- */

.home .operator-copy blockquote {
  max-width: 46ch;
  margin: 28px 0 24px;
  padding-left: 24px;
  border-left-width: 2px;
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1.7;
}

.home .operator-photo {
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

.home .process-grid {
  gap: 20px;
}

.home .process-card {
  min-height: 0;
  padding: 36px 32px 96px;
  border-color: var(--hairline-dark);
  border-radius: var(--radius-card);
  background: rgba(250, 250, 248, 0.035);
}

.home .process-card > svg {
  margin: 8px 0 28px;
}

.home .process-card h3 {
  margin-bottom: 12px;
  font-size: 1.75rem;
}

.home .process-card p {
  margin-bottom: 0;
  color: rgba(250, 250, 248, 0.7);
  font-size: 1rem;
  line-height: 1.65;
}

.home .process-meta {
  right: 32px;
  bottom: 32px;
  left: 32px;
  border-top-color: var(--hairline-dark);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.home .process-cta {
  margin-top: 20px;
  padding: 20px 20px 20px 32px;
  border-color: var(--hairline-dark);
  border-radius: var(--radius-card);
}

.home .process-cta span {
  color: rgba(250, 250, 248, 0.78);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Testimonials. These are proof, so their edge is the proof colour alone.
   The old edge faded into Signal Red, which belongs to the problem.
   -------------------------------------------------------------------------- */

.home .testimonials .section-heading {
  max-width: 860px;
}

.home .testimonial-grid {
  gap: 20px;
}

.home .testimonial-card {
  min-height: 0;
  padding: 32px;
  border-color: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

.home .testimonial-card::before {
  height: 3px;
  background: var(--electric);
}

.home .testimonial-quote-mark {
  margin-bottom: 14px;
  font-size: 3.4rem;
}

.home .testimonial-card blockquote {
  margin-bottom: 32px;
  font-size: clamp(1.06rem, 1.2vw, 1.22rem);
  line-height: 1.45;
}

.home .testimonial-card footer {
  border-top-color: var(--hairline);
}

.home .testimonial-card footer strong {
  font-size: 0.9rem;
}

.home .testimonial-card footer small {
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Guarantees
   -------------------------------------------------------------------------- */

.home .guarantee-intro > p:not(.eyebrow) {
  max-width: 36ch;
  color: var(--slate);
  font-size: 1.05rem;
}

.home .guarantee-list li {
  border-color: var(--hairline);
}

.home .guarantee-list li p {
  color: var(--slate);
  font-size: 1.02rem;
  line-height: 1.65;
}

.home .guarantee-list li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--deep-teal);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.home .guarantee-action p {
  font-family: var(--body);
  font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.home .founder-photo,
.home .founder-photo img {
  border-radius: var(--radius-card);
}

.home .about-lede {
  max-width: 44ch;
  font-size: 1.16rem;
  line-height: 1.6;
}

.home .about-copy > p:not(.eyebrow, .about-lede, .about-objection) {
  max-width: 56ch;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.7;
}

.home .about-objection {
  max-width: 40ch;
  padding-left: 18px;
  border-left: 2px solid var(--electric);
}

.home .about-facts {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Closing. The last headline is the one place the scale steps up again.
   -------------------------------------------------------------------------- */

.home .closing h2 {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
}

.home .closing-card {
  padding: 36px;
  border-color: var(--hairline-dark);
  border-radius: var(--radius-card);
}

.home .closing-card li {
  font-size: 1rem;
}

.home .closing-offer {
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.home .footer-bottom span:last-child {
  font-family: var(--body);
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .home .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home .metric {
    padding: 28px 24px 32px;
    border-bottom: 1px solid var(--hairline-dark);
  }

  .home .metric:nth-child(odd) {
    padding-left: 0;
  }

  .home .metric:nth-child(even) {
    border-right: 0;
  }

  .home .metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .home {
    font-size: 16px;
    --section-pad: 72px;
  }

  .home .hero {
    padding: 112px 0 48px;
  }

  /* The label and paragraph were already left aligned on a phone and the
     headline was centred between them. One edge reads faster on a narrow
     screen, so the whole hero takes the left edge. */
  .home .hero-centered,
  .home .hero-centered .hero-copy {
    text-align: left;
  }

  .home .hero-centered .eyebrow {
    justify-content: flex-start;
  }

  .home .hero-centered h1 {
    margin-bottom: 20px;
    font-size: clamp(2.2rem, 9.6vw, 2.75rem);
    line-height: 1.06;
  }

  .home .hero-centered .eyebrow {
    margin-bottom: 18px;
  }

  .home .hero-centered .hero-lede {
    margin-bottom: 28px;
    font-size: 1.04rem;
  }

  .home .hero-primary-cta {
    min-width: 0;
  }

  .home h2,
  .home .section-heading h2,
  .home .problem .section-heading h2,
  .home .testimonials .section-heading h2,
  .home .statement-copy h2,
  .home .guarantee-intro h2 {
    font-size: clamp(1.8rem, 7.6vw, 2.2rem);
    line-height: 1.1;
  }

  .home .closing h2 {
    font-size: clamp(2.1rem, 9vw, 2.6rem);
  }

  .home .section-heading {
    margin-bottom: 32px;
  }

  .home .metric {
    padding: 24px 16px 28px;
  }

  .home .metric strong {
    font-size: 2rem;
  }

  .home .metric span {
    font-size: 0.8rem;
  }

  .home .pain-card,
  .home .testimonial-card {
    padding: 26px;
  }

  .home .pain-card > svg {
    margin-bottom: 20px;
  }

  .home .process-card {
    padding: 28px 26px 88px;
  }

  .home .process-meta {
    right: 26px;
    bottom: 26px;
    left: 26px;
  }

  .home .process-cta {
    padding: 20px;
  }

  .home .closing-card {
    padding: 26px;
  }
}