:root{
  --bg:#000000; --ink:#F5F3EF; --mute:#8E8B86; --line:#1F1E1C;
  --accent:#C9A16B;                 /* warm suede, pulled from the photography */
  --pad:clamp(20px,5vw,72px); --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:10px 14px;z-index:99}

/* header */
.site-head{
  display:flex; align-items:center; gap:clamp(16px,4vw,48px);
  padding:22px var(--pad); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:20;
}
.brand{font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); font-weight:500; white-space:nowrap;
  display:flex; align-items:center; gap:16px}
.brand img{width:54px; height:auto; flex:none}
.nav-group{margin-left:auto; display:flex; align-items:center; gap:clamp(18px,3vw,40px)}
.nav{list-style:none; display:flex; gap:clamp(14px,2.4vw,34px); margin:0; padding:0;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.nav a{text-decoration:none; color:var(--mute); position:relative; padding-bottom:5px}
.nav a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease}
.nav a:hover{color:var(--accent)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1); background:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.lang{text-decoration:none; font-size:12px; letter-spacing:.2em;
  color:var(--mute); padding:6px 2px; border-bottom:1px solid transparent}
.lang:hover{color:var(--accent); border-color:var(--accent)}

/* layout */
main{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.hero{padding:clamp(80px,15vh,180px) 0 clamp(64px,11vh,130px)}
.hero-split{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,72px);
  align-items:center; padding-top:clamp(40px,7vh,90px)}
.hero-img{overflow:hidden}
.hero-img img{width:100%; height:auto; border:1px solid var(--line)}
.zoom-frame{overflow:hidden; border:1px solid var(--line); display:block}
.zoom-frame img{transition:transform .6s ease; display:block; border:0}
.zoom-frame:hover img{transform:scale(1.05)}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,3vw,36px)}
.svc h3{font-size:15px; margin:0 0 10px; font-weight:500; letter-spacing:.02em}
.svc p{margin:0; color:var(--mute); font-size:13.5px; line-height:1.7}
.svc{padding-top:18px; border-top:1px solid var(--line)}
.duo-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,5vw,64px);
  align-items:start}
.duo-grid img{width:100%; height:auto}
.portrait-img{width:100%; height:auto}
.page-head{padding:clamp(64px,12vh,150px) 0 clamp(32px,5vh,64px)}
.band{padding:clamp(56px,10vh,120px) 0; border-top:1px solid var(--line)}
.band-cta{text-align:left; position:relative; overflow:hidden}
.cta-mark{position:absolute; right:-70px; bottom:-90px; width:min(360px,40vw);
  height:auto; pointer-events:none; user-select:none}
.band-cta .sec-head,.band-cta .body-lg,.band-cta .actions{position:relative}

/* type — restraint is the premium: serif display over sans body */
.display{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(46px,8vw,100px); line-height:1.0; letter-spacing:-.005em;
  font-weight:300; margin:0 0 16px;
}
.display.sm{font-size:clamp(32px,4.8vw,58px)}
.eyebrow{font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin:0 0 22px; font-weight:500}
.role{font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:clamp(19px,2.3vw,26px); margin:0 0 24px; color:var(--mute);
  font-weight:400; letter-spacing:.01em}
.lede{font-size:clamp(15px,1.5vw,17px); color:var(--mute); margin:0; max-width:56ch;
  line-height:1.75}

/* hero entrance cascade + display-name tracking-in, home page only */
.hero-copy .eyebrow{animation:rise-in .7s ease both}
.hero-copy .display{animation:rise-in .7s ease .1s both, tracking-in 1s ease .1s both}
.hero-copy .role{animation:rise-in .7s ease .22s both}
.hero-copy .lede{animation:rise-in .7s ease .32s both}
.hero-copy .actions{animation:rise-in .7s ease .42s both}
.hero-img img{animation:hero-img-in 1.2s ease both}
@keyframes rise-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
@keyframes tracking-in{from{letter-spacing:.3em; opacity:0} to{letter-spacing:-.005em; opacity:1}}
@keyframes hero-img-in{from{transform:scale(1.04)} to{transform:scale(1)}}

.sec-head{font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin:0 0 34px}
.sec-num{color:var(--mute); margin-right:14px; font-variant-numeric:tabular-nums}
.body-lg{font-size:clamp(15px,1.45vw,16.5px); max-width:60ch; margin:0 0 20px;
  line-height:1.8}
