/* ===== DR. TANJI — shared design system ===== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root{
  --bg:#050506;--bg2:#0a0a0f;--ink:#EDEBE6;--muted:#bab8b2;--dim:#6f6e69;
  --accent:#7fe9ff;--accent-d:#2bb7d6;--gold:#d8b878;--line:rgba(237,235,230,.09);
  --serif:"Fraunces",Georgia,serif;--display:"Syne","Inter",sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"Space Grotesk",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}
::selection{background:var(--accent);color:#04121a}
a{color:inherit}
img{display:block;max-width:100%}

/* overlays */
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.04;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}
.vignette{position:fixed;inset:0;z-index:79;pointer-events:none;background:radial-gradient(ellipse at center,transparent 44%,rgba(0,0,0,.58))}
.cur{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--accent);z-index:200;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference}
.curR{position:fixed;width:38px;height:38px;border:1px solid rgba(127,233,255,.4);border-radius:50%;z-index:199;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s,background .3s}
.curR.hot{width:70px;height:70px;border-color:var(--accent);background:rgba(127,233,255,.05)}
@media(pointer:coarse){body{cursor:auto}.cur,.curR{display:none}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:201;background:linear-gradient(90deg,var(--accent-d),var(--accent),var(--gold))}

/* nav */
nav{position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;font-family:var(--mono);color:#EDEBE6;background:linear-gradient(180deg,rgba(5,5,6,.7),transparent);backdrop-filter:blur(2px)}
nav .brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
nav .brand-ico{height:48px;width:auto;flex:0 0 auto}
nav .brand-word{height:10px;width:auto;flex:0 0 auto}
nav .brand-mark{position:relative;display:inline-block;line-height:0;perspective:620px;animation:ktRise 1s cubic-bezier(.16,1,.3,1) both}
nav .brand-shine{display:none}
nav .brand-ico{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .5s;animation:ktFlip 4.6s cubic-bezier(.62,0,.2,1) 1.4s infinite}
nav .brand:hover .brand-ico{animation:none;transform:rotateY(360deg) scale(1.08);filter:none}
@keyframes ktRise{0%{clip-path:inset(100% 0 0 0);opacity:0;transform:translateY(4px)}100%{clip-path:inset(0 0 0 0);opacity:1;transform:none}}
@keyframes ktFlip{0%,48%{transform:rotateY(0deg);filter:drop-shadow(0 0 0 rgba(127,233,255,0))}64%{transform:rotateY(180deg);filter:none}80%,100%{transform:rotateY(360deg);filter:drop-shadow(0 0 0 rgba(127,233,255,0))}}
@media(prefers-reduced-motion:reduce){nav .brand-ico,nav .brand-mark{animation:none!important}}
footer .footlogo,footer .flogo{transition:filter .5s,transform .6s cubic-bezier(.16,1,.3,1);animation:ktFlipLogo 6s cubic-bezier(.62,0,.2,1) 2.2s infinite;transform-origin:center;backface-visibility:visible}
footer .footlogo:hover,footer .flogo:hover{animation:none;transform:perspective(1000px) rotateY(360deg) scale(1.04);filter:none}
@keyframes ktFlipLogo{0%,50%{transform:perspective(1000px) rotateY(0deg);filter:drop-shadow(0 0 0 rgba(127,233,255,0))}66%{transform:perspective(1000px) rotateY(180deg);filter:none}82%,100%{transform:perspective(1000px) rotateY(360deg);filter:drop-shadow(0 0 0 rgba(127,233,255,0))}}
@media(prefers-reduced-motion:reduce){footer .footlogo,footer .flogo{animation:none!important}}
/* --- no mid-word breaks; balanced centered headings --- */
h1,h2,h3,h4,h5,p,li,.big,.txt,.sub,.lead,.node,.marq span,.step h3,.step p,.pitem h4,.pitem p,.faq h4,.faq p,.wcard h3,.wcard p{word-break:normal;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none}
.big{text-wrap:pretty}
/* center helpers */
.ctr{max-width:900px;margin:0 auto;text-align:center}
.ctr .ey{justify-content:center}
.ctr .txt{margin-left:auto;margin-right:auto}
/* ANTIBREAK */
.big,.phero h1,.epic h2,#final h2,.step h3,.pitem h4,.faq h4,.wcard h3,.lead,.txt,.sub,p{overflow-wrap:normal!important;word-break:keep-all!important;-webkit-hyphens:none!important;hyphens:none!important;text-wrap:pretty}
/* shared: numbered principle list + FAQ (centered blocks) */
.plist{max-width:1080px;margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.pitem{background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:14px;display:flex;gap:16px;align-items:flex-start;padding:18px 24px;transition:all .5s}
.pitem:hover{background:#0b0b12;border-color:rgba(127,233,255,.3)}
.pitem .pn{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);padding-top:4px;flex:0 0 auto}
.pitem h4{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.12;margin-bottom:6px}
.pitem p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:none}
.plist .pitem:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 7px);margin-left:auto;margin-right:auto}
@media(max-width:760px){.plist{grid-template-columns:1fr}.plist .pitem:last-child:nth-child(odd){max-width:none}}
.faqs{max-width:820px;margin:46px auto 0;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:left}
.faq{background:var(--bg);padding:28px 32px;transition:background .5s}
.faq:hover{background:#0b0b12}
.faq h4{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);margin-bottom:9px}
.faq h4 span{color:var(--accent);font-family:var(--mono);font-size:13px;margin-right:12px}
.faq p{color:var(--muted);line-height:1.7;font-size:1rem}
.shot.ctrshot{max-width:640px;margin:44px auto 0}



