/* ==========================================================================
   Angela Cohen — North NJ Real Estate
   Design system. Static, dependency-free.

   PALETTE 1 — "Warm Ivory & Antique Gold"

   Two accent tokens on purpose, and the distinction matters:
     --gold   #B08D57  is only 3.09:1 on white — large text, rules, button
                       fills and hairlines ONLY. Never body copy on light.
     --accent #8A6D3B  is 4.85:1 on white — the body-safe brass, used for
                       links and any small text.
   Gold is used at large AREA on the dark bands (6.14:1 on espresso), which is
   where the luxury read actually comes from.

   Every pairing below is measured:
     ink on paper 18.11 · ink-soft on paper 9.96 · ink-mute on sand 4.77
     white on espresso 18.98 · gold on espresso 6.14 · accent on paper 4.85
   Re-measure before changing any of these. See _palette/showcase.html.
   ========================================================================== */

/* ---------- Self-hosted type (SIL OFL) ----------
   Same pairing and metric-matched fallbacks as cynthiatx.com: Cormorant Garamond for
   display, Inter (variable) for text. font-display: swap + size-adjusted fallbacks so
   the swap does not shift layout. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/cormorant-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); size-adjust: 96.4%; ascent-override: 95.8%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.06%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; }

:root {
  /* Ink & neutrals — warm blacks, not cold greys */
  --ink:            #12100E;   /* espresso — 18.98:1 on white */
  --ink-soft:       #3d434d;
  /* #6b7280 measured 4.25:1 on --paper-tint, under the WCAG AA 4.5:1 floor for
     small text. #616874 clears it on every background in the palette while
     staying visually "muted". Re-check with a contrast tool before lightening. */
  --ink-mute:       #616874;
  --ink-inverse:    #ffffff;
  --ink-inverse-soft: #c9c4bb; /* on espresso: 12.1:1 */
  --rule:           #e6e1d8;
  --paper:          #ffffff;
  --paper-warm:     #FBF9F6;   /* ivory */
  --paper-tint:     #F2ECE1;   /* sand */

  /* Accent — antique gold + body-safe brass */
  --gold:           #B08D57;   /* large text / rules / fills on dark only */
  --gold-bright:    #C9A66B;   /* button fill: ink text on it is 8.0:1 */
  --gold-soft:      #E3CFA6;   /* eyebrows and hairlines on dark */
  --ink-deep:       #0E0C0A;
  --accent:         #8A6D3B;   /* 4.85:1 on white — body-safe */
  --accent-deep:    #6d5530;
  --accent-wash:    #f6f1e7;

  /* Type scale */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --gap:      1.5rem;
  --section:  clamp(3rem, 7vw, 6rem);
  --measure:  68ch;

  /* Shape */
  --radius:   4px;
  --radius-lg: 8px;
  --shadow:   0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.12);
  --shadow-lg: 0 2px 4px rgba(20,22,26,.06), 0 24px 48px -20px rgba(20,22,26,.18);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.3rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 650; letter-spacing: 0; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 650; }

.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; flex: none; }
.center .eyebrow { justify-content: center; }
.lede { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); color: var(--ink-soft); line-height: 1.65; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }
.section { padding-block: var(--section); }
/* Flush sections run edge to edge with no padding — used by the gallery so the
   image wall is genuinely edgeless rather than sitting in a container. */
