/* ===== Base ===== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0; color:#f4f0ea; background:#062b26;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(100% - 40px, 1200px); margin-inline:auto; }
html, body{ overflow-x:hidden; }

/* ===== Header / Nav ===== */
.site-header{ position:sticky; top:0; z-index:50; height:72px; display:flex; align-items:center; }
.site-header .nav-surface{ position:absolute; inset:0; z-index:-1; backdrop-filter:blur(6px); border-bottom:1px solid transparent; }
.site-header.scrolled .nav-surface{ background:rgba(8,43,38,.78); border-bottom-color:rgba(255,255,255,.18); box-shadow:0 10px 22px rgba(0,0,0,.28); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.02em; font-size:1.08rem; }
.brand-mark{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; background: radial-gradient(circle at 30% 30%, #d9efe3, #a0cbb6); color:#123a31; border:1px solid rgba(255,255,255,.2); box-shadow: 0 6px 14px rgba(0,0,0,.25) inset, 0 2px 10px rgba(0,0,0,.18); }
.brand-text strong{ font-weight:800; }
.nav-desktop{ display:none; gap:1.4rem; align-items:center; }
.nav-link{ opacity:.95; font-weight:500; }
.nav-link:hover{ opacity:1; text-decoration: underline; text-underline-offset:6px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.82rem 1.15rem; border-radius:999px; background:#0b2420; color:#f4f0ea; border:1px solid rgba(0,0,0,.55); box-shadow:0 6px 14px rgba(0,0,0,.18); cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease; }
.btn:hover{ background:#081e19; transform:translateY(-1px); }
.btn-large{ padding:1rem 1.35rem; font-weight:600; }
.btn-small{ padding:.55rem .9rem; font-size:.92rem; }
.btn-contrast{ background:#bfe3cf; color:#10352d; border-color:rgba(0,0,0,.06); }

/* Hamburger */
.nav-toggle{ appearance:none; border:0; background:transparent; cursor:pointer; width:44px; height:44px; border-radius:10px; display:grid; place-items:center; }
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#f4f0ea; margin:3px 0; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
@media (min-width:900px){ .nav-desktop{ display:flex; } .nav-toggle{ display:none; } }

/* Drawer (outside header) */
.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; left:auto; width:min(88vw,380px); height:100vh;
  background:rgba(8,43,38,.96); color:#f4f0ea; transform:translateX(100%); transition:transform .35s ease;
  z-index:60; display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,.18);
}
.mobile-drawer.open{ transform:translateX(0); }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.18); }
.brand--drawer{ font-weight:700; display:flex; align-items:center; gap:.6rem; }
.drawer-close{ background:transparent; border:1px solid rgba(255,255,255,.18); color:#f4f0ea; border-radius:10px; padding:.4rem .6rem; cursor:pointer; }
.drawer-links{ display:flex; flex-direction:column; gap:.8rem; padding:1rem 1.25rem 2rem; }
.drawer-link{ padding:.8rem 0; font-size:1.05rem; border-bottom:1px dashed rgba(255,255,255,.12); }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; }
.scrim[hidden]{ display:none !important; }
@media (min-width:900px){ .mobile-drawer{ transform:translateX(100%) !important; } .mobile-drawer.open{ transform:translateX(100%) !important; } .scrim{ display:none !important; } }

/* ===== Split Carousel ===== */
.mat-stage{ background:#0b2f29; border-top:1px solid rgba(255,255,255,.12); }
.stage-split{ display:grid; grid-template-columns: 1.6fr 1fr; gap:0; min-height: calc(100vh - 72px); }
@media (max-width: 900px){
  .stage-split{ grid-template-columns: 1fr; min-height: auto; }
}

/* SAME SIZE FOR ALL SLIDES */
.stage-left{
  position: relative; overflow: hidden; border-right:1px solid rgba(255,255,255,.08);
  /* ▼ Set a uniform, responsive height for the image area */
  height: clamp(420px, 70vh, 760px);
}
@media (max-width: 900px){
  .stage-left{
    height: clamp(300px, 58vh, 560px);
  }
}

.stage-track{ display:flex; height:100%; transition:transform .5s ease; }
.slide{ flex:0 0 100%; height:100%; position:relative; }
.slide img{
  width:100%; height:100%;
  object-fit: cover;          /* crop to fill the box without distortion */
  object-position: center;    /* tweak if you prefer 'center top' etc. */
}

.stage-right{
  background:#0f2d27;
  color:#eaf3ef;
  display:flex; align-items:center; justify-content:center; padding: clamp(24px, 6vw, 48px);
}
.info{ max-width: 520px; text-align:center; }
.brand-over{ margin:0 0 .2rem; opacity:.75; letter-spacing:.18em; font-size:.9rem; text-transform:uppercase; }
.mat-name{ margin:.2rem 0 .4rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 4.8vw, 2.6rem); }
.mat-copy{ margin:0 auto 1rem; color:#d2e6df; line-height:1.75; }

.mat-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 0 auto 14px; width:min(320px, 100%); }
.arrow-btn{
  background:transparent; border:0; color:#bfe3cf; font-weight:700; letter-spacing:.08em; cursor:pointer;
}
.arrow-btn:hover{ color:#ffffff; text-decoration: underline; text-underline-offset: 4px; }

.mat-note{ font-size:.94rem; color:#cfe2db; margin: 0 auto 14px; line-height:1.7; }


/* ===== Footer ===== */
.site-footer{ background:#062b26; color:#f4f0ea; border-top:1px solid rgba(255,255,255,.12); }
.footer-grid{ display:grid; gap:32px; padding:24px 0; grid-template-columns: 1.2fr .9fr .9fr; align-items:start; }
.footer-tag{ margin:.6rem 0 0; color:#cdd7d4; max-width:40ch; }
.footer-heading{ margin:0 0 .4rem; font-weight:700; letter-spacing:.02em; font-size:1rem; }
.footer-addr{ font-style:normal; color:#e9e4dd; margin:0 0 .4rem; }
.footer-phone a{ color:#bfe3cf; }
.footer-social-links a{ color:#cdd7d4; } .footer-social-links a:hover{ color:#fff; text-decoration: underline; }
.footer-social-links .sep{ margin:0 .5rem; opacity:.6; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); background:#052521; color:#cdd7d4; }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr; } }

/* Accessibility helpers */
[inert]{ pointer-events:none; user-select:none; }
[inert] a,[inert] button,[inert] input,[inert] select,[inert] textarea{ pointer-events:none; }

/* Motion preference */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

.stage-track{ display:flex; height:100%; transition:transform .5s ease; will-change: transform; }