/* ==========================================================================
   Sharess McCormack — Real Estate
   style.css  —  Home  ·  About
   --------------------------------------------------------------------------
   Pages: index.html, about.html
   (Between the two pages every section below is used — nothing removed.
   The Our Homes page now lives in its own project with its own trimmed
   copy of this file.)

   Contents
   1. DESIGN TOKENS
   2. BASE + RESET
   3. TYPOGRAPHY
   4. LAYOUT HELPERS
   5. BUTTONS + LINKS
   6. MOTION — reveal, text-rise, parallax
   7. HEADER / NAVIGATION
   8. FOOTER
   9. SECTIONS & COMPONENTS
   10. FORMS
   11. RESPONSIVE
   12. REDUCED MOTION / PRINT

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- palette ------------------------------------------------------ */
  --ink:          #14261F;   /* evergreen black — headings, dark bands   */
  --ink-2:        #1E362C;
  --moss:         #2C4739;
  --brass:        #B08442;   /* primary accent — CTAs, rules             */
  --brass-dk:     #8E682F;
  --brass-lt:     #D9BC8A;
  --limestone:    #E8E2D6;   /* warm panel                               */
  --limestone-2:  #F1ECE3;
  --paper:        #FBFAF7;   /* page background                          */
  --white:        #FFFFFF;
  --slate:        #5B6560;   /* body copy                                */
  --slate-lt:     #8A938D;
  --line:         rgba(20, 38, 31, .14);
  --line-soft:    rgba(20, 38, 31, .08);
  --line-dark:    rgba(232, 226, 214, .18);

  /* --- type --------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:      "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.85rem, 6.1vw, 5.25rem);
  --fs-h1:      clamp(2.3rem, 4.4vw, 3.75rem);
  --fs-h2:      clamp(1.95rem, 3.3vw, 2.95rem);
  --fs-h3:      clamp(1.3rem, 1.9vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1.35vw, 1.24rem);
  --fs-lead:    clamp(1.04rem, 1.25vw, 1.18rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-body:    1.72;

  /* --- space -------------------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y:  clamp(4.25rem, 8.5vw, 8rem);
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --container:  1240px;

  /* --- misc --------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(20, 38, 31, .06);
  --shadow-md: 0 18px 44px -22px rgba(20, 38, 31, .40);
  --shadow-lg: 0 40px 90px -40px rgba(20, 38, 31, .55);
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --header-h:  92px;
}

/* ==========================================================================
   2. BASE + RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* offset for the sticky header when jumping to #anchors */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* guards every parallax layer against sideways bleed */
  overflow-x: hidden;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }
.img-fallback { object-fit: contain !important; background: var(--limestone); padding: 0; }
button,
input,
select,
textarea { font: inherit; color: inherit; }

/* Visible keyboard focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brass); color: var(--white); }

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -110%);
  z-index: 2000;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.4rem; font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 var(--s-4);
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}

.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.028em; }

.t-h2 { font-size: var(--fs-h2);      line-height: 1.14; }
.t-h3 { font-size: var(--fs-h3);      line-height: 1.28; }

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--slate);
  max-width: 56ch;
}
.t-sm { font-size: var(--fs-sm); }
.t-xs { font-size: var(--fs-xs); }

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* Italic display voice — used for the pull-quote moments. */
.t-italic { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60; }

/* Section eyebrow: a rule + word. Reads as a divider, not a floating label. */
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--brass-dk);
  margin: 0 0 var(--s-4);
  font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px;
  background: var(--brass); flex: none;
}
.eyebrow--center { justify-content: center; margin-inline: auto; }
.eyebrow--center::after {
  content: ""; width: 34px; height: 1px; background: var(--brass); flex: none;
}
.on-dark .eyebrow { color: var(--brass-lt); }
.on-dark .eyebrow::before,
.on-dark .eyebrow::after { background: var(--brass-lt); }

/* Dark-surface typography */
.on-dark { color: rgba(232, 226, 214, .78); }
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: var(--limestone-2); }
.on-dark .t-lead { color: rgba(232, 226, 214, .74); }

