/* =========================================================
   Dré-ation Web Design · site styles
   ========================================================= */
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Manrope';src:url(../fonts/manrope.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-italic.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Oswald';src:url(../fonts/oswald.woff2) format('woff2');font-weight:200 700;font-display:swap}
@font-face{font-family:'Caveat';src:url(../fonts/caveat.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --navy:#2B4868;--navy-deep:#1A2E45;--navy-ink:#101D2B;
  --teal:#3F7D7B;--teal-2:#5FA3A0;--teal-soft:#D5E7E5;
  --silver:#E4E6E8;--steel:#9AA3AB;
  --ink:#1B2530;--muted:#5A6672;
  --paper:#FBFAF6;--paper-2:#F1EEE6;
  --gold:#E3B94A;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 20px 50px -24px rgba(18,32,47,.45);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:var(--silver);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.loading{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;line-height:1.08;letter-spacing:-.02em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brushed{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,rgba(0,0,0,.018) 1px 2px,transparent 2px 4px),
  radial-gradient(1200px 500px at 80% 0%,rgba(255,255,255,.75),transparent 60%),
  linear-gradient(180deg,#EDEFF1 0%,#D7DBDE 100%)}
.eyebrow{font-family:'Montserrat';font-weight:700;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:16px 0 0 -1px var(--navy);margin-right:30px;flex:none}
.eyebrow.light{color:var(--teal-2)}
.eyebrow.light::before{background:var(--teal-2);box-shadow:16px 0 0 -1px #fff}
.section{padding:110px 0;position:relative}
.section-head{max-width:720px;margin-bottom:56px}
.section-head h2,.about h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;color:var(--navy-deep);margin:14px 0 16px}
.section-head h2 em,.about h2 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;color:var(--teal)}
.section-head p{color:var(--muted);font-size:1.08rem}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat';font-weight:700;font-size:.95rem;padding:15px 26px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s;cursor:pointer;border:0}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 12px 30px -12px rgba(43,72,104,.8)}
.btn-primary:hover{background:var(--teal);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--navy);border:1.5px solid rgba(43,72,104,.25);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy-deep)}
.btn-light:hover{transform:translateY(-2px)}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#EDEFF1,#D7DBDE);transition:opacity .7s ease,visibility .7s}
#loader.done{opacity:0;visibility:hidden}
.ld-mark{width:110px}
.ld-name{font:800 2rem Montserrat;color:var(--navy);opacity:0;animation:fadeUp .7s .9s var(--ease) forwards}
.ld-name span{color:var(--teal)}
.ld-sub{font:600 .7rem Montserrat;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);opacity:0;animation:fadeUp .7s 1.15s var(--ease) forwards}
.draw path,.draw line{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.6s var(--ease) forwards}
.draw line:nth-of-type(2){animation-delay:.15s}.draw line:nth-of-type(3){animation-delay:.3s}.draw line:nth-of-type(4){animation-delay:.45s}
.draw circle,.draw polygon{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .45s var(--ease) forwards;animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
#progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--navy),var(--teal-2));z-index:100}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:18px 0;transition:background .35s,box-shadow .35s,padding .35s}
.nav.scrolled{background:rgba(233,235,237,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px -18px rgba(18,32,47,.5);padding:10px 0}
.nav.dark:not(.scrolled) .brand-name,.nav.dark:not(.scrolled) .nav-links a:not(.btn){color:#fff}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:44px;height:44px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font:800 1.35rem Montserrat;letter-spacing:-.02em;color:var(--navy)}
.brand-name span{color:var(--teal)}
.brand-sub{font:600 .6rem Montserrat;letter-spacing:.34em;color:var(--navy);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font:600 .92rem Montserrat;color:var(--navy);position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.nav-links .btn{padding:11px 20px;font-size:.86rem;color:#fff}
.menu-btn{display:none;width:44px;height:44px;position:relative;z-index:70}
.menu-btn span{position:absolute;left:10px;right:10px;height:2.5px;background:var(--navy);border-radius:2px;transition:.3s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:28px}
.menu-open .menu-btn span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:130px 0 90px;position:relative;overflow:hidden}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.5rem);font-weight:900;color:var(--navy-deep);margin:22px 0 24px;letter-spacing:-.035em}
.hero h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;color:var(--teal);letter-spacing:-.02em}
.split .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(3deg);animation:wIn .9s var(--ease) forwards;animation-delay:calc(var(--i)*65ms + var(--start,.2s))}
@keyframes wIn{to{opacity:1;transform:none}}
.hero-lede{font-size:1.15rem;color:var(--muted);max-width:560px;margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-stats{display:flex;gap:40px;margin-top:50px;padding-top:28px;border-top:1px solid rgba(43,72,104,.15)}
.stat strong{display:block;font:800 2.1rem/1 Montserrat;color:var(--navy)}
.stat strong small{font-size:1.2rem}
.stat span{font-size:.85rem;color:var(--muted)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font:600 .66rem Montserrat;letter-spacing:.3em;color:var(--steel)}
.scroll-cue::after{content:"";width:1.5px;height:40px;background:linear-gradient(var(--teal),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero 3D book */
.hero-book{--hw:clamp(220px,25vw,320px);--hh:calc(var(--hw)*1.32);--hd:36px;position:relative;width:var(--hw);height:var(--hh);justify-self:center;perspective:1700px;cursor:pointer;outline:none;margin-right:6%}
.hb-float{position:absolute;inset:0;transform-style:preserve-3d;animation:hbFloat 6s ease-in-out infinite}
@keyframes hbFloat{50%{transform:translateY(-14px)}}
.hb{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,-28deg)) rotateX(var(--rx,10deg));transition:transform .7s var(--ease)}
.hb>div{position:absolute}
.hb-front{inset:0;transform-origin:left center;transform:translateZ(calc(var(--hd)/2));transform-style:preserve-3d;transition:transform 1s var(--ease)}
.hero-book:hover .hb-front,.hero-book:focus-visible .hb-front,.hero-book.peek .hb-front{transform:translateZ(calc(var(--hd)/2)) rotateY(-42deg)}
.hb-cov,.hb-cov-in{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 10px 10px 4px;overflow:hidden}
.hb-cov-in{transform:rotateY(180deg);background:var(--paper) var(--noise);border-radius:10px 4px 4px 10px;box-shadow:inset -12px 0 20px -12px rgba(0,0,0,.3)}
.hb-page1{inset:1.5% 2.5% 1.5% 0;transform:translateZ(calc(var(--hd)/2 - 3px));background:var(--paper) var(--noise);border-radius:0 6px 6px 0;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.hb-p1-in{text-align:center;color:var(--navy-deep)}
.hb-p1-in span{display:block;font:700 .6rem Montserrat;letter-spacing:.3em;color:var(--teal);text-transform:uppercase}
.hb-p1-in b{display:block;font:italic 600 2rem 'Playfair Display';margin:6px 0}
.hb-p1-in i{font:500 1.2rem Caveat;color:var(--muted)}
.hb-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--hd)/2));background:#1B3149;border-radius:10px 4px 4px 10px}
.hb-spine{top:0;bottom:0;width:var(--hd);left:calc(50% - var(--hd)/2);transform:rotateY(-90deg) translateZ(calc(var(--hw)/2));background:linear-gradient(90deg,#142539,#22405F 50%,#142539);display:flex;align-items:center;justify-content:center}
.hb-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 .56rem Montserrat;letter-spacing:.3em;color:#C9D3DB}
.hb-edge{top:1.5%;bottom:1.5%;width:calc(var(--hd) - 4px);left:calc(50% - (var(--hd) - 4px)/2);transform:rotateY(90deg) translateZ(calc(var(--hw)/2 - 4px));background:repeating-linear-gradient(90deg,#F5F2EB 0 2px,#DAD4C8 2px 3px)}
.hb-top,.hb-bottom{left:0;right:4px;height:calc(var(--hd) - 4px);top:calc(50% - (var(--hd) - 4px)/2);background:repeating-linear-gradient(0deg,#F5F2EB 0 2px,#DAD4C8 2px 3px)}
.hb-top{transform:rotateX(90deg) translateZ(calc(var(--hh)/2 - 3px))}
.hb-bottom{transform:rotateX(-90deg) translateZ(calc(var(--hh)/2 - 3px))}
.hb-shadow{position:absolute;left:4%;right:-10%;bottom:-40px;height:40px;background:radial-gradient(closest-side,rgba(18,32,47,.35),transparent);filter:blur(4px);animation:hbShadow 6s ease-in-out infinite}
@keyframes hbShadow{50%{transform:scale(.88);opacity:.7}}
.hb-hint{position:absolute;left:0;right:0;bottom:-78px;text-align:center;font:600 1.35rem Caveat;color:var(--teal)}
.hb-hint::before{content:"";display:block;margin:0 auto 4px;width:26px;height:26px;border-left:2px solid var(--teal);border-top:2px solid var(--teal);transform:rotate(45deg) scale(.6);animation:nudgeUp 1.8s ease-in-out infinite}
@keyframes nudgeUp{50%{transform:rotate(45deg) scale(.6) translate(-6px,-6px)}}

/* marquee */
.stack{background:var(--navy-deep);color:#fff;padding:20px 0;overflow:hidden}
.stack-track{display:flex;gap:56px;width:max-content;animation:marquee 40s linear infinite}
.stack-track span{font:700 .95rem Montserrat;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:56px;white-space:nowrap;color:rgba(255,255,255,.85)}
.stack-track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal-2)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   PORTFOLIO BOOK
   ========================================================= */
.portfolio{position:relative;overflow:hidden;color:#fff;padding:84px 0 64px;
  background:radial-gradient(ellipse 75% 65% at 50% 52%,#2B4B6D 0%,#172A3E 55%,#0B1520 100%)}
.pf-light{position:absolute;left:50%;top:-10%;width:90%;height:80%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(143,199,194,.18),transparent 65%);pointer-events:none}
.pf-head{text-align:center;position:relative;margin-bottom:22px}
.pf-hint{text-align:center;color:rgba(255,255,255,.5);font-size:.86rem;margin-top:14px}
.pf-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin:10px 0 8px}
.pf-head h2 em{font-family:'Playfair Display';font-style:italic;font-weight:600;color:var(--teal-2)}
.pf-head p{color:rgba(255,255,255,.66);max-width:620px;margin:0 auto}
.stage{display:flex;justify-content:center;padding:18px 0 8px;position:relative}
.book{--W:clamp(640px,min(92vw,calc((100vh - 300px)*1.6)),1240px);width:var(--W);aspect-ratio:1.6;position:relative;transition:transform 1.1s var(--ease);-webkit-user-select:none;user-select:none}
.book::after{content:"";position:absolute;left:4%;right:4%;bottom:-7%;height:9%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(8px);z-index:-1}
.book.at-start{transform:translateX(-25%)}
.book.at-end{transform:translateX(25%)}
.book.no-anim,.book.no-anim *{transition:none!important}
.board{position:absolute;top:-1.8%;bottom:-1.8%;background-color:#1C3350;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);box-shadow:0 30px 60px -18px rgba(0,0,0,.75);transition:opacity .6s}
.board.l{left:-1.4%;right:50%;border-radius:12px 3px 3px 12px}
.board.r{left:50%;right:-1.4%;border-radius:3px 12px 12px 3px}
.block{position:absolute;top:0;bottom:0;background:var(--paper);transition:opacity .6s}
.block.l{left:0;right:50%;border-radius:4px 0 0 4px;box-shadow:-2px 0 0 #E4DFD4,-3px 1px 0 #F8F6F1,-5px 1px 0 #E1DBCF,-6px 2px 0 #F4F1EA,-8px 2px 0 #DDD6C9}
.block.r{left:50%;right:0;border-radius:0 4px 4px 0;box-shadow:2px 0 0 #E4DFD4,3px 1px 0 #F8F6F1,5px 1px 0 #E1DBCF,6px 2px 0 #F4F1EA,8px 2px 0 #DDD6C9}
.book.at-start .board.l,.book.at-start .block.l,.book.at-start .block.r,.book.at-end .board.r,.book.at-end .block.r,.book.at-end .block.l{opacity:0}
.leaves{position:absolute;top:0;bottom:0;left:50%;right:0;perspective:3200px;perspective-origin:0% 50%}
.leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.45,.08,.22,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper) var(--noise)}
.face.front{border-radius:0 4px 4px 0;cursor:pointer}
.face.back{transform:rotateY(180deg);border-radius:4px 0 0 4px;cursor:pointer}
.face::before{content:"";position:absolute;top:0;bottom:0;width:10%;pointer-events:none;z-index:20}
.face.front::before{left:0;background:linear-gradient(90deg,rgba(18,28,40,.22),rgba(18,28,40,.06) 35%,transparent)}
.face.back::before{right:0;background:linear-gradient(-90deg,rgba(18,28,40,.22),rgba(18,28,40,.06) 35%,transparent)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:21;opacity:0}
.face.front::after{background:linear-gradient(-90deg,rgba(10,18,28,.42),rgba(10,18,28,.08))}
.face.back::after{background:linear-gradient(90deg,rgba(10,18,28,.42),rgba(10,18,28,.08))}
.leaf.turning .face::after{animation:shade 1.15s ease-in-out}
@keyframes shade{0%,100%{opacity:0}50%{opacity:1}}
.face.front .page.cover-page ~ .curl,.curl{position:absolute;right:0;bottom:0;width:7%;aspect-ratio:1;z-index:22;pointer-events:none;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.08) 50%,#EDE9E0 58%,#fff 80%);border-radius:0 0 4px 0;transition:width .35s var(--ease);box-shadow:-3px -3px 8px -4px rgba(0,0,0,.25)}
.face.front:hover .curl{width:11%}
.blank{position:absolute;inset:0;display:grid;place-items:center}
.blank .wm{width:22%;opacity:.07}
.page{position:absolute;inset:0;container-type:size;overflow:hidden}
.book-flash{position:absolute;inset:-6%;pointer-events:none;z-index:600;opacity:0;background:radial-gradient(circle at 72% 40%,rgba(255,255,255,.95),rgba(255,255,255,.35) 40%,transparent 70%)}
.book-flash.pop{animation:bflash .75s ease-out}
@keyframes bflash{0%{opacity:0}6%{opacity:.85}100%{opacity:0}}
.tabs{position:absolute;right:-3.4%;top:9%;display:flex;flex-direction:column;gap:calc(var(--W)*.008);z-index:-1}
.tab{width:calc(var(--W)*.045);height:calc(var(--W)*.05);background:var(--c);border-radius:0 8px 8px 0;display:grid;place-items:center;font:800 max(10px,calc(var(--W)*.0105)) Montserrat;color:#fff;letter-spacing:.04em;transform:translateX(-38%);transition:transform .35s var(--ease),filter .3s;box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.4)}
.tab span{transform:translateX(18%)}
.tab:hover,.tab.on{transform:translateX(0)}
.tab.on{filter:brightness(1.15)}
.book.at-end .tabs{opacity:0;pointer-events:none}
.controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:30px;position:relative}
.ctl{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s,opacity .25s}
.ctl svg{width:22px;height:22px}
.ctl:hover{background:var(--teal);border-color:var(--teal);transform:scale(1.06)}
.ctl:disabled{opacity:.3;pointer-events:none}
.ctl.snd{width:42px;height:42px;margin-left:10px;border-color:rgba(255,255,255,.15)}
.ctl.snd svg{width:18px;height:18px}
.ctl.snd .on,.ctl.snd[aria-pressed=true] .off{display:none}
.ctl.snd[aria-pressed=true] .on{display:block}
.ctl-label{min-width:280px;text-align:center}
.ctl-label b{display:block;font:700 1.02rem Montserrat;letter-spacing:.01em}
.ctl-label span{font:italic 500 .92rem 'Playfair Display';color:rgba(255,255,255,.55)}
.mdots{display:none;justify-content:center;gap:9px;margin-top:18px;flex-wrap:wrap}
.mdots button{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);font:800 .66rem Montserrat;color:rgba(255,255,255,.75);transition:.25s}
.mdots button.on{background:var(--c);border-color:var(--c);color:#fff;transform:scale(1.12)}

/* single-page (phone) book */
.book.single{--W:min(92vw,470px,calc((100vh - 200px)/1.62));aspect-ratio:1/1.62;transform:none!important}
.book.single .leaves{left:0;perspective:2400px;perspective-origin:50% 50%}
.book.single .board.l,.book.single .block.l,.book.single .tabs{display:none}
.book.single .board.r{left:-2%}
.book.single .block.r{left:0}
.book.single .face.front{border-radius:4px}
.book.single .leaf{transition:transform 1s cubic-bezier(.45,.08,.22,1),opacity 0s}
.book.single .leaf.flipped{opacity:0;transition:transform 1s cubic-bezier(.45,.08,.22,1),opacity .2s .85s}

/* paused unless visible */
.page:not(.live) .scene,.page:not(.live) .scene *,.book.asleep .scene,.book.asleep .scene *,.page:not(.live) .pl,.page:not(.live) .pl *{animation-play-state:paused!important}

/* ---------- cover ---------- */
.cover{position:absolute;inset:0;container-type:size;overflow:hidden;color:#E6E9EC;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12cqw 10cqw 9cqw;
  background-color:#1E3652;background-image:radial-gradient(120% 80% at 30% 15%,rgba(255,255,255,.12),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px);
  box-shadow:inset 5cqw 0 3cqw -3cqw rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05)}
.cover::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.02) 52%,transparent 58%);animation:sheen 7s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,35%{transform:translateX(-40%)}75%,100%{transform:translateX(40%)}}
.cv-frame{position:absolute;inset:5cqw;border:1px solid rgba(214,222,228,.32);border-radius:1.2cqw;pointer-events:none}
.cv-frame::after{content:"";position:absolute;inset:1.4cqw;border:1px solid rgba(214,222,228,.18);border-radius:.8cqw}
.cv-mark{width:30cqw;margin-top:5cqw;filter:drop-shadow(0 .5cqw .4cqw rgba(0,0,0,.45))}
.cv-title{font:900 12cqw/1 Montserrat;margin-top:6cqw;letter-spacing:-.03em;white-space:nowrap;background:linear-gradient(100deg,#9DA7B0 0%,#F4F6F8 22%,#A9B3BC 40%,#EEF1F3 60%,#8E99A3 80%,#DDE2E6 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite}
@keyframes foil{to{background-position:-250% 0}}
.cv-sub{font:600 3.3cqw Montserrat;letter-spacing:.55em;margin:2.4cqw 0 0 .55em;color:#9FD0CB}
.cv-rule{width:26cqw;height:1px;background:rgba(255,255,255,.35);margin:6cqw auto 5cqw;position:relative}
.cv-rule::before,.cv-rule::after{content:"";position:absolute;top:50%;width:1.8cqw;height:1.8cqw;border-radius:50%;transform:translateY(-50%)}
.cv-rule::before{left:-1cqw;background:#8FC7C2}.cv-rule::after{right:-1cqw;background:#D9DEE3}
.cv-vol{font:italic 500 6.4cqw/1.1 'Playfair Display'}
.cv-ed{font:600 2.4cqw Montserrat;letter-spacing:.3em;text-transform:uppercase;color:rgba(230,233,236,.6);margin-top:2.6cqw}
.cv-slogan{margin-top:auto;font:600 2.25cqw Montserrat;letter-spacing:.22em;text-transform:uppercase;color:#8FC7C2;padding:0 4cqw}
.cv-open{position:absolute;right:10cqw;bottom:17cqw;font:700 6cqw Caveat;color:var(--gold);display:flex;align-items:center;gap:1.5cqw;animation:nudge 1.6s ease-in-out infinite}
.cv-open svg{width:7cqw;height:7cqw}
@keyframes nudge{50%{transform:translateX(2cqw)}}
.hb-cov .cv-open{display:none}
.back-cover{justify-content:center;gap:6cqw}
.bc-q{font:italic 500 6.2cqw/1.35 'Playfair Display';color:#E9ECEF;max-width:70cqw}
.bc-mark{width:18cqw;opacity:.9}
.bc-url{font:600 2.4cqw Montserrat;letter-spacing:.24em;color:#9FD0CB;text-transform:uppercase}
.bc-bar{position:absolute;right:10cqw;bottom:10cqw;background:#F4F4F2;padding:2cqw 2.4cqw 1.2cqw;border-radius:.6cqw;color:#222;font:600 1.5cqw Montserrat;letter-spacing:.1em}
.bc-bar i{display:block;width:26cqw;height:9cqw;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px,#111 12px 13px,transparent 13px 16px);margin-bottom:1cqw}

/* ---------- info pages ---------- */
.info{position:absolute;inset:0;padding:6.5cqw 8.5cqw 8cqw;display:flex;flex-direction:column;color:var(--ink)}
.run{display:flex;justify-content:space-between;font:700 max(9px,1.45cqw) Montserrat;letter-spacing:.22em;text-transform:uppercase;color:#8C959E;border-bottom:1px solid #E2DDD2;padding-bottom:2.2cqw;position:relative;z-index:2}
.folio{position:absolute;left:0;right:0;bottom:3.6cqw;text-align:center;font:italic 500 max(11px,1.9cqw) 'Playfair Display';color:#9AA3AB}
.chap-num{position:absolute;right:6.5cqw;top:9cqw;font:italic 700 30cqw/.85 'Playfair Display';color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.22;pointer-events:none}
.kicker{margin-top:10cqw;font:700 max(10px,1.75cqw) Montserrat;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);display:flex;flex-wrap:wrap;gap:1.6cqw;align-items:center;position:relative}
.badge{font-size:max(9px,1.45cqw);padding:.7cqw 1.6cqw;border-radius:99px;background:color-mix(in srgb,var(--acc) 14%,#fff);letter-spacing:.1em;font-weight:800}
.badge.sample{background:#E7ECF2;color:var(--navy)}
.info h3{font:800 max(26px,7.6cqw)/1 Montserrat;color:var(--navy-deep);margin:2.4cqw 0 3.6cqw;letter-spacing:-.035em;position:relative}
.info h3::after{content:"";display:block;width:0;height:max(3px,.8cqw);background:var(--acc);border-radius:1cqw;margin-top:2.6cqw;transition:width 1s .3s var(--ease)}
.page.live .info h3::after{width:14cqw}
.lede{font-size:max(12.5px,2.72cqw);line-height:1.6;color:#46525E;position:relative}
.hl{list-style:none;margin:3.4cqw 0 3.6cqw;display:grid;gap:1.7cqw;position:relative}
.hl li{font-size:max(12px,2.45cqw);line-height:1.45;padding-left:5cqw;position:relative;color:#26333F;opacity:0;transform:translateX(-2cqw);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hl li::before{content:"";position:absolute;left:0;top:.42em;width:1.7cqw;height:1.7cqw;min-width:8px;min-height:8px;border-radius:50%;border:max(2px,.45cqw) solid var(--acc);background:var(--paper)}
.hl li::after{content:"";position:absolute;left:calc(max(8px,1.7cqw)/2 - .5px);top:calc(.42em + max(8px,1.7cqw));width:1px;height:calc(100% - max(8px,1.7cqw) + 1.7cqw);background:color-mix(in srgb,var(--acc) 35%,transparent)}
.hl li:last-child::after{display:none}
.page.live .hl li{opacity:1;transform:none}
.page.live .hl li:nth-child(2){transition-delay:.12s}.page.live .hl li:nth-child(3){transition-delay:.24s}.page.live .hl li:nth-child(4){transition-delay:.36s}
.chips{display:flex;flex-wrap:wrap;gap:1.3cqw;position:relative}
.chips span{font:700 max(10px,1.72cqw) Montserrat;padding:1.1cqw 1.9cqw;border-radius:1.2cqw;background:#EEEBE3;color:var(--navy)}
.info-foot{margin-top:auto;display:flex;align-items:center;gap:3cqw;flex-wrap:wrap;position:relative;padding-bottom:3cqw}
.visit{font:800 max(12px,2.3cqw) Montserrat;color:#fff;background:var(--navy);padding:max(10px,2.1cqw) max(16px,3.6cqw);border-radius:99px;display:inline-flex;gap:1.4cqw;align-items:center;transition:background .3s,transform .3s var(--ease),gap .3s;box-shadow:0 1.5cqw 3cqw -1.5cqw rgba(26,46,69,.6)}
.visit svg{width:max(14px,2.4cqw);height:max(14px,2.4cqw)}
.visit:hover{background:var(--acc);transform:translateY(-2px);gap:2.2cqw}
.url{font:600 max(10px,1.7cqw) Montserrat;color:#8C959E;letter-spacing:.04em}
.plogo{margin-left:auto;width:max(60px,15cqw);aspect-ratio:1;border-radius:22%;object-fit:cover;box-shadow:0 1.6cqw 3cqw -1.6cqw rgba(0,0,0,.55);transform:rotate(-3deg);transition:transform .4s var(--ease)}
.plogo.wide{width:auto;height:max(34px,7cqw);aspect-ratio:auto;border-radius:1.6cqw;background:#0D0F1A;padding:1.6cqw 2.6cqw;object-fit:contain}
.page.live .plogo{animation:logoIn .8s .5s var(--ease) backwards}
@keyframes logoIn{from{opacity:0;transform:rotate(-14deg) scale(.6)}}

/* intro */
.intro{align-items:center;text-align:center}
.intro .run{align-self:stretch;text-align:left}
.in-photo{width:30cqw;aspect-ratio:1;border-radius:50%;margin:7cqw auto 4cqw;padding:1.1cqw;background:conic-gradient(var(--teal),var(--navy),var(--teal));position:relative}
.in-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1cqw solid var(--paper)}
.in-photo::after{content:"";position:absolute;right:1cqw;top:3cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--teal);border:.8cqw solid var(--paper)}
.in-hand{font:700 max(26px,7cqw)/1 Caveat;color:var(--navy);margin-bottom:3cqw}
.intro .lede{margin-bottom:2.2cqw;max-width:66cqw}
.in-sig{font:700 max(34px,9cqw)/1 Caveat;color:var(--teal);margin-top:2cqw}
.in-role{font:700 max(9px,1.5cqw) Montserrat;letter-spacing:.2em;text-transform:uppercase;color:#8C959E;margin-top:1.5cqw}
/* contents */
.toc-h{font:italic 600 max(30px,9cqw)/1 'Playfair Display';color:var(--navy-deep);margin:8cqw 0 5cqw}
.toc-list{display:grid;gap:1cqw}
.toc-row{display:flex;align-items:baseline;gap:2.4cqw;text-align:left;padding:1.6cqw 1.4cqw;border-radius:1.4cqw;transition:background .25s,transform .3s var(--ease)}
.toc-row:hover{background:rgba(63,125,123,.08);transform:translateX(1cqw)}
.toc-row .n{font:italic 600 max(14px,3.2cqw) 'Playfair Display';color:var(--acc,var(--teal));min-width:5cqw}
.toc-row .t{font:800 max(13px,2.8cqw)/1.15 Montserrat;color:var(--navy-deep);display:flex;flex-direction:column}
.toc-row .t small{font:600 max(10px,1.65cqw) Manrope;color:#8C959E;letter-spacing:.02em;margin-top:.5cqw}
.toc-row .lead{flex:1;border-bottom:2px dotted #CFC9BD;transform:translateY(-.6cqw)}
.toc-row .pg{font:italic 500 max(12px,2.3cqw) 'Playfair Display';color:#6C7782}
.toc-note{margin-top:auto;padding-bottom:4cqw;font:600 max(18px,3.8cqw) Caveat;color:var(--teal);text-align:right}
/* cta page */
.sketch{position:relative;margin:4cqw 0 4cqw;border:max(2px,.4cqw) dashed #C8C1B3;border-radius:2cqw;height:38cqw;background:rgba(255,255,255,.5);overflow:hidden}
.sketch svg{position:absolute;inset:0;width:100%;height:100%}
.sketch .ln{stroke:#9AA3AB;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:sketch 7s ease-in-out infinite;animation-delay:var(--d)}
.sketch .fl{fill:rgba(63,125,123,.12);opacity:0;animation:sketchFill 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes sketch{0%{stroke-dashoffset:var(--l)}25%,80%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:var(--l)}}
@keyframes sketchFill{0%,25%{opacity:0}35%,80%{opacity:1}95%,100%{opacity:0}}
.pencil{position:absolute;width:5cqw;height:5cqw;left:0;top:0;offset-path:path('M40 40 L300 40 L300 100 L40 100 Z');animation:pencil 7s ease-in-out infinite}
.sketch .pen{position:absolute;right:4cqw;bottom:3cqw;font:700 max(16px,3.4cqw) Caveat;color:var(--teal);transform:rotate(-4deg)}
/* end page */
.end{align-items:center;text-align:center;justify-content:center}
.end-the{font:italic 600 max(40px,13cqw)/1 'Playfair Display';color:var(--navy-deep)}
.end-sub{font:600 max(18px,4.2cqw) Caveat;color:var(--teal);margin-top:1cqw}
.end-mark{width:14cqw;margin:5cqw auto 4cqw}
.end p{font-size:max(12px,2.5cqw);color:var(--muted);max-width:64cqw}
.end-mail{display:grid;gap:1.4cqw;margin:4cqw 0}
.end-mail a{font:700 max(12px,2.35cqw) Montserrat;color:var(--navy);border-bottom:1.5px solid var(--teal-soft);padding-bottom:.4cqw;transition:color .25s,border-color .25s}
.end-mail a:hover{color:var(--teal);border-color:var(--teal)}
.end-btns{display:flex;gap:2cqw;flex-wrap:wrap;justify-content:center}
.again{font:700 max(11px,2cqw) Montserrat;color:var(--navy);border:1.5px solid rgba(43,72,104,.3);padding:max(9px,1.9cqw) max(14px,3cqw);border-radius:99px;transition:.25s}
.again:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- showcase pages ---------- */
.show{position:absolute;inset:0;padding:5.5cqw 5.5cqw 0;display:flex;flex-direction:column}
.scene{position:relative;flex:1;border-radius:1.2cqw;overflow:hidden;container-type:size;isolation:isolate;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2cqw 4cqw -2.5cqw rgba(0,0,0,.4)}
.cap{height:11cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw;font:italic 500 max(11px,2.2cqw) 'Playfair Display';color:#6C7782}
.cap i{font-style:normal;font:700 max(9px,1.5cqw) Montserrat;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-right:1.6cqw}
.cap .hint{font:600 max(15px,3.2cqw) Caveat;color:var(--teal);white-space:nowrap;font-style:normal;animation:nudge 1.8s ease-in-out infinite}

/* ===== Scene 1 · LinguaFlow ===== */
.sc-lingua{background:#0A2556;color:#fff;font-family:Montserrat}
.lf-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background:radial-gradient(130% 90% at 15% 5%,var(--c2),var(--c1) 70%)}
.lf-slide.on{opacity:1}
.lf-slide::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 90%,rgba(255,255,255,.12),transparent 50%)}
.flag{position:absolute;left:10cqw;top:15cqh;width:42cqmin;height:28cqmin;display:flex;filter:drop-shadow(0 2cqmin 2.4cqmin rgba(0,0,0,.35));z-index:2}
.flag::before{content:"";position:absolute;left:-2.2cqmin;top:-4cqmin;width:1.4cqmin;height:60cqmin;border-radius:1cqmin;background:linear-gradient(90deg,#9aa6b1,#eef2f5,#8793a0)}
.flag::after{content:"";position:absolute;left:-2.9cqmin;top:-6cqmin;width:2.8cqmin;height:2.8cqmin;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#E3B94A 60%,#9c7a1d)}
.flag i{flex:1;height:100%;background-image:var(--flag);background-size:1400% 100%;background-position:calc(var(--k)*100%/13) 0;animation:wave 2.6s ease-in-out infinite;animation-delay:calc(var(--k)*-.13s)}
.flag i:first-child{border-radius:.4cqmin 0 0 .4cqmin}
@keyframes wave{0%,100%{transform:translateY(-3.5%);filter:brightness(1.1)}50%{transform:translateY(3.5%);filter:brightness(.82)}}
.lf-landmark{position:absolute;right:-6cqw;bottom:21cqh;width:74cqmin;fill:#fff;opacity:0;transform:translateY(12%);transition:opacity 1.2s ease,transform 1.4s var(--ease)}
.lf-slide.on .lf-landmark{opacity:.2;transform:none}
.lf-landmark .spin{animation:spin 7s linear infinite}
.greet{position:absolute;left:10cqw;top:calc(15cqh + 38cqmin);font:900 16cqmin/1 Montserrat;letter-spacing:-.03em;z-index:2;white-space:nowrap}
.greet .ch{display:inline-block;opacity:0;transform:translateY(50%) scale(.5) rotate(-8deg)}
.lf-slide.on .greet .ch{animation:chIn .6s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + .3s)}
@keyframes chIn{to{opacity:1;transform:none}}
.lang{position:absolute;left:10cqw;top:calc(15cqh + 57cqmin);font:800 4.2cqmin Montserrat;letter-spacing:.16em;text-transform:uppercase;z-index:2}
.lang span{display:block;font:500 3.4cqmin Manrope;letter-spacing:.06em;text-transform:none;opacity:.8;margin-top:1cqmin}
.lf-brand{position:absolute;top:4.5cqh;right:5cqw;display:flex;align-items:center;gap:1.8cqmin;font:800 4.6cqmin Montserrat;z-index:3}
.lf-brand i{width:5.6cqmin;height:5.6cqmin;border-radius:1.6cqmin;background:linear-gradient(135deg,#6EE7C8,#3B82F6);display:grid;place-items:center;font:900 3.4cqmin Montserrat;font-style:normal}
.lf-dots{position:absolute;top:5.6cqh;left:5cqw;display:flex;gap:1.4cqmin;z-index:3}
.lf-dots b{width:6cqmin;height:4cqmin;border-radius:.6cqmin;background:var(--flag);opacity:.45;transition:.4s;box-shadow:0 0 0 .3cqmin rgba(255,255,255,0)}
.lf-dots b.on{opacity:1;box-shadow:0 0 0 .5cqmin rgba(255,255,255,.9);transform:translateY(-.5cqmin)}
.lf-hud{position:absolute;left:5cqw;right:5cqw;bottom:4.5cqh;display:flex;gap:3cqmin;z-index:3}
.lf-card{width:38cqmin;height:22cqmin;perspective:700px;flex:none}
.lf-card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.lf-card.flip .lf-card-in{transform:rotateY(180deg)}
.lf-card .f,.lf-card .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2.4cqmin;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqmin;font:800 4.6cqmin Montserrat;box-shadow:0 1.6cqmin 3cqmin -1.4cqmin rgba(0,0,0,.5)}
.lf-card small{font:700 2.2cqmin Montserrat;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.lf-card .f{background:#fff;color:#1A2E45}
.lf-card .b{background:linear-gradient(135deg,#3F7D7B,#2F6DA8);transform:rotateY(180deg)}
.lf-xp{flex:1;border-radius:2.4cqmin;padding:2.6cqmin 3cqmin;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:center;gap:1.8cqmin;position:relative}
.lf-xp-top{display:flex;justify-content:space-between;align-items:center;font:800 3.2cqmin Montserrat;letter-spacing:.06em}
.lf-xp-top span{display:flex;align-items:center;gap:.8cqmin;color:#FFC857}
.lf-xp-top svg{width:3.6cqmin;height:3.6cqmin;animation:flame 1s ease-in-out infinite alternate}
@keyframes flame{to{transform:scale(1.15) rotate(-5deg)}}
.lf-bar{height:2.2cqmin;border-radius:2cqmin;background:rgba(255,255,255,.2);overflow:hidden}
.lf-bar i{display:block;height:100%;width:var(--xp,30%);border-radius:2cqmin;background:linear-gradient(90deg,#FFC857,#FF8A5B);transition:width 1.1s var(--ease)}
.lf-xp em{position:absolute;right:3cqmin;top:-4cqmin;font:900 3.4cqmin Montserrat;font-style:normal;color:#FFC857;opacity:0}
.lf-xp em.go{animation:xpUp 1.2s var(--ease)}
@keyframes xpUp{0%{opacity:0;transform:translateY(2cqmin)}25%{opacity:1}100%{opacity:0;transform:translateY(-4cqmin)}}

/* ===== Scene 2 · DJ ===== */
.sc-dj{background:radial-gradient(ellipse 120% 70% at 50% 110%,#5a4512 0%,#1B2A4A 45%,#08101F 100%);color:#fff;font-family:Oswald,Montserrat,sans-serif}
.dj-beam{position:absolute;top:-8cqh;width:30cqw;height:95cqh;left:var(--x);transform-origin:50% 0;background:linear-gradient(180deg,var(--c),transparent 85%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(3px);animation:beam var(--t) ease-in-out infinite alternate;opacity:.7}
@keyframes beam{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a)*-1))}}
.dj-title{position:absolute;top:6cqh;left:0;right:0;text-align:center;font:700 12cqmin/1 Oswald;letter-spacing:.06em;z-index:3;text-shadow:0 0 3cqmin rgba(227,185,74,.35)}
.dj-title span{color:var(--gold);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{text-shadow:0 0 1cqmin rgba(227,185,74,.4)}50%{text-shadow:0 0 5cqmin rgba(227,185,74,.95)}}
.dj-sub{position:absolute;top:calc(6cqh + 14cqmin);left:0;right:0;text-align:center;font:500 2.8cqmin Oswald;letter-spacing:.5em;color:rgba(255,255,255,.7);z-index:3}
.dj-deck{position:absolute;right:9cqw;top:31cqh;width:58cqmin;aspect-ratio:1;z-index:2}
.dj-plate{position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(circle,#2a3342 60%,#161d28 62%,#222b38 100%);box-shadow:0 3cqmin 5cqmin -2cqmin rgba(0,0,0,.7)}
.dj-vinyl{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b0d 0 1.1%,#1b1b20 1.3% 1.6%);animation:spin 1.8s linear infinite;box-shadow:inset 0 0 0 .6cqmin #000}
.dj-label{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#F2D06B,#C9A227 70%,#9c7a1d);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1B2A4A;font:700 3.2cqmin/1 Oswald;letter-spacing:.08em}
.dj-label small{font-size:2.1cqmin;letter-spacing:.2em}
.dj-label::after{content:"";position:absolute;width:6%;height:6%;border-radius:50%;background:#111}
.dj-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 12%,rgba(255,255,255,.14) 16%,transparent 22% 55%,rgba(255,255,255,.1) 60%,transparent 66%);pointer-events:none}
.dj-arm{position:absolute;right:-16%;top:-10%;width:40%;transform-origin:70% 10%;animation:arm 3s ease-in-out infinite alternate;filter:drop-shadow(0 1cqmin 1cqmin rgba(0,0,0,.6))}
@keyframes arm{to{transform:rotate(3deg)}}
.dj-cal{position:absolute;left:5cqw;top:33cqh;width:37cqmin;padding:2.4cqmin;border-radius:2.4cqmin;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3;font-family:Montserrat}
.dj-cal-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.6cqmin}
.dj-cal-h b{font:700 2.6cqmin Oswald;letter-spacing:.14em;color:var(--gold)}
.dj-cal-h span{font:600 1.8cqmin Montserrat;opacity:.6}
.dj-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.9cqmin}
.dj-grid i{aspect-ratio:1;border-radius:.7cqmin;background:rgba(255,255,255,.08);position:relative}
.dj-grid i::after{content:"";position:absolute;inset:28%;border-radius:50%;background:var(--s,transparent);transition:background .4s,transform .4s}
.dj-grid i.a{--s:#4ADE80}.dj-grid i.p{--s:#FACC15}.dj-grid i.b{--s:#F87171}
.dj-grid i.bump::after{animation:cellPop .5s var(--ease)}
@keyframes cellPop{50%{transform:scale(1.8)}}
.dj-leg{display:flex;justify-content:space-between;margin-top:1.6cqmin;font:600 1.6cqmin Montserrat;opacity:.8}
.dj-leg span{display:flex;align-items:center;gap:.6cqmin}
.dj-leg i{width:1.4cqmin;height:1.4cqmin;border-radius:50%}
.dj-leg i.a{background:#4ADE80}.dj-leg i.p{background:#FACC15}.dj-leg i.b{background:#F87171}
.dj-notes span{position:absolute;bottom:26cqh;left:var(--x);font-size:5cqmin;color:var(--gold);opacity:0;animation:note 4s ease-in infinite;animation-delay:var(--d)}
@keyframes note{0%{opacity:0;transform:translate(0,0) rotate(-10deg)}15%{opacity:.9}100%{opacity:0;transform:translate(6cqw,-40cqh) rotate(20deg)}}
.dj-eq{position:absolute;left:5cqw;right:5cqw;bottom:11cqh;height:13cqh;display:flex;align-items:flex-end;gap:.9cqw;z-index:2}
.dj-eq i{flex:1;height:100%;border-radius:.5cqw .5cqw 0 0;background:linear-gradient(to top,#C9A227,#F2D06B 70%,#fff3c4);transform-origin:bottom;animation:eq var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes eq{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
.dj-tick{position:absolute;left:0;right:0;bottom:0;height:8cqh;background:rgba(227,185,74,.95);color:#1B2A4A;overflow:hidden;display:flex;align-items:center;z-index:3}
.dj-tick div{white-space:nowrap;font:700 3cqmin Oswald;letter-spacing:.2em;animation:marquee 16s linear infinite}

/* ===== Scene 3 · Shoppers' Delight ===== */
.sc-shop{background:#F7F3EE;font-family:Montserrat;color:#1F2B3A}
.sd-nav{position:absolute;left:0;right:0;top:0;height:10cqh;display:flex;align-items:center;gap:3cqw;padding:0 4.5cqw;background:#1F2B3A;color:#fff;z-index:4}
.sd-nav b{font:italic 700 4.4cqmin 'Playfair Display';white-space:nowrap}
.sd-search{flex:1;height:5.4cqmin;border-radius:3cqmin;background:rgba(255,255,255,.12);font:500 2.2cqmin Manrope;color:rgba(255,255,255,.6);display:flex;align-items:center;padding:0 2.4cqmin;white-space:nowrap;overflow:hidden}
.sd-cart{position:relative;width:6cqmin;height:6cqmin;display:grid;place-items:center}
.sd-cart svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd-cart em{position:absolute;right:-1.4cqmin;top:-1.2cqmin;min-width:3.6cqmin;height:3.6cqmin;padding:0 .8cqmin;border-radius:2cqmin;background:#F4C95D;color:#1F2B3A;font:900 2.1cqmin/3.6cqmin Montserrat;font-style:normal;text-align:center}
.sd-cart.bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.92)}}
.sd-hero{position:absolute;top:13cqh;left:4.5cqw;right:4.5cqw;height:45cqh;display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:2cqmin}
.sd-tile{perspective:600px}
.sd-tile:first-child{grid-row:span 2}
.sd-t-in{width:100%;height:100%;border-radius:2cqmin;background:linear-gradient(150deg,var(--g1),var(--g2));display:flex;flex-direction:column;justify-content:space-between;padding:2.2cqmin;color:#fff;position:relative;overflow:hidden;transition:background .1s}
.sd-t-in::after{content:"";position:absolute;right:-20%;top:-20%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12)}
.sd-t-in svg{width:42%;max-width:14cqmin;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95;position:relative;z-index:1}
.sd-tile:first-child .sd-t-in svg{width:40%;max-width:22cqmin}
.sd-t-in span{font:800 2.4cqmin Montserrat;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1}
.sd-tile:first-child .sd-t-in span{font-size:3.4cqmin}
.sd-t-in small{display:block;font:600 1.8cqmin Manrope;letter-spacing:.02em;text-transform:none;opacity:.8;margin-top:.4cqmin}
.sd-tile.flip .sd-t-in{animation:tflip .7s ease-in-out}
@keyframes tflip{50%{transform:rotateY(90deg) scale(.94)}}
.sd-row{position:absolute;top:61cqh;left:4.5cqw;right:4.5cqw;display:flex;justify-content:space-between;align-items:baseline}
.sd-row b{font:800 3cqmin Montserrat;letter-spacing:.06em}
.sd-row span{font:700 2.1cqmin Montserrat;color:#B5563E}
.sd-rail{position:absolute;top:66cqh;left:0;right:0;bottom:3.5cqh;overflow:hidden;padding-left:4.5cqw}
.sd-track{display:flex;gap:2.4cqmin;height:100%;width:max-content;animation:marquee 26s linear infinite}
.sd-card{width:23cqmin;height:100%;background:#fff;border-radius:2cqmin;padding:1.6cqmin;display:flex;flex-direction:column;gap:.6cqmin;box-shadow:0 1cqmin 2.4cqmin -1.4cqmin rgba(31,43,58,.35);transition:transform .4s var(--ease)}
.sd-card.picked{transform:translateY(-1.5cqmin)}
.sd-pic{flex:1;border-radius:1.4cqmin;background:linear-gradient(150deg,var(--g1),var(--g2));display:grid;place-items:center;min-height:0}
.sd-pic svg{width:48%;height:auto;max-height:80%;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sd-card b{font:700 1.9cqmin/1.2 Montserrat;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-card .pr{display:flex;justify-content:space-between;align-items:center;font:800 2.1cqmin Montserrat;color:#B5563E}
.sd-card .sw{display:flex;gap:.5cqmin}
.sd-card .sw i{width:1.6cqmin;height:1.6cqmin;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.sd-fly{position:absolute;left:0;top:0;width:10cqmin;height:10cqmin;margin:-5cqmin 0 0 -5cqmin;border-radius:50%;background:linear-gradient(150deg,var(--g1),var(--g2));display:grid;place-items:center;z-index:6;box-shadow:0 1cqmin 2cqmin rgba(0,0,0,.3);pointer-events:none}
.sd-fly svg{width:55%;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd-toast{position:absolute;right:4.5cqw;top:11.5cqh;background:#1F2B3A;color:#fff;font:700 2cqmin Montserrat;padding:1.2cqmin 2cqmin;border-radius:1.4cqmin;z-index:5;opacity:0;transform:translateY(-1cqmin);transition:.35s var(--ease)}
.sd-toast.on{opacity:1;transform:none}

/* ===== Scene 4 · Kidz National ===== */
.sc-kidz{background:linear-gradient(180deg,#5B2A55 0%,#9C4A7A 45%,#E7A3B4 80%,#F6D6C8 100%);font-family:Montserrat;color:#fff}
.kz-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:0}
.sc-kidz.has-photo .kz-photo{display:block;animation:kenburns 16s ease-in-out infinite alternate}
.sc-kidz.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(70,28,64,.72),rgba(70,28,64,0) 38%,rgba(70,28,64,0) 78%,rgba(70,28,64,.35))}
.sc-kidz.has-photo .kz-line,.sc-kidz.has-photo .kz-hills,.sc-kidz.has-photo .kz-sun{display:none}
@keyframes kenburns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.16) translate(-3%,-2%)}}
.kz-sun{position:absolute;top:4cqh;right:5cqw;width:13cqmin;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFF1C4,#F6D27A 60%,#F1B84A);box-shadow:0 0 5cqmin rgba(246,210,122,.6);z-index:1}
.kz-sun::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:repeating-conic-gradient(rgba(246,210,122,.4) 0 8deg,transparent 8deg 24deg);animation:spin 24s linear infinite;z-index:-1;-webkit-mask:radial-gradient(circle,transparent 34%,#000 36%,transparent 70%);mask:radial-gradient(circle,transparent 34%,#000 36%,transparent 70%)}
.kz-cloud{position:absolute;top:var(--y);left:0;width:var(--w);height:calc(var(--w)*.34);background:rgba(255,255,255,.75);border-radius:99px;animation:drift var(--t) linear infinite;animation-delay:var(--d);z-index:1}
.kz-cloud::before,.kz-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.kz-cloud::before{width:48%;aspect-ratio:1;left:14%;bottom:30%}
.kz-cloud::after{width:36%;aspect-ratio:1;left:50%;bottom:22%}
@keyframes drift{from{transform:translateX(-40cqw)}to{transform:translateX(130cqw)}}
.kz-title{position:absolute;top:7cqh;left:7cqw;font:900 13cqmin/.95 Montserrat;letter-spacing:-.02em;z-index:3;white-space:nowrap;text-shadow:0 .8cqmin 0 rgba(91,42,85,.4)}
.kz-title span{display:inline-block;animation:hop 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}
.kz-title span:nth-child(3n+1){color:#FFE3A3}.kz-title span:nth-child(3n+2){color:#fff}.kz-title span:nth-child(3n){color:#FFC7D6}
.kz-title .sp{display:block;height:0}
@keyframes hop{0%,55%,100%{transform:translateY(0)}20%{transform:translateY(-18%) rotate(-4deg)}35%{transform:translateY(4%)}}
.kz-tag{position:absolute;top:calc(8cqh + 26cqmin);left:7cqw;font:700 1.9rem Caveat;font-size:6cqmin;color:#fff;z-index:3}
.kz-line{position:absolute;left:0;right:0;top:41cqh;width:100%;z-index:2;overflow:visible}
.kz-line .sw{animation:swing var(--t) ease-in-out infinite alternate;animation-delay:var(--d);transform-origin:0 0}
@keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.kz-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:28cqh;z-index:1}
.kz-bl{position:absolute;bottom:-18cqh;left:var(--x);width:10cqmin;height:12.5cqmin;border-radius:50% 50% 48% 52%/44% 44% 56% 56%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75),var(--c) 42%,color-mix(in srgb,var(--c) 75%,#000));animation:blUp var(--t) linear infinite;animation-delay:var(--d);z-index:2}
.kz-bl::before{content:"";position:absolute;left:50%;top:99%;width:2cqmin;height:1.4cqmin;transform:translateX(-50%);background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
.kz-bl::after{content:"";position:absolute;left:50%;top:108%;width:1px;height:12cqmin;background:rgba(255,255,255,.7)}
@keyframes blUp{0%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(3cqw,-38cqh) rotate(4deg)}50%{transform:translate(-2cqw,-76cqh) rotate(-3deg)}75%{transform:translate(3cqw,-114cqh) rotate(3deg)}100%{transform:translate(0,-152cqh) rotate(-4deg)}}
.kz-badge{position:absolute;right:6cqw;bottom:7cqh;z-index:4;background:#fff;color:#5B2A55;border-radius:3cqmin;padding:2.4cqmin 3cqmin;text-align:center;box-shadow:0 2cqmin 4cqmin -2cqmin rgba(91,42,85,.6);animation:badge 3s ease-in-out infinite;transform:rotate(-4deg)}
.kz-badge b{display:block;font:900 4.2cqmin Montserrat;letter-spacing:.06em;color:#9C4A7A}
.kz-badge span{font:600 2.2cqmin Manrope}
@keyframes badge{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-1deg) scale(1.06)}}
.kz-star{position:absolute;left:var(--x);top:var(--y);width:3cqmin;aspect-ratio:1;background:#FFE3A3;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:twinkle var(--t) ease-in-out infinite;animation-delay:var(--d);z-index:2}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}

/* ===== Scene 5 · Karina ===== */
.sc-karina{background:#050505;color:#fff;font-family:Montserrat}
.kp-ph{position:absolute;inset:0;opacity:0;transition:opacity .15s;filter:sepia(.12) contrast(1.05)}
.kp-ph.on{opacity:1}
.kp-ph svg{width:100%;height:100%;animation:kpZoom 4.2s ease-out infinite}
.kp-ph.dev svg{animation:develop 1.6s ease-out,kpZoom 4.2s ease-out}
@keyframes develop{0%{filter:brightness(2.6) blur(4px)}100%{filter:brightness(1) blur(0)}}
@keyframes kpZoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.kp-vf{position:absolute;inset:5cqmin;z-index:3;pointer-events:none}
.kp-vf .c{position:absolute;width:8cqmin;height:8cqmin;border:.5cqmin solid rgba(255,255,255,.85)}
.kp-vf .tl{left:0;top:0;border-right:0;border-bottom:0}.kp-vf .tr{right:0;top:0;border-left:0;border-bottom:0}
.kp-vf .bl{left:0;bottom:0;border-right:0;border-top:0}.kp-vf .br{right:0;bottom:0;border-left:0;border-top:0}
.kp-top{position:absolute;top:2cqmin;left:10cqmin;right:10cqmin;display:flex;justify-content:space-between;align-items:center;font:700 2.3cqmin Montserrat;letter-spacing:.08em;text-shadow:0 0 1cqmin rgba(0,0,0,.8)}
.kp-top .rec{display:flex;align-items:center;gap:.8cqmin;color:#ff6b5e}
.kp-top .rec::before{content:"";width:1.6cqmin;height:1.6cqmin;border-radius:50%;background:#ff4d3d;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kp-bat{width:5cqmin;height:2.6cqmin;border:.35cqmin solid #fff;border-radius:.5cqmin;position:relative}
.kp-bat::before{content:"";position:absolute;inset:.35cqmin;right:30%;background:#fff}
.kp-bat::after{content:"";position:absolute;right:-1cqmin;top:30%;width:.6cqmin;height:40%;background:#fff}
.kp-focus{position:absolute;left:50%;top:44%;width:22cqmin;height:16cqmin;transform:translate(-50%,-50%);border:.4cqmin solid rgba(255,255,255,.75);transition:border-color .2s}
.kp-focus::before,.kp-focus::after{content:"";position:absolute;background:rgba(255,255,255,.8)}
.kp-focus::before{left:50%;top:-2cqmin;width:.4cqmin;height:2cqmin}
.kp-focus::after{top:50%;left:-2cqmin;height:.4cqmin;width:2cqmin}
.kp-focus.hunt{animation:hunt .9s ease-in-out}
.kp-focus.lock{border-color:#5BE58B;transform:translate(-50%,-50%) scale(.8)}
@keyframes hunt{25%{transform:translate(-50%,-50%) scale(1.25)}55%{transform:translate(-50%,-50%) scale(.85)}80%{transform:translate(-50%,-50%) scale(1.05)}}
.kp-count{position:absolute;right:10cqmin;bottom:2cqmin;font:700 2.4cqmin Montserrat;letter-spacing:.1em}
.kp-meter{position:absolute;left:10cqmin;bottom:2.4cqmin;display:flex;gap:.7cqmin;align-items:center}
.kp-meter i{width:.5cqmin;height:1.8cqmin;background:rgba(255,255,255,.6)}
.kp-meter i:nth-child(5){height:3cqmin;background:#fff}
.kp-brand{position:absolute;left:9cqw;bottom:22cqh;z-index:4;text-shadow:0 .5cqmin 2cqmin rgba(0,0,0,.6)}
.kp-brand strong{display:block;font:italic 500 14cqmin/1 'Playfair Display'}
.kp-brand small{display:block;font:600 2.6cqmin Montserrat;letter-spacing:.55em;margin-top:1.4cqmin}
.kp-strip{position:absolute;left:8cqw;right:8cqw;bottom:6cqh;height:10cqh;display:flex;gap:1.6cqmin;justify-content:flex-end;z-index:4}
.kp-th{height:100%;aspect-ratio:4/3;border:.6cqmin solid #fff;box-shadow:0 1cqmin 2cqmin rgba(0,0,0,.6);overflow:hidden;animation:thIn .6s var(--ease);background:#111}
.kp-th svg{width:100%;height:100%}
@keyframes thIn{from{transform:translateY(-30cqh) scale(2.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.kp-iris{position:absolute;left:50%;top:50%;width:170cqmax;height:170cqmax;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 120cqmax #030303;opacity:0;pointer-events:none;z-index:7}
.kp-iris.snap{animation:iris .36s ease-in-out}
@keyframes iris{0%{opacity:1;width:170cqmax;height:170cqmax}48%,55%{width:0;height:0;opacity:1}100%{width:170cqmax;height:170cqmax;opacity:1}}
.kp-flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:radial-gradient(circle at 72% 22%,#fff,rgba(255,255,255,.92) 45%,rgba(255,255,255,.75))}
.kp-flash.pop{animation:kflash .8s ease-out}
@keyframes kflash{0%{opacity:0}5%{opacity:1}100%{opacity:0}}

/* ===== Scene 6 · Suzy ===== */
.sc-suzy{background:#9ED3EE}
.sz{position:absolute;inset:0;width:100%;height:100%}
.sz-cl{animation:szdrift var(--t) linear infinite;animation-delay:var(--d)}
@keyframes szdrift{from{transform:translateX(-160px)}to{transform:translateX(520px)}}
.sz-glow{animation:sunpulse 4s ease-in-out infinite;transform-origin:310px 110px}
@keyframes sunpulse{50%{transform:scale(1.12);opacity:.8}}
.sz-waves{animation:waves var(--t) linear infinite}
@keyframes waves{to{transform:translateX(-100px)}}
.sz-palm{animation:palm 3.2s ease-in-out infinite alternate;transform-origin:314px 336px}
@keyframes palm{to{transform:rotate(6deg)}}
.sz-boat{animation:boat 3s ease-in-out infinite}
@keyframes boat{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(0,-4px) rotate(3deg)}}
.sz-boatx{animation:boatx 30s ease-in-out infinite alternate}
@keyframes boatx{to{transform:translateX(90px)}}
.sz-birds{animation:birds 16s linear infinite}
@keyframes birds{from{transform:translate(-60px,40px)}to{transform:translate(460px,-30px)}}
.sz-bird{animation:flap .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes flap{to{transform:scaleY(.3)}}
.sz-title{position:absolute;top:6cqh;left:0;right:0;text-align:center;font:italic 600 11cqmin/1 'Playfair Display';color:#123B55;z-index:3;text-shadow:0 .4cqmin 0 rgba(255,255,255,.6)}
.sz-title em{font-family:Caveat;font-style:normal;font-weight:700;color:#C4602D;font-size:1.1em}
.sz-title small{display:block;font:800 2.5cqmin Montserrat;letter-spacing:.5em;color:#8A5A2B;margin-top:2cqmin;font-style:normal;text-shadow:none}
.sz-pcs{position:absolute;left:5cqw;bottom:5cqh;width:52cqmin;height:34cqmin;z-index:4}
.pc{position:absolute;inset:0;background:#FFFDF7;border-radius:1.2cqmin;box-shadow:0 2cqmin 4cqmin -1.5cqmin rgba(0,0,0,.45);display:flex;padding:1.8cqmin;gap:1.8cqmin;opacity:0;transform:translate(-20cqw,10cqh) rotate(-20deg)}
.pc.in{animation:pcIn .8s var(--ease) forwards}
.pc.out{animation:pcOut .6s ease-in forwards}
@keyframes pcIn{to{opacity:1;transform:rotate(var(--r))}}
@keyframes pcOut{from{opacity:1;transform:rotate(var(--r))}to{opacity:0;transform:translate(25cqw,-8cqh) rotate(18deg)}}
.pc-img{flex:1.25;border-radius:.8cqmin;background:linear-gradient(150deg,var(--g1),var(--g2));padding:1.6cqmin;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;overflow:hidden}
.pc-img::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:60%;border-radius:50%;background:rgba(255,255,255,.18)}
.pc-img span{font:600 3.2cqmin Caveat;position:relative}
.pc-img b{font:800 3.3cqmin/1.05 Montserrat;letter-spacing:.02em;position:relative}
.pc-r{flex:1;display:flex;flex-direction:column;gap:2cqmin;padding-top:6.5cqmin;position:relative}
.pc-r i{height:.3cqmin;background:#D9D2C3;border-radius:1cqmin}
.pc-r .st{position:absolute;right:0;top:0;width:6cqmin;height:7cqmin;border:.4cqmin dashed #C4602D;display:grid;place-items:center;font-size:3cqmin;color:#C4602D;background:#FFF4E6}
.pc-r .note{font:600 2.8cqmin/1.1 Caveat;color:#2F5D7A}
.pc-stamp{position:absolute;right:3cqmin;bottom:2.4cqmin;width:15cqmin;height:15cqmin;border-radius:50%;border:.6cqmin solid rgba(196,96,45,.85);color:rgba(196,96,45,.9);display:grid;place-items:center;font:900 2.3cqmin Montserrat;letter-spacing:.1em;opacity:0;transform:scale(2.6) rotate(-25deg)}
.pc-stamp::after{content:"";position:absolute;inset:.8cqmin;border-radius:50%;border:.3cqmin solid rgba(196,96,45,.6)}
.pc.in .pc-stamp{animation:stamp .35s .75s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-14deg)}}

/* =========================================================
   SERVICES / PROCESS / ABOUT / CONTACT / FOOTER
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1200px}
.svc{background:#fff;border-radius:20px;padding:34px 30px;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -26px rgba(18,32,47,.5);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .4s;opacity:0;transform:translateY(60px) rotate(calc((var(--i) - 2.5)*3deg)) scale(.94)}
.deal.in .svc{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*.1s)}
.deal.in .svc.tilting{transition:transform .15s linear}
.svc::before{content:"";position:absolute;top:-70px;right:-70px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(63,125,123,.14),transparent 70%);transition:.5s}
.svc:hover::before{transform:scale(1.5)}
.svc .ic{width:56px;height:56px;border-radius:15px;background:var(--teal-soft);display:grid;place-items:center;margin-bottom:22px}
.svc .ic svg{width:27px;height:27px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .ic svg *{stroke-dasharray:80;animation:redraw 1s var(--ease)}
@keyframes redraw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.svc h3{font-size:1.25rem;font-weight:800;color:var(--navy-deep);margin-bottom:10px}
.svc p{color:var(--muted);font-size:.97rem}
.svc .num{position:absolute;top:26px;right:28px;font:italic 600 1rem 'Playfair Display';color:rgba(43,72,104,.3)}
.svc.cta-card{background:linear-gradient(145deg,var(--navy),var(--teal));display:flex;flex-direction:column;justify-content:center;color:#fff}
.svc.cta-card h3{color:#fff}
.svc.cta-card p{color:rgba(255,255,255,.85);margin-bottom:22px}
.svc.cta-card .btn{align-self:flex-start}

.process{background:var(--navy-deep);color:#fff}
.process .section-head h2{color:#fff}
.process .section-head h2 em{color:var(--teal-2)}
.process .section-head p{color:rgba(255,255,255,.65)}
.process .eyebrow{color:var(--teal-2)}
.process .eyebrow::before{background:var(--teal-2);box-shadow:16px 0 0 -1px #fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;top:27px;left:28px;right:12%;height:3px;background:linear-gradient(90deg,var(--teal-2),#fff 50%,var(--teal-2));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease);opacity:.5}
.steps.in::before{transform:scaleX(1)}
.step{position:relative;opacity:0;transform:translateY(24px);transition:.8s var(--ease)}
.steps.in .step{opacity:1;transform:none}
.steps.in .step:nth-child(2){transition-delay:.35s}.steps.in .step:nth-child(3){transition-delay:.7s}.steps.in .step:nth-child(4){transition-delay:1.05s}
.step .node{width:56px;height:56px;border-radius:50%;background:var(--navy-deep);border:3px solid var(--teal-2);display:grid;place-items:center;font:800 1.1rem Montserrat;color:#fff;margin-bottom:22px;position:relative;z-index:1}
.step:nth-child(even) .node{border-color:#fff}
.steps.in .node{animation:nodePop .6s var(--ease) backwards;animation-delay:inherit}
.step h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.step p{color:rgba(255,255,255,.66);font-size:.96rem}
.terms{margin-top:56px;display:flex;flex-wrap:wrap;gap:16px}
.term{flex:1 1 260px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 24px;display:flex;gap:16px;align-items:center}
.term b{font:800 1.6rem Montserrat;color:var(--teal-2);line-height:1;flex:none}
.term b.sm{font-size:.85rem;letter-spacing:.04em;max-width:90px;line-height:1.3}
.term span{color:rgba(255,255,255,.66);font-size:.94rem}
.term strong{display:block;color:#fff;font-family:Montserrat;font-size:1rem;margin-bottom:2px}

.about{overflow:hidden}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.portrait{position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.ring-text{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite}
.ring-text text{font:700 13px Montserrat;fill:var(--navy);letter-spacing:2px}
.photo{position:absolute;inset:14%;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,var(--navy),var(--teal));box-shadow:0 30px 60px -28px rgba(18,32,47,.7),0 0 0 8px rgba(255,255,255,.7),0 0 0 10px var(--teal)}
.photo img{position:relative;width:100%;height:100%;object-fit:cover;z-index:1}
.photo .initials{position:absolute;inset:0;display:grid;place-items:center;font:900 5rem Montserrat;color:rgba(255,255,255,.85)}
.pnode{position:absolute;border-radius:50%;animation:orbit 5s ease-in-out infinite}
.pnode.a{width:18px;height:18px;background:var(--navy);top:12%;right:8%}
.pnode.b{width:14px;height:14px;background:var(--teal);bottom:10%;left:12%;animation-delay:-2s}
.pnode.c{width:10px;height:10px;background:var(--teal-2);top:48%;left:2%;animation-delay:-3.5s}
@keyframes orbit{50%{transform:translate(6px,-8px)}}
.about p{color:var(--muted);font-size:1.06rem;margin-bottom:18px}
.about p strong{color:var(--navy-deep)}
.quote{margin:28px 0;padding:22px 26px;border-left:4px solid var(--teal);background:rgba(255,255,255,.65);border-radius:0 14px 14px 0;font:italic 500 1.2rem/1.5 'Playfair Display';color:var(--navy)}
.quote em{font-weight:700;color:var(--teal)}
.signature{font:700 3.2rem Caveat;color:var(--navy);line-height:1}

.contact{background:var(--navy-ink);color:#fff;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 0% 100%,rgba(63,125,123,.35),transparent 60%),radial-gradient(600px 300px at 100% 0%,rgba(95,163,160,.18),transparent 60%)}
.contact-grid{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:70px}
.contact h2{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:900;margin:14px 0 20px;min-height:2.2em}
.tw{font-family:'Playfair Display';font-style:italic;font-weight:600;color:var(--teal-2)}
.caret{display:inline-block;width:3px;height:.9em;background:var(--teal-2);margin-left:4px;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
.contact h2::after{content:"?";color:#fff}
.contact-intro{color:rgba(255,255,255,.72);font-size:1.08rem;margin-bottom:34px}
.mail{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:14px;transition:.3s var(--ease)}
.mail:hover{background:rgba(95,163,160,.16);border-color:var(--teal-2);transform:translateX(6px)}
.mail .ic{width:48px;height:48px;border-radius:12px;background:var(--teal);display:grid;place-items:center;flex:none}
.mail .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.mail small{display:block;font:700 .74rem Montserrat;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2)}
.mail strong{font:700 1.02rem Montserrat;word-break:break-all}
.loc{margin-top:26px;color:rgba(255,255,255,.6);font-size:.95rem;display:flex;align-items:center;gap:10px}
.loc svg{width:18px;height:18px;stroke:var(--teal-2);fill:none;stroke-width:2;flex:none}
form{background:#fff;color:var(--ink);border-radius:24px;padding:38px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
form h3{font-size:1.5rem;font-weight:800;color:var(--navy-deep);margin-bottom:6px}
.form-sub{color:var(--muted);font-size:.95rem;margin-bottom:24px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font:700 .8rem Montserrat;color:var(--navy);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font:500 1rem Manrope;padding:14px 16px;border-radius:12px;border:1.5px solid #D6DBE0;background:#F6F7F8;color:var(--ink);transition:.25s;outline:none}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(63,125,123,.14)}
.hp{position:absolute;left:-9999px}
form .btn{width:100%;justify-content:center;margin-top:6px}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:12px;font-weight:600;font-size:.95rem;display:none}
.form-msg.ok{display:block;background:var(--teal-soft);color:#255553}
.form-msg.err{display:block;background:#FBE9E7;color:#8A2E22}
.form-msg a{text-decoration:underline}

footer{background:#0A131D;color:rgba(255,255,255,.6);padding:50px 0 34px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
footer .brand-name{color:#fff}
footer .brand-sub{color:rgba(255,255,255,.7)}
.slogan{font:600 .74rem Montserrat;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-2);margin-top:12px}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-nav a{font:600 .9rem Montserrat;transition:color .2s}
.foot-nav a:hover{color:var(--teal-2)}
.copy{width:100%;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:10px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.made{display:flex;align-items:center;gap:10px}
.mini-eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.mini-eq i{width:3px;height:100%;background:var(--teal-2);transform-origin:bottom;animation:eq .6s ease-in-out infinite alternate}
.mini-eq i:nth-child(2){animation-duration:.45s}.mini-eq i:nth-child(3){animation-duration:.7s}.mini-eq i:nth-child(4){animation-duration:.5s}.mini-eq i:nth-child(5){animation-duration:.8s}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes nodePop{from{transform:scale(0)}to{transform:scale(1)}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1020px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:60px}
  .hero-book{order:-1;--hw:clamp(190px,34vw,260px);margin:10px auto 70px}
  .hero-copy{text-align:left}
  .svc-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
}
@media (max-width:860px){
  .mdots{display:flex}
  .tabs{display:none}
}
@media (max-width:760px){
  .nav-links{position:fixed;inset:0;background:rgba(233,235,237,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;justify-content:center;gap:30px;opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-links a{font-size:1.3rem}
  .nav.dark:not(.scrolled) .nav-links a:not(.btn){color:var(--navy)}
  .menu-open .nav-links{opacity:1;pointer-events:auto}
  .menu-btn{display:block}
  .svc-grid,.steps{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .hero-stats{gap:22px;flex-wrap:wrap}
  .section{padding:84px 0}
  form{padding:28px 22px}
  .portfolio{padding:70px 0 56px}
  .controls{gap:10px;margin-top:26px}
  .ctl-label{min-width:0;flex:1;max-width:220px}
  .ctl-label b{font-size:.92rem}
  .ctl.snd{margin-left:0}
  .scroll-cue{display:none}
  .quote{font-size:1.08rem}
  .mail strong{font-size:.86rem;word-break:normal;overflow-wrap:anywhere}
  .mail{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .leaf{transition-duration:.01s!important}
  .split .w,.reveal,.svc,.step{opacity:1!important;transform:none!important;animation:none!important}
  .scene *,.stack-track,.ring-text,.hb-float,.cover::after{animation:none!important}
}

/* compact pages on smaller books (laptops) */
@container (max-width:430px) and (max-height:600px){
  .info{padding:5.5cqw 7.5cqw 6cqw}
  .kicker{margin-top:6cqw}
  .info h3{margin:1.6cqw 0 2.4cqw}
  .info h3::after{margin-top:1.8cqw}
  .lede{font-size:max(11.5px,2.6cqw);line-height:1.5}
  .hl{margin:2.4cqw 0 2.6cqw;gap:1.1cqw}
  .hl li{font-size:max(11px,2.3cqw)}
  .chips span{padding:.8cqw 1.6cqw}
  .url{display:none}
  .plogo{width:max(50px,13cqw)}
  .plogo.wide{height:max(30px,6cqw)}
  .info-foot{padding-bottom:1.5cqw}
  .in-photo{width:24cqw;margin:4cqw auto 3cqw}
  .toc-h{margin:5cqw 0 3cqw}
  .toc-row{padding:1.1cqw 1.4cqw}
  .sketch{height:30cqw;margin:3cqw 0}
}

/* ---------- Volume II · The Clients Wing ---------- */
.cover.teal{background-color:#1D5351}
.badge.client{background:#DDEFEA;color:#2E6563}
.shelf{display:flex;justify-content:center;gap:14px;margin:-4px auto 22px;flex-wrap:wrap;position:relative}
.shelf[hidden]{display:none}
.spine{position:relative;min-width:230px;text-align:left;padding:12px 18px 12px 26px;border-radius:6px 12px 12px 6px;color:#E6E9EC;
  background-color:#1E3652;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  box-shadow:inset 8px 0 10px -6px rgba(0,0,0,.6),0 10px 24px -14px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08);
  transition:transform .35s var(--ease),box-shadow .35s,opacity .35s;opacity:.62}
.spine::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:rgba(214,222,228,.35);border-radius:2px}
.spine.teal{background-color:#1D5351}
.spine small{display:block;font:700 .62rem Montserrat;letter-spacing:.24em;text-transform:uppercase;color:#9FD0CB}
.spine b{display:block;font:italic 600 1.15rem 'Playfair Display';margin:2px 0}
.spine span{font-size:.78rem;opacity:.7}
.spine:hover{opacity:.9;transform:translateY(-3px)}
.spine.on{opacity:1;transform:translateY(-6px);box-shadow:inset 8px 0 10px -6px rgba(0,0,0,.6),0 16px 30px -14px rgba(0,0,0,.9),0 0 0 2px var(--teal-2)}
.book.swap{animation:swapOut .38s ease-in forwards}
@keyframes swapOut{to{opacity:0;transform:translateY(24px) scale(.96)}}
.portfolio.vol2{background:radial-gradient(ellipse 75% 65% at 50% 52%,#1F5553 0%,#143836 55%,#0A1C1B 100%)}
.sc-client{background:#0F1C28;font-family:Montserrat}
.cl-bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,color-mix(in srgb,var(--acc) 70%,#fff 10%),#0F1C28 75%)}
.cl-browser{position:absolute;left:7cqw;right:7cqw;top:7cqh;bottom:7cqh;border-radius:2.4cqmin;overflow:hidden;background:#fff;box-shadow:0 3cqmin 6cqmin -2cqmin rgba(0,0,0,.6);display:flex;flex-direction:column;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-1.2cqh)}}
.cl-bar{height:6.5cqmin;flex:none;background:#EEF0F2;display:flex;align-items:center;gap:1cqmin;padding:0 2.2cqmin}
.cl-bar i{width:1.8cqmin;height:1.8cqmin;border-radius:50%;background:#E2675C}
.cl-bar i:nth-child(2){background:#E9B949}.cl-bar i:nth-child(3){background:#5BBE6A}
.cl-bar b{flex:1;margin-left:1.4cqmin;height:3.6cqmin;border-radius:1cqmin;background:#fff;font:600 1.9cqmin/3.6cqmin Manrope;color:#5A6672;padding-left:1.6cqmin;overflow:hidden;white-space:nowrap}
.cl-live{font:800 1.6cqmin Montserrat;letter-spacing:.14em;color:#1f9d55;display:flex;align-items:center;gap:.6cqmin}
.cl-live::before{content:"";width:1.4cqmin;height:1.4cqmin;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:livePulse 1.6s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 1.6cqmin rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.cl-view{position:relative;flex:1;overflow:hidden;background:linear-gradient(150deg,var(--acc),#1A2E45)}
.cl-shot{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.sc-client.run .cl-shot{animation:clScroll var(--dur,14s) ease-in-out infinite alternate}
@keyframes clScroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(var(--dist,0))}}
.cl-empty{position:absolute;inset:0;display:grid;place-items:center}
.cl-empty img{width:42cqmin;border-radius:20%;box-shadow:0 2cqmin 4cqmin -1cqmin rgba(0,0,0,.5)}
.cl-empty b{font:900 8cqmin Montserrat;color:#fff;text-align:center;padding:0 6cqw}
.has-shot .cl-empty{display:none}
.cl-cursor{position:absolute;width:6cqmin;left:60%;top:40%;z-index:3;filter:drop-shadow(0 .6cqmin .8cqmin rgba(0,0,0,.5));animation:cursor 9s ease-in-out infinite}
@keyframes cursor{0%,100%{transform:translate(0,0)}25%{transform:translate(-18cqw,14cqh)}28%{transform:translate(-18cqw,14cqh) scale(.85)}31%{transform:translate(-18cqw,14cqh)}55%{transform:translate(8cqw,-12cqh)}75%{transform:translate(-6cqw,22cqh)}78%{transform:translate(-6cqw,22cqh) scale(.85)}81%{transform:translate(-6cqw,22cqh)}}
.cl-quote{position:absolute;left:5cqw;right:12cqw;bottom:4cqh;z-index:4;background:#fff;border-radius:2.4cqmin;padding:2.8cqmin 3.2cqmin;box-shadow:0 2.4cqmin 5cqmin -2cqmin rgba(0,0,0,.6);transform:rotate(-1.5deg);border-left:1cqmin solid var(--acc);opacity:0;animation:quoteIn .9s .6s var(--ease) forwards}
@keyframes quoteIn{from{opacity:0;transform:translateY(6cqh) rotate(-5deg)}to{opacity:1;transform:rotate(-1.5deg)}}
.cl-stars{color:#F2B705;font-size:3cqmin;letter-spacing:.3em}
.cl-quote blockquote{font:italic 500 3.2cqmin/1.4 'Playfair Display';color:#1A2E45;margin:1cqmin 0}
.cl-quote figcaption{font:700 2cqmin Montserrat;letter-spacing:.08em;color:#5A6672;text-transform:uppercase}
@media (max-width:760px){.spine{min-width:0;flex:1;padding:10px 12px 10px 22px}.spine span{display:none}}
.cl-quote blockquote{text-transform:none;letter-spacing:0}
.shelf{padding:0 16px}
.portfolio.has-shelf .book:not(.single){--W:clamp(640px,min(92vw,calc((100vh - 370px)*1.6)),1240px)}

/* ---------- Full-screen reading mode ---------- */
.ctl.zoom{width:auto;height:46px;border-radius:99px;padding:0 18px;gap:8px;display:flex;align-items:center;margin-left:10px;border-color:rgba(95,163,160,.6);background:rgba(95,163,160,.14)}
.ctl.zoom svg{width:18px;height:18px}
.ctl.zoom .zl{font:700 .85rem Montserrat}
.ctl.zoom .close,.portfolio.reading .ctl.zoom .open{display:none}
.portfolio.reading .ctl.zoom .close{display:block}
.pf-close{display:none}
body.reading-open{overflow:hidden}
.portfolio.reading{position:fixed;inset:0;z-index:300;overflow-y:auto;padding:22px 0 16px;display:flex;flex-direction:column;justify-content:center;animation:readIn .45s var(--ease)}
@keyframes readIn{from{opacity:0}}
.portfolio.reading .pf-head,.portfolio.reading .pf-hint{display:none}
.portfolio.reading .shelf{margin:0 auto 14px}
.portfolio.reading .controls{margin-top:22px}
.portfolio.reading .pf-close{display:grid;place-items:center;position:fixed;top:16px;right:18px;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-size:1.1rem;transition:background .25s}
.portfolio.reading .pf-close:hover{background:var(--teal)}
.portfolio.reading .book:not(.single){--W:clamp(640px,min(91vw,calc((100vh - 120px)*1.6)),1900px)}
.portfolio.reading.has-shelf .book:not(.single){--W:clamp(640px,min(91vw,calc((100vh - 200px)*1.6)),1900px)}
.portfolio.reading .book.single{--W:min(96vw,calc((100vh - 130px)/1.62))}
.portfolio.reading.has-shelf .book.single{--W:min(96vw,calc((100vh - 200px)/1.62))}
@media (max-width:760px){.ctl.zoom{padding:0 14px}.ctl.zoom .zl{display:none}.ctl.zoom{width:46px;padding:0;justify-content:center;margin-left:0}}

/* ---------- toast + pay link ---------- */
.toast{position:fixed;left:0;right:0;bottom:28px;margin:0 auto;width:max-content;max-width:calc(100vw - 32px);transform:translateY(140px);background:var(--navy-deep);color:#fff;font:700 .92rem Montserrat;padding:13px 22px;border-radius:99px;box-shadow:0 16px 40px -14px rgba(0,0,0,.6);z-index:900;transition:transform .4s var(--ease);text-align:center}
.toast.on{transform:none}
.term a.paylink{display:inline-block;margin-top:6px;font:700 .86rem Montserrat;color:var(--teal-2);border-bottom:1.5px solid rgba(95,163,160,.5)}
.term a.paylink:hover{color:#fff;border-color:#fff}

/* ---------- refinements (Sept 2026) ---------- */
/* toast fully hidden until shown */
.toast{visibility:hidden;opacity:0;transition:transform .4s var(--ease),opacity .3s,visibility 0s .4s}
.toast.on{visibility:visible;opacity:1;transition:transform .4s var(--ease),opacity .3s,visibility 0s}
/* page-turn hint: touch vs mouse wording */
.pf-hint .h-touch{display:none}
@media (hover:none){.pf-hint .h-mouse{display:none}.pf-hint .h-touch{display:inline}}
/* easy-payment card icon */
.term b.pay-ic{width:52px;height:52px;border-radius:14px;background:rgba(95,163,160,.16);display:grid;place-items:center}
.term b.pay-ic svg{width:26px;height:26px;color:var(--teal-2)}
/* book controls fit on phones */
@media (max-width:760px){
  .controls{gap:8px;padding:0 12px}
  .ctl{width:44px;height:44px;flex:none}
  .ctl svg{width:20px;height:20px}
  .ctl.zoom{width:44px;height:44px}
  .ctl.snd{width:38px;height:38px}
  .ctl-label{flex:1 1 0;min-width:0;max-width:200px}
  .ctl-label b{font-size:.84rem;line-height:1.25}
  .ctl-label span{font-size:.8rem}
  .mail strong{font-size:clamp(.74rem,3.6vw,.9rem);overflow-wrap:normal;word-break:normal;white-space:nowrap}
  .mail>span:last-child{min-width:0}
  .mail .ic{width:42px;height:42px}
  .mail{gap:12px}
}
/* laptop-size book: keep contents + welcome pages inside the page */
@container (max-width:430px) and (max-height:600px){
  .toc-h{margin:4cqw 0 2.4cqw}
  .toc-list{gap:.4cqw}
  .toc-row{padding:.7cqw 1.4cqw}
  .toc-row .t small{margin-top:.2cqw}
  .toc-note{font-size:max(16px,3.4cqw);padding-bottom:6.5cqw}
  .in-role{letter-spacing:.12em}
  .in-hand{margin-bottom:2cqw}
}