html[data-page="detailing"],
html[data-page="windows"] {
  --action:      #0A6FDB;
  --action-lift: #3C8CE3;
  --action-deep: #0046C4;
  --action-wash: #EAF4FF;
  --on-action:   #FFFFFF;
  --edge-action: rgba(10, 111, 219, 0.38);
  --action-soft: rgba(10, 111, 219, 0.10);
}

html[data-page="detailing"][data-theme="dark"],
html[data-page="windows"][data-theme="dark"] {
  --action:      #63B0FF;
  --action-lift: #8AC6FF;
  --action-deep: #3E97F0;
  --action-wash: #10263F;
  --on-action:   #04121F;
  --edge-action: rgba(99, 176, 255, 0.34);
  --action-soft: rgba(99, 176, 255, 0.16);
}

@media (prefers-color-scheme: dark) {
  html[data-page="detailing"]:not([data-theme="light"], [data-theme="paper"]),
  html[data-page="windows"]:not([data-theme="light"], [data-theme="paper"]) {
    --action:      #63B0FF;
    --action-lift: #8AC6FF;
    --action-deep: #3E97F0;
    --action-wash: #10263F;
    --on-action:   #04121F;
    --edge-action: rgba(99, 176, 255, 0.34);
    --action-soft: rgba(99, 176, 255, 0.16);
  }
}

html[data-page="detailing"] body,
html[data-page="windows"] body { -webkit-tap-highlight-color: rgba(10, 111, 219, 0.16); }





.rec { display: grid; gap: 40px; align-items: start; }
.rec-figs { display: grid; gap: 34px; min-width: 0; }
.rec-say { min-width: 0; }
.rec-lead { margin: 0; display: block; }
.rec-num {
  display: block;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: clamp(5rem, 15vw, 11.5rem);
  font-weight: 800; line-height: 0.82; letter-spacing: -0.055em;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}
.rec-lab {
  display: block; margin-top: 18px;
  color: var(--navy-2);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.3;
}
.rec-side { margin: 0; border-top: 1px solid var(--hair); }
.rec-side > div {
  display: grid; gap: 5px;
  padding: 16px 0; border-bottom: 1px solid var(--hair);
}
.rec-side dt {
  color: var(--navy-2);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.3;
}
.rec-side dd {
  margin: 0; color: var(--navy);
  font-size: 16.5px; font-weight: 500; line-height: 1.45;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .rec { grid-template-columns: 0.82fr 1fr; gap: 72px; }
  .rec-say { padding-top: 10px; }
}

.d-acts { margin-top: 32px; }
.rec-say .prose { max-width: 56ch; }

.bleed-shot { padding: 0; }
.bleed-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover; object-position: 50% 50%;
  background: var(--navy-deep);
}
@media (min-width: 720px) {
  .bleed-shot img {
    aspect-ratio: auto;
    height: clamp(360px, calc(var(--vh, 1svh) * 62), 680px);
  }
}

.jgal { display: flex; flex-wrap: wrap; gap: 12px; }
.jrow { display: contents; }
.jgal .shot {
  flex-grow: var(--ar); flex-shrink: 1; flex-basis: 0;
  min-width: 100%;
  aspect-ratio: var(--ar);
}
@media (hover: hover) {
  .jgal .shot:hover img { transform: scale(1.035); }
}

@media (min-width: 600px) {
  .jgal { gap: 14px; }
  .jgal .shot { min-width: 40%; }
}


@media (min-width: 900px) {
  .jgal { gap: 16px; }
  .jrow { display: flex; flex: 1 0 100%; gap: 16px; }
  .jgal .shot { min-width: 0; }
}

.d-gal-head { padding-bottom: 34px; }
.d-gal-head .sub { margin-bottom: 0; }
.d-gal { padding-top: 34px; }

.close .big-quote { max-width: 24ch; }
.close .big-quote b { color: var(--action); font-weight: 700; }
.close .sub { margin-bottom: 34px; }

@media (min-width: 720px) {
  .close .big-quote { max-width: 30ch; }
}


html[data-page="detailing"],
html[data-page="windows"] {
  color-scheme: light;

  --bg:       #F7FAFD;
  --shell:    #E7F0FA;
  --core:     #FFFFFF;
  --fg:       #0B1117;
  --muted-fg: #4A5A69;

  --navy:      #0E2439;
  --navy-2:    #3B5570;
  --navy-deep: #0A3A70;

  --hair:     rgba(11, 17, 23, 0.13);
  --hair-2:   rgba(11, 17, 23, 0.08);
  --nav-ink:  #16283C;
  --edge:     #9FB4C8;
  --quiet:     #DCE7F2;
  --quiet-ink: #16283C;
  --inner-hi:  rgba(255, 255, 255, 0.95);

  --on-band:     #FFFFFF;
  --on-band-2:   rgba(228, 239, 252, 0.94);
  --band-accent: #9BD0FF;
  --band-hair:   rgba(255, 255, 255, 0.22);

  --grain: 0.008;
  --select-bg:  #DCE7F2;
  --select-ink: #0B1117;
}

