/* ==========================================================================
   pages/home.css — landing hero (responsive bands + clean seam)
   + Stable page edges
   + Glossy non-interactive tagline pills
   + Single primary CTA (clean glass + antique gold)
   + Unified hero surface (no stark bars)
   + Full image (no cropping) w/ max-height 640px
   + Top logo overlays image (no thick top band)
   + Headline plaque sits ON the banner (sandy surface)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ROOT / PAGE SAFETY
   -------------------------------------------------------------------------- */

html{
  background:#070a12;
  scrollbar-gutter: stable;
}

body.landing{
  background:#070a12;
  margin:0;

  /* HERO media sizing (kept as knobs; not used to crop) */
  --landing-hero-ar: 16 / 7;
  --landing-hero-min-h: 280px;
  --landing-hero-max-h: 780px;

  /* CTA palette (avoid high-chroma yellow) */
  --cta-gold: rgba(246, 215, 138, 1);   /* antique gold */
  --cta-gold-2: rgba(239, 164, 42, 1);  /* warm orange-gold */
  --cta-ink: rgba(9, 10, 16, 1);        /* deep ink */
}

.landing-wrap{
  width:100%;
  max-width:100%;
}

/* --------------------------------------------------------------------------
   HERO — unified surface + blended seams + overlays
   -------------------------------------------------------------------------- */

.landing-hero{
  position: relative;
  overflow: hidden;
  width:100%;

  background:
    radial-gradient(900px 360px at 50% 0%,
      rgba(254,135,1,.14) 0%,
      rgba(75,52,108,.25) 42%,
      rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgba(75,52,108,1) 0%,
      rgba(75,52,108,.92) 22%,
      rgba(15,18,28,.85) 60%,
      rgba(7,10,18,1) 100%);

  box-shadow: none;
}

/* Bands base */
.hero-band{
  position: relative;
  background: transparent;

  min-height: 88px;
  height:auto;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:14px 16px;
}

/* --------------------------------------------------------------------------
   TOP LOGO OVERLAY (no thick band)
   -------------------------------------------------------------------------- */

.hero-band--top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  z-index: 6;

  min-height: auto;
  padding: 12px 16px 0;

  background: transparent;
  pointer-events: none; /* makes the overlay feel “non-UI” */
}

/* Logo */
.hero-logo{
  max-height:120px;
  width:auto;

  display:block;
  margin-inline:auto;

  /* dial this if you want the logo lower/higher on the image */
  transform: translateY(0px);

  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

/* --------------------------------------------------------------------------
   HERO IMAGE — full image (no cropping) + blended seams (max-height: 640px)
   -------------------------------------------------------------------------- */

.hero-image{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 100%;

  /* IMPORTANT: remove fixed ratio + min-height clamps that force cropping */
  aspect-ratio: auto;
  min-height: 0;

  /* restore your max height */
  max-height: 640px;

  overflow: hidden; /* keeps seam overlays clean */
  background: transparent;

  margin-top: 0;
}

/* Show the entire image (no crop) while honoring max-height */
.hero-image img{
  max-height: 640px;

  /* keep full image visible without cropping */
  width: auto;
  height: 100%;

  display:block;
  margin-inline:auto; /* centers when width becomes smaller */

  position: relative;
  z-index: 1;

  filter: saturate(1.02) contrast(1.03);
}

/* Seam blending overlays */
.hero-image::before,
.hero-image::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
  z-index: 2;
}


/* Top seam — color-matched blend */
.hero-image::before{
  top:0;
  height: clamp(36px, 4vw, 64px);

  background: linear-gradient(
    180deg,
    rgba(52,35,74,.95) 0%,   /* #34234A */
    rgba(60,36,82,.78) 38%,  /* #3C2452 */
    rgba(60,36,82,.35) 65%,
    rgba(0,0,0,0) 100%
  );
}


/* Bottom seam: keep a stronger fade for the plaque / transition */

/* Bottom seam:  */
.hero-image::after{
  bottom:0;
  height: clamp(58px, 7vw, 110px);

  background: linear-gradient(
    0deg,
    rgba(7,10,18,.78) 0%,
    rgba(7,10,18,.38) 40%,
    rgba(7,10,18,.14) 65%,
    rgba(0,0,0,0) 100%
  );
}

 
.hero-h1{
  font-family: "Playfair Display", serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.15;

 
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  font-size: clamp(26px, 3.0vw, 36px);
}
 

 /*
.hero-h1{
  font-family: "Cinzel", serif;
  font-weight: 400;

  letter-spacing: 0.03em;   
  line-height: 1.15;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  font-size: clamp(26px, 3.2vw, 32px);
}

*/


