/* ==================================================================
   CUSTOM SUNROOF INSTALLATION + HEADLINER LANDING PAGES
   Created 2026-09-06 for the 7-page bulk package.

   Scope: body.cs on the six vehicle pages, body.cs-hl on the headliner page.
   One class per page, matching how every other key in sk_frozen_body_class()
   works. Component rules use the unique .cs- prefix, which no approved page
   carries, so they cannot reach any existing page.

   These are Google Ads / conversion landing pages, not article pages:
   one wide approved graphic, a short confirming headline, two service
   blocks, and a close. No cards, no badges, no decorative chrome, and
   no body Call/Text controls — the header and footer already carry the
   only Call and Text controls on the site.

   Depends on home.css for the design tokens (--red, --charcoal, --cream,
   --line, --font-serif) plus .wrap, the header and the footer. Depends on
   pages.css for .breadcrumb only. It deliberately does NOT load
   legacy-pages.css: none of the .kh-* landing furniture is used here, and
   keeping that 249KB sheet off an ad landing page is worth the separation.
   ================================================================== */

/* ---------- page ground ---------- */
body.cs,
body.cs-hl{
  background:var(--white);
}

/* ---------- 1. WIDE APPROVED GRAPHIC ----------
   The graphic is the hero. It runs the full width of the viewport with no
   crop, no wash, no overlay and no text on top of it — the artwork already
   carries the vehicle name and the "Custom Sunroof Installation" line, and
   it is approved as supplied. aspect-ratio holds the box before the file
   decodes so nothing below it jumps. */
.cs-banner{
  width:100%;
  margin:0;
  line-height:0;
  background:var(--gray-light);
}
.cs-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1774 / 887;
}
body.cs-hl .cs-banner img{ aspect-ratio:1942 / 809; }

/* ---------- 2. THE ANSWER, IMMEDIATELY ----------
   Everything a visitor needs in the first screen after the graphic: what
   this page is, and that the answer to their question is yes. */
.cs-intro{
  padding:44px 0 8px;
}
.cs-intro .breadcrumb{ margin-bottom:22px; }

.cs-kicker{
  margin:0 0 14px;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
}
.cs-intro h1{
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(2rem, 4.4vw, 3.35rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--charcoal);
  max-width:20ch;
}
.cs-intro h1 .accent{ color:var(--red); }

.cs-rule{
  width:72px; height:4px; border-radius:2px;
  background:var(--red);
  margin:26px 0 24px;
}

.cs-lede{
  margin:0;
  max-width:62ch;
  font-size:1.18rem;
  line-height:1.62;
  color:var(--charcoal);
}
.cs-lede strong{ color:var(--charcoal); font-weight:700; }

/* ---------- 3. SECTIONS ---------- */
.cs-section{ padding:52px 0; }
.cs-section.alt{ background:var(--cream); border-block:1px solid var(--line); }
.cs-section:last-of-type{ padding-bottom:64px; }

.cs-h2{
  margin:0 0 10px;
  font-family:var(--font-serif);
  font-size:clamp(1.5rem, 2.5vw, 2.05rem);
  line-height:1.22;
  color:var(--charcoal);
  max-width:26ch;
}
.cs-h2 .accent{ color:var(--red); }

.cs-sub{
  margin:0 0 28px;
  max-width:62ch;
  font-size:1.05rem;
  line-height:1.62;
  color:var(--charcoal-soft);
}

/* ---------- 4. PLAIN SERVICE LIST ----------
   A rule-separated list, not a grid of cards. Two columns only where there
   is genuinely room for them. */
.cs-list{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid var(--line);
  max-width:960px;
}
.cs-list li{
  padding:15px 0 15px 30px;
  border-bottom:1px solid var(--line);
  position:relative;
  font-size:1.04rem;
  line-height:1.55;
  color:var(--charcoal);
}
.cs-list li::before{
  content:"";
  position:absolute; left:2px; top:24px;
  width:9px; height:9px; border-radius:50%;
  background:var(--red);
}
.cs-list li b{ font-weight:700; }

@media (min-width:860px){
  .cs-list--2col{
    columns:2;
    column-gap:52px;
  }
  .cs-list--2col li{ break-inside:avoid; }
}

/* ---------- 5. THE INCLUDED-HEADLINER STATEMENT ----------
   Called out because it is the single most commonly asked question about a
   custom install, and because it is a genuine inclusion rather than a
   promotion. A left rule, not a badge or a coloured box. */
.cs-note{
  margin:30px 0 0;
  padding:20px 0 20px 24px;
  border-left:4px solid var(--red);
  max-width:66ch;
  font-size:1.09rem;
  line-height:1.6;
  color:var(--charcoal);
}
.cs-note strong{ font-weight:700; }

/* The scope-limit note on the interior section uses the same shape in a
   quieter colour: it is a clarification, not a headline. */
.cs-note--quiet{
  border-left-color:var(--line);
  color:var(--charcoal-soft);
  font-size:1.02rem;
}

/* ---------- 6. CLOSE ---------- */
.cs-close{
  padding:52px 0 66px;
  border-top:1px solid var(--line);
}
.cs-close p{
  margin:0;
  max-width:60ch;
  font-size:1.1rem;
  line-height:1.62;
  color:var(--charcoal);
}
.cs-close p + p{ margin-top:14px; }
.cs-close a{
  color:var(--red);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 7. RELATED LINKS ----------
   Plain inline links, no tiles. */
.cs-related{
  margin:26px 0 0; padding:0;
  list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.cs-related a{
  font-size:1rem;
  color:var(--charcoal);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.cs-related a:hover{ color:var(--red); text-decoration-color:var(--red); }

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width:860px){
  .cs-intro{ padding:32px 0 4px; }
  .cs-intro h1{ max-width:none; }
  .cs-lede{ font-size:1.08rem; }
  .cs-section{ padding:40px 0; }
  .cs-section:last-of-type{ padding-bottom:48px; }
  .cs-note{ padding:16px 0 16px 18px; font-size:1.04rem; }
  .cs-close{ padding:40px 0 52px; }
}

@media (max-width:420px){
  .cs-intro h1{ font-size:1.72rem; }
  .cs-lede{ font-size:1.02rem; }
  .cs-list li{ font-size:0.99rem; padding-left:26px; }
  .cs-h2{ font-size:1.36rem; }
}


/* ==================================================================
   9. CUSTOM INTERIOR GRAPHIC                            (2026-09-06)
   One approved wide graphic per vehicle inside the "Complete Custom
   Interior Services" section. Shown whole and unmodified — no crop, no
   wash, no overlay, no text on top; each artwork carries its own
   wordmark.

   It breaks out of .wrap to a near-full-bleed width using the same
   technique the approved Vehicle Makes region dashboard uses
   (92vw, capped, centred), so the section reads as strongly as the hero
   without a second hard edge-to-edge image fighting it.

   Replaces the five-icon illustration band, removed 2026-09-06 at the
   owner's request once the real interior graphics were approved.
   ================================================================== */
.cs-interior-art{
  margin:30px 0 34px;
  line-height:0;
  background:var(--gray-light);
  border-radius:2px;
  overflow:hidden;
}
.cs-interior-art img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1944 / 809;
}

@media (min-width:901px){
  .cs-interior-art{
    width:92vw;
    max-width:1400px;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
  }
}

@media (max-width:900px){
  .cs-interior-art{ margin:24px 0 28px; }
}