@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Manrope:wght@300;400;500;600&display=swap');
/* ═══════════════════════════════════════════════════════
   I.D.Village — Premium Redesign
   style.css
═══════════════════════════════════════════════════════ */

/* ─── RESET & VARIABLES ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --w:    #FAF9F6;
  --s:    #F0EDE6;
  --d:    #141210;
  --m:    #7A756E;
  --a:    #F3490B;
  --ah:   #D84009;
  --ap:   #BF3908;
  --l:    #E8E3DA;
  --r:    #2A2520;
  --sf:   'Cormorant Garamond', Georgia, serif;
  --ss:   'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
}

html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--ss); background: var(--w); color: var(--d); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img   { display: block; width: 100%; height: 100%; object-fit: cover; }
a     { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--ss); }

/* ─── CURSOR ─── */
#cur {
  width: 8px; height: 8px;
  background: var(--d);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .15s, background .2s;
}
#cur.big { transform: translate(-50%, -50%) scale(6); background: rgba(20,18,16,.12); }

/* ─── SCROLL REVEAL ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* ─── TYPOGRAPHY UTILITIES ─── */
.section-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--a);
}
.sec-label {
  display: block;
  margin-bottom: 20px;
}
.sec-label--light { color: var(--a); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d);
  background: none;
  border: none;
  transition: gap .4s var(--ease);
}
.btn-link:hover { gap: 18px; }
.btn-link--light { color: #fff; }

.btn-dark {
  font-family: var(--ss);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #F3490B;
  color: #fff;
  border: none;
  padding: 16px 36px;
  transition: background .3s;
  border-radius: 999px;
}
.btn-dark:hover { background: #D84009; }
.btn-dark:active { background: #BF3908; }
.btn-full { width: 100%; }

.btn-outline-white {
  font-family: var(--ss);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #F3490B;
  color: #fff;
  border: 1px solid #F3490B;
  padding: 16px 44px;
  transition: all .35s;
  border-radius: 999px;
}
.btn-outline-white:hover { background: #D84009; border-color: #D84009; color: #fff; }
.btn-outline-white:active { background: #BF3908; border-color: #BF3908; }


/* ── Light Sweep — premium CTA animation ── */
@keyframes lightSweep {
  0%   { transform: translateX(-180%) skewX(-20deg); }
  100% { transform: translateX(380%)  skewX(-20deg); }
}

.hcta, .cshow-cta, .inv-cta-btn, .fdr-btn, .cots-cta,
.nenq, .fv-cta, .btn-dark {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(243,73,11,.12);
}

.hcta::before, .cshow-cta::before, .inv-cta-btn::before,
.fdr-btn::before, .cots-cta::before, .nenq::before, .fv-cta::before,
.btn-dark::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.15) 55%,
    transparent 100%
  );
  filter: blur(3px);
  transform: translateX(-180%) skewX(-20deg);
  animation: lightSweep 5s linear infinite;
  pointer-events: none;
  z-index: 4;
}

/* ─── NAVIGATION ─── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: 64px;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
#nav.scrolled {
  background: rgba(250,249,246,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--l);
}
.nlog {
  font-family: var(--sf);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .12em;
  color: #fff;
  transition: color .3s;
  display: flex;
  align-items: center;
  height: 100%;
}
#nav.scrolled .nlog { color: var(--d); }
.nlog-img {
  display: block;
  height: 24px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.nlinks { display: flex; gap: 32px; list-style: none; }
.nlinks a {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  transition: color .3s;
}
#nav.scrolled .nlinks a { color: var(--m); }
.nlinks a:hover { color: #fff; }
#nav.scrolled .nlinks a:hover { color: var(--d); }

.nenq {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #F3490B;
  border: 1px solid #F3490B;
  color: #fff;
  padding: 9px 22px;
  transition: all .3s;
  border-radius: 999px;
}
#nav.scrolled .nenq { background: #F3490B; border-color: #F3490B; color: #fff;   border-radius: 999px;
}
.nenq:hover { background: #D84009; border-color: #D84009; color: #fff; }
.nenq:active { background: #BF3908; border-color: #BF3908; }
#nav.scrolled .nenq:hover { background: #D84009; border-color: #D84009; color: #fff; }

.nbur {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nbur span { display: block; width: 22px; height: 1px; background: #fff; transition: background .4s; }
#nav.scrolled .nbur span { background: var(--d); }

/* Mobile menu */
.mmenu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--w);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mmenu.open { opacity: 1; pointer-events: all; }
.mmenu ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 24px; }
.mmenu ul a { font-family: var(--sf); font-size: 32px; font-weight: 300; color: var(--d); }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hbg {
  /* Full-bleed video background — covers hero edge to edge */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* subtle scale-in entrance */
  transform: scale(1.06);
  transition: transform 2.4s cubic-bezier(.19,1,.22,1);
  will-change: transform;
  /* keep GPU layer clean */
  backface-visibility: hidden;
}
.hbg.loaded { transform: scale(1); }

/* Cinematic layered overlays */
.hov-left    { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,4,.75) 0%, rgba(5,7,4,.45) 35%, rgba(5,7,4,.20) 65%, rgba(5,7,4,0) 100%); }

/* Hero content */
.hero-content {
  position: relative;
  z-index: 10;
  padding: 160px 64px 0;
  margin-bottom: 10vh;
  max-width: 940px;
}

