/* ============================================================
   Clients2Homeowners — styles.css

   Palette, logo, type and texture all come from the real brand
   at clients2homeowners.com. Verified against the live site:
     - the logo is sage #7E9283 + terracotta #D77967
     - its headings compute to slate #2C4251
     - every link on it computes to terracotta #D77967
     - its hero ground is sage under a brushed-plaster overlay
   There is no forest green anywhere in that brand, so there is
   none here either.

   Structure follows the Shawn Huber reference: dark bands used
   as a recurring structural device, light card sections between
   them, a dark footer. Depth comes from the brand's own
   brushed texture, torn-edge band dividers, and elements that
   deliberately cross a band boundary (.bleed-*).

   Rule of thumb for where CSS lives: modules shared by several
   pages belong here; CSS for a single one-off page (the mortgage
   calculator, the flyer builder) stays inline on that page so the
   rest of the site doesn't pay to download it.
   ============================================================ */

/* --- Fonts: the brand's own (Be Vietnam Pro + Source Sans 3) --- */
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/fonts/bevietnampro-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/fonts/bevietnampro-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/fonts/bevietnampro-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3-var.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
/* Metric-matched fallback so the swap doesn't shift layout */
@font-face {
  font-family: 'C2H Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* --- Tokens --- */
:root {
  /* Straight off the real brand */
  --sage:       #7E9283;   /* logo + the site's signature ground */
  --terracotta: #D77967;   /* logo numeral, every link, primary action */
  --slate:      #2C4251;   /* the live site's heading colour + dark ground */
  --ink:        #192945;   /* deepest ground: footer, gradient ends */
  --off-white:  #F7F7F7;
  --line:       #DEDFE1;
  --charcoal:   #333333;

  /* Derived — hovers, tints, scrims. Nothing new is invented here. */
  --terracotta-deep:  #C2624F;
  --terracotta-lift:  #EFAE9C;   /* terracotta lifted for dark grounds — #D77967
                                    on slate is only 3.37:1 and reads muddy */
  --terracotta-tint:  #FBEFEB;
  --sage-deep:        #6B7F70;
  --sage-tint:        #EFF2EF;
  --slate-raised:     #35506282;
  --ink-raised:       #27415A;
  --ink-hairline:     #3D5A73;

  /* Semantic aliases — the resource pages and blog were authored
     against these names, so they stay, repointed at the brand. */
  --color-primary:      var(--slate);
  --color-primary-dark: var(--slate);
  --color-accent:       var(--terracotta);
  --color-accent-hover: var(--terracotta-deep);
  --color-warm:         var(--terracotta);
  --color-warm-light:   var(--terracotta-tint);
  --color-bg:           #ffffff;
  --color-bg-alt:       var(--off-white);
  --color-bg-dark:      var(--slate);
  --color-text:         var(--charcoal);
  --color-text-light:   #5B6470;
  --color-text-muted:   #8A929C;
  --color-border:       var(--line);
  --color-success:      #4F7A5B;

  --font-sans:    'Source Sans 3', 'C2H Fallback', Helvetica, Arial, sans-serif;
  --font-display: 'Be Vietnam Pro', 'C2H Fallback', Helvetica, Arial, sans-serif;

  --max-width: 1180px;
  --header-height: 82px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow:    0 2px 8px rgba(44,66,81,0.05), 0 10px 30px rgba(44,66,81,0.07);
  --shadow-lg: 0 4px 14px rgba(44,66,81,0.08), 0 22px 56px rgba(44,66,81,0.14);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* The brand's brushed-plaster overlay, multiplied over any ground */
  --texture: url('/images/texture-paint.webp');
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--terracotta-deep); }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }

/* --- Layout utility --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-alt { background: var(--off-white); }
.section-warm { background: var(--sage-tint); }
.full-width { width: 100vw; margin-left: calc(-50vw + 50%); padding-left: 24px; padding-right: 24px; }
.text-center { text-align: center; }
.accent { color: var(--terracotta); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-img { border-radius: var(--radius); overflow: hidden; }

/* ============================================================
   Dark band — the structural device this site is built around.
   Alternating dark/light bands are what separate it visually
   from a conventional all-white services site.
   ============================================================ */
