/* ==========================================================================
   Real Value Realty — site stylesheet
   Ported from the Claude Design source at design/Real Value Website.dc.html.
   The prototype carried every rule inline; here they are tokenised so the
   brand can be retuned from the :root block alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — from deliverables/README.txt (the brand kit) */
  --midnight: #0c1a2e;
  --gold: #cda24e;
  --gold-deep: #9a7729;
  --ivory: #f4f1ea;
  --mist: #9fb0c6;

  /* Navy ground, darkest to lightest */
  --navy-900: #071120;
  --navy-850: #081422;
  --navy-800: #0c1a2e;
  --navy-700: #0e2035;
  --navy-650: #132741;
  --navy-600: #152b44;
  --navy-500: #1a2f47;
  --slate-500: #2f4a68;

  /* Gold ramp */
  --gold-300: #e0bd76;
  --gold-500: #cda24e;
  --gold-700: #876924;   /* 4.57 on cream, 5.15 on white — eyebrows are 11px */
  --gold-900: #5c4413;
  --gold-950: #241e0b;   /* 7.02 on the gold band */

  /* Ivory ground */
  --cream-100: #f4f1ea;
  --cream-50: #faf9f6;
  --surface: #fff;
  --rule-cream: #dcd8d0;
  --ink-900: #141b26;

  /* Text on the ivory ground.
     Solved against their real backgrounds: body copy clears 7:1 (WCAG AAA),
     incidental small text clears 4.5:1. Hue and saturation are unchanged from
     the design — only lightness moved. */
  --on-light-strong: #141b26;
  --on-light: #4a515c;        /* 7.10 on cream, 8.01 on white */
  --on-light-mid: #49515d;    /* 7.11 on cream */
  --on-light-muted: #7b766b;  /* 4.51 on white */
  --on-light-faint: #a8a394;  /* decorative slot labels only */

  /* Text on the navy ground */
  --on-dark-strong: #f4f1ea;
  --on-dark: #c9d2df;         /* 11.45 on navy-800 */
  --on-dark-muted: #a9b8ca;   /*  8.64 on navy-800 */
  --on-dark-dim: #9babbe;     /*  7.02 on navy-700 */
  --on-dark-soft: #9cabbd;    /*  7.02 on navy-700 */
  --on-dark-faint: #9aa6b7;   /*  7.08 on navy-800, 7.51 on navy-850 */
  --on-dark-fainter: #748498; /*  4.57 on navy-800, 4.85 on navy-850 — legal, disclaimers */
  --on-dark-ghost: #5b6b80;   /* decorative slot labels only */

  /* Hairlines on navy */
  --rule-gold-10: rgba(205, 162, 78, .1);
  --rule-gold-12: rgba(205, 162, 78, .12);
  --rule-gold-14: rgba(205, 162, 78, .14);
  --rule-gold-16: rgba(205, 162, 78, .16);
  --rule-gold-18: rgba(205, 162, 78, .18);
  --rule-gold-22: rgba(205, 162, 78, .22);
  --rule-gold-30: rgba(205, 162, 78, .3);
  --rule-gold-45: rgba(205, 162, 78, .45);
  --rule-white-08: rgba(255, 255, 255, .08);

  /* Type — three roles, one job each.
     display : headlines and the brand lockup. High contrast, low x-height;
               beautiful large, unreadable as body copy.
     prose   : anything a visitor actually reads a paragraph of. A text serif
               with a tall x-height and sturdy strokes, drawn for screens.
     ui      : chrome — nav, buttons, labels, form controls, tabular headers.
               Geometric sans, tracked out, never used below 1.6 line-height. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-prose: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Reading measure. ~68 characters is the comfortable span for continuous
     prose; beyond it the eye loses the line on the return sweep. */
  --measure-prose: 68ch;

  /* Layout */
  --wrap: 1320px;
  --sec-y: 100px;
  --sec-x: 40px;
  --nav-h: 88px;

  /* Radii */
  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 18px;
  --r-pill: 999px;

  /* Motion */
  --t-fast: .18s ease;
  --t-mid: .2s ease;

  /* The prototype's placeholder hatch, kept as a token so any slot that has
     no photograph yet degrades to the same treatment. */
  --hatch-navy: repeating-linear-gradient(45deg, #12263c 0 14px, #0f2035 14px 28px);
  --hatch-slate: repeating-linear-gradient(45deg, #1b2735 0 14px, #161f2c 14px 28px);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-800);
  color: var(--on-dark);
  font-family: var(--font-prose);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.72;
  overflow-x: hidden;
  /* No -webkit-font-smoothing: antialiased here. On a dark ground it thins
     every stroke, which is the opposite of what this page needs. */
}

/* Chrome uses the sans; prose inherits the serif from body. */
.navlinks, .mobile-menu, .btn, .badge, .chip, .tag, .eyebrow, .search__label,
.input, .seg label, .field > label, .field > legend, .stat__label, .slot-label,
.member__role, .insight__kicker, .contact-list dt, .footer-col h2,
.footer-legal, .social, .costs thead th, .costs .is-group th,
.chat__status, .chat__prompt, .chat__send, .chat__input, .form-fineprint,
.link-more, .criterion__num, .prop__num, .lockup__sub, .lockup__tagline {
  font-family: var(--font-ui);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p { margin: 0; }
img, svg, video { max-width: 100%; }
img, video { display: block; }

a { color: var(--gold-500); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-300); }

button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { font-family: var(--font-ui); }
button { cursor: pointer; }

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

/* Themed keyboard focus everywhere — never the default browser ring. */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 3px;
}
.sec--cream :focus-visible,
.sec--gold :focus-visible { outline-color: var(--gold-900); }

