/* ==========================================================================
   Home page.

   Structure and treatment follow carolinesweezeyrealestate.com, at John's
   request: a light page, a split navigation around a centred mark, a name and
   a search bar over the opening, then a run of alternating white, grey, slate
   and black panels. Quicksand for labels and body, a garamond for headings.
   Everything is set with generous space and small tracked capitals; nothing
   is decorated.

   Every colour, face and measure is a brand token from brand_css_vars(), so a
   second agent's site is a config change and not a rewrite of this file.
   ========================================================================== */

/* --- Page ------------------------------------------------------------------ */

.page-home {
  background: var(--c-paper);
  color: var(--c-ink);
  padding-top: 0;
  font-weight: 400;
}

.page-home .wrap { width: min(1280px, 100% - (var(--s-gutter) * 2)); margin-inline: auto; }

/* .center, .eyebrow-l and the light button variants live in site.css now,
   because the valuation page uses them too. */

/* --- Type helpers ---------------------------------------------------------- */

.h-serif {
  margin: 0 0 1.5rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.h-serif--light { color: var(--c-white); }

/* --- Opening --------------------------------------------------------------- */

.open {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--c-white);
  overflow: hidden;
  background: var(--c-slate);
}
.open__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.open__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 20, 32, 0.38) 0%, rgba(1, 20, 32, 0.10) 40%, rgba(1, 20, 32, 0.42) 100%);
}

.open__body {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(880px, 100% - (var(--s-gutter) * 2));
  margin: 0 auto;
  padding: 8rem 0 4rem;
  text-align: center;
}

/* The name, in her signature. The one large thing on the page. */
.open__script {
  margin: 0 0 0.6rem;
  font-family: var(--f-script, var(--f-display));
  font-weight: 400;
  font-size: clamp(3.6rem, 8.6vw, 7rem);
  line-height: 1.15;
  color: var(--c-white);
  text-shadow: 0 2px 42px rgba(1, 20, 32, 0.45);
}
.open__kicker {
  margin: 0 0 2.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.open__search {
  display: flex;
  align-items: center;
  width: min(620px, 100%);
  margin: 0 auto;
  background: var(--c-white);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1.6rem;
  box-shadow: 0 12px 40px rgba(1, 20, 32, 0.30);
}
.open__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink);
  padding: 0.7rem 0;
  outline: none;
}
.open__search input::placeholder { color: var(--c-muted); font-weight: 400; }
.open__search input::-webkit-search-decoration,
.open__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.open__search button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color .18s ease;
}
.open__search button:hover { background: var(--c-slate); }

.open__alt { margin: 1.6rem 0 0; font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.92); }
.open__alt a { color: var(--c-white); font-weight: 600; text-underline-offset: 4px; }

.open__fair {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1.05rem var(--s-gutter);
  background: rgba(1, 20, 32, 0.62);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
.open__fair a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.open__fair svg { flex: none; }

/* --- Intro ----------------------------------------------------------------- */

.intro {
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: none;
}
.intro__tag {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}
.intro__text {
  margin: 0.5rem 0 0;
  max-width: 46ch;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-body);
}
@media (max-width: 860px) {
  .intro__inner { grid-template-columns: 1fr; }
}

/* --- Three ways in ---------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 44vh, 460px);
  background-size: cover;
  background-position: center;
  color: var(--c-white);
  text-decoration: none;
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 26, 40, 0.44);
  transition: background-color .3s ease;
}
.tile:hover::before,
.tile:focus-visible::before { background: rgba(1, 26, 40, 0.28); }
.tile__label {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 1.05rem 1.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  backdrop-filter: blur(2px);
  background: rgba(1, 26, 40, 0.18);
  transition: background-color .3s ease;
}
.tile:hover .tile__label { background: rgba(1, 26, 40, 0.42); }

@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 200px; }
}

/* --- Meet ------------------------------------------------------------------
   Rebuilt light and editorial in the September 2026 redesign. The original
   slate-panel version's rules were lost in the first redesign round (their
   block sat between the replaced guide tiles and results); this replaces
   them rather than restoring them. --- */