.section-dark {
  background:
    var(--texture),
    radial-gradient(1100px 540px at 84% -12%, rgba(126,146,131,0.24), transparent 62%),
    linear-gradient(168deg, var(--slate) 0%, #24384A 52%, var(--ink) 100%);
  background-size: 900px 830px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  color: #fff;
  position: relative;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: #fff; }
.section-dark .lead,
.section-dark p { color: rgba(255,255,255,0.76); }
.section-dark .section-label { color: var(--terracotta-lift); }
.section-dark a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Cards sitting on a dark band */
.section-dark .card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-hairline);
  box-shadow: none;
}
.section-dark .card:hover {
  border-color: var(--sage);
  box-shadow: 0 18px 46px rgba(0,0,0,0.32);
}
.section-dark .card h3 { color: #fff; }
.section-dark .card p { color: rgba(255,255,255,0.72); }
.section-dark .card-icon {
  background: rgba(126,146,131,0.18);
  color: var(--sage);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--ink);
}
h1 { font-size: clamp(2.15rem, 4.8vw, 3.5rem); margin-bottom: 1.1rem; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: 0.85rem; }
h3 { font-size: clamp(1.12rem, 2.2vw, 1.35rem); margin-bottom: 0.5rem; letter-spacing: -0.015em; }
h4 { font-size: 1.02rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }
.section-dark strong { color: #fff; }

.section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.73rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.85rem;
}
.lead {
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--color-text-light);
}
.lead.centered { max-width: 660px; margin-left: auto; margin-right: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn-lg { padding: 16px 34px; font-size: 0.98rem; }
/* Terracotta carries INK text, never white: #fff on #D77967 is 3.10:1 and
   fails AA at button sizes, while #192945 on it is 4.69:1 and passes. */
.btn-primary { background: var(--terracotta); color: var(--ink); border-color: var(--terracotta); }
.btn-primary:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(215,121,103,0.42);
}
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-white:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.65);
  transform: translateY(-2px);
}
/* Ghost button on a dark background */
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.42);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}
/* Ghost button on a light background */
.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline-dark:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* --- Header --- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(25,41,69,0.09); }

.header-top {
  background: var(--ink);
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.header-top .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 36px;
}
.header-top a { color: rgba(255,255,255,0.8); }
.header-top a:hover { color: var(--terracotta); }
.header-top-social { display: flex; align-items: center; gap: 14px; }
.header-top-social a { display: inline-flex; }

.header-main .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-height);
}

/* --- Logo (the real brand mark from clients2homeowners.com) --- */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { width: 206px; height: auto; }
.logo-sub {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sage);
  padding-left: 2px;
}
.footer-logo { width: 210px; height: auto; margin-bottom: 0.9rem; }

/* --- Nav --- */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a,
.nav-dropdown > a {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink);
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}
.nav-links > a:hover,
.nav-dropdown:hover > a { background: var(--off-white); color: var(--terracotta); }
.nav-links a.active { color: var(--terracotta); font-weight: 600; }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: 7px;
}
.nav-dropdown-menu a:hover { background: var(--off-white); color: var(--terracotta); }

.nav-cta {
  background: var(--terracotta);
  color: #fff !important;
  font-weight: 600 !important;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--terracotta-deep) !important; color: #fff !important; }

.mobile-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--ink); padding: 6px;
}
.mobile-toggle svg { width: 26px; height: 26px; }

