/* ============================================================
   WATTS — design tokens + base
   ============================================================ */

:root {
  /* White-based palette (default) */
  --bg: #FFFFFF;
  --bg-2: #F4F1EC;
  --bg-3: #E8E3DA;
  --ink: #1A1410;
  --ink-soft: #4D423A;
  --ink-mute: #8A7F75;
  --line: rgba(26, 20, 16, 0.14);
  --line-soft: rgba(26, 20, 16, 0.08);
  --brand: #B08768;
  --brand-deep: #8E6A4F;
  --brand-soft: #C9A688;
  --accent: #A07D5F;
  --on-brand: #FFFFFF;

  /* Dark zone color (used by gradient + sections after) */
  --dark: #151311;
  --dark-2: #1F1B17;
  --on-dark: #F4E8D6;

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 160px);

  /* Radii */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-y: 28px;
  --reveal-dur: 900ms;
}

/* Palette: cinema dark */
[data-palette="cinema"] {
  --bg: #14110D;
  --bg-2: #1C1813;
  --bg-3: #25201A;
  --ink: #EFE3D2;
  --ink-soft: #BFAE94;
  --ink-mute: #8A7864;
  --line: rgba(239, 227, 210, 0.14);
  --line-soft: rgba(239, 227, 210, 0.07);
  --brand: #C9A47C;
  --brand-deep: #A8845E;
  --brand-soft: #D9B891;
  --accent: #B89571;
  --on-brand: #14110D;
}

/* Palette: bone (lighter, paper-y) */
[data-palette="bone"] {
  --bg: #F7F2E8;
  --bg-2: #EFE7D6;
  --bg-3: #E5DAC5;
  --ink: #2A1F17;
  --ink-soft: #5C4A3A;
  --ink-mute: #968066;
  --line: rgba(42, 31, 23, 0.14);
  --line-soft: rgba(42, 31, 23, 0.08);
  --brand: #9C7855;
  --brand-deep: #7C5E40;
  --brand-soft: #BC9978;
  --accent: #8A6B4D;
  --on-brand: #F7F2E8;
}

/* Palette: ink (deep teal / charcoal) */
[data-palette="ink"] {
  --bg: #EEE9DD;
  --bg-2: #E4DCCB;
  --bg-3: #D6CCB7;
  --ink: #1B2429;
  --ink-soft: #44525B;
  --ink-mute: #8A8676;
  --line: rgba(27, 36, 41, 0.14);
  --line-soft: rgba(27, 36, 41, 0.07);
  --brand: #2B4047;
  --brand-deep: #1A2A30;
  --brand-soft: #46606A;
  --accent: #355561;
  --on-brand: #F2EADE;
}

/* Font pair: editorial-mono (mono labels + serif display) */
[data-fontpair="editorial-mono"] {
  --font-body: "JetBrains Mono", ui-monospace, monospace;
}

/* Font pair: all-serif */
[data-fontpair="serif-only"] {
  --font-body: "Cormorant Garamond", Georgia, serif;
}

/* Motion: quiet */
[data-motion="quiet"] {
  --reveal-y: 12px;
  --reveal-dur: 600ms;
}
[data-motion="showy"] {
  --reveal-y: 48px;
  --reveal-dur: 1100ms;
}

/* ============================================================
   Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 600ms var(--ease), color 600ms var(--ease);
}

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--brand); color: var(--on-brand); }

/* ============================================================
   Typography
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.027em;
  color: var(--brand);
  margin: 0;
  font-feature-settings: "kern", "liga", "dlig";
}
.display em, .display .em {
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}
[data-italic="off"] .display em,
[data-italic="off"] .display .em { font-style: normal; color: var(--brand); }

.display-xl { font-size: clamp(56px, 10vw, 168px); }
.display-lg { font-size: clamp(44px, 7.2vw, 116px); }
.display-md { font-size: clamp(32px, 5vw, 72px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
.eyebrow.brand { color: var(--brand-deep); }

/* Hero subtitle / tagline reads larger than a tiny label */
.hero__caption .eyebrow {
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.14em;
  line-height: 1.5;
}

/* (additional hero overrides below in the hero block) */

