:root{
  --ink:#f3ecda;
  --ink-deep:#e8dbb8;
  --panel:#ffffff;
  --panel-2:#fbf6e8;
  --gold:#a9792a;
  --gold-bright:#8a6420;
  --parchment:#1c2b40;
  --muted:#66758c;
  --hairline:rgba(169,121,42,.35);
  --paper:#f8f1df;
  --ink-fixed:#0b1626;
  --colombia:#d96c3f;
  --spain:#a6293b;
  --canada:#3e7c59;
  --shadow: 0 20px 60px rgba(28,43,64,.14);
  --radius: 3px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:var(--sans); }

::selection{ background:var(--gold); color:var(--paper); }
::-moz-selection{ background:var(--gold); color:var(--paper); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-bright); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold-bright); display:inline-block; }

/* ---------- custom cursor ---------- */
#cursor-bubble{
  position:fixed; top:0; left:0; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(169,121,42,.6);
  background:radial-gradient(circle, rgba(169,121,42,.14), rgba(169,121,42,.04) 65%, transparent 75%);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), opacity .3s, border-color .3s;
  opacity:0; will-change:transform;
}
#cursor-bubble.grow{ width:62px; height:62px; border-color:rgba(169,121,42,.9); }
@media (pointer:fine){
  body.cursor-ready{ cursor:none; }
  body.cursor-ready #cursor-bubble{ opacity:1; }
  body.cursor-ready input, body.cursor-ready textarea{ cursor:text; }
}
@media (prefers-reduced-motion:reduce){
  #cursor-bubble{ transition:opacity .3s; }
}

/* ---------- top nav ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  background:linear-gradient(to bottom, rgba(243,236,218,.88), transparent);
}
.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.mark img{ width:auto; height:36px; object-fit:contain; transform:scaleX(-1); }
.mark span{ font-family:var(--serif); font-size:19px; letter-spacing:.06em; color:var(--parchment); }
.mark .jc{ color:var(--gold-bright); font-style:normal; }
.mark .sc{ color:var(--parchment); font-style:normal; font-weight:400; }
.jglyph{ display:inline-block; height:.78em; width:.43em; vertical-align:-.04em; margin-right:-.02em; }
.site-nav nav{ display:flex; gap:26px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.site-nav nav a{ text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px; transition:color .2s,border-color .2s; }
.site-nav nav a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.site-nav nav{ display:none; }
@media (min-width:760px){ .site-nav nav{ display:flex; } }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 60px; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(169,121,42,.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(62,124,89,.10), transparent 60%),
    linear-gradient(180deg, var(--ink-deep), var(--ink) 70%);
}
.motes{ position:absolute; inset:0; pointer-events:none; }
.mote{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--gold-bright); opacity:0; animation:drift linear infinite;
}
@keyframes drift{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-90vh) translateX(var(--dx,20px)); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .mote{ animation:none; opacity:0; } }

.hero.has-video{ isolation:isolate; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,22,38,.52) 0%, rgba(11,22,38,.46) 80%, rgba(243,236,218,.95) 100%); }
.hero.has-video .eyebrow, .hero.has-video .coords{ color:#f0cf7e; }
.hero.has-video .eyebrow::before, .hero.has-video .eyebrow::after{ background:#f0cf7e; }
.hero.has-video .tagline{ color:#fbf6e8; text-shadow:0 2px 14px rgba(0,0,0,.55); }
.hero.has-video .eyebrow, .hero.has-video .coords{ text-shadow:0 2px 10px rgba(0,0,0,.55); }
.hero.has-video .scroll-cue{ background:linear-gradient(#f0cf7e, transparent); }
.hero.has-video .scroll-cue::after{ background:#f0cf7e; }
.hero-emblem{ height:88px; width:auto; margin-bottom:22px; filter:drop-shadow(0 0 24px rgba(169,121,42,.3)); position:relative; }
.hero .eyebrow{ justify-content:center; margin:26px 0 0; }
.hero .eyebrow::before,.hero .eyebrow::after{ content:""; width:22px; height:1px; background:var(--gold-bright); }
.hero .tagline{ max-width:520px; margin:18px auto 0; color:var(--muted); font-size:16px; }

/* ---------- badge mark ---------- */
.badge{ --bw:clamp(190px,44vw,260px); width:var(--bw); aspect-ratio:1; position:relative; margin:0 auto; filter:drop-shadow(0 12px 40px rgba(0,0,0,.4)); }
.badge .ring{ position:absolute; inset:0; width:100%; height:100%; }
.badge .word{ position:absolute; bottom:calc(24% + 36px + var(--bw)*.077); left:0; right:0; display:flex; justify-content:center; white-space:nowrap; }
.badge .jay{ position:relative; font-family:var(--serif); font-weight:700; font-size:calc(var(--bw)*.21); line-height:1; letter-spacing:-.03em; color:var(--ink-fixed); }
.badge .jay .jj{ color:var(--gold); }
.badge .lionbig{ position:absolute; left:100%; bottom:.06em; margin-left:.12em; width:calc(var(--bw)*.16); height:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.badge .studio{ position:absolute; bottom:calc(24% + var(--bw)*.077); left:50%; transform:translate(-50%,0); display:flex; align-items:center; gap:9px;
  font-family:var(--serif); letter-spacing:.38em; font-size:clamp(10px,2.4vw,13px); color:var(--ink-fixed); text-transform:uppercase; font-weight:500; }
.badge .studio i{ width:16px; height:1px; background:var(--ink-fixed); display:block; opacity:.7; }
.hero .coords{ margin-top:34px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:1px; height:44px;
  background:linear-gradient(var(--gold-bright), transparent); }
.scroll-cue::after{ content:""; position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--gold-bright);
  animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%{ top:0; opacity:1;} 90%{ opacity:0;} 100%{ top:40px; opacity:0;} }
