/* ==========================================================================
   OSOTUA VILLA — Design System
   A private estate inside Maiyan, Laikipia.
   ========================================================================== */

@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=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

:root{
  /* --- Colour --- palette drawn from the Osotua mark: deep highland navy, savanna gold */
  --ivory:      #F6F1E7;
  --ivory-dim:  #EFE8D9;
  --stone:      #fdfcf9;
  --charcoal:   #1D1B17;
  --charcoal-2: #29261F;
  --navy:       #133F5E;
  --gold:       #B4914A;
  --gold-soft:  #D8C393;
  --forest:     #3C4A3A;
  --line:       rgba(29,27,23,0.12);
  --line-light: rgba(246,241,231,0.24);

  /* --- Type --- */
  --f-display: 'Cormorant Garamond', serif;
  --f-sans: 'Bricolage Grotesque', sans-serif;

  --space-xs: clamp(0.5rem, 0.6vw, 0.75rem);
  --space-s:  clamp(1rem, 1.6vw, 1.5rem);
  --space-m:  clamp(2rem, 4vw, 3.5rem);
  --space-l:  clamp(3.5rem, 7vw, 7rem);
  --space-xl: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(.22,.61,.16,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--f-sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
/* Slightly brighter, more vibrant imagery sitewide (per brand brightness pass) —
   applied broadly but gently so contrast and the cinematic mood are preserved. */
.hero-media img, .hero-media video, .chapter-full .bg-layer img, .split-media img,
.space-card img, .page-hero img, .gallery-grid img{
  filter: brightness(1.07) saturate(1.08) contrast(1.01);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection{ background:var(--gold); color:var(--charcoal); }

/* ==========================================================================
   Type scale
   ========================================================================== */

.eyebrow{
  font-family:var(--f-sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--gold);
  display:inline-block;
}

.display-xl{
  font-family:var(--f-display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(2.6rem, 6.2vw, 5.6rem);
  line-height:1.06;
  letter-spacing:-.01em;
}
.display-l{
  font-family:var(--f-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  line-height:1.12;
}
.display-m{
  font-family:var(--f-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem);
  line-height:1.25;
}
.body-l{
  font-family:var(--f-sans);
  font-weight:300;
  font-size:clamp(1.05rem, 1.4vw, 1.28rem);
  line-height:1.65;
  color:var(--charcoal-2);
}
.body-m{
  font-family:var(--f-sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  color:var(--charcoal-2);
}
.caption{
  font-family:var(--f-sans);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--charcoal-2);
  font-weight:400;
}

.on-dark{ color:var(--ivory); }
.on-dark .eyebrow{ color:var(--gold-soft); }
.on-dark .body-l, .on-dark .body-m{ color:rgba(246,241,231,.82); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap{
  max-width:1400px;
  margin:0 auto;
  padding-left:clamp(1.25rem, 5vw, 5rem);
  padding-right:clamp(1.25rem, 5vw, 5rem);
}
.section{ position:relative; padding-top:var(--space-xl); padding-bottom:var(--space-xl); }
.section-tight{ padding-top:var(--space-l); padding-bottom:var(--space-l); }
.bg-ivory{ background:var(--ivory); }
.bg-stone{ background:var(--stone); }
.bg-charcoal{ background:var(--charcoal); }
.bg-navy{ background:var(--navy); }

.divider-mark{
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-m) 0;
  opacity:.75;
}
.divider-mark svg{ width:34px; height:34px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding: 1rem 1.9rem;
  font-family:var(--f-sans);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid currentColor;
  border-radius:2px;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn-gold{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--charcoal);
}
.btn-gold:hover{ background:transparent; color:var(--gold); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  color:var(--ivory);
  border-color:rgba(246,241,231,.5);
}
.btn-ghost:hover{ background:rgba(246,241,231,.12); border-color:var(--ivory); transform:translateY(-2px); }
.btn-line{
  background:transparent;
  color:var(--charcoal);
  border-color:var(--charcoal);
}
.btn-line:hover{ background:var(--charcoal); color:var(--ivory); transform:translateY(-2px); }
.btn-sm{ padding:.75rem 1.3rem; font-size:.72rem; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.35rem clamp(1.25rem, 4vw, 3.25rem);
  transition: transform .55s var(--ease), background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s;
  background: linear-gradient(to bottom, rgba(20,18,15,.42), rgba(20,18,15,0));
}
.site-nav.nav-solid{
  background: rgba(246,241,231,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
  padding-top:.95rem; padding-bottom:.95rem;
}
.site-nav.nav-hidden{ transform:translateY(-115%); }

.nav-logo{ display:flex; align-items:center; gap:.6rem; }
.nav-logo img{ height:40px; width:auto; transition:height .5s var(--ease); }
.nav-solid .nav-logo img{ height:34px; }
.nav-logo-word{
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--ivory);
  letter-spacing:.02em;
  transition:color .5s var(--ease);
}
.nav-solid .nav-logo-word{ color:var(--charcoal); }

.nav-links{
  display:flex; align-items:center; gap:clamp(1.1rem, 2vw, 2.2rem);
}
.nav-links a{
  font-size:.76rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ivory);
  font-weight:500;
  position:relative;
  padding-bottom:3px;
  transition:color .5s var(--ease);
}
.nav-solid .nav-links a{ color:var(--charcoal-2); }
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold);
  transition:width .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.current{ color:var(--gold); }

.nav-cta{
  border:1px solid rgba(246,241,231,.55);
  padding:.62rem 1.15rem;
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ivory);
  transition:.5s var(--ease);
}
.nav-solid .nav-cta{ border-color:var(--charcoal); color:var(--charcoal); }
.nav-cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }

.nav-burger{
  display:none;
  width:26px; height:18px; position:relative;
  background:none; border:none; padding:0;
}
.nav-burger span{
  position:absolute; left:0; width:100%; height:1px; background:var(--ivory);
  transition:.4s var(--ease);
}
.nav-solid .nav-burger span{ background:var(--charcoal); }
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:8px; }
.nav-burger span:nth-child(3){ top:16px; }
.nav-burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:0; z-index:99;
  background:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem;
  transform:translateY(-100%);
  transition:transform .6s var(--ease);
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel a{
  font-family:var(--f-display); font-style:italic;
  font-size:2rem; color:var(--ivory);
}
.mobile-panel .btn{ margin-top:1rem; }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
}

