/* ==========================================================================
   FN Home Group | Faith Nance, REALTOR® — Global Stylesheet
   Warm Minimal Transitional design system
   ========================================================================== */

/* -------------------------------- Fonts -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Marcellus&family=Inter:wght@300;400;500;600;700&display=swap');

/* ------------------------------ Variables ------------------------------ */
:root{
  /* Brand palette — warm minimal transitional */
  --color-dusty-blue: #7C93A8;
  --color-dusty-blue-dark: #5C7791;
  --color-dusty-blue-light: #AFC0CD;
  --color-rose-gold: #C9A79C;
  --color-rose-gold-light: #E7D6CC;
  --color-champagne: #E9DFCF;
  --color-warm-white: #FBF8F4;
  --color-cream: #F5EFE5;
  --color-greige: #EAE3D8;
  --color-taupe: #D9CFC0;
  --color-charcoal: #2B2A28;
  --color-charcoal-soft: #4A4744;
  --color-white: #FFFFFF;
  --color-success: #5C7C5A;
  --color-error: #A25550;
  --color-border: #E3DACB;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nav: 'Marcellus', 'Playfair Display', Georgia, serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(43, 42, 40, 0.06);
  --shadow-md: 0 8px 30px rgba(43, 42, 40, 0.09);
  --shadow-lg: 0 20px 50px rgba(43, 42, 40, 0.14);
  --transition: 220ms ease;
}

/* -------------------------------- Reset -------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background: var(--color-warm-white);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--color-dusty-blue-dark); text-decoration: none; }
a:hover{ color: var(--color-rose-gold); }
ul, ol{ padding-left: 1.25rem; }
button{ font-family: inherit; }

h1, h2, h3, h4, h5{
  font-family: var(--font-heading);
  color: var(--color-charcoal);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
h1{ font-size: clamp(2.1rem, 4.15vw, 2.95rem); }
h2{ font-size: clamp(1.7rem, 2.85vw, 2.05rem); }
h3{ font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4{ font-size: 1.15rem; }
p{ margin: 0 0 var(--space-sm); color: var(--color-charcoal-soft); }
.lede{ font-size: 1.2rem; color: var(--color-charcoal-soft); }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 3px solid var(--color-dusty-blue-dark);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link{
  position: absolute; left: -999px; top: 0; background: var(--color-charcoal);
  color: #fff; padding: 0.75rem 1.25rem; z-index: 2000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* ------------------------------- Layout --------------------------------- */
