/* Opening (adapted from 21st "Minimalist Hero"): giant type on the right whose second line
   slips just behind a cut-out portrait standing on a flat sand circle.
   Every svh value has a vh line before it for older iPhones/Android browsers.
   Desktop = two-column stage, mobile = simple column with text first. */
.hero{position:relative;overflow:hidden;background:var(--bg);padding:0}
.hero-stage{position:relative;min-height:max(660px,100vh);min-height:max(660px,100svh);padding-top:var(--nav-h);display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr auto auto auto 1fr;column-gap:0}

.hero-eyebrow{grid-column:1;grid-row:2;position:relative;z-index:3;align-self:end}
.hero-title{grid-column:1;grid-row:3;position:relative;z-index:1;margin-inline-end:-5vw;font-size:clamp(3.2rem,1rem + 5.6vw,7.6rem);line-height:.98;font-weight:200;letter-spacing:-.03em;color:var(--ink);margin-bottom:clamp(24px,3vw,40px)}
.hero-line{display:block}
.hero-line.l2{font-weight:500;color:var(--clay-deep);padding-inline-start:.5em;margin-top:.06em}

.hero-copy{grid-column:1;grid-row:4;padding-bottom:clamp(24px,4vh,48px);position:relative;z-index:3;max-width:470px;align-self:start}
.hero-lead{font-size:var(--fs-lg)!important;line-height:1.5;font-weight:500;margin-bottom:10px}
.hero-text{color:var(--ink-soft);margin-bottom:16px}
.hero-place{display:flex;align-items:center;gap:8px;font-weight:500;margin-bottom:26px}
.hero-place svg{width:18px;height:18px;fill:var(--clay-deep)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

.hero-figure{grid-column:2;grid-row:1 / -1;position:relative;z-index:2;align-self:end;justify-self:center;height:calc(min(100vh,980px) - var(--nav-h) - 16px);height:calc(min(100svh,980px) - var(--nav-h) - 16px);display:flex;align-items:flex-end;justify-content:center}
.hero-circle{position:absolute;left:50%;top:18%;width:min(34vw,520px);aspect-ratio:1;border-radius:50%;background:var(--sand);transform:translateX(-50%)}
.hero-cutout{position:relative;height:100%;width:auto;max-width:none}

/* Mobile: title, text and button first; the portrait follows, shorter */
@media (max-width:860px){
  .hero-stage{min-height:0;display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 20px)}
  .hero-eyebrow{order:1;margin-bottom:12px}
  .hero-title{order:2;margin-inline-end:0;font-size:clamp(2.7rem,12.5vw,4rem);margin-bottom:22px}
  .hero-copy{order:3;max-width:none;margin-bottom:24px}
  .hero-figure{order:4;width:100%;height:min(86vw,470px)}
  .hero-circle{top:auto;bottom:8%;width:min(70vw,360px)}
}