@font-face { font-family: 'Typold'; src: url('https://library.c21masters.com/c21-branding/fonts/typold/typold-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Typold'; src: url('https://library.c21masters.com/c21-branding/fonts/typold/typold-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Typold'; src: url('https://library.c21masters.com/c21-branding/fonts/typold/typold-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Typold'; src: url('https://library.c21masters.com/c21-branding/fonts/typold/typold-extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Typold Extended'; src: url('https://library.c21masters.com/c21-branding/fonts/typold-extended/typold-extended-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Typold Extended'; src: url('https://library.c21masters.com/c21-branding/fonts/typold-extended/typold-extended-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Typold Extended'; src: url('https://library.c21masters.com/c21-branding/fonts/typold-extended/typold-extended-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Oak Sans'; src: url('https://library.c21masters.com/c21-branding/fonts/oakes/oakes-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oak Sans'; src: url('https://library.c21masters.com/c21-branding/fonts/oakes/oakes-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --c21-gold: #BEA987;
  --c21-gold-soft: #CBBF9F;
  --c21-gold-dark: #A19276;
  /* Text-safe gold. The brand gold is a 2.2:1 colour on white, so it can carry
     rules, borders and large display type but not small text. This darker one
     clears AA on all three light grounds this template uses - white 6.5:1,
     cream 5.7:1, cream-2 4.9:1 - and stays the same hue. Same idea as terra's
     --brass-deep. Use it for any text below 24px; keep --c21-gold decorative. */
  --c21-gold-text: #6E5B3A;
  --c21-black: #252526;
  --c21-black-deep: #1a1a1b;
  --c21-cream: #F2EFE7;
  --c21-cream-2: #E5DFCF;
  --c21-gray: #808285;
  --c21-white: #FFFFFF;

  --font-display: 'Typold Extended', 'Arial Narrow', sans-serif;
  --font-sans: 'Typold', Arial, sans-serif;
  --font-body: 'Oak Sans', Georgia, sans-serif;

  --pad-x: clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 9vw, 110px);
  --max-w: 1400px;
  --gutter: calc(var(--pad-x) + max(0px, (100vw - var(--max-w)) / 2));
  --frame-pad: max(0px, calc((100vw - var(--max-w)) / 2));
}

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

body {
  background: var(--c21-cream);
  color: var(--c21-black);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c21-gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.005em;
}

.btn-primary,
.btn-outline,
.btn-dark {
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all .2s;
  border: none;
}

.btn-primary { background: var(--c21-gold); color: var(--c21-black); }
.btn-primary:hover { background: var(--c21-gold-dark); }

.btn-outline {
  background: transparent;
  color: var(--c21-gold);
  border: 1.5px solid var(--c21-gold);
}

.btn-outline:hover { background: rgba(190,169,135,.12); }

/* The CTA band's own background IS --c21-gold, so a gold outline button on it
   was gold-on-gold: the agent's phone number rendered at 1:1 contrast and was
   invisible on all four pages. On that band the button takes the ink treatment
   instead (6.71:1), and its hover tint has to be dark rather than gold too. */
.brand-cta .btn-outline {
  color: var(--c21-black);
  border-color: var(--c21-black);
}
.brand-cta .btn-outline:hover { background: rgba(37,37,38,.10); }

.btn-dark { background: var(--c21-black); color: var(--c21-gold); }
.btn-dark:hover { background: var(--c21-black-deep); }

.brand-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--c21-black);
  padding: 0 var(--gutter); height: 60px;
}
.brand-nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.brand-nav-logo {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c21-gold); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
}

.brand-nav-logo-mark {
  width: 32px; height: 32px; background: var(--c21-gold);
  display: flex; align-items: center; justify-content: center;
  padding-right: 18px;
  padding-left: 18px;
}

.brand-nav-logo-mark span {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); font-weight: 800; color: var(--c21-black);
}

.brand-nav-links {
  display: none; align-items: center; gap: 36px; list-style: none;
  margin: 0;
}

.brand-nav-links a {
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c21-gold-soft); text-decoration: none; transition: color .2s;
}

.brand-nav-links a:hover,
.brand-nav-links a.active { color: var(--c21-gold); }

.brand-nav-cta {
  display: none;
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--c21-gold); color: var(--c21-black); border: none;
  padding: 10px 22px; cursor: pointer; text-decoration: none;
  transition: background .2s;
}

.brand-nav-cta:hover { background: var(--c21-gold-dark); }

/* 44px stays as the touch target, but the bars are sized rather than left to
   stretch. The column flex defaulted to align-items:stretch and the spans
   carried no width, so each bar ran the full 44px edge to edge - at 1.5px tall
   that reads as three stretched lines rather than a burger. */
.brand-nav-toggle {
  display: flex;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center; gap: 5px;
}

.brand-nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--c21-gold);
  transition: transform .25s, opacity .25s;
}

