/* ==========================================================================
   CYRUS ESTATES — Design System
   Zanzibari elegance x modern luxury
   ========================================================================== */

:root{
  /* --- Palette --- */
  --ink:            #171B1D;
  --ink-soft:       #3A4247;
  --ivory:          #FBF7EF;
  --ivory-deep:     #F4EBDA;
  --sand:           #EDE1C8;
  --sand-line:      rgba(23,27,29,0.10);
  --ocean-900:      #0B2233;
  --ocean-800:      #0F2C40;
  --ocean-700:      #163B52;
  --ocean-line:     rgba(255,255,255,0.14);
  --gold:           #C6A15B;
  --gold-light:     #E4CFA0;
  --gold-deep:      #A9813F;
  --terracotta:     #A85D3D;
  --white:          #FFFFFF;

  /* rgb triplets of the palette, for translucent colours: rgba(var(--x-rgb), .5) */
  --ivory-rgb: 251,247,239;
  --ocean-rgb: 11,34,51;
  --ink-rgb: 23,27,29;
  --ink-soft-rgb: 58,66,71;
  --gold-rgb: 198,161,91;
  --gold-light-rgb: 228,207,160;
  --gold-deep-rgb: 169,129,63;
  --glass-rgb: 58,48,41;      /* header glass + hero sheet */
  --land: #EADFC8;            /* map land */
  --water: #6FB3C2;           /* 3D pool water */

  /* --- Type --- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- Rhythm --- */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 2px;

  /* --- Motion --- */
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 104px);
}
body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select, button{ font-family: inherit; font-size: inherit; }
::selection{ background: var(--gold); color: var(--ocean-900); }

/* ------------------------------ Scroll Snap ------------------------------
   Every full "page" section is a mandatory snap point. scroll-snap-stop:always
   is the part that matters: it forces the browser to stop at THIS section on
   its way through, even on a fast trackpad flick or a hard wheel spin — so a
   single gesture can never jump past a section unseen. */
.hero-track, .page-hero, section.section, footer.site-footer{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type: none; }
}

/* --------------------------------- Type ---------------------------------- */
.eyebrow{
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap: 0.75rem; font-weight:500; }
.eyebrow::before{
  content:"";
  width: 28px;
  height: 1px;
  background: var(--gold-deep);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--gold-light); }
.eyebrow.on-dark::before{ background: var(--gold-light); }

h1, .h1{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none);
  font-weight: var(--display-weight, 500);
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2, .h2{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none);
  font-weight: var(--display-weight, 500);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.1;
}
h3, .h3{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none);
  font-weight: var(--display-weight, 500);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.2;
}
.lede{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: var(--lede-style, italic);
}
.body-lg{ font-size: 1.125rem; line-height: 1.75; color: var(--ink-soft); }
p.muted, .muted{ color: var(--ink-soft); }
.on-dark{ color: var(--ivory); }
.on-dark .muted, .on-dark.muted, p.on-dark.muted{ color: rgba(var(--ivory-rgb),0.72); }

.serif-num{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none);
  font-weight: var(--display-weight, 500);
}

/* -------------------------------- Layout --------------------------------- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: clamp(4.5rem, 9vw, 8.5rem); position:relative; }
.section-tight{ padding-block: clamp(3rem, 6vw, 5rem); }
.section.on-ocean{
  background: linear-gradient(175deg, var(--ocean-900), var(--ocean-700));
  color: var(--ivory);
}
.section.on-sand{ background: var(--ivory-deep); }
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal{ opacity:0; transform: translateY(28px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }

/* -------------------------------- Buttons --------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding: 0.95rem 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  position: relative;
  overflow:hidden;
  transition: color .5s var(--ease), border-color .5s var(--ease); font-weight:500; }
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform .55s var(--ease);
}
.btn.btn-primary{ color: var(--ivory); border-color: var(--ink); }
.btn.btn-primary::before{ background: var(--ink); transform:none; }
.btn.btn-primary:hover{ color: var(--ivory); }

.btn.btn-ghost{ color: var(--ink); border-color: var(--ink); }
.btn.btn-ghost::before{ background: var(--ink); }
.btn.btn-ghost:hover{ color: var(--ivory); }

.btn.btn-gold{ color: var(--ocean-900); border-color: var(--gold); background: var(--gold); }
.btn.btn-gold::before{ background: var(--gold-deep); }
.btn.btn-gold:hover{ color: var(--ocean-900); }

.btn.on-dark{ color: var(--ivory); border-color: rgba(var(--ivory-rgb),0.5); }
.btn.on-dark::before{ background: var(--ivory); }
.btn.on-dark:hover{ color: var(--ocean-900); }

.btn:hover::before{ transform: translateX(0); }
.btn-icon{ transition: transform .4s var(--ease); }
.btn:hover .btn-icon{ transform: translateX(4px); }

/* ================================= HEADER =================================
   Three columns: menu button (left) | CYRUS wordmark (centre) | Enquire
   (right). The page list lives in a dropdown (.menu-panel) opened by the
   three-line button at every screen size. Text is always light: the header
   is either transparent over a dark hero, or a low-opacity grey-brown glass. */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-block: 1.4rem;
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header .container{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  /* Unlike page content, the header spans (almost) the full viewport, not
     the 1280px --container width — otherwise on wide screens the menu
     button and Enquire sit near the *content* edge, far from the actual
     screen corner. This padding is what controls their real inset. */
  max-width: none;
  padding-inline: clamp(1rem, 2.6vw, 2.25rem);
}
/* The brown glass lives on a pseudo-element so its strength can be faded
   with one variable (--hdr-bg, 0-1). Normal pages: the .is-scrolled class
   switches it on. Home page: main.js sets --hdr-bg every frame so the
   header blends into the hero's brown sheet instead of stacking on it. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: rgba(var(--glass-rgb),0.62);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 1px 0 rgba(var(--ivory-rgb),0.08);
  opacity: var(--hdr-bg, 0);
  transition: opacity .5s var(--ease);
  pointer-events:none;
}
.site-header.is-scrolled{
  padding-block: 0.7rem;
  --hdr-bg: 1;
}
.site-header.hero-sync::before{ transition: none; }

.brand{ display:block; justify-self:center; line-height:0; }
.brand-wordmark{ height: 26px; width:auto; transition: height .5s var(--ease); }
.site-header.is-scrolled .brand-wordmark{ height: 22px; }

.brand-sub{
  font-size: 0.55rem; letter-spacing: 0.42em; text-transform:uppercase; color: var(--gold-light);
}

.header-actions{ display:flex; align-items:center; justify-self:end; }
.header-actions .btn{ padding: 0.7rem 1.5rem; }

.menu-toggle{
  justify-self:start;
  width:44px; height:44px; margin-left:-9px; position:relative;
  background:none; border:none; z-index:210;
}
.menu-toggle span{
  position:absolute; left:9px; width:26px; height:1.5px; background: var(--ivory);
  transition: transform .4s var(--ease), opacity .3s var(--ease-soft);
}
.menu-toggle span:nth-child(1){ top:15px; }
.menu-toggle span:nth-child(2){ top:21.5px; }
.menu-toggle span:nth-child(3){ top:28px; }
.menu-open .menu-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.menu-panel{
  position:absolute; top:100%; left: var(--gutter);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 0.6rem 0;
  background: rgba(var(--glass-rgb),0.82);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(var(--ivory-rgb),0.1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .35s;
}
.menu-open .menu-panel{
  opacity:1; visibility:visible; transform:none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.menu-panel a{
  display:block; padding: 0.95rem 1.6rem;
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size: 1.5rem; line-height:1.2; color: var(--ivory);
  transition: color .3s var(--ease), background .3s var(--ease), padding-left .3s var(--ease);
}
.menu-panel a + a{ border-top: 1px solid rgba(var(--ivory-rgb),0.08); }
.menu-panel a:hover{ color: var(--gold-light); background: rgba(var(--ivory-rgb),0.05); padding-left: 2rem; }
.menu-panel a.active{ color: var(--gold-light); }

@media (max-width: 600px){
  .brand-wordmark{ height: 20px; }
  .site-header.is-scrolled .brand-wordmark{ height: 18px; }
  .header-actions .btn{ padding: 0.55rem 0.95rem; font-size: 0.66rem; letter-spacing: 0.14em; }
  .menu-panel{ left: 0; width: 100%; border-inline: 0; }
}

/* ================================= FOOTER ================================= */
.site-footer{
  background: var(--ocean-900); color: var(--ivory); position:relative; overflow:hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--ocean-line);
}
.footer-wordmark{ height: 30px; width:auto; display:block; }
.footer-brand .brand-sub{ display:block; margin-top:0.7rem; }
.footer-brand p{ margin-top:1.4rem; max-width: 32ch; color: rgba(var(--ivory-rgb),0.68); font-size:0.92rem; }
.footer-col h4{
  font-size:0.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-light); margin-bottom:1.2rem; font-weight:500; }
