/* The homepage in the tint builder page's language
   (docs/superpowers/specs/2026-10-01-homepage-redesign-design.md).
   The sections reuse css/page-sections.css's .ps-* components unchanged; this file holds the
   homepage's own layout and its header offsets. Never set overflow on a section here: only
   .ps-words layers clip, or the FAQ heading stops sticking. */
body.home {
  /* page-sections.css defines the inset only on the builder page (.tint-lp). */
  --ps-inset: clamp(18px, 5vw, 72px);
}
/* Every anchor other pages link to (/#quote, /#services, /#contact …) lands clear of the sticky
   header. The header is 73px on phones and desktops; from 768px its nav wraps: 111px up to
   775-809px, then 91px up to 867-910px, then 73px (measured in Chromium and WebKit; the ranges
   move with the hours badge's text). These tiers are never smaller than the header and at most
   20px larger; the Reel's and the comfort science's pins below use the same ones. */
body.home main > section[id],
body.home #vinyl-wraps { scroll-margin-top: 73px; }
@media (min-width: 768px) and (max-width: 839px) {
  body.home main > section[id],
  body.home #vinyl-wraps { scroll-margin-top: 111px; }
}
@media (min-width: 840px) and (max-width: 959px) {
  body.home main > section[id],
  body.home #vinyl-wraps { scroll-margin-top: 91px; }
}

/* ---- Hero: the Focus RS, the brand line and the quick start ---------------------------- */
.hm-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The first screen under the 73px header. */
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  background: var(--bg);
  isolation: isolate;
}
.hm-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hm-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Dark from the bottom and the left, so the words always sit on shadow. */
.hm-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 3%, rgba(10, 10, 14, 0.62) 42%, rgba(10, 10, 14, 0.2) 72%, rgba(10, 10, 14, 0.55)),
    linear-gradient(90deg, rgba(10, 10, 14, 0.75), rgba(10, 10, 14, 0) 62%);
}
.hm-hero-in {
  width: 100%;
  padding-block: clamp(40px, 7vh, 110px) clamp(32px, 4.4vw, 60px);
  padding-block: clamp(40px, 7svh, 110px) clamp(32px, 4.4vw, 60px);
}
.hm-hero h1 {
  margin-top: 22px;
  max-width: 15ch;
  color: var(--text);
  /* Capped by the screen's height too, so short laptops keep the quick start in view. */
  font: 700 clamp(2.9rem, min(7.6vw, 12.5vh), 7.6rem) / 0.86 var(--disp);
  font: 700 clamp(2.9rem, min(7.6vw, 12.5svh), 7.6rem) / 0.86 var(--disp);
  text-transform: uppercase;
}
.hm-hero h1 .accent { color: var(--red-hot); }
.hm-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: end;
  gap: 26px 48px;
  margin-top: clamp(22px, 3.4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* The quick start comes first in the DOM (and so in the focus order); on desktops it sits right. */
.hm-hero-copy {
  grid-column: 1;
  grid-row: 1;
}
.hm-quick {
  grid-column: 2;
  grid-row: 1;
}
.hm-hero-sub {
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.hm-hero-meta {
  margin-top: 12px;
  color: var(--faint);
  font-size: 0.85rem;
  line-height: 1.5;
}
/* The quick start, lit like the Reel's price card. */
.hm-quick.qq {
  max-width: none;
  margin-top: 0;
  padding: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.2), rgba(20, 20, 27, 0.88) 60%);
  box-shadow: inset 0 2px 0 var(--red);
  animation: none;
}
.hm-quick .qq-label { color: var(--text); }
.hm-quick .cta.full { margin-top: 14px; }
.hm-quick-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 14px;
}
.hm-quick-wrap {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--red);
  color: var(--text);
  font-size: 0.86rem;
}
.hm-quick-wrap:hover { color: var(--red-hot); }
.hm-hero-book { margin-top: 16px; }