/* Story progress rail (desktop) */
.story-rail{
  position:fixed; left:clamp(.9rem,2vw,2rem); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease);
}
.story-rail.visible{ opacity:1; pointer-events:auto; }
.story-rail button{
  width:8px; height:8px; border-radius:50%;
  background:transparent; border:1px solid rgba(180,145,74,.55);
  padding:0; transition:.35s var(--ease);
}
.story-rail button.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.35); }
@media (max-width: 1150px){ .story-rail{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--charcoal);
}
.hero-media{ position:absolute; inset:0; background:var(--charcoal); }
.hero-media img, .hero-media video{
  width:100%; height:100%; object-fit:cover;
}
.hero-media img{
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero-media video{
  opacity:0;
  transition: opacity 1.2s var(--ease);
}
.hero-media video.ready{ opacity:1; }
.hero-fallback-img{
  position:absolute; inset:0; z-index:1;
  opacity:0; pointer-events:none;
  transition: opacity .6s var(--ease);
}
.hero-fallback-img.show{ opacity:1; }
@keyframes kenburns{
  0%{ transform:scale(1.02) translate(0,0); }
  100%{ transform:scale(1.13) translate(-1.2%,-1.6%); }
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,13,10,.66) 0%, rgba(15,13,10,.20) 42%, rgba(15,13,10,.08) 62%, rgba(15,13,10,.30) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%;
  padding: 0 clamp(1.25rem,5vw,5rem) clamp(3.5rem,9vh,7rem);
  color:var(--ivory);
  text-align:center;
  /* Hidden until the JS reveal timer fires (see main.js) — kept in normal flow
     (opacity/transform only, never display:none) so its box reserves space
     from first paint and nothing shifts when it appears. */
  opacity:0;
  transform:translateY(22px);
  pointer-events:none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-content.hero-revealed{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .hero-content{ transition:none; }
}
.hero-eyebrow{
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:1.4rem; display:block;
}
.hero-title{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(2.4rem, 6.6vw, 5.4rem);
  line-height:1.08;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero-actions{
  margin-top:2.4rem;
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
.hero-scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--ivory); opacity:.75;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.hero-scroll .line{ width:1px; height:34px; background:rgba(246,241,231,.55); overflow:hidden; position:relative; }
.hero-scroll .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--gold);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal{
  opacity:0; transform:translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }

.zoom-media{ overflow:hidden; }
.zoom-media img{ transition: transform 1.4s var(--ease); }
.zoom-media:hover img{ transform:scale(1.06); }

/* ==========================================================================
   Full-bleed chapter (image bg + centered text)
   ========================================================================== */

.chapter-full{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--charcoal);
}
.chapter-full .bg-layer{ position:absolute; inset:0; }
.chapter-full .bg-layer img{
  width:100%; height:110%; object-fit:cover; will-change:transform;
}
.chapter-full .bg-layer::after{
  content:''; position:absolute; inset:0; background:rgba(15,13,10,.36);
}
.chapter-full .chapter-inner{
  position:relative; z-index:2; text-align:center; max-width:840px;
  padding: var(--space-l) clamp(1.25rem,5vw,3rem);
  color:var(--ivory);
}