.section--flush { padding: 0; }
.section--tint { background: var(--paper-warm); }
.section--dark { background: var(--ink-deep); color: var(--ink-inverse-soft); }
.section--dark h2 { color: #fff; }
.section--dark .lede { color: var(--ink-inverse-soft); }
.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .btn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.section--rule { border-top: 1px solid var(--rule); }
.grid { display: grid; gap: var(--gap); }
@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 60rem) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.stack > * + * { margin-top: var(--gap); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,246,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .8rem;
}
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.2; }
.brand__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--ink); }
.brand__meta { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a:not(.btn) {
  position: relative; font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding-block: .35rem;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 600; }
.nav__cta { margin-left: .5rem; }
.nav__toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .45rem .7rem; cursor: pointer; font: inherit;
}
@media (max-width: 62rem) {
  .nav__toggle { display: block; }
  .nav {
    display: none; position: absolute; inset: 100% 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--paper-warm); border-bottom: 1px solid var(--rule);
    padding: .5rem 1.25rem 1.25rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  .nav a:not(.btn)::after { display: none; }
  .nav__cta { margin: 1rem 0 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 2px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
/* Gold is the single call-to-action colour, as on cynthiatx.com. Ink text on
   --gold-bright measures 8.0:1, so it reads on paper and on video alike. */
.btn--primary { background: var(--gold-bright); color: var(--ink-deep); border-color: var(--gold-bright); }
.btn--primary:hover { background: #d8b878; border-color: #d8b878; color: var(--ink-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn--sm { padding: .62rem 1.15rem; font-size: .86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Hero ----------
   Every page opens on a full-bleed video of the New Jersey skyline. The plain
   .hero (no video) remains for any page without a clip. */
.hero { background: var(--paper-warm); border-bottom: 1px solid var(--rule); }
.hero__inner { padding-block: clamp(3rem, 8vw, 6rem); }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 52ch; margin-bottom: 1.75rem; }

/* Legibility is the constraint that shapes the scrim. White text over moving video
   is not reliably readable, so the scrim is heaviest where the copy sits (left) and
   falls away to the right, where the skyline is allowed to show. Measured against
   the brightest frames of every clip (build/check_contrast.py): the copy area never
   drops below 4.5:1 for white text. Do not lighten without re-running it.
   Height uses svh so mobile browser chrome collapsing doesn't jump the layout. */
.hero--video {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  border-bottom: 0;
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  min-height: clamp(21rem, 52svh, 30rem);
}
.hero--home { min-height: clamp(34rem, 88svh, 50rem); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,12,10,.88) 0%, rgba(14,12,10,.80) 36%, rgba(14,12,10,.54) 66%, rgba(14,12,10,.18) 100%),
    linear-gradient(to top, rgba(14,12,10,.62) 0%, rgba(14,12,10,0) 34%),
    linear-gradient(to bottom, rgba(14,12,10,.5) 0%, rgba(14,12,10,0) 24%);
}
@media (max-width: 52rem) {
  .hero__scrim { background: linear-gradient(to bottom, rgba(14,12,10,.74), rgba(14,12,10,.78)); }
}
.hero--video .hero__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6.5rem); width: min(100% - 2.5rem, 74rem); }
.hero--home .hero__inner { padding-block: clamp(4rem, 9vw, 7rem); }
.hero--video h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero--home h1 { max-width: 19ch; font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.4rem); }
.hero--video .lede { color: #EFE9DE; max-width: 46ch; }
.hero--video .eyebrow { color: var(--gold-soft); }
.hero--video .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hero--video .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
.hero--video .crumbs { padding: 0 0 1.6rem; color: rgba(255,255,255,.78); }
.hero--video .crumbs a { color: rgba(255,255,255,.78); }
.hero--video .crumbs a:hover { color: #fff; }
.hero--video .crumbs li + li::before { color: rgba(255,255,255,.4); }
.hero--page h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); }
.hero--page .lede { margin-bottom: 1.5rem; }

/* Home: copy left, framed portrait right — the same composition as cynthiatx.com. */
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.hero__places {
  margin: 2.2rem 0 0; padding-top: 1.1rem; max-width: none;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero__portrait { margin: 0; position: relative; justify-self: end; width: min(100%, 24rem); }
.hero__portrait::before {
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--gold); z-index: 0;
}
.hero__portrait img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7);
}
@media (max-width: 59.99rem) { .hero__portrait { display: none; } }

