/* ==========================================================
   Sunroof King — Custom Sunroof Installation (Page #6) ONLY
   Warm cream / orange treatment approved 2026-08-18, following
   Website Media/Sunroof Custom Installation/PHOTOS/
     APPROVED-Custom-Sunroof-Installation-Mockup.png

   SCOPE: every rule below is scoped to .ci, which wraps only the
   BODY of this page. The frozen header, footer and trust strip sit
   outside .ci and are untouched. This file is linked from
   services/sunroof-custom-installation.html and nowhere else, so
   Pages #1-#5 cannot be affected.
   ========================================================== */

.ci{
  --ci-cream:#FDF9F3;
  --ci-cream-alt:#FCF4E9;
  --ci-card:#FFFDFA;
  --ci-card-warm:#FCF5EB;
  --ci-line:#EFE3D3;
  --ci-line-orange:rgba(242,96,12,0.28);
  --ci-ink:#1E1B18;
  --ci-ink-soft:#57504A;
  --ci-orange:#F2600C;
  --ci-orange-soft:#FDEEE2;
  --ci-shadow:0 3px 14px rgba(60,40,20,0.07);
  --ci-shadow-md:0 12px 30px rgba(60,40,20,0.12);
  display:block;
  background:var(--ci-cream);
  font-family:var(--font-sans);
  color:var(--ci-ink);
}

/* Sans-serif, heavy headings for this page only (site default is serif) */
.ci h1, .ci h2, .ci h3, .ci h4{
  font-family:var(--font-sans);
  color:var(--ci-ink);
  font-weight:800;
  letter-spacing:-0.005em;
}

.ci-section{ padding:56px 0; }
.ci-section--alt{ background:var(--ci-cream-alt); }

/* Centered section title with the orange underline bar from the mockup */
.ci-h2{
  text-align:center;
  font-size:1.45rem;
  text-transform:uppercase;
  letter-spacing:0.015em;
  line-height:1.25;
}
.ci-h2::after{
  content:"";
  display:block;
  width:56px; height:4px;
  margin:10px auto 0;
  background:var(--ci-orange);
  border-radius:2px;
}
.ci-section-note{
  max-width:760px; margin:22px auto 0;
  text-align:center; font-size:0.8rem; line-height:1.6;
  color:var(--ci-ink-soft);
}

/* ---------- Breadcrumb ---------- */
.ci-breadcrumb{
  padding:14px 0 24px;
  font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ci-ink-soft);
}
.ci-breadcrumb a:hover{ color:var(--ci-orange); }
.ci-breadcrumb .sep{ margin:0 8px; color:var(--ci-line); }
.ci-breadcrumb .current{ color:var(--ci-orange); }

/* ---------- Hero ---------- */
.ci-hero{ padding:34px 0 54px; }
.ci-hero-grid{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 0.74fr);
  gap:46px; align-items:center;
}
.ci-kicker{
  color:var(--ci-orange);
  font-size:0.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap;
  margin-bottom:14px;
}
.ci-hero h1{
  font-size:clamp(2.05rem, 3.3vw, 2.9rem);
  line-height:1.1;
  margin-bottom:20px;
}
.ci-hero p{
  color:var(--ci-ink-soft);
  font-size:0.98rem; line-height:1.65;
  max-width:52ch;
  margin-bottom:14px;
}
.ci-chips{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:12px; margin-top:26px;
}
.ci-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--ci-card-warm);
  border:1px solid var(--ci-line);
  border-radius:12px;
  padding:13px 13px;
}
.ci-chip svg{
  width:24px; height:24px; flex:0 0 24px;
  color:var(--ci-orange);
}
.ci-chip span{
  font-size:0.76rem; font-weight:700; line-height:1.32;
  color:var(--ci-ink);
}
/* ---------- Hero video (portrait reel, replaces the hero still) ---------- */
.ci-hero-video-frame{
  position:relative;
  max-width:330px;
  margin:0 auto;
  border:3px solid var(--ci-orange);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--ci-shadow-md);
  background:#000;
  line-height:0;
}
.ci-hero-video{
  display:block;
  width:100%; height:auto;
  aspect-ratio:9 / 16;    /* the reel's own ratio: never cropped, never stretched */
  object-fit:contain;
  border-radius:15px;
  background:#000;
}

/* Overlay click target: keeps Chrome's control bar off the poster until play.
   Hidden unless the hero script has run, so the video still works without JS. */
.ci-hero-video-play{ display:none; }
.ci-hero-video-frame.js-overlay .ci-hero-video-play{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background 0.18s ease;
}
.ci-hero-video-frame.js-overlay .ci-hero-video-play:hover{
  background:rgba(242,96,12,0.12);
}
.ci-hero-video-frame.js-overlay .ci-hero-video-play:focus-visible{
  outline:3px solid var(--ci-orange);
  outline-offset:-8px;
}
.ci-hero-video-frame.is-playing .ci-hero-video-play{ display:none; }

