/* ═══════════════════════════════════════════════════
   Gonzalo Chapa · Photography Portfolio
   Pure CSS — zero dependencies
   ═══════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --ink:    #0b0906;
  --cream:  #f4efe6;
  --dust:   #c0a46e;
  --wa:     #25D366;
  --neon:   #ff1f30;
  --purple: #26154a;
  --gap:    3px;
  --pad-x:  clamp(20px, 5vw, 72px);
  --pad-y:  clamp(64px, 8vw, 120px);
  --r:      cubic-bezier(.25,.46,.45,.94);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Light mode theme ───────────────────────────────────── */
[data-theme="light"] {
  --ink:      #f0ece3;
  --cream:    #1a1612;
  --dust:     #8b6a1a;
  --dust-dim: rgba(139,106,26,.1);
  --mist:     rgba(26,22,18,.05);
}
[data-theme="light"] body        { background:#f0ece3; color:#1a1612; }
[data-theme="light"] #nav.scrolled  { background:rgba(240,236,227,.94); border-bottom-color:rgba(139,106,26,.15); }
[data-theme="light"] #nav::before   { background:linear-gradient(to bottom,rgba(240,236,227,.7) 0%,transparent 100%); }
[data-theme="light"] .nav-overlay   { background:rgba(240,236,227,.98); }
[data-theme="light"] .overlay-link  { color:rgba(26,22,18,.7); }
[data-theme="light"] .overlay-link:hover { color:var(--dust); }
[data-theme="light"] body::after    { opacity:.015; }
[data-theme="light"] #loader        { background:#f0ece3; }
[data-theme="light"] .ticker-section{ background:#f0ece3; }
[data-theme="light"] .tick1         { color:rgba(139,106,26,.3); }
[data-theme="light"] .tick2         { color:rgba(26,22,18,.18); }
[data-theme="light"] .contact-section { background:linear-gradient(135deg,#e0d8cc 0%,#ece6da 100%); }
[data-theme="light"] .contact-section::before { color:rgba(0,0,0,.04); }
[data-theme="light"] .nav-logo      { color:#1a1612; }
[data-theme="light"] .hamburger span{ background:#1a1612; }
[data-theme="light"] .photo-item img, [data-theme="light"] .work-card img {
  filter:brightness(.95) contrast(1.04) saturate(.9);
}

/* Theme toggle button */
.theme-toggle {
  background:none; border:none;
  color:rgba(244,239,230,.4); cursor:pointer;
  padding:6px; display:flex; align-items:center;
  transition:color .3s; position:relative; z-index:1;
  min-width:36px; min-height:36px; justify-content:center;
}
.theme-toggle:hover { color:var(--dust); }
[data-theme="light"] .theme-toggle { color:rgba(26,22,18,.4); }
[data-theme="light"] .theme-toggle:hover { color:var(--dust); }

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  line-height: 1.6;
  font-weight: 300;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ── FILM GRAIN ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.03;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain {
  0%   { background-position: 0 0; }
  25%  { background-position: -64px 32px; }
  50%  { background-position: 32px -64px; }
  75%  { background-position: -32px 64px; }
  100% { background-position: 64px -32px; }
}

/* ── LOADER ── */
#loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 8000;
  will-change: opacity;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1.1s var(--r), visibility 1.1s;
}
#loader.out {
  opacity: 0;
  visibility: hidden;
}
#loader svg {
  fill: var(--dust);
  width: 180px;
  height: 140px;
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.loader-line {
  width: 120px;
  height: 1px;
  background: var(--dust);
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}
.loader-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  animation: loadSlide 1.8s var(--r) infinite;
}
@keyframes loadSlide {
  0%   { left: -100%; right: 100%; }
  100% { left: 0; right: 0; }
}
.loader-text {
  margin-top: 16px;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  color: rgba(244,239,230,0.4);
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
}

/* ── PROGRESS BAR ── */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--dust);
  z-index: 9999;
  width: 0;
  transition: width 0.1s linear;
}

/* ── NAV ── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24px + var(--safe-top)) var(--pad-x) 24px;
  transition: background 0.4s var(--r), backdrop-filter 0.4s;
}
#nav.scrolled {
  background: rgba(11,9,6,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: calc(14px + var(--safe-top));
  padding-bottom: 14px;
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.32em;
  color: var(--cream);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 24px;
}
.nav-links a {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  color: rgba(244,239,230,0.6);
  transition: color 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--dust);
}
.inner-page .nav-links {
  display: flex;
}
.hire-btn {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1px solid var(--dust);
  color: var(--dust);
  transition: background 0.3s, color 0.3s;
  font-family: 'DM Sans', sans-serif;
}
.hire-btn:hover {
  background: var(--dust);
  color: var(--ink);
}
#hamburger {
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 7600;
}
#hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--cream);
  position: absolute;
  left: 0;
  transition: all 0.35s var(--r);
}
#hamburger span:nth-child(1) { top: 0; }
#hamburger span:nth-child(2) { top: 9px; }
#hamburger span:nth-child(3) { top: 18px; }
#hamburger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ── NAV OVERLAY ── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,9,6,0.98);
  z-index: 7550;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.55s var(--r);
}
.nav-overlay.open {
  transform: translateX(0);
}
.nav-overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.nav-overlay-links a {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(36px, 7vw, 64px);
  color: var(--cream);
  padding: 12px 0;
  border-bottom: 0.5px solid rgba(192,164,110,0.12);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
  transition-delay: 0s;
}
.nav-overlay.open .nav-overlay-links a {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay.open .nav-overlay-links a:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.open .nav-overlay-links a:nth-child(2) { transition-delay: 0.16s; }
.nav-overlay.open .nav-overlay-links a:nth-child(3) { transition-delay: 0.22s; }
.nav-overlay.open .nav-overlay-links a:nth-child(4) { transition-delay: 0.28s; }
.nav-overlay.open .nav-overlay-links a:nth-child(5) { transition-delay: 0.34s; }
.nav-overlay-cta {
  margin-top: 40px;
  padding: 14px 36px;
  border: 1px solid var(--dust);
  color: var(--dust);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.3s, color 0.3s;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s, background 0.3s, color 0.3s;
}
.nav-overlay.open .nav-overlay-cta {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay-cta:hover {
  background: var(--dust);
  color: var(--ink);
}
.nav-overlay-footer {
  margin-top: 48px;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: rgba(244,239,230,0.35);
  text-align: center;
  line-height: 2.2;
  opacity: 0;
  transition: opacity 0.5s 0.5s;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  padding: 0 20px 0;
}
.nav-overlay.open .nav-overlay-footer {
  opacity: 1;
}
#overlayClose {
  position: absolute;
  top: 20px;
  right: var(--pad-x);
  font-size: 28px;
  color: var(--cream);
  cursor: pointer;
  z-index: 7560;
  opacity: 0.6;
  transition: opacity 0.3s;
}
#overlayClose:hover { opacity: 1; }

/* ── LIGHTBOX ── */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(11,9,6,0.97);
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
#lightbox.open {
  opacity: 1;
  visibility: visible;
}
#lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  transform: scale(0.9);
  transition: transform 0.4s var(--r), opacity 0.13s;
}
#lightbox.open img {
  transform: scale(1);
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 28px;
  color: var(--cream);
  opacity: 0.6;
  transition: opacity 0.3s;
  cursor: pointer;
}
.lb-close:hover { opacity: 1; }
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: var(--cream);
  opacity: 0.5;
  transition: opacity 0.3s;
  cursor: pointer;
  padding: 20px;
}
.lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: rgba(244,239,230,0.5);
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  max-width: 80vw;
}

