/* Synco One: same tokens as the home, one yellow ball that gathers orbits as the page scrolls. */
:root{--bg:#282a2c;--yellow:#f7ee81;--snow:#f4f4f4;--muted-dark:#c1c1bd;--muted-light:#67686a;--line-dark:#55564e;--line-light:#bfc0c1;--gutter:8%}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--snow);font-family:Manrope,sans-serif;scroll-behavior:smooth}
body{margin:0;background:var(--bg)}
button,input,textarea{font:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:11px;letter-spacing:.19em;margin:0 0 28px}

/* Floating contact, as on the home */
.contact-float{position:fixed;left:var(--gutter);bottom:37px;z-index:40;display:flex;align-items:center;gap:22px;padding:11px 20px;border:1px solid #282a2c2e;border-radius:999px;background:var(--yellow);color:var(--bg);font-size:12px;letter-spacing:.02em;text-decoration:none;box-shadow:0 6px 24px #282a2c33;transition:opacity .5s ease,visibility 0s,background .3s}
.contact-float span{font-size:16px}.contact-float:hover{background:#f3e965}.contact-float:focus-visible{outline:2px solid #99944f;outline-offset:5px}
.contact-float.is-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}

/* Stage: hero and the system share one pinned scene */
.journey{height:540svh}
.stage{--intro:1;--lift:0;position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:var(--bg)}
header{position:absolute;top:42px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;align-items:center;z-index:5}
.brand{display:block;border-radius:4px}.brand img{width:145px;height:auto;display:block}.brand:focus-visible{outline:2px solid var(--yellow);outline-offset:8px}
.studio{font-size:13px;line-height:1.6;color:var(--muted-dark);letter-spacing:.025em;text-align:right}

.intro{position:absolute;left:var(--gutter);top:31%;z-index:3;opacity:var(--intro);transform:translateY(calc((1 - var(--intro))*-28px));will-change:transform,opacity}
/* Reserved for the provisional Synco One logo: same box before and after it arrives. */
.one-logo{display:block;width:230px;height:auto;margin-bottom:44px}
h1{font-size:clamp(48px,5vw,82px);font-weight:300;line-height:1.1;letter-spacing:-.06em;margin:0}
h1 span{color:var(--yellow)}
.description{font-size:16px;font-weight:300;line-height:1.7;color:var(--muted-dark);margin:30px 0 0;letter-spacing:.01em;max-width:470px}

.system{position:absolute;z-index:1;width:min(62vw,880px);aspect-ratio:1;left:63%;top:50%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.orbit{fill:none;stroke:#f4f4f4;stroke-opacity:.22;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.orbit-dashed{stroke-dasharray:3 7;stroke-dashoffset:0;opacity:var(--draw-op,0)}
.planet{opacity:0}
.planet circle{fill:var(--snow)}
.planet[data-step="4"] circle{fill:none;stroke:var(--yellow);stroke-width:1.5}
.planet text{font-family:Manrope,sans-serif;font-size:17px;font-weight:300;fill:var(--muted-dark);letter-spacing:-.01em}
.planet.is-current circle{fill:var(--yellow)}.planet.is-current text{fill:var(--snow)}
.planet[data-step="4"].is-current circle{fill:var(--yellow)}
.core-ball{fill:var(--yellow);transform-box:fill-box;transform-origin:center;animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translate(1.5px,-4px)}}
.ripples{opacity:var(--pulse,1)}
.core-ripple{fill:none;stroke:var(--yellow);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ripple 4s cubic-bezier(.2,.6,.3,1) infinite}
.core-ripple-late{animation-delay:2s}
@keyframes ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}}
.callout{opacity:var(--callout,0)}
.callout-line{fill:none;stroke:var(--muted-dark);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.callout text{font-family:Manrope,sans-serif;font-size:17px;font-weight:300;fill:var(--snow);letter-spacing:-.01em}

.captions{list-style:none;margin:0;padding:0;position:absolute;z-index:3;left:var(--gutter);top:50%;width:min(34%,470px);height:0}
.captions li{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(-50% + (1 - var(--show,0))*24px*var(--dir,1)));opacity:var(--show,0);visibility:hidden;will-change:transform,opacity}
.captions li.is-on{visibility:visible}
.caption-index{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--yellow);margin:0 0 26px}
.captions h2{font-size:clamp(34px,3.3vw,54px);font-weight:300;line-height:1.1;letter-spacing:-.055em;margin:0}
.captions h2+p{font-size:16px;font-weight:300;line-height:1.7;color:var(--muted-dark);margin:24px 0 0;max-width:380px}