nav .links{display:flex;gap:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
nav .links a{text-decoration:none;color:#fff;opacity:.62;transition:opacity .3s;display:inline-block}
nav .links a:hover,nav .links a.active{opacity:1}
nav .links a.active{color:var(--accent)}
@media(max-width:820px){nav .links{gap:16px;font-size:10px}}
@media(max-width:560px){nav .links a:not(.cta-link){display:none}}

/* type + layout */
.wrap{max-width:1180px;margin:0 auto}
section{position:relative;z-index:5}
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:14px;margin-bottom:28px}
.ey::before{content:"";width:38px;height:1px;background:var(--accent)}
.big{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.14;letter-spacing:-.005em}
.big em,.big .hl{font-family:var(--serif);font-style:italic;font-weight:400}
.big em{color:var(--gold)}.big .hl{color:var(--accent)}
.txt{font-size:clamp(1.04rem,1.4vw,1.24rem);color:var(--muted);line-height:1.85}
.txt strong{color:var(--ink);font-weight:500}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.25;color:var(--ink)}
.lead em{font-style:italic;color:var(--gold)}

/* page hero */
.phero{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:15vh 6vw 10vh}
.phero .bg{position:absolute;inset:-6% 0;z-index:0;background-size:cover;background-position:center;will-change:transform}
.phero .scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 30% 50%,rgba(5,5,6,.55),rgba(5,5,6,.88))}
.phero .in{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;text-align:center}
.phero .in .ey{justify-content:center}
.phero .in .sub{margin-left:auto;margin-right:auto}
.phero h1{font-family:var(--serif);font-weight:400;text-transform:none;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.01em;max-width:none;margin-left:auto;margin-right:auto}
.phero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--gold)}
.phero .sub{margin:26px auto 0;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}

/* reveal + kinetic */
.reveal{opacity:0;transform:translateY(42px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.ch{display:inline-block;font-size:inherit;vertical-align:baseline;letter-spacing:inherit;transition:text-shadow .25s ease}
/* ===== per-page heading intro (plays once when a section becomes active) ===== */
@keyframes readsweep{0%{filter:none}40%{filter:drop-shadow(0 0 11px rgba(127,233,255,.8)) drop-shadow(0 0 4px rgba(255,255,255,.5))}100%{filter:none}}
@keyframes hrise{0%{opacity:0;transform:translateY(.55em)}100%{opacity:1;transform:none}}
@keyframes hblur{0%{opacity:0;filter:blur(10px)}60%{opacity:1}100%{opacity:1;filter:blur(0)}}
@keyframes htype{0%{opacity:0}100%{opacity:1}}
@keyframes hdrop{0%{opacity:0;transform:translateY(-.4em) scale(1.18)}100%{opacity:1;transform:none}}
@keyframes hslide{0%{opacity:0;transform:translateX(-.5em)}100%{opacity:1;transform:none}}
/* ===== the last (key) word keeps glowing — blue or gold, gently breathing ===== */
body{--lg:.35s}
body[data-head="sweep"] .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:hrise .6s cubic-bezier(.16,1,.3,1) var(--d,0s) 1 both}
body[data-head="rise"]  .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:hrise .6s cubic-bezier(.16,1,.3,1) var(--d,0s) 1 both}
body[data-head="blur"]  .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:hblur .7s ease var(--d,0s) 1 both}
body[data-head="type"]  .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:htype .01s linear var(--d,0s) 1 both}
body[data-head="drop"]  .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:hdrop .55s cubic-bezier(.16,1,.3,1) var(--d,0s) 1 both}
body[data-head="slide"] .slide.active :is(.phero h1,.big,.mtitle,.epic h2,#final h2,.band h2) .ch{animation:hslide .55s ease var(--d,0s) 1 both}
@media (prefers-reduced-motion:reduce){.ch{animation:none!important}}

/* section shell */
.block{padding:min(15vh,140px) 6vw}
.two{display:grid;gap:min(7vw,90px);align-items:center;max-width:1220px;margin:0 auto}
.two.even{grid-template-columns:1fr 1fr}
.two.wl{grid-template-columns:1.15fr .85fr}
.two.wr{grid-template-columns:.85fr 1.15fr}
.two .shot{max-height:60vh}
.two .big{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.14}
@media(max-width:880px){.two{grid-template-columns:1fr!important;gap:44px}}

/* full-bleed statement */
.epic{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:14vh 6vw}
.epic .bg{position:absolute;inset:-6% 0;z-index:0;background-size:cover;background-position:center;will-change:transform}
.epic .scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(5,5,6,.5),rgba(5,5,6,.86))}
.epic .c{position:relative;z-index:2;max-width:min(900px,92vw);margin:0 auto}
.epic .sm{font-family:var(--mono);font-size:12px;letter-spacing:.42em;color:var(--accent);text-transform:uppercase;margin-bottom:28px}
.epic h2{font-family:var(--serif);font-weight:400;text-transform:none;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.01em;max-width:none;margin:0 auto}
.epic h2 .hl{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);text-transform:none}
.epic .sub{margin:26px auto 0;max-width:46ch;font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(237,235,230,.82)}

