/* RajKhaleel.realtor — Design System / Tokens v2 (Founder colour correction 2026-09-07)
   DARK-DOMINANT black + Raj Yellow personal brand.
   Interface balance target: 65–70% black/charcoal · 20–25% white/very-light-neutral · 5–10% Raj Yellow.
   NO warm off-white / cream / beige / champagne / gold-gradient. Photographs stay bright & natural. */
:root{
  /* Brand (LOCKED) */
  --rk-yellow:#FFC800;
  --rk-yellow-hover:#e6b400;
  --rk-yellow-ink:#000000;        /* text on yellow */
  --rk-black:#000000;
  --rk-charcoal:#111111;          /* deep charcoal — dominant surface */
  --rk-charcoal-2:#181818;        /* secondary charcoal — raised panels/cards on dark */
  --rk-white:#FFFFFF;
  --rk-neutral:#F4F4F4;           /* light neutral (rare) */
  --rk-body:#555555;              /* body gray on light (stronger contrast per founder) */
  --rk-body-strong:#333333;       /* emphasised body on light */
  --rk-ink:#111111;               /* headings on light */
  --rk-gold-text-light:#8a7300;   /* accessible gold for text/links on light surfaces (~4.9:1 on #fff, AA) */
  --rk-card-border:#D5D5D5;       /* light-surface card border (stronger, editorial) */
  --rk-divider-dark:rgba(255,255,255,.12); /* subtle separator on dark */
  --rk-divider-light:#E3E3E3;     /* subtle separator on light */
  --rk-divider-samelight:#E2E2E2; /* section→section boundary, light family (§V) */

  /* On-dark text + lines */
  --rk-on-dark:#c9c9c9;           /* body text on charcoal */
  --rk-on-dark-strong:#ffffff;
  --rk-on-dark-dim:#8f8f8f;
  --rk-hair-dark:#262626;         /* hairlines/borders on dark */
  --rk-hair-light:#e4e4e4;        /* hairlines/borders on light */

  /* Type */
  --rk-font-display:"Fraunces","Newsreader",Georgia,"Times New Roman",serif;
  --rk-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --rk-fs-display:clamp(2.4rem,1.7rem + 3.2vw,4rem);
  --rk-fs-h1:clamp(2rem,1.5rem + 2.4vw,3.15rem);
  --rk-fs-h2:clamp(1.6rem,1.25rem + 1.7vw,2.4rem);
  --rk-fs-h3:clamp(1.2rem,1.05rem + 0.7vw,1.5rem);
  --rk-fs-body:1.0625rem;      /* 17px */
  --rk-fs-small:1rem;          /* 16px — support copy is content, not microcopy */
  --rk-fs-micro:0.875rem;      /* 14px — genuine legal/footnote only */
  --rk-lh-tight:1.14; --rk-lh-body:1.68;

  /* Layout — ONE global container + 12-col grid */
  --rk-container:1280px;                 /* single global max-width */
  --rk-measure:760px;                    /* reading measure for narrow text */
  --rk-pad-x:clamp(20px,4.5vw,48px);     /* mobile 20 · tablet ~32 · desktop 48 */
  --rk-cols:12; --rk-gutter:clamp(20px,2vw,28px);

  /* Spacing scale (founder correction 2026-09-08 — tighter, editorial) */
  --rk-section-y:clamp(44px,5.2vw,80px);   /* major section padding: 44 mobile → 80 desktop */
  --rk-section-y-sm:clamp(36px,4vw,60px);  /* consecutive same-colour / transition */
  --rk-gap:clamp(20px,1.8vw,28px);        /* card / grid gap */
  --rk-shead-gap:34px;                    /* heading block → content (28–40) */
  --rk-rule-gap:16px;                     /* yellow rule / kicker → heading (12–18) */
  --rk-title-gap:16px;                    /* heading → intro paragraph */

  /* Components */
  --rk-radius:10px; --rk-radius-sm:6px;
  --rk-rule:2px; --rk-tap:44px;
  --rk-shadow:0 10px 34px rgba(0,0,0,.30);
  --rk-transition:.18s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Dark-dominant baseline: default surface is deep charcoal with light text. */
body{margin:0;font-family:var(--rk-font-sans);font-size:var(--rk-fs-body);line-height:var(--rk-lh-body);color:var(--rk-on-dark);background:var(--rk-charcoal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--rk-font-display);color:var(--rk-on-dark-strong);line-height:var(--rk-lh-tight);font-weight:500;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:var(--rk-fs-h1)} h2{font-size:var(--rk-fs-h2)} h3{font-size:var(--rk-fs-h3)}
p{margin:0 0 1rem} img{max-width:100%;height:auto;display:block}
a{color:var(--rk-on-dark-strong);text-underline-offset:3px}
a:hover{color:var(--rk-yellow)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--rk-yellow);outline-offset:2px}

