/* ==========================================================================
   Christopher Hysell — Editorial Rebuild
   Typography: Newsreader (headlines/serif) + Inter (body/sans)
   Palette: warm ivory / charcoal / stone — no color accent, pure editorial
   ========================================================================== */

:root {
  /* Palette follows benbacal.com: near-white grounds, neutral near-black
     type, and a single warm taupe carrying the warmth the old tan grounds
     used to. The previous #f7f5f0 / #857a6e pairing measured 3.85:1, under
     the 4.5 minimum, which is why body copy read as washed out. */
  --ivory: #fafafa;
  --ivory-deep: #f0efed;
  --charcoal: #1a1a1a;
  --charcoal-soft: #2e2e2e;
  --stone: #5c5c5c;         /* secondary text on LIGHT — 6.41:1 */
  --stone-light: #a8a29a;   /* secondary text on DARK  — 6.88:1 */
  --hairline: #e4e2de;
  --hairline-dark: #3a3a3a;
  --accent: #948671;        /* benbacal's taupe — rules, icons, hovers */
  --accent-deep: #6f6455;   /* the same taupe, dark enough for small text — 5.54:1 */

  /* The brand green off the live site's logo and CSS. At 21.6px the wordmark
     needs 4.5:1, and the true green manages only 2.24:1 on a near-white
     header — so the header uses a darker shade of the same hue and the dark
     footer, where it reads 7.43:1, gets the real thing. */
  --brand-green: #69bd45;        /* on dark   — 7.43:1 */
  --brand-green-deep: #437f28;   /* on light  — 4.67:1 */

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  /* Without height:auto, max-width shrinks the width while the height
     attribute stays at its literal value, so any image whose intrinsic width
     exceeds its container renders vertically stretched. Rules that set an
     explicit height (hero media, the KALEO badge) are more specific and still
     win. */
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section[id] {
  scroll-margin-top: 84px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--charcoal);
  color: var(--ivory);
  padding: 0.9rem 1.4rem;
  z-index: 999;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.6rem 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header.is-scrolled {
  padding: 1rem 0;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--charcoal);
}

.wordmark span {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-green-deep);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.4rem);
}

/* Labels were breaking mid-phrase — "SELLERS / GUIDE" over two lines — because
   the items were allowed to wrap inside a tight row. */
.main-nav li { white-space: nowrap; }

.main-nav a,
.main-nav .nav-link-button {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
}

.main-nav a::after,
.main-nav .nav-link-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--charcoal);
  transition: width 0.35s var(--ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav .nav-link-button:hover::after,
.main-nav .nav-link-button:focus-visible::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  width: 24px;
  height: 1px;
  background: var(--charcoal);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    flex-direction: column;
    justify-content: center;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
    pointer-events: none;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .main-nav ul a,
  .main-nav ul .nav-link-button {
    font-size: 1rem;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Was 100vh. A full-screen video pushed every word of the page below the
     fold, so a visitor landed on footage and no information. */
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 14, 13, 0.78) 0%,
    rgba(15, 14, 13, 0.32) 42%,
    rgba(15, 14, 13, 0.12) 65%,
    rgba(15, 14, 13, 0.28) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  /* Was a flat 8rem, which pushed the hero past a full screen on laptops. */
  padding-top: clamp(5rem, 12vh, 8rem);
}

.hero-eyebrow {
  color: var(--ivory-deep);
  opacity: 0.85;
}

.hero-title {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  color: var(--ivory);
  margin-top: 1.1rem;
  max-width: 16ch;
}

.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ivory-deep);
}

.hero-sub {
  margin-top: 1.6rem;
  max-width: 42ch;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ivory-deep);
  line-height: 1.7;
}

.hero-meta {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  background: none;
  border: 1px solid currentColor;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.btn-light {
  color: var(--ivory);
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--ivory);
  color: var(--charcoal);
}

.btn-dark {
  color: var(--charcoal);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--charcoal);
  color: var(--ivory);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  right: var(--gutter);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ivory-deep);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 42px;
  background: var(--ivory-deep);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

@media (max-width: 640px) {
  .hero-scroll-cue { display: none; }
}