/* Skip link for keyboard users. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 999;
  background: var(--gold-500);
  color: var(--navy-800);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 14px 22px;
  border-radius: var(--r-md);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; color: var(--navy-800); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; width: 100%; }

.sec { padding: var(--sec-y) var(--sec-x); }
.sec--cream { background: var(--cream-100); color: var(--on-light); }
.sec--navy { background: var(--navy-800); }
.sec--deep { background: var(--navy-850); }
.sec--gold { background: var(--gold-500); color: var(--gold-950); }
.sec--offplan { background: radial-gradient(120% 130% at 80% 0%, var(--navy-500), var(--navy-800) 60%); }
.sec--ruled-top { border-top: 1px solid var(--rule-gold-10); }
.sec--ruled-bottom { border-bottom: 1px solid var(--rule-gold-12); }

/* Vertical rhythm inside a section. */
.stack { display: flex; flex-direction: column; }
.stack--20 { gap: 20px; }
.stack--44 { gap: 44px; }
.stack--48 { gap: 48px; }
.stack--52 { gap: 52px; }

/* Heading block sitting left, supporting text or a link sitting right. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.sec-head--wide { gap: 48px; }
.sec-head__title { display: flex; flex-direction: column; gap: 14px; }
/* Blocks carry their own measure as a token, so the rule stays here and only
   the value travels with the markup.
   The value rides on data-measure rather than an inline style: the site's
   Content-Security-Policy sets style-src 'self', which blocks style="" — an
   inline custom property here would be silently dropped by the browser. */
[data-measure="380"] { --measure: 380px; }
[data-measure="500"] { --measure: 500px; }
[data-measure="520"] { --measure: 520px; }
[data-measure="600"] { --measure: 600px; }
[data-measure="620"] { --measure: 620px; }
[data-measure="640"] { --measure: 640px; }
[data-measure="660"] { --measure: 660px; }
[data-measure="700"] { --measure: 700px; }

.sec-head__title,
.stack > p,
.stack > ul { max-width: var(--measure, none); }

/* Auto-fitting card grids — the min-width is what decides the breakpoint. */
.grid { display: grid; gap: 26px; }
.grid--230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px; }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

/* Hairline-separated grid: the gap itself is the rule. */
.grid--hairline {
  gap: 1px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.sec--cream .eyebrow { color: var(--gold-700); }
.sec--gold .eyebrow { color: var(--gold-900); }
.eyebrow--spaced { margin-bottom: 14px; }

.h1 {
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--on-dark-strong);
  text-wrap: balance;
}
.h1 em { font-style: italic; color: var(--gold-500); }

.h2 {
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.1;
  color: var(--on-dark-strong);
  text-wrap: balance;
}
.sec--cream .h2 { color: var(--ink-900); }
.sec--gold .h2 { color: var(--navy-800); font-size: clamp(34px, 3.8vw, 54px); line-height: 1.05; }
.h2--tight { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; }

/* Prose scale.
   Sizes are up sharply on the prototype, which set body copy at 14–15.5px in
   a 300-weight geometric sans — small, light and low x-height all at once.
   Continuous text now starts at 17px and the standing paragraph is 18px, with
   line-height easing as size grows, which is how leading actually works: long
   lines need more, display sizes need less. */