/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container-x {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(2.75rem, 5vw, 4.5rem); position: relative; }
.section--paper { background: var(--paper); }
.section--limestone { background: var(--limestone); }
.section--limestone-2 { background: var(--limestone-2); }
.section--ink { background: var(--ink); }

/* Hairline that separates two same-tone sections. */

.stack > * + * { margin-top: var(--s-4); }

/* Section heading block */
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head--center { text-align: center; margin-inline: auto; max-width: 720px; }
.sec-head--center .t-lead { margin-inline: auto; }
.sec-head p { margin-top: var(--s-4); }

/* ==========================================================================
   5. BUTTONS + LINKS
   ========================================================================== */
.btn-x {
  --btn-bg: var(--brass);
  --btn-fg: var(--white);
  --btn-bd: var(--brass);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1.02rem 2.1rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .38s var(--ease), border-color .38s var(--ease),
              transform .3s var(--ease), box-shadow .38s var(--ease);
}
/* Wipe fill on hover — one interaction language across the whole site. */
.btn-x::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform .42s var(--ease-out);
  z-index: -1;
}
.btn-x:hover::after,
.btn-x:focus-visible::after { transform: scaleY(1); }
.btn-x:hover,
.btn-x:focus-visible {
  color: var(--limestone-2);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}
.btn-x:active { transform: translateY(1px); }

.btn-x--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-x--outline::after { background: var(--ink); }

.btn-x--light { --btn-bg: transparent; --btn-fg: var(--limestone-2); --btn-bd: rgba(232,226,214,.5); }
.btn-x--light::after { background: var(--limestone-2); }
.btn-x--light:hover,
.btn-x--light:focus-visible { color: var(--ink); border-color: var(--limestone-2); }

.btn-x--lg { padding: 1.18rem 2.6rem; font-size: 1rem; }
.btn-x--sm { padding: .78rem 1.5rem; font-size: var(--fs-xs); }
.btn-x--block { display: flex; width: 100%; }

/* Understated text link with an underline that grows from the left. */
.link-x {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: .05em;
  padding-bottom: 3px;
}
.link-x::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.link-x:hover::after,
.link-x:focus-visible::after { transform: scaleX(1); }
.link-x:hover { color: var(--brass-dk); }
.on-dark .link-x { color: var(--limestone-2); }
.on-dark .link-x:hover { color: var(--brass-lt); }

/* ==========================================================================
   6. MOTION — reveal, text-rise, parallax
   ========================================================================== */

/* --- scroll reveal --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity  .9s var(--ease-out),
    transform 1.05s var(--ease-out),
    clip-path 1.05s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"] { transform: translate3d(0, 42px, 0); }
[data-reveal="down"] { transform: translate3d(0, -32px, 0); }
[data-reveal="left"] { transform: translate3d(-52px, 0, 0); }
[data-reveal="right"] { transform: translate3d(52px, 0, 0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }

/* Image mask wipe — the signature entrance for photography. */
[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
}
[data-reveal="mask-left"] {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.04);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* --- headline word rise ---------------------------------------------- */
.rise { display: block; }
/* The line box masks the word-rise animation with overflow:hidden, which
   is permanent (not just mid-animation). The display face is an
   expressive italic (WONK/SOFT axes) that can extend past a tight
   line-height, so give the box a little extra room below the baseline
   for descenders — cancelled out by an equal negative margin so it
   doesn't add visible spacing. */
.rise .rise__line { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.rise .rise__word {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--word-delay, 0ms);
  will-change: transform;
}
.rise.is-revealed .rise__word { transform: translate3d(0, 0, 0); }

/* --- parallax -------------------------------------------------------- */
/* The container clips; the layer inside is taller than the container and
   is translated on the Y axis, so the plate drifts slower than the page.
   background-attachment:fixed is deliberately NOT used — it is broken on
   iOS Safari and forces repaints on every scroll frame.                  */
.px {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.px__bg {
  position: absolute;
  left: 0;
  width: 100%;
  /* extra bleed top and bottom gives the layer room to travel */
  top: -18%;
  height: 136%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
/* Legibility scrim over every parallax plate. */
.px__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,38,31,.72) 0%, rgba(20,38,31,.58) 45%, rgba(20,38,31,.78) 100%);
}
.px__scrim--soft { background: linear-gradient(180deg, rgba(20,38,31,.42), rgba(20,38,31,.62)); }