.footer-col a, .footer-col li{ display:block; color: rgba(var(--ivory-rgb),0.78); font-size:0.92rem; margin-bottom:0.7rem; }
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem;
  font-size:0.76rem; color: rgba(var(--ivory-rgb),0.45); letter-spacing:0.04em; flex-wrap:wrap; gap:0.6rem;
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap:2.2rem; }
}

/* ================================= HERO ================================= */
.hero{
  position:relative; height:100svh; min-height:560px; display:flex; align-items:flex-end;
  color: var(--ivory); overflow:hidden; background: var(--ocean-900);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(var(--ocean-rgb),.35) 0%, rgba(var(--ocean-rgb),.25) 40%, rgba(var(--ocean-rgb),.88) 100%);
}
.hero-content{ position:relative; z-index:2; width:100%; padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero-content .eyebrow{ margin-bottom:1.6rem; }
.hero-content .lede{ color: rgba(var(--ivory-rgb),0.86); max-width: 46ch; margin-top:1.6rem; font-size: clamp(1.05rem,1.5vw,1.3rem); }
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-top: 3rem; flex-wrap:wrap;
}
.scroll-cue{ display:flex; align-items:center; gap:0.8rem; font-size:0.72rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(var(--ivory-rgb),0.7); font-weight:500; }
.scroll-cue i{ width:1px; height:34px; background: rgba(var(--ivory-rgb),0.4); position:relative; overflow:hidden; display:block; }
.scroll-cue i::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold-light); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---- Hero scroll-through reveal ----
   .hero-track is the tall runway; .hero pins to the viewport via
   position:sticky while the track scrolls underneath it. JS
   (initHeroReveal in main.js) reads scroll progress through the track and
   paints .hero-cutout: a viewport-sized canvas holding a translucent sand
   sheet (colour + opacity taken from "parsa logo edit.png") with the CYRUS
   logo punched out of it (assets/img/cyrus-logo-cutout.png). Inside the
   logo the video plays fully clear; everywhere else it shows through the
   sheet, dimmed. The logo grows/rotates as you scroll, so more of the
   screen becomes clear video framed by the sheet. Canvas rather than a
   scaled image so the sheet always reaches every screen edge, at any size,
   with no rectangle edge visible. .hero-content crossfades in as the sheet
   fades out. */
.hero-track{
  position: relative;
  height: 240vh;
}
.hero-track .hero{ position: sticky; top: 0; }

.hero-cutout{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%;
  pointer-events:none;
}

/* Headline: one small line across the page, on screen from load. It sits
   under the sheet (z 2 < canvas z 4) so the reveal passes over it. */
.hero-tagline{
  position:absolute; left:0; right:0; top:50%; z-index:2;
  transform: translateY(-50%);
  margin:0; padding-inline: var(--gutter);
  text-align:center; white-space:nowrap;
  font-size: clamp(0.9rem, 2.4vw, 1.75rem);
  font-weight: 500; letter-spacing: 0.06em; line-height:1.3;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  pointer-events:none;
  will-change: opacity, transform, filter;
}

/* Same centred slot as .hero-tagline — as the tagline fades out at the end
   of the scroll reveal, this fades in in its place (see initHeroReveal in
   main.js), so the sentence changes rather than just vanishing. */
.hero-lede-mid{
  position:absolute; left:0; right:0; top:50%; z-index:2;
  transform: translateY(-50%);
  margin:0 auto; padding-inline: var(--gutter);
  max-width: 640px;
  text-align:center;
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-style: var(--lede-style, italic);
  font-size: clamp(1rem, 2vw, 1.35rem); line-height:1.5;
  color: rgba(var(--ivory-rgb),0.92);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  pointer-events:none;
  will-change: opacity, transform;
}

.hero-content.js-hero{ will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce){
  .hero-track{ height:100svh; }
  .hero-cutout{ display:none; }
}

