/* ── Shindler Group RE — site.css ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #0B1C32;
  --navy-light: #1A2E4A;
  --orange: #E87722;
  --orange-dark: #d06a1d;
  --sand: #FAF6F1;
  --cream: #F5F0E8;
  --white: #ffffff;
  --text: #3a3f4a;
  --text-light: #6b7280;
  --border: rgba(11, 28, 50, 0.10);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-weight: 300;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Site Header ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(11, 28, 50, 0.06); }
.site-header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 100px;
}
.site-logo {
  text-decoration: none; display: flex; flex-direction: column;
}
.site-logo-main {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--navy); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1;
}
.site-logo-sub {
  font-family: var(--sans); font-size: 9px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--orange); text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--text-light); text-decoration: none; transition: color 0.2s;
  position: relative;
}
.site-nav a:hover, .site-nav a.active { color: var(--navy); }
.site-nav a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--orange);
}
.site-nav .nav-cta {
  background: var(--orange); color: var(--white); padding: 9px 20px;
  border-radius: 2px; font-weight: 500; letter-spacing: 0.06em; font-size: 12px;
  text-transform: uppercase;
}
.site-nav .nav-cta:hover { background: var(--orange-dark); }
.site-nav .nav-cta::after { display: none; }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; transition: all 0.2s; }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white); flex-direction: column; padding: 20px 24px;
    border-bottom: 1px solid var(--border); gap: 16px;
    box-shadow: 0 8px 30px rgba(11, 28, 50, 0.1);
    z-index: 100;
  }
  body.nav-open .site-nav { display: flex; }
  body.nav-open .site-nav a { display: block; }
  .site-nav a.active::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Streamlined site additions (Nov 2026)
   Uses the design tokens defined in :root above.
   ═══════════════════════════════════════════════════════════════════ */

/* Site nav — Seller Dashboard link (subtler than CTA) */
.site-nav-seller {
  font-size: 12px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--text-light); text-decoration: none;
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 2px;
  transition: all 0.2s;
}
.site-nav-seller:hover { color: var(--navy); border-color: var(--navy); }
.site-nav-seller::after { display: none !important; }

/* ── Hero (used on all pages) ── */
.hero { padding: 96px 24px 80px; background: var(--white); }
.hero-home { padding: 120px 24px 100px; }
.hero-inner-page { padding: 80px 24px 64px; }
.hero-inner { max-width: 900px; margin: 0 auto; text-align: left; }
.hero-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 20px;
}
.hero-headline {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(38px, 6vw, 64px); line-height: 1.1; margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.hero-sub, .hero-body {
  font-size: 20px; line-height: 1.6; color: var(--text);
  max-width: 720px; font-weight: 300;
}
.hero-body + .hero-body {
  margin-top: 1.2em;
}
.hero-cta-row {
  margin-top: 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.hero-cta-secondary {
  font-size: 14px; color: var(--text-light); font-weight: 400;
}

/* ── Section (repeating block used on Home, About, etc.) ── */
.section { padding: 80px 24px; background: var(--white); }
.section-alt { background: var(--sand); }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-inner-narrow { max-width: 780px; margin: 0 auto; }
.section-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
}
.section-headline {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(28px, 4vw, 42px); line-height: 1.15;
  margin-bottom: 24px; letter-spacing: -0.005em;
}
.section-body {
  font-size: 17px; line-height: 1.75; color: var(--text);
  font-weight: 300; margin-bottom: 20px;
}
.section-link {
  display: inline-block; margin-top: 16px;
  color: var(--orange); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  transition: color 0.2s;
}
.section-link:hover { color: var(--orange-dark); }

/* ── Buttons ── */
.btn {
  display: inline-block; padding: 14px 32px; border-radius: 2px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: all 0.2s; cursor: pointer; border: none; text-align: center;
  font-family: var(--sans);
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline {
  background: transparent; color: var(--navy); border: 1px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-large { padding: 18px 40px; font-size: 14px; }

/* ── About services grid ── */
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px; margin-top: 32px;
}
.service-item { }
.service-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 22px; line-height: 1.3; margin-bottom: 10px;
}
.service-desc {
  font-size: 15px; line-height: 1.7; color: var(--text); font-weight: 300;
}
.credentials-line {
  font-size: 14px; color: var(--text-light); letter-spacing: 0.02em;
}

/* ── Insights / placeholder ── */
.insights-cards { margin: 32px 0; }
.insight-card-placeholder, .insights-placeholder {
  background: var(--sand); border-radius: 4px;
  padding: 48px 32px; text-align: center;
  border: 1px dashed var(--border);
}
.placeholder-note { color: var(--text-light); font-size: 15px; font-style: italic; }
.placeholder-headline {
  font-family: var(--serif); font-size: 28px; color: var(--navy);
  margin-bottom: 12px;
}
.placeholder-body {
  color: var(--text); font-size: 16px; line-height: 1.7; max-width: 520px;
  margin: 0 auto 24px;
}

/* ── Landlord Intel topics ── */
.intel-topics {
  margin-top: 40px; display: grid; gap: 32px;
}
.intel-topic {
  padding: 28px; background: var(--sand); border-radius: 4px;
  border-left: 3px solid var(--orange);
}
.intel-topic-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 22px; margin-bottom: 10px;
}
.intel-topic-summary {
  font-size: 15px; line-height: 1.75; color: var(--text); font-weight: 300;
}

/* ── CTA section (bottom of most pages) ── */
.cta-section {
  padding: 80px 24px; background: var(--navy); color: var(--white);
}
.cta-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
}
.cta-headline {
  font-family: var(--serif); font-weight: 400; color: var(--white);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin-bottom: 16px;
}
.cta-sub {
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.85);
  font-weight: 300; margin-bottom: 32px;
}
.cta-section .btn-primary:hover { background: var(--orange-dark); }
.cta-section .btn-outline {
  color: var(--white); border-color: rgba(255,255,255,0.4);
}
.cta-section .btn-outline:hover { background: var(--white); color: var(--navy); }

/* ── Contact details block ── */
.contact-details {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-bottom: 56px;
  padding-bottom: 40px; border-bottom: 1px solid var(--border);
}
.contact-detail-item { }
.contact-detail-label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 8px;
}
.contact-detail-value {
  font-size: 15px; color: var(--navy); font-weight: 400;
}
.contact-detail-value a { color: var(--navy); text-decoration: none; }
.contact-detail-value a:hover { color: var(--orange); }

/* ── Forms ── */
.contact-form-wrap { }
.form-heading {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: 32px; margin-bottom: 12px;
}
.form-intro {
  font-size: 16px; color: var(--text); font-weight: 300;
  margin-bottom: 32px;
}
.contact-form {
  display: grid; gap: 20px;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.form-field {
  display: flex; flex-direction: column; gap: 6px;
}
.form-field label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light);
}
.field-optional {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--text-light); font-size: 11px;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 2px; font-family: var(--sans); font-size: 15px;
  color: var(--navy); background: var(--white);
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--orange);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-trust-line {
  font-size: 13px; color: var(--text-light); font-style: italic;
  margin-top: 8px;
}

/* ── Questions page ── */
.q-anchor-nav {
  margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.q-anchor-nav a {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-light); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: all 0.2s;
}
.q-anchor-nav a:hover { color: var(--orange); border-color: var(--orange); }

.q-audience-section {
  padding: 64px 24px; border-top: 1px solid var(--border);
}
.q-audience-section:nth-of-type(even) { background: var(--sand); }
.q-audience-content { margin-top: 24px; }
.q-group-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 22px; margin: 32px 0 12px;
}
.q-group-heading:first-child { margin-top: 8px; }
.q-list {
  list-style: none; padding: 0; margin: 0;
}
.q-item {
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 16px; line-height: 1.5; color: var(--navy);
  font-weight: 400;
}
.q-item:last-child { border-bottom: none; }
.q-item::before {
  content: '→'; color: var(--orange); margin-right: 12px; font-weight: 500;
}
.q-text { color: var(--navy); }

