.sg--booting .sg__details{ visibility:hidden; }
.sg--ready .sg__details{ visibility:visible; }


/* ===== Z-INDEX FOR FADING SLIDES ===== */
.sg__slide { z-index: 0; }
.sg__slide.is-active { z-index: 1; }

/* ===== Title ===== */
.sg__heading{
  text-align:center;
  font-size:clamp(28px,4vw,70px);
  letter-spacing:.02em;
  font-family:'Lora', serif !important;
  font-weight:100 !important;
  margin:179px 0 clamp(18px,11vw,169px);
}

/* ===== Thumbs row ===== */
.sg__thumbs{
  display:flex; gap:clamp(10px,1.5vw,16px);
  padding:6px 2px 12px;
  scrollbar-width:thin;
  justify-content:center; flex-wrap:nowrap;
  overflow:visible;
}

.sg__thumb{
  --w:clamp(120px,12vw,200px);
  --h:clamp(140px,16vw,334px);
  width:var(--w); height:var(--h);
  border:0; background:#fff; padding:0;
  position:relative; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  /* reserve aspect for immediate layout */
  aspect-ratio: var(--w) / var(--h);
}

.sg__thumb-media{ position:absolute; inset:0; display:block; width:100%; height:100%; z-index:0; }
.sg__thumb .sg__thumb-media img,
.sg__thumb .sg__thumb-media picture,
.sg__thumb .sg__thumb-media figure{ width:100%; height:100%; display:block; object-fit:cover; }

.sg__thumb-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem; color:#fff;
  font-weight:700; font-family:"Lato", sans-serif !important;
  font-size:clamp(10px,1.2vw,20px);
  background:rgba(0,0,0,.45);
  transition:background .3s ease, color .3s ease;
  z-index:1;
}
.sg__thumb:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18); }
.sg__thumb:hover .sg__thumb-title{ background:rgba(0,0,0,.55); }

.sg__thumbs .sg__thumb:nth-child(odd){ transform:translateY(-10px); }
.sg__thumbs .sg__thumb:nth-child(even){ transform:translateY(40px); transition:transform .3s ease; }
.sg__thumbs .sg__thumb:nth-child(even):hover{ transform:translateY(-30px); }
.sg__thumbs .sg__thumb:nth-child(odd):hover{ transform:translateY(70px); }

.sg__thumb.is-active{ outline:1px solid #0e6b3b; }

/* ===== Details area ===== */
.sg{ overflow-x:hidden; -ms-overflow-style:none; scrollbar-width:none; }
.sg::-webkit-scrollbar{ display:none; }

/* One source of truth for sizing */
.sg{
  --sg-slide-pad: clamp(12px, 5vw, 60px);
  --sg-media-h: clamp(420px, 44vw, 560px);
}

.sg__details{
  position:relative;
  margin-top:clamp(16px,3vw,28px);
  margin-bottom: 8rem;
  min-height:calc(var(--sg-media-h) + (2 * var(--sg-slide-pad)));
}

.sg__slide{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1.8fr 1.2fr;
  gap:clamp(16px,2vw,28px);
  align-items:stretch;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  padding:var(--sg-slide-pad);
  margin-top:4rem;
}
.sg__slide.is-active{ opacity:1; pointer-events:auto; }

.sg__media{
  position:relative; width:100%;
  height:var(--sg-media-h);
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  /* reserve image space immediately */
  aspect-ratio: 16 / 10;
}
.sg__media > *{ display:block; height:100%; }
.sg__media img, .sg__media picture, .sg__media figure{ width:100%; height:100%; object-fit:cover; display:block; }

.sg__text{ align-self:start; color:#222; }
.sg__title{
  color:#006838;
  font-size:clamp(22px,2.6vw,34px);
  margin:2px 0 1.4rem 70px;
  font-family:"Lato", sans-serif !important;
  font-weight:100; width:90%; line-height:1.5;
}
.sg__body p{ margin:.3rem 0; }
.sg__body ul{ margin:.4rem 0 0 2.5em; list-style-type:square; color:#000; }
.sg__body ul li::marker{ color:#c6a052; }
.sg__body ul li{ font-family:"Lato", sans-serif !important; line-height:2.5; font-size:18px; }

@media (max-width:900px){
  .sg{ --sg-media-h: clamp(260px, 55vw, 400px); }
  .sg__slide{ grid-template-columns:1fr; }
}