.container{
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow{
  width: 100%; max-width: var(--max-width-narrow); margin: 0 auto; padding: 0 1.5rem;
}
.section{ padding: var(--space-xl) 0; }
.section-sm{ padding: var(--space-lg) 0; }
.section-cream{ background: var(--color-cream); }
.section-greige{ background: var(--color-greige); }
.section-charcoal{ background: var(--color-charcoal); color: var(--color-warm-white); }
.section-charcoal h2, .section-charcoal h3{ color: var(--color-warm-white); }
.section-charcoal p{ color: #D8D4CE; }
.section-blue-tint{ background: #EEF2F5; }

.accent-line{
  display: block; width: 48px; height: 3px; margin: 0.65rem auto 0;
  background: linear-gradient(90deg, var(--color-dusty-blue), var(--color-rose-gold));
  border-radius: 2px;
}
.section-heading .accent-line{ margin-top: 0.75rem; margin-bottom: 0.25rem; }

.text-center{ text-align: center; }
.section-heading{ max-width: 860px; margin: 0 auto var(--space-lg); text-align: center; }
.section-heading p{ max-width: 720px; margin-left:auto; margin-right:auto; }
.section-heading .eyebrow{ display:block; margin-bottom: 0.5rem; }

.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-dusty-blue-dark);
}

.grid{ display: grid; gap: var(--space-md); }
.grid > *{ min-width: 0; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ------------------------------- Buttons -------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary{ background: var(--color-dusty-blue-dark); color: #fff; }
.btn-primary:hover{ background: var(--color-charcoal); box-shadow: 0 0 0 3px var(--color-rose-gold-light); color: #fff; }
.btn-secondary{ background: transparent; border-color: var(--color-charcoal); color: var(--color-charcoal); }
.btn-secondary:hover{ background: var(--color-dusty-blue-dark); border-color: var(--color-dusty-blue-dark); color: #fff; }
.btn-rose{ background: var(--color-rose-gold); color: var(--color-charcoal); }
.btn-rose:hover{ background: var(--color-rose-gold-light); box-shadow: 0 0 0 3px var(--color-dusty-blue-light); color: var(--color-charcoal); }
.btn-ghost-light{ background: transparent; border-color: #fff; color: #fff; }
.btn-ghost-light:hover{ background: var(--color-rose-gold-light); border-color: var(--color-rose-gold-light); color: var(--color-charcoal); }
.btn-block{ width: 100%; }
.btn-row{ display:flex; flex-wrap: wrap; gap: 1rem; }

/* -------------------------------- Cards ---------------------------------- */
.card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--color-dusty-blue-light); border-top-color: var(--color-rose-gold);
}
.card h3{ margin-bottom: 0.5rem; }
/* Buttons inside cards may wrap to a second line rather than forcing the
   card (and grid track) wider than its column -- prevents long labels from
   causing horizontal page overflow at intermediate viewport widths. */
.card .btn{ white-space: normal; }
.card-icon{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-cream); border: 1.5px solid var(--color-dusty-blue-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; font-size: 1.4rem;
}
.card-flat{ box-shadow:none; }

.placeholder-box{
  background: repeating-linear-gradient(45deg, var(--color-greige), var(--color-greige) 10px, var(--color-cream) 10px, var(--color-cream) 20px);
  border: 1.5px dashed var(--color-taupe);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-charcoal-soft);
  font-size: 0.9rem; text-align: center; padding: 1rem;
  min-height: 220px;
}

/* Real lifestyle/content photography used in place of a .placeholder-box --
   same rounded-corner + shadow language as the community carousel, no
   decorative shape or card layered behind it. */
.content-photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.content-photo img{
  display: block; width: 100%; height: 100%; min-height: 280px;
  object-fit: cover;
}

.tag{
  display: inline-block; padding: 0.3rem 0.8rem; border-radius: 100px;
  background: var(--color-cream); color: var(--color-dusty-blue-dark);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; margin: 0 0.4rem 0.4rem 0;
}

.notice{
  background: var(--color-cream);
  border-left: 4px solid var(--color-rose-gold);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: var(--space-md) 0;
  font-size: 0.95rem;
  color: var(--color-charcoal-soft);
}
.notice strong{ color: var(--color-charcoal); }

/* -------------------------------- Header --------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(251, 248, 244, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav-wrap{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.5rem; max-width: var(--max-width); margin: 0 auto;
  gap: 1rem;
}
.brand{ display: flex; align-items: center; padding: 0.4rem 0; flex-shrink: 0; }
.brand img{ height: 68px; width: auto; display: block; }

.main-nav{ display: flex; align-items: center; gap: 1.15rem; font-family: var(--font-nav); }
.main-nav a{
  color: var(--color-charcoal); font-weight: 500; font-size: 0.94rem; letter-spacing: 0.01em;
  position: relative; padding: 0.3rem 0; transition: color var(--transition); white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--color-dusty-blue-dark); }
.main-nav a[aria-current="page"]{ border-bottom: 2px solid var(--color-rose-gold); }
.nav-cta{ display:flex; align-items:center; gap: 0.75rem; }
.nav-cta .btn{
  font-family: var(--font-nav); letter-spacing: 0.02em; font-weight: 600;
  padding: 0.75rem 1.3rem; font-size: 0.9rem; white-space: nowrap;
}
/* Defensive: the CTA button always keeps readable white text on its blue
   background, even if it were ever also marked as the "current page" link
   (its href intentionally matches the Contact nav link). */
.nav-cta .btn, .nav-cta .btn[aria-current="page"]{ color: #fff; border-bottom: none; }

.nav-toggle{
  display: none; background: transparent; border: none; cursor: pointer;
  width: 42px; height: 42px; padding: 0; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: ''; display: block; position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--color-charcoal); transition: var(--transition);
}
.nav-toggle span{ top: 20px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: rotate(45deg) translate(6px, 6px); }
.nav-toggle[aria-expanded="true"] span::after{ transform: rotate(-45deg) translate(6px, -6px); }

/* Breakpoint is wider than a typical nav (1240px, not the more common
   ~980px) because this menu carries 10 links plus a CTA button next to a
   deliberately large logo -- measured to be the narrowest width the full
   row fits at without wrapping, overlapping, or clipping the CTA button. */
@media (max-width: 1240px){
  .brand img{ height: 60px; }
  .main-nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-warm-white); flex-direction: column; align-items: stretch;
    padding: 1.25rem 1.5rem 2rem; gap: 0; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  }
  .main-nav.is-open{ display: flex; }
  .main-nav a{ padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); font-size: 1.05rem; }
  .nav-cta{ flex-direction: column; align-items: stretch; margin-top: 1rem; }
  .nav-cta .btn{ font-size: 1rem; padding: 0.9rem 1.7rem; }
  .nav-toggle{ display: block; }
}
@media (max-width: 420px){
  .brand img{ height: 50px; }
}