/* ── Footer ── */
.site-footer {
  background: var(--navy); color: rgba(255,255,255,0.7);
  padding: 64px 24px 32px; margin-top: 0;
}
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px;
}
.site-footer-brand {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.footer-logo-main {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--white); letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-logo-sub {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; color: var(--orange); text-transform: uppercase;
}
.footer-tagline {
  font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 300;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%;
}
.footer-links a {
  color: rgba(255,255,255,0.7); text-decoration: none;
  font-size: 13px; letter-spacing: 0.04em; transition: color 0.2s;
}
.footer-links a:hover { color: var(--orange); }
.footer-details {
  font-size: 12px; line-height: 1.8; color: rgba(255,255,255,0.6);
}
.footer-copyright { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,0.4); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 12px; }
  .site-nav .nav-cta { padding: 8px 14px; font-size: 11px; }
  .site-nav-seller { display: none; } /* hide on mobile top nav, add link in mobile menu later */

  .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-details { grid-template-columns: 1fr; gap: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .q-anchor-nav { gap: 12px; }
}
@media (max-width: 640px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .nav-toggle { display: block; }
  .hero { padding: 64px 20px 48px; }
  .hero-home { padding: 80px 20px 60px; }
  .section, .cta-section, .q-audience-section { padding: 56px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.1 additions — icon grids + rich footer
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inline icons (universal styling) ── */
.icon {
  display: inline-block;
  width: 24px; height: 24px;
  vertical-align: middle;
}

/* ── Home page: Services icon grid ── */
.section-intro-body { max-width: 720px; margin-bottom: 48px; }
.services-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  margin-top: 24px;
}
.service-card {
  background: var(--white); padding: 32px 20px 28px;
  border: 1px solid var(--border); border-radius: 4px;
  text-align: center; transition: all 0.25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(11, 28, 50, 0.08);
  border-color: rgba(232, 119, 34, 0.3);
}
.service-icon-wrap {
  width: 64px; height: 64px; margin: 0 auto 20px;
  background: var(--navy); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.service-icon-wrap .icon { width: 28px; height: 28px; }
.service-card:hover .service-icon-wrap { background: var(--orange); }
.service-card-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 20px; line-height: 1.3; margin-bottom: 10px;
}
.service-card-desc {
  font-size: 14px; line-height: 1.65; color: var(--text);
  font-weight: 300;
}

@media (max-width: 1000px) {
  .services-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .services-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card { padding: 24px 16px 20px; }
  .service-icon-wrap { width: 52px; height: 52px; margin-bottom: 14px; }
  .service-icon-wrap .icon { width: 24px; height: 24px; }
}

/* ── Landlord Intel: icons per topic ── */
.intel-topic {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 32px; background: var(--sand); border-radius: 4px;
  border-left: 3px solid var(--orange);
}
.intel-topic-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--white); color: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(11, 28, 50, 0.06);
}
.intel-topic-icon .icon { width: 26px; height: 26px; }
.intel-topic-body { flex: 1; }
.intel-topic-body .intel-topic-heading { margin-bottom: 8px; }

@media (max-width: 640px) {
  .intel-topic { flex-direction: column; gap: 16px; padding: 24px; }
  .intel-topic-icon { width: 48px; height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Rich 3-column footer (replaces earlier centered footer)
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--navy); color: rgba(255,255,255,0.75);
  padding: 72px 24px 32px;
}
.site-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 3fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Brand column (left) */
.site-footer-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.footer-logo-main {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--white); letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.2;
}
.footer-logo-sub {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; color: var(--orange); text-transform: uppercase;
}
.footer-tagline {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.7); font-weight: 300;
  margin-top: 20px; max-width: 340px;
}

/* Right side: 3-column grid */
.footer-columns {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.footer-col-heading {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); margin-bottom: 18px;
}
.footer-col-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col-list li {
  font-size: 14px; line-height: 1.5; font-weight: 300;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; gap: 10px;
}
.footer-col-list li a {
  color: rgba(255,255,255,0.7); text-decoration: none;
  transition: color 0.2s;
  display: flex; align-items: center; gap: 10px;
}
.footer-col-list li a:hover { color: var(--orange); }
.footer-inline-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--orange); flex-shrink: 0;
}
.footer-inline-icon .icon { width: 16px; height: 16px; stroke-width: 1.75; }

/* Bottom legal strip */
.footer-legal {
  grid-column: 1 / -1;
  padding-top: 24px;
  font-size: 12px; line-height: 1.7;
  color: rgba(255,255,255,0.55);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-legal .footer-copyright {
  color: rgba(255,255,255,0.45); font-size: 11px;
}

@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 48px; }
  .footer-columns { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .site-footer { padding: 56px 20px 32px; }
  .footer-columns { grid-template-columns: 1fr; gap: 36px; }
  .footer-legal { flex-direction: column; gap: 8px; }
}

/* Override earlier .footer-links / .footer-details rules that no longer apply */
.footer-links, .footer-details { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   v1.2 additions — headshot layouts + testimonials
   ═══════════════════════════════════════════════════════════════════ */

/* ── About page hero: bio + headshot side by side ── */
.hero-about { padding-bottom: 88px; }
.about-hero-row {
  display: grid; grid-template-columns: 1.7fr 1fr;
  gap: 56px; align-items: center;
  max-width: 1160px;
}
.about-hero-body { }
.about-hero-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(11, 28, 50, 0.15);
}

@media (max-width: 900px) {
  .about-hero-row { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-photo { max-width: 320px; }
}
@media (max-width: 640px) {
  .hero-about { padding-bottom: 56px; }
  .about-hero-photo { max-width: 260px; }
}

/* ── Home page About teaser: circular headshot + text ── */
.section-about-teaser { }
.about-teaser-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: 48px; align-items: center;
}
.about-teaser-photo { flex-shrink: 0; }
.about-teaser-photo img {
  width: 280px; height: 280px;
  border-radius: 50%; object-fit: cover;
  display: block;
  box-shadow: 0 8px 32px rgba(11, 28, 50, 0.12);
}

@media (max-width: 800px) {
  .about-teaser-row {
    grid-template-columns: 1fr; gap: 32px;
    text-align: center; justify-items: center;
  }
  .about-teaser-photo img { width: 200px; height: 200px; }
}

/* ── Testimonials section ── */
.section-testimonials {
  background: var(--navy); color: var(--white);
  padding: 80px 24px;
}
.section-testimonials .section-eyebrow { color: var(--orange); }
.section-testimonials .section-headline { color: var(--white); }

.testimonials-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 32px; margin-top: 40px; max-width: 1100px;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--orange);
  padding: 32px 32px 28px;
  border-radius: 0 4px 4px 0;
  margin: 0;
  display: flex; flex-direction: column;
  transition: background 0.25s;
}
.testimonial-card:hover { background: rgba(255, 255, 255, 0.07); }

.testimonial-quote {
  font-family: var(--serif);
  font-size: 18px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400; font-style: italic;
  margin-bottom: 24px; flex: 1;
  position: relative;
}
.testimonial-quote::before {
  content: '\201C';
  font-size: 56px; line-height: 0;
  color: var(--orange);
  position: absolute; top: 18px; left: -10px;
  opacity: 0.35;
}

.testimonial-source {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.testimonial-name {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--white);
  text-transform: uppercase;
}
.testimonial-detail {
  font-size: 12px; font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }
  .testimonial-card { padding: 28px 24px 24px; }
  .testimonial-quote { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.3 additions — square headshot + orange emphasis + logo
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header logo (SVG replaces text wordmark) ── */
.site-logo {
  display: flex; align-items: center;
  height: 100%;
}
.site-logo img {
  height: 140px; width: auto;
  display: block;
  transition: opacity 0.2s;
}
.site-logo:hover img { opacity: 0.85; }
/* Hide the legacy text-based logo classes if any HTML somewhere still ships them */
.site-logo-main, .site-logo-sub { display: none; }

@media (max-width: 640px) {
  .site-logo img { height: 100px; }
}

/* ── Footer logo (white SVG) ── */
.footer-logo-img {
  height: 60px; width: auto;
  display: block; margin-bottom: 4px;
}
/* Legacy footer text-logo classes hidden */
.footer-logo-main, .footer-logo-sub { display: none; }

@media (max-width: 640px) {
  .footer-logo-img { height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Home page: square headshot (was circular)
   ═══════════════════════════════════════════════════════════════════ */
.about-teaser-photo img {
  width: 320px; height: auto;
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(11, 28, 50, 0.15);
  border: 6px solid var(--white);
  outline: 1px solid rgba(11, 28, 50, 0.08);
}

@media (max-width: 800px) {
  .about-teaser-photo img { width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Testimonials — moved OFF navy background, onto cream with orange
   as the dominant accent color. Fixes quote alignment + adds end mark.
   ═══════════════════════════════════════════════════════════════════ */
.section-testimonials {
  background: var(--cream);
  color: var(--text);
  padding: 88px 24px;
  position: relative;
}
/* Thin orange top and bottom rules for a "framed" feel */
.section-testimonials::before,
.section-testimonials::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.section-testimonials::before { top: 0; }
.section-testimonials::after { bottom: 0; }

.section-testimonials .section-eyebrow { color: var(--orange); }
.section-testimonials .section-headline { color: var(--navy); }

.testimonials-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 32px; margin-top: 40px; max-width: 1100px;
}

.testimonial-card {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 40px 40px 32px 48px;
  border-radius: 0 4px 4px 0;
  margin: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 20px rgba(11, 28, 50, 0.05);
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
}
.testimonial-card:hover {
  box-shadow: 0 8px 32px rgba(11, 28, 50, 0.12);
  transform: translateY(-2px);
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: 19px; line-height: 1.7;
  color: var(--navy);
  font-weight: 400; font-style: italic;
  margin-bottom: 24px; flex: 1;
  position: relative;
  padding-top: 8px;
}

/* Opening quote — big, prominent, orange, tucked at the top-left of the quote text */
.testimonial-quote::before {
  content: '\201C';
  font-family: var(--serif);
  font-size: 80px; line-height: 1;
  color: var(--orange);
  position: absolute;
  top: -8px; left: -24px;
  font-style: normal; font-weight: 500;
  opacity: 0.9;
}

/* Closing quote — small orange mark inline at the end of the text */
.testimonial-quote::after {
  content: '\201D';
  font-family: var(--serif);
  color: var(--orange);
  font-size: 24px; line-height: 0;
  font-style: normal; font-weight: 500;
  margin-left: 2px;
  vertical-align: -6px;
}

.testimonial-source {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 20px;
  margin-top: auto;
  border-top: 1px solid rgba(11, 28, 50, 0.12);
}
.testimonial-name {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--navy);
  text-transform: uppercase;
}
.testimonial-detail {
  font-size: 12px; font-weight: 400;
  color: var(--text-light);
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }
  .testimonial-card { padding: 32px 28px 24px 40px; }
  .testimonial-quote { font-size: 17px; }
  .testimonial-quote::before { font-size: 64px; left: -18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   More orange emphasis throughout — small accents that add up
   ═══════════════════════════════════════════════════════════════════ */

/* Bolder orange section eyebrows across the site */
.section-eyebrow,
.hero-eyebrow {
  font-weight: 600;
  color: var(--orange);
}

/* Hero eyebrow gets an orange leading rule */
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: var(--orange);
}

/* Section eyebrows in colored sections keep orange */
.cta-section .section-eyebrow { color: var(--orange); }

/* Section-link (Read more, View all) — bolder, more visible */
.section-link {
  font-weight: 600;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.section-link:hover {
  border-bottom-color: var(--orange);
}

/* Nav CTA button — chunkier and more orange */
.site-nav .nav-cta {
  background: var(--orange);
  padding: 11px 22px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.25);
}
.site-nav .nav-cta:hover {
  background: var(--orange-dark);
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.35);
}

/* Primary button gets a subtle orange glow shadow */
.btn-primary {
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.2);
}
.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.35);
}

