/* ShadeShifters — prospect demo. Design tokens first, components after. */

@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans";
  src: url("/fonts/source-sans.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: dark graphite ground with a jewel-emerald accent and a chrome
     highlight treatment on key elements — direction pulled from a
     reference site the client responded to (Luminous Tints), adapted
     from that automotive-customization/premium energy to a service-pitch
     page: one locked jewel accent rather than the reference's full rainbow
     of product-line colors, no fabricated urgency/stock badges. */
  --ink: oklch(16% 0.02 250);
  --ink-2: oklch(22% 0.022 250);
  --ink-3: oklch(29% 0.024 250);
  --paper: oklch(97% 0.004 250);
  --paper-2: oklch(93% 0.006 250);
  --line: oklch(87% 0.008 250);
  --line-dark: oklch(32% 0.025 250);

  --accent: oklch(66% 0.16 155);
  --accent-dark: oklch(48% 0.13 155);
  --accent-light: oklch(82% 0.11 150);

  --chrome-1: oklch(88% 0.01 250);
  --chrome-2: oklch(62% 0.015 250);
  --chrome-3: oklch(38% 0.02 250);

  --text: oklch(20% 0.015 250);
  --text-muted: oklch(42% 0.018 250);
  --text-on-dark: oklch(94% 0.006 250);
  --text-on-dark-muted: oklch(70% 0.014 250);

  --font-display: "Big Shoulders", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.625rem;
  --fs-xl: clamp(2rem, 3.2vw, 2.75rem);
  --fs-2xl: clamp(2.75rem, 5vw, 4rem);
  --fs-hero: clamp(2.75rem, 6.5vw, 5.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;

  --z-sticky: 100;
  --z-modal: 300;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Uppercase is reserved for small accent labels (.eyebrow, badges, tags)
   - it does real work there because it contrasts against mixed-case
   headlines. Applying it to every heading too removes that contrast and
   just reads as shouting, not hierarchy. Only the hero h1 gets it, as
   the one deliberate poster moment on the page. */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.98;
  text-wrap: balance;
  margin: 0;
}

h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
p.prose { max-width: 62ch; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  padding: 0.8rem 1.375rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover { background: var(--accent-light); }

.btn-ghost {
  background: transparent;
  border-color: color-mix(in oklch, var(--text-on-dark) 26%, transparent);
  color: var(--text-on-dark);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); }

.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent-dark); color: var(--accent-dark); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-dark);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.brand span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--text-on-dark); }

.nav-cta { display: flex; align-items: center; gap: var(--space-4); }

.nav-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-on-dark);
  cursor: pointer;
  padding: var(--space-2);
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-menu-toggle { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: var(--text-on-dark);
  min-height: 92vh;
  overflow: clip;
}

.hero-slides { position: relative; min-height: 92vh; }

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-16) var(--space-24);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow, 400ms) var(--ease-out);
}
.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 55%, transparent) 45%, color-mix(in oklch, var(--ink) 78%, transparent) 100%);
}

.hero-content { max-width: 780px; }

.hero-dots {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-6);
  display: flex;
  gap: var(--space-3);
  z-index: 2;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklch, var(--text-on-dark) 50%, transparent);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
}
.eyebrow-light { color: var(--accent-light); }

.hero h1 {
  font-size: var(--fs-hero);
  text-shadow: 0 2px 24px color-mix(in oklch, var(--ink) 60%, transparent);
}
.hero h1 em { color: var(--accent-light); font-style: normal; }

.hero-sub {
  margin-top: var(--space-6);
  font-size: var(--fs-md);
  color: var(--text-on-dark-muted);
  max-width: 46ch;
}

.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-stats {
  margin-top: var(--space-12);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--accent-light);
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-1);
}

/* ---------- Section scaffolding ---------- */

section { padding-block: var(--space-24); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-12);
}

.section-head .eyebrow { color: var(--accent-dark); }

.section-head h2 { font-size: var(--fs-2xl); }