/* --------------------------------- Hero ---------------------------------- */
.hero{
  background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-warm-white) 55%, var(--color-champagne) 100%);
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative; overflow: hidden;
}
.hero-grid{ display: grid; grid-template-columns: 1.45fr 0.55fr; gap: var(--space-lg); align-items: center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero .eyebrow{ margin-bottom: 1rem; }
.hero h1{ margin-bottom: 1rem; }
.hero-media{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* Floating cutout portrait (transparent-background headshot) -- no frame or
   hard edges; a soft blurred color wash sits behind the subject so she reads
   as part of the page rather than a rectangular photo. */
.floating-photo{
  position: relative; display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
}
.floating-photo::before{
  content:''; position:absolute; inset: 6% 8%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--color-champagne) 0%, var(--color-cream) 58%, transparent 78%);
  z-index: 0;
}
.floating-photo::after{
  content:''; position:absolute; width: 42%; height: 42%; right: 6%; bottom: 4%; border-radius: 50%;
  background: var(--color-rose-gold-light); opacity: 0.4; filter: blur(22px); z-index: 0;
}
.floating-photo img{
  position: relative; z-index: 1; width: 100%; max-width: 440px; height: auto;
  filter: drop-shadow(0 20px 26px rgba(43, 42, 40, 0.22));
}
@media (prefers-reduced-motion: no-preference){
  .floating-photo img{ transition: transform 400ms ease; }
}

/* Simple framed photo card (used instead of .floating-photo for a plain,
   un-cutout photo -- e.g. when no background-removed asset is available).
   A soft offset gradient card peeks out behind the rounded, shadowed
   photo for a bit of brand warmth without needing a transparent PNG. */
.photo-card{
  position: relative; display:flex; align-items:center; justify-content:center;
  padding: 1.25rem 1.25rem 1.75rem 1.75rem;
}
.photo-card::before{
  content:''; position:absolute; inset: 0 0.75rem 0.75rem 0; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-rose-gold-light), var(--color-champagne));
  z-index: 0;
}
.photo-card img{
  position: relative; z-index: 1; width: 100%; max-width: 440px; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}

/* Circular headshot (added) -- the single, reusable treatment for every
   instance of Faith's headshot across the site: one clean circular crop,
   a thin white border, and a soft shadow. No square frame, no offset card
   peeking out behind it, no colored background shape layered underneath --
   the portrait simply sits in the page like a photograph, not a graphic. */
.headshot-circle{
  display:flex; align-items:center; justify-content:center;
}
.headshot-circle img{
  display:block; width: 100%; max-width: 360px; aspect-ratio: 1/1;
  object-fit: cover; object-position: center 30%;
  border-radius: 50%;
  border: 5px solid var(--color-white);
  box-shadow: var(--shadow-lg);
}

/* Full, uncropped portrait (added, Meet Faith page only) -- displays a photo
   at its own native aspect ratio with no crop, mask, frame, border, shadow,
   or background shape. Scales proportionally by width only (height:auto),
   so the entire photo is always visible at any screen size and is never
   stretched, distorted, or cut off. Intentionally separate from
   .headshot-circle, which is used elsewhere and is left untouched. */
.portrait-frame{
  display:flex; align-items:flex-start; justify-content:center;
}
.portrait-frame img{
  display:block; width: 100%; max-width: 420px; height: auto;
}

.page-hero{
  background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-warm-white) 100%);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.page-hero .eyebrow{ margin-bottom: 0.75rem; }
.page-hero p{ max-width: 680px; margin-left:auto; margin-right:auto; }
.breadcrumbs{ font-size: 0.85rem; color: var(--color-charcoal-soft); margin-bottom: 1rem; }
.breadcrumbs a{ color: var(--color-charcoal-soft); }

