/* Keep each navigation destination complete within a viewport when its content allows it. */
:root{--nav-h:96px}
.header{gap:16px;padding-inline:3vw}
.site-nav{gap:clamp(8px,1.05vw,15px)}
.site-nav a{font-size:clamp(15px,1.33vw,17px);line-height:1.4}
.site-nav .nav-contact{padding:12px 15px}
.site-nav .nav-contact span{margin-left:4px}
section[id],form[id]{scroll-margin-top:var(--nav-h)}
.screen-panel{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center}
.screen-panel>.section-wrap{width:100%;padding-block:clamp(25px,4svh,46px)}
.services .section-wrap{padding-bottom:clamp(25px,4svh,46px)}
.service-cards{margin-top:20px}
.service-card img{aspect-ratio:16/9}
.detail-grid>img{aspect-ratio:auto;height:auto;max-height:calc(100svh - var(--nav-h) - 70px);object-fit:contain}
.works-overview .commitments{margin:26px 0 28px}
.works-next{margin-top:3px}
.works-case .works-grid figure img{aspect-ratio:16/9;object-fit:contain}
.greeting-figure-title{display:none}
.greeting-letter-jump{display:none}
#greeting-letter{scroll-margin-top:var(--nav-h)}
.greeting-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,66px)}
.greeting-grid figure{max-width:min(100%,420px);justify-self:center}
.greeting-grid figure img{width:auto;max-width:100%;max-height:calc(100svh - var(--nav-h) - 70px);aspect-ratio:4/5;object-fit:contain}
.greeting h2{font-size:clamp(28px,2.8vw,39px);line-height:1.4;margin-bottom:14px}
.handwritten{font-size:clamp(16px,1.42vw,20px);line-height:1.62}
.handwritten p{margin-bottom:9px}
.representative-name{margin-top:10px;margin-bottom:5px}
.representative-name span{font-size:25px}
.greeting .demo-caption{margin-top:5px}
.flow-steps{margin-top:24px}
.contact-grid{align-items:center}
.contact-form-jump{display:none}
.form-row{margin-bottom:14px}
.contact .contact-demo{margin-top:18px}
#consultation-form{scroll-margin-top:var(--nav-h)}

@media(min-width:921px) and (max-height:700px){
  .greeting-grid figure img{max-height:calc(100svh - var(--nav-h) - 75px)}
  .greeting h2{font-size:clamp(25px,2.45vw,32px);line-height:1.3;margin-bottom:8px}
  .handwritten{font-size:clamp(15px,1.2vw,17px);line-height:1.43}
  .handwritten p{margin-bottom:5px}
  .representative-name{margin-top:5px}
  .representative-name span{font-size:23px}
  .screen-panel>.section-wrap{padding-block:20px}
  .services .section-wrap{padding-bottom:20px}
}
@media(min-width:761px) and (max-height:700px){
  .contact .section-wrap{padding-block:12px}
  .contact .form-row{margin-bottom:7px}
  .contact .form-row label{margin-bottom:5px}
  .contact textarea{height:88px;min-height:88px}
  .contact .form-submit{padding-block:12px}
}
@media(min-width:921px) and (max-height:580px){
  .greeting-grid{display:block;padding-block:0!important}
  .greeting-grid figure,.greeting-grid>div{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;align-items:center}
  .greeting-grid>div{align-items:flex-start}
  .greeting-figure-title{display:block;font-size:24px;font-weight:700;margin-bottom:12px}
  .greeting-letter-jump{display:inline-flex;margin-top:12px;font-size:13px}
  .greeting-grid figure img{max-height:calc(100svh - var(--nav-h) - 135px)}
  .faq details{padding-block:17px}
  .contact .section-wrap{padding-block:8px}
  .contact .form-row{margin-bottom:5px}
  .contact textarea{height:70px;min-height:70px}
  .contact .form-submit{padding-block:10px}
}
@media(max-width:920px){
  :root{--nav-h:68px}
  .header{padding:0 20px;gap:10px}
  .brand{font-size:18px}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:15px 22px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 25px #24384a15}
  .site-nav.open{display:flex}
  .site-nav a{padding:13px 0;font-size:16px;border-bottom:1px solid #dce5e7}
  .site-nav .nav-contact{padding:14px 18px;margin:12px 0 0;display:flex;justify-content:space-between}
  .menu-button{display:block;font-size:12px}
  .mobile-contact{display:inline-flex;font-size:12px;padding:10px 12px;min-height:42px;margin-left:auto}
  .screen-panel>.section-wrap{padding-block:clamp(22px,4svh,42px)}
  .services .section-wrap{padding-bottom:clamp(22px,4svh,42px)}
}
@media(max-width:760px){
  .service-card img{aspect-ratio:1.1;object-fit:cover}
  .detail-grid>img{max-height:min(38svh,310px);aspect-ratio:auto;object-fit:contain}
  .works-overview .commitments{margin:20px 0 25px}
  .works-case .works-grid figure img{aspect-ratio:16/9}
  .greeting-grid{display:grid;grid-template-columns:1fr;gap:0;padding-block:0!important}
  .greeting-grid figure{min-height:calc(100svh - var(--nav-h));width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto}
  .greeting-figure-title{display:block;font-weight:700;font-size:24px;margin-bottom:14px}
  .greeting-letter-jump{display:inline-flex;margin-top:14px;font-size:13px}
  .greeting-grid figure img{width:auto;max-width:100%;max-height:calc(100svh - var(--nav-h) - 110px)}
  .greeting-grid>div{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding:28px 0}
  .greeting h2{font-size:clamp(24px,6.7vw,29px)}
  .handwritten{font-size:clamp(15px,4.2vw,18px);line-height:1.75}
  .flow-steps{margin-top:20px}
  .contact-grid{padding-block:0!important}
  .contact-grid>div,#consultation-form{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding:28px 0}
  .contact-form-jump{display:inline-flex;align-self:flex-start}
  .contact .contact-demo{margin-top:20px}
}
@media(max-width:760px) and (max-height:700px){
  .greeting-grid>div{padding-block:20px}
  .handwritten{line-height:1.6}
  #consultation-form{padding-block:24px}
  .contact .form-row{margin-bottom:9px}
}
@media(max-width:370px){
  .header{padding:0 15px;gap:8px}
  .brand{font-size:16px}
  .mobile-contact{font-size:10.5px;padding:9px 10px}
  .menu-button{font-size:10.5px;padding:8px}
  .handwritten{font-size:15px}
}
@media(max-width:370px) and (max-height:700px){
  .works-overview .commitments{margin:8px 0}
  .works-overview h2{margin-bottom:14px}
  .greeting-grid>div{padding-block:20px}
  .greeting h2{font-size:22px;line-height:1.3;margin-bottom:8px}
  .handwritten{line-height:1.45}
  .handwritten p{margin-bottom:6px}
  .representative-name{margin-top:6px}
  #consultation-form{padding-block:24px}
  .contact .form-row{margin-bottom:6px}
}