/* ── Lightbox mobile improvements ───────────────────────── */
@media (max-width: 768px) {
  #lb-img {
    max-width: 100vw;
    max-height: 80svh;
  }
  .lb-close {
    top: calc(16px + var(--safe-top, 0px));
    right: 20px;
    font-size: 1.4rem;
    min-width: 48px; min-height: 48px;
    background: rgba(11,9,6,.5);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .lb-nav {
    font-size: 1.6rem;
    padding: 0;
    min-width: 52px; min-height: 52px;
    background: rgba(11,9,6,.4);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lb-caption {
    font-size: .58rem;
    bottom: calc(20px + var(--safe-bottom, 0px));
    padding: 0 60px;
    text-align: center;
    white-space: normal;
  }
  .lb-counter {
    top: calc(20px + var(--safe-top, 0px));
    left: 20px;
  }
}

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  right: calc(28px + var(--safe-right));
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 24px rgba(37,211,102,0.3);
  transition: transform 0.3s var(--r), box-shadow 0.3s;
  opacity: 0;
  transform: translateY(20px);
  animation: waPopIn 0.5s var(--r) 2.6s forwards;
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 32px rgba(37,211,102,0.4);
}
.wa-float svg { width: 20px; height: 20px; fill: #fff; }
.wa-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
@keyframes waPopIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0; }
}

/* ── BACK TO TOP ── */
.back-top {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  left: calc(28px + var(--safe-left));
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192,164,110,0.14);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(244,239,230,0.4);
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, border-color 0.3s;
  z-index: 600;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
}
.back-top:hover {
  border-color: var(--dust);
  color: var(--dust);
}

/* ── FOOTER ── */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--pad-x);
  border-top: 0.5px solid rgba(192,164,110,0.1);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.35);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-left {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}
.footer-right {
  display: flex;
  gap: 20px;
}
.footer-right a {
  color: rgba(244,239,230,0.35);
  transition: color 0.3s;
}
.footer-right a:hover { color: var(--dust); }