/* --------------------------------------------------------------------------
   HEADLINE PLAQUE ON THE BANNER (sandy surface)
   - Bottom band becomes overlay on hero-image
   -------------------------------------------------------------------------- */

.hero-band--bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;

  z-index: 7;

  min-height: auto;
  padding: 0 16px;
  background: transparent;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  bottom: 22px; /* was 18px */
}


.hero-band--bottom .hero-h1{
  display: inline-block;
  margin: 0;

  padding: 14px 22px;
  border-radius: 18px;

  /* Sandy/stone surface (RGB 215,188,161) */
  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(255,255,255,.38) 0%,
      rgba(255,255,255,.14) 36%,
      rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgba(215,188,161,.78) 0%,
      rgba(215,188,161,.62) 48%,
      rgba(215,188,161,.52) 100%);

  border: 1px solid rgba(255,255,255,.22);

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -12px 20px rgba(0,0,0,.18);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* replace yellow (clashy) with warm ink */
  color: rgba(20,18,24,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.28);

  max-width: min(60ch, 100%);
}

/* headline typography remains */
/* Headline plaque — mist glass (matches CTA container language) */
.hero-band--bottom .hero-h1{
  display:inline-block;
  margin:0;

  padding: 14px 22px;
  border-radius: 18px;

  /* Mist / glass: dark + airy, not sandy */
  background:
    radial-gradient(900px 140px at 50% 0%,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.035) 42%,
      rgba(255,255,255,0) 74%),
    linear-gradient(180deg,
      rgba(12,14,22,.42) 0%,
      rgba(10,12,18,.32) 55%,
      rgba(6,8,12,.22) 100%);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 18px 50px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* restore gold lead */
  color: #F4D86A; /* #FEE440original Mythogin headline gold */

  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 10px 28px rgba(0,0,0,.55);

  max-width: min(60ch, 96vw);
}


.h1-line{ display:block; }

/* --------------------------------------------------------------------------
   TAGLINE BELOW HERO (decorative pills — optional)
   -------------------------------------------------------------------------- */

.hero-tagline{
  margin:28px auto 10px;
  max-width:var(--landing-max);
  padding-inline:var(--landing-gutter);

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 22px;

  font-family: "Cormorant Garamond", var(--serif);
  font-optical-sizing: auto;
  font-kerning: normal;

  font-size:clamp(22px,2.3vw,26px);
  font-style:italic;

  color:#FE8701;
  text-align:center;
}

/* Tagline pills — decorative */
.hero-tagline span{
  position:relative;
  padding:3px 9px;
  font-size:0.8em;

  font-family: inherit;
  font-style: inherit;
  font-weight: 540;
  font-variation-settings: "wght" 540;

  border-radius:999px;
  user-select:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,210,120,.14) 0%,
      rgba(255,170,60,.06) 30%,
      rgba(0,0,0,.35) 100%
    );

  border:1px solid rgba(255,200,120,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,230,180,.25),
    inset 0 -4px 8px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.45);

  color:#EFA42A;
}

.hero-tagline span::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,235,200,.45) 0%,
      rgba(255,210,160,.15) 35%,
      transparent 65%
    );

  opacity:.25;
}

.hero-tagline span::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* --------------------------------------------------------------------------
   BELOW HERO CONTENT
   -------------------------------------------------------------------------- */

.landing-text{
  max-width:var(--landing-max);
  margin-inline:auto;
  padding:12px var(--landing-gutter) 64px;
  text-align:center;

  font-family: "Cormorant Garamond", var(--serif);
}

.landing-statement{
  max-width:min(88ch,100%);
  margin:0 auto 18px;

  font-size:20px;
  line-height:1.6;

  font-weight: 500;
  letter-spacing:.01em;

  color:rgba(220,225,235,.85);
}

/* Secondary landing statements — pyramid flow */
.landing-split{
  max-width:min(88ch,100%);
  margin:0 auto 18px;
}

.ls-line1,
.ls-line2{
  display:block;
}

.ls-line1{ margin-bottom:4px; }
.ls-line2{ margin-top:2px; }