/* Below 1024px the quick start sits straight under the headline, so it starts in the first screen. */
@media (max-width: 1023px) {
  .hm-hero-foot { grid-template-columns: 1fr; }
  .hm-hero-copy,
  .hm-quick {
    grid-column: auto;
    grid-row: auto;
  }
}
/* The first screen under the header at its tiers (the anchors' at the top of this file):
   111px to 839px, 91px to 959px, 73px from 960px. */
@media (min-width: 768px) and (max-width: 839px) {
  .hm-hero {
    min-height: calc(100vh - 111px);
    min-height: calc(100svh - 111px);
  }
}
@media (min-width: 840px) and (max-width: 959px) {
  .hm-hero {
    min-height: calc(100vh - 91px);
    min-height: calc(100svh - 91px);
  }
}
@media (max-width: 767px) {
  .hm-hero-in { padding-top: 64px; }
  .hm-hero h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hm-quick .qq-selects { grid-template-columns: 1fr 1fr; }
  .hm-quick #qqModel { grid-column: 1 / -1; }
}

/* ---- Private by design ----------------------------------------------------------------- */
.hm-private-belief {
  max-width: 60ch;
  margin-top: clamp(24px, 3vw, 36px);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}
/* Three promises under one hairline, each marked by a slash: never numbered. */
.hm-private-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.hm-private-list li {
  position: relative;
  padding-top: 30px;
}
.hm-private-list .ps-slash {
  position: absolute;
  top: -2px;
  left: 0;
  width: 38px;
}
.hm-private-list h3 {
  color: var(--text);
  font: 700 clamp(1.5rem, 2.3vw, 2rem) / 1 var(--disp);
  text-transform: uppercase;
}
.hm-private-list p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}
.hm-private .ps-statement-foot p a {
  border-bottom: 1px solid var(--red);
  color: var(--text);
}

