:root{
  --red:#c8102e;
  --cream:#faf6ef;
  --ink:#161616;
  --ink-2:#2b2b2b;
  --mute:#6f6a62;
  --paper:#faf6ef;
  --white:#fff;
  --coral:#f5ad35;
  --green:#2f6b12;
  --rule:#e8e1d4;
  --gut:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Sorts Mill Goudy",Georgia,serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.wrap{padding-left:var(--gut);padding-right:var(--gut);max-width:1600px;margin-left:auto;margin-right:auto}
@media (min-width:1601px){.rail{padding-left:calc((100vw - 1600px)/2 + var(--gut));scroll-padding-left:calc((100vw - 1600px)/2 + var(--gut))}.hero-in{left:calc((100vw - 1600px)/2 + var(--gut))}.hero-name{right:calc((100vw - 1600px)/2 + var(--gut))}.close .stack{left:calc((100vw - 1600px)/2 + var(--gut))}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{height:1em;width:auto;display:inline-block;vertical-align:-.12em}

/* ---- pill (Gottlieb): white pill, coral circle-arrow ---- */
.pill{display:inline-flex;align-items:center;gap:14px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--white);color:var(--ink);font:500 14px/1 var(--sans);white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pill .circ{width:32px;height:32px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;font-size:12px;flex:none;transition:transform .5s var(--ease)}
.pill .circ svg{transition:transform .5s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.pill:hover .circ{transform:rotate(45deg)}
.pill:hover .circ svg{transform:rotate(-45deg)}
.pill--plain{padding:11px 18px;font-size:13px}
.pill--paper{background:var(--paper)}
.pill--cream{background:var(--cream)}
/* platform pills (Forleo) */
.plat{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:23px;background:var(--white);color:var(--ink);border:1px solid var(--ink);font:500 14px/1 var(--sans);white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,22,22,.14)}
.plat .ico{font-size:19px}
.plat.yt .ico{color:#ff0000}
.plat.ap .ico{color:#9933cc}
.plat.sp .ico{color:#1ed760}
.tlink{font:500 15px/1 var(--sans);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;display:inline-flex;align-items:center;gap:10px;transition:gap .3s var(--ease)}
.tlink:hover{gap:16px}

/* ---- header (Gottlieb): transparent over the hero, near-black on scroll ---- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:32px;height:84px;padding:0 var(--gut);color:#fff;background:transparent;transition:background .6s var(--ease)}
.hdr.scrolled{background:rgba(22,22,22,.96);color:#fff}
body.inner .hdr{background:var(--cream);color:var(--ink);border-bottom:1px solid var(--rule)}
body.inner .hdr.scrolled{background:var(--cream);color:var(--ink)}
html.menu-open body.inner .hdr{background:transparent;color:#fff;border-color:transparent}
body.inner .hdr .brand .lk-d,html.menu-open body.inner .hdr .brand .lk-l{display:none}
html.menu-open body.inner .hdr .brand .lk-d{display:block}
.hdr .brand{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--lh) * .12);flex:none;line-height:1;--lh:58px}
.hdr .brand img{height:var(--lh);width:auto;display:block}
.hdr .brand .brand-cred{display:block;font:500 max(8.5px, calc(var(--lh) * .157))/1 var(--sans);letter-spacing:.005em;white-space:nowrap;color:inherit;opacity:.88;padding-left:1px}
body.inner .hdr .brand .brand-cred{color:var(--ink-2);opacity:1}
html.menu-open body.inner .hdr .brand .brand-cred{color:#fff;opacity:.88}
.hdr-r{display:flex;align-items:center;gap:18px;flex:none}
.hdr .cta{flex:none}
.hdr .menu{display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:inherit;padding:10px 4px;cursor:pointer;font:500 14px/1 var(--sans)}
.hdr .menu .ico{position:relative;width:26px;height:14px;display:block}
.hdr .menu .ico i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease),width .5s var(--ease)}
.hdr .menu .ico i:first-child{top:0}
.hdr .menu .ico i:last-child{top:12px;width:70%;margin-left:30%}
.hdr .menu:hover .ico i:last-child{width:100%;margin-left:0}
html.menu-open .hdr .menu .ico i:first-child{top:6px;transform:rotate(45deg)}
html.menu-open .hdr .menu .ico i:last-child{top:6px;width:100%;margin-left:0;transform:rotate(-45deg)}
html.menu-open .hdr{background:transparent}
html.menu-open{overflow:hidden}

/* ---- overlay menu (the menu style from Want's energy, Gottlieb's palette) ---- */
.ov{position:fixed;inset:0;z-index:45;visibility:hidden;pointer-events:none}
.ov-bg{position:absolute;inset:0;background:var(--ink);transform:translateY(-100%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.ov-in{position:absolute;inset:84px 0 0 0;display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:48px var(--gut) 56px;align-items:end;color:#fff}
.ov-nav{display:flex;flex-direction:column;gap:4px}
.ov-nav a{display:flex;align-items:baseline;gap:22px;overflow:hidden;padding:4px 0}
.ov-nav a small{font:500 12px/1 var(--sans);color:var(--coral);width:28px;flex:none;transform:translateY(120%);transition:transform .7s var(--ease)}
.ov-nav a span{display:block;font:400 64px/1.05 var(--serif);color:#fff;transform:translateY(110%);transition:transform .7s var(--ease),color .3s}
.ov-nav a:hover span{color:var(--coral)}
.ov-nav a:focus{outline:none}
.ov-nav a:focus-visible span{color:var(--coral);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.ov-nav a.ov-cta span{font-style:italic;color:var(--coral)}
.ov-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ov-ph{width:min(100%,300px);border-radius:14px;overflow:hidden}
.ov-ph img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.ov-q{font:italic 400 24px/1.3 var(--serif);color:rgba(255,255,255,.9)}
.ov-soc{display:flex;gap:22px;font-size:18px}
.ov-soc a{color:#fff;opacity:.85;transition:opacity .3s,transform .5s var(--ease)}
.ov-soc a:hover{opacity:1;transform:translateY(-2px)}
.ov .stripe{position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--coral) 0 50%,var(--green) 50% 100%);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) .4s}
.ov.open{visibility:visible;pointer-events:auto}
.ov.open .ov-bg{transform:none}
.ov.open .ov-nav a small,.ov.open .ov-nav a span{transform:none}
.ov.open .ov-nav a:nth-child(1) span,.ov.open .ov-nav a:nth-child(1) small{transition-delay:.25s}
.ov.open .ov-nav a:nth-child(2) span,.ov.open .ov-nav a:nth-child(2) small{transition-delay:.31s}
.ov.open .ov-nav a:nth-child(3) span,.ov.open .ov-nav a:nth-child(3) small{transition-delay:.37s}
.ov.open .ov-nav a:nth-child(4) span,.ov.open .ov-nav a:nth-child(4) small{transition-delay:.43s}
.ov.open .ov-nav a:nth-child(5) span,.ov.open .ov-nav a:nth-child(5) small{transition-delay:.49s}
.ov.open .ov-nav a:nth-child(6) span,.ov.open .ov-nav a:nth-child(6) small{transition-delay:.55s}
.ov.open .ov-side{opacity:1;transform:none;transition-delay:.5s}
.ov.open .stripe{transform:none}
.ov.closing{visibility:visible}
.stripe{height:6px;background:linear-gradient(90deg,var(--coral) 0 50%,var(--green) 50% 100%)}

/* ---- hero (Gottlieb variation): full-bleed stage photo, stack bottom-left, the sentence that finishes itself ---- */
.hero{position:relative;height:100vh;min-height:680px;max-height:1000px;background:var(--ink);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:68% 22%;transform-origin:66% 30%}
html.anim .hero .bg img{animation:kb 32s var(--ease) infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.55) 0%,rgba(22,22,22,.15) 30%,rgba(22,22,22,.35) 58%,rgba(22,22,22,.96) 100%),linear-gradient(90deg,rgba(22,22,22,.55) 0%,rgba(22,22,22,.15) 55%,rgba(22,22,22,0) 100%)}
.hero-in{position:absolute;left:var(--gut);right:var(--gut);bottom:112px;max-width:840px;z-index:2}
.display{font-family:var(--serif);font-weight:400;font-size:84px;line-height:.98;letter-spacing:-.005em;white-space:nowrap;color:#fff}
.l1{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.l1 span{display:block}
.cyc{display:block;position:relative;height:1.16em;overflow:hidden;font-style:italic}
.cyc span{position:absolute;left:0;top:0;line-height:1.02;transform:translateY(110%);opacity:0}
.cyc span.is-in{transform:none;opacity:1;transition:transform .6s var(--ease),opacity .4s linear}
.cyc span.is-out{transform:translateY(-110%);opacity:0;transition:transform .5s cubic-bezier(.6,0,.4,1),opacity .35s linear}
html:not(.anim) .cyc span{display:none}
html:not(.anim) .cyc span:last-child{display:block;transform:none;opacity:1}
.lead{font:500 19px/1.5 var(--sans);color:rgba(255,255,255,.9);max-width:520px;margin:26px 0 30px}
.hero-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-cta .tlink{color:#fff}
.hero-name{position:absolute;right:var(--gut);bottom:118px;z-index:2;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#fff}
.hero-name .rule{display:block;width:34px;height:2px;background:var(--coral);margin-bottom:6px}
.hero-name .nm{font:italic 400 27px/1.1 var(--serif)}
.hero-name .cr{font:500 12px/1 var(--sans);letter-spacing:.06em;color:rgba(255,255,255,.72)}
html.anim .hero-name{opacity:0;transform:translateY(24px);transition:opacity .7s linear,transform .8s var(--ease)}
html.anim.ready .hero-name{opacity:1;transform:none;transition-delay:1.3s}
html.anim .l1 span{transform:translateY(110%);transition:transform .8s var(--ease) .15s}
html.anim.ready .l1 span{transform:none}
html.anim .lead,html.anim .hero-cta{opacity:0;transform:translateY(32px);transition:opacity .7s linear,transform .8s var(--ease)}
html.anim.ready .lead{opacity:1;transform:none;transition-delay:.9s}
html.anim.ready .hero-cta{opacity:1;transform:none;transition-delay:1.1s}
/* credentials marquee (Gottlieb) along the hero's bottom edge */
.cred{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:3;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);opacity:1;transition:opacity 1.2s var(--ease) 1.4s}
html.anim:not(.ready) .cred{opacity:0}
.cred .track{display:flex;white-space:nowrap;width:max-content}
html.anim .cred .track{animation:mq 55s linear infinite}
.cred:hover .track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cred ul{list-style:none;margin:0;padding:0;display:flex;flex:none}
.cred li{font:400 13px/1 var(--sans);color:rgba(255,255,255,.72);padding:0 22px;display:flex;align-items:center;gap:22px}
.cred li::after{content:"";width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---- mask-rise headings (Want) ---- */
.mr span{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mr span i{display:block;font-style:inherit;transform:translateY(110%);transition:transform .9s var(--ease)}
.mr span:nth-child(2) i{transition-delay:.12s}
html:not(.anim) .mr span i,.mr.in span i{transform:none}

.sun{height:44px;width:auto;display:block;margin-bottom:18px}
.ov-side .sun{height:40px;margin-bottom:0}

/* ---- accessibility widget + consent UI in the site's palette (amber on ink; the engines inject their own
   styles later in the document, so these carry a body prefix to win the cascade) ---- */
body .a11y-widget,body .a11y-widget *{font-family:var(--sans)!important}
body .a11y-toggle-btn{color:var(--ink)!important;border-color:var(--cream)!important;box-shadow:0 6px 20px rgba(22,22,22,.22)!important}
body .a11y-panel{border-radius:14px!important}
body .a11y-panel h2{color:var(--ink)!important;font-family:var(--serif)!important;font-weight:400!important;font-size:22px!important}
body .a11y-btn[aria-pressed="true"]{color:var(--ink)!important}
body .a11y-reset{color:var(--ink)!important;border-color:var(--ink)!important}
body .cmp-root{font-family:var(--sans)!important}
body .cmp-root .cmp-banner,body .cmp-root .cmp-modal{border-radius:14px!important;border-color:var(--rule)!important}
body .cmp-root .cmp-btn{border-radius:999px!important;font-weight:500!important}
body .cmp-root .cmp-btn--solid{background:var(--coral)!important;color:var(--ink)!important;border-color:var(--coral)!important}
body .cmp-root .cmp-btn--ghost{color:var(--ink)!important;border-color:var(--ink)!important}
body .cmp-root .cmp-banner p a{color:var(--green)!important}
body .cmp-root .cmp-switch input:checked+span{background:var(--coral)!important}

/* ---- reveal gating ---- */
.rv{opacity:1;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.anim .rv{opacity:0}
html.anim .rv.in{opacity:1}

/* ---- section 2 (Gottlieb): gateway + bio + practice + photo ---- */
.gate{background:var(--paper);padding:120px 0 120px}
.gate .cols{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:start}
.gate h2{font:400 54px/1.08 var(--serif);color:var(--ink);max-width:520px}
.gate h2 em{font-style:italic}
.gate .body p{font:400 18px/1.6 var(--sans);color:var(--ink-2)}
.gate .body p + p{margin-top:22px}
.gate .cols2{display:grid;grid-template-columns:6fr 5fr;gap:80px;align-items:center;margin-top:110px}
.gate .ph img{object-position:50% 12%}
.gate .copy p{font:400 18px/1.6 var(--sans);color:var(--ink-2)}
.gate .copy h3{font:400 32px/1.15 var(--serif);color:var(--ink);margin:36px 0 10px}
.practice{list-style:none;margin:0;padding:0;counter-reset:step}
.practice li{font:400 24px/1.3 var(--serif);color:var(--ink);padding:18px 0;border-top:1px solid var(--rule);display:flex;gap:20px;align-items:baseline}
.practice li:last-child{border-bottom:1px solid var(--rule)}
.practice li::before{counter-increment:step;content:counter(step);font:400 13px/1 var(--sans);color:var(--mute);flex:none;width:18px}
.practice li span{display:block}
.practice li b{display:block;font-weight:400}
.practice li small{display:block;font:400 15px/1.5 var(--sans);color:var(--mute);margin-top:4px}
.ph{border-radius:14px;overflow:hidden;background:var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;object-position:50% 20%;transition:transform 1.2s var(--ease)}
html.anim .ph img{transform:scale(1.1)}
html.anim .ph.in img{transform:scale(1)}

/* ---- then / now: alternating full-bleed rows ---- */
.story{margin-top:110px}
.story-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--paper)}
.story-row--rev .story-ph{order:2}
.story-ph{position:relative;overflow:hidden;aspect-ratio:1.2/1}
.story-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.story-row:first-child .story-ph img{object-position:50% 22%}
.story-row--rev .story-ph img{object-position:86% 12%}
html.anim .story-ph{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--ease)}
html.anim .story-row--rev .story-ph{clip-path:inset(0 100% 0 0)}
html.anim .story-row.in .story-ph{clip-path:inset(0 0 0 0)}
html.anim .story-ph img{transform:scale(1.12)}
html.anim .story-row.in .story-ph img{transform:scale(1)}
.story-txt{padding:72px var(--gut) 72px calc(var(--gut) + 32px);max-width:720px}
.story-row--rev .story-txt{padding:72px calc(var(--gut) + 32px) 72px var(--gut);justify-self:end}
.story-rule{display:block;width:40px;height:3px;background:var(--coral);margin-bottom:14px}
.story-lab{font:500 13px/1 var(--sans);color:var(--green);margin-bottom:18px}
.story-txt p:not(.story-lab){font:400 19px/1.6 var(--sans);color:var(--ink-2)}
html.anim .story-txt{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .3s,transform .9s var(--ease) .3s}
html.anim .story-row.in .story-txt{opacity:1;transform:none}

/* ---- section 3 (Forleo rows, Gottlieb palette): keynotes ---- */
.keys{background:var(--paper);padding:0 0 120px}
.keys .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.keys .head h2{font:400 15px/1 var(--sans);color:var(--ink)}
.keys .head p{font:400 14px/1 var(--sans);color:var(--mute)}
.keys .head{align-items:center}
.keys .kit{margin-left:32px;margin-right:auto;font-size:14px;color:var(--ink-2)}
.keys-ctl{display:flex;align-items:center;gap:14px;flex:1;max-width:420px;margin-left:40px}
.rbtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(22,22,22,.25);background:transparent;color:var(--ink);font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:border-color .2s,background .2s}
.rbtn svg{height:1em;width:auto}
.rbtn:hover{border-color:var(--ink);background:var(--white)}
.prog{flex:1;height:2px;background:rgba(22,22,22,.14);margin-left:12px;overflow:hidden}
.prog i{display:block;height:100%;width:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(.33);transition:transform .15s linear}
.rail{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);padding:0 var(--gut) 8px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail.drag a{pointer-events:none}
.row{flex:0 0 min(78vw,1180px);scroll-snap-align:start;border-radius:20px;padding:64px 64px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;background:var(--white)}
.row.dark{background:var(--ink);color:#fff}
.row.rev .row-p{order:-1}
.row-n{font:500 13px/1 var(--sans);color:var(--green);margin-bottom:18px}
.row h3{font:400 44px/1.08 var(--serif);margin-bottom:22px}
.row p{font:400 17px/1.6 var(--sans);color:var(--ink-2);margin-bottom:16px;max-width:560px}
.row.dark p{color:rgba(255,255,255,.82)}
.row .take{font:italic 400 22px/1.35 var(--serif);color:var(--ink);margin:6px 0 30px;max-width:560px}
.row.dark .take{color:#fff}
.row .take b{font-weight:400;font-style:normal}
.row-p{overflow:hidden;border-radius:14px;box-shadow:0 24px 50px rgba(22,22,22,.14)}
.row-p img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
html.anim .row-p img{transform:scale(1.08)}
html.anim .row.in .row-p img{transform:scale(1)}
.row.dark .pill{background:var(--paper)}

/* ---- testimonials: unboxed serif quotes, hairline rows ---- */
.voices{display:grid;grid-template-columns:4fr 7fr;gap:80px;margin-top:120px;align-items:start}
.voices-h{position:sticky;top:120px}
.voices-h h2{font:400 44px/1.08 var(--serif);color:var(--ink)}
.voices-l blockquote{margin:0;padding:30px 0;border-top:1px solid var(--rule)}
.voices-l blockquote:last-child{border-bottom:1px solid var(--rule)}
.voices-l p{font:italic 400 23px/1.4 var(--serif);color:var(--ink);max-width:640px}
.voices-l .lead-q p{font-size:29px;line-height:1.3}
.voices-l cite{display:block;font:500 13px/1 var(--sans);font-style:normal;color:var(--green);margin-top:16px}

/* ---- section 4: media shelf (Forleo heading + platform pills, Gottlieb phone/book) + closer ---- */
.media{background:var(--white);padding:120px 0}
.media .cols{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center}
.media h2{font:400 54px/1.08 var(--serif);color:var(--ink);margin-bottom:26px}
.media .copy p{font:400 18px/1.6 var(--sans);color:var(--ink-2);margin-bottom:18px;max-width:520px}
.media .copy .line{font:400 24px/1.35 var(--serif);color:var(--ink);margin:26px 0 32px;max-width:520px}
.media .plats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.shelf{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;min-height:560px}
.phone{width:262px;flex:none;border-radius:40px;background:#111;padding:12px;box-shadow:0 40px 80px -24px rgba(22,22,22,.5);position:relative;z-index:2}
.phone .scr{border-radius:30px;overflow:hidden;background:#000;aspect-ratio:9/18.5;position:relative;padding-top:44px}
.phone .scr img{width:100%;aspect-ratio:1;object-fit:cover}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:999px;background:#111}
.phone .scr .meta{padding:22px 20px 24px;color:#fff}
.phone .scr .meta p.t{font:400 26px/1.1 var(--serif);color:#fff;margin-bottom:4px}
.phone .scr .meta p{font:400 12px/1.4 var(--sans);color:rgba(255,255,255,.7);margin-bottom:20px}
.phone .bar{display:flex;align-items:center;gap:12px}
.phone .bar .line{height:2px;flex:1;background:rgba(255,255,255,.2);position:relative;border-radius:2px}
.phone .bar .line::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;background:#fff;border-radius:2px}
.cover{width:230px;flex:none;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(22,22,22,.45),0 10px 24px -12px rgba(22,22,22,.25);transform:rotate(-5deg) translate(-36px,-40px);position:relative;z-index:1}
.cover img{aspect-ratio:777/1200;object-fit:cover}
.shelf .rvv{transition:transform 1.1s var(--ease),opacity .9s var(--ease)}
html.anim .shelf .phone{opacity:0;transform:translateY(40px)}
html.anim .shelf .cover{opacity:0;transform:rotate(-5deg) translate(-36px,20px)}
html.anim .shelf.in .phone{opacity:1;transform:none}
html.anim .shelf.in .cover{opacity:1;transform:rotate(-5deg) translate(-36px,-40px);transition-delay:.2s}

.close{position:relative;height:80vh;min-height:560px;max-height:860px;background:var(--ink);color:#fff;overflow:hidden}
.close .bg{position:absolute;inset:0}
.close .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 30%;opacity:.6;transition:transform 1.4s var(--ease)}
html.anim .close .bg img{transform:scale(1.08)}
html.anim .close.in .bg img{transform:scale(1)}
.close .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.2),rgba(22,22,22,.8) 100%)}
.close .stack{position:absolute;left:var(--gut);right:var(--gut);bottom:72px}
.close .line{font:400 38px/1.2 var(--serif);color:#fff;max-width:760px;margin-bottom:36px}
.close .rowx{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.close .soc{display:flex;align-items:center;gap:22px}
.close .soc a{color:#fff;font-size:18px;opacity:.9;transition:opacity .3s,transform .5s var(--ease)}
.close .soc a:hover{opacity:1;transform:translateY(-2px)}

/* ---- footer ---- */
.ft{background:var(--cream);color:var(--mute);font:400 13px/1 var(--sans);padding:36px var(--gut) 32px;display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap}
.ft .fl{margin-right:auto;line-height:0}
.ft .fl img{height:56px;width:auto;display:block}
.ft a{color:var(--mute)}
.ft a:hover{color:var(--ink)}
.ft .cmp-links{flex-basis:100%;justify-content:flex-start;padding:18px 0 0;margin-top:6px;border-top:1px solid var(--rule);font-size:13px;color:var(--mute)}
.ft .cmp-links a,.ft .cmp-links button{font-family:var(--sans);text-decoration:none;opacity:1}
.ft .cmp-links a:hover,.ft .cmp-links button:hover{color:var(--ink)}
.ft .dot::before{content:"·";padding:0 2px}

@media (prefers-reduced-motion:reduce){
  html.anim .cred .track{animation:none}
  html.anim .hero .bg img{animation:none}
  .mr span i,.ov-nav a span,.ov-nav a small,.ov-side,.ov-bg{transform:none!important;transition:none!important;opacity:1!important}
  html.anim .story-ph,html.anim .story-ph img,html.anim .story-txt,html.anim .rv,html.anim .ph img,html.anim .row-p img,html.anim .close .bg img,html.anim .shelf .phone,html.anim .shelf .cover,html.anim .lead,html.anim .hero-cta,html.anim .l1 span,html.anim .hero-name{opacity:1;transform:none;transition:none}
  html.anim .shelf .cover{transform:rotate(-5deg) translate(-36px,-40px)}
  html{scroll-behavior:auto}
}

/* ---- responsive ---- */
@media (max-width:1180px){
  :root{--gut:40px}
  .display{font-size:70px}
  .gate .cols,.gate .cols2,.media .cols{gap:56px}
  .gate h2,.media h2{font-size:46px}
  .row{padding:48px 40px;gap:40px}
  .row h3{font-size:34px}
  .row p{font-size:16px}
}
@media (max-width:980px){
  .hdr .cta{display:none}
  .hdr .menu .lab{display:none}
  .display{font-size:58px}
  .hero{min-height:640px}
  .hero-name{display:none}
  .hero-name .nm{font-size:22px}
  .hero .bg img{object-position:72% 20%}
  .hero-in{bottom:96px}
  .gate .cols,.gate .cols2,.media .cols{grid-template-columns:1fr;gap:40px}
  .gate h2{max-width:none}
  .gate .cols2 .ph{order:-1}
  .gate .ph img{aspect-ratio:4/3;object-position:50% 15%}
  .gate .cols2{margin-top:72px}
  .voices{grid-template-columns:1fr;gap:28px;margin-top:80px}
  .voices-h{position:static}
  .voices-h h2{font-size:36px}
  .voices-l p{font-size:20px}
  .voices-l .lead-q p{font-size:24px}
  .row{flex-basis:84vw;grid-template-columns:1fr;padding:32px 28px 36px;gap:24px}
  .row-p,.row.rev .row-p{order:-1}
  .row-p img{aspect-ratio:16/10}
  .keys .head{flex-direction:column;align-items:flex-start;gap:20px}
  .keys .kit{margin-left:0}
  .keys-ctl{margin-left:0;width:100%;max-width:none}
  .story{margin-top:72px}
  .story-row,.story-row--rev{grid-template-columns:1fr}
  .story-row--rev .story-ph{order:0}
  .story-ph{aspect-ratio:4/3}
  .story-txt,.story-row--rev .story-txt{padding:36px var(--gut) 48px;max-width:none;justify-self:start}
  .story-txt p:not(.story-lab){font-size:17px}
  .ov-in{grid-template-columns:1fr;align-items:start;padding-top:28px;overflow:auto}
  .ov-nav a span{font-size:36px}
  .ov-nav{gap:2px}
  .ov-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:18px}
  .ov-ph{width:96px;border-radius:10px}
  .ov-q{font-size:18px;flex:1;min-width:160px}
  .ov-soc{width:100%}
  .shelf{min-height:0;margin-top:20px;justify-content:flex-start;padding-left:40px}
}
@media (max-width:640px){
  :root{--gut:20px}
  .hdr{height:68px}
  .hdr .brand{--lh:44px}
  .ov-in{inset:68px 0 0 0}
  .display{font-size:44px}
  .hero{min-height:600px;max-height:820px}
  .hero .bg img{object-position:70% 15%}
  .hero .shade{background:linear-gradient(180deg,rgba(22,22,22,.5) 0%,rgba(22,22,22,.25) 30%,rgba(22,22,22,.55) 55%,rgba(22,22,22,.97) 100%)}
  .hero-in{bottom:84px}
  .hero-name{top:92px}
  .hero-name .nm{font-size:19px}
  .hero-name .cr{font-size:11px}
  .lead{font-size:16px}
  .gate{padding:80px 0 80px}
  .gate h2,.media h2{font-size:38px}
  .gate .body p,.gate .copy p,.media .copy p,.row p{font-size:17px}
  .practice li{font-size:21px}
  .keys{padding-bottom:80px}
  .row{flex-basis:88vw;padding:24px 18px 30px;border-radius:14px}
  .ov-nav a span{font-size:32px}
  .ov-in{padding-top:20px}
  .row h3{font-size:30px}
  .row .take{font-size:20px}
  .media{padding:80px 0}
  .media{overflow:hidden}
  .shelf{padding-left:0;max-width:100%}
  .phone{width:200px;padding:9px;border-radius:32px}
  .phone .scr{border-radius:24px;padding-top:34px}
  .phone .notch{width:64px;height:18px;top:8px}
  .phone .scr .meta{padding:16px 14px 18px}
  .phone .scr .meta p.t{font-size:20px}
  .cover{width:170px;transform:rotate(-5deg) translate(-52px,-30px)}
  html.anim .shelf .cover{transform:rotate(-5deg) translate(-52px,30px)}
  html.anim .shelf.in .cover{transform:rotate(-5deg) translate(-52px,-30px)}
  .cyc span.long{font-size:.82em;line-height:1.25}
  .close{height:auto;min-height:520px}
  .close .stack{position:static;padding:120px var(--gut) 56px}
  .close .line{font-size:28px}
  .ft{line-height:1.6;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:96px}
  .ft .cmp-links{padding-right:72px}
  .ft .fl img{height:46px}
}
@media (max-width:400px){
  .display{font-size:38px}
  .cyc span.long{font-size:.74em;line-height:1.38}
  .phone{width:160px;padding:8px}
  .cover{width:136px;transform:rotate(-5deg) translate(-60px,-24px)}
  html.anim .shelf .cover{transform:rotate(-5deg) translate(-60px,30px)}
  html.anim .shelf.in .cover{transform:rotate(-5deg) translate(-60px,-24px)}
}
.s-04a670{object-position:62% 30%}
.s-241e5e{object-position:50% 18%}
.s-2b1d74{object-position:50% 22%}

/* 404 */
body.nf{background:#03030f;color:#fff;min-height:100vh;display:grid;place-items:center;padding:24px}
.nf-in{max-width:560px;text-align:center}
.nf-k{font:400 13px/1 "Outfit",sans-serif;color:rgba(255,255,255,.5);margin-bottom:18px}
.nf-in h1{font:400 48px/1.1 "Sorts Mill Goudy",serif;margin-bottom:14px}
.nf-in p{font:400 17px/1.6 "Outfit",sans-serif;color:rgba(255,255,255,.8);margin-bottom:28px}