.landing-statement em{
  font-style:italic;
  color:rgba(235,240,250,.92);
}

/* --------------------------------------------------------------------------
   CTA — single, clean, non-muddy moment
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CTA — compact centered container
   -------------------------------------------------------------------------- */

 /*
.landing-cta{
  margin:14px auto 22px;

  
  width: fit-content;
  max-width: 92vw;

  display:flex;
  justify-content:center;

  padding:14px 22px;
  border-radius:18px;

  background:
    radial-gradient(900px 140px at 50% 0%,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.03) 38%,
      rgba(255,255,255,0) 70%),
    linear-gradient(180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,.012) 55%,
      rgba(0,0,0,0) 100%);

  border:1px solid rgba(255,255,255,.07);

  box-shadow:
    0 18px 46px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.06);
}
 */

.landing-cta .btn.primary{
  position:relative;
  margin-top: 12px;
  padding:12px 24px;
  font-size:17px;
  letter-spacing:.01em;

  color:  var(--cta-gold-2);/* #FEE440;original Mythogin headline gold */

  /*     */


  background:
    radial-gradient(120% 220% at 50% 0%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.04) 30%,
      rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,
      rgba(246,215,138,.14) 0%,
      rgba(239,164,42,.10) 35%,
      rgba(0,0,0,.78) 100%);

  border:1px solid rgba(246,215,138,.20);

  box-shadow:
    0 12px 28px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 18px rgba(0,0,0,.55);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.landing-cta .btn.primary::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.05) 18%,
    transparent 60%
  );

  opacity:.85;
}

.landing-cta .btn.primary:hover{
  transform:translateY(-1px);
  border-color: rgba(246,215,138,.30);
  filter: brightness(1.03);

  box-shadow:
    0 16px 34px rgba(0,0,0,.68),
    0 0 0 4px rgba(246,215,138,.08),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -10px 18px rgba(0,0,0,.55);
}

.landing-cta .btn.primary:active{
  transform:translateY(0);
  filter: brightness(.99);
}

.landing-cta .btn.primary:focus-visible{
  outline:none;
  box-shadow:
    0 16px 34px rgba(0,0,0,.68),
    0 0 0 4px rgba(246,215,138,.14),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -10px 18px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:760px){
  body.landing{
    --landing-hero-ar:16 / 9;
    --landing-hero-min-h:220px;
  }

  .hero-band{ padding:12px 14px; }

  .hero-band--bottom{
    bottom: 14px;
  }

  .hero-band--bottom .hero-h1{
    padding: 12px 18px;
    border-radius: 16px;
  }
}

@media (max-width:600px){
  .hero-band{
    min-height:86px;
    padding:12px 14px;
  }

  .hero-logo{
    max-height:56px;
    transform: translateY(0px);
  }

  .hero-h1{
    font-size:clamp(18px,4.8vw,22px);
    line-height:1.15;
  }

  .hero-tagline{
    margin-top:22px;
    gap:10px 12px;
    font-size:clamp(16px,4.4vw,19px);
    padding-inline:14px;
  }

  .hero-tagline span{
    padding:4px 10px;
    font-size:0.85em;
  }

  .landing-text{ padding:10px 18px 56px; }

  .landing-cta{
    padding:14px 14px;
    border-radius:16px;
  }

  .landing-cta .btn.primary{
    padding:12px 20px;
    font-size:16px;
  }

  /* image max-height stays 640; shrink plaque slightly */
  .hero-band--bottom{ bottom: 12px; }
  .hero-band--bottom .hero-h1{ padding: 10px 14px; }
}

@media (max-width:400px){
  .hero-tagline{
    gap:8px 10px;
    font-size:clamp(15px,4.6vw,18px);
    padding-inline:12px;
  }

  .landing-text{ padding-inline:14px; }

  .hero-band--bottom .hero-h1{
    max-width: 92vw;
    padding: 10px 12px;
  }
}

@media (max-width:340px){
  .hero-band{
    min-height:72px;
    padding:10px;
  }

  .hero-logo{
    max-height:48px;
    transform: translateY(0px);
  }

  .hero-tagline{
    font-size:15px;
    gap:6px 8px;
    padding-inline:8px;
  }

  .landing-text{ padding-inline:10px; }

  .hero-band--bottom{
    bottom: 10px;
    padding: 0 10px;
  }
}