.scroll-cue{position:absolute;z-index:4;right:5.2%;bottom:35px;display:flex;align-items:center;gap:26px;border:0;background:none;padding:10px 0 10px 20px;font-size:12px;color:#b5b6b0;cursor:pointer;opacity:var(--intro);visibility:visible}
.scroll-cue span:last-child{color:var(--yellow);font-size:22px}
.scroll-cue:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}

/* Statement, revealed line by line with the home's reflection */
.statement{--line-1:0;--line-2:0;--line-3:0;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:120px 7%;background:var(--bg)}
.statement p{font-size:clamp(38px,5.1vw,80px);font-weight:300;letter-spacing:-.05em;line-height:1.17;text-align:center;margin:0;max-width:1200px}
.statement span{display:block;--line:var(--line-1);opacity:var(--line);transform:translateY(calc((1 - var(--line))*20px))}
.statement span:first-child{font-size:.51em;letter-spacing:-.025em;color:#c6c6be;margin-bottom:23px}
.statement span:nth-child(2){--line:var(--line-2)}.statement span:nth-child(3){--line:var(--line-3)}
.statement .reflect{padding-bottom:.2em;margin-bottom:-.2em;background-image:linear-gradient(108deg,#f4f4f4 0%,#f4f4f4 42%,#f7ee81 49%,#fffbe0 51%,#f4f4f4 58%,#f4f4f4 100%);background-size:300% 100%;background-position:var(--shine,100%) 0;background-clip:text;-webkit-background-clip:text;color:transparent}

/* How it works: a dot travels the line as the section passes */
.how{--travel:0;position:relative;background:var(--snow);color:var(--bg);padding:150px var(--gutter) 120px}
.how .eyebrow{color:#737577;margin-bottom:90px}
.how-track{position:relative;height:12px;margin:0 0 54px}
.how-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-light)}
.how-line::after{content:"";position:absolute;inset:0;background:#b6b05b;transform-origin:left;transform:scaleX(var(--travel))}
.how-dot{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px #b6b05b55;transform:translateX(calc(var(--travel)*(var(--track-w,0px) - 12px)))}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.how-steps li{opacity:.28;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.how-steps li.is-on{opacity:1;transform:none}
.how-steps span{font-size:12px;letter-spacing:.12em;color:#737577}
.how-steps h3{font-size:clamp(30px,2.9vw,46px);font-weight:300;letter-spacing:-.05em;line-height:1.15;margin:18px 0 16px}
.how-steps p{font-size:16px;font-weight:300;line-height:1.7;color:var(--muted-light);margin:0;max-width:330px}

/* Plan builder */
.plan{background:var(--snow);color:var(--bg);padding:60px var(--gutter) 160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:8%;align-items:start;border-top:1px solid #dddddc}
.plan-head{grid-column:1/-1;padding:40px 0 70px}
.plan .eyebrow{color:#737577}
.plan-head h2{font-size:clamp(64px,7.5vw,116px);font-weight:300;letter-spacing:-.065em;line-height:1.1;margin:0}
.plan-head h2 span{color:#b6b05b}
.plan-options{display:grid;gap:56px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#737577;padding:0;margin-bottom:14px}
.option-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:20px;border-bottom:1px solid #dcdcdb}
.option-row:first-of-type{border-top:1px solid #dcdcdb}
.option{position:relative;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:22px;padding:22px 0;cursor:pointer;font-size:clamp(18px,1.5vw,22px);font-weight:300;letter-spacing:-.02em}
.option-more{width:28px;height:28px;border-radius:50%;border:1px solid #c4c5c6;background:none;color:var(--muted-light);font-size:13px;font-weight:500;line-height:1;padding:0;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.option-more:hover{border-color:var(--bg);color:var(--bg)}
.option-more[aria-expanded="true"]{background:var(--bg);border-color:var(--bg);color:var(--yellow)}
.option-more:focus-visible{outline:2px solid #99944f;outline-offset:3px}
.option-info{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.option-info>div{overflow:hidden;min-height:0}
.option-info p{margin:0 0 24px 46px;max-width:560px;font-size:15px;font-weight:300;line-height:1.7;color:var(--muted-light);opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.option-row.is-open .option-info{grid-template-rows:1fr}
.option-row.is-open .option-info p{opacity:1;transform:none;transition-delay:.1s}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option i{width:22px;height:22px;border-radius:50%;border:1px solid #a9aaab;transition:background .3s,border-color .3s,transform .3s}
.option input:checked+i{background:var(--yellow);border-color:#b6b05b;transform:scale(1.08)}
.option input:focus-visible+i{outline:2px solid #99944f;outline-offset:4px}
.option:hover i{border-color:var(--bg)}
.option small{display:block;font-size:13px;letter-spacing:0;color:#737577;margin-top:4px}
.option-price{font-size:15px;color:var(--muted-light);letter-spacing:0;white-space:nowrap}
.option input:checked~.option-price{color:var(--bg)}
.plan-hint{font-size:13px;line-height:1.6;color:#737577;margin:16px 0 0;min-height:21px}

.plan-total{position:sticky;top:90px;background:var(--bg);color:var(--snow);border-radius:18px;padding:38px 36px 34px}
.total-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b5b6b0;margin:0}
.total-value{margin:16px 0 26px;font-size:clamp(56px,5vw,78px);font-weight:300;letter-spacing:-.06em;line-height:1;color:var(--yellow)}
.total-value small{font-size:.3em;letter-spacing:0;color:var(--muted-dark);vertical-align:.95em}
.total-number{font-variant-numeric:tabular-nums}
.total-items{list-style:none;margin:0 0 24px;padding:20px 0 0;border-top:1px solid var(--line-dark);display:grid;gap:9px;font-size:13px;color:var(--muted-dark);min-height:60px}
.total-items li{display:flex;justify-content:space-between;gap:16px}
.total-items li.is-empty{color:#8a8b85}
.total-setup{font-size:13px;line-height:1.6;color:#b5b6b0;margin:0 0 28px}
.total-setup b{font-weight:500;color:var(--snow)}
.total-setup[hidden]{display:none}
.total-action{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #f7ee8166;border-radius:999px;padding:13px 22px;color:var(--yellow);text-decoration:none;font-size:13px;transition:background .3s,color .3s}
.total-action span{font-size:18px}
.total-action:hover{background:var(--yellow);color:var(--bg)}
.total-action:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}

/* Extras */
.extras{background:var(--bg);padding:150px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:8%}
.extras .eyebrow{color:#c6c5b8}
.extras ul{list-style:none;margin:0;padding:0}
.extras li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;border-bottom:1px solid #ffffff17;font-size:17px;font-weight:300;line-height:1.5;color:var(--snow);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0)*80ms)}
.extras li:first-child{border-top:1px solid #ffffff17}
.extras b{font-weight:300;font-size:14px;color:var(--yellow);white-space:nowrap}
.extras.is-in li{opacity:1;transform:none}

/* Contact, as on the home */
.contact{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:var(--snow);color:var(--bg);padding:150px var(--gutter) 110px;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:9%;border-top:1px solid #dddddc}
.contact-heading{position:relative;z-index:1}
.contact h2{font-size:clamp(64px,7.5vw,116px);letter-spacing:-.065em;font-weight:300;line-height:1.1;margin:0}
.contact h2 span{color:#b6b05b}
.contact-heading p{font-size:16px;font-weight:300;color:var(--muted-light);margin:26px 0 0}
.contact-form{position:relative;z-index:1;display:grid;gap:28px;max-width:520px;width:100%}
.contact-form label{display:grid;gap:10px;font-size:13px;color:var(--muted-light)}
.contact-form input,.contact-form textarea{border:0;border-bottom:1px solid var(--line-light);border-radius:0;background:transparent;width:100%;color:var(--bg);font:inherit;font-size:18px;padding:8px 0 12px;outline:none;resize:vertical;transition:border-color .3s,box-shadow .3s}
.contact-form input:focus,.contact-form textarea:focus{border-color:#b4ac50;box-shadow:0 2px 0 var(--yellow)}
.contact-action{display:flex;align-items:center;gap:20px}
.contact-action button{border:1px solid #cbcbbf;border-radius:999px;background:var(--yellow);color:var(--bg);padding:13px 23px;display:flex;gap:50px;align-items:center;cursor:pointer;transition:background .3s}
.contact-action button:hover{background:#f3e965}
.contact-action button:focus-visible,.contact-bottom a:focus-visible{outline:2px solid #99944f;outline-offset:5px}
.contact-action button span{font-size:22px}
.contact-status{font-size:12px;line-height:1.5;max-width:220px;color:var(--muted-light)}
.contact-art{position:absolute;width:650px;height:650px;left:-200px;top:45%;pointer-events:none;z-index:0}
.contact-art i{position:absolute;inset:0;border:1px solid #dededb;border-radius:50%}
.contact-art i:nth-child(2){inset:65px}
.contact-art span{position:absolute;inset:0;animation:contact-orbit 45s linear infinite}
.contact-art span:after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--yellow)}
.contact-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#858683}
.contact-bottom a{color:inherit;text-decoration:none}.contact-bottom a:hover{color:var(--bg)}
@keyframes contact-orbit{to{transform:rotate(360deg)}}

@media(min-width:1600px){:root{--gutter:10%}}

@media(max-width:900px){
 :root{--gutter:8%}
 .journey{height:520svh}
 .stage{min-height:600px}
 header{top:25px;left:7%;right:7%}
 .brand img{width:112px}
 .studio{font-size:12px;max-width:150px}
 .intro{top:19%;right:8%}
 .one-logo{width:172px;margin-bottom:30px}
 h1{font-size:clamp(42px,11vw,60px)}
 .description{font-size:14px;margin-top:20px}
 .system{width:128vw;left:50%;top:50%;transform:translate(-50%,calc(-50% + 24svh - var(--lift)*40svh))}
 .planet text{font-size:22px}
 .callout text{font-size:25px}
 .captions{top:auto;bottom:calc(116px + env(safe-area-inset-bottom));left:8%;right:8%;width:auto;height:auto;min-height:150px}
 .captions li{top:auto;bottom:0;transform:translateY(calc((1 - var(--show,0))*20px*var(--dir,1)))}
 .caption-index{margin-bottom:14px}
 .captions h2{font-size:clamp(28px,7.6vw,40px)}
 .captions h2+p{font-size:14px;margin-top:12px}
 .scroll-cue{right:7%;bottom:24px}
 .contact-float{left:7%;bottom:max(27px,env(safe-area-inset-bottom))}
 .statement{padding:110px 8%}
 .statement p{font-size:clamp(34px,8.7vw,55px);line-height:1.18;letter-spacing:-.045em}
 .statement span:first-child{font-size:.6em}
 .how{padding:110px 8% 100px}
 .how .eyebrow{margin-bottom:50px}
 .how-track{position:absolute;left:8%;top:180px;bottom:100px;width:12px;height:auto;margin:0}
 .how-line{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
 .how-line::after{transform-origin:top;transform:scaleY(var(--travel))}
 .how-dot{transform:translateY(calc(var(--travel)*(var(--track-h,0px) - 12px)))}
 .how-steps{grid-template-columns:1fr;gap:56px;padding-left:44px}
 .plan{grid-template-columns:1fr;padding:30px 8% 120px}
 .plan-head{padding:70px 0 40px}
 .plan-head h2{font-size:64px}
 .option{gap:16px;grid-template-columns:22px 1fr auto}
 .option-row{column-gap:14px}
 .option-info p{margin-left:38px;font-size:14px}
 .plan-total{position:sticky;top:auto;bottom:12px;margin-top:48px;padding:26px 24px;z-index:2;box-shadow:0 10px 30px #282a2c33}
 .total-value{margin:10px 0 16px;font-size:52px}
 .total-items{display:none}
 .total-setup{margin-bottom:18px}
 .extras{grid-template-columns:1fr;gap:80px;padding:110px 8%}
 .extras li{flex-direction:column;gap:6px;font-size:16px}
 .contact{grid-template-columns:1fr;padding:85px 8% 120px;gap:50px}
 .contact h2{font-size:64px}
 .contact-art{opacity:.5;left:-440px}
 .contact-form{max-width:none}
 .contact-bottom{flex-direction:column;gap:12px;left:8%;right:8%}
}

/* Without motion: every part shown, static and complete */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .journey{height:auto}
 .stage{position:relative;height:auto;min-height:0;padding:200px var(--gutter) 120px;display:grid;gap:70px}
 .intro,.captions,.system{position:relative;inset:auto;transform:none;opacity:1;width:auto}
 .intro{order:-1}
 .system{width:min(90vw,700px);justify-self:center}
 .orbit{stroke-dashoffset:0}.orbit-dashed{opacity:1}.planet{opacity:1}
 .captions{height:auto;display:grid;gap:50px;max-width:640px}
 .captions li{position:relative;transform:none;opacity:1;visibility:visible}
 .captions li[data-step="0"]{display:none}
 .scroll-cue{display:none}
 .statement span{opacity:1;transform:none}
 .how-steps li,.extras li{opacity:1;transform:none;transition:none}
 .how-line::after{transform:none}.how-dot{display:none}
 .contact-art span,.core-ripple,.core-ball{animation:none}
 .option-info,.option-info p{transition:none}
 .callout{opacity:1}
}