.hero-banner{position:relative;height:calc(100svh - var(--headerH));min-height:560px;background:#f0e9df;overflow:hidden;margin-top:var(--headerH);touch-action:pan-y}.hero-track{display:flex;width:100%;height:100%;transition:transform .85s cubic-bezier(.22,.61,.36,1)}.hero-slide{position:relative;flex:0 0 100%;height:100%;display:grid;place-items:center;overflow:hidden;background:var(--cream)}.hero-slide>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:var(--cream)}.hero-slide.active>img{animation:heroDrift 9s ease-out forwards}@keyframes heroDrift{from{transform:scale(1.012)}to{transform:scale(1)}}.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.22));pointer-events:none}.hero-content{position:absolute;z-index:2;left:7vw;bottom:7vh;max-width:720px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.3)}.hero-content small{color:rgba(255,255,255,.75)}.hero-content h1{margin:8px 0 20px;font:clamp(44px,6vw,86px)/.96 var(--serif);font-weight:400}.hero-content p{margin:0 0 20px;font-size:var(--fs-lead);max-width:480px}.hero-text-link{display:inline-block;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.7);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}.hero-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.12);color:#fff;backdrop-filter:blur(10px);font-size:20px}.hero-prev{left:3vw}.hero-next{right:3vw}.hero-dots{position:absolute;z-index:4;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:7px}.hero-dot{width:6px;height:6px;padding:0;border-radius:50%;background:rgba(255,255,255,.45)}.hero-dot.active{background:#fff;transform:scale(1.35)}@media(max-width:600px){.hero-content{left:6vw;right:6vw;bottom:8vh}.hero-content h1{font-size:clamp(36px,10vw,54px)}.hero-arrow{width:38px;height:38px}}
/* Responsive hero: the photo covers the section (object-fit:cover) at EVERY viewport, so the
   frame can never letterbox or show a blank band. The section always takes the full viewport
   height available below the fixed header; the 16:9 sources are cropped to the centre band on
   narrow/portrait screens rather than being letterboxed. */
@media(max-width:1100px){.hero-banner{height:calc(100svh - var(--headerH));min-height:400px}}

/* ===== FINAL VISUAL-POLISH PASS =====
   Cinematic hero entrance: the image settles from 1.02 down to the approved heroDrift start
   while the headline and support lines rise with a restrained 140ms stagger. Retriggered by
   the hero-enter class each time a slide becomes active, so every transition has the bump. */
.hero-slide.active.hero-enter>img{animation:heroReveal 1150ms cubic-bezier(.22,.61,.36,1) both,heroDrift 9s ease-out 1350ms forwards}
@keyframes heroReveal{from{transform:scale(1.02)}to{transform:scale(1.012)}}
.hero-slide.active.hero-enter .hero-content>*{animation:heroTextIn 600ms cubic-bezier(.22,.61,.36,1) both}
.hero-slide.active.hero-enter .hero-content>*:nth-child(2){animation-delay:140ms}
.hero-slide.active.hero-enter .hero-content>*:nth-child(3){animation-delay:280ms}
@keyframes heroTextIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Minimal white chevron arrows replace the frosted circles; positioning is unchanged. */
.hero-arrow{width:48px;height:48px;border:0;border-radius:0;background:transparent;backdrop-filter:none;font-size:0;color:#fff;transition:opacity .2s ease,transform .2s ease}
.hero-arrow svg{width:26px;height:26px;display:block;pointer-events:none}
.hero-arrow path{stroke-width:1.5}
.hero-arrow:hover{opacity:.55}
.hero-prev:hover{transform:translateY(-50%) translateX(-5px)}
.hero-next:hover{transform:translateY(-50%) translateX(5px)}
.hero-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hero-slide.active.hero-enter>img,.hero-slide.active.hero-enter .hero-content>*{animation:none!important}.hero-arrow{transition:none!important}}

/* ===== HOMEPAGE MOBILE REFINEMENT (phones only) =====
   Measured white-text contrast against the composited backdrop was
   2.04:1-3.04:1 across the four slides (WCAG fail), because the scrim only
   reached 22% black while the lower third of these photographs runs very
   bright (mean luminance 78/255 on hero1, 90/255 on hero4). The scrim is
   deepened on the lower band only, so the top of the photograph stays clean.

   The headline's focal point is left at 50% 50% on purpose: a detail-energy
   analysis of all four sources puts the subject centroid at x 47-55%, y 51-59%,
   i.e. already dead centre. Only the crop is tight (a 16:9 source in a ~0.45
   portrait frame keeps roughly the central quarter), which the scrim now makes
   read as an intentional cinematic crop rather than a cut-off subject.

   The CTA keeps its visual size and gains a 47px target through a
   pseudo-element; the slide dots become real 44px buttons that draw their
   8px dot with ::before. Neither the type nor the layout moves. */
@media(max-width:600px){
  .hero-slide:after{background:linear-gradient(180deg,rgba(18,10,9,.04) 0%,rgba(18,10,9,.1) 36%,rgba(18,10,9,.5) 72%,rgba(18,10,9,.66) 100%)}
  .hero-content{text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 22px rgba(0,0,0,.45)}
  /* 29px visual -> 47px target, zero reflow */
  .hero-text-link{position:relative}
  .hero-text-link::after{content:"";position:absolute;left:-12px;right:-12px;top:-9px;bottom:-9px}
  /* The 8px dot moves to ::before so the button itself can BE the 44px target.
     A per-dot ::after cannot work here: at a 22px dot pitch four 44px areas
     overlap, each shadowing its neighbour, so a tap on one dot's edge fired the
     dot next to it. A 44px button per dot gives non-overlapping cells.
     .hero-dot.active{transform:scale(1.35)} above is 0,2,0 specificity, so the
     button transform must be cancelled explicitly here (0,2,0, later in file)
     and the visible scale moved onto ::before. */
  .hero-dots{gap:0;bottom:8px}
  .hero-dot{position:relative;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;transform:none}
  .hero-dot.active{transform:none;background:none}
  .hero-dot::before{content:"";display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
  .hero-dot.active::before{background:#fff;transform:scale(1.35)}
}

/* V4 — hero controls are removed visually only. Auto-advance, swipe, keyboard
   navigation and the active-slide tracking in app.js all stay intact; the
   arrow buttons and the pagination dot strip are simply no longer rendered. */
.hero-arrow{display:none}
.hero-dots{display:none}