/*
Theme Name: Unreserved
Theme URI: https://unreservedrealestate.com.au
Author: Unreserved
Author URI: https://unreservedrealestate.com.au
Description: Block theme for Unreserved — flat-fee, AI-powered Australian real estate. Brand-locked tokens (Electric Blue #0042E6, near-black, Manrope), Opendoor-inspired block layout (rounded feature cards), minimalist iPhone frame with Dynamic Island, animated AI Valuation demo + BidSmart auction demo matched to the real app UI (Reserve Met banner, real bid progression $725k→$744.5k, timer countdown, vendor profile), and 21st.dev-style animations baked in.
Version: 6.4.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unreserved
Tags: full-site-editing, block-patterns, custom-colors, custom-typography, wide-blocks
*/

/* Unreserved — local preview stylesheet
   Mirrors the WordPress unreserved-theme tokens so the .blocks.html files
   render the same way in a browser as they will inside WordPress. */

/* Manrope is the brand voice. JetBrains Mono is reserved for data labels,
   product UI captions, ticker rows, and tabular figures — anything that
   should read as "real platform output". Self-hosted from assets/fonts/. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/manrope-300.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jetbrainsmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/jetbrainsmono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/jetbrainsmono-600.woff2') format('woff2'); }

:root {
  /* Brand */
  --brand-blue:        #0042E6;
  --brand-blue-hover:  #0034B8;
  --brand-blue-soft:   rgba(0,66,230,0.08);
  --brand-blue-mid:    rgba(0,66,230,0.18);
  --brand-blue-glow:   rgba(0,66,230,0.40);
  --brand-blue-tint:   #94A3FF;

  /* Surfaces — ink dominant, paper light, white highest */
  --ink:        #080C1A;   /* primary dark surface */
  --ink-2:      #0E1326;   /* a half-step up from ink, for layered cards */
  --ink-3:      #161B30;   /* card surface on dark */
  --ink-4:      #232844;   /* hover-state on dark cards */
  --paper:      #F8F9FC;   /* light surface, brand off-white */
  --paper-2:    #EFF1F7;   /* deeper light, for inset blocks */
  --white:      #FFFFFF;   /* highest surface */

  /* Type colors */
  --body:       #2A2E3A;
  --muted:      #6E7180;
  --soft:       #9DA2B3;

  /* Hairlines */
  --rule:       rgba(10,14,26,0.10);
  --rule-strong: rgba(10,14,26,0.18);
  --rule-dark:  rgba(255,255,255,0.10);
  --rule-dark-strong: rgba(255,255,255,0.20);

  /* Layout */
  --content-width: 720px;
  --wide-width:    1240px;
  --gutter:        clamp(20px, 4vw, 56px);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     20px;

  /* Type scale (Manrope only, fluid via clamp) */
  --fs-small:    13px;
  --fs-body:     17px;
  --fs-lede:     20px;
  --fs-h-3:      22px;
  --fs-h-2:      clamp(28px, 3.4vw, 40px);
  --fs-h-1:      clamp(36px, 5vw, 56px);
  --fs-display:  clamp(48px, 7.6vw, 92px);
  --fs-monolith: clamp(64px, 10vw, 144px);
  --fs-numeral:  clamp(72px, 11vw, 144px);
  --fs-eyebrow:  12px;

  /* Type families */
  --ff-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Legacy shims (don't break existing classes) */
  --near-black: #080C1A;
  --off-white:  #F8F9FC;
  --border:     rgba(10,14,26,0.10);
  --paper-deep: #EFF1F7;
  --rule-soft:  rgba(10,14,26,0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-blue); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}
h1 { font-size: var(--fs-h-1); }
h2 { font-size: var(--fs-h-2); }
h3 { font-size: var(--fs-h-3); letter-spacing: -0.015em; line-height: 1.2; }

p { margin: 0 0 16px; }
strong, b { font-weight: 700; color: var(--ink); }
::selection { background: var(--brand-blue); color: #fff; }

/* Layout primitives that mirror Gutenberg's wp-block-group / wp-block-columns */
.wp-block-group { width: 100%; }
.wp-block-group__inner-container {
  max-width: var(--wide-width);
  margin: 0 auto;
}

/* The site main area: imported page content lives inside .entry-content,
   which WP gives is-layout-constrained styling — forcing every direct child
   to max-width: 740px with auto margins. We override that so sections render
   edge-to-edge as designed. */
.u-main { width: 100%; padding-block: 0 !important; margin-block: 0 !important; }
.u-main .entry-content,
.u-main > .wp-block-post-content {
  max-width: none;
  width: 100%;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* Eliminate WP-injected block-gap between site header, main, and footer.
   Block themes default to ~24-32px between root-level template parts which
   shows as a visible whitespace stripe between the menu and the hero, and
   between the bottom CTA section and the footer. We collapse that gap so
   sections render flush against the header/footer. */
html, body { --wp--style--block-gap: 0 !important; }
body > header,
body > main,
body > footer,
.wp-site-blocks,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > *,
.wp-site-blocks > * + *,
.wp-site-blocks > .is-layout-flow > * + *,
.wp-site-blocks > .is-layout-constrained > * + *,
.u-main,
.u-main > *,
.u-main > * + *,
.u-main .entry-content,
.u-main .entry-content > * + *,
.u-main > .wp-block-post-content,
.u-main > .wp-block-post-content > * + * {
  margin-block: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.wp-site-blocks {
  padding-block: 0 !important;
  --wp--style--block-gap: 0 !important;
}
/* Belt-and-braces: WP's default flow layout selector */
:where(.wp-site-blocks.is-layout-flow) > :where(:not(:first-child)),
:where(body > .is-layout-flow) > :where(:not(:first-child)),
:where(.u-main.is-layout-flow) > :where(:not(:first-child)),
:where(.u-main .entry-content.is-layout-flow) > :where(:not(:first-child)) {
  margin-block-start: 0 !important;
}
.u-main .entry-content > *,
.u-main > .wp-block-post-content > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Default vertical rhythm for top-level content sections. Generous by
   design — high-end editorial sites breathe at 140–180px between zones.
   :not(.u-hero) lets the hero set its own (smaller) padding without a
   specificity battle. The plain `main >` form covers the local preview
   wrapper which uses bare <main>. */
.u-main .entry-content > section.wp-block-group:not(.u-hero),
.u-main > .wp-block-post-content > section.wp-block-group:not(.u-hero),
.u-main > section.wp-block-group:not(.u-hero),
main > section.wp-block-group:not(.u-hero),
main > article.wp-block-group {
  padding: clamp(96px, 12vw, 168px) 24px;
}

.has-near-black-background-color { background-color: var(--ink); color: rgba(255,255,255,0.78); }
.has-near-black-background-color h1,
.has-near-black-background-color h2,
.has-near-black-background-color h3,
.has-near-black-background-color h4,
.has-near-black-background-color p { color: #fff; }
.has-near-black-background-color a { color: #fff; }
.has-near-black-background-color a:hover { color: var(--brand-blue-tint); }
.has-near-black-background-color p { color: rgba(255,255,255,0.78); }

.has-off-white-background-color { background-color: var(--paper); }
.has-white-background-color { background-color: var(--white); }
.has-brand-blue-background-color { background-color: var(--brand-blue); color: #fff; }
.has-brand-blue-background-color h1,
.has-brand-blue-background-color h2,
.has-brand-blue-background-color h3,
.has-brand-blue-background-color p { color: #fff; }
.has-brand-blue-background-color a { color: #fff; }

.has-brand-blue-color { color: var(--brand-blue); }
.has-near-black-color { color: var(--ink); }
.has-ink-color { color: var(--ink); }
.has-muted-color { color: var(--muted); }
.has-white-color { color: #fff; }
.has-paper-color { color: var(--paper); }

.has-hero-font-size { font-size: var(--fs-display); line-height: 0.94; letter-spacing: -0.035em; }
.has-h-1-font-size { font-size: var(--fs-h-1); line-height: 1.05; letter-spacing: -0.025em; }
.has-h-2-font-size { font-size: var(--fs-h-2); }
.has-h-3-font-size { font-size: var(--fs-h-3); }
.has-body-font-size { font-size: var(--fs-body); }
.has-small-font-size { font-size: var(--fs-small); }

.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* Buttons — primary is electric blue with a subtle blue glow that
   intensifies on hover (the platform's "live" cue). Secondary is a
   hairline-bordered ghost. Both have soft pill geometry so they read
   modern-product, not flat-2017. */
.wp-block-button {
  display: inline-block;
  margin: 6px 10px 6px 0;
}
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow), 0 8px 24px -10px var(--brand-blue-glow);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 6px var(--brand-blue-soft), 0 12px 28px -8px var(--brand-blue-glow);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.has-near-black-background-color .wp-block-button .wp-block-button__link {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.has-near-black-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-near-black-background-color .wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  border-color: var(--rule-dark-strong);
}
.has-near-black-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-near-black-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.has-brand-blue-background-color .wp-block-button .wp-block-button__link {
  background: #fff;
  color: var(--brand-blue);
  border-color: #fff;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.3);
}
.has-brand-blue-background-color .wp-block-button .wp-block-button__link:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Columns */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) {
  .wp-block-columns { flex-direction: column; }
}

/* ============================================================
   THE LIVE PLATFORM — modern proptech primitives
   Dark-mode dominant. Electric Blue as the assertive accent.
   Real product UI mockups, dense modular sections, mono labels for
   data-feeling captions, soft blue glows on live elements.
   ============================================================ */

/* Card — modern modular product card. Subtle radius, soft border, gentle
   shadow on hover. Lives on light surfaces by default; .u-card--dark for
   sections on ink. */
.u-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  height: 100%;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.u-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(8,12,26,0.18);
  border-color: var(--rule-strong);
}
.u-card--paper { background: var(--paper); }
.u-card--dark {
  background: var(--ink-3);
  border-color: var(--rule-dark);
  color: rgba(255,255,255,0.78);
}
.u-card--dark:hover {
  background: var(--ink-4);
  border-color: var(--rule-dark-strong);
  box-shadow: 0 0 0 1px var(--brand-blue-mid), 0 24px 48px -16px rgba(0,0,0,0.5);
}
.u-card--feature {
  background: var(--ink-3);
  color: #fff;
  border: 1px solid var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow), 0 24px 56px -16px var(--brand-blue-glow);
}
.u-card--feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px var(--brand-blue-soft), 0 28px 64px -16px var(--brand-blue-glow);
}
.u-card--flat:hover { transform: none; box-shadow: none; }

.u-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.u-card__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px var(--brand-blue-soft);
}
.u-card--dark .u-card__eyebrow,
.u-card--feature .u-card__eyebrow { color: var(--brand-blue-tint); }
.u-card--feature .u-card__eyebrow::before { background: var(--brand-blue-tint); box-shadow: 0 0 0 4px rgba(148,163,255,0.18); }

/* Legacy .u-card__icon — reskinned as a small bold-sans numeral plate,
   no italic serif glyph. */
.u-card__icon {
  width: 48px; height: 48px;
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
  border: 1px solid var(--brand-blue-mid);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* HERO — dark by default. .u-hero--light flips to off-white. */
.u-hero {
  padding: 80px 0 96px;
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  position: relative;
  overflow: hidden;
}
.u-hero > .wp-block-group__inner-container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--wide-width);
}
.u-hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  color: #fff;
  max-width: 18ch;
  margin: 0 0 24px;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
/* The brand period-dot accent — turns the wordmark trick into reusable type */
h1 .u-dot, h2 .u-dot, h3 .u-dot, .u-dot { color: var(--brand-blue); }
.u-hero p {
  max-width: 48ch;
  margin: 0 0 28px;
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
}
.u-hero .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.u-hero--light {
  background: var(--paper);
  color: var(--body);
}
.u-hero--light h1 { color: var(--ink); }
.u-hero--light p  { color: var(--body); }

.u-hero--blue {
  background: var(--brand-blue);
  color: #fff;
}
.u-hero--blue h1 { color: #fff; }
.u-hero--blue p  { color: rgba(255,255,255,0.86); }
.u-hero--blue .u-dot { color: #fff; }

.u-hero--dark { /* alias for back-compat */ background: var(--ink); color: rgba(255,255,255,0.78); }

.u-hero--center { text-align: center; }
.u-hero--center h1,
.u-hero--center p { margin-left: auto; margin-right: auto; }
.u-hero--center .wp-block-buttons { justify-content: center; }

/* Hero meta strip — replaces the editorial masthead. Mono pill row with
   a live "now" indicator dot, brand mark, and contextual chips. */
.u-meta-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  margin-bottom: 32px;
}
.u-hero--light .u-meta-row,
.has-off-white-background-color .u-meta-row,
.has-white-background-color .u-meta-row {
  color: var(--muted);
  background: rgba(255,255,255,0.6);
  border-color: var(--rule-strong);
}
.u-meta-row__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
}
.u-hero--light .u-meta-row__live,
.has-off-white-background-color .u-meta-row__live,
.has-white-background-color .u-meta-row__live { color: var(--ink); }
.u-meta-row__live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow);
  animation: u-live-pulse 2s ease-out infinite;
}
.u-meta-row__sep {
  width: 1px; height: 12px;
  background: var(--rule-dark);
  margin: 0 12px;
}
.u-hero--light .u-meta-row__sep,
.has-off-white-background-color .u-meta-row__sep,
.has-white-background-color .u-meta-row__sep { background: var(--rule-strong); }
.u-meta-row__chip {
  background: rgba(0,66,230,0.18);
  color: var(--brand-blue-tint);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 12px;
}
.u-hero--light .u-meta-row__chip,
.has-off-white-background-color .u-meta-row__chip,
.has-white-background-color .u-meta-row__chip {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

@keyframes u-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--brand-blue-glow); }
  70%  { box-shadow: 0 0 0 8px rgba(0,66,230,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,66,230,0); }
}

/* Eyebrow — single line, small mono caps with a brand dot. Works on dark
   and light surfaces (color is inherited from local rule). */
.u-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.u-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.u-eyebrow--ink { color: var(--ink); }
.u-eyebrow--muted { color: var(--muted); }
.u-eyebrow--muted::before { background: var(--brand-blue); }
.has-near-black-background-color .u-eyebrow { color: var(--brand-blue-tint); }

.u-section-heading {
  max-width: 720px;
  margin: 0 0 56px;
}
.u-section-heading--center { text-align: center; margin-left: auto; margin-right: auto; }
.u-section-heading h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 18px;
  max-width: 22ch;
}
.u-section-heading--center h2 { margin-left: auto; margin-right: auto; }
.u-section-heading p {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.5;
  margin: 0;
}
.has-near-black-background-color .u-section-heading p { color: rgba(255,255,255,0.72); }

.u-stat {
  font-family: var(--ff-sans);
  font-size: 48px;
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}

/* Monolith — the headline number. Tabular, oversized, with a mono label
   stacked beneath. */