/* ── SCROLL FADE-IN ── */
.fi {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fi.vis {
  opacity: 1;
  transform: translateY(0);
}
.fi.d1 { transition-delay: 0.08s; }
.fi.d2 { transition-delay: 0.18s; }
.fi.d3 { transition-delay: 0.28s; }

/* ═══════════════════════════════════════════════════
   INDEX — HERO
   ═══════════════════════════════════════════════════ */
.hero-v2 {
  height: 100svh;
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1a1610;
  background-size: cover;
  background-position: center;
}
.hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,9,6,0.92) 0%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 20px;
}
.hero-title {
  font-size: clamp(52px, 9vw, 116px);
  line-height: 0.95;
  margin-bottom: 36px;
}
.hero-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  display: block;
}
.hero-title span {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  display: block;
  letter-spacing: 0.06em;
}
.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-ghost {
  padding: 14px 32px;
  border: 1px solid var(--cream);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.3s, color 0.3s;
}
.btn-ghost:hover {
  background: var(--cream);
  color: var(--ink);
}
.btn-gold {
  padding: 14px 32px;
  background: var(--dust);
  color: var(--ink);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  border: 1px solid var(--dust);
  transition: background 0.3s, color 0.3s;
}
.btn-gold:hover {
  background: transparent;
  color: var(--dust);
}
.scroll-cue {
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--dust);
  opacity: 0.5;
  animation: floatCue 2.5s ease-in-out infinite;
}
.scroll-cue .arrow { font-size: 18px; display: block; }
.scroll-cue .label {
  font-size: 0.52rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-top: 4px;
}
@keyframes floatCue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── TICKER ── */
.ticker-section {
  height: 88px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.ticker-row {
  white-space: nowrap;
  overflow: hidden;
}
.ticker-row .ticker-inner {
  display: inline-block;
  white-space: nowrap;
}
.ticker-row.left .ticker-inner {
  animation: scrollL 40s linear infinite;
}
.ticker-row.right .ticker-inner {
  animation: scrollR 32s linear infinite;
}
.ticker-row.left {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: rgba(192,164,110,0.35);
}
.ticker-row.right {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(244,239,230,0.18);
}
@keyframes scrollL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tickL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollR {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-row .ticker-inner { animation-play-state: paused; }
}
.ticker-row:hover .ticker-inner { animation-play-state: paused; }
.ticker-row:active .ticker-inner { animation-play-state: paused; }

@media (hover: none) and (pointer: coarse) {
  /* On touch devices — slightly faster ticker is more satisfying */
  .ticker-row.left .ticker-inner { animation-duration: 28s; }
  .ticker-row.right .ticker-inner { animation-duration: 22s; }
}

/* ── SECTION DIVIDER ── */
.sec-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 100px 0 56px;
}
.sec-divider::before,
.sec-divider::after {
  content: '';
  width: 40px;
  height: 0.5px;
  background: var(--dust);
}
.sec-divider span {
  font-size: 0.62rem;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── WORKS GRID ── */
.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
}
.work-card {
  position: relative;
  overflow: hidden;
  display: block;
}
.work-card.tall { aspect-ratio: 3/4; }
.work-card.wide {
  aspect-ratio: 16/7;
  grid-column: 1 / -1;
}
.work-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--r);
}
.work-card:hover .work-card-bg {
  transform: scale(1.05);
}
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,9,6,0.7) 0%, transparent 60%);
  transition: background 0.4s;
}
.work-card:hover::after {
  background: linear-gradient(to top, rgba(11,9,6,0.85) 0%, rgba(11,9,6,0.3) 60%);
}
.work-card-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
}
.work-card-info h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: 0.04em;
}
.work-card-info .count {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: rgba(244,239,230,0.5);
  margin-top: 4px;
}
.work-card-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  font-size: 20px;
  color: var(--dust);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.35s;
}
.work-card:hover .work-card-arrow {
  opacity: 1;
  transform: translateX(0);
}
.work-card:hover {
  z-index: 2;
}
.work-card.bw .work-card-bg {
  filter: saturate(0);
}

/* ── ABOUT STRIP ── */
.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: var(--pad-y) var(--pad-x);
  align-items: center;
}
.about-strip blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.25;
  color: var(--cream);
}
.about-strip blockquote .highlight { color: var(--dust); }
.about-body p {
  font-size: 0.82rem;
  line-height: 1.8;
  color: rgba(244,239,230,0.6);
  margin-bottom: 28px;
}
.about-body .btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--wa);
  color: #fff;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: transform 0.3s, box-shadow 0.3s;
}
.about-body .btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.about-body .btn-wa svg { width: 16px; height: 16px; fill: #fff; }
.about-body .text-link {
  display: block;
  margin-top: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--dust);
  transition: opacity 0.3s;
}
.about-body .text-link:hover { opacity: 0.7; }

/* ═══════════════════════════════════════════════════
   GALLERY PAGES
   ═══════════════════════════════════════════════════ */
.page-hero {
  height: 55vh;
  min-height: 360px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) 48px;
  background: #1a1610;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,9,6,0.85) 0%, transparent 60%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}
.page-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 9vw, 130px);
  line-height: 0.9;
  letter-spacing: 0.04em;
}
.page-hero .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 28px);
  color: rgba(244,239,230,0.6);
  margin-top: 4px;
}
.page-hero .meta {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(244,239,230,0.4);
  text-align: right;
}

/* ── MASONRY GRID ── */
.photo-grid {
  columns: 3;
  column-gap: var(--gap);
  padding: 0;
}
.photo-item {
  break-inside: avoid;
  margin-bottom: var(--gap);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.photo-item .ph {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s var(--r), filter 0.3s;
}
.photo-item:hover .ph {
  transform: scale(1.04);
  filter: brightness(0.96);
}
.photo-item .caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(11,9,6,0.7), transparent);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.5);
  transform: translateY(100%);
  transition: transform 0.35s var(--r);
}
.photo-item:hover .caption-overlay {
  transform: translateY(0);
}
.photo-placeholder {
  width: 100%;
  display: block;
}

/* ── GALLERY CTA ── */
.gallery-cta {
  text-align: center;
  padding: var(--pad-y) var(--pad-x);
}
.gallery-cta blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 40px);
  color: rgba(244,239,230,0.6);
  margin-bottom: 32px;
}
.gallery-cta .btn-dust {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid var(--dust);
  color: var(--dust);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.3s, color 0.3s;
}
.gallery-cta .btn-dust:hover {
  background: var(--dust);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════
   RETRATOS — EDITORIAL
   ═══════════════════════════════════════════════════ */
.editorial-full {
  width: 100%;
  height: 95vh;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.editorial-full .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.editorial-full .caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px var(--pad-x);
  background: linear-gradient(to top, rgba(11,9,6,0.6), transparent);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.5);
  opacity: 0;
  transition: opacity 0.35s;
}
.editorial-full:hover .caption-overlay {
  opacity: 1;
}
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.editorial-split .ed-panel {
  height: 80vh;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.editorial-split .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--r);
}
.editorial-split .ed-panel:hover .ph-bg {
  transform: scale(1.04);
}
.editorial-split .caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(11,9,6,0.6), transparent);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.5);
  opacity: 0;
  transition: opacity 0.35s;
}
.editorial-split .ed-panel:hover .caption-overlay { opacity: 1; }

