/* Screen-aware service layout; the design previews scale as complete artworks. */
.webdesign-page{--wd-header-height:104px}
.wd-art-frame{display:contents}
@media(max-width:1150px){.webdesign-page{--wd-header-height:92px}}
@media(max-width:760px){.webdesign-page{--wd-header-height:78px}}
@media(max-height:500px) and (min-width:600px){.webdesign-page{--wd-header-height:64px}}
@media(min-width:761px){
  .wd-intro{display:flex;flex-direction:column;height:calc(100svh - var(--wd-header-height));min-height:0}
  .wd-intro-grid{flex:1;min-height:0}
  .wd-intro .wd-art-frame{display:block;position:relative;min-width:0;width:100%;height:var(--wd-art-height,300px);align-self:center}
  .wd-intro .wd-art-frame>.wd-hero-stage{position:absolute;left:50%;top:50%;width:560px;max-width:none;margin:0;padding:28px 22px 32px 0;transform:translate(-50%,-50%) scale(var(--wd-art-scale,1));transform-origin:center}
  .wd-intro .wd-art-frame .wd-hero-phone{width:121px;height:244px;right:0;bottom:8px}
}
@media(min-width:1500px) and (min-height:801px){
  .wd-intro .wd-art-frame>.wd-hero-stage{width:700px}
  .wd-intro .wd-art-frame .wd-hero-phone{width:143px;height:285px}
}
@media(min-width:761px) and (max-height:800px){
  .wd-intro{padding-top:30px;padding-bottom:65px}
  .wd-intro-grid{padding-top:16px;gap:30px;grid-template-columns:1.08fr .92fr}
  .wd-intro .eyebrow{margin-bottom:12px}
  .wd-intro-copy h1{font-size:clamp(40px,7svh,58px);margin:12px 0 20px;letter-spacing:-2px}
  .wd-title-break{display:none}
  .wd-lead{line-height:1.75;margin-bottom:22px}
  .wd-actions{gap:14px}
  .wd-intro-foot{margin-top:14px}
  .wd-intro .build-steps{margin-top:10px}
  .wd-intro .build-steps button{white-space:nowrap}
  .wd-intro .build-caption-bottom{flex-wrap:wrap;gap:6px 16px}
  .wd-intro .build-caption-bottom>span{max-width:none}
  .wd-intro .build-playback{margin-left:auto}
  .wd-intro .build-phase-status{min-height:24px}
  .wd-intro .build-progress{margin:7px 0 9px}

  .webdesign-page main>.section:not(.wd-intro){padding-block:clamp(60px,10svh,80px)}
  .webdesign-page main>.section:not(.wd-intro) h2{font-size:clamp(34px,5.5svh,43px)}
  .webdesign-page main>.section:not(.wd-intro) .eyebrow{margin-bottom:16px}
  .wd-section-head{gap:40px;margin-bottom:26px;align-items:center}
  .wd-section-head>p{max-width:420px;line-height:1.8}
  .wd-delivery,.wd-investment,.wd-faq{gap:clamp(30px,4vw,65px)}
  .wd-delivery-list li{padding-block:20px}
  .wd-situation-grid{gap:24px}
  .wd-process-list{gap:22px}
  .wd-process-list li>span{margin-bottom:18px}
  .wd-care{padding:28px}
  .wd-care-symbol{width:40px;height:40px;margin-bottom:22px;font-size:22px}
  .wd-showcase-build{margin-top:28px;gap:30px}
  .wd-showcase-build .build-steps{margin-block:18px}
  .wd-build.wd-showcase-build .build-steps button{min-height:58px;padding:10px}
  .wd-concept-points{gap:28px;margin-top:28px}
}
@media(min-width:761px) and (max-height:640px){
  .wd-intro .eyebrow{margin-bottom:4px}
  .wd-intro-copy h1{margin-top:4px;margin-bottom:14px}
  .wd-lead{margin-bottom:16px}
  .wd-intro-foot{margin-top:10px}
}
@media(max-height:800px),(max-width:760px){
  .wd-art-frame{display:block;position:relative;min-width:0;width:100%;height:var(--wd-art-height,300px);align-self:center}
  .wd-build .wd-art-frame>.wd-hero-stage{position:absolute;left:50%;top:50%;width:560px;max-width:none;margin:0;padding:28px 22px 32px 0;transform:translate(-50%,-50%) scale(var(--wd-art-scale,1));transform-origin:center}
  .wd-build .wd-art-frame .wd-hero-phone{width:121px;height:244px;border-width:5px;border-radius:21px;right:0;bottom:8px}
  .wd-build.wd-showcase-build .wd-art-frame>.wd-hero-stage{width:600px;padding:20px 25px 25px 0}
  .wd-build.wd-showcase-build .wd-art-frame .wd-hero-phone{width:145px;height:300px;border-width:5px;border-radius:21px;bottom:0}
}
@media(min-width:761px) and (max-height:550px){.wd-intro{height:auto;min-height:calc(100svh - var(--wd-header-height))}}
@media(min-width:1151px) and (min-height:480px) and (max-height:560px){
  .wd-intro{height:calc(100svh - var(--wd-header-height));min-height:0;padding-top:12px;padding-bottom:65px}
  .wd-intro-grid{padding-top:8px}
  .wd-intro-copy h1{font-size:clamp(36px,8svh,45px);margin-top:0;margin-bottom:12px}
  .wd-lead{line-height:1.65;margin-bottom:14px}
  .wd-actions .button{padding-block:14px}
  .wd-intro-foot{margin-top:8px}
  .wd-intro .build-steps{margin-top:6px}
  .wd-intro .build-phase-detail{display:none}
}
@media(max-width:760px){
  .wd-intro{min-height:calc(100svh - var(--wd-header-height))}
  .wd-build.wd-showcase-build .wd-art-frame{margin-inline:auto}
}