.page-hero{
  position:relative; padding-top: clamp(9rem, 16vw, 12rem); padding-bottom: clamp(4rem, 8vw, 6rem);
  background: linear-gradient(175deg, var(--ocean-900), var(--ocean-700));
  color: var(--ivory); overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero-media{ position:absolute; inset:0; opacity:.28; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(175deg, rgba(var(--ocean-rgb),.55), rgba(var(--ocean-rgb),.92)); }
.page-hero h1{ max-width: 20ch; margin-top:1.2rem; }
.page-hero .lede{ color: rgba(var(--ivory-rgb),0.82); max-width:56ch; margin-top:1.4rem; }

/* ============================ PROCESS TIMELINE ============================
   Central vertical line, cards alternating left/right (client reference: a
   history-style timeline). .pt-fill grows with scroll progress through the
   component and each node/badge turns gold once passed — the information
   sits inside the timeline itself rather than beside a separate meter.
   Driven by initProcessTimeline in main.js; no other motion (no fade/slide)
   so it stays consistent with this page's otherwise plain scrolling. */
.process-timeline{ position:relative; margin-top: 4.5rem; }
.pt-line{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background: var(--sand-line); transform: translateX(-50%);
}
.pt-fill{ position:absolute; left:0; top:0; width:100%; height:0; background: var(--gold); }
.pt-step{ position:relative; display:flex; align-items:center; padding-block: 2.2rem; }
.pt-node{
  position:absolute; left:50%; top:50%; width:13px; height:13px;
  transform:translate(-50%,-50%); border-radius:50%;
  background: var(--ivory); border:1.5px solid var(--sand-line); z-index:2;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pt-step.is-passed .pt-node{ background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(var(--gold-rgb),0.18); }
.pt-step.pt-left{ justify-content:flex-start; }
.pt-step.pt-right{ justify-content:flex-end; }
.pt-card{
  display:block; width: calc(50% - 3rem); background: var(--ivory);
  border:1px solid var(--sand-line); padding: 1.8rem 2rem; text-align:left;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.pt-card:hover{ background: var(--ivory-deep); border-color: var(--gold); }
.pt-badge{
  display:inline-block; padding: 0.32rem 0.85rem; border-radius:999px;
  background: var(--gold); color: var(--ocean-900);
  font-size:0.68rem; font-weight:600; letter-spacing:0.1em;
  transition: background .4s var(--ease);
}
.pt-step.is-passed .pt-badge{ background: var(--gold-deep); }
.pt-card h4{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.2rem; margin-top:1rem; }
.pt-card p{ font-size:0.92rem; color: var(--ink-soft); margin-top:0.5rem; }
@media (max-width: 760px){
  .pt-line{ left:6px; }
  .pt-step{ justify-content:flex-start !important; padding-left:2.2rem; }
  .pt-node{ left:6px; }
  .pt-card{ width:100%; }
}

/* ============================ SERVICE CARDS ============================ */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sand-line); margin-top:3.5rem; border:1px solid var(--sand-line); }
.service-card{
  background: var(--ivory); padding: 2.6rem 2.2rem; position:relative; overflow:hidden;
  transition: background .5s var(--ease);
}
.service-card .num{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:0.9rem; color: var(--gold-deep); }
.service-card h3{ margin-top:1.4rem; }
.service-card p{ margin-top:0.9rem; color: var(--ink-soft); font-size:0.95rem; }
.service-card .card-link{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.6rem; font-size:0.75rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.service-card::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background: var(--gold);
  transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease);
}
.service-card:hover::before{ transform:scaleX(1); }
.service-card:hover{ background: var(--ivory-deep); }
@media (max-width: 900px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

/* ============================ SPLIT / ZIGZAG =========================== */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius); }
.split-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.split-media:hover img{ transform: scale(1.05); }
.split-media .frame{
  position:absolute; inset:14px; border:1px solid rgba(var(--ivory-rgb),0.55); pointer-events:none;
}
.split-text .num-tag{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1rem; color: var(--gold-deep); }
.split-text h2, .split-text h3{ margin-top:1rem; }
.split-text p{ margin-top:1.2rem; }
@media (max-width: 860px){
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order:0; }
}

/* ============================ STATS BAR ============================ */
.stats-bar{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--ocean-line); margin-top: 3.5rem; border:1px solid var(--ocean-line); }
.stat{ padding: 2.4rem 1.6rem; text-align:center; }
.stat .num{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--gold-light); }
.stat .label{ margin-top:0.6rem; font-size:0.76rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(var(--ivory-rgb),0.72); font-weight:500; }
@media (max-width: 860px){ .stats-bar{ grid-template-columns: 1fr 1fr; } }
/* Stat count-up effect (see initStatCounters in main.js) */
.stat{ position:relative; }
.stat .num{ font-variant-numeric: tabular-nums; }
.stat::after{
  content:""; position:absolute; left:50%; bottom:1.4rem; width:42px; height:1px;
  background: var(--gold-light); transform: translateX(-50%) scaleX(0); transform-origin:center;
  transition: transform 1.1s var(--ease) .5s;
}
.stats-bar .stat.will-count{ opacity:0; transform: translateY(22px); }
.stat.will-count .num{ filter: blur(6px); }
.stats-bar .stat.is-counted{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform 1s var(--ease); }
.stat.is-counted .num{ filter: blur(0); transition: filter 1.2s var(--ease); }
.stat.is-counted::after{ transform: translateX(-50%) scaleX(1); }
.stat.is-counted .num{ animation: statGlow 2.6s var(--ease) 1.6s 1 both; }
@keyframes statGlow{
  0%{ text-shadow: 0 0 0 rgba(var(--gold-light-rgb),0); }
  35%{ text-shadow: 0 0 24px rgba(var(--gold-light-rgb),.55); }
  100%{ text-shadow: 0 0 0 rgba(var(--gold-light-rgb),0); }
}

/* Click-to-expand accordions (not hover — hover doesn't exist on touch, and
   these now hold full paragraphs, not one-line teasers). Each card is
   self-contained so it grows in place within the grid; JS (main.js,
   initFeatureAccordions) sets the panel's max-height to its real scrollHeight
   on open/close so the transition is accurate rather than a guessed cap. */
.feature-hovers{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:3.5rem; align-items:start; }
.feature-hover{
  position:relative; border:1px solid var(--ocean-line); overflow:hidden;
  transition: background .4s var(--ease);
}
.feature-hover::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease);
}
.feature-hover.is-open::before{ transform:scaleX(1); }

