/* SNAGOUT / Motion edition. Existing brand, a more expressive composition. */
:root{--text-display:clamp(3.6rem,6.8vw,7rem);--red-bright:#e14b35;--radius-panel:24px;--section-progress:0}
body{padding:var(--space-3);background:var(--bg)}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--red-bright);z-index:90;transform:scaleX(var(--read-progress,0));transform-origin:right;pointer-events:none}
.header{top:var(--space-3);inset-inline:var(--space-3);height:100px;border:0;padding-inline:4%;gap:var(--space-5)}
.header.scrolled{top:0;inset-inline:0;height:76px}
.nav{padding:var(--space-2) var(--space-6);background:#07132255;border:1px solid #ffffff24;border-radius:40px;backdrop-filter:blur(12px);gap:var(--space-6)}
.nav a{padding-block:var(--space-1)}.nav a::after{bottom:-4px;background:var(--red-bright)}.nav a.current::after{width:100%}
.header-cta{border-radius:40px;background:white;color:var(--navy);border:0;min-height:48px}
.header-cta:hover{background:var(--red-bright);color:white}
.hero{border-radius:var(--radius-panel);height:calc(100svh - 24px);min-height:760px;max-height:1100px}
.hero-content{padding-top:clamp(185px,25vh,260px);width:90%;z-index:3;pointer-events:none}
.hero-content button{pointer-events:auto}.hero-content h1{font-size:var(--text-display);line-height:1.27;font-weight:500;letter-spacing:-.055em;max-width:800px;animation:none}
.title-line{display:block;overflow:hidden;padding-bottom:var(--space-3)}
.title-line>span{display:block;animation:line-enter 1.3s var(--ease) both}
.title-line:nth-child(2)>span{animation-delay:.18s}
@keyframes line-enter{from{transform:translateY(105%);opacity:0}to{transform:translateY(0);opacity:1}}
.hero-second{font-weight:400;color:#fff}
.hero-description{font-size:var(--text-base);max-width:360px;margin-top:var(--space-6)}
.hero-content>.btn{border-radius:50px;min-height:64px;padding-inline:var(--space-8) var(--space-3);gap:var(--space-8);background:var(--red)}
.hero-content>.btn .arrow{width:42px;height:42px;display:grid;place-items:center;background:white;color:var(--red);border-radius:50%}
.hero-media{transform:translate3d(var(--pointer-x,0px),var(--hero-y,0px),0) scale(1.05);transition:transform 1s var(--ease)}
.hero-media img{position:absolute;inset:0;opacity:0;animation:cinema 18s ease-in-out infinite alternate;transition:opacity 1.6s ease;object-position:center}
.hero-media img.active{opacity:1}
.hero-shade{background:linear-gradient(270deg,#051327df,#05132765 50%,#05132718),linear-gradient(0deg,#061020c9,transparent 35%,#0610204d)}
.hero-bottom{width:90%;bottom:var(--space-8);z-index:4}
.focus-frame{position:absolute;top:32%;left:8%;width:31%;height:36%;z-index:2;color:white;transform:perspective(1000px) rotateY(var(--frame-tilt,0deg));transition:transform .8s var(--ease);animation:appear 1.8s .4s both}
.focus-corner{position:absolute;width:40px;height:40px;border-color:#fff8;border-style:solid}
.c1{top:0;left:0;border-width:1px 0 0 1px}.c2{top:0;right:0;border-width:1px 1px 0 0}.c3{bottom:0;left:0;border-width:0 0 1px 1px}.c4{bottom:0;right:0;border-width:0 1px 1px 0}
.focus-target{position:absolute;top:45%;left:48%;font:300 var(--text-xl) Manrope,sans-serif;opacity:.7}
.focus-sweep{position:absolute;height:1px;inset-inline:0;top:0;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 30px #ffffff7d;animation:focus-scan 5s ease-in-out infinite}
@keyframes focus-scan{0%,100%{top:4%;opacity:0}20%,75%{opacity:.7}85%{top:96%;opacity:0}}
.focus-label{position:absolute;bottom:var(--space-6);left:var(--space-6);right:var(--space-6);border:1px solid #ffffff40;background:#08152887;backdrop-filter:blur(14px);border-radius:40px;padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);transition:background .25s}
.focus-frame:hover .focus-label{background:var(--red)}.focus-frame:active .focus-label{background:var(--red-hover)}
.focus-dot{width:7px;height:7px;flex-shrink:0;background:var(--red-bright);border-radius:50%;box-shadow:0 0 0 5px #e14b3526}
.focus-meta{position:absolute;top:calc(100% + 16px);left:0;font-size:var(--text-xs);letter-spacing:.07em;color:#ffffffaf}
.scene-controls{display:flex;gap:var(--space-4);direction:ltr}
.scene-select{background:none;color:#fffa;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);min-height:44px;font:var(--text-xs) Manrope,sans-serif}
.scene-select i{display:block;width:30px;height:2px;background:#ffffff44;position:relative;overflow:hidden}
.scene-select.selected{color:white}.scene-select.selected i{width:64px}
.scene-select.selected i::after{content:"";position:absolute;inset:0;background:white;transform:scaleX(var(--scene-progress,0));transform-origin:left}
.service-ribbon{border-radius:0 0 var(--radius-panel) var(--radius-panel);background:transparent;color:var(--text);padding-inline:4%;margin-block:var(--space-2);min-height:90px}
.ribbon-caption{color:var(--muted)}.service-ribbon a{border-color:var(--line);transition:color .25s,background .25s}.service-ribbon a:hover{color:var(--red);background:var(--surface)}
.brand-marquee{overflow:hidden;direction:ltr;border-block:1px solid var(--line);padding-block:var(--space-6);color:var(--text)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;font:500 clamp(2.5rem,4vw,4.5rem)/1.1 Manrope,sans-serif;letter-spacing:-.06em}
.marquee-track>span{white-space:nowrap;flex-shrink:0;padding-inline-end:var(--space-8)}.marquee-track b{font-weight:400;color:var(--red-bright);margin-inline:var(--space-8)}
@keyframes marquee{to{transform:translateX(-50%)}}
.about{padding-block:var(--space-32)}
.about-title h2{font-size:clamp(2.8rem,4.6vw,4.7rem);line-height:1.4}
.about-copy{padding-top:var(--space-3)}
.values>div{border-inline-start:1px solid var(--line);padding-inline-start:var(--space-6)}
.services{border-radius:var(--radius-panel);padding-block:var(--space-24)}
.section-heading h2,.report h2,.journey h2{font-size:clamp(2.25rem,3.8vw,4rem)}
.service-tabs{gap:var(--space-4);border:0}
.service-tabs button{border:1px solid var(--line);border-radius:16px;padding:var(--space-6);transition:background .35s,color .35s,border-color .35s}
.service-tabs button::after{display:none}.service-tabs button[aria-selected=true]{background:var(--navy);color:white;border-color:var(--navy)}
.service-tabs button:hover{border-color:var(--red)}.service-tabs button:active{background:var(--red);color:white}
.service-tabs .tab-no{font-size:var(--text-lg);opacity:.6}
.service-stage{border-radius:20px;overflow:hidden}
.service-detail{min-height:555px}
.inspection-photo:hover>img{transform:none}
.report{border-radius:var(--radius-panel);margin-top:var(--space-3);position:relative}
.report::before{content:"03";position:absolute;inset-inline-end:4%;top:0;font:500 clamp(12rem,22vw,24rem)/1 Manrope,sans-serif;color:#ffffff04;pointer-events:none}
.report-paper{transform:rotate(var(--paper-rotation,-7deg));transition:transform .25s linear}
.report-visual:hover .report-paper{transform:rotate(var(--paper-rotation,-7deg))}
.report-back{transform:rotate(calc(var(--paper-rotation,-7deg) * -1))}
.btn-outline,.btn-white{border-radius:50px}
.steps{position:relative;gap:var(--space-4)}
.step{padding:var(--space-6);border:1px solid var(--line);border-radius:18px;transition:background .6s,border-color .6s}
.step.active-step{background:var(--surface);border-color:var(--red)}
.step-top>span{font-size:clamp(2.6rem,4vw,4.5rem);color:var(--muted);transition:color .6s}
.step.active-step .step-top>span{color:var(--red)}
.faq{border-radius:var(--radius-panel)}
.contact-banner{margin-top:var(--space-3);border-radius:var(--radius-panel);min-height:410px;display:grid;align-items:center}
.contact-banner>img{transform:scale(1.12);object-position:center calc(50% + var(--contact-y,0px))}
footer{border-radius:var(--radius-panel);margin-top:var(--space-3)}
.reveal{transition:opacity 1s var(--ease),clip-path 1.2s var(--ease);clip-path:inset(0 0 0 0)}
.js .reveal:not(.visible){clip-path:inset(0 0 30% 0)}
.step:nth-child(2),.values>div:nth-child(2){transition-delay:.06s}.step:nth-child(3){transition-delay:.12s}.step:nth-child(4){transition-delay:.18s}
.btn:active{scale:.98}dialog{border-radius:24px}
html[dir=ltr] .focus-frame{left:auto;right:7%}
html[lang=en] .hero-content h1{font-size:clamp(3.5rem,5.5vw,6rem);max-width:720px;line-height:1.12}
body.motion-paused .hero-media,body.motion-paused .focus-frame{transition:none}
body.motion-paused .header,body.motion-paused .title-line>span,body.motion-paused .hero-description,body.motion-paused .hero-content>.btn,body.motion-paused .hero-eyebrow,body.motion-paused .focus-frame,body.motion-paused dialog,body.motion-paused .nav.open,body.motion-paused .spot-info{animation:none!important;opacity:1;transform:none}
@media(max-width:1100px){.nav{padding-inline:var(--space-4);gap:var(--space-4)}.header .brand{width:145px}.focus-frame{left:6%;width:30%;top:38%;height:30%}.focus-label{left:var(--space-3);right:var(--space-3);font-size:var(--text-xs)}.step{padding:var(--space-4)}}
@media(max-width:820px){.nav{border-radius:20px;background:var(--navy)}.header .brand{width:150px}.focus-frame{display:none}.hero-content h1{font-size:clamp(3.8rem,9vw,5.5rem)}.hero-content{padding-top:200px}.hero{min-height:740px}.service-tabs button{padding:var(--space-4)}.service-stage{grid-template-columns:1fr 1fr}.service-detail{padding:var(--space-6)}.about{padding-block:var(--space-20)}.steps{gap:var(--space-6)}}
@media(max-width:600px){body{padding:var(--space-2)}.header{top:var(--space-2);inset-inline:var(--space-2);padding-inline:5%;height:86px}.header .brand{width:128px}.hero{border-radius:20px;height:calc(100svh - 16px);min-height:700px;max-height:950px}.hero-content{width:88%;padding-top:190px}.hero-content h1{font-size:clamp(3.15rem,12vw,4.5rem);line-height:1.36;letter-spacing:-.04em}.hero-description{font-size:var(--text-sm);margin-top:var(--space-4)}.hero-content>.btn{min-height:58px;margin-top:var(--space-6);padding-inline:var(--space-6) var(--space-2)}.hero-content>.btn .arrow{width:38px;height:38px}.hero-bottom{width:88%;bottom:var(--space-6);align-items:flex-end}.scroll-cue{gap:var(--space-2);max-width:145px}.scroll-line{display:none}.hero-controls{gap:var(--space-2)}.scene-controls{gap:0}.scene-select{padding-inline:var(--space-1);gap:var(--space-1)}.scene-select i{width:15px}.scene-select.selected i{width:24px}.hero-media img{object-position:40% center}.service-ribbon{padding-inline:0;min-height:80px}.service-ribbon a{padding-inline:var(--space-3)}.brand-marquee{padding-block:var(--space-5)}.marquee-track{font-size:2.7rem}.about{padding-block:var(--space-16)}.about-title h2{font-size:2.6rem}.values>div{border:0;padding:0}.services{padding-block:var(--space-16)}.service-tabs{gap:var(--space-2)}.service-tabs button{padding:var(--space-3) var(--space-2);font-size:var(--text-xs);border-radius:12px}.service-tabs .tab-no{font-size:var(--text-base)}.service-stage{grid-template-columns:1fr}.service-detail{min-height:490px;padding:var(--space-6)}.section-heading h2,.report h2,.journey h2{font-size:2rem}.steps{grid-template-columns:1fr;gap:var(--space-3)}.step{display:grid;grid-template-columns:60px 1fr;column-gap:var(--space-5);padding:var(--space-6)}.step-top{grid-row:1/3;margin:0;align-items:flex-start}.step-top i{display:none}.step h3{align-self:end}.step p{grid-column:2}.step-top>span{font-size:2.5rem}.contact-banner{min-height:340px}.focus-meta{display:none}html[lang=en] .hero-content h1{font-size:clamp(2.8rem,11vw,4rem);line-height:1.15}}
@media(prefers-reduced-motion:reduce){.title-line>span{transform:none!important;opacity:1!important}.reveal{clip-path:none!important}.hero-media,.focus-frame,.report-paper,.report-back{transform:none!important}.focus-sweep{display:none}}