/* ============================================================
   SHIFT GROUP — shared design system
   Navy + champagne · serif display + clean sans
   ============================================================ */

:root{
  --navy:      #0b1220;
  --navy-2:    #111c2e;
  --navy-3:    #17263c;
  --ink:       #1c1c1c;
  --paper:     #ffffff;
  --paper-2:   #faf8f4;
  --paper-3:   #f2eee6;
  --champagne: #e5d8c7;
  --gold:      #b99a5b;
  --gold-2:    #a08c6b;
  --muted:     #8a8375;
  --line:      #e5dfd2;
  --text:      #3a3a3a;
  --text-soft: #5a5a5a;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Segoe UI", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --shadow: 0 18px 50px rgba(11,18,32,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ---------- typography ---------- */
.serif{ font-family:var(--serif); }
.kicker{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-2); font-weight:600;
}
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1.08; letter-spacing:.5px; }
h1{ font-size:clamp(38px, 7vw, 78px); }
h2{ font-size:clamp(30px, 4.6vw, 52px); }
h3{ font-size:clamp(20px, 2.4vw, 28px); }
p{ color:var(--text-soft); }
.lede{ font-family:var(--serif); font-size:clamp(19px,2.3vw,26px); line-height:1.5; color:#2c2c2c; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(64px,9vw,130px); }
.section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.section-head .kicker{ display:block; margin-bottom:18px; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:40px; cursor:pointer;
  border:1px solid transparent; transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:#1a1206; border-color:var(--gold); }
.btn-gold:hover{ background:#c9ab6c; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--champagne); border-color:rgba(229,216,199,.5); }
.btn-outline:hover{ border-color:var(--champagne); background:rgba(229,216,199,.08); }
.btn-dark{ background:var(--navy); color:var(--champagne); border-color:var(--navy); }
.btn-dark:hover{ background:var(--navy-3); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.solid{
  background:rgba(11,18,32,.96); backdrop-filter:blur(8px);
  padding-block:14px; box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.brand{
  font-family:var(--serif); font-size:24px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; font-weight:600;
}
.brand small{ display:block; font-family:var(--sans); font-size:9px; letter-spacing:.42em; color:var(--champagne); font-weight:500; margin-top:2px; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:500; transition:color .25s; }
.nav a:hover{ color:var(--champagne); }
.nav .btn{ padding:12px 22px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:30px; height:22px; position:relative; }
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:#fff; transition:.3s var(--ease); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(8,12,20,.6) 0%, rgba(8,12,20,.25) 40%, rgba(8,12,20,.82) 100%);
}
.hero .wrap{ padding-top:120px; padding-bottom:60px; }
.hero .kicker{ color:var(--champagne); }
.hero h1{ color:#fff; margin:22px 0 20px; max-width:14ch; text-shadow:0 2px 30px rgba(0,0,0,.4); }
.hero .lede{ color:#f0ece4; max-width:44ch; margin-bottom:14px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.scarcity{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); }
.scarcity .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(185,154,91,.25); }

/* ---------- dark section ---------- */
.dark{ background:var(--navy); color:#dfe4ec; }
.dark h1,.dark h2,.dark h3{ color:#fff; }
.dark p{ color:#aeb7c4; }
.dark .kicker{ color:var(--champagne); }

/* ---------- stat row ---------- */
.stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,70px); }
.stat .n{ font-family:var(--serif); font-size:clamp(34px,5vw,52px); color:var(--gold); line-height:1; }
.dark .stat .n{ color:var(--champagne); }
.stat .l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.dark .stat .l{ color:#8b95a4; }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,70px); }
.split.narrow-text .txt{ max-width:46ch; }
.split .pic{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; }
.split .pic img{ width:100%; height:100%; }
.split .lede{ margin:18px 0 20px; }

/* ---------- division / feature cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.card{
  position:relative; isolation:isolate; border-radius:var(--radius); overflow:hidden;
  min-height:420px; display:flex; align-items:flex-end; color:#fff;
  box-shadow:var(--shadow);
}
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease); }
.card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(8,12,20,.96) 0%, rgba(8,12,20,.88) 38%, rgba(8,12,20,.55) 68%, rgba(8,12,20,.2) 100%); }
.card:hover img{ transform:scale(1.06); }
.card .card-body{ padding:34px; }
.card .card-body .kicker{ color:var(--champagne); }
.card h3{ color:#fff; margin:12px 0 10px; }
.card p{ color:#c8cfd9; margin-bottom:18px; }
.card .more{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne); font-weight:600; }
.card .more::after{ content:" →"; }

/* Panel card — used where no clean photograph exists yet, so page text never
   collides with typography baked into a marketing slide. */
.card--panel{ background:linear-gradient(160deg,#16202f 0%,#0b1220 58%,#131b28 100%); }
.card--panel::after{ background:none; }
.card--panel::before{
  content:""; position:absolute; left:34px; top:34px; width:46px; height:2px;
  background:var(--gold); opacity:.9;
}
.hero--panel .hero-bg{ display:none; }
.hero--panel{ background:linear-gradient(160deg,#16202f 0%,#0b1220 55%,#141d2b 100%); }
.hero--panel::after{ background:linear-gradient(to bottom,rgba(8,12,20,.2),rgba(8,12,20,.55)); }

/* ---------- capability grid (steel) ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cap{ background:var(--paper); padding:36px 30px; transition:background .3s; }
.cap:hover{ background:var(--paper-2); }
.cap .num{ font-family:var(--serif); font-size:34px; color:var(--gold); }
.cap h3{ font-size:20px; margin:14px 0 8px; }
.cap p{ font-size:15px; }
.dark .cap{ background:var(--navy-2); }
.dark .cap:hover{ background:var(--navy-3); }
.dark .cap h3{ color:#fff; }

/* ---------- spec cards (villas) ---------- */
.spec-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.spec-card{ border:1px solid var(--line); border-radius:var(--radius); padding:38px 34px; background:var(--paper); transition:transform .35s var(--ease), box-shadow .35s; }
.spec-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.spec-card .type{ font-family:var(--serif); font-size:30px; color:var(--ink); }
.spec-card .type span{ color:var(--gold); }
.spec-card .price{ margin-top:6px; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2); }
.spec-card table{ width:100%; border-collapse:collapse; margin-top:22px; }
.spec-card td{ padding:11px 0; border-bottom:1px solid var(--paper-3); font-size:15px; }
.spec-card td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.spec-card tr:last-child td{ border-bottom:none; }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:1.5fr 1fr; grid-auto-rows:minmax(180px,1fr); gap:14px; }
.gallery img{ width:100%; height:100%; border-radius:var(--radius); }
.gallery .tall{ grid-row:span 2; }

/* ---------- location list ---------- */
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px 40px; }
.loc{ border-top:1px solid var(--line); padding-top:14px; }
.loc .d{ font-family:var(--serif); font-size:26px; color:var(--gold); }
.loc .p{ font-size:14px; color:var(--text-soft); margin-top:4px; }

/* ---------- finish tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.tile figure{ border-radius:var(--radius); overflow:hidden; }
.tile img{ width:100%; aspect-ratio:1; }
.tile figcaption{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; text-align:center; }

/* ---------- feature list (bullets) ---------- */
.feature-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 40px; }
.feature-list li{ position:relative; padding-left:26px; font-size:16px; color:var(--text); line-height:1.55; }
.feature-list li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--gold); }
.feature-list li b{ color:var(--ink); }
.dark .feature-list li{ color:#c8cfd9; }
.dark .feature-list li b{ color:#fff; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--navy); color:#fff; text-align:center; }
.cta-band h2{ color:#fff; max-width:18ch; margin:0 auto 14px; }
.cta-band p{ color:#aeb7c4; max-width:44ch; margin:0 auto 30px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------- forms ---------- */
.lead-form{ display:grid; gap:16px; max-width:560px; }
.lead-form.two{ grid-template-columns:1fr 1fr; }
.lead-form .full{ grid-column:1 / -1; }
.lead-form label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block; }
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  transition:border-color .25s;
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{ outline:none; border-color:var(--gold); }
.dark .lead-form input,.dark .lead-form select,.dark .lead-form textarea{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:#fff; }
.dark .lead-form label{ color:#8b95a4; }
.form-note{ font-size:12px; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq summary{ cursor:pointer; list-style:none; font-family:var(--serif); font-size:21px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold); font-size:26px; transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:14px; }

/* ---------- footer ---------- */
.site-footer{ background:#080d16; color:#c8cfd9; padding-block:64px 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.site-footer .brand{ font-size:22px; }
.site-footer .col h4{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); margin-bottom:16px; }
.site-footer .col a,.site-footer .col p{ display:block; color:#9aa4b2; font-size:15px; margin-bottom:10px; transition:color .25s; }
.site-footer .col a:hover{ color:#fff; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; border-top:1px solid rgba(255,255,255,.08); margin-top:44px; padding-top:24px; font-size:13px; color:#6b7482; }

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4); transition:transform .3s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }


/* ---------- group bar (cross-division wayfinding) ---------- */
:root{ --groupbar-h:38px; }
.groupbar{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--groupbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:var(--gutter);
  background:#070c15; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.groupbar .gb-home{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.9); font-weight:600; white-space:nowrap;
}
.groupbar .gb-home:hover{ color:var(--champagne); }
.groupbar .gb-home .arrow{ font-size:13px; line-height:1; opacity:.7; }
.groupbar .gb-home[aria-current="page"]{ color:var(--gold); }
.groupbar .gb-divs{ display:flex; align-items:center; gap:0; overflow:hidden; }
.groupbar .gb-divs a{
  color:rgba(255,255,255,.55); padding:0 14px; font-weight:500;
  border-left:1px solid rgba(255,255,255,.1); white-space:nowrap; transition:color .25s;
}
.groupbar .gb-divs a:first-child{ border-left:0; }
.groupbar .abbr{ display:none; }
.groupbar .gb-divs a:hover{ color:#fff; }
.groupbar .gb-divs a[aria-current="page"]{ color:var(--gold); font-weight:600; }
.has-groupbar .site-header{ top:var(--groupbar-h); }
.has-groupbar .hero .wrap{ padding-top:calc(120px + var(--groupbar-h)); }

/* ---------- other divisions (footer cross-links) ---------- */
.other-divs{ background:var(--paper-2); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,72px); }
.other-divs .od-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.other-divs .od-head a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); font-weight:600; }
.other-divs .od-head a:hover{ color:var(--gold); }
.od-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.od-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.od-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold); }
.od-card .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); font-weight:600; }
.od-card h3{ font-size:24px; margin:10px 0 8px; }
.od-card p{ font-size:15px; }
.od-card .go{ display:inline-block; margin-top:16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.od-card:hover .go{ color:var(--gold-2); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav{
    position:fixed; inset:var(--groupbar-h) 0 0 auto; width:min(80vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    background:var(--navy); padding:60px 40px; transform:translateX(100%);
    transition:transform .4s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav.open{ transform:none; }
  .nav-toggle{ display:block; z-index:70; }
  .split{ grid-template-columns:1fr; }
  .split .pic{ order:-1; }
  .footer-top{ grid-template-columns:1fr; gap:30px; }
  .lead-form.two{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .groupbar{ font-size:10px; padding-inline:16px; letter-spacing:.1em; }
  .groupbar .gb-divs a{ padding:0 9px; }
  .groupbar .gb-home span.lbl{ display:none; }
}

@media (max-width:560px){
  .groupbar{ font-size:10px; padding-inline:14px; letter-spacing:.1em; }
  .groupbar .gb-home{ gap:6px; }
  .groupbar .gb-divs a{ padding:0 10px; }
  .groupbar .full{ display:none; }
  .groupbar .abbr{ display:inline; }
}

/* About — the manifesto lines read as a spoken cadence, so keep them tight
   and set off from the prose above. */
.manifesto {
  font-family: var(--serif);
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.55;
  color: var(--ink);
  margin-top: 22px;
}
.manifesto + .manifesto { margin-top: 14px; }
#about .txt p + p { margin-top: 14px; }
#about .txt .lede + p { margin-top: 18px; }

/* Anchor links land under the sticky header + group bar without this. */
section[id] { scroll-margin-top: 108px; }
.signature { display: block; margin-top: 26px; color: var(--gold); }

/* The carried-over service art is busy and low-resolution, so this block needs a
   heavier scrim than the house card gradient to keep the copy readable. */
#services .card::after{
  background:linear-gradient(to top, rgba(8,12,20,.97) 0%, rgba(8,12,20,.93) 45%, rgba(8,12,20,.82) 75%, rgba(8,12,20,.6) 100%);
}

/* Contact — one phone and one email for everyone, with the four offices listed
   underneath so reach is visible without multiplying the ways to get in touch. */
.offices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px; margin-top:52px; padding-top:38px;
  border-top:1px solid rgba(255,255,255,.12); text-align:left;
}
.offices .office p{ color:#aeb7c4; margin:8px 0 0; max-width:none; font-size:15px; line-height:1.65; }
.offices .office .kicker{ color:var(--champagne); }
@media (max-width: 560px){ .offices{ text-align:center; } }