.body-lg {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

h3.card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   Layout
   ============================================================ */

.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.divider {
  height: 1px;
  background: var(--line);
  margin: 0 var(--pad-x);
}

/* ============================================================
   Nav
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), padding 300ms var(--ease);
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.2vw, 64px);
  letter-spacing: 0.02em;
  color: var(--brand);
  line-height: 1;
}
.nav.scrolled .nav__logo {
  font-size: clamp(32px, 3vw, 44px);
  transition: font-size 300ms var(--ease);
}
.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color 200ms var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transition: right 320ms var(--ease);
}
.nav__links a:hover { color: var(--brand-deep); }
.nav__links a:hover::after { right: 0; }

/* Dark mode toggle button (lives inside .nav__links) */
.dark-toggle {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms var(--ease), transform 300ms var(--ease);
  margin-left: 4px;
}
.dark-toggle:hover { color: var(--brand-deep); transform: rotate(-20deg); }
.dark-toggle svg { width: 17px; height: 17px; display: block; }
.dark-toggle .icon-sun { display: none; }
.dark-toggle .icon-moon { display: block; }
[data-palette="cinema"] .dark-toggle .icon-sun { display: block; }
[data-palette="cinema"] .dark-toggle .icon-moon { display: none; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  border-radius: var(--r-sm);
  transition: background-color 250ms var(--ease), transform 250ms var(--ease), letter-spacing 320ms var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--brand-deep); letter-spacing: 0.26em; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  font-weight: 500;
  position: relative;
}
.btn--link::after {
  content: "→";
  display: inline-block;
  transition: transform 320ms var(--ease);
}
.btn--link:hover::after { transform: translateX(6px); }

/* Work rows where the image sits to the LEFT of the copy (the non-reverse
   rows): move the arrow before the text and point it back toward the image.
   Reverse rows keep the trailing → since their image is on the right.
   Desktop only — on mobile the rows stack with the image on top. */
@media (min-width: 881px) {
  .work__item:not(.work__item--reverse) .btn--link::after { content: none; }
  .work__item:not(.work__item--reverse) .btn--link::before {
    content: "←";
    display: inline-block;
    transition: transform 320ms var(--ease);
  }
  .work__item:not(.work__item--reverse) .btn--link:hover::before { transform: translateX(-6px); }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: 0;
  position: relative;
}
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  border-radius: 0;
  overflow: hidden;
}
/* When the hero iframe carries the splat mat, grow the container by the
   mat height so the visible 3D portion below the mat is still a full 16:9. */
.hero .hero__media.splat-embed {
  aspect-ratio: auto;
  height: calc(100vw * 9 / 16 + var(--mat-h));
}
/* Splat embed: hide the SuperSplat badge in the top-left corner of the iframe
   by overlaying a colored block in the page bg color. The crop-top trick is
   kept available (set --crop-top to a positive value if you also want to clip
   a top-edge bar — defaults to 0 since the badge fix doesn't need it).
   Apply to any iframe container (.hero__media, .capture-iframe, etc.) */
.splat-embed {
  --crop-top: 0px;
  --mat-h: clamp(80px, 9vw, 104px);
}
/* On the capture detail pages the iframe sits below a heading section
   (no nav floating over it), so the mat only needs to cover the badge. */
.capture-iframe.splat-embed {
  --mat-h: clamp(40px, 4.5vw, 60px);
  aspect-ratio: auto;
  height: calc((100vw - var(--pad-x) * 2) * 9 / 16 + var(--mat-h));
}
.splat-embed iframe {
  top: calc(var(--crop-top) * -1);
  height: calc(100% + var(--crop-top));
}
.splat-embed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mat-h);
  background: var(--bg);
  z-index: 3;
  pointer-events: none;
}
.hero__media iframe,
.hero__media img,
.hero__media video,
.hero__media .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Hero treatment variants (driven by Tweaks) */
.hero__media[data-treatment="still"] .placeholder::after {
  content: " · still frame";
  opacity: 0.6;
}
.hero__media[data-treatment="type"] {
  display: none;
}
[data-hero-media][data-treatment="type"] ~ .hero__caption {
  padding-top: clamp(80px, 14vw, 200px);
}
[data-hero-media][data-treatment="type"] ~ .hero__caption .display {
  font-size: clamp(72px, 14vw, 220px);
}
.hero__caption {
  text-align: center;
  padding: clamp(20px, 5vw, 90px) var(--pad-x) clamp(40px, 6vw, 80px);
}
.hero__caption .eyebrow { margin-bottom: 36px; display: block; }
.hero__caption .display { margin-bottom: 30px; }
.hero__caption .btn { margin-top: clamp(32px, 5vw, 60px); }