/* Landlord Intel topic icons — swap navy→orange for warmer feel */
.intel-topic-icon {
  background: var(--white);
  color: var(--orange);
  border: 2px solid var(--orange);
}

/* Services grid: hover already brings orange in. Add subtle orange top edge on cards */
.service-card {
  border-top: 3px solid transparent;
}
.service-card:hover {
  border-top-color: var(--orange);
}

/* Footer: more orange in the col headings and links */
.footer-col-heading {
  color: var(--orange);
  font-weight: 700;
}

/* Question item arrows already orange - make them bolder */
.q-item::before {
  color: var(--orange);
  font-weight: 700;
  font-size: 18px;
}

/* ── v1.4: Footer address alignment fix ── */
/* When a footer contact line wraps to multiple lines, the icon must align
   to the FIRST line — not vertical-center of the whole block. */
.footer-col-list li.footer-multiline {
  align-items: flex-start;
}
.footer-col-list li.footer-multiline .footer-inline-icon {
  /* Bump icon down slightly so its optical center matches the first line's cap-height */
  margin-top: 3px;
}

/* ── v1.4: Override leftover text-align:center from v1.0 footer ── */
/* The v1.1+ footer uses a 3-column grid — text should read left-aligned. */
.site-footer-inner { text-align: left; }
.site-footer-brand { align-items: flex-start; text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   v1.5 additions — bigger logo, bigger home-teaser headshot
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header logo: 44px → 64px ── */
.site-logo img {
  height: 64px; width: auto;
}
@media (max-width: 640px) {
  .site-logo img { height: 80px; }
}
/* Adjust header height so the bigger logo fits without visual crowding */
.site-header-inner {
  height: 92px;
}
@media (max-width: 640px) {
  .site-header-inner { height: 72px; }
}

/* ── Footer logo: 60px → 88px ── */
.footer-logo-img {
  height: 88px;
}
@media (max-width: 640px) {
  .footer-logo-img { height: 64px; }
}

/* ── Home teaser: bigger headshot (was 320px, now 420px) ── */
.about-teaser-photo img {
  width: 420px;
}
@media (max-width: 900px) {
  .about-teaser-photo img { width: 320px; }
}
@media (max-width: 640px) {
  .about-teaser-photo img { width: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.6 additions — bigger header logo, footer logo flush-left,
   home teaser portrait
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header: logo bigger, header row taller ── */
.site-logo img { height: 117px; }
.site-header-inner { height: 140px; }
@media (max-width: 640px) {
  .site-logo img { height: 81px; }
  .site-header-inner { height: 100px; }
}

/* ── Footer logo: pull flush left ─────────────────────────────────
   The SVG has ~23px of built-in padding on the left (viewBox 0..396,
   visible content starts near x=23). At height 88px the width is ~242px,
   so the empty pad on the left is ~14px. Pull it left with negative
   margin so the visible logo lines up with the tagline text below. */
.footer-logo-img { margin-left: -14px; }
@media (max-width: 640px) {
  .footer-logo-img { margin-left: -10px; }
}

/* ── Home teaser: display the About portrait at portrait aspect ── */
.about-teaser-photo img {
  width: 360px;
  height: auto; /* let portrait ratio flow */
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(11, 28, 50, 0.15);
  border: 6px solid var(--white);
  outline: 1px solid rgba(11, 28, 50, 0.08);
}
@media (max-width: 900px) {
  .about-teaser-photo img { width: 280px; }
}
@media (max-width: 640px) {
  .about-teaser-photo img { width: 220px; }
}

/* Nav items must stay on one line even with bigger logo */
.site-nav a { white-space: nowrap; }
.site-nav { gap: 24px; }
@media (max-width: 1200px) {
  .site-nav { gap: 18px; }
  .site-nav a:not(.nav-cta):not(.site-nav-seller) { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.7 — richer hero + scroll arrow + reveal animations + logo align
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header logo: nudge down a couple pixels for optical centering ── */
/* The logo's visual weight sits high (Marcus&Millichap text in top half
   of the SVG), so mathematical centering feels top-heavy. Push down. */
.site-logo img { margin-top: 6px; }

/* Header adds a soft shadow when the page has scrolled off the top */
.site-header { transition: box-shadow 0.3s ease, background 0.3s ease; }
.site-header.scrolled { box-shadow: 0 4px 24px rgba(11, 28, 50, 0.08); }

/* ── HERO: richer background + decorative element ─────────────────
   No photo needed — a warm gradient with a big offset orange square
   and a subtle grid gives immediate visual depth. */
.hero-home {
  position: relative;
  overflow: hidden;
  padding: 140px 24px 180px;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(232, 119, 34, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(11, 28, 50, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #FDFBF7 0%, var(--sand) 100%);
}
/* Subtle grid pattern overlaid on the hero for depth */
.hero-home::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11, 28, 50, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 28, 50, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
/* Big offset orange decorative shape — placed behind text on right side */
.hero-decor {
  position: absolute;
  right: -100px;
  top: 15%;
  width: 420px;
  height: 420px;
  border: 2px solid var(--orange);
  border-radius: 4px;
  opacity: 0.35;
  transform: rotate(6deg);
  pointer-events: none;
  z-index: 0;
}
.hero-decor::after {
  content: '';
  position: absolute;
  left: -80px; top: -80px;
  width: 200px; height: 200px;
  background: var(--navy);
  opacity: 0.05;
  border-radius: 4px;
  transform: rotate(-12deg);
}
.hero-home .hero-inner {
  position: relative; z-index: 2;
}
@media (max-width: 900px) {
  .hero-decor { width: 260px; height: 260px; right: -80px; top: 10%; }
  .hero-decor::after { width: 140px; height: 140px; }
}

/* ── Scroll-down hint arrow at bottom of hero ── */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.25s;
  z-index: 3;
}
.hero-scroll-hint:hover { opacity: 1; color: var(--orange); }
.hero-scroll-hint span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-scroll-hint svg {
  width: 20px; height: 20px;
  animation: scroll-bounce 2.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ── Reveal-on-scroll animation ─────────────────────────────────
   Elements start slightly translated + faded, then rise up
   when the IntersectionObserver adds .is-visible. */
.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.reveal-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger sibling reveals inside the hero so they cascade in */
.hero-home .reveal-fade { transition-delay: 0s; }
.hero-home .hero-eyebrow.reveal-fade { transition-delay: 0.1s; }
.hero-home .hero-headline.reveal-fade { transition-delay: 0.2s; }
.hero-home .hero-sub.reveal-fade { transition-delay: 0.35s; }
.hero-home .hero-cta-row.reveal-fade { transition-delay: 0.5s; }

/* On page load, hero elements are immediately in-view — trigger the
   reveal without waiting for the observer to fire (avoids flash). */
.hero-home .reveal-fade { animation: heroReveal 0.7s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.hero-home .hero-eyebrow.reveal-fade { animation-delay: 0.1s; }
.hero-home .hero-headline.reveal-fade { animation-delay: 0.2s; }
.hero-home .hero-sub.reveal-fade { animation-delay: 0.35s; }
.hero-home .hero-cta-row.reveal-fade { animation-delay: 0.5s; }
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion — kill animations */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-scroll-hint svg { animation: none; }
  .hero-scroll-hint { opacity: 0.5; }
}

/* Smooth-scroll for anchor jumps site-wide (scroll arrow uses this) */
html { scroll-behavior: smooth; }

/* Cards get a subtle lift transition when they hover */
.service-card { transition: transform 0.25s ease, border-top-color 0.25s ease, box-shadow 0.25s ease; }
.testimonial-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.intel-topic { transition: transform 0.2s ease; }
.intel-topic:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════════
   v1.8 — drone-photo hero, footer Seller Dashboard button, newsletter modal
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO with photo background ─────────────────────────────────
   Big drone shot fills the hero, dark gradient overlay on the left
   creates a legible reading zone for the white text. */
.hero-photo {
  padding: 160px 24px 180px;
  min-height: 92vh;
  position: relative;
  overflow: hidden;
  background: var(--navy); /* fallback while image loads */
}
.hero-photo::before { display: none; } /* kill the grid pattern from v1.7 */
.hero-photo-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 0;
  animation: heroSlowZoom 24s ease-out forwards;
}
@keyframes heroSlowZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}
.hero-photo-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11, 28, 50, 0.55) 0%,
      rgba(11, 28, 50, 0.42) 35%,
      rgba(11, 28, 50, 0.22) 65%,
      rgba(11, 28, 50, 0.08) 100%
    );
}
.hero-photo .hero-inner { position: relative; z-index: 2; }

/* Text colors on photo hero — white on the dark overlay */
.hero-photo .hero-eyebrow { color: var(--orange); }
.hero-photo .hero-eyebrow::before { background: var(--orange); }
.hero-photo .hero-headline { color: var(--white); text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.hero-photo .hero-sub {
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.15);
}
.hero-photo .hero-cta-secondary { color: rgba(255,255,255,0.85); }
.hero-photo .hero-scroll-hint { color: var(--white); opacity: 0.7; }
.hero-photo .hero-scroll-hint:hover { color: var(--orange); opacity: 1; }

@media (max-width: 640px) {
  .hero-photo { padding: 120px 20px 140px; min-height: 82vh; }
  .hero-photo-overlay {
    background: linear-gradient(180deg,
      rgba(11, 28, 50, 0.60) 0%,
      rgba(11, 28, 50, 0.80) 100%);
  }
}

/* ── Footer Seller Dashboard button ─────────────────────────────
   Distinguishable but not competing with the primary "Request a
   Valuation" CTA elsewhere. Orange outline on the navy footer. */
.footer-seller-btn {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 24px;
  padding: 14px 20px;
  background: transparent;
  border: 2px solid var(--orange);
  border-radius: 4px;
  color: var(--white);
  text-decoration: none;
  transition: all 0.2s;
  min-width: 260px;
}
.footer-seller-btn:hover {
  background: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 119, 34, 0.3);
}
.footer-seller-btn-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  transition: color 0.2s;
}
.footer-seller-btn:hover .footer-seller-btn-label { color: var(--white); }
.footer-seller-btn-main {
  font-size: 14px; font-weight: 600; color: var(--white);
  flex: 1;
}
.footer-seller-btn-arrow {
  width: 18px; height: 18px; color: var(--orange);
  transition: color 0.2s, transform 0.2s;
}
.footer-seller-btn:hover .footer-seller-btn-arrow {
  color: var(--white);
  transform: translateX(3px);
}