/* Crossed on open. Keyed off aria-expanded, which the script sets on every
   toggle, rather than off a class name - that is what was already out of step
   between brand.js and this stylesheet. 7px is the bar height plus the gap,
   so the outer bars land exactly on the middle one. */
.brand-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.brand-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.brand-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.brand-cta {
  background: var(--c21-gold);
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
.brand-cta-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}

.brand-cta-left { max-width: 640px; }

.brand-cta-eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(37,37,38,.55);
  margin-bottom: 14px;
}

.brand-cta-h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c21-black);
  line-height: 1.05;
}

.brand-cta-right { display: flex; flex-wrap: wrap; gap: 14px; }

.brand-footer {
  background: var(--c21-black-deep);
  padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(24px, 4vw, 40px);
  color: var(--c21-gray);
}
.brand-footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 28px;
}

.brand-footer-brand {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c21-gold); text-decoration: none;
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}

.brand-footer-brand-mark {
  width: 28px; height: 28px; background: var(--c21-gold);
  display: flex; align-items: center; justify-content: center;
}

.brand-footer-brand-mark span {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 0.85vw, 0.8rem); font-weight: 800; color: var(--c21-black);
}

.brand-footer-tagline {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); line-height: 1.75; color: var(--c21-gray); max-width: 280px;
}

.brand-footer-col-title {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c21-gold);
  margin-bottom: 18px;
}

.brand-footer-col-links { list-style: none; }

.brand-footer-col-links li { margin-bottom: 10px; }

.brand-footer-col-links a {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); color: var(--c21-gray);
  text-decoration: none; transition: color .2s;
}

.brand-footer-col-links a:hover { color: var(--c21-gold-soft); }

.brand-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}

.brand-footer-legal {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem);
  letter-spacing: 0.08em;
  color: rgba(128,130,133,.7);
  line-height: 1.8;
}

.brand-footer-legal a {
  color: rgba(128,130,133,.7);
  text-decoration: none;
}

.brand-footer-legal a:hover { color: var(--c21-gray); }

.brand-footer-equal {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(128,130,133,.6);
  display: flex; align-items: center; gap: 8px;
}

.brand-footer-equal-icon {
  width: 18px; height: 18px;
  border: 1.5px solid rgba(128,130,133,.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: clamp(0.688rem, 0.8vw, 0.75rem);
}

/* One column by default, two from 64em, which is how california's hero-split
   works and what this was missing: the grid was 1fr 1fr at every width, so on
   a phone the copy and the photo each got half a screen and the buttons
   underneath were sized to a 197px column.

   The copy comes first in the markup and the photo second, so stacking needs
   no ordering - the photo simply falls below, which is the behaviour being
   matched. 100dvh moves to the two-column case as well: a full-viewport hero
   is a desktop device, and imposing it on a stacked phone layout would leave
   the two rows stretched apart with the photo pushed off the fold. */
.brand-hero {
  background: var(--c21-black);
  display: grid;
  padding: 68px var(--frame-pad) 0;
  position: relative;
}

@media (min-width: 64em) {
  .brand-hero {
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr 1fr;
  }
}

.brand-hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px);
}