/* ==========================================================================
   Split chapter (image + text panel)
   ========================================================================== */

.split{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  min-height:88vh;
}
.split.reverse{ grid-template-columns:1fr 1.15fr; }
.split.reverse .split-media{ order:2; }
.split.reverse .split-text{ order:1; }
.split-media{ position:relative; overflow:hidden; min-height:420px; }
.split-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.split-media.media-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, var(--stone), var(--stone) 12px, var(--ivory-dim) 12px, var(--ivory-dim) 24px);
  border:2px dashed var(--line);
}
.split-media.media-placeholder span{
  font-family:var(--f-sans); font-size:.85rem; letter-spacing:.05em;
  color:var(--charcoal-2); background:var(--ivory); padding:.7rem 1.2rem;
  border-radius:2px; border:1px solid var(--line); text-align:center; max-width:80%;
}
.split-text{
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--space-l) clamp(1.5rem,5vw,5rem);
  gap:1.5rem;
}
.split-text .tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem; }
.split-text .tags span{
  font-size:.72rem; letter-spacing:.06em; padding:.45rem .85rem;
  border:1px solid var(--line); border-radius:2px; color:var(--charcoal-2);
}
.stat-row{ display:flex; gap:clamp(1.5rem,4vw,3.5rem); margin-top:.5rem; flex-wrap:wrap; }
.stat-row .stat b{ display:block; font-family:var(--f-display); font-style:italic; font-size:2.1rem; color:var(--navy); }
.stat-row .stat span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-2); }

@media (max-width: 880px){
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split-media{ min-height:52vh; order:1 !important; }
  .split-text{ order:2 !important; padding: var(--space-m) clamp(1.25rem,6vw,2rem); }
}

/* ==========================================================================
   Editorial grid (The Spaces)
   ========================================================================== */

.space-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin-top: var(--space-m);
}
.space-card{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio: 3/4;
}
.space-card.wide{ grid-column: span 2; aspect-ratio: 16/11; }
.space-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.3s var(--ease);
}
.space-card:hover img{ transform:scale(1.07); }
.space-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,13,10,.60) 0%, rgba(15,13,10,0) 45%);
}
.space-card .label{
  position:absolute; left:1.1rem; bottom:1rem; z-index:2;
  color:var(--ivory); font-family:var(--f-display); font-style:italic; font-size:1.25rem;
}
@media (max-width: 900px){
  .space-grid{ grid-template-columns:repeat(2,1fr); }
  .space-card.wide{ grid-column:span 2; }
}

/* ==========================================================================
   Gallery grid
   ========================================================================== */

.gallery-grid{
  columns: 4 320px;
  column-gap: clamp(.6rem,1.4vw,1rem);
}
.gallery-grid figure{
  break-inside:avoid; margin:0 0 clamp(.6rem,1.4vw,1rem); position:relative;
  overflow:hidden; border-radius:2px; cursor:zoom-in;
  background:var(--stone);
}
.gallery-grid img{ width:100%; display:block; transition:transform 1s var(--ease), opacity .6s; }
.gallery-grid figure:hover img{ transform:scale(1.045); }
.gallery-grid figure.hidden{ display:none; }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin: var(--space-s) 0 var(--space-m);
}
.filter-bar button{
  background:none; border:1px solid var(--line); color:var(--charcoal-2);
  padding:.6rem 1.1rem; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px; transition:.35s var(--ease);
}
.filter-bar button.active, .filter-bar button:hover{
  background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal);
}



