:root{
  --bg: #0B0B0D;         /* luxury black */
  --ink: #0F1012;        /* near-black text */
  --paper:#ffffff;
  --soft:#f6f6f7;
  --line:#e7e7ea;
  --muted:#6b6f78;

  /* minimal accent (use sparingly) */
  --accent:#C9A857;

  --shadow: 0 18px 45px rgba(0,0,0,.14);
  --shadowSoft: 0 12px 30px rgba(0,0,0,.10);
  --max: 1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{width:92%;max-width:var(--max);margin:0 auto;}
section{scroll-margin-top: 90px;}

/* =========================
   NAV
========================= */
.nav{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding: 16px 0;
  gap: 14px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:"Playfair Display", serif;
  letter-spacing:.2px;
  white-space: nowrap;
}
.brand__mark{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border: 1px solid var(--ink);
  background:#fff;
  font-weight:700;
}
.brand__name{
  font-size:22px;
  font-weight:700;
}
.brand__name span{color: var(--accent);}

/* Dropdown */
.dd{position:relative;}
.dd__btn{
  display:flex;align-items:center;gap:10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background:#fff;
  font-size:13px;
  cursor:pointer;
}
.dd__dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,16,18,.07);
}
.dd__menu{
  position:absolute;
  right:0; top: 48px;
  width: 260px;
  background:#fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadowSoft);
  display:none;
  overflow:hidden;
}
.dd__menu.open{display:block;}
.dd__menu a{
  display:block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.dd__menu a:hover{background: var(--soft);}
.dd__title{
  padding: 12px 14px;
  font-size: 11px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(15,16,18,.06), transparent);
}
.dd__socialRow{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

/* icons */
.iconBtn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;
}
.iconBtn svg{width:18px;height:18px;fill:var(--ink);opacity:.92;}
.iconBtn:hover{border-color:rgba(15,16,18,.45);}
.iconBtn:hover svg{opacity:1;}
.iconBtn--dark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.iconBtn--dark svg{fill:#fff;opacity:.95;}
.iconBtn--dark:hover{border-color: rgba(255,255,255,.32);}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 12px 16px;
  border: 1px solid var(--ink);
  font-size: 13px;
  background: #fff;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover{opacity:.92; transform: translateY(-1px);}
.btn--primary{
  background: var(--ink);
  color:#fff;
  border-color: var(--ink);
}
.btn--ghost{
  background:#fff;
  color: var(--ink);
  border-color: rgba(15,16,18,.35);
}
.btn--ghostLight{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.55);
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  padding: 64px 0 54px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero__bgBubbles{
  position:absolute; inset:-80px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 30%, rgba(15,16,18,.06) 0 40%, transparent 42%),
    radial-gradient(circle at 28% 80%, rgba(15,16,18,.05) 0 42%, transparent 44%),
    radial-gradient(circle at 74% 18%, rgba(201,168,87,.08) 0 36%, transparent 38%),
    radial-gradient(circle at 90% 70%, rgba(15,16,18,.05) 0 44%, transparent 46%);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
  position:relative;
}
.kicker{
  font-size: 12px;
  letter-spacing:.35px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
h1{
  font-family:"Playfair Display", serif;
  font-size: 48px;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: .2px;
}
h1 span{color: var(--accent);}
.lead{
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 22px;
  font-size: 15px;
}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom: 18px;}
.hero__mini{
  display:flex; gap: 12px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  max-width: 620px;
}
.miniCard{
  border: 1px solid var(--line);
  background:#fff;
  padding: 12px 12px;
  min-width: 170px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.miniCard b{
  display:block;
  font-size: 12px;
  letter-spacing:.28px;
  text-transform: uppercase;
}
.miniCard span{font-size:12px;color: var(--muted);}

/* hero image */
.mediaFrame{
  border: 1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mediaFrame img{
  width:100%;
  height: 520px;
  object-fit: cover;
}

/* =========================
   SECTIONS
========================= */
.section{padding: 76px 0;}
.section--light{background:#fff;}
.section--dark{background: var(--bg); color:#fff;}
.section--darkSoft{background: #0F1012; color:#fff; border-top:1px solid rgba(255,255,255,.08);}

.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 18px; margin-bottom: 26px;
}
.head h2{
  font-family:"Playfair Display", serif;
  font-size: 34px;
  letter-spacing:.2px;
}
.head p{color: var(--muted); font-size: 14px; max-width: 620px;}
.section--dark .head p, .section--darkSoft .head p{color: rgba(255,255,255,.70);}
.head--split{align-items:center;}

/* grids */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* luxury cards */
.luxCard{
  border: 1px solid var(--line);
  background:#fff;
  padding: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 240px;
}
.luxCard__top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.luxCard h3{font-family:"Playfair Display", serif;font-size: 20px;}
.luxCard p{color: var(--muted);font-size: 14px;}
.luxCard__actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;}

/* pills (bubble vibe) */
.pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing:.35px;
  text-transform: uppercase;
  border: 1px solid rgba(15,16,18,.16);
  background: rgba(15,16,18,.04);
  color: var(--ink);
}
.pill--dark{
  background: var(--ink);
  border-color: var(--ink);
  color:#fff;
}
.pill--line{
  background: transparent;
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.88);
}
.section--light .pill--line{
  border-color: rgba(15,16,18,.30);
  color: rgba(15,16,18,.80);
}

/* =========================
   ABOUT (dark luxury)
========================= */
.about{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 22px;
  align-items:center;
}
.portraitFrame{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
}
.portraitFrame img{
  width:100%;
  height: 540px;
  object-fit: cover;
  object-position: 50% 20%; /* prevents head cropping */
}
.about__copy h2{
  font-family:"Playfair Display", serif;
  font-size: 34px;
  margin-bottom: 10px;
}
.about__copy p{color: rgba(255,255,255,.74); margin-bottom: 12px; max-width: 640px;}
.about__list{margin: 12px 0 18px; display:grid; gap:10px;}
.lineItem{display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.78); font-size: 14px;}
.dotMini{width:10px;height:10px;border-radius:999px;background: rgba(201,168,87,.28); border:1px solid rgba(201,168,87,.55);}
.about__actions{display:flex; gap:10px; flex-wrap:wrap;}