.section-alt { background: var(--paper-2); }

.section-dark {
  background: var(--ink);
  color: var(--text-on-dark);
}
.section-dark .section-head .eyebrow { color: var(--accent-light); }

/* ---------- Before / After slider ---------- */

.compare {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}

.compare-frame { position: absolute; inset: 0; }
.compare-frame img { width: 100%; height: 100%; object-fit: cover; }

.compare-frame.after {
  clip-path: inset(0 0 0 var(--reveal, 50%));
}

.compare-tag {
  position: absolute;
  top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 75%, transparent);
  color: var(--text-on-dark);
}
.compare-tag.before { left: var(--space-4); }
.compare-tag.after { right: var(--space-4); }

.compare-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal, 50%);
  width: 2px;
  background: var(--paper);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 20%, transparent);
}

.compare-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.compare-slider::-webkit-slider-thumb {
  appearance: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--accent);
  cursor: ew-resize;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--ink) 35%, transparent);
  margin-top: -24px;
}
.compare-slider::-webkit-slider-runnable-track { height: 100%; background: transparent; }

.compare-slider::-moz-range-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--accent);
  cursor: ew-resize;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--ink) 35%, transparent);
}
.compare-slider::-moz-range-track { height: 100%; background: transparent; border: none; }

.compare-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-dark); outline-offset: 3px; }

.compare-caption {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- Finish grid (image-forward, the actual translation of the
   Luminous reference's product grid into a service-business context:
   finishes instead of SKUs, no fabricated stock/urgency badges) ---------- */

.finish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

/* Horizontal scroll-snap row, the lightweight equivalent of the
   reference site's product carousels - no JS needed, native scroll
   with each tile snapping into place. */
.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.row-head h2 { font-size: var(--fs-xl); }

.row-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.section-dark .row-link, .row-link.on-dark { color: var(--accent-light); }
.row-link:hover { text-decoration: underline; }

.carousel-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.carousel-row > * { scroll-snap-align: start; }

.finish-tile { display: flex; flex-direction: column; }

.finish-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.finish-media img { width: 100%; height: 100%; object-fit: cover; }
.finish-tile:hover .finish-media { transform: translateY(-4px); }

.finish-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
}

.finish-tile h3 {
  font-size: var(--fs-md);
}

.finish-tile p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.finish-note {
  margin-top: var(--space-8);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- Why-tint strip (icon-led, no arbitrary numbering - these
   four benefits aren't a sequence, so they don't get 01/02/03/04) ---------- */

.why-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}

.why-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.why-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--accent-light);
  margin-top: 2px;
}

.why-item h3 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: var(--space-1);
}
.why-item p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); }

/* ---------- Testimonials (honest placeholder state - no fabricated
   quotes or names, see index.html comments) ---------- */

.testimonial-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: space-between;
}
.testimonial-empty {
  border-style: dashed;
  background: var(--paper-2);
}
.testimonial-quote {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
}
.testimonial-attr {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
}
.cta-band h2 { font-size: var(--fs-xl); color: var(--ink); }
.cta-band p { margin-top: var(--space-4); font-size: var(--fs-md); max-width: 50ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: var(--space-8); }
.cta-band .btn-outline { border-color: color-mix(in oklch, var(--ink) 40%, transparent); }
.cta-band .btn-outline:hover { border-color: var(--ink); }

/* ---------- Footer ---------- */

footer {
  background: var(--ink);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-12) var(--space-8);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--line-dark);
}

.footer-note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.footer-tagline {
  margin-top: var(--space-3);
  max-width: 32ch;
}

.footer-heading {
  font-weight: 700;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2);
}

.footer-grid a {
  text-decoration: none;
  display: block;
  padding-block: 0.15rem;
}
.footer-grid a:hover { color: var(--accent-light); }

.footer-muted { opacity: 0.6; font-size: var(--fs-xs); }

/* ---------- Reveal on scroll (purposeful: draws the eye to the compare
   widget and service list on entry, doesn't run anywhere else) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}