/* ---------- Section shell ---------- */
.section {
  padding: clamp(5rem, 12vh, 9rem) 0;
}

.section-dark {
  background: var(--charcoal);
  color: var(--ivory);
}

.section-dark .eyebrow {
  color: var(--stone-light);
}

.section-divider {
  height: 1px;
  background: var(--hairline);
  border: none;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about-media {
  position: relative;
}

.about-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 30% center;
}

.about-media-frame {
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(247, 245, 240, 0.5);
  pointer-events: none;
  z-index: 1;
}

.about-media-wrap {
  position: relative;
}

.about-heading {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  margin-top: 0.9rem;
}

.about-lede {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  color: var(--charcoal-soft);
  margin-top: 1.8rem;
  line-height: 1.5;
  max-width: 34ch;
}

.about-copy {
  margin-top: 1.6rem;
  color: var(--charcoal-soft);
  font-size: 1rem;
  max-width: 56ch;
}

.about-copy + .about-copy {
  margin-top: 1.2rem;
}

.about-facts {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2.4rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.8rem;
}

.about-fact dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.about-fact dd {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-top: 0.4rem;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}

/* ---------- Philosophy ---------- */
.philosophy-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.philosophy-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.4;
  color: var(--ivory);
}

.philosophy-copy p {
  color: var(--stone-light);
  max-width: 58ch;
}

.philosophy-copy p + p {
  margin-top: 1.3rem;
}

@media (max-width: 900px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Section intro ---------- */
.section-intro {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section-intro h2 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  margin-top: 0.8rem;
}

.section-intro p {
  margin-top: 1.1rem;
  color: var(--stone);
  font-size: 1.02rem;
  max-width: 56ch;
}

.section-dark .section-intro p {
  color: var(--stone-light);
}

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
}

.portfolio-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(26, 25, 24, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.portfolio-card-play svg {
  width: 14px;
  height: 14px;
  fill: var(--charcoal);
  transform: translateX(1px);
}

.portfolio-card:hover .portfolio-card-play {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--charcoal);
}

.portfolio-follow {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.portfolio-card {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(155deg, var(--ivory-deep), #e2dccf 60%, var(--ivory-deep));
  border: 1px solid var(--hairline);
}

.portfolio-card:not(.has-thumb)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(133, 122, 110, 0.07) 0px,
    rgba(133, 122, 110, 0.07) 1px,
    transparent 1px,
    transparent 14px
  );
}

.portfolio-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.portfolio-card:hover .portfolio-card-thumb {
  transform: scale(1.04);
}

.portfolio-card.has-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 14, 13, 0.75) 0%, rgba(15, 14, 13, 0.05) 45%, transparent 65%);
}

.portfolio-card.has-thumb .portfolio-card-name,
.portfolio-card.has-thumb .portfolio-card-tag {
  color: var(--ivory);
  position: relative;
  z-index: 1;
}

.portfolio-card.has-thumb .portfolio-card-tag {
  border-color: rgba(247, 245, 240, 0.6);
}

.portfolio-card.has-thumb .portfolio-card-play {
  border-color: rgba(247, 245, 240, 0.7);
  z-index: 1;
}

.portfolio-card.has-thumb .portfolio-card-play svg {
  fill: var(--ivory);
}

.portfolio-card-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.portfolio-card-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}

.portfolio-card-tag {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1px solid var(--stone-light);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.portfolio-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--stone);
  font-style: italic;
}

@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

.testimonial-card {
  border-top: 1px solid var(--hairline-dark);
  padding-top: 1.6rem;
}

.testimonial-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ivory);
}

.testimonial-attribution {
  margin-top: 1.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-light);
}

