/* Traq Collective. Two moods, one brand: night for the openings, daylight for the reading, dawn in between.
   Brand purple carries every action. Dawn gold only ever appears as light. Shared by every page. */
:root{
  --night:#050309;--violet:#5B3FE4;--violet-ink:#4A30C9;--glow:#8C76FF;--gold:#F2C27B;
  --paper:#FAFAFA;--white:#FFFFFF;--ink:#141414;--ink-soft:#4F4D58;--ink-faint:#6B6975;--line:#E7E5EE;--tint:#F3F0FF;
  --text:#EDEBF5;--muted:rgba(237,235,245,.74);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:max(20px,5vw);--max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.in{max-width:var(--max);margin:0 auto}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(34px,4.4vw,60px);line-height:1.08}
h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-soft);max-width:36em;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--violet);color:#fff;font-size:15px;font-weight:500;padding:14px 24px;border-radius:12px;border:0;cursor:pointer;font-family:var(--sans);box-shadow:0 10px 30px rgba(91,63,228,.3);transition:background .25s,transform .1s}
.btn:hover{background:var(--violet-ink)}
.btn:active,.nav-btn:active,.ghost:active,.menu-btn:active{transform:scale(.97)}
.link{font-size:15px;font-weight:600;color:var(--violet);border-bottom:1px solid rgba(91,63,228,.3);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--violet)}
.ghost{font-size:15px;color:var(--text);border-bottom:1px solid rgba(237,235,245,.35);padding-bottom:2px}
.ghost:hover{border-color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- header: white wordmark over night, a light bar over daylight ---- */
/* the header: a floating pill bar, as on the old site. A soft light sits over the current page's item and glides to
   whichever item the pointer is on. Over the night sections it is dark glass, over daylight it is frosted white. */
.nav{position:fixed;left:0;right:0;top:14px;z-index:40;padding:0 max(12px,calc(var(--gut) - 22px));pointer-events:none}
.nav .bar{pointer-events:auto;max-width:calc(var(--max) + 44px);margin:0 auto;height:60px;padding:0 10px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:999px;border:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s}
.nav.lifted .bar{background:rgba(14,10,22,.72);border-color:rgba(255,255,255,.09)}
.nav .mark{display:block;height:22px;width:auto}
.nav .mark.dk{display:none}
.nav .links{position:relative;display:flex;align-items:center;gap:2px;list-style:none;font-size:14px;font-weight:500;color:var(--text)}
.nav .pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:9px 16px;border-radius:999px;opacity:.84;transition:opacity .2s,color .2s}
.nav .pill:hover,.nav .pill.on{opacity:1}
.nav .chev{width:12px;height:12px;transition:transform .25s}
.nav .dd.open .chev{transform:rotate(180deg)}
.nav .lamp-li{position:absolute;inset:0;pointer-events:none}
.nav .lamp{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:rgba(255,255,255,.07);opacity:0;transition:transform .42s cubic-bezier(.3,1.25,.5,1),width .42s cubic-bezier(.3,1.25,.5,1),opacity .3s}
.nav .lamp.lit{opacity:1}
.nav .lamp i{position:absolute;left:50%;top:-11px;width:30px;height:3px;margin-left:-15px;border-radius:0 0 3px 3px;background:var(--glow);box-shadow:0 0 10px 2px rgba(140,118,255,.75),0 6px 18px 6px rgba(140,118,255,.32)}
.nav .end{display:flex;align-items:center;gap:10px}
.nav-btn{display:inline-flex;align-items:center;font-size:14px;font-weight:500;padding:10px 18px;border-radius:999px;border:1px solid rgba(242,194,123,.45);background:rgba(242,194,123,.1);color:var(--text);transition:background .3s,transform .1s,border-color .3s}
.nav-btn:hover{background:rgba(242,194,123,.2)}
.menu-btn{display:none;appearance:none;background:none;border:0;color:var(--text);font:500 14px var(--sans);padding:8px 10px;cursor:pointer}
/* the Services menu: opens on hover or focus, under its pill */
.nav .dd{position:relative}
.nav .menu{position:absolute;left:50%;top:100%;width:340px;margin-left:-170px;padding-top:14px;opacity:0;visibility:hidden;transform:translate3d(0,-6px,0) scale(.97);transform-origin:50% 0;transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .18s}
.nav .dd.open .menu{opacity:1;visibility:visible;transform:none}
.nav .menu::before{content:"";position:absolute;left:14px;right:14px;top:14px;bottom:0;border-radius:20px;background:rgba(255,255,255,.97);border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,12,40,.18)}
.nav .menu::after{content:"";position:absolute;left:50%;top:14px;width:40px;height:3px;margin-left:-20px;border-radius:0 0 3px 3px;background:var(--violet)}
.nav .menu a{position:relative;display:block;margin:0 22px;padding:12px 14px;border-radius:12px;color:var(--ink);transition:background .2s}
.nav .menu a:first-child{margin-top:8px}.nav .menu a:last-child{margin-bottom:8px}
.nav .menu a:hover,.nav .menu a:focus-visible{background:var(--tint)}
.nav .menu b{display:block;font-weight:600;font-size:14px}
.nav .menu a:hover b{color:var(--violet)}
.nav .menu span{display:block;margin-top:2px;font-size:13px;color:var(--ink-faint);font-weight:400}
.nav.day .bar{background:rgba(255,255,255,.86);border-color:var(--line);box-shadow:0 10px 34px rgba(20,12,40,.08);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.nav.day .mark.lt{display:none}.nav.day .mark.dk{display:block}
.nav.day .links,.nav.day .menu-btn{color:var(--ink)}
.nav.day .pill:hover,.nav.day .pill.on{color:var(--violet)}
.nav.day .lamp{background:rgba(91,63,228,.07)}
.nav.day .lamp i{background:var(--violet);box-shadow:0 0 10px 2px rgba(91,63,228,.45),0 6px 18px 6px rgba(91,63,228,.18)}
.nav.day .nav-btn{background:var(--violet);border-color:var(--violet);color:#fff}
.nav.day .nav-btn:hover{background:var(--violet-ink)}
.sheet{position:fixed;inset:0;z-index:39;background:var(--night);color:var(--text);padding:100px var(--gut) 40px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.sheet.open{opacity:1;visibility:visible}
.sheet>a:not(.btn){font-family:var(--serif);font-size:32px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sheet .grp{padding:12px 0 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
.sheet .gh{font-family:var(--serif);font-size:32px;padding-bottom:6px}
.sheet .grp a{font-size:17px;padding:7px 0 7px 16px;color:var(--muted);border-left:1px solid rgba(140,118,255,.35)}
.sheet .btn{margin-top:28px;align-self:flex-start}

/* ---- page openings: a still from the film, drifting slowly, then daybreak into the page ---- */
.phero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;background:var(--night);color:var(--text);overflow:hidden;padding:140px var(--gut) 110px}
.phero .bg{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:.9;animation:drift 38s ease-in-out infinite alternate}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,9,.55) 0%,rgba(5,3,9,.2) 40%,rgba(5,3,9,.78) 82%,var(--night) 100%)}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-1%,0)}}
.phero .c{position:relative;z-index:1;max-width:var(--max);margin:0 auto;width:100%}
.phero .crumb{font-size:14px;font-weight:500;color:var(--gold)}
.phero h1{margin-top:16px;font-size:clamp(46px,7vw,108px);line-height:1;letter-spacing:-.03em;max-width:11em;text-shadow:0 2px 40px rgba(5,3,9,.7)}
.phero p{margin-top:26px;max-width:34em;font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:rgba(237,235,245,.88);text-shadow:0 1px 18px rgba(5,3,9,.9)}
.phero .cta{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.phero.short{min-height:min(70vh,640px)}
.dawn{height:clamp(140px,22vh,260px);background:linear-gradient(180deg,var(--night) 0%,#241838 34%,#7A5A6E 62%,#E8CDB8 84%,var(--paper) 100%)}

section.s{padding:130px var(--gut)}
section.s.tight{padding-top:40px}
section.white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:44em}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}

/* ---- the problem ---- */
.problem{position:relative;background:linear-gradient(180deg,var(--night) 0%,#0C0818 30%,#241838 52%,#7A5A6E 70%,#E8CDB8 86%,var(--paper) 100%);color:var(--text);padding:150px var(--gut) 180px;text-align:center}
.problem h2{max-width:14em;margin:0 auto;font-size:clamp(36px,5vw,72px)}
.problem .pts{max-width:var(--max);margin:76px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left}
.problem .pts p{border-top:1px solid rgba(242,194,123,.45);padding-top:20px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:rgba(237,235,245,.9)}
.problem .after{margin:120px auto 0;max-width:30em;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.35;color:var(--ink);text-wrap:balance}

/* ---- the two doors, without pictures: one night, one day ---- */
.doors{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;margin-top:64px}
.door{position:relative;display:flex;flex-direction:column;gap:16px;min-height:440px;padding:44px 42px 42px;border-radius:26px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.door:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(20,12,40,.12)}
.door .kicker{font-size:14px;font-weight:500}
.door h3{font-size:clamp(30px,2.8vw,44px);line-height:1.06}
.door p{max-width:28em}
.door .go{margin-top:auto;font-size:15px;font-weight:600}
.door.night{background:radial-gradient(120% 90% at 85% 100%,#2A1C46 0%,#0C0818 55%,var(--night) 100%);color:var(--text)}
.door.night .kicker{color:var(--gold)}
.door.night p{color:rgba(237,235,245,.8)}
.door.night .go{color:var(--gold)}
.door.night::before{content:"";position:absolute;left:-10%;right:-10%;top:62%;height:2px;background:linear-gradient(90deg,transparent,rgba(242,194,123,.15) 20%,var(--gold) 70%,rgba(255,240,215,.95) 78%,transparent);box-shadow:0 0 22px rgba(242,194,123,.55);transform:rotate(-4deg)}
.door.day{background:var(--white);border:1px solid var(--line)}
.door.day .kicker{color:var(--violet)}
.door.day p{color:var(--ink-soft)}
.door.day .go{color:var(--violet)}
.door .tags{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-faint)}

/* ---- the Transformation in one row ---- */
.path{position:relative;margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.path::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--violet),var(--gold))}
.step{position:relative;padding-top:40px}
.step::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--violet)}
.step:last-child::before{border-color:var(--gold);background:var(--gold);box-shadow:0 0 18px rgba(242,194,123,.8)}
.step .n{font-family:var(--serif);font-size:20px;color:var(--violet)}
.step h3{margin-top:6px;font-size:clamp(24px,2.1vw,30px);line-height:1.12}
.step p{margin-top:12px;color:var(--ink-soft);font-size:16px}
.step .hold{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:15px}
.step .hold span{display:block;font-size:13px;font-weight:600;color:var(--violet)}
.path-foot{margin-top:64px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* ---- a Monday, before and after ---- */
.monday{position:relative;margin-top:56px;border-radius:28px;overflow:hidden;min-height:560px;background:var(--night);color:var(--text)}
.monday canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.monday .ui{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;padding:48px 52px 52px;min-height:560px}
.monday .lead h3{font-size:clamp(30px,3vw,44px);line-height:1.08;max-width:9em}
.monday .lead p{margin-top:16px;color:rgba(237,235,245,.82);max-width:22em}
.toggle{margin-top:30px;display:inline-flex;padding:5px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.toggle button{appearance:none;border:0;background:transparent;color:var(--text);font:500 14px var(--sans);padding:10px 18px;border-radius:10px;cursor:pointer;transition:background .3s,color .3s}
.toggle button[aria-pressed="true"]{background:var(--text);color:var(--night)}
.times{display:grid;align-content:center;gap:4px}
.t{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.t:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.t time{font-variant-numeric:tabular-nums;font-size:15px;color:rgba(237,235,245,.6);padding-top:4px}
.t .sw{position:relative;min-height:3.2em}
.t .sw span{position:absolute;inset:0;font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.3;transition:opacity .6s,transform .6s,filter .6s}
.t .sw .a{opacity:0;transform:translateY(8px);filter:blur(4px)}
.monday.calm .t .sw .b{opacity:0;transform:translateY(-8px);filter:blur(4px)}
.monday.calm .t .sw .a{opacity:1;transform:none;filter:none}
.monday.calm .t time{color:var(--gold)}

/* ---- founder, principles, questions ---- */
.founder .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:center}
.founder .ph{border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(20,12,40,.14)}
.founder .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.founder blockquote{font-family:var(--serif);font-size:clamp(22px,2.1vw,31px);line-height:1.28;letter-spacing:-.01em;margin-top:28px}
.founder .who{margin-top:28px;font-size:15px;color:var(--ink-faint)}
.founder .who b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.founder .link{display:inline-block;margin-top:28px}
.ways4{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.ways4 div{border-top:2px solid var(--violet);padding-top:22px}
.ways4 h3{font-size:24px;line-height:1.2}
.ways4 p{margin-top:12px;color:var(--ink-soft);font-size:16px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;font-size:clamp(18px,1.5vw,20px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:1.5px;background:var(--violet);transition:transform .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 40px 26px 0;color:var(--ink-soft);max-width:40em}

/* ---- Transformation page: the chapters in full ---- */
.chap{display:grid;grid-template-columns:220px 1fr;gap:clamp(30px,5vw,80px);padding:64px 0;border-top:1px solid var(--line)}
.chap:last-child{border-bottom:1px solid var(--line)}
.chap .side{position:sticky;top:110px;align-self:start}
.chap .side .n{font-family:var(--serif);font-size:72px;line-height:1;color:var(--violet);letter-spacing:-.03em}
.chap .side .light{margin-top:16px;height:2px;width:100%;background:linear-gradient(90deg,var(--violet),var(--gold));transform-origin:0 50%}
.chap h3{font-size:clamp(32px,3.2vw,46px);line-height:1.06}
.chap .body{margin-top:18px;color:var(--ink-soft);max-width:36em;font-size:18px}
.chap .cols{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.chap .cols h4{font-size:14px;font-weight:600;color:var(--ink)}
.chap .cols ul{margin-top:12px;list-style:none;display:grid;gap:10px;color:var(--ink-soft);font-size:16px}
.chap .cols li{padding-left:18px;position:relative}
.chap .cols li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--violet)}
.holdcard{margin-top:34px;padding:24px 28px;border-radius:18px;background:var(--tint);border:1px solid rgba(91,63,228,.14);color:var(--ink);display:flex;gap:20px;align-items:flex-start;max-width:40em}
.holdcard i{flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 5px rgba(91,63,228,.12)}
.holdcard span{display:block;font-size:13px;font-weight:600;color:var(--violet)}
.holdcard b{display:block;margin-top:4px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3}
.fit{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.fit p{font-family:var(--serif);font-size:clamp(20px,1.8vw,25px);line-height:1.3;border-top:2px solid var(--violet);padding-top:20px}
.isnt{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.isnt div{padding:28px;border-radius:20px;background:var(--white);border:1px solid var(--line)}
.isnt h3{font-size:24px}
.isnt p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.band{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:40px 44px;border-radius:24px;background:var(--tint)}
.band p.big{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);line-height:1.2;max-width:20em}
.band p.small{margin-top:10px;color:var(--ink-soft);max-width:36em}

/* ---- Training page ---- */
.tracks{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.track{display:flex;flex-direction:column;padding:32px 30px 30px;border-radius:22px;background:var(--white);border:1px solid var(--line)}
.track .lv{font-size:13px;font-weight:600;color:var(--violet)}
.track h3{margin-top:10px;font-size:27px;line-height:1.12}
.track .who{margin-top:10px;font-size:14px;color:var(--ink-faint)}
.track p.sum{margin-top:16px;color:var(--ink-soft);font-size:16px}
.track .out{margin-top:auto;padding-top:20px}
.track .out div{padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.track .out span{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.track .fmt{margin-top:14px;font-size:14px;color:var(--ink-faint)}
.track.lead{border-color:rgba(91,63,228,.28);box-shadow:inset 0 3px 0 var(--violet)}
.track .lv{display:flex;align-items:center;gap:10px}
.track .lv .tl{width:26px;height:26px;flex:none}
.track.own{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;background:var(--tint);border:1px dashed rgba(91,63,228,.35)}
.track.own p.sum{max-width:44em}
.track.own .btn{flex:none}
.pillars{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillars>div{padding:30px 28px;border-radius:22px;background:var(--white);border:1px solid var(--line)}
.pillars .pn{font-family:var(--serif);font-size:20px;color:var(--violet)}
.pillars h3{margin-top:10px;font-size:25px;line-height:1.15}
.pillars p{margin-top:12px;color:var(--ink-soft);font-size:16px}
.toolstrip{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.toolstrip .tk{font-size:14px;font-weight:600;color:var(--ink);margin-right:8px}
.toolstrip .tool{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 11px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:15px;font-weight:500}
.toolstrip .tl{width:24px;height:24px}
.bands{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.bands>div{border-top:2px solid var(--violet);padding-top:22px}
.bands h3{font-size:26px}
.bands .w{margin-top:4px;font-size:14px;color:var(--ink-faint)}
.bands p{margin-top:14px;color:var(--ink-soft);font-size:16px}
.phases{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.phases::before{content:"";position:absolute;left:30px;right:30px;top:30px;height:1px;background:linear-gradient(90deg,var(--violet),rgba(91,63,228,.15))}
.phases>div{position:relative;padding:62px 30px 32px;border-radius:22px;background:var(--paper);border:1px solid var(--line)}
.phases>div::before{content:"";position:absolute;left:24px;top:24px;width:13px;height:13px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 6px var(--tint)}
.phases .n{font-size:13px;font-weight:600;color:var(--violet);letter-spacing:.01em}
.phases h3{margin-top:8px;font-size:26px;line-height:1.15}
.phases p{margin-top:14px;color:var(--ink-soft);font-size:16px}
.formats{margin-top:48px;width:100%;border-collapse:collapse;font-size:16px}
.formats th{text-align:left;font-size:13px;font-weight:600;color:var(--ink-faint);padding:0 16px 14px 0}
.formats td{padding:22px 16px 22px 0;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.formats td:first-child{font-family:var(--serif);font-size:24px;color:var(--ink);white-space:nowrap}
.tools{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:20px;background:var(--white);border:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tcard:hover{transform:translate3d(0,-3px,0);box-shadow:0 16px 40px rgba(20,12,40,.08)}
.tcard img{width:44px;height:44px;flex:none}
.tcard b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15}

/* ---- About page ---- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,110px);align-items:start}
.story .ph{position:sticky;top:110px;border-radius:24px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(20,12,40,.14)}
.story .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.story .tx p{font-size:19px;color:var(--ink-soft);margin-top:22px;max-width:34em}
.story .tx p.first{font-family:var(--serif);font-size:clamp(24px,2.3vw,32px);line-height:1.3;color:var(--ink);margin-top:0}
.story .fnote{margin-top:34px;padding:26px 28px;border-radius:20px;background:var(--tint);border:1px solid rgba(91,63,228,.14);max-width:36em}
.story .fnote .fk{display:block;font-size:13px;font-weight:600;color:var(--violet)}
.story .fnote p{margin-top:10px;font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.4;color:var(--ink)}
.story .fnote .fn{display:block;margin-top:14px;font-size:14px;color:var(--ink-faint)}

/* ---- Book a call ---- */
.book{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:start}
.steps3{margin-top:36px;display:grid;gap:0}
.steps3>div{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.steps3>div:last-child{border-bottom:1px solid var(--line)}
.steps3 .n{font-family:var(--serif);font-size:28px;color:var(--violet);line-height:1}
.steps3 h3{font-size:24px;line-height:1.15}
.steps3 p{margin-top:6px;color:var(--ink-soft);font-size:16px}
.form{padding:40px 38px;border-radius:26px;background:var(--white);border:1px solid var(--line);box-shadow:0 30px 80px rgba(20,12,40,.08)}
.form h3{font-size:30px}
.form label{display:block;margin-top:20px;font-size:14px;font-weight:500}
.form input,.form textarea,.form select{display:block;width:100%;margin-top:8px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font:16px var(--sans);color:var(--ink);transition:border-color .2s,background .2s}
.form input:focus,.form textarea:focus{border-color:var(--violet);background:var(--white);outline:none}
.form textarea{min-height:110px;resize:vertical}
.form fieldset{border:0;margin-top:22px}
.form legend{font-size:14px;font-weight:500}
.choice{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choice label{margin:0;position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:block;text-align:center;padding:12px 8px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-size:14px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.choice input:checked+span{border-color:var(--violet);background:var(--tint);color:var(--violet-ink);font-weight:600}
.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.form .btn{margin-top:28px;width:100%;justify-content:center}
.form .alt{margin-top:16px;font-size:14px;color:var(--ink-faint);text-align:center}
.form .done{display:none;text-align:center;padding:40px 10px}
.form.sent .fields{display:none}.form.sent .done{display:block}
.form .done i{display:block;width:14px;height:14px;margin:0 auto 22px;border-radius:50%;background:var(--gold);box-shadow:0 0 22px var(--gold)}
.form .done h3{font-size:32px}
.form .done p{margin-top:12px;color:var(--ink-soft)}

/* ---- the closing call and the footer, the same on every page ---- */
.final{position:relative;overflow:hidden;background:var(--night);color:var(--text);text-align:center;padding:170px var(--gut)}
.final .bg{position:absolute;inset:0;background:url(img/dawn.webp) center 60%/cover no-repeat;opacity:.85}
.final .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,9,.75),rgba(5,3,9,.25) 45%,rgba(5,3,9,.8))}
.final .c{position:relative;max-width:46em;margin:0 auto}
.final h2{font-size:clamp(40px,5.4vw,80px)}
.final p{margin:24px auto 0;max-width:32em;color:rgba(237,235,245,.86);font-size:clamp(17px,1.4vw,20px)}
.final .cta{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:38px;flex-wrap:wrap}
footer{background:var(--night);color:var(--muted);padding:80px var(--gut) 44px;font-size:15px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .mark{height:26px;width:auto}
footer .top p{margin-top:20px;max-width:24em}
footer h4{font-size:13px;font-weight:600;color:var(--text);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer a:hover{color:var(--text)}
footer .bot{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:13px}

.proto{position:fixed;left:16px;bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:12px;
  background:rgba(16,13,24,.84);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:var(--text)}
.proto a{padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.09)}

@media (max-width:1000px){
  .path{grid-template-columns:1fr 1fr;row-gap:44px}
  .path::before{display:none}
  .tracks{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav .links li.hide{display:none}.nav .lamp-li{display:none}
  .menu-btn{display:block}
  .doors,.founder .grid,.split,.story,.book,.monday .ui{grid-template-columns:1fr}
  .problem .pts,.fit,.isnt,.bands,.phases{grid-template-columns:1fr}
  .phases::before{left:30px;right:auto;top:30px;bottom:30px;width:1px;height:auto;background:linear-gradient(180deg,var(--violet),rgba(91,63,228,.15))}
  .pillars,.tools{grid-template-columns:1fr 1fr}
  .track.own{flex-direction:column;align-items:flex-start}
  .ways4{grid-template-columns:1fr 1fr}
  .chap{grid-template-columns:1fr}
  .chap .side{position:static}
  .chap .side .light{width:120px}
  .story .ph{position:static;max-width:420px}
  footer .top{grid-template-columns:1fr 1fr}
  footer .top>div:first-child{grid-column:1/-1}
  .band{flex-direction:column;align-items:flex-start}
  .monday .ui{padding:36px 28px}
}
@media (max-width:639px){
  body{font-size:16px}
  .nav{top:10px}.nav .bar{height:54px;padding:0 6px 0 18px}.nav .mark{height:19px}
  .nav .nav-btn{padding:9px 14px}
  section.s{padding:90px var(--gut)}
  .problem{padding:110px var(--gut) 130px}
  .problem .after{margin-top:80px}
  .path,.tracks,.ways4,.chap .cols,.pillars,.tools{grid-template-columns:1fr}
  .door{padding:34px 26px 30px;min-height:380px}
  .final{padding:120px var(--gut)}
  footer .bot{flex-direction:column}
  .phero{padding:120px var(--gut) 80px}
  .formats thead{display:none}
  .formats tr{display:block;border-top:1px solid var(--line);padding:18px 0}
  .formats td{display:block;border:0;padding:4px 0}
  .choice{grid-template-columns:1fr}
  .form{padding:30px 22px}
  .t{grid-template-columns:58px 1fr}
  .t .sw{min-height:4.2em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phero .bg{animation:none}.door,.door:hover{transition:none;transform:none}.t .sw span{transition:none}}

/* ---- arrivals: each page comes up out of the night, and its opening words rise into place ---- */
.veil{position:fixed;inset:0;z-index:100;background:var(--night);pointer-events:none;opacity:1;transition:opacity .5s ease}
.veil.gone{opacity:0}
.veil.leave{opacity:1;transition:opacity .22s ease}
[data-rise] .w{display:inline-block;opacity:0;transform:translate3d(0,.32em,0);filter:blur(10px);transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1),filter 1s ease}
.lift{opacity:0;transform:translate3d(0,16px,0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.shown [data-rise] .w,.shown[data-rise] .w,.shown .lift,.shown.lift{opacity:1;transform:none;filter:none}
/* the page openings play a few seconds of the film, then rest on its last frame */
.phero .media{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;transform:scale(1.06);animation:settle 9s cubic-bezier(.2,.7,.2,1) forwards}
.phero .media.on{opacity:.95}
.phero .media video,.phero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes settle{to{transform:scale(1)}}
/* on wide screens the Transformation and Training films sit to the right and fade into the night, so the words stand on clean dark */
@media (min-width:900px){.phero .media.side{left:auto;width:74%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}}

/* ---- contact: the inquiry form beside the direct lines and what happens next; stacked on narrow screens ---- */
.contact{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start}
.contact .form h2{font-size:clamp(30px,3vw,40px)}
.contact .intro{margin-top:8px;color:var(--ink-soft);font-size:16px}
.form .pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form select:invalid{color:var(--ink-faint)}
.form select:focus{border-color:var(--violet);background-color:var(--white);outline:none}
.form textarea{min-height:150px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .alt.err{color:#B4232F}
.form .done p{max-width:30em;margin-left:auto;margin-right:auto;line-height:1.6}
.direct{padding-top:6px}
.direct h3{font-size:26px}
.direct ul{list-style:none;margin-top:14px}
.direct ul li{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:17px}
.direct ul li:last-child{border-bottom:1px solid var(--line)}
.direct span{color:var(--ink-faint)}
.direct a{color:var(--violet);font-weight:500;word-break:break-word}
.direct .next-h{margin-top:48px}
.next{list-style:none;counter-reset:n;margin-top:16px}
.next li{counter-increment:n;position:relative;padding:0 0 22px 46px;color:var(--ink-soft);font-size:16px;line-height:1.55}
.next li::before{content:counter(n);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:500 14px var(--sans);color:var(--violet-ink);background:var(--tint)}
.next b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media (max-width:899px){.contact{grid-template-columns:1fr}.form .pair{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.veil{display:none}[data-rise] .w,.lift{opacity:1;transform:none;filter:none;transition:none}.phero .media{animation:none;transform:none;transition:none}}

/* ---- things arrive as they scroll into view (site.js adds .seen); each can carry a small delay, --d ---- */
.rvon .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s ease var(--d,0s),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rvon .rv.seen{opacity:1;transform:none}
.rvon .chap .side .light{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1) .25s}
.rvon .chap.seen .side .light{transform:none}
@media (prefers-reduced-motion:reduce){.rvon .rv,.rvon .chap .side .light{opacity:1;transform:none;transition:none}}

/* ad landing pages: the inquiry form beside a 20-minute call booked straight into the calendar */
.cal{padding:34px 30px 0;border-radius:26px;background:var(--white);border:1px solid var(--line);box-shadow:0 30px 80px rgba(20,12,40,.08);overflow:hidden}
.cal h3{font-size:clamp(26px,2.4vw,32px)}
.cal .intro{margin-top:8px;color:var(--ink-soft);font-size:16px}
.cal .slot{height:700px;margin:14px -30px 0}
.cal .slot iframe{width:100%;height:100%;border:0}
.cal .fallback{display:block;padding:24px 0 30px;font-size:15px}
.cal.on .fallback{display:none}
@media (max-width:899px){.cal{padding:28px 20px 0}.cal .slot{height:1040px;margin:14px -20px 0}}

/* ---- ad landing pages: one measured client result above the booking section, the founder beside the calendar ---- */
.proof .kicker{font-size:13px;font-weight:600;color:var(--violet);margin-bottom:14px}
.proof .stats{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.proof .stats>div{border-top:2px solid var(--violet);padding-top:22px}
.proof .stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.02em}
.proof .stats span{display:block;margin-top:14px;color:var(--ink-soft);font-size:16px;max-width:20em}
.proof .note{margin-top:40px;font-size:14px;color:var(--ink-faint);max-width:44em}
.cal{scroll-margin-top:90px}
.cal .by{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:14px;line-height:1.45;color:var(--ink-faint)}
.cal .by img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 25%}
.cal .by b{display:block;color:var(--ink);font-weight:600;font-size:15px}
@media (max-width:639px){.proof .stats{grid-template-columns:1fr;gap:28px}}