/* Foreground images that drift gently against the page. */
.px-float { will-change: transform; }

/* ==========================================================================
   7. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), background-color .4s var(--ease),
              box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -28px rgba(20,38,31,.5);
  border-bottom-color: var(--line-soft);
}
/* Retracts on scroll-down, returns on scroll-up. */
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: var(--s-5);
  padding-left: var(--gutter);
  min-height: var(--header-h);
  transition: min-height .4s var(--ease);
}
.site-header.is-stuck .header-inner { min-height: 74px; }

/* --- wordmark -------------------------------------------------------- */
/* Written across in one line (not stacked), and sized up, per client
   request: the name should read as a single wordmark, not a looped
   two-line logo. align-self centers the whole lockup vertically inside
   the (taller, grid-stretched) header bar. */
.brand {
  display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
  align-self: center;
  gap: .5em;
  text-decoration: none; line-height: 1;
  padding-block: .6rem;
}
.brand__first {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  color: var(--ink);
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60;
  transition: color .35s var(--ease);
}
.brand__last {
  font-family: var(--font-ui);
  font-size: clamp(.85rem, 1.15vw, 1.05rem);
  letter-spacing: .1em;
  color: var(--brass-dk);
  padding-left: 0;
  font-weight: 500;
}
.brand:hover .brand__first { color: var(--brass-dk); }

@media (max-width: 480px) {
  .brand { gap: .35em; }
  .brand__first { font-size: 1.6rem; }
  .brand__last { font-size: .68rem; letter-spacing: .06em; }
}

/* --- desktop nav ----------------------------------------------------- */
/* The <nav> wrapper is a stretched grid item spanning the full header
   height. Without its own centring it leaves the list pinned to the top,
   so make the wrapper a flex box and centre the list inside it. */
.site-header nav[aria-label="Primary"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.nav-x {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem, 2.1vw, 2.15rem);
  margin: 0; padding: 0; list-style: none;
}
.nav-x__link {
  position: relative;
  display: inline-block;
  padding: .4rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: .015em;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav-x__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-x__link:hover { color: var(--brass-dk); }
.nav-x__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-x__link.is-active { color: var(--brass-dk); }
.nav-x__link.is-active::after { transform: scaleX(1); }

/* --- corner CTA stack (echoes the reference's flush-right buttons) ---- */
.header-cta {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-self: stretch;
}
.header-cta__btn {
  display: flex; align-items: center; justify-content: center;
  padding: .6rem 1.7rem;
  font-size: var(--fs-xs);
  letter-spacing: .11em;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.header-cta__btn--1 { background: var(--brass);  color: var(--white); }
.header-cta__btn--2 { background: var(--ink);    color: var(--limestone-2); }
.header-cta__btn--1:hover,
.header-cta__btn--1:focus-visible { background: var(--brass-dk); color: var(--white); }
.header-cta__btn--2:hover,
.header-cta__btn--2:focus-visible { background: var(--moss);     color: var(--white); }

/* --- hamburger ------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 54px; height: 54px;
  margin-right: var(--gutter);
  background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 22px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease), width .4s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; width: 72%; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- mobile drawer --------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0;
  z-index: 1040;
  background: var(--ink);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) var(--s-7);
  display: flex; flex-direction: column;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .72s var(--ease-out), visibility 0s linear .72s;
}
.mobile-nav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .72s var(--ease-out), visibility 0s;
}
.mobile-nav__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.mobile-nav__list li {
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
}
.mobile-nav__link {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 7vw, 2.3rem);
  color: var(--limestone-2);
  text-decoration: none;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease-out), color .3s var(--ease);
  transition-delay: var(--i-delay, 0ms);
}
.mobile-nav.is-open .mobile-nav__link { transform: translate3d(0, 0, 0); opacity: 1; }
.mobile-nav__link:hover,
.mobile-nav__link.is-active { color: var(--brass-lt); }
.mobile-nav__foot {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-3);
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out) .45s, transform .6s var(--ease-out) .45s;
}
.mobile-nav.is-open .mobile-nav__foot { opacity: 1; transform: none; }
.mobile-nav__meta {
  margin-top: var(--s-5);
  color: rgba(232,226,214,.6);
  font-size: var(--fs-sm);
}
.mobile-nav__meta a { color: var(--limestone-2); text-decoration: none; }
.mobile-nav__meta a:hover { color: var(--brass-lt); }

body.nav-open { overflow: hidden; }

/* Header sits above the drawer so the close button stays reachable. */
body.nav-open .site-header {
  z-index: 1050;
}
body.nav-open .site-header { background: transparent; box-shadow: none; border-color: transparent; transform: none !important; }
body.nav-open .brand__first { color: var(--limestone-2); }
body.nav-open .brand__last { color: var(--brass-lt); }
body.nav-open .nav-toggle { border-color: var(--line-dark); }
body.nav-open .nav-toggle__bars span { background: var(--limestone-2); }

/* Page content clears the fixed header. */
.page-body { padding-top: var(--header-h); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(232,226,214,.7); }

.footer-band {
  background: var(--moss);
  padding-block: 1.1rem;
  text-align: center;
}
.footer-band__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5); flex-wrap: wrap;
}
.footer-band__text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--limestone-2);
  margin: 0;
}