@media (max-width: 860px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */
.faq-list {
  border-top: 1px solid var(--hairline);
  max-width: 78ch;
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-question {
  list-style: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}

.faq-question-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-question-icon::before,
.faq-question-icon::after {
  content: "";
  position: absolute;
  background: var(--charcoal);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.faq-question-icon::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-question-icon::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item[open] .faq-question-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.section-dark .faq-list {
  border-top-color: var(--hairline-dark);
}

.section-dark .faq-item {
  border-bottom-color: var(--hairline-dark);
}

.section-dark .faq-question {
  color: var(--ivory);
}

.section-dark .faq-question-icon::before,
.section-dark .faq-question-icon::after {
  background: var(--ivory);
}

.section-dark .faq-answer {
  color: var(--stone-light);
}

.faq-answer {
  padding: 0 0 1.7rem;
  color: var(--stone);
  max-width: 68ch;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.contact-detail-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.contact-detail dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.contact-detail dd {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin-top: 0.35rem;
}

/* A licence number is a credential, not a name. Set inside a 1.25rem serif dd
   it read at the same weight as the agent it belongs to; this drops it to a
   small sans line beneath, matching the footer's agent stacks. */
.contact-dre {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--stone);
  margin-top: 0.15rem;
}

.contact-agent {
  display: block;
}

.contact-agent + .contact-agent {
  margin-top: 0.85rem;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.social-row {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
}

.social-row a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--charcoal-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
  padding-bottom: 2px;
}

.social-row a:hover,
.social-row a:focus-visible {
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.contact-card {
  background: var(--ivory-deep);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--hairline);
}

.contact-card h3 {
  font-size: 1.6rem;
}

.contact-card p {
  margin-top: 0.9rem;
  color: var(--stone);
  max-width: 40ch;
}

.contact-card .btn {
  margin-top: 2rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
  cursor: pointer;
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
  font-family: var(--sans);
}

.btn-block:hover,
.btn-block:focus-visible {
  background: transparent;
  color: var(--charcoal);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact modal ---------- */
dialog.contact-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  padding: 0;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ivory);
  color: var(--charcoal);
}

dialog.contact-modal::backdrop {
  background: rgba(15, 14, 13, 0.6);
  backdrop-filter: blur(2px);
}

.modal-inner {
  padding: clamp(2rem, 5vw, 3rem);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline);
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--charcoal);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--charcoal);
  color: var(--ivory);
}

.modal-inner h3 {
  font-size: 1.7rem;
  padding-right: 2rem;
}

.modal-inner .eyebrow {
  margin-bottom: 0.6rem;
}

.modal-call-line {
  margin: 1.3rem 0 1.7rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.modal-call-eyebrow {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.modal-call-phone {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  color: var(--charcoal-soft);
}

.modal-call-phone a {
  font-weight: 500;
  color: var(--charcoal);
  /* The sweep band must stay readable on the light modal. --stone-light is a
     dark-background token: at #a8a29a on #fafafa the digits dropped to ~1.9:1
     and briefly vanished mid-animation. --accent-deep holds 5.54:1 through
     the whole sweep while still reading as a warm highlight. Note that
     background-clip:text makes computed `color` lie about what renders, so
     this cannot be caught by inspecting colour alone. */
  background-image: linear-gradient(
    100deg,
    var(--charcoal) 42%,
    var(--accent-deep) 50%,
    var(--charcoal) 58%
  );
  background-size: 260% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 15% { background-position: 200% 0; }
  85%, 100% { background-position: -200% 0; }
}

.contact-form {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.form-row input,
.form-row textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.85rem 0.2rem;
  border: none;
  border-bottom: 1px solid var(--hairline-dark);
  background: transparent;
  color: var(--charcoal);
  resize: none;
  transition: border-color 0.3s var(--ease);
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--charcoal);
}

.form-row input:invalid:not(:placeholder-shown),
.form-row textarea:invalid:not(:placeholder-shown) {
  border-color: #a4433a;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.form-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--charcoal);
}

.form-consent label {
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--stone);
  text-transform: none;
  letter-spacing: normal;
}

.form-consent label a {
  color: var(--charcoal-soft);
  text-decoration: underline;
  text-decoration-color: var(--hairline-dark);
}

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

.form-status {
  font-size: 0.85rem;
  margin-top: -0.3rem;
  min-height: 1.2em;
}

.form-status.is-success {
  color: #3f6b4f;
}

.form-status.is-error {
  color: #a4433a;
}

/* ---------- Footer: KALEO brokerage nod ---------- */
.footer-kaleo-row {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-kaleo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--ivory);
  padding: 0.45rem 0.8rem;
  border-radius: 3px;
}

