/* ==========================================================================
   kellyscalone.com — Design Tokens
   RE/MAX-brand-compatible. Built 2026-09-02.

   Palette contrast VERIFIED by `python scripts/contrast_check.py`, which is
   the source of every ratio quoted below and exits non-zero if any pair
   regresses. Run it after ANY colour edit. Three hard constraints came out of
   that verification — do not violate them:

     1. RED NEVER TOUCHES BLUE. --rm-red on --rm-blue is 1.92:1 and on
        --rm-blue-deep is 2.90:1 — far under AA, and under even the 3:1 floor
        for non-text UI. This is not a limitation to work around, it is the
        RE/MAX device itself: the brand bar is red / WHITE / blue, and the
        white is structural. Separate them with white or --paper, always.
     2. On DARK surfaces the accent switches to --rm-red-lift (4.74:1 on
        --rm-blue-deep). --rm-red-ink on blue is 1.61:1 — invisible.
     3. The red CTA takes WHITE text (4.94:1). Nothing else clears AA on it:
        --rm-blue-ink on --rm-red is 3.28:1 and fails.

   Type discipline: Figtree is the display face, standing in for RE/MAX's
   Gotham — geometric, tall x-height, confident at weight 800. It is used at
   >=1.3rem ONLY. Public Sans carries everything smaller, where its larger
   apertures hold up better at 15-17px. Two sans faces earn their keep here
   because RE/MAX is a sans-only identity; hierarchy comes from SCALE and
   WEIGHT contrast, not from a serif/sans split.

   BRAND HEXES ARE PROVISIONAL. #DC1C2E / #003DA5 are the widely published
   RE/MAX Red and RE/MAX Blue. They are close but are NOT a substitute for
   the values in the office's own Brand Access portal. Confirm both with
   RE/MAX Services before any print or co-branded use; if they differ, change
   them HERE and re-run contrast_check.py rather than patching single rules.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Surfaces & ink ------------------------------------------------- */
  --rm-blue-ink:  #0B1B33;  /* body text, footer surface. 16.21:1 on paper  */
  --rm-blue:      #003DA5;  /* RE/MAX Blue. headings, panels. 8.94:1        */
  --rm-blue-deep: #00246B;  /* hero overlays, deepest surface               */
  --paper:        #F7F8FA;  /* page background (cool — warm fights the red) */
  --mist:         #E3E7ED;  /* secondary surface, hairlines, borders        */
  --steel:        #B8C6E0;  /* muted text on dark.        8.32:1 on deep    */
  --white:        #FFFFFF;
  --muted:        #4A5568;  /* meta / captions.           7.08:1 on paper   */

  /* ---- The single accent, in its two surface variants ----------------- */
  --rm-red:       #DC1C2E;  /* RE/MAX Red. SOLID FILLS + the brand bar.
                               Takes white text only (4.94:1).              */
  --rm-red-ink:   #C8102E;  /* accent TEXT on light.      5.54:1 on paper   */
  --rm-red-lift:  #FF5A6E;  /* accent text on DARK only.  4.74:1 on deep    */

  /* ---- Semantic (used semantically, never decoratively) --------------- */
  --success:      #1F5D3F;
  --error:        #A81B25;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;

  /* Fluid display scale. Deliberate scale CONTRAST — h1 dominates, it is
     not "slightly bigger" than h2. Hero caps at 5rem so the primary CTA is
     never pushed past the fold on a 1000px-tall viewport.                  */
  --fs-hero:   clamp(2.5rem, 5.4vw, 5rem);
  --fs-h1:     clamp(2.25rem, 5vw, 4rem);
  --fs-h2:     clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3:     clamp(1.3rem, 2vw, 1.75rem);
  --fs-lead:   clamp(1.0625rem, 1.4vw, 1.375rem);
  --fs-body:   1.0625rem;   /* 17px — above the 16px mobile floor           */
  --fs-small:  0.9375rem;
  --fs-micro:  0.8125rem;   /* eyebrows/labels — >=12px per readability rule */

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.62;       /* inside the 1.5-1.75 guidance                 */
  --measure:    68ch;       /* 65-75 char line-length guidance              */

  /* Figtree is geometric: it needs MORE negative tracking than a serif at
     display sizes and none at all below ~20px. */
  --ls-display: -0.028em;
  --ls-eyebrow: 0.16em;

  /* ---- Spacing — intentional rhythm, NOT uniform padding -------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  --section-y:       clamp(3.5rem, 9vh, 7rem);
  --section-y-major: clamp(5rem, 14vh, 11rem);
  --gutter:          clamp(1.25rem, 5vw, 4.5rem);
  --maxw:            78rem;
  --maxw-text:       42rem;

  /* ---- Depth. Layered, blue-tinted shadows — never flat grey/black ---- */
  --shadow-sm: 0 1px 2px rgba(11,27,51,.06), 0 2px 6px rgba(11,27,51,.04);
  --shadow-md: 0 2px 6px rgba(11,27,51,.07), 0 12px 28px rgba(11,27,51,.09);
  --shadow-lg: 0 4px 12px rgba(11,27,51,.08), 0 28px 64px rgba(11,27,51,.16);
  --shadow-cta: 0 2px 4px rgba(11,27,51,.14), 0 10px 26px rgba(11,27,51,.22);

  /* ---- Radii — deliberately NOT uniform ------------------------------- */
  --r-none: 0;
  --r-sm:   2px;   /* inputs, buttons — nearly square reads more expensive  */
  --r-md:   4px;
  --r-pill: 999px; /* pills/chips only                                     */

  /* ---- Motion — clarifies flow, never decorative ---------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    160ms;
  --t-mid:     260ms;
  --t-slow:    520ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 50;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--rm-blue-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces against horizontal scroll */
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

