/* ==========================================================================
   Sharess McCormack — Real Estate
   style.css  —  Get a Cash Offer
   --------------------------------------------------------------------------
   Pages: index.html

   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
   13. PAGE THEME — Sell Your House (blue skin)
   14. CASH-OFFER PAGE  (index.html)
   15. YOUTUBE LIGHTBOX

/* ==========================================================================
   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-lead {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--slate);
  max-width: 56ch;
}

.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);
}

.container-narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }

.section--paper { background: var(--paper); }
.section--limestone { background: var(--limestone); }
.section--limestone-2 { background: var(--limestone-2); }
.section--ink { background: var(--ink); }

/* 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%);
}

/* ==========================================================================
   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); }

/* --- 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__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- 9.2 parallax hero (inner pages) --------------------------------- */

/* 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.5 media + text split ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.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); }

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

/* --- 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.11 video / tips cards ------------------------------------------ */
.tip-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden; height: 100%;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tip-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tip-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--moss); }
.tip-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.tip-card:hover .tip-card__media img { transform: scale(1.06); }
.tip-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(251,250,247,.92);
  display: grid; place-items: center;
  transition: transform .45s var(--ease-out), background-color .35s var(--ease);
}
.tip-card__play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transition: border-left-color .35s var(--ease);
}
.tip-card:hover .tip-card__play { transform: scale(1.12); background: var(--brass); }
.tip-card:hover .tip-card__play::after { border-left-color: var(--white); }
.tip-card__len {
  position: absolute; right: .7rem; bottom: .7rem;
  background: rgba(20,38,31,.82); color: var(--limestone-2);
  font-size: var(--fs-xs); padding: .18rem .5rem; border-radius: 2px;
}
.tip-card__body { padding: clamp(1.15rem, 2.2vw, 1.6rem); }
.tip-card__body h3 { font-size: 1.16rem; font-family: var(--font-ui); font-weight: 500; margin-bottom: .5rem; }
.tip-card__body p { font-size: var(--fs-sm); margin: 0; }

/* --- 9.13 numbered process (moved from main site) -------------------- */
.steps { counter-reset: step; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  position: relative;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__num {
  counter-increment: step;
  width: 56px; height: 56px; flex: none;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem; color: var(--brass-dk);
  background: transparent;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step:hover .step__num { background: var(--brass); color: var(--white); }
.step h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.step p { margin: 0; font-size: var(--fs-sm); }
.step p a { color: var(--brass-dk); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .step { border-color: var(--line-dark); }
.on-dark .step__num { border-color: var(--brass-lt); color: var(--brass-lt); }

/* --- 9.15 FAQ (Bootstrap accordion, restyled) ------------------------- */
.faq .accordion-item {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.faq .accordion-button {
  background: transparent;
  padding: 1.5rem 3rem 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  color: var(--ink);
  box-shadow: none;
  border-radius: 0;
  transition: color .3s var(--ease);
}
.faq .accordion-button:hover { color: var(--brass-dk); }

.faq .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq .accordion-button::after {
  width: 16px; height: 16px;
  background: none;
  content: "";
  position: absolute; right: .35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-4px, -4px);
  transition: transform .45s var(--ease-out);
}

.faq .accordion-body { padding: 0 3rem 1.75rem 0; font-size: var(--fs-sm); }
.faq .accordion-body p { max-width: 74ch; }

/* --- 9.16 CTA strip ---------------------------------------------------- */
.cta-px { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); text-align: center; }
.cta-px__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.cta-px .t-h2 { color: var(--limestone-2); }
.cta-px .t-lead { color: rgba(232,226,214,.78); margin-inline: auto; margin-bottom: var(--s-6); }

/* --- 9.18 contact split ------------------------------------------------ */

.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.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) { color: rgba(232,226,214,.72); }

.form-x .req { color: var(--brass-dk); }
.on-dark .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); }

.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);
}
.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 { border-color: var(--line-dark); color: rgba(232,226,214,.75); }
.on-dark .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 { color: rgba(232,226,214,.68); }
.on-dark .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; }
.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 { 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); }