@media (prefers-reduced-motion:reduce){ .scroll-cue::after{ animation:none; top:36px; } }

/* ---------- section shell ---------- */
section.block{ padding:120px 0; position:relative; }
section.block + section.block{ border-top:1px solid var(--hairline); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(30px,4vw,44px); color:var(--parchment); }
.section-head .count{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.08em; }

/* ---------- bio ---------- */
.bio-grid{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:860px){ .bio-grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.bio-portrait{
  aspect-ratio:2/3; width:100%; max-width:320px; margin:0 auto; border-radius:var(--radius); position:relative; overflow:hidden;
  background:linear-gradient(155deg, var(--panel), var(--ink-deep));
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center;
}
.bio-portrait img{ width:100%; height:100%; object-fit:contain; }
.bio-text p{ font-size:18px; color:var(--parchment); margin-bottom:18px; }
.bio-text p:first-of-type::first-letter{ font-family:var(--serif); font-size:3.4em; float:left; line-height:.8; padding:.06em .07em 0 0; color:var(--gold-bright); }
.stat-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pill{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment);
  border:1px solid var(--hairline); border-radius:999px; padding:7px 14px; display:inline-flex; align-items:center; gap:7px;
}
.pill.gold{ border-color:rgba(169,121,42,.6); color:var(--gold-bright); }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill.co .dot{ background:var(--colombia); } .pill.es .dot{ background:var(--spain); } .pill.ca .dot{ background:var(--canada); }

/* ---------- gallery / contact sheet ---------- */
.strip{ display:flex; gap:6px; height:min(62vw,460px); overflow:hidden; position:relative; }
.strip.scrollable{ overflow-x:auto; }
.track{ display:flex; gap:6px; }
.track.marquee{ animation-name:marquee; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; }
.strip:hover .track.marquee{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .track.marquee{ animation:none; } .strip{ overflow-x:auto; } }
.frame{
  position:relative; flex:1 1 0; min-width:44px; overflow:hidden; border-radius:2px; cursor:pointer;
  background:var(--panel); transition:flex-grow .55s cubic-bezier(.2,.8,.2,1), flex-basis .55s cubic-bezier(.2,.8,.2,1);
  border-top:2px solid var(--ink-fixed); border-bottom:2px solid var(--ink-fixed);
}
.frame::before{ content:""; position:absolute; inset:0 0 auto 0; height:8px;
  background-image:repeating-linear-gradient(to right, var(--ink-fixed) 0 6px, transparent 6px 14px); }
.frame::after{ content:""; position:absolute; inset:auto 0 0 0; height:8px;
  background-image:repeating-linear-gradient(to right, var(--ink-fixed) 0 6px, transparent 6px 14px); }
