/* Hero. Specs from Figma; items marked (assumed) need your check. */
.hero{
  --hero-top: var(--header-h, 96px);          /* space kept free for the fixed header */
  position:relative;width:100%;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;            /* whole block centered vertically */
  overflow:hidden;background:#0d1f1c;color:#F8F4EB;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,var(--hero-overlay,.35)) 100%)}

/* Equal space above and below = content sits in the middle and never goes under the header.
   If the content is taller than the screen, the hero grows instead of overlapping. */
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;
  padding:var(--hero-top) 40px var(--hero-top);
}

.hero__eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 clamp(16px,3vh,28px);font:300 14px/14.4px "Jost",sans-serif;letter-spacing:2.88px;text-transform:uppercase;vertical-align:middle}
.hero__eyebrow::before{content:"";width:32px;height:1px;background:rgba(248,244,235,.45)}
.hero__eyebrow::after{content:"";flex:1;max-width:560px;height:1px;background:rgba(248,244,235,.45)}

/* Heading scales with BOTH width and height: 128px max (Figma) */
.hero__heading{
  margin:0 0 clamp(16px,3vh,28px);
  font:400 clamp(44px,min(8.9vw,16vh),90px)/.95 "Cormorant Garamond",serif;
  letter-spacing:.16px;text-transform:capitalize;color:#F8F4EB;
}

.hero__text{max-width:560px;margin:0 0 clamp(20px,3.5vh,32px);font:500 clamp(16px,1.4vw,20px)/1.4 "Jost",sans-serif;letter-spacing:.16px}

.hero__buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:16.58px 32px 17.42px;border-radius:6px;border-top:1px solid #F8F4EB73;font:500 12px/1 "Jost",sans-serif;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;transition:.25s}
.hero-btn--primary{min-width:205px;background:#F8F4EB;color:#1c1c1c}
.hero-btn--primary:hover{background:#fff}
.hero-btn--secondary{border:1px solid #F8F4EB73;color:#F8F4EB;background:transparent;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-btn--secondary:hover{background:rgba(248,244,235,.12)}

/* Laptop */
@media (max-width:1439px){
  .hero__inner{padding-left:32px;padding-right:32px}
}

/* Tablet (header is 76px here) */
@media (max-width:1023px){
  .hero{--hero-top:var(--header-h, 76px)}
  .hero__inner{padding-left:32px;padding-right:32px}
  .hero__heading{font-size:clamp(44px,min(10vw,13vh),72px);line-height:.97}
}

/* Mobile */
@media (max-width:767px){
  .hero{--hero-top:var(--header-h, 76px)}
  .hero__inner{padding-left:20px;padding-right:20px}
  .hero__heading{font-size:clamp(40px,12vw,56px);line-height:1}
  .hero__text{font-size:16px;line-height:24px}
  .hero__eyebrow::after{display:none}
  .hero__buttons{flex-direction:column}
  .hero-btn{width:100%}
}

/* Landscape phones / very short screens: hide the paragraph so nothing is cut */
@media (max-height:560px){
  .hero__heading{font-size:clamp(36px,12vh,64px)}
  
}