.u-monolith {
  font-family: var(--ff-sans);
  font-size: var(--fs-monolith);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-feature-settings: 'tnum';
  display: block;
  margin: 0;
}
.u-monolith--blue { color: var(--brand-blue); }
.u-monolith--white { color: #fff; }
.has-near-black-background-color .u-monolith { color: #fff; }
.u-monolith__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 16px;
  max-width: 32ch;
  line-height: 1.5;
}
.has-near-black-background-color .u-monolith__caption { color: rgba(255,255,255,0.6); }

/* Section numerals — bold sans, tabular, brand blue. No more italic serif. */
.u-numeral {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 800;
  font-size: var(--fs-numeral);
  line-height: 0.86;
  color: var(--brand-blue);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
  display: block;
  margin: 0 0 8px;
}
.u-numeral--ink { color: var(--ink); }
.u-numeral--small { font-size: clamp(40px, 5vw, 72px); }
.u-numeral--ghost { color: transparent; -webkit-text-stroke: 1px var(--brand-blue); text-stroke: 1px var(--brand-blue); }

/* Pull-quote — bold sans-serif statement. No italic serif. */
.u-pull {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.has-near-black-background-color .u-pull { color: #fff; }
.u-pull--blue { color: var(--brand-blue); }
.u-pull__attribution {
  display: block;
  margin-top: 32px;
  font-family: var(--ff-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.has-near-black-background-color .u-pull__attribution { color: rgba(255,255,255,0.6); }

.u-aside {
  font-family: var(--ff-sans);
  font-style: normal;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 48ch;
}

.u-lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--body);
  max-width: 56ch;
  margin: 0 0 24px;
}
.has-near-black-background-color .u-lede { color: rgba(255,255,255,0.78); }
.u-lede--dropcap { /* drop-cap variant intentionally collapsed to a normal lede in v2.0 */ }

/* Hairline rules */
.u-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  height: 0;
  margin: 0;
  width: 100%;
}
.u-rule--strong { border-top-color: var(--rule-strong); }
.u-rule--blue { border-top: 2px solid var(--brand-blue); }
.has-near-black-background-color .u-rule { border-top-color: var(--rule-dark); }
.has-near-black-background-color .u-rule--strong { border-top-color: var(--rule-dark-strong); }

/* Mono caption / metadata */
.u-stamp {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.u-stamp strong { color: var(--ink); font-weight: 600; }
.has-near-black-background-color .u-stamp { color: rgba(255,255,255,0.6); }
.has-near-black-background-color .u-stamp strong { color: #fff; }

/* Marker — the brand's signature blue dot. Rendered at currentColor's
   x-height so it sits inside text like a period. */
.u-marker {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--brand-blue);
  vertical-align: 0.06em;
  margin: 0 0.04em 0 0.05em;
}

/* Asymmetric split — 7 / 5 columns, breaks to stack on narrow viewports. */
.u-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.u-split--top { align-items: start; }
.u-split--center { align-items: center; }
.u-split--reverse { grid-template-columns: 5fr 7fr; }
.u-split--even { grid-template-columns: 1fr 1fr; }
.u-split--6-6 { grid-template-columns: 6fr 6fr; }
.u-split--8-4 { grid-template-columns: 8fr 4fr; }
@media (max-width: 900px) {
  .u-split, .u-split--reverse, .u-split--even, .u-split--6-6, .u-split--8-4 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Ledger — line-by-line comparison. Modern: subtle blue tint on the winning
   row, monospace data labels, tabular figures right-aligned. */
.u-ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
}
.u-ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.u-ledger__row:last-child { border-bottom: 1px solid var(--rule); }
.u-ledger__row--win {
  background: linear-gradient(90deg, var(--brand-blue-soft) 0%, transparent 90%);
  padding-left: 16px;
  margin-left: -16px;
  margin-right: -16px;
  padding-right: 16px;
}
.u-ledger__row--total { border-top: 2px solid var(--ink); padding-top: 26px; }
.u-ledger__label {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.u-ledger__label strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}
.u-ledger__row--win .u-ledger__label strong { color: var(--brand-blue); }
.u-ledger__amount {
  font-family: var(--ff-sans);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: 'tnum';
  line-height: 1;
  text-align: right;
}
.u-ledger__row--win .u-ledger__amount { color: var(--brand-blue); }
.u-ledger__row--strike .u-ledger__amount {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.u-ledger__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.has-near-black-background-color .u-ledger__row { border-top-color: var(--rule-dark); }
.has-near-black-background-color .u-ledger__row:last-child { border-bottom-color: var(--rule-dark); }
.has-near-black-background-color .u-ledger__row--total { border-top-color: #fff; }
.has-near-black-background-color .u-ledger__label { color: rgba(255,255,255,0.6); }
.has-near-black-background-color .u-ledger__label strong { color: #fff; }
.has-near-black-background-color .u-ledger__amount { color: #fff; }
.has-near-black-background-color .u-ledger__row--win .u-ledger__label strong,
.has-near-black-background-color .u-ledger__row--win .u-ledger__amount { color: var(--brand-blue-tint); }
.has-near-black-background-color .u-ledger__caption { color: rgba(255,255,255,0.6); }

/* Numbered chapter — bold sans numeral (no italic serif), title, body,
   and a mono data aside on the right. */
.u-chapter {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 7fr 4fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 48px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.u-chapter:last-child { border-bottom: 1px solid var(--rule); }
.u-chapter__num {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.86;
  color: var(--brand-blue);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
}
.u-chapter__title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink);
}
.u-chapter__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
  margin: 0;
}
.u-chapter__aside {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
  padding-top: 8px;
}
.u-chapter__aside strong { color: var(--ink); font-weight: 600; }
.has-near-black-background-color .u-chapter { border-top-color: var(--rule-dark); }
.has-near-black-background-color .u-chapter:last-child { border-bottom-color: var(--rule-dark); }
.has-near-black-background-color .u-chapter__title { color: #fff; }
.has-near-black-background-color .u-chapter__body { color: rgba(255,255,255,0.72); }
.has-near-black-background-color .u-chapter__aside { color: rgba(255,255,255,0.6); }
.has-near-black-background-color .u-chapter__aside strong { color: #fff; }
@media (max-width: 900px) {
  .u-chapter { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
  .u-chapter__num { font-size: 56px; }
}

/* Section header — replaces the old editorial "issue" running header.
   Mono kicker on the left, contextual stamp on the right, hairline below. */
.u-section-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.u-section-header__title {
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.u-section-header__title::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}
.u-section-header__spacer { flex: 1; }
.has-near-black-background-color .u-section-header { border-bottom-color: var(--rule-dark); color: rgba(255,255,255,0.6); }
.has-near-black-background-color .u-section-header__title { color: #fff; }

/* Comparison table — clean three-column "us vs them" with row rules */
.u-compare {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
}
.u-compare th, .u-compare td {
  text-align: left;
  padding: 18px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  vertical-align: top;
}
.u-compare th {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}
.u-compare th:nth-child(3), .u-compare td:nth-child(3) {
  background: var(--brand-blue-soft);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.u-compare th:nth-child(3) { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.u-compare td:first-child { font-weight: 600; color: var(--ink); }
.u-compare__cross { color: var(--muted); }
.u-compare__check { color: var(--brand-blue); font-weight: 600; }
@media (max-width: 700px) {
  .u-compare th, .u-compare td { padding: 14px 10px; font-size: 13px; }
}

/* Photo frame — image with caption + location stamp underneath */
.u-photo {
  display: block;
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: var(--radius);
}
.u-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-photo--portrait { aspect-ratio: 4 / 5; }
.u-photo--landscape { aspect-ratio: 16 / 10; }
.u-photo--square { aspect-ratio: 1 / 1; }
.u-photo--tall { aspect-ratio: 3 / 5; }
.u-photo__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.u-photo__caption strong { color: var(--ink); font-weight: 600; }
.u-photo__caption .u-photo__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-blue); }

/* Pricing block */
.u-pricetag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 24px;
}
.u-pricetag__amount {
  font-family: var(--ff-sans);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 0.9;
  font-feature-settings: 'tnum';
}
.has-near-black-background-color .u-pricetag__amount,
.u-card--dark .u-pricetag__amount,
.u-card--feature .u-pricetag__amount { color: #fff; }
.u-pricetag__suffix {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tabular figures helper */
.u-tabular { font-feature-settings: 'tnum'; }
.u-italic { font-style: italic; font-weight: inherit; }
.u-mono { font-family: var(--ff-mono); }


/* ============================================================
   PLATFORM PRIMITIVES — mock product UI, live ticker, bar viz
   ============================================================ */

/* Screen — a mock product UI card. Reads as a real platform widget
   sitting in the page. Hairline border, monospaced data labels, subtle
   gradient highlight, and a soft electric-blue glow. */
.u-screen {
  background: var(--ink-2);
  border: 1px solid var(--rule-dark-strong);
  border-radius: var(--radius);
  padding: 20px;
  color: rgba(255,255,255,0.86);
  font-family: var(--ff-sans);
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,66,230,0.18),
    0 30px 80px -30px rgba(0,66,230,0.45),
    0 50px 120px -40px rgba(0,0,0,0.6);
  overflow: hidden;
}
.u-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(0,66,230,0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%);
  pointer-events: none;
}
.u-screen > * { position: relative; z-index: 1; }
.u-screen--light {
  background: var(--white);
  color: var(--body);
  border-color: var(--rule-strong);
  box-shadow:
    0 0 0 1px var(--brand-blue-mid),
    0 30px 80px -30px var(--brand-blue-glow),
    0 40px 80px -30px rgba(8,12,26,0.18);
}
.u-screen--light::before {
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(0,66,230,0.06) 0%, transparent 60%);
}
.u-screen__topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.u-screen--light .u-screen__topbar {
  border-bottom-color: var(--rule);
  color: var(--muted);
}
.u-screen__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.u-screen__dot--live {
  background: var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow);
  animation: u-live-pulse 2s ease-out infinite;
}
.u-screen__dot--green { background: #22C55E; }
.u-screen__dot--amber { background: #F59E0B; }
.u-screen__title {
  margin-left: auto;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.u-screen--light .u-screen__title { color: var(--ink); }
.u-screen__h {
  font-size: 12px;
  font-family: var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 18px 0 6px;
}
.u-screen--light .u-screen__h { color: var(--muted); }
.u-screen__address {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.u-screen--light .u-screen__address { color: var(--ink); }
.u-screen__big {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  font-feature-settings: 'tnum';
  margin: 0;
}
.u-screen--light .u-screen__big { color: var(--ink); }
.u-screen__big--blue { color: var(--brand-blue-tint); }
.u-screen--light .u-screen__big--blue { color: var(--brand-blue); }
.u-screen__sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.u-screen--light .u-screen__sub { color: var(--muted); }
.u-screen__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--brand-blue);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.u-screen__cta:hover { background: var(--brand-blue-hover); color: #fff; }

/* Confidence bar — track + filled segment, mono percentage label */
.u-confidence {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
}
.u-confidence__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.u-screen--light .u-confidence__track { background: var(--paper-2); }
.u-confidence__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-tint) 100%);
  width: var(--u-fill, 92%);
  border-radius: inherit;
  box-shadow: 0 0 12px var(--brand-blue-glow);
}
.u-confidence__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  font-feature-settings: 'tnum';
}
.u-screen--light .u-confidence__label { color: var(--ink); }

/* Data row — label : value pairs in product UI */
.u-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--ff-sans);
  font-size: 14px;
}
.u-screen--light .u-data-row { border-top-color: var(--rule); }
.u-data-row:first-of-type { border-top: 0; }
.u-data-row__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.u-screen--light .u-data-row__label { color: var(--muted); }
.u-data-row__value {
  font-weight: 600;
  color: #fff;
  font-feature-settings: 'tnum';
}
.u-screen--light .u-data-row__value { color: var(--ink); }
.u-data-row__value--blue { color: var(--brand-blue-tint); }
.u-screen--light .u-data-row__value--blue { color: var(--brand-blue); }

/* Live activity ticker — horizontal scrolling band of recent campaigns.
   Sits between sections like a stock ticker, pulses with a live dot. */
.u-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
}
.u-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 24px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  border-right: 1px solid var(--rule-dark);
  position: relative;
  z-index: 2;
  background: var(--ink);
}
.u-ticker__label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow);
  animation: u-live-pulse 2s ease-out infinite;
}
.u-ticker__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.u-ticker__viewport::before,
.u-ticker__viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.u-ticker__viewport::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.u-ticker__viewport::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.u-ticker__track {
  display: flex;
  width: max-content;
  animation: u-marquee 60s linear infinite;
}
.u-ticker__viewport:hover .u-ticker__track { animation-play-state: paused; }
.u-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  font-family: var(--ff-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  font-feature-settings: 'tnum';
}
.u-ticker__item strong { color: #fff; font-weight: 600; }
.u-ticker__item--blue strong { color: var(--brand-blue-tint); }
.u-ticker__sep {
  width: 1px; height: 16px;
  background: var(--rule-dark);
}

/* Bar comparison — horizontal bars showing two costs side by side. CSS
   only, no JS. The "win" bar gets brand blue with a soft glow. */
.u-bars {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr auto;
  gap: 14px 24px;
  align-items: center;
  font-family: var(--ff-sans);
}
.u-bars__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.has-near-black-background-color .u-bars__label { color: rgba(255,255,255,0.65); }
.u-bars__track {
  height: 14px;
  border-radius: 999px;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.has-near-black-background-color .u-bars__track { background: var(--ink-3); }
.u-bars__fill {
  position: absolute;
  inset: 0;
  width: var(--u-bar, 50%);
  background: var(--ink);
  border-radius: inherit;
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.u-bars__fill--blue {
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-tint) 100%);
  box-shadow: 0 0 16px var(--brand-blue-glow);
}
.u-bars__amount {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: 'tnum';
  line-height: 1;
}
.has-near-black-background-color .u-bars__amount { color: #fff; }
.u-bars__amount--blue { color: var(--brand-blue); }
.has-near-black-background-color .u-bars__amount--blue { color: var(--brand-blue-tint); }
@media (max-width: 600px) {
  .u-bars { grid-template-columns: 1fr; gap: 6px; }
  .u-bars__label { margin-top: 8px; }
}

/* Stat block — small KPI with mono label, used in proof grids */
.u-kpi {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.has-near-black-background-color .u-kpi { border-top-color: #fff; }
.u-kpi__num {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: 'tnum';
  display: block;
  margin: 0 0 12px;
}
.has-near-black-background-color .u-kpi__num { color: #fff; }
.u-kpi__num--blue { color: var(--brand-blue); }
.u-kpi__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.has-near-black-background-color .u-kpi__label { color: rgba(255,255,255,0.65); }

/* Soft blue glow wrapper — adds a halo around any hero element */
.u-glow {
  position: relative;
}
.u-glow::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at center, var(--brand-blue-glow) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

/* Display utilities — high-end restraint. .u-massive for the single
   headline number on a section. .u-narrow caps content width so type
   gets to breathe even on huge viewports. */
.u-massive {
  display: block;
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: clamp(80px, 13vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: var(--ink);
  font-feature-settings: 'tnum';
  margin: 0;
}
.u-massive--blue { color: var(--brand-blue); }
.has-near-black-background-color .u-massive { color: #fff; }

.u-narrow { max-width: 880px; margin-left: auto; margin-right: auto; }
.u-narrow--lede { max-width: 720px; }
.u-narrow--copy { max-width: 580px; }

.u-h-display {
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}

/* Gradient mesh accent — subtle decorative blob for hero corners */
.u-mesh {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(ellipse at center, var(--brand-blue-glow) 0%, transparent 50%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* ============================================================
   IMAGERY PRIMITIVES
   ============================================================ */

/* Sold-card — a property listing card with a "SOLD · saved $X" tag.
   Used on the "Recent campaigns" gallery. */
.u-sold {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
  color: inherit;
}
.u-sold:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(8,12,26,0.18);
  border-color: var(--brand-blue-mid);
  text-decoration: none;
}
.u-sold__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.u-sold__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.u-sold:hover .u-sold__media img { transform: scale(1.04); }
.u-sold__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-blue);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.u-sold__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
.u-sold__savings {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(8,12,26,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.u-sold__savings strong {
  display: block;
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  color: var(--brand-blue-tint);
  margin-top: 2px;
  text-transform: none;
}
.u-sold__body { padding: 18px 20px 20px; }
.u-sold__address {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.u-sold__suburb {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.u-sold__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.u-sold__price-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.u-sold__price-meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Keep card text crisp when .u-sold sits inside a dark section */
.has-near-black-background-color .u-sold .u-sold__address,
.has-near-black-background-color .u-sold .u-sold__price-amount { color: var(--ink); }
.has-near-black-background-color .u-sold .u-sold__suburb,
.has-near-black-background-color .u-sold .u-sold__price-meta { color: var(--muted); }

.u-sold-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .u-sold-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .u-sold-grid { grid-template-columns: 1fr; } }

/* Cinematic — full-bleed wide photograph with overlay typography
   and an editorial caption stamp at the bottom-left corner. */
.u-cinematic {
  position: relative;
  width: 100%;
  min-height: 480px;
  aspect-ratio: 16 / 7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

/* Closing CTA — coastal home at golden hour. WebP-first with JPEG fallback. */
.u-cinematic--coastal {
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    image-set(
      url('assets/property/cta-coastal-home.webp') type('image/webp'),
      url('assets/property/cta-coastal-home.jpg') type('image/jpeg')
    );
}
@supports not (background-image: image-set(url('x.webp') type('image/webp'))) {
  .u-cinematic--coastal {
    background-image:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
      url('assets/property/cta-coastal-home.jpg');
  }
}
@media (max-width: 768px) {
  .u-cinematic--coastal {
    background-image:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
      image-set(
        url('assets/property/cta-coastal-home-mobile.webp') type('image/webp'),
        url('assets/property/cta-coastal-home-mobile.jpg') type('image/jpeg')
      );
  }
  @supports not (background-image: image-set(url('x.webp') type('image/webp'))) {
    .u-cinematic--coastal {
      background-image:
        linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
        url('assets/property/cta-coastal-home-mobile.jpg');
    }
  }
}
.u-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,26,0.05) 0%, rgba(8,12,26,0.45) 60%, rgba(8,12,26,0.85) 100%);
  pointer-events: none;
}
.u-cinematic__inner {
  position: relative;
  z-index: 1;
  padding: 40px clamp(20px, 4vw, 56px);
  width: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.u-cinematic__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  max-width: 22ch;
  margin: 0;
}
.u-cinematic__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-align: right;
  line-height: 1.6;
  flex-shrink: 0;
}
.u-cinematic__caption strong { color: #fff; font-weight: 600; }
.u-cinematic__caption span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  margin: 0 8px;
  vertical-align: middle;
}
@media (max-width: 700px) {
  .u-cinematic { min-height: 360px; aspect-ratio: 4 / 5; }
  .u-cinematic__inner { flex-direction: column; align-items: flex-start; }
  .u-cinematic__caption { text-align: left; }
}

/* Avatar — circular portrait photo, used in testimonials + bylines */
.u-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.u-avatar--lg { width: 56px; height: 56px; }
.u-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.u-avatar-row__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.u-avatar-row__meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 0;
}

/* Hero photo card — small floating listing card layered into the hero
   composition for visual richness alongside the mock UI widget. */
.u-floatcard {
  position: absolute;
  width: 240px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.4);
  z-index: 2;
}
.u-floatcard__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.u-floatcard__media img { width: 100%; height: 100%; object-fit: cover; }
.u-floatcard__body { padding: 12px 14px 14px; }
.u-floatcard__address { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.01em; }
.u-floatcard__price {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 600;
}

/* Home hero — family photo, WebP-first with JPEG fallback. The dark scrim
   from .u-hero--bleed::before keeps white text legible. */
.u-hero--family {
  background-image:
    linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
    image-set(
      url('assets/property/hero-family.webp') type('image/webp'),
      url('assets/property/hero-family.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center 30%;
}
/* Family hero already applies its own 30% scrim — suppress the
   extra .u-hero--bleed::before so darkness stays at the target. */
.u-hero--family::before { display: none !important; }
/* Safari < 16 fallback */
@supports not (background-image: image-set(url('x.webp') type('image/webp'))) {
  .u-hero--family {
    background-image:
      linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
      url('assets/property/hero-family.jpg');
  }
}
@media (max-width: 768px) {
  .u-hero--family {
    background-image:
      linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
      image-set(
        url('assets/property/hero-family-mobile.webp') type('image/webp'),
        url('assets/property/hero-family-mobile.jpg') type('image/jpeg')
      );
  }
  @supports not (background-image: image-set(url('x.webp') type('image/webp'))) {
    .u-hero--family {
      background-image:
        linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
        url('assets/property/hero-family-mobile.jpg');
    }
  }
}

/* Full-bleed photographic hero. Background is a high-res aerial / coastal
   property photograph; a soft dark scrim makes the white type readable.
   Content (eyebrow, h1, sub, search bar) is centered. */
.u-hero--bleed {
  position: relative;
  min-height: 720px;
  padding: 120px 0 96px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.u-hero--bleed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,26,0.45) 0%, rgba(8,12,26,0.30) 40%, rgba(8,12,26,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.u-hero--bleed > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.u-hero--bleed h1 {
  font-size: clamp(56px, 8vw, 104px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  margin: 0 auto 24px;
  max-width: 16ch;
  text-shadow: 0 4px 30px rgba(0,0,0,0.18);
}
.u-hero--bleed p {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.92);
  max-width: 56ch;
  margin: 0 auto 36px;
  line-height: 1.5;
  text-shadow: 0 2px 20px rgba(0,0,0,0.18);
}
.u-hero--bleed::after { display: none; } /* suppress the grid overlay on bleed hero */

/* Address search bar — a big pill-shaped input with a circular brand-blue
   icon button positioned inside on the right (Opendoor-style). The button
   sits slightly inset so it reads as a "primary action" pill within the
   field. */
.u-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: 14px 14px 14px 28px;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,0.45),
    0 8px 24px -8px rgba(0,0,0,0.2);
  transition: box-shadow .18s ease, border-color .18s ease;
  gap: 12px;
}
.u-search-bar:focus-within {
  border-color: rgba(0,66,230,0.4);
  box-shadow:
    0 0 0 4px rgba(0,66,230,0.18),
    0 24px 60px -20px rgba(0,0,0,0.45);
}
.u-search-bar__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--ff-sans);
  font-size: 17px;
  color: var(--ink);
  outline: none;
  line-height: 1.4;
}
.u-search-bar__input::placeholder { color: #A0968C; }
.u-search-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue);
  color: #fff;
  border: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.u-search-bar__btn:hover {
  background: var(--brand-blue-hover);
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 8px 24px -4px var(--brand-blue-glow);
}
.u-search-bar__btn svg { flex-shrink: 0; }
.u-search-bar__disclaimer {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  text-align: center;
  margin: 20px auto 0;
  max-width: 50ch;
}
@media (max-width: 520px) {
  .u-search-bar { padding: 12px 12px 12px 22px; border-radius: 24px; }
  .u-search-bar__input { font-size: 16px; }
  .u-search-bar__btn { width: 48px; height: 48px; }
}

/* iPhone device frame — minimalist. Thin dark bezel, soft single
   drop-shadow, Dynamic Island as a clean horizontal pill. */
.u-iphone {
  width: 320px;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: 44px;
  padding: 10px;
  position: relative;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.35),
    0 10px 30px -10px rgba(0,0,0,0.18);
}
.u-iphone__screen {
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 9 / 19.5;
}
.u-iphone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
}
.u-iphone__statusbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px 0;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  z-index: 4;
}
.u-iphone__statusbar-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.u-iphone__content {
  padding: 32px 18px 18px;
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--ink);
}
.u-iphone__title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-align: center;
  position: relative;
}
.u-iphone__title::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(10,14,26,0.18);
  margin: 0 auto 12px;
}
.u-iphone__field-label {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  margin: 12px 0 6px;
  letter-spacing: -0.005em;
}
.u-iphone__field-label::after {
  content: ' *';
  color: #E11D48;
}
.u-iphone__field-label--optional::after { display: none; }
.u-iphone__field {
  background: #F5F7FA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.u-iphone__pillrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.u-iphone__pill {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 4px;
  border-radius: 8px;
  background: #F5F7FA;
  color: var(--ink);
  border: 1px solid #E5E7EB;
}
.u-iphone__pill--active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.u-iphone__addmore {
  font-size: 11px;
  color: var(--brand-blue);
  font-weight: 600;
  margin: 10px 0 4px;
}
.u-iphone__divider {
  border: 0;
  border-top: 1px solid #E5E7EB;
  margin: 14px 0 10px;
}
.u-iphone__collapsible {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin: 6px 0 10px;
}
.u-iphone__check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--soft);
  margin: 6px 0;
}
.u-iphone__check {
  width: 14px; height: 14px;
  border: 1px solid #D1D5DB;
  border-radius: 3px;
  flex-shrink: 0;
}
.u-iphone__actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid #E5E7EB;
  padding-top: 14px;
}
.u-iphone__btn {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.u-iphone__btn--cancel {
  background: transparent;
  color: var(--muted);
  border: 1px solid #E5E7EB;
}
.u-iphone__btn--submit {
  background: var(--brand-blue);
  color: #fff;
  border: 1px solid var(--brand-blue);
}

/* "Save $20K+" feature section — white surface with the U watermark from
   the brand mark anchoring the background. The mark sits absolutely so it
   bleeds out of the section to either side. */
.u-saveband {
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.u-saveband > .wp-block-group__inner-container { position: relative; z-index: 2; }


/* ============================================================
   FEATURE CARDS (Opendoor block pattern)
   Soft-gray rounded card. Kicker label top-left, big headline bottom-
   left, visual element on the right. Used as the homepage's primary
   storytelling rhythm. Stack 3–4 in a row.
   ============================================================ */
.u-feature-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 36px);
}
.u-feature-card {
  background: var(--paper);
  border-radius: clamp(20px, 2.4vw, 36px);
  padding: clamp(36px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  min-height: 540px;
  position: relative;
  overflow: hidden;
}
.u-feature-card--blue { background: var(--brand-blue); color: #fff; }
.u-feature-card--blue .u-feature-card__kicker,
.u-feature-card--blue .u-feature-card__headline,
.u-feature-card--blue .u-feature-card__body { color: #fff; }
.u-feature-card--ink { background: var(--ink); color: #fff; }
.u-feature-card--ink .u-feature-card__kicker,
.u-feature-card--ink .u-feature-card__headline,
.u-feature-card--ink .u-feature-card__body { color: #fff; }
.u-feature-card--reverse { grid-template-columns: 1fr 1fr; }
.u-feature-card--reverse .u-feature-card__visual { order: -1; }

.u-feature-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
  padding: clamp(8px, 1vw, 16px) 0;
}
.u-feature-card__kicker {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 18px);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.u-feature-card__headline {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 14ch;
  margin: 0;
}
.u-feature-card__body {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 36ch;
  line-height: 1.5;
  margin: 16px 0 0;
}
.u-feature-card__cta { margin-top: 32px; }

/* Tertiary text link — secondary CTA on feature cards & pricing tiers.
   Sits below primary buttons; never competes with hero or pricing buttons. */
.u-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.u-textlink:hover,
.u-textlink:focus-visible { border-bottom-color: var(--brand-blue); }
.u-textlink:hover .u-textlink__arrow { transform: translateX(2px); }
.u-textlink__arrow {
  display: inline-block;
  transition: transform 160ms ease;
}
.u-feature-card--blue .u-textlink,
.u-feature-card--ink .u-textlink { color: #fff; }
.u-feature-card--blue .u-textlink:hover,
.u-feature-card--blue .u-textlink:focus-visible,
.u-feature-card--ink .u-textlink:hover,
.u-feature-card--ink .u-textlink:focus-visible { border-bottom-color: #fff; }
.u-feature-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
@media (max-width: 900px) {
  .u-feature-card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: clamp(28px, 6vw, 48px);
  }
  .u-feature-card__content { gap: 28px; order: 0; }
  .u-feature-card__visual,
  .u-feature-card--reverse .u-feature-card__visual { min-height: 280px; order: 1; }
}

/* Arched / split-house image — Opendoor "Cash Now, More Later" pattern.
   Image bottom is rectangular, top arches to a soft semicircle. */
.u-arch {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  overflow: hidden;
  background: #87CEEB;
}
.u-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-arch__split {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.6);
}

/* Floating tag pills used over the arch */
.u-tag-pill {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.22);
  font-feature-settings: 'tnum';
  z-index: 2;
}
.u-tag-pill__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.u-tag-pill__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.u-tag-pill--blue {
  background: var(--brand-blue);
  color: #fff;
}
.u-tag-pill--blue .u-tag-pill__label { color: rgba(255,255,255,0.78); }
.u-tag-pill--blue .u-tag-pill__value { color: #fff; }


/* ============================================================
   STAT CALLOUT — full-bleed dark with a faint map / pattern
   background and an oversized "Over X / and counting" headline
   centred. Used for the platform-scale moment.
   ============================================================ */
.u-stat-callout {
  background: var(--ink);
  color: #fff;
  padding: clamp(120px, 16vw, 200px) 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.u-stat-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0,66,230,0.12) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04) 0%, transparent 40%);
  background-size: 100% 100%, 100% 100%;
  opacity: 1;
  pointer-events: none;
}
.u-stat-callout::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  opacity: 0.7;
}
.u-stat-callout__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.u-stat-callout__big {
  font-family: var(--ff-sans);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 0;
}
.u-stat-callout__big-soft { color: rgba(255,255,255,0.45); }
.u-stat-callout__sub {
  margin-top: 28px;
  font-size: var(--fs-lede);
  color: rgba(255,255,255,0.78);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.u-stat-callout__cta { margin-top: 48px; }

/* Floating sale-tag bubbles in the stat callout corners */
.u-stat-callout__tag {
  position: absolute;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.72);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.u-stat-callout__tag-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper-2);
  flex-shrink: 0;
}
.u-stat-callout__tag strong { color: #fff; font-weight: 600; }

@media (max-width: 700px) {
  .u-stat-callout {
    padding: clamp(72px, 14vw, 120px) 20px;
  }
  .u-stat-callout__big {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .u-stat-callout__sub {
    font-size: 16px;
    max-width: 32ch;
  }
  .u-stat-callout__tag { display: none; }
}


/* ============================================================
   HELP SECTION — "Questions? We have answers." with three blue CTAs.
   ============================================================ */
.u-help {
  text-align: center;
}
.u-help__h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 18px;
}
.u-help__sub {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 50ch;
  margin: 0 auto 40px;
  line-height: 1.5;
}
.u-help__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.u-help__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-blue);
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.u-help__btn:hover {
  background: var(--brand-blue-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px var(--brand-blue-glow);
}


/* ============================================================
   HERO — left-aligned variant. The default .u-hero--bleed centers
   content; .u-hero--left aligns content to the left half so a hero
   photo can fill the right.
   ============================================================ */
.u-hero--left { text-align: left; }
.u-hero--left > .wp-block-group__inner-container {
  max-width: var(--wide-width);
  text-align: left;
}
.u-hero--left h1 {
  margin-left: 0; margin-right: 0;
  text-align: left;
}
.u-hero--left p {
  margin-left: 0; margin-right: 0;
  text-align: left;
}
.u-hero--left .u-search-bar {
  margin-left: 0; margin-right: 0;
}
.u-hero--left .u-search-bar__disclaimer {
  text-align: left;
  margin-left: 0;
}
.u-hero__copy { max-width: 56%; }
@media (max-width: 900px) {
  .u-hero__copy { max-width: 100%; }
}

/* Watermark U — the emblem from the brand mark, used as a background
   atmospheric element. Brand blue, very low opacity. */
.u-watermark-u {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(700px, 110vw, 2000px);
  aspect-ratio: 226 / 258;
  background-image: url('assets/brand/u-mark.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.u-watermark-u--soft { opacity: 0.04; }
.u-watermark-u--strong { opacity: 0.08; }

/* iPhone — logo-only variant. Black screen, brand wordmark centered. */
.u-iphone--logo .u-iphone__screen {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-iphone--logo .u-iphone__screen::before {
  content: '';
  width: 60%;
  aspect-ratio: 1787 / 258;
  background-image: url('assets/brand/logo-white.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tab nav — pill-row of category buttons under a section heading.
   Active tab fills brand blue with a soft glow. */
.u-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 64px;
}
.u-tab {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.u-tab:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.u-tab--active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 0 0 0 var(--brand-blue-glow), 0 8px 24px -10px var(--brand-blue-glow);
}
.u-tab--active:hover { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); color: #fff; }

/* Feature list with leading icon — each row is a small icon (lightning,
   eye, etc.) + bold heading + body. Used in product-feature splits. */
.u-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.u-feat-list__row { display: grid; grid-template-columns: 32px 1fr; gap: 20px; align-items: start; }
.u-feat-list__icon {
  width: 24px; height: 24px;
  color: var(--brand-blue);
  flex-shrink: 0;
  margin-top: 4px;
}
.u-feat-list__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.u-feat-list__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}

/* iPhone — auction-listing screen content. Contained inside .u-iphone__content
   when the parent has .u-iphone--auction, this renders a compact mock of the
   live auction listing screen. */
.u-iphone--auction .u-iphone__screen { background: #F5F7FA; }
.u-iphone--auction .u-iphone__content { padding: 0; }
.u-mock-auction { font-family: var(--ff-sans); color: var(--ink); padding: 28px 16px 16px; background: #fff; }
.u-mock-auction__back { font-size: 13px; color: var(--ink); font-weight: 500; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.u-mock-auction__hero {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  background: #DDE3EC;
  margin-bottom: 8px;
}
.u-mock-auction__hero img { width: 100%; height: 100%; object-fit: cover; }
.u-mock-auction__tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.u-mock-auction__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
}
.u-mock-auction__tag--live { background: #fff; }
.u-mock-auction__tag--progress { background: #DEFCE6; color: #047857; }
.u-mock-auction__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.u-mock-auction__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #DDE3EC;
  position: relative;
}
.u-mock-auction__thumb img { width: 100%; height: 100%; object-fit: cover; }
.u-mock-auction__thumb--more { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.u-mock-auction__listed { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.u-mock-auction__listed::before { content: '•'; color: #22C55E; font-size: 14px; line-height: 0; }

/* Reserve Met green banner — pinned to the top of the bid info card */
.u-mock-auction__reserve {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #22C55E;
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px 10px 0 0;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.u-mock-auction__reserve::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: transparent;
  position: relative;
  flex-shrink: 0;
}

/* Bid info card wraps the Reserve Met banner + the stat row + timer + CTAs */
.u-mock-auction__bid-card {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.u-mock-auction__bid-body { padding: 12px; }

/* Vendor / Agent Profile row pinned below the bid card */
.u-mock-auction__vendor-card {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  background: #fff;
}
.u-mock-auction__vendor-card-head {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.u-mock-auction__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--ink); }
.u-mock-auction__address { font-size: 11px; color: var(--muted); margin: 0 0 14px; line-height: 1.4; }
.u-mock-auction__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.u-mock-auction__stat { border: 1px solid #E5E7EB; border-radius: 6px; padding: 8px 10px; text-align: left; }
.u-mock-auction__stat-num { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); display: block; line-height: 1; font-feature-settings: 'tnum'; }
.u-mock-auction__stat-label { font-size: 9px; color: var(--muted); margin-top: 4px; display: block; }
.u-mock-auction__timer { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.u-mock-auction__timer-fill { height: 4px; background: #E5E7EB; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.u-mock-auction__timer-fill::before { content: ''; display: block; width: 35%; height: 100%; background: var(--brand-blue); border-radius: inherit; }
.u-mock-auction__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.u-mock-auction__btn {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.u-mock-auction__btn--ghost { background: #fff; border: 1px solid #E5E7EB; color: var(--ink); }
.u-mock-auction__btn--bid { background: var(--brand-blue); color: #fff; border: 1px solid var(--brand-blue); }
.u-mock-auction__vendor { padding-top: 10px; border-top: 1px solid #E5E7EB; font-size: 10px; }
.u-mock-auction__vendor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.u-mock-auction__vendor-avatar { width: 28px; height: 28px; border-radius: 50%; background: #E5E7EB; flex-shrink: 0; }
.u-mock-auction__vendor-icons { display: inline-flex; gap: 4px; margin-left: auto; }
.u-mock-auction__vendor-icon { width: 24px; height: 24px; border: 1px solid #E5E7EB; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.u-mock-auction__chat { position: absolute; bottom: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-blue); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }

/* Brand-blue full-bleed feature panel — used for the Pre Sale Checklist
   Tool section. White type, photographic mockup right, floating
   accent cards layered around. */
.u-bluepanel {
  background: var(--brand-blue);
  color: #fff;
  border-radius: clamp(20px, 2.5vw, 36px);
  padding: clamp(48px, 6vw, 96px) clamp(36px, 5vw, 80px);
  position: relative;
  overflow: visible;
}
.u-bluepanel h2,
.u-bluepanel p { color: #fff; }
.u-bluepanel .u-eyebrow { color: rgba(255,255,255,0.8); }
.u-bluepanel .u-eyebrow::before { background: rgba(255,255,255,0.8); }
.u-bluepanel-wrap {
  padding: 24px 24px 80px;
  position: relative;
}
.u-bluepanel-wrap .u-bluepanel { max-width: var(--wide-width); margin: 0 auto; }

/* iPhone — landscape orientation, used in the Pre Sale Checklist Tool */
.u-iphone--landscape {
  width: clamp(360px, 50vw, 580px);
  margin: 0;
  padding: 12px;
  border-radius: 38px;
}
.u-iphone--landscape .u-iphone__screen {
  aspect-ratio: 19.5 / 9;
  border-radius: 28px;
}
.u-iphone--landscape .u-iphone__notch {
  width: 24px; height: 80px;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  border-radius: 999px;
}
.u-iphone__photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Floating accent card — used to sit over the brand-blue panel.
   White background with hairline border and a subtle shadow. */
.u-floatcard--lg { width: clamp(260px, 26vw, 340px); }
.u-floatcard__h {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.u-floatcard__h-tag {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.u-floatcard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.u-floatcard__item-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.01em; }
.u-floatcard__item-body { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.45; }
.u-floatcard__row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
}
.u-score-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 11px;
  color: var(--brand-blue);
  font-feature-settings: 'tnum';
  position: relative;
}
.u-score-ring__sub {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}
.u-floatcard__uplift {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.u-floatcard__uplift::before { content: '↗'; font-family: var(--ff-sans); }

/* Hero portrait — large editorial property photograph filling the right
   column of a hero split. Replaces the mock product UI widget. Caption
   stamp pinned to the bottom left of the image. */
.u-hero-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6);
}
.u-hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.u-hero-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8,12,26,0.55) 100%);
  pointer-events: none;
}
.u-hero-portrait__tag {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8,12,26,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.u-hero-portrait__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 0 var(--brand-blue-glow);
  animation: u-live-pulse 2s ease-out infinite;
}
.u-hero-portrait__caption {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  z-index: 2;
  color: #fff;
}
.u-hero-portrait__caption-h {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #fff;
}
.u-hero-portrait__caption-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.u-hero-portrait__caption-meta strong { color: #fff; font-weight: 600; }

/* Portal strip — wordmarks rendered in each portal's actual brand
   colour + type weight. Stacked label above ("Listed on every Australian
   portal") with the row of marks centred beneath. */
.u-portals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vw, 80px);
  padding: 24px 0;
  flex-wrap: wrap;
}
.u-portals--vertical {
  flex-direction: column;
  gap: 24px;
}
.u-portals__label {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  display: block;
}
.u-portals__label::after { display: none; }
.u-portal-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0.85;
}
.u-portal-logo:hover { opacity: 1; transform: translateY(-2px); text-decoration: none; }

/* Domain — green wordmark */
.u-portal-logo--domain { color: #00873E; }

/* realestate.com.au — red house mark + ink wordmark + small grey domain */
.u-portal-logo--rea { color: var(--ink); }
.u-portal-logo--rea .u-portal-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  background: #E4002B;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border-radius: 4px;
  position: relative;
}
.u-portal-logo--rea .u-portal-logo__mark::before {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 4px solid #fff;
}

/* Homely — coral pink wordmark with home dot */
.u-portal-logo--homely { color: #E91E63; }
.u-portal-logo--homely .u-portal-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #E91E63;
  border-radius: 50%;
  margin-right: 4px;
  position: relative;
}
.u-portal-logo--homely .u-portal-logo__mark::before {
  content: '';
  width: 8px; height: 8px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);
}

/* View.com.au — teal Q mark + wordmark stacked with ".com.au" as small
   superscript */
.u-portal-logo--view { color: #1F8FA8; }
.u-portal-logo--view .u-portal-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2.5px solid #1F8FA8;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  margin-right: 4px;
  position: relative;
}
.u-portal-logo--view .u-portal-logo__mark::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -1px;
  width: 6px; height: 6px;
  background: #1F8FA8;
  transform: rotate(45deg);
}

.u-portal-logo__sub {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 600;
  align-self: flex-end;
  padding-bottom: 4px;
  margin-left: 1px;
}

.has-near-black-background-color .u-portal-logo--rea { color: #fff; }
.has-near-black-background-color .u-portals__label { color: rgba(255,255,255,0.7); }
.has-near-black-background-color .u-portal-logo__sub { color: rgba(255,255,255,0.5); }

/* Photo essay — 2x2 (or 3x2) editorial photograph grid with captions
   beneath each cell. Used in place of mock dashboards. */
.u-photo-essay {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 48px);
}
.u-photo-essay--3 { grid-template-columns: repeat(3, 1fr); }
.u-photo-essay--asym {
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
}
.u-photo-essay--asym .u-photo-essay__cell:nth-child(1) { grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .u-photo-essay,
  .u-photo-essay--3,
  .u-photo-essay--asym { grid-template-columns: 1fr; }
  .u-photo-essay--asym .u-photo-essay__cell:nth-child(1) { grid-row: auto; }
}
.u-photo-essay__cell { display: flex; flex-direction: column; gap: 14px; }
.u-photo-essay__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.u-photo-essay__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.u-photo-essay__cell:hover .u-photo-essay__media img { transform: scale(1.03); }
.u-photo-essay__kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.u-photo-essay__kicker::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}
.u-photo-essay__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.u-photo-essay__body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.has-near-black-background-color .u-photo-essay__title { color: #fff; }
.has-near-black-background-color .u-photo-essay__body { color: rgba(255,255,255,0.72); }
.has-near-black-background-color .u-photo-essay__kicker { color: var(--brand-blue-tint); }
.has-near-black-background-color .u-photo-essay__kicker::before { background: var(--brand-blue-tint); }

/* For-sale tag — variant of u-sold__tag for active listings */
.u-sold__tag--live {
  background: var(--ink);
  color: #fff;
}
.u-sold__tag--live::before { background: var(--brand-blue); animation: u-live-pulse 2s ease-out infinite; }
.u-sold__tag--auction {
  background: var(--brand-blue);
  color: #fff;
}

/* Photo strip — horizontal scrolling row of property photographs.
   Used as a "press / portfolio" strip with subtle motion. */
.u-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .u-photo-strip { grid-template-columns: repeat(2, 1fr); } }
.u-photo-strip__cell {
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.u-photo-strip__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.u-photo-strip__cell:hover img { transform: scale(1.04); }
.u-photo-strip__cell::after {
  content: attr(data-suburb);
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8,12,26,0.7);
  padding: 4px 8px;
  border-radius: 4px;
}

/* ============================================================
   Site header — matches the Unreserved Lovable original
   ============================================================ */

/* Buttons (still used by content blocks) */
.u-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease;
}
.u-btn--primary { background: var(--brand-blue); color: var(--white); }
.u-btn--primary:hover { background: var(--brand-blue-hover); color: var(--white); }
.u-btn--ghost { color: var(--ink); border-color: var(--border); }
.u-btn--ghost:hover { background: var(--off-white); }

/* Wrapper around the entire site header (template part target).
   Frosted-white sticky bar with a hairline beneath. */
.u-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: 100vw;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0 !important;
  border-bottom: 1px solid var(--rule);
  box-sizing: border-box;
}
.u-site-header *, .u-site-header *::before, .u-site-header *::after { box-sizing: border-box; }

/* Top utility bar */
.u-utility-bar {
  display: flex;
  justify-content: flex-end;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 16px !important;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px 24px;
  border-bottom: 1px solid var(--rule);
}
.u-utility-bar__link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.u-utility-bar__link:hover { color: var(--brand-blue); }
.u-utility-bar__sep {
  color: var(--border);
  user-select: none;
}
.u-utility-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  width: 22px;
  height: 22px;
  transition: color .15s ease;
}
.u-utility-bar__icon:hover { color: var(--brand-blue); }

/* Main header row */
.u-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: 32px !important;
  padding: 18px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

/* Brand logo */
.u-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.u-brand__logo {
  height: 28px;
  width: auto;
  display: block;
}

/* Main nav */
.u-mainnav {
  display: flex;
  gap: 28px;
  margin: 0 auto;
  align-items: center;
}
.u-mainnav__group { position: relative; }
.u-mainnav__item {
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  padding: 22px 0;
  transition: color .15s ease;
}
.u-mainnav__item:hover { color: var(--brand-blue); text-decoration: none; }
.u-mainnav__chev {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  transition: transform .18s ease;
}
.u-mainnav__group:hover .u-mainnav__chev,
.u-mainnav__group:focus-within .u-mainnav__chev { transform: rotate(180deg); color: var(--brand-blue); }

/* Mega panel */
.u-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 720px;
  max-width: 90vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.18), 0 8px 22px -8px rgba(15, 23, 42, 0.12);
  border: 1px solid #EEF1F8;
  padding: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.u-mega--narrow { min-width: 520px; }
.u-mainnav__group:hover > .u-mega,
.u-mainnav__group:focus-within > .u-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.u-mega::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0; right: 0;
  height: 12px;
}
.u-mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  gap: 24px;
  padding: 28px;
}
.u-mega--narrow .u-mega__inner { grid-template-columns: 1fr 1fr; }
.u-mega__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.u-mega__heading {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.u-mega__link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .14s ease, color .14s ease;
}
.u-mega__link:hover { background: #F4F6FA; color: var(--ink); text-decoration: none; }
.u-mega__link-title { font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
.u-mega__link-sub { font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.4; }
.u-mega__link:hover .u-mega__link-title { color: var(--brand-blue); }

.u-mega__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u-mega__chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.u-mega__chip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: rgba(0, 66, 230, 0.04);
  text-decoration: none;
}

.u-mega__col--card {
  background: linear-gradient(160deg, rgba(0, 66, 230, 0.06) 0%, rgba(0, 66, 230, 0.02) 50%, transparent 100%);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(0, 66, 230, 0.12);
}
.u-mega__card-headline {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
}
.u-mega__card-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}
.u-mega__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-blue);
  text-decoration: none;
}
.u-mega__card-cta svg { transition: transform .15s ease; }
.u-mega__card-cta:hover svg { transform: translateX(3px); }

/* Mobile drawer */
.u-mobile-toggle { position: absolute; left: -9999px; opacity: 0; }
.u-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.u-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Right cluster: phone + Get Started */
.u-header__cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.u-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--brand-blue);
  background: transparent;
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-decoration: none;
  font-feature-settings: 'tnum';
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.u-phone-pill:hover {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 0 0 4px var(--brand-blue-soft);
}

