:root{
  --k:#0a0a0a; --k2:#141414; --k3:#232321; --y:#ffdd00; --w:#fff; --mute:#a8a8a2;
  --line:rgba(255,255,255,.14);
  --disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,4.4vw,64px);
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--k);color:var(--w);font:400 17px/1.6 var(--body);overflow-x:clip;max-width:100vw}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;margin:0;line-height:.88;letter-spacing:.002em}
h2{font-size:clamp(64px,10.4vw,168px)}
p{margin:0}
.y{color:var(--y)}
.wrap{width:min(1400px,100%);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:800 13px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--y);color:var(--k);padding:10px 16px;font-weight:800}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:14px 26px;background:var(--y);color:var(--k);font:800 21px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:2px solid var(--y);cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--w);border-color:var(--w);transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:8px 18px;font-size:18px;white-space:nowrap}
.btn-ghost{background:transparent;color:var(--w);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--w);color:var(--k)}
.btn-k{background:var(--k);color:var(--y);border-color:var(--k);width:100%}
.btn-k:hover{background:#000;color:var(--w);border-color:#000}
.btn-k[disabled]{opacity:.6;cursor:wait}
.ic-k{filter:brightness(0);flex:none;width:22px}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:32px;padding:16px var(--gut);transition:background .25s,padding .25s}
.nav.solid{background:rgba(10,10,10,.92);backdrop-filter:blur(10px);padding-block:10px;box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:40px}
.brand b{display:block;font:900 27px/.9 var(--disp);letter-spacing:.06em}
.brand small{display:block;font:700 9.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.nav nav{margin-left:auto;display:flex;gap:30px}
.nav nav a{font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 0}
.nav nav a:hover{color:var(--y)}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0 0 0 auto;width:56%;z-index:-1;opacity:0;transform:translateX(9%);transition:transform 1.5s cubic-bezier(.16,.84,.24,1) .15s,opacity .5s .15s}
body.ready .hero-media{opacity:1;transform:none}
.hero-clip{position:absolute;inset:0;overflow:hidden;clip-path:polygon(42% 0,100% 0,100% 100%,6% 100%,28% 52%,10% 52%);background:var(--k2)}
.hero-clip video{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:60% 30%;translate:0 var(--pbg,0)}
.hero-clip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.55) 0,rgba(10,10,10,0) 42%),linear-gradient(0deg,rgba(10,10,10,.5),rgba(10,10,10,0) 30%)}
.seam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.seam polyline{fill:none;stroke:var(--y);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:miter;filter:drop-shadow(0 0 10px rgba(255,221,0,.75))}
.seam{clip-path:inset(-30px -30px 100% -30px);transition:clip-path .45s cubic-bezier(.5,0,.2,1) .15s}
body.ready .seam{clip-path:inset(-30px)}
.seam-m{display:none}
.strike{position:absolute;inset:0;z-index:0;pointer-events:none;background:#fff8c8;opacity:0}
body.ready .strike{animation:strike .75s linear .32s 1}
@keyframes strike{0%{opacity:0}8%{opacity:.5}18%{opacity:.04}30%{opacity:.34}100%{opacity:0}}
.hero-copy{position:relative;padding:112px var(--gut) 64px;max-width:980px;translate:0 var(--pin,0);opacity:var(--pop,1)}
.fly-pre{opacity:0}
.hero h1{font-size:clamp(84px,min(11.6vw,21vh),204px);margin:18px 0 24px}
.hero h1 span{display:block;width:max-content}
.hero .lead{max-width:30em;font-size:clamp(17px,1.35vw,20px);color:#e6e6e2}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ABOUT */
.about{padding:clamp(90px,12vw,190px) 0 clamp(80px,10vw,160px)}
.about-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center}
.about-photo{position:relative;margin:0}
.about-photo::before{content:"";position:absolute;inset:26px -22px -22px 26px;background:var(--y);z-index:-1;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%)}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.about-text h2{margin:14px 0 30px}
.about-text p{color:#d8d8d3}
.about-text .big{font:500 clamp(21px,2vw,29px)/1.3 var(--body);color:var(--w);margin-bottom:16px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:36px 0 26px;padding:0;border-top:2px solid var(--y)}
.facts li{padding:16px 14px 0 0}
.facts b{display:block;font:900 clamp(24px,2.6vw,36px)/1 var(--disp);text-transform:uppercase}
.facts span{font-size:14px;color:var(--mute)}
.link{display:inline-block;font:800 21px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--y);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px}
.link:hover{color:var(--w)}

