:root {
  --g900: #061a10; /* Midnight Emerald */
  --g800: #0c2b1a;
  --g700: #14472b;
  --g600: #207345;
  --g400: #42a36b;
  --g100: #dff0e6;
  --g50:  #f0f7f3;
  --cream: #ffffff; /* Alabaster */
  --sand:  #f4f5f7;
  --gold:  #b89038; /* Metallic Bronze */
  --gold2: #d4af37; /* Champagne Gold */
  --ink:   #111814;
  --muted: #5a6e63;
  --light: #8fa99a;
  --shadow: 0 8px 32px rgba(0,0,0,0.13);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; font-size: 16px; }


body {
  font-family: "Be Vietnam Pro", sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  cursor: auto;
}

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(to right, var(--g700), var(--gold));
  z-index: 8000; width: 0%; transition: width .1s linear;
}

/* ── SECTION UTILITY ── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
section[id], .section-pad { scroll-margin-top: 100px; }

/* ── PARALLAX HELPERS ── */
.par { will-change: transform; }

/* ── REVEAL ANIMATIONS ── */
.rw { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.rw.vis { opacity: 1; transform: none; }
.rw-l { opacity: 0; transform: translateX(-40px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.rw-l.vis { opacity: 1; transform: none; }
.rw-r { opacity: 0; transform: translateX(40px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.rw-r.vis { opacity: 1; transform: none; }
.rw-s { opacity: 0; transform: scale(.92); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.rw-s.vis { opacity: 1; transform: scale(1); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
.d5 { transition-delay: .5s; }
.d6 { transition-delay: .6s; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700;
  font-size: 14px; text-decoration: none; border: none; cursor: pointer;
  font-family: inherit; transition: transform .25s, box-shadow .25s;
  letter-spacing: .2px;
}
.btn-solid { background: #fff; color: var(--g800); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.3); color: var(--g900); }
.btn-line { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-line:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); color: #fff; }
.btn-green { background: var(--g700); color: #fff; box-shadow: 0 10px 30px rgba(30,112,64,.4); }
.btn-green:hover { background: var(--g800); transform: translateY(-3px); color: #fff; }

.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--g700); display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.section-eyebrow::after { content: ""; flex: 1; max-width: 40px; height: 1px; background: var(--g600); }

/* Common Image Hover Effects */
.hi img, .ii img, .pi img, .ci img, .li img, .oi img, .fi img, .gf img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease;
}
.hi:hover img, .ii:hover img, .pi:hover img, .ci:hover img, .li:hover img, .oi:hover img, .fi:hover img, .gf:hover img {
  transform: scale(1.08);
}

/* Interactive Image Slider */
.hana-img-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 40px 0 60px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    aspect-ratio: 21/9;
    background: #f4f5f7;
    user-select: none;
    cursor: ew-resize;
}
.hana-img-slider img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
}
.slider-bg {
    z-index: 1;
}
.slider-fg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    border-right: 4px solid #fff;
}
.slider-fg {
    max-width: none;
}
.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: ew-resize;
    font-size: 18px;
    border: 3px solid #eee;
    transition: transform 0.2s, background 0.3s;
    pointer-events: auto;
}
.slider-handle i {
    pointer-events: none;
}
.hana-img-slider:hover .slider-handle {
    background: #f8f9fa;
    color: #061a10;
}
.hana-img-slider .hana-label {
    position: absolute;
    top: 20px;
    font-size: 16px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    padding: 4px 14px;
    border-radius: 40px;
    z-index: 4;
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
}
.hana-img-slider .hana-label.left {
    left: 20px;
}
.hana-img-slider .hana-label.right {
    right: 20px;
}
@media (max-width: 768px) {
    .hana-img-slider { aspect-ratio: 4/3; margin: 30px 0; }
    .hana-img-slider .hana-label { font-size: 14px; top: 15px; padding: 4px 12px; }
    .hana-img-slider .hana-label.left { left: 15px; }
    .hana-img-slider .hana-label.right { right: 15px; }
    .slider-handle { width: 40px; height: 40px; font-size: 14px; }
}