.fine{font-size:13px; color:var(--mute)}
.empty{color:#6A6A6A}
a{transition:color .25s ease, border-color .25s ease, background .25s ease}

/* buttons */
.actions{display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 0}
.btn{position:relative; z-index:0; overflow:hidden; display:inline-block; text-decoration:none;
  padding:16px 34px; background:transparent; color:var(--ink); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500; border:1px solid var(--ink);
  transition:color .3s ease, border-color .3s ease, transform .25s ease}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.btn:hover{border-color:var(--accent); color:#0A0A0A; transform:translateY(-2px)}
.btn:hover::before{transform:scaleX(1)}
.btn.ghost{border-color:#3A3833; color:var(--mute)}
.more{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid #3A3833; text-decoration:none; padding-bottom:4px}
.more:hover{border-color:var(--accent); color:var(--accent)}
.big-link{font-size:clamp(17px,2vw,22px); letter-spacing:.01em;
  text-decoration:none; border-bottom:1px solid #3A3833}
.big-link:hover{border-color:var(--accent)}

/* reel */
.reel{aspect-ratio:16/9; border:1px solid var(--line); display:grid; place-items:center}
.reel iframe{width:100%; height:100%; border:0; display:block}
.reel-cover{width:100%; height:100%; display:grid; place-items:center; gap:18px;
  background:#0E0E0D; border:0; cursor:pointer; align-content:center}
.reel-cover .reel-label{color:var(--mute); letter-spacing:.26em; font-size:11px;
  text-transform:uppercase}
.play-ring{width:78px; height:78px; border:1px solid #3A3833; border-radius:50%;
  display:grid; place-items:center; transition:border-color .25s ease;
  animation:play-pulse 2.6s ease-in-out infinite}
.play-tri{width:0; height:0; border-left:16px solid var(--ink);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  margin-left:4px}
@keyframes play-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,161,107,.35)}
  50%{box-shadow:0 0 0 10px rgba(201,161,107,0)}
}
.reel-cover:hover .play-ring{border-color:var(--accent)}
.reel-cover:hover .reel-label{color:var(--accent)}
.reel-inner{text-align:center}
.reel-label{display:block; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute)}
.reel-note{display:block; margin-top:10px; font-size:13px; color:#6A6A6A}

/* credits */
.credit-preview{list-style:none; margin:0; padding:0}
.credit-preview li{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--line)}
.credit-preview li:first-child{border-top:0}
.credit-preview li.empty{display:block}
.credit-preview .cm{color:var(--mute)}
.credits{width:100%; border-collapse:collapse; font-size:16px}
.credits th{text-align:left; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); font-weight:500; padding:0 12px 14px 0; border-bottom:1px solid var(--line)}
.credits td{padding:15px 12px 15px 0; border-bottom:1px solid var(--line); vertical-align:top}
.credit-preview li:nth-child(2){transition-delay:.08s}
.credit-preview li:nth-child(3){transition-delay:.16s}
.credit-preview li:nth-child(4){transition-delay:.24s}
.credits tbody tr.reveal{opacity:0; transform:none}
.credits tbody tr.reveal.in{opacity:1; transition:opacity .5s ease}
.credits tbody tr:nth-child(2){transition-delay:.06s}
.credits tbody tr:nth-child(3){transition-delay:.12s}
.credits tbody tr:nth-child(4){transition-delay:.18s}

/* work tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px}
.tile{margin:0}
.tile figcaption{padding:12px 0; font-size:12.5px; letter-spacing:.02em}
.tile figcaption span{display:block; color:var(--mute)}
.tile figcaption strong{transition:color .25s ease}
.tile:hover figcaption strong{color:var(--accent)}
.tiles .tile:nth-child(2){transition-delay:.08s}
.tiles .tile:nth-child(3){transition-delay:.16s}
.tiles .tile:nth-child(4){transition-delay:.24s}
.tiles .tile:nth-child(5){transition-delay:.32s}

/* marquee */
.marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0}
.marquee-track{display:flex; width:max-content; animation:marquee-scroll 60s linear infinite}
.marquee-item{display:inline-flex; align-items:center; white-space:nowrap;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:clamp(20px,3.4vw,36px); color:var(--mute); padding-right:48px; letter-spacing:.01em}
@keyframes marquee-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* staggered service reveal */
.svc-grid .svc:nth-child(2){transition-delay:.08s}
.svc-grid .svc:nth-child(3){transition-delay:.16s}
.svc-grid .svc:nth-child(4){transition-delay:.24s}

/* about */
.about-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,5vw,64px);
  align-items:start}
.portrait{aspect-ratio:3/4; border:1px solid var(--line); display:grid; place-items:center;
  color:#6A6A6A; font-size:13px}
.plain{list-style:none; margin:0; padding:0; font-size:18px}
.plain li{padding:12px 0; border-bottom:1px solid var(--line)}
.plain a{text-decoration:none}
.plain a:hover{color:var(--mute)}

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:clamp(56px,10vh,120px);
  padding:clamp(40px,7vh,72px) var(--pad); display:grid; gap:18px; justify-items:start}
.foot-mark-sm{width:52px; height:auto; margin-bottom:2px}
.foot-word{font-size:15px; letter-spacing:.34em; text-transform:uppercase;
  margin:0; color:var(--ink)}
.foot-bar{width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; margin-top:8px; padding-top:22px; border-top:1px solid var(--line)}
.foot-links{display:flex; gap:22px; font-size:13px}
.foot-links a{text-decoration:none; color:var(--mute)}
.foot-links a:hover{color:var(--accent)}
.site-foot .fine{margin:0; font-size:12px}

/* Scroll reveals are one shot: each element fades in once and stays in.
   Idle loops (marquee, play ring pulse, hero entrance) are permitted on
   this site as of the 20 Aug 2026 interaction pass, gold accent only,
   and every one of them is disabled below under reduced motion. */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

@media (max-width:860px){
  .hero-split{grid-template-columns:1fr; gap:32px}
  .hero-img{order:-1}
  .hero-img img{width:100%; height:min(62vh,520px); object-fit:cover;
    object-position:center 20%}
  .duo-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-head{flex-wrap:wrap; gap:14px; padding:16px var(--pad)}
  .nav-group{display:contents}
  .nav-wrap{order:3; width:100%}
  .nav{width:100%; gap:12px 18px; flex-wrap:wrap}
  .lang{order:2; margin-left:auto}
  .about-grid{grid-template-columns:1fr}
  .credit-preview li{grid-template-columns:1fr; gap:4px}
  .credit-preview .cm{grid-column:1}
  .credits{font-size:15px}
}