/* Layout helpers — every variant shares the SAME container edges (one vertical guide) */
.rk-wrap,.rk-wrap--wide,.rk-wrap--narrow{width:100%;max-width:var(--rk-container);margin-inline:auto;padding-inline:var(--rk-pad-x)}
/* Narrow = same container + left-aligned reading measure on its content */
.rk-wrap--narrow>*{max-width:var(--rk-measure)}
/* Centered feature sections: center the measure + text */
.rk-wrap--center{text-align:center}
.rk-wrap--center>*{margin-inline:auto}

/* ---- SECTION SURFACES ---------------------------------------------------
   Default section = deep charcoal (dominant). Light sections are deliberate bright breaks. */
.rk-section{padding-block:var(--rk-section-y);background:var(--rk-charcoal);color:var(--rk-on-dark)}
.rk-section--sm{padding-block:var(--rk-section-y-sm)}
.rk-section h1,.rk-section h2,.rk-section h3,.rk-section h4{color:#fff}
.rk-section--dark{background:var(--rk-charcoal)}          /* alias of default */
.rk-section--black{background:var(--rk-black)}
.rk-section--light{background:var(--rk-white);color:var(--rk-body)}
.rk-section--light h1,.rk-section--light h2,.rk-section--light h3,.rk-section--light h4{color:var(--rk-ink)}
.rk-section--neutral{background:var(--rk-neutral);color:var(--rk-body)}
.rk-section--neutral h1,.rk-section--neutral h2,.rk-section--neutral h3,.rk-section--neutral h4{color:var(--rk-ink)}
/* Back-compat: any legacy --offwhite becomes a clean WHITE break (no warm cream). */
.rk-section--offwhite{background:var(--rk-white);color:var(--rk-body)}
.rk-section--offwhite h1,.rk-section--offwhite h2,.rk-section--offwhite h3,.rk-section--offwhite h4{color:var(--rk-ink)}

/* Eyebrow / lead */
.rk-eyebrow{font-family:var(--rk-font-sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--rk-yellow);margin:0 0 .6rem}
.rk-section--light .rk-eyebrow,.rk-section--neutral .rk-eyebrow,.rk-section--offwhite .rk-eyebrow{color:#8a7300}
.rk-lead{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);color:#fff}
.rk-section--light .rk-lead,.rk-section--neutral .rk-lead,.rk-section--offwhite .rk-lead{color:var(--rk-ink)}

/* Yellow accent rule */
.rk-rule{width:52px;height:var(--rk-rule);background:var(--rk-yellow);border:0;margin:0 0 var(--rk-rule-gap)}

/* Buttons */
.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--rk-tap);padding:.85rem 1.5rem;border-radius:var(--rk-radius-sm);font-family:var(--rk-font-sans);font-weight:700;font-size:.9rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background var(--rk-transition),color var(--rk-transition),border-color var(--rk-transition)}
.rk-btn--primary{background:var(--rk-yellow);color:var(--rk-yellow-ink);border-color:var(--rk-yellow)}
.rk-btn--primary:hover{background:var(--rk-yellow-hover);border-color:var(--rk-yellow-hover);color:#000}
.rk-btn--dark{background:#000;color:#fff;border-color:#000}
.rk-btn--dark:hover{background:#fff;color:#000;border-color:#fff}
.rk-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.rk-btn--ghost:hover{background:#fff;color:#000;border-color:#fff}
/* Ghost button on light surfaces */
.rk-section--light .rk-btn--ghost,.rk-section--neutral .rk-btn--ghost,.rk-section--offwhite .rk-btn--ghost{color:var(--rk-ink);border-color:var(--rk-ink)}
.rk-section--light .rk-btn--ghost:hover,.rk-section--neutral .rk-btn--ghost:hover,.rk-section--offwhite .rk-btn--ghost:hover{background:var(--rk-ink);color:#fff}

/* Cards (base = on dark) */
.rk-card{background:var(--rk-charcoal-2);border:1px solid var(--rk-hair-dark);border-radius:var(--rk-radius);padding:clamp(1.25rem,2vw,1.75rem);color:var(--rk-on-dark)}
.rk-section--light .rk-card,.rk-section--neutral .rk-card,.rk-section--offwhite .rk-card{background:#fff;border-color:var(--rk-hair-light);color:var(--rk-body)}

/* Outline SVG icons */
.rk-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rk-ico--active{color:var(--rk-yellow)}

/* Grids */
.rk-grid{display:grid;gap:var(--rk-gap)}
@media(min-width:760px){ .rk-grid--2{grid-template-columns:repeat(2,1fr)} .rk-grid--3{grid-template-columns:repeat(3,1fr)} .rk-grid--4{grid-template-columns:repeat(4,1fr)} }

/* A11y */
.rk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}