@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Poppins:wght@300;400;500;600&display=swap');

.ggs-hero{
  --orange:#d4622a; --cream:#f5efe3; --cream-dim:#cfd6cd;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Poppins',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  position:relative; width:100%;
  height:100vh; height:100svh;
  min-height:480px;
  overflow:hidden; isolation:isolate;
  background:#07251c; font-family:var(--sans);
}
.ggs-hero *{box-sizing:border-box;}

.ggs-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
  display:flex; align-items:center;
}
.ggs-slide.is-active{opacity:1; visibility:visible;}
.ggs-slide[data-variant="center"]{justify-content:center; text-align:center;}

.ggs-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center right;
  background-image:
    linear-gradient(100deg, rgba(7,37,28,.95) 0%, rgba(7,37,28,.82) 36%, rgba(7,37,28,.30) 60%, rgba(7,37,28,.05) 100%),
    var(--bg, none);
  transform:scale(1.06);
}
.ggs-slide[data-variant="center"] .ggs-bg{
  background-position:center;
  background-image:
    linear-gradient(180deg, rgba(7,37,28,.80) 0%, rgba(7,37,28,.60) 50%, rgba(7,37,28,.88) 100%),
    var(--bg, none);
}
.ggs-slide.is-active .ggs-bg{transform:scale(1); transition:transform 7s linear;}

.ggs-content{position:relative; z-index:2; padding:0 clamp(28px,7vw,110px); max-width:680px;}
.ggs-content--center{max-width:780px; padding:0 24px;}

/* logo sized by HEIGHT so the panel sliders bind reliably.
   width:auto + max-width keeps very wide logos from overflowing. */
.ggs-logo-img{
  display:block; width:auto; height:90px; max-width:100%;
  margin:0 0 clamp(20px,4vh,38px);
}
.ggs-logo-img--center{
  height:130px; max-width:100%;
  margin-left:auto; margin-right:auto;
}

.ggs-eyebrow{display:block; font-family:var(--serif); font-style:italic; color:var(--orange); font-size:clamp(22px,2.6vw,36px); margin-bottom:6px;}
.ggs-head{font-family:var(--serif); font-weight:500; color:var(--cream); font-size:clamp(36px,5.8vw,82px); line-height:1.02; margin:0 0 18px;}
.ggs-head em{color:var(--orange); font-style:italic;}
.ggs-sub{color:var(--cream-dim); font-weight:300; font-size:clamp(15px,1.5vw,21px); line-height:1.55; margin:0; max-width:30em;}
.ggs-sub strong{color:var(--cream); font-weight:500;}
.ggs-tagline{font-family:var(--serif); color:var(--cream); font-size:clamp(20px,2.8vw,36px); font-weight:500; margin:0; position:relative; padding:0 clamp(40px,8vw,90px);}
.ggs-tagline::before,.ggs-tagline::after{content:""; position:absolute; top:50%; width:clamp(24px,5vw,60px); height:1px; background:var(--orange);}
.ggs-tagline::before{left:0;} .ggs-tagline::after{right:0;}

/* per-element entrance, replays on every slide change */
.ggs-slide [data-anim]{opacity:0; transform:translateY(26px);}
.ggs-slide.is-active [data-anim]{animation:ggsRise .8s var(--ease) forwards;}
.ggs-slide.is-active [data-anim="logo"]{animation-delay:.15s;}
.ggs-slide.is-active [data-anim="eye"] {animation-delay:.40s;}
.ggs-slide.is-active [data-anim="head"]{animation-delay:.55s;}
.ggs-slide.is-active [data-anim="sub"] {animation-delay:.80s;}
.ggs-logo-img[data-anim]{transform:translateY(20px) scale(.96);}
.ggs-slide.is-active .ggs-logo-img[data-anim]{animation:ggsLogo .9s var(--ease) .15s forwards;}
@keyframes ggsRise{to{opacity:1; transform:translateY(0);}}
@keyframes ggsLogo{to{opacity:1; transform:translateY(0) scale(1);}}

/* controls (defaults; overridden by the Style tab) */
.ggs-arrow{position:absolute; top:50%; left:clamp(14px,2vw,34px); transform:translateY(-50%); z-index:5; width:50px; height:50px; border-radius:50%; border:1px solid rgba(245,239,227,.35); background:rgba(7,37,28,.35); color:var(--cream); font-size:27px; cursor:pointer; display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .25s, border-color .25s;}
.ggs-arrow:hover{background:var(--orange); border-color:var(--orange);}
.ggs-arrow:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
.ggs-prev{left:clamp(14px,2vw,34px);} .ggs-next{left:auto; right:clamp(14px,2vw,34px);}

.ggs-dots{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:5; display:flex; gap:10px;}
.ggs-dots button{width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer; border:1px solid rgba(245,239,227,.6); background:transparent; transition:all .3s;}
.ggs-dots button[aria-selected="true"]{background:var(--orange); border-color:var(--orange); width:28px; border-radius:6px;}
.ggs-dots button:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}

.ggs-progress{position:absolute; left:0; bottom:0; z-index:4; width:100%; height:3px; background:rgba(245,239,227,.12);}
.ggs-progress-fill{display:block; height:100%; width:0; background:var(--orange);}
.ggs-progress-fill.run{animation:ggsBar var(--dur,6s) linear forwards;}
@keyframes ggsBar{from{width:0;} to{width:100%;}}

@media (max-width:980px){ .ggs-content{max-width:560px;} }

@media (max-width:767px){
  .ggs-slide[data-variant="left"]{align-items:flex-end; padding-bottom:11vh;}
  .ggs-slide[data-variant="left"] .ggs-bg{
    background-position:center center;
    background-image:
      linear-gradient(180deg, rgba(7,37,28,.25) 0%, rgba(7,37,28,.55) 52%, rgba(7,37,28,.96) 100%),
      var(--bg, none);
  }
  .ggs-content{padding:0 24px; max-width:none;}
}

@media (prefers-reduced-motion:reduce){
  .ggs-slide,.ggs-slide.is-active .ggs-bg,.ggs-slide.is-active [data-anim]{transition:none !important; animation:none !important;}
  .ggs-slide [data-anim]{opacity:1 !important; transform:none !important;}
  .ggs-progress-fill.run{animation:none;}
}