/* Button — ported from the SRG Compass design system (components/core/Button.jsx) */
.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease,transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,0.12);}
.btn:active{transform:translateY(0) scale(0.97);box-shadow:none;}
.btn:disabled{opacity:0.45;cursor:default;}
.btn:disabled:hover{transform:none;box-shadow:none;}

.btn-sm{padding:8px 16px;font-size:12px;}
.btn-md{padding:11px 22px;font-size:13px;}
.btn-lg{padding:14px 28px;font-size:14px;}

.btn-primary{background:var(--black);color:var(--white);border-color:var(--black);}
.btn-primary:hover{background:#2b2b2b;}

.btn-accent{background:var(--accent-primary);color:var(--white);border-color:var(--accent-primary);}
.btn-accent:hover{background:var(--accent-primary-hover);}

.btn-outline{background:transparent;color:var(--black);border-color:var(--black);}
.btn-outline:hover{background:var(--black);color:var(--white);}

.btn-ghost{background:transparent;color:var(--accent-primary);}
.btn-ghost:hover{background:var(--fog);}

/* Badge — components/core/Badge.jsx */
.badge{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:var(--radius-sm);
}
.badge-blue{background:var(--accent-primary);color:var(--white);}
.badge-green{background:var(--accent-spot);color:var(--white);}
.badge-black{background:var(--black);color:var(--white);}
.badge-outline{background:transparent;color:var(--black);border:1px solid var(--border-default);}

/* Tag — components/core/Tag.jsx (mono eyebrow label) */
.tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  font-weight:400;
}
.tag-ink{color:var(--black);}
.tag-blue{color:var(--accent-primary);}
/* UNUSED. Do not use on a dark ground: the base green is 3.44:1 on --ink and
   fails WCAG AA for normal text. Use --accent-spot-on-dark there. */
.tag-green{color:var(--accent-spot);}
.tag-inverse{color:var(--white);}

/* Card — components/core/Card.jsx (listing card) */
.card{
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  font-family:var(--font-sans);
  transition:box-shadow var(--duration-base) var(--ease-out-expo),transform var(--duration-base) var(--ease-out-expo);
}
.card:hover{box-shadow:var(--shadow-raised);transform:translateY(-3px);}
.card-image{aspect-ratio:4/3;overflow:hidden;background:var(--fog);}
.card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.card:hover .card-image img{transform:scale(1.06);}
.card-body{padding:var(--space-4);}
.card-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);margin-bottom:6px;}
.card-title{font-family:var(--font-serif);font-weight:600;font-size:18px;color:var(--black);margin-bottom:2px;}
.card-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.card-price{font-size:16px;font-weight:700;color:var(--black);}
.card-footer{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-default);}

/* Form fields — components/forms/Input.jsx, Select.jsx */
.field{display:block;font-family:var(--font-sans);width:100%;}
.field-label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block;}
.field-input,.field-select{
  width:100%;
  box-sizing:border-box;
  padding:11px 14px;
  font-size:14px;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease;
}
.field-input:focus,.field-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in oklch,var(--accent-primary) 18%,transparent);}
.field-input.has-error{border-color:#8A2E2E;}
.field-error{font-size:11px;color:#8A2E2E;margin-top:4px;}

/* Skip link — keyboard users land here first, visible only on focus */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:var(--accent-primary);
  color:var(--white);
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  padding:12px 20px;
  text-decoration:none;
}
.skip-link:focus{left:0;}

/* Breadcrumb — mirrors the BreadcrumbList schema on deep pages */
.breadcrumb{
  font-family:var(--font-sans);
  font-size:12px;
  color:var(--text-muted);
  padding:14px 40px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.breadcrumb a{color:var(--text-muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent-primary);text-decoration:underline;}
.breadcrumb span[aria-current]{color:var(--black);font-weight:600;}
.breadcrumb span[aria-hidden]{opacity:0.45;}
@media (max-width:700px){.breadcrumb{padding:12px 20px 0;font-size:11px;}}

/* Review bar — verified counts from Google, Zillow, and Facebook. Visible proof
   only; deliberately not marked up as aggregateRating. */
.reviewbar{
  border-top:1px solid var(--border-default);
  background:var(--fog);
  padding:var(--space-6) var(--space-6);
}
.reviewbar-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--space-4) var(--space-7);
}
.reviewbar-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
/* The item used to be a big number plus a platform label. The counts are no
   longer published (see renderReviewBar), so the platform name is the whole
   item and now has to carry the weight the number used to. Display face at a
   readable size, underlined on hover so it reads as the link it is. */
.reviewbar-item{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1;
  color:var(--black);
  text-decoration:none;
  text-underline-offset:4px;
  transition:color var(--duration-fast) var(--ease-out);
}
.reviewbar-item:hover,
.reviewbar-item:focus-visible{
  color:var(--accent-primary);
  text-decoration:underline;
}
@media (max-width:700px){
  .reviewbar{padding:var(--space-5) var(--space-4);}
  .reviewbar-inner{gap:var(--space-3) var(--space-5);}
}

/* Quick facts — scannable local detail on place pages */
.quickfacts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-4);
  margin:var(--space-6) 0;
  padding:var(--space-5);
  background:var(--fog);
  border-radius:var(--radius-md);
}
.quickfact-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px;
}
.quickfact-value{
  font-family:var(--font-sans);
  font-size:0.9375rem;
  color:var(--black);
  margin:0;
  line-height:1.4;
}

/* Nearby communities — lateral internal links between place pages, which
   previously had none */
.nearby-links{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.nearby-link{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:14px;
  padding:10px 18px;
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  color:var(--black);
  text-decoration:none;
  transition:border-color var(--duration-fast) ease,color var(--duration-fast) ease,transform var(--duration-fast) var(--ease-out);
}
.nearby-link:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px);}

/* FAQ — the same text feeds the FAQPage schema, so what a reader sees and what
   an answer engine extracts never drift apart */
.faq-section{background:var(--fog);}
.faq-item{
  border-top:1px solid var(--border-default);
  padding:var(--space-5) 0;
}
.faq-item:last-child{border-bottom:1px solid var(--border-default);}
.faq-question{
  font-family:var(--font-serif);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--black);
  line-height:var(--leading-heading);
  margin:0 0 var(--space-2);
}
.faq-answer{
  font-family:var(--font-sans);
  font-size:0.9375rem;
  line-height:var(--leading-body);
  color:var(--text-body);
}
.faq-answer p{margin:0;}
.faq-answer a{color:var(--link);}
.faq-answer a:hover{color:var(--link-hover);}

/* ===========================================================================
   LISTINGS
   Built entirely on existing tokens. No new colors, fonts, or spacing values.
   Gallery reuses .slider; cards reuse .card; badges reuse .badge.
   =========================================================================== */

/* --- gallery --- */
.listing-gallery{background:var(--ink);padding:0;}
.listing-slider{position:relative;max-width:1100px;margin:0 auto;}
.listing-slider-frame{position:relative;aspect-ratio:3/2;background:var(--ink);overflow:hidden;}
.listing-slide{position:absolute;inset:0;}
.listing-slide img{width:100%;height:100%;object-fit:cover;}
.listing-slider .slider-arrow-prev{left:16px;}
.listing-slider .slider-arrow-next{right:16px;}
.listing-counter{
  position:absolute;bottom:16px;right:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  color:var(--white);background:rgba(0,0,0,0.55);
  padding:6px 10px;border-radius:var(--radius-pill);
}
.listing-dots{padding:16px 0;margin-top:0;background:var(--ink);}
.listing-dots .slider-dot{background:rgba(255,255,255,0.3);}
.listing-dots .slider-dot.is-active{background:var(--white);}

/* --- header --- */
.listing-head{padding:var(--space-7) var(--space-6) var(--space-5);}
.listing-head-inner{max-width:1100px;margin:0 auto;}
.listing-badge{margin-bottom:var(--space-3);}
.listing-address{
  font-family:var(--font-display);font-size:var(--text-h1);
  line-height:var(--leading-heading);color:var(--text-heading);margin:0;
}
.listing-locality{
  font-family:var(--font-sans);font-size:var(--text-body-size);
  color:var(--text-muted);margin:var(--space-1) 0 0;
}
.listing-price{
  font-family:var(--font-display);font-size:1.75rem;
  color:var(--accent-primary);margin:var(--space-4) 0 0;
}
.listing-price-label{
  display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-1);
}
.listing-price-withheld{font-size:1.25rem;color:var(--text-muted);font-style:italic;}
.listing-status-note{
  font-family:var(--font-sans);font-size:var(--text-caption);
  color:var(--text-muted);margin:var(--space-2) 0 0;
}
.listing-stats{
  display:flex;flex-wrap:wrap;gap:var(--space-6);
  margin:var(--space-5) 0 0;padding:var(--space-4) 0 0;
  border-top:1px solid var(--border-default);
}
.listing-stat-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-1);
}
.listing-stat-value{
  font-family:var(--font-serif);font-size:1.25rem;font-weight:600;
  color:var(--text-heading);margin:0;
}

/* --- body --- */
.listing-body{padding-top:var(--space-5);}
.listing-body-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 320px;gap:var(--space-8);align-items:start;
}
.listing-section-title{font-size:1.5rem;}
.listing-body-main p{
  font-family:var(--font-sans);font-size:var(--text-body-size);
  line-height:var(--leading-body);color:var(--text-body);margin:0 0 var(--space-4);
}
.listing-media-links{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0;}
.listing-details{margin-top:var(--space-5);}

/* --- agent card --- */
.listing-body-side{position:sticky;top:var(--space-5);}
.listing-agents{
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  padding:var(--space-5);background:var(--surface-card);
}
.listing-agents-heading{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-4);font-weight:400;
}
.listing-agent{display:flex;gap:var(--space-4);align-items:center;}
.listing-agent + .listing-agent{
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border-default);
}
.listing-agent-photo{flex:0 0 auto;display:block;line-height:0;}
.listing-agent-photo img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--fog);
}
.listing-agent-primary .listing-agent-photo img{width:88px;height:88px;}
.listing-agent-name{
  font-family:var(--font-serif);font-weight:600;font-size:1.0625rem;
  color:var(--text-heading);display:block;
}
.listing-agent-name:hover{color:var(--accent-primary);}
.listing-agent-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent-primary);margin:2px 0 var(--space-2);
}
.listing-agent-contact{
  font-family:var(--font-sans);font-size:var(--text-caption);
  line-height:1.7;color:var(--text-body);
}
.listing-agent-contact a{color:var(--text-body);}
.listing-agent-contact a:hover{color:var(--accent-primary);}
.listing-showing-btn{display:block;text-align:center;margin-top:var(--space-4);}

/* --- index --- */
.listing-index-section{padding-top:var(--space-7);padding-bottom:var(--space-7);}
.listing-index-section + .listing-index-section{padding-top:0;}
.listing-index-head{max-width:1100px;margin:0 auto var(--space-5);}
.listing-index-head .section-title{margin-bottom:var(--space-2);}
.listing-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
}
.listing-card{display:block;text-decoration:none;position:relative;}
.listing-card .card-image{position:relative;}
.listing-card .listing-badge{
  position:absolute;top:var(--space-3);left:var(--space-3);margin:0;z-index:2;
}
.listing-card .card-price{margin-top:var(--space-2);}
.card-price-withheld{color:var(--text-muted);font-style:italic;font-weight:400;}
.listing-card-stats{
  font-family:var(--font-sans);font-size:var(--text-caption);color:var(--text-muted);
}

/* --- keyboard focus. Visible, not just implied. --- */
.listing-card:focus-visible,
.listing-agent-name:focus-visible,
.listing-showing-btn:focus-visible{
  outline:2px solid var(--accent-primary);outline-offset:3px;
}
.listing-slider .slider-arrow:focus-visible,
.listing-dots .slider-dot:focus-visible{
  outline:2px solid var(--white);outline-offset:2px;
}

/* --- responsive --- */
@media (max-width:1024px){
  .listing-body-grid{grid-template-columns:1fr;gap:var(--space-6);}
  .listing-body-side{position:static;}
  .listing-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .listing-head{padding:var(--space-5) var(--space-4) var(--space-4);}
  .listing-address{font-size:1.5rem;}
  .listing-price{font-size:1.375rem;}
  .listing-stats{gap:var(--space-5);}
  .listing-slider-frame{aspect-ratio:4/3;}
  .listing-slider .slider-arrow{display:flex;width:36px;height:36px;}
  .listing-grid{grid-template-columns:1fr;gap:var(--space-4);}
  .listing-index-head{padding:0 var(--space-4);}
}

/* --- sold treatment ---
   A closed listing keeps its URL and its gallery forever, so it needs to read as
   sold at a glance rather than after the reader gets to the badge. The photos
   are dimmed slightly and carry a standing mark. */
.listing-gallery-sold .listing-slide img{filter:saturate(0.55) brightness(0.82);}
.listing-sold-mark{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.listing-sold-mark span{
  font-family:var(--font-display);
  font-size:clamp(2rem,6vw,3.5rem);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--white);
  border:3px solid var(--white);
  border-radius:var(--radius-sm);
  padding:0.25em 0.7em;
  background:rgba(0,0,0,0.28);
  transform:rotate(-4deg);
}
.listing-price-sold{color:var(--text-muted);}

/* ===========================================================================
   PHASE 0 SHARED COMPONENTS
   Rendered by build/components.js. See docs/SITE-AUDIT.md section 8.
   =========================================================================== */

/* StarRating - components.starRating()
   The stars are inline SVG, so they inherit nothing and need no icon font.
   Sizing is set per-star as a width/height attribute; the wrapper only handles
   alignment and the gap between them. */
.star-rating{display:inline-flex;align-items:center;vertical-align:middle;}
.star-rating .star{display:block;flex:none;}
.star-rating-sm{gap:1px;}
.star-rating-md{gap:2px;}
.star-rating-lg{gap:3px;}

/* FamilyOfSitesNote - components.familyOfSitesNote()
   Deliberately quiet. It sits near the bottom of a page's main content and
   should read as a footnote, not as a call to action: muted, small, mono, with
   a rule above it to separate it from the copy it follows. */
.family-note{
  max-width:800px;
  margin:48px auto 0;
  padding:20px 56px 0;
  border-top:1px solid var(--border-default);
}
.family-note p{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:var(--tracking-label);
  color:var(--text-muted);
}
.family-note a{color:var(--link);}
.family-note a:hover{color:var(--link-hover);}

@media (max-width:720px){
  .family-note{padding-left:24px;padding-right:24px;}
}

/* DomainEyebrow - components.domainEyebrow()
   The element itself is .page-hero-kicker, already styled in assets/style.css
   line 277. It changed from a <div> to a <p> in Phase 0; this reset keeps the
   paragraph from inheriting body margins and looking different to the div it
   replaced. */
p.page-hero-kicker{margin-top:0;}

/* ===========================================================================
   PHASE 1 HOMEPAGE COMPONENTS
   =========================================================================== */

/* Development marketing band.
   Distinct from every other homepage section on purpose: it addresses a
   different audience (developers, not buyers or sellers), so it gets its own
   ground. Inverted, like the testimonial band above it, but split into a copy
   column and an evidence column rather than centred, which is what stops the
   two dark bands reading as one long stretch.

   Two columns at desktop, stacked at tablet and below. The evidence column
   holds the chips; it is deliberately the narrower of the two, because the
   chips are scanned rather than read. */
.devband{background:var(--infinity-blue);padding:80px 56px;}
.devband-inner{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;
}
.devband-eyebrow{color:var(--white);opacity:0.65;margin-bottom:14px;}
.devband-title{
  font-family:var(--font-display);font-size:34px;line-height:var(--leading-tight);
  color:var(--white);margin:0 0 18px;
}
.devband-body{
  font-family:var(--font-sans);font-size:16px;line-height:var(--leading-body);
  color:var(--white);opacity:0.85;margin:0 0 28px;max-width:52ch;
}

/* Selected-experience chips.
   Each is a small card, not a pill: the outcome line is the reason the chip
   exists, and a pill has nowhere to put it. Left rule in the accent green ties
   them to the testimonial cards, which use the same device. */
.devband-work{display:flex;flex-direction:column;gap:16px;}
.devband-chip{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-left:3px solid var(--chimichurri-green);
  border-radius:var(--radius-sm);
  padding:18px 20px;
}
.devband-chip-name{
  font-family:var(--font-display);font-size:20px;color:var(--white);margin-bottom:6px;
}
.devband-chip-detail{
  font-family:var(--font-sans);font-size:13px;line-height:1.4;
  color:var(--white);opacity:0.72;margin-bottom:12px;
}
/* The status is the thing a developer is scanning for, so it is set in the mono
   face at label scale and given a boxed treatment: it reads as a stamp rather
   than as another line of copy. */
.devband-chip-status{
  display:inline-block;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:4px 9px;border-radius:2px;
}
.devband-chip-status-soldout{background:var(--chimichurri-green);color:var(--white);}
/* Past work is stated, not celebrated. Outline rather than filled, so it cannot
   be mistaken at a glance for a current engagement. */
.devband-chip-status-past{
  background:transparent;color:var(--white);opacity:0.8;
  border:1px solid rgba(255,255,255,0.4);
}

@media (max-width:1024px){
  .devband{padding:64px 40px;}
  .devband-inner{grid-template-columns:1fr;gap:36px;}
  .devband-title{font-size:30px;}
}

@media (max-width:768px){
  .devband{padding:56px 20px;}
  .devband-title{font-size:26px;}
  .devband-body{font-size:15px;}
}

/* Button variant for the dark blue bands.
   .btn-accent fills with --accent-primary, which IS the infinity blue those
   bands are painted in, so an accent button placed on one disappears entirely.
   This is the filled button to use there: white ground, ink text, maximum
   contrast against the blue, and it does not compete with the green status
   chips the way a green button would. */
.btn-on-dark{background:var(--white);color:var(--ink);border-color:var(--white);}
.btn-on-dark:hover{background:var(--fog);color:var(--black);}

/* ===========================================================================
   PHASE 2: CONDO BUILDING LIST
   Used on /neighborhoods/downtown-austin. A two-column list of buildings, each
   a heading plus one paragraph of what the building is actually like to own.
   =========================================================================== */

/* Two columns at desktop: fourteen buildings in one column is a very long
   scroll, and each entry is short enough to read as a scannable card. The rule
   on the left ties each entry to the section without boxing it, which would
   make fourteen boxes in a row look like a pricing table. */
.building-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px 40px;
  margin-top:28px;
}
.building{
  border-left:2px solid var(--border-default);
  padding-left:18px;
}
.building-name{
  font-family:var(--font-display);
  font-size:20px;
  color:var(--text-heading);
  margin:0 0 8px;
}
.building-body{
  font-family:var(--font-sans);
  font-size:15px;
  line-height:var(--leading-body);
  color:var(--text-body);
  margin:0;
}

@media (max-width:900px){
  .building-list{grid-template-columns:1fr;gap:24px;}
}

/* Last updated line.
   Deliberately quiet and set at the end of a page's main content: it is
   provenance, not a headline. Mono at label scale, muted, with the date itself
   slightly stronger than the label so the eye lands on the thing that matters. */
.last-updated{
  max-width:800px;
  margin:40px auto 0;
  padding:16px 56px 0;
  border-top:1px solid var(--border-default);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.last-updated time{color:var(--text-body);}

@media (max-width:720px){
  .last-updated{padding-left:24px;padding-right:24px;}
}

/* ===========================================================================
   PHASE 4: BEST FOR COMPARISON
   The comparison layer on /neighborhoods. Seven blocks, each a heading, a
   standalone lead sentence, and a list of specific recommendations.
   =========================================================================== */

.bestfor{margin-top:8px;}

/* Each block is separated by a rule rather than boxed. Seven boxes stacked
   would read as a pricing table; seven rules read as a document. */
.bestfor-block{
  padding:28px 0;
  border-top:1px solid var(--border-default);
}
.bestfor-block:first-child{border-top:none;padding-top:12px;}

.bestfor-title{
  font-family:var(--font-display);
  font-size:24px;
  color:var(--text-heading);
  margin:0 0 12px;
  /* Anchored, so the subsections can be linked to directly. Offset so a jump
     does not land the heading under the sticky header. */
  scroll-margin-top:24px;
}

/* The lead sentence is the one written to survive being lifted out of context,
   so it is set larger and in the serif to mark it as the answer rather than
   as an introduction to the list. */
.bestfor-lead{
  font-family:var(--font-serif);
  font-size:18px;
  line-height:var(--leading-heading);
  color:var(--text-heading);
  margin:0 0 16px;
}

.bestfor-list{
  margin:0;
  padding-left:20px;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:var(--leading-body);
  color:var(--text-body);
}
.bestfor-list li{margin-bottom:8px;}
.bestfor-list li:last-child{margin-bottom:0;}

/* The schools caveat. Quieter than the list it follows, because it is a
   disclaimer rather than a recommendation, but it has to be readable. */
.bestfor-note{
  margin:16px 0 0;
  padding-left:14px;
  border-left:2px solid var(--border-default);
  font-family:var(--font-sans);
  font-size:13px;
  line-height:var(--leading-body);
  color:var(--text-muted);
}

@media (max-width:768px){
  .bestfor-title{font-size:21px;}
  .bestfor-lead{font-size:17px;}
  .bestfor-block{padding:22px 0;}
}

/* ===========================================================================
   PHASE 5
   =========================================================================== */

/* The dated ranking line in the /jeffrey-grant hero. Replaces the old
   "Top Realtor in Austin" superlative, so it is styled to carry the same visual
   weight the boast did: a rule, mono, and enough space to read as a claim
   rather than a caption. */
.hero-ranking{
  margin:14px 0 0;
  padding-left:14px;
  border-left:2px solid var(--chimichurri-green);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:var(--tracking-label);
  color:var(--white);
  opacity:0.92;
}

/* Rankings by year. The year is set apart so a reader can scan the years
   without reading the claims, which is the whole reason the ranking is stored
   as a history. */
.record-list{list-style:none;margin:20px 0 0;padding:0;}
.record-line{
  display:flex;gap:16px;align-items:baseline;
  padding:12px 0;
  border-top:1px solid var(--border-default);
}
.record-year{
  flex:none;width:56px;
  font-family:var(--font-mono);font-size:13px;
  color:var(--accent-primary);
}
.record-claim{
  font-family:var(--font-sans);font-size:15px;
  line-height:var(--leading-body);color:var(--text-body);
}
.credential-list li{margin-bottom:8px;}

/* Areas served, grouped by category. */
.areas-served{margin-top:20px;}
.areas-group{margin-bottom:24px;}
.areas-group-title{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);margin:0 0 10px;
}

/* Compass platform figures.
   Set apart from the rest of the page on purpose: these are somebody else's
   numbers and the design should not let them blend into SR Group's own claims.
   The attribution line below is part of the component, not decoration. */
.platform-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border-default);
  border:1px solid var(--border-default);
  margin-top:24px;
}
.platform-stat{background:var(--white);padding:24px 18px;text-align:center;}
.platform-stat-value{
  font-family:var(--font-display);font-size:30px;
  color:var(--accent-primary);line-height:1;margin-bottom:8px;
}
.platform-stat-label{
  font-family:var(--font-sans);font-size:13px;
  line-height:1.4;color:var(--text-body);
}
.platform-attribution{
  margin:12px 0 0;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);color:var(--text-muted);
}

/* Selected experience project cards. */
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.project-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-left:3px solid var(--chimichurri-green);
  border-radius:var(--radius-sm);
  padding:24px;
}
.project-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:8px;
}
.project-card-name{font-family:var(--font-display);font-size:22px;color:var(--white);margin:0;}
.project-card-meta{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--white);opacity:0.65;margin-bottom:14px;
}
.project-card-body{
  font-family:var(--font-sans);font-size:15px;
  line-height:var(--leading-body);color:var(--white);opacity:0.88;margin:0;
}
/* The "no longer represents" line. Deliberately not styled as a footnote: it is
   a correction to an impression the card might otherwise leave. */
.project-card-note{
  margin:14px 0 0;padding:10px 12px;
  background:rgba(255,255,255,0.07);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:13px;
  color:var(--white);opacity:0.8;
}
.project-card-links{margin-top:16px;}
.project-card-links a{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--white);opacity:0.75;text-decoration:underline;
}
.project-card-links a:hover{opacity:1;color:var(--white);}

/* Join Us pillars and the disqualification block. */
.join-pillar{padding:22px 0;border-top:1px solid var(--border-default);}
.join-pillar:first-of-type{border-top:none;}
.join-pillar-title{font-family:var(--font-display);font-size:22px;color:var(--text-heading);margin:0 0 10px;}
.join-nofit{margin-top:24px;}
.join-nofit-item{
  padding:18px 0 18px 18px;
  border-left:2px solid var(--border-default);
  margin-bottom:16px;
}
.join-nofit-title{font-family:var(--font-display);font-size:19px;color:var(--text-heading);margin:0 0 8px;}

/* Domain directory. */
.domain-directory{margin-top:8px;}
.domain-group{margin-bottom:44px;}
.domain-count{
  font-family:var(--font-mono);font-size:13px;
  color:var(--text-muted);vertical-align:middle;
}
.domain-list{list-style:none;margin:20px 0 0;padding:0;}
.domain-row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--border-default);
}
.domain-name{
  font-family:var(--font-mono);font-size:13px;
  color:var(--text-heading);flex:none;
}
.domain-arrow{color:var(--text-muted);flex:none;}
.domain-target{font-family:var(--font-sans);font-size:14px;}
.domain-pending{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);
  border:1px solid var(--border-default);border-radius:2px;padding:2px 6px;
}
.domain-note{
  flex-basis:100%;
  font-family:var(--font-sans);font-size:13px;
  line-height:1.45;color:var(--text-muted);
}

@media (max-width:1024px){
  .platform-stats{grid-template-columns:repeat(2,1fr);}
  .project-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .platform-stats{grid-template-columns:1fr;}
  .platform-stat-value{font-size:26px;}
  .join-pillar-title{font-size:20px;}
  .record-line{flex-direction:column;gap:4px;}
  .record-year{width:auto;}
}


/* Drive times reuse the ranking record layout, but the left column holds
   "1 hour 32 minutes" rather than a four-digit year, so it needs room. The
   mobile reset repeats here because this selector outranks the bare
   .record-year rule inside the 768px media query. */
.drivetimes .record-year{width:150px;}
@media (max-width:768px){
  .drivetimes .record-year{width:auto;}
}