/* Tony Sachdev: editorial "trusted broker" look in the RE/MAX palette (2026 colour sheet): Cream paper, Dark Blue ink, Signature red.
   Page layout (redesign approved 2026-10-01): a Dark Blue menu bar with Tony's logo alone; the hero "The Logo Comes
   Alive" (his red block and S drawn large, Tony rising out of the block); sections that alternate Cream and Dark Blue;
   a Dark Blue footer with the RE/MAX All-Stars office logo on its own. Tony's logo and the office logo never share a
   bar or sit side by side. */

:root {
  /* RE/MAX palette (2026 colour sheet) plus Tony's Signature red (see ../06-brand/README.md). */
  --paper: #f7f5ee;      /* RE/MAX Cream */
  --white: #ffffff;
  --ink: #000e35;        /* RE/MAX Dark Blue: 17.3:1 on Cream */
  --ink-2: #4a5068;      /* secondary text: 7.3:1 on Cream, 8.0:1 on white */
  --line: rgba(0, 14, 53, 0.14);
  --navy: #000e35;       /* RE/MAX Dark Blue: dark bands */
  --red: #d71920;        /* Tony's Signature red (logo block) */
  --red-deep: #aa1120;   /* RE/MAX Bridge Red: small red text, 6.9:1 on Cream */
  --red-btn: #d71920;    /* button background: white text on it is 5.19:1 (WCAG AA) */
  --blue: #0043ff;       /* RE/MAX Primary Blue: focus rings, 5.9:1 on Cream */
  --sky: #a3d4f2;        /* RE/MAX Sky Blue: accents on dark bands, 11.9:1 on Dark Blue */

  /* On Dark Blue grounds (menu bar, hero, dark sections, footer). Signature red is only 3.6:1 there, so it marks
     things (buttons, rules, dots) but never carries small text. */
  --on-dark: #f7f5ee;                      /* Cream: 17.3:1 */
  --on-dark-2: rgba(247, 245, 238, 0.8);   /* secondary text: 11.1:1 */
  --line-dark: rgba(163, 212, 242, 0.24);  /* Sky Blue hairlines */
  --balloon-line: #0043ff;                 /* RE/MAX Outlined Balloon: one colour (Primary Blue), one weight */

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Menu bar sizes (changed per breakpoint in the Menu bar section) */
  --bar-h-full: 84px;    /* bar height at the top of the page */
  --bar-h-slim: 68px;    /* once the page scrolls */
  --bar-logo: 48px;      /* Tony's full lockup: 300px wide, clear space 13.9px */
  --bar-logo-slim: 40px; /* once scrolled: clear space 11.6px, (68 - 40) / 2 = 14px */
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchors land a little below the fixed menu bar */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h-slim) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Fine paper grain.
   Layering above it (z-index 100): hero and footer 101 < phones' Call/Text bar 102 < menu bar 103 (with its Menu
   panel), so the grain never lies over Tony's mark or either logo, and the footer always scrolls UNDER the fixed bar
   (a tie let it paint over the bar on short screens, putting the office logo in the bar beside Tony's). The skip link
   stays on top (200); listing details open in a top-layer dialog. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.25  0 0 0 0 0.2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Read by screen readers, not shown */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
/* Focus on Dark Blue grounds: Sky Blue ring (Primary Blue is only 2.9:1 on Dark Blue) */
:is(.masthead, .hero, .marquee, .listings-band, .section-dark, .sitefoot, .mobile-bar) :focus-visible { outline-color: var(--sky); }

/* Skip link: it opens over the Dark Blue bar, so a Cream pill (Dark Blue text 17.3:1) with a Sky Blue ring */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--paper); color: var(--ink); font-weight: 600; padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: var(--sky); }

/* ---------- Menu bar ----------
   Dark Blue, fixed to the top, with Tony's logo ALONE (the RE/MAX All-Stars office logo never shares this bar: it
   stands on its own in the footer), the nav in page order and the red call pill. Slimmer once the page scrolls
   (.is-scrolled, set by the page script). Below 1000px the nav folds into a Menu panel; phones place calls through
   the bottom Call/Text bar. The pages that load no script (404, thanks) simply leave out the Menu button.
   Logo rules: Tony's horizontal lockup (626 x 100), dark version on Dark Blue, as-is, never stretched, at least 36px
   tall; clear space 0.29 x its height. */
.masthead {
  --bar-h: var(--bar-h-full);
  position: fixed; top: 0; left: 0; right: 0; z-index: 103;
  background: var(--navy); color: var(--on-dark);
  transition: box-shadow 0.35s var(--ease);
}
/* Sky Blue hairline under the bar: it gives Tony's logo a clear home over the Dark Blue hero and sections */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-dark);
}
.masthead.is-scrolled { --bar-h: var(--bar-h-slim); box-shadow: 0 18px 40px -28px rgba(0, 14, 53, 0.9); }

.masthead-bar {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  height: var(--bar-h); display: flex; align-items: center; gap: 24px;
  transition: height 0.35s var(--ease);
}
.masthead-brand { flex: none; display: block; margin-right: auto; border-radius: 2px; }
.masthead-brand img { height: var(--bar-logo); width: auto; max-width: none; transition: height 0.35s var(--ease); }
.masthead.is-scrolled .masthead-brand img { height: var(--bar-logo-slim); }

/* Nav */
.mainnav { display: flex; align-items: center; }
.mainnav a {
  position: relative; padding: 10px 12px; border-radius: 6px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2;
  color: var(--on-dark-2); text-decoration: none; white-space: nowrap;
  transition: color 0.25s;
}
.mainnav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px;
  background: var(--sky); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease), background-color 0.25s;
}
.mainnav a:hover { color: var(--on-dark); }
.mainnav a:hover::after { transform: scaleX(1); }
/* Current section: Signature red rule (3.6:1 on Dark Blue, fine for a non-text marker) */
.mainnav a.is-active { color: var(--on-dark); }
.mainnav a.is-active::after { transform: scaleX(1); background: var(--red); height: 2px; }
.mainnav-num { display: none; }

/* Call: Signature red pill, white text 5.19:1. No coloured glow on Dark Blue (it leaves a maroon smudge). */
.masthead-call {
  flex: none; display: inline-flex; align-items: center; gap: 9px; margin-left: 8px;
  min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--red-btn); color: var(--white); text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em;
  transition: background-color 0.25s, transform 0.25s var(--ease);
}
.masthead-call svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.masthead-call:hover { background: var(--red-deep); transform: translateY(-1px); }

