/* ============================================================
   DANAYS BAEZ — "THE INDEX"
   Black gallery canvas · elegant condensed sans · Fraunces serif
   subtext · bold card grid · warm light editorial bands
   ============================================================ */

:root{
  --disp:"Saira Condensed", sans-serif;
  --serif:"Fraunces", Georgia, serif;     /* editorial subtext / accents */

  /* warm Caribbean-sand light band palette (for .section--light) */
  --cream:          #f3ead8;
  --ink-dark:       #14130d;
  --ink-dark-dim:   rgba(20,19,13,.68);
  --ink-dark-faint: rgba(20,19,13,.44);
  --line-dark:      rgba(20,19,13,.18);
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9500; background:var(--bg-pure);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader__mark{
  font-family:var(--disp); font-weight:500; font-size:clamp(26px,4vw,46px);
  letter-spacing:.42em; text-transform:uppercase; text-indent:.42em; color:var(--ink);
}
.loader__bar{ width:170px; height:1px; background:var(--ink-ghost); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:40%; background:var(--accent); animation:load 1.1s var(--ease) infinite; }
@keyframes load{ 0%{transform:translateX(-110%)} 100%{transform:translateX(330%)} }

/* ---------- top nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:20px clamp(16px,3vw,42px);
  background:linear-gradient(180deg,rgba(4,16,15,.88),rgba(4,16,15,0));
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
/* solid bar once scrolled off the hero — clear separation from content */
.nav.scrolled{
  background:rgba(6,20,22,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__logo{
  font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:.34em;
  text-transform:uppercase; justify-self:start; text-indent:.34em;
}
.nav__logo b{ color:var(--accent-2); font-weight:600; }   /* gold wordmark */
.nav__links{
  display:flex; gap:clamp(16px,2.2vw,34px); justify-self:center; align-items:center;
  font-family:"Archivo"; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.nav__links a{ color:var(--ink-dim); transition:color .3s var(--ease); position:relative; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:18px; justify-self:end; }
.nav__book{
  font-family:"Archivo"; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--accent); color:var(--accent); padding:9px 17px; border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav__book:hover{ background:var(--accent); color:#000; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:6px; }
.nav__burger span{ width:24px; height:1.5px; background:var(--ink); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(16px,3vw,42px); overflow:hidden;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:brightness(.84) contrast(1.05) saturate(1.06);
  pointer-events:none;                 /* decorative — never interactable */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
/* nuke any WebKit / iOS Safari media-controls bleed-through */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-overlay-enclosure,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-current-time-display,
.hero__video::-webkit-media-controls-time-remaining-display,
.hero__video::-webkit-media-controls-timeline,
.hero__video::-webkit-media-controls-volume-slider,
.hero__video::-webkit-media-controls-mute-button,
.hero__video::-webkit-media-controls-fullscreen-button,
.hero__video::-webkit-media-controls-toggle-closed-captions-button,
.hero__video::-internal-media-controls-overflow-button{
  display:none !important; -webkit-appearance:none !important; appearance:none !important;
  opacity:0 !important; pointer-events:none !important; visibility:hidden !important;
}
/* left→right transparent gradient: legible behind the (left-aligned) text,
   nearly clear on the right so far more of the video stays visible.
   thin bottom scrim keeps the meta row readable. */
.hero__veil{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,rgba(4,15,17,.88) 0%,rgba(4,15,17,.64) 26%,rgba(4,15,17,.30) 52%,rgba(4,15,17,.05) 74%,transparent 92%),
    linear-gradient(0deg,rgba(4,15,17,.66) 0%,transparent 24%); }
.hero__inner{ position:relative; z-index:2; max-width:1100px; }
.hero__role{
  font-family:"Archivo"; font-size:clamp(11px,1vw,14px); font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.hero__title{
  font-family:var(--disp); font-weight:600; text-transform:uppercase; line-height:.92; letter-spacing:.04em;
  font-size:clamp(70px,15vw,230px); text-shadow:0 6px 44px rgba(0,0,0,.45);
}
.hero__title .o{ -webkit-text-stroke:1.5px var(--accent-2); color:transparent; font-weight:500; }  /* gold outline */
.hero__tag{
  font-family:"Archivo"; font-weight:300; font-size:clamp(15px,1.4vw,21px); color:var(--ink);
  max-width:46ch; margin-top:26px; line-height:1.5; text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.hero__meta{
  position:absolute; left:clamp(16px,3vw,42px); right:clamp(16px,3vw,42px); bottom:26px; z-index:2;
  /* fixed 3-col editorial layout — side labels never wrap into the center cue */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:14px;
  font-family:"Archivo"; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
  pointer-events:none;                 /* purely decorative chrome — no taps grab it */
}
.hero__meta > :first-child{ justify-self:start; }
.hero__meta > :last-child{ justify-self:end; text-align:right; }
.hero__scroll{ justify-self:center; display:flex; flex-direction:column; align-items:center; gap:8px; white-space:nowrap; }
.hero__scroll i{ width:1px; height:30px; background:var(--ink-faint); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--accent); animation:scrolly 1.8s var(--ease) infinite; }
@keyframes scrolly{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ---------- section frame ---------- */
.section{ padding:clamp(72px,9vw,150px) clamp(16px,3vw,42px); position:relative; scroll-margin-top:72px; }
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  border-top:1px solid var(--line); padding-top:20px; margin-bottom:clamp(32px,5vw,60px);
}
.section__no{ font-family:"Archivo"; font-size:12px; font-weight:600; letter-spacing:.2em; color:var(--accent); margin-bottom:8px; }
.section__title{
  font-family:var(--disp); font-weight:600; font-size:clamp(40px,6.5vw,96px); text-transform:uppercase;
  line-height:.9; letter-spacing:.03em;
}
/* subtext now uses the Fraunces editorial serif (matches the Headliner) */
.section__sub{
  font-family:var(--serif); font-weight:400; font-style:italic; font-optical-sizing:auto;
  font-size:clamp(16px,1.4vw,21px); line-height:1.4; color:var(--ink-dim);
  max-width:32ch; text-align:right; letter-spacing:0;
}

/* ---------- WORK : bold card grid ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-auto-flow:dense; }
.card{
  position:relative; overflow:hidden; cursor:pointer; background:#0d2125;
  aspect-ratio:4/5; grid-column:span 1;
}
.card.wide{ grid-column:span 2; aspect-ratio:16/10; }
.card img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  filter:brightness(.98) contrast(1.03); transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.card:hover img{ transform:scale(1.05); filter:brightness(1.06) contrast(1.04); }
.card__cap{
  position:absolute; inset:auto 0 0 0; padding:20px 18px 16px; z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 60%,transparent);
  transform:translateY(8px); opacity:0; transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card__cap, .card:focus-visible .card__cap{ opacity:1; transform:none; }
.card__ev{ font-family:var(--disp); font-weight:500; font-size:clamp(17px,1.5vw,23px); text-transform:uppercase; letter-spacing:.05em; line-height:1.05; }
.card__loc{ font-family:"Archivo"; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:6px; }
.card__role{ font-family:"Archivo"; font-size:11px; font-weight:300; letter-spacing:.04em; color:var(--ink-dim); margin-top:3px; }
.card__plus{ position:absolute; top:14px; right:14px; z-index:2; width:30px; height:30px; border:1px solid rgba(244,241,234,.4); border-radius:50%; display:grid; place-items:center; opacity:0; transition:opacity .4s, background .3s, border-color .3s; }
.card:hover .card__plus{ opacity:1; }
.card__plus::before,.card__plus::after{ content:""; position:absolute; background:var(--ink); }
.card__plus::before{ width:11px; height:1.5px; } .card__plus::after{ width:1.5px; height:11px; }
.card:hover .card__plus{ background:var(--accent); border-color:var(--accent); }
.card:hover .card__plus::before, .card:hover .card__plus::after{ background:#000; }

/* ---------- REEL ---------- */
.reel-wrap{ position:relative; }
.reel{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; cursor:pointer; border:1px solid var(--line); }
.reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.reel__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.78); transition:opacity .5s; z-index:2; }
.reel__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; z-index:3; transition:opacity .4s; }
.reel__btn{ width:clamp(72px,8vw,108px); height:clamp(72px,8vw,108px); border-radius:50%; background:var(--accent); display:grid; place-items:center; transition:transform .35s var(--ease); }
.reel__btn svg{ width:34%; height:34%; fill:#000; margin-left:6%; }
.reel:hover .reel__btn{ transform:scale(1.08); }
.reel__label{ font-family:"Archivo"; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.reel.playing .reel__play, .reel.playing .reel__poster{ opacity:0; pointer-events:none; }

/* clips wall (vertical 9:16) */
.clips-head{ display:flex; justify-content:space-between; align-items:baseline; margin:clamp(40px,6vw,80px) 0 22px; }
.clips-head h3{ font-family:var(--disp); font-weight:600; font-size:clamp(24px,3vw,42px); text-transform:uppercase; letter-spacing:.05em; }
.clips-head p{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:15px; color:var(--ink-dim); }
.clips{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.clip{ position:relative; aspect-ratio:9/16; overflow:hidden; background:#0d2125; cursor:pointer; border:1px solid transparent; transition:border-color .3s; }
.clip:hover{ border-color:var(--accent); }
.clip video, .clip img{ width:100%; height:100%; object-fit:cover; }
.clip__poster{ position:absolute; inset:0; transition:opacity .4s; }
.clip__tag{ position:absolute; top:12px; left:12px; z-index:3; font-family:"Archivo"; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; background:rgba(0,0,0,.4); padding:4px 9px; backdrop-filter:blur(3px); }
.clip__mute{ position:absolute; bottom:12px; right:12px; z-index:4; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; opacity:0; transition:opacity .3s; }
.clip:hover .clip__mute{ opacity:1; } .clip__mute svg{ width:15px; height:15px; fill:var(--ink); }

/* ---------- ABOUT ---------- */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.about__media{ position:relative; aspect-ratio:4/5; overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); }
.about__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:brightness(1.02) contrast(1.04); }
.about__greet{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(18px,1.6vw,26px); letter-spacing:0; color:var(--accent); margin-bottom:16px; }
.about__h{ font-family:var(--disp); font-weight:600; font-size:clamp(34px,4.6vw,64px); text-transform:uppercase; line-height:.98; letter-spacing:.02em; margin-bottom:26px; }
.about p{ font-family:"Archivo"; font-weight:300; font-size:clamp(15px,1.1vw,18px); color:var(--ink-dim); line-height:1.65; margin-bottom:16px; max-width:54ch; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
.stat{ border-top:1px solid var(--line); padding-top:14px; }
.stat b{ font-family:var(--disp); font-weight:600; font-size:clamp(30px,3.2vw,50px); display:block; letter-spacing:.02em; }
.stat span{ font-family:"Archivo"; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.stat.accent b{ color:var(--accent); }

/* ---------- SERVICES ---------- */
.svc{ border-top:1px solid var(--line); }
.svc-row{
  display:grid; grid-template-columns:60px 1fr 1.3fr; gap:clamp(14px,3vw,40px); align-items:center;
  padding:clamp(22px,3vw,38px) 6px; border-bottom:1px solid var(--ink-ghost);
  transition:background .4s var(--ease), padding-left .4s var(--ease); position:relative;
}
.svc-row__no{ font-family:"Archivo"; font-size:13px; font-weight:500; color:var(--ink-faint); letter-spacing:.1em; }
.svc-row__t{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,3vw,48px); text-transform:uppercase; line-height:.98; letter-spacing:.03em; }
.svc-row__d{ font-family:"Archivo"; font-weight:300; font-size:14px; color:var(--ink-dim); line-height:1.55; }
.svc-row:hover{ background:rgba(35,179,164,.07); padding-left:18px; }
.svc-row:hover .svc-row__t{ color:var(--accent); }

/* ---------- CONTACT ---------- */
.cta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); }
.cta__lead .k{ font-family:"Archivo"; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.cta__lead h2{ font-family:var(--disp); font-weight:600; font-size:clamp(44px,7vw,118px); text-transform:uppercase; line-height:.9; letter-spacing:.02em; margin:16px 0 22px; }
.cta__lead p{ font-family:"Archivo"; font-weight:300; color:var(--ink-dim); font-size:16px; max-width:34ch; line-height:1.55; }
.cta__email{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(20px,2vw,30px); letter-spacing:0; border-bottom:1px solid var(--accent); padding-bottom:5px; transition:gap .3s var(--ease); }
.cta__email:hover{ gap:18px; }
.form{ display:flex; flex-direction:column; gap:14px; }
.form input, .form textarea{ background:transparent; border:1px solid var(--line); color:var(--ink); padding:15px 16px; font-family:"Archivo"; font-weight:300; font-size:15px; transition:border-color .3s var(--ease); }
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--accent); }
.form textarea{ min-height:120px; resize:vertical; }
.form button{ font-family:"Archivo"; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; background:var(--accent); color:#000; padding:16px; transition:background .3s, transform .3s var(--ease); }
.form button:hover{ background:var(--accent-2); transform:translateY(-2px); }
.form button[disabled]{ opacity:.6; cursor:wait; transform:none; }

/* inline send status under the submit button */
.form__status{ min-height:1.4em; font-family:"Archivo"; font-size:14px; font-weight:400; color:var(--ink-dim); margin-top:6px; transition:color .3s; }
.form__status--pending{ color:var(--ink-dim); }
.form__status--ok{ color:var(--accent); }
.form__status--err{ color:var(--accent-2); }

/* booking: event type (select) + event date (native calendar) */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-select,
.form-date{ border:1px solid var(--line); background:transparent; transition:border-color .3s var(--ease); color-scheme:dark; }
.form-select{
  padding:15px 40px 15px 16px; color:var(--ink); font-family:"Archivo"; font-weight:300; font-size:15px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23b9b4a9' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.form-select:focus{ outline:none; border-color:var(--accent); }
.form-select:invalid{ color:var(--ink-faint); }              /* placeholder option look */
.form-date{ display:flex; align-items:center; gap:10px; padding:0 16px; cursor:pointer; }
.form-date:focus-within{ border-color:var(--accent); }
.form-date__tag{ font-family:"Archivo"; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.form-date input[type=date]{ flex:1; min-width:0; background:transparent; border:0; padding:15px 0; color:var(--ink); font-family:"Archivo"; font-weight:300; font-size:15px; cursor:pointer; }
.form-date input[type=date]:focus{ outline:none; }
.form-date input[type=date]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.65; transition:opacity .3s; }
.form-date input[type=date]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* the cream Contact band: dark controls + light-themed native pickers */
.section--light .form-select,
.section--light .form-date{ border-color:var(--line-dark); color-scheme:light; }
.section--light .form-select{
  color:var(--ink-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2360584b' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.section--light .form-select:invalid{ color:var(--ink-dark-faint); }
.section--light .form-select:focus,
.section--light .form-date:focus-within{ border-color:var(--accent); }
.section--light .form-date__tag{ color:var(--ink-dark-faint); }
.section--light .form-date input[type=date]{ color:var(--ink-dark); }

/* ============================================================
   LIGHT BANDS — warm cream sections to break up the dark canvas
   (About + Contact). Dark-on-light with full contrast overrides.
   ============================================================ */
.section--light{ background:var(--cream); color:var(--ink-dark); }
/* hairline edges where a light band meets the black canvas */
.section--light{ border-top:1px solid rgba(0,0,0,.35); border-bottom:1px solid rgba(0,0,0,.35); }

.section--light .section__head{ border-top-color:var(--line-dark); }
.section--light .section__title{ color:var(--ink-dark); text-shadow:none; }
.section--light .section__sub{ color:var(--ink-dark-dim); }
/* turquoise fails contrast on sand → accent TEXT becomes deep teal here */
.section--light .section__no{ color:var(--accent-deep); }

/* about on light */
.section--light .about__greet{ color:var(--accent-deep); }
.section--light .about__h{ color:var(--ink-dark); }
.section--light .about p{ color:var(--ink-dark-dim); }
.section--light .stat{ border-top-color:var(--line-dark); }
.section--light .stat b{ color:var(--ink-dark); }
.section--light .stat span{ color:var(--ink-dark-faint); }
.section--light .stat.accent b{ color:var(--accent-deep); }

/* contact on light */
.section--light .cta__lead .k{ color:var(--accent-deep); }
.section--light .cta__lead h2{ color:var(--ink-dark); }
.section--light .cta__lead p{ color:var(--ink-dark-dim); }
.section--light .cta__email{ color:var(--ink-dark); border-bottom-color:var(--accent-deep); }
.section--light .form input,
.section--light .form textarea{ border-color:var(--line-dark); color:var(--ink-dark); }
.section--light .form input::placeholder,
.section--light .form textarea::placeholder{ color:var(--ink-dark-faint); }
.section--light .form input:focus,
.section--light .form textarea:focus{ border-color:var(--accent); }
.section--light .form button{ color:#04110f; }   /* dark text on turquoise = AA */
.section--light .form__status{ color:var(--ink-dark-dim); }
.section--light .form__status--ok{ color:var(--accent-deep); }
.section--light .form__status--err{ color:#b8442f; }
.section--light ::selection{ background:var(--accent); color:#04100f; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:40px clamp(16px,3vw,42px); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; font-family:"Archivo"; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.foot__logo{ font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:.3em; text-indent:.3em; color:var(--ink); }
.foot a{ color:var(--ink-dim); transition:color .3s; } .foot a:hover{ color:var(--accent); }
.foot__socials{ display:flex; gap:18px; }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:9600; background:rgba(5,5,5,.95); display:none; align-items:center; justify-content:center; padding:30px; backdrop-filter:blur(6px); }
.lightbox.open{ display:flex; animation:fade .3s var(--ease); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lightbox img{ max-width:92vw; max-height:80vh; object-fit:contain; }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:26px; text-align:center; font-family:"Archivo"; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.lightbox__cap b{ color:var(--accent); font-weight:600; }
.lightbox__x{ position:absolute; top:22px; right:26px; font-size:30px; line-height:1; color:var(--ink); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:40px; color:var(--ink-faint); padding:20px; transition:color .3s; }
.lightbox__nav:hover{ color:var(--accent); }
.lightbox__nav.prev{ left:6px; } .lightbox__nav.next{ right:6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  /* tablet + mobile: nav is ALWAYS a solid bar with a clear edge so it
     never bleeds over page content as you scroll */
  .nav{
    background:rgba(8,8,8,.95);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom-color:var(--line);
    padding-top:14px; padding-bottom:14px;
  }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .card.wide{ grid-column:span 2; }
  .about{ grid-template-columns:1fr; }
  .about__media{ aspect-ratio:16/10; order:-1; }
  .cta{ grid-template-columns:1fr; }
  .svc-row{ grid-template-columns:42px 1fr; }
  .svc-row__d{ grid-column:1/-1; }
  .clips{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__book{ display:none; }            /* redundant on phones — menu + Book section cover it */
  .nav{ grid-template-columns:1fr auto; }
  .nav__links.open{ display:flex; position:fixed; inset:54px 0 auto 0; flex-direction:column; gap:0; background:var(--bg-pure); padding:10px 24px 24px; border-bottom:1px solid var(--line); box-shadow:0 24px 40px -20px rgba(0,0,0,.8); }
  .nav__links.open a{ padding:14px 0; border-bottom:1px solid var(--ink-ghost); font-size:15px; }
  .hero__title{ font-size:clamp(58px,17vw,96px); }
  /* hero meta: tighter on phones so left/center/right never collide */
  .hero__meta{ bottom:20px; gap:10px; font-size:9.5px; letter-spacing:.14em; }
  .hero__scroll i{ height:24px; }
  .section__sub{ text-align:left; }
  .work-grid{ grid-template-columns:1fr; gap:12px; }
  .card, .card.wide{ grid-column:span 1; aspect-ratio:4/5; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
}