.brand-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px); font-weight: 800;
  text-transform: uppercase; line-height: 1.0; letter-spacing: -0.01em;
  color: var(--c21-white); margin-bottom: 28px;
}

.brand-hero-h1 em { font-style: normal; color: var(--c21-gold); display: block; }

.brand-hero-body {
  font-size: clamp(0.9rem, 1.5vw, 1rem); line-height: 1.75; color: var(--c21-gray);
  max-width: 460px; margin-bottom: 40px;
}

.brand-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.brand-hero-right { position: relative; overflow: hidden; min-height: 320px; }

.brand-hero-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.7) saturate(.85);
}

.brand-hero-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,37,38,.5) 0%, transparent 60%);
}

.brand-communities {
  background: var(--c21-black);
  padding: var(--section-y) var(--gutter);
}
.brand-communities-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-communities h2 { color: var(--c21-white); margin-bottom: 18px; }

.brand-communities-sub {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); line-height: 1.75; color: var(--c21-gray);
  max-width: 560px; margin-bottom: 56px;
}

.brand-communities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.brand-community-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1;
  background: var(--c21-black-deep);
  text-decoration: none;
  isolation: isolate;
}

.brand-community-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}

.brand-community-card:hover img { transform: scale(1.06); }

.brand-community-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(37,37,38,.92) 0%, rgba(37,37,38,.35) 55%, rgba(37,37,38,0) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 24px;
  transition: background .3s ease;
}

.brand-community-card:hover .brand-community-overlay {
  background:
    linear-gradient(to top, rgba(37,37,38,.95) 0%, rgba(37,37,38,.5) 60%, rgba(37,37,38,.1) 100%);
}

.brand-community-name {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 800; text-transform: uppercase;
  color: var(--c21-white); line-height: 1.1;
  letter-spacing: 0.01em;
}

.brand-community-name::after {
  content: ''; display: block;
  width: 32px; height: 2px;
  background: var(--c21-gold);
  margin-top: 12px;
  transition: width .3s ease;
}

.brand-community-card:hover .brand-community-name::after { width: 56px; }

.brand-listings {
  background: var(--c21-cream);
  padding: var(--section-y) var(--gutter);
}
.brand-listings-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
}

.brand-listings h2 { color: var(--c21-black); }

.brand-view-all {
  font-family: var(--font-sans); font-size: clamp(0.688rem, 0.8vw, 0.75rem);
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  /* 11-12px text on cream: --c21-gold reads 1.98:1 here, so this one takes the
     text-safe gold (5.67:1). The underline keeps the decorative gold. */
  color: var(--c21-gold-text); text-decoration: none;
  border-bottom: 1px solid var(--c21-gold); padding-bottom: 2px;
  white-space: nowrap;
}

.brand-listings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.brand-prop-card {
  background: var(--c21-white);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

.brand-prop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,37,38,.08);
}

.brand-prop-img-wrap {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--c21-cream-2);
}

.brand-prop-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}

.brand-prop-card:hover .brand-prop-img-wrap img { transform: scale(1.04); }

.brand-prop-badge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-sans); font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--c21-gold); color: var(--c21-black); padding: 6px 12px;
}

.brand-prop-badge-new { background: var(--c21-black); color: var(--c21-gold); }
.brand-prop-body { padding: 24px; }

.brand-prop-price {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 800; color: var(--c21-black); margin-bottom: 6px;
}

.brand-prop-address {
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); color: var(--c21-gray); margin-bottom: 18px;
}

.brand-prop-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--c21-cream-2); padding-top: 16px;
}

.brand-prop-meta-item {
  font-family: var(--font-sans); font-size: clamp(0.625rem, 0.7vw, 0.7rem);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c21-gray);
}

.brand-prop-meta-item strong {
  display: block; font-size: clamp(0.75rem, 0.9vw, 0.875rem); color: var(--c21-black);
  letter-spacing: 0; font-family: var(--font-body);
  font-weight: 500; margin-bottom: 2px;
}