/* Menu button (below 1000px; hidden without JavaScript, since it needs the page script) */
.masthead-menu {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--on-dark); border: 1.5px solid var(--sky);
  font: 600 0.9375rem/1 var(--sans); letter-spacing: 0.02em;
  transition: background-color 0.25s, color 0.25s;
}
.masthead-menu:hover { background: var(--sky); color: var(--navy); }
.masthead-menu-icon, .masthead-menu-icon::before {
  display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform 0.3s var(--ease);
}
.masthead-menu-icon { position: relative; transform: translateY(-3px); }
.masthead-menu-icon::before { content: ""; position: absolute; left: 0; top: 6px; }
.masthead-menu[aria-expanded="true"] .masthead-menu-icon { transform: translateY(0) rotate(45deg); }
.masthead-menu[aria-expanded="true"] .masthead-menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
.masthead-call:focus-visible, .masthead-menu:focus-visible { border-radius: 999px; }

/* Mid widths: tighter nav */
@media (max-width: 1179px) {
  :root { --bar-logo: 44px; --bar-logo-slim: 38px; }
  .masthead-bar { gap: 16px; }
  .mainnav a { padding-inline: 9px; }
  .mainnav a::after { left: 9px; right: 9px; }
  .masthead-call { margin-left: 4px; }
}
/* Tablets: the nav folds into a Menu panel under the bar (three columns, then two) */
@media (max-width: 999px) {
  :root { --bar-h-full: 76px; --bar-h-slim: 64px; --bar-logo: 44px; --bar-logo-slim: 38px; }
  .masthead-bar { gap: 12px; }
  .js .masthead-menu { display: inline-flex; }
  .masthead-call { margin-left: 0; }
  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 48px);
    padding: 8px max(var(--gutter), (100% - var(--max)) / 2) 32px;
    background: var(--navy); box-shadow: 0 30px 50px -30px rgba(0, 14, 53, 0.9);
  }
  .masthead.is-open .mainnav { display: grid; animation: bar-drop 0.35s var(--ease) both; }
  .mainnav a {
    display: flex; align-items: baseline; gap: 14px; padding: 18px 0 16px; border-radius: 0;
    border-bottom: 1px solid var(--line-dark); color: var(--on-dark);
    font-family: var(--display); font-weight: 350; font-size: 1.75rem; letter-spacing: -0.01em;
  }
  .mainnav a::after { left: 0; right: 0; bottom: -1px; }
  .mainnav-num { display: inline; font-style: italic; font-size: 1rem; color: var(--sky); }
}
@keyframes bar-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 859px) {
  .mainnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: logo + icon Menu button; calls go through the bottom Call/Text bar.
   The full lockup (with tagline) stays 36-40px tall, never under 36px: 250px + 12px + 44px fits a 360px phone. */
@media (max-width: 720px) {
  :root {
    --bar-h-full: 64px; --bar-h-slim: 64px;
    --bar-logo: max(36px, min(40px, calc((100vw - 2 * var(--gutter) - 56px) / 6.26)));
    --bar-logo-slim: var(--bar-logo);
  }
  .masthead-call { display: none; }
  .masthead-menu { padding: 0; width: 44px; justify-content: center; }
  .masthead-menu-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .mainnav { padding-bottom: 24px; }
  .mainnav a { font-size: 1.5rem; padding: 16px 0 14px; }
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--sans); /* <button>s don't inherit the page font (Send fell back to Arial) */
  font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--red-btn); color: var(--white); box-shadow: 0 10px 24px -12px rgba(215, 25, 32, 0.8); }
.btn-red:hover { background: var(--red-deep); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }

/* Brokerage name as text (RECO: clear and prominent, near the top of the page), with a short rule before it.
   15px, secondary ink on Cream (7.3:1); Cream at 82% on the Dark Blue hero (11.7:1). */
.brokerage-line {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink-2);
}
.brokerage-line::before { content: ""; flex: none; width: 36px; height: 1.5px; background: var(--red); }

/* ---------- Hero: "The Logo Comes Alive" ----------
   Final frame (what reduced-motion users, no-JS visitors and screenshots see): a Dark Blue hero. On the right,
   Tony's icon mark drawn large (red block + cream S, both paths exactly as in tony-sachdev-icon-dark.svg, same
   viewBox, so the proportions are untouched) with Tony standing in the block. On the left the brokerage line, the
   headline "Real estate, Simplified." (capital S on purpose, echoing the S in the logo), the lede, the actions and a
   facts row. The top of the page belongs to Tony's brand alone: no RE/MAX artwork up here (the Outlined Balloon is
   in the listings band, the office logo in the footer).

   Entrance (about 1.7 s, once), two tracks that run side by side (see the page script):
   - copy (starts on the first frames): the headline lines slide up out of their masks, then lede, actions, facts.
     The brokerage line is never hidden (RECO: brokerage name clear from the first paint).
   - art (starts once Tony's photo is decoded, 0.7 s at most): the block rises from its base, the S wipes in left to
     right across the block's edge (always in its true position: the mark is never shown mis-registered), then Tony
     rises up out of the block's base.
   Transform and opacity only.

   Geometry: everything in the art is measured in --u = 1/100 of the icon's viewBox.
   Block: x 15.617-61.617, y 10-90. S: x 38.62-84.372, y 16.86-83.36. The art box is 100u wide x 90u tall
   (the viewBox minus its empty bottom 10u), so the block's base is the art box's bottom edge. */

/* Metric-matched fallback for the headline while Fraunces loads (Georgia is 25-40% wider than Fraunces at
   opsz 144, which made the headline wrap onto an extra line and shift the hero when the font swapped). */