/* Legacy site-nav-seller class (was in header, now unused) — hide it */
.site-nav-seller { display: none !important; }

/* ── Newsletter modal ───────────────────────────────────────────
   Full-screen backdrop + centered card. Auto-opens on first visit. */
.newsletter-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.newsletter-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.newsletter-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 28, 50, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.newsletter-card {
  position: relative;
  background: var(--white);
  border-radius: 8px;
  max-width: 520px; width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.4, 1);
  overflow: hidden;
}
.newsletter-modal.is-open .newsletter-card {
  transform: translateY(0) scale(1);
}
.newsletter-close {
  position: absolute; top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  background: transparent; border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
  transition: background 0.2s, color 0.2s;
}
.newsletter-close:hover {
  background: var(--sand);
  color: var(--navy);
}
.newsletter-close svg { width: 20px; height: 20px; }
.newsletter-body {
  padding: 48px 40px 40px;
  border-top: 4px solid var(--orange);
}
.newsletter-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.newsletter-headline {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: 30px; line-height: 1.15; margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.newsletter-sub {
  font-size: 15px; line-height: 1.65; color: var(--text);
  font-weight: 300; margin-bottom: 28px;
}
.newsletter-form {
  display: flex; flex-direction: column; gap: 12px;
}
.newsletter-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.newsletter-form input {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--sans); font-size: 15px;
  color: var(--navy); background: var(--white);
  transition: border-color 0.2s;
  width: 100%;
}
.newsletter-form input:focus {
  outline: none; border-color: var(--orange);
}
.newsletter-submit {
  margin-top: 6px;
  width: 100%;
  padding: 15px 20px;
  font-size: 13px;
}
.newsletter-legal {
  margin-top: 16px;
  font-size: 12px; color: var(--text-light);
  text-align: center;
}
@media (max-width: 640px) {
  .newsletter-body { padding: 40px 24px 28px; }
  .newsletter-headline { font-size: 24px; }
  .newsletter-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.9 — bigger nav, side-slide newsletter, two-button CTA
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bigger nav links + tap targets ── */
.site-nav a:not(.nav-cta) {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  padding: 8px 4px;
  letter-spacing: 0.02em;
}
.site-nav a:not(.nav-cta):hover { color: var(--orange); }
.site-nav a.active { color: var(--orange); }
.site-nav a.active::after { background: var(--orange); }
/* Bigger primary CTA button in nav too */
.site-nav .nav-cta {
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 1200px) {
  .site-nav a:not(.nav-cta):not(.site-nav-seller) { font-size: 14px; }
  .site-nav { gap: 20px; }
}
@media (max-width: 1000px) {
  .site-nav a:not(.nav-cta) { font-size: 13px; }
  .site-nav { gap: 14px; }
  .site-nav .nav-cta { padding: 12px 18px; font-size: 12px; }
}

/* ── Two-button CTA row ── */
.cta-button-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-button-row .btn { min-width: 220px; }

/* Light outline button variant for use on the navy CTA section */
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn-outline-light:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-outline { border-width: 2px; }

@media (max-width: 640px) {
  .cta-button-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .cta-button-row .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Newsletter modal — REDESIGN as gentle bottom-right slide-in
   No dark backdrop, doesn't block main content, user can keep scrolling
   ═══════════════════════════════════════════════════════════════════ */

/* Kill the previous centered/blocking styles */
.newsletter-modal {
  position: fixed;
  inset: auto; /* reset shorthand FIRST */
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: block;
  padding: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1);
}
.newsletter-modal.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Hide the backdrop entirely — this is a non-blocking side card */
.newsletter-backdrop { display: none !important; }

.newsletter-card {
  position: relative;
  background: var(--white);
  border-radius: 8px;
  width: 100%;
  max-height: none;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(11, 28, 50, 0.22);
  transform: none;
  transition: none;
  border-top: 4px solid var(--orange);
}
.newsletter-modal.is-open .newsletter-card { transform: none; }

.newsletter-close {
  position: absolute; top: 12px; right: 12px;
  z-index: 2;
  width: 32px; height: 32px;
  background: transparent; border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
  transition: background 0.2s, color 0.2s;
}
.newsletter-close:hover { background: var(--sand); color: var(--navy); }
.newsletter-close svg { width: 18px; height: 18px; }

.newsletter-body {
  padding: 32px 28px 24px;
  border-top: none; /* overridden — already on card */
}
.newsletter-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px;
}
.newsletter-headline {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: 22px; line-height: 1.2; margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.newsletter-sub {
  font-size: 13px; line-height: 1.55; color: var(--text);
  font-weight: 300; margin-bottom: 18px;
}
.newsletter-form { gap: 10px; }
.newsletter-row { gap: 10px; }
.newsletter-form input {
  padding: 11px 13px;
  font-size: 13px;
}
.newsletter-submit {
  padding: 12px 18px;
  font-size: 12px;
}
.newsletter-legal { margin-top: 12px; font-size: 11px; }

@media (max-width: 640px) {
  .newsletter-modal {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  .newsletter-body { padding: 24px 20px 18px; }
  .newsletter-headline { font-size: 20px; }
  .newsletter-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2.0 — Photo backgrounds on interior sections (About teaser first)
   ═══════════════════════════════════════════════════════════════════ */

/* Base pattern for a section with a photo background */
.section-photo-bg {
  position: relative;
  overflow: hidden;
}
.section-photo-bg .section-photo-bg-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.section-photo-bg .section-photo-bg-overlay {
  position: absolute; inset: 0;
  z-index: 1;
}
.section-photo-bg > .section-inner,
.section-photo-bg > .section-inner-narrow {
  position: relative;
  z-index: 2;
}

/* ── About teaser: drone photo of Glendale skyline w/ mountains ── */
.section-about-teaser {
  padding: 100px 24px;
  background: var(--sand); /* fallback */
}
.section-about-teaser .section-photo-bg-image {
  background-image: url('/assets/img/home-drone-2.jpg');
  background-position: center 65%; /* keep buildings + mountains in frame */
  animation: heroSlowZoom 30s ease-out forwards;
}
/* Warm cream gradient overlay — very subtle, just a slight cream tint
   for cohesion, doesn't hide the photo. Text sits in its own card. */
.section-about-teaser .section-photo-bg-overlay {
  background: linear-gradient(90deg,
    rgba(245, 240, 232, 0.10) 0%,
    rgba(245, 240, 232, 0.10) 100%);
}
/* ── About teaser: FULL photo showing (no crop), cards overlay ── */
.section-about-teaser {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--sand);
}
/* Photo as real <img> — takes full width, natural height, no cropping */
.section-about-teaser .section-photo-full {
  display: block;
  width: 100%;
  height: auto;
}
.section-about-teaser .section-photo-full-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 28, 50, 0.10) 0%,
    rgba(11, 28, 50, 0) 50%);
  z-index: 1;
  pointer-events: none;
}
/* Cards float on top of the photo, positioned on the left */
.section-about-teaser .section-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.section-about-teaser .about-teaser-row {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 620px;
  margin: 0;
  pointer-events: auto;
}
.section-about-teaser .about-teaser-body {
  background: var(--cream);
  padding: 26px 28px;
  border-radius: 4px;
  box-shadow: 0 16px 44px rgba(11, 28, 50, 0.25);
  border-left: 4px solid var(--orange);
  max-width: 320px;
}
.section-about-teaser .about-teaser-photo img {
  width: 240px;
  height: auto;
  border-radius: 4px;
  border: 6px solid var(--white);
  outline: 1px solid rgba(11, 28, 50, 0.08);
  box-shadow: 0 16px 44px rgba(11, 28, 50, 0.28);
}
.section-about-teaser .section-headline {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 10px;
}
.section-about-teaser .section-body {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .section-about-teaser .about-teaser-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 100%;
  }
  .section-about-teaser .about-teaser-photo img { width: 140px; }
  .section-about-teaser .about-teaser-body { padding: 20px 22px; max-width: 300px; }
  .section-about-teaser .section-headline { font-size: 22px; }
  .section-about-teaser .section-body { font-size: 13px; }
}
@media (max-width: 640px) {
  .section-about-teaser .about-teaser-photo img { width: 100px; }
  .section-about-teaser .section-headline { font-size: 18px; margin-bottom: 6px; }
  .section-about-teaser .section-body { display: none; } /* hide bio at small sizes */
  .section-about-teaser .about-teaser-body { padding: 16px 18px; }
}
/* Subtle border on the headshot works nicely against the photo */
.section-about-teaser .about-teaser-photo img {
  box-shadow: 0 16px 44px rgba(11, 28, 50, 0.28);
  border-width: 8px;
}

