/* ============================================================================
   FLUID-GLASS — the brokerage website's HOME layer, on Liquid Glass
   (brokerage_site/web/static/web/css/fluid-glass-home.css is a byte copy).
   ---------------------------------------------------------------------------
   Home-only, on top of public-glass.css: the header over the hero film, the
   full-bleed film hero, the glass search panel, the stat band, the feature
   cards and the popular-search tiles. Every value is a --lg-* token
   (static/css/lg-core.css); the page renders the "Midnight" palette.
   Words over the film are absolute white (--lg-white) on a black scrim, so they
   read whatever the film shows. Loads after public-glass.css.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   GLASS over the film
   ───────────────────────────────────────────────────────────────────────── */
.fg-glass {
  border-radius: var(--lg-r-xl);
  background: var(--lg-glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 0;
  box-shadow: var(--lg-elev-2);
}
.fg-glass-dark {
  border-radius: var(--lg-r-xl);
  background: var(--lg-glass-3);
  -webkit-backdrop-filter: var(--lg-blur-strong);
  backdrop-filter: var(--lg-blur-strong);
  border: 0;
  box-shadow: var(--lg-elev-3);
}
.fg-glass-hover {
  transition: box-shadow var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.fg-glass-hover:hover { box-shadow: var(--lg-elev-3); }

/* ─────────────────────────────────────────────────────────────────────────
   TYPE
   ───────────────────────────────────────────────────────────────────────── */
.fg-home .font-display {
  font-family: var(--lg-font-display);
  font-weight: 700;
  letter-spacing: var(--lg-tracking-title);
  line-height: var(--lg-leading-tight);
}

.fg-label {
  font-family: var(--lg-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: var(--lg-t-caption);
  line-height: 1.2;
  color: var(--lg-text-secondary);
}
.fg-home .eyebrow { font-family: var(--lg-font); letter-spacing: 0.08em; }

/* ─────────────────────────────────────────────────────────────────────────
   HEADER (home) — clear over the film; the nav track and the calls to action
   are glass so they read on any frame.
   ───────────────────────────────────────────────────────────────────────── */
.sky-public #skyHeader,
.sky-public #skyHeader.bg-background\/90 {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skyHeader::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 210px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lg-black) 60%, transparent) 0%, color-mix(in srgb, var(--lg-black) 28%, transparent) 42%, transparent 100%);
  pointer-events: none; z-index: -1;
}

.sky-public #skyHeader nav.md\:flex {
  background: var(--lg-glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-elev-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS — glass pills over the film; the primary one is the accent fill.
   ───────────────────────────────────────────────────────────────────────── */
.fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lg-control-h);
  padding: 0 22px;
  border-radius: var(--lg-r-pill);
  border: 0;
  font-family: var(--lg-font);
  font-size: var(--lg-t-control);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--lg-text);
  cursor: pointer;
  background: var(--lg-glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-elev-1);
  transition: transform var(--lg-dur-fast) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.fg-btn:hover { background: var(--lg-glass-solid); }
.fg-btn:active { transform: scale(.95); }
.fg-btn--dark { background: var(--lg-glass-3); }
.fg-btn--dark:hover { background: var(--lg-glass-solid); }
.fg-btn--accent {
  background: var(--lg-accent-fill);
  color: var(--lg-on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--lg-button-shadow);
}
.fg-btn--accent:hover { background: var(--lg-accent-fill-pressed); }
.fg-btn .lg-icon { --lg-icon-size: 18px; }

/* ─────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────── */
.fg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; display: flex; align-items: flex-end;
  background: var(--lg-bg);
  margin-top: calc(-1 * var(--fg-header-h, 80px));
}
.fg-hero__media, .fg-hero__media video, .fg-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.fg-hero__media { z-index: -2; }
.fg-hero__media video, .fg-hero__media img { opacity: 1; will-change: transform; }
.fg-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lg-black) 12%, transparent) 0%, transparent 30%, transparent 55%, color-mix(in srgb, var(--lg-black) 66%, transparent) 100%),
    linear-gradient(95deg, color-mix(in srgb, var(--lg-black) 36%, transparent) 0%, transparent 55%);
}
.fg-hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.32;
  background-image:
    linear-gradient(color-mix(in srgb, var(--lg-white) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--lg-white) 5%, transparent) 1px, transparent 1px);
  background-size: clamp(52px, 6vw, 104px) clamp(52px, 6vw, 104px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, var(--lg-black) 12%, transparent 74%);
  mask-image: radial-gradient(120% 90% at 50% 42%, var(--lg-black) 12%, transparent 74%);
}
.fg-hero__inner {
  position: relative; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: clamp(7rem, 16vh, 11rem) 1.5rem clamp(2.5rem, 6vh, 4.5rem);
}
@media (min-width: 768px) { .fg-hero__inner { padding-left: 2.5rem; padding-right: 2.5rem; } }