/* Hero-specific sizing */
.hero__caption .display-xl {
  font-size: clamp(40px, 7vw, 118px); /* ~30% smaller than the global display-xl */
}
.hero__caption .eyebrow {
  font-size: clamp(16px, 1.3vw, 18px); /* ~20% larger */
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin-bottom: 0;
}
.hero__caption .display { margin-bottom: 28px; }

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto clamp(60px, 8vw, 120px);
  width: fit-content;
  color: var(--ink-soft);
}
.scroll-indicator .eyebrow { color: var(--brand-deep); }
.scroll-indicator__line {
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, var(--brand) 0%, transparent 100%);
  animation: pulse-line 2.4s var(--ease) infinite;
}
@keyframes pulse-line {
  0%, 100% { opacity: 0.4; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================================
   Work section
   ============================================================ */

.work__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(60px, 8vw, 100px);
  gap: 40px;
}
.work__head .display { flex: 1; }

.work__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 140px);
}
.work__item:last-child { margin-bottom: 0; }
.work__item--reverse .work__media { order: 2; }
.work__item--reverse .work__copy { order: 1; }

.work__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  border-radius: var(--r-md);
  overflow: hidden;
}
.work__media .placeholder,
.work__media iframe,
.work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work__media img {
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
  filter: saturate(0.95);
}
.work__media:hover img {
  transform: scale(1.04);
  filter: saturate(1.05);
}
.work__media .badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: var(--r-sm);
}

.work__copy {
  padding: 0;
}
.work__copy .eyebrow { display: block; margin-bottom: 24px; }
.work__copy h3 { margin-bottom: 28px; }
.work__copy p { margin: 0 0 36px; }

/* ============================================================
   Services
   ============================================================ */

.services {
  background: var(--bg-2);
  transition: background-color 600ms var(--ease);
}
.services__head { margin-bottom: clamp(60px, 8vw, 100px); text-align: center; }
.services__head .eyebrow { margin-bottom: 28px; display: inline-block; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.service {
  padding: 0;
  position: relative;
}
.service__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(64px, 7vw, 110px);
  line-height: 1;
  color: var(--brand-soft);
  margin-bottom: 32px;
  display: block;
}
.service h3 { margin-bottom: 20px; }
.service p { color: var(--ink-soft); margin: 0; font-size: 15px; line-height: 1.65; }

/* ============================================================
   Stats strip
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .eyebrow { display: block; margin-bottom: 18px; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.02em;
}

/* ============================================================
   Comparison table
   ============================================================ */

.compare__head {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.compare__head .eyebrow { display: inline-block; margin-bottom: 28px; }

.compare {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.compare__row {
  display: contents;
}
.compare__cell {
  padding: 28px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
}
.compare__cell--label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.compare__cell--brand {
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--ink);
  font-weight: 500;
}
.compare__header {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 24px 14px;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.compare__header--brand {
  color: var(--brand-deep);
}

/* ============================================================
   About / big type
   ============================================================ */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.about__grid .about__title { order: 1; }
.about__grid .about__copy { order: 2; }
.about__title { color: #D9BC9D; }
.about__title em { color: var(--ink); }
.about__copy p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1em;
}
.about__copy p:last-child { margin: 0; }

/* ============================================================
   Footer CTA
   ============================================================ */

.cta-footer {
  text-align: center;
  padding: clamp(120px, 14vw, 220px) var(--pad-x);
  background: var(--bg-2);
  transition: background-color 600ms var(--ease);
}
.cta-footer .eyebrow { display: inline-block; margin-bottom: 32px; }
.cta-footer .display { margin-bottom: clamp(40px, 6vw, 70px); }

.footer {
  padding: 48px var(--pad-x);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer a:hover { color: var(--brand-deep); }
.footer__links { display: flex; gap: 28px; }

/* ============================================================
   Placeholder media (no image yet)
   ============================================================ */

.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--brand) 12%, transparent) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 24px;
  text-align: center;
}

/* ============================================================
   Reveal animations
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-motion="off"] [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Parallax target */
.parallax {
  will-change: transform;
}

/* ============================================================
   Capture detail page
   ============================================================ */

.capture-hero {
  padding: 120px var(--pad-x) 0;
}
.capture-hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}
.capture-hero__meta h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.015em;
  margin: 0;
}
.capture-hero__meta h1 em { color: var(--ink); }
.capture-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.capture-iframe iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.capture-iframe .placeholder {
  position: absolute; inset: 0;
}

.capture-info {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(60px, 8vw, 120px) var(--pad-x);
  align-items: start;
}
.capture-info dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 18px 36px;
  margin: 0;
}
.capture-info dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.capture-info dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}
.capture-info p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.2em;
}