.lede {
  font-size: clamp(19px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--on-dark-muted);
  text-wrap: pretty;
  max-width: var(--measure, 40ch);
}
.lede em { font-style: italic; color: var(--gold-500); }

.body    { font-size: 18px;   line-height: 1.72; text-wrap: pretty; }
.body--lg { font-size: 19px;  line-height: 1.68; text-wrap: pretty; }
.body--sm { font-size: 17px;  line-height: 1.72; text-wrap: pretty; }
.body--xs { font-size: 16.5px; line-height: 1.7; text-wrap: pretty; }

/* Cap the line length of every paragraph that is not already constrained by
   its card. Card copy is narrow by construction, so this only bites on the
   full-width blocks where it matters. */
.body, .body--lg, .body--sm, .body--xs { max-width: var(--measure, var(--measure-prose)); }

/* An aside sits in a column beside the heading, not across the page, so it
   keeps a narrower default than running prose. Declared after the rule above
   so it wins on elements carrying both classes. */
.sec-head__aside { max-width: var(--measure, 400px); }
.prop .body--sm, .service__item .body--xs, .criterion .body--xs,
.step .body--xs, .insight .body--xs, .principle .body--xs { max-width: none; }
.sec--cream .body, .sec--cream .body--lg,
.sec--cream .body--sm, .sec--cream .body--xs { color: var(--on-light); }
.sec--navy .body, .sec--deep .body { color: var(--on-dark-muted); }
.sec--navy .body--sm, .sec--deep .body--sm,
.sec--navy .body--xs, .sec--deep .body--xs { color: var(--on-dark-soft); }

/* A quiet aside set against a gold rule rather than a box. */
.note {
  font-size: 17px;
  line-height: 1.72;
  max-width: var(--measure-prose);
  color: var(--on-dark-faint);
  border-left: 2px solid var(--gold-500);
  padding-left: 18px;
}

/* Bulleted claim list — the diamond is the brand's facet mark in miniature. */
ol.grid, ul.grid, .claims { list-style: none; margin: 0; padding: 0; }

.claims { display: flex; flex-direction: column; gap: 13px; }
.claims--airy { gap: 14px; padding-top: 10px; }
.claims--pad { padding-top: 8px; }
.claim { display: flex; align-items: baseline; gap: 13px; }
.claim::before {
  content: "\25C6";
  color: var(--gold-500);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.sec--cream .claim::before { color: var(--gold-700); font-size: 12px; }
.claim span { font-size: 17px; line-height: 1.6; color: var(--on-dark); }
.sec--cream .claim span { color: var(--on-light-mid); }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  padding: 17px 34px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn--primary { background: var(--gold-500); color: var(--navy-800); }
.btn--primary:hover { background: var(--gold-300); color: var(--navy-800); }

.btn--outline { border-color: var(--gold-500); color: var(--on-dark-strong); }
.btn--outline:hover { background: rgba(205, 162, 78, .14); color: var(--gold-500); }

.btn--ghost {
  border-color: rgba(244, 241, 234, .22);
  color: var(--on-dark);
  font-weight: 400;
}
.btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-500); }

.btn--dark { background: var(--navy-800); color: var(--gold-500); }
.btn--dark:hover { background: var(--ink-900); color: var(--gold-500); }

/* Full-width submit inside a form card. */
.btn--block {
  width: 100%;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 18px;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }


/* --------------------------------------------------------------------------
   6. Badges & tags
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--navy-800);
  background: var(--gold-500);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.badge--lg {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 13px;
  align-self: flex-start;
}
.badge--outline {
  background: transparent;
  color: var(--gold-500);
  border: 1px solid var(--rule-gold-45);
}


/* Static area chips under the community grid. */
.chip {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--on-light);
  border: 1px solid var(--rule-cream);
  background: var(--surface);
  padding: 9px 16px;
  border-radius: 22px;
}
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   7. Brand lockup
   The stacked mark: gem over "REAL VALUE", a ruled "REALTY", then the tagline.
   Sized by a single --lockup-scale so nav and footer share one definition.
   -------------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}
