/* Responsive refinements for clear reading on phones, tablets and small laptops. */
.seal{display:none!important}
.site-header{gap:2rem}
nav{white-space:nowrap}
.hero-copy,.intro-grid>*{min-width:0}

@media(max-width:1100px){
  .site-header{height:76px;padding:0 5vw}
  nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:24px 5vw 30px;flex-direction:column;align-items:stretch;gap:18px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(18,45,40,.09)}
  nav.open{display:flex}
  .menu{display:block;width:44px;height:44px;padding:6px;flex:0 0 auto}
  .menu span{display:block;width:25px;height:1px;background:var(--ink);margin:7px auto}
  .nav-cta{text-align:center;margin-top:3px}
  .hero{min-height:auto;display:block;padding:70px 5vw 0}
  .hero-copy{padding:0;max-width:720px}
  .hero-visual{min-height:420px;max-width:540px;margin:24px auto 0}
  .arch-one{width:min(390px,82vw);height:420px;right:0}
  .arch-two{width:min(290px,62vw);height:340px;right:10%}
  .value-card{top:15%;right:2%;width:215px}
  .trust-row{grid-template-columns:1fr;margin:0 -5vw}
  .trust-row div{padding:15px 5vw!important;border-right:0;border-bottom:1px solid var(--line)}
  .intro,.method,.why{padding:80px 5vw}
  .intro-grid,.method,.why{grid-template-columns:1fr;gap:50px}
  .services{grid-template-columns:1fr;margin-top:50px}
  .services article,.services article+article{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .services p{min-height:0}
  footer{flex-direction:column;gap:20px;text-align:center}
}

@media(max-width:520px){
  h1{font-size:clamp(2.65rem,14vw,3.45rem);line-height:1.02}
  .hero{padding-top:52px}
  .eyebrow,.section-tag{letter-spacing:.13em}
  .eyebrow:before,.section-tag:before{width:24px;margin-right:10px}
  .lead{font-size:1.03rem;margin-top:24px}
  .hero-actions{align-items:stretch;flex-direction:column;gap:16px;margin-top:28px}
  .button{width:100%;gap:12px}
  .text-link{align-self:flex-start}
  .hero-visual{min-height:350px}
  .arch-one{right:-18%;height:350px}
  .arch-two{right:-3%;height:290px}
  .value-card{right:0;top:16%;width:min(205px,68vw);padding:24px}
  .intro h2,.method h2,.why h2,.contact h2{font-size:clamp(2.25rem,12vw,2.8rem);overflow-wrap:anywhere}
  .why-points{grid-template-columns:1fr}
  .why-points div:nth-child(odd){border-right:0}
  .contact{padding:76px 5vw}
  .brand strong{font-size:1rem}
  .brand small{font-size:.48rem}
}

@media(max-width:350px){
  .brand-mark{display:none}
  .hero-visual{min-height:325px}
}