/* Location tag */
.hloc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s, transform .6s;
}
.hloc.vis { opacity: 1; transform: none; }
.hloc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--a);
  flex-shrink: 0;
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.5); }
}
.hloc-text {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* H1 */
.htitle {
  font-family: var(--sf);
  font-weight: 300;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: .94;
  color: #fff;
  margin-bottom: 36px;
}
.htitle .ln { display: block; overflow: hidden; }
.htitle .ln span {
  display: block;
  /* Visible by default — JS adds entrance animation */
  opacity: 1;
  transform: none;
  transition: opacity .95s cubic-bezier(.19,1,.22,1), transform .95s cubic-bezier(.19,1,.22,1);
}
/* JS applies .pre class immediately to set up the animated state */
.htitle .ln span.pre {
  opacity: 0;
  transform: translateY(60px);
}
.htitle .ln span.vis {
  opacity: 1;
  transform: none;
}
.htitle .ln.it span { font-style: italic; color: var(--a); }

/* Supporting text */
.hsub {
  font-size: 16px;
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 44px;
  opacity: 0;
  transition: opacity .7s .9s;
}
.hsub.vis { opacity: 1; }

/* CTA wrap */
.hcta-wrap {
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s 1.1s cubic-bezier(.19,1,.22,1), transform .6s 1.1s cubic-bezier(.19,1,.22,1);
}
.hcta-wrap.vis { opacity: 1; transform: none; }

/* Hero CTA button — orange, premium ripple */
.hcta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 17px 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, transform .2s;
  border-radius: 999px;
}
.hcta::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.hcta:hover { background: var(--ah); }
.hcta:hover::after { width: 220px; height: 220px; opacity: 1; }
.hcta:active { background: var(--ap); transform: scale(.98); }
.hcta-arrow { display: inline-flex; align-items: center; transition: transform .3s; }
.hcta:hover .hcta-arrow { transform: translateX(4px); }

/* Feature panel — glassmorphism */
.feat-panel {
  position: relative;
  z-index: 10;
  padding: 0 64px 64px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s 1.4s cubic-bezier(.19,1,.22,1), transform .8s 1.4s cubic-bezier(.19,1,.22,1);
}
.feat-panel.vis { opacity: 1; transform: none; }
.fp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(10,12,8,.52);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.fp-item {
  padding: 28px 32px;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  transition: background .3s;
}
.fp-item:last-child { border-right: none; }
.fp-item:hover { background: rgba(255,255,255,.04); }
.fp-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background .3s;
}
.fp-item:hover::before { background: rgba(243,73,11,.65); }
.fp-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; color: rgba(243,73,11,.8);
}
.fp-icon svg { width: 18px; height: 18px; }
.fp-title {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  margin-bottom: 5px;
}
.fp-desc {
  font-size: 12px;
  color: rgba(255,255,255,.38);
  line-height: 1.5;
  font-weight: 300;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 100px; right: 64px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-label {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  writing-mode: vertical-rl;
}
.scroll-bar {
  width: 1px; height: 56px;
  background: rgba(255,255,255,.15);
  overflow: hidden; position: relative;
}
.scroll-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.7), transparent);
  animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} }

/* Responsive */
@media (max-width: 768px) {
  /* Shorter first screen (~70% of the previous 100vh) — content group below
     is vertically centered within the space under the fixed nav (64px),
     rather than pinned to the bottom. */
  .hero {
    min-height: 70vh;
    justify-content: center;
    padding-top: 64px;
  }

  /* Reframe background toward the entrance/architecture, away from sky */
  .hbg {
    object-position: center 38%;
    transform: scale(1.22);
    transform-origin: 50% 38%;
  }
  .hbg.loaded { transform: scale(1.16); }

  /* Compact, tightly-balanced content column — centered as one group via
     .hero's justify-content above, so padding/margin here is just breathing
     room, not a bottom-alignment offset. */
  .hero-content {
    padding: 0 20px;
    margin-bottom: 0;
    max-width: 100%;
  }
  .hloc { margin-bottom: 16px; }
  .htitle {
    font-size: clamp(35px, 11vw, 53px);
    line-height: 1.06;
    margin-bottom: 16px;
  }
  .hsub {
    max-width: 100%;
    font-size: clamp(12px, 3.5vw, 16px);
    margin-bottom: 24px;
  }
  .hcta-wrap { margin-bottom: 0; }

  /* The shorter, centered layout leaves no safe gap for the decorative
     scroll hint without it overlapping the centered content group — hidden
     on mobile (native swipe already signals scrollability there). */
  .hero-scroll { display: none; }

  /* Feature cards (Екологія / Інфраструктура / Безпека / Комунікації) are
     desktop-only on the hero — hidden (not removed) on mobile so the hero
     ends directly after the CTA button. */
  .feat-panel { display: none; }
}

/* ─── COTTAGE SHOWCASE ─── */
.cshow {
  padding: 120px 56px;
  background: var(--w);
}
.cshow-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 80px;
  align-items: start;
}

/* Left column */
.cshow-left {}

.cshow-h2 {
  font-family: var(--sf);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.0;
  margin-bottom: 28px;
  color: var(--d);
}
.cshow-h2 em { font-style: italic; }

.cshow-desc {
  font-size: 15px;
  color: var(--m);
  line-height: 1.85;
  margin-bottom: 48px;
}

/* Spec rows */
.cshow-specs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--l);
  margin-bottom: 48px;
}
.cshow-spec {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--w);
  transition: background .25s;
}
.cshow-spec:hover { background: var(--s); }
.cs-icon {
  width: 20px; height: 20px;
  color: var(--a);
  flex-shrink: 0;
}
.cs-icon svg { width: 100%; height: 100%; }
.cs-label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m);
}
.cs-val {
  font-family: var(--sf);
  font-size: 20px;
  font-weight: 300;
  color: var(--d);
  text-align: right;
}

/* CTA button */
.cshow-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 17px 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, transform .2s;
  border-radius: 999px;
}
.cshow-cta::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.cshow-cta:hover { background: var(--ah); }
.cshow-cta:hover::after { width: 220px; height: 220px; opacity: 1; }
.cshow-cta:active { background: var(--ap); transform: scale(.98); }
.cshow-cta-arrow { display: inline-flex; align-items: center; transition: transform .3s; }
.cshow-cta:hover .cshow-cta-arrow { transform: translateX(4px); }