html[data-page="detailing"] .page-head::before,
html[data-page="windows"] .page-head::before {
  background:
    radial-gradient(58% 80% at 20% -18%, rgba(30, 120, 220, 0.55), transparent 74%),
    radial-gradient(40% 48% at 92% 108%, rgba(155, 208, 255, 0.16), transparent 74%);
}

html[data-page="detailing"][data-theme="dark"],
html[data-page="windows"][data-theme="dark"] {
  color-scheme: dark;

  --bg:       #0B1117;
  --shell:    #141D27;
  --core:     #1A2530;
  --fg:       #EAF1F8;
  --muted-fg: #A8B8C6;

  --navy:      #EAF1F8;
  --navy-2:    #9FB2C2;
  --navy-deep: #0A2036;

  --hair:     rgba(234, 241, 248, 0.15);
  --hair-2:   rgba(234, 241, 248, 0.09);
  --nav-ink:  #D6E4F0;
  --edge:     rgba(168, 184, 198, 0.46);
  --quiet:     #2A3948;
  --quiet-ink: #D6E4F0;
  --inner-hi:  rgba(220, 235, 250, 0.05);

  --on-band:     #FFFFFF;
  --on-band-2:   rgba(226, 238, 250, 0.94);
  --band-accent: #8AC6FF;
  --band-hair:   rgba(255, 255, 255, 0.22);

  --grain: 0.016;
  --select-bg:  #0A6FDB;
  --select-ink: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  html[data-page="detailing"]:not([data-theme="light"], [data-theme="paper"]),
  html[data-page="windows"]:not([data-theme="light"], [data-theme="paper"]) {
    color-scheme: dark;

    --bg:       #0B1117;
    --shell:    #141D27;
    --core:     #1A2530;
    --fg:       #EAF1F8;
    --muted-fg: #A8B8C6;

    --navy:      #EAF1F8;
    --navy-2:    #9FB2C2;
    --navy-deep: #0A2036;

    --hair:     rgba(234, 241, 248, 0.15);
    --hair-2:   rgba(234, 241, 248, 0.09);
    --nav-ink:  #D6E4F0;
    --edge:     rgba(168, 184, 198, 0.46);
    --quiet:     #2A3948;
    --quiet-ink: #D6E4F0;
    --inner-hi:  rgba(220, 235, 250, 0.05);

    --on-band:     #FFFFFF;
    --on-band-2:   rgba(226, 238, 250, 0.94);
    --band-accent: #8AC6FF;
    --band-hair:   rgba(255, 255, 255, 0.22);

    --grain: 0.016;
    --select-bg:  #0A6FDB;
    --select-ink: #FFFFFF;
  }
}

html[data-page="detailing"][data-theme="dark"] .page-head::before,
html[data-page="windows"][data-theme="dark"] .page-head::before {
  background:
    radial-gradient(58% 80% at 20% -18%, rgba(20, 84, 156, 0.55), transparent 74%),
    radial-gradient(40% 48% at 92% 108%, rgba(138, 198, 255, 0.12), transparent 74%);
}
@media (prefers-color-scheme: dark) {
  html[data-page="detailing"]:not([data-theme="light"], [data-theme="paper"]) .page-head::before,
  html[data-page="windows"]:not([data-theme="light"], [data-theme="paper"]) .page-head::before {
    background:
      radial-gradient(58% 80% at 20% -18%, rgba(20, 84, 156, 0.55), transparent 74%),
      radial-gradient(40% 48% at 92% 108%, rgba(138, 198, 255, 0.12), transparent 74%);
  }
}

.dfx { position: relative; overflow: hidden; }
.dfx-shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../img/detail-accord-paint.webp") 50% 50% / cover no-repeat;
  mask: url("../img/detail-accord-paint.webp") 50% 50% / cover no-repeat;
  mix-blend-mode: screen;
}
.dfx-band {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 30%;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0.16) 20%,
      rgba(255, 255, 255, 0.66) 22.5%, rgba(255, 255, 255, 0.66) 33%,
      rgba(255, 255, 255, 0.16) 35.5%, rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0.5) 53%,
      rgba(255, 255, 255, 0.5) 57%, rgba(255, 255, 255, 0) 59%),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.09) 28%, rgba(255, 255, 255, 0.09) 62%, rgba(255, 255, 255, 0));
  transform: translateX(-100%) skewX(-12deg);
  will-change: transform;
}