/* ===========================================================================
   It's Michele — global stylesheet
   ---------------------------------------------------------------------------
   Everything from "Original design styles" down is carried over verbatim from
   the bundled design file (index (11).html), just unminified.

   Note: the rest of the design still lives in inline `style="..."` attributes
   inside index.html. That was intentional for this conversion — it keeps the
   appearance byte-for-byte identical to the original. Sections can be lifted
   out into classes here one at a time as the site is edited.
   =========================================================================== */

/* --- Original design styles ---------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #F6F2EA;
  color: #14130F;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #123069;
  text-decoration: none;
}

a:hover {
  color: #0C2049;
}

@keyframes heroDrift {
  0%   { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
  50%  { transform: scale(1.16) translate3d(1.5%, -1.5%, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
}

@keyframes heroSweep {
  0%   { opacity: .35; transform: translateX(-18%); }
  50%  { opacity: .7;  transform: translateX(12%); }
  100% { opacity: .35; transform: translateX(-18%); }
}

/* --- Page switching ------------------------------------------------------ */
/* The original file was a single-page app: one document holding all seven
   pages, with only one visible at a time. Same idea here — assets/js/app.js
   moves the `is-active` class between `.page` elements. Home is marked active
   in the HTML so the site still renders correctly with JavaScript disabled. */

.page {
  display: none;
}

.page.is-active {
  display: block;
}

/* Clickable elements that are not real links (nav items, cards, buttons).
   These already carry cursor:pointer inline; this just adds keyboard focus. */
[data-nav]:focus-visible,
[data-pick]:focus-visible {
  outline: 2px solid #123069;
  outline-offset: 3px;
}

/* --- Hero background video: pause/play control -----------------------------
   Created by app.js only when a video is actually playing, so it never
   appears for the mobile or reduced-motion still. Sits bottom-right, clear
   of the headline and search box in the bottom-left.
--------------------------------------------------------------------------- */

.hero-motion-toggle {
  position: absolute;
  right: clamp(16px, 4vw, 34px);
  bottom: clamp(16px, 4vw, 30px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(246, 242, 234, .34);
  border-radius: 50%;
  background: rgba(8, 16, 36, .42);
  color: rgba(246, 242, 234, .86);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.hero-motion-toggle:hover {
  background: rgba(8, 16, 36, .7);
  border-color: rgba(246, 242, 234, .62);
  color: #F6F2EA;
}

.hero-motion-toggle:focus-visible {
  outline: 2px solid #F6F2EA;
  outline-offset: 3px;
}

/* --- H-01  Site header ------------------------------------------------------
   Final hierarchy: brand (left) · primary nav (centred) · one CTA (right).
   Centred ~1240px container. Rendered identically on every page with a
   fixed 104px desktop height so a full-page navigation (e.g. to /guidance)
   never resizes or shifts it. One hairline bottom border, no shadow. At
   1024px and below everything past the brand collapses behind one trigger.
--------------------------------------------------------------------------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 104px;
  min-height: 104px;
  box-sizing: border-box;
  background: #F6F2EA;            /* solid, opaque */
  border-bottom: 1px solid rgba(20, 19, 15, .12);
}

.site-head {
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
}

/* LEFT — brand */
.site-head__id {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
}
.site-head__mark { height: 44px; width: auto; display: block; flex: none; }
.site-head__idtext { display: flex; flex-direction: column; min-width: 0; }
.site-head__name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #14130F;
}
.site-head__role {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
  font-weight: 500;
  color: #123069;
}