/* Right column */
.cshow-right {}

/* Tab navigation — segmented control */
.cshow-tabs {
  display: inline-flex;
  gap: 4px;
  /* Glass pill container */
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.05);
}
.cshow-tab {
  font-family: var(--ss);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-radius: 999px;
  /* more breathing room */
  padding: 11px 22px;
  color: var(--d);
  opacity: .8;
  cursor: pointer;
  transition:
    background 300ms ease,
    color 300ms ease,
    opacity 300ms ease,
    transform 300ms ease,
    box-shadow 300ms ease;
  white-space: nowrap;
}
.cshow-tab:hover {
  background: rgba(255,255,255,.6);
  opacity: 1;
  transform: scale(1.02);
}
.cshow-tab:active { transform: scale(.98); }
.cshow-tab.active {
  background: var(--a);
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(243,73,11,.32);
  transform: none;
}
.cshow-tab.active:hover {
  background: var(--ah);
  color: #fff;
  transform: none;
}

/* Image container */
.cshow-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 16px 56px rgba(20,18,16,.12), 0 4px 16px rgba(20,18,16,.08);
}
.cshow-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.19,1,.22,1);
}
.cshow-img.active { opacity: 1; }
.cshow-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.19,1,.22,1);
}
.cshow-img.active img:hover { transform: scale(1.02); }

/* ─── INVITATION CTA ─── */
.inv-cta {
  position: relative;
  height: 88vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.inv-cta-bg {
  position: absolute;
  inset: -5%;
  transition: transform 10s cubic-bezier(.19,1,.22,1);
}
.inv-cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.inv-cta:hover .inv-cta-bg { transform: scale(1.04); }
.inv-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  width: 620px;
  max-width: 90vw;
  padding: 60px 56px;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
}
.inv-cta-label {
  display: block;
  letter-spacing: .32em;
  margin-bottom: 28px;
}
.inv-cta-h2 {
  font-family: var(--sf);
  font-size: clamp(40px, 6.5vw, 86px);
  font-weight: 300;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 28px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.inv-cta-h2 em { font-style: italic; color: var(--a); }
.inv-cta-sub {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 1.75;
  margin-bottom: 48px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Invitation CTA button */
.inv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 18px 44px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, transform .2s;
  border-radius: 999px;
}
.inv-cta-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.inv-cta-btn:hover { background: var(--ah); }
.inv-cta-btn:hover::after { width: 260px; height: 260px; opacity: 1; }
.inv-cta-btn:active { background: var(--ap); transform: scale(.98); }
.inv-cta-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform .3s;
}
.inv-cta-btn:hover .inv-cta-arrow { transform: translateX(5px); }

/* ─── WHY CHOOSE ─── */
.why {
  padding: 120px 56px 128px;
  background: var(--s);
  position: relative;
}
.why-inner {
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header — label + H2 only */
.why-hdr { margin-bottom: 64px; }
.why-hdr-right { display: none; }

.why-h2 {
  font-family: var(--sf);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--d);
  margin-top: 12px;
}
.why-h2 em { font-style: italic; }

/* 4-col grid */
.why-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ── Liquid Glass card ── */
.why-card {
  /* Apple Liquid Glass */
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 32px;
  padding: 38px 32px 40px;
  cursor: default;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 10px 40px rgba(0,0,0,.04);
  transition:
    transform 300ms ease,
    box-shadow 300ms ease,
    backdrop-filter 300ms ease;
}

/* thin orange top accent line — slides in on hover */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--a);
  border-radius: 32px 32px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.why-card:hover {
  transform: translateY(-8px);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 60px rgba(0,0,0,.08);
}
.why-card:hover::before { transform: scaleX(1); }

/* Icon — 10% larger, orange, scales on hover */
.why-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--a);
  margin-bottom: 22px;
  transition: transform 300ms ease;
}
.why-card:hover .why-card-icon { transform: scale(1.12); }
.why-card-icon svg { width: 30px; height: 30px; stroke-width: 1.3; }

/* Title — slightly darker, more spacing below */
.why-card-title {
  font-family: var(--sf);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: #0e0c0a;
  line-height: 1.2;
  margin-bottom: 14px;
}

/* Body */
.why-card-text {
  font-size: 14px;
  color: var(--m);
  line-height: 1.82;
}

/* Responsive */
@media (max-width: 900px) {
  .why { padding: 80px 40px 88px; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .why { padding: 64px 24px 72px; }
  .why-cards { grid-template-columns: 1fr; }
}

/* ─── COTTAGES ─── */
/* ─── WHY CHOOSE ─── */
.why {
  padding: 120px 56px 128px;
  background: var(--w);
}
.why-inner {
  max-width: 1360px;
  margin: 0 auto;
}

/* Header two-col row */
.why-hdr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 72px;
}
.why-hdr-left { grid-column: 1 / -1; }
.why-h2 {
  font-family: var(--sf);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--d);
  margin-top: 12px;
  white-space: nowrap; /* keep on one line on desktop — see max-width 900px override */
}
.why-h2 em { font-style: italic; color: var(--a); }
.why-sub {
  font-size: 15px;
  color: var(--m);
  line-height: 1.85;
  max-width: 860px;
  margin-top: 24px;
}

/* Cards: 4-col single row */
.why-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Individual card */
.why-card {
  background: var(--s);
  border: 1px solid var(--l);
  border-radius: 8px;
  padding: 36px 32px 38px;
  cursor: default;
  transition:
    transform 300ms ease-out,
    box-shadow 300ms ease-out,
    border-color 300ms ease-out;
}
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 44px rgba(20,18,16,.10);
  border-color: rgba(243,73,11,.22);
}

/* Icon */
.why-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--a);
  margin-bottom: 24px;
}
.why-card-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.35;
}

/* Card title */
.why-card-title {
  font-family: var(--sf);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--d);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* Card body text */
