/* Option 1: The Index. Near-black, gold-printed photography, one gold bar. */
:root{--bg:#0b0a09;--bg2:#141210;--tx:#f2efe8;--mu:#a69f92;--ln:rgba(242,239,232,.16);--trk:52px}
body{background:var(--bg);color:var(--tx);padding-bottom:var(--trk)}
.lab{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.hd{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .3s}
.hd.scrolled,body.menu-open .hd{background:rgba(11,10,9,.94)}
.nav{font-size:.98rem}
.nav.open{background:var(--bg);font-size:1.25rem}
.nav a[aria-current=page]{color:var(--gold)}
.nav a:hover{color:var(--gold-hi)}
.nav .sub{color:var(--mu)}
@media (min-width:1024px){.nav .sub{background:var(--bg);border-top:1px solid var(--gold)}}
.backpill{bottom:calc(var(--trk) + 10px)}

/* Lifting gold bar: follows line wraps */
.lift{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .lift{color:var(--gold);background:linear-gradient(var(--gold),var(--gold)) right center/100% 86% no-repeat;transition:background-size 1s var(--ease),color .01s linear .5s}
.js .lift.in{background-size:0 86%;color:inherit}
.gold-word{color:var(--gold-hi)}

/* First screen */
.hero{position:relative;min-height:calc(100svh - var(--trk));display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.55) 0,rgba(11,10,9,.05) 34%,rgba(11,10,9,.7) 78%,#0b0a09 100%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(120px,20vh,200px) clamp(28px,6vh,64px)}
.hero h1{font-weight:300;font-size:clamp(2.75rem,8.6vw,8.4rem);line-height:1.02;letter-spacing:-.018em;max-width:12.5em}
.hero-ask{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(18px,3vh,32px);font-size:clamp(1rem,1.5vw,1.25rem)}
.hero-ask::before{content:"";width:clamp(40px,6vw,88px);height:.8em;background:var(--gold);transition:width .35s var(--ease)}
.hero-ask:hover::before{width:clamp(60px,9vw,130px)}

/* The index */
.ix{position:relative;height:calc(100svh + 280vh);background:var(--bg)}
.ix-stage{position:sticky;top:0;height:calc(100svh - var(--trk));overflow:hidden}
.ix-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ix-pic.on{opacity:1}
.ix-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.9) 0,rgba(11,10,9,.62) 58%,rgba(11,10,9,.28) 100%)}
.ix-in{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr auto;gap:16px;padding-block:84px 18px}
.ix-names{container-type:inline-size;align-self:center}
.ixn{display:block;width:fit-content;position:relative;font-weight:300;font-size:min(13.4cqw,calc((100svh - 330px)/5.2));line-height:1.1;letter-spacing:-.018em;color:rgba(242,239,232,.42);transition:color .25s linear .25s}
.ixn::after{content:"";position:absolute;left:0;right:0;top:.17em;bottom:.14em;background:var(--gold);transform:scaleX(0);transform-origin:left}
.ixn.on{color:#fff}
.ixn.on::after{animation:peel .8s var(--ease) both}
@keyframes peel{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.01%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.ix-tags{display:grid}
.tag{grid-area:1/1;background:var(--bg);border-left:4px solid var(--gold);padding:14px 16px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.tag.on{opacity:1;visibility:visible}
.tag small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tag b{display:block;font-weight:400;font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.24;margin:6px 0 8px}
.tag a{display:inline-flex;align-items:center;min-height:32px;font-size:.92rem;border-bottom:1px solid var(--gold)}
@media (min-width:1024px){
  .ix-in{grid-template-rows:1fr;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(24px,4vw,64px);padding-block:96px 32px}
  .ix-tags{align-self:end}
  .ixn{font-size:min(13.4cqw,calc((100svh - 190px)/5.6))}
  .tag{padding:22px 24px}
}

/* Sections */
.sec{padding-block:clamp(72px,11vw,160px)}
.who-big{font-weight:300;font-size:clamp(1.65rem,3.9vw,3.75rem);line-height:1.2;letter-spacing:-.008em;margin-top:clamp(20px,3vw,36px);max-width:25em}
.who-small{color:var(--mu);margin-top:clamp(24px,3vw,44px);max-width:36em;font-size:clamp(1.05rem,1.4vw,1.25rem)}
.who-grid{display:grid;gap:0}
@media (min-width:1024px){.who-small{margin-left:auto;margin-right:0}}

.do{display:grid;margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--ln)}
.do-col{padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--ln)}
.do-col h3{font-weight:300;font-size:clamp(2.25rem,4.6vw,4.25rem);line-height:1;letter-spacing:-.01em;color:var(--gold)}
.do-col ul{margin-top:clamp(16px,2vw,28px)}
.do-col li{padding-block:9px;border-top:1px solid var(--ln);font-size:1.02rem}
@media (min-width:768px){
  .do{grid-template-columns:repeat(3,1fr)}
  .do-col{padding-inline:clamp(16px,2vw,28px);border-bottom:0;border-left:1px solid var(--ln)}
  .do-col:first-child{border-left:0;padding-left:0}
}

/* Clients */
.cl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px}
.h2{font-weight:300;font-size:clamp(2.25rem,5.4vw,5rem);line-height:1.04;letter-spacing:-.014em}
.cl{display:grid;gap:14px;margin-top:clamp(28px,4vw,52px)}
.card{display:flex;flex-direction:column;background:var(--bg2);min-width:0;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-6px)}
.card-pic{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-pic img{width:100%;height:100%;object-fit:contain}
.card-tx{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column;gap:4px}
.card-tx small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.card-tx b{font-weight:400;font-size:1.3rem}
.card-tx span{color:var(--mu);font-size:.95rem;margin-top:auto;padding-top:14px}
.card:hover .card-tx span{color:var(--gold-hi)}
.card-ask{background:var(--gold);color:var(--ink);justify-content:space-between;padding:20px 18px;min-height:210px}
.card-ask b{font-weight:300;font-size:clamp(2rem,3.2vw,3rem);line-height:1.04;letter-spacing:-.01em}
.card-ask span{font-size:.98rem;font-weight:500}
@media (min-width:640px){.cl{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cl{grid-template-columns:repeat(4,1fr)}}

/* Look-for run on the home page */
.run{background:var(--bg2)}
.run-list{display:block;font-weight:300;font-size:clamp(1.6rem,4.3vw,4.1rem);line-height:1.22;letter-spacing:-.01em;margin-top:clamp(20px,3vw,36px)}
.run-list a{color:rgba(242,239,232,.55);transition:color .2s}
.run-list a:hover{color:var(--gold-hi)}
.run-list a::after{content:" /";color:var(--gold)}
.run-list a:last-child::after{content:""}
.run-p{color:var(--mu);max-width:38em;margin-top:clamp(20px,3vw,36px)}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px;margin-top:24px;background:var(--gold);color:var(--ink);font-weight:500;transition:background .2s}
.btn:hover{background:var(--gold-hi)}

/* Pitch */
.pitch{border-top:4px solid var(--gold)}
.pitch .say-line{font-size:clamp(1.9rem,5vw,4.8rem);margin-top:clamp(16px,2vw,28px);max-width:17em;letter-spacing:-.012em}
.say select{color:var(--gold-hi);font-style:italic}
.say-go{background:var(--gold);color:var(--ink)}
.say-go:hover{background:var(--gold-hi)}
.pitch-or{margin-top:18px;color:var(--mu)}
.pitch-or a{color:var(--tx);border-bottom:1px solid var(--ln)}

/* Footer */
.ft{background:#000;padding-block:clamp(48px,6vw,80px) 28px}
.ft-grid{display:grid;gap:32px}
.ft img.ft-logo{width:150px}
.ft h4{font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ft li a,.ft address a{display:inline-flex;align-items:center;min-height:32px}
.ft a:hover{color:var(--gold-hi)}
.ft address{font-style:normal}
.ft-fine{margin-top:clamp(32px,4vw,56px);padding-top:16px;border-top:1px solid var(--ln);font-size:.84rem;color:var(--mu)}
@media (min-width:768px){.ft-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}}

/* Tracker pinned along the bottom of the window, on every page */
.track{position:fixed;inset:auto 0 0 0;height:var(--trk);z-index:40;background:var(--bg);border-top:1px solid rgba(201,164,90,.5)}
.track-lab{color:var(--gold)}
.t-lbm{box-sizing:content-box;background:#fff;padding:4px 8px;height:20px}
.t-delta{height:24px}.t-col{height:32px}
.t-ask{color:var(--gold-hi)}

/* Page head and the inner layout */
.ph{position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,76svh,820px);overflow:hidden}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.62) 0,rgba(11,10,9,.2) 36%,rgba(11,10,9,.82) 88%,#0b0a09 100%)}
.ph-in{position:relative;z-index:2;padding-block:110px clamp(24px,4vw,56px)}
.ph h1{font-weight:300;font-size:clamp(2.75rem,10.4vw,10rem);line-height:1;letter-spacing:-.02em}
.ph-full{margin-top:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}
.ph-q{font-weight:300;font-size:clamp(1.4rem,3.2vw,3rem);line-height:1.18;margin-top:clamp(14px,2vw,24px);max-width:24em}
.ind-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ln)}
.ind-tabs::-webkit-scrollbar{display:none}
.ind-tabs a{flex:none;display:flex;align-items:center;min-height:52px;padding-inline:clamp(14px,2vw,28px);color:var(--mu);font-size:.98rem;white-space:nowrap}
.ind-tabs a:hover{color:var(--tx)}
.ind-tabs a[aria-current=page]{color:var(--ink);background:var(--gold)}