.strip:hover .frame{ flex-grow:.7; }
.strip .frame:hover, .strip .frame.active{ flex-grow:7 !important; }
.track.marquee .frame, .strip.scrollable .frame{ flex:0 0 clamp(130px,16vw,190px); }
.track.marquee .frame:hover, .track.marquee .frame.active,
.strip.scrollable .frame:hover, .strip.scrollable .frame.active{ flex-basis:clamp(300px,42vw,460px) !important; flex-grow:0 !important; }
.frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04) brightness(.92); transition:filter .5s; }
#sec-modeling .frame::after, #sec-events .frame::after{ content:none; }
#sec-modeling .frame, #sec-events .frame{ border-bottom:none; }
.frame:hover img, .frame.active img{ filter:saturate(1) contrast(1.02) brightness(1); }
.frame .cap{
  position:absolute; left:10px; bottom:14px; right:10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--paper); opacity:0; transition:opacity .3s; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.8);
  display:flex; justify-content:space-between; gap:8px;
}
.frame:hover .cap, .frame.active .cap{ opacity:1; }
.empty-state{ height:min(62vw,460px); display:flex; align-items:center; justify-content:center; border:1px solid var(--hairline); border-radius:var(--radius);
  color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:20px; }

/* ---------- belt rows (portraits / cultural events) ---------- */
.belt{ overflow:hidden; padding:14px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.belt-track{ display:flex; gap:14px; padding-right:14px; width:max-content; animation:marquee linear infinite; will-change:transform; }
.belt:hover .belt-track, .belt:has(.frame.active) .belt-track{ animation-play-state:paused; }
.belt .frame{ flex:0 0 clamp(260px,32vw,420px); aspect-ratio:3/2; min-width:0; border-top:none; border-bottom:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.belt .frame::before, .belt .frame::after{ content:none; }
.belt.tall .frame{ flex:0 0 clamp(150px,16vw,200px); aspect-ratio:2/3; }
.belt.rev .belt-track{ animation-direction:reverse; }
.belt .frame:hover, .belt .frame.active{ transform:scale(1.05); z-index:3; box-shadow:var(--shadow); }
@media (prefers-reduced-motion:reduce){
  .belt{ overflow-x:auto; }
  .belt-track{ animation:none; }
  .belt .frame[aria-hidden]{ display:none; }
}

/* ---------- video ---------- */
.video-frame{ aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--panel); border:1px solid var(--hairline); position:relative; }
.video-frame video, .video-frame iframe{ width:100%; height:100%; border:0; display:block; }
.video-empty{ height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:20px; }

/* ---------- booking ---------- */
.booking-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); padding:30px; }
.booking-form .field{ display:flex; flex-direction:column; gap:7px; }
.booking-form .field.full{ grid-column:1/-1; }
.booking-form label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.booking-form input, .booking-form textarea{
  background:var(--ink-deep); border:1px solid var(--hairline); border-radius:2px; padding:11px 13px;
  color:var(--parchment); font-family:var(--sans); font-size:15px;
}
.booking-form input:focus, .booking-form textarea:focus{ outline:none; border-color:var(--gold); }
.booking-form textarea{ resize:vertical; min-height:120px; }
.booking-form button{
  grid-column:1/-1; justify-self:start; background:var(--gold); color:var(--ink-fixed); border:none; border-radius:999px;
  padding:13px 28px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  cursor:pointer; transition:background .2s,transform .2s;
}
.booking-form button:hover{ background:var(--gold-bright); transform:scale(1.03); }
@media (max-width:640px){ .booking-form{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact-card{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.contact-row{ display:flex; align-items:center; gap:18px; padding:24px 28px; }
.contact-row + .contact-row{ border-top:1px solid var(--hairline); }
.contact-row svg{ width:20px; height:20px; color:var(--gold-bright); flex:none; }
.contact-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); width:100px; flex:none; }
.contact-value{ font-family:var(--serif); font-size:18px; color:var(--parchment); text-decoration:none; }
a.contact-value:hover{ color:var(--gold-bright); }
@media (max-width:640px){
  .contact-row{ flex-wrap:wrap; gap:6px 18px; }
  .contact-value{ width:100%; margin-left:38px; }
}

/* ---------- footer ---------- */
footer{ padding:70px 0 50px; text-align:center; }
footer .hero-emblem{ width:auto; height:52px; object-fit:contain; margin:0 auto 18px; opacity:.85; }
footer .coords{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
footer .rights{ margin-top:18px; font-family:var(--mono); font-size:10px; color:var(--muted); opacity:.6; }

#toast-root{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--ink-deep); border:1px solid var(--gold); color:var(--parchment); font-family:var(--mono); font-size:12px;
  padding:11px 18px; border-radius:999px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:opacity .25s,transform .25s; }
.toast.show{ opacity:1; transform:translateY(0); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

@media (max-width:640px){
  section.block{ padding:80px 0; }
  .strip{ height:70vw; }
}