.why-card-text {
  font-size: 14px;
  color: var(--m);
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 900px) {
  .why { padding: 80px 40px 88px; }
  .why-hdr { grid-template-columns: 1fr; gap: 20px; }
  .why-h2 { white-space: normal; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .why { padding: 64px 24px 72px; }
  .why-cards { grid-template-columns: 1fr; }
}

/* ─── COTTAGES ─── */
.cottages { padding: 140px 0; }
.cots-hdr {
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  /* vertically align heading baseline with CTA */
  align-items: flex-end;
  margin-bottom: 72px;
}

/* Single-line heading — no wrapping */
.cots-h2 {
  font-family: var(--sf);
  /* Slightly tighter size so it comfortably sits on one line */
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}
.cots-h2 em { font-style: italic; color: var(--a); }

/* Premium CTA button — filled primary style, matches CTAs sitewide */
.cots-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ss);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 16px 34px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background .3s, transform .2s;
}
.cots-cta:hover { background: var(--ah); }
.cots-cta:active { background: var(--ap); transform: scale(.98); }

.cots-cta-text {
  font-family: var(--ss);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.cots-cta-arrow {
  display: inline-flex;
  align-items: center;
  color: #fff;
  transition: transform .35s cubic-bezier(.19,1,.22,1);
}
.cots-cta:hover .cots-cta-arrow { transform: translateX(5px); }

.cots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--l);
}
.cot-card {
  background: var(--w);
  cursor: pointer;
  overflow: hidden;
}
.cot-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.cot-img img { transition: transform .9s var(--ease); }
.cot-card:hover .cot-img img { transform: scale(1.08); }

.cot-num {
  position: absolute;
  top: 20px; left: 24px;
  font-family: var(--sf);
  font-size: 64px;
  font-weight: 300;
  color: rgba(255,255,255,.22);
  line-height: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}
.cot-hover {
  position: absolute;
  inset: 0;
  background: rgba(20,18,16,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s;
  z-index: 1;
}
.cot-hover span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.cot-card:hover .cot-hover { background: rgba(20,18,16,.32); }
.cot-card:hover .cot-hover span { opacity: 1; transform: none; }

.cot-body { padding: 28px 28px 36px; }
.cot-type {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--a);
  display: block;
  margin-bottom: 10px;
}
.cot-name {
  font-family: var(--sf);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 12px;
}
.cot-desc {
  font-size: 14px;
  color: var(--m);
  line-height: 1.8;
  margin-bottom: 22px;
}
.cot-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--l);
  margin-bottom: 24px;
}
.spec { background: var(--s); padding: 14px 16px; }
.spec-v {
  font-family: var(--sf);
  font-size: 24px;
  font-weight: 300;
  display: block;
}
.spec-l {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m);
  margin-top: 2px;
}
.cot-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--a);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--a);
  border-radius: 999px;
  padding: 10px 20px;
  transition: background .3s, color .3s, box-shadow .3s;
}
.cot-card:hover .cot-link {
  background: var(--a);
  color: #fff;
  box-shadow: 0 10px 24px rgba(243,73,11,.28);
}
.cot-link-arrow { display: inline-flex; transition: transform .35s var(--ease); }
.cot-card:hover .cot-link-arrow { transform: translateX(4px); }

/* ─── FAMILY VALUES ─── */

/* Section: full viewport, image fills entirely */
.fv {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* image set via inline style on the element for guaranteed rendering */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Glass content panel — above image */
.fv-content {
  position: relative;
  z-index: 2;
  width: 700px;
  max-width: 90vw;
  margin-left: max(7%, calc((100vw - 1360px) / 2 + 56px));
  padding: 60px 56px;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
}

/* Label */
.fv-label {
  color: rgba(255,255,255,.70) !important;
  margin-bottom: 22px;
  letter-spacing: .30em;
}

/* Headline */
.fv-h2 {
  font-family: var(--sf);
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  color: #fff;
  margin-bottom: 32px;
}
.fv-h2 em { font-style: italic; font-weight: 300; color: var(--a); white-space: nowrap; }

/* Single description paragraph */
.fv-p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 1.82;
  max-width: 500px;
  margin-bottom: 44px;
}

/* CTA — outlined ghost button */
.fv-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 16px 36px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, transform .2s;
}
.fv-cta:hover { background: var(--ah); }
.fv-cta:active { transform: scale(.98); }
.fv-cta-arrow {
  display: inline-flex;
  transition: transform .3s var(--ease);
}
.fv-cta:hover .fv-cta-arrow { transform: translateX(4px); }

/* Responsive */
@media (max-width: 768px) {
  .fv-content { margin-left: 5%; width: 90vw; padding: 32px; }
  .fv-h2 { font-size: clamp(36px, 8vw, 54px); }
  .fv-h2 em { white-space: normal; }
}

/* ─── FOUNDER ─── */

.fdr {
  padding: 140px 56px;
  background: var(--s);
}
.fdr-inner {
  max-width: 1360px;
  margin: 0 auto;
}

/* Editorial quote intro */
.fdr-intro {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto 88px;
}
.fdr-quote {
  font-family: var(--sf);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.18;
  color: var(--d);
  white-space: nowrap; /* keep on one line on desktop — see max-width 900px override */
}
.fdr-quote-accent { color: var(--a); }
.fdr-label {
  margin-top: 22px;
  margin-bottom: 0;
}

/* Two-column editorial grid */
.fdr-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 80px;
  align-items: start;
}

/* Left column — portrait */
.fdr-left {}

.fdr-portrait {
  position: relative;
  height: 560px;
  width: 468px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--a);
  box-shadow: 0 20px 48px rgba(20,18,16,.10);
}
.fdr-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Right column — profile content */
.fdr-name {
  font-family: var(--sf);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 300;
  color: var(--d);
  line-height: 1.08;
  margin-bottom: 16px;
}
.fdr-subtitle {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a);
  line-height: 1.7;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--l);
}
.fdr-text {
  font-size: 16px;
  color: var(--m);
  line-height: 1.9;
  max-width: 520px;
  margin-bottom: 44px;
}
.fdr-text p { margin-bottom: 16px; }
.fdr-text p:last-child { margin-bottom: 0; }