/* --- Mobile nav --- */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(25,41,69,0.55);
  backdrop-filter: blur(3px);
}
.mobile-nav.open { display: block; }
.mobile-nav-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: #fff;
  padding: 26px 22px;
  overflow-y: auto;
  box-shadow: -12px 0 44px rgba(25,41,69,0.24);
}
.mobile-nav-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink); margin-bottom: 18px; padding: 4px;
}
.mobile-nav-close svg { width: 26px; height: 26px; }
.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  padding: 12px 10px;
  border-radius: 9px;
}
.mobile-nav-links a:hover { background: var(--off-white); color: var(--terracotta); }
.mobile-nav-links a.active { color: var(--terracotta); }
.mobile-nav-links .mobile-nav-sub {
  padding-left: 26px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-light);
}
.mobile-nav-links .btn { margin-top: 14px; }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(var(--header-height) + 36px);
  padding: 92px 0;
  background: var(--ink);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center right;
  z-index: 0;
}
/* Scrim reads dark on the left where the copy sits and clears toward
   the right so the photograph is actually visible. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--ink) 6%, rgba(25,41,69,0.94) 34%, rgba(29,48,80,0.72) 58%, rgba(44,66,81,0.44) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-content { max-width: 660px; color: #fff; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5.1vw, 3.7rem);
  margin-bottom: 1.15rem;
}
.hero .lead {
  color: rgba(255,255,255,0.82);
  font-size: 1.14rem;
  margin-bottom: 2.1rem;
  max-width: 600px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(126,146,131,0.2);
  border: 1px solid rgba(126,146,131,0.42);
  padding: 8px 17px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.79rem;
  font-weight: 500;
  color: #E4EAE5;
  margin-bottom: 1.6rem;
}
.hero-badge svg { width: 15px; height: 15px; color: var(--sage); }

/* --- Page hero (inner pages) --- */
.page-hero {
  position: relative;
  padding: 104px 0 76px;
  margin-top: calc(var(--header-height) + 36px);
  overflow: hidden;
  background: var(--ink);
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 10%, rgba(25,41,69,0.93) 45%, rgba(44,66,81,0.62) 100%);
}
/* Pages with no background image still need the gradient */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 340px at 88% 0%, rgba(126,146,131,0.2), transparent 62%),
    linear-gradient(165deg, var(--ink) 0%, var(--slate) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 0.65rem; }
.page-hero .lead { color: rgba(255,255,255,0.8); max-width: 720px; }
.page-hero .section-label { color: var(--terracotta); }

/* --- Cards --- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--sage);
}
.card-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  background: var(--sage-tint);
  color: var(--terracotta);
  flex-shrink: 0;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { color: var(--ink); }
.card p { color: var(--color-text-light); font-size: 0.94rem; flex-grow: 1; }
.card-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--sage-tint);
  color: var(--terracotta);
  margin-top: 22px;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.card-arrow svg { width: 16px; height: 16px; }
.card:hover .card-arrow { background: var(--terracotta); color: #fff; transform: translateX(4px); }
.card-arrow-primary { background: var(--sage-tint); color: var(--terracotta); }
.section-dark .card-arrow,
.section-dark .card-arrow-primary { background: rgba(126,146,131,0.2); color: var(--sage); }
.section-dark .card:hover .card-arrow { background: var(--terracotta); color: #fff; }

/* --- Stats --- */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stat-item h3 {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 8px;
  letter-spacing: -0.04em;
}
.stat-item p { font-size: 0.9rem; color: var(--color-text-light); font-weight: 500; }
.section-dark .stat-item h3 { color: var(--sage); }

