/* =========================================================
   WaterHouse — Light & Airy Luxury Design System
   ========================================================= */

:root {
  /* Palette */
  --ink:        #122733;   /* deep slate-teal text */
  --ink-soft:   #3d5663;
  --mist:       #6b8593;   /* muted captions */
  --line:       #e3ebef;
  --paper:      #ffffff;
  --paper-2:    #f7fafb;   /* off-white panels */
  --paper-3:    #eef5f7;
  --aqua:       #4aa6c4;   /* primary water accent */
  --aqua-deep:  #2c7d9c;
  --aqua-light: #bfe3ee;
  --aqua-glow:  #e6f5fa;
  --sand:       #c9a86a;   /* refined gold for "founding builder" */
  --sand-soft:  #e7d6b3;

  /* Type */
  --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --shadow-sm: 0 4px 24px rgba(18, 39, 51, 0.06);
  --shadow-md: 0 18px 60px rgba(18, 39, 51, 0.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--aqua-deep); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--aqua); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.08; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
p  { margin: 0 0 1.1em; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  margin: 0 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--aqua);
  display: inline-block;
}

.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--ink-soft); line-height: 1.55; }
.serif-lead { font-family: var(--serif); font-size: clamp(1.6rem,2.6vw,2.4rem); line-height: 1.3; color: var(--ink); font-weight: 400; }
.tm { font-size: .62em; vertical-align: super; color: var(--mist); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.section { padding: clamp(70px, 9vw, 140px) 0; }
.section--tight { padding: clamp(48px,6vw,90px) 0; }
.center { text-align: center; }
.measure { max-width: 720px; }
.measure.center { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: 100px;
  border: 1px solid transparent; cursor: pointer;
  transition: all .3s var(--ease);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--aqua-deep); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.btn--gold { background: linear-gradient(135deg, var(--sand), #d9bd84); color: #2a2010; }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(201,168,106,.35); color:#2a2010; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(227,235,239,.8);
  transition: background .3s var(--ease);
}
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.38rem; color: var(--ink); letter-spacing: .01em; white-space: nowrap; margin-right: clamp(18px, 3vw, 44px); flex: none; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 52px; height: auto; flex: none; filter: drop-shadow(0 3px 8px rgba(44,125,156,.28)); transition: transform .5s var(--ease), filter .5s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 5px 14px rgba(44,125,156,.42)); }
.brand__name { line-height: 1; font-weight: 500; }
.brand__name em { font-style: normal; color: var(--aqua-deep); }
.brand small { display:block; font-family: var(--sans); font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--mist); margin-top: 2px; }

