/* Public website layout (W1). Design tokens only (static/css/tokens.css); no inline styles. */
.website-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.website-header__subline { margin: 0; color: var(--color-text-secondary); font-size: var(--text-xs); }
.website-header__actions { align-items: center; }
.website-header__phone { font-size: var(--text-md); }
.website-lockup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.website-lockup__rule { align-self: stretch; border-left: var(--border-width) solid var(--color-border); }
/* Broker name ≥ 16px and at least half the team name (TREC §535.155; CMS-13 blocker 2). */
.website-broker { font-family: var(--font-family-sans); font-size: var(--text-md); }
.website-lockup .website-broker { font-size: var(--text-lg); }
.website-menu summary { cursor: pointer; min-height: var(--control-height); font-size: var(--text-md); }
.website-eyebrow { margin: 0; color: var(--color-text-secondary); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.website-hero, .website-grid, .website-contact, .website-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); }
.website-hero__art { width: 100%; height: auto; }
.website-areas, .website-tabs ul, .website-contact__details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.website-tabs { margin-bottom: var(--space-6); }
.website-tabs a { display: inline-block; min-height: var(--control-height); padding-block: var(--space-2); font-size: var(--text-md); }
.website-tabs a[aria-current="page"] { font-weight: var(--font-weight-semibold); border-bottom: 3px solid var(--color-rule-decorative); }
.website-disclosure, .website-estimate-statement { padding: var(--space-4); border-left: 3px solid var(--color-border); background-color: var(--color-bg-subtle); font-size: var(--text-md); }
.website-monogram { display: grid; place-items: center; aspect-ratio: 4 / 5; background-color: var(--color-bg-subtle); font-family: var(--font-family-display); font-size: var(--text-2xl); }
.website-broker-line { font-size: var(--text-md); }
/* Headings that contain a person's or the team's name: ≤ 2× the 16px broker line (§535.155; see typography.py). */
[data-product="site"] .website-name-capped { font-size: var(--text-2xl); }
.website-profile__photo { align-self: start; overflow: hidden; } /* hug the photo so a hover zoom is clipped at its edge */
.website-profile__photo img { display: block; width: 100%; height: auto; }
.website-footer { display: grid; gap: var(--space-8); }
.website-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-8); }
.website-footer__columns h2 { font-family: var(--font-family-sans); font-size: var(--text-md); }
.website-footer__columns ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.website-footer__team { font-size: var(--text-lg); }
.website-disclosures { display: grid; gap: var(--space-3); }
/* TREC IABS / CPN: each on its own line, 16px, underlined. */
.website-trec { display: grid; }
.website-trec a { font-size: var(--text-md); text-decoration: underline; }
.website-footer__rights { font-size: var(--text-xs); }
/* Charcoal bands (How it works, footer): the dark token set applied to the band itself. */
.section[data-theme="dark"], .site-footer[data-theme="dark"] { background-color: var(--color-bg); color: var(--color-text); }
.site-footer[data-theme="dark"] a { color: var(--color-link); }
/* Header nav: inline at ≥ 64em (lg); a <details> "Menu" toggle below (SCREENS G-01, design-system §9.1 A).
   The hidden copy uses display:none, so assistive technology meets exactly one navigation. */
.website-nav--wide { display: none; }
@media (min-width: 64em) {
  .website-nav--wide { display: block; }
  .website-menu { display: none; }
}

