/* ==========================================================================
   Anvaya Realty — Design System
   Brand: black and champagne gold. A restrained, single-accent palette —
   near-black grounds paired with one warm metallic (never bright, never
   yellow-gold) — carrying the weight of a family real estate legacy rather
   than a typical Dubai-property sales gloss.
   ========================================================================== */

:root {
  /* Color */
  --ink: #0E0E0C;            /* true near-black — dark sections, header, footer */
  --ink-soft: #4A463D;       /* secondary text on light (warm charcoal, not grey) */
  --paper: #F8F4E9;          /* base background — warm ivory */
  --paper-dim: #EFE7D3;      /* recessed panels on paper */
  --cream: #FFFFFF;          /* card surfaces + text-on-dark */

  --gold: #C6A15B;           /* champagne gold — primary accent, on dark grounds */
  --gold-deep: #8A6A2E;      /* deep bronze-gold — text/links/borders on light grounds */
  --gold-pale: #EFE3C8;      /* pale gold tint — badges, pills, soft highlights */

  --line: #E1D6BE;           /* hairline borders on paper */
  --line-dark: rgba(198, 161, 91, 0.28); /* gold-tinted hairline on ink */
  --muted-on-dark: #A79A82;  /* secondary text/labels on dark */

  /* Type */
  --serif: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale (major third-ish, hand tuned) */
  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4rem);
  --step-5:  clamp(3.2rem, 2.3rem + 4.5vw, 5.4rem);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1em; max-width: 62ch; color: var(--ink-soft); }
p.lede { font-size: var(--step-1); max-width: 46ch; }