/* --- CTA banner --- */
.cta-banner {
  position: relative;
  overflow: hidden;
  background:
    var(--texture),
    radial-gradient(820px 420px at 14% 118%, rgba(215,121,103,0.30), transparent 64%),
    radial-gradient(760px 400px at 88% -20%, rgba(126,146,131,0.26), transparent 62%),
    linear-gradient(122deg, var(--slate) 0%, #24384A 55%, var(--ink) 100%);
  background-size: 900px 830px, auto, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal;
  color: #fff;
  padding: 92px 0;
  text-align: center;
}
.cta-banner h2 { color: #fff; }
.cta-banner p {
  color: rgba(255,255,255,0.88);
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.06rem;
}
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn-primary { background: var(--terracotta); color: var(--ink); border-color: var(--terracotta); }
.cta-banner .btn-primary:hover {
  background: #fff; color: var(--ink); border-color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
/* Every page's CTA pairs .btn-primary with .btn-white. On the green band both
   render as solid white and the pair reads as one button split in two, so the
   secondary becomes a ghost here. Fixed in CSS rather than in 8 pages of markup. */
.cta-banner .btn-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.cta-banner .btn-white:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: #fff;
}

/* --- Forms --- */
.form-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px;
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 7px;
  color: var(--ink);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(215,121,103,0.11);
}
.form-group textarea { min-height: 128px; resize: vertical; }
.form-consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: 20px;
}
.form-consent input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--terracotta);
}
.form-success { display: none; text-align: center; padding: 2.6rem 0; }
.form-success.show { display: block; }
.success-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--terracotta);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.3rem;
  color: #fff;
}
.form-success h3 { margin-bottom: 0.4rem; color: var(--ink); }
.form-success p { color: var(--color-text-light); }
.form-error {
  display: none;
  margin-top: 15px;
  padding: 14px 18px;
  border-left: 3px solid #B3261E;
  background: #FDF0EF;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: #7A1A15;
}
.form-error a { color: #7A1A15; text-decoration: underline; }

/* --- Contact page --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: start; }
.contact-info .contact-item {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-info .contact-item:last-child { border-bottom: none; }
.contact-info .contact-item svg {
  width: 21px; height: 21px; color: var(--terracotta); flex-shrink: 0; margin-top: 4px;
}
.contact-info .contact-item h4 { margin-bottom: 2px; font-size: 0.93rem; color: var(--ink); }
.contact-info .contact-item p,
.contact-info .contact-item a { font-size: 0.9rem; color: var(--color-text-light); }
.contact-info .contact-item a:hover { color: var(--terracotta); }

/* ============================================================
   Resource pages (DPA / Student Loans / Credit / HUD)
   One shared accordion + callout system. These four pages each
   carried a private copy of this block under its own class prefix
   (.dpa- / .sl- / .cr- / .hud-); consolidated to .res- on the move.
   ============================================================ */

/* Resource page tabs navigation */
.resource-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.resource-tab {
  flex: 0 0 auto;
  padding: 18px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-light);
  background: #fff;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
  text-decoration: none;
  display: inline-block;
}
.resource-tab:hover {
  color: var(--ink);
  background-color: var(--off-white);
}
.resource-tab--active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  background-color: #fff;
}

.res-overview-section { background: var(--off-white); }
.res-overview-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.res-overview-intro p:not(.section-label) { font-size: 1.06rem; color: var(--color-text-light); }

.res-callout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.res-callout-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--terracotta);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.res-callout-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sage-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.res-callout-card-icon svg { width: 21px; height: 21px; color: var(--terracotta); }
.res-callout-card-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--terracotta);
}
.res-callout-card h3 { font-size: 1.05rem; color: var(--ink); margin: 0; line-height: 1.24; }
.res-callout-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.68; margin: 0; }
.res-callout-note {
  background: var(--terra-tint);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 13px 17px;
  font-size: 0.88rem;
  color: var(--color-text-light);
  margin-top: 14px;
  line-height: 1.66;
}