.footer-main { padding-block: clamp(3.25rem, 6vw, 5.25rem); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-brand .brand__first { color: var(--limestone-2); font-size: 2.1rem; }
.footer-brand .brand__last { color: var(--brass-lt); }
.footer-brand p { margin-top: var(--s-4); font-size: var(--fs-sm); max-width: 34ch; }

.footer-title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--brass-lt);
  margin: 0 0 var(--s-4);
  font-weight: 500;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .68rem; }
.footer-list a,
.footer-contact a {
  color: rgba(232,226,214,.72);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-list a:hover { color: var(--brass-lt); padding-left: 6px; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .78rem; font-size: var(--fs-sm); }
.footer-contact a:hover { color: var(--brass-lt); }

.social-row { display: flex; gap: .6rem; margin-top: var(--s-5); }
.social-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: rgba(232,226,214,.8);
  text-decoration: none;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.social-dot:hover {
  background: var(--brass); border-color: var(--brass);
  color: var(--white); transform: translateY(-3px);
}
.social-dot svg { width: 17px; height: 17px; fill: currentColor; }

.footer-legal {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(232,226,214,.5);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-legal a { color: rgba(232,226,214,.62); text-decoration: none; }
.footer-legal a:hover { color: var(--brass-lt); }

.footer-marks { display: flex; align-items: center; gap: var(--s-4); }
.footer-marks svg { width: 34px; height: 34px; fill: none; stroke: rgba(232,226,214,.45); stroke-width: 1.4; }

/* ==========================================================================
   9. SECTIONS & COMPONENTS
   ========================================================================== */

/* --- 9.1 split hero --------------------------------------------------- */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  min-height: min(92vh, 860px);
  background: var(--paper);
}
.hero-split__media {
  position: relative;
  overflow: hidden;
  background: var(--moss);
}
.hero-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out);
  opacity: 0;
}
.hero-split.is-loaded .hero-split__media img { transform: scale(1); opacity: 1; }

.hero-split__panel {
  background: var(--limestone);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.5rem, 4.5vw, 4.5rem);
  /* the panel reaches back over the image, as on the reference */
  margin-left: clamp(-5rem, -4vw, 0rem);
  position: relative;
  z-index: 2;
}
.hero-split__panel .t-display { margin-bottom: var(--s-5); }
.hero-split__panel .t-lead { margin-bottom: var(--s-6); max-width: 42ch; }
.hero-split__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* stat strip under the hero copy */
.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(20,38,31,.16);
}
.hero-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  line-height: 1;
  display: block;
}
.hero-stat__label {
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  color: var(--slate);
  margin-top: .45rem;
  display: block;
}