.serif { font-family: var(--serif); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.on-dark { background: var(--ink); color: var(--cream); }
.on-dark p { color: #CFC7B6; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }
.on-panel { background: var(--paper-dim); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.rule {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}
.on-dark .rule { background: var(--line-dark); }

/* A small gold diamond mark — the one recurring brand device, used sparingly
   (wordmark, section dividers). Not a generic icon set, just this one shape. */
.mark {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 0;
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.on-dark .divider::before, .on-dark .divider::after { background: var(--line-dark); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 14, 12, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.wordmark small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.wordmark-icon {
  height: 30px;
  width: auto;
  display: block;
}
.brand-lockup-link { display: inline-block; }
.brand-lockup { width: 170px; height: auto; display: block; }
.nav-links {
  display: none;
  gap: clamp(1.25rem, 2vw, 2.25rem);
  align-items: center;
  font-size: 0.95rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--muted-on-dark);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--cream);
  border-color: var(--gold);
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
.nav-toggle {
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--cream);
  position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--cream); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--cream); }

.mobile-panel {
  display: none;
  flex-direction: column;
  border-bottom: 1px solid var(--line-dark);
  background: var(--ink);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel a {
  padding: 0.9rem var(--gutter);
  text-decoration: none;
  color: var(--cream);
  border-top: 1px solid var(--line-dark);
  font-size: 1.05rem;
}
@media (min-width: 900px) { .mobile-panel { display: none !important; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: #B08F4C; transform: translateY(-1px); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.on-dark .btn-ghost { border-color: var(--gold); color: var(--cream); }
.on-dark .btn-ghost:hover { background: var(--gold); color: var(--ink); }
.btn-wa { background: var(--ink); color: var(--gold); border-color: var(--gold); }
.btn-wa:hover { background: var(--gold); color: var(--ink); }
.btn-block { width: 100%; justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ---------- Hero (home) — black ground, the one bold moment on the page ---------- */
.hero {
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero h1 { max-width: 17ch; }
.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line-dark);
}
@media (min-width: 620px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .hero-meta { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.hero-meta div { max-width: 26ch; }
.hero-meta .num { font-family: var(--serif); font-size: var(--step-2); color: var(--gold); display: block; }
.hero-meta .cap { font-size: 0.88rem; color: var(--muted-on-dark); }

.route-fig { position: relative; }
.route-fig svg { width: 100%; height: auto; }
.route-path {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: draw 1.6s ease-out 0.2s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .route-path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Differentiator list (not a sequence: rule-marked list) ---------- */
.diff-list { list-style: none; margin: 0; padding: 0; }
.diff-list li {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.diff-list li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) {
  .diff-list li { grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: baseline; }
}
.diff-list h4 { margin: 0; }
.diff-list p { margin: 0; }

/* ---------- Process timeline (genuine sequence → numbered) ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.on-dark .timeline-step { border-color: var(--line-dark); }
.timeline-step:last-child { border-bottom: 1px solid var(--line); }
.on-dark .timeline-step:last-child { border-color: var(--line-dark); }
.timeline-step .n {
  font-family: var(--serif);
  font-size: var(--step-2);
  color: var(--gold-deep);
  min-width: 2.2ch;
}
.on-dark .timeline-step .n { color: var(--gold); }
.timeline-step h4 { margin-bottom: 0.35rem; }
.timeline-step p { max-width: 56ch; }

/* ---------- Services (asymmetric grid) ---------- */
.services-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card {
  background: var(--cream);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: background 0.15s ease;
}
.service-card:hover { background: var(--gold-pale); }
@media (min-width: 780px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card.lead { grid-column: 1 / -1; }
}
.service-card .tag { font-size: 0.82rem; color: var(--gold-deep); font-weight: 600; }

/* ---------- Founders ---------- */
.founder-card { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .founder-card { grid-template-columns: 140px 1fr; align-items: start; } }
.founder-photo {
  aspect-ratio: 1;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  overflow: hidden;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.on-dark .panel { background: #17160F; border-color: var(--line-dark); }

/* ---------- Forms ---------- */
.lead-form { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-deep);
}
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 0.82rem; color: var(--ink-soft); max-width: 40ch; }
.form-success {
  display: none;
  padding: 1.25rem;
  border: 1px solid var(--gold-deep);
  background: rgba(198, 161, 91, 0.1);
  border-radius: var(--radius);
}
.form-success.is-visible { display: block; }
.form-error {
  display: none;
  padding: 1rem 1.25rem;
  border: 1px solid #A6432F;
  background: rgba(166, 67, 47, 0.08);
  border-radius: var(--radius);
  margin-top: 1rem;
}
.form-error.is-visible { display: block; }
.form-error p { color: #7A2F1F; margin: 0; font-size: 0.88rem; }
.lead-form.is-hidden { display: none; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  color: var(--ink);
}
.faq-q .plus { transition: transform 0.2s ease; font-family: var(--serif); font-size: 1.3rem; color: var(--gold-deep); }
.faq-q[aria-expanded="true"] .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-a p { padding-bottom: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #CFC7B6;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
}
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--muted-on-dark);
}
.footer-legal-note {
  font-size: 0.78rem;
  color: var(--muted-on-dark);
  max-width: 70ch;
  margin-top: 1rem;
}

/* ---------- Sticky mobile CTA (landing pages) ---------- */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ink);
  display: flex;
  gap: 1px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
}
.sticky-cta a {
  flex: 1;
  text-align: center;
  padding: 0.95rem 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.sticky-cta .call { background: var(--gold); }
.sticky-cta .wa { background: var(--gold-deep); color: var(--cream); }
.sticky-cta .enquire { background: var(--cream); color: var(--ink); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.badge-strip span { font-size: 0.88rem; color: var(--ink-soft); }
.badge-strip strong { color: var(--ink); }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid div {
  aspect-ratio: 4/3;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.5rem;
}

.pill {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  border-radius: 999px;
  font-size: 0.8rem;
}
.on-dark .pill { border-color: var(--gold); color: var(--gold); }


/* ==========================================================================
   PREMIUM REFINEMENT — visual polish, hierarchy, readability
   ========================================================================== */
:root{
  --ink:#0B0B0A;
  --ink-soft:#4C493F;
  --paper:#FBF8F1;
  --paper-dim:#F1EBDD;
  --cream:#FFFFFF;
  --gold:#C9A661;
  --gold-deep:#876A35;
  --gold-pale:#F2E8D2;
  --line:#DDD3BE;
  --line-dark:rgba(201,166,97,.24);
  --muted-on-dark:#B8AF9E;
  --radius:8px;
  --container:1280px;
}
body{
  font-size:clamp(.98rem,.94rem + .18vw,1.08rem);
  line-height:1.72;
  background:var(--paper);
}
p{color:var(--ink-soft); line-height:1.72}
p.lede{line-height:1.7}
h1,h2,h3{letter-spacing:-.02em}
h1{line-height:1.04}
h2{line-height:1.08}
h4{letter-spacing:.005em}

.site-header{
  background:rgba(11,11,10,.88);
  backdrop-filter:blur(16px) saturate(120%);
  border-bottom:1px solid rgba(201,166,97,.18);
  box-shadow:0 8px 30px rgba(0,0,0,.10);
}
.site-header .wrap{height:82px}
.brand-lockup{filter:drop-shadow(0 3px 10px rgba(0,0,0,.18))}
.wordmark{font-size:1.32rem}
.wordmark-icon{height:32px}
.nav-links{font-size:.86rem; font-weight:600; letter-spacing:.01em}
.nav-links a{color:#C0B7A6; padding:.45rem 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff;border-color:var(--gold)}

.btn{
  min-height:48px;
  padding:.82rem 1.35rem;
  border-radius:6px;
  font-size:.84rem;
  letter-spacing:.01em;
  box-shadow:0 7px 20px rgba(0,0,0,.07);
}
.btn-primary{
  background:linear-gradient(135deg,#D4B477 0%,#B99450 100%);
  color:#0B0B0A;
  border-color:#D4B477;
}
.btn-primary:hover{
  background:linear-gradient(135deg,#DFC48D 0%,#C6A35E 100%);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.btn-ghost{border-color:rgba(11,11,10,.35);background:transparent}
.on-dark .btn-ghost{border-color:rgba(201,166,97,.55);background:rgba(255,255,255,.025)}
.on-dark .btn-ghost:hover{background:var(--gold);border-color:var(--gold)}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%,rgba(201,166,97,.12),transparent 28%),
    radial-gradient(circle at 18% 110%,rgba(201,166,97,.055),transparent 30%),
    #0B0B0A;
  padding-block:clamp(4.5rem,9vw,7.5rem) clamp(3.8rem,7vw,6rem);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(201,166,97,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(201,166,97,.045) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 80%);
  pointer-events:none;
}
.hero>.wrap{position:relative}
.hero h1{font-size:clamp(3.3rem,6vw,5.9rem); max-width:12ch; text-wrap:balance}
.hero .lede{font-size:clamp(1.08rem,1rem + .35vw,1.28rem); color:#D1C9BA; max-width:52ch}
.hero .cta-row{margin-top:2rem}
.route-fig{
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,166,97,.13);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 45%,rgba(201,166,97,.08),transparent 45%),
    rgba(255,255,255,.018);
  box-shadow:inset 0 0 80px rgba(201,166,97,.025),0 30px 80px rgba(0,0,0,.18);
}
.route-fig svg{max-width:92%; filter:drop-shadow(0 8px 18px rgba(201,166,97,.06))}
.hero-meta{
  margin-top:clamp(3rem,5vw,4.5rem);
  padding-top:2rem;
  gap:0;
}
.hero-meta>div{
  padding:0 1.5rem;
  border-left:1px solid var(--line-dark);
}
.hero-meta>div:first-child{padding-left:0;border-left:0}
.hero-meta .num{font-size:clamp(1.65rem,2vw,2.15rem);font-weight:500}
.hero-meta .cap{line-height:1.55;display:block;margin-top:.2rem}

.section{padding-block:clamp(4.5rem,8vw,7.5rem)}
.section-tight{padding-block:3.5rem 4.5rem}
.grid{gap:clamp(2rem,4vw,4.5rem)}
.on-dark{background:#0B0B0A}
.on-panel{background:linear-gradient(135deg,#F1EBDD 0%,#F7F2E7 100%)}

.diff-list li{padding:1.9rem 0}
.diff-list h4,.timeline-step h4{font-size:1rem}
.diff-list p{font-size:.98rem}

.timeline{border:1px solid rgba(201,166,97,.18);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.018)}
.timeline-step{padding:1.55rem 1.75rem;border-top:1px solid var(--line-dark);transition:background .2s ease}
.timeline-step:hover{background:rgba(201,166,97,.055)}
.timeline-step .n{font-size:1.55rem}
.timeline-step p{margin-bottom:0}
.on-dark .timeline-step p{color:#CFC7B6}

.services-grid{
  gap:1px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(42,34,20,.06);
}
.service-card{
  padding:clamp(2rem,3.5vw,2.8rem);
  min-height:230px;
  transition:transform .2s ease,background .2s ease;
}
.service-card:hover{background:#F5EBD8;transform:translateY(-2px)}
.service-card h3{margin-top:.65rem}
.service-card p{font-size:.96rem}
.service-card .tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.25rem .65rem;
  border:1px solid #CDBB96;
  border-radius:999px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.panel{
  border-radius:12px;
  border-color:#D9CCB3;
  box-shadow:0 22px 60px rgba(50,40,20,.08);
  padding:clamp(1.75rem,4vw,3rem);
}
.field{gap:.5rem}
.field label{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:#665E50}
.field input,.field select,.field textarea{
  min-height:50px;
  padding:.82rem 1rem;
  border-radius:6px;
  background:#FFFEFB;
  border-color:#D8CCB5;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:auto}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(201,166,97,.13);
  outline:none;
}
.form-note{line-height:1.5}

.founder-card{
  padding:1.5rem;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(135,106,53,.13);
  border-radius:10px;
}
.founder-photo{
  border-radius:8px;
  box-shadow:0 12px 30px rgba(35,28,17,.10);
}
.pill{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;padding:.35rem .7rem}

.badge-strip{
  padding-block:1.25rem;
  gap:1rem;
}
.badge-strip span{
  flex:1 1 180px;
  padding:1rem 1.1rem;
  background:#F4EDDF;
  border:1px solid #E0D5C1;
  border-radius:8px;
  line-height:1.45;
}

.site-footer{background:#0B0B0A;padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.site-footer p{line-height:1.6}
.footer-grid{gap:3rem}
.footer-bottom{padding-top:1.75rem}

.sticky-cta{box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.sticky-cta a{min-height:54px;padding:.95rem .5rem}

@media (min-width:900px){
  #hdr-cta{display:inline-flex !important}
}
@media (max-width:899px){
  #hdr-cta{display:none !important}
}
@media (max-width:779px){
  .hero h1{font-size:clamp(3rem,14vw,4.5rem)}
  .route-fig{min-height:280px}
  .hero-meta>div{padding:1rem 0;border-left:0;border-top:1px solid var(--line-dark)}
  .hero-meta>div:first-child{padding-top:0;border-top:0}
  .service-card{min-height:0}
  .founder-card{padding:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .service-card:hover,.btn-primary:hover{transform:none}
}

.hero-visual{
  position:relative;
  overflow:hidden;
  min-height:520px;
  border:1px solid rgba(201,166,97,.34);
  border-radius:28px;
  background:#0b0b0a;
  box-shadow:0 30px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-visual:before{
  content:"";
  position:absolute; inset:14px;
  border:1px solid rgba(201,166,97,.12);
  border-radius:20px;
  pointer-events:none; z-index:2;
}
.hero-visual:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(transparent,rgba(7,7,6,.72));
  pointer-events:none; z-index:1;
}
.hero-visual-svg{display:block;width:100%;height:100%;min-height:520px}
@media(max-width:899px){
  .hero-visual,.hero-visual-svg{min-height:390px}
  .hero-visual{border-radius:20px}
}
/* ---------- Photographic aspirational hero ---------- */
.hero-photo{
  position:relative;
  min-height:min(820px, calc(100vh - 76px));
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#11100e;
}
.hero-photo-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("images/hero-dubai-pool.jpg");
  background-size:cover;
  background-position:center 58%;
  transform:scale(1.015);
}
.hero-photo-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,
      rgba(7,7,6,.94) 0%,
      rgba(7,7,6,.83) 28%,
      rgba(7,7,6,.40) 53%,
      rgba(7,7,6,.08) 78%,
      rgba(7,7,6,.18) 100%),
    linear-gradient(0deg,
      rgba(7,7,6,.92) 0%,
      rgba(7,7,6,.16) 30%,
      rgba(7,7,6,.03) 65%);
}
.hero-photo:after{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid rgba(231,210,164,.18);
  border-radius:22px;
  pointer-events:none;
  z-index:-1;
}
.hero-photo-inner{
  min-height:min(820px, calc(100vh - 76px));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-top:clamp(7rem,12vh,10rem);
  padding-bottom:clamp(2rem,4vw,3.5rem);
}
.hero-photo-copy{
  max-width:700px;
}
.hero-photo .eyebrow{
  margin-bottom:1.5rem;
  color:#dbc58f;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:700;
}
.hero-photo h1{
  max-width:12ch;
  margin-bottom:1.5rem;
  font-size:clamp(3.7rem,7.3vw,7rem);
  line-height:.91;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero-photo h1 em{
  font-family:var(--serif);
  font-weight:400;
  color:#ead4a0;
}
.hero-photo .lede{
  max-width:58ch;
  color:rgba(250,248,241,.82);
  font-size:clamp(1rem,1.25vw,1.14rem);
  line-height:1.65;
}
.hero-photo .btn-primary{
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.hero-photo .btn-ghost{
  border-color:rgba(250,248,241,.55);
  color:#fbf8f1;
  background:rgba(10,10,9,.12);
  backdrop-filter:blur(5px);
}
.hero-photo .btn-ghost:hover{
  border-color:#c9a661;
}
.hero-photo-bottom{
  width:100%;
}
.hero-location{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:rgba(250,248,241,.72);
  font-size:.68rem;
  letter-spacing:.18em;
  font-weight:700;
  margin-bottom:1.1rem;
}
.hero-location-line{
  width:42px;
  height:1px;
  background:#c9a661;
}
.hero-location-arrow{
  color:#c9a661;
  font-size:1rem;
  letter-spacing:0;
}
.hero-photo .hero-meta{
  margin-top:0;
  padding-top:1.25rem;
  border-top:1px solid rgba(250,248,241,.18);
  gap:1.5rem;
}
.hero-photo .hero-meta .num{
  font-size:clamp(1.7rem,2.5vw,2.35rem);
}
.hero-photo .hero-meta .cap{
  color:rgba(250,248,241,.67);
}
@media(max-width:899px){
  .hero-photo,.hero-photo-inner{min-height:760px}
  .hero-photo-bg{
    background-position:63% center;
  }
  .hero-photo-overlay{
    background:
      linear-gradient(90deg,rgba(7,7,6,.94),rgba(7,7,6,.55)),
      linear-gradient(0deg,rgba(7,7,6,.96),rgba(7,7,6,.10) 62%);
  }
  .hero-photo-inner{
    padding-top:6.5rem;
    padding-bottom:1.5rem;
  }
  .hero-photo h1{font-size:clamp(3.25rem,14vw,5rem)}
  .hero-photo .hero-meta{
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }
  .hero-photo .hero-meta>div{
    padding:0;
    border:0;
  }
}
@media(max-width:520px){
  .hero-photo,.hero-photo-inner{min-height:820px}
  .hero-photo:after{inset:10px;border-radius:16px}
  .hero-photo .hero-meta{
    grid-template-columns:1fr 1fr;
  }
  .hero-photo .hero-meta .num{font-size:1.55rem}
  .hero-photo .hero-meta .cap{font-size:.75rem}
  .hero-location{margin-bottom:.75rem}
}