.brand-buysell {
  background: var(--c21-cream);
  padding: 0 var(--gutter) var(--section-y);
}
.brand-buysell-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-buysell-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}

.brand-buysell-panel {
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px);
  position: relative;
}

.brand-buysell-panel--buyer { background: var(--c21-white); }
.brand-buysell-panel--seller { background: var(--c21-black); }
.brand-buysell-panel--seller .eyebrow { color: var(--c21-gold); }

.brand-buysell-h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 38px); font-weight: 800;
  text-transform: uppercase; line-height: 1.05; margin-bottom: 22px;
}

.brand-buysell-panel--buyer .brand-buysell-h2 { color: var(--c21-black); }
.brand-buysell-panel--seller .brand-buysell-h2 { color: var(--c21-white); }

.brand-buysell-body {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); line-height: 1.8; color: var(--c21-gray);
  margin-bottom: 32px;
}

.brand-buysell-steps { list-style: none; margin-bottom: 40px; }

.brand-buysell-step {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid;
}

.brand-buysell-panel--buyer .brand-buysell-step { border-color: var(--c21-cream-2); }
.brand-buysell-panel--seller .brand-buysell-step { border-color: rgba(255,255,255,.07); }

.brand-buysell-step-num {
  font-family: var(--font-display);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); font-weight: 800; color: var(--c21-gold);
  min-width: 24px; padding-top: 2px;
}

.brand-buysell-step-text { font-size: clamp(0.8rem, 1.2vw, 0.875rem); line-height: 1.6; }
.brand-buysell-panel--buyer .brand-buysell-step-text { color: var(--c21-black); }
.brand-buysell-panel--seller .brand-buysell-step-text { color: var(--c21-gold-soft); }

.brand-buysell-step-text strong {
  display: block; margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); letter-spacing: 0.08em; text-transform: uppercase;
}

.brand-buysell-panel--buyer .brand-buysell-step-text strong { color: var(--c21-black); }
.brand-buysell-panel--seller .brand-buysell-step-text strong { color: var(--c21-white); }

.brand-page-hero {
  background: var(--c21-black);
  min-height: 56vh;
  min-height: 56dvh;
  padding: calc(68px + clamp(80px, 10vw, 140px)) var(--gutter) clamp(72px, 9vw, 120px);
  color: var(--c21-white);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}

.brand-page-hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand-page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.18; filter: grayscale(.4);
}

.brand-page-hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}

.brand-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px); font-weight: 800;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.01em;
  color: var(--c21-white);
}

.brand-page-hero h1 em { font-style: normal; color: var(--c21-gold); }

.brand-page-hero p {
  font-size: clamp(0.9rem, 1.5vw, 1rem); line-height: 1.75; color: var(--c21-gold-soft);
  max-width: 520px;
}

.brand-story {
  background: var(--c21-cream);
  padding: var(--section-y) var(--gutter);
}
.brand-story-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-story-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.brand-story-photo-wrap {
  position: relative;
  padding: 0 24px 24px 0;
}

.brand-story-photo-wrap::after {
  content: '';
  position: absolute;
  top: 32px; left: 32px;
  right: 0; bottom: 0;
  border: 2px solid var(--c21-gold);
  pointer-events: none;
  z-index: 0;
}

.brand-story-photo {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c21-cream-2);
}

.brand-story-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}

.brand-story-badge {
  position: absolute; top: 24px; left: 24px;
  background: var(--c21-gold);
  padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c21-black);
  z-index: 2;
}

.brand-story-badge svg {
  width: 14px; height: 14px; fill: var(--c21-black);
}

.brand-story-text { padding-top: 8px; }
.brand-story h2 { color: var(--c21-black); margin-bottom: 28px; }

.brand-story-body p {
  font-size: clamp(0.9rem, 1.5vw, 1rem); line-height: 1.85; color: var(--c21-black);
  margin-bottom: 22px;
}