/* ---------- What To Know: one row of six ---------- */
.ci-know-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:16px; margin-top:32px;
}
.ci-know-card{
  background:var(--ci-card-warm);
  border:1px solid var(--ci-line);
  border-radius:14px;
  padding:22px 16px 24px;
  text-align:center;
  box-shadow:var(--ci-shadow);
}
.ci-know-card svg{
  width:34px; height:34px;
  margin:0 auto 14px;
  color:var(--ci-orange);
}
.ci-know-card h3{
  font-size:0.9rem; line-height:1.3;
  margin-bottom:10px;
}
.ci-know-card p{
  font-size:0.79rem; line-height:1.6;
  color:var(--ci-ink-soft);
}

/* ---------- Custom Sunroof Types: photo cards ---------- */
.ci-type-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:18px; margin-top:32px;
}
.ci-type-card{
  background:var(--ci-card);
  border:1px solid var(--ci-line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--ci-shadow);
  display:flex; flex-direction:column;
}
.ci-type-card__photo{
  width:100%;
  aspect-ratio:2.9 / 1;   /* card window onto the 940x280 style images (cover, never stretched) */
  object-fit:cover;
  display:block;
  background:var(--ci-card-warm);
  border-bottom:1px solid var(--ci-line);
}
.ci-type-card__body{
  padding:16px 16px 20px;
  text-align:center;
}
.ci-type-card__body h3{
  font-size:0.86rem;
  text-transform:uppercase;
  letter-spacing:0.015em;
  line-height:1.3;
  margin-bottom:8px;
}
.ci-type-card__body p{
  font-size:0.79rem; line-height:1.6;
  color:var(--ci-ink-soft);
}
.ci-badge{
  display:inline-block; vertical-align:middle;
  margin-left:7px;
  background:var(--ci-orange); color:#fff;
  font-size:0.6rem; font-weight:800;
  letter-spacing:0.06em;
  padding:3px 8px; border-radius:999px;
}
.ci-type-card--featured{ border-color:var(--ci-line-orange); }
.ci-illus-note{
  display:block; margin-top:9px;
  font-size:0.7rem; font-style:italic; line-height:1.45;
  color:var(--ci-ink-soft);
}

/* Folding card: spans two columns, photo left / copy right */
.ci-type-card--wide{
  grid-column:span 2;
  flex-direction:row; align-items:stretch;
}
.ci-type-card--wide .ci-type-card__photo{
  width:52%; height:auto; aspect-ratio:auto;
  border-bottom:0; border-right:1px solid var(--ci-line);
  min-height:100%;
}
.ci-type-card--wide .ci-type-card__body{
  width:48%;
  display:flex; flex-direction:column; justify-content:center;
  padding:18px 20px;
}

/* "Not sure which type?" callout */
.ci-callout{
  grid-column:span 2;
  display:flex; align-items:center; gap:20px;
  background:var(--ci-orange-soft);
  border:1px solid var(--ci-line-orange);
  border-radius:14px;
  padding:22px 26px;
}
.ci-callout svg{
  width:46px; height:46px; flex:0 0 46px;
  color:var(--ci-orange);
}
.ci-callout h3{ font-size:1.05rem; margin-bottom:6px; }
.ci-callout p{ font-size:0.87rem; line-height:1.6; color:var(--ci-ink-soft); }

/* ---------- Compact three-column band ---------- */
.ci-band{
  display:grid; grid-template-columns:1.05fr 1.05fr 0.9fr;
  gap:0;
}
.ci-band-col{ padding:0 30px; }
.ci-band-col + .ci-band-col{ border-left:1px solid var(--ci-line); }
.ci-band-col h2{
  text-align:center;
  font-size:1.02rem;
  text-transform:uppercase;
  letter-spacing:0.015em;
  line-height:1.3;
  margin-bottom:22px;
}
.ci-band-col h2::after{
  content:"";
  display:block; width:44px; height:3px;
  margin:9px auto 0;
  background:var(--ci-orange); border-radius:2px;
}

.ci-check-list li{
  display:grid; grid-template-columns:20px 1fr;
  gap:11px; align-items:start;
  margin-bottom:13px;
  font-size:0.86rem; line-height:1.5;
  color:var(--ci-ink-soft);
}
.ci-check-list svg{ width:20px; height:20px; color:var(--ci-orange); margin-top:1px; }