/* CTA button */
.fdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--a);
  border: none;
  color: #fff;
  padding: 17px 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: background .3s, transform .2s;
}
.fdr-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.fdr-btn:hover { background: var(--ah); }
.fdr-btn:hover::after { width: 220px; height: 220px; opacity: 1; }
.fdr-btn:active { background: var(--ap); transform: scale(.98); }
.fdr-btn-arrow { display: inline-flex; align-items: center; transition: transform .3s; }
.fdr-btn:hover .fdr-btn-arrow { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1100px) {
  .fdr { padding: 120px 36px; }
  .fdr-grid { gap: 56px; }
}
@media (max-width: 900px) {
  .fdr { padding: 96px 36px; }
  .fdr-grid { grid-template-columns: 1fr; gap: 48px; }
  .fdr-portrait { height: 560px; width: auto; aspect-ratio: 1284 / 1921; max-width: 400px; margin: 0 auto; }
  .fdr-intro { max-width: 640px; margin-bottom: 64px; }
  .fdr-quote { white-space: normal; }
}
@media (max-width: 640px) {
  .fdr { padding: 72px 24px; }
  .fdr-portrait { height: 440px; width: auto; aspect-ratio: 1284 / 1921; }
  .fdr-quote { font-size: clamp(26px, 7vw, 36px); }
}

/* ─── GALLERY ─── */
.gallery { padding: 80px 56px 140px; }
.gal-hdr { margin-bottom: 48px; }
.gal-h2 {
  font-family: var(--sf);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 300;
}
.gal-h2 em { font-style: italic; color: var(--a); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 260px 260px;
  gap: 8px;
}

/* ── Gallery item: initial hidden state ──
   NOTE: JS sets this via inline style immediately so
   the browser never paints the hidden state from CSS alone.
   The CSS transition handles the animation FROM that state. */
.gal-item {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  /* transition applied always; JS drives the state */
  transition:
    opacity 900ms cubic-bezier(.22,1,.36,1),
    transform 900ms cubic-bezier(.22,1,.36,1),
    filter 900ms cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity, filter;
}

/* grid spans */
.gal-lg               { grid-column: span 5; grid-row: span 2; }
.gal-item:nth-child(2){ grid-column: span 4; }
.gal-item:nth-child(3){ grid-column: span 3; }
.gal-item:nth-child(4){ grid-column: span 3; }
.gal-item:nth-child(5){ grid-column: span 4; }

/* ── Image ── */
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.84);
  /* transition for hover zoom; parallax overrides via inline style */
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .45s;
  will-change: transform;
}
.gal-item:hover img {
  transform: scale(1.08) !important; /* override parallax translateY */
  filter: brightness(.66);
}

/* ── Overlay ── */
.gal-ov {
  position: absolute; inset: 0;
  background: rgba(12,10,8,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .38s;
}
.gal-item:hover .gal-ov { background: rgba(12,10,8,.36); }

/* ── Hover label pill ── */
.gal-ov span {
  font-family: var(--ss);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .32s, transform .4s cubic-bezier(.22,1,.36,1);
  border: 1px solid rgba(255,255,255,.6);
  padding: 10px 22px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.gal-item:hover .gal-ov span {
  opacity: 1;
  transform: translateY(0);
}

/* ─── INFRASTRUCTURE ─── */
.infra {
  padding: 72px 40px 80px;
  background: var(--s);
}
.infra-wrap {
  max-width: 1400px;
  margin: 0 auto;
}
.infra-hdr {
  text-align: center;
  /* Wide enough for "Все необхідне — поруч з вами" on one line */
  max-width: 860px;
  margin: 0 auto 40px;
}
.infra-h2 {
  font-family: var(--sf);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  margin-bottom: 18px;
  white-space: nowrap;
}
.infra-h2 em { font-style: italic; }
.infra-p { font-size: 15px; color: var(--m); line-height: 1.85; }

/* ── Interactive showcase: accordion (left) + large image (right) ── */
.infra-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  margin-top: 56px;
}

/* Accordion container */
.infra-acc {
  display: flex;
  flex-direction: column;
  background: var(--s);
  border: 1px solid var(--l);
  border-radius: 20px;
  padding: 8px;
}
.infra-acc-item {
  border-radius: 14px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.infra-acc-item + .infra-acc-item { margin-top: 2px; }
.infra-acc-item.active {
  background: var(--w);
  box-shadow: 0 14px 36px rgba(20,18,16,.09);
}

.infra-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  padding: 22px 20px;
  cursor: pointer;
  text-align: left;
}
.infra-acc-num {
  width: 24px;
  flex-shrink: 0;
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 400;
  color: var(--m);
  transition: color .3s;
}
.infra-acc-item.active .infra-acc-num { color: var(--a); }

.infra-acc-title {
  flex: 1;
  font-family: var(--sf);
  font-size: 20px;
  font-weight: 400;
  color: var(--d);
  transition: color .3s;
}
.infra-acc-item.active .infra-acc-title { color: var(--a); }

.infra-acc-chev {
  flex-shrink: 0;
  display: flex;
  color: var(--m);
  transition: transform .4s var(--ease), color .3s;
}
.infra-acc-item.active .infra-acc-chev { color: var(--a); transform: rotate(180deg); }

/* Smooth expand — grid-template-rows 0fr→1fr avoids animating to/from height:auto */
.infra-acc-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.infra-acc-item.active .infra-acc-collapse { grid-template-rows: 1fr; }
.infra-acc-body { overflow: hidden; }

.infra-acc-desc {
  padding: 0 20px 24px 62px;
  font-size: 14px;
  color: var(--m);
  line-height: 1.8;
  opacity: 0;
  transition: opacity .3s;
}
.infra-acc-item.active .infra-acc-desc { opacity: 1; transition: opacity .4s .15s; }

/* Right column — crossfading image, supporting element (not the dominant visual) */
.infra-img-wrap {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(20,18,16,.14);
}
.infra-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity .6s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1);
}
.infra-img.active { opacity: 1; transform: scale(1.02); }
.infra-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive */
@media (max-width: 900px) {
  .infra-showcase { grid-template-columns: 1fr; gap: 32px; }
  .infra-img-wrap { aspect-ratio: 16/10; }
}
@media (max-width: 768px) {
  /* Prevent this heading's forced single line from pushing the document
     wider than the viewport (was the actual cause of fixed-position
     elements like the nav bar bleeding past the screen edge on mobile). */
  .infra-h2 { white-space: normal; }
}
@media (max-width: 540px) {
  .infra-acc-head { padding: 18px 16px; gap: 14px; }
  .infra-acc-title { font-size: 17px; }
  .infra-acc-desc { padding: 0 16px 20px 16px; }
  .infra-img-wrap { aspect-ratio: 4/3; }
}

