.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.js .reveal.visible{opacity:1;transform:none}

:focus-visible{outline:3px solid #a3c73f;outline-offset:4px}
.menu-toggle,.portfolio-image,.gallery-card{border-radius:0}
.button:focus-visible,.nav-cta:focus-visible{outline-color:#154f3b}

@media(max-width:600px){
  .site-header{padding-left:20px;padding-right:20px}
  .brand strong{font-size:13px}
  .brand-mark{width:38px;height:38px}
  .hero{min-height:680px}
  .hero-content{top:112px}
  h1{font-size:clamp(39px,11.5vw,47px)}
  .section-heading{margin-bottom:38px}
}

/* Keep the hero copy clear of the bottom metadata at every viewport height. */
.hero-content{top:clamp(125px,16vh,175px);transform:none}
.hero-content.reveal{transform:translateY(22px)}
.hero-content.reveal.visible{transform:none}

@media(max-width:600px){.hero-content{top:112px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}

@media print{
  .site-header,.hero-actions,.menu-toggle,.lightbox{display:none!important}
  .hero{height:auto;min-height:0;padding:50px;background:#07100d}
  .hero>img,.hero-shade{display:none}
  .hero-content,.hero-content.reveal,.hero-content.reveal.visible{position:static;transform:none}
  .section-pad{padding:45px 30px}
  .reveal,.js .reveal{opacity:1;transform:none}
}