/* LOADING THE BAR */
.load{position:relative;background:var(--k2);border-block:1px solid var(--line)}
.js .load.pinned{height:calc(var(--steps,7)*72svh + 100svh)}
.load-pin{padding:clamp(70px,8vw,110px) var(--gut) 60px}
.js .load.pinned .load-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:clamp(76px,10svh,104px) var(--gut) 22px}
.load-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.load-head h2{font-size:clamp(52px,min(8vw,12svh),128px);margin-top:10px}
.counter{font-family:var(--disp);font-weight:900;display:flex;align-items:baseline;gap:8px;line-height:.8;white-space:nowrap}
.counter b{font-size:clamp(58px,min(8vw,12svh),128px);color:var(--y)}
.counter span{font-size:clamp(22px,2.6vw,38px);color:var(--mute)}
.rig{position:relative;flex:1 1 auto;min-height:170px;margin:10px calc(var(--gut)*-1) 0;--shake:0}
.load:not(.pinned) .rig{display:none}
.rig.hit{animation:hit .28s cubic-bezier(.3,.7,.3,1)}
@keyframes hit{0%{transform:translateY(0)}30%{transform:translateY(7px)}65%{transform:translateY(-3px)}100%{transform:none}}
.bar{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plate{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;border-radius:7px;will-change:transform;box-shadow:inset 3px 0 0 rgba(255,255,255,.2),inset -4px 0 0 rgba(0,0,0,.28)}
.plate.c0{background:var(--y);color:var(--k)}
.plate.c1{background:#050505;color:var(--y);outline:2px solid var(--y);outline-offset:-2px}
.plate.c2{background:var(--w);color:var(--k)}
.plate i{font:900 clamp(13px,1.45vw,21px)/1 var(--disp);font-style:normal;letter-spacing:.09em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.collar{position:absolute;left:50%;top:50%;width:18px;height:46px;margin:-23px 0 0 -9px;background:linear-gradient(90deg,#cfcfca,#6c6c68);border-radius:3px;will-change:transform}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.load:not(.pinned) .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:36px}
.load:not(.pinned) .card{padding:24px;border:1px solid var(--line);background:var(--k)}
.load.pinned .cards{position:relative;display:block;height:clamp(136px,21svh,190px);flex:none}
.load.pinned .card{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;column-gap:44px;opacity:0;transform:translateY(22px);transition:opacity .28s,transform .28s;pointer-events:none}
.load.pinned .card.on{opacity:1;transform:none;pointer-events:auto}
.card .tag{grid-column:1;font:800 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--y);margin-bottom:10px}
.card h3{grid-column:1;font-size:clamp(46px,min(6.4vw,10svh),104px)}
.card>p:not(.tag){color:#deded9;font-size:clamp(16px,1.35vw,20px);line-height:1.4}
.load.pinned .card>p:not(.tag){grid-column:2;grid-row:1/3}
.pick{font:800 21px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--y);text-decoration:none;white-space:nowrap;display:inline-block;padding:10px 0}
.pick:hover{color:var(--w)}
.load.pinned .pick{grid-column:3;grid-row:1/3}
.load.pinned .card-end{grid-template-columns:minmax(0,1fr) auto}
.load.pinned .card-end .btn{grid-column:2;grid-row:1/3}
.ticks{display:flex;gap:6px;margin-top:8px}
.load:not(.pinned) .ticks{display:none}
.ticks button{flex:1;height:30px;padding:13px 0;background:none;border:0;cursor:pointer}
.ticks button::before{content:"";display:block;height:4px;background:rgba(255,255,255,.2);transition:background .2s}
.ticks button.on::before{background:var(--y)}

/* RESULTS */
.results{padding:clamp(90px,12vw,190px) 0}
.results-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.results-head h2{margin-top:14px}
.results-head>p{font-size:clamp(18px,1.5vw,22px);color:#d8d8d3}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.tile{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--k2)}
.tile video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover video{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(14px,1.8vw,26px);font:900 clamp(26px,3.5vw,54px)/.92 var(--disp);text-transform:uppercase}
.tile figcaption span{display:block;font:800 13px/1 var(--body);letter-spacing:.14em;color:var(--y);margin-bottom:10px}
.feedback{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(36px,4vw,60px);padding:clamp(20px,2.4vw,34px) clamp(20px,3vw,44px);background:var(--y);color:var(--k);text-decoration:none;font:900 clamp(26px,3.3vw,52px)/1 var(--disp);text-transform:uppercase;transition:background .2s}
.feedback:hover{background:var(--w)}
.feedback small{display:block;font:800 12px/1 var(--body);letter-spacing:.16em;margin-bottom:10px}
.feedback b{white-space:nowrap;font-size:.72em}
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;margin-bottom:22px}
.pair{position:relative;aspect-ratio:4/5;overflow:hidden;--x:50%;touch-action:pan-y;user-select:none}
.pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pair .after{clip-path:inset(0 0 0 var(--x))}
.pair input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.pair::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--y);pointer-events:none}

/* BOOK */
.book{position:relative;overflow:hidden;isolation:isolate;padding:clamp(90px,10vw,150px) 0}
.book-film{position:absolute;inset:0 auto 0 0;width:58%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-2}
.book::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.5),rgba(10,10,10,.34) 34%,#0a0a0a 58%)}
.book-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,6vw,96px);align-items:center}
.book-copy h2{font-size:clamp(62px,8.1vw,136px);margin:14px 0 24px}
.book-copy .lead{font-size:clamp(18px,1.5vw,22px);max-width:26em}
.book-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.form{background:var(--y);color:var(--k);padding:clamp(22px,3vw,42px);display:grid;gap:15px}
.form h3{font-size:clamp(38px,3.8vw,58px)}
.form label{display:block;font:800 13px/1.2 var(--body);letter-spacing:.03em}
.form em{font-style:normal}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form input:not([type=checkbox]),.form textarea{display:block;width:100%;margin-top:7px;padding:13px 14px;font:500 16px/1.3 var(--body);color:var(--k);background:rgba(255,255,255,.72);border:2px solid var(--k);border-radius:0;appearance:none}
.form input:focus,.form textarea:focus{outline:none;background:var(--w);box-shadow:0 0 0 2px var(--k)}
.form .bad{background:#fff!important;box-shadow:0 0 0 2px #b00020;border-color:#b00020!important}
.form textarea{resize:vertical}
fieldset{border:0;padding:0;margin:0}
legend{font:800 13px/1.2 var(--body);padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0}
.chips span{display:block;padding:9px 13px;border:2px solid var(--k);font:800 14px/1 var(--body)}
.chips input:checked+span{background:var(--k);color:var(--y)}
.chips input:focus-visible+span{outline:3px solid var(--k);outline-offset:2px}
.hp{position:absolute!important;left:-9999px}
.note{font:700 14px/1.35 var(--body);min-height:1.35em}

/* CONTACT */
.contact{padding:clamp(80px,10vw,150px) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:stretch}
.phone{display:block;margin:14px 0 30px;font:900 clamp(58px,7.4vw,120px)/.9 var(--disp);color:var(--y);text-decoration:none;white-space:nowrap}
.phone:hover{color:var(--w)}
.ways{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ways li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ways small{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ways a,.ways span{font-weight:700;overflow-wrap:anywhere;text-decoration:none}
.ways a:hover{color:var(--y)}
.map{min-height:360px;background:var(--k2)}
.map iframe{display:block;width:100%;height:100%;min-height:360px;border:0;filter:grayscale(1) invert(.92) contrast(.9)}

/* FOOTER */
.foot{padding:30px 0 34px;border-top:1px solid var(--line)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.copy,.built{font-size:14px;color:var(--mute)}
.built{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.built i{font-style:normal}
.built a{color:var(--w);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.built a:hover{color:var(--y)}

.dock{display:none}
.rv{opacity:0;transform:translateY(34px);transition:opacity .65s,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
[data-p]{translate:0 var(--par,0)}

@media (max-width:1040px){
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .load.pinned .card{grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
  .load.pinned .card>p:not(.tag){grid-column:1;grid-row:auto;margin-top:8px}
  .load.pinned .pick{grid-column:2;grid-row:1/4}
  .load.pinned .card-end .btn{grid-column:1;grid-row:auto;margin-top:12px;justify-self:start}
  .load.pinned .card-end{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  body{padding-bottom:58px}
  h2{font-size:clamp(62px,19vw,120px)}
  .hero{display:block;min-height:100svh}
  .hero-media{inset:0 0 auto 0;width:100%;height:50svh;transform:translateY(-7%)}
  .brand small{display:none}
  .hero-clip{clip-path:polygon(0 0,100% 0,100% 84%,58% 98%,64% 86%,0 100%)}
  .hero-clip::after{background:linear-gradient(180deg,rgba(10,10,10,.5),rgba(10,10,10,0) 30%)}
  .hero-clip video{inset:66px 0 0;height:calc(100% - 66px);object-position:58% 0}
  .seam-d{display:none}.seam-m{display:inline}
  .seam{clip-path:inset(-30px 100% -30px -30px)}
  body.ready .seam{clip-path:inset(-30px)}
  .hero-copy{padding:calc(50svh - 18px) var(--gut) 30px}
  .hero h1{font-size:min(19vw,12.6svh);margin:12px 0 16px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.12em}
  .hero .lead{font-size:16px;line-height:1.45}
  .cta{margin-top:18px}
  .cta .btn{width:100%;font-size:20px}
  .cta .btn-ghost{display:none}
  .about-grid,.results-head,.book-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .about-photo{margin-right:22px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .js .load.pinned{height:calc(var(--steps,7)*62svh + 100svh)}
  .js .load.pinned .load-pin{padding-bottom:10px}
  .load.pinned .cards{height:clamp(172px,27svh,210px)}
  .card h3{font-size:clamp(42px,12.5vw,62px)}
  .collar{height:32px;margin-top:-16px;width:12px;margin-left:-6px}
  .plate i{display:none}
  .plate.big i{display:block;font-size:12px;letter-spacing:.06em}
  .tiles{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tile{scroll-snap-align:center}
  .tile figcaption{font-size:34px}
  [data-p]{translate:none}
  .feedback{flex-direction:column;align-items:flex-start}
  .book-film{width:100%;inset:0;height:62%;object-position:50% 60%}
  .book::after{background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.5) 46%,#0a0a0a 62%)}
  .phone{font-size:min(15.6vw,110px)}
  .map iframe,.map{min-height:280px}
  .foot-in{flex-direction:column;align-items:flex-start}
  .dock{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:1fr 2fr;transform:translateY(100%);transition:transform .25s;padding-bottom:env(safe-area-inset-bottom);background:var(--k)}
  .dock.show{transform:none}
  .dock a{display:flex;align-items:center;justify-content:center;min-height:58px;font:800 21px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
  .dock .on{background:var(--y);color:var(--k)}
}
@media (max-width:380px){.row{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .hero-media{opacity:1;transform:none;transition:none}
  .seam{clip-path:none!important;transition:none}
  .strike{display:none}
  .fly-pre,.rv{opacity:1!important;transform:none!important;transition:none}
  [data-p],.hero-clip video{translate:none}
  .rig.hit{animation:none}
}