/* DPA variant: the callout cards stack and collapse instead of sitting 4-up */
.res-callout-grid--stack {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 12px;
}
.res-callout-card--collapsible {
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--terracotta);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.res-callout-card-header {
  padding: 20px 24px;
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 17px; align-items: center; justify-content: space-between;
  cursor: pointer;
  background: #fff; border: none; width: 100%; text-align: left;
  transition: background var(--transition);
}
.res-callout-card-header:hover { background: var(--off-white); }
.res-callout-card-header[aria-expanded="true"] {
  background: var(--sage-tint);
  border-bottom: 1px solid var(--line);
}
.res-callout-card-left {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; flex-shrink: 0; width: 90px;
}
.res-callout-card--collapsible .res-callout-card-icon { width: 46px; height: 46px; }
.res-callout-card--collapsible .res-callout-card-icon svg { width: 23px; height: 23px; }
.res-callout-card--collapsible .res-callout-card-label {
  font-size: 0.63rem; letter-spacing: 0.13em; text-align: center;
}
.res-callout-card-header h3 { flex: 1; font-size: 1.05rem; color: var(--ink); margin: 0; line-height: 1.24; }
.res-callout-card-chevron {
  flex-shrink: 0; width: 21px; height: 21px;
  color: var(--terracotta);
  transition: transform var(--transition);
}
.res-callout-card-header[aria-expanded="true"] .res-callout-card-chevron { transform: rotate(180deg); }
.res-callout-card-body { display: none; padding: 24px 28px 28px; flex-direction: column; gap: 8px; }
.res-callout-card-body.is-open { display: flex; }

/* Topic accordions */
.res-topics-section { background: #fff; }
.res-topics-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.res-topics-intro p:not(.section-label) { font-size: 1.06rem; color: var(--color-text-light); }

.res-accordion { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.res-accordion-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.res-accordion-item:hover { border-color: var(--sage); }
.res-accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px;
  background: #fff; border: none; cursor: pointer; text-align: left;
  transition: background var(--transition);
}
.res-accordion-trigger:hover { background: var(--off-white); }
.res-accordion-trigger[aria-expanded="true"] {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.res-accordion-trigger[aria-expanded="true"] h3,
.res-accordion-trigger[aria-expanded="true"] .res-accordion-title-group { color: #fff; }
.res-accordion-title-group {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.res-accordion-num {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--terracotta);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.res-accordion-chevron {
  flex-shrink: 0; width: 21px; height: 21px;
  color: var(--terracotta);
  transition: transform var(--transition);
}
.res-accordion-trigger[aria-expanded="true"] .res-accordion-chevron {
  transform: rotate(180deg); color: var(--sage);
}
.res-accordion-body { display: none; padding: 24px 26px 28px; }
.res-accordion-body.is-open { display: block; }
.res-accordion-body p { color: var(--color-text-light); font-size: 0.95rem; }
.res-accordion-body ul, .res-accordion-body ol { margin: 0 0 1rem; padding-left: 20px; }
.res-accordion-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.68;
}
.res-accordion-body li::before {
  content: '';
  position: absolute; left: 0; top: 0.66em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.res-accordion-body h4 { color: var(--ink); margin: 1.3rem 0 0.5rem; }
.res-accordion-body h4:first-child { margin-top: 0; }

/* Numbered step list */
.res-step-list { counter-reset: res-steps; display: flex; flex-direction: column; gap: 15px; }
.res-step-list li {
  counter-increment: res-steps;
  position: relative;
  padding-left: 46px;
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.68;
}
.res-step-list li::before {
  content: counter(res-steps);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--sage-tint);
  color: var(--terracotta);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Comparison tables */
.res-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.res-compare-table th {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 15px;
}
.res-compare-table td {
  padding: 12px 15px;
  border-top: 1px solid var(--line);
  color: var(--color-text-light);
  vertical-align: top;
}
.res-compare-table tbody tr:nth-child(even) { background: var(--off-white); }
.res-compare-table strong { color: var(--ink); }

/* ============================================================
   Articles (index, cards, post pages)
   Class names follow BLOG-TEMPLATE.md so the myaieditor
   publisher can clone the reference card.
   ============================================================ */
.blog-hero {
  background:
    radial-gradient(820px 380px at 78% 0%, rgba(126,146,131,0.2), transparent 62%),
    linear-gradient(165deg, var(--ink) 0%, var(--slate) 100%);
  padding: calc(var(--header-height) + 96px) 24px 78px;
  text-align: center;
  margin-top: 36px;
}
.blog-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--terracotta);
  margin-bottom: 0.8rem;
}
.blog-hero h1 { color: #fff; margin: 0 0 1rem; }
.blog-hero p {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.78);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.72;
}
.blog-wrap-full { max-width: var(--max-width); margin: 0 auto; padding: 68px 24px 88px; }

.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 44px; }
.filter-btn {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filter-btn.active { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: var(--sage);
}
.post-card-thumb { background: var(--sage-tint); aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card-cat {
  font-family: var(--font-display);
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terracotta);
  margin-bottom: 0.5rem;
}
.post-card-title {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.32;
  letter-spacing: -0.02em;
  flex: 1;
}
.post-card-meta { font-size: 0.76rem; color: var(--color-text-muted); }

/* Breadcrumb */
.breadcrumb {
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
  margin-top: calc(var(--header-height) + 36px);
}
.breadcrumb-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 13px 24px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.breadcrumb-inner a { color: var(--color-text-light); }
.breadcrumb-inner a:hover { color: var(--terracotta); }
.breadcrumb-sep { color: var(--color-text-muted); }
.breadcrumb + .blog-post-hero { margin-top: 0; }

/* Post hero */
.blog-post-hero {
  position: relative;
  min-height: 400px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--ink);
  margin-top: calc(var(--header-height) + 36px);
}
.blog-post-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.26;
}
.blog-post-hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 3.4rem 1.5rem;
  max-width: 760px;
}
.blog-post-cat {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.69rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--sage);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.blog-post-hero h1 { color: #fff; margin-bottom: 1rem; }
.blog-post-hero .post-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 11px; flex-wrap: wrap;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.72);
}
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); display: inline-block; }