/* ─── MOBILE TEAM ─── */
.mob {
  padding: 140px 56px;
  background: var(--w);
}
.mob-inner {
  max-width: 1360px;
  margin: 0 auto;
}
.mob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left — primary image slider */
.mob-left {
  position: relative;
}
.mob-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(20,18,16,.14);
}

/* Slides — crossfade stack, same technique as .infra-img / .cshow-img */
.mob-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .8s var(--ease);
}
.mob-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.mob-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.mob-img-wrap:hover .mob-slide.active img { transform: scale(1.04); }

/* Prev/next arrows — glass buttons on the image edges */
.mob-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: var(--d);
  cursor: pointer;
  opacity: .9;
  transition: opacity .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.mob-slide-arrow:hover { opacity: 1; background: #fff; }
.mob-slide-arrow:active { transform: translateY(-50%) scale(.92); }
.mob-slide-arrow--prev { left: 16px; }
.mob-slide-arrow--next { right: 16px; }

/* Pagination dots — centered below the image */
.mob-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.mob-slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--l);
  cursor: pointer;
  transition: width .35s var(--ease), background .35s var(--ease);
}
.mob-slide-dot:hover { background: rgba(243,73,11,.5); }
.mob-slide-dot.active { width: 26px; background: var(--a); }
.mob-slide-dot.active:hover { background: var(--a); }

/* Right — content */
.mob-h2 {
  font-family: var(--sf);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--d);
  margin: 16px 0 24px;
}
.mob-h2 em { font-style: italic; color: var(--a); }
.mob-desc {
  font-size: 15px;
  color: var(--m);
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 36px;
}

/* Feature list */
.mob-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin-bottom: 44px;
}
.mob-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--d);
  line-height: 1.4;
}
.mob-feature-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(243,73,11,.10);
  color: var(--a);
}

/* Responsive */
@media (max-width: 1100px) {
  .mob { padding: 120px 36px; }
  .mob-grid { gap: 56px; }
}
@media (max-width: 900px) {
  .mob { padding: 96px 36px; }
  .mob-grid { grid-template-columns: 1fr; gap: 48px; }
  .mob-desc { max-width: none; }
}
@media (max-width: 640px) {
  .mob { padding: 72px 24px; }
  .mob-slide-arrow { width: 36px; height: 36px; }
  .mob-slide-arrow--prev { left: 10px; }
  .mob-slide-arrow--next { right: 10px; }
}
@media (max-width: 540px) {
  .mob-features { grid-template-columns: 1fr; }
}

/* ─── MOBILE TEAM LIGHTBOX ─── */
/* Same opacity/pointer-events technique as .fdr-overlay, so open AND close animate. */
.mob-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.mob-lb-overlay.open { opacity: 1; pointer-events: all; }