@font-face { font-family: "Fraunces Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 80%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 71%; }

.hero {
  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  /* The window height (clamped), used only to size the mark. The hero itself is as tall as its content: the copy
     starts a fixed distance under the bar and the mark stands on the ground line with its top edge level with the
     headline's cap line, so big screens never get an empty band under the bar (spacing fix, 2026-10-01). */
  --hero-h: clamp(640px, 100svh, 1080px);
  --top-gap: clamp(36px, 3.4vw, 60px);                          /* bar -> brokerage line */
  --t: clamp(3.5rem, min(8.4vw, 13.6svh), 7.75rem);              /* headline size */
  --h1-mt: 26px;
  /* From the top of the copy (the brokerage line) to the headline's cap line: brokerage line 21px, the headline's
     top margin (its lines' -0.1em mask margin collapses into it, their 0.1em padding adds it back), then 0.116em
     from the line box's top to the top of the capitals (measured in Fraunces, opsz 144). */
  --cap: calc(21px + var(--h1-mt) + 0.116 * var(--t));
  --align: var(--cap);                                           /* the block's top sits this far below the copy's top */
  --copy-w: clamp(430px, 37vw, 560px);
  --cw: min(var(--max), 100vw - 2 * var(--gutter));
  --cl: max(var(--gutter), (100% - var(--max)) / 2);           /* container's left edge (in the hero) */
  /* The mark's size, in u, is the smallest of:
     - height: the whole hero (bar, gap, copy-to-cap, block) fits the window;
     - width: the S's right edge sits exactly on the container's right edge (under the call button in the bar)
       and the block keeps at least 96px clear of the copy column (68.75u = block's left edge to S's right edge);
     - calm: the block is at most 177px + 48.3% of the window height, so the mark never towers over Tony and the
       headline. */
  --u: min((var(--hero-h) - var(--bar-h-full) - var(--top-gap) - var(--align)) / 80,
           (var(--cw) - var(--copy-w) - 96px) / 68.75,
           (177px + 0.483 * var(--hero-h)) / 80);
  --art-l: calc(100% - var(--cl) - 84.372 * var(--u));

  position: relative; z-index: 101; isolation: isolate;
  overflow: hidden; overflow: clip;
  display: flex; align-items: flex-start;
  /* Tall enough for the mark (if the copy runs longer, the hero grows and the mark stays on the ground line) */
  min-height: calc(var(--bar-h-full) + var(--top-gap) + var(--align) + 80 * var(--u));
  padding: calc(var(--bar-h-full) + var(--top-gap)) 0 32px;   /* the bar is fixed: the hero pads its own top */
  background: var(--navy); color: var(--paper);
}
/* Browsers without svh (Safari < 15.4): without this, --u would be invalid and the art would collapse */
@supports not (height: 100svh) {
  .hero { --hero-h: clamp(640px, 100vh, 1080px); --t: clamp(3.5rem, min(8.4vw, 13.6vh), 7.75rem); }
}

/* Copy (.hero-grid stays unpositioned, so the art's containing block is the hero itself) */
.hero-head, .hero-body { position: relative; z-index: 3; max-width: var(--copy-w); }
.hero .brokerage-line { color: rgba(247, 245, 238, 0.82); }
.hero .brokerage-line::before { background: var(--sky); }
/* It stays on one line on small phones: a shorter rule, then none (the name itself is 283px at 15px) */
@media (max-width: 379px) {
  .hero .brokerage-line { gap: 10px; }
  .hero .brokerage-line::before { width: 20px; }
}
@media (max-width: 352px) {
  .hero .brokerage-line { letter-spacing: 0; }
  .hero .brokerage-line::before { display: none; }
}
.hero-title {
  font-size: var(--t);
  line-height: 0.92; letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144; font-weight: 350;
  margin: var(--h1-mt) 0 30px; color: var(--paper);
}
.hero-title em { font-style: italic; font-weight: 300; color: var(--sky); }   /* 11.9:1 */
/* Each line is a mask the words slide up through (padding keeps ascenders, descenders and the italic f clear) */
.hero-line { display: block; overflow: hidden; padding: 0.1em 0.14em 0.2em; margin: -0.1em -0.14em -0.2em; }
.hero-line > * { display: inline-block; }

.hero .lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: rgba(247, 245, 238, 0.8);   /* 11:1 */
  max-width: 31em; margin-bottom: 0; text-wrap: pretty;
}
.hero .actions { margin-top: 30px; }
.hero .btn-red { box-shadow: none; }   /* no coloured glow on Dark Blue: the red itself carries the button */
.hero .btn-red:hover { transform: translateY(-1px); }
.hero .btn-ghost { border-color: rgba(247, 245, 238, 0.7); color: var(--paper); }
.hero .btn-ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }

.hero-facts {
  list-style: none; margin: 38px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 0;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.45; letter-spacing: 0.03em;
  color: rgba(247, 245, 238, 0.74);                                   /* 9.6:1 on Dark Blue */
}
.hero-facts li { display: flex; align-items: center; gap: 12px; padding: 2px 24px; border-left: 1px solid var(--line-dark); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
/* The languages item only where the row has room for all three (it is also in the About facts) */
@media (min-width: 1000px) and (max-width: 1279px), (max-width: 720px) {
  .hero-facts li:nth-child(3) { display: none; }
}
.hero-facts strong {   /* the "30": 72px, a touch heavier than the headline's italic so it reads at a distance (Tony, 2026-10-03) */
  font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: 4.5rem; line-height: 0.8; letter-spacing: -0.03em; color: var(--sky);
}

/* Art: the icon mark, large, with Tony in the block. Decorative: it never takes taps or clicks (on phones its empty
   top edge overlapped the hero buttons). */
.hero-art {
  pointer-events: none;
  position: absolute; z-index: 1; bottom: 0; left: var(--art-l);
  width: calc(100 * var(--u)); height: calc(90 * var(--u));
}
.hero-block, .hero-s {
  position: absolute; left: 0; top: 0; width: calc(100 * var(--u)); height: calc(100 * var(--u));
  display: block; overflow: visible;
}
.hero-block { z-index: 1; transform-origin: 50% 90%; }   /* grows from the block's base (y = 90 of 100) */
/* The S sits in a window exactly its own width (plus 0.5u so its anti-aliased edges are never shaved).
   On entrance the window slides in one way and the S inside it the other way, so the S never moves:
   it is wiped on in place, left to right, across the block's edge. */
.hero-s-wipe {
  position: absolute; z-index: 2; top: 0; bottom: 0;
  left: calc(38.12 * var(--u)); width: calc(46.752 * var(--u)); overflow: hidden;
}
.hero-s { left: calc(-38.12 * var(--u)); }

/* Tony: body centred on the block (his centre line is at 50.7% of the photo), head 3.5u below the block's top
   (and 3.4u above the S's top, so he is clearly the tallest thing in the art), elbows about 4u inside the
   block's sides; the block's base crops him mid-thigh (about 81% down the photo). */
.hero-tony-clip { position: absolute; z-index: 3; inset: 0; overflow: hidden; overflow: clip; }
.hero-tony {
  --th: 94;                                              /* photo height in u */
  position: absolute; display: block;
  height: calc(var(--th) * var(--u));
  top: calc(13.5 * var(--u));
  left: calc((38.617 - 0.507 * var(--th) * 730 / 1600) * var(--u));
  /* a short directional shadow, cast down-right onto the S (not a halo on the red) */
  filter: drop-shadow(calc(1.2 * var(--u)) calc(0.8 * var(--u)) calc(1.4 * var(--u)) rgba(0, 14, 53, 0.28));
}
.hero-tony img { height: 100%; width: auto; max-width: none; }

/* Entrance (motion allowed only). html.hero-armed is set in <head>. Everything waits, paused on its first frame,
   until the page script starts a track: .is-playing starts the copy (data-a="t"), .is-art starts the art
   (data-a="a"). .is-settled drops will-change. */
@media (prefers-reduced-motion: no-preference) {
  .hero-armed .hero [data-a] {
    animation: var(--an) var(--dur, 0.8s) var(--ez, cubic-bezier(0.16, 1, 0.3, 1)) var(--at, 0s) both;
    animation-play-state: paused;
  }
  .hero-armed .hero.is-playing [data-a="t"],
  .hero-armed .hero.is-art [data-a="a"] { animation-play-state: running; }

  /* copy track */
  .hero .hero-line > *              { --an: hero-line-up; --dur: 0.85s; --at: 0.05s; }
  .hero .hero-line + .hero-line > * { --at: 0.15s; }
  .hero .lede                       { --an: hero-fade-up; --at: 0.3s; }
  .hero .actions                    { --an: hero-fade-up; --at: 0.4s; }
  .hero .hero-facts                 { --an: hero-fade-up; --at: 0.5s; }
  /* art track */
  .hero .hero-block                 { --an: hero-rise;     --dur: 0.75s; --at: 0s;    --ez: cubic-bezier(0.7, 0, 0.2, 1); }
  .hero .hero-s-wipe                { --an: hero-wipe-win; --dur: 0.8s;  --at: 0.55s; --ez: cubic-bezier(0.65, 0, 0.25, 1); }
  .hero .hero-s-wipe > .hero-s      { --an: hero-wipe-s;   --dur: 0.8s;  --at: 0.55s; --ez: cubic-bezier(0.65, 0, 0.25, 1); }
  .hero .hero-tony                  { --an: hero-tony-in;  --dur: 0.9s;  --at: 0.78s; }

  .hero-armed .hero:not(.is-settled) :is(.hero-block, .hero-s-wipe, .hero-s, .hero-tony) { will-change: transform; }
}
@keyframes hero-rise     { from { transform: scaleY(0); } }
@keyframes hero-wipe-win { from { transform: translateX(calc(-46.752 * var(--u))); } }
@keyframes hero-wipe-s   { from { transform: translateX(calc(46.752 * var(--u))); } }
/* Tony starts fully below the block's base (his top is 76.5u above it = 81% of his height) and rises through it */
@keyframes hero-tony-in  { from { transform: translateY(85%); } }
@keyframes hero-fade-up  { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-line-up  { from { transform: translateY(1.45em); } }   /* clears the mask even for ascenders */

/* Wide but shorter screens (laptops): tighter spacing and no facts row, so the copy always fits between the cap line
   and the ground line. The mark may rise to the top of the copy (the brokerage line) instead of stopping at the
   headline's cap line, and the "calm" cap is dropped, so it stays big (about 17% bigger at 1280 x 720). */
@media (min-width: 1000px) and (max-height: 819px) {
  .hero {
    --h1-mt: 20px;
    --top-gap: 24px;
    --align: 0px;                                                /* the block's top level with the brokerage line */
    --u: min((var(--hero-h) - var(--bar-h-full) - var(--top-gap)) / 80, (var(--cw) - var(--copy-w) - 96px) / 68.75);
  }
  .hero-title { margin-bottom: 22px; }
  .hero .actions { margin-top: 24px; }
  /* only "30 years in GTA real estate" (the other two facts are also in About) */
  .hero-facts { margin-top: 26px; }
  .hero-facts li:not(:first-child) { display: none; }
}
/* 1000-1099px: the copy column is at its 430px minimum, so the copy runs long; only the "30 years" fact shows */
@media (min-width: 1000px) and (max-width: 1099px) {
  .hero-facts li:not(:first-child) { display: none; }
}

/* 721-999px, and portrait-shaped windows up to 1399px (e.g. a large tablet upright): headline across the top; below
   it the lede and actions on the left, the art on the right with the S on the container's right edge and the block
   standing on the ground line. */
@media (max-width: 999px), (max-width: 1399px) and (max-aspect-ratio: 5/6) {
  .hero {
    --u: min((100vw - 2 * var(--gutter) - 312px) / 68.75, 7.6px);   /* leaves 280px + 32px for the copy */
    display: block; min-height: 0;
    padding: calc(var(--bar-h-full) + 32px) 0 0;
  }
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px;
    grid-template-areas: "head head" "body art";
  }
  .hero-head { grid-area: head; max-width: 40rem; }
  .hero-title { font-size: clamp(3.4rem, 11.5vw, 6rem); margin: 22px 0 0; }
  /* The lede's cap line is level with the block's top edge (block top = 40px under the headline; the lede's
     capitals start about 8px into its first line); the art stands on the ground line. */
  .hero-body { grid-area: body; align-self: start; max-width: 30rem; margin-top: 32px; padding-bottom: 44px; }
  /* in flow; the negative margins trim the art box to the mark's own extent (block's left edge to S's right edge) */
  .hero-art {
    grid-area: art; align-self: end; position: relative; left: auto; bottom: auto;
    margin: calc(40px - 10 * var(--u)) calc(-15.628 * var(--u)) 0 calc(-15.617 * var(--u));
  }
  .hero .lede { font-size: 1.0625rem; }
  .hero .actions { margin-top: 26px; }
  .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-facts { flex-direction: column; gap: 12px; margin-top: 30px; }
  .hero-facts li { padding: 0; border-left: 0; }
  .hero-facts li:nth-child(3) { display: none; }
}
/* Narrow tablets: the left column is only 280px wide, so only the "30 years" fact shows (the others are also in About),
   keeping the copy shorter than the block */
@media (min-width: 721px) and (max-width: 879px) {
  .hero-facts li:not(:first-child) { display: none; }
}
/* Phones: headline, actions, the art (full column width), then the lede. The actions move up above the art so they
   are on the first screen; the reading order of the copy is unchanged (the lede is not interactive, and focus order
   is the same). */
@media (max-width: 720px) {
  .hero {
    --u: min((100vw - 2 * var(--gutter)) / 68.75, 6.6px);    /* block's left edge and S's right edge on the gutters */
    padding: calc(var(--bar-h-full) + 26px) 0 48px;
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "actions" "art" "lede" "facts"; }
  .hero-body { display: contents; }
  .hero-title { font-size: clamp(3.1rem, 15vw, 4.25rem); margin-top: 18px; }
  /* positioned above the art (.hero-body is display: contents here, so its own z-index no longer applies) */
  .hero .actions { grid-area: actions; margin-top: 26px; gap: 10px; position: relative; z-index: 4; }
  .hero .actions .btn { padding: 14px 18px; font-size: 0.9375rem; }
  .hero-art { justify-self: start; margin: calc(30px - 10 * var(--u)) 0 0 calc(-15.617 * var(--u)); }
  .hero .lede { grid-area: lede; margin-top: 32px; }
  /* stacked: with the 72px "30" a row would wrap and leave a divider dangling */
  .hero-facts { grid-area: facts; flex-direction: column; gap: 14px; margin-top: 30px; }
  .hero-facts li { padding: 0; border-left: 0; }
}
@media (max-width: 389px) {
  .hero .actions .btn { padding-inline: 12px; }
}

/* ---------- Values strip ----------
   The hero's ground line (the block stands on it). It pauses on hover and keyboard focus, and has a pause/play
   button (WCAG 2.2.2); with reduced motion it doesn't move, so the button is hidden. */
.marquee { position: relative; background: var(--navy); color: var(--white); overflow: hidden; padding: 22px 0; }
.hero + .marquee { border-top: 1px solid var(--line-dark); }
.marquee-track {
  display: flex; align-items: center; gap: 36px; width: max-content;
  animation: marquee 38s linear infinite;
  font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.marquee-track i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
@keyframes marquee { to { transform: translateX(-33.333%); } }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
/* While the strip moves, the words fade into Dark Blue before they reach the button (no box behind it) */
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none;
  width: calc(max(12px, var(--gutter) - 12px) + 120px);
  background: linear-gradient(to right, rgba(0, 14, 53, 0), var(--navy) 62%);
}
.marquee-toggle {
  position: absolute; z-index: 1; right: max(12px, var(--gutter) - 12px); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(247, 245, 238, 0.7); border-radius: 50%; background: var(--navy); color: var(--paper);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.marquee-toggle:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.marquee-toggle:focus-visible { border-radius: 50%; }
.marquee-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.marquee-toggle .i-play, .marquee.is-paused .marquee-toggle .i-pause { display: none; }
.marquee.is-paused .marquee-toggle .i-play { display: inline; }
/* Without JavaScript the pause button can't work, so the strip holds still (as with reduced motion; WCAG 2.2.2) */
html:not(.js) .marquee-track { animation: none; }
html:not(.js) .marquee-toggle, html:not(.js) .marquee::after { display: none; }

/* ---------- Sections ----------
   Light / dark rhythm (Brad, 2026-10-01): Cream About, the Dark Blue listings band on a Cream stage, Dark Blue
   Services, Cream Areas, Dark Blue Reviews, Cream Contact, then the Dark Blue footer. Two Dark Blue blocks never
   touch, so every change of ground is one clean, hard edge. */
.section { padding-block: var(--section); }
.section-dark { background: var(--navy); color: var(--on-dark); }
.section-head { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; margin-bottom: clamp(40px, 6vw, 72px); }
.section-num {
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.section-num span { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 1.25rem; color: var(--red-deep); margin-right: 12px; }
/* On Dark Blue (dark sections and the listings band): Cream at 80% (11.1:1), Sky Blue number (11.9:1) */
:is(.section-dark, .listings-band) .section-num { color: var(--on-dark-2); }
:is(.section-dark, .listings-band) .section-num span { color: var(--sky); }
.section-head h2, .listings-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 120; max-width: 16em;
}

/* About (Cream) */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pull {
  margin: 0; position: sticky; top: 120px;
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1.2; color: var(--ink);
  padding-left: 28px; border-left: 3px solid var(--red);
}
.about-body p { color: var(--ink-2); }
.about-body p:first-child::first-letter {
  float: left; font-family: var(--display); font-size: 4.2em; line-height: 0.8; padding: 6px 12px 0 0; color: var(--red);
}
.facts { margin: 36px 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.facts dd { margin: 0; font-weight: 500; }

/* Listings: Dark Blue title band; the listing row overlaps its lower edge onto the Cream stage below.
   Tony's live MLS® listings are drawn by the CREA DDF® widget (listings.tonysachdev.com/ddf-listings.css);
   everything below is scoped to .listings-section so it themes that widget without touching other sites. */
/* --overlap: how far the cards reach up into the band (the band's edge crosses the photos at every size). */
.listings-section { --overlap: clamp(150px, 15vw, 210px); position: relative; background: var(--paper); }
.listings-band {
  position: relative; overflow: hidden; background: var(--navy); color: var(--on-dark);
  padding-block: var(--section) calc(var(--overlap) + clamp(40px, 6vw, 72px));
}
/* RE/MAX Outlined Balloon: an official RE/MAX design element, not a logo. One brand colour (Primary Blue), one 1px
   line (the paths carry vector-effect: non-scaling-stroke), no fill, used large and cropped by the band, never near
   a logo. Wide screens: it sits to the right of the intro, cropped by the band's top and bottom edges (the listing
   cards cover its lower half), so the heading and intro stay on plain Dark Blue. */
.listings-balloon {
  --bh: clamp(700px, 62.5vw, 900px);               /* balloon height; width follows the 521 x 593 proportions */
  position: absolute; z-index: 0; pointer-events: none; overflow: visible;
  height: var(--bh); width: auto; aspect-ratio: 521.012 / 593.101;
  left: max(50% + 40px, var(--gutter) + 660px); top: clamp(-40px, -1.4vw, -16px);
  fill: none; stroke: var(--balloon-line); stroke-width: 1;
}
/* Narrower screens, where the intro runs the full width: the balloon is scaled to the band so that its two
   horizontal lines frame the intro, one just above "02 Listings" and one between the intro and the listing count,
   with no line crossing the text. (Its lines sit at 26.8% and 53.9% of its height.) */
@media (max-width: 999px) {
  .listings-balloon {
    --line1: calc(var(--section) - 18px);                                  /* just above the section number */
    --d: calc(var(--overlap) + clamp(40px, 6vw, 72px) + 62px);             /* band bottom padding + count row */
    --bh: calc((100% - var(--line1) - var(--d)) / 0.2707);                 /* % of the band's height */
    top: calc(var(--line1) - 0.26796 * var(--bh));
    left: calc(100% - clamp(56px, 14vw, 140px)); transform: translateX(-50%);
  }
}
@media (max-width: 600px) {
  .listings-balloon { --d: calc(var(--overlap) + clamp(40px, 6vw, 72px) + 36px); }
}
/* No cards (feed down, or no JavaScript): there is no count row, so the lower line would cross the intro. It sits
   halfway between the intro and the top of the REALTOR.ca / RE/MAX.ca card instead. */
@media (max-width: 999px) {
  :is(.listings-section.is-empty, html:not(.js) .listings-section) .listings-balloon {
    --d: calc(var(--overlap) + clamp(40px, 6vw, 72px) / 2);
  }
}
.listings-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.listings-head-copy { max-width: 46rem; }
.listings-head h2 { margin: 18px 0 20px; }
.listings-head h2 em { font-style: italic; font-weight: 300; color: var(--sky); }
.listings-lede { margin: 0; color: var(--on-dark-2); max-width: 36em; font-size: 1.125rem; }
.listings-head-meta { display: flex; align-items: center; gap: 20px; padding-bottom: 6px; }
.listings-count {
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(247, 245, 238, 0.75); white-space: nowrap;   /* 9.8:1 */
}
/* "Live" dot in Signature red (one colour for live, no off-palette green) */
.listings-count::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 4px rgba(215, 25, 32, 0.22);
}
.rail-nav { display: flex; gap: 10px; }
.rail-btn {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1.5px solid rgba(247, 245, 238, 0.45); background: transparent; color: var(--on-dark);
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
}
.rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover:not([aria-disabled="true"]) { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy); }
/* aria-disabled, not disabled: a disabled button would drop keyboard focus at the end of the row. */
.rail-btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.rail-btn[aria-disabled="true"]:focus-visible { opacity: 1; } /* keep the focus ring visible (3:1) on the disabled arrow */
.rail-btn:focus-visible { border-radius: 50%; }

/* The note gets the same air above Dark Blue Services as every other section edge (var(--section)).
   The extra -3px: the rail's top margin (below) collapses into this one, so its 9px top padding would push the cards
   3px lower than the 6px they have always sat under the stage's top; this keeps them exactly where they were. */
.listings-stage { position: relative; margin-top: calc(-1 * var(--overlap) - 3px); padding-bottom: var(--section); }
.listings-widget { min-height: 160px; }

/* Theme the widget: Tony's ink, navy and paper. Prices stay navy (red reads as "expensive"). */
.listings-section .ddfl {
  --ddfl-accent: var(--navy);
  --ddfl-accent-contrast: #fff;
  --ddfl-text: var(--ink);
  --ddfl-muted: var(--ink-2);
  --ddfl-surface: #fff;
  --ddfl-subtle: var(--paper);
  --ddfl-border: rgba(0, 14, 53, 0.12);
  --ddfl-radius: 10px;
  --ddfl-shadow: 0 1px 2px rgba(0, 14, 53, 0.06), 0 22px 44px -26px rgba(0, 14, 53, 0.5);
  --ddfl-shadow-hover: 0 2px 4px rgba(0, 14, 53, 0.08), 0 30px 56px -26px rgba(0, 14, 53, 0.6);
  font-size: 1rem; line-height: 1.5;
}
/* The header shows the count; with a handful of listings the sort/filter bar isn't needed. */
.listings-section .ddfl-toolbar { display: none; }

/* One row: 4 across on desktop, fewer on smaller screens, then swipe/scroll sideways. */
.listings-section .ddfl-grid {
  --rail-gap: clamp(16px, 2vw, 24px);
  display: grid; gap: var(--rail-gap); grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--rail-gap)) / 4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* The rail is a scroll container, so it clips what reaches past its padding: 9px leaves room for the focus ring's
     white halo (8px) on every side (sideways it must stay under the 16px card gap, or the next card would peek in),
     and 64px for the card shadows below it (the hover shadow reaches about 60px). The negative margins cancel the
     extra room, so the cards and the note stay where they were (the top one with help from .listings-stage). */
  padding: 9px 9px 64px; margin: -9px -9px -34px; scroll-padding-inline: 9px;
}
.listings-section .ddfl-grid::-webkit-scrollbar { display: none; }
.listings-section .ddfl-card { scroll-snap-align: start; border-color: rgba(0, 14, 53, 0.07); }
.listings-section .ddfl-card-open:focus-visible { outline: none; }
/* Primary Blue ring with white on both sides of it (6.5:1), so it also reads where the card's top crosses the Dark
   Blue band (Primary Blue on Dark Blue alone is only 2.9:1). The rail's 9px padding keeps the outer white whole. */
