/* ============================================================
   AAROHA ESTATE — Base (reset, typography, primitives)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--mist); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 0 0 .6em;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

::selection { background: var(--gold-500); color: var(--navy-900); }

/* Refined scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-500), var(--gold-600)); border-radius: var(--r-pill); border: 2px solid var(--mist); }

/* Accessible focus */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: var(--z-toast);
  background: var(--navy-800);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; color: var(--gold-300); }

/* ---------- Type scale ---------- */
.display-hero {
  font-size: clamp(2.15rem, 5.4vw, 4.1rem);
  font-weight: 400;
  letter-spacing: .045em;
  line-height: 1.22;
  text-wrap: balance;
}
.h-display { font-size: clamp(1.75rem, 3.7vw, 2.7rem); }
.h-lead { font-size: clamp(1.15rem, 2.05vw, 1.55rem); }
.lead { font-size: 1.06rem; color: var(--ink-500); font-weight: 300; }

.text-gold { color: var(--gold-500); }
.text-gradient-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(3rem, 5.5vw, 5rem); }

.bg-light { background: var(--paper); }
.bg-mist { background: var(--mist); }
.bg-navy { background: var(--grad-navy); color: rgba(235, 240, 248, .82); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy .lead { color: rgba(214, 224, 238, .68); }

/* Section header pattern */
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head.text-start { margin-inline: 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1.1rem;
}
.eyebrow::before, .eyebrow.eyebrow-center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.eyebrow.eyebrow-center::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.bg-navy .eyebrow { color: var(--gold-400); }
.section-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(.82rem, 1.35vw, .95rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-500);
  max-width: 660px;
  margin-inline: auto;
}
.bg-navy .section-sub { color: rgba(214, 224, 238, .66); }

/* ---------- Gold divider flourish ---------- */
.divider-gold {
  width: 72px; height: 3px;
  background: var(--grad-gold);
  border-radius: var(--r-pill);
  margin: 1.1rem 0 1.4rem;
}
.section-head:not(.text-start) .divider-gold { margin-inline: auto; }

/* ---------- Micro-utilities (only what this design uses —
   leaner than Bootstrap's full utilities bundle) ---------- */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.text-center { text-align: center !important; }
.text-muted { color: var(--ink-500) !important; }
.text-decoration-underline { text-decoration: underline !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-lg-5 { margin-top: 1rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-4.mt-lg-5 { margin-top: 1.5rem; }
@media (min-width: 992px) { .mt-lg-5, .mt-4.mt-lg-5 { margin-top: 3rem !important; } }

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---------- Utility ---------- */
.pos-rel { position: relative; }
.gold-rule { border-top: 1px solid rgba(198,161,91,.35); }
.fw-300 { font-weight: 300; }
.ls-wide { letter-spacing: .18em; }

/* Decorative watermark word */
.watermark {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(13, 27, 46, .032);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.bg-navy .watermark { color: rgba(255,255,255,.025); }