.u-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  border: 1px solid var(--brand-blue);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 0 var(--brand-blue-glow), 0 6px 18px -8px var(--brand-blue-glow);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.u-cta-primary:hover {
  background: var(--brand-blue-hover);
  border-color: var(--brand-blue-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--brand-blue-soft), 0 10px 22px -6px var(--brand-blue-glow);
}
.u-cta-primary svg { transition: transform .15s ease; }
.u-cta-primary:hover svg { transform: translateX(2px); }

@media (max-width: 1024px) {
  .u-utility-bar__link, .u-utility-bar__sep { display: none; }
  .u-burger {
    display: inline-flex;
    /* Burger must stay ABOVE the drawer so it remains tappable as the close affordance */
    position: relative;
    z-index: 310;
  }
  /* Keep the main header itself on top of the drawer so the burger and brand
     are visible and the user always has a way to close the menu. */
  .u-main-header { position: relative; z-index: 305; background: #fff; }

  /* Mobile drawer: full-bleed below the header strip; clearable via the same burger */
  .u-mainnav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-header-h, 72px);
    bottom: 0;
    background: #fff;
    z-index: 300;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .u-mobile-toggle:checked ~ .u-main-header .u-mainnav {
    display: flex;
  }
  /* Lock the page from scrolling under the drawer so taps don't dismiss-by-scroll */
  .u-mobile-toggle:checked ~ .u-main-header { box-shadow: 0 1px 0 rgba(10,14,26,0.08); }
  .u-mobile-toggle:checked ~ .u-main-header .u-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .u-mobile-toggle:checked ~ .u-main-header .u-burger span:nth-child(2) { opacity: 0; }
  .u-mobile-toggle:checked ~ .u-main-header .u-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .u-mainnav__group { border-bottom: 1px solid #EEF1F8; }
  .u-mainnav__item { padding: 18px 0; font-size: 16px; font-weight: 600; }

  /* Mobile: mega panels become inline accordions, always open in drawer */
  .u-mega {
    position: static;
    transform: none;
    min-width: 0; width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0 0 16px;
    background: transparent;
  }
  .u-mega::before { display: none; }
  .u-mega__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }
  .u-mega--narrow .u-mega__inner { grid-template-columns: 1fr; }
  .u-mega__col--card { display: none; }
}
@media (max-width: 540px) {
  .u-phone-pill span { display: none; }
  .u-phone-pill { padding: 9px 12px; }
  .u-cta-primary { display: none; }
  .u-main-header { padding: 14px 16px; gap: 12px !important; }
  .u-brand__logo { width: 140px; height: auto; }
  /* Tighten drawer top offset on small phones so it sits flush under the header */
  .u-mainnav { top: 64px; padding-top: 12px; }
}