/* Post body + sidebar */
.blog-post-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 66px 24px 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 56px;
  align-items: start;
}
.blog-article { font-size: 1.04rem; line-height: 1.82; color: var(--color-text); }
.blog-article h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin: 2.4rem 0 0.9rem;
  color: var(--ink);
}
.blog-article h2:first-child { margin-top: 0; }
.blog-article h3 { margin: 1.8rem 0 0.6rem; color: var(--ink); }
.blog-article p { margin: 0 0 1.3rem; }
.blog-article ul, .blog-article ol { margin: 0 0 1.5rem; padding-left: 4px; }
.blog-article li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.8rem;
}
.blog-article li::before {
  content: '';
  position: absolute; left: 4px; top: 0.72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
}
.blog-article a { text-decoration: underline; text-underline-offset: 3px; }
.blog-cta-banner {
  background:
    linear-gradient(120deg, var(--terracotta-deep) 0%, var(--terracotta) 100%);
  border-radius: var(--radius);
  padding: 34px 36px;
  margin-top: 2.6rem;
  color: #fff;
}
.blog-cta-banner h3 { color: #fff; margin-bottom: 0.5rem; }
.blog-cta-banner p { color: rgba(255,255,255,0.87); font-size: 0.96rem; margin-bottom: 1.4rem; }
.blog-cta-banner .btn { font-size: 0.86rem; background: #fff; color: var(--terracotta-deep); border-color: #fff; }
.blog-cta-banner .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-height) + 56px); }
.sidebar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidebar-head {
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink);
}
.sidebar-body { padding: 8px 18px 16px; display: flex; flex-direction: column; }
.sidebar-link {
  display: block;
  padding: 12px 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.sidebar-body .sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover { color: var(--terracotta); }
.sidebar-cta {
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(126,146,131,0.26), transparent 65%),
    linear-gradient(160deg, var(--ink) 0%, var(--slate) 100%);
  border-radius: var(--radius);
  padding: 26px 24px;
  color: #fff;
}
.sidebar-cta-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.sidebar-cta p { font-size: 0.88rem; color: rgba(255,255,255,0.76); margin-bottom: 1.1rem; }
.sidebar-cta a {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  background: var(--terracotta);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--transition);
}
.sidebar-cta a:hover { background: var(--terracotta-deep); color: #fff; }

/* --- Footer --- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.68);
  padding: 74px 0 0;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 52px;
}
.footer-brand h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.footer-brand p { color: rgba(255,255,255,0.62); font-size: 0.88rem; line-height: 1.72; }
.footer-nmls {
  margin-top: 1rem;
  font-size: 0.81rem !important;
  color: rgba(255,255,255,0.72) !important;
}
.footer-nmls strong { color: #fff; }
.footer-ehl { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.62); }
.footer-col h4 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.05rem;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.66);
  font-size: 0.88rem;
  padding: 6px 0;
}
.footer-col a:hover { color: var(--sage); }
.footer-contact-item {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: 15px;
  color: rgba(255,255,255,0.66);
  font-size: 0.88rem;
  line-height: 1.6;
}
.footer-contact-item svg { width: 17px; height: 17px; color: var(--sage); flex-shrink: 0; margin-top: 4px; }
.footer-contact-item a { color: rgba(255,255,255,0.66); }
.footer-contact-item a:hover { color: var(--sage); }
.footer-social { display: flex; gap: 11px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.78);
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--terracotta); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.11);
  padding: 26px 0 30px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 0.73rem;
  line-height: 1.68;
  color: rgba(255,255,255,0.48);
}
.footer-bottom a { color: rgba(255,255,255,0.66); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: var(--sage); }
.footer-bottom strong { color: rgba(255,255,255,0.72); }

/* --- reCAPTCHA badge --- */
.grecaptcha-badge { visibility: hidden; }
.fred-credit { font-size: 0.76rem; color: var(--color-text-muted); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .mobile-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .blog-post-wrap { grid-template-columns: 1fr; gap: 44px; }
  .blog-sidebar { position: static; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .res-callout-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-row { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 768px) {
  .resource-tabs {
    flex-wrap: wrap;
  }
  .resource-tab {
    flex: 1 1 auto;
    min-width: 140px;
    font-size: 0.85rem;
    padding: 14px 16px;
  }
  .section { padding: 68px 0; }
  .hero { min-height: 540px; padding: 68px 0; }
  .hero-bg::after {
    background: linear-gradient(175deg, rgba(25,41,69,0.93) 0%, rgba(25,41,69,0.88) 55%, rgba(44,66,81,0.8) 100%);
  }
  .page-hero { padding: 76px 0 56px; }
  .header-top { display: none; }
  .hero, .page-hero, .breadcrumb, .blog-post-hero { margin-top: var(--header-height); }
  .blog-hero { margin-top: 0; padding-top: calc(var(--header-height) + 62px); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-section { padding: 26px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }
  .res-callout-card-left { flex-direction: row; width: auto; align-items: center; }
  .res-compare-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
  .res-callout-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .logo img { width: 156px; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* Video embeds on the resource pages */
@media (max-width: 768px) {
  #video-walkthrough .vid-col-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   Split hero — copy on a solid dark panel, photo in its own
   frame beside it. Overlaying text on a photo means the design
   only works for images whose subject happens to sit on the
   right; this works for any photo.
   ============================================================ */
.hero-split .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-split .hero-content { max-width: none; }
.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,0.42);
}
/* Sage frame offset behind the photo */
.hero-media::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid rgba(126,146,131,0.5);
  border-radius: var(--radius);
  z-index: -1;
}
.hero-split .hero-bg::after {
  background: linear-gradient(120deg, var(--ink) 0%, rgba(25,41,69,0.97) 55%, rgba(44,66,81,0.9) 100%);
}
/* Extra room under the photo so it clears the stat strip crossing up into the
   band. Scoped to .hero-split so the legal pages, which share .hero via
   .hero-short, keep their own spacing. */
.hero-split { padding-bottom: 167px; }
/* Below 900px the bleed is switched off, so there is no strip to clear and the
   headroom is just dead space. This rule sits after the media queries, so it
   has to undo itself explicitly rather than relying on them. */
@media (max-width: 900px) {
  .hero-split { padding-bottom: 68px; }
}
@media (max-width: 900px) {
  .hero-split .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { max-width: 460px; }
  .hero-media::before { display: none; }
}


/* ============================================================
   DEPTH KIT
   Texture, torn band edges, and elements that deliberately cross
   a section boundary. This is what keeps the page from reading as
   a stack of identical full-width rows.
   ============================================================ */

/* --- Brushed plaster, straight off the brand ------------------
   One 9KB greyscale tile, soft-light blended over whatever ground
   is underneath. The source on the live site is a 956KB PNG; only
   its luminance variation matters, so it ships as a mask instead. */
.textured { position: relative; }
.textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--texture) repeat;
  background-size: 900px 830px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
}
.textured > * { position: relative; z-index: 1; }

/* Sage ground — the brand's signature band. Display-size text only;
   sage is a mid-tone and will not carry body copy at AA. */
.section-sage {
  background: var(--sage);
  color: #fff;
  position: relative;
}
.section-sage h2, .section-sage h3 { color: #fff; }
.section-sage .section-label { color: var(--ink); }

/* --- Cross-band bleed ----------------------------------------
   Pulls an element up out of its own section and over the one
   above, so the two bands interlock. */
/* --lift is how far the element rises ABOVE its own section's top edge, i.e.
   how far it actually crosses into the band above. The section's top padding
   is derived from it, so the two can never drift out of sync — the earlier
   hand-tuned pair silently cancelled out and nothing crossed at all. */
.has-bleed { padding-top: 78px; }
.bleed-up  { margin-top: calc(-1 * (var(--lift, 110px) + 78px)); position: relative; z-index: 3; }
/* top = sectionTop + 78 - (lift + 78) = sectionTop - lift, so it crosses by
   exactly --lift. Deriving the padding from --lift as well made the two
   cancel and the element landed flush on the seam, crossing by nothing. */

/* Framed photo used as a bleeding element */
.photo-frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame--tall img { aspect-ratio: 4 / 5; }
.photo-frame--wide img { aspect-ratio: 16 / 9; }
/* Heavy brand scrim, the treatment used on the interior page heroes */
.photo-frame--scrim::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(44,66,81,0.14) 0%, rgba(25,41,69,0.62) 100%);
}
/* Offset outline behind a photo, echoing the logo's line-art house */
.photo-offset { position: relative; }
.photo-offset::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1.5px solid var(--terracotta);
  border-radius: var(--radius);
  z-index: 0;
}
.photo-offset > * { position: relative; z-index: 1; }