/* -------------------------------- Forms ----------------------------------- */
.form-card{
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-lg);
  box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label{ font-weight: 600; font-size: 0.9rem; color: var(--color-charcoal); }
.hint{ font-size: 0.85rem; color: var(--color-charcoal-soft); font-weight: 400; }
.field .hint{ font-size: 0.8rem; color: var(--color-charcoal-soft); font-weight: 400; }
input, select, textarea{
  font-family: var(--font-body); font-size: 1rem; padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-warm-white); color: var(--color-charcoal); width: 100%;
}
textarea{ resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus{
  border-color: var(--color-dusty-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(124, 147, 168, 0.22);
}
.checkbox-field input:focus{ box-shadow: 0 0 0 3px rgba(201, 167, 156, 0.35); }
.checkbox-field{ display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox-field input{ width: auto; margin-top: 0.25rem; }
.checkbox-field label{ font-weight: 400; font-size: 0.88rem; color: var(--color-charcoal-soft); }
.form-success, .form-error{
  display: none; padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-weight: 500;
}
.form-success{ background: #E7EFE6; color: var(--color-success); }
.form-error{ background: #F3E3E1; color: var(--color-error); }
.form-success.is-visible, .form-error.is-visible{ display: block; }
.field-error{ color: var(--color-error); font-size: 0.82rem; display:none; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--color-error); }
.field.has-error .field-error{ display:block; }
.required-star{ color: var(--color-rose-gold); }

/* -------------------------------- Footer ----------------------------------- */
.site-footer{ background: var(--color-charcoal); color: #D8D4CE; padding: var(--space-xl) 0 var(--space-lg); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-logo-img{ height: 68px; }
  .footer-logo-img--epique{ height: 28px; }
}
.site-footer h4{ color: #fff; font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a{ color: #D8D4CE; }
.site-footer a:hover{ color: var(--color-rose-gold-light); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom: 0.6rem; font-size: 0.92rem; }
.footer-logo-badge{
  display: inline-block; background: var(--color-cream); border-radius: var(--radius-md);
  padding: 1.1rem 1.5rem; margin-bottom: 1.25rem; line-height: 0;
}
.footer-logo-badge--sm{ padding: 0.7rem 1.1rem; margin-top: 0.9rem; margin-bottom: 1rem; }
.footer-logo-img{ height: 88px; width: auto; display:block; }
.footer-logo-img--epique{ height: 34px; }
.footer-credentials{
  color: #fff; font-family: var(--font-heading); font-size: 0.95rem; line-height: 1.55;
  margin: 0.25rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14);
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-lg); padding-top: var(--space-md);
  display:flex; flex-wrap:wrap; gap: 1rem; justify-content: space-between; align-items:center; font-size: 0.82rem; color: #B7B2AB;
}
.footer-legal-links{ display:flex; flex-wrap:wrap; gap: 0.4rem 1rem; }
.footer-legal-links a:focus-visible{ outline-color: var(--color-rose-gold-light); }
.social-row{ display:flex; gap: 0.75rem; margin-top: 1.25rem; }
.social-row a{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; color: #D8D4CE;
  transition: var(--transition);
}
.social-row a:hover, .social-row a:focus-visible{
  border-color: var(--color-rose-gold); background: var(--color-rose-gold); color: var(--color-charcoal);
}
/* Light-background variant (e.g. Contact page, not the dark footer) */
.social-row--light a{ border-color: var(--color-border); color: var(--color-charcoal); }
.social-row--light a:hover, .social-row--light a:focus-visible{
  border-color: var(--color-dusty-blue-dark); background: var(--color-dusty-blue-dark); color: #fff;
}
.equal-housing{
  display:flex; align-items:center; gap:0.75rem; margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; color: #B7B2AB;
}
.equal-housing .eho-icon{ width: 28px; height: 28px; border: 1.5px solid var(--color-rose-gold-light); color: var(--color-rose-gold-light); border-radius: 4px; display:flex; align-items:center; justify-content:center; font-size: 0.85rem; flex-shrink:0; }

/* ------------------------------ Testimonials -------------------------------- */
.testimonial-card{
  background: var(--color-cream); border-radius: var(--radius-md); padding: var(--space-md);
  border-left: 4px solid var(--color-rose-gold);
}
.testimonial-card .stars{ color: var(--color-rose-gold); letter-spacing: 0.2em; margin-bottom: 0.75rem; }
.testimonial-card footer{ margin-top: 1rem; font-size: 0.85rem; color: var(--color-dusty-blue-dark); font-weight: 600; font-style: normal; }

/* --------------------------------- FAQ -------------------------------------- */
.faq-item{ border-bottom: 1px solid var(--color-border); padding: 1.1rem 0; }
.faq-item summary{
  cursor: pointer; font-weight: 600; font-family: var(--font-heading); font-size: 1.05rem;
  display:flex; justify-content: space-between; align-items:center; list-style: none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content: '+'; font-size: 1.4rem; color: var(--color-rose-gold); margin-left: 1rem; }
.faq-item[open] summary::after{ content: '\2212'; }
.faq-item p{ margin-top: 0.8rem; }

/* -------------------------------- Steps/timeline ------------------------------ */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap: 0; }
.step{ position: relative; padding-left: 3.2rem; padding-bottom: 2.2rem; border-left: 2px solid var(--color-border); margin-left: 1rem; }
.step:last-child{ border-color: transparent; padding-bottom: 0; }
.step::before{
  counter-increment: step; content: counter(step);
  position: absolute; left: -1.35rem; top: 0; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  background: var(--color-dusty-blue-dark); color: #fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight: 700;
}
.step h3{ margin-bottom: 0.4rem; }

/* -------------------------------- Utilities ------------------------------------ */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-sm{ gap: 0.75rem; } .gap-md{ gap: 1.5rem; }
.text-rose{ color: var(--color-rose-gold); }
.text-blue{ color: var(--color-dusty-blue-dark); }
.divider{
  height:2px; border:none; margin: var(--space-lg) 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-dusty-blue-light), var(--color-rose-gold-light), transparent);
}
.badge-list{ display:flex; flex-wrap:wrap; gap: 0.5rem; margin: 1rem 0; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items:center; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }
/* Modifier (added): gives the text column extra room in a couple of
   two-col sections whose heading is long enough to wrap at the even 1fr/1fr
   split -- the circular headshot doesn't need a full half-column anyway. */