/* ============================================================
   Site footer — 3-column, matches the Unreserved Lovable original
   ============================================================ */

.u-site-footer {
  color: rgba(248,249,252,0.7);
}
.u-site-footer .u-brand--dark .u-brand__logo {
  height: 28px;
}
.u-footer-meta {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.u-footer-meta li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: rgba(248,249,252,0.7);
  font-size: 15px;
}
.u-footer-meta a {
  color: rgba(248,249,252,0.7);
  text-decoration: none;
}
.u-footer-meta a:hover { color: var(--white); }
.u-footer-meta svg {
  flex-shrink: 0;
  color: rgba(248,249,252,0.5);
}
.u-footer__heading {
  color: var(--white) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0;
  text-transform: none;
}
.u-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.u-footer__list li { margin-bottom: 10px; }
.u-footer__list a {
  color: rgba(248,249,252,0.65);
  text-decoration: none;
  font-size: 15px;
  transition: color .15s ease;
}
.u-footer__list a:hover { color: var(--white); }
.u-footer__sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 56px 0 24px;
}
.u-footer__copy {
  color: rgba(248,249,252,0.5);
  margin: 0;
}

/* Breadcrumbs */
.u-breadcrumbs {
  font-size: 14px;
  color: var(--muted);
  padding: 16px 24px;
  max-width: var(--wide-width);
  margin: 0 auto;
}
.u-breadcrumbs a { color: var(--muted); }
.u-breadcrumbs a:hover { color: var(--ink); }

