:root{--night:#171717;--deep:#171717;--cream:#f4f0e7;--gold:#b08d57;--olive:#214e4b;--muted:#bcbab5;--line:#ffffff24;--display:'Cormorant Garamond',Georgia,serif;--body:'Manrope','Segoe UI',sans-serif;--page:clamp(24px,5.5vw,110px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--night);color:var(--cream);font:16px/1.6 var(--body);overflow-x:clip}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--display);line-height:.95;font-weight:600;letter-spacing:-.02em}h2{font-size:clamp(48px,5.7vw,88px)}h3{font-size:32px}p{font-weight:400}::selection{background:var(--gold);color:var(--night)}:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.light :focus-visible{outline-color:#214e4b}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:20px;z-index:200;background:var(--gold);color:var(--night);padding:10px}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gold-text{color:var(--gold)}.olive-text{color:var(--olive)}.tiny,.eyebrow{font:500 10px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase}.eyebrow{font-size:11px;letter-spacing:.17em}.eyebrow i{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:9px}.reading-progress{height:3px;background:var(--gold);position:fixed;top:0;left:0;width:100%;transform:scaleX(0);transform-origin:left;z-index:110}.header{height:96px;position:absolute;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page);border-bottom:1px solid var(--line);gap:32px;transition:background .3s}.header.scrolled{position:fixed;height:76px;background:#171717f5;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand img{border-radius:50%;width:44px;height:44px}.brand>span{font:700 32px/.8 var(--display);letter-spacing:.05em}.brand small{font:500 9px var(--body);letter-spacing:.6em;display:block;margin-top:8px;padding-left:2px}.header nav{display:flex;align-items:center;gap:30px}.header nav a{font-size:12px;position:relative;color:#f4f0e7}.header nav a:after{content:'';position:absolute;left:0;bottom:-8px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}.header nav a:hover:after{transform:scaleX(1)}.header-actions{display:flex;align-items:center;gap:18px}.menu-toggle{display:none}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid transparent;min-height:54px;padding:15px 24px;font:600 13px/1.4 var(--body);transition:background .25s,transform .25s,color .25s}.button span{font-size:24px;line-height:1;transition:transform .25s}.button:hover span{transform:translate(3px,-3px)}.button:hover{transform:translateY(-2px)}.button.gold{background:var(--gold);color:var(--night)}.button.gold:hover{background:#b08d57}.button.dark{background:var(--night);color:var(--cream)}.button.compact{min-height:42px;padding:10px 17px;font-size:11px;gap:22px}.text-link{display:inline-flex;align-items:center;gap:24px;border:0;background:none;padding:9px 0;font-size:12px;line-height:1.5;border-bottom:1px solid #ffffff40;transition:color .2s}.text-link:hover{color:var(--gold)}.text-link span{font-size:20px}.dark-link{border-color:#17171730}.dark-link:hover{color:#214e4b}
.hero{position:relative;min-height:840px;height:min(940px,100svh);padding:175px var(--page) 88px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:20px;isolation:isolate;overflow:hidden}.hero-lines{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 49.94%,#ffffff05 50%,transparent 50.06%),linear-gradient(90deg,transparent 24.94%,#ffffff05 25%,transparent 25.06%)}.hero-copy{position:relative;z-index:3}.hero .eyebrow{color:#f4f0e7;margin-bottom:27px}.hero h1{font-size:clamp(78px,8.5vw,144px);font-weight:600;line-height:.91;letter-spacing:-.022em;white-space:nowrap}.hero-line{display:block;animation:hero-in 1s cubic-bezier(.22,.61,.36,1) both}.hero-line:nth-child(2){animation-delay:.13s}.hero-line:nth-child(3){animation-delay:.26s}.hero .dot{color:var(--cream)}.hero-copy>p{margin-top:30px;font-size:16px;color:#bcbab5;line-height:1.6}.hero-buttons{display:flex;align-items:center;gap:32px;margin-top:26px}.hero-enter{animation:hero-in 1s .35s both}.hero-locations{display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.13em;margin-top:52px}.hero-locations b{color:var(--gold);font-weight:400}.location-note{border-left:1px solid var(--line);padding-left:18px;color:#bcbab5;font-size:10px;letter-spacing:0}.hero-visual{height:100%;min-height:530px;position:relative;align-self:stretch;margin-left:26px;max-height:670px}.photo-frame{position:absolute;inset:0;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%,0 13%);overflow:hidden;background:#214e4b}.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:saturate(.38);transform:scale(1.03);animation:photo-in 1.8s cubic-bezier(.2,.6,.3,1) both}.photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,#17171710 40%,#171717ab),linear-gradient(90deg,#17171735,transparent 35%)}.vertical-caption{position:absolute;right:18px;top:24px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em;color:#f4f0e7}.photo-index{position:absolute;bottom:29px;right:26px;font-size:10px;letter-spacing:.1em}.photo-index span{color:#f4f0e7}.orbit{position:absolute;width:142px;height:142px;right:-35px;top:-32px;border-radius:50%;background:var(--gold);color:var(--night);z-index:4}.orbit svg{width:100%;height:100%;animation:rotate 35s linear infinite}.orbit text{font:600 11.4px var(--body);letter-spacing:1.8px;fill:var(--night)}.orbit>span{position:absolute;inset:0;display:grid;place-items:center;font:300 60px var(--body)}.visual-label{position:absolute;left:-32px;bottom:39px;background:#f4f0e7ec;backdrop-filter:blur(16px);color:var(--night);padding:19px 23px;min-width:237px;display:grid;grid-template-columns:1fr 43px;gap:4px 15px;z-index:2}.visual-label .tiny{grid-column:1/-1;font-size:8px}.visual-label strong{font-size:20px;letter-spacing:-.04em;font-weight:500}.mini-chart{display:flex;gap:3px;align-items:end;height:25px}.mini-chart i{width:3px;background:var(--olive);height:30%;animation:bars 2s ease-in-out infinite alternate}.mini-chart i:nth-child(2n){height:70%;animation-delay:.3s}.mini-chart i:nth-child(3n){height:100%;animation-delay:.7s}.scroll-cue{position:absolute;bottom:24px;left:var(--page);display:flex;align-items:center;gap:17px;font-size:9px;letter-spacing:.18em;color:#bcbab5}.scroll-cue>span{color:var(--gold);font-size:19px;animation:nudge 2s infinite}.ticker{overflow:hidden;background:var(--gold);color:var(--night);padding:16px 0}.ticker-track{display:flex;width:max-content;animation:marquee 37s linear infinite}.ticker-track>span{white-space:nowrap;font:600 30px/.95 var(--display);letter-spacing:.01em}.ticker b{font:400 25px var(--body);display:inline-block;margin:0 36px;vertical-align:middle}
.section{padding:100px var(--page)}.light{background:var(--cream);color:var(--night)}.section-top{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:56px}.section-top>.tiny{color:var(--muted);font-size:9px}.light .section-top>.tiny{color:#555555}.intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:10%;align-items:center}.intro-grid h2{font-size:clamp(62px,7vw,108px)}.intro-body{max-width:420px}.intro-body .lead{font-size:25px;line-height:1.4;letter-spacing:-.04em;margin-bottom:24px}.intro-body>p:not(.lead){font-size:15px;color:#555555;line-height:1.8;max-width:375px}.intro-body a{margin-top:26px}.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #17171726;margin-top:70px;padding-top:33px;gap:50px}.values>div{display:grid;grid-template-columns:42px 1fr;gap:5px 13px}.value-symbol{grid-row:1/3;font-size:35px;line-height:1;color:var(--olive)}.values h3{font:600 17px/1.3 var(--body);letter-spacing:-.03em}.values p{font-size:13px;color:#555555;max-width:250px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}.section-heading>p{font-size:14px;color:var(--muted);max-width:300px;padding-bottom:5px}.light .section-heading>p{color:#555555}.method{background:var(--deep)}.method-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:9%;align-items:center}.method-art{position:relative;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;max-width:470px;background:repeating-linear-gradient(0deg,transparent 0 37px,#ffffff05 38px),repeating-linear-gradient(90deg,transparent 0 37px,#ffffff05 38px)}.radar-ring{position:absolute;inset:10%;border:1px solid #b08d5735;border-radius:50%}.radar-ring.r2{inset:21%}.radar-ring.r3{inset:32%}.radar-line{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,#b08d5719 359deg,#b08d5770 360deg);animation:rotate 15s linear infinite}.radar-cross:before,.radar-cross:after{content:'';position:absolute;background:#b08d5730}.radar-cross:before{height:1px;left:4%;right:4%;top:50%}.radar-cross:after{width:1px;top:4%;bottom:4%;left:50%}.radar-n{position:absolute;inset:0;display:grid;place-items:center;font:500 clamp(90px,11vw,180px)/1 var(--display);color:var(--gold);padding-bottom:12px}.radar-label{position:absolute;top:72%;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.25em;color:var(--gold)}.radar-corner{position:absolute;left:15px;top:15px;font-size:8px;letter-spacing:.13em;color:var(--muted)}.radar-dot{position:absolute;right:23%;top:22%;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px #b08d5799}.method-step{border-top:1px solid var(--line)}.method-step:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.method-step summary{display:flex;align-items:center;gap:20px;padding:24px 0}.method-step summary>span{font-size:11px;color:var(--muted);width:22px}.method-step summary h3{font:500 21px/1.3 var(--body);letter-spacing:-.04em;flex:1}.method-step summary>b{font-size:23px;font-weight:300;color:var(--muted);transition:transform .3s}.method-step[open] summary h3,.method-step[open] summary>span{color:var(--gold)}details[open] summary>b{transform:rotate(45deg)}.step-content{padding:0 24px 25px 42px;animation:hero-in .35s both}.step-content p{font-size:14px;color:#bcbab5;max-width:370px;line-height:1.8}.step-content .tiny{display:block;color:var(--gold);font-size:9px;margin-top:18px}
.course-filters{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}.filter{border:1px solid #17171730;background:transparent;color:var(--night);padding:10px 18px;font-size:11px;border-radius:2px;min-height:42px;transition:.2s}.filter span{margin-left:16px;opacity:.65}.filter.active{background:var(--night);color:var(--cream);border-color:var(--night)}.filter:hover{border-color:var(--olive)}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.course-card{position:relative;min-width:0;padding:28px;min-height:405px;display:flex;flex-direction:column;overflow:hidden;transition:transform .4s,box-shadow .4s}.course-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #17171712}.course-card>.tiny{font-size:9px}.course-card h3{font-size:45px;margin-top:auto;letter-spacing:-.01em}.course-card p{font-size:13px;line-height:1.7;margin-top:17px;max-width:270px;min-height:44px}.card-link{display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-top:1px solid currentColor;padding:15px 0 0;margin-top:23px;font:500 11px var(--body);width:100%;text-align:left}.card-link span{font:400 23px var(--body);transition:transform .3s}.card-link:hover span{transform:translate(3px,-3px)}.photo-card{color:white;background:#171717;min-height:490px}.photo-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 50%;filter:saturate(.35);transition:transform 1s}.photo-card:hover>img{transform:scale(1.04)}.photo-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0004,#0002 25%,#000c 80%,#000d)}.card-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;flex:1}.card-content>.tiny{font-size:9px}.olive-card{background:var(--olive);color:#f4f0e7}.cream-card{background:#f4f0e7}.card-art{height:180px;display:flex;align-items:center;justify-content:center}.fire-art{gap:14px}.fire-art span{height:100px;width:30px;border-radius:50px;transform:rotate(28deg);border:1px solid #f4f0e780;transition:transform .6s}.fire-art span:nth-child(2){height:130px;background:#f4f0e713}.olive-card:hover .fire-art span{transform:rotate(-28deg)}.longevity-art{font:300 165px/.9 Georgia,serif;letter-spacing:-20px;padding-right:20px;color:var(--olive);transition:transform 1s}.cream-card:hover .longevity-art{transform:rotate(15deg)}.small-card{border:1px solid #17171728;min-height:290px;padding-top:25px}.small-card h3{font-size:35px;margin-top:30px}.small-card p{color:#555555;flex:1}.small-card .card-link{border-color:#17171740}
.start{display:grid;grid-template-columns:1fr 1.05fr;gap:12%;background:#171717;position:relative}.start-copy h2{font-size:clamp(65px,7.5vw,116px);margin-top:33px}.start-copy>p{font-size:15px;color:var(--muted);margin-top:25px}.start-symbol{font:300 145px/1 var(--body);color:var(--gold);margin:28px 0 20px}.start-copy>.tiny{color:#bcbab5;font-size:8px}.finder{background:#171717;border:1px solid #ffffff13;padding:32px;align-self:start;min-height:516px}.finder-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--line);margin-bottom:30px}.finder-top>.tiny{color:var(--gold);font-size:9px}.finder-dots{display:flex;gap:6px}.finder-dots i{width:25px;height:3px;background:#ffffff20}.finder-dots i.on{background:var(--gold)}fieldset{padding:0;border:0;margin:0;min-width:0}legend{font:500 30px/1.15 var(--body);letter-spacing:-.06em;margin-bottom:25px;padding:0}.option{position:relative;display:flex;align-items:center;gap:13px;border:1px solid #ffffff26;margin-top:10px;padding:16px;cursor:pointer;transition:border .2s,background .2s;min-height:80px}.option input{accent-color:var(--gold);width:15px;height:15px;margin:0;flex-shrink:0}.option span{flex:1}.option b{display:block;font-size:13px;font-weight:500}.option small{display:block;color:#bcbab5;font-size:10px;margin-top:3px}.option>i{font-style:normal;color:var(--gold);font-size:22px;opacity:0;transition:opacity .2s}.option:has(input:checked){background:#b08d570c;border-color:var(--gold)}.option:has(input:checked)>i,.option:hover>i{opacity:1}.option:hover{border-color:#b08d5788}.finder-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px}.finder-bottom #finder-hint{font-size:10px;color:#bcbab5;max-width:120px}.finder-bottom .button{margin-left:auto;min-height:45px;padding:12px 18px;font-size:12px;gap:22px}.finder-bottom .button:disabled{opacity:.38;transform:none}.finder-note{font-size:11px;color:#bcbab5;line-height:1.6;margin-top:20px}.finder-result{animation:hero-in .4s both}.result-check{color:var(--gold);font-size:54px;line-height:1;display:block;margin-bottom:20px}.finder-result h3{font-size:49px}.finder-result>p:not(.finder-note){font-size:14px;color:#bcbab5;margin:20px 0;line-height:1.8}.finder-result .text-link{margin-top:22px}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.team-photo{position:relative;aspect-ratio:1/1.14;overflow:hidden;background:#214e4b;align-self:start}.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.16);transform-origin:50% 20%}.team-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:#171717e8;color:#f4f0e7;font-size:8px;letter-spacing:.12em;padding:16px 20px}.team h2{font-size:clamp(42px,4.9vw,73px)}.team-intro{color:#555555;font-size:14px;margin:24px 0}.team-list>div{padding:13px 0;border-top:1px solid #17171720}.team-list b{display:block;font-weight:500;font-size:15px}.team-list span{font-size:10px;color:#555555;display:block;margin-top:3px}.manifesto{position:relative;background:var(--olive);text-align:center;padding:86px 24px 94px;overflow:hidden}.manifesto .eyebrow{font-size:9px;color:#f4f0e7;position:relative;z-index:1}.manifesto p{font:600 clamp(45px,6.7vw,103px)/1.02 var(--display);margin:30px 0 25px;position:relative;z-index:1}.manifesto p span{color:#f4f0e7}.manifesto-caption{font-size:13px;position:relative;z-index:1}.manifesto-line{position:absolute;border:1px solid #ffffff15;width:900px;height:900px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.manifesto-line:before,.manifesto-line:after{content:'';position:absolute;inset:45px;border:1px solid #ffffff13;border-radius:50%}.manifesto-line:after{inset:100px}.locations-grid{display:grid;grid-template-columns:1.1fr 1fr;min-height:480px;background:#f4f0e7}.location-selector{padding:32px 38px;display:flex;flex-direction:column}.location-tabs{display:flex;border-bottom:1px solid #17171725;gap:25px}.location-tabs button{background:none;border:0;padding:8px 0 20px;color:#555555;text-align:left;font-size:18px;position:relative;flex:1}.location-tabs button span{font-size:10px;float:right;padding-top:5px}.location-tabs button[aria-selected=true]{color:#171717}.location-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;height:2px;background:#171717;left:0;right:0}.location-panel{padding-top:34px;animation:hero-in .4s both}.location-panel>.tiny{font-size:9px;color:var(--olive)}.location-panel h3{font-size:50px;margin:17px 0 20px}.location-panel p{font-size:14px;color:#555555}.location-links{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:24px}.location-links .button{font-size:11px;padding:12px 16px;min-height:44px;gap:20px}.location-links .text-link{font-size:11px}.review-link{display:block;font-size:11px;text-decoration:underline;text-underline-offset:4px;margin-top:18px;color:#555555}.location-hours{font-size:10px;color:#555555;margin-top:24px}.studio-photo{position:relative;overflow:hidden;min-height:480px}.studio-photo img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:center 50%;transform:scale(1.12);filter:saturate(.55);transition:transform .8s}.studio-photo:hover img{transform:scale(1.17)}.studio-photo:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#171717aa)}.studio-caption{position:absolute;bottom:26px;left:28px;right:28px;color:white;z-index:2;display:flex;justify-content:space-between;align-items:center}.studio-caption>span{font-size:8px;letter-spacing:.12em}.studio-caption b{font-size:16px;letter-spacing:-.02em;font-weight:500;display:inline-block;margin-top:8px}.studio-caption>i{font-size:35px;font-style:normal}.faq{padding-top:0}.faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:10%;margin-top:35px}.faq h2{font-size:65px}.faq details{border-top:1px solid #17171726}.faq details:last-child{border-bottom:1px solid #17171726}.faq summary{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:14px;font-weight:500;gap:30px}.faq summary span{font-size:24px;font-weight:400}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{padding:0 40px 23px 0;font-size:13px;line-height:1.8;color:#555555;animation:hero-in .3s both}.final-cta{padding:90px var(--page);display:flex;align-items:center;justify-content:space-between;gap:40px}.final-cta .eyebrow{font-size:9px;color:var(--muted)}.final-cta h2{font-size:clamp(64px,7.4vw,110px);margin-top:25px}.circle-cta{width:175px;height:175px;flex-shrink:0;border:1px solid #b08d5788;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);transition:background .3s,color .3s,transform .3s}.circle-cta>span{font:300 68px/1 var(--body);margin-bottom:15px}.circle-cta>b{font-size:9px;font-weight:500;letter-spacing:.13em}.circle-cta:hover{background:var(--gold);color:var(--night);transform:rotate(-8deg)}.footer{padding:40px var(--page) 24px;background:var(--deep);border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:36px}.footer-top p{font-size:12px;color:var(--muted)}.footer-top>a:last-child{font-size:12px}.footer-bottom{border-top:1px solid var(--line);padding-top:21px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;color:#bcbab5}.footer-bottom button{background:none;border:0;border-bottom:1px solid #ffffff30;font-size:10px;padding:6px 0;min-height:32px;color:#bcbab5}dialog{border:1px solid #b08d5750;background:var(--night);color:var(--cream);max-width:560px;width:calc(100% - 40px);padding:50px;margin:auto;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#171717e6;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:17px;top:12px;border:0;background:none;font-size:32px;padding:0 8px;color:var(--gold)}dialog h2{font-size:64px;margin:25px 0;text-transform:uppercase}dialog>p{font-size:15px;color:#bcbab5;line-height:1.8}.dialog-meta{border-block:1px solid var(--line);padding:15px 0;margin:24px 0;font-size:12px;color:var(--gold)}.reveal{transition:opacity .7s,transform .8s cubic-bezier(.22,.61,.36,1)}.js-motion .reveal:not(.visible){opacity:0;transform:translateY(25px)}.values .reveal:nth-child(2){transition-delay:.1s}.values .reveal:nth-child(3){transition-delay:.2s}
@keyframes hero-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes photo-in{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1.03)}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes nudge{50%{transform:translateY(6px)}}@keyframes bars{to{height:50%}}
@media(min-width:1700px){.hero{gap:8%;grid-template-columns:1.1fr 1fr}.hero-visual{margin-right:40px}.section{padding-block:120px}.header nav{gap:45px}.hero h1{font-size:152px}}
@media(max-width:1100px){.header{gap:20px}.header nav{gap:18px}.hero{min-height:760px;grid-template-columns:1.15fr 1fr;padding-top:160px}.hero h1{font-size:9vw}.hero-visual{margin-left:0;min-height:495px}.hero .eyebrow{font-size:8px}.hero-buttons{gap:22px}.hero .button{gap:20px;padding:15px 18px}.location-note{display:none}.orbit{right:-20px;width:116px;height:116px}.visual-label{left:-15px;min-width:210px;padding:17px}.section{padding-block:80px}.start{gap:7%}.finder{padding:25px}.course-card{padding:23px}.course-card h3{font-size:39px}.small-card h3{font-size:30px}.team-photo{aspect-ratio:1/1.4}.team-photo img{object-position:50% 0;transform:scale(1.25);transform-origin:50% 0}.team-grid{gap:6%}.section-top>.tiny{font-size:8px}.faq{padding-top:0}}
@media(max-width:820px){html{scroll-padding-top:90px}.header{height:78px}.header .brand>span{font-size:27px}.brand img{width:38px;height:38px}.header nav{display:none;position:absolute;top:77px;left:0;right:0;background:var(--night);padding:25px var(--page);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.header nav.open{display:flex}.header nav a{font-size:17px;padding:12px 0}.header nav a:after{bottom:0}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;border:1px solid #ffffff38;background:transparent}.menu-toggle span{display:block;width:18px;height:1px;background:var(--cream);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.hero{min-height:690px;height:auto;padding-top:150px;padding-bottom:85px;gap:0;grid-template-columns:1.1fr 1fr}.hero h1{font-size:9.4vw}.hero-visual{min-height:440px}.hero-copy>p{font-size:14px}.hero-buttons{align-items:start;flex-direction:column;gap:12px}.hero-locations{margin-top:25px;font-size:9px}.hero .eyebrow{font-size:7px;letter-spacing:.08em}.orbit{width:100px;height:100px;top:-35px;right:-8px}.orbit>span{font-size:42px}.visual-label{padding:14px;min-width:175px;bottom:22px;left:0}.visual-label strong{font-size:17px}.visual-label .tiny{font-size:6px}.mini-chart{height:21px}.photo-index{display:none}.vertical-caption{font-size:7px;right:10px}.section-top{margin-bottom:38px}.section-top>.tiny{display:none}.intro-grid{gap:7%}.intro-grid h2{font-size:64px}.intro-body .lead{font-size:21px}.intro-body>p:not(.lead){font-size:13px}.values{gap:20px}.values>div{display:block}.values h3{margin-top:15px;font-size:15px}.values p{font-size:12px;margin-top:8px}.section-heading>p{font-size:12px;max-width:200px}.method-grid{gap:6%;grid-template-columns:.8fr 1.2fr}.method-step summary{gap:12px;padding-block:20px}.method-step summary h3{font-size:17px}.step-content{padding-left:33px}.step-content p{font-size:12px}.radar-label{font-size:7px}.course-grid{grid-template-columns:repeat(2,1fr)}.course-card{min-height:355px}.photo-card{min-height:430px}.small-card{min-height:290px}.start{grid-template-columns:1fr;gap:36px}.start-copy h2{font-size:80px;margin-top:24px}.start-copy>p br{display:none}.start-symbol{display:none}.start-copy>.tiny{display:none}.finder{min-height:0}.team-grid{grid-template-columns:1fr 1.1fr}.team h2{font-size:44px}.team-intro{font-size:12px}.team-list b{font-size:13px}.team-list span{font-size:9px}.locations-grid{grid-template-columns:1.2fr .8fr}.location-selector{padding:25px}.studio-photo{min-height:450px}.location-panel h3{font-size:40px}.location-links{gap:8px}.location-links .text-link{font-size:10px}.location-panel p{font-size:12px}.faq-grid{gap:8%;grid-template-columns:.8fr 1.2fr}.faq h2{font-size:50px}.faq summary{font-size:12px}.final-cta{padding-block:70px}.circle-cta{width:130px;height:130px}.circle-cta>span{font-size:48px}.footer-top{flex-wrap:wrap}.footer-bottom{flex-wrap:wrap}}
@media(max-width:560px){:root{--page:23px}.header-actions{gap:9px}.header .button.compact{font-size:9px;padding:9px 11px;gap:12px;min-height:38px}.header .button.compact span{font-size:17px}.header .brand img{display:none}.header{gap:15px}.header .brand small{font-size:7px}.menu-toggle{width:36px;height:38px}.hero{padding-top:123px;min-height:0;grid-template-columns:1fr;padding-bottom:60px}.hero-copy{z-index:4}.hero .eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:24px}.hero h1{font-size:clamp(68px,14.8vw,90px);line-height:.94}.hero-copy>p{font-size:14px;line-height:1.65;margin-top:23px}.hero-buttons{flex-direction:row;align-items:center;gap:22px;margin-top:22px}.hero .button{font-size:11px;min-height:48px;padding:12px 17px;gap:18px}.hero .text-link{font-size:10px;gap:10px}.hero-locations{margin-top:29px}.hero-visual{height:385px;min-height:0;margin:42px 0 0 38px}.photo-frame{clip-path:polygon(15% 0,100% 0,100% 100%,0 100%,0 14%)}.hero-photo{object-position:center 48%}.orbit{top:-33px;right:5px;width:93px;height:93px}.visual-label{left:-38px;bottom:25px;min-width:225px;padding:16px 20px}.visual-label strong{font-size:22px}.visual-label .tiny{font-size:7px}.mini-chart{height:25px}.scroll-cue{bottom:18px;font-size:7px}.ticker{padding:15px 0}.ticker-track>span{font-size:24px}.ticker b{font-size:19px;margin:0 22px}.section{padding-block:62px}.section-top{margin-bottom:32px}.section-top .eyebrow{font-size:9px}.intro-grid{grid-template-columns:1fr;gap:30px}.intro-grid h2{font-size:66px}.intro-body .lead{font-size:23px}.intro-body>p:not(.lead){font-size:14px;max-width:none}.values{grid-template-columns:1fr;margin-top:40px;padding-top:26px;gap:24px}.values>div{display:grid;grid-template-columns:36px 1fr;gap:3px 16px}.values h3{margin:0;font-size:16px}.values p{font-size:13px;margin:4px 0 0;max-width:none}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:58px}.section-heading>p{margin-top:24px;max-width:none;font-size:13px}.method-grid{grid-template-columns:1fr;gap:28px}.method-art{max-width:100%;aspect-ratio:1.7}.radar-ring{inset:-25% 12%}.radar-ring.r2{inset:-5% 24%}.radar-ring.r3{inset:15% 35%}.radar-line{inset:-25% 12%}.radar-n{font-size:112px}.radar-label{top:79%;font-size:8px}.method-step summary h3{font-size:18px}.step-content p{font-size:13px}.course-filters{gap:6px;margin-bottom:22px}.filter{font-size:10px;padding:9px 11px;min-height:38px}.filter span{margin-left:8px}.course-grid{grid-template-columns:1fr;gap:14px}.course-card{min-height:350px;padding:26px}.photo-card{min-height:450px}.photo-card>img{object-position:50% 55%}.course-card h3{font-size:45px}.course-card p{font-size:14px;max-width:none}.small-card{min-height:275px}.small-card h3{font-size:36px}.card-link{min-height:44px;font-size:12px}.card-art{height:145px}.start-copy h2{font-size:78px}.start-copy>p{font-size:14px}.finder{padding:22px 18px}.finder-top{margin-bottom:25px}legend{font-size:27px}.option{padding:14px 11px;gap:10px}.option b{font-size:12px}.option small{font-size:10px}.option>i{font-size:18px}.finder-bottom{gap:10px}.finder-bottom #finder-hint{font-size:9px}.finder-bottom .button{font-size:11px;padding:11px 14px;gap:15px}.team-grid{grid-template-columns:1fr;gap:35px}.team-photo{aspect-ratio:1.05}.team-photo img{object-position:50% 18%;transform:scale(1.18);transform-origin:50% 10%}.team h2{font-size:55px}.team-intro{font-size:14px}.team-list b{font-size:16px}.team-list span{font-size:11px}.team-list>div{padding:16px 0}.manifesto{padding:62px 16px}.manifesto p{font-size:49px;margin:25px 0}.manifesto-caption{font-size:11px}.locations-grid{grid-template-columns:1fr}.location-selector{padding:25px 22px}.location-panel h3{font-size:46px}.location-panel p{font-size:14px}.location-tabs button{font-size:17px}.location-links{gap:20px}.location-links .text-link{font-size:11px}.studio-photo{min-height:320px}.studio-photo img{object-position:50% 48%}.faq{padding-top:0}.faq-grid{grid-template-columns:1fr;gap:28px;margin-top:24px}.faq h2{font-size:54px}.faq summary{font-size:14px;gap:20px}.faq details p{font-size:13px;padding-right:0}.final-cta{padding-block:62px;gap:24px;flex-wrap:wrap}.final-cta h2{font-size:59px}.circle-cta{width:105px;height:105px;margin-left:auto}.circle-cta>span{font-size:36px;margin-bottom:7px}.circle-cta>b{font-size:7px}.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:24px}.footer-top p{font-size:10px}.footer-top>a:last-child{grid-column:1/-1;font-size:12px}.footer-bottom{font-size:8px;gap:10px 20px}.footer-bottom>span:last-child{width:100%;margin-top:8px}dialog{padding:40px 26px}dialog h2{font-size:51px}.finder-result h3{font-size:45px}}
.team-photo{aspect-ratio:1.05}.team-photo img{position:absolute;width:138%;max-width:none;height:auto;left:-19%;top:-8%;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal:not(.visible){opacity:1;transform:none}}
html.motion-off{scroll-behavior:auto}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off .reveal{opacity:1!important;transform:none!important}


/* ============================================================
   v3 Chiaia · aggiunte Audex del 15/09/2026 (sopra: la base di Codex)
   ============================================================ */
/* Hero: etichetta con la valutazione Google al posto del grafico */
.visual-label.rating{grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;text-decoration:none;cursor:pointer;transition:transform .3s,box-shadow .3s}
.visual-label.rating:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px #0009}
.visual-label.rating>.tiny{grid-column:1/-1;font-size:8px}
.visual-label.rating strong{font:600 46px/1 var(--display);letter-spacing:-.02em}
.visual-label.rating .stars{display:flex;gap:2px}
.visual-label.rating .stars svg{width:15px;height:15px;fill:var(--gold)}
.visual-label.rating em{font-style:normal;font-size:10px;color:#555555;display:block;margin-top:5px;letter-spacing:.02em}
/* Metodo: rimando al primo passo sotto le cinque tappe */
.method-cta{margin-top:30px}
/* Primo passo: cosa succede dopo il messaggio */
.after{list-style:none;margin:36px 0 26px;padding:0;display:grid;gap:0;border-top:1px solid var(--line);max-width:420px}
.after li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.after li>span{font-size:11px;color:var(--gold);letter-spacing:.1em;padding-top:3px}
.after b{display:block;font-weight:500;font-size:15px;letter-spacing:-.02em}
.after small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.6}
/* Recensioni */
.reviews{padding-top:0}
.reviews-grid{display:grid;grid-template-columns:.75fr 1.55fr;gap:6%;align-items:start}
.score{position:sticky;top:110px}
.score-n{display:block;font:600 clamp(96px,11vw,160px)/.85 var(--display);letter-spacing:-.04em;color:var(--olive)}
.stars.big{display:flex;gap:4px;margin:18px 0 14px}
.stars.big svg{width:24px;height:24px;fill:var(--gold)}
.score-l{font-size:14px;color:#555555;line-height:1.6;margin-bottom:22px}
.score-l strong{color:var(--night);font-weight:600}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quotes blockquote{margin:0;background:#f4f0e7;padding:28px 26px;display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .4s,box-shadow .4s}
.quotes blockquote:hover{transform:translateY(-4px);box-shadow:0 18px 30px #17171710}
.quotes blockquote:before{content:'\201C';position:absolute;right:22px;top:6px;font:600 90px/1 var(--display);color:#17171712}
.quotes p{font-size:14.5px;line-height:1.75;color:#171717;flex:1}
.quotes cite{font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#555555}
.quotes .reveal:nth-child(2){transition-delay:.1s}.quotes .reveal:nth-child(3){transition-delay:.2s}.quotes .reveal:nth-child(4){transition-delay:.3s}
.reviews-note{font-size:11px;color:#555555;max-width:640px;margin-top:30px;line-height:1.7}
/* Le sedi: i fatti utili di ogni pannello */
.place-facts{margin:24px 0 0;padding-top:22px;border-top:1px solid #17171725;display:grid;gap:14px}
.place-facts>div{display:grid;grid-template-columns:112px 1fr;gap:12px;font-size:13px}
.place-facts dt{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);padding-top:4px;font-weight:500}
.place-facts dd{margin:0;color:#555555;line-height:1.65}
/* Finestra del percorso: due strade per scrivere */
.dialog-actions{display:flex;flex-direction:column;gap:14px;align-items:start}
/* Footer: link alle policy */
.footer-bottom a{color:inherit;border-bottom:1px solid #ffffff30}
/* Pulsante WhatsApp fisso */
.fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:12px;background:var(--gold);color:var(--night);padding:10px 22px 10px 14px;border-radius:999px;box-shadow:0 18px 40px -12px #000c;transform:translateY(150%);transition:transform .55s cubic-bezier(.16,1,.3,1),background .25s}
.fab.show{transform:none}
.fab:hover{background:#b08d57}
.fab svg{width:26px;height:26px;flex-shrink:0}
.fab span{display:flex;flex-direction:column;line-height:1.1;font:600 13px var(--body)}
.fab small{font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#214e4b}
@media(max-width:1100px){.reviews-grid{grid-template-columns:1fr;gap:40px}.score{position:static}}
@media(max-width:820px){.quotes{grid-template-columns:1fr}.after{max-width:none}}
@media(max-width:560px){.visual-label.rating strong{font-size:38px}.visual-label.rating{min-width:210px}.score-n{font-size:96px}.place-facts>div{grid-template-columns:1fr;gap:4px}.fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:14px;gap:0}.fab span{display:none}.fab svg{width:28px;height:28px}.quotes p{font-size:14px}}


/* === K30 Testo che regge il telefono: minimo 11 px, contrasto AA, taglia di sistema === */
/* Solo CSS, nessun movimento. Quattro parti: K30.1 rem, K30.2 contrasto, K30.3 minimo 11px
   sotto gli 820px, K30.4 titolo della hero sotto i 560px. motion.css è caricato dopo questo
   file: dove una sua regola ha la stessa specificità, qui il selettore ha un livello in più. */

/* K30.1 · Taglia di sistema. Il testo corrente passa in rem (1rem = carattere predefinito del
   browser, 16px se l'utente non l'ha cambiato), stessi valori di Codex divisi per 16.
   Restano in px, di proposito: i titoli in Barlow Condensed e le clamp() in vw (misurati sulla
   larghezza dello schermo: la hero è nowrap), i glifi (frecce, +, ×, ∞, ✳), il testo SVG
   dell'orbita, la filigrana LIBRA, l'etichetta della scena dell'atleta (lift-label). */
:root{--micro:.6875rem}
body{font-size:1rem}
.tiny,.eyebrow{font-size:.625rem}
.eyebrow{font-size:.6875rem}
.header nav a{font-size:.75rem}
.button{font-size:.8125rem}
.button.compact{font-size:.6875rem}
.text-link{font-size:.75rem}
.hero-copy>p{font-size:1rem}
.hero-locations,.location-note{font-size:.625rem}
.vertical-caption{font-size:.5625rem}
.photo-index{font-size:.625rem}
.visual-label .tiny,.visual-label.rating>.tiny{font-size:.5rem}
.visual-label.rating em{font-size:.625rem}
.scroll-cue{font-size:.5625rem}
.section-top>.tiny{font-size:.5625rem}
.intro-body .lead{font-size:1.5625rem}
.intro-body>p:not(.lead){font-size:.9375rem}
.values h3{font-size:1.0625rem}
.values p{font-size:.8125rem}
.section-heading>p{font-size:.875rem}
.method-step summary>span{font-size:.6875rem}
.method-step summary h3{font-size:1.3125rem}
.step-content p{font-size:.875rem}
.step-content .tiny{font-size:.5625rem}
.filter{font-size:.6875rem}
.course-card>.tiny,.card-content>.tiny{font-size:.5625rem}
.course-card p{font-size:.8125rem}
.card-link{font-size:.6875rem}
.start-copy>p{font-size:.9375rem}
.start-copy>.tiny{font-size:.5rem}
.finder-top>.tiny{font-size:.5625rem}
legend{font-size:1.875rem}
.option b{font-size:.8125rem}
.option small{font-size:.625rem}
.finder-bottom #finder-hint{font-size:.625rem}
.finder-bottom .button{font-size:.75rem}
.finder-note{font-size:.6875rem}
.finder-result>p:not(.finder-note){font-size:.875rem}
.after li>span{font-size:.6875rem}
.after b{font-size:.9375rem}
.after small{font-size:.75rem}
.team-photo figcaption{font-size:.5rem}
.team-intro{font-size:.875rem}
.team-list b{font-size:.9375rem}
.team-list span{font-size:.625rem}
.score-l{font-size:.875rem}
.quotes p{font-size:.90625rem}
.quotes cite{font-size:.5625rem}
.reviews-note{font-size:.6875rem}
.manifesto .eyebrow{font-size:.5625rem}
.manifesto-caption{font-size:.8125rem}
.location-panel>.tiny{font-size:.5625rem}
.location-panel p{font-size:.875rem}
.place-facts>div{font-size:.8125rem}
.place-facts dt{font-size:.5625rem}
.location-links .button,.location-links .text-link,.review-link{font-size:.6875rem}
.studio-caption>span{font-size:.5rem}
.studio-caption b{font-size:1rem}
.faq summary{font-size:.875rem}
.faq details p{font-size:.8125rem}
.final-cta .eyebrow{font-size:.5625rem}
.circle-cta>b{font-size:.5625rem}
.footer-top p{font-size:.75rem}
.footer-bottom{font-size:.5625rem}
.footer-bottom button{font-size:.625rem}
.fab span{font-size:.8125rem}
.fab small{font-size:.5rem}
dialog>p{font-size:.9375rem}
.dialog-meta{font-size:.75rem}
.footer .social-links>.tiny{font-size:.5rem}
.footer .social-links>a{font-size:.8125rem}
.lift-stage .lift-top{font-size:.5rem}
/* Se il testo cresce, le righe strette vanno a capo invece di uscire dal bordo. */
.finder-bottom{flex-wrap:wrap}

/* K30.2 · Contrasto AA nelle sezioni chiare. Rapporti calcolati il 16/09/2026 (WCAG 2.x):
   prima 4,45 / 4,43 / 4,26 / 4,32 / 4,46 / 3,74 · dopo 5,48 / 5,48 / 5,43 / 5,10 / 6,34 / 4,62. */
.values p,.reviews-note,.light .section-heading>p,.small-card p{color:#555555}
.quotes cite{color:#555555}
.place-facts dt,.location-panel>.tiny{color:#555555}
.fab small{color:#214e4b}
.manifesto .eyebrow{color:#f4f0e7}

@media(max-width:1100px){
/* Codex qui scendeva a 8px (eyebrow della hero) e 7px (intestazione dell'atleta): con 11px e
   spaziatura .1em l'eyebrow misura 329px nella colonna da 372px a 821px, una riga sola. */
.hero .eyebrow{font-size:var(--micro);letter-spacing:.1em;text-wrap:balance}
.lift-stage .lift-top{font-size:var(--micro)}
.section-top>.tiny{font-size:.5rem}
}

@media(max-width:820px){
/* K30.3 · Minimo 11px su telefono e tablet. La lista copre ogni selettore che a queste larghezze
   scende a 6–10px, con specificità pari o superiore alla regola che oggi vince (anche in motion.css).
   Chi aggiunge nuove etichette piccole usa font-size:var(--micro), mai un px sotto 11. */
.tiny,.eyebrow,
.hero .eyebrow,.section-top .eyebrow,.final-cta .eyebrow,.manifesto .eyebrow,dialog .eyebrow,
.section-top>.tiny,.step-content .tiny,.course-card>.tiny,.card-content>.tiny,.start-copy>.tiny,.finder-top>.tiny,.location-panel>.tiny,.visual-label .tiny,.visual-label.rating>.tiny,.footer .social-links>.tiny,
.hero-locations,.location-note,.scroll-cue,.vertical-caption,.visual-label.rating em,
.lift-stage .lift-top,
.option small,.finder-bottom #finder-hint,
.team-photo figcaption,.team-list span,.quotes cite,.place-facts dt,
.studio-caption>span,.location-links .text-link,
.circle-cta>b,.fab small,
.footer-bottom,.footer-bottom button{font-size:var(--micro)}
.hero-locations{flex-wrap:wrap;row-gap:6px}
/* Il cerchio finale segue il testo: a 130px «COMINCIAMO» a 11px ha 88px su una corda di 114. */
.circle-cta{width:8.125rem;height:8.125rem}
/* Testo corrente: stessi valori di Codex a questa larghezza, in rem. */
.header nav a{font-size:1.0625rem}
.hero-copy>p{font-size:.875rem}
.intro-body .lead{font-size:1.3125rem}
.intro-body>p:not(.lead){font-size:.8125rem}
.values h3{font-size:.9375rem}
.values p{font-size:.75rem}
.section-heading>p{font-size:.75rem}
.method-step summary h3{font-size:1.0625rem}
.step-content p{font-size:.75rem}
.team-intro{font-size:.75rem}
.team-list b{font-size:.8125rem}
.location-panel p{font-size:.75rem}
.faq summary{font-size:.75rem}
}

@media(max-width:560px){
/* K30.4 · Titolo della hero: mai oltre il margine. 4,7 è la larghezza in em di «IL TUO CORPO.»
   misurata (317px a 68px = 4,66em con spaziatura -.022em); 52px = 46px di margini di pagina
   + 6px di aria. Sotto i 372px prevale il secondo termine: a 360px dà 65,5px (riga 305px su
   314 disponibili), a 320px 57px (266px su 274). Sopra i 372px non cambia nulla. */
.hero h1{font-size:min(clamp(68px,14.8vw,90px),calc((100vw - 52px)/4.7))}
/* Etichette che solo qui scendevano sotto 11px. */
.header .button.compact,.hero .text-link,.filter,.footer-top p{font-size:var(--micro)}
/* Se il carattere di sistema è grande, il pulsante nell'intestazione va a capo invece di
   spingere fuori il menu (misurato: una riga fino al 125%, due righe al 150%). */
.header-actions{min-width:0}
.header .button.compact{min-width:0;white-space:normal;text-align:left}
.menu-toggle{flex-shrink:0}
.hero-buttons{flex-wrap:wrap}
.circle-cta{width:6.5625rem;height:6.5625rem}
.circle-cta>b{letter-spacing:.1em}
/* Testo corrente: stessi valori di Codex a questa larghezza, in rem. */
.hero .button{font-size:.6875rem}
.hero-copy>p{font-size:.875rem}
.intro-body .lead{font-size:1.4375rem}
.intro-body>p:not(.lead){font-size:.875rem}
.values h3{font-size:1rem}
.values p{font-size:.8125rem}
.section-heading>p{font-size:.8125rem}
.method-step summary h3{font-size:1.125rem}
.step-content p{font-size:.8125rem}
.course-card p{font-size:.875rem}
.card-link{font-size:.75rem}
.start-copy>p{font-size:.875rem}
legend{font-size:1.6875rem}
.option b{font-size:.75rem}
.finder-bottom .button{font-size:.6875rem}
.team-intro{font-size:.875rem}
.team-list b{font-size:1rem}
.manifesto-caption{font-size:.6875rem}
.location-panel p{font-size:.875rem}
.faq summary{font-size:.875rem}
.faq details p{font-size:.8125rem}
.quotes p{font-size:.875rem}
}
/* === fine K30 === */

/* === K27 Caricamento: font senza salto, un solo ritratto, animazioni solo a schermo (16/09/2026) === */
/* 1. Font di riserva a metriche allineate: le facce sono in assets/fonts.css. Ridefinisce le due variabili della riga 1. */
:root{--display:'Cormorant Garamond',Georgia,serif;--body:'Manrope','Segoe UI',sans-serif}
/* 2. Un solo ritratto. fondatori.jpg (1080×1350) viene ritagliato in CSS come faceva il vecchio ritaglio SVG (viewBox 110 125 860 675):
      la finestra 860×675 copre la cornice qualunque ne sia la proporzione, centrata sul punto (540, 462.5) dell'originale.
      Le cornici sono contenitori di dimensione (cqw/cqh); per i browser senza unità cq resta la riserva in percentuale. */
.hero .photo-frame{container-type:size}
.card-photo{position:absolute;left:0;top:0;width:100%;height:64%;overflow:hidden;container-type:size;transition:transform 1s}
.card-photo img{position:absolute;max-width:none;width:125.6%;height:auto;left:-12.8%;top:-17%;filter:saturate(.5)}
.hero .photo-frame img.hero-photo{width:156.9%;height:auto;left:-28.4%;top:-18.5%}
@supports (width:1cqw){
  .hero .photo-frame img.hero-photo,.card-photo img{--k:max(100cqw / 860,100cqh / 675);width:calc(1080 * var(--k));height:auto;left:calc(50cqw - 540 * var(--k));top:calc(50cqh - 462.5 * var(--k));transform-origin:50% 34.259%}
}
.photo-card:hover .card-photo{transform:scale(1.025)}
/* 3. Animazioni infinite in pausa fuori dallo schermo: la classe .paused la mette app.js sul blocco che le contiene.
      Con motion-off o prefers-reduced-motion le animazioni sono già spente da styles.css: qui non cambia nulla. */
.hero.paused .orbit svg,.hero.paused .scroll-cue>span,.ticker.paused .ticker-track,.footer.paused .brand img.brand-cutout{animation-play-state:paused}
/* 4. Telefono: niente sfocatura dietro l'intestazione agganciata e l'etichetta Google (costa GPU sopra la foto in parallasse). */
@media(max-width:820px){.header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:#171717fa}.visual-label{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:560px){.card-photo{height:66%}}
/* === fine K27 === */


/* === K16 Il tocco risponde: bersagli da 44 px, pressione, spunta, calamita === */
/* Nessuna riga sopra viene modificata. Le :hover di Codex restano al loro posto e si spengono qui sotto solo su touch (hover:none).
   Il prefisso "html" vince a pari specificità sulle regole di motion.css (caricato dopo). I selettori con :has() stanno sempre da soli. */

/* K16.1 Comandi: niente ritardo né zoom da doppio tocco; niente alone grigio di sistema su opzioni e tappe (la pressione la disegniamo noi) */
button,a,summary,label,input{touch-action:manipulation}
label.option,summary{-webkit-tap-highlight-color:transparent}

/* K16.2 Bersagli da 44 px sui dispositivi touch: si allarga l'area, non il segno.
   .scroll-cue è già position:absolute e non va nella lista dei relative. */
@media(pointer:coarse){
  .menu-toggle{width:44px;height:44px}
  .header .button.compact,.filter,.card-link{min-height:44px}
  .dialog-close{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;line-height:1;right:8px;top:8px}
  .text-link,.review-link,#motion-toggle,.footer-bottom a{position:relative}
  .text-link::before,.review-link::before,.scroll-cue::before,#motion-toggle::before,.footer-bottom a::before{content:'';position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px}
}

/* K16.3 Transizioni di base dove mancavano: servono al ritorno morbido dopo la pressione */
.option{transition:border-color .2s,background-color .2s,transform .2s}
.card-link,.menu-toggle,.dialog-close{transition:transform .2s}
.studio-photo{transition:transform .3s}
.text-link{transition:color .2s,opacity .2s}
.review-link,.footer-bottom a,#motion-toggle,.method-step summary,.faq summary,.scroll-cue,.header nav a{transition:opacity .2s}

/* K16.4 Sul touch l'hover non esiste: gli effetti che restano incollati dopo il tocco tornano allo stato di riposo.
   (.photo-card:hover .card-photo è lo zoom della foto spostato da K27 sul contenitore: si spegne qui come il vecchio >img.) */
@media(hover:none){
  html .button:hover,html .button:hover span,html .card-link:hover span,html .photo-card:hover>img,html .photo-card:hover .card-photo,html .cream-card:hover .longevity-art,html .visual-label.rating:hover,html .quotes blockquote:hover,html .brand:hover img.brand-cutout{transform:none}
  html .course-card:hover{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
  html .course-card:hover,html .visual-label.rating:hover,html .quotes blockquote:hover{box-shadow:none}
  html .studio-photo:hover img{transform:scale(1.12)}
  html .brand:hover img.brand-cutout{animation-play-state:running;filter:drop-shadow(0 0 9px #b08d5715)}
  html .button.gold:hover,html .fab:hover{background:var(--gold)}
  html .circle-cta:hover{background:transparent;color:var(--gold);transform:none}
  html .header nav a:hover:after{transform:scaleX(0)}
}

/* K16.5 La pressione: 80 ms in giù (2-3 %), ritorno con la transizione di base. Vale per mouse e touch */
html .button:active{transform:scale(.97);transition-duration:.08s}
html .card-link:active,html .filter:active,html .option:active,html .menu-toggle:active,html .dialog-close:active,html .visual-label.rating:active,html .studio-photo:active{transform:scale(.985);transition-duration:.08s}
html .fab.show:active{transform:scale(.96);transition-duration:.08s}
html .circle-cta:active{background:var(--gold);color:var(--night);transform:scale(.97);transition-duration:.08s}
html .course-card:has(.card-link:active){transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(.985);transition-duration:.08s}
html .button.gold:active{background:#b08d57}
html .button.dark:active{background:#171717}
html .option:active{border-color:var(--gold)}
html .filter:active{border-color:var(--olive)}
html .text-link:active,html .review-link:active,html .footer-bottom a:active,html #motion-toggle:active,html .header nav a:active,html .social-links>a:active,html .method-step summary:active,html .faq summary:active,html .scroll-cue:active{opacity:.6;transition-duration:.08s}

/* K16.6 Calamita (max 5 px) e combinazioni con l'hover: solo con mouse. Le variabili --mx e --my le scrive app.js */
@media(hover:hover) and (pointer:fine){
  html .button.gold{transform:translate(var(--mx,0px),var(--my,0px))}
  html .button.gold:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
  html .button.gold:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97)}
  html .button.gold:disabled,html .button.gold:disabled:hover{transform:none}
  html .circle-cta{transform:translate(var(--mx,0px),var(--my,0px))}
  html .circle-cta:hover{transform:translate(var(--mx,0px),var(--my,0px)) rotate(-8deg)}
  html .circle-cta:active{transform:translate(var(--mx,0px),var(--my,0px)) rotate(-8deg) scale(.96)}
  html .visual-label.rating:active{transform:translateY(-3px) scale(.985)}
}

/* K16.7 Selettore: la freccia diventa spunta; il focus da tastiera si vede sull'intera scheda.
   Le regole con :has() e quelle con le classi gemelle is-checked / is-focus (scritte da app.js) sono volutamente separate. */
.option>i{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0}
.option>i>span,.option>i>svg{grid-area:1/1}
.option>i>span{line-height:1;transition:opacity .2s,transform .3s}
.option>i>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:rotate(-30deg) scale(.6);transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.option:has(input:checked)>i>span{opacity:0;transform:translate(4px,-4px)}
.option.is-checked>i>span{opacity:0;transform:translate(4px,-4px)}
.option:has(input:checked)>i>svg{opacity:1;transform:none}
.option.is-checked>i>svg{opacity:1;transform:none}
.option.is-checked{background:#b08d570c;border-color:var(--gold)}
.option.is-checked>i{opacity:1}
.option:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.option.is-focus{outline:3px solid var(--gold);outline-offset:2px}
.option:has(input:focus-visible) input{outline:none}
.option.is-focus input{outline:none}

/* K16.8 Ritocchi alle larghezze già usate dal sito */
@media(max-width:820px){.footer-bottom{row-gap:16px}}
@media(max-width:560px){.option>i{width:22px;height:22px}.option>i>svg{width:18px;height:18px}}

/* K16.9 Movimento ridotto e interruttore «Animazioni»: pressione, calamita e sollevamenti non muovono nulla; restano i cambi di colore.
   Mai "html .fab" da solo in questa lista: il translateY(150%) che nasconde il pulsante fisso deve restare. */
@media(prefers-reduced-motion:reduce){
  html .button,html .button:hover,html .button:active,html .card-link:active,html .filter:active,html .option:active,html .menu-toggle:active,html .dialog-close:active,html .visual-label.rating:hover,html .visual-label.rating:active,html .studio-photo:active,html .fab.show:active,html .circle-cta,html .circle-cta:hover,html .circle-cta:active{transform:none!important}
  html .course-card:has(.card-link:active){transform:none!important}
}
html.motion-off .button,html.motion-off .button:hover,html.motion-off .button:active,html.motion-off .card-link:active,html.motion-off .filter:active,html.motion-off .option:active,html.motion-off .menu-toggle:active,html.motion-off .dialog-close:active,html.motion-off .visual-label.rating:hover,html.motion-off .visual-label.rating:active,html.motion-off .studio-photo:active,html.motion-off .fab.show:active,html.motion-off .circle-cta,html.motion-off .circle-cta:hover,html.motion-off .circle-cta:active{transform:none!important}
html.motion-off .course-card:has(.card-link:active){transform:none!important}
/* === fine K16 === */


/* === [K24] «Continua» sotto il pollice e pulsante fisso che si fa da parte === */
/* K24.1 Pulsante WhatsApp fisso. Fuori schermo (senza .show) o «da parte» (.away) sparisce anche per tastiera
   e lettori di schermo. In uscita la visibility aspetta la fine dello scivolamento (.55s), in entrata è immediata.
   Con html.motion-off e prefers-reduced-motion le regole globali azzerano le transizioni: cambio secco, nessun movimento. */
.fab{transition:transform .55s cubic-bezier(.16,1,.3,1),background .25s,visibility 0s linear .55s}
.fab:not(.show),.fab.away{visibility:hidden;transform:translateY(150%)}
.fab.show:not(.away){visibility:visible;transition-delay:0s,0s,0s}
/* K24.2 Finestra del percorso: la pagina dietro non scorre. Il canale della barra di scorrimento resta riservato,
   così su Windows la pagina non salta di lato quando lo scorrimento si blocca. */
html{scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
dialog{overflow:auto;overscroll-behavior:contain}
/* K24.3 Selettore: margine usato da scrollIntoView (si somma allo scroll-padding-top già presente su html) */
.finder{scroll-margin-top:12px}
/* K24.4 Barra del selettore agganciata al bordo inferiore su schermi fino a 820px.
   Le variabili replicano il padding di .finder (25px fino a 1100px; 22px 18px fino a 560px): se cambia quello, cambiano queste.
   Nessuna riga, nessun bordo: a riposo la barra è identica a oggi. La sfumatura (::before) copre il margine di 26px sopra la barra
   e si vede solo quando le opzioni le scorrono sotto. */
@media(max-width:820px){
  .finder{--k24-px:25px;--k24-pb:25px}
  .finder-bottom{position:sticky;bottom:0;z-index:2;margin:26px calc(var(--k24-px) * -1) calc(var(--k24-pb) * -1);padding:14px var(--k24-px) calc(14px + env(safe-area-inset-bottom,0px));background:#171717}
  .finder-bottom::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:26px;background:linear-gradient(180deg,#17171700,#171717);pointer-events:none}
  .finder .option input{scroll-margin-bottom:120px}
  .finder noscript .finder-note{margin-top:calc(20px + var(--k24-pb))}
}
@media(max-width:560px){
  .finder{--k24-px:18px;--k24-pb:22px}
}
/* K24.5 Schermo basso (telefono in orizzontale): la barra resta nel flusso, niente aggancio.
   position:relative e non static, così ::before resta ancorato alla barra e non al contenitore .start. */
@media(max-width:820px) and (max-height:430px){
  .finder-bottom{position:relative}
  .finder .option input{scroll-margin-bottom:0}
}
/* === fine K24 === */


/* === K09 Su telefono, prima la domanda === */
/* Griglia del primo passo. Da 821 px: titolo (riga 1) e «cosa succede dopo» (riga 2) nella colonna sinistra,
   selettore a destra su entrambe le righe. La riga 2 è 1fr: se il selettore è più alto del testo, lo spazio in più
   finisce sotto la lista, che resta attaccata al sottotitolo. row-gap esplicito a 0: il gap:12% di .start
   non deve introdurre spazio verticale tra sottotitolo e lista (la lista ha già il suo margine di 36px).
   Lo scroll-margin-top del selettore resta quello di K24.3 (12px, che si somma allo scroll-padding-top di html). */
.start{grid-template-rows:auto 1fr;row-gap:0}
.start-copy{grid-column:1;grid-row:1}
.start-after{grid-column:1;grid-row:2;align-self:start}
.finder{grid-column:2;grid-row:1/3}
/* Riga di chiusura ed etichetta: stesse taglie del vecchio .start-copy>.tiny (8px = .5rem, K30.1) e 9px = .5625rem.
   L'etichetta compare solo fino a 820 px: sopra la lista sta già sotto il sottotitolo. */
.start-after-note{display:block;color:#bcbab5;font-size:.5rem}
.start-after-label{display:none;color:var(--gold);font-size:.5625rem;margin-bottom:14px}
.start-after.reveal{transition-delay:.15s}
/* Respiro dorato del riquadro all'arrivo da una chiamata all'azione (classe .arrived messa e tolta da app.js).
   Anima solo box-shadow e border-color: nessun layout, un solo elemento, 900 ms. */
@keyframes finder-arrive{0%{box-shadow:0 0 0 0 #b08d5700;border-color:#ffffff13}30%{box-shadow:0 0 0 7px #b08d5755;border-color:var(--gold)}100%{box-shadow:0 0 0 0 #b08d5700;border-color:#ffffff13}}
.finder.arrived{animation:finder-arrive .9s ease-out}
@media(prefers-reduced-motion:reduce){.finder.arrived{animation:none}}
html.motion-off .finder.arrived{animation:none}
/* Fino a 820 px: una colonna, ordine DOM (titolo, selettore, cosa succede dopo). Si azzerano le posizioni esplicite
   e si ripristina il row-gap di 36px che la media query di Codex assegnava con gap:36px.
   Etichetta e riga di chiusura a 11px (var(--micro)), come vuole K30.3 per ogni testo piccolo su telefono. */
@media(max-width:820px){
  .start{grid-template-rows:none;row-gap:36px}
  .start-copy,.finder,.start-after{grid-column:auto;grid-row:auto}
  .start-after-label{display:block}
  .start-after-label,.start-after-note{font-size:var(--micro)}
  .start-after .after{margin-top:0;grid-template-columns:1fr 1fr;column-gap:32px}
  .start-after.reveal{transition-delay:0s}
}
@media(max-width:560px){
  .start-after .after{grid-template-columns:1fr}
}
/* === fine K09 === */


/* === K25 Le stelle Google nel primo schermo del telefono === */
/* L'etichetta «5,0 su Google» della hero è un solo nodo. Sotto i 560px app.js (blocco K25) la sposta in .hero-copy,
   subito dopo .hero-buttons; sopra i 560px la riporta sulla foto. Le regole qui sotto descrivono l'etichetta quando
   vive in .hero-copy e valgono a qualunque larghezza: niente media query sul layout, così nessuno stato intermedio
   può mostrarla assoluta dentro la colonna. Fuori da .hero-copy restano le regole esistenti. Senza JS non cambia nulla.
   Taglie del testo: la riga «SU GOOGLE» e la data non ridefiniscono il font-size, così vale il minimo di 11px
   (var(--micro)) che K30.3 impone sotto gli 820px. */
.hero-copy>.visual-label.rating{position:static;left:auto;bottom:auto;z-index:auto;width:100%;max-width:420px;min-width:0;margin:22px 0 0;padding:13px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 14px;background:#f4f0e7;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:none;animation:hero-in 1s .4s both}
.hero-copy>.visual-label.rating:hover,.hero-copy>.visual-label.rating:active{transform:none;box-shadow:none}
.hero-copy>.visual-label.rating:active{background:#f4f0e7}
.hero-copy>.visual-label.rating>.tiny{grid-column:1/-1;margin-bottom:8px}
.hero-copy>.visual-label.rating strong{font-size:32px;line-height:1}
.hero-copy>.visual-label.rating>span:not(.tiny){min-width:0}
.hero-copy>.visual-label.rating .stars svg{width:13px;height:13px}
.hero-copy>.visual-label.rating em{margin-top:3px;line-height:1.4}
.hero-copy>.visual-label.rating:after{content:'\2197';grid-column:3;grid-row:2;font:400 24px/1 var(--body);color:#555555;transition:transform .3s}
.hero-copy>.visual-label.rating:hover:after{transform:translate(2px,-2px)}
/* 820px: nessuna regola. Tra 561 e 820px l'etichetta resta sulla foto con le regole esistenti di .visual-label. */
/* 560px: solo un paracadute per l'etichetta ancora sulla foto (senza JS, o nel fotogramma teorico prima dello spostamento):
   compare con lo stesso ritardo della hero. Con JS attivo il nodo è già in .hero-copy e questa regola non si vede mai. */
@media(max-width:560px){.hero-visual .visual-label.rating{animation:hero-in .9s .6s both}}
/* === fine K25 === */


/* === K26 Metodo sul telefono: atleta compatto e tappe guidate === */
/* Sentinella sul bordo alto della griglia del metodo: in assoluto, quindi fuori dalla griglia e senza spazio */
.method-grid{position:relative}
.lift-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
/* «Tappa successiva»: pulsante creato da app.js in fondo a ogni tappa tranne l'ultima */
.step-next{margin-top:18px;min-height:44px;padding:11px 0;gap:16px;font-weight:500;color:var(--cream)}
.step-next:hover,.step-next:focus-visible{color:var(--gold)}
.step-next span{line-height:1;transition:transform .25s}
.step-next:hover span{transform:translateY(3px)}
@media(max-width:820px){.step-next{margin-top:16px}}
@media(max-width:560px){
  /* Misure lette anche da app.js: top sticky dell'atleta (lo stesso di motion.css), altezza intera e compatta della figura */
  .method-grid{--lift-top:78px;--lift-full:218px;--lift-mini:130px}
  /* Il margine sopra cresce di quanto la figura si accorcia: l'ingombro nel flusso resta 218px + bordi e le tappe sotto non si spostano mai.
     overflow-anchor:none evita che lo scroll anchoring di Chrome e Firefox compensi il movimento del blocco. */
  .method-grid .lift-stage{top:var(--lift-top);margin-top:0;overflow-anchor:none;transition:margin-top .35s cubic-bezier(.22,.61,.36,1)}
  .method-grid .lifter{height:var(--lift-full);transition:height .35s cubic-bezier(.22,.61,.36,1)}
  /* La colonna destra si accorcia e si riallarga con la stessa curva della figura: così in ogni istante della transizione
     la figura resta più alta della colonna e l'ingombro del blocco non cambia (misurato: con display:none e padding secchi
     la colonna superava la figura per 0,35s, le tappe saltavano di 39px e lo scroll anchoring di Chrome faceva pompare il blocco). */
  .method-grid .lift-top,.method-grid .lift-bottom{transition:padding .35s cubic-bezier(.22,.61,.36,1)}
  .method-grid .lift-top>span:first-child{max-height:6em;overflow:hidden;transition:max-height .35s cubic-bezier(.22,.61,.36,1),opacity .25s}
  /* Correzione collaterale: a 21px «COMPOSIZIONE» (123px) usciva dalla colonna di 101px; a 18px sta in 99px */
  .method-grid .lift-label{font-size:18px;letter-spacing:.04em}
  /* Stato compatto: la classe lift-compact sta su .method-grid ed è gestita da app.js */
  .lift-compact .lift-stage{margin-top:calc(var(--lift-full) - var(--lift-mini))}
  .lift-compact .lifter{height:var(--lift-mini)}
  .lift-compact .lift-top{padding:8px 12px 3px;justify-content:flex-end}
  .lift-compact .lift-top>span:first-child{max-height:0;opacity:0}
  .lift-compact .lift-bottom{padding:3px 12px 8px;justify-content:flex-start}
  .lift-compact .lift-label{font-size:16px}
  .lift-compact .lift-milestones i{width:12px}
  /* Per eventuali ancore future alle tappe: sotto l'atleta agganciato e compatto (78 + 130 + bordi + aria) */
  .method-steps .method-step{scroll-margin-top:calc(var(--lift-top) + var(--lift-mini) + 16px)}
  .step-next{font-size:12px;gap:14px}
}
/* === fine K26 === */


/* === K23 · L'atleta misurato: righello e punti di misura === */
/* Righello lungo la guida sinistra della scena; l'indice oro segue il bilanciere (app.js, k23Sync) */
.lift-stage{--k23-ring:11}
.rule,.marks{pointer-events:none}
.rule-spine{stroke:#b08d5730;stroke-width:1}
.rule-ticks{stroke:#b08d5738;stroke-width:8;stroke-dasharray:2 18}
.pose-ticks path{stroke:#b08d5745;stroke-width:2;transition:stroke .3s .5s}
.lift-stage[data-lift-step="1"] .pose-ticks path:nth-child(-n+1),.lift-stage[data-lift-step="2"] .pose-ticks path:nth-child(-n+2),.lift-stage[data-lift-step="3"] .pose-ticks path:nth-child(-n+3),.lift-stage[data-lift-step="4"] .pose-ticks path:nth-child(-n+4),.lift-stage[data-lift-step="5"] .pose-ticks path{stroke:var(--gold)}
.idx-tip{fill:var(--gold)}
.idx-line{stroke:var(--gold);stroke-width:1.5}
/* Punti di misura: compaiono con data-mark sulla scena (tappa 02); l'alone con la tappa 03 */
.mark{opacity:0;transition:opacity .3s}
.ring{fill:none;stroke:var(--gold);stroke-width:2}
.ring.dotted{stroke-dasharray:3 3.5}
.mark line{stroke:var(--gold);stroke-width:1.5}
.mark .dot{fill:var(--gold)}
.pop{transform-box:fill-box;transform-origin:center;transform:scale(.55);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.mark .pop:nth-of-type(2){transition-delay:.06s}.mark .pop:nth-of-type(3){transition-delay:.12s}
.lift-stage[data-mark="giro"] .mark-giro,.lift-stage[data-mark="plica"] .mark-plica,.lift-stage[data-mark="lunghezza"] .mark-lunghezza,.lift-stage[data-mark="larghezza"] .mark-larghezza{opacity:1}
.lift-stage[data-mark="giro"] .mark-giro .pop,.lift-stage[data-mark="plica"] .mark-plica .pop,.lift-stage[data-mark="lunghezza"] .mark-lunghezza .pop,.lift-stage[data-mark="larghezza"] .mark-larghezza .pop{transform:scale(1)}
.mark-body{stroke:#b08d57;stroke-opacity:.35;stroke-width:1;stroke-dasharray:4 5;transform-box:fill-box;transform-origin:center}
.lift-stage[data-lift-step="3"] .mark-body{opacity:1;animation:k23-breathe 2.4s ease-in-out 3}
@keyframes k23-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* Etichette delle misure nella tappa 02 */
.measures{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:370px}
.measure{display:inline-flex;align-items:center;gap:9px;border:1px solid #ffffff2e;background:transparent;color:var(--cream);padding:0 14px;min-height:40px;font:500 12px/1 var(--body);letter-spacing:.02em;border-radius:2px;transition:border-color .2s,background .2s,color .2s}
.measure:before{content:'';width:8px;height:8px;border:1.5px solid var(--gold);border-radius:50%;opacity:.6;transition:opacity .2s,background .2s}
.measure:hover,.measure:focus-visible{border-color:#b08d5799}
.measure:focus-visible{outline-offset:3px}
.measure[aria-pressed="true"]{border-color:var(--gold);background:#b08d5712;color:#f4f0e7}
.measure[aria-pressed="true"]:before{background:var(--gold);opacity:1}
.measure-note{font-size:12px;color:var(--muted);line-height:1.7;margin:12px 0 0;min-height:3.4em;max-width:370px}
/* Movimento ridotto e interruttore nel footer: stati fissi, niente pop né respiro (le regole globali con !important già lo garantiscono; qui è esplicito) */
.motion-off .pose-ticks path,.motion-off .mark,.motion-off .pop,.motion-off .measure,.motion-off .measure:before{transition:none}
.motion-off .mark-body{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.pose-ticks path,.mark,.pop,.measure,.measure:before{transition:none}.mark-body{animation:none;transform:none}}
@media(max-width:820px){.rule-spine{stroke-width:1.3}.pose-ticks path{stroke-width:2.5}.idx-line{stroke-width:2}.ring{stroke-width:2.5}.mark line{stroke-width:2}.measures,.measure-note{max-width:none}.measure{font-size:11px;padding:0 12px}}
@media(max-width:560px){.lift-stage{--k23-ring:16}.rule-spine{stroke-width:1.6}.rule-ticks{stroke-width:10;stroke-dasharray:3 17}.pose-ticks path{stroke-width:3.5}.idx-line{stroke-width:2.5}.ring{stroke-width:3.2}.mark line{stroke-width:2.6}.mark-body{stroke-width:1.6}.measures{gap:7px}.measure{flex:1 1 calc(50% - 4px);justify-content:center;min-height:44px;font-size:12px;padding:0 12px}.measure-note{font-size:13px}}
/* === fine K23 === */


/* === K11 Fisarmoniche morbide: tappe del metodo e FAQ con altezza animata === */
/* Attivo solo con JavaScript (html.acc-js, aggiunta in fondo ad app.js). Senza JS .acc e .acc-inner sono div normali e vale il CSS di sopra.
   Si anima grid-template-rows (0fr <-> 1fr) del contenitore .acc, non un'altezza misurata; il testo dentro .acc-inner entra e esce in dissolvenza.
   Le transizioni si spengono da sole con prefers-reduced-motion e html.motion-off (regole globali con !important più in alto). */
html.acc-js .acc{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1)}
html.acc-js details.acc-collapsed .acc{grid-template-rows:0fr}
html.acc-js .acc-inner{min-height:0;overflow:hidden}
html.acc-js .acc-inner>*{transition:opacity .3s .08s}
html.acc-js details.acc-collapsed .acc-inner>*{opacity:0;transition-duration:.22s;transition-delay:0s}
/* Il riempimento passa dal contenitore esterno a quello interno: così anche i 25px in basso scorrono con l'altezza, senza salti. Via la vecchia scivolata hero-in. */
html.acc-js .step-content{padding:0;animation:none}
html.acc-js .step-content .acc-inner{padding:0 24px 25px 42px}
html.acc-js .faq details p{animation:none}
/* Il «+» e l'oro del titolo seguono lo stato visivo, non l'attributo open (che resta vero per 0,4 s durante la chiusura). */
html.acc-js .method-step.acc-collapsed summary>b,html.acc-js .faq details.acc-collapsed summary span{transform:none}
html.acc-js .method-step.acc-collapsed summary h3{color:inherit}
html.acc-js .method-step.acc-collapsed summary>span{color:var(--muted)}
html.acc-js .faq summary span{transition:transform .3s}
/* «Tappa successiva» (K26) sta dentro .acc-inner: dissolvenza come il resto, ma conserva il colore al passaggio e la pressione di K16. */
html.acc-js .acc-inner>.step-next{transition:opacity .3s .08s,color .2s}
html.acc-js .acc-inner>.step-next:active{transition-duration:.08s;transition-delay:0s}
@media(max-width:820px){html.acc-js .step-content .acc-inner{padding-left:33px}}
@media(max-width:560px){/* K11: nessuna regola in più. Le dimensioni di p e .tiny seguono le regole esistenti (.step-content p, .faq details p). */}
/* === fine K11 === */


/* === K01 · Il messaggio si scrive da solo (anteprima del messaggio WhatsApp nel selettore) === */
/* Le regole globali già presenti (prefers-reduced-motion e .motion-off * con animation:none!important;transition:none!important)
   spengono da sole tutte le animazioni e transizioni qui sotto. Taglie del testo in rem come vuole K30 (9px = .5625rem,
   12px = .75rem, 12,5px = .78125rem, 13px = .8125rem); sotto gli 820px le etichette piccole usano var(--micro), mai meno di 11px. */
/* Riquadro dell'anteprima: tra le domande e la barra Indietro/Continua */
.finder-preview{margin-top:26px}
.finder-preview>.tiny{display:block;font-size:.5625rem;color:#bcbab5;transition:color .4s}
.finder-preview.complete>.tiny{color:var(--gold)}
.bubble{position:relative;margin-top:10px;background:#171717;border:1px solid #ffffff26;padding:16px 18px;display:grid;gap:5px;font-size:.8125rem;line-height:1.7;color:#f4f0e7;transition:border-color .4s}
/* Nessuna «codina» alla bolla: il triangolo fuori dal riquadro sembrava un residuo grafico (16/09/2026). Angoli vivi come il resto della pagina. */
.bubble.complete{border-color:var(--gold)}
.bl{display:block;min-height:1.7em}
.bl b{font-weight:500;color:#bcbab5}
.bl-v{color:var(--cream)}
.bl-v:empty:before{content:'';display:inline-block;vertical-align:middle;width:clamp(72px,38%,150px);height:0;border-top:1px dashed #ffffff40;margin-left:3px}
.bl-v.filled{animation:line-in .45s ease-out both}
.bubble.complete .bl-v.filled{animation:none}
@keyframes line-in{from{opacity:0}}
/* Al riepilogo la bolla sta sotto il titolo e sopra il pulsante WhatsApp */
.finder-result .finder-preview{margin:24px 0 28px}
/* Passi che scorrono: avanti da destra, indietro da sinistra (data-dir lo scrive app.js prima che il passo compaia) */
.finder[data-dir="next"] fieldset[data-step]:not([hidden]){animation:step-next .38s cubic-bezier(.16,1,.3,1) both}
.finder[data-dir="prev"] fieldset[data-step]:not([hidden]){animation:step-prev .38s cubic-bezier(.16,1,.3,1) both}
@keyframes step-next{from{opacity:0;transform:translateX(22px)}}
@keyframes step-prev{from{opacity:0;transform:translateX(-22px)}}
/* Tacche che si riempiono da sinistra: l'oro passa allo pseudo-elemento (stessa specificità di .finder-dots i.on più in alto: vince questa) */
.finder-dots i{position:relative;overflow:hidden}
.finder-dots i.on{background:#ffffff20}
.finder-dots i:after{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.finder-dots i.on:after{transform:scaleX(1)}
/* Un solo battito del pulsante WhatsApp quando compare il riepilogo (solo box-shadow: la calamita di K16 usa transform) */
.finder-result .button.gold{animation:cta-pulse 1s .5s 1 ease-out}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 #b08d5700}40%{box-shadow:0 0 0 12px #b08d5738}}
/* Copia il messaggio: uscita per chi legge da computer senza WhatsApp */
.finder-result .copy-message{display:flex;width:max-content;max-width:100%;gap:14px;margin-top:14px;font-size:.75rem}
.copy-message svg{width:15px;height:15px;flex-shrink:0}
.copy-message .copy-label{font-size:inherit}
.copy-message.copied{color:var(--gold)}
.copy-fallback{display:block;width:100%;margin-top:12px;background:#171717;color:var(--cream);border:1px solid var(--gold);padding:12px 14px;font:.8125rem/1.6 var(--body);resize:vertical}
@media(max-width:820px){.finder-preview{margin-top:22px}.finder-preview>.tiny{font-size:var(--micro)}.finder-result .finder-preview{margin:20px 0 24px}}
@media(max-width:560px){.bubble{padding:14px;font-size:.78125rem;gap:4px}.bl-v:empty:before{width:clamp(64px,36%,130px)}.finder-result .copy-message{margin-top:12px;font-size:var(--micro)}}
/* === fine K01 === */

/* === K02 Una sola memoria per tutte le chiamate all'azione === */
/* Etichetta sostituibile dentro i link WhatsApp. È un em (non uno span) per non ereditare .button span e .fab span. */
.wa-text{font-style:normal;font-weight:inherit}
/* Pulsante fisso, stato «pronto»: fondo crema con un filo notte, così resta leggibile anche sopra le sezioni crema (.light). */
.fab.ready{background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--night),0 18px 40px -12px #000c}
.fab.ready:hover{background:#fff}
/* Sul touch l'hover si incolla dopo il tocco (stessa regola di K16.4 per il fab a riposo): in stato «pronto» resta crema. */
@media(hover:none){html .fab.ready:hover{background:var(--cream)}}
/* Anello che si espande una volta sola (1,2 s). Base invisibile: con motion-off o reduced-motion le regole globali tolgono l'animazione e non si vede nulla. */
.fab.ready:before{content:'';position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--gold);box-shadow:0 0 0 1px #17171733;opacity:0;pointer-events:none;animation:fab-ring 1.2s ease-out 1 forwards}
@keyframes fab-ring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
/* Pallino «pronto», mostrato solo quando il testo del pulsante è nascosto (fino a 560 px). */
.fab.ready:after{content:'';position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--night);display:none}
/* Focus visibile in entrambi gli stati e sopra qualunque sezione: filo notte a contatto più contorno oro a distanza (regola globale). */
.fab:focus-visible{box-shadow:0 0 0 3px var(--night),0 18px 40px -12px #000c}
.fab.ready:focus-visible{box-shadow:inset 0 0 0 1.5px var(--night),0 0 0 3px var(--night),0 18px 40px -12px #000c}
/* Cerchio finale: quando il messaggio è pronto porta direttamente a WhatsApp. :not(:hover) lascia vincere il riempimento oro del passaggio del mouse. */
.circle-cta.ready{border-color:var(--gold)}
.circle-cta.ready:not(:hover){background:#b08d5714}
@media(max-width:820px){.fab.ready .wa-text{font-size:12px}}
@media(max-width:560px){.fab.ready:after{display:block}}
/* === fine K02 === */

/* === K04 Rassicurazione che cambia con la risposta === */
/* Tre righe sotto il pulsante WhatsApp nel riepilogo del selettore: la prima segue la risposta a «Che cosa cerchi nel tuo allenamento?»
   (li[data-for]: app.js, blocco K04, lascia visibile solo quella che coincide con il radio scelto), le altre due sono fisse; nell'ultima
   il segno di fiducia «5,0 su Google in entrambe le sedi» è un link a #recensioni. Il segnaposto di riga è una linea oro di 12×1 px, non una
   freccia: la freccia ↗ in pagina indica sempre un'azione e le prime due righe non sono cliccabili. [hidden]{display:none!important}
   più in alto vince sul display:grid dei li: le righe non pertinenti non occupano spazio e la lista letta è sempre di 3 voci.
   Taglie in rem come vuole K30.1 (12px = .75rem, 15px = .9375rem; su telefono 12px resta sopra il minimo di 11px).
   Contrasto su #282f26 (fondo di .finder): #b8beb0 ≈ 7,2:1, crema ≈ 12:1, oro ≈ 7,1:1.
   Le animazioni sono già spente dalle regole globali .motion-off e prefers-reduced-motion (animation:none!important);
   le regole esplicite qui sotto le ribadiscono. La dissolvenza riparte ogni volta che .finder-result passa da hidden a visibile. */
.reassure{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:.75rem;line-height:1.6;color:#bcbab5}
.reassure li{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:start;animation:reassure-in .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.16s}
.reassure li::before{content:'';width:12px;height:1px;background:var(--gold);margin-top:9px}
.reassure li[data-for]{color:var(--cream)}
.reassure li:nth-child(4){animation-delay:.28s}
.reassure li:nth-child(5){animation-delay:.4s}
.reassure-trust{display:inline-flex;align-items:center;gap:6px;color:var(--cream);white-space:nowrap;border-bottom:1px solid #ffffff40;padding-bottom:1px;vertical-align:baseline;transition:color .2s,border-color .2s}
.reassure-trust svg{width:11px;height:11px;fill:var(--gold);flex-shrink:0}
.reassure-trust>span{font-size:.9375rem;line-height:1}
.reassure-trust:hover{color:var(--gold);border-color:var(--gold)}
@keyframes reassure-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html.motion-off .reassure li{animation:none}
@media(prefers-reduced-motion:reduce){.reassure li{animation:none}}
/* Sul touch il link di fiducia ha lo stesso bersaglio da 44 px dei text-link (K16.2): sopra e sotto ci sono solo testo e la nota, nessun altro comando. */
@media(pointer:coarse){.reassure-trust{position:relative}.reassure-trust::before{content:'';position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px}}
@media(max-width:820px){.reassure{margin-top:20px;padding-top:16px}}
@media(max-width:560px){.reassure{gap:8px;line-height:1.55}.reassure li{gap:10px}.reassure li::before{margin-top:8px}}
/* === fine K04 === */


/* === K05 Il percorso che potrebbe somigliarti (card nel riepilogo del selettore) === */
/* Compare tra la bolla del messaggio (K01) e il pulsante WhatsApp quando il riepilogo è visibile: app.js, blocco K05, toglie hidden
   e compila nome, frase e pulsante «Scopri». Animazioni solo CSS: le regole globali prefers-reduced-motion e .motion-off
   (animation:none!important;transition:none!important) le spengono da sole. Taglie in rem come vuole K30.1 (9px = .5625rem,
   11px = .6875rem, 12px = .75rem, 12,5px = .78125rem, 13px = .8125rem); sotto gli 820px l'etichetta usa var(--micro), mai meno
   di 11px; il nome del percorso in Barlow resta in px come i titoli. Contrasto su #282f26: #b8beb0 ≈ 7:1, #adb4a5 ≈ 6,4:1,
   crema ≈ 13:1, oro ≈ 7:1. Nessuna larghezza fissa: a 375px la card riempie il riepilogo senza scorrimento orizzontale. */
.suggestion{position:relative;display:grid;gap:10px;margin:22px 0 26px;padding:18px 18px 16px;border:1px solid #b08d5745;background:#b08d5708;animation:hero-in .5s .2s both}
.suggestion>.tiny{display:flex;align-items:center;gap:9px;color:var(--gold);font-size:.5625rem}
.suggestion>.tiny:before{content:'';width:6px;height:6px;background:var(--gold);flex-shrink:0}
.suggestion-name{display:block;font:600 34px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:var(--cream)}
.suggestion-why{font-size:.8125rem;line-height:1.7;color:#bcbab5}
.suggestion-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;margin-top:4px}
/* «Scopri»: annulla il margin-top:22px che .finder-result .text-link darebbe al pulsante */
.finder-result .suggestion .text-link{margin-top:0;min-height:44px;font-size:.75rem;gap:14px}
.suggestion-add{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid #ffffff26;font-size:.75rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s}
/* Passaggio del mouse solo dove il mouse esiste: sul touch l'hover resterebbe incollato dopo il tocco (vedi K16.4) */
@media(hover:hover){.suggestion-add:hover{border-color:#b08d5788}}
/* :has() da solo, come in K16.7: dove non è supportato la casella nativa mostra comunque lo stato */
.suggestion-add:has(input:checked){border-color:var(--gold);background:#b08d570c}
.suggestion-add input{accent-color:var(--gold);width:15px;height:15px;margin:0;flex-shrink:0}
.suggestion-note{margin-top:2px;padding-top:12px;border-top:1px solid #ffffff14;font-size:.6875rem;line-height:1.6;color:#bcbab5}
/* Conferma visibile dell'interruttore. Con K01 la sintesi visibile è la bolla: la riga «Percorso che mi interessa» compare in dissolvenza
   (line-in è il keyframe di K01). Senza K01 #finder-summary è visibile e riceve « Mi interessa anche: …» in crema. */
.bubble.complete .bl[data-for="corso"]{animation:line-in .35s ease-out both}
.suggestion-added{color:var(--cream);animation:hero-in .35s both}
@media(max-width:820px){.suggestion{margin:20px 0 24px}.suggestion>.tiny{font-size:var(--micro)}}
@media(max-width:560px){.suggestion{padding:16px 14px 14px;gap:9px}.suggestion-name{font-size:30px}.suggestion-why{font-size:.78125rem}.suggestion-actions{gap:10px 16px}.finder-result .suggestion .text-link{font-size:var(--micro)}.suggestion-add{font-size:var(--micro);padding:9px 12px}}
/* === fine K05 === */

/* === K07 Le chiamate all'azione dicono cosa succede dopo === */
/* Nota sotto i pulsanti principali: dice cosa succede al tocco. Solo testo statico, nessuna animazione o transizione propria:
   prefers-reduced-motion e html.motion-off non hanno niente da spegnere (la nota della hero eredita la comparsa di .hero-buttons.hero-enter,
   già spenta dalle regole globali). Taglie in rem come vuole K30.1 (12px = .75rem, 10px = .625rem, 11px = .6875rem = var(--micro)).
   Contrasti: #a9ada0 su #171a17 ≈ 7,7:1 e su #101310 più alto; #4f5549 su #e4e3d9 (griglia di «Le sedi») ≈ 6,0:1; crema su night ≈ 14:1. */
.cta-note{display:block;margin:12px 0 0;font:400 .75rem/1.55 var(--body);color:var(--muted)}
.light .cta-note{color:#555555}
/* Hero: la nota vive nella riga dei pulsanti e va a capo da sola, sotto entrambi (order:1); tra 561 e 820px, dove i pulsanti sono in colonna,
   segue l'ordine del DOM (order:0) e sta subito sotto il pulsante oro. row-gap:12px vince sui gap scorciatoia precedenti a parità di specificità. */
.hero-buttons{flex-wrap:wrap;row-gap:12px}
.hero-buttons .cta-note{width:100%;order:1;margin-top:0}
/* Metodo: sotto il link, a capo */
.method-steps .cta-note{margin-top:8px}
/* Finestra del percorso: la nota si stringe al pulsante (il gap della colonna è 14px) */
.dialog-actions .cta-note{margin-top:-6px}
/* Chiusura: stessa voce dell'eyebrow sopra il titolo; il testo è minuscolo nell'HTML e diventa maiuscolo qui. Sotto gli 820px 11px, come vuole K30.3 */
.final-cta .cta-note{margin-top:22px;font:500 .625rem/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase}
/* Le sedi: riga intera sotto i due link (il gap è 20px; 8px tra 561 e 820px, dove il margine negativo si azzera) */
.location-links .cta-note{width:100%;margin-top:-8px}
/* Pulsante fisso: suggerimento solo con mouse preciso o con focus da tastiera, mai al tocco. Il testo è anche nell'aria-label.
   Solo a riposo (:not(.ready)): in stato «pronto» :before e :after del fab sono l'anello e il pallino di K02, che non si toccano.
   Compare e sparisce cambiando display: nessuna dissolvenza da spegnere. .fab è position:fixed senza overflow: il suggerimento sta sopra il pulsante. */
.fab[data-tip]:not(.ready):before{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 10px);display:none;background:var(--night);color:var(--cream);border:1px solid #b08d5750;padding:8px 12px;font:500 .6875rem/1.4 var(--body);letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.fab[data-tip]:not(.ready):focus-visible:before{display:block}
@media(hover:hover) and (pointer:fine){.fab[data-tip]:not(.ready):hover:before{display:block}}
@media(max-width:820px){.hero-buttons .cta-note{order:0}.final-cta .cta-note{font-size:var(--micro)}.location-links .cta-note{margin-top:0}}
@media(max-width:560px){.hero-buttons .cta-note{order:1}.final-cta .cta-note{margin-top:18px}.dialog-actions .cta-note{margin-top:-4px}.location-links .cta-note{margin-top:-8px}}
/* === fine K07 === */


/* === K17 Meno di dieci minuti a piedi, disegnati === */
/* Le sedi · «Come arrivare»: schema disegnato nel codice, metri in HTML, link Maps in uscita.
   L'animazione parte dalla classe .visible del reveal esistente e gira una volta sola.
   Taglie in rem come vuole K30.1 (9px = .5625rem, 11px = .6875rem, 12px = .75rem, 13px = .8125rem, 14px = .875rem);
   sotto gli 820px le etichette piccole usano var(--micro), mai meno di 11px (K30.3). Contrasti sul fondo #e4e3d9
   del pannello: night circa 13:1, #454b3b circa 5,1:1, oliva di punti e curve circa 3,2:1 (grafica); il quadrato oro
   ha il bordo nero per leggersi come forma. Lo stato base è «tutto disegnato»: solo html.js-motion nasconde le curve fino al reveal. */
.place-facts>.fact-walk dd{min-width:0}
.walk{margin:0}
.walk-grid{display:grid;grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:auto auto;gap:0 14px;align-items:center}
.walk-list{grid-column:1;grid-row:1;align-self:stretch;min-height:100px;list-style:none;margin:0;padding:0;display:grid;grid-template-rows:1fr 1fr}
.walk-list li{display:flex;flex-direction:column;justify-content:center;margin-left:-12px;padding:0 0 0 10px;border-left:2px solid transparent;transition:opacity .3s,border-color .3s}
.walk-list b{display:block;font:500 .8125rem/1.35 var(--body);letter-spacing:-.01em;color:var(--night)}
.walk-list small{display:block;margin-top:2px;font:500 .75rem/1.4 var(--body);letter-spacing:.02em;color:#555555;transition:opacity .5s 1s}
.walk-map{grid-column:2;grid-row:1;align-self:center;display:block;width:100%;height:auto;overflow:visible}
.walk-dest{grid-column:2;grid-row:2;margin-top:4px;padding-right:4px;font:500 .5625rem/1.35 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#555555;text-align:right}
/* pathLength="1" + dasharray 1 1: la curva si disegna dal punto verso il quadrato portando il dashoffset da 1 a 0.
   Estremità piatte: Safari con quelle tonde mostra un puntino all'inizio; inizio e fine sono comunque coperti da cerchio e quadrato. */
.walk-path{fill:none;stroke:var(--olive);stroke-width:1.6;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) .5s,stroke .3s,stroke-width .3s,opacity .3s}
.walk-node{fill:var(--olive);transition:fill .3s}
.walk-node-in{fill:var(--cream)}
.walk-ring{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.walk-dest-mark{fill:var(--gold);stroke:var(--night);stroke-width:1;transform-box:fill-box;transform-origin:center}
.js-motion .walk:not(.visible) .walk-path{stroke-dashoffset:1}
.js-motion .walk:not(.visible) .walk-list small{opacity:0}
/* Quando le curve arrivano (0,5 s + 1,3 s): un solo battito del quadrato e un solo anello che si allarga e svanisce. Nessun loop. */
.walk.visible .walk-dest-mark{animation:walk-beat .7s cubic-bezier(.22,.61,.36,1) 1.6s 1}
.walk.visible .walk-ring{animation:walk-ping 1s ease-out 1.6s 1}
@keyframes walk-beat{40%{transform:scale(1.35)}}
@keyframes walk-ping{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}
.walk figcaption{margin-top:12px;font:500 .5625rem/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#555555}
.walk figcaption b{font-weight:600;color:var(--night)}
/* «Da dove parti?»: evidenzia un tratto e imposta la partenza del link a piedi. Mai la posizione. Levette alte 38px (44px sul touch, blocco V4). */
.walk-from{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px}
.walk-from>.tiny{font-size:.5625rem;color:#555555}
.walk-from>div{display:flex;gap:6px}
.walk-toggle{border:1px solid #17171730;background:transparent;color:var(--night);padding:0 14px;min-height:38px;font:500 .6875rem var(--body);border-radius:2px;transition:border-color .2s,background .2s,color .2s}
.walk-toggle:hover{border-color:var(--olive)}
.walk-toggle[aria-pressed="true"]{background:var(--night);color:var(--cream);border-color:var(--night)}
.walk[data-from="metro"] .walk-path-metro,.walk[data-from="funicolare"] .walk-path-funicolare{stroke:var(--night);stroke-width:2.2}
.walk[data-from="metro"] .walk-path-funicolare,.walk[data-from="funicolare"] .walk-path-metro{opacity:.3}
.walk[data-from="metro"] .walk-node-metro,.walk[data-from="funicolare"] .walk-node-funicolare{fill:var(--night)}
/* La barra oro della riga scelta sta nel gap tra dt e dd (margin-left:-12px sul li): il testo resta allineato agli altri dd. */
.walk[data-from="metro"] .walk-row-metro,.walk[data-from="funicolare"] .walk-row-funicolare{border-left-color:var(--gold)}
.walk[data-from="metro"] .walk-row-funicolare,.walk[data-from="funicolare"] .walk-row-metro{opacity:.65}
/* Link Maps sotto lo schema. L'etichetta è un b (non uno span) per non ereditare .text-link span{font-size:20px}. */
.walk-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px}
.walk-links .text-link{font-size:.6875rem;gap:12px;padding:7px 0}
.walk-link-label{font-weight:inherit}
/* Fino a 1100px la riga «Come arrivare» va su una colonna (dt sopra, dd sotto): accanto al dt da 112px non ci stanno lista e schema
   (misurato il 16/09/2026: a 900px la lista restava larga 78px, nomi su tre righe e punti fuori asse di 15px; il nome più lungo,
   «Funicolare di Chiaia · Parco Margherita», vuole circa 220px a 13px). .place-facts>.fact-walk (0,2,0) vince su .place-facts>div (0,1,1) anche a 560px. */
@media(max-width:1100px){.place-facts>.fact-walk{grid-template-columns:1fr;gap:4px}}
@media(max-width:820px){.walk-grid{grid-template-columns:minmax(0,1fr) 104px}.walk-list{min-height:87px}.walk-dest,.walk figcaption,.walk-from>.tiny{font-size:var(--micro)}.walk-dest{letter-spacing:.1em}}
/* Fino a 560px lo schema va sotto la lista, a sinistra: affiancato, in una colonna da circa 180px, le fermate andavano su tre righe (16/09/2026). Le due righe della lista tornano intere; l'etichetta d'arrivo resta sotto il quadrato d'arrivo. */
@media(max-width:560px){.walk-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:12px 0}.walk-list{min-height:0;grid-template-rows:auto auto;gap:8px}.walk-list b{font-size:.875rem}.walk-map{grid-column:1;grid-row:2;width:132px;justify-self:start}.walk-dest{grid-column:1;grid-row:3;justify-self:start;width:132px;margin-top:0}.walk-toggle{min-height:40px}.walk-links{gap:4px 20px}}
/* Movimento ridotto e interruttore «Animazioni»: curve piene, metri visibili, anello invisibile (battito e anello sono già
   azzerati dalle regole globali animation:none!important). Gli !important servono contro .js-motion .walk:not(.visible) che ha specificità più alta. */
@media(prefers-reduced-motion:reduce){.walk-path{stroke-dashoffset:0!important}.walk-list small{opacity:1!important}.walk-ring{opacity:0!important}}
.motion-off .walk-path{stroke-dashoffset:0!important}.motion-off .walk-list small{opacity:1!important}.motion-off .walk-ring{opacity:0!important}
/* === fine K17 === */

/* === K29 Link profondi dai post: la card giusta si apre da sola === */
/* Ancore #percorso-…: un po' d'aria sotto l'intestazione fissa. Si somma allo scroll-padding-top già impostato su html (110px, 90px sotto 820px). */
.course-card{scroll-margin-top:16px}
/* La card raggiunta dal link: bordo sottile in oro scuro (#6c5420, lo stesso del focus nelle sezioni chiare, contrasto circa 6:1 sulla crema) che si posa sulla card. Sta fuori dalla card, nello spazio della griglia. */
.course-card:target{--k29-gap:6px;outline:2px solid #214e4b;outline-offset:var(--k29-gap);animation:k29-land .7s cubic-bezier(.16,1,.3,1) both}
@keyframes k29-land{from{outline-color:transparent;outline-offset:22px}to{outline-color:#214e4b;outline-offset:var(--k29-gap)}}
/* Finestra chiusa: invisibile anche nei browser che non riconoscono <dialog> (nei browser moderni è già così). */
dialog:not([open]){display:none}
/* Animazioni spente: il bordo compare fermo, senza posarsi. */
@media(prefers-reduced-motion:reduce){.course-card:target{animation:none}}
.motion-off .course-card:target{animation:none}
@media(max-width:820px){.course-card{scroll-margin-top:14px}}
@media(max-width:560px){.course-card{scroll-margin-top:12px}.course-card:target{--k29-gap:4px}}
/* === fine K29 === */

/* === K31 Ritocchi visivi del 16/09/2026 === */
/* Hero: la didascalia verticale «LIBRA STUDIO / NAPOLI» stava sotto il timbro d'oro (.orbit, z-index 4), che copre al massimo i primi 110px
   del riquadro (142px da -32px su desktop; sul telefono 93px da -33px). Parte da 150px a ogni larghezza: sempre leggibile per intero. */
.vertical-caption{top:150px}
/* Telefono: il riquadro è alto circa 312px (aspect-ratio .98 in motion.css) e il timbro ne copre solo i primi 35px; a 150px la didascalia
   (160px a 11px) finiva a filo del bordo basso. Misurato a 390px il 16/09/2026. */
@media(max-width:560px){.vertical-caption{top:72px}}
/* Primo passo: l'eyebrow «IL TUO PRIMO PASSO» è uno span in linea dentro .start-copy e si posava circa 15px sotto il bordo alto della card
   del selettore (riga di testo di 16px/1.6 del contenitore). Come blocco ha la sua altezza di riga (1.5) e parte dalla stessa linea della card,
   come nelle altre sezioni dove l'eyebrow sta in un contenitore flex. */
.start-copy>.eyebrow{display:block}
/* === fine K31 === */


/* === V4 rifiniture Audex (16/09/2026, dopo la verifica a due giri) === */
.quotes cite{font-size:.6875rem;color:#555555}
@media(pointer:coarse){.walk-toggle,.measure{min-height:44px}}
html:has(#navigation.open) .fab{visibility:hidden;transform:translateY(150%)}
/* === fine V4 rifiniture === */

/* === S00 due sedi: varianti di testo per sede (18/09/2026) === */
/* data-solo="nessuna|chiaia|vomero", una sola visibile. html[data-sede] lo scrivono lo script S01 in <head> e app.js (setSede); con «Decidiamolo insieme» l'attributo
   non c'è e vale «nessuna». Si usa solo su <span> e <em> senza un display proprio (dentro .button, .text-link, .fab e .reassure-trust sempre <em>: lì gli span hanno altre regole).
   Questo blocco entra al passo 1 del lavoro, prima di qualunque data-solo nel markup. */
html:not([data-sede]) [data-solo]:not([data-solo="nessuna"]),html[data-sede] [data-solo="nessuna"],html[data-sede="chiaia"] [data-solo="vomero"],html[data-sede="vomero"] [data-solo="chiaia"]{display:none}
em[data-solo]{font-style:normal;font-weight:inherit}
.nw{white-space:nowrap}
/* === fine S00 === */

/* === S05 pulsante fisso: la sede si legge anche su telefono === */
/* Fino a 560px il pulsante è solo icona (.fab span{display:none}). Con una sede nota mostra la sola riga piccola («WhatsApp · Chiaia», «Pronto · Chiaia», rese in maiuscolo dal CSS: la scrive K02).
   Si ridefiniscono padding e gap della pillola; il pallino «pronto» non serve perché il testo è visibile. La riga piccola è già a 11px (K30.3). */
@media(max-width:560px){
html[data-sede] .fab{padding:10px 16px 10px 12px;gap:8px}
html[data-sede] .fab span{display:flex}
html[data-sede] .fab .wa-text{display:none}
html[data-sede] .fab small{letter-spacing:.1em}
html[data-sede] .fab.ready:after{display:none}
}
/* Da 821px la riga piccola era a 8px (K30.1): con la sede scritta («WhatsApp · Vomero») è un segnale contro il messaggio alla sede sbagliata, quindi si legge a 11px a ogni larghezza. Senza sede resta com'era. */
html[data-sede] .fab small{font-size:var(--micro)}
/* === fine S05 === */

/* === S03 percorsi: quattro card, niente filtri === */
/* Fino a 560px una colonna (regola esistente); 561–1200 due per riga; da 1201 Personal su due righe e BeLongevity su due colonne.
   1200 è un breakpoint nuovo (gli altri: 1700, 1100, 820, 560): a 1101 la colonna Personal sarebbe circa 354px e taglierebbe i due soci.
   La regola a due colonne non ha un tetto: da 1201 la scavalca quella dopo. Così a larghezze frazionarie (zoom del browser, per esempio 1200,5px) resta il 2×2
   e non torna il «repeat(3,1fr)» della riga 5, che lascerebbe una card orfana. */
@media(min-width:561px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1201px){.course-grid{grid-template-columns:1.2fr 1fr 1fr}.course-grid>.photo-card{grid-row:span 2}.course-grid>.cream-card{grid-column:span 2}.photo-card p{max-width:340px}}
.courses-note{margin-top:26px;max-width:560px;font-size:.875rem;line-height:1.7;color:#555555}
.courses-note .text-link{margin-left:0}   /* lo stacco dalla frase è lo spazio nel markup: con un margine, quando il link va a capo partirebbe rientrato */
/* === fine S03 === */

/* === S04 team e recensioni === */
.team-note{margin-top:18px;font-size:.8125rem;line-height:1.6;color:#555555}
.score-sedi{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.score-sedi li{display:grid;gap:2px;padding-left:12px;border-left:2px solid #17171725;font-size:.875rem;color:#555555}
.score-sedi strong{color:var(--night);font-weight:600}
html[data-sede="chiaia"] [data-sede-row="chiaia"],html[data-sede="vomero"] [data-sede-row="vomero"]{border-left-color:var(--olive)}
.score-l{margin-bottom:16px}
.quotes blockquote.wide{grid-column:1/-1}
.quotes .reveal:nth-child(5){transition-delay:.4s}
/* === fine S04 === */

/* === S01 due sedi: tab e pannelli di «Le sedi» (18/09/2026) === */
/* Tre stati. Senza classi su html (niente JS, o app.js non partito): tab, nota e targa nascosti, due pannelli in colonna. html.sedi-attesa (script in <head>, prima del primo disegno):
   i tab si vedono già e il CSS nasconde pannello e foto dell'altra sede. html.sedi-js: comanda app.js con l'attributo hidden. */
html:not(.sedi-attesa):not(.sedi-js) .location-tabs,html:not(.sedi-attesa):not(.sedi-js) .sede-note,html:not(.sedi-attesa):not(.sedi-js) .studio-plate{display:none}
html:not(.sedi-attesa):not(.sedi-js) .location-panel+.location-panel{margin-top:34px;border-top:1px solid #17171725}
/* In questo stato i pannelli in colonna sono alti il doppio: la foto di Chiaia non si allunga con loro, resta alta come sempre e accompagna lo scorrimento. */
@media(min-width:821px){html:not(.sedi-attesa):not(.sedi-js) .locations-grid{align-items:start}html:not(.sedi-attesa):not(.sedi-js) .studio-photo{position:sticky;top:120px;height:min(828px,80vh)}}
html.sedi-attesa:not([data-sede="vomero"]) #dove [data-sede-panel="vomero"],html.sedi-attesa:not([data-sede="vomero"]) #dove [data-sede-photo="vomero"],html.sedi-attesa[data-sede="vomero"] #dove [data-sede-panel="chiaia"],html.sedi-attesa[data-sede="vomero"] #dove [data-sede-photo="chiaia"]{display:none}
html.sedi-attesa:not([data-sede="vomero"]) [data-sede-tab="chiaia"],html.sedi-attesa[data-sede="vomero"] [data-sede-tab="vomero"]{color:#171717}
/* Il filo nero sotto il tab scelto (riga 6: button[aria-selected=true]:after) qui non c'è ancora, perché aria-selected lo mette app.js: si ridisegna con gli stessi valori, così non lampeggia. */
html.sedi-attesa:not([data-sede="vomero"]) [data-sede-tab="chiaia"]:after,html.sedi-attesa[data-sede="vomero"] [data-sede-tab="vomero"]:after{content:'';position:absolute;bottom:-1px;height:2px;background:#171717;left:0;right:0}
/* Tab (base di Codex nella riga 6). K30: numerino a 11px e tab spento AA (#5c6154 su #e4e3d9, era #63675d a 4,49:1). K16: pressione. Il tab scelto resta nero (regola esistente, più specifica). Focus: vale la regola globale. */
.location-tabs button{color:#555555;min-height:44px;transition:color .2s,opacity .2s}
.location-tabs button span{font-size:var(--micro)}
.location-tabs button:active{opacity:.6}
/* Nota sotto i tab: sempre nel flusso (è una regione viva e non deve far saltare il pannello quando si riempie). */
.sede-note{min-height:1.5em;margin:14px 0 0;font:500 .75rem/1.5 var(--body);color:#555555}
.location-panel .walk-extra{margin-top:10px;font:500 .75rem/1.5 var(--body);color:#555555}
/* Targa del Vomero: niente foto. Si azzera ciò che .studio-photo img eredita dalla riga 6 (assoluta, cover, scale, saturazione, zoom al passaggio).
   Il prefisso html serve: sul touch K16.4 ha «html .studio-photo:hover img{transform:scale(1.12)}» (0,2,2), che batterebbe «.studio-plate:hover img» (0,2,1). */
.studio-plate{display:grid;place-items:center;background:var(--night);color:var(--cream)}
html .studio-plate img,html .studio-plate:hover img{position:static;width:min(46%,190px);height:auto;object-fit:contain;transform:none;filter:none;opacity:.9;transition:none}
html .studio-plate:active{transform:none}
/* === fine S01 === */

/* === S02 hero: le due porte === */
.hero-locations{flex-wrap:wrap;gap:4px 22px;font-size:var(--micro)}
.hero-locations a{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
/* La riga 3 ha «.hero-locations b{color:var(--gold);font-weight:400}» (era il puntino tra i due indirizzi): dentro le porte il nome torna del colore del link, a peso 600,
   così a riposo è crema, al passaggio nome e indirizzo diventano oro insieme e la sede scelta si riconosce dal filo oro. */
.hero-locations a b{color:inherit;font-weight:600}
.hero-locations .door-addr{color:var(--muted);transition:color .2s}
@media(hover:hover){.hero-locations a:hover,.hero-locations a:hover .door-addr{color:var(--gold)}}   /* solo con il mouse: sul touch l'hover resterebbe incollato (K16.4) */
.hero-locations a:active{opacity:.6}
.hero-locations a[aria-current="true"]{border-bottom-color:var(--gold)}
@media(pointer:coarse){.hero-locations a{min-height:44px}}
/* Telefono: una riga sola, due colonne, solo i nomi (l'indirizzo resta nel nome accessibile del link). Viene dopo l'etichetta Google (K25 la mette subito dopo i pulsanti). */
@media(max-width:560px){
.hero .eyebrow{letter-spacing:.06em}
.hero-locations{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.hero-locations a{position:relative;justify-content:center;min-height:44px;border:1px solid var(--line);letter-spacing:.14em}
.hero-locations a[aria-current="true"]{border-color:var(--gold)}
.hero-locations .door-addr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* === fine S02 === */

/* === S06 logo vettoriale ufficiale (dal 19/09 logo-libra-oro.svg, 576,35 × 458,27 = 1,26; prima logo-libra-chiaro.svg) === */
/* Altezza fissa e larghezza dal rapporto: il prefisso html batte le regole di motion.css (caricato dopo), comprese .header.scrolled e le media query. */
html .brand{min-width:0}
html .brand img.brand-cutout{width:auto;height:68px;aspect-ratio:576.35/458.27}
html .header.scrolled .brand img.brand-cutout{width:auto;height:58px}
html .footer .brand img.brand-cutout{width:auto;height:100px}
@media(max-width:820px){html .brand img.brand-cutout{height:60px}html .header.scrolled .brand img.brand-cutout{height:56px}html .footer .brand img.brand-cutout{height:100px}}
@media(max-width:560px){html .header .brand img.brand-cutout,html .header.scrolled .brand img.brand-cutout{width:auto;height:56px}html .footer .brand img.brand-cutout{width:auto;height:84px}}
/* === fine S06 === */

/* === S08 hero: da 821px l'altezza segue il contenuto, le porte non finiscono sullo «scorri» (correzione dopo la verifica, 18/09/2026) === */
/* La riga 3 dà alla hero un'altezza fissa (height:min(940px,100svh), con min-height 840px, 760px fino a 1100px) e centra il contenuto; lo «scorri» è in assoluto a 24px dal fondo.
   Con le porte alte 32px (S02; nella v4 era una riga da 16px) e la frase nuova, che tra 821 e 1100px va a capo una volta in più, la colonna di testo è più alta dello spazio utile
   e l'ultima riga, le porte, scendeva sullo «scorri» (a 1100 × 800 i due testi uno sull'altro; a 1280 × 800 si toccavano). Qui l'altezza diventa automatica e quella di prima
   passa a min-height (il più grande tra i due valori di prima): dove il contenuto ci sta non cambia nulla, dove non ci sta la hero cresce e tra porte e «scorri» restano 34px
   (88px di padding in basso meno i 54px dello «scorri»). Se 100svh non è capita, la regola min-height cade e resta quella della riga 3.
   Sotto gli 821px la hero è già ad altezza automatica (righe 10 e 11). La sigla S07 resta riservata al ripiego della hero sul telefono (prova n. 8). */
@media(min-width:821px){html .hero{height:auto;min-height:max(840px,min(940px,100svh))}}
@media(min-width:821px) and (max-width:1100px){html .hero{min-height:max(760px,min(940px,100svh))}}
/* === fine S08 === */

/* === S09 footer: i quattro contatti su una riga (correzione dopo la verifica, giro 2, 18/09/2026) === */
/* Le voci della v5 («WhatsApp Chiaia», «WhatsApp Vomero», «Instagram Chiaia») sono più lunghe di quelle della v4 e nella griglia 2×2 di motion.css andavano a capo in due fasce.
   Tra 821 e 919px il footer è una riga flessibile che non va a capo: il blocco dei contatti si stringeva sotto la sua larghezza naturale (circa 325px). Ora non si stringe più:
   cede spazio l'indirizzo, che resta su cinque righe; da 920px in su e sotto gli 821px non cambia nulla (lì il blocco era già alla sua larghezza, o il footer è una griglia).
   Sul telefono, fino a 400px, lo spazio minimo tra testo e freccia scende da 22 a 10px (la freccia resta comunque allineata a destra dal justify-content di motion.css):
   a 360px la colonna è 137px e ne servono circa 130. Sotto i 350px circa le voci tornano ad andare a capo come prima: niente white-space:nowrap, che a 320px farebbe
   nascere lo scorrimento orizzontale. «.footer .social-links>a» (0,2,1) batte «.social-links>a» di motion.css (0,1,1) anche se motion.css è caricato dopo. */
.footer .social-links{flex-shrink:0}
@media(max-width:400px){.footer .social-links>a{gap:10px}}
/* === fine S09 === */

/* === S10 hero: tra 821 e 1023px la didascalia della foto lascia il posto all'etichetta Google (correzione dopo la verifica, giro 2, 18/09/2026) === */
/* In questa fascia l'etichetta Google, più larga nella v5 («15 recensioni a Chiaia · 88 al Vomero»), copriva l'inizio di «01 · CIRO E GAETANO» (fino a circa 990px senza sede, circa 940px con ?sede=).
   Sotto gli 821px la didascalia è già nascosta (riga 10): si estende quella scelta. A 1024px ricompare, con 14px liberi tra i due. I nomi restano nell'alt della foto. */
@media(min-width:821px) and (max-width:1023px){html .photo-index{display:none}}
/* === fine S10 === */

/* === S11 loghi oro e loghi di sede (19/09/2026) === */
/* Il logo del sito è quello del kit di Chiaia (oro opaco #B39A63, tinta unita) senza la riga «CHIAIA»: assets/logo-libra-oro.svg in header e footer (misure nel blocco S06).
   Dove si sceglie la sede ogni scheda porta il logo della sua sede: assets/logo-libra-chiaia.svg e assets/logo-libra-vomero.svg
   (VOMERO costruita come CHIAIA nel kit: Barlow Condensed SemiBold corpo 36, 7px tra le lettere, in tracciati). Sono decorativi: la sede è già scritta nel testo accanto. */
/* «Le sedi», foto di Chiaia: logo in una targhetta scura nell'angolo in alto a sinistra (sulla foto l'oro da solo non si legge), lontano dalla didascalia in basso.
   Il prefisso html e la classe battono «.studio-photo img» (assoluta, cover, scale, saturazione) e lo zoom al passaggio, anche quello del touch (K16.4: html .studio-photo:hover img).
   Tre misure: da 821px la foto è larga (390–540px); tra 561 e 820px la griglia è ancora a due colonne e la foto è una striscia di 194–292px, quindi la targhetta si lega
   alla larghezza della foto (la percentuale si calcola sulla foto, che è il blocco contenitore); fino a 560px la foto è a tutta larghezza. */
html .studio-photo img.sede-logo,html .studio-photo:hover img.sede-logo{position:absolute;z-index:2;top:0;left:0;box-sizing:content-box;width:118px;height:auto;padding:18px 22px 16px;background:var(--night);object-fit:contain;transform:none;filter:none;transition:none}
@media(min-width:561px) and (max-width:820px){html .studio-photo img.sede-logo,html .studio-photo:hover img.sede-logo{width:clamp(64px,30%,84px);padding:12px 14px 11px}}
@media(max-width:560px){html .studio-photo img.sede-logo,html .studio-photo:hover img.sede-logo{width:84px;padding:13px 16px 12px}}
/* Targa del Vomero: fondo pieno, quindi il velo pensato per le foto (.studio-photo:after) si spegne: scuriva la metà bassa del logo e la riga VOMERO, e l'oro non era più lo stesso della targhetta di Chiaia.
   Da 821px la targa è larga e alta: logo a 236px (riga VOMERO circa 10px). Tra 561 e 820px è una striscia stretta e altissima: il logo prende più colonna. Fino a 560px è bassa (320px):
   si lascia libero il fondo, dove sta la didascalia, e il logo si centra nello spazio che resta. */
.studio-plate:after{display:none}
/* Dal 19/09 (decisione di Carlo): per ora il logo del Vomero è nero, monocromatico; oro è solo quello di Chiaia. Il nero su una targa scura non si vedrebbe:
   la targa diventa chiara, come il pannello accanto, con logo e didascalia in nero. Nel selettore, che ha il fondo scuro, il marchio del Vomero è lo stesso disegno in crema. */
.studio-plate{background:#f4f0e7;color:var(--night);border-left:1px solid #1717171f}
.studio-plate .studio-caption{color:var(--night)}
@media(max-width:560px){.studio-plate{border-left:0;border-top:1px solid #1717171f}}
html .studio-plate img,html .studio-plate:hover img{width:min(54%,236px);opacity:1}
@media(min-width:561px) and (max-width:820px){html .studio-plate img,html .studio-plate:hover img{width:min(64%,170px)}}
@media(max-width:560px){.studio-plate{padding:26px 0 100px}html .studio-plate img,html .studio-plate:hover img{width:min(50%,186px)}}
/* Domanda 2 del selettore: a destra del testo, prima della spunta, un marchio compatto (assets/marchio-chiaia|vomero|libra.svg: simbolo + nome della sede in tracciati, stessa tela per i tre).
   Il logo completo qui non va: a 58px la riga di sede sarebbe alta 2px e i tre loghi sembrerebbero uguali. Altezza fissa: 44px entrano nei 46 utili dell'opzione (min-height 80, padding 16, bordo 1),
   così le tre opzioni restano alte 80px come nelle altre domande; il nome della sede è alto circa 8px. Sotto i 380px il marchio si toglie: ruberebbe 50px al testo
   e manderebbe a capo gli indirizzi (a 320px la barra «Continua» coprirebbe la terza opzione). È decorativo: alt vuoto, la sede è nel testo dell'opzione. */
.option .option-logo{flex:0 0 auto;height:44px;width:auto;opacity:.92;transition:opacity .2s}
.option:has(input:checked) .option-logo{opacity:1}
@media(max-width:560px){.option .option-logo{height:40px}}
@media(max-width:379px){.option .option-logo{display:none}}
/* === fine S11 === */

/* === v6 · nota (21/09/2026) ===
   Colori e famiglie di font di questo file sono allineati alla tavola ufficiale dei soci «Palette e info LibraStudio.png»:
   avorio #F4F0E7, grafite #171717, oro caldo #B08D57, verde petrolio #214E4B, bianco; Cormorant Garamond (titoli) e Manrope (testi).
   La rimappatura è quella di Codex (03_Edit/Allineamento-brand-2026-09-19/strumenti/allinea.cjs), riportata qui da Audex CONSERVANDO I COMMENTI:
   tolti i commenti, questo file è identico carattere per carattere a quello consegnato da Codex (controllo in costruisci_v6.py).
   ATTENZIONE: i valori esadecimali citati DENTRO i commenti sono quelli storici della v4/v5 (nero-verde, crema, oro #d7b764, oliva):
   spiegano il perché delle regole, non lo stato di oggi. Misure dei titoli, fondi petrolio/bianco, team e correzioni stanno in brand.css,
   caricato per ultimo. La nota sta in fondo al file apposta: così i numeri di riga citati nei commenti (riga 3, 6, 10…) restano validi.
   === fine nota v6 === */