.two-col-wide-text{ grid-template-columns: 0.58fr 1.42fr; }
.two-col-wide-text-first{ grid-template-columns: 1.42fr 0.58fr; }
@media (max-width: 860px){
  .two-col-wide-text, .two-col-wide-text-first{ grid-template-columns: 1fr; }
}
/* Utility (added): a slightly smaller heading size for the one instance
   (homepage "Proudly Serving Southern Middle Tennessee") whose column
   footprint must stay fixed (it shares space with the community carousel,
   which needs to keep its exact placeholder footprint), so the fix here is
   font-size only, no container change. Still comfortably larger than h3. */
.heading-tight{ font-size: clamp(1.5rem, 2.5vw, 1.78rem) !important; }
/* Page-specific (added): the Epique Edge hero question is long enough that
   even the full container needs a smaller H1 to stay on one line at desktop
   widths; still noticeably larger than an h2. */
.page-epique-edge .page-hero h1{ font-size: clamp(1.8rem, 3.5vw, 2.35rem); }
/* Utility (added): a slightly wider narrow container for one bio teaser
   heading that doesn't fit the standard 800px narrow container on one line. */
.container-narrow-wide{ width:100%; max-width: 1000px; margin:0 auto; padding:0 1.5rem; }
/* Scoped (added): the lead-form heading on Epique Edge needs a touch less
   font size than the shared .section-heading default to stay on one line
   inside this section's narrower container. */
