:root{--ink:#202321;--muted:#797d79;--line:#e1e3de;--accent:#db582d;--soft:#f6f7f4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}header{height:122px;margin:0 4.5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:38px}.descriptor{display:flex;align-items:center;flex-shrink:0}.logo-link{padding:6px 0}.site-logo{display:block;height:72px;width:auto;object-fit:contain}.site-logo-header{height:84px}.descriptor span{display:block;font-size:9px;letter-spacing:.2em;color:var(--muted);margin-top:7px}header nav{display:flex;gap:42px;margin:auto;font-size:17px}.header-link{font-size:17px;border-bottom:1px solid #555;padding:12px 0}.header-link span{margin-left:30px}.menu-toggle{display:none}.hero{position:relative;margin:0 4.5%;display:grid;grid-template-columns:1.08fr 1fr;gap:12px;min-height:640px;align-items:center;padding:48px 0 42px;overflow:visible}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:28px}.eyebrow i,.scene-bottom i{width:6px;height:6px;background:var(--accent);display:inline-block;border-radius:50%}h1{font-size:clamp(66px,7.7vw,124px);font-weight:550;line-height:.98;letter-spacing:-.067em}h1>span{display:block;color:var(--ink)}.hero-description{font-size:18px;line-height:1.65;color:#777d76;margin-top:30px}.underlink{font-size:15px;display:inline-flex;gap:30px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-top:23px}.hero-right{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:1;min-height:640px;padding-top:420px}.scene-wrap{position:absolute;top:-6px;left:0;right:0;height:1120px;background:transparent;overflow:visible;pointer-events:none;z-index:0}.scene-label{position:absolute;top:9px;left:15px;right:15px;display:flex;justify-content:space-between;color:#979b95;font-size:10px;letter-spacing:.12em;z-index:1}.scene-label:before{content:'+';position:absolute;top:20px;left:0;color:#bac0b6;font-size:20px}.scene-label--compact{justify-content:flex-end}.scene-label--compact:before{display:none}.scene-label--compact span:first-child{display:none}#crane-scene{height:100%;width:100%}#crane-scene canvas{display:block;width:100%;height:100%}#crane-fallback{position:absolute;top:0;right:-12%;width:128%;height:auto;object-fit:contain;max-width:none}.scene-bottom{position:absolute;bottom:13px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#7b8277}.scene-bottom i{width:4px;height:4px;margin-right:6px}.scene-bottom button{border:1px solid var(--line);border-radius:50%;width:27px;height:27px;background:#fff}.button{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:21px 26px;font-size:17px;border-radius:3px;transition:background .2s,transform .2s}.button:hover{background:#3c443b}.button span{font-size:22px;line-height:1}.hero-button{margin:18px 36px 0;position:relative;z-index:3}.button-note{text-align:center;font-size:13px;color:var(--muted);margin-top:12px;position:relative;z-index:3}.principles{margin:0 4.5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr) auto;padding:25px 0;gap:20px;color:#9a9f98;font-size:10px}.principles b{color:#565d53;font-size:11px;font-weight:500;margin-left:13px}.principles>a{font-size:9px;letter-spacing:.1em;color:var(--ink)}.section{padding:96px 4.5%}.problems{padding-top:132px}.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px}.problem-grid article{padding:30px 30px 34px;border-right:1px solid var(--line);min-height:235px}.problem-grid article:last-child{border-right:0}.problem-grid h3{font-size:20px;margin-top:48px}.problem-grid p{font-size:15px;line-height:1.8;color:var(--muted);margin-top:14px;max-width:320px}.problems .section-head>p{max-width:520px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}.section-head .eyebrow{color:#858b80;margin-bottom:20px}h2{font-weight:500;font-size:clamp(32px,3.6vw,54px);line-height:1.1;letter-spacing:-.045em}.section-head>p{font-size:16px;line-height:1.7;color:var(--muted)}.trade-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden}.trade-grid article{min-height:310px;padding:30px 30px 34px;border-right:1px solid var(--line);background:#fff}.trade-grid article:last-child{border-right:0}.trade-grid h3{font-size:24px;margin-top:62px;letter-spacing:-.025em}.trade-grid p{margin-top:16px;font-size:16px;line-height:1.85;color:var(--muted);max-width:350px}.trade-grid b{font-weight:600;color:var(--ink)}.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product{border:1px solid var(--line);border-radius:4px;padding:18px 20px 25px;min-width:0;transition:border-color .2s,transform .2s;overflow:hidden}.product:hover{border-color:#939b8b;transform:translateY(-4px)}.product-top{display:flex;justify-content:space-between;font-size:11px;color:#959c90}.product-top span:last-child{color:var(--ink);font-size:19px}.product img{width:100%;height:170px;object-fit:contain;margin:20px 0 24px;mix-blend-mode:multiply}.product img.photo{object-fit:cover;border-radius:2px}h3{font-size:17px;font-weight:550;letter-spacing:-.025em}.product p{font-size:11px;color:var(--muted);line-height:1.6;margin-top:10px}.catalog-foot{display:flex;justify-content:space-between;font-size:11px;margin-top:24px;gap:20px}.catalog-foot p{color:var(--muted)}.catalog-foot a{border-bottom:1px solid var(--line);padding-bottom:5px}.approach{background:var(--soft)}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dadfd5;border-radius:4px}.reason-grid article{padding:28px 30px 30px;position:relative;border-right:1px solid #dadfd5}.reason-grid article:last-child{border:0}.number{font-size:12px;color:#9aa190}.reason-icon{height:95px;display:flex;align-items:center;font-size:44px;color:#747f6c}.reason-grid p{font-size:15px;line-height:1.8;color:var(--muted);margin-top:15px;max-width:310px}.tag{display:inline-block;font-size:10px;letter-spacing:.1em;color:#7e8876;border-top:1px solid #d9ded3;padding-top:20px;margin-top:28px;width:100%}.delivery{display:grid;grid-template-columns:1fr 1fr;gap:10%}.delivery-intro{font-size:16px;color:var(--muted);line-height:1.7;max-width:380px;margin-top:25px}.steps article{display:flex;gap:35px;border-bottom:1px solid var(--line);padding:30px 0}.steps article:first-child{padding-top:0}.steps article>span{font-size:11px;color:#969f8f;padding-top:4px}.steps p{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.7}.order{margin:0 4.5% 75px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:8%;border:1px solid var(--line);border-radius:4px;background:linear-gradient(115deg,#f7f8f4,#fff 62%)}.order-copy>p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.8;margin-top:22px}.order-mark{font-size:100px;color:#acb3a4;font-weight:200;margin-top:10px}form{display:flex;flex-direction:column;gap:18px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{font-size:13px;display:block}input,textarea{width:100%;background:#fff;border:1px solid #dce0d7;border-radius:2px;padding:13px;margin-top:8px;color:var(--ink);font-size:14px;line-height:1.6;resize:vertical}input:focus,textarea:focus{outline:1px solid #738269}input::placeholder,textarea::placeholder{color:#9ba094}.form-note{font-size:12px;line-height:1.6;color:var(--muted)}#form-status{font-size:14px;line-height:1.6;color:#49623d}.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:460px}.footer-logo{display:block;width:340px;max-width:100%;height:auto}.footer-links{display:flex;flex-wrap:wrap;gap:22px 34px;align-items:flex-start;font-size:16px}.footer-links a{color:var(--ink)}.footer-sub{font-size:16px;line-height:1.7;color:var(--muted)}footer{margin:0 4.5%;padding:54px 0 64px;border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:50px;font-size:16px}footer .copyright{margin-left:auto;color:var(--muted);padding-top:8px}[hidden]{display:none!important}@media(min-width:1600px){body{max-width:1800px;margin:auto}.hero{min-height:760px}.scene-wrap{height:560px}}@media(max-width:1000px){.trade-grid{grid-template-columns:1fr}.trade-grid article{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.trade-grid article:last-child{border-bottom:0}.trade-grid h3{margin-top:26px}.problem-grid{grid-template-columns:1fr}.problem-grid article{border-right:0;border-bottom:1px solid var(--line);min-height:auto}.problem-grid article:last-child{border-bottom:0}.problem-grid h3{margin-top:24px}header nav{gap:18px}.hero{min-height:580px}h1{font-size:8vw}.scene-wrap{height:390px}.hero-button{margin:8px 10px 0}.principles{grid-template-columns:repeat(3,1fr)}.principles>a{display:none}.catalog-grid{grid-template-columns:repeat(2,1fr)}.reason-grid article{padding:22px}.section{padding:65px 4.5%}.order{padding:30px}.field-row{grid-template-columns:1fr}.section-head>p{max-width:280px}}@media(max-width:700px){header{height:88px;margin:0 6%}.header-link,header nav{display:none}.menu-toggle{display:block;margin-left:auto;background:none;border:1px solid var(--line);padding:7px 12px;font-size:19px}#mobile-menu{padding:20px 6%;border-bottom:1px solid var(--line);display:grid;gap:20px;font-size:14px}.hero{margin:0 6%;grid-template-columns:1fr;padding-top:38px;gap:18px}.eyebrow{font-size:10px;margin-bottom:24px}h1{font-size:clamp(58px,12vw,86px)}.hero-description{font-size:15px;margin-top:23px}.underlink{font-size:13px}.scene-wrap{height:380px}.hero-button{margin:5px 0 0}.principles{margin:0 6%;grid-template-columns:1fr;padding:23px 0;gap:17px}.principles b{font-size:12px}.section{padding:60px 6%}.section-head{display:block}.section-head>p{margin-top:22px;max-width:none}.catalog-grid{gap:10px}.product{padding:13px}.product img{height:120px;margin:12px 0 18px}.product h3{font-size:15px}.product p{font-size:10px}.catalog-foot{flex-direction:column;gap:12px;align-items:flex-start}.reason-grid{grid-template-columns:1fr}.reason-grid article{border-right:0;border-bottom:1px solid #dadfd5;padding:26px}.reason-grid p{max-width:none}.reason-icon{height:65px}.delivery{grid-template-columns:1fr;gap:35px}.order{margin:0 6% 45px;padding:25px;grid-template-columns:1fr;gap:32px}.order-mark{display:none}.order-copy>p:not(.eyebrow){font-size:12px}.field-row{grid-template-columns:1fr}footer{margin:0 6%;flex-wrap:wrap;gap:28px;padding:38px 0 42px}.footer-brand{max-width:none}.footer-logo{width:240px}.footer-links{font-size:15px;gap:16px 24px}.copyright{margin-left:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Supplied crane image replaces the WebGL scene. */
#crane-scene{position:relative;height:100%;width:100%;padding:0}#crane-fallback{mix-blend-mode:normal}



@media(max-width:1000px){.site-logo{height:58px}header nav{font-size:15px}.header-link{font-size:15px}.site-logo-header{height:68px}.hero{min-height:620px}.hero-right{min-height:620px;padding-top:320px}.scene-wrap{position:absolute;top:0;left:0;right:0;height:760px}.hero-button{margin:10px 10px 0}#crane-fallback{width:120%;right:-5%}.problems{padding-top:110px}}
@media(max-width:700px){.site-logo{height:48px}.site-logo-header{height:54px}.hero{min-height:auto;align-items:start}.hero-right{min-height:auto;padding-top:0;justify-content:flex-start}.scene-wrap{position:relative;height:380px;top:auto;left:auto;right:auto;pointer-events:none}.problems{padding-top:60px}}


/* Real 3D crane built from the uploaded tower_crane.glb geometry. */
#crane-scene{position:relative;isolation:isolate;overflow:visible!important;background:transparent!important;padding:0!important}
#crane-scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:2;pointer-events:none}
#crane-fallback{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;opacity:.12;transition:opacity .25s ease;z-index:1}
#crane-scene.is-3d-ready #crane-fallback{opacity:0}
.crane-loading{position:absolute;right:12px;top:16px;z-index:4;font-size:11px;letter-spacing:.08em;color:#8b8f89;text-transform:uppercase}
.scene-wrap{height:1040px!important;pointer-events:none}
.hero-right{padding-top:410px!important}
@media(max-width:1000px){.scene-wrap{height:800px!important}.hero-right{padding-top:330px!important}}
@media(max-width:700px){.scene-wrap{height:430px!important}.hero-right{padding-top:0!important}#crane-scene canvas{position:absolute}.crane-loading{font-size:9px}}


/* v12: enlarge and lift the real 3D crane */
.hero{min-height:700px!important;align-items:start!important}
.hero-copy{position:relative;z-index:3;padding-top:32px}
.hero-right{min-height:700px!important;justify-content:flex-start!important;padding-top:360px!important}
.scene-wrap{position:absolute!important;top:-95px!important;left:-2%!important;right:-10%!important;height:1080px!important;overflow:visible!important;z-index:1}
#crane-scene{position:relative;overflow:visible!important}
#crane-scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:2;pointer-events:none}
.hero-button{margin:18px 24px 0!important;position:relative;z-index:3}
.button-note{position:relative;z-index:3}
.problems{padding-top:150px!important}
@media(max-width:1200px){
  .hero{min-height:640px!important}
  .hero-right{min-height:640px!important;padding-top:315px!important}
  .scene-wrap{top:-70px!important;height:900px!important;right:-6%!important}
}
@media(max-width:1000px){
  .hero{min-height:600px!important}
  .hero-right{min-height:600px!important;padding-top:280px!important}
  .scene-wrap{top:-40px!important;left:0!important;right:-2%!important;height:760px!important}
  .problems{padding-top:120px!important}
}
@media(max-width:700px){
  .hero{min-height:auto!important;align-items:start!important}
  .hero-right{min-height:auto!important;padding-top:0!important;justify-content:flex-start!important}
  .scene-wrap{position:relative!important;top:auto!important;left:auto!important;right:auto!important;height:430px!important}
  .problems{padding-top:60px!important}
}


/* v13: full-crane framing — large, high, and fully visible */
.hero{min-height:680px!important;align-items:center!important}
.hero-copy{padding-top:0!important}
.hero-right{min-height:680px!important;padding-top:360px!important;justify-content:flex-start!important}
.scene-wrap{position:absolute!important;top:-35px!important;left:-4%!important;right:-8%!important;height:990px!important;overflow:visible!important;z-index:1}
.hero-button{margin:16px 24px 0!important;z-index:4}
.button-note{z-index:4}
.problems{padding-top:145px!important}
@media(max-width:1200px){
 .hero{min-height:640px!important}
 .hero-right{min-height:640px!important;padding-top:330px!important}
 .scene-wrap{top:-25px!important;left:-2%!important;right:-5%!important;height:850px!important}
}
@media(max-width:1000px){
 .hero{min-height:610px!important}
 .hero-right{min-height:610px!important;padding-top:300px!important}
 .scene-wrap{top:-10px!important;left:0!important;right:-2%!important;height:760px!important}
 .problems{padding-top:110px!important}
}
@media(max-width:700px){
 .hero{min-height:auto!important;align-items:start!important}
 .hero-right{min-height:auto!important;padding-top:0!important}
 .scene-wrap{position:relative!important;top:auto!important;left:auto!important;right:auto!important;height:440px!important}
 .problems{padding-top:60px!important}
}


/* v15: pinned first screen, overlaying second block, lower CTA, crane slightly higher */
.hero-stage{position:relative;height:175vh;z-index:1;margin-bottom:-14vh}
.hero{position:sticky!important;top:0;min-height:100vh!important;height:100vh;box-sizing:border-box;background:#fff;z-index:1;align-items:center!important;padding-bottom:34px!important;overflow:clip}
.hero-right{min-height:100%!important;justify-content:flex-end!important;padding-top:0!important;padding-bottom:34px!important;position:relative;z-index:2}
.hero-button{margin:0 24px 0!important;position:relative;z-index:5}
.button-note{margin-top:14px!important;position:relative;z-index:5}
.scene-wrap{position:absolute!important;top:-62px!important;left:-5%!important;right:-8%!important;height:960px!important;overflow:visible!important;z-index:1}
#crane-scene{position:relative;overflow:visible!important}
#crane-scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:2;pointer-events:none}
.problems{position:relative;z-index:8;background:#fff;margin-top:-4vh!important;padding-top:92px!important;border-top-left-radius:30px;border-top-right-radius:30px;box-shadow:0 -18px 44px rgba(17,21,26,.055)}
@media(max-width:1200px){
  .hero-stage{height:165vh;margin-bottom:-10vh}
  .scene-wrap{top:-48px!important;left:-3%!important;right:-4%!important;height:860px!important}
}
@media(max-width:1000px){
  .hero-stage{height:150vh;margin-bottom:-6vh}
  .hero{height:100vh;min-height:100vh!important}
  .hero-right{padding-bottom:22px!important}
  .scene-wrap{top:-20px!important;left:0!important;right:-2%!important;height:730px!important}
  .problems{margin-top:0!important;padding-top:78px!important;border-top-left-radius:22px;border-top-right-radius:22px}
}
@media(max-width:700px){
  .hero-stage{height:auto;margin-bottom:0}
  .hero{position:relative!important;height:auto;min-height:auto!important;overflow:visible}
  .hero-right{min-height:auto!important;padding-bottom:0!important;justify-content:flex-start!important}
  .scene-wrap{position:relative!important;top:auto!important;left:auto!important;right:auto!important;height:430px!important}
  .hero-button{margin:8px 0 0!important}
  .problems{margin-top:0!important;padding-top:60px!important;border-radius:0;box-shadow:none}
}


/* v16 — full overlay transition between screen 1 and screen 2 */
header{
  position:sticky!important;
  top:0!important;
  z-index:5!important;
  background:#fff!important;
}

.hero-stage{
  position:relative!important;
  height:200vh!important;
  margin-bottom:-100vh!important;
  z-index:1!important;
}

.hero{
  position:sticky!important;
  top:122px!important;
  height:calc(100vh - 122px)!important;
  min-height:calc(100vh - 122px)!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:20px!important;
  padding-bottom:24px!important;
  overflow:hidden!important;
  background:#fff!important;
  z-index:2!important;
}

.hero-copy{
  align-self:center!important;
}

.hero-right{
  min-height:100%!important;
  height:100%!important;
  padding-top:0!important;
  padding-bottom:22px!important;
  justify-content:flex-end!important;
}

.scene-wrap{
  top:-86px!important;
  left:-5%!important;
  right:-8%!important;
  height:calc(100vh - 52px)!important;
}

.hero-button{
  margin:0 24px 0!important;
}

.problems{
  position:relative!important;
  z-index:20!important;
  min-height:100vh!important;
  margin-top:0!important;
  padding-top:105px!important;
  padding-bottom:100px!important;
  background:#fff!important;
  border-radius:0!important;
  box-shadow:0 -22px 54px rgba(17,21,26,.075)!important;
}

/* Keep all later sections above the pinned first screen too. */
.approach,.trade,.delivery,.order,footer{
  position:relative;
  z-index:20;
  background:#fff;
}

@media(max-width:1200px){
  .hero{top:122px!important;height:calc(100vh - 122px)!important;min-height:calc(100vh - 122px)!important}
  .scene-wrap{top:-58px!important;height:calc(100vh - 70px)!important}
}

@media(max-width:1000px){
  header{position:sticky!important;top:0!important}
  .hero-stage{height:180vh!important;margin-bottom:-80vh!important}
  .hero{top:122px!important;height:calc(100vh - 122px)!important;min-height:calc(100vh - 122px)!important}
  .scene-wrap{top:-30px!important;height:calc(100vh - 90px)!important}
  .problems{min-height:100vh!important;padding-top:84px!important}
}

@media(max-width:700px){
  header{position:relative!important}
  .hero-stage{height:auto!important;margin-bottom:0!important}
  .hero{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:auto!important;
    overflow:visible!important;
  }
  .scene-wrap{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    height:430px!important;
  }
  .problems{
    min-height:auto!important;
    padding-top:60px!important;
    box-shadow:none!important;
  }
}


/* v17 — crane slightly bigger, lower and more to the left */
.scene-wrap{
  top:-66px!important;
  left:-7%!important;
  right:-6%!important;
}
@media(max-width:1200px){
  .scene-wrap{
    top:-46px!important;
    left:-5%!important;
  }
}
@media(max-width:1000px){
  .scene-wrap{
    top:-26px!important;
    left:-2%!important;
  }
}


/* v18 — crane scale matched to the provided reference */
.scene-wrap{
  top:-52px!important;
  left:-9%!important;
  right:-3%!important;
}
@media(max-width:1200px){
  .scene-wrap{
    top:-42px!important;
    left:-7%!important;
    right:-2%!important;
  }
}
@media(max-width:1000px){
  .scene-wrap{
    top:-24px!important;
    left:-4%!important;
  }
}


/* v19 — crane 1.5x larger, lower and more to the left */
.scene-wrap{
  top:-8px!important;
  left:-18%!important;
  right:2%!important;
}
@media(max-width:1200px){
  .scene-wrap{
    top:-2px!important;
    left:-14%!important;
    right:1%!important;
  }
}
@media(max-width:1000px){
  .scene-wrap{
    top:8px!important;
    left:-9%!important;
    right:0!important;
  }
}


/* v20 — lower the crane composition so the jib becomes visible */
.scene-wrap{
  top:72px!important;
}
@media(max-width:1200px){
  .scene-wrap{
    top:58px!important;
  }
}
@media(max-width:1000px){
  .scene-wrap{
    top:36px!important;
  }
}


/* v21 — lower composition further so the jib is visible */
.scene-wrap{top:168px!important;left:-18%!important;right:2%!important;}
@media(max-width:1200px){.scene-wrap{top:132px!important;left:-14%!important;right:1%!important;}}
@media(max-width:1000px){.scene-wrap{top:92px!important;left:-9%!important;right:0!important;}}


/* v22 — cleaner final framing for full jib visibility */
.hero{overflow:visible!important;}
.hero-right{overflow:visible!important;padding-top:400px!important;}
.scene-wrap{position:absolute!important;top:118px!important;left:-13%!important;right:-6%!important;height:1260px!important;overflow:visible!important;pointer-events:none!important;z-index:1!important;}
#crane-scene{overflow:visible!important;}
#crane-scene canvas{overflow:visible!important;}
.hero-button{position:relative;z-index:4!important;}
.button-note{position:relative;z-index:4!important;}
@media(max-width:1200px){.scene-wrap{top:94px!important;left:-10%!important;right:-4%!important;height:1120px!important;}.hero-right{padding-top:370px!important;}}
@media(max-width:1000px){.scene-wrap{top:68px!important;left:-7%!important;right:-2%!important;height:960px!important;}.hero-right{padding-top:320px!important;}}
@media(max-width:700px){.scene-wrap{top:auto!important;left:auto!important;right:auto!important;height:430px!important;}.hero-right{padding-top:0!important;}}


/* v23 — reframe crane so the jib is clearly visible */
.hero{overflow:visible!important;}
.hero-right{overflow:visible!important;padding-top:430px!important;min-height:720px!important;}
.scene-wrap{position:absolute!important;top:154px!important;left:-10%!important;right:-2%!important;height:1320px!important;overflow:visible!important;pointer-events:none!important;z-index:1!important;}
#crane-scene{overflow:visible!important;}
#crane-scene canvas{overflow:visible!important;display:block;}
.hero-button{margin:30px 24px 0!important;position:relative;z-index:4!important;}
.button-note{position:relative;z-index:4!important;margin-top:12px!important;}
@media(max-width:1200px){.hero-right{padding-top:390px!important;min-height:680px!important;}.scene-wrap{top:128px!important;left:-8%!important;right:0!important;height:1180px!important;}}
@media(max-width:1000px){.hero-right{padding-top:340px!important;min-height:620px!important;}.scene-wrap{top:98px!important;left:-5%!important;right:2%!important;height:980px!important;}}
@media(max-width:700px){.scene-wrap{top:auto!important;left:auto!important;right:auto!important;height:430px!important;}.hero-right{padding-top:0!important;min-height:auto!important;}}


/* v24 — prevent top/left crane clipping while preserving scale and placement */
.hero-right{overflow:visible!important;padding-top:438px!important;min-height:730px!important;}
.scene-wrap{position:absolute!important;top:162px!important;left:-14%!important;right:-4%!important;height:1380px!important;overflow:visible!important;pointer-events:none!important;z-index:1!important;}
#crane-scene,#crane-scene canvas{overflow:visible!important;}
@media(max-width:1200px){.hero-right{padding-top:398px!important;min-height:690px!important;}.scene-wrap{top:136px!important;left:-11%!important;right:-2%!important;height:1230px!important;}}
@media(max-width:1000px){.hero-right{padding-top:344px!important;min-height:630px!important;}.scene-wrap{top:104px!important;left:-7%!important;right:0!important;height:1020px!important;}}
@media(max-width:700px){.scene-wrap{top:auto!important;left:auto!important;right:auto!important;height:430px!important;}.hero-right{padding-top:0!important;min-height:auto!important;}}


/* v25 — expand 3D scene bounds so the crane is not clipped on the left/top */
.hero{overflow:visible!important;}
.hero-right{overflow:visible!important;padding-top:438px!important;min-height:730px!important;}
.scene-wrap{position:absolute!important;top:132px!important;left:-24%!important;right:-8%!important;height:1480px!important;overflow:visible!important;pointer-events:none!important;z-index:1!important;}
#crane-scene{overflow:visible!important;clip-path:none!important;contain:none!important;isolation:isolate!important;}
#crane-scene canvas{overflow:visible!important;display:block;clip-path:none!important;}
.hero-button{position:relative;z-index:4!important;}
.button-note{position:relative;z-index:4!important;}
@media(max-width:1200px){.hero-right{padding-top:398px!important;min-height:690px!important;}.scene-wrap{top:112px!important;left:-20%!important;right:-6%!important;height:1300px!important;}}
@media(max-width:1000px){.hero-right{padding-top:344px!important;min-height:630px!important;}.scene-wrap{top:88px!important;left:-14%!important;right:-3%!important;height:1080px!important;}}
@media(max-width:700px){.scene-wrap{position:relative!important;top:auto!important;left:auto!important;right:auto!important;height:430px!important;}.hero-right{padding-top:0!important;min-height:auto!important;}}


/* v27 — full-width crane without clipping, and no hero drop before overlay */
header{position:sticky!important;top:0!important;z-index:5!important;background:#fff!important;}
.hero-stage{position:relative!important;height:200vh!important;margin-bottom:-100vh!important;z-index:1!important;}
.hero{position:sticky!important;top:122px!important;height:calc(100vh - 122px)!important;min-height:calc(100vh - 122px)!important;overflow:visible!important;background:#fff!important;z-index:2!important;}
.hero-copy{position:relative!important;z-index:8!important;}
.hero-right{position:relative!important;z-index:1!important;overflow:visible!important;min-height:100%!important;height:100%!important;padding-top:0!important;padding-bottom:22px!important;justify-content:flex-end!important;}
.scene-wrap{position:absolute!important;top:22px!important;left:-108%!important;width:216%!important;right:auto!important;height:1400px!important;overflow:visible!important;pointer-events:none!important;z-index:1!important;background:transparent!important;}
#crane-scene{position:relative!important;width:100%!important;height:100%!important;overflow:visible!important;clip-path:none!important;contain:none!important;isolation:isolate!important;}
#crane-scene canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;overflow:visible!important;clip-path:none!important;pointer-events:none!important;}
#crane-fallback{position:absolute!important;top:0!important;left:0!important;right:auto!important;width:100%!important;max-width:none!important;height:auto!important;object-fit:contain!important;}
.hero-button,.button-note{position:relative!important;z-index:9!important;}
.problems{position:relative!important;z-index:20!important;background:#fff!important;}
@media(max-width:1200px){
  .hero{top:122px!important;height:calc(100vh - 122px)!important;min-height:calc(100vh - 122px)!important;}
  .scene-wrap{top:18px!important;left:-104%!important;width:212%!important;height:1240px!important;}
}
@media(max-width:1000px){
  header{position:sticky!important;top:0!important;}
  .hero-stage{height:180vh!important;margin-bottom:-80vh!important;}
  .hero{top:122px!important;height:calc(100vh - 122px)!important;min-height:calc(100vh - 122px)!important;}
  .hero-right{padding-bottom:18px!important;}
  .scene-wrap{top:24px!important;left:-100%!important;width:206%!important;height:1040px!important;}
  .problems{min-height:100vh!important;padding-top:84px!important;}
}
@media(max-width:700px){
  header{position:relative!important;}
  .hero-stage{height:auto!important;margin-bottom:0!important;}
  .hero{position:relative!important;top:auto!important;height:auto!important;min-height:auto!important;overflow:visible!important;}
  .hero-right{min-height:auto!important;height:auto!important;padding-bottom:0!important;justify-content:flex-start!important;}
  .scene-wrap{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:430px!important;}
  .problems{min-height:auto!important;padding-top:60px!important;}
}


/* v28 — move crane back to the right, lower it slightly, and prevent top clipping */
.hero{overflow:visible!important;}
.hero-copy{position:relative!important;z-index:8!important;}
.hero-right{position:relative!important;z-index:1!important;overflow:visible!important;}
.scene-wrap{top:10px!important;left:-96%!important;right:auto!important;width:216%!important;height:1380px!important;overflow:visible!important;pointer-events:none!important;}
#crane-scene{position:relative!important;width:100%!important;height:100%!important;overflow:visible!important;clip-path:none!important;contain:none!important;}
#crane-scene canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;overflow:visible!important;clip-path:none!important;pointer-events:none!important;transform:translateX(23%) translateY(34px)!important;transform-origin:center center!important;}
#crane-fallback{transform:translateX(23%) translateY(34px)!important;transform-origin:center center!important;}
.hero-button,.button-note{position:relative!important;z-index:9!important;}
@media(max-width:1400px){
  .scene-wrap{top:16px!important;left:-94%!important;width:214%!important;height:1280px!important;}
  #crane-scene canvas,#crane-fallback{transform:translateX(20%) translateY(32px)!important;}
}
@media(max-width:1200px){
  .scene-wrap{top:18px!important;left:-92%!important;width:212%!important;height:1180px!important;}
  #crane-scene canvas,#crane-fallback{transform:translateX(17%) translateY(28px)!important;}
}
@media(max-width:1000px){
  .scene-wrap{top:18px!important;left:-86%!important;width:202%!important;height:980px!important;}
  #crane-scene canvas,#crane-fallback{transform:translateX(10%) translateY(18px)!important;}
}
@media(max-width:700px){
  .scene-wrap{top:auto!important;left:auto!important;width:100%!important;height:430px!important;}
  #crane-scene canvas,#crane-fallback{transform:none!important;}
}


/* v31 — align note to the right edge of the order button */
.button-note{margin:12px 36px 0 !important;text-align:right !important;padding-right:0 !important;}
@media(max-width:700px){.button-note{text-align:center !important;}}

/* Reduce first-screen text by 2px at every viewport width. */
.hero h1 { font-size: clamp(64px, calc(7.7vw - 2px), 122px); }
.hero .hero-description { font-size: 16px; }
.hero .underlink { font-size: 13px; }
.hero .hero-button { font-size: 15px; }
.hero .button-note { font-size: 11px; }
@media (max-width: 1000px) {
  .hero h1 { font-size: calc(8vw - 2px); }
}
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(56px, calc(12vw - 2px), 84px); }
  .hero .hero-description { font-size: 13px; }
  .hero .underlink { font-size: 11px; }
}

form .button:disabled { cursor: wait; opacity: .65; }
#form-status[data-state="error"] { color: #b2463e; }
#form-status[data-state="pending"] { color: var(--muted); }


/* Contextual links to the order form. */
.section-action { display: flex; justify-content: flex-end; margin-top: 26px; }
.section-order-button { width: fit-content; max-width: 100%; padding: 16px 20px; border-radius: 0; font-size: 14px; }
.delivery-order-button { margin-top: 26px; }
@media (max-width: 700px) {
  .section-action .section-order-button, .delivery-order-button { width: 100%; }
}

/* Problems and benefits: shared line illustrations and card layout. */
:root{--brand-blue:#1647ff}
.insight-section {
  padding-top: 76px!important;
  padding-bottom: 76px!important;
  background: #fff!important;
  overflow: hidden;
}
.insight-section .insight-head {
  position: relative;
  z-index: 2;
  gap: 64px;
  margin-bottom: 38px;
}
.insight-section .insight-head > div { max-width: 660px; }
.insight-section .insight-head > p { max-width: 350px; font-size: 15px; line-height: 1.7; }
.insight-section .insight-grid {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.insight-section .insight-grid .insight-card {
  min-width: 0;
  min-height: 0;
  padding: 24px 26px 28px;
  border: 1px solid #e8ebee;
  background: #f7f8f9;
}
.insight-section .number { font-size: 11px; color: #8b939c; letter-spacing: .08em; }
.insight-section .insight-grid h3 { font-size: 22px; line-height: 1.2; font-weight: 550; margin-top: 0; }
.insight-section .insight-grid p { max-width: none; margin-top: 13px; font-size: 15px; line-height: 1.65; color: #737b83; }
.insight-diagram { display: block; width: 100%; height: 156px; margin: 18px 0 28px; overflow: visible; }
.insight-diagram path, .insight-diagram circle { stroke-linecap: round; stroke-linejoin: round; }
.diagram-grid { stroke: #dfe4e9; stroke-width: 1; }
.diagram-muted { stroke: #a7b1bd; stroke-width: 1.5; }
.diagram-accent { stroke: var(--brand-blue); stroke-width: 2; }
.diagram-halo { fill: #e8edff; }
.diagram-dot { fill: var(--brand-blue); }
.diagram-tag { fill: #fff; stroke: #dbe1e7; stroke-width: 1; }
.diagram-tag--blue { fill: #eef2ff; stroke: none; }
.diagram-label { fill: #939ca7; font-size: 9px; font-weight: 500; letter-spacing: 1px; }
.diagram-price { fill: #667382; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.diagram-currency { font-size: 12px; font-weight: 400; }
.diagram-label--blue { fill: var(--brand-blue); }
.diagram-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.3,.1,.2,1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 220ms);
}
.diagram-draw--second { transition-delay: calc(var(--reveal-delay, 0ms) + 370ms); }
.diagram-draw--third { transition-delay: calc(var(--reveal-delay, 0ms) + 520ms); }
.insight-card.is-pending .diagram-draw { stroke-dashoffset: 1; transition: none; }

/* Only JS-enhanced elements are hidden; the page remains readable without JS. */
.insight-head { --reveal-delay: 0ms; }
.insight-card { --reveal-delay: 90ms; }
.insight-card:nth-child(2) { --reveal-delay: 180ms; }
.insight-card:nth-child(3) { --reveal-delay: 270ms; }
.insight-section .reveal-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.insight-section .reveal-ready.is-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .insight-section .insight-head { gap: 36px; }
  .insight-section .insight-head > p { max-width: 280px; }
  .insight-section .insight-grid .insight-card { padding: 20px 18px 24px; }
  .insight-section .insight-grid h3 { font-size: 20px; }
  .insight-section .insight-grid p { font-size: 14px; }
  .insight-diagram { height: 138px; margin: 14px 0 22px; }
}
@media (max-width: 760px) {
  .insight-section { min-height: 0!important; padding-top: 54px!important; padding-bottom: 54px!important; }
  .insight-section .insight-head { display: block; margin-bottom: 28px; }
  .insight-section .insight-head > p { max-width: 460px; margin-top: 20px; font-size: 14px; }
  .insight-section .insight-grid { grid-template-columns: 1fr; gap: 10px; }
  .insight-section .insight-grid .insight-card { padding: 22px 24px 26px; }
  .insight-section .insight-grid h3 { font-size: 21px; }
  .insight-section .insight-grid p { font-size: 14px; }
  .insight-diagram { max-width: 360px; height: 138px; margin: 12px auto 24px; }
  .insight-card:nth-child(n) { --reveal-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  .insight-section .reveal-ready, .insight-section .reveal-ready.is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .insight-card .diagram-draw, .insight-card.is-pending .diagram-draw { stroke-dashoffset: 0; transition: none; }
}