/* ---- SITE-LP: the landing-page look (https://www.thegomezregroup.com/lp) on the design tokens ---- */
/* Header: wordmark with the gold "Greater Houston" line, phone with icon, nav, black Get Started. */
.website-header { gap: var(--space-4) var(--space-6); }
.website-header__brand { margin-right: auto; }
.wordmark.website-lockup { display: grid; gap: var(--space-0-5); }
.website-lockup .wordmark__sub { color: var(--color-text-accent); letter-spacing: 0.18em; }
/* The company logo beside the wordmark, only when Branding opts the site in (N-161). */
.wordmark.website-lockup--logo { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); }
.website-lockup--logo > :not(.website-lockup__logo) { grid-column: 2; }
.website-lockup--logo .website-lockup__logo { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: auto; max-width: 8rem; height: 3rem; object-fit: contain; }
.website-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); color: var(--color-text); font-weight: var(--font-weight-medium); text-decoration: none; }
.website-header__phone:hover, .website-header__phone:focus-visible { text-decoration: underline; }
.website-header__phone .icon { color: var(--color-text-accent); }
.website-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.website-header__login { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--color-text-secondary); font-size: var(--text-sm); }
/* Public buttons: uppercase, letter-spaced, square (the live page's style). */
[data-product="site"] .btn { border-radius: var(--radius-0); font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
[data-product="site"] .btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-8); }
[data-product="site"] .btn--inverse { --btn-bg: var(--color-text); --btn-fg: var(--color-bg); --btn-bg-hover: var(--color-text-secondary); --btn-fg-hover: var(--color-bg); --btn-bg-active: var(--color-text-secondary); }
[data-product="site"] .btn--outline { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: var(--color-text); --btn-bg-hover: var(--color-surface-hover); --btn-fg-hover: var(--color-text); --btn-bg-active: var(--color-surface-pressed); }
/* Eyebrows: small gold caps with a short gold rule before them. */
.website-eyebrow { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-accent); font-weight: var(--font-weight-medium); letter-spacing: 0.18em; }
.website-eyebrow::before { content: ""; flex: 0 0 2rem; border-top: var(--border-width) solid var(--color-rule-decorative); }
h3.website-eyebrow { font-family: var(--font-family-sans); font-size: var(--text-xs); }
/* Hero: charcoal band (the CMS photo slot sits behind a scrim when a photo is published). */
.website-hero-section { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-24); }
.website-band__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.website-hero-section--photo::before, .website-closing--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-scrim); }
.website-hero-section--photo::before { background-image: linear-gradient(90deg, var(--color-bg) 0%, var(--color-scrim) 55%, transparent 100%); }
.website-closing { position: relative; isolation: isolate; overflow: hidden; }
.website-hero { display: block; }
.website-hero__copy { max-width: 40rem; }
.website-hero__lead { color: var(--color-text); }
.website-hero__actions { margin-top: var(--space-2); }
.website-hero__note { font-size: var(--text-xs); }
@media (min-width: 64em) { .website-hero-section { padding-block: var(--space-32); } }
/* "Meet …" sections: copy + card, stats row below; the Brian variant flips the columns. */
.website-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.website-person__lead { font-family: var(--font-family-display); font-size: var(--text-xl); color: var(--color-text); }
.website-person__signature { display: grid; gap: var(--space-1); margin-block: var(--space-5); }
.website-person__signature p { margin: 0; }
.website-person__name { font-family: var(--font-family-display); font-size: var(--text-lg); }
.website-person__role { color: var(--color-text-secondary); font-size: var(--text-sm); }
.website-person__card { align-self: center; width: min(100%, 28rem); margin-inline: auto; }
.website-person__photo { position: relative; width: 100%; aspect-ratio: 1 / 1.04; }
.website-person__photo::after { content: ""; position: absolute; inset: auto auto -0.75rem -0.75rem; width: 65%; height: 65%; border-left: var(--border-width) solid var(--color-rule-decorative); border-bottom: var(--border-width) solid var(--color-rule-decorative); pointer-events: none; }
.website-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.website-person__photo .website-monogram { height: 100%; }
.website-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; list-style: none; border-top: var(--border-width) solid var(--color-border-subtle); }
.website-stat { display: grid; gap: var(--space-1); }
.website-stat__value { font-family: var(--font-family-display); font-size: var(--text-2xl); font-weight: var(--font-weight-display); line-height: 1; }
.website-stat__label { color: var(--color-text-secondary); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
@media (min-width: 64em) {
  .website-person { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); }
  .website-person--flip .website-person__copy { order: 2; }
  .website-person--flip .website-person__card { order: 1; }
}
/* Chips (services, neighborhoods). */
.website-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.website-chips li { display: inline-flex; align-items: center; min-height: 2rem; padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-1); background-color: var(--color-surface); font-size: var(--text-sm); }
/* Card grids (featured, sold), the four goal cards, the two bullet columns. */
.website-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-6); }
/* The current sold photos are 269 × 183 px. Keep them close to their native size so
   larger cards frame the real photo instead of enlarging its pixels. */
.website-grid--sold .property-card__media { padding: var(--space-6); }
.website-grid--sold .property-card__media img {
  width: min(100%, 269px);
  height: auto;
  max-height: 183px;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}
.website-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.website-way { display: grid; gap: var(--space-3); align-content: start; }
.website-way__title { font-size: var(--text-xl); }
.website-way p:last-child { margin-top: auto; }
.website-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-8); }
.website-checklist { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.website-checklist li { position: relative; padding-left: var(--space-6); }
.website-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-text-accent); }
/* Get-started section: facts + the inquiry form side by side. */
.website-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.website-start__form { display: grid; gap: var(--space-4); align-content: start; }
.website-facts { display: grid; gap: var(--space-3); margin: 0; }
.website-facts > div { display: grid; gap: var(--space-0-5); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.website-facts dt { color: var(--color-text-accent); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.website-facts dd { margin: 0; }
@media (min-width: 64em) { .website-start { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* Closing band. */
.website-closing__inner { max-width: 72rem; }
.website-closing .lead { color: var(--color-text); }
/* Section reveal is opt-in per section (.reveal); bands keep the token colours in both themes. */
.section[data-theme="dark"] .website-eyebrow { color: var(--color-text-accent); }
.section[data-theme="dark"] .website-chips li { background-color: var(--color-surface); }
.section[data-theme="dark"] .card { background-color: var(--color-surface); }
/* Intent pages (Buy · Sell · Cash Offer · Invest): a charcoal page hero, then the light body. */
.website-page-hero { padding-block: var(--space-16); }
.website-page-hero__header { margin-bottom: 0; }
.website-page-hero .lead { color: var(--color-text); }
.website-closing__inner { margin-inline: auto; text-align: center; }
.website-closing__inner .website-eyebrow { justify-content: center; }
.website-closing__actions { justify-content: center; }
.website-footer__columns .website-footer__team { font-family: var(--font-family-display); font-size: var(--text-lg); }
.website-two-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.website-two-ways .section__header { margin-bottom: 0; }
.website-two-ways__photo { border: var(--border-width) solid var(--color-rule-decorative); }
@media (min-width: 64em) { .website-two-ways { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
/* Whole-card property links: the card outlines on focus (components.css); the link itself also
   shows the ring so the indicator is on the focused element (WCAG 2.4.7 check). */
[data-product="site"] .property-card .card__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* Property detail: the listing's own photo above its facts (every listing has one, CLAUDE.md rule 11). */
.website-property-photo { margin: 0; }
.website-property-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-media); }

/* Footer contact links occupy separate rows: give each a usable touch target. */
@layer components {
  .website-footer__about > p > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
  }
}