.fg-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--lg-r-pill); color: var(--lg-text); }
.fg-hero__eyebrow .lg-icon { color: var(--lg-accent-text); }

.fg-hero__title {
  margin-top: var(--lg-s-5);
  max-width: 20ch; color: var(--lg-white);
  font-size: var(--lg-t-display);
  font-weight: 700;
  letter-spacing: var(--lg-tracking-title); line-height: var(--lg-leading-tight); text-wrap: balance;
}
.fg-hero__title .fg-em { font-style: italic; color: var(--lg-white); }
.fg-hero__sub {
  margin-top: var(--lg-s-4); max-width: 46ch;
  color: color-mix(in srgb, var(--lg-white) 92%, transparent);
  font-size: var(--lg-t-body); line-height: var(--lg-leading);
}
.fg-hero__ticks {
  margin-top: var(--lg-s-6);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: var(--lg-t-label);
  color: color-mix(in srgb, var(--lg-white) 86%, transparent);
}
.fg-hero__ticks span { display: inline-flex; align-items: center; gap: 8px; }
.fg-hero__ticks span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lg-accent);
}

/* Glass search panel over the film (SPEC §5.9: fields are fills inside it). */
.fg-search-wrap { margin-top: var(--lg-s-6); max-width: 940px; padding: 8px; }
.fg-search { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .fg-search { grid-template-columns: 1.35fr 1fr 1fr auto; gap: 6px; align-items: stretch; } }
.fg-search__field {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px; min-width: 0; border-radius: var(--lg-r-lg);
  transition: background-color var(--lg-dur) var(--lg-ease);
}
.fg-search__field:hover,
.fg-search__field:focus-within { background: var(--lg-fill-ink); }
@media (min-width: 768px) {
  .fg-search__field + .fg-search__field { position: relative; }
  .fg-search__field + .fg-search__field::before {
    content: ""; position: absolute; left: -3px; top: 18%; bottom: 18%; width: 1px; background: var(--lg-separator);
  }
}
.fg-search__label { font-family: var(--lg-font); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: var(--lg-t-caption); color: var(--lg-text-secondary); }
.sky-public .fg-search select {
  -webkit-appearance: none; appearance: none; border: 0; background-color: transparent;
  color: var(--lg-text); font-family: var(--lg-font); font-size: var(--lg-t-body); font-weight: 600;
  padding: 0 22px 0 0; min-height: 28px; cursor: pointer;
  background-image: var(--lg-chevron);
  background-position: right 0 center;
  background-size: 16px 16px; background-repeat: no-repeat;
  box-shadow: none;
}
.sky-public .fg-search select:focus { outline: none; box-shadow: none; background-color: transparent; }
.fg-search__field:focus-within { outline: 2px solid var(--lg-focus-ring); outline-offset: 0; }
.fg-search__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--lg-r-pill); padding: 0 26px; min-height: var(--lg-control-h-lg);
  background: var(--lg-accent-fill); color: var(--lg-on-accent);
  font-family: var(--lg-font); font-size: var(--lg-t-body); font-weight: 600;
  box-shadow: var(--lg-button-shadow);
  cursor: pointer;
  transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
}
.fg-search__submit:hover { background: var(--lg-accent-fill-pressed); }
.fg-search__submit:active { transform: scale(.95); }

/* ─────────────────────────────────────────────────────────────────────────
   TRUST BAND — figures on the page, separated by hairlines
   ───────────────────────────────────────────────────────────────────────── */