.brand-story-quote {
  margin: 36px 0;
  padding: 22px 26px;
  background: var(--c21-white);
  border-left: 3px solid var(--c21-gold);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem); line-height: 1.6;
  color: var(--c21-black);
  font-style: italic;
}

.brand-story-signature {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--c21-cream-2);
  display: flex; align-items: center; gap: 18px;
}

.brand-story-sig-avatar {
  width: 56px; height: 56px;
  background: var(--c21-black);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1rem); font-weight: 800; color: var(--c21-gold);
}

.brand-story-sig-name {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); font-weight: 800; text-transform: uppercase;
  color: var(--c21-black); letter-spacing: 0.05em;
}

.brand-story-sig-title {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c21-gray); margin-top: 5px;
}

.brand-values {
  background: var(--c21-black);
  padding: var(--section-y) var(--gutter);
}
.brand-values-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-values-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 760px;
}

.brand-values h2 { color: var(--c21-white); margin-bottom: 18px; }

.brand-values-sub {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); line-height: 1.8; color: var(--c21-gray);
  max-width: 560px;
}

.brand-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.brand-value {
  background: rgba(255,255,255,.04);
  padding: 40px 32px;
  border-top: 3px solid var(--c21-gold);
  transition: background .25s, transform .3s;
}

.brand-value:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-3px);
}

.brand-value-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800;
  color: var(--c21-gold);
  line-height: 1; margin-bottom: 28px;
}

.brand-value-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 800;
  text-transform: uppercase;
  color: var(--c21-white);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.brand-value-desc {
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); line-height: 1.75;
  color: var(--c21-gold-soft);
}

.brand-spec-row {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid rgba(190,169,135,.18);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.brand-spec-row h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800; text-transform: uppercase;
  color: var(--c21-white);
  line-height: 1.1; letter-spacing: -0.005em;
}

.brand-spec-row p {
  margin-top: 14px;
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); line-height: 1.75;
  color: var(--c21-gray);
  max-width: 320px;
}

.brand-spec-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
}

.brand-spec-tag {
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c21-gold-soft);
  background: transparent;
  border: 1px solid rgba(190,169,135,.3);
  padding: 12px 20px;
  transition: background .2s, color .2s, border-color .2s;
}

.brand-spec-tag:hover {
  background: var(--c21-gold);
  color: var(--c21-black);
  border-color: var(--c21-gold);
}

.brand-awards {
  background: var(--c21-cream);
  padding: var(--section-y) var(--gutter);
}
.brand-awards-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-awards-top {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 5vw, 72px);
  margin-bottom: 56px; align-items: end;
}

.brand-awards h2 { color: var(--c21-black); }

.brand-awards-sub {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); line-height: 1.8; color: var(--c21-gray);
  max-width: 560px;
}

.brand-awards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; margin-bottom: 56px;
}

.brand-award {
  background: var(--c21-white); padding: 32px 26px;
  border-top: 3px solid var(--c21-gold);
  transition: transform .3s, box-shadow .3s;
}

.brand-award:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37,37,38,.08);
}

.brand-award-icon {
  width: 42px; height: 42px;
  background: rgba(190,169,135,.16);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

.brand-award-icon svg {
  width: 20px; height: 20px;
  stroke: var(--c21-gold-dark); fill: none; stroke-width: 1.5;
}

.brand-award-year {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c21-gold-dark);
  margin-bottom: 8px;
}

.brand-award-title {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); font-weight: 800;
  text-transform: uppercase; color: var(--c21-black);
  line-height: 1.2; margin-bottom: 6px;
}

.brand-award-org {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c21-gray);
}

.brand-creds-title {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c21-gold-dark);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 16px;
}

.brand-creds-title::after {
  content: ''; flex: 1; height: 1px; background: var(--c21-cream-2);
}

.brand-creds-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.brand-cred {
  background: var(--c21-white); padding: 22px 26px;
  display: flex; align-items: flex-start; gap: 14px;
}