.meet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  width: min(1280px, 100% - (var(--s-gutter) * 2));
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.meet__photo {
  margin: 0;
  position: relative;
  max-width: 440px;
  justify-self: end;
  width: 100%;
}
/* A single offset frame line behind the portrait. */
.meet__photo::before {
  content: "";
  position: absolute;
  inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid var(--c-line);
}
.meet__photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  /* The supplied headshot is a cutout on white; a mist panel behind it
     keeps the figure from dissolving into a white section. */
  background: var(--c-paper-alt);
}
.meet__panel { color: var(--c-body); }
.meet__inner { max-width: 56ch; }
.meet__inner .h-serif { margin-bottom: 1.6rem; }
.meet__bio {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--c-body);
}
.meet__sig {
  margin: 1.8rem 0 0;
  font-family: var(--f-script, var(--f-display));
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--c-ink);
}
.meet__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.9rem 0 0;
}

@media (max-width: 860px) {
  .meet { grid-template-columns: 1fr; gap: 3rem; }
  .meet__photo { max-width: 380px; margin-inline: auto; }
  .meet__photo::before { display: none; }
}

/* --- Results --------------------------------------------------------------- */

.results {
  background: var(--c-ink);
  color: var(--c-white);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
}
.results__label {
  margin: 0 0 clamp(2.8rem, 5vw, 4rem);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.results__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
  margin: 0 auto;
}
.result { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.4rem 2rem; }
.result + .result { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.result__n {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.result__l {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  max-width: 22ch;
  line-height: 1.6;
}
.results__source {
  margin: 3rem auto 0;
  max-width: 70ch;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  line-height: 1.7;
}
.results .source-note {
  margin: 3rem auto 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .results__row { grid-template-columns: 1fr; }
  .result { padding: 2rem 0; }
  .result + .result { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}

/* --- Portfolio ------------------------------------------------------------- */

.portfolio {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
  background: var(--c-paper);
}
.portfolio__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.portfolio__all {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 0.25rem;
  white-space: nowrap;
}
.portfolio__all:hover { color: var(--c-accent-deep); border-color: var(--c-accent-deep); }

.portfolio__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  text-align: left;
}
.portfolio__track::-webkit-scrollbar { display: none; }

.pcard {
  scroll-snap-align: start;
  display: block;
  color: var(--c-ink);
  text-decoration: none;
  background: var(--c-white);
}
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-paper-alt);
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__tag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  padding: 0.4rem 0.75rem;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 0.25rem 0;
}
.pcard__addr {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-ink);
}
.pcard__specs {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pcard__price {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--c-ink);
}
.pcard__attr {
  font-size: 0.68rem;
  color: var(--c-muted);
  line-height: 1.5;
}

.portfolio__nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 1.75rem;
}
.pbtn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.pbtn:hover { background: var(--c-ink); color: var(--c-white); }
.pbtn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 960px) {
  .portfolio__track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 620px) {
  .portfolio__track { grid-auto-columns: 86%; }
}

/* --- The record (testimonials slot) ---------------------------------------- */

.stories {
  background: var(--c-paper-alt);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.stories .h-serif--light { color: var(--c-ink); }
.stories__inner { max-width: 880px; margin-inline: 0; }
.stories__lede {
  margin: 0 0 2.2rem;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-ink);
}
.stories .source-note { margin: 2.5rem 0 0; text-align: left; font-size: 0.72rem; color: var(--c-muted); }

/* --- Neighbourhood guides -------------------------------------------------- */

.hoods {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
  background: var(--c-paper);
}
.hoods .h-serif { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.hoods__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.hood {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}
.hood__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-slate);
}
.hood__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.hood:hover .hood__media img { transform: scale(1.05); }
.hood__name {
  display: block;
  padding-top: 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Fewer than five photographed towns: centre them at tile width rather than
   leave empty columns. The towns without a photograph follow as a list. */
.hoods__grid--few { grid-template-columns: repeat(var(--hoods), minmax(0, 300px)); justify-content: center; }
.hoods__more {
  list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 60rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.75rem;
}
.hoods__more a {
  color: var(--c-ink); text-decoration: none; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-line); padding-bottom: 0.2rem;
}
.hoods__more a:hover, .hoods__more a:focus-visible { border-color: var(--c-accent); color: var(--c-accent-deep); }

@media (max-width: 960px) { .hoods__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .hoods__grid, .hoods__grid--few { grid-template-columns: repeat(2, 1fr); } }

/* --- Valuation ------------------------------------------------------------- */

.value {
  position: relative;
  background-color: var(--c-ink);
  background-size: cover;
  background-position: center;
  color: var(--c-white);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  text-align: center;
  overflow: hidden;
}
.value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 26, 40, 0.64);
}
.value__inner { position: relative; max-width: 820px; }
.value__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.value__points li::before { content: "\2713\00a0\00a0"; color: var(--c-white); }
.value__form {
  display: flex;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}
