/* Hero. Variants set by data-hero on .hero: gradient | skin | water | water-toned */
.hero{position:relative;min-height:calc(100svh - 7.4rem);display:flex;align-items:center;overflow:hidden;
  padding:6rem 0 5rem;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 15%,rgba(201,162,75,.16),transparent 55%),
    radial-gradient(90% 80% at 15% 90%,rgba(27,49,87,.7),transparent 60%),
    linear-gradient(160deg,var(--navy-700),var(--navy-900))}
[data-theme="light"] .hero{background:
    radial-gradient(120% 90% at 78% 15%,rgba(185,143,56,.16),transparent 55%),
    radial-gradient(90% 80% at 12% 92%,rgba(158,182,210,.4),transparent 60%),
    linear-gradient(160deg,#faf4ea,#ece0cb)}
.hero-media,.hero-scrim{position:absolute;inset:0;z-index:-1}
.hero-media{background-repeat:no-repeat;background-size:cover}
.hero-scrim{z-index:-1}
.hero-content{position:relative;max-width:730px}
.hero h1{font-weight:400;font-size:clamp(3rem,7.4vw,5.9rem);line-height:1.03;margin:1.6rem 0 1.4rem;color:var(--cream)}
.hero h1 em{font-style:italic;color:var(--gold-display)}
.hero .lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.75;color:var(--muted);max-width:560px}
[data-theme="light"] .hero .lead{color:var(--cream-dim)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:3rem}
.hero-note{margin-top:2.2rem;font-size:.8125rem;letter-spacing:.1em;color:var(--cream-dim);display:flex;align-items:center;gap:.6rem}

/* ---------- A: studio skin shot, face left, copy right ---------- */
.hero[data-hero="skin"] .hero-media{background-image:url("/assets/img/hero-skin-1400.jpg");background-position:left 38%}
@media(min-width:1400px){.hero[data-hero="skin"] .hero-media{background-image:url("/assets/img/hero-skin-2400.jpg")}}
.hero[data-hero="skin"] .wrap{display:flex;justify-content:flex-end}
.hero[data-hero="skin"] .hero-content{max-width:640px}
.hero[data-hero="skin"] h1{font-size:clamp(3rem,6vw,5rem)}
/* dark: settle the cool grey into navy from the right, keep the face natural */
.hero[data-hero="skin"] .hero-media{filter:brightness(.92) saturate(.96)}
.hero[data-hero="skin"] .hero-scrim{background:
    linear-gradient(90deg,rgba(var(--hero-tint),0) 18%,rgba(var(--hero-tint),.35) 24%,rgba(var(--hero-tint),.75) 30%,rgba(var(--hero-tint),.94) 37%,rgba(var(--hero-tint),.98) 48%),
    linear-gradient(0deg,rgba(var(--hero-tint),.4),rgba(var(--hero-tint),0) 35%)}
[data-theme="light"] .hero[data-hero="skin"] .hero-media{filter:sepia(var(--img-warm)) saturate(.95) brightness(1.04)}
[data-theme="light"] .hero[data-hero="skin"] .hero-scrim{background:
    linear-gradient(90deg,rgba(var(--hero-tint),0) 26%,rgba(var(--hero-tint),.55) 42%,rgba(var(--hero-tint),.9) 56%,rgba(var(--hero-tint),.96) 100%)}

/* ---------- B: pool shot, anchored right, copy left ---------- */
.hero[data-hero^="water"] .hero-media{left:auto;width:64%;background-image:url("/assets/img/hero-water-1800.jpg");
  background-position:30% center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero[data-hero^="water"] .hero-content{max-width:640px}
.hero[data-hero^="water"] h1{font-size:clamp(3rem,6vw,5rem)}
.hero[data-hero^="water"] .hero-scrim{background:linear-gradient(90deg,rgba(var(--hero-tint),.9) 30%,rgba(var(--hero-tint),.2) 60%,rgba(var(--hero-tint),0) 80%)}
/* toned: navy duotone in dark, warm stone in light, to sit inside the palette */
.hero[data-hero="water-toned"] .hero-media{filter:grayscale(1) contrast(1.05) brightness(1.12)}
.hero[data-hero="water-toned"] .hero-media::after{content:"";position:absolute;inset:0;background:#1b3157;mix-blend-mode:multiply;opacity:.6}
.hero[data-hero="water-toned"] .hero-media::before{content:"";position:absolute;inset:0;background:#c9a24b;mix-blend-mode:soft-light;opacity:.35}
[data-theme="light"] .hero[data-hero="water-toned"] .hero-media{filter:grayscale(1) contrast(.95) brightness(1.08)}
[data-theme="light"] .hero[data-hero="water-toned"] .hero-media::after{background:#d9c9a6;opacity:.75}

/* ---------- Tablet and mobile (BRIEF 960px breakpoint): image becomes a top band, copy sits below ---------- */
@media(max-width:960px){
  .hero[data-hero]:not([data-hero="gradient"]){display:block;min-height:0;padding:0 0 3.5rem}
  .hero[data-hero]:not([data-hero="gradient"]) .hero-media{position:relative;inset:auto;left:0;width:100%;height:min(62svh,520px);z-index:0;
    -webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.8) 65%,rgba(0,0,0,.35) 85%,transparent);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.8) 65%,rgba(0,0,0,.35) 85%,transparent)}
  .hero[data-hero]:not([data-hero="gradient"]) .hero-scrim{display:none}
  .hero[data-hero]:not([data-hero="gradient"]) .wrap{display:block;margin-top:-5.5rem;position:relative;z-index:1}
  .hero[data-hero="skin"] .hero-media{background-image:url("/assets/img/hero-skin-mobile.jpg");background-position:left top}
  .hero[data-hero^="water"] .hero-media{background-image:url("/assets/img/hero-water-mobile.jpg");background-position:center}
  .hero h1{font-size:clamp(2.7rem,8vw,4rem)!important;margin:1.1rem 0 1rem}
  .hero-actions{margin-top:2rem}
}
@media(max-width:640px){ .hero-actions .btn{flex:1 1 100%;justify-content:center} }

/* ---------- Studio skin: layout options (data-layout on .hero) ---------- */
@media(min-width:961px){
  /* aligned: copy starts in line with the nav links, closing the gap to the face */
  .hero[data-hero="skin"][data-layout="aligned"] .wrap{justify-content:flex-start}
  /* copy always starts at 38% of the screen, just past the face, whatever the width */
  .hero[data-hero="skin"][data-layout="aligned"] .hero-content{margin-left:calc(38vw - (100vw - min(1180px,92vw)) / 2);max-width:min(680px,56vw)}
  .hero[data-hero="skin"][data-layout="aligned"] h1{font-size:clamp(3rem,5.6vw,5.8rem)}

  /* split: tighter portrait panel on the left half, copy centred in the right half */
  .hero[data-hero="skin"][data-layout="split"] .hero-media{right:auto;width:46%;
    background-image:url("/assets/img/hero-skin-portrait-1600.jpg");background-position:left 30%;
    -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
  .hero[data-hero="skin"][data-layout="split"] .hero-scrim{display:none}
  .hero[data-hero="skin"][data-layout="split"] .wrap{width:100%;display:flex;justify-content:flex-start;padding-left:calc(46% + 2vw);padding-right:5vw}
  .hero[data-hero="skin"][data-layout="split"] .hero-content{max-width:600px;margin-inline:auto}
  .hero[data-hero="skin"][data-layout="split"] h1{font-size:clamp(3rem,5.2vw,4.8rem)}
}

/* tablet: taller band and a sharper crop than phones need */
@media(min-width:641px) and (max-width:960px){
  .hero[data-hero]:not([data-hero="gradient"]) .hero-media{height:min(58svh,620px)}
  .hero[data-hero="skin"] .hero-media{background-image:url("/assets/img/hero-skin-portrait-1600.jpg");background-position:left 28%}
}

/* Phones held sideways (short landscape): use the side-by-side layout, face left and copy right, sized to fit the screen */
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
  .hero[data-hero]:not([data-hero="gradient"]){display:flex;align-items:center;min-height:calc(100svh - 4rem);padding:1.6rem 0}
  .hero[data-hero]:not([data-hero="gradient"]) .hero-media{position:absolute;inset:0;height:auto;z-index:-1;-webkit-mask-image:none;mask-image:none}
  .hero[data-hero="skin"] .hero-media{background-image:url("/assets/img/hero-skin-1400.jpg");background-position:left 38%}
  .hero[data-hero]:not([data-hero="gradient"]) .hero-scrim{display:block}
  .hero[data-hero]:not([data-hero="gradient"]) .wrap{display:flex;justify-content:flex-end;margin-top:0}
  .hero[data-hero] .hero-content{max-width:58%}
  .hero h1{font-size:clamp(2rem,5vw,2.7rem)!important;margin:.7rem 0 .6rem}
  .hero .lead{font-size:.9375rem;line-height:1.6}
  .hero-actions{margin-top:1.1rem;gap:.8rem}
  .hero-actions .btn{flex:0 0 auto}
  .hero-note{display:none}
}