.lockup__gem { display: block; flex-shrink: 0; width: 46px; height: auto; }
.lockup__text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lockup__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .15em;
  line-height: 1;
  color: var(--gold-500);
  white-space: nowrap;
}
.lockup__rule {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;
}
.lockup__rule::before,
.lockup__rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(205, 162, 78, .5);
}
.lockup__sub {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: .46em;
  line-height: 1;
  color: var(--gold-500);
  padding-left: .46em;
  white-space: nowrap;
}
.lockup__tagline {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 6.5px;
  letter-spacing: .13em;
  line-height: 1;
  color: var(--on-dark-soft);
  white-space: nowrap;
  padding-left: .13em;
}

/* Footer runs the lockup stacked and larger. */
.lockup--stacked {
  flex-direction: column;
  align-items: center;
  gap: 15px;
  align-self: flex-start;
}
.lockup--stacked .lockup__gem { width: 58px; height: auto; }
.lockup--stacked .lockup__text { gap: 9px; }
.lockup--stacked .lockup__word { font-size: 31px; letter-spacing: .14em; }
.lockup--stacked .lockup__rule { gap: 11px; }
.lockup--stacked .lockup__rule::before,
.lockup--stacked .lockup__rule::after { background: var(--rule-gold-45); }
.lockup--stacked .lockup__sub { font-size: 9.5px; letter-spacing: .5em; padding-left: .5em; }
.lockup--stacked .lockup__tagline { font-size: 7.5px; letter-spacing: .15em; padding-left: .15em; }

/* --------------------------------------------------------------------------
   8. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 20, 34, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-gold-16);
}

.navbar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 16px var(--sec-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.navlinks { display: flex; align-items: center; gap: 34px; }
.navlinks a {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--on-dark);
  font-weight: 400;
}
.navlinks a:hover { color: var(--gold-500); }
.navlinks .btn { padding: 12px 22px; font-weight: 500; font-size: 12.5px; letter-spacing: .1em; }
.navlinks .btn:hover { color: var(--navy-800); }

.burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(205, 162, 78, .42);
  border-radius: var(--r-md);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.mobile-menu {
  display: none;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 6px 16px 20px;
  flex-direction: column;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu a {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--on-dark);
  padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  padding: 16px;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px var(--sec-x) 90px;
  background: radial-gradient(140% 120% at 50% -20%, var(--navy-500) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  overflow: hidden;
}

/* Sits behind the reel so a missing or still-loading video never shows a
   blank rectangle. The reel paints over it once it can play. */
.hero__placeholder {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, #12263c 0 18px, #0f2035 18px 36px);
}

.hero__reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__reel[data-ready="true"] { opacity: 1; }

/* Three stacked scrims: a left-to-right darkener for headline legibility, a
   bottom fade into the next section, and a faint gold rake for texture. */
.hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.hero__scrim--side {
  background: linear-gradient(100deg, rgba(7, 17, 32, .92) 0%, rgba(9, 21, 38, .8) 42%, rgba(9, 21, 38, .42) 100%);
}
.hero__scrim--foot {
  background: linear-gradient(to top, var(--navy-800) 0%, rgba(12, 26, 46, .35) 26%, transparent 55%);
}
.hero__scrim--rake {
  background-image: repeating-linear-gradient(115deg, rgba(205, 162, 78, .045) 0 1px, transparent 1px 84px);
}

.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 840px;
}
.hero__copy .lede { max-width: 640px; }

/* Eyebrow with a leading rule. */
.hero__kicker { display: flex; align-items: center; gap: 14px; }
.hero__kicker::before {
  content: "";
  height: 1px;
  width: 44px;
  background: var(--gold-500);
  flex-shrink: 0;
}
.hero__kicker span {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   10. Trust strip
   Carries short verifiable phrases, not headline figures — so the display
   size is smaller than a number would take and the lines are allowed to wrap.
   -------------------------------------------------------------------------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding-top: 14px;
  margin: 0;
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  max-width: 240px;
}
.stat dd { margin: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  color: var(--gold-500);
  text-wrap: balance;
}
.stat__label {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #98a6b6;
  font-weight: 400;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. Value-prop panels
   A hairline grid on the ivory ground: the 1px gap plus the wrapper border
   draw every rule, so the panels themselves stay plain white.
   -------------------------------------------------------------------------- */
.props {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--rule-cream);
  border: 1px solid var(--rule-cream);
}
.prop {
  background: var(--surface);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prop__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--gold-700);
  letter-spacing: .14em;
}
.prop h3 { font-size: 25px; color: var(--ink-900); line-height: 1.15; }