.value__form input {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.2rem;
  border: 0;
  background: var(--c-white);
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--c-ink);
}
.value__form .btn--white { white-space: nowrap; }

@media (max-width: 620px) {
  .value__form { flex-direction: column; }
}

/* --- Newsletter ------------------------------------------------------------ */

.letter {
  background: var(--c-paper);
  color: var(--c-ink);
  border-top: 1px solid var(--c-line);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
}
.letter__inner { max-width: 820px; }
.letter__lede {
  margin: 0 auto 2.2rem;
  max-width: 56ch;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--c-body);
}
.letter__form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  max-width: 760px;
  margin: 0 auto 1.4rem;
}
.letter__form input {
  min-width: 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--c-ink);
}
.letter__fine {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--c-muted);
}

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

/* --- Work with ------------------------------------------------------------- */

.work {
  background: var(--c-paper-alt);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center;
}
.work .h-serif--light { color: var(--c-ink); }
.work__inner { max-width: 720px; }
.work__lede {
  margin: 0 auto 2.2rem;
  max-width: 54ch;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--c-body);
}

/* --- Contact strip --------------------------------------------------------- */

.cstrip {
  background: var(--c-paper);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}
.cstrip__name {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cstrip__role {
  margin: 0 0 2.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.cstrip__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto 2.2rem;
}
.cstrip__list dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.4rem;
}
.cstrip__list dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink);
}
.cstrip__list dd a { color: inherit; text-decoration: none; }
.cstrip__list dd a:hover { text-decoration: underline; }
.cstrip__broker {
  margin: 0;
  font-size: 0.8rem;
  color: var(--c-body);
}

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

/* --- Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pcard__media img, .hood__media img { transition: none; }
}

/* --- The one orchestrated moment -------------------------------------------
   On load, her signature wipes in left to right, as if written, and the
   licence line and search follow. Once, on the home opening only, and not
   at all for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .open__script {
    clip-path: inset(-20% 0 -20% 0);
    animation: sig-write 1.2s cubic-bezier(.4, 0, .2, 1) both;
  }
  .open__kicker, .open__search, .open__alt {
    animation: open-rise .7s ease .75s both;
  }
  .open__search { animation-delay: .9s; }
  .open__alt { animation-delay: 1.05s; }
}
@keyframes sig-write {
  from { clip-path: inset(-20% 100% -20% 0); }
  to   { clip-path: inset(-20% 0 -20% 0); }
}
@keyframes open-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- Instagram (partials/instagram.php) ------------------------------------ */

.insta { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--c-paper); }
.insta__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}
.insta__handle {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent-soft);
  padding-bottom: 0.25rem;
  white-space: nowrap;
}
.insta__handle:hover { border-color: var(--c-accent-deep); }
.insta__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.insta__tile { position: relative; display: block; overflow: hidden; }
.insta__tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.insta__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 26, 40, 0);
  transition: background-color .3s ease;
}
.insta__tile:hover img, .insta__tile:focus-visible img { transform: scale(1.04); }
.insta__tile:hover::after, .insta__tile:focus-visible::after { background: rgba(1, 26, 40, 0.18); }

@media (max-width: 760px) {
  .insta__grid { grid-template-columns: repeat(2, 1fr); }
  .insta__grid .insta__tile:nth-child(n+5) { display: none; }
}

/* --- Meet, when a reel exists: the phone replaces the still ----------------- */

.meet__photo--video {
  max-width: 400px;
  padding: 10px;
  border: 1px solid var(--c-line);
  border-radius: 22px;
  background: var(--c-white);
  box-shadow: 0 18px 50px rgba(1, 38, 57, 0.12);
}
.meet__photo--video::before { display: none; }
.meet__video {
  display: block;
  width: 100%;
  /* height: auto, or the height attribute wins and aspect-ratio is inert. */
  height: auto;
  /* A 4:5 window on the 9:16 reel: stockier in the layout, cropped by the
     element rather than re-encoded, so fullscreen still plays the whole
     vertical frame. The 62% seat keeps the burned-in captions (low in
     frame) and her face in view; the name overlay at the very top is what
     gives, and the section heading already says it. */
  aspect-ratio: 4 / 5;
  object-position: center 62%;
  border-radius: 14px;
  background: var(--c-ink);
  object-fit: cover;
}

/* A phone: the header over the photograph is taller there (the broker bar
   and Signature's logo row sit above her name), so the opening clears it
   rather than starting underneath it. site.js sets --hnav-h. */
@media (max-width: 767px) {
  .open__body { padding-top: calc(var(--hnav-h, 0px) + 1.5rem); }
}