/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(13,12,10,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:none; color:var(--ivory);
  font-family:var(--f-sans); font-size:1.6rem; opacity:.75; transition:.3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-close{ top:1.6rem; right:1.8rem; font-size:1.4rem; }
.lightbox-prev{ left:1.5rem; top:50%; transform:translateY(-50%); font-size:2.4rem; }
.lightbox-next{ right:1.5rem; top:50%; transform:translateY(-50%); font-size:2.4rem; }
/* ==========================================================================
   Quotes / reviews
   ========================================================================== */

.quote-block{
  max-width:760px; margin:0 auto; text-align:center;
}
.quote-block p{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.4;
}
.quote-block .who{
  margin-top:1.4rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}

.review-card{
  background:var(--ivory); border:1px solid var(--line); border-radius:3px;
  padding:1.8rem; display:flex; flex-direction:column; gap:.9rem;
}
.review-card .stars{ color:var(--gold); letter-spacing:.15em; font-size:.9rem; }
.review-card p{ font-family:var(--f-display); font-style:italic; font-size:1.15rem; line-height:1.5; color:var(--charcoal); }
.review-card .who{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal-2); }
.review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:var(--space-m); }
@media (max-width:800px){ .review-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Forms
   ========================================================================== */

.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-2); }
.field input, .field textarea, .field select{
  font-family:var(--f-sans); font-size:1rem; font-weight:300;
  padding:.85rem 1rem; background:var(--ivory);
  border:1px solid var(--line); border-radius:2px; color:var(--charcoal);
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:var(--charcoal-2); opacity:.8; }
.form-success{
  display:none; padding:1rem 1.2rem; border:1px solid var(--gold); color:var(--forest);
  background:rgba(180,145,74,.08); font-size:.9rem; border-radius:2px;
}
.form-success.show{ display:block; }

/* ==========================================================================
   Contact tiles
   ========================================================================== */

.contact-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:var(--space-m); }
.contact-tiles.contact-tiles-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:800px){ .contact-tiles, .contact-tiles.contact-tiles-4{ grid-template-columns:1fr; } }
.contact-tile{
  border:1px solid var(--line); padding:1.9rem; border-radius:3px;
  display:flex; flex-direction:column; gap:.7rem; transition:.35s var(--ease);
}
.contact-tile:hover{ border-color:var(--gold); transform:translateY(-3px); }
.contact-tile .eyebrow{ margin-bottom:.2rem; }
.contact-tile .value{ font-family:var(--f-display); font-style:italic; font-size:1.35rem; color:var(--navy); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background:var(--charcoal); color:var(--ivory);
  padding: var(--space-l) 0 var(--space-m);
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2.5rem; flex-wrap:wrap;
  padding-bottom:var(--space-m); border-bottom:1px solid var(--line-light);
}
.footer-logo img{ height:52px; margin-bottom:1rem; }
.footer-tag{ font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--gold-soft); max-width:280px; }
.footer-cols{ display:flex; gap:clamp(2rem,6vw,6rem); flex-wrap:wrap; }
.footer-col h4{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem; font-weight:500;
}
.footer-col a, .footer-col p{
  display:block; font-size:.92rem; color:rgba(246,241,231,.78);
  margin-bottom:.6rem; font-weight:300; transition:color .3s;
}
.footer-col a:hover{ color:var(--gold-soft); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:var(--space-s); font-size:.78rem; color:rgba(246,241,231,.5);
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */

.page-hero{
  position:relative; height:62vh; min-height:420px;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--charcoal);
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,13,10,.60), rgba(15,13,10,.10) 60%); }
.page-hero-content{ position:relative; z-index:2; padding: 0 clamp(1.25rem,5vw,5rem) 3.5rem; color:var(--ivory); }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */

.whatsapp-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,.34); }
.whatsapp-float svg{ width:28px; height:28px; }
@media (max-width:600px){
  .whatsapp-float{ right:1rem; bottom:1rem; width:50px; height:50px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}

.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-w{ max-width:680px; }
.mt-l{ margin-top:var(--space-l); }
.mt-m{ margin-top:var(--space-m); }