/* Scroll choreography. Layout remains usable without JavaScript. */
header{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.88);backdrop-filter:blur(18px);transition:background .4s,border-color .4s}
header.scrolled{background:rgba(11,11,12,.96);border-color:#383838}
.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;background:var(--text);z-index:30;transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.hero{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,#24242580,transparent 62%)}
.hero:before{content:'';position:absolute;inset:7% 12%;border:1px solid #f3ede209;border-radius:50%;pointer-events:none;z-index:-1}
/* Blend the animated group too: transform/opacity isolate the logo's own blend. */
.hero-inner{mix-blend-mode:screen}
.hero-logo{mask-image:url('assets/logo.webp');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.motion-on .hero-inner{transform:translate3d(0,var(--hero-y,0px),0);opacity:var(--hero-opacity,1);will-change:transform,opacity}
.motion-on .hero-logo{scale:var(--hero-scale,1);will-change:scale}
.hero-bottom{position:relative;padding-top:35px}
.hero-bottom:before{content:'';height:42px;width:1px;background:linear-gradient(transparent,#9a9a96);position:absolute;left:50%;bottom:0}
.button{border-radius:2px;transition:transform .4s,filter .4s,box-shadow .4s}
.button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #c8862b18}
.button span{transition:transform .4s}.button:hover span{transform:translateY(4px)}
.why{padding-top:190px;padding-bottom:190px;align-items:center}
.statement{font-size:clamp(30px,4.5vw,68px);line-height:1.2}
.statement-line{display:block}
.motion-on .statement-line{color:transparent;background:linear-gradient(90deg,var(--text) var(--read,0%),#666663 var(--read,0%));background-clip:text;-webkit-background-clip:text}
.watermark{opacity:.085;filter:none;mix-blend-mode:screen}
.motion-on .watermark{translate:0 var(--watermark-y,0px)}
.answer{font-size:clamp(28px,3.8vw,54px);color:var(--text)}
.product-grid{display:block;perspective:1400px}
.product-grid article{display:grid;grid-template-columns:.85fr 1.4fr;grid-template-rows:auto auto auto 1fr;column-gap:5%;position:relative;padding:42px;background:#151517;border:1px solid #353537;border-radius:10px;min-height:530px;margin-bottom:64px;box-shadow:0 -20px 70px #0005;transform-origin:top center}
.product-grid article:nth-child(2){background:#1a1a1c}
.product-grid article:nth-child(3){background:#101012;margin-bottom:0}
.product-top{grid-column:1/-1;margin-bottom:38px;font-size:11px}
.product-top>span:first-child{font-size:18px;color:var(--text)}
.product-image{grid-column:2;grid-row:2/5;align-self:center;aspect-ratio:1.45;padding:16px;background:#0b0b0c;border-radius:5px;box-shadow:0 28px 45px #0005}
.product-image img{border-radius:2px}
.product-grid h3{grid-column:1;grid-row:2;font-size:clamp(30px,3.7vw,58px);line-height:1.05;margin:0 0 20px}
.product-grid .tagline{grid-column:1;grid-row:3;font-size:clamp(19px,1.8vw,25px);min-height:0;max-width:360px;margin:0 0 24px;line-height:1.4}
.product-grid ul{grid-column:1;grid-row:4;align-self:start;margin:0}
.motion-on .product-grid article{transform:scale(var(--card-scale,1));filter:brightness(var(--card-dim,1))}
.motion-on .product-image{translate:0 var(--image-y,0px)}
.method{background:linear-gradient(145deg,#1a1a1c,#0b0b0c);gap:70px}
.method>div{align-self:start}
.method li{padding:50px 0;position:relative}
.method li:after{content:'';position:absolute;bottom:-1px;left:0;height:1px;background:var(--text);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.method li.is-current:after{transform:scaleX(1)}
.method li .step-number{transition:color .6s,text-shadow .6s}
.method li.is-current .step-number{color:var(--text);text-shadow:0 0 32px #f3ede22b}
.method{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.method-intro h2{font-size:clamp(42px,5.1vw,74px)}
.method-summary{max-width:370px;margin:28px 0 24px;color:var(--muted);font-size:17px;line-height:1.75}
.method-link{display:inline-flex;align-items:center;gap:28px;min-height:48px;font-size:14px;border-bottom:1px solid #686865}
.method-link span{transition:transform .4s}.method-link:hover span{transform:translate(3px,-3px)}
.method-note{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);max-width:370px}
.method-note>span{font:10px/1.6 monospace;letter-spacing:.12em;color:var(--muted)}
.method-note p{font-size:20px;line-height:1.6;margin:12px 0 0}
.method .method-steps li{align-items:flex-start;gap:28px;padding:42px 0}
.method .method-steps li:first-child{padding-top:0}
.method .step-number{font:38px/1 monospace;min-width:48px;margin-top:27px;color:#777772}
.method .step-label{display:block;font:10px/1.6 monospace;letter-spacing:.13em;color:var(--muted);margin-bottom:12px;text-shadow:none}
.method .step-content{min-width:0}
.method .step-content h3{font-size:clamp(25px,2.6vw,37px);font-weight:500;line-height:1.18;letter-spacing:-.04em;margin:0 0 20px}
.method .step-content>p{font-size:16px;line-height:1.75;letter-spacing:0;color:var(--muted);max-width:510px}
.method .step-detail{margin-top:24px;padding:18px 20px;border:1px solid #343436;border-left:2px solid #696965;background:#ffffff03;border-radius:0 4px 4px 0}
.method .step-detail b{display:block;font:10px/1.5 monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;color:var(--text)}
.method .step-detail p{font-size:14px;line-height:1.7;letter-spacing:0;color:var(--muted)}
@media(max-width:899px){.method{grid-template-columns:1fr;gap:56px}.method-summary{max-width:560px}.method-note{display:none}.method .method-steps li{gap:22px}.method .step-content>p{max-width:none}}
@media(max-width:640px){.method-intro h2{font-size:44px}.method .step-number{font-size:26px;min-width:34px;margin-top:30px}.method .method-steps li{gap:14px;padding:32px 0}.method .step-label{font-size:9px;letter-spacing:.06em}.method .step-content h3{font-size:25px}.method .step-content>p{font-size:15px;line-height:1.7}.method .step-detail{padding:14px}.method .step-detail p{font-size:13px}}
@media(min-width:900px) and (max-height:900px){.method-intro{position:relative!important;top:auto!important}}
.contact{overflow:hidden}
.contact .section-heading{position:relative}
.contact h2{letter-spacing:-.07em}
.emails a{position:relative;transition:color .4s,padding .4s,background .4s}
.emails a:hover{padding-left:16px;padding-right:16px;background:#f3ede204}
.emails b{transition:transform .4s}.emails a:hover b{transform:translate(3px,-3px)}
.reveal{transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .85s ease;transition-delay:var(--delay,0ms)}
.reveal.pending{transform:translateY(36px);opacity:0}
.reveal:focus-within{opacity:1!important;transform:none!important}
footer{background:#101012;position:relative}
footer .brand{font-size:clamp(30px,5vw,72px)}
.skip{z-index:40}
@media(min-width:900px) and (min-height:700px){
  .motion-on .product-grid article{position:sticky;top:118px}
  .motion-on .product-grid article:nth-child(2){top:136px}
  .motion-on .product-grid article:nth-child(3){top:154px}
  .method>div{position:sticky;top:150px}
}
@media(max-width:899px){
  .why{padding-top:110px;padding-bottom:110px}
  .product-grid article{grid-template-columns:1fr;padding:26px;min-height:0;margin-bottom:36px}
  .product-top{grid-column:1;grid-row:1;margin-bottom:24px}
  .product-grid h3{grid-row:2;font-size:38px}
  .product-grid .tagline{grid-row:3;max-width:none;font-size:21px}
  .product-image{grid-column:1;grid-row:4;aspect-ratio:1.55;margin:8px 0 24px;padding:10px}
  .product-grid ul{grid-row:5}
  .method{gap:35px}
  .method li{padding:30px 0}
}
@media(max-width:640px){
  .why{padding-top:90px;padding-bottom:90px}
  .hero:before{inset:15% 2%}
  .hero-bottom:before{height:24px;bottom:5px}
  .product-grid article{padding:22px 18px;border-radius:6px}
  .product-top{font-size:9px;gap:14px}
  .product-grid h3{font-size:34px}
  .product-grid .tagline{font-size:20px}
  .product-image{padding:7px;aspect-ratio:1.4}
  .product-grid ul{font-size:14px}
  .emails a:hover{padding-left:0;padding-right:0}
  footer .brand{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .hero-inner,.hero-logo,.watermark,.product-grid article,.product-image,.reveal{transform:none!important;translate:none!important;scale:none!important;filter:none!important;opacity:1!important;will-change:auto!important}
  .statement-line{color:var(--text)!important;background:none!important}
  .product-grid article,.method>div{position:relative!important;top:auto!important}
  .button:hover,.button:hover span,.emails a:hover b{transform:none}
}