.listings-section .ddfl-card:has(.ddfl-card-open:focus-visible) {
  outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 0 0 8px #fff, var(--ddfl-shadow-hover);
}
@supports not selector(:has(*)) {
  .listings-section .ddfl-card-open:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .listings-section .ddfl-card:hover { transform: translateY(-4px); }
}

/* CREA's photos are mostly 3:2 and carry watermarks (REALTOR® mark top-left, brokerage bottom-centre):
   show the whole photo and keep the tags clear of both. A photo of another shape is fitted, not
   cropped, over a blurred copy of itself (.photo-backdrop, added by the page script). */
.listings-section .ddfl-media { aspect-ratio: 3 / 2; }
.listings-section .ddfl-media > img { object-fit: contain; }
.listings-section .ddfl-media > .photo-backdrop {
  object-fit: cover; filter: blur(18px) saturate(1.1); transform: scale(1.15); opacity: 0.9;
}
.listings-section .ddfl-chips { left: auto; right: 0.75rem; justify-content: flex-end; }
.listings-section .ddfl-chip { color: var(--navy); letter-spacing: 0.02em; }
.listings-section .ddfl-chip-accent { background: var(--navy); color: #fff; }
.listings-section .ddfl-count {
  background: rgba(0, 14, 53, 0.72); font-weight: 500; letter-spacing: 0.02em;
  bottom: calc(9% + 0.5rem); /* sits above the band where CREA's brokerage watermark runs (bottom-centre) */
}

.listings-section .ddfl-body { padding: 18px 20px 16px; gap: 1px; }
.listings-section .ddfl-price {
  font-family: var(--display); font-variation-settings: "opsz" 72; font-weight: 400;
  font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--navy);
}
.listings-section .ddfl-address { margin-top: 6px; font-weight: 600; color: var(--ink); }
.listings-section .ddfl-place { font-size: 0.9375rem; }
.listings-section .ddfl-facts { margin-top: 10px; font-size: 0.9375rem; color: var(--ink); }
.listings-section .ddfl-mls { font-size: 0.8125rem; }
.listings-section .ddfl-card-foot { padding: 12px 20px; }
.listings-section .ddfl-brokerage { font-size: 0.8125rem; color: var(--ink-2); }

