/* Mark Johnson Estate Agents — theme stylesheet
   Palette: ivory #FBFAF8, stone #F1EFEA, navy #12264F, deep navy #0B1A38, teal #0F766E (hover only)
   Type: Cormorant Garamond (display), Hanken Grotesk (text) */

:root {
  --ivory: #FBFAF8;
  --stone: #F1EFEA;
  --stone-2: #EFEDE8;
  --rule: #D8D5CE;
  --rule-strong: #B8B4AA;
  --navy: #12264F;
  --navy-deep: #0B1A38;
  --teal: #0F766E;
  --muted: #5F6675;
  --on-navy: #C9D2E3;
  --on-navy-soft: #DCE3F0;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1320px;
  --gutter: 40px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:hover { color: var(--teal); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { display: flex; flex-direction: column; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 16px; top: 16px; color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Type utilities ---------- */
.serif { font-family: var(--serif); }
.caps { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; line-height: 1.6; }
.muted { color: var(--muted); }
.cap { font-size: 13px; line-height: 1.5; color: var(--muted); }
.body-15 { font-size: 15px; }
.body-17 { font-size: 17px; line-height: 1.75; }
.lead-text { font-size: 18px; line-height: 1.7; }
.break { word-break: break-all; }
.t-hero { font-family: var(--serif); font-size: 60px; line-height: 1.1; letter-spacing: -.005em; }
.t-h2 { font-family: var(--serif); font-size: 46px; line-height: 1.1; }
.t-h3 { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.t-lead { font-family: var(--serif); font-size: 40px; line-height: 1.28; }
.t-lead--sm { font-size: 28px; line-height: 1.35; }
.t-quote { font-family: var(--serif); font-size: 24px; line-height: 1.4; font-style: italic; }
.pull { font-family: var(--serif); font-size: 26px; line-height: 1.4; font-style: italic; margin: 0; }
.prose { font-size: 17px; line-height: 1.75; }
.prose p { margin: 0 0 1.2em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 { font-family: var(--serif); margin: 1.6em 0 .6em; }
.prose h2 { font-size: 34px; } .prose h3 { font-size: 26px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }

/* ---------- Layout utilities ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.centred { display: flex; flex-direction: column; align-items: center; text-align: center; }
.maxw-560 { max-width: 560px; } .maxw-600 { max-width: 600px; } .maxw-640 { max-width: 640px; } .maxw-720 { max-width: 720px; } .maxw-760 { max-width: 760px; }
.self-start { align-self: flex-start; }
[class*="stack-"] { display: flex; flex-direction: column; }
.stack-6 { gap: 6px; } .stack-8 { gap: 8px; } .stack-10 { gap: 10px; } .stack-16 { gap: 16px; } .stack-20 { gap: 20px; }
.stack-22 { gap: 22px; } .stack-24 { gap: 24px; } .stack-28 { gap: 28px; } .stack-30 { gap: 30px; } .stack-32 { gap: 32px; }
.stack-40 { gap: 40px; } .stack-56 { gap: 56px; } .stack-64 { gap: 64px; } .stack-96 { gap: 96px; }
.pt-4 { padding-top: 4px; } .pt-8 { padding-top: 8px; } .pt-12 { padding-top: 12px; } .pt-16 { padding-top: 16px; } .mt-8 { margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.actions--centred { justify-content: center; }
.actions--tight { gap: 22px; }
.fl a { text-decoration: none; }

/* Sections */
.section { padding-top: 112px; padding-bottom: 112px; }
.section--intro { padding-top: 80px; padding-bottom: 96px; }
.section--pageintro { padding-top: 96px; padding-bottom: 72px; }
.section--tight { padding-top: 0; padding-bottom: 80px; }
.section--tall { padding-top: 140px; padding-bottom: 160px; }
.section--stone { background: var(--stone); }
.section--ruled { border-top: 1px solid var(--rule); padding-top: 104px; padding-bottom: 104px; }
.section--contact { padding-top: 40px; padding-bottom: 120px; }
.section--archive { padding-top: 16px; padding-bottom: 120px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 56px 96px; align-items: start; }
.split--wide { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.split--centre { align-items: center; }
.split--contact { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 64px 120px; }

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 34px;
  border: 1px solid var(--navy); background: transparent; color: var(--navy);
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: color .55s cubic-bezier(.2,.7,.2,1), letter-spacing .55s cubic-bezier(.2,.7,.2,1), border-color .55s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.btn:hover, .btn:focus-visible { color: #fff; letter-spacing: .26em; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn--solid { background: var(--navy); color: #fff; }
.btn--solid::before { background: var(--navy-deep); }
.btn--light { border-color: #fff; color: #fff; }
.btn--light::before { background: #fff; }
.btn--light:hover, .btn--light:focus-visible { color: var(--navy); }
.btn--text { border-color: transparent; padding-left: 0; padding-right: 0; overflow: visible; }
.btn--text::before { display: none; }
.btn--text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.btn--text:hover, .btn--text:focus-visible { color: var(--navy); letter-spacing: .2em; }
.btn--text:hover::after { transform: scaleX(0); transform-origin: right; animation: redraw .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: var(--navy); text-decoration: none; padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(18,38,79,.3), rgba(18,38,79,.3));
  background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .55s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.link:hover, .link:focus-visible { color: var(--navy); background-size: 100% 1px, 100% 1px; }
.link--light { color: #fff; background-image: linear-gradient(#fff, #fff), linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)); }
.link--light:hover, .link--light:focus-visible { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--ivory); border-bottom: 1px solid var(--rule);
  transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s ease;
}
.site-header.is-scrolled { background: rgba(251,250,248,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rule); }
.site-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 92px; gap: 24px; transition: min-height .5s cubic-bezier(.2,.7,.2,1); }
.is-scrolled .site-header__row { min-height: 70px; }
.site-main { padding-top: 92px; }
.has-overlay-header .site-main { padding-top: 0; }
.wordmark-wrap { display: block; }
.wordmark-wrap--light { display: none; }
.site-header__brand { display: flex; align-items: center; justify-self: center; }
.site-header__right { display: flex; align-items: center; gap: 30px; justify-self: end; }
.wordmark { height: 26px; width: auto; display: block; }
.navlink {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: var(--navy); text-decoration: none; padding: 6px 0; white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1), color .5s ease;
}
.navlink:hover, .navlink:focus-visible, .navlink.on { background-size: 100% 1px; color: var(--navy); }
.dnav { display: flex; gap: 30px; align-items: center; justify-self: start; }
.menu { display: none; }
.mnav { display: none; }
summary.menu-toggle { list-style: none; cursor: pointer; }
summary.menu-toggle::-webkit-details-marker { display: none; }

/* Transparent over the hero until scrolled */
.site-header--overlay:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }
.site-header--overlay .site-header__row { min-height: 96px; }
.site-header--overlay:not(.is-scrolled) .wordmark { height: 28px; }
.site-header--overlay:not(.is-scrolled) .wordmark-wrap--light { display: block; }
.site-header--overlay:not(.is-scrolled) .wordmark-wrap--dark { display: none; }
.site-header--overlay:not(.is-scrolled) .navlink { color: #fff; }
.site-header--overlay:not(.is-scrolled) .navlink:hover, .site-header--overlay:not(.is-scrolled) .navlink.on { color: #fff; }
.has-overlay-header .site-main { position: relative; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--stone-2); }
.hero--overlay .hero__media, .hero__scrim { clip-path: inset(0); }
.hero--overlay { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--navy-deep); color: #fff; }
.hero--overlay .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 100%; }
/* The scrim keeps the words readable on any photograph, bright or busy: a light tint over
   the whole picture, a column of shade down the left where the headline sits (whatever the
   window height puts it over), and deeper shade at the foot for the buttons and marks.
   The upper right stays clearest, so the photograph still reads. */
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,26,56,.46) 0%, rgba(11,26,56,.06) 22%, rgba(11,26,56,.3) 50%, rgba(11,26,56,.8) 78%, rgba(11,26,56,.95) 100%),
    linear-gradient(100deg, rgba(11,26,56,.68) 0%, rgba(11,26,56,.52) 40%, rgba(11,26,56,.2) 70%, rgba(11,26,56,0) 100%),
    rgba(11,26,56,.16); }
.hero__foot { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px 64px; padding-top: clamp(140px, 22vh, 200px); padding-bottom: clamp(64px, 12vh, 112px); }
.hero__text { display: flex; flex-direction: column; gap: 26px; max-width: 760px; }
.hero__eyebrow { color: #fff; opacity: .92; text-shadow: 0 1px 12px rgba(11,26,56,.5); }
/* The headline scales with the window so it never climbs into the brighter middle of a short screen */
.hero__title { font-size: clamp(40px, min(4.8vw, 8.6vh), 68px); line-height: 1.06; color: #fff; font-weight: 500; text-shadow: 0 2px 28px rgba(11,26,56,.6), 0 1px 3px rgba(11,26,56,.35); }
.hero__address { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(11,26,56,.5); }
.hero__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; color: #fff; }
.hero__amount { font-size: 44px; line-height: 1.05; font-weight: 500; text-shadow: 0 2px 28px rgba(11,26,56,.6), 0 1px 3px rgba(11,26,56,.35); }
.hero__seal { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3; width: 84px; height: 84px; border-radius: 50%; background: var(--ivory); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--rule); }
.section--after-seal { padding-top: 120px; }
.emblem { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding-top: 4px; }
.hero__rics { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Video heroes: the video sits over the still, which remains as the first paint and the phone fallback */
.hero--video .hero__media--video { z-index: 1; background: transparent; object-position: center; }
.hero--video .hero__scrim { z-index: 2; }
.hero--overlay .hero__foot, .hero__seal { z-index: 3; }
.rics-mark { height: auto; display: block; }
.fade { animation: fadein 1.6s ease both; }
.rise { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Credentials strip ---------- */
.credentials { background: var(--ivory); padding-bottom: 32px; }
.credentials.section--after-seal { padding-top: 88px; }
.credentials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.credentials__item { background: var(--stone); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 28px; }
.credentials__title { font-size: 28px; line-height: 1.15; }
.credentials__caption { color: var(--muted); max-width: 22ch; }

/* ---------- Listings (Home and Sell: one featured row, then cards) ---------- */
.sales { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 40px; }
.sales > .sale { grid-column: 1 / -1; }
.listing { display: flex; flex-direction: column; gap: 20px; text-decoration: none; color: var(--navy); }
.listing:hover { color: var(--navy); }
.listing__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.listing__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.listing:hover .listing__img img, .listing:focus-visible .listing__img img { transform: scale(1.035); }
.listing__title { transition: color .3s ease; }
.listing:hover .listing__title { color: var(--teal); }
.listing__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 32px; }
.listing__name, .listing__price { display: flex; flex-direction: column; gap: 6px; }
.listing__price { align-items: flex-end; text-align: right; }
.listing__title { font-size: 30px; line-height: 1.1; }
.listing__amount { font-size: 24px; line-height: 1.1; }

/* ---------- Sale rows: Past successes, the featured sale, a property's own page ----------
   Photograph at 4:3 beside the details. The photograph is never taller than the space
   below the fixed header (--fit), and its width follows from that, so it is shown whole
   and the details sit beside it on any screen. */
.sales-list { display: flex; flex-direction: column; }
.sales-list .sale { padding: 64px 0; border-top: 1px solid var(--rule); }
.sales-list .sale:first-child { border-top: 0; padding-top: 0; }
.sale { display: grid; grid-template-columns: 7fr 5fr; gap: 40px 72px; align-items: center; }
.sale--flip { grid-template-columns: 5fr 7fr; }
.sale__img {
  --fit: calc(100vh - 176px);
  display: block; width: 100%; aspect-ratio: 4 / 3;
  max-height: var(--fit); max-width: calc(var(--fit) * 4 / 3);
  justify-self: end; overflow: hidden; background: var(--stone-2);
}
.sale--flip .sale__img { order: 2; justify-self: start; }
.sale__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
a.sale__img:hover img { transform: scale(1.03); }
.sale__body { display: flex; flex-direction: column; gap: 14px; }
.sale__title { font-size: 44px; line-height: 1.08; }
.sale__title--lg { font-size: 54px; line-height: 1.05; }
.sale__title a { text-decoration: none; transition: color .3s ease; }
.sale__title a:hover { color: var(--teal); }
.sale__amount { font-size: 32px; line-height: 1.1; padding-top: 6px; }
.sale__amount--lg { font-size: 40px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 16px; }
.gallery__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.gallery__img img { width: 100%; height: 100%; object-fit: cover; }
.pagination { display: flex; justify-content: center; gap: 24px; }
.pagination .nav-links { display: flex; gap: 24px; }
.pagination a, .pagination span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }

/* ---------- Photography marquee ---------- */
.marquee { padding-top: 8px; }
.marquee__viewport { overflow: hidden; width: 100%; }
.marquee__track { display: flex; gap: 8px; width: max-content; animation: marquee calc(var(--n, 4) * 14s) linear infinite; will-change: transform; }
.marquee__viewport:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; height: 520px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }

/* ---------- Photo strips ---------- */
.strip { padding-top: 8px; }
.strip__grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.strip__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.strip__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.strip__grid--tall .strip__img { aspect-ratio: 4 / 5; }
.strip__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Testimonials ---------- */
.quotes { position: relative; width: 100%; max-width: 920px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.quotes__mark { font-size: 120px; line-height: .6; height: 48px; color: var(--navy); opacity: .18; }
.quotes__track { position: relative; width: 100%; display: flex; flex-direction: column; gap: 56px; }
.quote { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.quote__text { margin: 0; font-size: 32px; line-height: 1.35; font-style: italic; font-weight: 400; }
.quote__by { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
.quote__rule { width: 36px; height: 1px; background: var(--navy); opacity: .5; }
/* Slider state (JS adds .is-ready): stack quotes, fade the active one */
.quotes--slider.is-ready .quotes__track { display: block; }
.quotes--slider.is-ready .quote { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), visibility 0s linear 1.1s; }
.quotes--slider.is-ready .quote.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.quotes__nav { display: none; align-items: center; gap: 28px; }
.quotes--slider.is-ready .quotes__nav { display: flex; }
.quotes__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; transition: border-color .4s ease, background-color .4s ease, color .4s ease; }
.quotes__btn:hover, .quotes__btn:focus-visible { border-color: var(--navy); background: var(--navy); color: #fff; }
.quotes__dots { display: flex; gap: 12px; }
.quotes__dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--navy); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .4s ease, transform .4s ease; }
.quotes__dot.is-active { background: var(--navy); transform: scale(1.15); }

/* ---------- RICS panel ---------- */
.rics { background: var(--ivory); }
.rics--dark { background: var(--navy); color: #fff; }
.rics--dark .t-h2 { color: #fff; }
.rics__text { font-size: 17px; line-height: 1.75; color: var(--muted); }
.rics--dark .rics__text { color: var(--on-navy); }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 40px; font-size: 15px; line-height: 1.5; }
.rules li { padding: 14px 0; border-top: 1px solid var(--rule); }
.rules li:last-child { border-bottom: 1px solid var(--rule); }
.rics--dark .rules { color: #E6EAF2; }
.rics--dark .rules li { border-color: rgba(255,255,255,.22); }
.rules--light { grid-template-columns: 1fr; font-size: 15px; }
.rules--light li { padding: 13px 0; }
.rics__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1px; background: rgba(18,38,79,.12); border: 1px solid rgba(18,38,79,.12); }
.rics--dark .rics__groups { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.18); }
.rics__group { background: var(--ivory); padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.rics--dark .rics__group { background: var(--navy); }
.rics__group-title { color: var(--muted); margin: 0; }
.rics--dark .rics__group-title { color: #B9C3D8; }
.rics__list { display: flex; flex-direction: column; gap: 0; font-size: 15px; line-height: 1.5; }
.rics__list li { padding: 12px 0; border-top: 1px solid var(--rule); }
.rics--dark .rics__list li { border-color: rgba(255,255,255,.16); color: #E6EAF2; }

/* ---------- Profile / portrait ---------- */
.portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); max-width: 520px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- About: qualities, team ---------- */
.qualities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px 64px; }
.quality { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding: 26px 0 8px; }
.quality__title { font-size: 27px; line-height: 1.2; }
.quality__text { font-size: 15px; line-height: 1.7; color: var(--muted); }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px 40px; align-items: start; }
.person { display: flex; flex-direction: column; gap: 18px; }
.person__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.person__img--text { background: var(--navy); display: flex; align-items: flex-end; padding: 28px; }
.person__placeholder { font-size: 34px; line-height: 1.15; color: #fff; font-style: italic; }
.person__name { font-size: 30px; line-height: 1.15; }
.person__bio { font-size: 15px; line-height: 1.7; padding-top: 4px; }

/* ---------- Sell: how I market ---------- */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 64px 40px; }
.how__item { display: flex; flex-direction: column; gap: 20px; }
.how__vis { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.how__vis img { width: 100%; height: 100%; object-fit: cover; }
.how__vis--plan { display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; border: 1px solid var(--rule); }
.how__vis--plan img { object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.how__vis--dark, .how__vis--light { display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.how__vis--dark { background: var(--navy); }
.how__vis--light { background: var(--stone); }
.how__statement { font-size: 38px; line-height: 1.2; color: #fff; }
.how__statement--italic { color: var(--navy); font-style: italic; }
.how__title { font-size: 30px; line-height: 1.15; }
.how__text { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- Services ---------- */
.services { display: flex; flex-direction: column; }
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px 96px; align-items: center; padding: 96px 0; border-top: 1px solid var(--rule); }
.svc:last-child { border-bottom: 1px solid var(--rule); }
.svc__title { font-size: 44px; line-height: 1.1; }
.svc__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-2); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
.svc--flip .svc__img { order: 2; }

/* ---------- Contact ---------- */
.ways { display: flex; flex-direction: column; }
.way { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding: 24px 0; }
.way--last { border-bottom: 1px solid var(--rule); }
.way a { font-size: 24px; line-height: 1.3; text-decoration: none; }
.way a.link { font-size: 11px; line-height: 1.6; }
.way__addr { font-size: 24px; line-height: 1.3; }

/* ---------- CTA band ---------- */
.cta--dark { background: var(--navy); color: #fff; }
.cta--dark .t-h2, .cta--dark .cta__phone { color: #fff; }
.cta--stone { background: var(--stone); }
.cta__text { font-size: 17px; }
.cta--dark .cta__text { color: var(--on-navy); }
.cta--stone .cta__text { color: var(--muted); }
.cta__phone { font-size: 36px; text-decoration: none; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 28px; padding-top: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--navy); min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312264F' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 14px 14px;
}
.field select::-ms-expand { display: none; }
.form--dark .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field select option { color: var(--navy); background: var(--ivory); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--navy); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--muted); }
.check input { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; }
.check--light { color: var(--on-navy); font-size: 13px; }
.check--light a { color: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { font-size: 15px; line-height: 1.6; padding: 14px 18px; border: 1px solid var(--navy); }
.form-notice--err { border-color: #9B2C2C; color: #9B2C2C; }
.form--dark .form-notice { border-color: #fff; color: #fff; }

/* Alerts band */
.alerts { background: var(--navy); color: #fff; padding-top: 96px; padding-bottom: 104px; }
.alerts .t-h2 { color: #fff; font-size: 44px; }
.alerts__eyebrow { color: #B9C3D8; }
.alerts__text { font-size: 16px; line-height: 1.7; color: var(--on-navy); }
.alerts__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.alerts__row .field { flex: 1 1 240px; }
.form--dark .field label { color: #fff; }
.form--dark .field input { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.form--dark .field input:focus { border-bottom-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); margin-top: auto; background: var(--ivory); }
.site-footer__top { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 72px; padding-bottom: 40px; }
.site-footer .wordmark { height: 24px; }
.site-footer__emblem { margin-bottom: -16px; }
.site-footer__blurb { max-width: 560px; text-align: center; font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: -16px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 36px 48px; width: 100%; max-width: 1000px; text-align: center; }
.fcol { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.fcol { align-items: center; }
.fcol .navlink, .fcol .navlink.on { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; padding: 0; border: 0; white-space: normal; background-image: none; color: var(--navy); transition: color .3s ease; }
.fcol .navlink:hover, .fcol .navlink:focus-visible { color: var(--teal); }
.site-footer__addr { line-height: 1.7; }
.site-footer__bottom { border-top: 1px solid var(--rule); }
.site-footer__bottom-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; padding-bottom: 26px; font-size: 12px; color: var(--muted); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---------- Reveal on scroll ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.2s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.fade { animation: fadein 1.8s ease both; }
.rise { animation: rise 1.4s cubic-bezier(.2,.7,.2,1) .4s both; }

/* ---------- Preview bar ---------- */
.mjea-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--navy-deep); color: #fff; font-size: 13px; padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: center; }
.mjea-preview-bar strong { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.mjea-preview-bar a { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .dnav { display: none; }
  .menu { display: block; position: relative; justify-self: start; }
  details.menu[open] .mnav { display: flex; flex-direction: column; position: absolute; left: 0; top: calc(100% + 14px); background: var(--ivory); min-width: 240px; padding: 12px 0; border: 1px solid var(--rule); z-index: 20; }
  .mnav .navlink { padding: 12px 20px; border-bottom: 0; color: var(--navy); }
  .mnav .navlink.on { text-decoration: underline; text-underline-offset: 4px; }
  .hide-m { display: none !important; }
  .site-header--overlay:not(.is-scrolled) .wordmark { height: 20px; }
  .wordmark { height: 20px; }
  .site-main { padding-top: 92px; }
  .hero--overlay { min-height: 100vh; min-height: 100svh; }
  .hero--video .hero__media--video { display: none; }
  .hero__foot { padding-bottom: 88px; }
  .hero__seal { width: 68px; height: 68px; }
  .hero__seal .emblem { width: 36px !important; height: 36px !important; }
  .section--after-seal { padding-top: 88px; }
  .credentials.section--after-seal { padding-top: 72px; }
  .credentials__item { padding: 28px 20px; }
  .marquee__item { height: 300px; }
  .quote__text { font-size: 24px; }
  .quotes__mark { font-size: 90px; height: 36px; }
  .rics__group { padding: 28px 22px 30px; }
  .hero__scrim { background: linear-gradient(180deg, rgba(11,26,56,.55) 0%, rgba(11,26,56,.38) 30%, rgba(11,26,56,.66) 58%, rgba(11,26,56,.95) 100%); }
  .hero__foot { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 40px; }
  .hero__title { font-size: clamp(34px, 9.5vw, 42px); }
  .hero__price { align-items: flex-start; text-align: left; }
  .hero__amount { font-size: 34px; }
  .t-hero { font-size: 40px; }
  .t-h2 { font-size: 34px; }
  .t-lead { font-size: 26px; }
  .t-lead--sm { font-size: 24px; }
  .section, .section--ruled, .section--intro, .section--pageintro, .alerts { padding-top: 64px; padding-bottom: 64px; }
  .section--tight { padding-top: 0; }
  .sales { grid-template-columns: 1fr; gap: 48px; }
  .sale, .sale--flip { grid-template-columns: 1fr; gap: 24px; }
  .sales-list .sale { padding: 40px 0; }
  .sale--flip .sale__img { order: 0; }
  .sale__img { max-height: none; max-width: none; }
  .sale__title { font-size: 32px; }
  .sale__title--lg { font-size: 40px; }
  .sale__amount { font-size: 26px; }
  .strip__grid--3 { grid-template-columns: 1fr 1fr; }
  .strip__grid--3 .strip__img:first-child { grid-column: span 2; }
  .svc { padding: 64px 0; }
  .svc__title { font-size: 34px; }
  .svc__img, .svc--flip .svc__img { order: -1; aspect-ratio: 4 / 3; }
  .way a, .way__addr { font-size: 20px; }
  .alerts .t-h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .marquee__viewport { overflow-x: auto; }
}