/* scroll cue */
.scroll-cue {
  position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 1.75rem;
  z-index: 3;
  display: flex; align-items: center; gap: .7rem;
  color: var(--limestone-2);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-decoration: none;
}
.scroll-cue__line {
  width: 46px; height: 1px; background: currentColor; opacity: .55;
  position: relative; overflow: hidden;
}
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brass-lt);
  transform: translateX(-100%);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- 9.2 parallax hero (inner pages) --------------------------------- */
.hero-px {
  position: relative;
  min-height: min(74vh, 660px);
  display: flex; align-items: flex-end;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.hero-px__inner { position: relative; z-index: 2; width: 100%; }
.hero-px .t-display { max-width: 18ch; }

/* breadcrumb */
.crumbs {
  display: flex; gap: .55rem; align-items: center;
  font-size: var(--fs-xs); letter-spacing: .1em;
  color: rgba(232,226,214,.66);
  margin-bottom: var(--s-5);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--brass-lt); }
.crumbs span { opacity: .5; }

/* --- 9.3 accent band -------------------------------------------------- */
.band {
  background: var(--moss);
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.band--ink { background: var(--ink); }
.band__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  color: var(--limestone-2);
  margin: 0 0 var(--s-4);
}
.band .social-row { justify-content: center; }

/* --- 9.5 media + text split ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split--wide-media { grid-template-columns: 1.15fr .85fr; }
.split__media { position: relative; }
/* Direct children only — a nested .stack-media sets its own widths and must
   not be overridden by this rule. */
.split__media > img { width: 100%; border-radius: var(--r-sm); }

/* layered image pair (About) */
.stack-media { position: relative; padding-bottom: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2rem, 5vw, 4rem); }
.stack-media__main { display: block; width: 86%; box-shadow: var(--shadow-lg); border-radius: var(--r-sm); }

/* About intro: side-by-side like the rest of the site, but the photo is
   a taller cover-cropped frame that sticks in view while the (much
   longer) copy scrolls past it, so the shorter image never strands a
   big empty gap the way a plain natural-height image did. */
.about-split {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.about-split__media {
  position: sticky;
  top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}
.about-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stack-media__inset {
  position: absolute; right: 0; bottom: 0;
  width: 50%;
  border: 8px solid var(--paper);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-sm);
}
.section--limestone .stack-media__inset { border-color: var(--limestone); }

/* brass rule beneath headings inside splits */
.rule-brass {
  width: 58px; height: 2px; background: var(--brass);
  border: 0; margin: 0 0 var(--s-5);
}

/* signature */
.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--ink);
  margin-top: var(--s-5);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 60;
}
.signature small {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--slate);
  margin-top: .5rem;
}

/* --- 9.6 service list (Who I Serve / Services) ------------------------ */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: padding-left .5s var(--ease-out);
}
.svc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brass);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.svc:hover { padding-left: 1.5rem; }
.svc:hover::before { transform: scaleY(1); }
.svc__index {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--brass-dk);
  font-variation-settings: "opsz" 20;
}
.svc__title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); margin: 0 0 .45rem; line-height: 1.25; }
.svc__desc { display: block; margin: 0; font-size: var(--fs-sm); max-width: 62ch; }
.svc__go {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.svc:hover .svc__go { background: var(--brass); border-color: var(--brass); color: var(--white); transform: rotate(-45deg); }
.svc__go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* --- 9.7 audience cards (Who I Serve) --------------------------------- */
.aud-grid {
  display: grid;
  /* Fixed track count, not auto-fit: six cards divide evenly into 3 and 2,
     so no empty cell is ever left showing the divider colour. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.aud {
  background: var(--paper);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  position: relative;
  overflow: hidden;
  transition: background-color .5s var(--ease);
}
.section--limestone .aud { background: var(--limestone); }
.aud::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.aud:hover::after { transform: scaleX(1); }
.aud:hover { background: var(--white); }
.section--limestone .aud:hover { background: var(--limestone-2); }
.aud__mark {
  display: block;
  width: 44px; height: 44px; margin-bottom: var(--s-5);
  color: var(--brass-dk);
  transition: transform .55s var(--ease-out);
}
.aud:hover .aud__mark { transform: translateY(-4px); }
.aud__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.aud h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.aud p { font-size: var(--fs-sm); margin: 0; }

/* --- 9.8 property cards ---------------------------------------------- */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.prop-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
              border-color .55s var(--ease);
}
.prop-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.prop-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--limestone);
}
.prop-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.prop-card:hover .prop-card__media img { transform: scale(1.07); }
.prop-card__tag {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--ink); color: var(--limestone-2);
  padding: .38rem .85rem;
  font-size: var(--fs-xs); letter-spacing: .1em;
  border-radius: var(--r-sm);
  z-index: 2;
}
.prop-card__tag--sold { background: var(--brass); color: var(--white); }
.prop-card__tag--avail { background: var(--moss); }
.prop-card__body { padding: clamp(1.25rem, 2.4vw, 1.75rem); flex: 1; display: flex; flex-direction: column; }
.prop-card__price {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--ink); line-height: 1;
  margin-bottom: .55rem;
}
.prop-card__price span { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--slate); letter-spacing: .06em; }
.prop-card__title { font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; color: var(--ink); margin: 0 0 .3rem; }
.prop-card__loc { font-size: var(--fs-sm); color: var(--slate); margin: 0 0 var(--s-4); }
.prop-card__specs {
  display: flex; flex-wrap: wrap; gap: 1.15rem;
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs); color: var(--slate);
  letter-spacing: .04em;
}
.prop-card__specs b { color: var(--ink); font-weight: 500; }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  padding: .58rem 1.2rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); letter-spacing: .07em;
  color: var(--slate);
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip:hover { border-color: var(--brass); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--limestone-2); }