.feature-hover-btn{
  width:100%; display:flex; align-items:center; gap:1.1rem; text-align:left;
  padding: 1.9rem 1.7rem; background:none; border:none; cursor:pointer;
}
.feature-hover-btn .icon{ width:30px; height:30px; flex-shrink:0; opacity:.9; }
.feature-hover-btn h3{ flex:1; font-size:1.15rem; }
.feature-hover-plus{ position:relative; width:16px; height:16px; flex-shrink:0; }
.feature-hover-plus::before, .feature-hover-plus::after{
  content:""; position:absolute; background: var(--gold-light); transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.feature-hover-plus::before{ left:0; top:50%; width:100%; height:1.5px; transform: translateY(-50%); }
.feature-hover-plus::after{ top:0; left:50%; width:1.5px; height:100%; transform: translateX(-50%); }
.feature-hover.is-open .feature-hover-plus::after{ opacity:0; transform: translateX(-50%) rotate(90deg); }

.feature-hover-panel{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.feature-hover-panel p{
  margin:0; padding: 0 1.7rem 1.9rem;
  color: rgba(var(--ivory-rgb),0.72); font-size:0.94rem; line-height:1.75;
}
@media (max-width: 860px){
  .feature-hovers{ grid-template-columns: 1fr; }
}

/* ============================ DOWNLOADS ============================ */
.downloads-list{
  display:flex; flex-direction:column; gap:1px; background: var(--sand-line);
  border:1px solid var(--sand-line); max-width:640px; margin: 3rem auto 0;
}
.download-card{
  display:flex; align-items:center; gap:1.3rem; padding:1.5rem 1.8rem;
  background: var(--ivory); text-align:left; transition: background .4s var(--ease);
}
.download-card:hover{ background: var(--ivory-deep); }
.download-icon{ width:30px; height:30px; flex-shrink:0; color: var(--gold-deep); }
.download-card-text{ flex:1; }
.download-title{ display:block; font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.05rem; color: var(--ink); }
.download-desc{ display:block; margin-top:0.2rem; font-size:0.84rem; color: var(--ink-soft); }
.download-meta{ font-size:0.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); white-space:nowrap; font-weight:500; }

/* ============================ PACKAGE CARDS ============================ */
.pkg-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top:3.5rem; }
.pkg{ border:1px solid var(--sand-line); padding: 2.6rem; background: var(--ivory); position:relative; }
.pkg.featured{ background: var(--ocean-900); color: var(--ivory); border-color: var(--ocean-900); }
.pkg .tag{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.pkg.featured .tag{ color: var(--gold-light); }
.pkg h3{ margin-top:1rem; }
.pkg ul{ margin-top:1.6rem; display:flex; flex-direction:column; gap:0.9rem; }
.pkg li{ display:flex; gap:0.7rem; font-size:0.95rem; align-items:flex-start; }
.pkg li::before{ content:"—"; color: var(--gold-deep); flex-shrink:0; }
@media (max-width: 760px){ .pkg-grid{ grid-template-columns: 1fr; } }

/* ============================ MARKETPLACE TEASER ============================ */
.marketplace-block{
  border:1px dashed var(--gold-deep); padding: clamp(2.4rem, 5vw, 4rem); text-align:center; margin-top:3.5rem;
  background: var(--ivory-deep);
}
.marketplace-block .badge{
  display:inline-block; padding:0.4rem 1rem; font-size:.6875rem; letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid var(--gold-deep); color: var(--gold-deep); margin-bottom:1.4rem; font-weight:500; }
.marketplace-block p{ max-width:60ch; margin: 1rem auto 0; color: var(--ink-soft); }

/* ============================ ABOUT PILLARS ============================ */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:2.4rem; margin-top:3.5rem; }
.pillar{ text-align:left; }
.pillar .idx{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:2.4rem; color: var(--gold-deep); line-height:1; }
.pillar h3{ margin-top:1rem; }
.pillar p{ margin-top:0.8rem; color: var(--ink-soft); }
@media (max-width: 820px){ .pillars{ grid-template-columns: 1fr; } }

.quote-block{
  border-left: 2px solid var(--gold); padding-left: clamp(1.4rem, 3vw, 2.6rem); margin-top: 3rem;
}
.quote-block p{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-style: var(--lede-style, italic); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height:1.5; color: var(--ink); }
.quote-block cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:0.78rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }

/* ============================ CONTACT ============================ */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 5rem); align-items:start; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.4rem; }
.field{ margin-bottom: 1.6rem; }
.field label{ display:block; font-size:0.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:0.7rem; font-weight:500; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom: 1px solid var(--sand-line);
  padding: 0.7rem 0.1rem; color: var(--ink); font-size:1rem; transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold-deep); }
.field textarea{ resize:vertical; min-height:110px; }
@media (max-width: 620px){ .form-row{ grid-template-columns:1fr; } }

.office-card{ border:1px solid var(--sand-line); padding: 2rem; margin-bottom:1.4rem; background: var(--ivory-deep); }
.office-card h4{ font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--gold-deep); margin-bottom:1rem; font-weight:500; }
.office-card p{ color: var(--ink-soft); font-size:0.95rem; line-height:1.7; }
.contact-links a{ display:flex; align-items:center; justify-content:space-between; padding: 1.1rem 0; border-bottom:1px solid var(--sand-line); font-size:1rem; }
.contact-links a:hover{ color: var(--gold-deep); }

@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ============================ MISC ============================ */
.divider{ height:1px; background: var(--sand-line); margin-block: clamp(2rem,5vw,4rem); }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.max-w-prose{ max-width: 62ch; }
.stagger > *{ opacity:0; transform: translateY(20px); }
.stagger.is-visible > *{ opacity:1; transform:none; transition: opacity .8s var(--ease), transform .9s var(--ease); }

/* ============================ SERVICES: PHOTO HEADER ============================
   A clear photograph used as an actual backdrop: shown at full strength with a
   light scrim (dark at the top so the header reads, dark at the bottom so the
   headline reads, open in between so the picture stays clear). */
.page-hero--photo{
  min-height: clamp(540px, 82vh, 800px);
  display:flex; align-items:flex-end;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-hero--photo .container{ width:100%; }
.page-hero--photo .page-hero-media{ opacity:1; }
.page-hero--photo h1, .page-hero--photo .lede{ text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
.page-hero--photo .lede{ color: rgba(var(--ivory-rgb),0.92); }
.page-hero--photo::after{
  background: linear-gradient(180deg, rgba(var(--ocean-rgb),.62) 0%, rgba(var(--ocean-rgb),.10) 30%, rgba(var(--ocean-rgb),.16) 52%, rgba(var(--ocean-rgb),.78) 100%);
}

/* ============================ PLAIN SCROLL ============================
   Pages marked <html class="plain-scroll"> use ordinary smooth scrolling:
   no section snapping and no scroll-triggered reveals. */
html.plain-scroll{ scroll-snap-type: none; }
/* (reveals are handled the same way on every page by polish.js) */

/* ============================ LAND LISTINGS ============================
   Repeatable cards for available plots. See land-for-sale.html for the
   copy-paste template comment showing exactly how to add a new listing. */
.land-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--sand-line);
  border:1px solid var(--sand-line); margin-top:3.5rem;
}
.land-card{ background: var(--ivory); display:flex; flex-direction:column; }
.land-card-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.land-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.land-card:hover .land-card-media img{ transform: scale(1.05); }
.land-badge{
  position:absolute; top:1rem; left:1rem; padding:0.35rem 0.9rem;
  background: rgba(var(--glass-rgb),0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gold-light); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; }