@media (max-width: 800px) {
  .section-about-teaser { padding: 72px 20px; }
  .section-about-teaser .section-photo-bg-overlay {
    background: linear-gradient(180deg,
      rgba(245, 240, 232, 0.15) 0%,
      rgba(245, 240, 232, 0.15) 100%);
  }
  .section-about-teaser .about-teaser-body {
    padding: 32px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v2.6 — Drone photo hero backgrounds on About / Intel / Contact
   Dark navy overlay keeps text readable, slow zoom for subtle life
   ═══════════════════════════════════════════════════════════════════ */

.hero-with-photo {
  position: relative;
  overflow: hidden;
  background: var(--navy); /* fallback while photo loads */
  padding: 128px 24px 96px;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.hero-with-photo .hero-photo-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
  animation: heroSlowZoom 30s ease-out forwards;
}
.hero-with-photo .hero-photo-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(11, 28, 50, 0.86) 0%,
    rgba(11, 28, 50, 0.70) 40%,
    rgba(11, 28, 50, 0.42) 75%,
    rgba(11, 28, 50, 0.20) 100%);
}
.hero-with-photo .hero-inner { position: relative; z-index: 2; }

/* Text colors on photo hero */
.hero-with-photo .hero-eyebrow { color: var(--orange); }
.hero-with-photo .hero-eyebrow::before { background: var(--orange); }
.hero-with-photo .hero-headline {
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.20);
}
.hero-with-photo .hero-body {
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.15);
}

/* About page — headshot needs to show clearly on the darkened photo */
.hero-about.hero-with-photo .about-hero-photo img {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}
.hero-about.hero-with-photo { padding: 112px 24px 80px; }

@media (max-width: 640px) {
  .hero-with-photo { padding: 96px 20px 64px; min-height: 52vh; }
  .hero-with-photo .hero-photo-bg-overlay {
    background: linear-gradient(180deg,
      rgba(11, 28, 50, 0.65) 0%,
      rgba(11, 28, 50, 0.82) 100%);
  }
}

/* Per-page photo position overrides — each drone photo has different
   composition, so we shift the crop to keep the important subjects visible */
.hero-contact-photo .hero-photo-bg-img {
  object-position: center 30%; /* shift up so tower tops + sky show */
}

/* ═══════════════════════════════════════════════════════════════════
   v3.0 — Warm Charcoal palette + Orange emphasis pass
   ═══════════════════════════════════════════════════════════════════ */

/* Orange accent line under section headlines — signature stroke */
.section-headline {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 32px;
}
.section-headline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
/* Center the accent when the containing text is centered */
.cta-section .section-headline::after,
.cta-headline::after {
  left: 50%;
  transform: translateX(-50%);
}
.cta-headline {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.cta-headline::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 48px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
/* Kill duplicate accent line on hero headlines (they already have the eyebrow rule) */
.hero-headline::after { display: none !important; }

/* Testimonial client names now in orange for stronger brand punch */
.testimonial-name {
  color: var(--orange) !important;
  letter-spacing: 0.16em !important;
}

/* Landlord Intel topic left-border bumped up 3px → 5px */
.intel-topic {
  border-left-width: 5px;
}

/* Service card headings turn orange on hover (was navy hover shift) */
.service-card:hover .service-card-heading {
  color: var(--orange);
  transition: color 0.25s;
}
.service-card-heading { transition: color 0.25s; }

/* Section eyebrows: chunkier + a hair bigger for more punch */
.section-eyebrow, .hero-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.hero-eyebrow::before,
.section-eyebrow.section-eyebrow-with-rule::before {
  width: 40px;
  height: 2px;
}

/* Testimonial left border thicker */
.testimonial-card { border-left-width: 5px; }

/* Section link (Read more) — orange arrow tint that intensifies on hover */
.section-link {
  color: var(--orange);
  font-weight: 700;
}
.section-link:hover {
  color: var(--orange-dark);
  border-bottom-color: var(--orange-dark);
}

/* Footer "SPECIALIZED AREAS" etc. col headings — a touch bolder */
.footer-col-heading {
  font-size: 11.5px;
  letter-spacing: 0.2em;
}

/* Nav CTA button — subtly larger tap target + a shade more punch */
.site-nav .nav-cta {
  letter-spacing: 0.1em;
  box-shadow: 0 3px 12px rgba(232, 119, 34, 0.35);
}
.site-nav .nav-cta:hover {
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.45);
  transform: translateY(-1px);
}

/* Q-item arrow — bigger + more orange emphasis on questions page */
.q-item::before {
  font-size: 20px;
  margin-right: 14px;
}
.q-item {
  border-bottom: 1px solid rgba(11, 28, 50, 0.10);
}

/* Hero scroll hint — subtly orange color rather than white for more brand presence */
.hero-scroll-hint svg { color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════════
   v3.8 — Post cards on Insights, article layout, Services detail sections
   ═══════════════════════════════════════════════════════════════════ */

/* ── Post preview cards (Insights list) ── */
.post-cards {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}
.post-card {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
  gap: 0;
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(11, 28, 50, 0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(11, 28, 50, 0.14);
}
.post-card-media {
  overflow: hidden;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-body {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
}
.post-card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}
.post-card-eyebrow-updated {
  background: rgba(232, 119, 34, 0.14);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--orange);
}
.post-card-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 24px; line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.post-card-summary {
  font-size: 15px; line-height: 1.65; color: var(--text);
  font-weight: 300;
  margin-bottom: 20px; flex: 1;
}
.post-card-cta {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--orange);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color 0.2s;
}
.post-card:hover .post-card-cta { border-bottom-color: var(--orange); }

@media (max-width: 800px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card-media { height: 220px; }
  .post-card-body { padding: 28px 24px 24px; }
  .post-card-heading { font-size: 20px; }
}