.mob-lb-stage {
  position: relative;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mob-lb-overlay.open .mob-lb-stage {
  opacity: 1;
  transform: scale(1);
}
.mob-lb-stage img {
  max-width: 86vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
}

.mob-lb-close {
  position: absolute;
  top: 24px; right: 32px;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 28px; cursor: pointer;
  transition: color .2s; line-height: 1;
  z-index: 2;
}
.mob-lb-close:hover { color: #fff; }

.mob-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.mob-lb-arrow:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.mob-lb-arrow--prev { left: 24px; }
.mob-lb-arrow--next { right: 24px; }

@media (max-width: 640px) {
  .mob-lb-arrow { width: 40px; height: 40px; }
  .mob-lb-arrow--prev { left: 10px; }
  .mob-lb-arrow--next { right: 10px; }
  .mob-lb-close { top: 14px; right: 18px; }
}

/* ─── CTA ─── */
/* ─── CTA ─── */
/* ─── CTA ─── */
/* ─── CTA ─── */
/* ─── CTA ─── */
.cta-sec {
  position: relative;
  height: 88vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: -5%;
  transition: transform 8s var(--ease);
}
.cta-bg img { height: 100%; }
.cta-sec:hover .cta-bg { transform: scale(1.03); }
.cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  width: 1040px;
  max-width: 90vw;
  padding: 60px 56px;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
}
.cta-h2 {
  font-family: var(--sf);
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  margin: 16px 0;
  white-space: nowrap;
}
.cta-h2 em { font-style: italic; color: var(--a); }
.cta-sub { font-size: 15px; color: #FFFFFF; margin-bottom: 40px; }

@media (max-width: 768px) {
  .cta-h2 { white-space: normal; }
}

/* ─── FAQ ─── */
.faq { padding: 140px 56px; background: var(--w); }
.faq-wrap { max-width: 900px; margin: 0 auto; }
.faq-hdr { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.faq-h2 {
  font-family: var(--sf);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  margin-bottom: 18px;
}
.faq-h2 .accent { color: var(--a); }
.faq-sub { font-size: 15px; color: var(--m); line-height: 1.85; }

/* Accordion — same container/animation pattern as .infra-acc */
.faq-acc {
  display: flex;
  flex-direction: column;
  background: var(--s);
  border: 1px solid var(--l);
  border-radius: 20px;
  padding: 8px;
}
.faq-acc-item {
  border-radius: 14px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.faq-acc-item + .faq-acc-item { margin-top: 2px; }
.faq-acc-item.active {
  background: var(--w);
  box-shadow: 0 14px 36px rgba(20,18,16,.09);
}

.faq-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: none;
  border: none;
  padding: 24px 26px;
  cursor: pointer;
  text-align: left;
}
.faq-acc-q {
  flex: 1;
  font-family: var(--sf);
  font-size: 19px;
  font-weight: 400;
  color: var(--d);
  transition: color .3s;
}
.faq-acc-item.active .faq-acc-q { color: var(--a); }
.faq-acc-item:not(.active) .faq-acc-head:hover .faq-acc-q { color: var(--a); }

/* Plus → minus: vertical bar rotates 90deg to overlap the horizontal one */
.faq-acc-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; color: var(--m); transition: color .3s; }
.faq-acc-icon::before,
.faq-acc-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.faq-acc-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-acc-icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-acc-item.active .faq-acc-icon { color: var(--a); }
.faq-acc-item.active .faq-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Smooth expand — grid-template-rows 0fr→1fr avoids animating to/from height:auto */
.faq-acc-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq-acc-item.active .faq-acc-collapse { grid-template-rows: 1fr; }
.faq-acc-body { overflow: hidden; }

.faq-acc-desc {
  padding: 0 26px 26px;
  font-size: 14px;
  color: var(--m);
  line-height: 1.8;
  opacity: 0;
  transition: opacity .3s;
}
.faq-acc-item.active .faq-acc-desc { opacity: 1; transition: opacity .4s .15s; }

/* Responsive */
@media (max-width: 900px) {
  .faq { padding: 80px 40px 88px; }
}
@media (max-width: 540px) {
  .faq { padding: 64px 24px 72px; }
  .faq-acc-head { padding: 18px 16px; gap: 14px; }
  .faq-acc-q { font-size: 16px; }
  .faq-acc-desc { padding: 0 16px 20px 16px; }
}

/* ─── CONTACT ─── */
.contact { display: grid; grid-template-columns: 1fr 1fr; }
.con-left { background: var(--d); padding: 120px 72px; color: #fff; }
.con-h2 {
  font-family: var(--sf);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 48px;
}
.con-h2 em { font-style: italic; }
.con-items { display: flex; flex-direction: column; gap: 28px; }
.con-item-label {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 4px;
}
.con-item-val { font-size: 16px; color: rgba(255,255,255,.75); transition: color .2s; }
a.con-item-val:hover { color: #fff; }

.con-right { background: var(--s); padding: 120px 72px; }
.con-fh {
  font-family: var(--sf);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 300;
  margin-bottom: 40px;
}
.con-fh em { font-style: italic; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m);
}
.form-group input,
.form-group textarea,
.form-group select {
  font-family: var(--ss);
  font-size: 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--l);
  padding: 11px 0;
  color: var(--d);
  outline: none;
  transition: border-color .3s;
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--d); }
.form-group textarea { resize: none; height: 80px; }

/* ─── FOOTER ─── */
.footer {
  background: var(--d);
  padding: 72px 56px 40px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-logo {
  font-family: var(--sf);
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: .04em;
}
.footer-tagline { font-size: 13px; color: rgba(255,255,255,.3); line-height: 1.7; }
.footer-col h5 {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13px; color: rgba(255,255,255,.4); cursor: pointer; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.25);
}

/* ─── LIGHTBOX ─── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.lb-close {
  position: absolute;
  top: 24px; right: 32px;
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 28px; cursor: pointer;
  transition: color .2s; line-height: 1;
}
.lb-close:hover { color: #fff; }

/* ─── MODALS ─── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--w);
  max-width: 480px;
  width: 100%;
  padding: 52px;
  position: relative;
  animation: modalIn .35s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.modal-box h3 {
  font-family: var(--sf);
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 6px;
}
.modal-box p { font-size: 13px; color: var(--m); margin-bottom: 28px; }
.modal-close {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none;
  font-size: 19px; color: var(--m); cursor: pointer;
  line-height: 1; transition: color .2s;
}
.modal-close:hover { color: var(--d); }
.modal-close--light { color: rgba(255,255,255,.7); }
.modal-box--wide {
  max-width: 810px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 88vh;
}

/* Cottage modal internals */
/* Fixed height (not aspect-ratio) so widening the modal doesn't make it taller */
.cmod-img { width: 100%; height: 338px; overflow: hidden; }
.cmod-img img { width: 100%; height: 100%; object-fit: cover; }
.cmod-body { padding: 28px 36px 36px; }
.cmod-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--a); margin-bottom: 6px; }
.cmod-title { font-family: var(--sf); font-size: 30px; font-weight: 300; margin-bottom: 20px; }
.cmod-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 24px; }
.cmod-stat { background: var(--s); padding: 14px; text-align: center; }
.cmod-stat-v { font-family: var(--sf); font-size: 26px; font-weight: 300; }
.cmod-stat-l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--m); margin-top: 4px; }
.cmod-stat-l--top { margin-top: 0; margin-bottom: 4px; }