/* FAQ accordion — editorial. Each row uses a hairline rule, the marker
   is a typographic + that rotates open. Question is set in Manrope
   semibold, answer in serif italic. */
.u-faq {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.u-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
}
.u-faq summary {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after {
  content: '+';
  font-family: var(--ff-mono);
  font-size: 22px;
  color: var(--brand-blue);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.u-faq details[open] summary::after { transform: rotate(45deg); }
.u-faq p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 60ch;
}

/* Pricing — editorial price. Small "From" kicker, oversized number with
   tabular figures, mono qualifier ("FLAT FEE / NO COMMISSION"). */
.u-price {
  font-family: var(--ff-sans);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-feature-settings: 'tnum';
  display: block;
  margin: 0 0 12px;
}
.u-price small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  margin-top: 12px;
}

/* Feature list — checkmark in a soft brand-blue circle, gentle row rules */
.u-feature-list { list-style: none; padding: 0; margin: 24px 0; }
.u-feature-list li {
  padding: 12px 0 12px 32px;
  position: relative;
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
.u-feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 12px;
  width: 20px;
  height: 20px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.u-feature-list--inverted li { color: rgba(255,255,255,0.85); }
.u-feature-list--inverted li::before { background: var(--brand-blue); color: #fff; }
.has-near-black-background-color .u-feature-list li,
.u-card--dark .u-feature-list li,
.u-card--feature .u-feature-list li { color: rgba(255,255,255,0.85); }
.has-near-black-background-color .u-feature-list li::before,
.u-card--dark .u-feature-list li::before,
.u-card--feature .u-feature-list li::before { background: var(--brand-blue); color: #fff; }

/* Responsive (the type scale uses clamp() so we mostly only adjust paddings) */
@media (max-width: 781px) {
  .u-main .entry-content > section.wp-block-group:not(.u-hero),
  .u-main > .wp-block-post-content > section.wp-block-group:not(.u-hero),
  .u-main > section.wp-block-group:not(.u-hero),
  main > section.wp-block-group:not(.u-hero),
  main > article.wp-block-group { padding: 64px 20px; }
  .u-hero { padding: 96px 0 64px; }
  .u-header__nav { display: none; }
}

/* ===========================================================
   21st.dev-style animations — vanilla CSS port
   - .u-fade-up         : fade + slide-up on scroll (driven by JS)
   - .u-stagger > *     : staggers child fade-ups by 80ms each
   - .u-grid-bg         : animated dot/grid background pattern (hero)
   - .u-shimmer-text    : moving gradient highlight over text
   - .u-shiny-button    : button with shine sweep on hover
   - .u-border-beam     : rotating gradient border (featured cards)
   - .u-spotlight       : cursor-tracked radial spotlight on cards
   - .u-pulse-dot       : pulsing brand-blue ring (status indicator)
   - .u-marquee         : infinite horizontal scroll
   - .u-typing          : caret-only typewriter for inline emphasis
   Respects prefers-reduced-motion.
   =========================================================== */

@keyframes u-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes u-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes u-border-beam {
  to { transform: rotate(360deg); }
}
@keyframes u-grid-drift {
  0%   { background-position:   0px   0px,   0px   0px; }
  100% { background-position:  60px  60px, -60px -60px; }
}
@keyframes u-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0;   }
}
@keyframes u-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes u-shine {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(220%)  skewX(-15deg); }
}

/* Fade-up on scroll. Element starts hidden; .u-in-view added by animations.js */
.u-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.u-fade-up.u-in-view { opacity: 1; transform: translateY(0); }

/* Stagger children: works with .u-fade-up children via inline transition-delay set in JS,
   but also as a pure-CSS fallback using nth-child timing. */
.u-stagger > .u-fade-up:nth-child(1) { transition-delay: 0ms; }
.u-stagger > .u-fade-up:nth-child(2) { transition-delay: 80ms; }
.u-stagger > .u-fade-up:nth-child(3) { transition-delay: 160ms; }
.u-stagger > .u-fade-up:nth-child(4) { transition-delay: 240ms; }
.u-stagger > .u-fade-up:nth-child(5) { transition-delay: 320ms; }
.u-stagger > .u-fade-up:nth-child(6) { transition-delay: 400ms; }

/* Animated grid background — applied to every dark hero by default and any
   section with .u-grid-bg. Skipped on .u-hero--light. */
.u-hero, .u-grid-bg {
  position: relative;
  overflow: hidden;
}
.u-hero::before, .u-grid-bg::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(0,66,230,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,66,230,0.10) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 80%);
  animation: u-grid-drift 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.u-hero--light::before { display: none; }
.u-hero > * { position: relative; z-index: 1; }

/* Shimmer text — subtle highlight sweep on H1s */
.u-shimmer-text {
  background: linear-gradient(
    110deg,
    currentColor 30%,
    rgba(255,255,255,0.95) 45%,
    rgba(255,255,255,0.95) 55%,
    currentColor 70%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: u-shimmer 6s linear infinite;
}

/* Shiny button — light sweep across primary CTA */
.u-shiny-button,
.u-btn--primary,
.wp-block-button .wp-block-button__link {
  position: relative;
  overflow: hidden;
}
.u-shiny-button::after,
.u-btn--primary::after,
.wp-block-button .wp-block-button__link::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: translateX(-120%) skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.u-shiny-button:hover::after,
.u-btn--primary:hover::after,
.wp-block-button .wp-block-button__link:hover::after {
  animation: u-shine 0.9s ease forwards;
}

/* Border-beam — rotating gradient frame for the featured card */
.u-border-beam {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}
.u-border-beam::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0%,
    var(--brand-blue) 8%,
    transparent 18%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: u-border-beam 6s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Spotlight — cursor-tracked radial highlight on cards */
.u-spotlight {
  position: relative;
  overflow: hidden;
}
.u-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,66,230,0.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.u-spotlight:hover::before { opacity: 1; }

/* Pulse dot — for "live" status moments (e.g. live valuation, live auction) */
.u-pulse-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--brand-blue);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.u-pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-blue);
  opacity: 0.6;
  animation: u-pulse 1.8s ease-out infinite;
}

/* Marquee — infinite horizontal scroll for partner / portal logos */
.u-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.u-marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: u-marquee 28s linear infinite;
}
.u-marquee:hover .u-marquee__track { animation-play-state: paused; }

/* Number ticker — element starts at 0, animations.js eases up to data-target */
.u-ticker { font-variant-numeric: tabular-nums; }

/* ============================================================
   ANIMATED VALUATION DEMO — orchestrated CSS-only reveal that
   plays inside the AI Valuation iPhone in Card 1. Total cycle 10s,
   infinite loop. Phases (% of cycle):
     0 – 12   ·  empty address field + blinking cursor
     12 – 22  ·  address fades in
     22 – 32  ·  loading shimmer on the valuation row
     32 – 44  ·  valuation band reveals + confidence bar fills
     44 – 64  ·  four data rows stagger in
     64 – 90  ·  hold (everything visible)
     90 – 100 ·  fade back to start
   ============================================================ */

/* Address typing — content starts hidden, fades + slides up between
   12% and 22% of the cycle, holds, fades back near the end. */
@keyframes u-demo-address {
  0%, 12%   { opacity: 0; transform: translateY(4px); }
  22%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(4px); }
}

/* Blinking cursor on the empty address — visible for the first 22%
   while the user is "typing", then collapses out of the layout. */
@keyframes u-demo-cursor {
  0%, 22%   { opacity: 1; }
  23%, 100% { opacity: 0; }
}
@keyframes u-demo-cursor-blink {
  0%, 50%   { background-color: var(--ink); }
  51%, 100% { background-color: transparent; }
}

/* Loading shimmer on the valuation row before the value reveals.
   Visible only between 22% and 32%. */
@keyframes u-demo-shimmer {
  0%, 22%   { opacity: 0; }
  24%, 30%  { opacity: 1; }
  32%, 100% { opacity: 0; }
}
@keyframes u-demo-shimmer-sweep {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}

/* Valuation band reveals — scale + fade between 32% and 44%, holds,
   fades at the very end of the cycle. */
@keyframes u-demo-band {
  0%, 32%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  44%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* Confidence bar fills from 0 to 92% between 32% and 50% of the cycle */
@keyframes u-demo-confidence {
  0%, 32%   { width: 0%; }
  50%, 92%  { width: 92%; }
  100%      { width: 0%; }
}
@keyframes u-demo-confidence-label {
  0%, 32%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* Data rows stagger in between 44% and 64%. Each row uses a slightly
   later "appears" point. */
@keyframes u-demo-row-1 {
  0%, 44%   { opacity: 0; transform: translateY(6px); }
  50%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}
@keyframes u-demo-row-2 {
  0%, 50%   { opacity: 0; transform: translateY(6px); }
  56%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}
@keyframes u-demo-row-3 {
  0%, 56%   { opacity: 0; transform: translateY(6px); }
  62%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}
@keyframes u-demo-row-4 {
  0%, 62%   { opacity: 0; transform: translateY(6px); }
  68%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}

/* CTA button "ready" pulse appears after all rows (~70%) */
@keyframes u-demo-cta {
  0%, 68%   { opacity: 0; transform: translateY(6px); }
  74%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; }
}

/* Wrapper class — apply to the iPhone screen content to opt-in. */
.u-demo {
  --u-demo-cycle: 10s;
}
.u-demo__cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 2px;
  background: var(--ink);
  animation:
    u-demo-cursor var(--u-demo-cycle) ease-in-out infinite,
    u-demo-cursor-blink 0.9s step-end infinite;
}
.u-demo__address {
  opacity: 0;
  animation: u-demo-address var(--u-demo-cycle) ease-in-out infinite;
}
.u-demo__shimmer {
  opacity: 0;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF1F8 25%, #DDE3EC 50%, #EEF1F8 75%);
  background-size: 200% 100%;
  animation:
    u-demo-shimmer var(--u-demo-cycle) ease-in-out infinite,
    u-demo-shimmer-sweep 1.4s linear infinite;
}
.u-demo__band {
  opacity: 0;
  animation: u-demo-band var(--u-demo-cycle) cubic-bezier(.16,1,.3,1) infinite;
}
.u-demo__confidence-fill {
  width: 0%;
  animation: u-demo-confidence var(--u-demo-cycle) cubic-bezier(.16,1,.3,1) infinite;
}
.u-demo__confidence-label {
  opacity: 0;
  animation: u-demo-confidence-label var(--u-demo-cycle) ease-in-out infinite;
}
.u-demo__row { opacity: 0; }
.u-demo__row--1 { animation: u-demo-row-1 var(--u-demo-cycle) ease-in-out infinite; }
.u-demo__row--2 { animation: u-demo-row-2 var(--u-demo-cycle) ease-in-out infinite; }
.u-demo__row--3 { animation: u-demo-row-3 var(--u-demo-cycle) ease-in-out infinite; }
.u-demo__row--4 { animation: u-demo-row-4 var(--u-demo-cycle) ease-in-out infinite; }
.u-demo__cta { opacity: 0; animation: u-demo-cta var(--u-demo-cycle) cubic-bezier(.16,1,.3,1) infinite; }