/* CENTRE — primary nav, visually centred, even 28px gaps */
.site-head__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 500;
}
.site-head__navlink {
  color: #14130F;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  padding: 6px 0;
}
.site-head__navlink:hover { color: #123069; }
.site-head__navlink:focus-visible { outline: 2px solid #123069; outline-offset: 4px; }

/* RIGHT — one CTA, ~46px tall, sized to its label */
.site-head__actions { justify-self: end; display: flex; align-items: center; }
.site-head__cta.btn-primary {
  width: auto;
  padding: 15px 24px;
  white-space: nowrap;
}

/* mobile-only pieces — hidden on desktop */
.site-head__toggle { display: none; }
.site-menu { display: none; }

/* ---- 1024px and below : one menu behind one trigger ---- */
@media (max-width: 1024px) {
  .mast { height: 76px; min-height: 76px; }
  .site-head {
    grid-template-columns: 1fr auto;
    column-gap: 14px;
  }
  .site-head__nav,
  .site-head__actions { display: none; }
  .site-head__mark { height: 38px; }
  .site-head__name { font-size: 20px; }

  .site-head__toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #2C2822;
    cursor: pointer;
  }
  .site-head__toggle:hover { color: #123069; }
  .site-head__toggle:focus-visible { outline: 2px solid #123069; outline-offset: 2px; }

  .site-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #F6F2EA;
    border-bottom: 1px solid rgba(20, 19, 15, .12);
    box-shadow: 0 22px 44px rgba(20, 19, 15, .14);
    padding: 12px clamp(20px, 5vw, 40px) 26px;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .site-menu[hidden] { display: none; }
  .site-menu__nav { display: flex; flex-direction: column; }
  .site-menu__link {
    padding: 15px 4px;
    border-bottom: 1px solid rgba(20, 19, 15, .1);
    font-size: 15px;
    letter-spacing: .045em;
    text-transform: uppercase;
    font-weight: 500;
    color: #14130F;
    text-decoration: none;
    cursor: pointer;
  }
  .site-menu__link:focus-visible { outline: 2px solid #123069; outline-offset: -2px; }
  .site-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
  }
  .site-menu__phone {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 20px;
    color: #14130F;
    text-decoration: none;
  }
  .site-menu__cta { width: 100%; }
}

@media (max-width: 380px) {
  .site-head__role { display: none; }
}

/* ===========================================================================
   BUTTONS  —  primary (solid) + secondary (outlined) CTAs
   Softer warm charcoal, gentle 6px radius, room to breathe, quiet hover lift.
   .btn-primary works inline (auto width) and inside flex-column forms
   (stretches full width). .btn-secondary matches its height exactly.
   ========================================================================= */
.btn-primary,
.btn-secondary {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 1.05rem 1.7rem;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.btn-primary {
  background: #24211D;                 /* warm charcoal, not pure black */
  color: #F6F2EA;
  border: 1px solid #24211D;
}
.btn-primary:hover { background: #373129; border-color: #373129; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid #123069; outline-offset: 3px; }
.btn-primary[disabled] { opacity: .6; cursor: default; transform: none; }

.btn-secondary {
  background: rgba(244, 240, 232, .5);  /* very light warm cream */
  color: #24211D;
  border: 1px solid #746D62;            /* thin warm-gray */
}
.btn-secondary:hover { background: #EEE8DC; border-color: #5C554A; }
.btn-secondary:active { transform: translateY(0); }
.btn-secondary:focus-visible { outline: 2px solid #123069; outline-offset: 3px; }

/* Button group: one line on desktop when it fits, wrapped with equal
   heights otherwise; full-width stack on small screens. */
.btn-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.btn-group > .btn-primary,
.btn-group > .btn-secondary { flex: 0 1 auto; }
@media (max-width: 560px) {
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group > .btn-primary,
  .btn-group > .btn-secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .site-head__cta:hover,
  .btn-primary:hover, .btn-primary:active { transform: none; }
}

/* ===========================================================================
   HOMEPAGE HERO  --  cinematic full-screen
   ---------------------------------------------------------------------------
   Layers, bottom to top:
     .hero__media   video, with the poster as a CSS background so there is
                    never a blank frame while the clip loads
     .hero__scrim   two-axis darkening, heaviest bottom-left under the copy
     .hero__inner   the content stack

   The word HOME is set large in solid warm-ivory Instrument Serif over the
   dimmed media -- a dominant editorial headline, with the italic script
   tagline sitting directly beneath it. No image fill inside the letters.
   ========================================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 65vh;
  min-height: 65svh;
  background: #14120E;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #14120E url('../img/hero-poster.jpg') center 34% / cover no-repeat;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(10, 9, 7, .90) 0%,
      rgba(12, 11, 8, .78) 30%,
      rgba(14, 13, 10, .52) 60%,
      rgba(16, 15, 11, .38) 100%),
    linear-gradient(to top,
      rgba(8, 7, 5, .88) 0%,
      rgba(10, 9, 7, .40) 45%,
      rgba(12, 11, 8, .30) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 64px) 0;
}

/* --- identity line: small and deliberately quiet -------------------------- */
.hero__id {
  margin: 0 0 clamp(20px, 3.4vh, 36px);
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .74);
}
.hero__dot { opacity: .5; margin: 0 .35em; }

/* --- HOME ----------------------------------------------------------------- */
.hero__title { margin: 0; font-weight: 400; }

.hero__word {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(3.6rem, 12vw, 11rem);
  line-height: .85;
  letter-spacing: .015em;
  color: #F4ECDB;
}

.hero__tag {
  display: block;
  margin-top: clamp(6px, 1.2vh, 14px);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: rgba(242, 237, 228, .93);
}

/* --- supporting copy ------------------------------------------------------ */
.hero__lede {
  margin: clamp(20px, 3.2vh, 34px) 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.68;
  color: rgba(242, 237, 228, .82);
}
.hero__lede em {
  font-style: normal;
  font-weight: 600;
  color: #F2EDE4;
}

/* --- calls to action ------------------------------------------------------ */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(26px, 3.8vh, 40px);
}

.hero__btn {
  display: inline-block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 18px 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.hero__btn--solid:hover, .hero__btn--ghost:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .hero__btn--solid:hover, .hero__btn--ghost:hover { transform: none; }
}
.hero__btn--solid {
  background: #F2EDE4;
  color: #14130F;
}
.hero__btn--solid:hover { background: #fff; color: #14130F; }
.hero__btn--ghost {
  background: transparent;
  color: #F2EDE4;
  border-color: rgba(242, 237, 228, .5);
}
.hero__btn--ghost:hover {
  background: rgba(242, 237, 228, .1);
  border-color: rgba(242, 237, 228, .85);
}
.hero__btn:focus-visible { outline: 2px solid #F2EDE4; outline-offset: 3px; }

/* --- proof line: sits just under the CTAs -------------------------------- */
.hero__proof {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  max-width: 40em;
  font-size: clamp(13px, 1.3vw, 15.5px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(242, 237, 228, .92);
}
.hero__proof .hero__dot { opacity: .45; }

/* --- service areas -------------------------------------------------------- */
.hero__areas {
  margin: clamp(24px, 4vh, 44px) 0 0;
  font-size: clamp(8.5px, .92vw, 10px);
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.9;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .58);
}

/* --- the reveal: one gentle rise, staggered ------------------------------- */
@keyframes heroRise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroWordIn {
  from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.hero__id    { animation: heroRise .85s cubic-bezier(.22,.68,.28,1) both; }
.hero__word  { animation: heroWordIn 1.25s cubic-bezier(.2,.7,.25,1) .12s both; }
.hero__tag   { animation: heroRise .95s cubic-bezier(.22,.68,.28,1) .58s both; }
.hero__lede  { animation: heroRise .9s cubic-bezier(.22,.68,.28,1) .78s both; }
.hero__ctas  { animation: heroRise .9s cubic-bezier(.22,.68,.28,1) .94s both; }
.hero__proof { animation: heroRise .9s cubic-bezier(.22,.68,.28,1) 1.06s both; }
.hero__areas { animation: heroRise .9s cubic-bezier(.22,.68,.28,1) 1.2s both; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { min-height: 70vh; min-height: 70svh; }
}

@media (max-width: 700px) {
  .hero { align-items: flex-end; min-height: 72svh; }
  .hero__inner { padding: clamp(70px, 14vh, 130px) 0 clamp(34px, 6vh, 54px); }
  .hero__word { font-size: clamp(3.4rem, 16.5vw, 5.6rem); letter-spacing: .01em; }
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(8, 7, 5, .93) 0%,
        rgba(10, 9, 7, .62) 45%,
        rgba(12, 11, 8, .34) 100%);
  }
  .hero__lede { max-width: none; }
  .hero__ctas { gap: 10px; }
  .hero__btn { flex: 1 1 100%; text-align: center; padding: 16px 20px; }
  .hero__areas { letter-spacing: .2em; }
}

@media (max-width: 380px) {
  .hero__word { font-size: 2.8rem; }
  .hero__id { letter-spacing: .18em; }
}

/* --- reduced motion: no reveal, final state ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__id,
  .hero__word,
  .hero__tag,
  .hero__lede,
  .hero__ctas,
  .hero__proof,
  .hero__areas {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ===========================================================================
   TESTIMONIALS CAROUSEL
   ---------------------------------------------------------------------------
   Six real reviews live in the markup at all times. On screens >= 760px the
   carousel shows three at a time; below that, one at a time. assets/js/app.js
   adds `is-ready`, then auto-advances every 7s (paused on hover / focus, and
   never started when the visitor asks for reduced motion). With JavaScript
   off, `is-ready` is absent and all six simply wrap into a static grid.
   Dark ground, italic Instrument Serif quote and the small tracked cite are
   carried over unchanged from the static section this replaced.
   ========================================================================= */

.tst {
  background: #14130F;
  color: #F6F2EA;
}

.tst__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(58px, 7.5vw, 96px) clamp(20px, 5vw, 40px);
}

.tst__viewport { overflow: hidden; }

.tst__track {
  display: flex;
  flex-wrap: wrap;                       /* no-JS fallback: six wrap into a grid */
  align-items: flex-start;
  row-gap: clamp(44px, 5vw, 64px);
}

.tst.is-ready .tst__track {
  flex-wrap: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .tst.is-ready .tst__track {
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  }
}

.tst__item {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 760px) {
  .tst__item {
    flex-basis: 33.3333%;
    padding-right: 48px;                 /* column gutter, matches old grid gap */
  }
}

.tst__quote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.tst__cite {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .55);
}

.tst__controls {
  display: none;
  align-items: center;
  gap: 16px;
  margin-top: clamp(34px, 4vw, 48px);
}

.tst.is-ready .tst__controls { display: flex; }

.tst__dots {
  display: flex;
  gap: 8px;
  margin-right: auto;
}

.tst__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 242, 234, .28);
  cursor: pointer;
  transition: background .18s ease;
}

.tst__dot[aria-current="true"] { background: rgba(246, 242, 234, .85); }
.tst__dot:focus-visible { outline: 2px solid #F6F2EA; outline-offset: 3px; }

.tst__btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 15px;
  border: 1px solid rgba(246, 242, 234, .34);
  background: transparent;
  color: rgba(246, 242, 234, .86);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.tst__btn:hover {
  background: rgba(246, 242, 234, .1);
  border-color: rgba(246, 242, 234, .7);
  color: #F6F2EA;
}

.tst__btn:focus-visible { outline: 2px solid #F6F2EA; outline-offset: 3px; }

/* --- Contact form: "I'm..." radio chips ---------------------------------
   Real radio inputs are visually hidden inside each chip label; :has()
   fills the chosen one. Browsers without :has() still work — the chip
   just doesn't fill (the radio state is still submitted).
--------------------------------------------------------------------------- */
label:has(> input[name="interest"]) { border-radius: 6px; transition: background .15s ease, color .15s ease; }
label:has(> input[name="interest"]:checked) { background: #14130F; color: #F6F2EA; }
label:has(> input[name="interest"]:focus-visible) { outline: 2px solid #123069; outline-offset: 2px; }

/* --- Lead form validation state --------------------------------------- */
[data-lead-form] [aria-invalid="true"] { border-color: #8A2A2A; }

/* --- Softer corners, site-wide -----------------------------------------
   Text inputs/textareas and the testimonial-carousel nav buttons were the
   last sharp-cornered controls on the site; round them to match buttons,
   chips, and cards elsewhere.
--------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], textarea { border-radius: 6px; }
.tst__btn { border-radius: 50%; }

/* --- Sell page: consultation form anchor offset ---------------------- */
#sell-consult { scroll-margin-top: 90px; }

/* --- Explore the Area: community cards -------------------------------
   Four-across grid (grid rules live inline on the section). Every card
   uses the same 3:2 landscape image with object-fit: cover so nothing is
   letterboxed and every frame is the same height. Focal point is nudged
   per image via object-position inline where a card needs it.
--------------------------------------------------------------------------- */
.community-card__image-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: #EDE7DB;
}
.community-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ===========================================================================
   COMMUNITY PAGES  (/communities/<city>)
   Standalone pages — their own header/footer with real links back into the
   single-page app. Reuses the site's type, colour and spacing tokens.
   ========================================================================= */

.cp-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 234, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20, 19, 15, .1);
}
.cp-head__row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 13px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2.6vw, 28px);
}
.cp-head__id { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.cp-head__mark { height: 40px; width: auto; display: block; }
.cp-head__name { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.04; color: #14130F; display: block; }
.cp-head__role { font-size: 8.5px; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; font-weight: 500; color: #123069; margin-top: 3px; display: block; }
.cp-head__nav { display: flex; align-items: center; gap: 10px clamp(12px, 1.6vw, 24px); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.cp-head__nav a { color: #14130F; text-decoration: none; }
.cp-head__nav a:hover { color: #123069; }
.cp-head__phone { font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; color: #14130F; text-decoration: none; white-space: nowrap; }
.cp-head__phone:hover { color: #123069; }
@media (max-width: 900px) {
  .cp-head__nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cp-head__nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) { .cp-head__role { display: none; } }

.cp-hero { position: relative; background: #E2DCD0; }
.cp-hero__img {
  width: 100%;
  height: clamp(240px, 42vh, 420px);
  object-fit: cover;              /* = background-size: cover */
  object-position: center;        /* per-image override via inline style */
  filter: none;                   /* natural colour, contrast and detail */
  display: block;
}
/* Light-to-medium overlay only — enough to hold the bottom-left title.
   Horizontal wash (darker toward the title side) plus a slight lift at the
   very bottom so the text stays readable over a bright photo. */
.cp-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(18, 16, 13, .34) 0%, rgba(18, 16, 13, 0) 42%),
    linear-gradient(90deg, rgba(18, 16, 13, .62) 0%, rgba(18, 16, 13, .30) 55%, rgba(18, 16, 13, .18) 100%);
}
.cp-hero__inner { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) clamp(24px, 4vw, 40px); }
.cp-hero__eyebrow { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(246, 242, 234, .8); margin: 0 0 10px; }
.cp-hero__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(40px, 7vw, 76px); line-height: 1; letter-spacing: -.02em; color: #F6F2EA; margin: 0; }

.cp-body { max-width: 720px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) clamp(20px, 5vw, 40px) clamp(64px, 8vw, 96px); }
.cp-body p { font-size: 17px; line-height: 1.75; font-weight: 300; color: #443F36; margin: 0 0 20px; }
.cp-body .cp-note { font-size: 13.5px; color: #7A7367; border-top: 1px solid rgba(20, 19, 15, .14); padding-top: 18px; margin-top: 8px; }

/* Small secondary external resource link (city government site) */
.cp-extlink { font-size: 13px; margin: -4px 0 22px; }
.cp-extlink a { color: #123069; text-decoration: none; border-bottom: 1px solid rgba(18, 48, 105, .3); padding-bottom: 1px; }
.cp-extlink a:hover { border-bottom-color: #123069; }
.cp-extlink a:focus-visible { outline: 2px solid #123069; outline-offset: 3px; }
.cp-extlink .cp-extlink__icon { font-size: .85em; margin-left: 3px; }

.u-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.cp-cta { display: inline-block; box-sizing: border-box; padding: 1.05rem 1.7rem; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; text-decoration: none; border: 1px solid transparent; border-radius: 6px; transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease; }
.cp-cta--solid { background: #24211D; color: #F6F2EA; border-color: #24211D; }
.cp-cta--solid:hover { background: #373129; border-color: #373129; transform: translateY(-1px); }
.cp-cta--ghost { border-color: #746D62; background: rgba(244, 240, 232, .5); color: #24211D; }
.cp-cta--ghost:hover { background: #EEE8DC; border-color: #5C554A; }
.cp-cta:focus-visible { outline: 2px solid #123069; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cp-cta--solid:hover { transform: none; } }

.cp-foot { background: #14130F; color: rgba(246, 242, 234, .72); }
.cp-foot__row { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 40px); display: flex; flex-wrap: wrap; gap: 24px 60px; align-items: baseline; justify-content: space-between; }
.cp-foot__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; color: #F6F2EA; line-height: 1.2; }
.cp-foot__name span { display: block; font-family: 'Archivo', system-ui, sans-serif; font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase; color: #9AA6BC; margin-top: 4px; }
.cp-foot a { color: inherit; }
.cp-foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.cp-foot__links a { text-decoration: none; }
.cp-foot__legal { max-width: 1240px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 40px) 44px; border-top: 1px solid rgba(246, 242, 234, .14); font-size: 11px; line-height: 1.8; color: rgba(246, 242, 234, .5); }

/* ===========================================================================
   GUIDANCE PAGE  (/guidance)  —  "Guidance for Your Next Move"
   Button-based accordion (script at the foot of guidance.html): one panel
   open at a time, height + opacity transition only, the clicked row stays
   pinned in the viewport. Uses the site's type, colour and spacing.
   ========================================================================= */
.faq { max-width: 760px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 40px) clamp(20px, 4vw, 40px); }
.faq__lede { font-size: 16px; line-height: 1.75; font-weight: 300; color: #443F36; margin: 0 0 clamp(28px, 4vw, 44px); max-width: 42em; }
.faq__group { margin: 0 0 clamp(34px, 5vw, 54px); scroll-margin-top: 116px; }
.faq__group-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 6px; }

.faq-item { border-bottom: 1px solid rgba(20, 19, 15, .16); }
.faq-item:first-of-type { border-top: 1px solid rgba(20, 19, 15, .16); }
.faq-item__q {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: 18px;
  align-items: baseline;
  justify-content: space-between;
  text-align: left;
  padding: 20px 2px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.3;
  color: #14130F;
}
.faq-item__q::after {
  content: "+";
  flex: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #123069;
}
.faq-item__q[aria-expanded="true"]::after { content: "\2013"; }
.faq-item__q:hover { color: #123069; }
.faq-item__q:focus-visible { outline: 2px solid #123069; outline-offset: 2px; }

/* Panel: JS animates inline height + opacity only (ease-out, ~180ms).
   No transform. Closed panels are visibility:hidden so their content
   stays out of the tab order and the accessibility tree. */
.faq-item__panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 180ms ease-out, opacity 180ms ease-out;
}
.faq-item__a { padding: 0 2px 22px; }
.faq-item__a p { font-size: 15.5px; line-height: 1.75; font-weight: 300; color: #443F36; margin: 0; max-width: 44em; }
@media (prefers-reduced-motion: reduce) {
  .faq-item__panel { transition-duration: 1ms; }
}

.faq__disclaimer { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.faq__disclaimer p { font-size: 12.5px; line-height: 1.7; color: #7A7367; border-top: 1px solid rgba(20, 19, 15, .14); padding-top: 18px; margin: 0; max-width: 46em; }

.faq__cta { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 40px) clamp(56px, 8vw, 96px); }
.faq__cta h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 20px; }

/* ===========================================================================
   MOBILE FLOATING "CALL MICHELE" BUTTON
   Phone-only (<= 767px). Fixed bottom-right, above the iOS safe area. The
   footers get extra bottom padding at the same breakpoint so the button
   never sits on top of footer links, forms, or the build credit.
   ========================================================================= */
.call-fab { display: none; }

@media (max-width: 767px) {
  .call-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    background: #24211D;
    color: #F6F2EA;
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(20, 19, 15, .28), 0 2px 6px rgba(20, 19, 15, .20);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }
  .call-fab:hover { background: #373129; color: #F6F2EA; }
  .call-fab:active { transform: translateY(1px); box-shadow: 0 3px 12px rgba(20, 19, 15, .30); }
  .call-fab:focus-visible { outline: 3px solid #123069; outline-offset: 3px; }
  .call-fab__icon { flex: none; display: block; }

  .site-footer,
  .cp-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* legal pages set .doc__foot padding in their own <style> (loads after this
     sheet), so override needs !important here */
  .doc__foot { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .call-fab { transition: none; }
  .call-fab:active { transform: none; }
}

/* --- Seller-quote rotator (sell page) ------------------------------------
   The centered single-quote block from the sell page, unchanged in look,
   now cross-fading through the real seller reviews. Slides are stacked in
   one grid cell so the block keeps the height of the tallest quote and
   nothing reflows on change. Dot styling is shared with .tst__dot. With
   JavaScript off, the first quote shows and holds.
----------------------------------------------------------------------------- */

.srot {
  display: grid;
  margin-bottom: 28px;
}

.srot__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s;
}

.srot__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.srot__dots:not(:empty) {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .srot__slide { transition: none; }
}

/* ===========================================================================
   SOLD PROPERTIES — diagonal ribbon + carousel (Sell page, "Recently sold")
   ---------------------------------------------------------------------------
   Same cards as before (image frame, "Sold for $X", beds/baths/sqft, address
   link) — only the flat SOLD bar became a corner ribbon, and the static grid
   became a sliding row. JS in app.js (wireSoldCarousel) drives the transform,
   arrows, autoplay, and swipe; this file only defines the visual states.
   ========================================================================= */

.sold-ribbon {
  position: absolute;
  top: 20px;
  left: -38px;
  width: 150px;
  transform: rotate(-45deg);
  transform-origin: center;
  background: #6B2A2A;
  color: #F6F2EA;
  text-align: center;
  padding: 5px 0;
  font-size: 10px;
  letter-spacing: .26em;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(20, 19, 15, .22);
  z-index: 2;
  pointer-events: none;
}

.sold-carousel { position: relative; }
.sold-carousel__viewport { overflow: hidden; }
.sold-carousel__track {
  display: flex;
  gap: 32px;
  transition: transform 480ms cubic-bezier(.22, .68, .28, 1);
  will-change: transform;
  touch-action: pan-y;
}
.sold-carousel__slide {
  flex: 0 0 calc((100% - 64px) / 3);
  min-width: 0;
}

@media (max-width: 900px) {
  .sold-carousel__slide { flex-basis: calc((100% - 32px) / 2); }
}

@media (max-width: 600px) {
  .sold-carousel__track { gap: 20px; }
  .sold-carousel__slide { flex-basis: 100%; }
}

.sold-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 242, 234, .92);
  border: 1px solid rgba(20, 19, 15, .16);
  color: #14130F;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 19, 15, .14);
  transition: background-color 160ms ease, transform 160ms ease;
  z-index: 3;
}
.sold-carousel__arrow:hover { background: #F6F2EA; }
.sold-carousel__arrow:active { transform: translateY(-50%) scale(.94); }
.sold-carousel__arrow:focus-visible { outline: 2px solid #123069; outline-offset: 2px; }
.sold-carousel__arrow--prev { left: 6px; }
.sold-carousel__arrow--next { right: 6px; }

@media (max-width: 480px) {
  .sold-carousel__arrow { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .sold-carousel__track { transition: none; }
  .sold-carousel__arrow:active { transform: translateY(-50%); }
}

/* ===========================================================================
   GLOBAL FOOTER — warm taupe-gray, three-column, compact
   Used on index.html and guidance.html (class="site-footer footer2").
   Medium taupe gives the footer its own weight as a distinct closing
   section (softer than black, more defined than the site's cream). The
   unmodified logo lockup (logo-2.png, its own flat cream backing intact)
   sits in a dedicated ivory panel for contrast/legibility against the
   taupe footer. Blue-gray = headings/links/icons, dark charcoal =
   body/legal text for contrast, muted red = hover accent, muted tan =
   the seam above the legal bar.
   ========================================================================= */
.footer2 { background: #D7D0C3; color: #25221F; }

.footer2__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 68px clamp(20px, 5vw, 40px) 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px clamp(24px, 3.5vw, 44px);
}

.footer2__logo-panel {
  display: inline-block;
  box-sizing: border-box;
  width: 256px;
  max-width: 100%;
  padding: 18px;
  background: #F7F2E9;
  border: 1px solid #BDB3A4;
  border-radius: 10px;
}
.footer2__brand-mark { display: block; width: 100%; height: auto; }
.footer2__desc { font-size: 13.5px; line-height: 1.75; font-weight: 400; color: #25221F; margin: 16px 0 0; max-width: 26em; }

.footer2__heading {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #3D5360; font-weight: 700; margin: 0 0 14px;
}

.footer2__links { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; margin: 0; }
.footer2__links a, .footer2__links [data-nav] {
  color: #3D5360; text-decoration: none; cursor: pointer; width: fit-content;
  font-weight: 500; transition: color 140ms ease;
}
.footer2__links a:hover, .footer2__links [data-nav]:hover { color: #6B2A2A; }

.footer2__contact { display: flex; flex-direction: column; gap: 13px; font-size: 13.5px; }
.footer2__contact a { color: #3D5360; text-decoration: none; font-weight: 500; transition: color 140ms ease; }
.footer2__contact a:hover { color: #6B2A2A; }
.footer2__contact-addr { line-height: 1.7; color: #25221F; }

.footer2__social { display: flex; gap: 10px; margin-top: 6px; }
.footer2__social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(61, 83, 96, .45);
  color: #3D5360;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.footer2__social a:hover { border-color: #6B2A2A; color: #6B2A2A; background: rgba(107, 42, 42, .08); }

.footer2__legalbar { background: #C3BAAA; border-top: 1px solid #A89A85; margin-top: 40px; }
.footer2__legal {
  max-width: 1240px; margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 40px) 38px;
  display: flex; flex-direction: column; gap: 11px;
}
.footer2__legal-tags {
  display: flex; flex-wrap: wrap; gap: 7px 18px; list-style: none; margin: 0; padding: 0;
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #3D5360; font-weight: 700;
}
.footer2__legal-text { font-size: 11.5px; line-height: 1.7; color: #25221F; max-width: 72em; }
.footer2__legal-text a { color: #3D5360; text-decoration: underline; font-weight: 500; transition: color 140ms ease; }
.footer2__legal-text a:hover { color: #6B2A2A; }
.footer2__credit {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  font-size: 11.5px; color: #25221F;
}
.footer2__credit a { color: #3D5360; text-decoration: underline; font-weight: 500; transition: color 140ms ease; }
.footer2__credit a:hover { color: #6B2A2A; }

@media (max-width: 900px) {
  .footer2__inner { grid-template-columns: 1fr 1fr; }
  .footer2__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .footer2__inner { grid-template-columns: 1fr; padding-top: 52px; gap: 30px; }
  .footer2__logo-panel { width: 220px; padding: 16px; }
}