/* ── Individual article / commentary post ── */
.insight-post {
  padding-bottom: 40px;
}
.insight-post-header {
  padding: 96px 24px 40px;
  background: var(--sand);
  border-bottom: 3px solid var(--orange);
}
.insight-post-header-inner {
  max-width: 780px; margin: 0 auto;
}
.insight-post-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 16px;
}
.insight-post-title {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: clamp(30px, 4.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.insight-post-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; line-height: 1.55;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 28px;
}
.insight-post-meta {
  font-size: 13px; color: var(--text-light);
  letter-spacing: 0.04em;
  display: flex; gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 28, 50, 0.10);
}
.insight-post-body {
  max-width: 780px; margin: 0 auto;
  padding: 48px 24px 24px;
  font-size: 17px; line-height: 1.75; color: var(--text);
}
.insight-post-body p { margin-bottom: 20px; }
.insight-post-body h2 {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 26px; line-height: 1.25;
  margin: 40px 0 16px;
  letter-spacing: -0.005em;
}
.insight-post-body ul {
  margin: 8px 0 24px; padding-left: 24px;
}
.insight-post-body li { margin-bottom: 8px; }
.insight-post-body strong { color: var(--navy); font-weight: 600; }

/* Dated update callout at top of an insight article */
.insight-post-update {
  background: #F6F4EF;
  border-left: 4px solid var(--orange);
  padding: 22px 26px;
  margin: 0 0 32px;
  border-radius: 4px;
}
.insight-post-update-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.insight-post-update p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.insight-post-update ul { margin: 0 0 14px; padding-left: 22px; }
.insight-post-update li { margin: 0 0 6px; font-size: 16px; line-height: 1.6; }
.insight-post-update > *:last-child { margin-bottom: 0; }
.insight-post-update-more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 119, 34, 0.22);
}
.insight-post-update-more a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.insight-post-update-more a:hover {
  border-bottom-color: var(--orange);
}
/* Highlight "Last updated" over "Published" in the article meta line */
.insight-post-meta-updated {
  color: var(--orange);
  font-weight: 600;
}

.insight-post-figure {
  margin: 8px 0 32px;
  padding: 0;
}
.insight-post-figure img {
  width: 100%; height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(11, 28, 50, 0.10);
  display: block;
}
.insight-post-figure figcaption {
  font-size: 13px; color: var(--text-light);
  font-style: italic;
  margin-top: 10px;
  text-align: center;
}

.insight-post-cta {
  margin: 48px 24px 0;
  padding: 40px 24px;
  background: var(--sand);
  border-radius: 4px;
  border-left: 4px solid var(--orange);
  max-width: 780px;
  margin-left: auto; margin-right: auto;
}
.insight-post-cta-inner { text-align: center; }
.insight-post-cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 8px;
}
.insight-post-cta-heading {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: 24px; line-height: 1.25;
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   Services page — nav grid at top, detailed sections below
   ═══════════════════════════════════════════════════════════════════ */

/* The service cards on the services page top nav grid are anchor links,
   inherit the base .service-card styles but make sure text stays inline */
.services-nav-section .service-card {
  text-decoration: none; color: inherit;
}

/* Individual service detail sections */
.service-detail {
  padding: 88px 24px;
  background: var(--white);
  border-bottom: 1px solid rgba(11, 28, 50, 0.08);
}
.service-detail-alt { background: var(--sand); }
.service-detail:last-of-type { border-bottom: none; }

.service-detail-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.service-detail-header { position: sticky; top: 120px; }
.service-detail-num {
  font-family: var(--serif); font-style: italic;
  font-size: 56px; color: var(--orange);
  font-weight: 300;
  line-height: 1;
  opacity: 0.85;
  display: block;
  margin-bottom: 16px;
}
.service-detail-icon-wrap {
  width: 56px; height: 56px;
  background: var(--white);
  border: 2px solid var(--orange);
  color: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-detail-icon-wrap .icon { width: 26px; height: 26px; }
.service-detail-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 10px;
}
.service-detail-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 30px; line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.service-detail-sub {
  font-size: 15px; color: var(--text-light);
  font-style: italic;
  line-height: 1.5;
}
.service-detail-body p {
  font-size: 16.5px; line-height: 1.75;
  color: var(--text);
  font-weight: 300;
  margin-bottom: 20px;
}
.service-detail-body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .service-detail { padding: 64px 24px; }
  .service-detail-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-detail-header { position: static; }
  .service-detail-num { font-size: 42px; margin-bottom: 12px; }
  .service-detail-heading { font-size: 26px; }
  .service-detail-body p { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9 — Insights 2-col layout, Featured Update dates + linked cards,
   Common Questions 3-col grid, SEO / accessibility polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── Insights two-column layout ───────────────────────────────
   Featured Updates and In-Depth Analysis sit side by side. */
.insights-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.insights-col-desc {
  font-size: 15px; line-height: 1.65;
  color: var(--text); font-weight: 300;
  margin-bottom: 28px;
  max-width: 480px;
}

/* Featured Updates: linked card variant needs pointer + hover state */
.intel-topic-linked {
  text-decoration: none; color: inherit;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 32px; background: var(--sand); border-radius: 4px;
  border-left: 5px solid var(--orange);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.intel-topic-linked:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11, 28, 50, 0.10);
  border-left-color: var(--orange-dark);
}
.intel-topic-meta {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}
.intel-topic-cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--orange);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.intel-topic-linked:hover .intel-topic-cta {
  border-bottom-color: var(--orange);
}

/* Post cards: stacked variant for the narrow Insights column */
.post-cards-single { display: block; }
.post-card-stacked {
  grid-template-columns: 1fr;
}
.post-card-stacked .post-card-media { height: 240px; }

@media (max-width: 1000px) {
  .insights-two-col { grid-template-columns: 1fr; gap: 56px; }
}

