:root{--cream:#f6efe6;--paper:#fffaf3;--ink:#1b1418;--ink2:#2a1f25;--red:#b3122e;--red2:#d7263d;--gold:#c99a4b;--blush:#f1d9d2;--mute:#7c6d72;
--serif:Gloock,Georgia,serif;--sans:Outfit,system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font:400 18px/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:italic;color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
.eyebrow{font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:26px;height:1px;background:currentColor}
.serif{font:400 clamp(46px,6.4vw,96px)/.95 var(--serif);letter-spacing:-.02em}
.lead{font-size:19px;color:#4b3d43;max-width:540px;margin-top:16px}

.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:68px;display:flex;align-items:center;gap:28px;padding:0 28px;transition:background .3s}
.nav.solid{background:rgba(246,239,230,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(27,20,24,.08)}
.mono-logo{display:flex;text-decoration:none;font:30px var(--serif);margin-right:auto;letter-spacing:-.04em}
.mono-logo span:last-child{color:var(--red);margin-left:-.12em;transform:translateY(.18em)}
.nav nav{display:flex;gap:24px}.nav nav a{text-decoration:none;font-size:15px;color:#4b3d43}.nav nav a:hover{color:var(--red)}
.pill{text-decoration:none;font-size:14px;font-weight:500;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--cream);transition:background .25s}
.pill:hover{background:var(--red)}

/* hero */
.hero{height:230vh;position:relative}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(70% 60% at 50% 55%,#fff5ea 0%,var(--cream) 65%)}
.bigname{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;user-select:none}
.bigname span{font:400 clamp(90px,19vw,330px)/.8 var(--serif);letter-spacing:-.04em;white-space:nowrap;will-change:transform}
.bigname span:first-child{color:var(--ink)}
.bigname span:last-child{color:transparent;-webkit-text-stroke:1.5px var(--red)}
#ring{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
#ring:active{cursor:grabbing}
.hcopy{position:absolute;left:28px;bottom:32px;max-width:420px;pointer-events:none}
.hcopy .role{color:var(--red);margin-bottom:8px}
.hcopy p{font:400 26px/1.15 var(--serif)}
.hint{position:absolute;right:28px;bottom:36px;color:var(--mute);display:flex;gap:10px}
.hint span{animation:nudge 2s infinite}.hint span:last-child{animation-delay:1s}
@keyframes nudge{50%{transform:translateX(4px)}}

/* story */
.story{padding:150px 0 130px;background:var(--paper)}
.story .big{font:400 clamp(28px,3.4vw,50px)/1.22 var(--serif);letter-spacing:-.01em;max-width:1080px}
.story .big .w{color:rgba(27,20,24,.14);transition:color .35s}.story .big .w.on{color:var(--ink)}.story .big .w.r.on{color:var(--red)}
.sig{font:italic 54px var(--serif);color:var(--red);margin-top:30px;transform:rotate(-4deg);transform-origin:left;opacity:0;transition:opacity 1s,transform 1s}
.sig.in{opacity:1;transform:rotate(-2deg)}

/* climb (horizontal pin) */
.climb{position:relative;background:var(--ink);color:var(--cream)}
.climb .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:30px}
.climb .eyebrow{color:#f3a7b4}.climb em{color:#ff8fa3}
.chead h2{font-size:clamp(40px,5vw,76px)}
.rail{display:flex;gap:22px;padding-left:max(24px,calc((100vw - 1200px)/2));will-change:transform}
.stop{flex:0 0 min(420px,78vw);border-radius:22px;overflow:hidden;background:#2a1f25;position:relative}
.stop img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s}
.stop:hover img{transform:scale(1.05)}
.cap{padding:18px 20px 22px}
.cap b{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#f3a7b4}
.cap h3{font:400 28px/1.1 var(--serif);margin:6px 0}
.cap p{font-size:15px;color:#d8cbcf}
.stop.gold,.stop.red{display:flex}
.card-ao{padding:34px 30px;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:100%}
.stop.gold{background:linear-gradient(150deg,#e8c27e,#b4813a)}.stop.gold .card-ao{color:#2a1a08}
.stop.red{background:linear-gradient(150deg,var(--red2),#7f0c20)}
.card-ao b{font:400 clamp(48px,5vw,72px)/.95 var(--serif);margin:10px 0 12px;letter-spacing:-.02em}
.card-ao p{font-size:16px;opacity:.85}
.card-ao a{margin-top:18px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
.cbar{display:flex;align-items:center;gap:16px}
.cbar .track{flex:1;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.cbar i{display:block;height:100%;background:linear-gradient(90deg,#ff8fa3,var(--gold));transform-origin:left;transform:scaleX(0)}
.cbar .mono{color:#cdbfc4}

/* name */
.name{padding:140px 0;background:var(--cream)}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.names{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.nm{text-align:left;display:block;transition:transform .4s}
.nm .w{display:block;font:400 clamp(64px,8.5vw,128px)/.9 var(--serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .4s,-webkit-text-stroke-color .4s}
.nm .d{display:block;color:var(--mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .5s,margin .5s}
.nm.on .w{color:var(--ink)}.nm[data-i="1"].on .w{color:var(--red);-webkit-text-stroke-color:var(--red)}
.nm.on .d{max-height:40px;opacity:1;margin:8px 0 6px}
.nm:hover{transform:translateX(8px)}
.plus{font:400 60px/1 var(--serif);color:var(--gold);margin-left:8px}
.eq{margin-top:22px;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--cream)}

/* believe */
.believe{padding:120px 0;background:var(--paper)}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bc{position:relative;border-radius:24px;padding:34px 30px;background:#fff;border:1px solid #efe2d6;box-shadow:0 30px 50px -40px rgba(27,20,24,.4);transition:transform .35s}
.bc .n{font:500 12px var(--mono);color:var(--red);letter-spacing:.14em}
.bc h3{font:400 38px/1 var(--serif);margin:18px 0 12px;letter-spacing:-.01em}
.bc p{color:#5b4c52;font-size:16px}

/* play mosaic */
.play{padding:130px 0;background:var(--cream)}
.phead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:50px}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:14px}
.mosaic figure{border-radius:20px;overflow:hidden;position:relative;transition:transform .35s}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.mosaic figure:hover img{transform:scale(1.06)}
.m1{grid-column:1/3;grid-row:span 4}.m2{grid-column:3/5;grid-row:span 3}.m3{grid-column:5/7;grid-row:span 2}.m4{grid-column:5/7;grid-row:span 3}.m5{grid-column:3/5;grid-row:span 2}.m6{grid-column:1/3;grid-row:span 1}
.m6{display:none}

/* company */
.company{padding:130px 0;background:linear-gradient(160deg,#1767b3,#0b3d75);color:#fff}
.company .eyebrow{color:#bfe0ff}.company em{color:#bfe0ff}.company .lead{color:#e3efff}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.glglobe{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:0 auto;cursor:grab}
.glglobe canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.gcap{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font-size:10.5px;color:#cfe4ff}
.lnl{height:42px;width:auto;margin-top:34px}

/* work */
.work{padding:140px 0;background:var(--paper)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
.door{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:28px;padding:38px 34px;background:var(--ink);color:var(--cream);min-height:320px;transition:transform .35s}
.door.r{background:linear-gradient(150deg,var(--red2),#7f0c20)}
.door .mono{color:#f3a7b4}.door.r .mono{color:#ffd9df}
.door b{font:400 clamp(44px,5vw,72px)/.95 var(--serif);margin:16px 0 14px;letter-spacing:-.02em}
.door p{color:#e2d6da;max-width:420px;flex:1}
.door i{font-style:normal;font-weight:600;margin-top:24px}

.foot{background:var(--ink);color:var(--cream);padding:90px 0 60px}
.fname{font:400 clamp(60px,12.5vw,200px)/.85 var(--serif);letter-spacing:-.04em}
.fname em{color:#ff8fa3}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:40px 0 18px;font-size:15px;color:#d8cbcf}
.frow a{text-decoration:none;color:#ff8fa3}
.legal{font-size:12.5px;color:#9d8e93;max-width:900px}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
.fxsplit .fxw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.fxsplit .fxw>span{display:inline-block;transform:translateY(105%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fxsplit.fxin .fxw>span{transform:none}
.fxglare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;z-index:3}
.fxbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--gold));pointer-events:none}
.fxc{position:fixed;width:8px;height:12px;border-radius:2px;z-index:90;pointer-events:none}

@media (max-width:860px){
  body{font-size:17px}
  .nav{padding:0 16px;height:60px}.nav nav{display:none}.pill{font-size:12.5px;padding:9px 13px}
  .wrap{width:calc(100% - 36px)}
  .hero{height:200vh}
  .bigname{justify-content:flex-start;padding-top:18svh}
  .bigname span{font-size:23vw}
  .hcopy{left:18px;right:18px;bottom:26px}.hcopy p{font-size:22px}
  .hint{display:none}
  .story{padding:100px 0 90px}
  .stop{flex-basis:80vw}.cap h3{font-size:24px}
  .ngrid,.cgrid,.phead,.doors{grid-template-columns:1fr;gap:30px}
  .name,.believe,.play,.company,.work{padding:90px 0}
  .bgrid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:10px}
  .mosaic figure{grid-column:auto!important;grid-row:span 2!important}
  .m1{grid-row:span 3!important}.m6{display:block}
  .glglobe{max-width:320px}
  .door{min-height:260px;padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (max-width:860px){.hcopy{left:0;right:0;bottom:0;padding:70px 18px 26px;background:linear-gradient(rgba(246,239,230,0),var(--cream) 45%)}}