/* Dark palette and ambient photographic reflections. */
:root {
  color-scheme: dark;
  --bg: #08090a;
  --ink: #f0eee9;
  --muted: #a6a6a3;
  --rule: #292a2b;
  --line: #292a2b;
  --soft: #121315;
  --accent: #d8a588;
  --surface: #131416;
}

html, body { background: var(--bg); color: var(--ink); }
html, body { overflow-x: clip; }
::selection { background: #dec1a4; color: #151310; }

/* Keep navigation quiet against both the dark canvas and bright photographs. */
html .nav,
html .nav.scrolled,
html:not(.svg-backdrop) .nav,
html:not(.svg-backdrop) .nav.scrolled,
html .nav.refraction-ready,
html .nav.refraction-ready.scrolled,
html:not(.svg-backdrop) .nav.refraction-ready,
html:not(.svg-backdrop) .nav.refraction-ready.scrolled {
  background: rgba(18, 19, 20, .88);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 6px 25px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.nav .nav-refraction { display: none !important; }
.nav.refraction-ready::before,
.nav.refraction-ready::after { content: none; }
.nav .brand, .nav .header-social a { color: var(--ink); }
.brand-role { color: #bebeb8; }
.nav .nav-links a { color: #b5b5b1; text-shadow: none; }
.nav .nav-links a:hover, .nav .nav-links a.active { color: #fff; text-shadow: none; }
.header-social a:hover { background: rgba(255, 255, 255, .08); }
.nav-utilities:has(.mobile-language-row) .header-social { border-color: var(--rule); }
.lang-toggle, .service-language {
  background: #222426;
  border-color: rgba(255, 255, 255, .06);
  box-shadow: none;
}
.lang-toggle:hover { background: #292b2d; }
.lang-thumb { background: #474a4b; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
body[data-lang] .lang-toggle .lang-option { color: #b8b9b6; }
body[data-lang] .lang-toggle .lang-option[aria-pressed="true"] { color: #fff; }
.lang-toggle:has(.lang-option:focus-visible) { outline-color: var(--ink); }
.service-language a[aria-current="page"] { background: #474a4b; color: #fff; }

.hero-sub { color: #c4c4bf; }
.hero, .hero-video { background: #08090a; }
.hero-video, .hero-video-media { border-radius: 12px; }
.hero-video-control { border-color: rgba(255, 255, 255, .25); }
.name-masthead--photo { isolation: isolate; }
.series-num, .eyebrow { color: #d8a588; }
.series-head { z-index: 1; }
.seo-strip, #about, #contact, #services, .footer { position: relative; }

/* Three sampled color fields feather outward; no large blur filters or
   scrolling canvas are needed. The photographs retain their original color. */
.work-item.ambient-frame,
.hero.ambient-frame,
.work-grid .work-item.ambient-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border-radius: 12px;
}
.ambient-frame > .ambient-light {
  position: absolute;
  inset: -22% -16%;
  z-index: -1;
  display: block;
  pointer-events: none;
  color: rgb(var(--glow-left, 77 51 35));
  background: radial-gradient(ellipse at 23% 48%, currentColor 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .34;
  transition: color 1600ms ease;
}
.ambient-frame > .ambient-light::before,
.ambient-frame > .ambient-light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: color 1600ms ease;
}
.ambient-frame > .ambient-light::before {
  color: rgb(var(--glow-right, 62 45 29));
  background: radial-gradient(ellipse at 79% 46%, currentColor 0%, transparent 63%);
}
.ambient-frame > .ambient-light::after {
  color: rgb(var(--glow-bottom, 74 46 29));
  background: radial-gradient(ellipse at 50% 77%, currentColor 0%, transparent 65%);
}
.hero.ambient-frame > .ambient-light { inset: -20% -13%; opacity: .47; }
.work-item.ambient-frame > img,
.work-item.ambient-frame > video,
.work-item.ambient-frame > picture,
.work-item.ambient-frame > a {
  position: relative;
  z-index: 0;
  border-radius: inherit;
}
.work-item.ambient-frame > picture img,
.work-item.ambient-frame > a img,
.work-item.ambient-frame > a video { border-radius: inherit; }
.work-item.ambient-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.work-item.ambient-frame:hover img,
.work-item.ambient-frame:hover video { transform: none; }
.work-item, .work-grid .work-item, .hero-main, .hero-side > figure,
.about-portrait { background: #141516; }
.about-portrait, .hero-main, .hero-side > figure { border-radius: 12px; }
.work-item figcaption { background: var(--bg); }
.related a { color: #c7c7c2; }

/* Give the closing invitation a second, slightly lighter dark surface. */
.cta { background: #111214; border-block: 1px solid #262729; }
.cta-title, .cta-copy h2, .cta-body em { color: var(--ink); }
.cta-title .soft { color: #d8a588; -webkit-text-fill-color: #d8a588; }
.cta-body, .cta-copy p, .cta-kicker { color: #b4b4af; }
.cta .cta-button, .cta-grid > .button.primary {
  color: #171819;
  background: #ecebe7;
  border-color: #ecebe7;
}
.cta .cta-call, .cta-copy .button {
  color: #ecebe7;
  background: transparent;
  border-color: #656663;
}
.cta .cta-button:hover, .cta .cta-call:hover,
.cta-grid > .button.primary:hover, .cta-copy .button:hover {
  color: #121313;
  background: #d8b69d;
  border-color: #d8b69d;
}
.button.primary { background: var(--ink); color: var(--bg); }
.button.primary:hover { background: #d8b69d; color: var(--bg); border-color: #d8b69d; }
.email-copy-button:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.footer, .site-privacy-controls { color: var(--muted); }

/* Contact and consent controls use the same palette, preserving behavior. */
.modal-card { background: #141516; border: 1px solid #303133; border-radius: 16px; }
.contact-modes { background: #202123; }
.contact-mode[aria-pressed="true"] { background: #383a3c; color: #fff; }
.field input, .field textarea, .field select { background-color: #101113; border-color: #454649; }
.field input::placeholder, .field textarea::placeholder { color: #898b8c; }
.modal-hint.error { color: #ffaca1; }
.form-validated .field input:invalid,
.form-validated .field select:invalid,
.form-validated .field textarea:invalid { border-color: #ffaca1; }
.consent-panel { background: #191a1c; color: var(--ink); border-color: #393b3d; box-shadow: 0 12px 45px rgba(0, 0, 0, .4); }
.consent-body, .consent-privacy, .consent-close, .consent-option small { color: #b3b4af; }
.consent-actions button { color: #efefea; border-color: #5d5f60; }
.consent-actions button:hover { background: #303235; }
.consent-options, .consent-option { border-color: #3c3e40; }
.consent-option input { accent-color: #d8b69d; }
.consent-actions button:focus-visible, .consent-panel a:focus-visible,
.site-privacy-controls :focus-visible, .consent-close:focus-visible { outline-color: var(--ink); }
[data-privacy-language] p, [data-privacy-language] li { color: #b9bbb6; }
[data-privacy-language] .updated { color: #92958f; }

.mobile-back-top:not([hidden]) {
  color: var(--ink);
  background: rgba(31, 32, 34, .94);
  border-color: #464849;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
}
.mobile-back-top:active { background: #414345; }

@media (max-width: 780px) {
  #nav.mobile-nav-ready .mobile-menu-toggle {
    color: var(--ink);
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .08);
  }
  #nav.mobile-nav-ready .mobile-menu-toggle:active { background: #353739; }
  #nav.mobile-nav-ready .mobile-nav-panel {
    background: rgba(24, 25, 27, .98);
    border-color: #3a3b3d;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  }
  #nav.mobile-nav-ready .mobile-nav-panel .nav-links a:hover { background: rgba(255, 255, 255, .06); }
  #nav.mobile-nav-ready .mobile-nav-panel:has(.lang-toggle, .service-language) .nav-links,
  #nav.mobile-nav-ready .mobile-nav-panel:has(.header-social) .nav-links,
  #nav.mobile-nav-ready .header-social { border-color: #38393b; }
  .ambient-frame > .ambient-light { inset: -12% -9%; opacity: .28; }
  .hero.ambient-frame > .ambient-light { inset: -10% -10%; opacity: .37; }
  .work-item.ambient-frame, .hero.ambient-frame,
  .work-grid .work-item.ambient-frame,
  .hero-video, .hero-video-media, .about-portrait { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-frame > .ambient-light,
  .ambient-frame > .ambient-light::before,
  .ambient-frame > .ambient-light::after { transition: none; }
}

@media (forced-colors: active) {
  .ambient-light { display: none !important; }
  html, body { background: Canvas; color: CanvasText; }
}