/* ── Common Questions: 3-column layout ─────────────────────── */
.q-section { padding: 72px 24px; }
.q-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}
.q-column { }
.q-column-header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--orange);
}
.q-column-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 28px; line-height: 1.15;
  margin: 8px 0 10px;
  letter-spacing: -0.005em;
}
.q-column-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--text-light);
  font-weight: 300;
}
.q-column-content { }
/* Sub-group headings (for the Sellers column's 4 subgroups) */
.q-column .q-group-heading {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: 18px;
  margin: 24px 0 8px;
  padding-top: 4px;
}
.q-column .q-group-heading:first-of-type { margin-top: 4px; }
.q-column .q-list {
  list-style: none; margin: 0; padding: 0;
}
.q-column .q-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 28, 50, 0.06);
  font-size: 14.5px; line-height: 1.5; color: var(--navy);
  display: flex; align-items: flex-start;
}
.q-column .q-item:last-child { border-bottom: none; }
.q-column .q-item::before {
  content: '→'; color: var(--orange);
  font-weight: 700; font-size: 15px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Kill the older single-column question styles that had bigger padding */
.q-audience-section { display: none; }
.q-anchor-nav { display: none; }

/* Hero body link */
.hero-body-link {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.hero-body-link:hover { border-bottom-color: var(--orange); }

@media (max-width: 1000px) {
  .q-columns { grid-template-columns: 1fr; gap: 48px; max-width: 720px; }
}

/* ── Post meta accessibility (BRT post) ── */
.insight-post-meta a[rel="author"] {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.insight-post-meta a[rel="author"]:hover { color: var(--orange); }
.insight-post-meta-sep { color: rgba(11, 28, 50, 0.3); }

/* ── Home services grid: service cards are now anchor links ── */
/* Inherits from .service-card — just remove default link underlines
   and ensure the whole card is clickable/keyboard-focusable */
.services-cards a.service-card { text-decoration: none; color: inherit; }
.services-cards a.service-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   v4.0 — Common Questions: expandable Q&A with <details>/<summary>
   ═══════════════════════════════════════════════════════════════════ */

.q-column .q-list {
  list-style: none; margin: 0; padding: 0;
}

.q-details {
  scroll-margin-top: 240px; /* clears sticky header (140px) + tab bar (~90px) when landing on question anchor */
  border-bottom: 1px solid rgba(11, 28, 50, 0.08);
  transition: background 0.15s ease;
}
.q-details:last-child { border-bottom: none; }
.q-details[open] { background: rgba(255, 255, 255, 0.55); }

/* Remove default triangle from <summary> */
.q-summary::-webkit-details-marker { display: none; }
.q-summary { list-style: none; }
.q-summary::marker { content: ''; }

.q-summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 8px;
  cursor: pointer;
  font-size: 14.5px; line-height: 1.5; color: var(--navy);
  font-weight: 500;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.q-summary:hover { color: var(--orange); }
.q-summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -1px;
  border-radius: 2px;
}

/* Plus-icon that rotates to X when the details is open */
.q-arrow {
  color: var(--orange);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.2s ease;
  display: inline-block;
  width: 16px; text-align: center;
}
.q-details[open] .q-arrow {
  transform: rotate(45deg); /* + → × */
}

.q-text {
  flex: 1;
}

.q-answer {
  padding: 4px 8px 20px 36px;
  animation: qFadeIn 0.25s ease;
}
.q-answer p {
  font-size: 14px; line-height: 1.7;
  color: var(--text);
  font-weight: 300;
  margin: 0;
}

@keyframes qFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Kill the old ::before arrow that was on .q-item (list-based version) */
.q-column .q-item::before { display: none; }

@media (max-width: 640px) {
  .q-summary { font-size: 14px; padding: 12px 4px; }
  .q-answer { padding: 4px 4px 18px 32px; }
  .q-answer p { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.4 — Contact strip above main header
   Slim navy bar showing office address (left) + phone/email (right),
   clickable tel: and mailto: on the actions
   ═══════════════════════════════════════════════════════════════════ */
.site-contact-strip {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-contact-strip-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.site-contact-strip-actions {
  display: flex; align-items: center; gap: 24px;
}
.site-contact-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}
a.site-contact-strip-item:hover {
  color: var(--orange);
}
.site-contact-strip-item svg {
  width: 14px; height: 14px;
  color: var(--orange);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .site-contact-strip-office { display: none; }
  .site-contact-strip-inner { justify-content: center; }
}
@media (max-width: 640px) {
  .site-contact-strip-inner { padding: 8px 16px; gap: 12px; font-size: 11.5px; }
  .site-contact-strip-actions { gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v4.5 — Regulatory & Legislative Reference section on Common Questions
   Full-width block below the 3-column audience grid. Each of the 6 memo
   sections (dev, density, permitting, rent, commercial, watch) renders
   as a subsection with expandable Q&A entries.
   ═══════════════════════════════════════════════════════════════════ */

.q-legislative-section {
  padding: 72px 24px;
  background: var(--white);
  border-top: 3px solid var(--orange);
}

.q-legislative-header {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}
.q-legislative-header .section-headline {
  margin-bottom: 20px;
}
.q-legislative-header .section-headline::after {
  left: 50%;
  transform: translateX(-50%);
}
.q-legislative-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 300;
  margin-top: 12px;
}

.q-legislative-groups {
  max-width: 1000px;
  margin: 0 auto;
}
.q-legislative-group {
  margin-bottom: 56px;
  scroll-margin-top: 240px;
}
.q-legislative-group + .q-legislative-group { margin-top: 24px; }
.q-legislative-group:last-child { margin-bottom: 0; }

.q-legislative-group-heading {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.2;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--orange);
  letter-spacing: -0.005em;
}

.q-legislative-group .q-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.q-legislative-group .q-details {
  border-bottom: 1px solid rgba(11, 28, 50, 0.08);
}
.q-legislative-group .q-details:last-child {
  border-bottom: none;
}
.q-legislative-group .q-summary {
  padding: 16px 8px;
  font-size: 15px;
}
.q-legislative-group .q-answer {
  padding: 4px 8px 22px 36px;
}
.q-legislative-group .q-answer p {
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .q-legislative-section { padding: 56px 20px; }
  .q-legislative-header { margin-bottom: 32px; }
  .q-legislative-group-heading { font-size: 20px; }
  .q-legislative-group .q-summary { font-size: 14px; padding: 14px 4px; }
  .q-legislative-group .q-answer { padding: 4px 4px 20px 32px; }
  .q-legislative-group .q-answer p { font-size: 13.5px; }
}


/* v4.6: cross-references — bill mentions inside audience answers link to
   the legislative reference section anchors. Style them as subtle orange
   references so users see they're clickable. */
.q-answer .q-bill-ref,
.q-answer a[href^="#reg-"] {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.q-answer .q-bill-ref:hover,
.q-answer a[href^="#reg-"]:hover {
  color: var(--orange-dark);
  text-decoration-thickness: 2px;
}


/* Round 2: text-only post cards on the Insights list — the 6 new posts
   don't have hero images yet, so cards are text-only with the same
   editorial look. */
.post-card-textonly {
  grid-template-columns: 1fr;
  border-left: 4px solid var(--orange);
  padding: 4px 0;
}
.post-card-textonly .post-card-body {
  padding: 28px 32px;
}
@media (max-width: 800px) {
  .post-card-textonly .post-card-body { padding: 24px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.8 — Legislative reference: 3-column grid within each category
   Each of the 6 category subsections now flows its bill entries in a
   responsive 3-column grid (auto-collapses on narrower viewports).
   ═══════════════════════════════════════════════════════════════════ */

.q-legislative-groups {
  max-width: 1200px;
}
.q-legislative-group .q-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 28px;
  align-items: start;
}
.q-legislative-group .q-details {
  border-bottom: 1px solid rgba(11, 28, 50, 0.08);
}
.q-legislative-group .q-summary {
  padding: 12px 4px;
  font-size: 14px;
  line-height: 1.45;
}
.q-legislative-group .q-arrow {
  margin-top: 0;
}
.q-legislative-group .q-answer {
  padding: 2px 4px 18px 26px;
}
.q-legislative-group .q-answer p {
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  /* Mobile stays single-column via auto-fit's natural collapse */
  .q-legislative-group .q-list { gap: 0; }
}


/* v4.9: services grid now has 7 cards instead of 5 — switch from fixed
   5-column layout to responsive auto-fit so cards flow naturally across
   1 or 2 rows depending on viewport width. */
.services-cards {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px;
}
@media (max-width: 1000px) {
  .services-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 720px) {
  .services-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .services-cards {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v5.1 — Home hero: distinctive 2-line headline treatment
   Brand name is small refined serif on top, descriptor is HUGE italic
   serif below. Creates real visual hierarchy vs. flat one-line headline.
   ═══════════════════════════════════════════════════════════════════ */

.hero-home .hero-eyebrow {
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-bottom: 28px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}

/* Home headline is a 2-line stack — brand line then descriptor line */
.hero-headline-home {
  font-family: var(--serif);
  color: var(--white);
  line-height: 1;
  margin-bottom: 32px;
  letter-spacing: -0.015em;
}
.hero-headline-brand {
  display: block;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  font-style: normal;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.hero-headline-descriptor {
  display: block;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  font-style: italic;
  color: var(--white);
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}
/* Kill any inherited ::after accent line on the descriptor */
.hero-headline-descriptor::after { display: none !important; }

/* Longer subhead — smaller size, more line-height, comfortable width */
.hero-sub-long {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 680px;
  font-weight: 400;
  margin-top: 8px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.hero-sub-long strong {
  color: var(--white);
  font-weight: 600;
}

@media (max-width: 720px) {
  .hero-headline-brand { font-size: clamp(22px, 5vw, 30px); }
  .hero-headline-descriptor { font-size: clamp(36px, 9vw, 52px); }
  .hero-sub-long { font-size: 15.5px; }
}


/* ═══════════════════════════════════════════════════════════════════
   v5.2 — Home hero: navy card floating on drone photo.
   Card provides its own contrast so text is fully readable regardless
   of what's happening in the photo. Overlay stays light so the drone
   shot shows through the rest of the hero.
   ═══════════════════════════════════════════════════════════════════ */

.hero-home .hero-inner {
  background: rgba(11, 28, 50, 0.92);
  padding: 44px 52px 40px;
  max-width: 780px;
  border-radius: 4px;
  border-left: 4px solid var(--orange);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.40);
  margin-left: max(32px, calc((100vw - 1240px) / 2));
  margin-right: auto;
  margin-top: 60px;
}

/* Overlay is lighter now — the card handles readability, so the photo
   gets to breathe */
.hero-home .hero-photo-overlay {
  background: linear-gradient(90deg,
    rgba(11, 28, 50, 0.30) 0%,
    rgba(11, 28, 50, 0.10) 100%
  );
}

/* Both headline lines uniform size, regular (not italic), each on its own
   row. Overrides the earlier v5.1 hierarchy treatment. */
.hero-home .hero-headline-brand,
.hero-home .hero-headline-descriptor {
  font-size: clamp(32px, 3.8vw, 46px);
  font-style: normal;
  font-weight: 700;
  color: white;
  letter-spacing: -0.015em;
  display: block;
  line-height: 1.1;
  margin-bottom: 4px;
  text-shadow: none;
  white-space: nowrap;
}
.hero-home .hero-headline-descriptor { margin-bottom: 0; }

.hero-home .hero-cta-row { margin-top: 32px; }

@media (max-width: 720px) {
  .hero-home .hero-inner {
    margin-left: 20px;
    margin-right: 20px;
    padding: 32px 28px;
    max-width: none;
    margin-top: 40px;
  }
  .hero-home .hero-headline-brand,
  .hero-home .hero-headline-descriptor {
    font-size: clamp(30px, 7vw, 42px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Common Questions page — Tab navigation (segmented pill toggle)
   Sticky bar just below the site header, switches between
   Common Questions and California Legislation panels. The "BROWSE"
   eyebrow above the pill signals this is a section switcher.
   ═══════════════════════════════════════════════════════════════════ */
.q-tabs-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 140px; /* clears the sticky site header on desktop */
  z-index: 90;
  padding: 24px 0 26px;
}
.q-tabs-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 12px;
  text-align: center;
}
.q-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
}
.q-tab {
  background: none;
  border: none;
  padding: 11px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.q-tab:hover { color: var(--navy); }
.q-tab.is-active,
.q-tab.is-active:hover {
  background: var(--orange);
  color: var(--white);
}
.q-tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .q-tab { padding: 10px 22px; font-size: 12px; letter-spacing: 0.06em; }
}
@media (max-width: 640px) {
  .q-tabs-wrap { top: 100px; padding: 20px 0 22px; } /* matches mobile header height */
  .q-tabs-eyebrow { font-size: 10px; margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .q-tabs { gap: 3px; padding: 4px; }
  .q-tab { padding: 9px 16px; font-size: 11px; letter-spacing: 0.05em; }
}

/* ═══════════════════════════════════════════════════════════════════
   Insights article — PDF guide embed and rate table
   Used on the LA County Rent Control 2026-27 Cycle article.
   ═══════════════════════════════════════════════════════════════════ */
.guide-embed {
  margin: 32px 0 40px;
  padding: 0;
}
.guide-embed a {
  display: block;
  text-decoration: none;
  border: none;
}
.guide-embed img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.guide-embed a:hover img {
  box-shadow: 0 8px 32px rgba(11, 28, 50, 0.15);
  transform: translateY(-2px);
}
.guide-embed figcaption {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.guide-embed-note {
  color: var(--text-light);
  font-size: 14px;
  font-style: italic;
}

.rate-table-wrap {
  margin: 24px 0 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 15px;
}
.rate-table thead {
  background: var(--sand);
}
.rate-table th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 2px solid var(--border);
  letter-spacing: 0.02em;
}
.rate-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.rate-table tbody tr:hover {
  background: rgba(232, 119, 34, 0.03);
}
.rate-table td:nth-child(2) {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.rate-table td:nth-child(3) {
  color: var(--text-light);
  font-size: 14px;
}

@media (max-width: 640px) {
  .rate-table { font-size: 13px; }
  .rate-table th, .rate-table td { padding: 10px 12px; }
  .guide-embed figcaption { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage — Free Resources section
   Sits between "What We Do" and "About teaser". Sends SEO-relevant
   internal link authority to /questions and /insights.
   ═══════════════════════════════════════════════════════════════════ */
.section-resources {
  background: var(--white);
}
.section-resources .section-inner {
  text-align: center;
}
.section-resources .section-body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-links-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.section-links-row .section-link {
  display: inline-block;
}

@media (max-width: 640px) {
  .section-links-row { gap: 16px; flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Insights hub — combined grid (v6_35+)
   Single grid replaces the old Featured Updates / In-Depth Analysis
   two-column layout. Filter chips at the top toggle category. Cards
   are mixed size: full-width for deep-dive articles, half-width for
   short-form update cards. SVG icon placeholders fill in for articles
   without a custom graphic.
   ═══════════════════════════════════════════════════════════════════ */

/* Filter chips row */
.insights-filter-wrap {
  text-align: center;
  margin-bottom: 40px;
}
.insights-filter-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 12px;
}
.insights-filter-chips {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.insights-chip {
  background: none;
  border: none;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.insights-chip:hover { color: var(--navy); }
.insights-chip.is-active,
.insights-chip.is-active:hover {
  background: var(--orange);
  color: var(--white);
}
.insights-chip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.insights-chip-subtext {
  text-align: center;
  font-size: 14px;
  color: var(--text-light);
  margin: 16px auto 0;
  max-width: 720px;
  font-style: italic;
  line-height: 1.5;
  min-height: 22px;
}

/* Grid layout: mixed card sizes */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  grid-auto-flow: dense; /* fills gaps left by mixed sizes */
}
.insight-card[data-size="full"] {
  grid-column: 1 / -1; /* full-width */
}
.insight-card[data-size="compact"] {
  grid-column: span 1; /* half-width, pairs with neighboring compact card */
}
.insights-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
  font-style: italic;
}

/* SVG icon placeholder — sits inside .post-card-media for cards without images */
.insight-card-icon-placeholder {
  background: linear-gradient(135deg, var(--sand) 0%, #f4ede0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  height: 240px;
}
.insight-card-icon-placeholder .icon {
  width: 72px;
  height: 72px;
  color: var(--orange);
  opacity: 0.85;
}

/* Last-updated line inside full cards */
.insight-card-updated {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

/* Compact card — half-width in the grid, for short-form updates without a full article */
.insight-card-compact {
  display: flex;
  gap: 18px;
  background: var(--white);
  border-radius: 4px;
  padding: 24px 22px;
  box-shadow: 0 4px 20px rgba(11, 28, 50, 0.06);
  border-left: 4px solid var(--orange);
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
}
a.insight-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(11, 28, 50, 0.14);
}
.insight-card-compact-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--sand) 0%, #f4ede0 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insight-card-compact-icon .icon {
  width: 26px;
  height: 26px;
  color: var(--orange);
  opacity: 0.85;
}
.insight-card-compact-body {
  flex: 1;
  min-width: 0;
}
.insight-card-compact .post-card-eyebrow {
  margin-bottom: 8px;
}
.insight-card-compact .post-card-heading {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.insight-card-compact .post-card-summary {
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.55;
}
.insight-card-compact .insight-card-updated {
  margin-bottom: 0;
}

/* Mobile: single column, everything full-width */
@media (max-width: 800px) {
  .insights-grid { grid-template-columns: 1fr; gap: 24px; }
  .insight-card[data-size="compact"],
  .insight-card[data-size="full"] { grid-column: 1 / -1; }
  .insight-card-icon-placeholder { min-height: 160px; height: 180px; }
  .insight-card-icon-placeholder .icon { width: 56px; height: 56px; }
  .insights-chip { padding: 9px 16px; font-size: 11px; }
}
@media (max-width: 480px) {
  .insights-filter-chips { padding: 4px; }
  .insights-chip { padding: 8px 12px; letter-spacing: 0.04em; }
}

/* ═══════════════════════════════════════════════════════════════════
   Insights hub — sidebar layout (v6_36+)
   Desktop: sticky 260px sidebar listing every article, entries link
   straight to the article page. Mobile: sidebar is replaced by a
   "Jump to article" dropdown above the grid.
   ═══════════════════════════════════════════════════════════════════ */

/* Wider container on this page so the grid keeps room beside the sidebar */
.section-inner-wide { max-width: 1320px; margin: 0 auto; }

.insights-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.insights-sidebar {
  position: sticky;
  top: 160px; /* clears the sticky site header */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 8px;
}
.insights-nav-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.insights-nav-group { margin-bottom: 28px; }
.insights-nav-group:last-child { margin-bottom: 0; }
.insights-nav-group-heading {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
  line-height: 1.4;
}
.insights-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.insights-nav-item { margin-bottom: 2px; }
.insights-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 3px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.insights-nav-link:hover {
  background: var(--sand);
  border-left-color: var(--orange);
}
.insights-nav-tag {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}
.insights-nav-title {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
}
.insights-nav-link:hover .insights-nav-title { color: var(--orange); }
.insights-nav-empty {
  font-size: 13px;
  color: var(--text-light);
  font-style: italic;
  padding: 6px 12px;
  list-style: none;
}

/* ── Mobile jump dropdown (hidden on desktop) ─────────────── */
.insights-jump-mobile { display: none; }
.insights-jump-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}
.insights-jump-select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87722' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.insights-jump-select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ── Breakpoints ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .insights-layout { grid-template-columns: 220px 1fr; gap: 32px; }
}
@media (max-width: 1000px) {
  /* Sidebar gives way to the dropdown */
  .insights-layout { grid-template-columns: 1fr; gap: 0; }
  .insights-sidebar { display: none; }
  .insights-jump-mobile { display: block; margin-bottom: 32px; }
}


/* ── Header logo swap: M&M / Shindler Group horizontal lockup ─────
   The new logo is a horizontal lockup (~2.75:1) rather than the older
   stacked icon+wordmark. At the old 117px height it renders too wide;
   drop to 80px so the horizontal footprint stays close to before.
   Header-inner height reduced proportionally. */
.site-logo img { height: 80px; }
.site-header-inner { height: 108px; }
@media (max-width: 640px) {
  .site-logo img { height: 56px; }
  .site-header-inner { height: 80px; }
}

/* Header logo: bump 40% larger per request 2026-09-23 */
.site-logo img { height: 112px; }
.site-header-inner { height: 140px; }
@media (max-width: 640px) {
  .site-logo img { height: 78px; }
  .site-header-inner { height: 106px; }
}

/* Desktop-only: 3px optical-center nudge downward (mobile doesn't need it) */
@media (min-width: 641px) {
  .site-logo img { margin-top: 3px; }
}