/* --- Numbered rail (the "how this works" spine) --------------- */
.rail { display: grid; gap: 0; counter-reset: rail; }
.rail-step {
  counter-increment: rail;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.rail-step:last-child { border-bottom: 1px solid var(--line); }
.rail-step::before {
  content: counter(rail, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--terracotta);
  letter-spacing: -0.03em;
}
.section-dark .rail-step::before { color: var(--terracotta-lift); }
.rail-step h3 { margin-bottom: 0.3rem; }
.rail-step p { color: var(--color-text-light); font-size: 0.96rem; margin: 0; }
.section-dark .rail-step { border-color: rgba(255,255,255,0.14); }
.section-dark .rail-step p { color: rgba(255,255,255,0.74); }

/* --- Pull quote ----------------------------------------------- */
.pull-quote {
  border-left: 3px solid var(--terracotta);
  padding: 6px 0 6px 26px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--slate);
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section-dark .pull-quote { color: #fff; }
.section-dark .pull-quote cite { color: var(--terracotta-lift); }

/* --- Stat strip that straddles two bands ---------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stat-strip > div { padding: 30px 28px; border-left: 1px solid var(--line); }
.stat-strip > div:first-child { border-left: none; }
.stat-strip .stat-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--terracotta);
  margin-bottom: 6px;
}
.stat-strip .stat-cap { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.5; }

@media (max-width: 900px) {
  .bleed-up { margin-top: 0; }
  .has-bleed { padding-top: 68px; }
  .photo-offset::before { display: none; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-left: none; border-top: 1px solid var(--line); }
  .stat-strip > div:first-child { border-top: none; }
  .rail-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
}