/* --------------------------------------------------------------------------
   12. Communities
   -------------------------------------------------------------------------- */
.community {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  background-image: var(--hatch-slate);
  background-size: cover;
  background-position: center;
  height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: inherit;
}
.community__caption {
  padding: 24px;
  background: linear-gradient(transparent, rgba(8, 20, 34, .9));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.community__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--on-dark-strong);
  line-height: 1.1;
}
.community__meta { font-size: 15.5px; line-height: 1.6; color: var(--on-dark-muted); font-weight: 400; }
a.community:hover .community__name { color: var(--gold-500); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 60px;
  align-items: start;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--rule-cream);
  border-radius: var(--r-2xl);
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-card__fields { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > .field { flex: 1; min-width: 130px; }

.field { display: flex; flex-direction: column; gap: 7px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field > legend + .seg { margin-top: 7px; }
.field > label,
.field > legend {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-700);
  padding: 0;
}

.input {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  padding: 16px 18px;
  border: 1px solid var(--rule-cream);
  border-radius: var(--r-md);
  background: var(--cream-50);
  color: var(--ink-900);
  outline: none;
  width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input::placeholder { color: var(--on-light-muted); }
.input:focus { border-color: var(--gold-500); background: var(--surface); }
textarea.input { resize: vertical; min-height: 96px; }

/* Segmented "I'm looking to" control, built on real radios. */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 11px 20px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--on-light);
  border: 1px solid var(--rule-cream);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.seg label:hover { border-color: var(--gold-500); color: var(--gold-700); }
.seg input:checked + label {
  background: var(--ink-900);
  color: var(--cream-100);
  border-color: var(--ink-900);
}
.seg input:focus-visible + label { outline: 2px solid var(--gold-700); outline-offset: 2px; }

/* The one field on these forms that asks a person to decide something, so it
   reads as a sentence rather than as fine print. Unticked by default, always:
   a pre-ticked box is not consent under the UAE telemarketing rules. */
.field--consent label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-light-muted);
}
.field--consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--gold-700);
  cursor: pointer;
}

.form-fineprint {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-light-muted);
  text-align: center;
}

/* Inline result banner shown after a submit. */
.form-status {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 13px 16px;
  border-radius: var(--r-md);
  display: none;
}
.form-status[data-state="ok"] {
  display: block;
  background: rgba(154, 119, 41, .1);
  border: 1px solid rgba(154, 119, 41, .35);
  color: var(--gold-900);
}
.form-status[data-state="error"] {
  display: block;
  background: rgba(160, 60, 40, .08);
  border: 1px solid rgba(160, 60, 40, .3);
  color: #8c3a26;
}
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* --------------------------------------------------------------------------
   14. Valuation band (gold ground)
   -------------------------------------------------------------------------- */
.valuation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.valuation__copy { display: flex; flex-direction: column; gap: 18px; max-width: 660px; }
.valuation__copy p { font-size: 16px; line-height: 1.7; color: var(--gold-950); max-width: 540px; }
.valuation__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 320px;
  flex: 1;
  max-width: 400px;
}
.valuation__form > .btn { margin-top: 4px; }
.valuation__form .input {
  padding: 17px 20px;
  border-color: rgba(12, 26, 46, .25);
  background: rgba(255, 255, 255, .65);
  color: var(--navy-800);
}
.valuation__form .input::placeholder { color: rgba(12, 26, 46, .55); }
.valuation__form .input:focus { border-color: var(--navy-800); background: var(--surface); }
.valuation__form .form-status[data-state="ok"] {
  background: rgba(12, 26, 46, .1);
  border-color: rgba(12, 26, 46, .3);
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   15. AI agent chat widget
   -------------------------------------------------------------------------- */
.chat[hidden] { display: none; }

.chat {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.chat__launcher {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--gold-500);
  border: none;
  padding: 15px 22px;
  border-radius: 30px;
  color: var(--navy-800);
  box-shadow: 0 12px 34px rgba(4, 10, 20, .45);
  transition: background var(--t-fast);
}
.chat__launcher:hover { background: var(--gold-300); }
.chat__launcher span {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.chat[data-open="true"] .chat__launcher { display: none; }

.chat__panel {
  display: none;
  width: 392px;
  max-width: calc(100vw - 52px);
  height: 540px;
  max-height: calc(100vh - 140px);
  background: var(--navy-700);
  border: 1px solid rgba(205, 162, 78, .28);
  border-radius: var(--r-2xl);
  box-shadow: 0 26px 70px rgba(4, 10, 20, .6);
  overflow: hidden;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-mid), transform var(--t-mid);
}
.chat[data-open="true"] .chat__panel {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.chat__header {
  background: var(--navy-800);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--rule-gold-22);
  flex-shrink: 0;
}
.chat__id { display: flex; align-items: center; gap: 12px; }
.chat__id svg { display: block; flex-shrink: 0; }
.chat__name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--on-dark-strong); line-height: 1.25; }
.chat__status { font-weight: 300; font-size: 10.5px; letter-spacing: .1em; color: #7f9bb8; line-height: 1.25; }
.chat__close {
  background: transparent;
  border: none;
  color: var(--on-dark-soft);
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  transition: color var(--t-fast);
}
.chat__close:hover { color: var(--gold-500); }

.chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--navy-700);
  overscroll-behavior: contain;
}