/* ---------- Diamond / jewelry accents ---------- */
@keyframes facetShimmer { 0%,100% { filter: drop-shadow(0 3px 8px rgba(44,125,156,.28)); } 50% { filter: drop-shadow(0 4px 12px rgba(116,199,190,.5)) brightness(1.06); } }
.brand__mark { animation: facetShimmer 6s ease-in-out infinite; }
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg); transition: none; }
.btn--gold:hover::after { animation: goldSheen .9s var(--ease); }
@keyframes goldSheen { from { left:-120%; } to { left:160%; } }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .03em; color: var(--ink-soft); }
.nav__links a:hover, .nav__links a.active { color: var(--aqua-deep); }
.nav__cta, .nav__links a.nav__cta { font-size: .76rem !important; padding: .7rem 1.3rem; background: var(--aqua-deep) !important; color: #fff !important; }
.nav__cta:hover, .nav__links a.nav__cta:hover { background: var(--ink) !important; color: #fff !important; }

/* dropdown */
.nav__item { position: relative; }
.nav__trigger { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .03em;
  color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.nav__trigger:hover, .nav__trigger.active { color: var(--aqua-deep); }
.nav__trigger .caret { font-size: .7rem; transition: transform .25s var(--ease); }
.nav__item.open .nav__trigger .caret { transform: rotate(180deg); }
.nav__drop { position: absolute; top: 100%; right: 0; left: auto; margin-top: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
  min-width: 244px; padding: 8px; list-style: none; z-index: 130;
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
/* invisible bridge removes the dead gap between trigger and menu */
.nav__drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop, .nav__item.open .nav__drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav__drop a { display: block; padding: 10px 14px; border-radius: 9px; font-size: .85rem; font-weight: 500; color: var(--ink-soft); border: none !important; }
.nav__drop a:hover, .nav__drop a.active { background: var(--paper-2); color: var(--aqua-deep); }

.nav__toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav__toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

@media (max-width: 900px) {
  .nav__toggle { display:block; }
  .nav__links {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px var(--gut) 24px; box-shadow: var(--shadow-sm);
    max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), padding .4s var(--ease);
  }
  .nav__links li { width: 100%; }
  .nav__links a { display:block; padding: 14px 0; width:100%; border-bottom:1px solid var(--paper-2); }
  .nav.open .nav__links { max-height: 760px; overflow-y: auto; }
  .nav__cta { margin-top: 12px; }
  .nav__item { width: 100%; }
  .nav__trigger { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--paper-2); }
  .nav__drop { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: none; margin-top: 0; min-width: 0; padding: 0 0 6px 14px; background: transparent; display: none; }
  .nav__drop::before { display: none; }
  .nav__item.open .nav__drop { display: block; transform: none; }
  .nav__drop a { padding: 11px 0; border-bottom: 1px solid var(--paper-2) !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(80px,12vw,170px) 0 clamp(70px,10vw,130px); }
.hero__bg { position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 95% at 82% -8%, #c6e7f0 0%, rgba(230,245,250,0) 55%),
    radial-gradient(95% 85% at 0% 110%, #d2eeec 0%, rgba(242,249,251,0) 60%),
    linear-gradient(160deg, #ddf1f5 0%, #eef8fa 100%);
}
.hero__wave { position:absolute; left:0; right:0; bottom:-2px; z-index:-1; opacity:.7; }
.hero h1 { max-width: 14ch; }
.hero .lead { max-width: 56ch; }
.hero__cta { display:flex; gap: 16px; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(26px, 3vw, 40px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--aqua-light); }
.card__num { font-family: var(--serif); font-size: 2.4rem; color: var(--aqua); line-height:1; display:block; margin-bottom:.5rem; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; margin-bottom: 0; }

.panel { background: var(--paper-2); border-radius: calc(var(--radius) + 6px); padding: clamp(30px,4vw,64px); }
.panel--glow { background: linear-gradient(160deg, var(--aqua-glow), #fff 70%); border:1px solid var(--aqua-light); }

/* ---------- Stat ---------- */
.stat { }
.stat__num { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.4rem); color: var(--ink); line-height: .95; letter-spacing:-.02em; }
.stat__num b { color: var(--aqua-deep); font-weight:500; }
.stat__label { font-family: var(--sans); font-size: .8rem; letter-spacing:.04em; color: var(--mist); margin-top:.6rem; }

/* ---------- Pill / tag ---------- */
.tag { display:inline-block; font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua-deep); background:var(--aqua-glow); border:1px solid var(--aqua-light); padding:.4rem .85rem; border-radius:100px; }
.tag--gold { color:#8a6d2f; background:#faf4e6; border-color:var(--sand-soft); }

/* ---------- Divider rule ---------- */
.rule { height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Page header band ---------- */
.pagehead { position:relative; overflow:hidden; padding: clamp(78px,9vw,134px) 0 clamp(66px,6vw,104px);
  background: linear-gradient(160deg, #cfeaf2 0%, #e3f3f8 55%, #f1f9fb 100%); }
.pagehead::after { content:""; position:absolute; left:0; right:0; bottom:0; height:108px;
  background: url("img/wave-accent.svg") no-repeat bottom center / cover; opacity:.85; pointer-events:none; }
.pagehead .wrap { position:relative; z-index:1; }
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { max-width: 60ch; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #c7d6dd; padding: clamp(56px,7vw,90px) 0 40px; }
.footer a { color:#c7d6dd; }
.footer a:hover { color:#fff; }
.footer h4 { color:#fff; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.footer__brand { font-family:var(--serif); font-size:1.7rem; color:#fff; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin-bottom:.6rem; font-size:.92rem; }
.footer__bottom { margin-top: 56px; padding-top: 26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.8rem; color:#7e98a3; }
.footer__motto { font-family:var(--serif); font-style:italic; color:var(--aqua-light); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(160deg, #0f2430, #16323f); color:#fff; border-radius: 28px; padding: clamp(40px,6vw,80px); text-align:center; position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; }
.cta-band p { color: #b7cad2; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 50% -20%, rgba(74,166,196,.35), transparent 60%); pointer-events:none; }
.cta-band > * { position:relative; z-index:1; }

/* ---------- Board / people ---------- */
.people { display:grid; gap: clamp(18px,2.4vw,28px); grid-template-columns: repeat(3,1fr); }
.person {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding: 30px 28px; display:flex; flex-direction:column; align-items:flex-start;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.person:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--aqua-light); }
.person__avatar {
  position:relative; width:92px; height:92px; border-radius:50%; flex:none; margin-bottom:18px;
  overflow:hidden; letter-spacing:.02em;
  background: linear-gradient(150deg, var(--aqua), var(--aqua-deep));
  box-shadow: 0 8px 22px rgba(44,125,156,.22);
  outline:3px solid #fff; outline-offset:-3px;
}
.person__avatar::before { content:attr(data-ini); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:2rem; color:#fff; }
.person__avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.person--gold .person__avatar { background: linear-gradient(150deg, #d9bd84, var(--sand)); box-shadow:0 8px 22px rgba(201,168,106,.28); }
.person--gold .person__avatar::before { color:#3a2c10; }
.person__name { font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin-bottom:.2rem; line-height:1.15; }
.person__role { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua-deep); margin-bottom:.9rem; }
.person--gold .person__role { color:#8a6d2f; }
.person__li { margin-top:auto; font-size:.82rem; font-weight:500; display:inline-flex; align-items:center; gap:.4rem; color:var(--mist); }
.person__li:hover { color:var(--aqua-deep); }
.person__li svg { width:15px; height:15px; }

.advisors { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.advisor { background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px 18px; transition:.3s var(--ease); display:flex; align-items:center; gap:13px; }
.advisor:hover { background:#fff; border-color:var(--aqua-light); box-shadow:var(--shadow-sm); }
.advisor__av { position:relative; width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(150deg,var(--aqua),var(--aqua-deep)); outline:2px solid #fff; outline-offset:-2px; }
.advisor__av::before { content:attr(data-ini); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.05rem; color:#fff; }
.advisor__av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.advisor__name { font-family:var(--serif); font-size:1.1rem; color:var(--ink); line-height:1.2; }
.advisor__li { font-size:.74rem; color:var(--mist); display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; }
.advisor__li svg { width:13px; height:13px; }

@media (max-width:900px){ .people{grid-template-columns:repeat(2,1fr);} .advisors{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .people{grid-template-columns:1fr;} .advisors{grid-template-columns:1fr;} }

/* ---------- Water forms gallery ---------- */
.wforms { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wform { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; text-align:center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.wform:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--aqua-light); }
.wform svg { width:88px; height:88px; margin:0 auto 16px; display:block; }
.wform h3 { font-size:1.2rem; margin-bottom:.25rem; }
.wform p { font-size:.85rem; color:var(--mist); margin:0; line-height:1.5; }
@media(max-width:760px){ .wforms{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .wforms{grid-template-columns:1fr;} }

/* ---------- Region flag chip ---------- */
.flag { display:inline-block; width:27px; height:18px; border-radius:3px; overflow:hidden;
  vertical-align:-3px; margin-left:10px; box-shadow:0 0 0 1px rgba(18,39,51,.10); }
.flag svg { display:block; width:100%; height:100%; }

/* ---------- Decorative water scenes (section backgrounds) ---------- */
.scene { position:relative; overflow:hidden; }
.scene > .wrap { position:relative; z-index:1; }
.scene::before { content:""; position:absolute; inset:0; background-repeat:no-repeat; pointer-events:none; z-index:0; }
.scene--currents::before { background:url("img/scene-currents.svg") center center / cover; opacity:.8; }
.scene--ripples::before  { background:url("img/scene-ripples.svg") top right / cover; opacity:.85; }
.scene--depth::before    { background:url("img/scene-depth.svg") bottom center / 100% auto; opacity:.9; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content:center; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}