.footer-kaleo-chip img {
  height: 20px;
  width: auto;
  display: block;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--ivory-deep);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 0.8fr 0.95fr;
  gap: clamp(2rem, 5vw, 3rem);
}

.footer-brand .wordmark {
  color: var(--ivory);
}

.footer-brand .wordmark span {
  color: var(--brand-green);
}

/* Lifted out of the Contact column, where a bare text link sat oddly among
   the addresses, and made an actual button above the KALEO badge. */
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding: 0.72rem 1.4rem;
  border: 1px solid var(--stone);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.footer-cta:hover,
.footer-cta:focus-visible {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--charcoal);
}

.footer-kaleo-row { margin-top: 1.6rem; }

.footer-tagline {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--stone-light);
  max-width: 32ch;
}

.footer-social {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-social a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--stone-light);
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--ivory);
  border-color: var(--ivory);
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-light);
  font-weight: 500;
}

.footer-col ul,
.footer-col address {
  margin-top: 1.2rem;
  font-style: normal;
}

.footer-col li + li {
  margin-top: 0.7rem;
}

.footer-col a,
.footer-col .link-button {
  font-size: 0.9rem;
  color: var(--ivory-deep);
  transition: color 0.3s var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible,
.footer-col .link-button:hover,
.footer-col .link-button:focus-visible {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: var(--stone);
}

/* --------------------------------------------------------------------------
   Footer contact block
   Every line here is a unit that must not break mid-phrase: "Suite M" was
   dropping the M onto its own line, and "DRE #01992879" was splitting the
   label from the number. Each agent is now a small stack — name, licence,
   phone — at one consistent size, so the phone no longer reads smaller than
   the name above it.
   -------------------------------------------------------------------------- */
.site-footer address p,
.site-footer address div { font-size: 0.9rem; line-height: 1.65; }

.footer-teamline { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.footer-teamline a { font-size: 0.95rem; font-weight: 500; }
.footer-teamline-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.footer-agent { margin-top: 1rem; }
.footer-agent-name { display: block; color: var(--ivory-deep); }
.footer-agent-dre {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--stone-light);
  margin-top: 0.1rem;
}
.footer-agent a { display: inline-block; margin-top: 0.25rem; font-size: 0.9rem; }

.footer-email-link { margin-top: 1.1rem; }

.footer-eho {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.7rem;
  color: var(--stone-light);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.footer-eho svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.footer-divider {
  margin-top: clamp(3rem, 6vw, 4rem);
  border: none;
  border-top: 1px solid var(--hairline-dark);
}

.footer-bottom {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--stone-light);
}

.footer-legal-text {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--stone-light);
}

/* Filling the full width as a single block would run the measure past 150
   characters, which is unreadable. Two columns use the whole footer and keep
   each line near 70. Paragraphs never split across the gutter. */
@media (min-width: 860px) {
  .footer-legal-text {
    columns: 2;
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }
}
.footer-legal-text p { break-inside: avoid; margin: 0 0 1.05rem; }
.footer-legal-text p:last-child { margin-bottom: 0; }

.footer-bottom a {
  color: var(--stone-light);
}

.footer-bottom a:hover {
  color: var(--ivory);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* ---------- Content / legal pages ---------- */
.page-hero {
  padding: clamp(9rem, 16vh, 11rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}

.page-hero .eyebrow {
  display: block;
}

.page-hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  margin-top: 0.8rem;
}

.page-hero p {
  margin-top: 1rem;
  color: var(--stone);
  max-width: 56ch;
}

.page-content {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.page-content .container {
  max-width: 760px;
}

/* 760px is a reading measure, right for article pages and wrong for a card
   grid. Pages that lay out in cards opt out per-page rather than changing
   the default for every guide. */
.page-content .container-wide {
  max-width: var(--container);
}

.page-content h2 {
  font-size: 1.5rem;
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
}

.page-content h2:first-child {
  margin-top: 0;
}

.page-content p {
  color: var(--charcoal-soft);
  max-width: 68ch;
}

.page-content p + p {
  margin-top: 1.1rem;
}

.page-content ul {
  margin-top: 1.1rem;
  padding-left: 1.3rem;
  list-style: disc;
  color: var(--charcoal-soft);
  max-width: 68ch;
}

.page-content ul li + li {
  margin-top: 0.5rem;
}

.page-content a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--hairline-dark);
}