.chat__row { display: flex; }
.chat__row--agent { justify-content: flex-start; }
.chat__row--user { justify-content: flex-end; }

.chat__bubble {
  max-width: 84%;
  font-family: var(--font-prose);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.6;
  padding: 14px 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__row--agent .chat__bubble {
  background: var(--navy-600);
  border: 1px solid var(--rule-gold-16);
  border-radius: 14px 14px 14px 4px;
  color: #dce5ef;
}
.chat__row--user .chat__bubble {
  background: var(--gold-500);
  border-radius: 14px 14px 4px 14px;
  color: var(--navy-800);
  font-weight: 400;
}
.chat__bubble--thinking { color: var(--on-dark-soft); font-style: italic; }
.chat__log { font-size: 15.5px; }

.chat__prompts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 18px 14px;
  background: var(--navy-700);
  flex-shrink: 0;
}
.chat__prompt {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--gold-500);
  background: transparent;
  border: 1px solid rgba(205, 162, 78, .34);
  padding: 8px 13px;
  border-radius: 18px;
  text-align: left;
  transition: background var(--t-fast);
}
.chat__prompt:hover { background: rgba(205, 162, 78, .12); }

.chat__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--navy-800);
  border-top: 1px solid var(--rule-gold-18);
  flex-shrink: 0;
}
.chat__input {
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 13.5px;
  padding: 13px 15px;
  border: 1px solid var(--rule-gold-22);
  border-radius: var(--r-md);
  background: var(--navy-650);
  color: var(--on-dark-strong);
  outline: none;
  min-width: 0;
  transition: border-color var(--t-fast);
}
.chat__input::placeholder { color: var(--on-dark-faint); }
.chat__input:focus { border-color: var(--gold-500); }

.chat__send {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .1em;
  border: none;
  padding: 14px 17px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: var(--gold-500);
  color: var(--navy-800);
  transition: background var(--t-fast), opacity var(--t-fast);
}
.chat__send:hover { background: var(--gold-300); }
.chat__send:disabled {
  background: #6f5c30;
  color: #a89468;
  cursor: default;
  opacity: .7;
}

.chat__disclaimer {
  background: var(--navy-800);
  padding: 0 18px 14px;
  flex-shrink: 0;
}
.chat__disclaimer span {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--on-dark-fainter);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-850); padding: 70px var(--sec-x) 34px; }
.footer-top { display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; gap: 20px; max-width: 320px; }
.footer-brand p { font-weight: 400; font-size: 15.5px; line-height: 1.7; color: #95a1b0; }

.social { display: flex; gap: 10px; }
.social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule-gold-30);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-500);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.social a:hover { background: rgba(205, 162, 78, .12); border-color: var(--gold-500); }

.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h2 {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 600;
  margin: 0 0 4px;
}
.footer-col a { font-family: var(--font-ui); font-size: 14px; color: #a9b5c4; font-weight: 400; }
.footer-col a:hover { color: var(--gold-500); }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-legal p, .footer-legal a {
  font-size: 12.5px;
  color: var(--on-dark-fainter);
  letter-spacing: .05em;
  font-weight: 300;
}
.footer-legal nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--gold-500); }

/* --------------------------------------------------------------------------
   17. Services — the two-sided panel
   -------------------------------------------------------------------------- */