.brand-cred-dot {
  width: 8px; height: 8px; background: var(--c21-gold);
  flex-shrink: 0; margin-top: 6px;
}

.brand-cred-name {
  font-family: var(--font-sans);
  font-size: clamp(0.688rem, 0.8vw, 0.75rem); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c21-black); margin-bottom: 4px;
}

.brand-cred-desc {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); line-height: 1.6; color: var(--c21-gray);
}

.brand-form {
  background: var(--c21-cream);
  padding: var(--section-y) var(--gutter);
}
.brand-form-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand-form-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.brand-form h2 { color: var(--c21-black); margin-bottom: 16px; }

.brand-form-sub {
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem); line-height: 1.75; color: var(--c21-gray);
  max-width: 520px; margin-bottom: 36px;
}

.brand-form-fields {
  display: flex; flex-direction: column; gap: 16px;
}

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

.brand-field {
  display: flex; flex-direction: column;
}

.brand-field-label {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c21-gray);
  margin-bottom: 8px;
}

.brand-input,
.brand-select,
.brand-textarea {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); color: var(--c21-black);
  background: var(--c21-white);
  border: 1px solid var(--c21-cream-2);
  padding: 14px 16px; outline: none;
  transition: border-color .2s;
}

.brand-input:focus,
.brand-select:focus,
.brand-textarea:focus { border-color: var(--c21-gold); }

.brand-input::placeholder,
.brand-textarea::placeholder { color: rgba(128,130,133,.7); }

.brand-textarea { min-height: 140px; resize: vertical; }

.brand-select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c21-gray) 50%),
                    linear-gradient(135deg, var(--c21-gray) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.brand-form-submit {
  margin-top: 8px; align-self: flex-start;
}

.brand-agent {
  background: var(--c21-black); color: var(--c21-white);
  padding: clamp(32px, 4vw, 44px);
}

.brand-agent-photo {
  width: 150px; height: 150px;
  overflow: hidden; margin-bottom: 22px;
}

.brand-agent-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}

.brand-agent-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 800;
  text-transform: uppercase; line-height: 1.05;
  color: var(--c21-white); margin-bottom: 6px;
}

.brand-agent-title {
  font-family: var(--font-sans);
  font-size: clamp(0.625rem, 0.7vw, 0.7rem); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c21-gold);
  margin-bottom: 28px;
}

.brand-agent-info {
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.08);
}

