/* The opening is one screen, including the navigation. The image is allowed to
   crop with the screen; the text and actions stay in normal, accessible flow. */
:root{--header:96px}
.cinematic-home .site-header{background:transparent;color:var(--paper);border-bottom:0;transition:background .25s}
.cinematic-home .site-header.scrolled,.cinematic-home.menu-open .site-header{background:var(--brand)}
.cinematic-home .header-inner{border-bottom:1px solid #F7F9FA30}
.cinematic-home .brand-link{width:264px}
.cinematic-home .brand-link{position:relative}
.cinematic-home .brand-link img{opacity:1}

.cinematic-home .main-nav>a:not(.button){color:var(--paper)}
.cinematic-home .site-header .button{background:#F7F9FA08;border-color:#F7F9FA70;color:var(--paper)}
.cinematic-home .site-header .button:hover{background:var(--paper);border-color:var(--paper);color:var(--brand)}
.cinematic-home .menu-toggle{color:var(--paper)}
.hero-cinematic.hero{position:relative;isolation:isolate;margin-top:calc(-1 * var(--header));padding:0;background:var(--brand);color:var(--paper);min-height:100vh;min-height:100svh}
.hero-cinematic .hero-scene{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero-cinematic .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 55%;border-radius:0;transform-origin:70% 50%;animation:hero-settle 1.8s cubic-bezier(.16,1,.3,1) both}
.hero-cinematic .hero-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,37,55,.88) 0%,rgba(13,41,59,.77) 28%,rgba(17,48,67,.42) 53%,rgba(17,48,67,.06) 82%),linear-gradient(180deg,rgba(12,36,52,.84) 0%,rgba(12,36,52,.64) 12%,rgba(12,36,52,.08) 30%,rgba(12,36,52,.06) 60%,rgba(12,36,52,.83) 100%)}
.hero-cinematic .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto;gap:28px;min-height:100vh;min-height:100svh;padding-top:calc(var(--header) + clamp(20px,4svh,52px));padding-bottom:clamp(22px,3.5svh,42px)}
.hero-cinematic .hero-copy{align-self:center;padding:0;max-width:860px;animation:hero-arrive .9s .12s ease-out both}
.hero-cinematic .location-label{font-size:12px;line-height:1.5;color:#F7F9FA;gap:10px;margin:0 0 clamp(18px,2.7svh,28px)}
.hero-cinematic .location-label>span{background:#FFF9E6;box-shadow:0 0 0 4px #FFF9E614;width:5px;height:5px}
.hero-cinematic h1{font-size:clamp(56px,min(8.15vw,13.1svh),138px);line-height:.98;letter-spacing:-.04em;color:var(--paper);text-wrap:initial;text-shadow:0 2px 24px #0C243418}
.hero-cinematic h1>span{display:block}
.hero-cinematic .hero-intro{max-width:385px;margin-top:clamp(20px,2.9svh,32px);font-size:15px;line-height:1.8;color:#F7F9FA}
.hero-cinematic .hero-actions{margin-top:clamp(22px,3.4svh,36px);gap:30px;flex-wrap:wrap}
.hero-cinematic .hero-actions .button{background:var(--paper);border-color:var(--paper);color:var(--brand);min-height:56px;padding:16px 25px;font-size:13px;gap:28px;border-radius:2px}
.hero-cinematic .hero-actions .button:hover{background:#FFF9E6;border-color:#FFF9E6}
.hero-cinematic .hero-actions .text-link{color:var(--paper);text-decoration-color:#B3CFDF;font-size:13px;min-height:44px}
.hero-cinematic .hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-top:23px;border-top:1px solid #F7F9FA45}
.hero-cinematic .hero-signoff{margin:0;gap:14px;color:#F7F9FA;font-size:11px;line-height:1.7}
.hero-cinematic .hero-signoff .icon{color:#D9E9F3;width:22px;height:22px}
.hero-cinematic .hero-signoff strong{color:var(--paper);font-weight:400}
.hero-cinematic .hero-whisper{font-size:25px;line-height:1.2;color:#FFF9E6}
.hero-cinematic .hero-scroll{display:flex;gap:18px;align-items:center;color:var(--paper);font-size:11px;min-height:44px}
.hero-cinematic .hero-scroll>.icon{width:40px;height:40px;padding:10px;border:1px solid #FFF9E680;border-radius:50%;transform:rotate(90deg);transition:background .2s}
.hero-cinematic .hero-scroll:hover>.icon{background:#F7F9FA20}
@keyframes hero-settle{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1199px){
  :root{--header:84px}
  .cinematic-home .brand-link{width:238px}
  .hero-cinematic .hero-whisper{font-size:23px}
  .hero-cinematic .hero-scroll{gap:12px}
}
@media(max-width:1023px){
  .cinematic-home .main-nav{background:var(--brand)}
  .cinematic-home .main-nav>a:not(.button){border-color:#F7F9FA35}
  .cinematic-home .hero-whisper{display:none}
}
/* A tall screen keeps the daylight above the lower, readable blue text area. */
@media(max-width:1023px) and (orientation:portrait){
  .hero-cinematic .hero-photo{height:78%;object-position:72% 40%;transform-origin:72% 30%}
  .hero-cinematic .hero-scene:after{background:linear-gradient(180deg,rgba(11,37,55,.84) 0%,rgba(13,41,59,.64) 10%,rgba(13,41,59,.08) 25%,rgba(17,48,67,.06) 30%,rgba(18,54,77,.80) 56%,#12364D 77%)}
  .hero-cinematic .hero-copy{align-self:end;max-width:100%}
  .hero-cinematic h1{font-size:clamp(52px,min(11.5vw,10svh),100px)}
  .hero-cinematic .hero-intro{max-width:430px}
}
@media(max-width:767px){
  :root{--header:76px}
  .cinematic-home .brand-link{width:216px}
  .hero-cinematic .hero-grid{padding-top:calc(var(--header) + 20px);padding-bottom:max(22px,env(safe-area-inset-bottom));gap:24px}
  .hero-cinematic .location-label{font-size:10px;margin-bottom:17px}
  .hero-cinematic h1{font-size:clamp(44px,min(14.5vw,9.3svh),74px);line-height:1.02;letter-spacing:-.04em}
  .hero-cinematic .hero-intro{font-size:14px;line-height:1.75;max-width:360px;margin-top:19px}
  .hero-cinematic .hero-actions{gap:20px;margin-top:23px;flex-wrap:wrap}
  .hero-cinematic .hero-actions .button{font-size:12px;min-height:52px;padding:14px 18px;gap:17px;white-space:nowrap}
  .hero-cinematic .hero-actions .text-link{font-size:11px;white-space:nowrap}
  .hero-cinematic .hero-bottom{padding-top:17px;gap:18px}
  .hero-cinematic .hero-signoff{font-size:10px;gap:10px;line-height:1.6}
  .hero-cinematic .hero-signoff br{display:block}
  .hero-cinematic .hero-signoff strong{display:inline}
  .hero-cinematic .hero-signoff .icon{width:20px;height:20px}
  .hero-cinematic .hero-scroll>span{display:none}
  .hero-cinematic .hero-scroll>.icon{width:36px;height:36px;padding:9px}
}
@media(max-width:374px){
  :root{--header:66px}
  .cinematic-home .brand-link{width:194px}
  .hero-cinematic .hero-grid{gap:18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .hero-cinematic .hero-actions{gap:17px}
  .hero-cinematic .hero-actions .button{font-size:11px;padding-inline:14px;gap:12px;min-height:48px}
  .hero-cinematic .hero-actions .text-link{font-size:10px}
  .hero-cinematic .hero-intro{font-size:13px}
  .hero-cinematic .hero-signoff{font-size:9px}
}
/* Height matters as much as width: compact laptop and short portrait windows. */
@media(max-height:740px) and (min-width:768px){
  :root{--header:76px}
  .cinematic-home .brand-link{width:226px}
  .hero-cinematic .hero-grid{padding-top:calc(var(--header) + 22px);padding-bottom:22px;gap:20px}
  .hero-cinematic .location-label{margin-bottom:16px;font-size:11px}
  .hero-cinematic h1{font-size:clamp(50px,min(7.8vw,12.5svh),96px)}
  .hero-cinematic .hero-intro{margin-top:19px;font-size:14px;max-width:395px;line-height:1.7}
  .hero-cinematic .hero-actions{margin-top:21px}
  .hero-cinematic .hero-actions .button{min-height:48px;padding:12px 22px}
  .hero-cinematic .hero-bottom{padding-top:17px}
}
@media(max-height:650px) and (max-width:767px) and (orientation:portrait){
  .hero-cinematic .hero-grid{padding-top:calc(var(--header) + 16px);padding-bottom:17px;gap:17px}
  .hero-cinematic .location-label{margin-bottom:12px}
  .hero-cinematic h1{font-size:clamp(40px,13vw,55px)}
  .hero-cinematic .hero-intro{margin-top:14px;font-size:13px;line-height:1.6}
  .hero-cinematic .hero-actions{margin-top:17px}
  .hero-cinematic .hero-actions .button{min-height:46px;padding-block:12px}
  .hero-cinematic .hero-bottom{padding-top:13px}
}
/* Landscape phones get a two-column composition, with every action in view. */
@media(max-height:500px) and (min-aspect-ratio:4/3){
  .hero-cinematic .hero-scene:after{background:linear-gradient(90deg,rgba(11,37,55,.88),rgba(13,41,59,.73) 57%,rgba(17,48,67,.69)),linear-gradient(180deg,rgba(12,36,52,.40),transparent 45%,rgba(12,36,52,.38))}
  :root{--header:58px}
  .cinematic-home .brand-link{width:194px}
  .hero-cinematic .hero-grid{padding-top:calc(var(--header) + 17px);padding-bottom:14px;gap:16px}
  .hero-cinematic .hero-copy{align-self:center;display:grid;grid-template-columns:1.05fr 1fr;column-gap:32px;align-items:center;max-width:none;width:100%}
  .hero-cinematic .location-label{grid-column:1;grid-row:1;font-size:9px;margin:0 0 10px}
  .hero-cinematic h1{grid-column:1;grid-row:2/4;font-size:clamp(33px,min(6.8vw,14svh),66px);line-height:1}
  .hero-cinematic .hero-intro{grid-column:2;grid-row:1/3;margin:0;font-size:12px;line-height:1.6;max-width:360px}
  .hero-cinematic .hero-actions{grid-column:2;grid-row:3;margin-top:14px;gap:17px;flex-wrap:wrap}
  .hero-cinematic .hero-actions .button{font-size:11px;min-height:42px;padding:10px 14px;gap:12px;white-space:nowrap}
  .hero-cinematic .hero-actions .button .icon{width:17px;height:17px}
  .hero-cinematic .hero-actions .text-link{font-size:10px;white-space:nowrap}
  .hero-cinematic .hero-bottom{padding-top:10px}
  .hero-cinematic .hero-signoff{font-size:9px;line-height:1.4}
  .hero-cinematic .hero-whisper{display:none}
  .hero-cinematic .hero-scroll{font-size:10px;min-height:36px}
  .hero-cinematic .hero-scroll>.icon{width:32px;height:32px;padding:8px}
}
@media(max-height:380px) and (min-aspect-ratio:4/3){
  :root{--header:52px}
  .hero-cinematic .hero-copy{column-gap:24px}
  .hero-cinematic .location-label{display:none}
  .hero-cinematic h1{grid-row:1/3;font-size:clamp(32px,6.3vw,47px)}
  .hero-cinematic .hero-intro{grid-row:1;font-size:11px;line-height:1.6}
  .hero-cinematic .hero-actions{grid-row:2;margin-top:10px;gap:12px}
  .hero-cinematic .hero-actions .button{font-size:10px;padding-inline:11px;gap:8px;min-height:40px}
  .hero-cinematic .hero-actions .text-link{font-size:9px}
  .hero-cinematic .hero-grid{padding-top:calc(var(--header) + 12px);gap:10px;padding-bottom:12px}
  .hero-cinematic .hero-bottom{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .hero-cinematic .hero-photo,.hero-cinematic .hero-copy{animation:none;transform:none}
  .cinematic-home .site-header{transition:none}
}
/* Short portrait screens bring the text forward, so the blue fade follows it. */
@media(max-height:740px) and (max-width:767px) and (orientation:portrait){
  .hero-cinematic .hero-scene:after{background:linear-gradient(180deg,rgba(11,37,55,.84) 0%,rgba(13,41,59,.40) 16%,rgba(18,54,77,.80) 30%,rgba(18,54,77,.94) 48%,#12364D 70%)}
}