.text-interstitial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: var(--pad-y) var(--pad-x);
  align-items: center;
}
.text-interstitial blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(26px, 3.5vw, 46px);
  line-height: 1.3;
}
.text-interstitial blockquote .highlight { color: var(--dust); }
.text-interstitial p {
  font-size: 0.82rem;
  line-height: 1.8;
  color: rgba(244,239,230,0.6);
}
.editorial-closer {
  width: 100%;
  height: 90vh;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.editorial-closer .ph-bg {
  position: absolute;
  inset: 0;
  background: #141210;
  background-size: cover;
  background-position: center;
}

/* ═══════════════════════════════════════════════════
   BROOKSIDE — NARRATIVE
   ═══════════════════════════════════════════════════ */
.brook-hero {
  height: 100svh;
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0e0c08;
}
.brook-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,9,6,0.9) 0%, transparent 50%);
}
.brook-hero-content {
  position: relative;
  z-index: 2;
}
.brook-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.85;
  letter-spacing: 0.05em;
}
.brook-hero .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(16px, 2.2vw, 24px);
  color: rgba(244,239,230,0.6);
  margin-top: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.brook-hero .meta-sub {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 20px;
  opacity: 0.6;
}

/* Narrative grid layouts */
.narr-split { display: grid; gap: var(--gap); }
.narr-split.s60-40 { grid-template-columns: 3fr 2fr; }
.narr-split.s40-60 { grid-template-columns: 2fr 3fr; }
.narr-split.s50-50 { grid-template-columns: 1fr 1fr; }
.narr-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.narr-full {
  width: 100%;
  aspect-ratio: 16/7;
  position: relative;
  overflow: hidden;
}
.narr-peak {
  width: 100%;
  height: 90vh;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
.narr-peak .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.9) contrast(1.15) saturate(0);
}
.narr-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: zoom-in;
}
.narr-item .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--r);
}
.narr-item:hover .ph-bg { transform: scale(1.05); }
.narr-full .ph-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--r);
}
.narr-full:hover .ph-bg { transform: scale(1.03); }

.series-statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: var(--pad-y) var(--pad-x);
  align-items: center;
}
.series-statement blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(26px, 3.5vw, 46px);
  line-height: 1.3;
}
.series-statement blockquote .highlight { color: var(--dust); }
.series-statement p {
  font-size: 0.82rem;
  line-height: 1.8;
  color: rgba(244,239,230,0.6);
}

/* ═══════════════════════════════════════════════════
   HIRE — SERVICES
   ═══════════════════════════════════════════════════ */
.services-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: calc(var(--pad-y) + 80px) var(--pad-x) var(--pad-y);
  align-items: center;
}
.services-hero .sh-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  display: block;
  color: rgba(244,239,230,0.6);
  margin-bottom: 8px;
}
.services-hero .sh-title h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 110px);
  line-height: 0.92;
  letter-spacing: 0.04em;
}
.services-hero .sh-body p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(244,239,230,0.6);
  margin-bottom: 28px;
}
.btn-wa-lg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--wa);
  color: #fff;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-wa-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37,211,102,0.3);
}
.btn-wa-lg svg { width: 18px; height: 18px; fill: #fff; }

/* Service rows */
.service-rows {
  padding: 0 var(--pad-x) var(--pad-y);
}
.service-row {
  display: grid;
  grid-template-columns: 48px 1fr 2fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 0.5px solid rgba(192,164,110,0.1);
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
}
.service-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(192,164,110,0.06);
  transform: translateX(-101%);
  transition: transform 0.5s var(--r);
}
.service-row:hover::before {
  transform: translateX(0);
}
.service-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  color: rgba(244,239,230,0.2);
}
.service-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 2.5vw, 32px);
  letter-spacing: 0.04em;
}
.service-desc {
  font-size: 0.75rem;
  color: rgba(244,239,230,0.5);
  line-height: 1.6;
}
.service-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.service-tag {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(192,164,110,0.1);
  color: rgba(244,239,230,0.4);
}
.badge-active {
  background: rgba(192,164,110,0.18);
  color: var(--dust);
}
.badge-soon {
  background: rgba(255,31,48,0.1);
  color: rgba(255,31,48,0.5);
}