.land-card-body{ padding: 2rem 2.2rem 2.4rem; flex:1; display:flex; flex-direction:column; }
.land-card-body h3{ font-size:1.3rem; }
.land-card-loc{ display:block; margin-top:0.3rem; font-size:0.82rem; color: var(--ink-soft); }
.land-facts{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--sand-line); }
.land-fact-label{ display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.land-fact-value{ display:block; margin-top:0.28rem; font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.05rem; color: var(--ink); }
.land-card-body p.land-desc{ margin-top:1.2rem; color: var(--ink-soft); font-size:0.94rem; flex:1; }
.land-card-body .btn{ margin-top:1.6rem; align-self:flex-start; }
@media (max-width: 1100px){ .land-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px){ .land-grid{ grid-template-columns: 1fr; } }
.land-card[hidden]{ display:none; }

/* Plan diagram (stands in for photos until drone shots arrive) */
.land-card-media--plan{
  background: var(--ivory-deep);
  background-image: linear-gradient(rgba(var(--gold-deep-rgb),.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--gold-deep-rgb),.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.plot-svg{ position:absolute; inset:0; width:100%; height:100%; font-family: var(--font-sans); }
.plot-shape{ fill: rgba(var(--gold-rgb),.16); stroke: var(--gold-deep); stroke-width:1.6; stroke-linejoin:round; }
.plot-pt{ fill: var(--ivory); stroke: var(--gold-deep); stroke-width:1.4; }
.plot-len{ paint-order: stroke; stroke: var(--ivory-deep); stroke-width:4px; stroke-linejoin:round; font-size:11px; letter-spacing:.04em; fill: var(--ink-soft); }
.plot-area{ paint-order: stroke; stroke: color-mix(in srgb, var(--ivory-deep) 90%, transparent); stroke-width:5px; stroke-linejoin:round; font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:18px; font-weight: var(--display-weight, 500); fill: var(--ink); }
.plot-north path{ fill: var(--gold-deep); }
.plot-north text{ font-size:9px; letter-spacing:.1em; fill: var(--gold-deep); }
.land-photo-note{
  position:absolute; left:1rem; top:.9rem; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.land-fact-value small{ display:block; margin-top:.15rem; font-family: var(--font-sans); font-size:.72rem; color: var(--ink-soft); }
.land-fact--price{ flex-basis:100%; }

/* Area filter */
.land-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.6rem; }
.land-chip{
  border:1px solid var(--sand-line); background: transparent; color: var(--ink);
  padding:.55rem 1.1rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); font-weight:500; }
.land-chip span{ color: var(--gold-deep); margin-left:.3rem; }
.land-chip:hover{ border-color: var(--gold); }
.land-chip.is-on{ background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.land-chip.is-on span{ color: var(--gold-light); }
.land-filter + .land-grid{ margin-top:1.6rem; }

/* ======================= SERVICES: 3D SCROLL STORY =======================
   Two columns at every screen size: sticky 3D canvas (left) + scrolling
   service text (right). services-3d.js reads how far each .svc-step has
   travelled past the middle of the screen and animates the villa to match. */
.svc-story{ background: var(--ivory); position:relative; }
.svc-grid{
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  max-width: 1440px; margin-inline:auto;
}
.svc-visual{ position:relative; }
.svc-stage{
  position: sticky; top: var(--header-h, 80px);
  height: calc(100svh - var(--header-h, 80px));
}
#svcCanvas{ display:block; width:100%; height:100%; }

.svc-progress{
  position:absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1rem, 4vh, 2.4rem);
  display:flex; gap: clamp(.4rem, 1.4vw, 1.4rem); list-style:none; margin:0; padding:0;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(var(--ink-rgb),.38); font-weight:500; }
.svc-progress li{ display:flex; flex-direction:column; gap:.35rem; flex:1; min-width:0; transition: color .5s var(--ease); }
.svc-progress li::before{
  content:""; height:2px; background: rgba(var(--ink-rgb),.12);
  background-image: linear-gradient(var(--gold), var(--gold)); background-repeat:no-repeat;
  background-size: var(--fill, 0%) 100%;
}
.svc-progress b{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-weight: var(--display-weight, 500); font-size:.95rem; letter-spacing:.05em; }
.svc-progress li.is-active, .svc-progress li.is-done{ color: var(--gold-deep); }

.svc-text{ padding-inline: clamp(1rem, 4vw, 4.5rem) var(--gutter); padding-bottom: 50svh; }
.svc-step{
  min-height: 100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block: 18vh; transition: opacity .6s var(--ease);
}
.svc-story.is-3d .svc-step{ opacity:.28; }
.svc-story.is-3d .svc-step.is-active{ opacity:1; }
/* Service cards — one per step, same type scale throughout */
.svc-card{
  width:100%; max-width: 600px;
  background: #fff; border: 1px solid var(--sand-line); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.8rem);
  box-shadow: 0 24px 60px -32px rgba(var(--glass-rgb),.28);
}
.svc-head{ display:flex; align-items:center; gap:.9rem; }
.svc-num{
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.05rem; font-weight: var(--display-weight, 500); color: var(--gold-deep);
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  border:1px solid var(--gold); border-radius:50%;
}
.svc-kicker{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.svc-card h2{ margin-top:1.1rem; font-size: clamp(2.3rem, 3.4vw, 3.3rem); line-height:1.05; }
.svc-card h3{ font-size: clamp(1.35rem, 1.7vw, 1.6rem); line-height:1.2; margin-top:.35rem; }
.svc-card p{ margin-top:1rem; font-size:1rem; line-height:1.75; color: var(--ink-soft); }
.svc-card p.svc-lead{ margin-top:1.2rem; font-size:1.08rem; color: var(--ink); }
.svc-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.55rem; font-size:1rem; line-height:1.5; color: var(--ink-soft); }
.svc-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.svc-list li::before{ content:"—"; color: var(--gold-deep); flex-shrink:0; }
.svc-list--grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:.6rem 1.4rem;
  padding:1.1rem 0; border-block:1px solid var(--sand-line);
}
.svc-sub{ margin-top:1.5rem; padding-top:1.4rem; border-top:1px solid var(--sand-line); }
.svc-sub p{ margin-top:.7rem; }
.svc-sub-tag{ display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.svc-pkgs{ margin-top:1.5rem; display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.svc-pkg{ padding:1.4rem; background: var(--ivory); border:1px solid var(--sand-line); }
.svc-pkg .svc-list{ font-size:.92rem; }
.svc-pkg--featured{ background: var(--ocean-900); border-color: var(--ocean-900); color: var(--ivory); }
.svc-pkg--featured .svc-sub-tag{ color: var(--gold-light); }
.svc-pkg--featured .svc-list{ color: rgba(var(--ivory-rgb),.82); }
.svc-pkg--featured .svc-list li::before{ color: var(--gold-light); }
.svc-badge{
  margin-left:auto; padding:.35rem .8rem; border:1px solid var(--gold);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
@media (max-width: 1100px){
  .svc-pkgs{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .svc-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .svc-stage{ top: var(--header-h, 64px); height: calc(100svh - var(--header-h, 64px)); }
  .svc-text{ padding-inline: .4rem .8rem; }
  .svc-step{ padding-block: 12vh; }
  .svc-card{ padding: 1.1rem .95rem; box-shadow: 0 14px 30px -20px rgba(var(--glass-rgb),.3); }
  .svc-num{ width:2rem; height:2rem; font-size:.85rem; }
  .svc-kicker{ display:none; }
  .svc-badge{ font-size:.5rem; padding:.25rem .45rem; letter-spacing:.16em; }
  .svc-card h2{ font-size: 1.6rem; margin-top:.8rem; }
  .svc-card h3{ font-size: 1.1rem; }
  .svc-card p, .svc-card p.svc-lead, .svc-list, .svc-pkg .svc-list{ font-size:.82rem; line-height:1.55; }
  .svc-list--grid{ grid-template-columns: 1fr; }
  .svc-sub{ margin-top:1rem; padding-top:1rem; }
  .svc-pkg{ padding:.9rem; }
  .svc-sub-tag{ display:block; font-size:.56rem; letter-spacing:.14em; line-height:1.4; }
  .svc-progress{ left:.6rem; right:.4rem; gap:.3rem; }
  .svc-progress span{ display:none; }
  .svc-progress b{ font-size:.75rem; }
}


/* ========================= LAND FOR SALE: MAP HERO =========================
   Full-height map of Unguja. --z (0 = whole island, 1 = zoomed into an area)
   is set by land-map.js every frame. */
.map-hero{
  position:relative; height: max(100svh, 640px); overflow:hidden;
  background: var(--ocean-900); color: var(--ivory);
}
.map-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* soft dark wash on the left so the copy always reads, whatever is behind it */
.map-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(var(--ocean-rgb),.94) 0%, rgba(var(--ocean-rgb),.88) 30%, rgba(var(--ocean-rgb),.35) 38%, rgba(var(--ocean-rgb),0) 43%);
  opacity: calc(.35 + var(--z, 0) * .65);
}
.map-svg text{ font-family: var(--font-sans); }
.m-island{ fill: var(--land); stroke: rgba(255,255,255,.55); stroke-width:1; vector-effect: non-scaling-stroke; }
.m-island-glow{ fill:none; stroke: rgba(var(--gold-light-rgb),.18); stroke-width:10; vector-effect: non-scaling-stroke; }
.m-ward{ fill:none; stroke: rgba(var(--ink-rgb),.16); stroke-width:1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.m-area{
  fill: rgba(var(--gold-rgb),.55); stroke: var(--gold-deep); stroke-width:1.5; vector-effect: non-scaling-stroke;
  cursor:pointer; transition: fill .3s var(--ease);
  fill-opacity: calc(1 - var(--z, 0) * .7);
}
.m-area:hover, .m-area:focus{ fill: rgba(var(--gold-rgb),.8); outline:none; }
.map-hero.is-zoomed .m-area{ cursor:default; fill: rgba(var(--gold-rgb),.18); }
.m-town circle{ fill: var(--ink-soft); }
.m-town text{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; fill: var(--ink-soft);
  paint-order: stroke; stroke:var(--land); stroke-width:3px; stroke-linejoin:round; font-weight:500; }
.m-area-label{ cursor:pointer; }
.m-towns, .m-villages, .m-wards, .m-island-glow{ pointer-events:none; }
.m-area-pill{ fill: rgba(var(--ocean-rgb),.82); stroke: rgba(var(--gold-light-rgb),.5); stroke-width:1; }
.m-area-label:hover .m-area-pill{ fill: rgba(var(--ocean-rgb),.95); stroke: var(--gold-light); }
.m-area-label:focus{ outline:none; }
.m-dot{ fill: var(--gold); stroke: var(--ivory); stroke-width:2; }
.m-pulse{ fill: none; stroke: var(--gold-light); stroke-width:2; transform-origin: 0 0; animation: mapPulse 2.2s ease-out infinite; }
@keyframes mapPulse{ 0%{ transform: scale(.6); opacity:.9; } 100%{ transform: scale(3.2); opacity:0; } }
.m-area-name{ font-family: var(--font-display) !important; font-size-adjust: var(--display-adjust, none); font-size:24px; font-weight: var(--display-weight, 500); fill: var(--ivory); }
.m-area-count{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; fill: var(--gold-light); font-weight:500; }

.m-village text{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; fill: rgba(var(--ink-soft-rgb),.6);
  paint-order: stroke; stroke:var(--land); stroke-width:3px; stroke-linejoin:round; font-weight:500; }
.m-village.is-core text{ font-size:12.5px; font-weight:600; fill: var(--ink); }
.m-pin{ cursor:pointer; }
.m-pin:focus{ outline:none; }
.m-pin-body{ fill: var(--ocean-900); stroke: var(--gold-light); stroke-width:1.5; transition: fill .25s var(--ease); }
.m-pin-letter{ font-size:11px; font-weight:600; fill: var(--gold-light); pointer-events:none; }
.m-pin-shadow{ fill: rgba(0,0,0,.25); }
.m-pin:hover .m-pin-body, .m-pin:focus .m-pin-body, .m-pin.is-active .m-pin-body{ fill: var(--gold-deep); }
.m-pin:hover .m-pin-letter, .m-pin.is-active .m-pin-letter{ fill: var(--ivory); }

/* copy panel (left on desktop) */
.map-copy{ position:relative; z-index:2; height:100%; display:flex; align-items:center; pointer-events:none; }
.map-panel{ max-width: 430px; pointer-events:auto; padding-top: var(--header-h, 80px); }
.map-panel h1{ font-size: clamp(2.2rem, 3.8vw, 3.6rem); margin-top:1.2rem; }
.map-panel h2{ margin-top:1rem; }
.map-panel .lede{ color: rgba(var(--ivory-rgb),.8); margin-top:1.2rem; }
.map-hint{ margin-top:1.4rem; font-size:.85rem; line-height:1.6; color: rgba(var(--ivory-rgb),.65); }
.map-area-btns{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.map-area-btn{
  display:inline-flex; align-items:center; gap:.7rem; padding:.8rem 1.2rem;
  border:1px solid rgba(var(--gold-light-rgb),.55); background: rgba(var(--ocean-rgb),.35); color: var(--ivory);
  font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.25rem; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.map-area-btn span{ font-family: var(--font-sans); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-light); font-weight:500; }
.map-area-btn b{ font-weight:400; color: var(--gold-light); }
.map-area-btn:hover{ background: rgba(var(--gold-rgb),.22); border-color: var(--gold-light); }
.map-back{
  background:none; border:0; padding:0; margin-bottom:1.6rem; color: var(--gold-light);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; }
.map-back:hover{ color: var(--ivory); }
.map-villages{ margin-top:1.4rem; border-top:1px solid var(--ocean-line); }
.map-villages li{ display:flex; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid var(--ocean-line); }
.map-villages span{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.2rem; }
.map-villages b{ font-weight:400; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-light); align-self:center; }
.map-panel .btn{ margin-top:1.6rem; }
.map-panel[hidden]{ display:none; }

/* pin popup */
.map-popup{
  position:absolute; z-index:5; width: 250px; transform: translate(-50%, -100%);
  background: var(--ivory); color: var(--ink); padding:1.1rem 1.2rem 1rem;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); border-top:3px solid var(--gold);
}
.map-popup::after{ content:""; position:absolute; left:50%; bottom:-8px; margin-left:-8px; border:8px solid transparent; border-bottom:0; border-top-color: var(--ivory); }
.map-popup[hidden]{ display:none; }
.map-popup-x{ position:absolute; top:.35rem; right:.5rem; background:none; border:0; font-size:1.3rem; line-height:1; color: var(--ink-soft); }
.map-popup-loc{ display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.map-popup strong{ display:block; margin-top:.25rem; font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); font-size:1.45rem; font-weight: var(--display-weight, 500); }
.map-popup dl{ margin:.7rem 0 0; display:grid; gap:.45rem; }
.map-popup dt{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); font-weight:500; }
.map-popup dd{ margin:0; font-size:.9rem; }
.map-popup-link{ display:inline-block; margin-top:.85rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--gold); padding-bottom:.15rem; font-weight:500; }
.map-popup-note{ margin-top:.6rem; font-size:.7rem; color: var(--ink-soft); }

/* scale + attribution */
.map-foot{
  position:absolute; z-index:3; left:0; right:0; bottom:.8rem; padding-inline: var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; pointer-events:none;
}
.map-scale{ display:flex; flex-direction:column; gap:.3rem; font-size:.62rem; letter-spacing:.14em; color: rgba(var(--ivory-rgb),.7); }
.map-scale i{ display:block; height:5px; border:1px solid rgba(var(--ivory-rgb),.7); border-top:0; transition: width .2s; }
.map-attr{ font-size:.62rem; color: rgba(var(--ivory-rgb),.5); pointer-events:auto; text-align:right; }
.map-attr a{ text-decoration: underline; }

/* listing card highlight when arriving from a pin */
.land-card.is-flash{ animation: cardFlash 1.8s var(--ease); }
@keyframes cardFlash{ 0%,30%{ box-shadow: inset 0 0 0 2px var(--gold); } 100%{ box-shadow: inset 0 0 0 0 transparent; } }

@media (max-width: 899px){
  .map-hero::before{ display:none; }
  .map-hero{ height:auto; display:flex; flex-direction:column; }
  .map-copy{ order:0; height:auto; padding-bottom:1.2rem; }
  .map-panel{ max-width:none; padding-top: calc(var(--header-h, 64px) + 1.6rem); }
  .map-panel h1{ font-size: 2.1rem; }
  .map-svg{ position:relative; order:1; height: 66svh; min-height: 420px; }
  .map-foot{ position:relative; order:2; bottom:auto; padding-block:.6rem .9rem; }
  .map-popup{ width: 220px; }
}


/* ============================ TYPOGRAPHY SYSTEM ============================
   One consistent set of rules on top of everything above:
   - kerning + ligatures on, automatic hyphenation OFF (no hyphens on the site)
   - headlines balance their line breaks; paragraphs avoid one-word last lines
   - figures use lining, even-width numerals so prices and stats line up
   - every small uppercase label shares one size (11px), tracking (.2em), weight */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word;
}
h1, h2, h3, h4, .h1, .h2, .h3{ text-wrap: balance; font-variant-numeric: lining-nums; }
h1, .h1{ letter-spacing: calc(var(--display-tracking, -0.01em) - 0.005em); line-height: var(--display-lh, 1.05); }
h2, .h2{ letter-spacing: var(--display-tracking, -0.01em); }
p, li, .lede, blockquote{ text-wrap: pretty; }
.lede{ max-width: 46ch; }
.body-lg{ max-width: 64ch; }
.stat .num, .land-fact-value, .svc-num, .pt-badge, .num-tag, .map-popup dd, .plot-len, .plot-area, .svc-progress b{
  font-variant-numeric: lining-nums tabular-nums;
}
/* list markers: a short gold rule instead of a dash character */
.svc-list li::before, .pkg li::before{
  content:""; flex-shrink:0; width: .9rem; height:1px; margin-top: .8em;
  background: var(--gold-deep);
}
.svc-pkg--featured .svc-list li::before, .pkg.featured li::before{ background: var(--gold-light); }
/* plan drawings: leave a clear band at the top for the "photos coming soon" note */
.plot-svg{ top: 2.2rem; height: calc(100% - 2.6rem); }
/* buttons stay on one line on phones */
@media (max-width: 560px){
  .btn{ letter-spacing: .14em; padding: .9rem 1.4rem; white-space: nowrap; }
}