.services {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  background: var(--rule-gold-18);
  border: 1px solid var(--rule-gold-18);
  border-radius: var(--r-2xl);
}
.service {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.service--buyers { background: var(--navy-800); }
.service--developers { background: var(--navy-700); }
.service__head { display: flex; flex-direction: column; gap: 12px; }
.service__head h3 { font-size: 30px; color: var(--on-dark-strong); line-height: 1.15; }
.service__list { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.service__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 162, 78, .2);
}
.service__item h4 { font-size: 21px; color: var(--on-dark-strong); }

/* --------------------------------------------------------------------------
   18. Process
   -------------------------------------------------------------------------- */
.step { display: flex; flex-direction: column; gap: 13px; }
.step__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  color: var(--gold-500);
}
.step h3 { font-size: 22px; color: var(--on-dark-strong); }
.sec--cream .step h3 { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   19. Team profiles
   Unused until real consultants are added — the markup template is commented
   out in index.html, and these rules are what it expects.
   -------------------------------------------------------------------------- */
.member { display: flex; flex-direction: column; gap: 16px; }
.member__portrait {
  height: 300px;
  border-radius: var(--r-lg);
  background-image: var(--hatch-navy);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member__id { display: flex; flex-direction: column; gap: 4px; }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--on-dark-strong); }
.member__role {
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.member__bio { font-weight: 400; font-size: 16px; color: var(--on-dark-soft); line-height: 1.62; padding-top: 5px; }
.slot-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--on-dark-ghost);
}

/* --------------------------------------------------------------------------
   20. Developers & owners — contact card
   -------------------------------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: center;
}
.contact-card {
  background: var(--navy-700);
  border: 1px solid var(--rule-gold-18);
  border-radius: var(--r-2xl);
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-card__head { display: flex; flex-direction: column; gap: 6px; }
.contact-card .eyebrow { font-size: 10.5px; letter-spacing: .2em; }
.contact-card > .btn { font-size: 13.5px; padding: 17px; }
.contact-card__title { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--on-dark-strong); }
.contact-card__hours { font-weight: 400; font-size: 15px; color: var(--on-dark-soft); }
.contact-list { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.contact-list > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--rule-white-08);
  padding-top: 16px;
}
.contact-list dt {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.contact-list dd { margin: 0; font-weight: 400; font-size: 17px; color: var(--on-dark-strong); line-height: 1.55; }
.contact-list dd a { color: var(--on-dark-strong); }
.contact-list dd a:hover { color: var(--gold-500); }
.contact-list dd.is-phone { font-family: var(--font-display); font-weight: 600; font-size: 24px; }

/* ==========================================================================
   Post-launch content sections
   Added when listings came out of scope: the site now carries its weight
   through explanation rather than inventory.
   ========================================================================== */

/* --- Off-plan criteria ---------------------------------------------------- */
.criteria { counter-reset: none; }
.criterion {
  background: rgba(244, 241, 234, .045);
  border: 1px solid var(--rule-gold-16);
  border-radius: var(--r-xl);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.criterion__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--gold-500);
}
.criterion h3 {
  font-size: 23px;
  color: var(--on-dark-strong);
  line-height: 1.15;
}

/* --- Communities: captions now carry a sentence, not a price -------------- */
.community { height: auto; min-height: 290px; }
.community__caption {
  padding: 28px 24px 24px;
  background: linear-gradient(transparent, rgba(8, 20, 34, .82) 22%, rgba(8, 20, 34, .96));
  gap: 8px;
}
.community__meta { line-height: 1.6; }

/* --- Costs table ---------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule-cream);
  border-radius: var(--r-xl);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.costs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-prose);
  min-width: 620px;
}
.costs th, .costs td {
  text-align: left;
  padding: 17px 22px;
  border-bottom: 1px solid var(--rule-cream);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--on-light);
}
.costs thead th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--cream-50);
  white-space: nowrap;
}
.costs tbody th[scope="row"] {
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink-900);
  white-space: nowrap;
}
.costs .is-num {
  text-align: right;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.costs tbody tr:last-child th,
.costs tbody tr:last-child td { border-bottom: none; }

/* The subtotal line and the "if you are financing" divider. */
.costs .is-total th, .costs .is-total td {
  background: rgba(205, 162, 78, .07);
  border-top: 1px solid var(--gold-500);
  border-bottom: 1px solid var(--gold-500);
  color: var(--ink-900);
  font-weight: 500;
}
.costs .is-group th {
  background: var(--cream-50);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-700);
  padding-top: 14px;
  padding-bottom: 14px;
}