.page-content a:hover,
.page-content a:focus-visible {
  text-decoration-color: var(--charcoal);
}

.page-updated {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--stone);
}

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(7rem, 16vh, 9rem) var(--gutter) 4rem;
}

.error-content {
  text-align: center;
  max-width: 46rem;
}

.error-code {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--stone);
}

.error-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-top: 0.9rem;
}

.error-sub {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--charcoal-soft);
  max-width: 42ch;
  margin-inline: auto;
}

.error-copy {
  margin-top: 1.2rem;
  color: var(--stone);
  max-width: 44ch;
  margin-inline: auto;
}

.error-actions {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   RealEstateGlendora.com — additions on top of the shared Hysell system
   ========================================================================== */

/* ---------- Video hero (homepage) ---------- */
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Services grid (3-up feature cards) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 2.4rem);
}

.service-card {
  display: block;
  border: 1px solid var(--hairline);
}

.service-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.service-card:hover .service-card-media img {
  transform: scale(1.05);
}

.service-card-body {
  padding: 1.6rem;
}

.service-card-body h3 {
  font-size: 1.2rem;
}

.service-card-tag {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.service-card-body p {
  margin-top: 0.9rem;
  color: var(--stone-light);
  font-size: 0.94rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Resources grid (Glendora places: schools, churches, etc.) ---------- */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, minmax(180px, auto));
  gap: 1rem;
}

.resource-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  grid-column: span 3;
}

.resource-card:nth-child(1),
.resource-card:nth-child(2) { grid-column: span 3; }
.resource-card:nth-child(n+3) { grid-column: span 2; }

.resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 14, 13, 0.78) 0%, rgba(15, 14, 13, 0.15) 55%, rgba(15, 14, 13, 0.05) 100%);
}

.resource-card-label {
  position: relative;
  z-index: 1;
  padding: 1.4rem;
  color: var(--ivory);
}

.resource-card-label h3 {
  font-size: 1.25rem;
}

.resource-card-label span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--ivory-deep);
}

@media (max-width: 700px) {
  .resources-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .resource-card,
  .resource-card:nth-child(1),
  .resource-card:nth-child(2),
  .resource-card:nth-child(n+3) { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- Long-form list content (guide pages) ---------- */
.section-list {
  margin-top: 1.4rem;
  padding-left: 1.3rem;
  max-width: 68ch;
}

.section-list li {
  list-style: disc;
  color: var(--charcoal-soft);
}

.section-list.list-decimal li {
  list-style: decimal;
}

.section-list li + li {
  margin-top: 0.7rem;
}

.section-list li::marker {
  color: var(--stone);
}

.section-dark .section-list li,
.section-dark .section-list li::marker {
  color: var(--ivory-deep);
}

/* ---------- Stat facts (wide 3-up variant) ---------- */
.about-facts.stat-row-long {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Numbered process steps (Home Value Report, etc.) ---------- */
.step-list {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.step-list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.step-list .step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent-deep);
  flex-shrink: 0;
  width: 2ch;
}

.step-list p {
  color: var(--charcoal-soft);
}

/* ---------- Utility cards (icon-based, scannable grid) ---------- */
.utility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 2rem;
}

.utility-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 1.8rem;
}

.utility-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ivory-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.utility-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--charcoal);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.utility-card h3 {
  font-size: 1.15rem;
  margin: 0;
}

.utility-card-provider {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.utility-card p {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  line-height: 1.55;
}

.utility-card-phone {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--hairline-dark);
  padding-bottom: 2px;
}

.utility-card-phone:hover,
.utility-card-phone:focus-visible {
  border-color: var(--charcoal);
}