/* Why Zanzibar opening screen: heading, subtext and stats always fit in one
   view. Sizes scale with the visible screen height (svh = height with the
   browser's bars showing), so short laptop screens shrink everything a little. */
.page-hero--fit{
  min-height: 100svh; align-items: center;
  padding-top: calc(var(--header-h, 80px) + clamp(.5rem, 3svh, 2.5rem));
  padding-bottom: clamp(1.2rem, 4svh, 3.5rem);
}
.page-hero--fit h1{ font-size: clamp(2rem, min(5.2vw, 7.4svh), 4.8rem); margin-top: clamp(.6rem, 1.8svh, 1.2rem); }
.page-hero--fit .lede{ font-size: clamp(1rem, min(1.6vw, 2.6svh), 1.45rem); margin-top: clamp(.6rem, 2svh, 1.4rem); }
.page-hero--fit .stats-bar{ margin-top: clamp(1.2rem, 5svh, 3.5rem); }
.page-hero--fit .stat{ padding: clamp(.9rem, 3.6svh, 2.4rem) 1.2rem clamp(1.3rem, 4.4svh, 2.8rem); }
.page-hero--fit .stat .num{ font-size: clamp(1.8rem, min(4vw, 6.2svh), 3.2rem); line-height:1.1; }
.page-hero--fit .stat .label{ margin-top: clamp(.3rem, 1svh, .6rem); }
.page-hero--fit .stat::after{ bottom: clamp(.55rem, 1.8svh, 1.4rem); }
@media (max-width: 860px){
  .page-hero--fit h1{ font-size: clamp(1.9rem, min(8.4vw, 5.6svh), 3rem); }
  .page-hero--fit .lede{ font-size: clamp(.98rem, 2.4svh, 1.15rem); }
  .page-hero--fit .stat{ padding: clamp(.7rem, 2.2svh, 1.4rem) .6rem clamp(1rem, 3svh, 1.8rem); }
  .page-hero--fit .stat .num{ font-size: clamp(1.6rem, 4.6svh, 2.4rem); }
  .page-hero--fit .stat .label{ font-size:.6875rem; letter-spacing:.14em; }
}
/* contact form spam trap: kept off screen for people, visible to bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form button[disabled], #contact-form button[disabled]{ opacity:.6; cursor:wait; }

/* theme-driven heading weight (each display face has its own best weight) */
h1, h2, h3, h4, .h1, .h2, .h3{ font-weight: var(--display-weight, 500); }