.capture-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px var(--pad-x) 80px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Contact
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: 140px var(--pad-x) var(--section-y);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--brand);
}
.field textarea { resize: vertical; min-height: 100px; }

.contact-info {
  align-self: start;
  padding-top: 8px;
}
.contact-info h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.contact-info h2 em { color: var(--ink); }
.contact-info p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.2em;
  max-width: 44ch;
}
.contact-info .email {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--brand-deep);
  margin-top: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  width: fit-content;
}

/* ============================================================
   Gradient zone (white → #151311) + dark sections after
   ============================================================ */

.gradient-zone {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 6%, #E6D0BC 50%, var(--dark) 100%);
  position: relative;
}

/* Services section sits inside the gradient zone — drop its own bg so the
   gradient shows through, and flip its text to read on the dark end. */
.gradient-zone .services {
  background: transparent;
  color: var(--on-dark);
}
.gradient-zone .services__head .eyebrow.brand { color: var(--brand-soft); }
.gradient-zone .services .display { color: var(--brand-soft); }
.gradient-zone .services .display em { color: #FFFFFF; }
.gradient-zone .services .service__num { color: rgba(201, 166, 136, 0.45); }
.gradient-zone .services .card-title { color: #FFFFFF; }
.gradient-zone .services .service p { color: rgba(240, 231, 216, 0.72); }

/* Stats sit in the lower-middle of the gradient — invert to read on darker bg */
.gradient-zone .stats { border-color: rgba(255, 255, 255, 0.16); }
.gradient-zone .stat { border-right-color: rgba(255, 255, 255, 0.16); }
.gradient-zone .stat__value { color: var(--brand-soft); }
.gradient-zone .stat .eyebrow { color: rgba(240, 231, 216, 0.62); }

/* Sections AFTER the gradient zone — page continues on dark */
#compare,
.cta-footer,
.footer {
  background: var(--dark);
  color: var(--on-dark);
}

#compare .eyebrow.brand,
.cta-footer .eyebrow.brand { color: var(--brand-soft); }
#compare .display,
.cta-footer .display { color: var(--brand-soft); }
#compare .display em,
.cta-footer .display em { color: #FFFFFF; }

/* Compare table dark restyle */
#compare .compare__cell {
  color: rgba(240, 231, 216, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
#compare .compare__cell--label { color: #FFFFFF; }
#compare .compare__cell--brand {
  background: rgba(176, 135, 104, 0.16);
  color: #FFFFFF;
}
#compare .compare__header {
  color: rgba(240, 231, 216, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
#compare .compare__header--brand { color: var(--brand-soft); }

/* Footer dark restyle */
.footer {
  border-top-color: rgba(255, 255, 255, 0.10);
  color: rgba(240, 231, 216, 0.50);
}
.footer a:hover { color: var(--brand-soft); }

/* Dark mode (cinema palette): the page is already dark — flatten the
   gradient and let the dark token carry through. */
[data-palette="cinema"] .gradient-zone { background: var(--bg); }
[data-palette="cinema"] #compare,
[data-palette="cinema"] .cta-footer,
[data-palette="cinema"] .footer { background: var(--bg); }

/* ============================================================
   Custom cursor — inverse dot
   A 20px white circle with mix-blend-mode:difference renders as the
   exact inverse of whatever sits beneath it. Pointer devices only;
   touch keeps the native (absent) cursor. JS in app.js moves it.
   ============================================================ */
.cursor-dot { display: none; }

@media (hover: hover) and (pointer: fine) {
  .has-cursor-dot, .has-cursor-dot * { cursor: none; }

  .cursor-dot {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px; /* center on the pointer */
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 99999;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 220ms var(--ease), width 200ms var(--ease),
                height 200ms var(--ease), margin 200ms var(--ease);
    will-change: transform;
  }
  .cursor-dot.is-hidden { opacity: 0; }
  /* Over the 3D splat viewer: hide the dot (the iframe owns the pointer) */
  .cursor-dot.over-splat { opacity: 0; }
  /* Subtly enlarge over interactive elements */
  .cursor-dot.is-link {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
  }
}

/* ============================================================
   Responsive (desktop / large screens)
   ------------------------------------------------------------
   Mobile & tablet overrides (≤ 880px) now live in mobile.css,
   loaded separately so they can be edited without touching
   desktop. Keep desktop-only responsive tweaks here.
   ============================================================ */