/* hidden by the filter — animated out, then removed from flow */
.is-filtered-out { display: none !important; }

/* --- 9.9 slider (sold results) --------------------------------------- */
.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform .78s var(--ease-out);
  will-change: transform;
}
.slider__slide { flex: 0 0 100%; min-width: 0; padding-inline: .5rem; }
.slider__nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5); margin-top: var(--s-6);
}
.slider__arrow {
  width: 52px; height: 52px;
  border: 1px solid var(--line); background: transparent;
  border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), opacity .3s var(--ease);
}
.slider__arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--limestone-2); }
.slider__arrow:disabled { opacity: .3; cursor: not-allowed; }
.slider__arrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.slider__dots { display: flex; gap: .5rem; align-items: center; }
.slider__dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: 0;
  background: var(--line);
  cursor: pointer;
  transition: background-color .35s var(--ease), width .45s var(--ease-out);
}
.slider__dot.is-active { background: var(--brass); width: 26px; border-radius: var(--r-pill); }
.on-dark .slider__arrow { border-color: var(--line-dark); color: var(--limestone-2); }
.on-dark .slider__arrow:hover:not(:disabled) { background: var(--limestone-2); color: var(--ink); }
.on-dark .slider__dot { background: rgba(232,226,214,.28); }
.on-dark .slider__dot.is-active { background: var(--brass-lt); }

/* --- 9.14 benefit / value grid ---------------------------------------- */
.val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.val { padding-top: var(--s-5); border-top: 2px solid var(--brass); }
.val h3 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: 500; margin-bottom: .6rem; }
.val p { font-size: var(--fs-sm); margin: 0; }
.on-dark .val { border-top-color: var(--brass-lt); }

/* --- 9.17 counters ----------------------------------------------------- */
.count-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.count__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.9rem);
  line-height: 1; color: var(--limestone-2);
  display: block;
}
.section--paper .count__num,
.section--limestone .count__num { color: var(--ink); }
.count__label {
  display: block; margin-top: .8rem;
  font-size: var(--fs-xs); letter-spacing: .1em;
  color: rgba(232,226,214,.66);
}
.section--paper .count__label,
.section--limestone .count__label { color: var(--slate); }