/* image panel */
.shot{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 46px 100px -46px #000,0 0 0 1px var(--line);transition:transform .25s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot .cap{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:#fff;background:rgba(5,5,6,.5);backdrop-filter:blur(6px);padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.12)}

/* system chain */
.chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 6px;margin-top:44px}
.node{padding:15px 24px;border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.015);transition:all .5s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.node:hover,.node.in{color:#fff;border-color:rgba(127,233,255,.4);box-shadow:0 0 40px rgba(127,233,255,.1)}
.arrow{color:var(--accent-d)}

/* ladder */
.ladder{border-left:1px solid var(--line);padding-left:34px;margin-top:26px}
.rung{font-family:var(--serif);font-weight:300;padding:12px 0;font-size:clamp(1.2rem,2.4vw,1.9rem);line-height:1;position:relative;color:var(--dim);transition:color .5s}
.rung::before{content:"";position:absolute;left:-34.5px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--dim);transform:translate(-50%,-50%);transition:all .5s}
.rung.in{color:var(--ink)}.rung.in::before{background:var(--accent);box-shadow:0 0 16px var(--accent)}
.rung:last-child{color:var(--accent);font-style:italic}.rung:last-child.in::before{background:var(--gold);box-shadow:0 0 18px var(--gold)}

/* work steps */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:56px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);padding:40px 36px;position:relative;overflow:hidden;transition:background .5s}
.step:hover{background:#0b0b12}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--accent);margin-bottom:20px}
.step h3{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:14px;line-height:1.05}
.step p{color:var(--muted);font-size:1rem;line-height:1.7}
.step .glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(var(--accent),transparent 70%);opacity:0;filter:blur(46px);top:-70px;right:-70px;transition:opacity .6s}
.step:hover .glow{opacity:.13}

/* marquee */
.marqwrap{position:relative;overflow:hidden;padding:40px 0}
.marqwrap::before,.marqwrap::after{content:"";position:absolute;top:0;bottom:0;width:22vw;z-index:2;pointer-events:none}
.marqwrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marqwrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marq{display:flex;width:max-content;animation:mv 34s linear infinite}
.marq span{font-family:var(--display);font-weight:600;font-size:clamp(2rem,6vw,4.6rem);padding:0 40px;color:var(--dim);text-transform:uppercase}
.marq span::after{content:"·";margin-left:80px;color:var(--accent)}
@keyframes mv{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1120px;margin:0 auto;padding-top:50px;border-top:1px solid var(--line)}
@media(max-width:680px){.stats{grid-template-columns:1fr;gap:36px}}
.stat .num{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;color:var(--accent)}
.stat .c{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;padding:20px 44px;border:1px solid var(--line);border-radius:100px;color:var(--ink);text-decoration:none;transition:border-color .5s,background .5s,box-shadow .5s,letter-spacing .5s;will-change:transform}
.btn:hover{border-color:var(--accent);background:rgba(127,233,255,.06);box-shadow:0 0 60px rgba(127,233,255,.14);letter-spacing:.4em}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pl 2s infinite}
.btn.solid{background:var(--accent);color:#04121a;border-color:var(--accent)}
.btn.solid:hover{background:#a5f0ff;box-shadow:0 0 60px rgba(127,233,255,.3)}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.3}}

/* pull quote */
.pull{padding:min(18vh,200px) 6vw;text-align:center}
.pull blockquote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.8rem,5vw,3.8rem);line-height:1.13;max-width:22ch;margin:0 auto}
.pull blockquote .hl{color:var(--accent);font-style:normal}
.pull .att{font-family:var(--mono);font-size:12px;letter-spacing:.35em;color:var(--muted);text-transform:uppercase;margin-top:40px}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 6vw 54px;text-align:center;position:relative;z-index:5}
footer .flogo{width:min(330px,80vw);height:auto;margin:0 auto 34px}
footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
footer .fnav a{text-decoration:none;transition:color .3s}footer .fnav a:hover{color:var(--accent)}
footer .fine{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase;margin-top:26px}

/* backdrop drift helper */
[data-par]{will-change:transform}

/* ===== Section rhythm (smooth normal scroll + dot nav) ===== */
.dots{display:none}
@media(min-width:900px) and (hover:hover){
  html{scroll-padding-top:88px}
  .phero{min-height:100vh;display:flex;align-items:center}
  .epic,.pull{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
  .shot{max-height:74vh}
  .dots{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:95;display:flex;flex-direction:column;gap:14px}
  .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(237,235,230,.35);background:transparent;transition:all .3s}
  .dot:hover{border-color:var(--accent);transform:scale(1.3)}
  .dot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent)}
}