/* V4 — edge-to-edge photography with a legible, quiet overlay. */
html{scroll-padding-top:104px}
section[id]{scroll-margin-top:0}
.site-header{position:fixed;left:0;right:0;top:0;transition:background-color .2s,color .2s,border-color .2s}
.site-header.is-over-hero:not(.is-menu-open){background:transparent;color:#FFF;border-bottom-color:#FFFFFF30}
.site-header.is-over-hero:not(.is-menu-open) .brand img{filter:brightness(0) invert(1);opacity:1}
.site-header.is-over-hero:not(.is-menu-open) .desktop-nav a{color:#FFF}
.site-header.is-over-hero:not(.is-menu-open) .desktop-nav a:after{background:#FFF}
.site-header.is-over-hero:not(.is-menu-open) .nav-contact{color:#FFF;border-bottom-color:#FFFFFF99}
.site-header.is-over-hero:not(.is-menu-open) .nav-contact:hover{border-bottom-color:#FFF}
.site-header.is-over-hero:not(.is-menu-open) .menu-toggle span{background:#FFF}
.hero{display:block;position:relative;isolation:isolate;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#40513B}
.hero .hero-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:0;overflow:hidden}
.hero-picture,.hero-picture img{display:block;width:100%;height:100%}
.hero .hero-picture img{object-fit:cover;object-position:56% center}
.hero .hero-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0B1A114F 0%,#0B1A111F 46%,transparent 78%),linear-gradient(180deg,#0B1A11AD 0%,#0B1A1170 14%,transparent 34%,transparent 65%,#0B1A1166 100%);pointer-events:none}
.hero .hero-copy{position:relative;z-index:2;width:100%;max-width:none;height:100%;padding:132px var(--gutter) 156px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#FFF}
.hero .eyebrow{color:#FFFFFFE8;font-size:12px;letter-spacing:3px;line-height:1.8}
.hero .hero-pretitle{color:#FFF;font-size:17px;letter-spacing:3px;margin-top:26px;line-height:1.8}
.hero h1{color:#FFF;font-size:clamp(58px,5.1vw,84px);line-height:1.28;font-weight:600;letter-spacing:2px;margin-top:18px}
.hero .green-word{color:#FFF}
.hero .hero-description{color:#FFFFFFF2;font-size:18px;line-height:1.9;max-width:34em;margin-top:26px}
.hero .hero-actions{margin-top:32px;gap:30px;flex-wrap:wrap}
.hero .button-dark{background:transparent;border:1px solid #FFFFFFC4;color:#FFF;font-size:16px;min-height:54px;padding:14px 23px}
.hero .button-dark:hover{background:#FFF;color:var(--ink)}
.hero .text-button{color:#FFF;font-size:16px;min-height:48px}
.hero a:focus-visible,.hero button:focus-visible,.site-header.is-over-hero:not(.is-menu-open) a:focus-visible,.site-header.is-over-hero:not(.is-menu-open) button:focus-visible{outline-color:#FFF}
.hero-bottom{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:30px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;color:#FFF;font-size:13px;line-height:1.8;letter-spacing:1px}
.hero-scroll{display:inline-flex;align-items:center;gap:14px;min-height:44px;justify-self:center;font-size:13px;letter-spacing:2px}
.hero-scroll span{font-size:22px;line-height:1}
.hero-scene-note{justify-self:end;color:#FFFFFFDE;font-size:12px;letter-spacing:.6px}
.is-at-hero .mobile-bottom{visibility:hidden;transform:translateY(110%);pointer-events:none}
.mobile-bottom{transition:transform .2s}
.mobile-menu{max-height:calc(100svh - 82px);overflow-y:auto}
@media(max-width:1100px){.hero .hero-copy{padding-left:5vw;padding-right:5vw}.hero h1{font-size:60px}.hero .hero-description{font-size:17px}}
@media(min-width:761px) and (max-width:980px){html{scroll-padding-top:94px}}
@media(max-height:740px) and (min-width:761px){
  .hero{min-height:600px}
  .hero .hero-copy{padding-top:112px;padding-bottom:106px}
  .hero h1{font-size:56px}
  .hero .hero-pretitle{margin-top:14px}
  .hero .hero-description{margin-top:20px}
  .hero .hero-actions{margin-top:24px}
  .hero-bottom{bottom:20px}
}
@media(max-width:760px){
  html{scroll-padding-top:82px}
  .hero{height:100vh;height:100svh;min-height:620px}
  .hero .hero-picture img{object-position:52% center}
  .hero .hero-image:after{background:linear-gradient(90deg,#0B1A1161 0%,#0B1A1129 65%,#0B1A110A 100%),linear-gradient(180deg,#0B1A11AD 0%,#0B1A1170 14%,transparent 34%,transparent 65%,#0B1A1161 100%)}
  .hero .hero-copy{padding:132px 22px 160px;justify-content:center}
  .hero .eyebrow{font-size:11px;letter-spacing:2px;line-height:1.8}
  .hero .hero-pretitle{font-size:16px;letter-spacing:2px;margin-top:22px}
  .hero h1{font-size:48px;line-height:1.32;letter-spacing:1px;margin-top:16px}
  .hero .hero-description{font-size:16px;line-height:1.95;margin-top:22px}
  .hero .hero-actions{gap:22px;margin-top:26px}
  .hero .button-dark{font-size:15px;min-height:52px;padding:13px 18px;gap:22px}
  .hero .text-button{font-size:15px;min-height:48px}
  .hero-bottom{left:22px;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));grid-template-columns:1fr auto;gap:12px;align-items:end}
  .hero-motto{font-size:12px;letter-spacing:1px}
  .hero-scene-note{font-size:11px;letter-spacing:0}
  .hero-scroll{grid-column:1/-1;grid-row:2;min-height:42px;margin-top:5px;font-size:12px;gap:12px;letter-spacing:1.5px}
}
@media(max-width:760px) and (max-height:720px){
  .hero{min-height:580px}
  .hero .hero-copy{padding-top:108px;padding-bottom:125px}
  .hero h1{font-size:43px}
  .hero .hero-pretitle{margin-top:14px;font-size:15px}
  .hero .hero-description{margin-top:18px;font-size:15px}
  .hero .hero-actions{margin-top:22px}
  .hero .button-dark{min-height:48px}
  .hero-bottom{bottom:14px}
}