.asks{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--ln)}
.asks li{display:grid;grid-template-columns:42px 1fr;padding-block:clamp(18px,2.4vw,32px);border-bottom:1px solid var(--ln);font-weight:300;font-size:clamp(1.35rem,3vw,2.75rem);line-height:1.2}
.asks i{font-style:normal;color:var(--gold);font-size:.8rem;letter-spacing:.08em;padding-top:.5em}
@media (min-width:768px){.asks li{grid-template-columns:90px 1fr}}

.band{display:block;background:var(--gold);color:var(--ink);padding-block:clamp(36px,5vw,72px)}
.band b{display:block;font-weight:300;font-size:clamp(1.8rem,4.6vw,4.4rem);line-height:1.08;letter-spacing:-.012em;max-width:19em}
.band span{display:inline-flex;margin-top:16px;font-weight:500;border-bottom:1px solid var(--ink)}
.nx{position:relative;display:block;overflow:hidden}
.nx img{width:100%;height:clamp(220px,34vw,460px);object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.nx:hover img{transform:scale(1.03)}
.nx::after{content:"";position:absolute;inset:0;background:rgba(11,10,9,.58)}
.nx div{position:absolute;inset:auto 0 0 0;z-index:2;padding-block:clamp(20px,3vw,40px)}
.nx small{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
.nx b{font-weight:300;font-size:clamp(2.5rem,8vw,7.5rem);line-height:1.04;letter-spacing:-.018em}

.lay{display:grid;gap:clamp(36px,6vw,96px);padding-block:clamp(110px,14vw,170px) clamp(64px,9vw,130px)}
.lay-l h1{font-weight:300;font-size:clamp(2.6rem,5.8vw,5.6rem);line-height:1.02;letter-spacing:-.016em}
.lay-l p{color:var(--mu);margin-top:18px;max-width:30em}
.toc{margin-top:clamp(20px,3vw,36px);border-top:1px solid var(--ln)}
.toc li{border-bottom:1px solid var(--ln)}
.toc a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:.98rem;color:var(--mu);transition:color .2s}
.toc a::before{content:"";flex:none;width:0;height:.72em;background:var(--gold);transition:width .3s var(--ease)}
.toc a:hover{color:var(--tx)}
.toc a.on{color:var(--tx)}
.toc a.on::before{width:18px}
@media (min-width:1024px){
  .lay{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .lay-l>div{position:sticky;top:104px}
}
.ent{padding-block:clamp(22px,3vw,40px);border-top:1px solid var(--ln);scroll-margin-top:90px}
.ent:first-child{border-top:0;padding-top:0}
.ent i{display:block;font-style:normal;font-size:.8rem;letter-spacing:.1em;color:var(--gold)}
.ent h2,.ent h3{font-weight:300;font-size:clamp(1.65rem,3vw,2.75rem);line-height:1.12;letter-spacing:-.008em;margin:6px 0 12px}
.ent p{color:#cfc9bc;max-width:38em}
.ent p+p{margin-top:12px}
.ent-photo{width:100%;margin-top:18px;aspect-ratio:16/9;object-fit:cover}
.ent .do{margin-top:12px;border-top:0}
.ent .do-col h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0}
.lay-r .cl{margin-top:0}
@media (min-width:1024px){.lay-r .cl{grid-template-columns:repeat(2,1fr)}}
.say-page .say-line{font-size:clamp(1.9rem,4.4vw,4.2rem);letter-spacing:-.01em}

.lst{margin-top:0;border-top:1px solid var(--ln)}
.lst li{border-bottom:1px solid var(--ln);padding-block:10px}
.ix-only .ix-in{padding-top:96px}
.ix-h1{position:absolute;z-index:3;top:84px;left:0;right:0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:400}
