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); }



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

.sq { position: relative; overflow: hidden; }
html.sq-on .sq::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: inset(0 0 0 var(--sq-x, 0px));
  -webkit-backdrop-filter: blur(14px) saturate(0.7) brightness(1.08);
  backdrop-filter: blur(14px) saturate(0.7) brightness(1.08);
  background:
    radial-gradient(60% 55% at 28% 38%, rgba(255, 255, 255, 0.34), transparent 70%),
    radial-gradient(50% 45% at 76% 64%, rgba(255, 255, 255, 0.22), transparent 70%),
    rgba(226, 231, 236, 0.3);
}
html.sq-on:not(.sq-js) .sq::before { animation: sq-lift 500ms ease-out 4s forwards; }
@keyframes sq-lift { to { opacity: 0; } }

.sq-blade {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 12px; margin-left: -12px; pointer-events: none;
  background: linear-gradient(90deg, #6D7176, #E1E4E7 38%, #9A9EA3 68%, #111111 72%, #111111);
  box-shadow: -8px 0 16px rgba(0, 0, 0, 0.24);
  transform: translateX(-60px);
  will-change: transform;
}
.sq-blade::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 90px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
}
.sq-blade::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 22px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.sq-blade.real { width: 0; margin-left: 0; background: none; box-shadow: none; }
.bleed-shot .sq-tool {
  position: absolute; top: 50%; left: 0;
  width: auto; height: 106%; max-width: none; aspect-ratio: auto;
  object-fit: fill; background: none;
  transform: translate(-0.27%, -50%);
  filter: drop-shadow(10px 16px 18px rgba(0, 0, 0, 0.35));
}

.w-statement { padding-block: 0; }
.w-statement-in { display: grid; gap: 0; }
.w-say {
  padding: 64px max(var(--gutter), env(safe-area-inset-left))
           44px max(var(--gutter), env(safe-area-inset-right));
}
.w-huge {
  font-size: clamp(2.9rem, 8.4vw, 6.5rem);
  line-height: 0.94; letter-spacing: -0.05em; font-weight: 800;
  margin: 0 0 30px; max-width: 14ch;
}
.w-tall { margin: 0; }
.w-tall img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--navy-deep);
}

@media (min-width: 900px) {
  .w-statement-in {
    grid-template-columns: 1fr 0.82fr;
    gap: 64px; align-items: center;
    padding-left: max(
      calc(var(--gutter) + env(safe-area-inset-left)),
      calc((100% - var(--maxw)) / 2 + var(--gutter))
    );
  }
  .w-say { padding: 96px 0; min-width: 0; }
}

.spec { margin: 0; border-top: 1px solid var(--hair); }
.spec > div {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}
.spec dt {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--action-deep);
  line-height: 1.3;
}
.spec dd {
  margin: 0; color: var(--navy);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  font-weight: 600; line-height: 1.25; letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

@media (min-width: 560px) {
  .spec > div {
    grid-template-columns: 13rem 1fr;
    gap: 28px; align-items: baseline;
    padding: 24px 0;
  }
}

html[data-page="windows"] .page-head + .bleed-shot { padding-top: 0; }
html[data-page="windows"] .page-head.plain + .bleed-shot { padding-top: clamp(28px, 4vw, 44px); }
html[data-page="windows"] .sec { padding-block: 64px; }
html[data-page="windows"] .sec.tight { padding-top: 48px; }
html[data-page="windows"] .w-facts { padding-bottom: 40px; }
html[data-page="windows"] #main .sub { margin-bottom: 38px; }


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%);
  }
}