/* Loading / unavailable / no listings */
.listings-section .ddfl-status {
  background: #fff; border: 1px solid var(--ddfl-border); box-shadow: var(--ddfl-shadow);
  padding: 56px 24px; font-size: 1rem; color: var(--ink-2);
}
/* No cards (feed down, none listed, or the widget didn't load): the links take the cards' place,
   on a white card over the band's edge, ahead of the fine print. */
.listings-section.is-empty .listings-widget { min-height: 0; }
.listings-section.is-empty .ddfl-status { display: none; }
.listings-fallback {
  padding: clamp(40px, 5vw, 64px) 24px; text-align: center;
  background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 14, 53, 0.06), 0 22px 44px -26px rgba(0, 14, 53, 0.5);
}
.listings-fallback p { margin: 0; color: var(--ink-2); }
.listings-fallback .actions { justify-content: center; margin-top: 16px; }

/* One short note under the row: where the listing data comes from. The trademark statement,
   Tony's name and the brokerage logo are in the footer on every page. */
.listings-note { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.65; color: var(--ink-2); max-width: 52em; }
.listings-section.is-empty .listings-note { display: none; }
/* Without JavaScript the widget can't draw the cards: show the same "no cards" state the page script would (the
   REALTOR.ca / RE/MAX.ca links on a white card over the band's edge), and drop the lede's "Open any listing ..." */