.fg-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--lg-separator);
  border-top: 1px solid var(--lg-separator);
  border-bottom: 1px solid var(--lg-separator);
}
@media (min-width: 768px) { .fg-stats { grid-template-columns: repeat(4, 1fr); } }
.fg-stat {
  background: var(--lg-bg);
  padding: clamp(1.6rem, 3.4vw, 2.6rem) 1.4rem;
  display: flex; flex-direction: column; gap: 8px;
}
.fg-stat__icon { color: var(--lg-accent-text); }
.fg-stat__num { font-family: var(--lg-font-display); font-weight: 700; letter-spacing: var(--lg-tracking-title); font-size: var(--lg-t-display); line-height: 1.1; color: var(--lg-text); font-variant-numeric: tabular-nums; }
.fg-stat__label { font-family: var(--lg-font); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: var(--lg-t-caption); color: var(--lg-text-secondary); }

/* ─────────────────────────────────────────────────────────────────────────
   FEATURE CARDS
   ───────────────────────────────────────────────────────────────────────── */
.sky-public .fg-card {
  padding: var(--lg-s-5);
  border-radius: var(--lg-r-xl);
  border-color: transparent;
  background: var(--lg-surface);
  box-shadow: var(--lg-elev-2);
}
.fg-card__ic {
  display: inline-flex; height: 44px; width: 44px; align-items: center; justify-content: center;
  border-radius: var(--lg-r-sm);
  border: 0;
  color: var(--lg-accent-text);
  background: var(--lg-accent-soft);
  --lg-icon-size: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────
   POPULAR SEARCHES — tiles
   ───────────────────────────────────────────────────────────────────────── */
.fg-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--lg-control-h); padding: 12px 16px; border-radius: var(--lg-r-md);
  border: 0;
  background: var(--lg-surface);
  box-shadow: var(--lg-elev-1);
  font-size: var(--lg-t-control); font-weight: 600; color: var(--lg-text);
  transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
}
.fg-chip:hover { box-shadow: var(--lg-elev-2); }
.fg-chip:active { transform: scale(.96); }
.fg-chip .lg-icon { color: var(--lg-text-tertiary); transition: transform var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease); }
.fg-chip:hover .lg-icon { color: var(--lg-accent-text); transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────────────────────
   NEWSLETTER — one field and its button, joined
   ───────────────────────────────────────────────────────────────────────── */
.fg-home [data-newsletter] form { max-width: 30rem; }
.sky-public.fg-home [data-newsletter] input,
.fg-home [data-newsletter] input {
  border-radius: var(--lg-r-pill) 0 0 var(--lg-r-pill);
  border: 0;
  background-color: var(--lg-field-bg);
}
.fg-home [data-newsletter] button {
  border-radius: 0 var(--lg-r-pill) var(--lg-r-pill) 0;
  font-family: var(--lg-font); font-weight: 600;
  background: var(--lg-accent-fill); color: var(--lg-on-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   READABILITY over the film
   ───────────────────────────────────────────────────────────────────────── */
.fg-home .text-white\/90, .fg-home .text-white\/85, .fg-home .text-white\/80, .fg-home .text-white\/75 { color: color-mix(in srgb, var(--lg-white) 94%, transparent); }
.fg-home .text-white\/70, .fg-home .text-white\/60, .fg-home .text-white\/50, .fg-home .text-white\/40 { color: color-mix(in srgb, var(--lg-white) 76%, transparent); }
.fg-home figure blockquote { color: var(--lg-text); }
.fg-home figure figcaption p:first-child { color: var(--lg-text); }

@media (prefers-reduced-motion: reduce) {
  .fg-hero__media video, .fg-hero__media img { transform: none; }
}

/* The stat band holds as many columns as it has figures (home.html data-tiles). */
@media (min-width: 768px) {
  .fg-stats[data-tiles="1"] { grid-template-columns: 1fr; }
  .fg-stats[data-tiles="2"] { grid-template-columns: repeat(2, 1fr); }
  .fg-stats[data-tiles="3"] { grid-template-columns: repeat(3, 1fr); }
}

/* A quiet accent wash behind the "AI advantage" band. */
.fg-ai-glow { background: radial-gradient(60% 50% at 30% 30%, var(--lg-accent-softer), transparent 70%); }