/* --- 9.18 contact split ------------------------------------------------ */
.contact-panel {
  background: var(--limestone);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border-radius: var(--r-sm);
}
.contact-panel--ink { background: var(--ink-2); }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.info-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.info-list svg { width: 22px; height: 22px; stroke: var(--brass); fill: none; stroke-width: 1.4; margin-top: 3px; }
.info-list b {
  display: block; font-family: var(--font-ui); font-weight: 500;
  font-size: var(--fs-xs); letter-spacing: .12em;
  color: var(--brass-dk); margin-bottom: .3rem;
}
.on-dark .info-list b { color: var(--brass-lt); }
.info-list a { color: var(--ink); text-decoration: none; }
.info-list a:hover { color: var(--brass-dk); }
.on-dark .info-list a { color: var(--limestone-2); }
.on-dark .info-list a:hover { color: var(--brass-lt); }
.info-list .info-sub {
  display: block;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--slate-lt);
  margin-top: .25rem;
}
.on-dark .info-list .info-sub { color: rgba(232,226,214,.55); }

/* --- 9.19 instagram tiles ---------------------------------------------- */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; }
.ig-tile { position: relative; aspect-ratio: 1; overflow: hidden; display: block; background: var(--limestone); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ig-tile::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,38,31,.55);
  opacity: 0; transition: opacity .45s var(--ease);
}
.ig-tile:hover img { transform: scale(1.08); }
.ig-tile:hover::after { opacity: 1; }

/* --- 9.20 pull quote / editorial note ---------------------------------- */
.note {
  border-left: 2px solid var(--brass);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "opsz" 40;
}
.on-dark .note { color: var(--limestone-2); border-left-color: var(--brass-lt); }

/* ==========================================================================
   10. FORMS
   ========================================================================== */
.form-x .field { position: relative; margin-bottom: var(--s-5); }

/* Field labels only. `.check` and `.opt` are also <label> elements with
   their own display modes, so they are excluded here — otherwise this rule
   wins on specificity and flattens them back to block. */
.form-x label:not(.check):not(.opt) {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--slate);
  margin-bottom: .55rem;
  font-weight: 500;
}
.on-dark .form-x label:not(.check):not(.opt),
.contact-panel--ink .form-x label:not(.check):not(.opt) { color: rgba(232,226,214,.72); }

.form-x .req { color: var(--brass-dk); }
.on-dark .form-x .req,
.contact-panel--ink .form-x .req { color: var(--brass-lt); }

.form-x input[type="text"],
.form-x input[type="email"],
.form-x input[type="tel"],
.form-x select,
.form-x textarea {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  appearance: none;
}
.form-x textarea { min-height: 132px; resize: vertical; }
.form-x select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6560' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
.form-x input:focus,
.form-x select:focus,
.form-x textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176,132,66,.16);
}
.form-x input::placeholder,
.form-x textarea::placeholder { color: var(--slate-lt); }

.contact-panel--ink .form-x input,
.contact-panel--ink .form-x select,
.contact-panel--ink .form-x textarea,
.on-dark .form-x input,
.on-dark .form-x select,
.on-dark .form-x textarea {
  background: rgba(251,250,247,.06);
  border-color: var(--line-dark);
  color: var(--limestone-2);
}
.contact-panel--ink .form-x input::placeholder,
.on-dark .form-x input::placeholder,
.on-dark .form-x textarea::placeholder { color: rgba(232,226,214,.42); }

/* radio / checkbox pills */
.opt-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.opt {
  position: relative;
  display: inline-flex;
}
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.opt span {
  padding: .68rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--slate);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--limestone-2); }
.opt input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.opt:hover span { border-color: var(--brass); }
.on-dark .opt span,
.contact-panel--ink .opt span { border-color: var(--line-dark); color: rgba(232,226,214,.75); }
.on-dark .opt input:checked + span,
.contact-panel--ink .opt input:checked + span {
  background: var(--brass); border-color: var(--brass); color: var(--white);
}

/* consent checkbox */
.check {
  display: grid; grid-template-columns: 22px 1fr; gap: .75rem;
  align-items: start; cursor: pointer;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--slate);
  letter-spacing: 0; font-weight: 400;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: grid; place-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.check__box::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(0);
  transition: transform .3s var(--ease-out);
}
.check input:checked + .check__box { background: var(--brass); border-color: var(--brass); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--brass); outline-offset: 3px; }
.on-dark .check,
.contact-panel--ink .check { color: rgba(232,226,214,.68); }
.on-dark .check__box,
.contact-panel--ink .check__box { border-color: var(--line-dark); }

