/* Valley Atlas — service pages: photo hero, then the doc's first section beside the quote form. */

.phero{padding:clamp(36px,5vw,72px) 0 clamp(60px,7vw,100px);border-bottom:1px solid var(--line)}
.phero__in{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"copy fig";gap:clamp(36px,5vw,72px);align-items:center}
.phero__copy{grid-area:copy;min-width:0}
.phero__fig{grid-area:fig;position:relative;min-width:0}
.js .phero__fig{opacity:0;transform:translateY(26px);animation:rise 1.1s var(--ease) .15s forwards}
.phero .hl{animation:hl 1s var(--ease) .6s forwards}
.js .phero .lede,.js .phero .checks,.js .phero .acts{opacity:0;transform:translateY(22px);animation:rise .9s var(--ease) forwards}
.js .phero .lede{animation-delay:.25s}.js .phero .checks{animation-delay:.35s}.js .phero .acts{animation-delay:.45s}

.trip__in--top{align-items:start}
.trip__p{margin-top:22px}
.trip__p p:first-child{font:400 clamp(20px,1.8vw,23px)/1.5 var(--f-d);color:var(--ink)}

@media (max-width:1080px){
  .phero__in{grid-template-columns:1fr;grid-template-areas:"fig" "copy"}
  .phero__fig{max-width:620px;width:100%;margin-inline:auto}
  .phero__fig .inset img{aspect-ratio:4/3}
}
@media (max-width:700px){
  .phero__fig{margin-right:10px}
  .phero .acts .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .phero__fig,.js .phero .lede,.js .phero .checks,.js .phero .acts{opacity:1!important;transform:none!important}
}