/* ============================ MOTION SYSTEM ============================
   Shared by every page (assets/js/polish.js). Reveals only hide content once
   the script has started (html.js-polish), so nothing is lost without JS. */
html:not(.js-polish) .reveal, html:not(.js-polish) .stagger > *{ opacity:1; transform:none; }
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease), box-shadow .4s var(--ease); }
.stagger.is-visible > *{ opacity:1; transform:none; }

/* images unveil: a clip wipes open while the photo settles from a slight zoom */
.js-polish .unveil{ clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.77,0,.18,1); }
.js-polish .unveil.is-visible{ clip-path: inset(0 0 0 0); }
.js-polish .unveil img, .js-polish .unveil svg{ transform: scale(1.12); transition: transform 1.8s var(--ease); }
.js-polish .unveil.is-visible img, .js-polish .unveil.is-visible svg{ transform: scale(1); }

/* page hero: headline words rise out of a mask, then eyebrow and lede follow */
.page-hero h1 .w{ display:inline-block; overflow:hidden; vertical-align: top; padding-bottom:.08em; margin-bottom:-.08em; }
.page-hero h1 .w > span{ display:inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.page-hero h1.is-in .w > span{ transform:none; }
.js-polish .page-hero .eyebrow, .js-polish .page-hero .lede{ opacity:0; transform: translateY(14px); transition: opacity .9s var(--ease) .5s, transform 1s var(--ease) .5s; }
.js-polish .page-hero.is-in .eyebrow, .js-polish .page-hero.is-in .lede{ opacity:1; transform:none; }
.js-polish .page-hero .eyebrow{ transition-delay: .1s; }
.js-polish .page-hero-media img{ transform: scale(1.08); transition: transform 2.4s var(--ease); }
.js-polish .page-hero.is-in .page-hero-media img{ transform: scale(1); }

/* page transitions: a curtain in the theme's dark colour */
.pt-curtain{ position:fixed; inset:0; z-index:9000; background: var(--ocean-900); display:grid; place-items:center;
  transform: translateY(0); transition: transform .75s cubic-bezier(.77,0,.18,1); pointer-events:none; }
.pt-curtain img{ height:26px; opacity:.9; transition: opacity .3s; }
html:not(.js-polish) .pt-curtain{ display:none; }
html.pt-in .pt-curtain{ transform: translateY(-101%); }
html.pt-in .pt-curtain img{ opacity:0; }
html.pt-out .pt-curtain{ transform: translateY(0); transition-duration: .42s; }
html.pt-out .pt-curtain img{ opacity:.9; transition-delay:.15s; }
@media (prefers-reduced-motion: reduce){ .pt-curtain{ display:none; } }

/* buttons: magnetic drift (set by JS) eases back smoothly */
.btn{ transition: color .5s var(--ease), border-color .5s var(--ease), transform .45s var(--ease); }

/* cards lift on hover (mouse only) */
@media (hover:hover) and (pointer:fine){
  .land-card, .pillar, .office-card, .home-card, .home-plot, .svc-pkg, .feature-hover{ transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .land-card:hover, .pillar:hover, .home-card:hover, .home-plot:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(var(--ink-rgb), .35); }
}

/* underline that draws in on text links (footer, contact list, inline links) */
.footer-col a, .contact-links a span:last-child, .body-lg a, .svc-card p a{
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat:no-repeat;
  background-position: 0 100%; transition: background-size .45s var(--ease), color .3s var(--ease);
}
.footer-col a:hover, .contact-links a:hover span:last-child, .body-lg a:hover, .svc-card p a:hover{ background-size: 100% 1px; }

/* reading progress line under the header */
.read-progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:300; background: var(--gold);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events:none; }