/* Reduced motion: snap to final state, no looping motion */
@media (prefers-reduced-motion: reduce) {
  .u-demo__cursor { animation: none; opacity: 0; }
  .u-demo__address,
  .u-demo__band,
  .u-demo__confidence-label,
  .u-demo__row,
  .u-demo__cta { animation: none; opacity: 1; transform: none; }
  .u-demo__confidence-fill { animation: none; width: 92%; }
  .u-demo__shimmer { display: none; }
}


/* ============================================================
   BIDSMART AUCTION DEMO — orchestrated CSS-only reveal that plays
   inside the auction iPhone in Card 3. Total cycle 10s, infinite.
   Three new bids land at ~20%, 48%, 76% of the cycle. Each new bid:
   - Swaps the visible bid amount + bidder/active-bids counts
   - Flashes the current-bid stat card brand-blue
   - Resets the interval timer fill bar
   ============================================================ */

.u-bidsmart { --u-bidsmart-cycle: 10s; }

/* Step containers — relative wrappers that hold 4 stacked spans.
   The container needs a fixed line-height so the absolute spans align. */
.u-bidsmart-step-wrap { position: relative; display: inline-block; min-width: 60px; }

/* Each step span occupies the same place; only one is visible at a time */
.u-bidsmart-step {
  display: inline-block;
  opacity: 0;
}
.u-bidsmart-step--1,
.u-bidsmart-step--2,
.u-bidsmart-step--3,
.u-bidsmart-step--4 {
  position: relative;
}
.u-bidsmart-step + .u-bidsmart-step {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

/* Visibility windows — each step holds for ~28% of the cycle */
@keyframes u-bidsmart-step-1 {
  0%, 18%   { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes u-bidsmart-step-2 {
  0%, 18%   { opacity: 0; }
  20%, 46%  { opacity: 1; }
  48%, 100% { opacity: 0; }
}
@keyframes u-bidsmart-step-3 {
  0%, 46%   { opacity: 0; }
  48%, 74%  { opacity: 1; }
  76%, 100% { opacity: 0; }
}
@keyframes u-bidsmart-step-4 {
  0%, 74%   { opacity: 0; }
  76%, 100% { opacity: 1; }
}
.u-bidsmart-step--1 { animation: u-bidsmart-step-1 var(--u-bidsmart-cycle) steps(1) infinite; }
.u-bidsmart-step--2 { animation: u-bidsmart-step-2 var(--u-bidsmart-cycle) steps(1) infinite; }
.u-bidsmart-step--3 { animation: u-bidsmart-step-3 var(--u-bidsmart-cycle) steps(1) infinite; }
.u-bidsmart-step--4 { animation: u-bidsmart-step-4 var(--u-bidsmart-cycle) steps(1) infinite; }

/* Bid stat cell flash — quick brand-blue pulse at each new-bid moment */
@keyframes u-bidsmart-flash {
  0%, 18%   { background: #fff; box-shadow: 0 0 0 0 transparent; }
  20%       { background: rgba(0,66,230,0.10); box-shadow: 0 0 0 0 var(--brand-blue-glow); border-color: var(--brand-blue); }
  26%, 46%  { background: #fff; box-shadow: 0 0 0 0 transparent; border-color: #E5E7EB; }
  48%       { background: rgba(0,66,230,0.10); box-shadow: 0 0 0 0 var(--brand-blue-glow); border-color: var(--brand-blue); }
  54%, 74%  { background: #fff; box-shadow: 0 0 0 0 transparent; border-color: #E5E7EB; }
  76%       { background: rgba(0,66,230,0.10); box-shadow: 0 0 0 0 var(--brand-blue-glow); border-color: var(--brand-blue); }
  82%, 100% { background: #fff; box-shadow: 0 0 0 0 transparent; border-color: #E5E7EB; }
}
.u-bidsmart-flash {
  animation: u-bidsmart-flash var(--u-bidsmart-cycle) ease-out infinite;
}

/* Floating "+$X" badge that appears at each bid moment, near the bid stat.
   Visible for ~6% of the cycle (~0.6s) and fades out. */
@keyframes u-bidsmart-bump {
  0%, 18%, 26%, 46%, 54%, 74%, 82%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  20%, 48%, 76% {
    opacity: 1;
    transform: translateY(-6px);
  }
  24%, 52%, 80% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
.u-bidsmart-bump {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  pointer-events: none;
  opacity: 0;
  animation: u-bidsmart-bump var(--u-bidsmart-cycle) ease-out infinite;
  z-index: 3;
}

/* Interval timer bar — width animates from 100% down to ~12% over each
   ~2.4s segment, snapping back to 100% at each new bid moment. */
@keyframes u-bidsmart-timer {
  0%      { width: 100%; }
  18%     { width: 12%; }
  20%     { width: 100%; }
  46%     { width: 12%; }
  48%     { width: 100%; }
  74%     { width: 12%; }
  76%     { width: 100%; }
  100%    { width: 24%; }
}
.u-bidsmart-timer {
  width: 100%;
  height: 100%;
  background: var(--brand-blue);
  border-radius: inherit;
  animation: u-bidsmart-timer var(--u-bidsmart-cycle) linear infinite;
}

/* "Place a Bid" button subtle pulse on each new bid */
@keyframes u-bidsmart-cta {
  0%, 16%, 26%, 44%, 54%, 72%, 82%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--brand-blue-glow);
  }
  20%, 48%, 76% {
    transform: scale(1.03);
    box-shadow: 0 0 0 6px var(--brand-blue-soft);
  }
}
.u-bidsmart-cta {
  animation: u-bidsmart-cta var(--u-bidsmart-cycle) ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .u-bidsmart-step,
  .u-bidsmart-flash,
  .u-bidsmart-bump,
  .u-bidsmart-timer,
  .u-bidsmart-cta { animation: none; }
  .u-bidsmart-step--1 { opacity: 0; }
  .u-bidsmart-step--4 { opacity: 1; }
  .u-bidsmart-bump { display: none; }
  .u-bidsmart-timer { width: 100%; }
}

/* Reduced motion — respect users who opted out */
@media (prefers-reduced-motion: reduce) {
  .u-fade-up { opacity: 1; transform: none; transition: none; }
  .u-shimmer-text { animation: none; }
  .u-hero::before, .u-grid-bg::before { animation: none; }
  .u-border-beam::before { animation: none; }
  .u-pulse-dot::after { animation: none; }
  .u-marquee__track { animation: none; }
  .u-shiny-button::after,
  .u-btn--primary::after,
  .wp-block-button .wp-block-button__link::after { display: none; }
}


/* ============================================================
   Path A — visual-richness patterns
   ============================================================ */

/* Hero-with-photo — pair this with .u-hero--dark on the section.
   The image is laid behind a duotone-leaning ink+blue overlay so the
   editorial type stays the focal point. */
.u-hero--photo {
  background-image:
    linear-gradient(180deg, rgba(10,14,26,0.88) 0%, rgba(10,14,26,0.72) 60%, rgba(0,66,230,0.42) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.u-hero--photo.u-hero--dark::before { opacity: 0.25; }

/* Listing-grid — 3-up grid of property cards used on home + FSBO state pages */
.u-listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .u-listings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .u-listings { grid-template-columns: 1fr; } }

.u-listing {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
}
.u-listing:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(8,12,26,0.18);
  border-color: var(--rule-strong);
}
.u-listing__media {
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.u-listing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-listing__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--brand-blue);
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.u-listing__body { padding: 20px 22px 22px; }
.u-listing__address {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.u-listing__suburb {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.u-listing__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  margin: 0 0 12px;
}
.u-listing__specs {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}
.u-listing__specs span { display: inline-flex; align-items: center; gap: 4px; }

/* Testimonials — pill row of avatar + quote cards */
.u-tlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .u-tlist { grid-template-columns: 1fr; } }
/* Testimonial card — Opendoor-style. Rounded 36px, soft tertiary bg,
   centered content. Circular portrait sits at the top, quote below,
   name + location at the bottom. */
.u-testimonial {
  background: var(--paper);
  border: 0;
  border-radius: 36px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.u-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -20px rgba(8,12,26,0.12);
}
.u-testimonial__portrait {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  flex-shrink: 0;
}
.u-testimonial__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-testimonial__stars {
  font-family: var(--ff-mono);
  color: var(--brand-blue);
  font-size: 13px;
  letter-spacing: 4px;
  margin-bottom: 0;
}
.u-testimonial__quote {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0;
  flex: 1;
  max-width: 36ch;
}
.u-testimonial__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.u-testimonial__name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.u-testimonial__role {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .u-testimonial { padding: 28px; border-radius: 28px; }
  .u-testimonial__portrait { width: 80px; height: 80px; }
}
.u-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.u-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.u-testimonial__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.u-testimonial__role {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Explore-more — cross-sell card row at the foot of pages */
.u-explore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .u-explore { grid-template-columns: 1fr; } }
.u-explore__card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.u-explore__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(8,12,26,0.18);
  border-color: var(--brand-blue-mid);
  text-decoration: none;
}
.u-explore__media {
  aspect-ratio: 5 / 4;
  background: var(--paper-2);
  overflow: hidden;
}
.u-explore__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-explore__body { padding: 22px 24px 26px; }
.u-explore__kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.u-explore__kicker::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}
.u-explore__title {
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.u-explore__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 14px;
}
.u-explore__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u-explore__more::after { content: '→'; transition: transform .15s ease; }
.u-explore__card:hover .u-explore__more::after { transform: translateX(3px); }

/* Photo-step — alternating image+copy editorial spreads (How It Works).
   The image is portrait-cropped with a hairline rule beneath; the copy
   side has a numeral, kicker, manifesto title, and body. */
.u-step {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--rule);
}
.u-step:last-child { border-bottom: 1px solid var(--rule); }
.u-step--reverse { grid-template-columns: 7fr 5fr; }
.u-step--reverse .u-step__media { order: 2; }
@media (max-width: 1024px) {
  .u-step,
  .u-step--reverse { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .u-step--reverse .u-step__media { order: 0; }
}
.u-step__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.u-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-step__numeral {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.86;
  color: var(--brand-blue);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum';
  display: block;
  margin: 0 0 16px;
}
.u-step__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.u-step__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}
.u-step__title {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 22ch;
}
.u-step__body {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}
.has-near-black-background-color .u-step__title { color: #fff; }
.has-near-black-background-color .u-step__body { color: rgba(255,255,255,0.72); }

/* Vertical numbered step cards — for "From listing to under contract — in five steps." */
.u-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: 32px;
}
.u-steps-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .u-steps-grid,
  .u-steps-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .u-steps-grid,
  .u-steps-grid--four { grid-template-columns: 1fr; }
}
.u-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 22px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  min-height: 100%;
}
.u-step-card .u-step__num {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  font-feature-settings: 'tnum';
  max-width: none;
}
.u-step-card .u-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: none;
}
.u-step-card .u-step__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: none;
}
.has-near-black-background-color .u-step-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.has-near-black-background-color .u-step-card .u-step__title { color: #fff; }
.has-near-black-background-color .u-step-card .u-step__body { color: rgba(255,255,255,0.72); }

/* Phone mockup — wraps a screenshot in a black device bezel with notch */
.u-phone-mock {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px;
  background: #0a0a0c;
  border-radius: 44px;
  box-shadow:
    0 0 0 1.5px #1a1a1f inset,
    0 30px 60px rgba(0,0,0,0.28),
    0 8px 16px rgba(0,0,0,0.18);
}
.u-phone-mock::before {
  content: '';
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 22px;
  background: #0a0a0c;
  border-radius: 14px;
  z-index: 2;
}
.u-phone-mock::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
  z-index: 2;
}
.u-phone-mock img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  background: var(--paper);
}
.u-phone-mock__side {
  position: absolute;
  background: #1a1a1f;
  border-radius: 2px;
}
.u-phone-mock__side--vol {
  top: 96px; left: -2px;
  width: 3px; height: 56px;
}
.u-phone-mock__side--power {
  top: 110px; right: -2px;
  width: 3px; height: 70px;
}
.u-phone-mock__caption {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 18px auto 0;
  max-width: 38ch;
  line-height: 1.5;
}


/* ============================================================
   SAVE-ON-COMMISSIONS — phone "Make an Offer" + headline + portals
   ============================================================ */