/* ── CONTACT SECTION ── */
.contact-section {
  position: relative;
  overflow: hidden;
  padding: var(--pad-y) var(--pad-x);
  background: linear-gradient(135deg, var(--purple) 0%, #1a0f32 100%);
}
.contact-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(200px, 30vw, 500px);
  color: rgba(244,239,230,0.02);
  pointer-events: none;
  letter-spacing: 0.1em;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  position: relative;
  z-index: 2;
  align-items: center;
}
.contact-left blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.25;
  margin-bottom: 36px;
}
.contact-left blockquote .neon { color: var(--neon); font-family: 'Bebas Neue', sans-serif; font-style: normal; }
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(244,239,230,0.6);
}
.contact-info a { transition: color 0.3s; }
.contact-info a:hover { color: var(--dust); }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(244,239,230,0.06);
  border: 0.5px solid rgba(192,164,110,0.15);
  border-radius: 0;
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 0.3s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--dust);
}
.contact-form select {
  appearance: none;
  cursor: pointer;
}
.contact-form select option {
  background: var(--ink);
  color: var(--cream);
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-form .btn-submit {
  padding: 14px 32px;
  background: var(--dust);
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
.contact-form .btn-submit:hover {
  background: #d4b87a;
}
.contact-form .alt-email {
  text-align: center;
  font-size: 0.65rem;
  color: rgba(244,239,230,0.4);
  margin-top: 4px;
}
.contact-form .alt-email a {
  color: var(--dust);
  transition: opacity 0.3s;
}
.contact-form .alt-email a:hover { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════════
   INNER PAGE OVERLAY NAV
════════════════════════════════════════════════════════════════════ */
.nav-hire-landing {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border:1px solid rgba(192,164,110,.45);
  color:var(--dust); font-size:.63rem; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none;
  transition:all .3s ease; position:relative; overflow:hidden; z-index:1;
}
.nav-hire-landing::before { content:''; position:absolute; inset:0; background:var(--dust); transform:translateX(-101%); transition:transform .35s var(--r); }
.nav-hire-landing:hover::before { transform:translateX(0); }
.nav-hire-landing:hover { color:var(--ink); }
.nav-hire-landing span { position:relative; z-index:1; }
.nav-right { display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
.hamburger { background:none; border:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:4px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.hamburger span { display:block; width:22px; height:1px; background:var(--cream); transition:all .3s ease; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.overlay-link.active { color:var(--dust) !important; }

/* ════════════════════════════════════════════════════════════════════
   FILM STRIP
════════════════════════════════════════════════════════════════════ */
.film-strip-wrap { position:relative; overflow:hidden; padding:48px 0; background:var(--ink); border-top:.5px solid rgba(192,164,110,.07); border-bottom:.5px solid rgba(192,164,110,.07); }
.film-strip { display:flex; gap:4px; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; padding:0 var(--pad-x); scroll-snap-type:x mandatory; scroll-padding:0 var(--pad-x); overscroll-behavior-x:contain; }
.film-strip:active { cursor:grabbing; }
.film-strip::-webkit-scrollbar { display:none; }
.film-frame { flex:0 0 auto; height:260px; width:195px; overflow:hidden; display:block; position:relative; scroll-snap-align:start; }
.film-frame.wide { width:390px; }
.film-frame img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.78) contrast(1.05) saturate(.82); transition:filter .4s ease, transform .5s var(--r); clip-path: none !important; }
.film-frame:hover img { filter:brightness(.95) contrast(1.07) saturate(.95); transform:scale(1.04); }
.film-strip-hint { position:absolute; bottom:14px; right:var(--pad-x); font-size:.55rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(192,164,110,.3); pointer-events:none; animation:hintFade 3.5s ease-in-out 2.5s forwards; opacity:0; }
@keyframes hintFade { 0%{opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0} }

/* ════════════════════════════════════════════════════════════════════
   IMAGE REVEAL (clip-path curtain)
════════════════════════════════════════════════════════════════════ */
.photo-item img, .work-card img,
.bs-wide img, .bs-duo-cell img, .bs-trio-cell img, .bs-cell img, .bs-bw img, .bs-opener img,
.rt-hero img, .rt-cell img, .rt-single img, .page-hero img {
  
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1), transform .8s var(--r), filter .5s ease;
}
.photo-item.img-revealed img, .work-card.img-revealed img,
.bs-wide.img-revealed img, .bs-duo-cell.img-revealed img, .bs-trio-cell.img-revealed img,
.bs-cell.img-revealed img, .bs-bw.img-revealed img, .bs-opener.img-revealed img,
.rt-hero.img-revealed img, .rt-cell.img-revealed img, .rt-single.img-revealed img, .page-hero.img-revealed img {
  clip-path:inset(0% 0 0 0);
}
.selected-item img, .about-portrait img { clip-path:inset(0% 0 0 0) !important; }
@media (prefers-reduced-motion:reduce) {
  .photo-item img,.work-card img,.bs-wide img,.bs-duo-cell img,.bs-trio-cell img,
  .bs-cell img,.bs-bw img,.bs-opener img,.rt-hero img,.rt-cell img,.rt-single img,.page-hero img
  { clip-path:inset(0% 0 0 0) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX COUNTER
════════════════════════════════════════════════════════════════════ */
.lb-counter { position:absolute; top:28px; left:36px; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(244,239,230,.38); font-family:'DM Sans',sans-serif; }

/* ════════════════════════════════════════════════════════════════════
   PRESS STRIP
════════════════════════════════════════════════════════════════════ */
.press-strip { padding:56px var(--pad-x); border-top:.5px solid rgba(192,164,110,.08); text-align:center; }
.press-label { display:block; font-size:.58rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(192,164,110,.32); margin-bottom:28px; font-family:'DM Sans',sans-serif; }
.press-track-wrap { overflow:hidden; }
.press-track { display:flex; align-items:center; gap:0; width:max-content; animation:tickL 38s linear infinite; }
.press-track:hover { animation-play-state:paused; }
.press-item { font-family:'Cormorant Garamond',serif; font-size:clamp(.95rem,2vw,1.35rem); font-weight:300; font-style:italic; color:rgba(244,239,230,.2); white-space:nowrap; padding:0 28px; transition:color .3s; }
.press-item:hover { color:var(--dust); }
.press-sep { color:rgba(192,164,110,.22); font-size:.8rem; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════════════
   THEME TOGGLE
════════════════════════════════════════════════════════════════════ */
[data-theme="light"] { --ink:#f0ece3; --cream:#1a1612; --dust:#8b6a1a; --dust-dim:rgba(139,106,26,.1); --mist:rgba(26,22,18,.05); }
[data-theme="light"] body { background:#f0ece3; color:#1a1612; }
[data-theme="light"] #nav.scrolled { background:rgba(240,236,227,.94); border-bottom-color:rgba(139,106,26,.15); }
[data-theme="light"] .nav-overlay { background:rgba(240,236,227,.98); }
[data-theme="light"] .overlay-link { color:rgba(26,22,18,.7); }
[data-theme="light"] body::after { opacity:.015; }
[data-theme="light"] #loader { background:#f0ece3; }
[data-theme="light"] .ticker-section { background:#f0ece3; }
[data-theme="light"] .tick1 { color:rgba(139,106,26,.3); }
[data-theme="light"] .tick2 { color:rgba(26,22,18,.18); }
[data-theme="light"] .nav-logo { color:#1a1612; }
[data-theme="light"] .hamburger span { background:#1a1612; }
.theme-toggle { background:none; border:none; color:rgba(244,239,230,.4); cursor:pointer; padding:6px; display:flex; align-items:center; transition:color .3s; position:relative; z-index:1; min-width:36px; min-height:36px; justify-content:center; }
.theme-toggle:hover { color:var(--dust); }
[data-theme="light"] .theme-toggle { color:rgba(26,22,18,.4); }

/* ════════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS
════════════════════════════════════════════════════════════════════ */
body { opacity:1; transition:opacity .28s ease; }
body.page-exit { opacity:0; }

/* ════════════════════════════════════════════════════════════════════
   GLOBAL POLISH
════════════════════════════════════════════════════════════════════ */
:root { --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px); }
::selection { background:rgba(192,164,110,.22); color:var(--cream); }
::-moz-selection { background:rgba(192,164,110,.22); color:var(--cream); }
:focus-visible { outline:1px solid var(--dust); outline-offset:3px; }
:focus:not(:focus-visible) { outline:none; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
@media (hover:hover) { ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{background:rgba(192,164,110,.3);border-radius:2px} ::-webkit-scrollbar-thumb:hover{background:var(--dust)} }
#nav { padding-top:calc(26px + var(--safe-top)); }
#nav.scrolled { padding-top:calc(14px + var(--safe-top)) !important; }
.wa-float  { bottom:calc(28px + var(--safe-bottom)) !important; right:calc(28px + var(--safe-right)) !important; }
.back-top  { bottom:calc(28px + var(--safe-bottom)) !important; left:calc(28px + var(--safe-left)) !important; }
.nav-toggle,.hamburger { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.overlay-close { min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; }
.lb-close { min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; }
.lb-nav { min-width:56px; min-height:56px; display:flex; align-items:center; justify-content:center; }
.back-top { min-width:44px; min-height:44px; }
.hero-btn { min-height:48px; }
.overlay-link { min-height:52px; display:flex; align-items:center; justify-content:center; }
.overlay-footer { flex-wrap:wrap; justify-content:center; gap:12px 24px; text-align:center; padding:0 20px; }
.form-group input,.form-group textarea,.form-group select { font-size:16px !important; -webkit-appearance:none; border-radius:0; }
.photo-grid { overscroll-behavior-y:contain; }
.film-strip { overscroll-behavior-x:contain; }
.photo-grid,.bs-grid { contain:layout style; }
@supports (content-visibility:auto) { .photo-grid,.bs-grid,.retratos-grid,.services-list { content-visibility:auto; contain-intrinsic-size:0 600px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .ticker-track,.ticker-track.right{animation:none} body::after{animation:none} .hero-v2 .hero-bg img,.bs-opener img{transform:none!important;transition:none!important} .fi{opacity:1;transform:none;transition:none} }

/* ════════════════════════════════════════════════════════════════════
   HOVER-ONLY (desktop)
════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine) {
  .work-card:hover { z-index:2; box-shadow:0 24px 64px rgba(0,0,0,.5); }
  .service-row:hover::before { left:0; }
  .service-row:hover .service-name { color:var(--dust); }
  .nav-links a { position:relative; }
  .nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--dust); transition:width .3s var(--r); }
  .nav-links a:hover::after,.nav-links a.active::after { width:100%; }
}

/* ════════════════════════════════════════════════════════════════════
   TOUCH DEVICE
════════════════════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse) {
  .photo-caption { opacity:1!important; transform:translateY(0)!important; background:linear-gradient(to top,rgba(11,9,6,.72) 0%,transparent 65%); padding-top:24px; }
  .bs-cap { opacity:1!important; transform:translateY(0)!important; background:linear-gradient(to top,rgba(11,9,6,.72) 0%,transparent 65%); padding-top:24px; }
  .rt-caption { opacity:1!important; transform:translateY(0)!important; }
  .work-card-overlay { opacity:.8; }
  .work-card-arrow { color:rgba(192,164,110,.5); }
  .photo-item:hover img,.work-card:hover img,.bs-wide:hover img,.bs-duo-cell:hover img,.bs-trio-cell:hover img,.bs-cell:hover img,.bs-bw:hover img,.rt-hero:hover img,.rt-cell:hover img,.rt-single:hover img { transform:none!important; }
  .hero-btn:active { opacity:.75; transform:scale(.97); }
  .work-card:active img { filter:brightness(.92) contrast(1.07); }
  .overlay-link:active { color:var(--dust); background:rgba(192,164,110,.06); }
  .wa-float a:active { transform:scale(.95); }
  .back-top:active { border-color:var(--dust); color:var(--dust); }
  .btn-submit:active { background:var(--dust); color:var(--ink); }
  .service-row:active::before { left:0; }
  .service-row:active .service-name { color:var(--dust); }
  .hero-follower,
  .wa-float a { padding:16px 24px 16px 18px; }
  .ticker-row:active .ticker-track { animation-play-state:paused; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — 900px
════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .hero { grid-template-columns:1fr 1fr; }
  .hero-col:nth-child(3) { display:none; }
  .section-cards { grid-template-columns:1fr; }
  .section-card,.section-card.tall { aspect-ratio:4/3; }
  .photo-grid { columns:2; }
  .services-hero { grid-template-columns:1fr; gap:40px; }
  .service-row { grid-template-columns:auto 1fr; }
  .service-tags { display:none; }
  .contact-inner { grid-template-columns:1fr; gap:52px; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablet)
════════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  #nav { padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px); }
  .hero-v2-title { font-size:clamp(44px,11vw,72px); margin-bottom:28px; }
  .hero-eyebrow { font-size:.6rem; letter-spacing:.35em; }
  .hero-scroll { bottom:32px; }
  .works-grid { grid-template-columns:1fr; }
  .work-card.wide { grid-column:1/2; aspect-ratio:16/9; }
  .work-card.tall { aspect-ratio:3/4; max-height:70vh; }
  .photo-grid { columns:2; column-gap:3px; }
  .photo-grid .photo-item { margin-bottom:3px; }
  .page-hero { height:45vh; min-height:320px; }
  .page-title { font-size:clamp(44px,8vw,80px); }
  .page-hero-content { bottom:32px; }
  .bs-opener { height:80vh; min-height:480px; }
  .bs-title h1 { font-size:clamp(56px,12vw,100px); }
  .bs-wide { height:55vh; min-height:320px; }
  .bs-duo { grid-template-columns:1fr; }
  .bs-duo-cell { height:60vh; min-height:340px; }
  .bs-trio { grid-template-columns:1fr 1fr; }
  .bs-trio-cell { height:44vh; min-height:260px; }
  .bs-asym,.bs-asym-r { grid-template-columns:1fr; }
  .bs-cell { height:58vh; min-height:320px; }
  .bs-bw { height:70vh; min-height:400px; }
  .bs-statement { grid-template-columns:1fr; gap:32px; padding:64px var(--pad-x); }
  .rt-hero { height:75vh; min-height:420px; }
  .rt-split { grid-template-columns:1fr; }
  .rt-cell { height:62vh; min-height:360px; }
  .rt-single { height:72vh; min-height:400px; }
  .rt-text { grid-template-columns:1fr; gap:28px; padding:64px var(--pad-x); }
  .services-hero { grid-template-columns:1fr; gap:36px; padding:calc(var(--pad-y) + 60px) var(--pad-x) var(--pad-y); }
  .services-headline { font-size:clamp(44px,10vw,80px); }
  .service-row { grid-template-columns:auto 1fr; gap:20px; }
  .services-list { padding:0 var(--pad-x) 60px; }
  .about-strip { grid-template-columns:1fr; gap:40px; padding:80px var(--pad-x); }
  .sec-divider { margin:64px 0 40px; }
  .film-frame { height:220px; }
  .film-frame.wide { width:320px; }
  footer { flex-wrap:wrap; gap:16px; padding:36px var(--pad-x); }
  .footer-copy { order:3; width:100%; text-align:center; }
  .back-top.show { bottom:calc(28px + env(safe-area-inset-bottom,0px) + 72px) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — 560px (mobile)
════════════════════════════════════════════════════════════════════ */
@media (max-width:560px) {
  .hero { grid-template-columns:1fr; }
  .hero-col:nth-child(2),.hero-col:nth-child(3) { display:none; }
  .hero-content { flex-direction:column; align-items:flex-start; gap:18px; bottom:44px; }
  .hero-meta { text-align:left; }
  .hero-v2-title { font-size:clamp(40px,10.5vw,64px); line-height:.88; margin-bottom:24px; letter-spacing:.01em; }
  .hero-eyebrow { font-size:.58rem; letter-spacing:.3em; margin-bottom:14px; }
  .hero-buttons { flex-direction:column; align-items:center; }
  .hero-btn { width:100%; max-width:280px; justify-content:center; }
  .photo-grid { columns:1; }
  .bs-opener { height:85svh; min-height:480px; }
  .bs-title h1 { font-size:clamp(52px,13vw,80px); line-height:.9; }
  .bs-title p { font-size:.85rem; max-width:100%; }
  .bs-title { padding:48px 20px 36px; }
  .bs-wide { height:56svh; min-height:280px; }
  .bs-bw { height:65svh; min-height:340px; }
  .bs-duo { grid-template-columns:1fr; }
  .bs-duo-cell { height:60svh; min-height:300px; }
  .bs-trio { grid-template-columns:1fr; }
  .bs-trio-cell { height:52svh; min-height:280px; }
  .bs-asym,.bs-asym-r { grid-template-columns:1fr; }
  .bs-cell { height:58svh; min-height:300px; }
  .bs-statement { grid-template-columns:1fr; gap:24px; padding:52px 20px; }
  .bs-statement blockquote { font-size:clamp(1.4rem,6vw,2rem); }
  .bs-grid { padding:3px; gap:3px; }
  .rt-hero { height:78svh; min-height:400px; }
  .rt-cell { height:58svh; min-height:300px; }
  .rt-single { height:72svh; min-height:360px; }
  .rt-text { grid-template-columns:1fr; gap:24px; padding:52px 20px; }
  .rt-text blockquote { font-size:clamp(1.4rem,6.5vw,2rem); }
  .retratos-grid { gap:3px; padding:3px; }
  .service-row { grid-template-columns:1fr; gap:12px; padding:22px 0; }
  .service-num { display:none; }
  .service-name { font-size:clamp(20px,6vw,32px); }
  .contact-section { padding:52px var(--pad-x) calc(52px + var(--safe-bottom)); }
  .contact-section::before { font-size:50vw; }
  .form-row { grid-template-columns:1fr; }
  .btn-submit { width:100%; justify-content:center; padding:18px; min-height:52px; }
  footer { flex-direction:column; gap:16px; text-align:center; }
  .lb-close { top:calc(16px + var(--safe-top)); right:16px; background:rgba(11,9,6,.6); backdrop-filter:blur(6px); border-radius:50%; }
  .lb-prev { left:8px; }
  .lb-next { right:8px; }
  .lb-caption { font-size:.55rem; padding:0 56px; text-align:center; white-space:normal; }
  .tick1 { font-size:20px; }
  .tick2 { font-size:10px; }
  .film-frame { height:200px; width:150px; }
  .film-frame.wide { width:280px; }
  .sec-divider { margin:52px 0 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════════ */
@media print {
  #nav,.wa-float,.back-top,.nav-overlay,#loader,#progress,.hero-scroll,.ticker-section,.film-strip-wrap,.press-strip { display:none!important; }
  body { background:#fff; color:#000; }
  a { color:#000; text-decoration:underline; }
  footer { border-top:1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════
   img.ph — real photo rendering in all gallery containers
═══════════════════════════════════════════════════════ */
img.ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transition: transform .7s var(--r,ease), filter .4s ease;
}
.photo-item img.ph,
.narr-item img.ph,
.narr-full img.ph,
.editorial-full img.ph,
.ed-panel img.ph,
.editorial-closer 
.photo-item img.ph { position: relative; height: auto; min-height: 200px; filter: brightness(.88) contrast(1.05) saturate(.9); }
.photo-item:hover img.ph { transform: scale(1.04); filter: brightness(.96) contrast(1.06); }
.narr-item img.ph, .narr-full img.ph { filter: brightness(.84) contrast(1.06) saturate(.82); }
.narr-item:hover img.ph, .narr-full:hover img.ph { transform: scale(1.05); filter: brightness(.94) contrast(1.08); }
.editorial-full img.ph, .ed-panel img.ph, .editorial-closer img.ph { filter: brightness(.86) contrast(1.07) saturate(.88); }
.editorial-full:hover img.ph, .ed-panel:hover img.ph, .editorial-closer:hover img.ph { transform: scale(1.04); filter: brightness(.96) contrast(1.08); }
.narr-peak img.ph { filter: saturate(0) contrast(1.15) brightness(.88) !important; }
.photo-item.img-revealed img.ph, .narr-item.img-revealed img.ph, .narr-full.img-revealed img.ph,
.editorial-full.img-revealed img.ph, .ed-panel.img-revealed img.ph, .editorial-closer.img-revealed 
@media (hover:none) and (pointer:coarse) {
  .photo-item img.ph, .narr-item img.ph, .narr-full img.ph,
  .editorial-full img.ph, .ed-panel img.ph { transform: none !important; }
}
@media (prefers-reduced-motion:reduce) {  }

/* ── Language toggle ───────────────────────────────── */
.lang-toggle {
  background: none;
  border: 1px solid rgba(192,164,110,.4);
  color: var(--dust);
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  cursor: pointer;
  padding: 5px 10px;
  min-width: 36px;
  transition: background .25s, color .25s, border-color .25s;
}
.lang-toggle:hover { background: var(--dust); color: var(--ink); border-color: var(--dust); }

/* ── Hero background image ─────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg picture,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: brightness(0.72) contrast(1.06) saturate(0.85);
}
.hero-content { position: relative; z-index: 2; }
.scroll-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; }

/* ── Work card real images ──────────────────────── */
.work-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.75) contrast(1.05) saturate(0.85);
  transition: transform 0.7s ease, filter 0.4s ease;
  z-index: 0;
}
.work-card:hover .work-card-img { transform: scale(1.05); filter: brightness(0.88) contrast(1.06); }
.work-card-info { position: relative; z-index: 2; }
.work-card-arrow { position: absolute; bottom: 20px; right: 20px; z-index: 2; }

/* ── Loader silhouette ──────────────────────────── */
.loader-silhouette {
  width: 160px; height: auto; opacity: 0.9;
  animation: breathe 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(192,164,110,0.2));
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%       { transform: scale(1.03); opacity: 1;    }
}

/* Hero + film strip — never clip */
.hero-bg img, .hero-bg picture img, .film-frame img, .work-card-img { clip-path: none !important; }


/* ===============================================================
   DEFINITIVE IMAGE DISPLAY RULES -- DO NOT REMOVE OR MODIFY
   Added to fix clip-path conflicts across style.css
=============================================================== */

/* Hero background */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg img,
.hero-bg picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  clip-path: none !important;
  filter: brightness(0.72) contrast(1.06) saturate(0.9);
}
.hero-content { position: relative; z-index: 2; }
.hero-v2::after { z-index: 1; }
.scroll-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; }

/* Film strip */
.film-frame {
  flex: 0 0 auto;
  height: 260px;
  width: 195px;
  overflow: hidden;
  display: block;
  position: relative;
}
.film-frame.wide { width: 390px; }
.film-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  clip-path: none !important;
  filter: brightness(0.82) contrast(1.05);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.film-frame:hover img {
  filter: brightness(0.96) contrast(1.07);
  transform: scale(1.04);
}

/* Work card real photos */
.work-card { position: relative; overflow: hidden; }
.work-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: none !important;
  filter: brightness(0.72) contrast(1.05);
  transition: transform 0.7s ease, filter 0.4s ease;
  z-index: 0;
}
.work-card:hover .work-card-img { transform: scale(1.05); filter: brightness(0.88) contrast(1.06); }
.work-card::after { z-index: 1; }
.work-card-info { position: relative; z-index: 2; }
.work-card-arrow { position: absolute; bottom: 20px; right: 20px; z-index: 2; }

/* Gallery images -- reveal on scroll */
img.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(.16,1,.3,1), filter 0.4s ease;
}
.photo-item img.ph {
  position: relative;
  height: auto;
  min-height: 200px;
  filter: brightness(0.88) contrast(1.05);
}
.photo-item.img-revealed img.ph,
.narr-item.img-revealed img.ph,
.narr-full.img-revealed img.ph,
.editorial-full.img-revealed img.ph,
.ed-panel.img-revealed img.ph,
.editorial-closer.img-revealed img.ph {
  clip-path: inset(0% 0 0 0);
}

/* Loader silhouette */
.loader-silhouette {
  width: 160px;
  height: auto;
  opacity: 0.9;
  animation: breathe 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(192,164,110,0.2));
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.03); opacity: 1; }
}

/* Lang toggle button */
.lang-toggle {
  background: none;
  border: 1px solid rgba(192,164,110,.4);
  color: var(--dust);
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  cursor: pointer;
  padding: 5px 10px;
  min-width: 36px;
  transition: background .25s, color .25s, border-color .25s;
}
.lang-toggle:hover { background: var(--dust); color: var(--ink); border-color: var(--dust); }

/* No custom cursor anywhere */
* { cursor: auto !important; }
a, button, [role="button"], .work-card, .film-frame, .photo-item { cursor: pointer !important; }