html:not(.js) .listings-widget, html:not(.js) .listings-note, html:not(.js) .listings-lede-more { display: none; }
html:not(.js) .listings-fallback[hidden] { display: block !important; }

/* Detail view (opens over the page). Editorial type to match the site. */
.listings-section .ddfl-dialog { font-family: var(--sans); }
.listings-section .ddfl-dialog:focus-visible { outline: none; } /* the dialog box itself is not a control */
.listings-section .ddfl-price-lg { font-family: var(--display); font-weight: 500; font-size: 2rem; color: var(--navy); }
.listings-section .ddfl-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.01em; margin-top: 6px;
}
.listings-section .ddfl-detail h3 {
  font-family: var(--sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--red-deep);
}
.listings-section .ddfl .ddfl-cta { font-weight: 600; border-radius: 999px; padding: 14px 28px; }
/* Thumbnails show the whole photo (so CREA's top-left watermark isn't trimmed), letterboxed in Dark Blue. */
.listings-section .ddfl-thumb img { object-fit: contain; background: var(--navy); }
/* Focus that reads on dark and bright photos, and keeps round buttons round. */
.listings-section .ddfl-close:focus-visible,
.listings-section .ddfl-nav:focus-visible {
  border-radius: 50%; outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--navy);
}
.listings-section .ddfl-thumb:focus-visible {
  border-radius: 6px; outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--navy); opacity: 1;
}

@media (min-width: 1101px) {
  .listings-section { --overlap: clamp(110px, 8.5vw, 124px); }
}

@media (max-width: 1100px) {
  .listings-section .ddfl-grid { grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3); }
}
@media (max-width: 860px) {
  /* Edge-to-edge swipe row: cards run to the screen edge, the next one peeks in. */
  .listings-section .ddfl-grid {
    grid-auto-columns: 46%;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
}
@media (max-width: 600px) {
  .listings-section { --overlap: 132px; }
  .listings-section .ddfl-grid { grid-auto-columns: 84%; }
  .rail-nav { display: none !important; }
  .listings-head-meta { padding-bottom: 0; }
}

/* Services (Dark Blue): the rows share one set of columns (subgrid), so every description starts at the same
   point however long its link is. Browsers without subgrid fall back to per-row columns. */
.services {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: 80px minmax(200px, 0.9fr) 1.4fr auto; column-gap: 24px;
}
.service {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: 80px minmax(200px, 0.9fr) 1.4fr auto; grid-template-columns: subgrid;
  gap: 24px; align-items: baseline;
  padding: 34px 0; border-bottom: 1px solid var(--line-dark); position: relative;
}
/* Hover rule in Signature red (3.6:1 on Dark Blue: a non-text mark) */
.service::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.service:hover::before { transform: scaleX(1); }
.service-num { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--sky); }
.service h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; transition: transform 0.4s var(--ease); }
.service:hover h3 { transform: translateX(6px); }
.service p { margin: 0; color: var(--on-dark-2); max-width: 38em; }
.service-link { font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; color: var(--on-dark); }
.service-link span { display: inline-block; color: var(--sky); transition: transform 0.3s var(--ease); }
.service-link:hover span { transform: translateX(4px); }

/* Areas (Cream) */
.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.areas h3 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red-deep); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.areas ul { list-style: none; margin: 0; padding: 0; }
.areas li { font-family: var(--display); font-size: 1.1875rem; line-height: 1.25; padding: 5px 0; }

/* Reviews (Dark Blue): white arched cards, Dark Blue text inside them */
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
/* Each card is a column with the caption pinned to its foot: both names line up, and the shorter quote's spare room
   sits above its name rather than as a blank white block below it */
.review {
  display: flex; flex-direction: column;
  margin: 0; background: var(--white); color: var(--ink); position: relative;
  border-radius: 999px 999px 10px 10px / 220px 220px 10px 10px;
  padding: clamp(96px, 10vw, 120px) clamp(28px, 4vw, 52px) 40px;
}
.review::before {
  content: "“"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 7rem; line-height: 1; color: var(--red);
}
.review blockquote { margin: 0; flex: 1 0 auto; }
.review p { font-family: var(--display); font-size: 1.1875rem; line-height: 1.55; font-weight: 350; color: var(--ink); }
.review figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.review figcaption strong { font-weight: 600; }
.review figcaption span { font-size: 0.875rem; color: var(--ink-2); }

/* Contact (Cream) */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.big-phone {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 300; font-variation-settings: "opsz" 144;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  background: linear-gradient(var(--red), var(--red)) left bottom / 0 3px no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s;
}
.big-phone:hover { background-size: 100% 3px; color: var(--red-deep); }
.contact-note { margin-top: 20px; color: var(--ink-2); max-width: 30em; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.contact-details h3 {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red-deep); margin-bottom: 10px;
}
.contact-details p { margin: 0 0 6px; }
.contact-details a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.contact-details a:hover { text-decoration-color: var(--red); }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Contact form. The Services links land on .contact-panel (the form, or the "Send a text" card while the form is
   unavailable), a little below the bar. */
