@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,600&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ============ Tokens ============ */
:root{
  --bg-0: #1c1530;
  --bg-1: #241b3d;
  --bg-2: #2c2249;
  --hairline: rgba(242, 201, 76, 0.20);
  --hairline-soft: rgba(242, 201, 76, 0.10);
  --gold-1: #f2c94c;
  --gold-2: #d4a72c;
  --gold-3: #8a6a10;
  --ivory: #f7f3ea;
  --muted: rgba(247, 243, 234, 0.66);
  --muted-soft: rgba(247, 243, 234, 0.44);
  --shadow: 0 24px 60px rgba(8, 5, 20, 0.55);
  --radius: 22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Work Sans', Arial, sans-serif;
  background:
    radial-gradient(700px circle at 8% -5%, rgba(242,201,76,0.10), transparent 50%),
    radial-gradient(800px circle at 100% 10%, rgba(242,201,76,0.06), transparent 55%),
    var(--bg-0);
  color: var(--ivory);
  line-height: 1.65;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1120px, 92%); margin:0 auto; }
.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
  color: var(--gold-1); font-weight:600;
}
.muted{ color: var(--muted); }

/* ============ Header ============ */
header{
  position:sticky; top:0; z-index:30;
  background: rgba(24, 18, 42, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo-mark{
  width:48px; height:48px; border-radius:50%;
  object-fit:cover;
  border:1px solid var(--hairline);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.brand-text{ line-height:1.25; }
.brand-name{
  font-family:'Playfair Display', serif;
  font-weight:800; font-size:19px; letter-spacing:0.3px;
  color: var(--ivory);
}
.brand-sub{ font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gold-1); }

nav ul{ list-style:none; display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
nav a{
  padding:9px 14px; border-radius:999px; font-weight:600; font-size:14.5px;
  color: rgba(247,243,234,0.82);
  border:1px solid transparent;
  transition: all .2s ease;
}
nav a:hover, nav a.active{
  color: var(--ivory);
  background: rgba(242,201,76,0.10);
  border-color: var(--hairline);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  font-weight:700; font-size:14.5px;
  border:1px solid transparent;
  cursor:pointer; transition: transform .15s ease, filter .2s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.gold{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color:#1c1530;
  box-shadow: 0 14px 26px rgba(212,167,44,0.22);
}
.btn.gold:hover{ filter:brightness(1.05); }
.btn.line{
  background: transparent;
  border-color: var(--hairline);
  color: var(--gold-1);
}
.btn.line:hover{ background: rgba(242,201,76,0.08); }
.btn.ghost{
  background: rgba(247,243,234,0.06);
  border-color: rgba(247,243,234,0.14);
  color: var(--ivory);
}
.btn.ghost:hover{ background: rgba(247,243,234,0.10); }

/* ============ Hero (signature: prosperity-tree watermark) ============ */
.hero{ position:relative; padding: 64px 0 30px; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:22px; align-items:center;
  position:relative; z-index:2;
}
.hero .tree-mark{
  position:absolute; right:-60px; top:-40px; width:520px; opacity:0.10;
  z-index:1; pointer-events:none;
}
.ribbon{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background: rgba(242,201,76,0.10);
  border:1px solid var(--hairline);
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  color: var(--gold-1); font-weight:700;
}
.hero h1{
  font-family:'Playfair Display', serif;
  font-weight:800; font-style:italic;
  font-size: clamp(30px, 4vw, 50px);
  line-height:1.14; margin-top:16px; color: var(--ivory);
}
.hero h1 em{ font-style:normal; color: var(--gold-1); }
.hero p{ margin-top:14px; max-width:56ch; color: var(--muted); font-size:15.5px; }
.hero-actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }

.metal-row{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.metal-chip{
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--hairline);
  background: rgba(255,255,255,0.03);
  font-size:13px; font-weight:600; color: var(--ivory);
}

.hero-portrait{
  border-radius: var(--radius);
  border:1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  padding: 26px;
  text-align:center;
}
.hero-portrait img{ width:120px; margin:0 auto 14px; border-radius:50%; border:1px solid var(--hairline); }
.hero-portrait .since{ font-family:'Playfair Display', serif; font-size:15px; color: var(--gold-1); }
.hero-portrait .divider{
  width:56px; height:1px; margin:14px auto; background: var(--hairline);
}
.hero-portrait .stat-line{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-top:1px solid var(--hairline-soft); color: var(--muted); }
.hero-portrait .stat-line:first-of-type{ border-top:none; }
.hero-portrait .stat-line b{ color: var(--ivory); }

/* ============ Root divider (signature motif reused as section separator) ============ */
.root-divider{
  width:100%; height:26px; margin: 6px 0 4px; opacity:0.55;
}

/* ============ Sections ============ */
.section{ padding: 34px 0; }
.section-head{ margin-bottom:20px; }
.section-title{
  font-family:'Playfair Display', serif; font-weight:700; font-size:26px;
  color: var(--ivory); margin-top:6px;
}

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border:1px solid var(--hairline-soft);
  box-shadow: 0 16px 38px rgba(8,5,20,0.40);
  transition: transform .18s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); border-color: var(--hairline); }
.card-body{ padding:20px; }
.card h3{ font-family:'Playfair Display', serif; font-size:18px; margin-bottom:8px; color: var(--ivory); }
.card p{ color: var(--muted); font-size:14.5px; }
.leaf-pill{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  padding:6px 12px; border-radius:999px;
  background: rgba(242,201,76,0.08); border:1px solid var(--hairline);
  color: var(--gold-1); font-weight:700; font-size:12px;
}

/* leaf bullet list */
.leaf-list{ margin-top:12px; list-style:none; }
.leaf-list li{
  position:relative; padding-left:22px; margin:9px 0;
  color: var(--muted); font-size:14.5px;
}
.leaf-list li::before{
  content:"❧"; position:absolute; left:0; top:0; color: var(--gold-1); font-size:14px;
}

/* ============ Profile / Contact split layouts ============ */
.split{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:stretch; }
.info-row{ margin-top:10px; font-size:14.5px; color: var(--muted); }
.info-row strong{ color: var(--ivory); }
.badge-year{
  display:inline-block; padding:7px 13px; border-radius:999px;
  background: rgba(242,201,76,0.10); border:1px solid var(--hairline);
  color: var(--gold-1); font-weight:700; font-size:12px; letter-spacing:0.4px;
}

/* ============ Contact form ============ */
.form{ display:grid; gap:14px; margin-top:14px; }
.input-group label{ font-size:12.5px; letter-spacing:0.6px; text-transform:uppercase; color: var(--muted-soft); font-weight:600; }
.input, textarea{
  margin-top:7px; width:100%; padding:12px 14px; border-radius:14px;
  background: rgba(255,255,255,0.04); border:1px solid var(--hairline-soft);
  color: var(--ivory); font-family:'Work Sans', sans-serif; font-size:14.5px;
}
.input::placeholder, textarea::placeholder{ color: var(--muted-soft); }
.input:focus, textarea:focus{ outline:none; border-color: var(--hairline); background: rgba(255,255,255,0.06); }
textarea{ min-height:110px; resize:vertical; }

.map-frame{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--hairline-soft); box-shadow: var(--shadow); }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; filter: grayscale(15%) contrast(108%); }

/* ============ Footer ============ */
footer{
  margin-top:26px; padding:22px 0 30px;
  border-top:1px solid var(--hairline-soft);
  background: rgba(255,255,255,0.02);
}
.footer-row{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: var(--muted); font-size:13.5px;
}

/* ============ Floating WhatsApp ============ */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:999px;
  background: linear-gradient(135deg, #25D366, #1bb955);
  color:#08210f; font-weight:800; font-size:13.5px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.45);
  border:1px solid rgba(0,0,0,0.10);
  transition: transform .15s ease, filter .2s ease;
}
.wa-float:hover{ filter:brightness(1.04); }
.wa-float:active{ transform: translateY(1px); }

/* ============ Responsive ============ */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero .tree-mark{ display:none; }
  .grid-3{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  nav ul{ gap:2px; }
}