/* Floor plan / gallery tabs — premium tab component */
.cmod-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--s);
  border: 1px solid var(--l);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 16px;
}
.cmod-tab {
  font-family: var(--ss);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--m);
  cursor: pointer;
  transition: background .3s, color .3s;
  white-space: nowrap;
}
.cmod-tab:hover { color: var(--d); }
.cmod-tab.active { background: var(--a); color: #fff; }

.cmod-tab-panel-wrap {
  position: relative;
  width: 100%;
  height: 330px; /* fixed, not aspect-ratio — keeps modal height stable at the new wider width */
  background: var(--s);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,18,16,.10);
  margin-bottom: 24px;
}
.cmod-tab-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.19,1,.22,1);
  pointer-events: none;
}
.cmod-tab-panel.active { opacity: 1; pointer-events: auto; }
.cmod-tab-panel img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .cmod-tabs { padding: 5px; gap: 3px; }
  .cmod-tab { padding: 9px 12px; font-size: 10px; }
}

/* ─── FOUNDER MODAL ─── */

/* Overlay — opacity/pointer-events driven (same technique as .mmenu)
   rather than display:none/flex, so both open AND close animate smoothly. */
.fdr-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8,7,6,.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.fdr-overlay.open { opacity: 1; pointer-events: all; }

/* Dark glassmorphism panel */
.fdr-modal-box {
  position: relative;
  width: 100%;
  max-width: 710px;
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(20, 18, 16, .82);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 32px 80px rgba(0,0,0,.5),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.fdr-overlay.open .fdr-modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Custom scrollbar — matches site accent */
.fdr-modal-box::-webkit-scrollbar { width: 8px; }
.fdr-modal-box::-webkit-scrollbar-track { background: transparent; }
.fdr-modal-box::-webkit-scrollbar-thumb {
  background: rgba(243,73,11,.45);
  border-radius: 999px;
}
.fdr-modal-box::-webkit-scrollbar-thumb:hover { background: rgba(243,73,11,.7); }
.fdr-modal-box { scrollbar-width: thin; scrollbar-color: rgba(243,73,11,.45) transparent; }

.fdr-modal-hero {
  width: 610px;
  height: 390px;
  max-width: 100%;
  margin: 44px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
}
.fdr-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.fdr-modal-body { padding: 40px 48px 48px; text-align: center; }
.fdr-modal-tag {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 14px;
}
.fdr-modal-name {
  font-family: var(--sf);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 300;
  color: #fff;
  margin-bottom: 10px;
}
.fdr-modal-subtitle {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  line-height: 1.8;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Body sections — readable, generously spaced, not one block */
.fdr-modal-sections {
  display: flex;
  flex-direction: column;
  gap: 36px;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
}
.fdr-modal-section-title {
  font-family: var(--sf);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--a);
  margin-bottom: 10px;
}
.fdr-modal-section-text {
  font-size: 15px;
  color: rgba(255,255,255,.62);
  line-height: 1.85;
}
.fdr-modal-section-text + .fdr-modal-section-text { margin-top: 22px; }

@media (max-width: 640px) {
  .fdr-modal-hero { height: 240px; margin-top: 32px; }
  .fdr-modal-body { padding: 24px 24px 36px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

@media (max-width: 1100px) {
  #nav { padding: 0 36px; }
  .hinner, .hfoot { padding-left: 36px; padding-right: 36px; }
  .cshow, .manifesto, .cottages, .values,
  .masterplan, .gallery, .location .loc-overlay,
  .contact .con-left, .contact .con-right,
  .footer { padding-left: 36px; padding-right: 36px; }
  .cots-hdr { padding: 0 36px; }
}

@media (max-width: 900px) {
  .nlinks, .nenq { display: none;   border-radius: 999px;
}
  .nbur { display: flex; }
  .mmenu { display: flex; }

  .cshow-inner { grid-template-columns: 1fr; gap: 48px; }
  .cshow-left { padding-right: 0; }
  /* intro-images removed */

  

  .cots-grid { grid-template-columns: 1fr; }
  .cots-hdr { flex-direction: column; align-items: flex-start; gap: 16px; }

  .vals-hdr { grid-template-columns: 1fr; gap: 24px; }
  .vals-cols { grid-template-columns: 1fr; }

  .masterplan { grid-template-columns: 1fr; }

  .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gal-lg { grid-column: span 2; grid-row: span 1; }
  .gal-item:nth-child(2),
  .gal-item:nth-child(3),
  .gal-item:nth-child(4),
  .gal-item:nth-child(5) { grid-column: span 1; }

  
  .contact { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
  .inv-cta-h2 { font-size: clamp(36px, 7vw, 60px); }
  .inv-cta-sub br { display: none; }


@media (max-width: 640px) {
  #nav { padding: 0 24px; }
  .nlog-img { height: 20px; }
  .hinner { padding: 0 24px 56px; }
  .hfoot { padding: 0 24px 32px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .hscroll { display: none; }

  .cshow, .manifesto, .values, .masterplan,
  .gallery, .cottages, .footer { padding-left: 24px; padding-right: 24px; }
  .cots-hdr { padding: 0 24px; }
  .loc-overlay { padding: 0 24px; }
  .con-left, .con-right { padding: 72px 24px; }

  .form-row { grid-template-columns: 1fr; }
  .modal-box { padding: 32px 24px; }
  /* Below this width the box is already viewport-constrained (not 810px-wide),
     so restore aspect-ratio sizing instead of the fixed desktop height. */
  .cmod-img { height: auto; aspect-ratio: 16/9; }
  .cmod-tab-panel-wrap { height: auto; aspect-ratio: 16/10; }
  .gal-grid { grid-template-columns: 1fr; }
  .gal-lg { grid-column: span 1; }
  
  .footer-inner { grid-template-columns: 1fr; }
  

  .infra-sec { padding-left: 24px; padding-right: 24px; }
  .inv-cta { height: auto; min-height: 70vh; padding: 80px 24px; }
}

/* Header — equal 20px padding, burger fully visible & aligned with logo */
@media (max-width: 768px) {
  #nav { padding: 0 20px; }
  .nbur span { height: 2px; }
}