@media (max-width: 767px) {
  .hm-private-list {
    grid-template-columns: 1fr;
    margin-left: 4px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .hm-private-list li { padding: 0 0 30px 26px; }
  .hm-private-list .ps-slash {
    top: 6px;
    left: -8px;
    width: 16px;
  }
}

/* ---- Two crafts ------------------------------------------------------------------------ */
.hm-crafts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.hm-craft {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: clamp(26px, 3.4vw, 44px);
}
.hm-craft:first-child { padding-right: clamp(26px, 3.4vw, 44px); }
.hm-craft + .hm-craft {
  padding-left: clamp(26px, 3.4vw, 44px);
  border-left: 1px solid var(--line);
}
.hm-craft-tag {
  color: var(--red-hot);
  font: 600 0.68rem / 1 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hm-craft h3 {
  color: var(--text);
  font: 700 clamp(1.9rem, 3.2vw, 2.7rem) / 0.95 var(--disp);
  text-transform: uppercase;
}
.hm-craft-lead {
  color: var(--muted);
  line-height: 1.6;
}

/* The two films, the infrared number leading each. */
.hm-pk-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--line);
}
.hm-pk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 20px 0;
}
.hm-pk + .hm-pk {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
/* styles.css's .service-pkg-card:hover skin repaints any card it touches. Here a hover changes
   nothing about the card itself; only its button responds. */
.hm-pk-pair .hm-pk:hover {
  border-color: var(--line);
  background: none;
  box-shadow: none;
}
/* Lit like the builder page's Super card, hover included. */
.hm-pk-pair .hm-pk-feat,
.hm-pk-pair .hm-pk-feat:hover {
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.16), rgba(20, 20, 27, 0.55) 60%);
  box-shadow: inset 0 2px 0 var(--red);
}
.hm-pk-tag {
  align-self: flex-start;
  padding-block: 5px;
  color: var(--faint);
  font: 600 0.68rem / 1 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hm-pk-feat .hm-pk-tag {
  padding-inline: 9px;
  background: var(--red);
  color: #fff;
  transform: skewX(-10deg);
}
.hm-pk h4 {
  color: var(--text);
  font: 700 1.25rem / 1 var(--disp);
  text-transform: uppercase;
}
.hm-pk-film {
  color: var(--red-hot);
  font: 600 0.7rem / 1.2 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hm-pk-ir {
  margin-top: 6px;
  color: var(--text);
  font: 700 clamp(3rem, 5.4vw, 4.6rem) / 0.8 var(--disp);
}
.hm-pk-ir span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font: 600 0.68rem / 1.3 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hm-pk-price {
  margin-top: 4px;
  color: var(--text);
  font: 700 1.5rem / 1 var(--disp);
}
.hm-pk-price small {
  margin-left: 8px;
  color: var(--faint);
  font: 600 0.66rem / 1 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hm-pk-select {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--red);
  background: none;
  color: var(--text);
  cursor: pointer;
  font: 600 0.7rem / 1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hm-pk-select:hover,
.hm-pk-select:focus-visible { color: var(--red-hot); }
.hm-craft .ps-pk-both {
  padding-top: 0;
  border-top: 0;
}
.hm-craft-more {
  color: var(--faint);
  font-size: 0.85rem;
  line-height: 1.6;
}
.hm-craft-more a {
  border-bottom: 1px solid var(--red);
  color: var(--text);
}
.hm-craft-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: auto;
  padding-top: 8px;
}
/* An outlined .cta, used beside a solid one. */
.hm-cta-outline {
  border: 1px solid var(--line);
  background: transparent;
}
.hm-cta-outline:hover,
.hm-cta-outline:focus-visible {
  border-color: var(--red);
  background: var(--red);
}

/* The wrap side. */
.hm-wrap-types { border-top: 1px solid var(--line); }
.hm-wrap-types li {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.hm-wrap-types b {
  color: var(--text);
  font: 700 1.2rem / 1.05 var(--disp);
  text-transform: uppercase;
}
.hm-wrap-types span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.hm-finishes-label {
  color: var(--faint);
  font: 600 0.64rem / 1 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hm-finish-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
/* Each chip reads as its finish: a gloss highlight, a satin sheen, flat matte, a shift, chrome bands. */
.hm-finish {
  display: flex;
  align-items: flex-end;
  min-height: 64px;
  padding: 7px 8px;
  border-radius: 3px 3px 14px 3px;
  color: #fff;
  font: 600 0.64rem / 1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.hm-finish-gloss { background: linear-gradient(160deg, #3a0b0d 0%, #b3161b 36%, #ffc2c2 45%, #c81d22 52%, #4a0c0f 100%); }
.hm-finish-satin { background: linear-gradient(160deg, #1b2530 0%, #3b4c5c 45%, #66798c 55%, #253240 100%); }
.hm-finish-matte { background: linear-gradient(160deg, #26282b, #3a3c40); }
.hm-finish-shift {
  background: linear-gradient(130deg, #2a1259 0%, #5b2bd6 28%, #1aa39a 55%, #d9a521 80%, #7a3c12 100%);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}
.hm-finish-chrome {
  background: linear-gradient(170deg, #f4f6f8 0%, #8a929b 30%, #f8fafc 47%, #4a5058 62%, #c9ced4 82%, #6b7178 100%);
  color: #111;
  text-shadow: none;
}
.hm-consult-note {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .hm-crafts-grid { grid-template-columns: 1fr; }
  .hm-craft:first-child { padding-right: 0; }
  .hm-craft + .hm-craft {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}
@media (max-width: 767px) {
  .hm-wrap-types li { grid-template-columns: 1fr; }
  .hm-finish-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Quote: the dark stage, the form lit from behind ----------------------------------- */
.hm-quote {
  border-top: 1px solid var(--line-soft);
  /* The page's brightest moment without a red band: a glow behind the form.
     (Its anchor offset comes from body.home main > section[id] at the top of this file.) */
  background: radial-gradient(60% 55% at 50% 72%, rgba(220, 38, 38, 0.22), rgba(220, 38, 38, 0) 70%), var(--bg);
}

/* ---- FAQ ------------------------------------------------------------------------------- */
/* The heading sits on top and the 19 questions follow in two columns from 1024px (one list was
   about two screens tall). The columns are two real containers, not CSS columns, so opening an
   answer pushes down only its own column. Below 1024px they stack, and main.js shows the first
   six behind a "Show all" button (#faq.is-collapsed); without JavaScript every question shows. */
body.home .ps-faq-grid { grid-template-columns: minmax(0, 1fr); }
body.home .ps-faq-aside { position: static; }
body.home .hm-faq-cols details:last-child { border-bottom: 0; }
body.home .hm-faq-cols { border-bottom: 1px solid var(--line); }
.hm-faq-more {
  justify-self: start;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--red);
  background: none;
  color: var(--text);
  cursor: pointer;
  font: 600 0.72rem / 1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hm-faq-more:hover,
.hm-faq-more:focus-visible { color: var(--red-hot); }
@media (max-width: 1023px) {
  body.home #faq.is-collapsed .hm-faq-col:first-child > details:nth-child(n+7),
  body.home #faq.is-collapsed .hm-faq-col:last-child { display: none; }
}
@media (min-width: 1024px) {
  body.home .hm-faq-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 clamp(32px, 4vw, 64px);
    border-bottom: 0;
  }
  body.home .hm-faq-col { border-bottom: 1px solid var(--line); }
  body.home .hm-faq-more { display: none; }
}

/* ---- Final call to action ---------------------------------------------------------------- */
.hm-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 767px) {
  .hm-final-actions { width: 100%; }
}

/* ---- Contact: no box, the installer's lines on hairlines -------------------------------- */
.hm-contact {
  /* No background line here, so no room for one on top. */
  padding-block: clamp(70px, 8vw, 110px);
  border-top: 1px solid var(--line-soft);
}
.hm-contact .contact-grid {
  gap: 36px clamp(32px, 6vw, 96px);
}
.hm-contact-rows {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.hm-contact .c-row {
  padding-inline: 0;
  border-bottom-color: var(--line);
}
.hm-contact .c-row:hover {
  padding-left: 0;
  background: none;
}
.hm-contact a.c-row:hover .val { color: var(--red-hot); }

/* ---- Who should you call: the plain-language answer block ------------------------------- */
.hm-answer {
  padding-block: clamp(56px, 6vw, 80px);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.hm-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 20px clamp(32px, 6vw, 96px);
}
.hm-answer h2 {
  margin-top: 14px;
  color: var(--text);
  font: 700 clamp(1.5rem, 2.4vw, 2rem) / 1 var(--disp);
  text-transform: uppercase;
}
.hm-answer h2 em {
  color: var(--red-hot);
  font-style: normal;
}
.hm-answer p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.hm-answer .cta { margin-top: 22px; }

@media (max-width: 767px) {
  .hm-answer-grid { grid-template-columns: 1fr; }
}

/* ---- The Reel: the homepage's header and mobile bar ---------------------------------------
   css/work-reel.css tunes the pin for the builder page (a 69px header, 63px on phones, a 69px
   bar at ≤767px). The homepage header is 73px, but 91-111px from 768px up to 867-910px where
   its nav wraps, so the pin follows the anchors' tiers at the top of this file (111px to 839px,
   91px to 959px); its mobile bar shows below 640px (82px, 96px below 360px where its label
   wraps). --wr-top must stay a px literal: js/work-reel.js reads it with parseFloat. */
body.home .work-reel {
  --wr-top: 73px;
  --wr-bottom: 0px;
}
@media (min-width: 768px) and (max-width: 839px) {
  body.home .work-reel { --wr-top: 111px; }
}
@media (min-width: 840px) and (max-width: 959px) {
  body.home .work-reel { --wr-top: 91px; }
}
@media (max-width: 639px) {
  body.home .work-reel { --wr-bottom: 82px; }
}
@media (max-width: 359px) {
  body.home .work-reel { --wr-bottom: 96px; }
}
/* "View all 40 projects": a quiet text button under the price card's link; opens the archive. */
.hm-archive {
  align-self: flex-start;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--red);
  background: none;
  color: var(--text);
  cursor: pointer;
  font: 600 0.72rem / 1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hm-archive:hover,
.hm-archive:focus-visible { color: var(--red-hot); }
/* The archive button adds a row to the end card, whose height is fixed (220-250px on landscape
   phones), so on short screens its rows sit closer and the card's content stays inside it. */
@media (max-height: 440px) {
  body.home .wr-end { gap: 12px; }
}

/* ---- The comfort science: the homepage's header and mobile bar ----------------------------
   Same numbers as the Reel above; css/comfort-science.css tunes them for the builder page. */
body.home .comfort-science {
  --cs-top: 73px;
  --cs-bottom: 0px;
}
@media (min-width: 768px) and (max-width: 839px) {
  body.home .comfort-science { --cs-top: 111px; }
}
@media (min-width: 840px) and (max-width: 959px) {
  body.home .comfort-science { --cs-top: 91px; }
}
@media (max-width: 639px) {
  body.home .comfort-science { --cs-bottom: 82px; }
}
@media (max-width: 359px) {
  body.home .comfort-science { --cs-bottom: 96px; }
}

/* ---- Quote: the car builder (piece 3b) -------------------------------------------------
   The section carries .tint-builder for the builder's variables (css/tint-builder.css); its
   own padding, background and border give way to .ps-section's and .hm-quote's, which load
   later. The car pins under this page's header at the anchors' tiers (top of this file). */
body.home .tint-builder {
  --tb-top: 73px;
  /* The pinned band (below 1024px) reaches the screen edges from inside .ps-in. */
  --tb-gutter: var(--ps-inset);
  border-bottom: 0;
}
@media (min-width: 768px) and (max-width: 839px) {
  body.home .tint-builder { --tb-top: 111px; }
}
@media (min-width: 840px) and (max-width: 959px) {
  body.home .tint-builder { --tb-top: 91px; }
}
/* Full width under the section head, which is the builder's intro here: no intro row. */
body.home .tb-builder {
  width: 100%;
  margin-top: clamp(28px, 4vw, 44px);
  grid-template-areas: "stage panel";
}
.hm-quote-col {
  grid-area: panel;
  min-width: 0;
}
/* A desktop landing (Next, Back, every way in) puts the car where it pins: 20px under the header. */
body.home [data-qb-land] {
  scroll-margin-top: calc(var(--tb-top) + 20px);
}
/* From 768px the header can be up to 20px shorter than its tier (see the top of this file), which
   would leave a strip of scrolling form between it and the pinned car. The band sticks 20px
   higher and pads 20px more on top, so its bottom (and every landing under it) stays put. */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 421px) {
  body.home .tb-stage {
    top: calc(var(--tb-top) - 20px);
    padding-top: 28px;
  }
}
/* The quote's lit top line: a 2px red edge along the panel's top. */
.hm-quote .tb-panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--red);
  border-radius: 3px 3px 0 0;
  z-index: 1;
  pointer-events: none;
}
.hm-quote-under {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}
.hm-quote-under a { color: var(--text); }
.hm-quote-under a:hover { color: var(--red-hot); }


/* ---- Quote: the builder's homepage-only touches (piece 3b) ------------------------------ */
/* The finish chips are Two crafts' (.hm-finish), here as radios. */
.hm-quote .hm-finish {
  position: relative;
  min-height: 58px;
  cursor: pointer;
}
.hm-quote .hm-finish:hover {
  box-shadow: 0 0 0 1px var(--red-hot);
}
.hm-quote .hm-finish:has(input:checked) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.hm-quote .hm-finish:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Every choice in the homepage's builder is at least a 44px target. */
.hm-quote .qchip {
  min-height: 44px;
}