#leadform .section-heading h2{ font-size: clamp(1.6rem, 2.6vw, 2.0rem); }
.avatar-round{ border-radius: 50%; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.stat{ text-align:center; }
.stat .num{ font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-dusty-blue-dark); display:block; }
.stat .label{ font-size: 0.85rem; color: var(--color-charcoal-soft); }
.cta-band{
  background: var(--color-dusty-blue-dark); color:#fff; border-radius: var(--radius-lg);
  padding: var(--space-lg); text-align:center;
  border-top: 4px solid var(--color-rose-gold);
}
.cta-band h2, .cta-band p{ color:#fff; }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); }
th{ font-family: var(--font-heading); font-weight:600; color: var(--color-dusty-blue-dark); border-bottom: 2px solid var(--color-dusty-blue-light); }
.list-check{ list-style:none; padding-left:0; }
.list-check li{ padding-left: 1.8rem; position:relative; margin-bottom: 0.6rem; }
.list-check li::before{ content:'✓'; position:absolute; left:0; color: var(--color-dusty-blue-dark); font-weight:700; }
.category-pill{
  display:inline-flex; align-items:center; padding: 0.5rem 1.1rem; border-radius:100px;
  background:#fff; border: 1px solid var(--color-border); font-size:0.85rem; font-weight:600; margin: 0 0.5rem 0.5rem 0;
  transition: var(--transition);
}
.category-pill:hover{ background: var(--color-cream); border-color: var(--color-dusty-blue-light); color: var(--color-dusty-blue-dark); }

/* ------------------------- Self-assessment checklist ----------------------
   A visual, click-to-reflect checklist (e.g. Epique Edge market-ready
   self-assessment). Purely informational -- checking a box only toggles a
   visual state locally in the browser; nothing is scored, submitted, or
   used to imply qualification of any kind. */
.check-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
@media (max-width: 720px){ .check-grid{ grid-template-columns: 1fr; } }
.check-card{
  display:flex; align-items:flex-start; gap: 0.85rem;
  background:#fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1rem 1.15rem; cursor:pointer; transition: var(--transition);
}
.check-card:hover{ border-color: var(--color-dusty-blue-light); box-shadow: var(--shadow-sm); }
.check-card input[type="checkbox"]{
  width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--color-dusty-blue-dark);
  flex-shrink: 0;
}
.check-card span{ font-size: 0.96rem; color: var(--color-charcoal); line-height: 1.4; }
.check-card:has(input:checked){ border-color: var(--color-rose-gold); background: var(--color-cream); }

/* ------------------------------ Use-case grid ------------------------------ */
.use-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 900px){ .use-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .use-grid{ grid-template-columns: 1fr; } }
.use-chip{
  display:flex; align-items:center; gap: 0.65rem;
  background:#fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem; font-size: 0.92rem; font-weight: 600; color: var(--color-charcoal-soft);
}
.use-chip .use-icon{ font-size: 1.15rem; flex-shrink:0; }

/* ------------------------------ Compliance notice --------------------------- */
.compliance-notice{
  background: var(--color-warm-white);
  border: 1.5px solid var(--color-border);
  border-top: 4px solid var(--color-dusty-blue-dark);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  font-size: 0.88rem;
  color: var(--color-charcoal-soft);
  line-height: 1.6;
}
.compliance-notice strong{ color: var(--color-charcoal); }
.license-line{
  font-size: 0.85rem; color: var(--color-charcoal-soft); margin-top: 1rem; text-align:center;
}

/* ==========================================================================
   Seller Options Guide section (added) — build/pages/sell.html only.
   New, additive-only classes; nothing above this point was modified.
   ========================================================================== */
.guide-mockup-wrap{ display:flex; justify-content:center; }
.guide-mockup{
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: perspective(1600px) rotateY(-10deg) rotateX(2deg);
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.guide-mockup img{ display:block; width:100%; height:auto; }
.guide-mockup::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(43,42,40,0.22) 0%, rgba(43,42,40,0) 14%);
  pointer-events:none;
}
.guide-mockup:hover, .guide-mockup:focus-visible{
  transform: perspective(1600px) rotateY(0deg) rotateX(0deg) translateY(-8px);
  box-shadow: 0 34px 64px rgba(43, 42, 40, 0.24);
}
.guide-mockup-tag{
  position:absolute; top: 14px; right: -34px;
  background: var(--color-rose-gold); color: var(--color-charcoal);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 2.6rem; transform: rotate(35deg);
  box-shadow: 0 4px 10px rgba(43,42,40,0.18);
}
@media (max-width: 640px){
  .guide-mockup{ transform:none; max-width: 260px; }
  .guide-mockup:hover, .guide-mockup:focus-visible{ transform: translateY(-6px); }
}

.guide-stats-row{ display:flex; flex-wrap:wrap; gap: var(--space-lg); margin: var(--space-md) 0; }

.flow-row{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap: 0.6rem; }
.flow-card{
  flex: 1 1 148px; max-width: 190px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.1rem 0.9rem; text-align:center; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap: 0.5rem; align-items:center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.flow-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-dusty-blue-light); }