/* --- Callout under the table --------------------------------------------- */
.callout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 2px solid var(--gold-700);
  padding-left: 22px;
  max-width: 860px;
}
.callout strong { font-weight: 500; color: var(--ink-900); }

/* --- FAQ ------------------------------------------------------------------ */
.faq {
  border-top: 1px solid var(--rule-gold-16);
  max-width: 900px;
}
.faq__item { border-bottom: 1px solid var(--rule-gold-16); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--on-dark-strong);
  transition: color var(--t-fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-500); }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--gold-500);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item[open] summary { color: var(--gold-500); }
.faq__body { padding: 0 56px 28px 0; max-width: var(--measure-prose); }
.faq__body .body--sm { color: var(--on-dark-muted); }

/* --- Operating principles (replaces the invented team profiles) ----------- */
.principles {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--rule-gold-16);
  border: 1px solid var(--rule-gold-16);
}
.principle {
  background: var(--navy-700);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.principle h3 { font-size: 22px; color: var(--on-dark-strong); line-height: 1.2; }

/* --- A note set on the ivory ground --------------------------------------- */
.note--light {
  color: var(--on-light);
  border-left-color: var(--gold-700);
}

@media (max-width: 768px) {
  .faq__item summary { font-size: 20px; padding: 22px 0; }
  .faq__body { padding-right: 0; }
  .costs th, .costs td { padding: 14px 16px; }
  .criterion { padding: 26px 24px; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   The prototype drove these off [data-m] hooks; here they hang off the
   component classes directly.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --sec-y: 76px; --sec-x: 28px; }
  .site-footer { padding: 60px 28px 30px; }
  .navbar { padding: 14px 22px; }
  .navlinks { gap: 22px; }
  .stats { gap: 36px; }
  .footer-cols { gap: 44px; }
}

@media (max-width: 768px) {
  :root { --sec-y: 58px; --sec-x: 20px; }

  /* One step down across the prose scale. 16px is the floor — below that
     iOS zooms form fields on focus and continuous reading gets tiring. */
  body { font-size: 17px; }
  .lede { font-size: 18px; line-height: 1.62; }
  .body { font-size: 17px; }
  .body--lg { font-size: 17.5px; }
  .body--sm { font-size: 16.5px; }
  .body--xs { font-size: 16px; }
  .note { font-size: 16.5px; }
  .claim span { font-size: 16px; }
  .costs th, .costs td { font-size: 16px; }
  .costs tbody th[scope="row"] { font-size: 16px; }
  .community__meta { font-size: 15px; }
  .site-footer { padding: 48px 20px 26px; }

  .navbar { padding: 11px 16px; gap: 12px; }
  .navlinks { display: none; }
  .burger { display: flex; }
  .lockup__tagline { display: none; }

  .hero { min-height: auto; padding: 74px 20px 56px; }
  .h1 { font-size: 38px; }

  .stats { gap: 26px 34px; }
  .stat dd { margin: 0; }
.stat__num { font-size: 29px; }
  .stat__label { font-size: 10px; }


  .form-grid { gap: 40px; }
  .valuation { gap: 36px; }
  .valuation__form { min-width: 0; max-width: none; }
  .partners { gap: 40px; }

  .footer-cols { gap: 30px; width: 100%; }
  .footer-col { flex: 1 1 132px; }

  /* The panel goes edge-to-edge; the wrapper stops swallowing taps beside it. */
  .chat {
    right: 14px;
    bottom: 14px;
    left: 14px;
    align-items: flex-end;
    pointer-events: none;
  }
  .chat__panel {
    width: 100%;
    height: min(70vh, 470px);
    max-width: none;
    pointer-events: auto;
  }
  .chat__launcher { padding: 13px 18px; pointer-events: auto; }
}

@media (min-width: 769px) {
  .mobile-menu { display: none !important; }
}

@media (max-width: 420px) {
  .h1 { font-size: 32px; }
  .lockup__gem { width: 36px; height: auto; }
  .lockup__word { font-size: 19px; }
  .service { padding: 34px 26px; }
  .prop { padding: 30px 26px; }
}

/* --------------------------------------------------------------------------
   22. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* The hero reel is decoration — hold the first frame instead of looping. */
  .hero__reel { display: none; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anchored sections clear the sticky header. */
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

@media print {
  .site-header, .chat, .hero__reel, .hero__placeholder { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding: 24px 0; }
}