/* Visual audit: readable scenes, stable service panels, connected case captions. */
.motion-preview #keysy .portfolio-title{font-size:clamp(52px,6.8vw,96px);line-height:1.04;letter-spacing:-.055em}
.motion-preview #keysy .sec-head{margin-bottom:48px}
.motion-preview #keysy .sec-head .lead{margin-top:24px}
@media(min-width:901px){
  .motion-preview .work-grid .work-wide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:6%;align-items:center}
  .motion-preview .work-grid .work-wide .work-img{width:100%;max-width:none;margin:0}
  .motion-preview .work-grid .work-wide .work-img img{--preview-height:72svh;margin:0 auto 0 0}
  .motion-preview .work-grid .work-wide .work-meta{display:flex;flex-direction:column;gap:20px;padding:0;align-items:flex-start}
  .motion-preview .work-wide .work-name{font-size:clamp(42px,4.5vw,64px)}
  .motion-preview .work-wide .work-fact{font-size:19px;max-width:380px}
  .motion-preview .work-wide .work-tags{line-height:1.6;gap:8px 16px}
  .motion-preview .work-wide .cb{display:block;padding-top:0}
  .motion-preview .work-wide .cb-i{margin-bottom:20px}
  .motion-preview .work-wide .case-hint,.motion-preview .work-wide .full-preview-link{min-height:44px;margin:0}
}
.motion-preview .work-fact,.motion-preview .sc,.motion-preview .wpc{line-height:1.7}
.motion-preview .service-art{display:flex;align-items:center;justify-content:center;height:clamp(280px,30vw,430px);padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.motion-preview .service-art img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border:0;border-radius:3px;margin:0}
.service-detail>p{min-height:76px;font-size:15px}
.service-tabs small{font-size:13px}
.service-panel:focus-visible{outline:2px solid var(--ink)}
.integration-map{height:460px}
.integration-store{width:34%;left:33%;top:50%;aspect-ratio:auto;transform:translateY(-50%)}
.integration-store-screen{position:relative;isolation:isolate;aspect-ratio:2880/2102}
.integration-store-screen>img{position:relative;display:block;width:100%;height:auto;object-fit:contain;border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 32px -26px #28302266}
.integration-store-screen .store-back{inset:0;z-index:-1;transform:translate(7px,7px);background:var(--panel)}
.integration-store>span{margin-top:18px;font-size:13px;line-height:1.4}
.flow-explanation{position:relative;margin:22px auto 0;min-height:52px;line-height:1.6}
.motion-preview .flag .tlist,.motion-preview .fc-note,.motion-preview .f-txt,.motion-preview .speed{font-size:13px;line-height:1.7}
.motion-preview .fcol a{font-size:13px;min-height:32px;line-height:1.6}
.motion-preview .foot-bot{font-size:11px;line-height:1.8}
.motion-preview #calc{padding-block:28px}
.motion-preview #faq{padding-top:72px}
.motion-preview .faq-a p{font-size:14px;line-height:1.8}
.motion-preview .quiz{scroll-margin-top:0}
.motion-preview .quiz input{min-height:48px;font-size:16px}
.motion-preview .qmeta{font-size:12px}
.story-copy.copy-system{top:var(--scene-copy-top)}
.copy-result{top:var(--result-copy-top);width:var(--result-copy-width);right:auto}
.copy-result h2,.case-reveal h2{font-size:clamp(36px,4.2vw,62px);line-height:1.08}
.order-receipt{top:var(--result-card-top);width:var(--result-card-width);right:var(--result-card-right)}
.case-reveal-copy{top:var(--case-copy-top);width:var(--case-copy-width);right:auto}
.case-reveal-copy p{margin-top:18px;line-height:1.5}
.case-reveal>img{top:var(--case-image-top);right:var(--pad);bottom:auto;width:var(--case-image-width);height:auto;max-height:none;object-fit:contain;object-position:center}
.story-case-cta{top:var(--case-cta-top);bottom:auto;width:max-content;max-width:calc(100% - 2 * var(--pad))}
@media(max-width:900px){
  .copy-result h2,.case-reveal h2{font-size:clamp(28px,6.4vw,46px)}
  .copy-result .story-eyebrow{margin-bottom:12px}
  .copy-result p{margin-top:14px;line-height:1.5}
  .case-reveal>img{right:50%;margin-right:calc(var(--case-image-width) / -2)}
  .story-case-cta{left:50%;transform:translateX(-50%)}
  .order-receipt{padding:20px}
  .receipt-check{width:32px;height:32px;font-size:22px;margin:16px 0 12px}
  .order-receipt h3{font-size:24px}
  .receipt-line{margin-top:18px}
  .receipt-foot{margin-top:16px;font-size:10px;line-height:1.5}
}
@media(max-width:767px){
  .motion-preview #keysy .portfolio-title{font-size:clamp(41px,8.6vw,64px)}
  .motion-preview #keysy .sec-head{margin-bottom:32px}
  .motion-preview .service-art{height:clamp(220px,68vw,360px);padding:12px}
  .service-detail>p{font-size:14px;min-height:74px}
  .service-tabs{gap:0;justify-content:space-between}
  .service-tabs button{padding-right:9px}
  .service-tabs button:last-child{padding-right:0}
  .service-tabs small{font-size:11px}
  .integration-map{height:430px}
  .integration-store{width:76%;left:22%;top:47%;transform:translateY(-50%)}
  .integration-store>span{font-size:12px}
  .flow-explanation{margin-top:24px;font-size:14px;min-height:68px}
  .motion-preview .flag .tlist,.motion-preview .fc-note,.motion-preview .f-txt{font-size:13px}
  .motion-preview .fcol a{min-height:36px;font-size:13px}
  .motion-preview .quiz{scroll-margin-top:0}
  .motion-preview #faq{padding-top:48px}
}
@media(max-width:600px){
  .story-copy.copy-system{top:var(--scene-copy-top)}
  .story-cinema .motion-film{top:var(--system-film-top);height:var(--system-film-height);bottom:auto}
  .copy-result h2,.case-reveal h2{font-size:clamp(27px,7.5vw,36px)}
  .case-reveal-copy .story-eyebrow{margin-bottom:12px}
  .case-reveal-copy p{font-size:12px;margin-top:14px}
  .story-case-cta{min-height:46px;padding:13px 18px}
  .motion-preview:has(.quiz:focus-within) .totop{visibility:hidden;pointer-events:none}
}
@media(max-width:600px) and (max-height:700px){
  .order-receipt{padding:15px 18px}
  .receipt-brand{font-size:16px}
  .receipt-check{width:26px;height:26px;font-size:19px;margin:10px 0}
  .order-receipt h3{font-size:21px}
  .order-receipt>p{font-size:12px}
  .receipt-line{margin-top:12px;padding-top:12px;font-size:10px}
  .receipt-foot{margin-top:12px;font-size:9px}
}
@media(max-width:370px){.service-tabs button>span:first-child{font-size:19px}.service-tabs small{font-size:10px}.integration-map{height:400px}}
/* Reserve the pinned story before JS mounts, so below-fold media stays lazy. */
html:not(.motion-is-off) #hero{min-height:580svh}
@media(max-width:600px){html:not(.motion-is-off) #hero{min-height:480svh}}
@media(prefers-reduced-motion:reduce){html:not(.motion-is-off) #hero{min-height:100svh}}
@media(max-width:767px){.integration-map{height:calc((100vw - var(--pad) * 2) * .554695 + 260px)}.integration-store{top:50%}}

/* Block-level fixes: text stays inside its own column at every breakpoint. */
.motion-preview .why-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8%}
.motion-preview .why-points{min-width:0;display:grid;grid-template-columns:1fr;gap:24px}
.motion-preview .wp{min-width:0;margin:0}
.motion-preview .wpt{font-size:20px;line-height:1.35;max-width:100%}
.motion-preview .wpc{max-width:100%;font-size:14px}
.motion-preview .work-wide .work-meta,.motion-preview .work-wide .case-body{min-width:0;max-width:100%;width:100%}
.motion-preview .work-wide.open{align-items:start}
.motion-preview .work-wide.open .work-meta{align-self:start}
.motion-preview .service-detail>div{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.motion-preview .service-detail .text-link{margin:0;flex:none}
.motion-preview .service-detail strong{display:block}
.motion-preview .site-packages .ptier{min-width:0}
.motion-preview .calculator-disclosure[open]>summary>span:last-child{transform:rotate(45deg)}
.motion-preview .totop{right:10px}
.to-top-label{display:none}
@media(min-width:601px) and (max-width:900px){
  .motion-preview .site-packages .price-grid{grid-template-columns:1fr}
  .motion-preview .site-packages .ptier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 24px;padding:26px;border-right:0;border-bottom:1px solid var(--line)}
  .motion-preview .site-packages .ptier:last-child{border-bottom:0}
  .motion-preview .site-packages .pt-name{grid-column:1;grid-row:1}
  .motion-preview .site-packages .pt-price{grid-column:1;grid-row:2;margin-top:14px;font-size:32px}
  .motion-preview .site-packages .pt-cap{grid-column:1;grid-row:3}
  .motion-preview .site-packages .badge{position:static;grid-column:2;grid-row:1;margin:0;text-align:right;font-size:10px}
  .motion-preview .site-packages .ptier .btn{grid-column:2;grid-row:2/4;align-self:center;justify-self:end}
  .motion-preview .site-packages .ptier ul{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;margin:22px 0 0}
}
@media(max-width:900px){
  .motion-preview .why-grid{grid-template-columns:1fr;gap:36px}
  .motion-preview .why-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .motion-preview .stats{gap:24px}
  .motion-preview .stat b{font-size:34px}
  .motion-preview #ceny .h-sec{font-size:clamp(34px,5.2vw,54px)}
  .motion-description{top:calc(310px + 3svh)}
}
@media(max-width:600px){
  .motion-preview .why-points{grid-template-columns:1fr;gap:24px}
  .motion-preview .stat b{font-size:30px}
  .motion-preview .service-detail>div{gap:12px;justify-content:space-between}
  .motion-preview .service-detail .text-link{font-size:12px}
  .motion-preview .totop{position:static;width:100%;height:46px;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:10px;opacity:1;visibility:visible;border-radius:6px}
  .to-top-label{display:inline;font-size:13px}
  .motion-description{top:310px}
}
@media(max-width:370px){
  .motion-description{top:290px}
  .motion-preview .service-detail>div{flex-direction:column;align-items:flex-start}
  .service-tabs button>span:first-child{font-size:17px}
  .service-tabs small{font-size:9px}
  .motion-preview .site-packages .ptier{column-gap:12px;padding:20px}
  .motion-preview .site-packages .pt-price{font-size:26px}
}
@media(max-height:800px){.motion-preview .quiz{position:static}}
@media(min-width:901px) and (max-height:700px){
  .motion-heading{font-size:clamp(46px,5.5vw,78px)}
  .motion-description p{font-size:15px;margin-bottom:20px}
  .scroll-invitation{display:none}
}
@media(min-width:601px) and (max-width:900px) and (max-height:800px){
  .motion-intro{right:50%;top:140px}
  .motion-heading{font-size:clamp(28px,4.6vw,42px)}
  .motion-description{top:calc(280px + 4svh);max-width:40%}
  .motion-description p{font-size:14px}
  .scroll-invitation{display:none}
}

/* Content audit: one explanation per block; secondary services stay optional. */
.content-disclosure{border-bottom:1px solid var(--line)}
.content-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;list-style:none;cursor:pointer;font-size:17px}
.content-disclosure>summary::-webkit-details-marker{display:none}
.content-disclosure>summary>span:last-child{font-size:26px;transition:transform .25s}
.content-disclosure[open]>summary>span:last-child{transform:rotate(45deg)}
.motion-preview .other-services .price-more{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding-bottom:28px}
.motion-preview .why-grid{display:grid;align-items:start}
.motion-preview #why .why-points{margin:0;grid-template-columns:1fr}
.motion-preview .flag-cta{margin-top:24px}
.motion-preview .cta-side>.tg-alt{margin-top:24px}
.footer-reading>summary{font-size:13px;color:var(--muted);cursor:pointer;padding:8px 0}
.footer-reading[open]>summary{margin-bottom:8px}
.footer-reading a{display:block}
@media(max-width:767px){.content-disclosure>summary{font-size:14px;padding:22px 0}.motion-preview #keysy .portfolio-title{font-size:clamp(40px,8.6vw,64px)}}