.ci-steps li{
  display:grid; grid-template-columns:30px 1fr;
  gap:13px; align-items:start;
  padding-bottom:16px;
  position:relative;
}
.ci-steps li:last-child{ padding-bottom:0; }
.ci-steps li::before{
  content:"";
  position:absolute; left:14px; top:30px; bottom:2px;
  width:2px; background:var(--ci-line);
}
.ci-steps li:last-child::before{ display:none; }
.ci-step-num{
  width:30px; height:30px; border-radius:50%;
  background:var(--ci-orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:800;
  position:relative; z-index:1;
}
.ci-steps h4{ font-size:0.87rem; margin-bottom:3px; }
.ci-steps p{ font-size:0.8rem; line-height:1.55; color:var(--ci-ink-soft); }

.ci-adv-list li{
  display:grid; grid-template-columns:34px 1fr;
  gap:13px; align-items:start;
  margin-bottom:18px;
}
.ci-adv-list li:last-child{ margin-bottom:0; }
.ci-adv-list svg{ width:34px; height:34px; color:var(--ci-orange); }
.ci-adv-list h4{ font-size:0.87rem; margin-bottom:3px; }
.ci-adv-list p{ font-size:0.8rem; line-height:1.55; color:var(--ci-ink-soft); }

/* ---------- Real Custom Installation Work ---------- */
.ci-gallery{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:14px; margin-top:30px;
}
.ci-gallery img{
  width:100%;
  aspect-ratio:1200 / 820;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--ci-line);
  box-shadow:var(--ci-shadow);
  display:block;
}
.ci-gallery-caption{
  text-align:center; margin-top:18px;
  font-size:0.82rem; color:var(--ci-ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .ci-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .ci-hero-video-frame{ order:-1; }
  .ci-know-grid{ grid-template-columns:repeat(3, 1fr); }
  .ci-type-grid{ grid-template-columns:repeat(2, 1fr); }
  .ci-band{ grid-template-columns:1fr; }
  .ci-band-col{ padding:26px 0; }
  .ci-band-col + .ci-band-col{
    border-left:0; border-top:1px solid var(--ci-line);
  }
  .ci-gallery{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 720px){
  .ci-section{ padding:42px 0; }
  .ci-hero{ padding:22px 0 40px; }
  .ci-kicker{ white-space:normal; }
  .ci-chips{ grid-template-columns:repeat(2, 1fr); }
  .ci-know-grid{ grid-template-columns:repeat(2, 1fr); }
  .ci-type-grid{ grid-template-columns:1fr; }
  .ci-type-card--wide{ grid-column:span 1; flex-direction:column; }
  .ci-type-card--wide .ci-type-card__photo{
    width:100%; aspect-ratio:940 / 280;
    border-right:0; border-bottom:1px solid var(--ci-line);
  }
  .ci-type-card--wide .ci-type-card__body{ width:100%; text-align:center; }
  .ci-callout{ grid-column:span 1; flex-direction:column; text-align:center; gap:12px; }
  .ci-gallery{ grid-template-columns:repeat(2, 1fr); }
  .ci-h2{ font-size:1.25rem; }
}

/* ==========================================================
   Added 2026-08-21 for the Custom Sunroof Installation rebuild.
   Still scoped to .ci and still linked from this page alone, so
   no frozen page can be affected. The approved cream/orange
   tokens and the frozen hero rules above are untouched.
   ========================================================== */

/* Explanatory body copy blocks. */
.ci-prose{ max-width:820px; margin:26px auto 0; }
.ci-prose p{
  color:var(--ci-ink-soft); font-size:0.99rem; line-height:1.78;
  margin-bottom:16px;
}
.ci-prose p:last-child{ margin-bottom:0; }
.ci-prose strong{ color:var(--ci-ink); }
.ci-prose a{ color:var(--ci-orange); font-weight:700; }
.ci-prose a:hover{ text-decoration:underline; }

/* Plain advisory panel. Informational, not a promotional banner. */
.ci-note{
  max-width:820px; margin:26px auto 0;
  background:var(--ci-card); border:1px solid var(--ci-line);
  border-left:4px solid var(--ci-orange);
  border-radius:14px; box-shadow:var(--ci-shadow);
  padding:24px 26px;
}
.ci-note h3{
  font-size:0.79rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ci-ink); margin-bottom:10px;
}
.ci-note p{ font-size:0.95rem; color:var(--ci-ink-soft); line-height:1.7; margin-bottom:10px; }
.ci-note p:last-child{ margin-bottom:0; }
.ci-note a{ color:var(--ci-orange); font-weight:700; }
.ci-note a:hover{ text-decoration:underline; }

/* Shop facts strip, cream variant of the approved site component. */
.ci-facts{
  max-width:860px; margin:30px auto 0;
  background:var(--ci-card); border:1px solid var(--ci-line);
  border-radius:14px; box-shadow:var(--ci-shadow);
  padding:26px 28px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 30px;
}
.ci-fact{ display:flex; gap:13px; align-items:flex-start; }
.ci-fact svg{ width:20px; height:20px; color:var(--ci-orange); flex-shrink:0; margin-top:2px; }
.ci-fact div{ font-size:0.95rem; color:var(--ci-ink-soft); line-height:1.6; }
.ci-fact strong{
  display:block; font-size:0.77rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ci-ink); margin-bottom:3px;
}
.ci-facts a{ color:var(--ci-orange); font-weight:700; }
.ci-facts a:hover{ text-decoration:underline; }

@media (max-width: 760px){
  .ci-facts{ grid-template-columns:1fr; padding:22px 20px; }
  .ci-note{ padding:20px 20px; }
}