.brand-agent-info li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-agent-info-icon {
  width: 36px; height: 36px;
  background: rgba(190,169,135,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.brand-agent-info-icon svg {
  width: 16px; height: 16px;
  stroke: var(--c21-gold); fill: none; stroke-width: 1.5;
}

.brand-agent-info-label {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c21-gray);
  margin-bottom: 2px;
}

.brand-agent-info-value {
  font-size: clamp(0.8rem, 1.2vw, 0.875rem); color: var(--c21-white);
  text-decoration: none;
}

.brand-agent-info-value:hover { color: var(--c21-gold); }

.brand-agent-socials {
  display: flex; gap: 10px; margin-top: 28px;
}

.brand-social {
  width: 44px; height: 44px;
  border: 1px solid rgba(190,169,135,.3);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.brand-social:hover {
  background: var(--c21-gold);
  border-color: var(--c21-gold);
}

.brand-social svg {
  width: 16px; height: 16px;
  stroke: var(--c21-gold); fill: none; stroke-width: 1.5;
  transition: stroke .2s;
}

.brand-social:hover svg { stroke: var(--c21-black); }

@media (min-width: 1024px) {
  .brand-hero { grid-template-columns: 1fr 1fr; }
  .brand-hero-right { min-height: auto; order: 0; }
  .brand-communities-grid { gap: 20px; }
  .brand-listings-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-page-hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .brand-story-grid { grid-template-columns: 5fr 7fr; gap: 80px; }
  .brand-story-photo-wrap { max-width: none; }
  .brand-values-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .brand-spec-row { grid-template-columns: 1fr 1fr; }
  .brand-awards-top { grid-template-columns: 1fr 1fr; align-items: center; }
  .brand-awards-grid { grid-template-columns: repeat(4, 1fr); }
  .brand-creds-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-form-grid { grid-template-columns: 1.4fr 1fr; }
  .brand-footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
}

/* Mobile drawer.
   Both class names are matched on purpose. global-js/brand.js toggles
   "brand-is-open" on the nav, while this rule only ever listened for
   "is-open", so the burger set a class nothing responded to and the drawer
   never opened - no error, just a dead button. Accepting either means the
   drawer works whichever name the deployed script uses, so this stylesheet
   can go out without waiting on a matching JS upload. */
/* Below the inline breakpoint the same list becomes the drawer: anchored to
   the right, half the window from 442px up and the whole window at 441 and
   below, sliding in with a fade. It is rendered at all times here rather than
   toggled with display, because display cannot be transitioned; visibility
   keeps it out of the tab order while it is closed and carries a delay so it
   only leaves once the slide has finished. */
@media (max-width: 719px) {
  .brand-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    position: fixed;
    top: 60px; right: 0; left: auto;
    width: 50%;
    height: calc(100svh - 60px);
    background: var(--c21-black);
    padding: 24px 20px;
    border-top: 1px solid rgba(190,169,135,.15);
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
    z-index: 1000;
  }
  .brand-nav.is-open .brand-nav-links,
  .brand-nav.brand-is-open .brand-nav-links {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* Phones take the whole window: half of 400px is a column of menu beside a
   column of page nobody can read. */
@media (max-width: 441px) {
  .brand-nav-links { width: 100%; }
}

/* Mobile styles (base) */
.brand-hero { padding-top: 60px; }
/* These four were declared multi-column at base and only ever restored, not
   collapsed: the 1024px block below re-states all of them, so the intent was
   clearly one column on a phone. Without these the inner pages kept a two or
   three column grid at 400px and about and contact scrolled sideways. */
.brand-page-hero-inner { grid-template-columns: 1fr; }
.brand-story-grid { grid-template-columns: 1fr; }
.brand-values-grid { grid-template-columns: 1fr; }
.brand-form-grid { grid-template-columns: 1fr; }
.brand-buysell-grid { grid-template-columns: 1fr; }
.brand-listings-grid { grid-template-columns: 1fr; }
.brand-communities-grid { grid-template-columns: 1fr; gap: 14px; }
.brand-community-card { aspect-ratio: 1 / 1; }
.brand-page-hero { min-height: 0; padding-top: calc(60px + clamp(48px, 8vw, 80px)); }
.brand-awards-grid { grid-template-columns: 1fr; }
.brand-creds-grid { grid-template-columns: 1fr; }
.brand-form-row { grid-template-columns: 1fr; }
  .brand-cta-inner { flex-direction: column; align-items: flex-start; }
.brand-footer-top { grid-template-columns: 1fr; gap: 32px; }
.brand-footer-bottom { flex-direction: column; align-items: flex-start; }

@media (min-width: 720px) {
  .brand-nav { padding: 0 var(--gutter); height: 68px; }
  .brand-nav-links, .brand-nav-cta { display: flex; }
  .brand-nav-toggle { display: none; }
  .brand-hero { padding-top: 68px; }
  .brand-buysell-grid { grid-template-columns: 1fr 1fr; }
  .brand-listings-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-communities-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .brand-community-card { aspect-ratio: 1 / 1; }
  .brand-communities-grid .brand-community-card:last-child { grid-column: auto; aspect-ratio: 1 / 1; }
  .brand-page-hero { padding-top: calc(68px + clamp(72px, 9vw, 120px)); }
  .brand-awards-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-creds-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-form-row { grid-template-columns: 1fr 1fr; }
  .brand-cta-inner { flex-direction: row; align-items: center; }
  .brand-footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .brand-footer-bottom { flex-direction: row; justify-content: space-between; }
}

.brand-nav.brand-scrolled {
  box-shadow: 0 2px 20px rgba(37,37,38,.15);
}

.brand-hero-left,
.brand-communities .eyebrow,
.brand-communities .h2,
.brand-communities-sub,
.brand-community-card,
.brand-listings .eyebrow,
.brand-listings .h2,
.brand-prop-card,
.brand-buysell-panel,
.brand-cta-left,
.brand-cta-right,
.brand-story-grid,
.brand-page-hero-inner,
.brand-form-grid,
.brand-agent {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .48s cubic-bezier(0,0,.2,1), transform .48s cubic-bezier(0,0,.2,1);
}

.brand-hero-left.brand-in,
.brand-communities .eyebrow.brand-in,
.brand-communities .h2.brand-in,
.brand-communities-sub.brand-in,
.brand-community-card.brand-in,
.brand-listings .eyebrow.brand-in,
.brand-listings .h2.brand-in,
.brand-prop-card.brand-in,
.brand-buysell-panel.brand-in,
.brand-cta-left.brand-in,
.brand-cta-right.brand-in,
.brand-story-grid.brand-in,
.brand-page-hero-inner.brand-in,
.brand-form-grid.brand-in,
.brand-agent.brand-in {
  opacity: 1;
  transform: translateY(0);
}

/* Removed max-width: 480px - styles now in mobile-first base */

/* ── Footer (injected by footer.js) ── */
footer > * {
    max-width: var(--max-w);
    margin-inline: auto;
}

/* ── Custom scrollbar ── */

/* Chrome/Edge/Safari: unset standard props so webkit pseudo-elements work */
@supports selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: unset !important;
        scrollbar-width: unset !important;
    }
}

/* Firefox: standard properties (doesn't support ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: var(--c21-black) var(--c21-cream);
        scrollbar-width: thin;
    }
}

::-webkit-scrollbar { width: 7px !important; height: 7px !important; }
::-webkit-scrollbar-track { background: var(--c21-cream) !important; }
::-webkit-scrollbar-thumb { background: var(--c21-black) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--c21-gold) !important; }
::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
::-webkit-scrollbar-corner { background: transparent !important; }

/* Mobile CTA width ----------------------------------------------------
   At phone widths a standalone CTA goes full width with its label centred.
   Sized to its own text it leaves a ragged edge against the copy above it,
   and of two stacked buttons the shorter reads as the lesser one purely
   because it is narrower.

   Brand's buttons are three separate classes rather than a base plus
   modifiers, so all three are named. The nav CTA is left alone - it sits in
   the header row, not in the page flow.

   Card actions and widget-injected markup are excluded. Written as a
   max-width override rather than a mobile-first base rule so the desktop
   layout cannot be affected by construction. */
@media (max-width: 640px) {
  .btn-primary,
  .btn-outline,
  .btn-dark {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .community .btn-primary,
  .community .btn-outline,
  .community .btn-dark,
  .ylopo-easy-widget .btn-primary,
  .ylopo-easy-widget .btn-outline,
  .ylopo-easy-widget .btn-dark { display: inline-block; width: auto; }

  .brand-hero-actions,
  .brand-cta-right { flex-direction: column; align-items: stretch; }

  /* The mobile base styles set .brand-cta-inner to align-items:flex-start,
     which shrinks .brand-cta-right to its widest button rather than the width
     of the band. Stretching the buttons inside it was not enough on its own -
     the container was already narrow, so they filled a short column and left a
     gap down the right of the CTA. This is the parent that has to give. */
  .brand-cta-inner { align-items: stretch; }
}

/* Backdrop for the nav drawer. Created by the template's script, not by the
   layout, so no markup changes. It exists as much to swallow the click as to
   dim the page: tapping beside an open drawer should dismiss it and nothing
   else, and a dim painted with a shadow on the drawer would let that tap fall
   through to a link underneath. Sits one below the drawer. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  z-index: 999;
}
.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}