.utility-card-links {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.utility-card-links a {
  font-size: 0.8rem;
  color: var(--stone);
  text-decoration: underline;
  text-decoration-color: var(--hairline-dark);
}

.utility-card-links a:hover,
.utility-card-links a:focus-visible {
  color: var(--charcoal);
}

.utility-card.is-wide {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .utility-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EXPANDABLE RESOURCE CARDS
   Used on the utilities and churches guides. The card summary answers the
   question; the panel underneath carries the detail someone actually needs
   when they sit down to do it. Content is always in the DOM, so it stays
   indexable whether the panel is open or shut.
   ========================================================================== */

.card-more { margin-top: 1.1rem; border-top: 1px solid var(--hairline); }

.card-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0 0;
  min-height: 44px;
  font-family: var(--sans, inherit);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold, #8a6a2f);
}
.card-more > summary::-webkit-details-marker { display: none; }
.card-more > summary::marker { content: ""; }

/* Leading +/- drawn in CSS, not typed — a glyph renders differently across
   the system font stacks this site falls back through. */
.card-more > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 8px no-repeat;
}
.card-more[open] > summary::before {
  background: linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat;
}
.card-more > summary:hover { text-decoration: underline; }
.card-more > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.card-more-body { padding: 0.9rem 0 0.3rem; }
.card-more-body p { font-size: 0.92rem; line-height: 1.7; margin: 0 0 0.8rem; }
.card-more-body p:last-child { margin-bottom: 0; }
.card-more-body dl { margin: 0 0 0.9rem; display: grid; gap: 0.5rem 1rem; }
.card-more-body dt {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.72; margin-top: 0.4rem;
}
.card-more-body dd { margin: 0.1rem 0 0; font-size: 0.93rem; line-height: 1.6; }
.card-more-body ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.card-more-body li { font-size: 0.92rem; line-height: 1.65; margin-bottom: 0.35rem; }

@media print {
  .card-more > summary { display: none; }
  .card-more-body { display: block !important; }
}

/* Tappable address. Most of this traffic is on a phone deciding whether to
   drive somewhere — the address should be the link, not a line of text to
   copy. One provider, not two: Google's universal URL opens the native app
   on iOS and Android and works on desktop, whereas maps.apple.com falls back
   to a poor web page off Apple devices. */
.map-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  /* Underline the TEXT, not the flex box — border-bottom drew a rule under
     the whole element, which looked wrong the moment an address wrapped. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.map-link svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 0.28em; fill: none; stroke: currentColor; stroke-width: 1.7; }
.map-link:hover, .map-link:focus-visible { opacity: 0.75; }
@media print { .map-link { text-decoration: none; } .map-link svg { display: none; } }

/* Keep the phone from crowding the last link on mid-size screens. */
.main-nav .nav-link-button { white-space: nowrap; }

/* ==========================================================================
   LOCAL AUTHORSHIP
   Someone landing on a resource page from search has no idea who wrote it.
   These two blocks say so without turning a guide into a pitch: a quiet
   byline under the heading, and a proper sign-off at the end of the page.
   ========================================================================== */

.byline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  max-width: 62ch;
}
.byline-faces { display: flex; flex: 0 0 auto; }
.byline-faces img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--ivory, #fff);
}
.byline-faces img + img { margin-left: -12px; }
.byline-text { font-size: 0.86rem; line-height: 1.55; }
.byline-text strong { font-weight: 600; }
.byline-text span { display: block; opacity: 0.75; font-size: 0.8rem; margin-top: 0.1rem; }

.signoff {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold, #8a6a2f);
  background: var(--ivory, #fff);
}
.signoff h2 { margin: 0 0 0.7rem; font-size: 1.25rem; }
.signoff p { font-size: 0.95rem; line-height: 1.7; margin: 0 0 0.9rem; max-width: 60ch; }
.signoff-agents { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.3rem; }
.signoff-agent { display: flex; align-items: center; gap: 0.75rem; }
.signoff-agent img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.signoff-agent b { display: block; font-size: 0.95rem; }
.signoff-agent small { display: block; font-size: 0.78rem; opacity: 0.75; }
.signoff-agent a { font-size: 0.92rem; }

/* Contact pair at the foot of a guide's signoff. The signoff hands over the
   agents' direct lines first; this offers the same two routes as the rest of
   the site for anyone who would rather type than ring. */
.signoff-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(133, 122, 110, 0.22);
}
@media (max-width: 600px) {
  .signoff-cta .btn { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 600px) {
  .byline { gap: 0.7rem; }
  .signoff-agents { gap: 1.1rem; }
}


/* ==========================================================================
   KALEO brokerage badge
   The official mark from kaleorealestate.com is a circular seal with a white
   fill, so it is built to sit directly on a dark ground. The old white "chip"
   wrapper boxed a circle inside a square and fought the mark — dropped.
   ========================================================================== */
.footer-kaleo-chip {
  background: none;
  padding: 0;
  border-radius: 0;
}
/* Scoped to beat the pre-existing `.footer-kaleo-chip img { height: 20px }`,
   which was sized for the old wide wordmark and squashed the round badge. */
.footer-kaleo-chip img.kaleo-badge {
  width: 78px;
  height: 78px;
  display: block;
}
@media (max-width: 600px) {
  .footer-kaleo-chip img.kaleo-badge { width: 66px; height: 66px; }
}


/* --------------------------------------------------------------------------
   Header over the homepage video
   Every page starts with a transparent header, but only the homepage sits on
   dark footage. There the charcoal wordmark and nav links disappear against
   the video, so they lift to white — and only there, because every other hero
   is ivory and white type would vanish on it instead.
   -------------------------------------------------------------------------- */
body:has(.hero video) .site-header:not(.is-scrolled) .wordmark {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
/* The italic half is --stone, which is too dim to read over footage. */
body:has(.hero video) .site-header:not(.is-scrolled) .wordmark span {
  color: var(--brand-green);
}

body:has(.hero video) .site-header:not(.is-scrolled) .main-nav a,
body:has(.hero video) .site-header:not(.is-scrolled) .nav-link-button {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
body:has(.hero video) .site-header:not(.is-scrolled) .nav-toggle span { background: #fff; }

/* ==========================================================================
   Dining guide — restaurants_in_glendora
   A filterable card grid. The categories are real information (you pick by
   what you feel like eating), not decoration, so the chips carry counts and
   drive the filter rather than just tinting the page.
   ========================================================================== */
.dine-intro { max-width: 66ch; }
.dine-intro .lede { margin-top: 1rem; color: var(--stone); font-size: 1.02rem; line-height: 1.7; }

/* --- filter chips --- */
.dine-filters {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.dine-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease), transform .25s var(--ease);
}

.dine-chip:hover,
.dine-chip:focus-visible {
  color: var(--charcoal);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dine-chip.is-active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ivory);
}

.dine-chip-n {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.dine-count {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- the grid --- */
.dine-grid {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 1.1rem;
}

.dine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--hairline);
  background: #fff;
  overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}

/* The accent rule wipes in from the left on hover rather than just appearing. */
.dine-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .42s var(--ease);
}

.dine-card:hover,
.dine-card:focus-within {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 40px -18px rgba(26, 26, 26, 0.34), 0 2px 8px -4px rgba(26, 26, 26, 0.12);
}

.dine-card:hover::before,
.dine-card:focus-within::before { transform: scaleY(1); }

/* The two Route 66 icons are marked out by going dark, not by spanning two
   columns: spanning left an empty cell whenever the count did not divide by
   the column count, and the column count changes with the viewport. */
.dine-card.is-featured {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

.dine-card.is-featured h3 { color: var(--ivory); }
.dine-card.is-featured .dine-blurb { color: var(--stone-light); }
.dine-card.is-featured .dine-tag { color: var(--accent); border-color: rgba(148, 134, 113, 0.45); }
.dine-card.is-featured .map-link,
.dine-card.is-featured .dine-site { color: var(--ivory-deep); }
.dine-card.is-featured::before { background: var(--accent); }

.dine-tag {
  align-self: flex-start;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.dine-card h3 {
  margin-top: 0.75rem;
  font-size: 1.18rem;
  line-height: 1.25;
  text-wrap: balance;
}

.dine-card.is-featured h3 { font-size: 1.5rem; }

.dine-blurb {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--stone);
  flex: 1 1 auto;
}

.dine-addr { margin-top: 1rem; font-size: 0.85rem; }

.dine-links {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

.dine-card.is-featured .dine-links { border-top-color: rgba(255,255,255,0.14); }

.dine-site {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.84rem;
}

.dine-site svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  flex: 0 0 auto;
}

.dine-site:hover svg { stroke: var(--accent); }

/* No opacity here: --stone at 70% composites to #8d8d8d, which is 3.32:1 on
   the white card and fails AA. Opacity is also invisible to a contrast check
   that only reads computed colour, so it fails silently. */
.dine-nosite {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- filtering --- */
.dine-card.is-hidden { display: none; }

/* Cards re-enter on a short stagger when a filter changes, so the grid
   reflows visibly rather than snapping. --i is set per card in the markup. */
@keyframes dineIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.dine-grid.is-filtering .dine-card:not(.is-hidden) {
  animation: dineIn .42s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}

.dine-empty {
  margin-top: 1.5rem;
  padding: 2rem;
  border: 1px dashed var(--hairline);
  text-align: center;
  color: var(--stone);
}

.dine-cta {
  margin-top: 3rem;
  padding: 1.8rem;
  border: 1px solid var(--hairline);
  background: var(--ivory-deep);
}

.dine-cta p { max-width: 62ch; color: var(--stone); font-size: 0.95rem; line-height: 1.65; }
.dine-cta strong { color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  .dine-grid.is-filtering .dine-card:not(.is-hidden) { animation: none; }
  .dine-card:hover, .dine-card:focus-within { transform: none; }
}

/* --------------------------------------------------------------------------
   Welcome to Glendora band
   The city's monument sign, sitting full-bleed between the page and the
   footer. It is 3.75:1, so it works as a band and nowhere else; the height is
   capped and the image cropped rather than letting a 2400px-wide photo set
   the section height on a phone.
   -------------------------------------------------------------------------- */
.glendora-band {
  display: block;
  overflow: hidden;
  background: var(--charcoal);
  line-height: 0;
}

/* The sign IS the content, so it is not cropped: the image keeps its own
   3.75:1 ratio and only starts cropping past a 380px band, which needs a
   viewport wider than about 1425px. aspect-ratio needs height:auto to do
   anything at all. */
.glendora-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3272 / 872;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease);
}

.glendora-band:hover img { transform: scale(1.055); }

@media (prefers-reduced-motion: reduce) {
  .glendora-band img,
  .glendora-band:hover img { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Sellers page
   -------------------------------------------------------------------------- */
.sell-team {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--hairline);
  background: var(--ivory-deep);
}

@media (max-width: 640px) {
  .sell-team { grid-template-columns: 1fr; }
}

.sell-team-faces { display: flex; }
.sell-team-faces img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ivory-deep);
}
.sell-team-faces img + img { margin-left: -22px; }

.sell-team-copy h2 { margin-top: .4rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); text-wrap: balance; }
.sell-team-copy p { margin-top: .9rem; color: var(--stone); line-height: 1.7; max-width: 62ch; }

.sell-team-names {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.sell-team-names span { display: block; }
.sell-team-names b { display: block; font-size: .95rem; }
.sell-team-names small {
  display: block;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--stone);
  margin-top: .1rem;
}

/* --- marketing cards --- */
.sell-grid {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.1rem;
}

.sell-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: #fff;
  overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}

.sell-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 40px -18px rgba(26,26,26,.34), 0 2px 8px -4px rgba(26,26,26,.12);
}

/* Fixed frame so cards with very different source ratios (1.5:1 and 3.65:1)
   line up in a row instead of setting three different card heights. */
.sell-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease);
}

.sell-card:hover > img { transform: scale(1.04); }

.sell-card-body { padding: 1.4rem; }
.sell-card-body-only { padding-top: 1.6rem; }

.sell-card-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.sell-card-body h3 { margin-top: .5rem; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
.sell-card-body p { margin-top: .6rem; font-size: .92rem; line-height: 1.62; color: var(--stone); }

.sell-steps { max-width: 74ch; }
.sell-steps b { color: var(--charcoal); }
.sell-steps span:last-child { color: var(--stone); line-height: 1.68; }

@media (prefers-reduced-motion: reduce) {
  .sell-card:hover { transform: none; }
  .sell-card:hover > img { transform: none; }
}