/* ============================== HOME SECTIONS ============================== */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2{ margin-top:1rem; max-width: 18ch; }
.section-head .btn{ flex-shrink:0; }

.home-intro{ display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem clamp(2rem, 6vw, 6rem); align-items:end; }
.home-intro .eyebrow{ grid-column: 1 / -1; }
.home-intro h2{ font-size: clamp(2.2rem, 4.4vw, 3.9rem); max-width: 16ch; }
.home-intro .body-lg{ margin:0; }
.home-intro .btn{ grid-column: 2; justify-self:start; margin-top:.4rem; }
@media (max-width: 860px){ .home-intro{ grid-template-columns: 1fr; } .home-intro .btn{ grid-column: 1; } }

.home-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1px; background: var(--sand-line); border:1px solid var(--sand-line); }
.home-card{ position:relative; display:flex; flex-direction:column; gap:.9rem; padding: clamp(1.6rem, 2.6vw, 2.4rem); background: var(--ivory-deep); color: var(--ink); overflow:hidden; }
.home-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .6s var(--ease); }
.home-card:hover::after, .home-card:focus-visible::after{ transform: scaleX(1); }
.home-card-top{ display:flex; justify-content:space-between; align-items:center; }
.home-icon{ width:34px; height:34px; fill:none; stroke: var(--gold-deep); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition: transform .6s var(--ease); }
.home-card:hover .home-icon{ transform: translateY(-3px) rotate(-4deg); }
.home-card-num{ font-family: var(--font-display); font-size-adjust: var(--display-adjust, none); color: var(--gold-deep); font-size:1rem; font-variant-numeric: lining-nums; }
.home-card h3{ font-size: clamp(1.35rem, 1.8vw, 1.6rem); margin-top:.6rem; }
.home-card p{ color: var(--ink-soft); font-size:.95rem; line-height:1.65; flex:1; }
.home-card-more{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: var(--gold-deep); }
.home-card-more span{ display:inline-block; transition: transform .4s var(--ease); }
.home-card:hover .home-card-more span{ transform: translateX(5px); }
@media (max-width: 960px){ .home-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .home-cards{ grid-template-columns: 1fr; } }

.home-plots{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.home-plot{ display:flex; flex-direction:column; background: var(--ivory-deep); border:1px solid var(--sand-line); color: var(--ink); }
.home-plot-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.home-plot-media .plot-svg{ top:.6rem; height: calc(100% - 1.2rem); }
.home-plot-body{ padding: 1.4rem 1.6rem 1.6rem; }
.home-plot-loc{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: var(--gold-deep); }
.home-plot h3{ font-size:1.5rem; margin-top:.5rem; }
.home-plot dl{ display:grid; grid-template-columns: auto 1fr; gap:.4rem 1.4rem; margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--sand-line); }
.home-plot dl div{ display:contents; }
.home-plot dt{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: var(--ink-soft); align-self:center; }
.home-plot dd{ margin:0; font-variant-numeric: lining-nums tabular-nums; }
.home-plot dd small{ color: var(--ink-soft); font-size:.8rem; margin-left:.3rem; }
@media (max-width: 960px){ .home-plots{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .home-plots{ grid-template-columns: 1fr; } }

.home-stats{ grid-template-columns: repeat(3, 1fr); margin-top:0; }
.home-stats .stat .num{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.home-source{ margin-top:1.2rem; font-size:.78rem; color: rgba(var(--ivory-rgb), .6); }
@media (max-width: 760px){ .home-stats{ grid-template-columns: 1fr; } }
.home-cta h2{ max-width: 20ch; margin-inline:auto; font-size: clamp(2rem, 4vw, 3.4rem); }

/* photo banners: a directional shade behind the text (bottom left) so the
   headline and subtext stay legible on any photo and any palette */
.page-hero--photo::after{
  background:
    linear-gradient(90deg, rgba(var(--ocean-rgb),.82) 0%, rgba(var(--ocean-rgb),.55) 38%, rgba(var(--ocean-rgb),.12) 72%, rgba(var(--ocean-rgb),0) 100%),
    linear-gradient(0deg, rgba(var(--ocean-rgb),.7) 0%, rgba(var(--ocean-rgb),0) 55%),
    linear-gradient(180deg, rgba(var(--ocean-rgb),.45) 0%, rgba(var(--ocean-rgb),0) 22%);
}
.page-hero--photo .lede{ font-family: var(--font-sans); font-size-adjust: none; font-style: normal; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65; color: rgba(var(--ivory-rgb), .9); max-width: 48ch; }
.page-hero--photo h1, .page-hero--photo .lede{ text-shadow: none; }

/* listings: separate cards (no grey cells when the last row isn't full) */
.land-grid{ background:none; border:0; gap: clamp(1rem, 2vw, 1.6rem); }
.land-card{ border:1px solid var(--sand-line); }