/* Display type. Figtree only at >=1.3rem per the discipline note above.
   Weight 700 is the floor for headings — geometric sans at 400 reads thin
   and generic at these sizes, which is exactly the template look to avoid. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--rm-blue);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.018em; }

/* h4+ drop to Public Sans — below Figtree's display range. */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--rm-blue);
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--rm-red-ink);       /* 5.54:1 on paper — AA pass */
  margin: 0 0 var(--s-4);
  display: block;
}
/* On dark surfaces the accent MUST switch — red-ink on blue is 1.61:1. */
.on-dark .eyebrow, .eyebrow--on-dark,
.section--dark .eyebrow, .section--ink .eyebrow { color: var(--rm-red-lift); }

/* ==========================================================================
   The RE/MAX bar — red / white / blue, in that order.
   The white band is not a gap, it is the third stripe: red and blue cannot
   legibly abut (1.92:1). Used as the site's structural accent wherever the
   Sotheby's sister site would use a single brass rule.
   ========================================================================== */

.rm-bar {
  display: block;
  width: 3.5rem;
  height: 6px;
  border: 0;
  margin: 0 0 var(--s-5);
  background: linear-gradient(
    to right,
    var(--rm-red)  0 33.333%,
    var(--white)   33.333% 66.667%,
    var(--rm-blue) 66.667% 100%
  );
}
.rm-bar--wide { width: 6rem; }
.rm-bar--center { margin-inline: auto; }
/* On dark surfaces the middle stripe stays white and the blue stripe would
   vanish into the panel, so the dark variant runs red / white / steel. */
.on-dark .rm-bar, .section--dark .rm-bar, .section--ink .rm-bar,
.site-footer .rm-bar, .hero .rm-bar {
  background: linear-gradient(
    to right,
    var(--rm-red) 0 33.333%,
    var(--white)  33.333% 66.667%,
    var(--steel)  66.667% 100%
  );
}

/* ==========================================================================
   Links & focus
   ========================================================================== */

a { color: var(--rm-blue); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--rm-red-ink); }
.on-dark a { color: var(--white); }
.on-dark a:hover { color: var(--rm-red-lift); }

/* Visible focus on everything interactive, both surfaces. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rm-red-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--rm-red-lift);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--rm-blue-ink); color: var(--white);
  padding: var(--s-3) var(--s-5); z-index: var(--z-modal);
  font-weight: 600; text-decoration: none; border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--white); }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap    { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--major { padding-block: var(--section-y-major); }
.section--dark {
  background: var(--rm-blue-deep);
  color: var(--steel);          /* 8.32:1 on deep blue */
}
.section--ink { background: var(--rm-blue-ink); color: var(--mist); }
.section--mist { background: var(--mist); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

/* Plain hairline rule. */
.rule { border: 0; border-top: 1px solid var(--mist); margin: var(--s-7) 0; }
.on-dark .rule, .section--dark .rule, .section--ink .rule {
  border-top-color: rgba(255,255,255,.16);
}

/* ==========================================================================
   Buttons — min 44px touch target, 2px radius reads expensive
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-4) var(--s-6);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
  /* No scale transforms on hover — they shift layout. */
}

/* Primary: RE/MAX Red. WHITE text only (4.94:1) — nothing else clears AA. */
.btn--primary { background: var(--rm-red); color: var(--white); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: #B3122A; color: var(--white); }

/* Secondary: RE/MAX Blue. 9.50:1 with white. */
.btn--blue { background: var(--rm-blue); color: var(--white); box-shadow: var(--shadow-cta); }
.btn--blue:hover { background: var(--rm-blue-deep); color: var(--white); }

.btn--ghost { background: transparent; color: var(--rm-blue); border-color: var(--rm-blue); }
.btn--ghost:hover { background: var(--rm-blue); color: var(--white); }

/* .hero is listed here on purpose: it is a dark surface but carries no
   .on-dark class, so a ghost button inside it fell through to blue-on-blue
   over the photo — unreadable. Any new dark container needs listing here or
   needs the .on-dark class. */
.on-dark .btn--ghost, .section--dark .btn--ghost, .section--ink .btn--ghost, .hero .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,.5);
}
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover,
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover {
  background: var(--white); color: var(--rm-blue-ink); border-color: var(--white);
}

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Forms — labels always present, 16px+ inputs (prevents iOS zoom)
   ========================================================================== */

.field { margin-bottom: var(--s-5); }

.field label {
  display: block; font-size: var(--fs-small); font-weight: 600;
  color: var(--rm-blue); margin-bottom: var(--s-2); letter-spacing: .01em;
}

.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  font-family: var(--font-body); font-size: 1.0625rem; color: var(--rm-blue-ink);
  background: var(--white); border: 1px solid #A9B2C1; border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rm-blue);
  box-shadow: 0 0 0 3px rgba(0,61,165,.18);
}
.field input::placeholder { color: #667085; } /* 4.5:1+ on white */

.field .hint { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--s-2); }
.field .err  { font-size: var(--fs-micro); color: var(--error); margin-top: var(--s-2); font-weight: 600; }
.field input[aria-invalid="true"] { border-color: var(--error); }

/* Consent checkbox — 44px target, label wraps naturally */
.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }
.consent input[type="checkbox"] {
  /* 24px is the WCAG 2.2 SC 2.5.8 minimum target size; 22px measured short. */
  width: 24px; height: 24px; min-height: 24px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--rm-red); cursor: pointer;
}
.consent label {
  font-size: var(--fs-micro); line-height: 1.5; color: var(--muted);
  font-weight: 400; margin: 0; cursor: pointer;
}

/* ==========================================================================
   Scroll reveal — motion that clarifies flow
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }