/* ===========================================================================
   ListwithRandy.com - base stylesheet
   A clean, warm, professional look. Not the final design - enough to make
   the site readable and presentable while content is reviewed.
   =========================================================================== */
 
/* --- Design tokens ------------------------------------------------------- */
:root {
  --ink:        #1f2421;   /* near-black, warm */
  --ink-soft:   #4a514c;   /* body text */
  --paper:      #ffffff;
  --sand:       #f6f3ec;   /* warm off-white section background */
  --sand-deep:  #ebe5d8;
  --gold:       #d8a534;   /* from the logo's sun */
  --gold-deep:  #b8861f;
  --line:       #e2ddd2;   /* hairline borders */
  --shadow:     0 8px 30px rgba(31, 36, 33, 0.10);
 
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
 
  --measure: 1180px;       /* max content width */
}
 
/* --- Reset / base -------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
 
html { scroll-behavior: smooth; }
 
body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
 
img { max-width: 100%; display: block; }
 
a { color: var(--gold-deep); }
a:hover { color: var(--gold); }
 
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 600;
}
 
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }
 
p { margin: 0 0 1.1em; }
 
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 28px;
}
 
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 0.6em;
}
 
/* --- Buttons ------------------------------------------------------------- */
.button {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 2px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.button:hover {
  background: var(--gold-deep);
  color: var(--paper);
  transform: translateY(-1px);
}
.button-large { padding: 16px 36px; font-size: 1.05rem; }
 
/* --- Site header --------------------------------------------------------- */
.site-header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
 
/* Logo - bumped up from 38px to 60px for stronger presence */
.brand-logo { height: 60px; width: auto; }
 
.site-nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
.site-nav a {
  color: #e9e6df;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--gold); }
.site-nav .nav-cta {
  background: var(--gold);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 2px;
}
.site-nav .nav-cta:hover { background: var(--paper); color: var(--ink); }
 
/* Tools dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-trigger::after {
  content: " \25BE";
  font-size: 0.7em;
  vertical-align: middle;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 8px 0;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 0.94rem;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.07); }
 
/* --- Page hero (areas, generic pages) ------------------------------------ */
.page-hero {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}
.page-hero-overlay {
  width: 100%;
  background: linear-gradient(to top, rgba(31,36,33,0.82) 0%, rgba(31,36,33,0.15) 100%);
  padding: 48px 0 36px;
}
.page-hero-overlay .eyebrow { color: var(--gold); }
.page-hero-overlay h1 { color: var(--paper); }
 
.page-header { padding: 56px 0 8px; }
 
/* --- Page body / article typography -------------------------------------- */
.page-body {
  padding: 44px 28px 56px;
  max-width: 820px;
}
.page-body h2 { margin: 1.6em 0 0.5em; }
.page-body h3 { margin: 1.4em 0 0.4em; }
.page-body ul, .page-body ol { margin: 0 0 1.1em 1.4em; }
.page-body li { margin-bottom: 0.4em; }
.page-body blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin: 1.4em 0;
  font-style: italic;
  color: var(--ink);
}
 
.post-hero-image {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 3px;
  margin-top: 8px;
}
.post-header { padding: 56px 0 20px; }
 
/* --- CTA box ------------------------------------------------------------- */
.cta-box {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 38px 40px;
  margin: 20px 0 64px;
  text-align: center;
}
.cta-box h2 { margin-bottom: 0.4em; }
.cta-box p { max-width: 540px; margin: 0 auto 1.4em; }
 
/* --- Home: HERO ---------------------------------------------------------- */
.home-hero {
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.home-hero-overlay {
  width: 100%;
  background: linear-gradient(to right, rgba(31,36,33,0.88) 0%, rgba(31,36,33,0.45) 100%);
  padding: 90px 0;
}
 
/* New wrap class for the hero - widens the text column inside the hero
   so the H1 and intro use more of the available horizontal space */
.home-hero-wrap {
  max-width: 1180px;
}
 
.home-hero h1 {
  color: var(--paper);
  font-size: 4rem;
  max-width: 900px;
  margin-bottom: 0.4em;
  line-height: 1.08;
}
.home-hero-intro {
  color: #e9e6df;
  font-size: 1.25rem;
  max-width: 760px;
  margin-bottom: 1.8em;
  line-height: 1.5;
}
 
/* --- Home: BODY (renders below the hero on white page background) -------- */
.home-body {
  background: var(--paper);
  padding: 64px 0 24px;
}
.home-body .wrap {
  max-width: 880px;
}
.home-body h2 {
  font-size: 2.1rem;
  margin: 0.7em 0 0.35em;
  color: var(--ink);
}
.home-body h2:first-child {
  margin-top: 0;
}
.home-body h3 {
  font-size: 1.3rem;
  margin: 1em 0 0.3em;
  color: var(--ink);
}
.home-body p {
  margin-bottom: 0.9em;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.home-body a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.home-body a:hover {
  border-bottom-color: var(--gold);
}
 
.home-section { padding: 72px 28px; }
.home-section h2 { font-size: 2.3rem; margin-bottom: 0.3em; }
.section-lead { max-width: 600px; margin-bottom: 2em; }
.section-more { margin-top: 2em; font-weight: 600; }
.section-more a { text-decoration: none; }
.home-section-alt { background: var(--sand); }
 
/* --- Area grid ----------------------------------------------------------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.area-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.area-card-image {
  height: 170px;
  background-size: cover;
  background-position: center;
  background-color: var(--sand-deep);
}
.area-card-body { padding: 18px 20px; }
.area-card-body h3 { color: var(--ink); margin: 0; }
 
/* --- Post list ----------------------------------------------------------- */
.post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.post-card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--sand-deep);
}
.post-card-body { padding: 22px 24px; }
.post-card-date {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.5em;
}
.post-card-body h3 { color: var(--ink); margin-bottom: 0.4em; }
.post-card-excerpt { font-size: 0.96rem; margin: 0; }
 
/* --- Archive pages ------------------------------------------------------- */
.archive-page .page-header { padding-bottom: 28px; }
.archive-page .area-grid,
.archive-page .post-list { margin-bottom: 72px; }
 
/* --- Testimonials -------------------------------------------------------- */
.testimonial-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  padding-bottom: 20px;
}
.testimonial {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
}
.testimonial-stars {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial-headline {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.testimonial-quote {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 1.2em;
}
.testimonial-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
}
.testimonial-name { font-weight: 700; color: var(--ink); }
.testimonial-role { color: var(--gold-deep); font-weight: 600; }
.testimonial-source {
  margin-left: auto;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  background: var(--sand-deep);
  padding: 3px 10px;
  border-radius: 2px;
}
 
/* --- Hub pages (For Buyers / For Sellers) -------------------------------- */
.hub-page .page-header { padding-bottom: 20px; }
 
.hub-intro {
  max-width: 760px;
  padding-bottom: 24px;
}
.hub-intro p { margin-bottom: 1.2em; }
 
.hub-section { padding: 16px 28px 28px; }
.hub-section h2 {
  font-size: 1.6rem;
  margin-bottom: 0.7em;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
 
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hub-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.hub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.hub-card h3 {
  color: var(--ink);
  font-size: 1.12rem;
  margin-bottom: 0.4em;
  line-height: 1.25;
}
.hub-card p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
 
/* --- Tools / Calculators ------------------------------------------------- */
.tools-page .page-header { padding-bottom: 24px; }
 
.tools-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 8px;
}
.tools-nav a {
  background: var(--ink);
  color: #e9e6df;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 9px 18px;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.tools-nav a:hover { background: var(--gold-deep); color: var(--paper); }
 
.calc { padding: 52px 0; scroll-margin-top: 90px; }
.calc-alt { background: var(--sand); }
.calc h2 { font-size: 1.8rem; margin-bottom: 0.25em; }
.calc-intro { max-width: 620px; margin-bottom: 1.8em; }
 
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
 
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.calc-inputs input,
.calc-inputs select {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.calc-inputs input:focus,
.calc-inputs select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
  border-color: var(--gold);
}
 
.calc-result {
  background: var(--ink);
  color: #e9e6df;
  border-radius: 4px;
  padding: 32px 30px;
}
.calc-alt .calc-result { background: var(--ink); }
.calc-result-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5em;
}
.calc-result-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.1;
  margin-bottom: 0.6em;
}
.calc-result-value-sm { font-size: 1.7rem; }
.verdict-buy { color: #8fcf9a; }
.verdict-rent { color: #e8c168; }
 
.calc-detail {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 16px;
  margin: 0;
}
.calc-detail > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.calc-detail dt { color: #b4b0a7; font-size: 0.92rem; }
.calc-detail dd {
  margin: 0;
  font-weight: 600;
  color: var(--paper);
  font-size: 0.96rem;
}
 
.calc-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 720px;
  margin-top: 1.8em;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
 
/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #c9c5bc;
  margin-top: 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1fr;
  gap: 36px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.footer-col p { margin-bottom: 0.5em; font-size: 0.96rem; }
.footer-col a { color: #c9c5bc; text-decoration: none; }
.footer-col a:hover { color: var(--gold); }
.footer-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper);
  font-weight: 600;
}
.footer-col-head {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.9em;
}
.footer-nav p { margin-bottom: 0.35em; }

/* Brokerage logo pill - white pill that holds the WestUSA logo on the dark
   footer, preserving the logo's original colors. Sits in the first footer
   column below the brokerage text. */
.footer-brokerage-logo {
  display: inline-block;
  background: var(--paper);
  padding: 10px 14px;
  border-radius: 4px;
  margin-top: 14px;
  line-height: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.footer-brokerage-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.footer-brokerage-logo img {
  height: 44px;
  width: auto;
  display: block;
}
 
/* Designations row (footer) */
.footer-designations {
  padding: 24px 28px 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.designation-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 40px;
}
.designation-row li { margin: 0; }
.designation-row a {
  display: inline-block;
  line-height: 0;
  opacity: 0.78;
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
  filter: grayscale(100%);
}
.designation-row a:hover,
.designation-row a:focus-visible {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-1px);
}
.designation-row img {
  height: 48px;
  width: auto;
  display: block;
}
 
.footer-legal {
  padding-top: 18px;
  padding-bottom: 28px;
}
.footer-legal p { font-size: 0.85rem; margin: 0; color: #8f8b82; }
 
/* ===========================================================================
   About page portrait - floated image with caption, text wraps right and below
   Moved OUT of the 560px media query (where it was incorrectly trapped) so
   the rules apply on desktop. Mobile override is at the bottom of this block.
   =========================================================================== */
.about-portrait-wrap {
  float: left;
  width: 280px;
  max-width: 45%;
  margin: 0.25rem 1.75rem 1rem 0;
}
 
.about-portrait-wrap img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
 
.about-portrait-caption {
  margin: 0.5rem 0 0 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2a2a2a;
  text-align: center;
  letter-spacing: 0.01em;
}
 
/* Clear the float at the end of the article so the footer doesn't overlap */
.generic-page::after {
  content: "";
  display: block;
  clear: both;
}

/* ===========================================================================
   Contact form
   Added: May 31, 2026
   Updated: May 31, 2026 - added [hidden] override so HTML hidden attribute
   works on .checkbox-label elements (the CMA option specifically).
   Styled to match site design system: Fraunces/Source Sans 3, sand background,
   gold accent on focus, ink button. The form lives inside .page-body, so
   typography inherits from there.
   =========================================================================== */
.contact-intro {
  font-size: 1.05rem;
  margin-bottom: 2rem;
  color: var(--ink-soft);
}

.contact-form {
  margin-top: 1.5rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form .form-field {
  margin-bottom: 1.4rem;
}

.contact-form label,
.contact-form legend {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.45rem;
  font-family: var(--font-body);
}

.contact-form .required {
  color: var(--gold-deep);
  font-weight: 700;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
  border-color: var(--gold);
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}

.contact-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.contact-form fieldset legend {
  padding: 0;
}

.contact-form .checkbox-label,
.contact-form .radio-label {
  display: block;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  cursor: pointer;
  padding-left: 1.85rem;
  position: relative;
  line-height: 1.5;
}

.contact-form .checkbox-label input,
.contact-form .radio-label input {
  position: absolute;
  left: 0;
  top: 0.35rem;
  accent-color: var(--gold-deep);
}

.contact-form .cma-option {
  margin-top: 0.4rem;
  margin-left: 1rem;
  padding-left: 1.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Restore the HTML hidden attribute so .checkbox-label[hidden] actually
   hides. Without this, the display: block above wins over the browser's
   default [hidden] { display: none } rule. */
.contact-form [hidden] {
  display: none !important;
}

.contact-form .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .form-submit {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 14px 34px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  margin-top: 0.5rem;
}

.contact-form .form-submit:hover {
  background: var(--gold-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

.contact-confirmation {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px 40px;
  margin: 1.5rem 0 2rem;
  text-align: center;
}

.contact-confirmation h2 {
  margin-bottom: 0.5em;
  color: var(--ink);
}

.contact-confirmation p {
  max-width: 540px;
  margin: 0 auto;
  color: var(--ink-soft);
}
 
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 880px) {
  body { font-size: 17px; }
  h1 { font-size: 2.1rem; }
  .home-hero h1 { font-size: 2.6rem; }
  .home-hero-intro { font-size: 1.1rem; }
  .brand-logo { height: 50px; }
  .header-inner { flex-direction: column; gap: 14px; }
  .site-nav { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .post-list,
  .testimonial-list { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .home-body { padding: 44px 0 16px; }
  .home-body h2 { font-size: 1.7rem; }
}
 
@media (max-width: 560px) {
  .area-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 240px; }
  .home-hero h1 { font-size: 2.1rem; }
  .home-hero-intro { font-size: 1.05rem; }
  .brand-logo { height: 42px; }
  .footer-designations { padding: 20px 16px 18px; }
  .designation-row { gap: 20px 24px; }
  .designation-row img { height: 38px; }
  .footer-brokerage-logo img { height: 38px; }

  /* About portrait - mobile override: full width, centered, no float */
  .about-portrait-wrap {
    float: none;
    width: 100%;
    max-width: 200px;
    margin: 0 auto 1.5rem auto;
  }

  /* Contact form - stack first/last name on narrow screens */
  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}