.flow-num{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-dusty-blue-dark); color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight:700; font-size: 0.95rem;
}
.flow-card h4{ font-family: var(--font-heading); font-size: 1rem; margin: 0; color: var(--color-charcoal); }
.flow-card p{ font-size: 0.82rem; color: var(--color-charcoal-soft); margin:0; }
.flow-arrow{ display:flex; align-items:center; justify-content:center; color: var(--color-rose-gold); font-size: 1.3rem; flex: 0 0 auto; }

/* Selling-path cost/fee indicator badge (added) -- sits beside the existing
   numbered circle in a small header row. Fixed width so every badge is the
   same size regardless of how many "$" characters it holds (1 to 5). */
.flow-card-header{ display:flex; align-items:center; justify-content:center; gap: 0.4rem; }
.flow-price{
  display:inline-flex; align-items:center; justify-content:center;
  width: 3.4rem; height: 1.6rem;
  border-radius: 100px;
  background: var(--color-cream);
  border: 1px solid var(--color-rose-gold);
  color: var(--color-charcoal);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.03em;
}
@media (max-width: 760px){
  .flow-row{ flex-direction: column; align-items:stretch; }
  .flow-card{ max-width: none; }
  .flow-arrow{ transform: rotate(90deg); align-self:center; }
}

.comparison-table-wrap{ overflow-x:auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.comparison-table{ width:100%; border-collapse: collapse; min-width: 720px; background:#fff; }
.comparison-table th, .comparison-table td{ padding: 0.9rem 1rem; text-align:left; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.comparison-table thead th{ background: var(--color-dusty-blue-dark); color:#fff; font-family: var(--font-heading); font-weight:600; letter-spacing:0.02em; }
.comparison-table tbody tr:nth-child(even){ background: var(--color-cream); }
.comparison-table tbody tr:hover{ background: var(--color-champagne); }
.comparison-table tbody th{ background: transparent; color: var(--color-charcoal); font-weight:700; border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   Southern Middle Tennessee community image carousel (added)
   Replaces the placeholder box in the "Proudly Serving Southern Middle
   Tennessee" section on the homepage. New, additive-only classes; nothing
   above this point was modified. Sits inside the existing .two-col grid at
   the same footprint the placeholder used, with the same rounded-corner
   treatment already used elsewhere on the site (.hero-media, .photo-card).
   ========================================================================== */
.community-carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-champagne);
}
/* Slides sit side-by-side in a single horizontal row; the track itself
   translates so photos physically move right-to-left past each other. Only
   the slide inside the frame's overflow:hidden bounds is ever visible --
   there is never more than one image on screen at once. */
.community-carousel-track{
  position: relative; width: 100%; height: 100%;
  display: flex;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.community-slide{
  position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0;
}
.community-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.community-slide::before{
  /* Subtle luxury overlay so the white caption text stays legible on any photo */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.community-slide figcaption{
  position: absolute; left: 1.25rem; bottom: 1rem; right: 1.25rem;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.4vw, 1.5rem);
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.community-carousel-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.35);
  color: #fff;
  font-size: 1.5rem; line-height: 1;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 250ms ease, background 200ms ease;
  z-index: 2;
}
.community-carousel:hover .community-carousel-arrow,
.community-carousel-arrow:focus-visible{ opacity: 1; }
.community-carousel-arrow:hover{ background: rgba(255,255,255,0.55); }
.community-carousel-arrow:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
.community-carousel-prev{ left: 0.75rem; }
.community-carousel-next{ right: 0.75rem; }

.community-carousel-dots{
  position: absolute; left: 0; right: 0; bottom: 0.6rem;
  display:flex; align-items:center; justify-content:center; gap: 0.45rem;
  z-index: 2;
}
.community-carousel-dot{
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.community-carousel-dot.is-active{ background: var(--color-dusty-blue); width: 10px; height: 10px; }
.community-carousel-dot:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px){
  .community-carousel-arrow{ width: 2.1rem; height: 2.1rem; font-size: 1.3rem; }
}

/* Respect reduced-motion: no fades, no autoplay-driven motion */
@media (prefers-reduced-motion: reduce){
  .community-carousel-track{ transition: none; }
  .community-carousel-arrow{ transition: none; }
}