/* validation states */
.form-x .is-invalid { border-color: #B4462F !important; }
.form-x .is-invalid:focus { box-shadow: 0 0 0 3px rgba(180,70,47,.18) !important; }
.field__error {
  display: block;
  font-size: var(--fs-xs);
  color: #B4462F;
  margin-top: .45rem;
  letter-spacing: 0;
  min-height: 0;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.field__error.is-shown { opacity: 1; transform: none; }
.contact-panel--ink .field__error,
.on-dark .field__error { color: #E8927C; }

.form-note { font-size: var(--fs-xs); color: var(--slate-lt); margin-top: var(--s-4); }
.on-dark .form-note,
.contact-panel--ink .form-note { color: rgba(232,226,214,.5); }

/* success message */
.form-success {
  display: none;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--brass);
  border-radius: var(--r-sm);
  background: rgba(176,132,66,.08);
  text-align: center;
}
.form-success.is-shown { display: block; animation: fadeUp .6s var(--ease-out) both; }
.form-success h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.form-success p { margin: 0 auto; font-size: var(--fs-sm); max-width: 46ch; }

.form-error {
  display: none;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid #b3432f;
  border-radius: var(--r-sm);
  background: rgba(179,67,47,.08);
  color: #8a3223;
  font-size: var(--fs-sm);
  text-align: center;
}
.form-error.is-shown { display: block; animation: fadeUp .4s var(--ease-out) both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* multi-column form rows */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {

  .nav-x { gap: 1.05rem; }
  .nav-x__link { font-size: .875rem; }
  .header-cta__btn { padding: .55rem 1.1rem; font-size: .72rem; letter-spacing: .08em; }

}

@media (max-width: 991.98px) {

  :root { --header-h: 78px; }

  /* Hide the <nav> wrapper too, not just the list inside it — otherwise it
       stays a grid item, takes a column, and pushes the toggle onto row two. */
  .site-header nav[aria-label="Primary"],
  .nav-x,
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; justify-self: end; align-self: center; }
  .header-inner { grid-template-columns: 1fr auto; align-items: center; }

  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__media { aspect-ratio: 4 / 3; }
  /* The hero photo is a tall portrait crop; on this much shorter mobile
     box the default centred crop was cutting off the top of her head.
     Anchoring the visible window near the top of the image keeps the
     head fully in frame. */
  .hero-split__media img { position: static; height: 100%; object-position: center 8%; }
  .hero-split__panel { margin-left: 0; }
  .scroll-cue { display: none; }

  .split,
  .split--wide-media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  .aud-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

}

@media (max-width: 767.98px) {

  .svc { grid-template-columns: 1fr; gap: .75rem; }
  .svc__go { display: none; }
  .svc__index { font-size: 1rem; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; align-items: flex-start; }

  .stack-media { padding-right: 0; padding-bottom: 3.5rem; }
  .stack-media__main { width: 100%; }
  .stack-media__inset { width: 46%; right: 0; }

  .about-split { grid-template-columns: 1fr; }
  .about-split__media { position: static; aspect-ratio: 4 / 3; }

  /* Parallax travel is reduced on small screens: less GPU work, and the
       plates are proportionally much taller relative to the viewport.      */
  .px__bg { top: -8%; height: 116%; }

}

@media (max-width: 575.98px) {

  /* Bootstrap rows carry a negative side margin of half the gutter. With
       g-5 (3rem) that is -24px a side, which is wider than the container
       padding at this width and pushes the document 4px past the viewport.
       Damping the gutter here keeps the page exactly as wide as the screen. */
  .row { --bs-gutter-x: 1.5rem; }

  .btn-x { width: 100%; }
  .hero-split__actions { flex-direction: column; align-items: stretch; }
  .slider__nav { gap: var(--s-4); }
  .prop-grid { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: 1fr; }

}

/* ==========================================================================
   12. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rise .rise__word { transform: none !important; }
  .px__bg { transform: none !important; }

  .hero-split__media img { opacity: 1; transform: none; }

}

@media print {

  .site-header,
  .mobile-nav,
  .scroll-cue,
  .band { display: none !important; }
  body { color: #000; background: #fff; }
  .px__bg,
  .px__scrim { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }

}