/* the lead form card that floats over the sell-page hero */
.lead-card {
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.lead-card__head { text-align: center; margin-bottom: var(--s-5); }
.lead-card__head h2 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.lead-card__head p { font-size: var(--fs-sm); margin: 0 auto; }

/* ==========================================================================
   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; }

  .split { grid-template-columns: 1fr; }

  .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) {

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

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

  /* 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; }

  .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; }

}

@media print {

  .site-header,
  .mobile-nav,
  .cta-px { 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; }

}

/* ==========================================================================
   13. PAGE THEME — Sell Your House (blue skin)
   The client asked for blue and gold on this page's covers. Re-pointing the
   tokens themes the whole page without duplicating a single component rule.
   ========================================================================== */
.theme-blue {
  --ink:       #0E2A47;   /* deep navy */
  --ink-2:     #143A5E;
  --moss:      #1B4A76;   /* mid blue, replaces the evergreen band */
  --brass:     #C9A227;   /* gold */
  --brass-dk:  #A07F14;
  --brass-lt:  #E8D28A;
  --limestone: #E4E9EF;   /* cool neutral panel to sit with the navy */
  --limestone-2: #EFF3F7;
  --paper:     #FBFCFD;
  --slate:     #4C5A68;
  --slate-lt:  #8593A1;
  --line:      rgba(14, 42, 71, .14);
  --line-soft: rgba(14, 42, 71, .08);
  --line-dark: rgba(228, 233, 239, .20);
}
/* The scrim over each cover is tinted navy rather than evergreen. */
.theme-blue .px__scrim {
  background: linear-gradient(180deg, rgba(14,42,71,.78) 0%, rgba(14,42,71,.62) 45%, rgba(14,42,71,.82) 100%);
}

/* ==========================================================================
   14. CASH-OFFER PAGE  (index.html)
   The sections added from the reference layout: trust strip, "when to sell"
   grid, checklist columns, side-by-side benefit panels, three-across steps and
   the mid-page call band. The hero and the closing CTA are the page's original
   ones and use the shared components, not these.
   Everything is prefixed .co- so it cannot leak into the other four pages.
   ========================================================================== */

/* --- 15.1 trust strip ------------------------------------------------- */
.co-trust { background: var(--limestone-2); border-block: 1px solid var(--line-soft); }
.co-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.5rem);
}
.co-trust__item {
  display: flex; align-items: flex-start; gap: .85rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--slate);
  line-height: 1.5;
}
.co-trust__item b { display: block; color: var(--ink); font-weight: 500; }
.co-trust__item svg {
  width: 26px; height: 26px; flex: none; margin-top: 2px;
  color: var(--brass-dk);
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- 15.2 "when should I sell" icon tiles ----------------------------- */
.co-sit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.co-sit {
  background: var(--paper);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  transition: background-color .45s var(--ease);
}
.co-sit:hover { background: var(--white); }
.co-sit__icon {
  display: block; width: 40px; height: 40px;
  margin: 0 auto var(--s-4);
  color: var(--brass-dk);
  transition: transform .5s var(--ease-out);
}
.co-sit__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.co-sit:hover .co-sit__icon { transform: translateY(-4px); }
.co-sit p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
}
@media (max-width: 900px) {
   .co-sit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 15.3 three checklist columns ------------------------------------- */
.co-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.co-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
}
.co-col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-align: center;
  margin: 0 0 var(--s-5);
}
.co-col ul { list-style: none; margin: 0; padding: 0; }
.co-col li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--slate);
  padding-block: .5rem;
  border-bottom: 1px solid var(--line-soft);
}
.co-col li:last-child { border-bottom: 0; }
.co-col li::before {
  content: "";
  width: 17px; height: 17px; flex: none; margin-top: 3px;
  background: var(--brass) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  border-radius: 50%;
}
@media (max-width: 860px) {
   .co-cols { grid-template-columns: 1fr; }
}

/* --- 15.4 benefit panels (listing vs direct sale) --------------------- */
.co-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: start;
}
.co-vs__panel {
  background: var(--limestone-2);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.co-vs__panel h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-h4);
  letter-spacing: .05em;
  text-align: center;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.co-vs__panel--hi {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
  position: relative;
}
.co-vs__panel--hi h3 { color: var(--white); border-bottom-color: rgba(232,237,243,.24); }
.co-vs__row { padding-block: .95rem; border-bottom: 1px solid var(--line-soft); }
.co-vs__row:last-child { border-bottom: 0; padding-bottom: 0; }
.co-vs__row b {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: .3rem;
}
.co-vs__row p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate);
}
.co-vs__panel--hi .co-vs__row { border-bottom-color: rgba(232,237,243,.16); }
.co-vs__panel--hi .co-vs__row b { color: var(--brass-lt); }
.co-vs__panel--hi .co-vs__row p { color: rgba(232,237,243,.78); }
@media (max-width: 860px) {
   .co-vs { grid-template-columns: 1fr; }
}

/* --- 15.5 three-across steps ------------------------------------------ */
.co-steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.6vw, 3rem);
  counter-reset: costep;
}
.co-step3 { counter-increment: costep; }
.co-step3__num {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--brass);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--brass-dk);
}
.co-step3__num::before { content: counter(costep, decimal-leading-zero); }
.co-step3 h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.co-step3 p { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 860px) {
   .co-steps3 { grid-template-columns: 1fr; }
}

/* --- 15.6 mid-page call band ------------------------------------------ */
.co-band { background: var(--ink); text-align: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.co-band h2 { color: var(--white); margin: 0 auto var(--s-5); max-width: 22ch; }
.co-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center;
}

/* ==========================================================================
   15. YOUTUBE LIGHTBOX
   Shared modal used by the testimonial cards (any [data-yt] link). Bootstrap
   supplies the behaviour; this only re-skins the chrome so the player sits in
   the site's own palette instead of Bootstrap's default white card.
   ========================================================================== */
.yt-modal .modal-content {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.yt-modal .modal-header {
  border-bottom: 1px solid var(--line-dark);
  padding: 1rem 1.25rem;
}
.yt-modal .modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--paper);
  margin: 0;
}
.yt-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .7;
}
.yt-modal .btn-close:hover { opacity: 1; }
.yt-modal .modal-body { padding: 0; }
.yt-modal .ratio iframe { border: 0; display: block; }

/* The card is a real link, so give it a visible keyboard focus ring. */
.tip-card:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Local-preview notice inside the video modal. Only ever visible on file://,
   where YouTube cannot verify the host page and returns Error 153. */
.yt-local {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.yt-local h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: .85rem;
}
.yt-local p {
  font-size: var(--fs-sm);
  color: rgba(232, 226, 214, .78);
  max-width: 46ch;
  margin: 0 auto .85rem;
}
.yt-local__how { margin-bottom: 1.5rem !important; }
.yt-local code {
  font-size: .92em;
  color: var(--brass-lt);
  background: rgba(232, 226, 214, .08);
  padding: .12em .42em;
  border-radius: 3px;
}
.yt-local strong { color: var(--paper); }