.contact-panel { scroll-margin-top: 20px; }
.form-fallback p { color: var(--ink-2); }
.form-fallback .actions { margin-top: 20px; }
.contact-form {
  background: var(--white); border-radius: 12px; position: relative;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 60px -40px rgba(0, 14, 53, 0.4);
  border-top: 4px solid var(--red);
}
.contact-form h3 { font-size: clamp(1.625rem, 2.6vw, 2rem); letter-spacing: -0.01em; margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.field > span em { font-style: normal; font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
/* Visible field edges: Dark Blue at 50% is 3.6:1 against the white form (WCAG 1.4.11) */
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid rgba(0, 14, 53, 0.5); border-radius: 8px;
  padding: 12px 14px; transition: border-color 0.2s, background-color 0.2s;
}
.field textarea { resize: vertical; min-height: 128px; }
/* Placeholder at AA but lighter than typed text: #4A5068 at 88% is 5.4:1 on Cream (Chrome's default was 4.2:1) */
.field ::placeholder { color: rgba(74, 80, 104, 0.88); opacity: 1; }
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
  transition: border-color 0.4s, background-color 0.4s, box-shadow 0.6s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: var(--white); border-color: var(--blue); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red); }
/* A Services link set the interest: the select lights up for a moment (Primary Blue, as on focus) */
.field.is-preset select { border-color: var(--blue); background-color: var(--white); box-shadow: 0 0 0 4px rgba(0, 67, 255, 0.14); }
.hp { display: none !important; } /* display:none (not off-screen) so browsers never autofill the bot trap */
.cf-turnstile { margin: 6px 0 18px; min-height: 65px; }
form.contact-form .btn { border: 0; cursor: pointer; width: 100%; justify-content: center; }
form.contact-form .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.form-status { margin: 14px 0 0; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red-deep); }
.form-status.is-ok { color: var(--ink); font-size: 1.0625rem; }
.form-status a { color: var(--red-deep); }
.form-privacy { margin: 12px 0 0; font-size: 0.8125rem; color: var(--ink-2); text-align: center; }
.contact-form.is-sent { text-align: center; padding-block: 56px; }
.contact-form.is-sent h3 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--red); font-style: italic; font-weight: 300; }
.contact-form.is-sent h3:focus { outline: none; } /* focused by script for screen readers; not interactive */

/* ---------- Footer ----------
   Dark Blue bookend. The RE/MAX All-Stars office logo stands on its own here (cream version, as-is, on plain Dark
   Blue, never boxed, never paired with Tony's logo), then the footer nav and the legal text (word-for-word: CREA
   DDF Rule 6(c) asks for the trademark statement, Tony's name and the brokerage logo on every page).
   Clear space for the office logo = half the "X": horizontal lockup 0.363 x its height, stacked about 0.3 x. */
.sitefoot {
  position: relative; z-index: 101; background: var(--navy); color: var(--on-dark);
  padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 56px);
}
.sitefoot-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px 64px;
  padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line-dark);
}
/* Horizontal cream lockup at 64px (437px wide): clear space 23px; the nearest neighbours are 40px+ away */
.sitefoot-office { display: block; flex: none; }
.sitefoot-office img { height: 64px; width: auto; max-width: none; }
.sitefoot-nav { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.sitefoot-nav a {
  color: var(--on-dark-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 6px 0;
  background: linear-gradient(var(--sky), var(--sky)) left calc(100% - 2px) / 0 1.5px no-repeat;
  transition: color 0.25s, background-size 0.35s var(--ease);
}
.sitefoot-nav a:hover { color: var(--on-dark); background-size: 100% 1.5px; }
.sitefoot-legal { padding-top: clamp(28px, 3.5vw, 40px); max-width: 64rem; }

.legal p { font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 10px; line-height: 1.6; }
.legal .legal-marks { font-size: 0.6875rem; line-height: 1.55; } /* trademark statement (CREA DDF Rule 6(c)(i)), set small */
.sitefoot-legal p { color: rgba(247, 245, 238, 0.76); }            /* 10.1:1 on Dark Blue */
.sitefoot-legal strong { color: var(--on-dark); font-weight: 600; }
.sitefoot-legal .legal-marks { color: rgba(247, 245, 238, 0.68); } /* 8.2:1 on Dark Blue */
.sitefoot-legal p:last-child { margin-bottom: 0; }
.sitefoot-legal .nobr { white-space: nowrap; }   /* keeps the office phone number on one line */

@media (max-width: 1000px) {
  .sitefoot-office img { height: 52px; }          /* clear space 19px */
}
@media (max-width: 720px) {
  /* Stacked cream lockup (1765 x 653) at 88px tall: 238px wide; the X is about 53% of its height, so clear space
     is about 24px (and the logo sits 24px+ clear of the screen edge) */
  .sitefoot-top { flex-direction: column; align-items: flex-start; gap: 40px; }
  .sitefoot-office { margin-left: 4px; }
  .sitefoot-office img { height: 88px; }
  .sitefoot-nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 2px 32px; }
}

/* ---------- Phones: fixed bottom Call/Text bar (Dark Blue) ----------
   Always there on phones (the hero's button is "Contact me", so this is the phone's Call). It steps aside only while
   a form field has focus, so it never covers the field being typed in, and always comes back for keyboard focus. */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* focus never lands under the bar (WCAG 2.4.11) */
  .sitefoot { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); }  /* room for the bar at the very end */
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 102;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 14, 53, 0.97); border-top: 1px solid var(--line-dark);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform 0.35s var(--ease);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    border-radius: 999px; font-weight: 600; text-decoration: none;
    border: 1.5px solid var(--on-dark); color: var(--on-dark);
  }
  .mobile-bar a:first-child { background: var(--red-btn); border-color: var(--red-btn); color: var(--white); }
  .mobile-bar a:focus-visible { border-radius: 999px; }
  body:has(.contact-form :focus) .mobile-bar { transform: translateY(110%); }
  .mobile-bar:focus-within { transform: none; }
}

/* Scroll reveal (only when JS is on) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .areas { grid-template-columns: repeat(3, 1fr); }
  .services { display: block; }
  .service { grid-template-columns: 56px 1fr; }
  .service p, .service-link { grid-column: 2; }
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 10px; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); } /* never wider than the screen */
  .pull { position: static; }
  .reviews { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .areas { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-details { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .contact-form { padding-inline: 24px; } /* keeps 300px free for the full security check on 390px+ phones */
  .areas { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* everything lands on its final frame at once, with no staggered delays */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .hero [data-a] { animation: none !important; }
  .marquee-track { animation: none; }
  .marquee-toggle, .marquee::after { display: none; }   /* the strip doesn't move: nothing to pause or fade */
  .js [data-reveal] { opacity: 1; transform: none; }
  .mobile-bar { transition: none; }
}