.u-savecomm {
  position: relative;
  width: 100%;
  background: #fff;
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 80px) clamp(48px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
.u-savecomm__inner {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.u-savecomm__visual { display: flex; justify-content: center; }
.u-savecomm__copy { max-width: 560px; }
.u-savecomm__headline {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink, #000);
  margin: 0 0 22px;
}
.u-savecomm__headline span { display: block; white-space: nowrap; }
.u-savecomm__brand { color: var(--brand-blue, #0042E6); }
.u-savecomm__sub {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
  max-width: 480px;
}

.u-savecomm__portals {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin: clamp(48px, 6vw, 88px) auto 0;
  text-align: center;
}
.u-savecomm__portals-label {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  margin: 0 0 24px;
}
.u-savecomm__portals-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
}
.u-savecomm__portals-row img {
  width: 150px;
  height: 56px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter .2s ease;
}
.u-savecomm__portals-row img:hover { filter: grayscale(0) opacity(1); }

/* iPhone "Make an Offer" mock content */
.u-iphone--makeoffer .u-iphone__screen {
  padding: 0;
  background: #fff;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  display: flex;
  flex-direction: column;
}
.u-mo__statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 4px;
  font-size: 13px; font-weight: 600; color: #000;
}
.u-mo__sb-icons { display: inline-flex; gap: 5px; align-items: center; color: #000; }

.u-mo__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #F4F5F9;
}
.u-mo__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #000; margin: 0; }
.u-mo__hicons { display: inline-flex; gap: 14px; color: #6E7180; }

.u-mo__property {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #F4F5F9;
}
.u-mo__thumb {
  width: 56px; height: 56px; border-radius: 12px;
  background-size: cover; background-position: center; background-color: #E5E7EB;
  flex-shrink: 0;
}
.u-mo__property-body { min-width: 0; flex: 1; }
.u-mo__pillrow { display: inline-flex; gap: 6px; margin-bottom: 4px; }
.u-mo__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 66, 230, 0.08);
  color: var(--brand-blue, #0042E6);
  font-size: 10px; font-weight: 700;
}
.u-mo__addr { font-size: 12px; font-weight: 600; color: #000; margin: 0 0 2px; }
.u-mo__price { font-size: 14px; font-weight: 800; color: #000; margin: 0; letter-spacing: -0.01em; font-feature-settings: 'tnum'; }
.u-mo__price > span:first-child { color: #6E7180; font-weight: 600; margin-right: 2px; }
.u-mo__price-sub { font-size: 10px; font-weight: 500; color: #6E7180; margin-left: 6px; letter-spacing: 0; }

.u-mo__field { padding: 10px 18px 0; }
.u-mo__label { display: block; font-size: 11px; font-weight: 600; color: #000; margin-bottom: 6px; }
.u-mo__label span { color: var(--brand-blue, #0042E6); }
.u-mo__input {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  color: #000;
  display: flex; align-items: center; gap: 6px;
  background: #fff;
  min-height: 38px;
}
.u-mo__input--row { justify-content: space-between; }
.u-mo__input--row svg { color: #6E7180; }
.u-mo__input--placeholder span { color: #C1C4CC; }
.u-mo__input-prefix { color: #6E7180; font-weight: 600; }
.u-mo__input-value { color: #000; font-weight: 700; }
.u-mo__caret {
  display: inline-block; width: 1px; height: 14px;
  background: var(--brand-blue, #0042E6);
  animation: u-mo-blink 1s steps(1) infinite;
}
@keyframes u-mo-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.u-mo__pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.u-mo__termpill {
  appearance: none;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 999px;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  color: #000;
  cursor: pointer;
}
.u-mo__termpill.is-active {
  border-color: var(--brand-blue, #0042E6);
  color: var(--brand-blue, #0042E6);
  background: rgba(0, 66, 230, 0.04);
}

.u-mo__keypad {
  margin: 12px 0 0;
  padding: 8px 6px 6px;
  background: #D2D5DB;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.u-mo__keypad button {
  appearance: none; border: 0;
  background: #FCFCFD;
  border-radius: 6px;
  padding: 6px 0 4px;
  font-family: inherit;
  font-size: 18px; font-weight: 400;
  color: #000;
  box-shadow: 0 1px 0 rgba(0,0,0,0.16);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.u-mo__keypad button em {
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #6E7180;
  margin-top: 2px;
}
.u-mo__keypad-fn { background: #ABAFB7 !important; }

.u-mo__home-indicator {
  width: 110px; height: 4px; border-radius: 999px;
  background: #000;
  margin: 6px auto 7px;
}

@media (max-width: 860px) {
  .u-savecomm__inner { grid-template-columns: 1fr; }
  .u-savecomm__visual { order: 2; }
  .u-savecomm__copy { order: 1; max-width: 100%; }
  .u-savecomm__headline { font-size: 36px; }
  .u-savecomm__headline span { white-space: normal; }
  .u-savecomm__portals-row { gap: 16px; }
  .u-savecomm__portals-row img { width: 110px; height: 44px; }
}


/* ============================================================
   AI INSPECTION AGENTS — chat mockup, KB sources, conv log
   ============================================================ */

/* Chat header */
.u-aichat__header { gap: 10px; align-items: center; }
.u-aichat__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-blue, #0042E6);
  color: #fff; font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.u-aichat__name { font-size: 14px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-aichat__status { font-size: 10px; color: #6E7180; margin: 2px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.u-aichat__dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; display: inline-block; }

/* Chat feed */
.u-aichat__feed { padding: 10px 14px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; }
.u-aichat__row { display: flex; flex-direction: column; max-width: 80%; }
.u-aichat__row--in { align-self: flex-end; align-items: flex-end; }
.u-aichat__row--out { align-self: flex-start; align-items: flex-start; }
.u-aichat__bubble {
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 11.5px;
  line-height: 1.4;
  background: #EEF1F8;
  color: #000;
  letter-spacing: -0.005em;
}
.u-aichat__row--in .u-aichat__bubble {
  background: var(--brand-blue, #0042E6);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.u-aichat__bubble--ai {
  background: #F4F5F9;
  border-bottom-left-radius: 4px;
}
.u-aichat__time {
  font-size: 9px;
  color: #9DA2B3;
  margin: 3px 4px 0;
  font-weight: 500;
}
.u-aichat__source { color: var(--brand-blue, #0042E6); font-weight: 600; }
.u-aichat__typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  background: #F4F5F9;
  padding: 8px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.u-aichat__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #9DA2B3;
  animation: u-aichat-dot 1.2s ease-in-out infinite;
}
.u-aichat__typing span:nth-child(2) { animation-delay: .15s; }
.u-aichat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes u-aichat-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Chat composer */
.u-aichat__composer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  margin: 6px 12px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  font-size: 11px; color: #9DA2B3;
}
.u-aichat__composer svg { color: var(--brand-blue, #0042E6); }

/* Knowledge base list (Card 1 visual) */
.u-aikb { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.u-aikb__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #F4F5F9;
  border-radius: 10px;
}
.u-aikb__icon { font-size: 16px; line-height: 1; }
.u-aikb__title { font-size: 11px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-aikb__sub { font-size: 9px; color: #6E7180; margin: 2px 0 0; }
.u-aikb__check {
  width: 18px; height: 18px; border-radius: 50%;
  background: #16A34A; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.u-aikb__footer { padding: 0 4px; }
.u-aikb__bar { height: 4px; background: #E5E7EB; border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.u-aikb__bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-blue, #0042E6), var(--brand-blue-tint, #6094FF));
  border-radius: inherit;
  animation: u-aikb-fill 1.6s ease-out forwards;
}
@keyframes u-aikb-fill { to { width: 100%; } }
.u-aikb__footer-label { font-size: 10px; font-weight: 600; color: var(--brand-blue, #0042E6); margin: 0; text-align: right; }

/* Conversation log (Card 3 landscape iPhone) */
.u-convlog { display: flex; flex-direction: column; gap: 0; }
.u-convlog__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #EEF1F8;
}
.u-convlog__row:first-child { border-top: 0; }
.u-convlog__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em;
}
.u-convlog__name { font-size: 11px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-convlog__msg { font-size: 10px; color: #6E7180; margin: 2px 0 0; line-height: 1.35; }
.u-convlog__time { font-size: 10px; color: #9DA2B3; align-self: start; }

/* Hero bleed CTA buttons */
.u-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.u-btn--primary {
  background: var(--brand-blue, #0042E6);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 66, 230, 0.5);
}
.u-btn--primary:hover { transform: translateY(-1px); background: #0035BA; color: #fff; text-decoration: none; }
.u-btn--ghost-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
.u-btn--ghost-light:hover { background: rgba(255,255,255,0.22); color: #fff; text-decoration: none; }

/* Stat callout reusable wrapper (centered text in dark band) */
.u-stat-callout {
  background: var(--ink, #0B0E14);
  color: #fff;
  padding: clamp(72px, 10vw, 140px) 24px;
  text-align: center;
}
.u-stat-callout__inner { max-width: 920px; margin: 0 auto; }
.u-stat-callout__inner h2 {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 14px 0 18px;
}

.u-cta-final { padding: clamp(80px, 10vw, 140px) 24px !important; }
.u-cta-final h2 {
  font-family: var(--ff-sans);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}


/* ============================================================
   SHARED OPENDOOR-STYLE HELPERS — used across HIW / About / Packages
   ============================================================ */

/* Tracker (How It Works overview phone) */
.u-tracker { display: flex; flex-direction: column; gap: 8px; }
.u-tracker__row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  opacity: 0.5;
}
.u-tracker__row--done, .u-tracker__row--active { opacity: 1; }
.u-tracker__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: #E5E7EB; color: #6E7180;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.u-tracker__row--done .u-tracker__dot { background: #16A34A; color: #fff; }
.u-tracker__row--active .u-tracker__dot { background: var(--brand-blue, #0042E6); color: #fff; box-shadow: 0 0 0 4px rgba(0,66,230,0.15); }
.u-tracker__label { font-size: 12px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-tracker__sub { font-size: 10px; color: #6E7180; margin: 2px 0 0; line-height: 1.35; }

/* Strategy chooser (HIW step 03 / packages) */
.u-strat { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.u-strat__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
}
.u-strat__row.is-active {
  border-color: var(--brand-blue, #0042E6);
  background: rgba(0,66,230,0.04);
}
.u-strat__title { font-size: 12px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-strat__sub { font-size: 10px; color: #6E7180; margin: 2px 0 0; line-height: 1.35; }
.u-strat__pill {
  font-size: 10px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F4F5F9;
  color: #6E7180;
}
.u-strat__pill--on { background: var(--brand-blue, #0042E6); color: #fff; }

/* Portal grid (HIW step 04 / packages) */
.u-portalgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: clamp(260px, 32vw, 400px);
}
.u-portalgrid__cell {
  background: #fff;
  border: 1px solid #EEF1F8;
  border-radius: 16px;
  padding: 24px 16px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  box-shadow: 0 6px 16px -8px rgba(15,23,42,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.u-portalgrid__cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(15,23,42,0.12);
}
.u-portalgrid__cell img {
  max-width: 100%; max-height: 50px;
  object-fit: contain;
  filter: grayscale(0.4);
  transition: filter .18s ease;
}
.u-portalgrid__cell:hover img { filter: grayscale(0); }

/* Campaign stats (HIW step 05) */
.u-campaign {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.u-campaign__stat {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  background: #fff;
}
.u-campaign__stat-num { display: block; font-size: 16px; font-weight: 800; color: #000; letter-spacing: -0.01em; font-feature-settings: 'tnum'; line-height: 1.1; }
.u-campaign__stat-lbl { display: block; font-size: 9px; font-weight: 500; color: #6E7180; margin-top: 4px; }
.u-campaign__offer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--brand-blue, #0042E6);
  background: rgba(0,66,230,0.04);
  border-radius: 10px;
}
.u-campaign__name { font-size: 11px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-campaign__sub { font-size: 10px; color: #6E7180; margin: 2px 0 0; }
.u-campaign__num { font-size: 16px; font-weight: 800; color: var(--brand-blue, #0042E6); letter-spacing: -0.01em; font-feature-settings: 'tnum'; }

/* Stars (review cards) */
.u-stars { color: var(--brand-blue, #0042E6); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.u-card__byline { font-size: 13px; color: var(--muted, #6E7180); margin: 12px 0 0; }
.u-card__byline strong { color: #000; }

/* Before/Now grid (About Us) */
.u-beforegrid { display: flex; flex-direction: column; gap: 0; }
.u-beforegrid__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0;
  border-top: 1px solid #EEF1F8;
  font-size: 11px;
}
.u-beforegrid__row span { color: #6E7180; }
.u-beforegrid__row strong { color: #000; font-weight: 700; font-feature-settings: 'tnum'; font-size: 12px; }
.u-beforegrid__row--total {
  border-top: 2px solid #000;
  padding-top: 12px;
  margin-top: 4px;
}
.u-beforegrid__row--total span { color: #000; font-weight: 700; }
.u-beforegrid__row--total strong { font-size: 16px; }

/* Timeline rows (About Us platform card) */
.u-tlrow {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #EEF1F8;
}
.u-tlrow:first-child { border-top: 0; padding-top: 0; }
.u-tlrow__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.u-tlrow__title { font-size: 12px; font-weight: 700; color: #000; margin: 0; line-height: 1.2; }
.u-tlrow__sub { font-size: 10px; color: #6E7180; margin: 2px 0 0; line-height: 1.35; }
.u-tlrow__time { font-size: 10px; color: #9DA2B3; align-self: start; }

/* Package list (Lite/Plus included items) */
.u-pkglist { display: flex; flex-direction: column; gap: 8px; }
.u-pkglist__row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #000;
  font-weight: 500;
}
.u-pkglist__check {
  width: 18px; height: 18px; border-radius: 50%;
  background: #16A34A; color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.u-pkglist__check--blue { background: var(--brand-blue, #0042E6); }
.u-pkglist__icon { font-size: 14px; line-height: 1; text-align: center; }


/* ============================================================
   HERO with centered address search (About Us pattern)
   ============================================================ */

.u-hero-search {
  position: relative;
  width: 100%;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 6vw, 80px);
  isolation: isolate;
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .u-hero-search {
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
  }
}
@media (min-width: 1024px) {
  .u-hero-search {
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
  }
}
.u-hero-search__inner {
  width: 100%;
  max-width: 640px;
  margin: 0;
  position: relative;
  z-index: 1;
  animation: u-hero-search-rise .7s ease-out both;
}
@keyframes u-hero-search-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.u-hero-search__eyebrow {
  color: rgba(255,255,255,0.78);
  margin: 0 0 16px;
}
.u-hero-search__title {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 16px;
}
.u-hero-search__sub {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.94);
  max-width: 540px;
  margin: 0 0 32px;
}

.u-hero-search__form {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 48px;
  padding: 8px 8px 8px 50px;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.25);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.u-hero-search__form:focus-within {
  border-color: var(--brand-blue, #0042E6);
  box-shadow: 0 0 0 4px rgba(0,107,255,0.10), 0 14px 40px -10px rgba(0,0,0,0.25);
}
.u-hero-search__icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #9DA2B3;
  pointer-events: none;
}
.u-hero-search__form .u-search-bar__input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 16px 0;
  background: transparent;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 16px;
  color: #0F1729;
  min-width: 0;
}
.u-hero-search__form .u-search-bar__input::placeholder { color: #9DA2B3; }
.u-hero-search__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-blue, #0042E6);
  color: #fff;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.u-hero-search__btn:hover {
  background: #0035BA;
  transform: scale(1.02);
  box-shadow: 0 6px 18px -6px rgba(0,66,230,0.55);
}
.u-hero-search__btn svg { transition: transform .15s ease; }
.u-hero-search__btn:hover svg { transform: translateX(2px); }

.u-hero-search__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue, #0042E6);
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.30);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.u-hero-search__cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.35);
  background: #fff;
  color: var(--brand-blue-hover, #0035BA);
  text-decoration: none;
}
.u-hero-search__cta svg { transition: transform .15s ease; }
.u-hero-search__cta:hover svg { transform: translateX(3px); }

.u-hero-search__helper {
  margin: 16px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

@media (max-width: 1023px) {
  .u-hero-search { padding: 80px 32px; min-height: 540px; }
  .u-hero-search__inner { margin: 0 auto; text-align: center; }
  .u-hero-search__sub { margin-left: auto; margin-right: auto; }
  .u-hero-search__form { margin: 0 auto; }
  .u-hero-search__helper { text-align: center; }
}
@media (max-width: 540px) {
  .u-hero-search { padding: 60px 20px; min-height: 500px; }
  .u-hero-search__title { font-size: 40px; }
  .u-hero-search__sub { font-size: 16px; }
  .u-hero-search__form {
    flex-wrap: wrap;
    border-radius: 18px;
    padding: 12px 12px 12px 44px;
  }
  .u-hero-search__icon { left: 16px; }
  .u-hero-search__form .u-search-bar__input { padding: 8px 0; font-size: 15px; flex-basis: 100%; }
  .u-hero-search__btn { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* ============================================================
   Live notifications panel — used on About > Platform card
   Vanilla port of the Framer-Motion notifications animation.
   Driven by initNotifAnimation() in animations.js
   ============================================================ */
.u-notif-panel {
  width: 100%;
  max-width: 380px;
  font-family: var(--ff-sans);
  color: var(--ink);
}
.u-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
}
.u-notif-header__left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.u-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #0a0e1a;
}
.u-notif-bell > svg { width: 14px; height: 14px; display: block; }
.u-notif-bell::before,
.u-notif-bell::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-blue);
}
.u-notif-bell::before {
  animation: u-notif-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
  opacity: 0.7;
}
@keyframes u-notif-ping {
  0%        { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(2.3); opacity: 0; }
}
.u-notif-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #0a0e1a;
}
.u-notif-count {
  font-size: 10px;
  font-weight: 700;
  color: #4B5563;
  background: #F3F4F6;
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.u-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.u-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  overflow: hidden;
  transform-origin: top center;
  transition:
    opacity 350ms cubic-bezier(0.22,1,0.36,1),
    transform 350ms cubic-bezier(0.22,1,0.36,1),
    background-color 350ms cubic-bezier(0.22,1,0.36,1),
    border-color 350ms cubic-bezier(0.22,1,0.36,1),
    max-height 350ms cubic-bezier(0.22,1,0.36,1),
    margin-top 350ms cubic-bezier(0.22,1,0.36,1),
    padding 350ms cubic-bezier(0.22,1,0.36,1);
  max-height: 80px;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.u-notif-item--new {
  background: rgba(0,66,230,0.06);
  border-color: rgba(0,66,230,0.22);
}
.u-notif-item--enter {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}
.u-notif-item--exit {
  opacity: 0;
  transform: scale(0.96);
  max-height: 0;
  margin-top: -6px;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
}
.u-notif-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,66,230,0.10);
  border-radius: 999px;
  color: #001E78;
}
.u-notif-icon > svg { width: 12px; height: 12px; display: block; }
.u-notif-body { min-width: 0; flex: 1; }
.u-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.u-notif-name {
  font-size: 11px;
  font-weight: 700;
  color: #0a0e1a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.u-notif-time {
  font-size: 9px;
  color: #6E7180;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.u-notif-sub {
  font-size: 10px;
  color: #4B5563;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  .u-notif-item { transition: none; }
  .u-notif-bell::before { animation: none; opacity: 0; }
}

/* ============================================================
   Live auction bid stack — animated
   Used on Features > Online Live Auctions > "live auction in progress" card.
   Three bid rows stack bottom-up via flex-direction:column-reverse.
   Each row fades + slides in on a 700ms cascade once the stack scrolls
   into view; the leading (emerald) card pulses subtly forever after.
   Driven by initBidStack() in animations.js
   ============================================================ */
.u-bid-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin-top: 12px;
}
.u-bid-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  will-change: opacity, transform;
}
.u-bid-row.u-in-view {
  opacity: 1;
  transform: translateY(0);
}
.u-bid-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  font-family: var(--ff-sans);
  background: rgba(255,255,255,0.95);
  color: #0a0e1a;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 12px 24px -8px rgba(0,0,0,0.18),
    0 4px 8px -2px rgba(0,0,0,0.06);
}
.u-bid-card--leading {
  background: #10B981;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(110,231,183,0.6),
    0 16px 36px -10px rgba(16,185,129,0.55),
    0 4px 12px -2px rgba(16,185,129,0.35);
  animation: u-bid-pulse 2s ease-in-out infinite;
  animation-delay: 0.4s;
}
@keyframes u-bid-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
.u-bid-card__bidder {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}
.u-bid-card--leading .u-bid-card__bidder { opacity: 0.85; }
.u-bid-card__amount {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .u-bid-row { opacity: 1; transform: none; transition: none; }
  .u-bid-card--leading { animation: none; }
}




/* ============================================================
   BLOG / ARTICLE TEMPLATES — single.html, index.html, archive.html
   Same Opendoor language as wp-build pages: u-hero-search hero,
   narrow prose column, brand-blue u-cta-final closing.
   ============================================================ */

/* ── Cover-block compatibility for u-hero-search ── */
.wp-block-cover.u-hero-search,
.wp-block-cover.u-hero-search--post,
.wp-block-cover.u-hero-search--archive {
  /* Cover block already has position:relative and isolation; let our
     hero rules layer on top: padding, min-height, rounded corners. */
  background-size: cover;
  background-position: center;
}
.wp-block-cover.u-hero-search > .wp-block-cover__inner-container,
.wp-block-cover.u-hero-search--post > .wp-block-cover__inner-container,
.wp-block-cover.u-hero-search--archive > .wp-block-cover__inner-container {
  width: 100%;
  max-width: none;
  padding: 0;
}
.u-hero-search--post { min-height: 600px; }
.u-hero-search--archive { min-height: 420px; }

/* Inner block-group acts as the existing u-hero-search__inner */
.wp-block-cover.u-hero-search .u-hero-search__inner,
.wp-block-cover.u-hero-search--post .u-hero-search__inner,
.wp-block-cover.u-hero-search--archive .u-hero-search__inner {
  width: 100%;
  max-width: 760px;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Post-meta row in single.html hero (author · date) */
.u-hero-search__post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
}
.u-hero-search__post-meta a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 600;
}
.u-hero-search__post-meta a:hover { text-decoration: underline; }

/* Override post-terms / query-title rendering inside hero so they pick
   up the hero typography instead of theme defaults */
.u-hero-search .wp-block-post-terms,
.u-hero-search--archive .wp-block-query-title {
  color: rgba(255,255,255,0.78);
}
.u-hero-search .wp-block-post-title,
.u-hero-search--post .wp-block-post-title,
.u-hero-search--archive .wp-block-query-title {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 16px;
}
.u-hero-search .wp-block-post-title a {
  color: #fff;
  text-decoration: none;
}

/* ── Article body — narrow prose column ── */
.u-post-body {
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.u-post-body p,
.u-post-body li {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink, #111827);
}
.u-post-body p { margin: 0 0 1.25em; }
.u-post-body h2 {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 1.8em 0 0.5em;
  color: var(--ink, #111827);
}
.u-post-body h3 {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 1.6em 0 0.5em;
  color: var(--ink, #111827);
}
.u-post-body blockquote {
  border-left: 4px solid var(--brand-blue, #0042E6);
  padding: 4px 0 4px 20px;
  margin: 1.6em 0;
  font-size: 21px;
  font-style: italic;
  color: var(--ink, #111827);
}
.u-post-body a {
  color: var(--brand-blue, #0042E6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.u-post-body img,
.u-post-body figure {
  border-radius: 16px;
  overflow: hidden;
  margin: 1.6em 0;
}
.u-post-body ul,
.u-post-body ol {
  padding-left: 1.4em;
  margin: 0 0 1.25em;
}
.u-post-body code {
  background: var(--off-white, #F8F9FC);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ── Author bio band at bottom of single posts ── */
.u-post-author-band {
  margin: 24px auto 64px;
  padding: 28px;
  background: var(--off-white, #F8F9FC);
  border-radius: 20px;
}
.u-post-author-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.u-post-author-band__avatar img {
  border-radius: 999px;
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.u-post-author-band .wp-block-post-author-name {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink, #111827);
  margin: 0;
}
.u-post-author-band .wp-block-post-author-name a {
  color: inherit;
  text-decoration: none;
}
.u-post-author-band .wp-block-post-author-biography {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #6B7280);
  margin: 4px 0 0;
}

/* ── Post grid — used by index.html, archive.html, search.html ── */
.u-post-grid {
  margin: clamp(48px, 6vw, 80px) auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
.u-post-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .u-post-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .u-post-grid .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Individual post card ── */
.u-post-card {
  background: #fff;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.u-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(8,12,26,0.18);
  border-color: rgba(0,66,230,0.20);
}
.u-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.u-post-card:hover .u-post-card__image img { transform: scale(1.03); }
.u-post-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.u-post-card__category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue, #0042E6);
  margin: 0;
}
.u-post-card__category a {
  color: inherit;
  text-decoration: none;
}
.u-post-card__title {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 4px 0 6px;
  color: var(--ink, #111827);
}
.u-post-card__title a {
  color: inherit;
  text-decoration: none;
}
.u-post-card__title a:hover { color: var(--brand-blue, #0042E6); }
.u-post-card__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, #6B7280);
  margin: 0 0 6px;
}
.u-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border, #E5E7EB);
  font-size: 13px;
  color: var(--muted, #6B7280);
}
.u-post-card__meta .wp-block-post-author a {
  color: var(--ink, #111827);
  text-decoration: none;
  font-weight: 600;
}

/* ── Pagination ── */
.u-post-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 48px);
}
.u-post-pagination a,
.u-post-pagination span {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #E5E7EB);
  color: var(--ink, #111827);
  text-decoration: none;
  background: #fff;
  transition: background .15s, border-color .15s;
}
.u-post-pagination .page-numbers.current,
.u-post-pagination a:hover {
  background: var(--brand-blue, #0042E6);
  border-color: var(--brand-blue, #0042E6);
  color: #fff;
}


/* ============================================================
   AI INSPECTION AGENT — animated voice transcript demo
   Used inside the .u-iphone--voiceagent phone frame on the home page.
   ============================================================ */
.u-iphone--voiceagent .u-iphone__screen { padding: 0; }
.u-vagent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  overflow: hidden;
}
.u-vagent__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border, #E5E7EB);
  flex-shrink: 0;
}
.u-vagent__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-blue, #0042E6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.u-vagent__name {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--ink, #111827);
  letter-spacing: -0.01em;
}
.u-vagent__status {
  font-size: 11px;
  color: var(--muted, #6B7280);
  margin: 1px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.u-vagent__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}

.u-vagent__feed {
  list-style: none;
  margin: 0;
  padding: 14px 12px 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}
.u-vagent__row {
  display: flex;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.u-vagent__row.is-in { opacity: 1; transform: none; }
.u-vagent__row--buyer { justify-content: flex-end; }
.u-vagent__row--agent { justify-content: flex-start; }

.u-vagent__bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(8,12,26,0.05);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.u-vagent__bubble--buyer {
  background: var(--brand-blue, #0042E6);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.u-vagent__bubble--agent {
  background: #F4F5F7;
  color: var(--ink, #111827);
  border-bottom-left-radius: 6px;
}

/* Blinking caret while a bubble is being typed */
.u-vagent__bubble.is-typing::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: u-vagent-caret 0.8s steps(1, end) infinite;
}
@keyframes u-vagent-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 3-dot typing indicator */
.u-vagent__typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  min-height: 32px;
}
.u-vagent__typing i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: u-vagent-typing 1.2s ease-in-out infinite;
}
.u-vagent__typing i:nth-child(2) { animation-delay: 0.15s; }
.u-vagent__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes u-vagent-typing {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* "Ask Jess" composer pinned to the bottom of the phone screen */
.u-vagent__composer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #F4F5F7;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  pointer-events: none;
}
.u-vagent__placeholder {
  font-size: 11px;
  color: #9DA2B3;
}
.u-vagent__icons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.u-vagent__mic,
.u-vagent__send {
  border: 0;
  background: #fff;
  color: var(--muted, #6B7280);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(8,12,26,0.06);
}
.u-vagent__send {
  background: #E5E7EB;
  color: var(--muted, #6B7280);
  box-shadow: none;
}

/* ─── Skip-to-content link (a11y) ─── */
.u-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  padding: 10px 16px;
  background: #0042E6;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: top 0.15s ease-in-out;
}
.u-skip-link:focus,
.u-skip-link:focus-visible {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Property valuation CRO additions ─── */
/* Hero form (extends .u-hero-search__form) — single-field address input.
   The base pill layout, focus state, icon, and submit button are inherited
   from .u-hero-search__form / .u-hero-search__btn. These rules cover the
   companion hint, mobile sizing, and standalone reuse in the closing CTA. */
.u-hero-form__input {
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.4;
}
.u-hero-form__input:focus { outline: none; }
.u-hero-form__submit { white-space: nowrap; }
.u-hero-form__hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  font-weight: 400;
  max-width: 540px;
}
@media (max-width: 1023px) {
  .u-hero-form__hint { margin-left: auto; margin-right: auto; text-align: center; }
}

/* Trust strip — horizontal stat row with bullet separators. Used in hero
   (inverse on dark photo) and in the social-proof block (default ink). */
.u-trust-strip {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
  font-size: 15px;
  color: var(--ink);
}
.u-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: inherit;
  letter-spacing: -0.005em;
}
.u-trust-strip li + li::before {
  content: "•";
  color: var(--brand-blue);
  font-weight: 700;
  margin-right: 0;
}
.u-trust-strip strong {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.u-trust-strip--inverse { color: rgba(255,255,255,0.92); }
.u-trust-strip--inverse strong { color: #fff; }
.u-trust-strip--inverse li + li::before { color: var(--brand-blue-tint); }
@media (max-width: 1023px) {
  .u-trust-strip { justify-content: center; }
}
@media (max-width: 540px) {
  .u-trust-strip { font-size: 13px; gap: 6px 14px; }
  .u-trust-strip li { gap: 14px; }
}

/* Sticky mobile CTA — fixed bottom bar, mobile-only. Hidden on desktop. */
.u-sticky-cta-mobile { display: none; }
@media (max-width: 768px) {
  .u-sticky-cta-mobile {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--rule, #E4E5EA);
    box-shadow: 0 -8px 24px -10px rgba(8,12,26,0.18);
  }
  .u-sticky-cta-mobile__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--brand-blue, #0042E6);
    color: #fff;
    font-family: var(--ff-sans, 'Manrope', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow: 0 8px 22px -8px var(--brand-blue-glow, rgba(0,66,230,0.40));
    transition: background-color .15s ease, transform .15s ease;
  }
  .u-sticky-cta-mobile__btn:hover,
  .u-sticky-cta-mobile__btn:focus-visible {
    background: var(--brand-blue-hover, #0035BA);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
  }
}

/* ===========================================================
   ARTICLES INDEX — featured card + 3-up grid
   Self-contained styles so pages can use bare HTML (no inline <style> blocks)
   =========================================================== */
.idx-feat { padding: 96px 24px; max-width: 1180px; margin: 0 auto; }
.idx-feat__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.idx-feat__head .u-eyebrow { color: var(--brand-blue); justify-content: center; margin-bottom: 16px; }
.idx-feat__head h2 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.idx-card { display: block; background: #fff; border: 1px solid var(--rule); border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.idx-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -24px rgba(8,12,26,0.18); border-color: rgba(0,66,230,0.25); }
.idx-feat__card { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
@media (max-width: 880px) { .idx-feat__card { grid-template-columns: 1fr; } }
.idx-feat__img { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.idx-feat__body { padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.idx-feat__kicker { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; color: var(--brand-blue); margin: 0 0 14px; text-transform: uppercase; }
.idx-feat__title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; color: var(--ink); }
.idx-feat__desc { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 22px; }
.idx-feat__meta { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.idx-feat__meta strong { color: var(--ink); }
.idx-feat__more { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-blue); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; margin-top: 18px; }
.idx-feat__more::after { content: '→'; transition: transform .15s; }
.idx-card:hover .idx-feat__more::after { transform: translateX(3px); }

.idx-grid-wrap { padding: 32px 24px 96px; max-width: 1180px; margin: 0 auto; }
.idx-grid-wrap__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.idx-grid-wrap__head .u-eyebrow { color: var(--brand-blue); justify-content: center; margin-bottom: 16px; }
.idx-grid-wrap__head h2 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.idx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .idx-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .idx-grid { grid-template-columns: 1fr; } }
.idx-grid__card { display: flex; flex-direction: column; height: 100%; }
.idx-grid__img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.idx-grid__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.idx-grid__kicker { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--brand-blue); margin: 0 0 10px; text-transform: uppercase; }
.idx-grid__title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 12px; color: var(--ink); }
.idx-grid__desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; flex: 1; }
.idx-grid__meta { font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); }