/* WCAG 2.2.2 — auto-starting motion must be pausable, visibly. */
.hero__pause {
  position: absolute; z-index: 2;
  right: 1rem; top: 1rem;
  background: rgba(18,16,14,.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: .4rem 1rem;
  font: inherit; font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.hero__pause:hover { background: rgba(18,16,14,.85); border-color: #fff; }
.hero__pause[hidden] { display: none; }
@media (max-width: 40rem) {
  .hero--home { min-height: clamp(30rem, 84svh, 40rem); }
  .hero__pause { right: .75rem; top: .75rem; }
}

/* Reduced motion: the poster alone, no video, no pause button. site.js removes the
   src; this hides the affordance so it doesn't dangle. */
@media (prefers-reduced-motion: reduce) {
  .hero__pause { display: none !important; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  padding: 1.6rem; box-shadow: none;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }
.card__meta { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .5rem; }

.card--area { text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card--area::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.card--area:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.card--area:hover::before { transform: scaleX(1); }
.card--area:hover h3 { color: var(--accent-deep); }

/* ---------- Stat strip ---------- */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { border-left: 2px solid var(--accent); padding-left: 1rem; }
.stat__num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 500; line-height: 1.1; }
.stat__label { font-size: .85rem; color: var(--ink-mute); }

/* ---------- Prose (guides, legal) ---------- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.7em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 650; background: var(--paper-warm); }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;
}

/* ---------- Notice / callout ---------- */
.notice {
  background: var(--accent-wash); border: 1px solid #e6dcc6;
  border-radius: var(--radius-lg); padding: 1.25rem 1.4rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice--warn { background: #fdf4ec; border-color: #f0dcc6; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .82rem; color: var(--ink-mute); }
.field .req { color: #a4341f; }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  /* #c9c5bd measured 1.72:1 against white — below the WCAG 1.4.11 3:1 floor for
     the boundary that identifies a form control. #8b8880 clears it. */
  border: 1px solid #8b8880; border-radius: var(--radius);
  padding: .7rem .8rem; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--accent-wash); }
textarea { min-height: 8rem; resize: vertical; }
.checkbox { display: flex; gap: .7rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .3rem; flex: none; }
.checkbox label { font-weight: 400; font-size: .9rem; line-height: 1.5; }
.hp { position: absolute; left: -9999px; }
.form__status { font-size: .92rem; padding: .8rem 1rem; border-radius: var(--radius); display: none; }
.form__status[data-state="error"] { display: block; background: #fdf0ed; border: 1px solid #f0cfc6; color: #7a2a17; }
.form__status[data-state="ok"] { display: block; background: #eef6ef; border: 1px solid #c9e2cd; color: #1f4d29; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1.05rem 0; font-weight: 600; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq__body { padding-bottom: 1.15rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .84rem; color: var(--ink-mute); padding-top: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; max-width: none; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--rule); }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-deep); color: #c8cbd1; padding-block: 4rem 2rem; margin-top: 0; font-size: .92rem; border-top: 3px solid var(--gold); }
.footer a { color: #e8e6e1; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h2, .footer h3 { color: #fff; font-family: var(--font-body); font-size: .8rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .5rem; max-width: none; }
.footer__legal { border-top: 1px solid #2b2f36; margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; color: #9aa0a8; }
.footer__legal p { max-width: none; }
.footer__legal p + p { margin-top: .7rem; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }
.footer__badges img { height: 30px; width: auto; }

/* ---------- N.J.A.C. 11:5-6.1 compliant broker attribution ----------
   (b)1: the broker's regular business name must be MORE PROMINENT than the
         salesperson's or team's name.
   (b)2/(b)3: the required office-telephone / link information must appear in
         wording AS LARGE AS THE PREDOMINANT SIZE WORDING on the page.
   The size below is therefore deliberately large and NOT footer-small.
   Verify the final rendered size against the largest text on each page
   before launch. */
.footer__broker {
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
  margin-bottom: 1.4rem;
}
.footer__broker-name {
  font-family: var(--font-display);
  /* N.J.A.C. 11:5-6.1(b)1: the brokerage's regular business name must render
     LARGER/more prominent than the salesperson's name on EVERY viewport.
     .brand__name (the agent's name, in the masthead) is a fixed 1.4rem = 22.4px.
     The clamp floor therefore MUST stay above 22.4px: 1.55rem = 24.8px.
     An earlier floor of 1.35rem (21.6px) inverted the hierarchy below ~862px
     viewport — i.e. on mobile, the majority of sessions. Do not lower this. */
  font-size: clamp(1.55rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 .35rem;
  max-width: none;
}
.footer__broker-line {
  font-size: 1.0625rem;                        /* NOT .82rem — see (b)2/(b)3 */
  line-height: 1.55;
  color: #d7dae0;
  margin: 0;
  max-width: 60ch;
}
.footer__broker-line a { color: #ffffff; text-decoration: underline; }
.footer__agent-line { font-size: .95rem; color: #b6bbc3; }

/* ---------- Social links (footer) ----------
   cynthiatx.com pattern: a plain, named list rather than icon soup. Named links
   are better for accessibility and for the entity-consolidation "sameAs" signal. */
.socials {
  list-style: none; padding: 0; margin: 1.1rem 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
}
.socials li { margin: 0; max-width: none; }
.socials a {
  font-size: .88rem; color: #b6bbc3; text-decoration: none;
  border-bottom: 1px solid rgba(176,141,87,.45);
  padding-bottom: 1px;
}
.socials a:hover { color: #fff; border-bottom-color: var(--gold); }

/* ---------- Edge-to-edge gallery ----------
   "Edgeless" = genuinely full-bleed: no container, no gutters, no gaps. The grid
   spans the viewport edge to edge and the tiles butt directly against each other,
   so it reads as one continuous image wall rather than a set of cards.

   Tiles are square-cropped via aspect-ratio so images and video posters align on a
   shared rhythm regardless of their native shape. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
}
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.gallery__item img,
.gallery__item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.gallery__item:hover img,
.gallery__item:hover video { transform: scale(1.04); }

/* A restrained overlay so tiles feel like one surface until touched. */
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,16,14,.42) 0%, rgba(18,16,14,0) 46%);
  opacity: 1;
  transition: opacity .3s;
  pointer-events: none;
}
.gallery__item:hover::after { opacity: .55; }

/* Video / reel affordance. */
.gallery__badge {
  position: absolute; z-index: 2;
  left: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(18,16,14,.66);
  color: #fff;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.gallery__badge svg { width: .7rem; height: .7rem; fill: currentColor; }

.gallery__caption {
  position: absolute; z-index: 2;
  left: .7rem; right: .7rem; bottom: .7rem;
  color: #fff; font-size: .8rem; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.gallery__item--has-badge .gallery__caption { bottom: .7rem; padding-left: 3.4rem; }

/* Lightbox — a native <dialog>, so focus trapping and Esc come for free. */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
}
.lightbox::backdrop { background: rgba(10,9,8,.94); }
.lightbox__inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 1.25rem;
}
.lightbox video, .lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: .5rem 1rem;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.2); }

@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover img, .gallery__item:hover video { transform: none; }
}

/* ---------- Editorial portrait ----------
   Her photo is the one warm human element on the page, so it is framed rather than
   floated: a hairline gold rule and generous space do more than a drop shadow. */
.portrait {
  margin: 0;
  position: relative;
}
.portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  background: var(--paper-tint);
}
.portrait figcaption {
  font-size: .82rem;
  color: var(--ink-mute);
  margin-top: .7rem;
  max-width: none;
}
.portrait--rule { border-top: 2px solid var(--gold); padding-top: 0; }
/* Round crop used in the About/sidebar context. */
.portrait--round img { border-radius: 50%; aspect-ratio: 1/1; }

/* Home page "meet Angela" band: portrait beside copy, stacking on mobile. */
.intro-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .intro-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ---------- Utility ---------- */
.muted { color: var(--ink-mute); }
.small { font-size: .88rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rule-list { list-style: none; padding: 0; }
.rule-list li { border-bottom: 1px solid var(--rule); padding: .8rem 0; margin: 0; max-width: none; }

/* ------------------------------------------------------------------
   StackPass chat widget. It is injected into the page DOM (no iframe), so the
   site's bare input/label rules above leak into it. Without this the consent
   checkbox stretched to full width and squeezed its label into a 57px column.
   ------------------------------------------------------------------ */
.stackpass-chat-panel input[type="checkbox"] {
  width: auto; min-height: 0; padding: 0; margin: .2rem .5rem 0 0; flex: none;
}
.stackpass-chat-panel label { font-weight: 400; }
.stackpass-chat-panel p, .stackpass-chat-panel li { max-width: none; }