/* =========================
   FEATURE
========================= */
.feature{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.feature__copy{
  border: 1px solid var(--line);
  background:#fff;
  padding: 24px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.feature__copy h3{
  font-family:"Playfair Display", serif;
  font-size: 22px;
  margin: 10px 0 8px;
}
.feature__copy p{color: var(--muted); margin-bottom: 14px;}
.feature__actions{display:flex; gap:10px; flex-wrap:wrap;}

/* =========================
   REVIEWS
========================= */
.reviewCard{
  border: 1px solid var(--line);
  background:#fff;
  padding: 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.stars{
  color: #111;
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 10px;
}
.quote{
  color: var(--muted);
  font-size: 15px;
}

/* =========================
   BLOG (dark soft)
========================= */
.blogCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 280px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.blogCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.blogCard__img{
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.blogCard__img img{
  width:100%;
  height: 160px;
  object-fit: cover;
}
.blogCard__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.metaRight{color: rgba(255,255,255,.70); font-size: 12px;}
.blogCard h3{
  font-family:"Playfair Display", serif;
  color:#fff;
  font-size: 18px;
  line-height: 1.25;
}
.blogCard p{color: rgba(255,255,255,.72); font-size: 14px;}
.go{margin-top:auto;color:#fff;opacity:.9; font-size: 13px;}

/* =========================
   CONTACT (dark)
========================= */
.contact__card{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.contact__row{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.contact__row b{color:#fff; font-weight:600;}
.contact__row a{color: rgba(255,255,255,.82);}
.contact__row a:hover{color:#fff;}
.contact__actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.iconRow{display:flex; gap:10px; align-items:center; margin-left:auto;}

.footer{
  margin-top: 18px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 16px;
}
.footer span{color:#fff;}

/* =========================
   MOBILE
========================= */
@media (max-width: 980px){
  h1{font-size: 40px;}
  .hero__grid{grid-template-columns:1fr; gap: 22px;}
  .mediaFrame img{height: 360px;}
  .grid3{grid-template-columns:1fr;}
  .grid2{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .portraitFrame img{height: 420px; object-position: 50% 18%;}
  .contact__actions{justify-content:flex-start;}
  .iconRow{margin-left:0;}
}