/* ============================================================
   Foxco Service Blocks - shared styles
   ============================================================ */

/* Design tokens (overridable per-widget via Elementor style controls) */
:root {
  --fsb-paper:     #f4ede0;
  --fsb-paper-warm:#ebe1cc;
  --fsb-ink:       #15110d;
  --fsb-muted:     rgba(21, 17, 13, 0.6);
  --fsb-accent:    #b8542a;
  --fsb-line:      rgba(21, 17, 13, 0.14);
  --fsb-line-soft: rgba(21, 17, 13, 0.08);
}

/* Block wrapper - reset + base */
.fsb {
  box-sizing: border-box;
  color: var(--fsb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.fsb *,
.fsb *::before,
.fsb *::after { box-sizing: border-box; }
.fsb img, .fsb video { display: block; max-width: 100%; height: auto; }

/* Italic accent on display elements. The plugin no longer bundles fonts (as of
   v4.9.0) so the italic styling falls through to whatever font Elementor or
   the theme supplies. Authors who want a different italic face on these
   accents can override via Elementor's per-widget typography controls. */
.fsb-csh-title em, .fsb-csh-accent,
.fsb-hero-title em, .fsb-hero-accent,
.fsb-cg-name em, .fsb-cg-alpha-letter em,
.fsb-text-title em,
.fsb-prose-title em,
.fsb-services-sig-eyebrow em,
.fsb-sig-phone em {
  font-style: italic;
}

/* Shared utility: eyebrow/label */
.fsb-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  margin-bottom: 16px;
}
.fsb-label::before { content: "\2014\00a0\00a0"; }

/* Editor-only error/placeholder message */
.fsb-notice {
  padding: 24px;
  background: #f4ede0;
  border: 1px dashed #b8542a;
  color: #6b5d4f;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   FACT BLOCK
   ============================================================ */

.fsb-fact {
  padding: 140px 32px;
  text-align: center;
  background: var(--fsb-paper);
}

/* ---- Quote body (shared across all layouts) ---- */
.fsb-fact-body {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 auto;
  color: var(--fsb-ink);
}

/* Quote mark presets */
.fsb-fact-body--mark-decorative::before,
.fsb-fact-body--mark-decorative::after {
  color: var(--fsb-accent);
  font-size: 1em;
  line-height: 0;
  position: relative;
  top: 0.2em;
  font-style: italic;
}
.fsb-fact-body--mark-decorative::before { content: "\201C"; margin-right: 0.15em; }
.fsb-fact-body--mark-decorative::after  { content: "\201D"; margin-left: 0.1em; }

.fsb-fact-body--mark-brand .fsb-qmark {
  display: block;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-style: italic;
  font-size: 3em;
  line-height: 0.3;
  color: var(--fsb-accent);
  margin: 0 auto 0.15em;
}

.fsb-fact-body--mark-inline { /* marks rendered inline in HTML with “/” */ }
.fsb-fact-body--mark-none   { /* no marks */ }

/* Body inline styling (works for all layouts) */
.fsb-fact-body em { font-style: italic; font-weight: 400; color: var(--fsb-accent); }
.fsb-fact-body strong { font-weight: 600; color: var(--fsb-ink); }
.fsb-fact-body a {
  color: var(--fsb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fsb-fact-body a:hover { text-decoration-thickness: 2px; }
.fsb-fact-body br + br { display: none; }

/* Caption (Auto-mode only) */
.fsb-fact-caption {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  margin: 40px 0 0;
}
.fsb-fact-caption::before { content: "\2014\00a0\00a0"; }
.fsb-fact-caption em { font-style: italic; color: var(--fsb-accent); text-transform: none; letter-spacing: 0; }
.fsb-fact-caption a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---- Attribution row (person / title / company) ---- */
.fsb-fact-attr {
  margin: 18px 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--fsb-muted);
  line-height: 1.5;
}
.fsb-fact-attr a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s;
}
.fsb-fact-attr a:hover { color: var(--fsb-accent); border-bottom-color: var(--fsb-accent); }
.fsb-fact-attr-sep { opacity: 0.5; margin: 0 0.15em; }

/* ---- Logo wrapper ---- */
.fsb-fact-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 22px auto 0;
  transition: opacity 0.2s;
}
.fsb-fact-logo img,
.fsb-fact-logo svg {
  display: block;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
a.fsb-fact-logo:hover { opacity: 0.75; }

/* Monochrome treatment: uses CSS mask to recolor any SVG/PNG */
.fsb-fact--mono .fsb-fact-logo img {
  -webkit-mask-image: var(--fsb-logo-src);
          mask-image: var(--fsb-logo-src);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--fsb-ink);
}

/* Outlined: desaturate + reduce contrast */
.fsb-fact--outlined .fsb-fact-logo img {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.7;
}

/* ---- Layout: single (default for Auto mode and custom Single) ---- */
.fsb-fact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fsb-fact-item--single .fsb-fact-body,
.fsb-fact--layout-carousel .fsb-fact-body {
  max-width: 22ch;
}

/* ---- Layout: carousel ---- */
.fsb-fact-carousel { position: relative; }
.fsb-fact-carousel-track { position: relative; }
.fsb-fact-carousel-slide {
  display: none;
  animation: fsb-fact-fade 0.5s ease;
}
.fsb-fact-carousel-slide.is-active { display: block; }
@keyframes fsb-fact-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fsb-fact-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.fsb-fact-carousel-dot {
  appearance: none;
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fsb-line);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.fsb-fact-carousel-dot:hover { transform: scale(1.3); }
.fsb-fact-carousel-dot.is-active { background: var(--fsb-accent); transform: scale(1.3); }

/* ---- Layout: grid wall ---- */
.fsb-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}
.fsb-fact-item--grid {
  align-items: flex-start;
  padding: 24px 24px 28px;
  border-top: 1px solid var(--fsb-line);
}
.fsb-fact-item--grid .fsb-fact-body {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: none;
  text-align: left;
}
.fsb-fact-item--grid .fsb-fact-body--mark-decorative::before,
.fsb-fact-item--grid .fsb-fact-body--mark-decorative::after {
  font-size: 1.2em;
  top: 0.15em;
}
.fsb-fact-item--grid .fsb-fact-logo { margin: 20px 0 0; justify-content: flex-start; }
.fsb-fact-item--grid .fsb-fact-attr { margin-top: 10px; font-size: 0.8rem; text-align: left; }

@media (max-width: 900px) {
  .fsb-fact-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .fsb-fact-grid { grid-template-columns: 1fr !important; }
}

/* ---- Layout: featured + stack ---- */
.fsb-fact-featured {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.fsb-fact-featured-wrap {
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--fsb-accent);
}
.fsb-fact-item--featured .fsb-fact-body {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  max-width: none;
  text-align: left;
}
.fsb-fact-item--featured .fsb-fact-logo { margin: 18px 0 0; justify-content: flex-start; }
.fsb-fact-item--featured .fsb-fact-attr { text-align: left; }

.fsb-fact-featured-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fsb-fact-item--supporter {
  align-items: flex-start;
  opacity: 0.65;
  padding-left: 28px;
  transition: opacity 0.3s;
}
.fsb-fact-item--supporter:hover { opacity: 1; }
.fsb-fact-item--supporter .fsb-fact-body {
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: none;
  text-align: left;
}
.fsb-fact-item--supporter .fsb-fact-body--mark-decorative::before,
.fsb-fact-item--supporter .fsb-fact-body--mark-decorative::after {
  font-size: 1.2em;
  top: 0.15em;
}
.fsb-fact-item--supporter .fsb-fact-logo { margin: 12px 0 0; justify-content: flex-start; }
.fsb-fact-item--supporter .fsb-fact-attr { text-align: left; font-size: 0.8rem; }

@media (max-width: 640px) {
  .fsb-fact { padding: 80px 24px; }
  .fsb-fact-featured-wrap { padding-left: 20px; }
  .fsb-fact-item--supporter { padding-left: 20px; }
}

/* ============================================================
   SHARED: eyebrow + h2 (used by multiple blocks)
   ============================================================ */

.fsb-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  margin-bottom: 16px;
}
.fsb-eyebrow::before { content: "\2014\00a0\00a0"; }

.fsb-h2 {
  font-variation-settings: "opsz" 100;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fsb-ink);
  margin: 0 0 32px;
  max-width: 720px;
  text-wrap: balance;
}
.fsb-h2 em {
  font-variation-settings: "opsz" 144;
  font-style: italic;
  font-weight: 400;
  color: var(--fsb-accent);
}

/* ============================================================
   META RIBBON
   ============================================================ */

.fsb-meta-wrap {
  border-top: 1px solid var(--fsb-line);
  border-bottom: 1px solid var(--fsb-line);
  background: var(--fsb-paper);
}
.fsb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 22px 32px;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  flex-wrap: wrap;
}
.fsb-meta-item { display: inline-flex; align-items: baseline; gap: 10px; }
.fsb-meta strong {
  color: var(--fsb-ink);
  font-weight: 500;
  letter-spacing: 0.12em;
}

@media (max-width: 640px) {
  .fsb-meta { gap: 14px; padding: 16px 20px; justify-content: flex-start; }
}

/* ============================================================
   FAQs
   ============================================================ */

.fsb-faqs {
  padding: 120px 32px;
  background: var(--fsb-paper);
}
.fsb-faqs-inner { max-width: 860px; margin: 0 auto; }
.fsb-faqs-head  { margin-bottom: 56px; }

.fsb-faqs-list { border-top: 1px solid var(--fsb-line); }
.fsb-faqs-item { border-bottom: 1px solid var(--fsb-line); padding: 28px 0; }
.fsb-faqs-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--fsb-ink);
  letter-spacing: -0.01em;
}
.fsb-faqs-item summary::-webkit-details-marker { display: none; }
.fsb-faqs-toggle {
  font-size: 14px;
  color: var(--fsb-accent);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  font-weight: 400;
}
.fsb-faqs-item[open] .fsb-faqs-toggle { transform: rotate(45deg); }
.fsb-faqs-item[open] summary span:first-child { color: var(--fsb-accent); }
.fsb-faqs-a {
  margin-top: 16px;
  padding-right: 60px;
  color: var(--fsb-muted);
  line-height: 1.65;
  font-size: 1rem;
}
.fsb-faqs-a em { color: var(--fsb-accent); font-style: italic; }
.fsb-faqs-a a  { color: var(--fsb-accent); text-underline-offset: 3px; }

@media (max-width: 640px) {
  .fsb-faqs { padding: 72px 24px; }
  .fsb-faqs-item summary { font-size: 1.15rem; }
  .fsb-faqs-a { padding-right: 0; }
}

/* ============================================================
   ZIPS
   ============================================================ */

.fsb-zips {
  padding: 100px 32px;
  background: var(--fsb-paper);
  border-top: 1px solid var(--fsb-line-soft);
  border-bottom: 1px solid var(--fsb-line-soft);
  text-align: center;
}
.fsb-zips-head {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-style: italic;
  color: var(--fsb-muted);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}
.fsb-zips-head em { font-style: italic; color: var(--fsb-ink); font-weight: 400; }
.fsb-zip-grid {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
  justify-content: center;
  flex-wrap: wrap;
  align-items: baseline;
}
.fsb-zip-grid span {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: var(--fsb-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  position: relative;
  transition: color 0.3s ease;
}
.fsb-zip-grid span:hover { color: var(--fsb-accent); }
.fsb-zip-grid span[data-city]::after {
  content: attr(data-city);
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(21, 17, 13, 0.4);
  font-weight: 500;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .fsb-zips { padding: 64px 24px; }
  .fsb-zip-grid { gap: 28px; }
}

/* ============================================================
   AREA CODES
   ============================================================ */

.fsb-areacodes {
  padding: 80px 32px;
  background: var(--fsb-paper-warm);
  text-align: center;
  border-top: 1px solid var(--fsb-line-soft);
  border-bottom: 1px solid var(--fsb-line-soft);
}
.fsb-area-head {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-style: italic;
  color: var(--fsb-muted);
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.fsb-area-head em { font-style: italic; color: var(--fsb-ink); font-weight: 400; }
.fsb-area-grid {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
  flex-wrap: wrap;
  align-items: baseline;
}
.fsb-area-grid span {
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--fsb-ink);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 0.2s ease;
  position: relative;
}
.fsb-area-grid span:hover { color: var(--fsb-accent); }
.fsb-area-grid span + span::before {
  content: "\00b7";
  margin-right: clamp(20px, 3vw, 40px);
  margin-left: calc(-1 * clamp(20px, 3vw, 40px) - 4px);
  color: rgba(21, 17, 13, 0.25);
  font-weight: 300;
}

@media (max-width: 640px) {
  .fsb-areacodes { padding: 56px 24px; }
}

/* ============================================================
   PROSE BLOCK
   ============================================================ */

.fsb-prose-block {
  padding: 120px 32px;
  text-align: center;
  background: var(--fsb-paper);
}
.fsb-prose-block .fsb-h2 { margin: 0 auto 40px; text-align: inherit; }
.fsb-prose-body {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--fsb-ink);
  text-align: left;
  margin: 0 auto;
  max-width: 64ch;
}
.fsb-prose-body p { margin: 0 0 1.2em; }
.fsb-prose-body p:last-child { margin-bottom: 0; }
.fsb-prose-body a {
  color: var(--fsb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fsb-prose-body em { font-style: italic; color: var(--fsb-accent); }
.fsb-prose-body strong { font-weight: 600; }
.fsb-prose-body p.fsb-drop::first-letter {
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: 5.5em;
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.1em -0.1em 0;
  color: var(--fsb-accent);
}

@media (max-width: 640px) {
  .fsb-prose-block { padding: 72px 24px; }
}

/* ============================================================
   SERVICES SIGNATURE
   ============================================================ */

.fsb-sig {
  /* Preset-driven palette tokens (overridden per-preset below) */
  --sig-bg:      var(--fsb-paper);
  --sig-ink:     var(--fsb-ink);
  --sig-muted:   var(--fsb-muted);
  --sig-accent:  var(--fsb-accent);
  --sig-line:    var(--fsb-line);
  --sig-footer:  rgba(21, 17, 13, 0.4);

  padding: 140px 32px 120px;
  text-align: center;
  background: var(--sig-bg);
}

.fsb-sig-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sig-muted);
  margin-bottom: 32px;
}
.fsb-sig-eyebrow::before { content: "\2014\00a0\00a0"; }
.fsb-sig-eyebrow::after  { content: "\00a0\00a0\2014"; }

.fsb-sig-phone {
  display: block;
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 6.5rem);
  color: var(--sig-ink);
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.fsb-sig-phone:hover { color: var(--sig-accent); }
.fsb-sig-phone em { font-style: italic; font-weight: 400; }

.fsb-sig-sub {
  font-size: 0.95rem;
  color: var(--sig-muted);
  letter-spacing: 0.02em;
}
.fsb-sig-sub a {
  color: var(--sig-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sig-line);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.fsb-sig-sub a:hover {
  color: var(--sig-accent);
  border-bottom-color: var(--sig-accent);
}

.fsb-sig-footer {
  margin-top: 48px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig-footer);
}

@media (max-width: 640px) {
  .fsb-sig { padding: 96px 24px; }
  .fsb-sig-footer { margin-top: 32px; }
}

/* ----- Style Presets ----- */

/* Paper: cream background + dark ink (default) */
.fsb-sig--paper {
  --sig-bg:      #f4ede0;
  --sig-ink:     #15110d;
  --sig-muted:   rgba(21, 17, 13, 0.6);
  --sig-accent:  #b8542a;
  --sig-line:    rgba(21, 17, 13, 0.14);
  --sig-footer:  rgba(21, 17, 13, 0.4);
}

/* Crimson: warm red background + white phone */
.fsb-sig--crimson {
  --sig-bg:      #c04d50;
  --sig-ink:     #fef3ea;
  --sig-muted:   rgba(254, 243, 234, 0.85);
  --sig-accent:  #2a1a10;
  --sig-line:    rgba(42, 26, 16, 0.3);
  --sig-footer:  rgba(254, 243, 234, 0.55);
}

/* Ink: near-black with cream text */
.fsb-sig--ink {
  --sig-bg:      #15110d;
  --sig-ink:     #f4ede0;
  --sig-muted:   rgba(244, 237, 224, 0.7);
  --sig-accent:  #df6737;
  --sig-line:    rgba(244, 237, 224, 0.2);
  --sig-footer:  rgba(244, 237, 224, 0.4);
}

/* Navy: Foxco brand navy + orange */
.fsb-sig--navy {
  --sig-bg:      #1a1a2e;
  --sig-ink:     #ffffff;
  --sig-muted:   rgba(255, 255, 255, 0.7);
  --sig-accent:  #df6737;
  --sig-line:    rgba(255, 255, 255, 0.18);
  --sig-footer:  rgba(255, 255, 255, 0.4);
}

/* Sand: warm tan + deep brown */
.fsb-sig--sand {
  --sig-bg:      #e8dbc2;
  --sig-ink:     #3d2817;
  --sig-muted:   rgba(61, 40, 23, 0.6);
  --sig-accent:  #a84818;
  --sig-line:    rgba(61, 40, 23, 0.2);
  --sig-footer:  rgba(61, 40, 23, 0.45);
}

/* Mint: soft sage + dark forest */
.fsb-sig--mint {
  --sig-bg:      #d7e4d6;
  --sig-ink:     #1d3c2e;
  --sig-muted:   rgba(29, 60, 46, 0.65);
  --sig-accent:  #8a4a2c;
  --sig-line:    rgba(29, 60, 46, 0.2);
  --sig-footer:  rgba(29, 60, 46, 0.45);
}

/* Charcoal: muted gray + bright accent */
.fsb-sig--charcoal {
  --sig-bg:      #2b2b2b;
  --sig-ink:     #f0ebe3;
  --sig-muted:   rgba(240, 235, 227, 0.65);
  --sig-accent:  #e8b586;
  --sig-line:    rgba(240, 235, 227, 0.18);
  --sig-footer:  rgba(240, 235, 227, 0.4);
}

/* Custom: uses default vars, user controls overrides */
.fsb-sig--custom {
  /* inherits root tokens; Elementor color controls apply their own inline selectors */
}

/* ============================================================
   TEXT BLOCK (editorial body, pairs with hero)
   ============================================================ */

.fsb-text {
  padding: 120px 32px;
  background: var(--fsb-paper);
  position: relative;
}

.fsb-text-rule {
  width: 48px;
  height: 1px;
  background: var(--fsb-ink);
  opacity: 0.3;
  margin: 0 auto 48px;
}

.fsb-text-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--fsb-ink);
  max-width: 64ch;
  margin: 0 auto;
}

.fsb-text-body > p {
  margin: 0 0 1.2em;
}
.fsb-text-body > p:last-child { margin-bottom: 0; }

.fsb-text-body a {
  color: var(--fsb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fsb-text-body a:hover { text-decoration-thickness: 2px; }

/* ---- Collapsible (Read more / Read less) ---- */

.fsb-text-body--collapsible {
  overflow: hidden;
  position: relative;
  transition: max-height 0.45s ease;
  max-height: 9999px; /* expanded state -- tall enough for any content */
}
.fsb-text-body--collapsible.is-collapsed {
  /* Show just the first paragraph. Tall enough for a long lede on narrow
     viewports, clipped with overflow so the rest hides cleanly. */
  max-height: 9em;
}
.fsb-text-body--collapsible.is-collapsed > p ~ * {
  /* Pointer-events / aria-hidden aren't needed -- overflow clipping is
     enough visually; screen readers still follow the collapse via aria. */
}

/* Fade edge (soft gradient at bottom of collapsed state) */
.fsb-text-body--fade.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3em;
  background: linear-gradient(to bottom, transparent, var(--fsb-paper));
  pointer-events: none;
}
.fsb-text-body--fade:not(.is-collapsed)::after {
  display: none;
}

/* Read More button base */
.fsb-text-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  appearance: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.fsb-text-more:hover { color: var(--fsb-ink); }
.fsb-text-more-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  display: inline-block;
  margin-top: -4px;
}
.fsb-text-more.is-open .fsb-text-more-chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Link style: underlined text */
.fsb-text-more--link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.fsb-text-more--link:hover { text-decoration-thickness: 2px; }

/* Pill style: filled accent background */
.fsb-text-more--pill {
  background: var(--fsb-accent);
  color: var(--fsb-paper);
  padding: 10px 20px;
  border-radius: 999px;
}
.fsb-text-more--pill:hover {
  color: var(--fsb-paper);
  background: var(--fsb-ink);
  transform: translateY(-1px);
}

/* Outline style: bordered */
.fsb-text-more--outline {
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.fsb-text-more--outline:hover {
  background: var(--fsb-accent);
  color: var(--fsb-paper);
  border-color: var(--fsb-accent);
}

/* Bare style: text + chevron only, no underline */
.fsb-text-more--bare {
  border: 0;
  padding: 0;
}

/* Center the button under center-aligned blocks */
.fsb-text .fsb-text-more {
  align-self: center;
}

/* Link Style variants -- applied via wrapper class on section */

.fsb-text-links-subtle .fsb-text-body a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fsb-text-links-subtle .fsb-text-body a:hover {
  border-bottom-color: currentColor;
}

.fsb-text-links-thick .fsb-text-body a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.fsb-text-links-thick .fsb-text-body a:hover {
  text-decoration-thickness: 4px;
}

.fsb-text-links-dotted .fsb-text-body a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.fsb-text-links-dotted .fsb-text-body a:hover {
  text-decoration-style: solid;
}

.fsb-text-links-animated .fsb-text-body a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  transition: background-size 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  padding-bottom: 2px;
}
.fsb-text-links-animated .fsb-text-body a:hover {
  background-size: 100% 1.5px;
}

.fsb-text-links-highlight .fsb-text-body a {
  text-decoration: none;
  background: linear-gradient(transparent 60%, rgba(184, 84, 42, 0.25) 60%);
  padding: 0 2px;
  transition: background 0.3s ease;
}
.fsb-text-links-highlight .fsb-text-body a:hover {
  background: linear-gradient(transparent 0%, rgba(184, 84, 42, 0.35) 0%);
}

.fsb-text-links-bracket .fsb-text-body a {
  text-decoration: none;
  position: relative;
  padding: 0 0.35em;
}
.fsb-text-links-bracket .fsb-text-body a::before {
  content: "[";
  margin-right: 0.15em;
  opacity: 0.6;
}
.fsb-text-links-bracket .fsb-text-body a::after {
  content: "]";
  margin-left: 0.15em;
  opacity: 0.6;
}
.fsb-text-links-bracket .fsb-text-body a:hover::before,
.fsb-text-links-bracket .fsb-text-body a:hover::after {
  opacity: 1;
}

.fsb-text-links-bold .fsb-text-body a {
  text-decoration: none;
  font-weight: 600;
}
.fsb-text-links-bold .fsb-text-body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.fsb-text-links-bold-clean .fsb-text-body a {
  text-decoration: none;
  font-weight: 600;
}
.fsb-text-links-bold-clean .fsb-text-body a:hover { opacity: 0.8; }

/* Icon positioning */

.fsb-text {
  position: relative;
}
.fsb-text-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fsb-accent);
  line-height: 1;
}
.fsb-text-icon svg,
.fsb-text-icon i {
  display: block;
  line-height: 1;
}
.fsb-text-icon-top,
.fsb-text-icon-bottom {
  width: 100%;
  position: relative;
  z-index: 2;
}
.fsb-text-icon-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.08;
  font-size: clamp(200px, 40vw, 400px) !important;
}
.fsb-text-icon-bg svg {
  width: clamp(200px, 40vw, 400px) !important;
  height: auto !important;
}
.fsb-text-has-bg-icon .fsb-text-rule,
.fsb-text-has-bg-icon .fsb-text-body {
  position: relative;
  z-index: 1;
}

.fsb-text-body em {
  font-style: italic;
  color: var(--fsb-accent);
}
.fsb-text-body strong {
  font-weight: 600;
  color: var(--fsb-ink);
}

.fsb-text-body > p.fsb-lede {
  font-variation-settings: "opsz" 18;
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--fsb-ink);
  margin-bottom: 1.4em;
}

.fsb-text-body > p.fsb-drop::first-letter,
.fsb-text-body > p.fsb-lede.fsb-drop::first-letter {
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  font-size: 5.5em;
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.1em -0.1em 0;
  color: var(--fsb-accent);
}

.fsb-text-body blockquote {
  margin: 1.5em 0;
  padding-left: 24px;
  border-left: 2px solid var(--fsb-accent);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--fsb-ink);
}

.fsb-text-body ul,
.fsb-text-body ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.fsb-text-body li { margin-bottom: 0.4em; }

@media (max-width: 640px) {
  .fsb-text { padding: 72px 24px; }
  .fsb-text-body { font-size: 1rem; }
  .fsb-text-body > p.fsb-lede { font-size: 1.2rem; }
}

/* ============================================================
   SERVICE HERO (composite)
   ============================================================ */

.fsb-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100%;
}
.fsb-hero--h-content { height: auto; }

.fsb-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fsb-hero-media img,
.fsb-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .fsb-hero-media--kb .fsb-hero-media-kb-wrap {
    --fsb-kb-max: 1.10;
    animation: fsb-hero-kb 24s ease-out infinite alternate;
    transform-origin: center center;
  }
}
.fsb-hero-media-kb-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@keyframes fsb-hero-kb {
  from { transform: scale(1.02); }
  to   { transform: scale(var(--fsb-kb-max, 1.10)); }
}

.fsb-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: 0 32px 72px;
  color: #ffffff;
}

.fsb-hero-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.fsb-hero-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fsb-hero-kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.fsb-hero-title {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(3.2rem, 9vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.fsb-hero-title em,
.fsb-hero-accent {
  font-weight: 400;
  font-style: italic;
  color: #e8b586;
  display: inline-block;
}

.fsb-hero-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 32px 0 0;
  width: 100%;
}

.fsb-hero-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 32px;
}

.fsb-hero-lede {
  font-variation-settings: "opsz" 18;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  max-width: 36ch;
  margin: 0;
  letter-spacing: 0.005em;
}
.fsb-hero-lede em { font-style: italic; color: #e8b586; }
.fsb-hero-lede strong { font-weight: 500; }
.fsb-hero-lede a {
  color: #e8b586;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.2s ease;
}
.fsb-hero-lede a:hover { text-decoration-thickness: 2px; }

.fsb-hero-coords {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
  white-space: nowrap;
  line-height: 1.9;
}

/* Responsive */
@media (max-width: 900px) {
  .fsb-hero-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .fsb-hero-coords {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .fsb-hero-content {
    padding: 0 24px 56px;
  }
  .fsb-hero-title {
    font-size: clamp(2.6rem, 12vw, 4.5rem);
  }
  .fsb-hero-lede {
    font-size: 1.1rem;
  }
}

/* Mobile gap fix (v4.11.2):
   Mirror of the City/State Hero treatment. Stop bottom-anchoring content on
   mobile and let the hero auto-size to content. Eliminates the dead space
   between the menu bar and the kicker/eyebrow when the hero's min-height
   (75vh on default Large) is taller than its actual content. */
@media (max-width: 767px) {
  .fsb-hero { min-height: 0 !important; height: auto !important; }
  .fsb-hero-content {
    justify-content: flex-start;
    padding: 24px 24px 40px;
  }
}

/* Mobile image swap (only applies when a Mobile Background Image is uploaded) */
.fsb-hero-img-mobile { display: none; }
@media (max-width: 767px) {
  .fsb-hero-img-desktop { display: none; }
  .fsb-hero-img-mobile  { display: block; }
}

/* Hide-on-mobile utility for hero content elements */
@media (max-width: 767px) {
  .fsb-hero .fsb-hide-mobile { display: none !important; }
}

/* Tighter mobile spacing when elements are hidden */
@media (max-width: 767px) {
  .fsb-hero-kicker { margin-bottom: 16px; }
  .fsb-hero-rule { margin-top: 24px; }
  .fsb-hero-footer { padding-top: 20px; gap: 16px; }
}

/* ============================================================
   CITY / STATE HERO (composite)
   Mirrors Service Hero structure with fsb-csh-* prefix, plus
   a Stats Strip row below the lede.
   ============================================================ */

.fsb-csh {
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100%;
}
.fsb-csh--h-content { height: auto; min-height: 0; }

.fsb-csh-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fsb-csh-media img,
.fsb-csh-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ken Burns on a wrapper (not the img) so object-position stays honored */
@media (prefers-reduced-motion: no-preference) {
  .fsb-csh-media--kb .fsb-csh-media-kb-wrap {
    --fsb-csh-kb-max: 1.10;
    animation: fsb-csh-kb 24s ease-out infinite alternate;
    transform-origin: center center;
  }
}
.fsb-csh-media-kb-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@keyframes fsb-csh-kb {
  from { transform: scale(1.02); }
  to   { transform: scale(var(--fsb-csh-kb-max, 1.10)); }
}

.fsb-csh-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 48px 48px 64px;
  box-sizing: border-box;
}
.fsb-csh-inner {
  max-width: 1280px;
  margin-inline: auto;
  width: 100%;
}

.fsb-csh-kicker {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 32px;
  display: inline-block;
}
.fsb-csh-kicker::before { content: "\2014\00a0\00a0"; }
.fsb-csh-kicker::after  { content: "\00a0\00a0\2014"; }

.fsb-csh-title {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin: 0 0 28px;
}
.fsb-csh-title em,
.fsb-csh-accent {
  font-style: italic;
  font-weight: 400;
  color: #e8b586;
  display: inline-block;
}

.fsb-csh-rule {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 28px 0 24px;
}

.fsb-csh-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: #ffffff;
  max-width: 56ch;
  margin: 0 0 32px;
  font-weight: 300;
}
.fsb-csh-lede em { font-style: italic; color: #e8b586; }
.fsb-csh-lede a {
  color: #e8b586;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.2s ease;
}
.fsb-csh-lede a:hover { text-decoration-thickness: 2px; }

/* Stats strip */
.fsb-csh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 32px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 900px;
  width: 100%;
}
.fsb-csh-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* critical: lets grid cells shrink below content intrinsic width */
}
.fsb-csh-stat-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsb-csh-stat-val {
  font-variation-settings: "opsz" 36;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -0.02em;
  /* Overflow-safe for long numeric values (e.g. "$475,000,000,000") */
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}
/* Auto-shrink mode: shrink large numbers to never overflow the tile */
.fsb-csh-stats--shrink .fsb-csh-stat-val {
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 900px) {
  .fsb-csh-content { padding: 32px 24px 48px; }
  .fsb-csh-stats { gap: 20px; }
  .fsb-csh-stat-val { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
}
@media (max-width: 767px) {
  /* Mobile gap fix (v4.11.2):
     The desktop layout uses align-items: flex-end to anchor content to the
     bottom of the hero, which on tall mobile heroes (75vh = ~700px+) creates
     dead space above the eyebrow when content is shorter than the hero. We
     swap to top-anchored on mobile and let the hero auto-size to content,
     which kills the empty area between the menu bar and the eyebrow.
     Also tighten title size so "Jackson Springs NC"-length names wrap to
     2 lines instead of 3, and the accent line below doesn't overflow. */
  .fsb-csh { min-height: 0 !important; height: auto !important; }
  .fsb-csh--h-full,
  .fsb-csh--h-large,
  .fsb-csh--h-medium,
  .fsb-csh--h-custom { min-height: 0 !important; height: auto !important; }
  .fsb-csh-content {
    align-items: flex-start;
    padding: 24px 24px 40px;
  }
  .fsb-csh-media {
    /* Background still covers the hero, just clamped to a sane mobile height
       so it doesn't dominate the screen. The content sets the actual hero
       height; the image fills it. */
    height: 100%;
  }
  .fsb-csh-kicker { margin-bottom: 16px; font-size: 10px; letter-spacing: 0.24em; }
  .fsb-csh-title { font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: 1.05; }
  .fsb-csh-accent { font-size: clamp(1.6rem, 8vw, 2.4rem); line-height: 1.1; margin-top: 8px; }
  .fsb-csh-lede { font-size: 1rem; margin-top: 16px; }
}
@media (max-width: 640px) {
  .fsb-csh-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 16px;
    margin-top: 16px;
  }
  .fsb-csh-stat-val { font-size: 1.2rem; }
}

/* Mobile image swap */
.fsb-csh-img-mobile { display: none; }
@media (max-width: 767px) {
  .fsb-csh-img-desktop { display: none; }
  .fsb-csh-img-mobile  { display: block; }
}

/* Hide-on-mobile utility */
@media (max-width: 767px) {
  .fsb-csh .fsb-hide-mobile { display: none !important; }
}

/* ============================================================
   GENERIC LINK STYLES
   Apply .fsb-links--<style> to any container. Styles descendant <a> tags.
   Used by Service Hero, City/State Hero, Text Area, and any future
   widget with prose links.
   ============================================================ */

/* Base: inherit accent color from the widget; set default once so all
   styles stay consistent regardless of specificity order. */
.fsb-links a {
  transition: color 0.2s, background 0.3s, background-size 0.4s, border-color 0.2s, text-decoration-thickness 0.2s;
}

/* 1. Underline (default) */
.fsb-links--underline a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fsb-links--underline a:hover { text-decoration-thickness: 2px; }

/* 2. Subtle: color only, no underline, border appears on hover */
.fsb-links--subtle a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fsb-links--subtle a:hover { border-bottom-color: currentColor; }

/* 3. Thick */
.fsb-links--thick a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.fsb-links--thick a:hover { text-decoration-thickness: 4px; }

/* 4. Dotted */
.fsb-links--dotted a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.fsb-links--dotted a:hover { text-decoration-style: solid; }

/* 5. Animated slide-in underline */
.fsb-links--animated a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.fsb-links--animated a:hover { background-size: 100% 1.5px; }

/* 6. Highlight: marker effect */
.fsb-links--highlight a {
  text-decoration: none;
  background: linear-gradient(transparent 60%, rgba(184, 84, 42, 0.25) 60%);
  padding: 0 2px;
}
.fsb-links--highlight a:hover {
  background: linear-gradient(transparent 0%, rgba(184, 84, 42, 0.35) 0%);
}

/* 7. Bracketed [ link ] */
.fsb-links--bracket a {
  text-decoration: none;
  position: relative;
  padding: 0 0.35em;
}
.fsb-links--bracket a::before {
  content: "[";
  margin-right: 0.15em;
  opacity: 0.6;
}
.fsb-links--bracket a::after {
  content: "]";
  margin-left: 0.15em;
  opacity: 0.6;
}
.fsb-links--bracket a:hover::before,
.fsb-links--bracket a:hover::after { opacity: 1; }

/* 8. Bold, no underline (hover reveals underline) */
.fsb-links--bold a {
  text-decoration: none;
  font-weight: 600;
}
.fsb-links--bold a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* 9. Bold, truly no underline (no hover reveal) */
.fsb-links--bold-clean a {
  text-decoration: none;
  font-weight: 600;
}
.fsb-links--bold-clean a:hover { opacity: 0.8; }

/* ============================================================
   CITIES GRID  (rebuilt v4.2.0)
   ============================================================ */

.fsb-cg {
  background: var(--fsb-paper);
  padding: 80px 32px;
  --fsb-cg-card-bg: transparent;
  --fsb-cg-card-border: var(--fsb-line);
}

/* ----- Editorial / Tier Bands grid ----- */
.fsb-cg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.fsb-cg--editorial .fsb-cg-grid {
  margin: 0;
}

/* ----- Card (typographic by default; image-card when class added) ----- */
.fsb-cg-card {
  position: relative;
  background: var(--fsb-cg-card-bg);
  border: 1px solid var(--fsb-cg-card-border);
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  overflow: hidden;
}
.fsb-cg-card:hover {
  border-color: var(--fsb-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(21, 17, 13, 0.08);
}

.fsb-cg-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Hidden state for show-more pagination. Display:none keeps layout stable
   (no reserved space, no skeleton flicker) and the button just reveals. */
.fsb-cg-card.is-hidden { display: none !important; }

.fsb-cg-card-inner {
  position: relative;
  padding: 36px 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Typographic-only cards have a hairline rule above the name as visual anchor
   so the empty card top doesn't feel hollow. */
.fsb-cg-card--typographic .fsb-cg-card-inner::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 32px;
  width: 32px;
  height: 1px;
  background: var(--fsb-accent);
  opacity: 0.85;
}

/* ----- Image cards (editorial + spotlight grid) ----- */
.fsb-cg-card--has-image {
  position: relative;
  min-height: 320px;
  border-color: transparent;
}
.fsb-cg-card--has-image .fsb-cg-card-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.fsb-cg-card--has-image .fsb-cg-img {
  position: absolute;
  inset: 0;
  background: var(--fsb-ink);
}
.fsb-cg-card--has-image .fsb-cg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.fsb-cg-card--has-image:hover .fsb-cg-img img {
  transform: scale(1.04);
}
.fsb-cg-card--has-image .fsb-cg-card-inner {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(21,17,13,0.85) 100%);
  color: #f4ede0;
  padding: 80px 32px 32px;
}
.fsb-cg-card--has-image .fsb-cg-name { color: #f4ede0; }
.fsb-cg-card--has-image .fsb-cg-subtitle,
.fsb-cg-card--has-image .fsb-cg-coords,
.fsb-cg-card--has-image .fsb-cg-count { color: rgba(244, 237, 224, 0.7); }
.fsb-cg-card--has-image .fsb-cg-tier { color: #f4ede0; border-color: rgba(244, 237, 224, 0.5); }

/* Image treatments */
.fsb-cg--treatment-grayscale .fsb-cg-img img { filter: grayscale(1); }
.fsb-cg--treatment-duotone .fsb-cg-img img {
  filter: grayscale(1) brightness(0.6);
  mix-blend-mode: multiply;
}

/* ----- Card content ----- */
.fsb-cg-name {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fsb-ink);
  transition: color 200ms ease;
}
.fsb-cg-name a {
  color: inherit;
  text-decoration: none;
}

.fsb-cg-subtitle {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--fsb-muted);
}
.fsb-cg-subtitle em { color: var(--fsb-accent); font-style: italic; }

.fsb-cg-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  margin-top: 8px;
}

.fsb-cg-tier {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid var(--fsb-accent);
  color: var(--fsb-accent);
  border-radius: 0;
  background: transparent;
  z-index: 2;
}

.fsb-cg-coords {
  position: absolute;
  bottom: 16px;
  right: 24px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--fsb-muted);
  opacity: 0.8;
  pointer-events: none;
}
.fsb-cg-card--has-image .fsb-cg-coords { right: 32px; }

/* ============================================================
   COMPACT INDEX
   ============================================================ */

.fsb-cg-alpha-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 56px;
  padding: 0;
  border-top: 1px solid var(--fsb-line);
  border-bottom: 1px solid var(--fsb-line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fsb-paper);
}
.fsb-cg-alpha-jump-link {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fsb-ink);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.fsb-cg-alpha-jump-link:hover {
  background: var(--fsb-ink);
  color: var(--fsb-paper);
}

.fsb-cg-compact {
  --fsb-cg-cols: 3;
}

.fsb-cg-alpha-section {
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fsb-line);
}
.fsb-cg-alpha-section:last-child {
  border-bottom: 0;
}

.fsb-cg-alpha-letter {
  font-weight: 300;
  font-size: 80px;
  line-height: 1;
  margin: 0 0 24px;
  color: var(--fsb-accent);
  letter-spacing: -0.04em;
}

.fsb-cg-alpha-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--fsb-cg-cols, 3), 1fr);
  gap: 14px 32px;
}
.fsb-cg-alpha-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--fsb-line-soft);
}
.fsb-cg-alpha-name {
  font-size: 16px;
  line-height: 1.3;
  color: var(--fsb-ink);
  text-decoration: none;
  transition: color 180ms ease;
}
.fsb-cg-alpha-name:hover {
  color: var(--fsb-accent);
}
.fsb-cg-alpha-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}

/* ============================================================
   SPOTLIGHT + GRID
   ============================================================ */

.fsb-cg-spotlight-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.fsb-cg-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--fsb-paper-warm);
  border: 1px solid var(--fsb-line);
  min-height: 480px;
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.fsb-cg-spotlight:hover {
  border-color: var(--fsb-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(21, 17, 13, 0.12);
}
.fsb-cg-spotlight--has-image .fsb-cg-img {
  position: absolute;
  inset: 0;
  background: var(--fsb-ink);
}
.fsb-cg-spotlight--has-image .fsb-cg-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.fsb-cg--treatment-duotone .fsb-cg-spotlight--has-image .fsb-cg-img img {
  filter: grayscale(1) brightness(0.55);
  mix-blend-mode: multiply;
}
.fsb-cg-spotlight:hover .fsb-cg-img img {
  transform: scale(1.04);
}

.fsb-cg-spotlight-inner {
  position: relative;
  z-index: 1;
  padding: 56px 48px 48px;
}
.fsb-cg-spotlight--has-image .fsb-cg-spotlight-inner {
  background: linear-gradient(180deg, transparent 0%, rgba(21,17,13,0.85) 100%);
  color: #f4ede0;
  padding-top: 120px;
}
.fsb-cg-spotlight--has-image .fsb-cg-name,
.fsb-cg-spotlight--has-image .fsb-cg-name a { color: #f4ede0; }
.fsb-cg-spotlight--has-image .fsb-cg-subtitle,
.fsb-cg-spotlight--has-image .fsb-cg-coords,
.fsb-cg-spotlight--has-image .fsb-cg-count { color: rgba(244, 237, 224, 0.75); }

.fsb-cg-name--xl {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.fsb-cg-name--xl a { color: inherit; text-decoration: none; }

.fsb-cg-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap 200ms ease;
}
.fsb-cg-cta:hover { gap: 18px; }
.fsb-cg-cta-arrow {
  transition: transform 200ms ease;
}
.fsb-cg-cta:hover .fsb-cg-cta-arrow { transform: translateX(4px); }

.fsb-cg-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.fsb-cg-spotlight-grid .fsb-cg-card {
  min-height: 180px;
}
.fsb-cg-spotlight-grid .fsb-cg-card-inner {
  padding: 28px 24px;
  min-height: 180px;
}
.fsb-cg-spotlight-grid .fsb-cg-name { font-size: 22px; }

/* ============================================================
   TIER BANDS
   ============================================================ */

.fsb-cg-band {
  margin-bottom: 64px;
}
.fsb-cg-band:last-child { margin-bottom: 0; }

.fsb-cg-band-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fsb-line);
}
.fsb-cg-band-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  margin: 0;
}
.fsb-cg-band-count {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}
.fsb-cg-band--other .fsb-cg-band-label {
  color: var(--fsb-muted);
}

/* ============================================================
   SHOW-MORE BUTTON
   ============================================================ */

.fsb-cg-more-wrap {
  display: flex;
  justify-content: center;
  margin: 56px 0 0;
}

.fsb-cg-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--fsb-ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fsb-ink);
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.fsb-cg-more:hover {
  background: var(--fsb-ink);
  color: var(--fsb-paper);
}
.fsb-cg-more-chevron {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms ease;
}
.fsb-cg-more.is-fully-open .fsb-cg-more-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .fsb-cg-grid { grid-template-columns: repeat(2, 1fr); }
  .fsb-cg-spotlight-wrap { grid-template-columns: 1fr; }
  .fsb-cg-spotlight { min-height: 360px; }
  .fsb-cg-name--xl { font-size: 44px; }
  .fsb-cg-spotlight-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fsb-cg { padding: 56px 20px; }
  .fsb-cg-grid { grid-template-columns: 1fr; gap: 20px; }
  .fsb-cg-spotlight-grid { grid-template-columns: 1fr; gap: 16px; }
  .fsb-cg-spotlight-inner { padding: 40px 28px 32px; }
  .fsb-cg-spotlight--has-image .fsb-cg-spotlight-inner { padding-top: 80px; }
  .fsb-cg-name--xl { font-size: 36px; }
  .fsb-cg-name { font-size: 24px; }

  .fsb-cg-alpha-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 20px; }
  .fsb-cg-alpha-letter { font-size: 56px; }
  .fsb-cg-alpha-jump { margin-bottom: 32px; }
  .fsb-cg-alpha-jump-link { padding: 10px 0; font-size: 11px; }

  .fsb-cg-band { margin-bottom: 40px; }
  .fsb-cg-band-header { flex-wrap: wrap; }

  .fsb-cg-more { padding: 12px 20px; font-size: 10px; }
}

@media (max-width: 480px) {
  .fsb-cg-alpha-list { grid-template-columns: 1fr !important; }
}

/* ============================================================
   STATES GRID
   ============================================================ */

.fsb-sg {
  background: var(--fsb-paper);
  padding: 64px 32px;
}

/* --- Editorial grid --- */
.fsb-sg--editorial .fsb-sg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.fsb-sg-card {
  position: relative;
  border: 1px solid var(--fsb-line);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(21, 17, 13, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fsb-sg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.fsb-sg-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  min-height: 180px;
  position: relative;
}
.fsb-sg-card--has-image .fsb-sg-card-link {
  min-height: 280px;
}
.fsb-sg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fsb-sg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.fsb-sg-card:hover .fsb-sg-img img {
  transform: scale(1.04);
}
.fsb-sg-card--has-image .fsb-sg-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 28px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
}
.fsb-sg-card--has-image .fsb-sg-name,
.fsb-sg-card--has-image .fsb-sg-abbr {
  color: #fff;
}
.fsb-sg-card--has-image .fsb-sg-subtitle,
.fsb-sg-card--has-image .fsb-sg-stats,
.fsb-sg-card--has-image .fsb-sg-count {
  color: rgba(255, 255, 255, 0.8);
}
.fsb-sg-card-inner { padding: 28px; position: relative; z-index: 2; }
.fsb-sg-name-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.fsb-sg-name {
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fsb-ink);
}
.fsb-sg-abbr {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: rgba(21, 17, 13, 0.35);
  text-transform: uppercase;
}
.fsb-sg-subtitle {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fsb-muted);
  margin: 0 0 6px;
  font-style: italic;
}
.fsb-sg-stats {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  margin: 0 0 8px;
}
.fsb-sg-count {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}

/* --- Feature strip --- */
.fsb-sg--feature .fsb-sg-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.fsb-sg-feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--fsb-line);
  text-decoration: none;
  color: inherit;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(21, 17, 13, 0.06);
}
.fsb-sg--feature .fsb-sg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fsb-sg-feature-inner {
  position: relative;
  z-index: 2;
  padding: 40px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
}
.fsb-sg-feature-inner .fsb-sg-name {
  color: #fff;
  font-size: clamp(2.5rem, 4vw, 4rem);
  margin-bottom: 12px;
}
.fsb-sg-feature-inner .fsb-sg-subtitle,
.fsb-sg-feature-inner .fsb-sg-body {
  color: rgba(255, 255, 255, 0.85);
}
.fsb-sg-body {
  font-size: 1rem;
  line-height: 1.55;
  margin: 12px 0 0;
  max-width: 50ch;
}
.fsb-sg-feature-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fsb-sg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--fsb-line);
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.fsb-sg-row:first-child { border-top: 1px solid var(--fsb-line); }
.fsb-sg-row--supporter .fsb-sg-name {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0;
}
.fsb-sg-row--supporter .fsb-sg-subtitle {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--fsb-muted);
  margin: 0;
}

/* --- Compact list --- */
.fsb-sg--compact .fsb-sg-compact {
  display: flex;
  flex-direction: column;
}
.fsb-sg-compact-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--fsb-line);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}
.fsb-sg--compact .fsb-sg-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 18px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--fsb-line);
}
.fsb-sg--compact .fsb-sg-row:first-child { border-top: 0; }
.fsb-sg--compact .fsb-sg-row:hover { background: rgba(21, 17, 13, 0.03); }
.fsb-sg--compact .fsb-sg-row .fsb-sg-name {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.1;
}
.fsb-sg-compact-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.fsb-sg-compact-col {
  font-size: 0.95rem;
  color: var(--fsb-ink);
  display: flex;
  align-items: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .fsb-sg--editorial .fsb-sg-grid { grid-template-columns: repeat(2, 1fr); }
  .fsb-sg--feature .fsb-sg-feature { grid-template-columns: 1fr; }
  .fsb-sg-feature-card { min-height: 320px; }
}
@media (max-width: 640px) {
  .fsb-sg--editorial .fsb-sg-grid { grid-template-columns: 1fr; }
  .fsb-sg { padding: 48px 20px; }
  .fsb-sg-compact-head,
  .fsb-sg--compact .fsb-sg-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.85rem;
  }
  .fsb-sg-compact-head .fsb-sg-compact-col:nth-child(n+3),
  .fsb-sg--compact .fsb-sg-row .fsb-sg-compact-col:nth-child(n+3) {
    display: none;
  }
}

/* ============================================================
   CITY SERVICES LIST
   ============================================================ */

.fsb-cs {
  background: var(--fsb-paper);
  padding: 64px 32px;
}

/* Heading */
.fsb-cs-heading {
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--fsb-ink);
}
.fsb-cs-subheading {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  margin: 0 0 32px;
}

/* Empty state */
.fsb-cs-empty {
  font-style: italic;
  color: var(--fsb-muted);
  font-size: 1rem;
  margin: 16px 0 0;
}

/* Cards layout */
.fsb-cs--cards .fsb-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.fsb-cs-card {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--fsb-line);
  border-radius: 4px;
  background: rgba(21, 17, 13, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
  min-height: 120px;
}
.fsb-cs-card:hover {
  transform: translateY(-2px);
  border-color: var(--fsb-accent, #b8542a);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.fsb-cs-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.fsb-cs-title {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fsb-ink);
  transition: color 0.2s ease;
}
.fsb-cs-type {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fsb-accent, #b8542a);
  display: inline-block;
}
.fsb-cs-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fsb-muted);
  margin: 8px 0 0;
}

/* Compact list layout */
.fsb-cs--list .fsb-cs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fsb-cs-row {
  border-bottom: 1px solid var(--fsb-line);
  padding: 0;
  transition: background 0.2s ease;
}
.fsb-cs-row:first-child { border-top: 1px solid var(--fsb-line); }
.fsb-cs-row:hover { background: rgba(21, 17, 13, 0.03); }
.fsb-cs-row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 16px;
  color: inherit;
  text-decoration: none;
}
.fsb-cs-row-main { flex: 1; min-width: 0; }
.fsb-cs-row .fsb-cs-title {
  font-size: 1.25rem;
  margin: 0;
}
.fsb-cs-row .fsb-cs-type {
  flex-shrink: 0;
  white-space: nowrap;
}
.fsb-cs-row .fsb-cs-excerpt {
  margin-top: 4px;
}

/* Grouped layout */
.fsb-cs--grouped .fsb-cs-group {
  margin-bottom: 40px;
}
.fsb-cs--grouped .fsb-cs-group:last-child { margin-bottom: 0; }
.fsb-cs-group-heading {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fsb-muted);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fsb-line);
}
.fsb-cs--grouped .fsb-cs-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.fsb-cs--grouped .fsb-cs-card {
  min-height: 80px;
}
.fsb-cs--grouped .fsb-cs-title { font-size: 1.05rem; }

/* Responsive */
@media (max-width: 1024px) {
  .fsb-cs--cards .fsb-cs-grid,
  .fsb-cs--grouped .fsb-cs-group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fsb-cs--cards .fsb-cs-grid,
  .fsb-cs--grouped .fsb-cs-group-grid { grid-template-columns: 1fr; }
  .fsb-cs { padding: 48px 20px; }
  .fsb-cs-row-link { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   LINK NETWORK -- partner cross-links inside City Services List
   Six presets: subdued, tinted, bordered, cards, compact, dotted.
   Each renders the same data with different visual weight; pick
   based on how prominent partners should be on the page.
   ============================================================ */

.fsb-cs-partners {
  margin-top: 56px;
}

.fsb-cs-partners-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  margin: 0 0 24px;
}

.fsb-cs-partners-grid {
  display: grid;
  grid-template-columns: repeat(var(--fsb-cs-partner-cols, 2), 1fr);
  gap: 16px 24px;
}

.fsb-cs-partner-link {
  --partner-color: var(--fsb-accent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.fsb-cs-partner-name {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--fsb-ink);
}
.fsb-cs-partner-tagline {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}
.fsb-cs-partner-link:hover .fsb-cs-partner-name { color: var(--partner-color); }

/* ----- Preset 1: Subdued ----- */
/* Identical type vocabulary to local services. No background, no border.
   Only the small mono heading distinguishes the section. Best SEO posture. */
.fsb-cs-partners--subdued {
  padding-top: 32px;
  border-top: 1px solid var(--fsb-line);
}
.fsb-cs-partners--subdued .fsb-cs-partner-link {
  padding: 8px 0;
}

/* ----- Preset 2: Tinted ----- */
/* Warm cream wash signals "different content area" without screaming. */
.fsb-cs-partners--tinted {
  margin-top: 48px;
  padding: 32px;
  background: var(--fsb-paper-warm);
}
.fsb-cs-partners--tinted .fsb-cs-partner-link {
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: 2px;
}
.fsb-cs-partners--tinted .fsb-cs-partner-link:hover {
  background: rgba(184, 84, 42, 0.06);
}

/* ----- Preset 3: Bordered ----- */
/* Old-newspaper related-stories block. Hairline rules above + below the heading. */
.fsb-cs-partners--bordered {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--fsb-line);
  border-bottom: 1px solid var(--fsb-line);
}
.fsb-cs-partners--bordered .fsb-cs-partners-heading {
  padding-bottom: 16px;
  border-bottom: 1px dotted var(--fsb-line);
}
.fsb-cs-partners--bordered .fsb-cs-partner-link {
  padding: 8px 0;
}

/* ----- Preset 4: Side-by-side cards ----- */
/* Equal-weight to local services. Card with hairline border, lift on hover. */
.fsb-cs-partners--cards {
  margin-top: 48px;
}
.fsb-cs-partners--cards .fsb-cs-partner-link {
  padding: 24px 24px;
  border: 1px solid var(--fsb-line);
  background: transparent;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.fsb-cs-partners--cards .fsb-cs-partner-link:hover {
  border-color: var(--partner-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(21, 17, 13, 0.06);
}
.fsb-cs-partners--cards .fsb-cs-partner-name {
  font-size: 1.4rem;
}

/* ----- Preset 5: Compact rows ----- */
/* Tight horizontal list, single column always. Good for many partners. */
.fsb-cs-partners--compact {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--fsb-line);
}
.fsb-cs-partners--compact .fsb-cs-partners-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.fsb-cs-partners--compact .fsb-cs-partner-link {
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--fsb-line);
}
.fsb-cs-partners--compact .fsb-cs-partner-link:last-child { border-bottom: 0; }
.fsb-cs-partners--compact .fsb-cs-partner-name {
  font-size: 0.95rem;
  flex: 1;
}
.fsb-cs-partners--compact .fsb-cs-partner-tagline {
  flex-shrink: 0;
}

/* ----- Preset 6: Dotted underlines ----- */
/* Subtle "secondary link" cue via dotted underline. */
.fsb-cs-partners--dotted {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--fsb-line);
}
.fsb-cs-partners--dotted .fsb-cs-partner-link {
  padding: 6px 0;
}
.fsb-cs-partners--dotted .fsb-cs-partner-name {
  border-bottom: 1px dotted var(--fsb-muted);
  display: inline;
  align-self: flex-start;
  padding-bottom: 1px;
}
.fsb-cs-partners--dotted .fsb-cs-partner-link:hover .fsb-cs-partner-name {
  border-bottom-color: var(--partner-color);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .fsb-cs-partners-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .fsb-cs-partners--tinted { padding: 24px 20px; }
  .fsb-cs-partners--cards .fsb-cs-partner-link { padding: 20px; }
}

/* ============================================================
   NETWORK PARTNERS  (City Partners + State Partners widgets)
   Independent of the City Services List partner-section styling
   so the two systems can evolve separately.
   ============================================================ */

.fsb-np {
  background: var(--fsb-paper);
  padding: 56px 32px;
}

.fsb-np-heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fsb-accent);
  margin: 0 0 32px;
}

.fsb-np-group {
  --partner-color: var(--fsb-accent);
  position: relative;
  margin: 0 0 24px;
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--partner-color);
  background: linear-gradient(90deg, rgba(184, 84, 42, 0.04) 0%, transparent 60%);
}
.fsb-np-group:last-child { margin-bottom: 0; }

.fsb-np-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.fsb-np-name {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fsb-ink);
  text-decoration: none;
  transition: color 200ms ease;
}
.fsb-np-name:hover { color: var(--partner-color); }

.fsb-np-tagline {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fsb-muted);
}

/* Per-service deep links (City Partners only when toggle is on) */
.fsb-np-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.fsb-np-item { margin: 0; }

.fsb-np-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--fsb-ink);
  border-bottom: 1px dotted var(--fsb-line-soft);
  transition: color 200ms ease, border-color 200ms ease;
}
.fsb-np-link:hover {
  color: var(--partner-color);
  border-bottom-color: var(--partner-color);
}
.fsb-np-link:hover .fsb-np-arrow {
  transform: translate(2px, -2px);
}
.fsb-np-link-label {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.fsb-np-arrow {
  font-size: 11px;
  color: var(--fsb-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .fsb-np { padding: 40px 20px; }
  .fsb-np-list { grid-template-columns: 1fr; }
  .fsb-np-group { padding-left: 16px; }
}

/* ============================================================
   QUOTE SIDEBAR (Foxco: Quote Sidebar widget)
   Editorial pullquote / aside widget with five visual presets:
   subdued / hairline / marginal / bubble / postcard.
   No font-family declarations -- typography inherits from
   Elementor Site Settings or theme. Color tokens use the same
   --fsb-* palette as the rest of the design system but expect
   per-instance overrides via Elementor for non-Foxco brands.
   ============================================================ */

.fsb-qs {
  position: relative;
  display: block;
  background: #1a1a1a;
  color: #f4ede0;
  border-radius: 8px;
  padding: 2.5rem 2rem;
}
.fsb-qs-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* Common element styling -- per-element overrides via Elementor typography. */
.fsb-qs-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #df6737;
  margin: 0 0 0.5rem;
}
.fsb-qs-question {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 1rem;
}
.fsb-qs-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244, 237, 224, 0.8);
}
.fsb-qs-body p {
  margin: 0 0 1rem;
}
.fsb-qs-body p:last-child { margin-bottom: 0; }
.fsb-qs-body em {
  font-style: italic;
  color: #f4ede0;
  font-weight: 500;
}
.fsb-qs-body strong {
  font-weight: 600;
  color: #f4ede0;
}
.fsb-qs-kicker {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: #f4ede0;
  margin: 1.25rem 0 0;
}

.fsb-qs-mark {
  color: #df6737;
  font-weight: 500;
  display: inline-block;
}

/* ----- Preset 1: Subdued (centered, ornaments flank the eyebrow) ----- */
.fsb-qs--subdued .fsb-qs-inner {
  text-align: center;
}
.fsb-qs--subdued .fsb-qs-eyebrow {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  margin-bottom: 1rem;
}
.fsb-qs--subdued .fsb-qs-mark {
  font-size: 1.1em;
  vertical-align: baseline;
}

/* ----- Preset 2: Hairline (top + bottom rules, mono eyebrow) ----- */
.fsb-qs--hairline .fsb-qs-inner {
  text-align: center;
}
.fsb-qs-rule {
  width: 100%;
  height: 1px;
  background: rgba(244, 237, 224, 0.18);
}
.fsb-qs-rule--top    { margin-bottom: 2rem; }
.fsb-qs-rule--bottom { margin-top: 2rem; }
.fsb-qs--hairline .fsb-qs-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #df6737;
  margin-top: 1.5rem;
}

/* ----- Preset 3: Marginal (oversized opening mark, content flush right) ----- */
.fsb-qs--marginal {
  padding: 2.5rem;
}
.fsb-qs--marginal .fsb-qs-inner {
  text-align: left;
}
.fsb-qs-marginal-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.fsb-qs-mark--marginal {
  font-size: 80px;
  line-height: 0.7;
  color: #df6737;
  font-weight: 500;
  flex-shrink: 0;
  padding-top: 0.5rem;
}
.fsb-qs-marginal-content { flex: 1; min-width: 0; }
.fsb-qs--marginal .fsb-qs-eyebrow {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* ----- Preset 4: Bubble (chat bubble with optional avatar/attribution) ----- */
.fsb-qs--bubble {
  padding: 3rem 2rem 2.5rem;
}
.fsb-qs-bubble {
  background: #282826;
  border-radius: 22px;
  padding: 1.75rem 2rem;
  position: relative;
}
.fsb-qs--has-attribution .fsb-qs-bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 60px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid #282826;
}
.fsb-qs--bubble .fsb-qs-question {
  font-size: 22px;
}
.fsb-qs-attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  padding-left: 70px;
}
.fsb-qs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #df6737;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.fsb-qs-attr-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #df6737;
}

/* ----- Preset 5: Postcard (cream paper card on dark background) ----- */
.fsb-qs--postcard {
  padding: 3rem 2rem;
}
.fsb-qs-paper {
  background: #f4ede0;
  color: #1a1a1a;
  padding: 2rem 2rem 1.75rem;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.25);
}
.fsb-qs-paper::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  border: 1px solid rgba(26, 17, 13, 0.12);
  pointer-events: none;
}
.fsb-qs-paper .fsb-qs-question {
  color: #1a1a1a;
}
.fsb-qs-paper .fsb-qs-body {
  color: #3a342c;
}
.fsb-qs-paper .fsb-qs-body em {
  color: #1a1a1a;
}
.fsb-qs-paper .fsb-qs-kicker {
  color: #1a1a1a;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(26, 17, 13, 0.2);
}
.fsb-qs--tilt-left  .fsb-qs-paper { transform: rotate(-0.5deg); }
.fsb-qs--tilt-right .fsb-qs-paper { transform: rotate(0.5deg); }
.fsb-qs--tilt-none  .fsb-qs-paper { transform: none; }
.fsb-qs-stamp {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #df6737;
  border: 1.5px solid #df6737;
  padding: 4px 8px;
  transform: rotate(3deg);
  z-index: 1;
  background: transparent;
  white-space: nowrap;
}
/* Stamp position modifiers. The default is top-right which matches the
   classic postcard postage placement. */
.fsb-qs-stamp--pos-top-right    { top: 1.25rem; right: 1.25rem; }
.fsb-qs-stamp--pos-top-left     { top: 1.25rem; left: 1.25rem; }
.fsb-qs-stamp--pos-bottom-right { bottom: 1.25rem; right: 1.25rem; }
.fsb-qs-stamp--pos-bottom-left  { bottom: 1.25rem; left: 1.25rem; }

/* Stamp shape modifiers. Rectangle is the default look (sharp corners, like
   a true rubber stamp). Circle/pill drop the rectangular geometry for more
   playful badge feels. None removes the border for a text-only label. */
.fsb-qs-stamp--rect    { border-radius: 0; }
.fsb-qs-stamp--rounded { border-radius: 4px; }
.fsb-qs-stamp--pill    { border-radius: 999px; padding: 4px 12px; }
.fsb-qs-stamp--circle  {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.08em;
}
.fsb-qs-stamp--none {
  border: none;
  padding: 4px 0;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .fsb-qs { padding: 2rem 1.25rem; }
  .fsb-qs-question { font-size: 20px; }
  .fsb-qs-kicker { font-size: 15px; }
  .fsb-qs-marginal-row { flex-direction: column; gap: 0.5rem; }
  .fsb-qs-mark--marginal { font-size: 56px; padding-top: 0; }
  .fsb-qs--bubble { padding: 2rem 1.25rem; }
  .fsb-qs-bubble { padding: 1.5rem 1.25rem; }
  .fsb-qs-attribution { padding-left: 0; }
  .fsb-qs--has-attribution .fsb-qs-bubble::after { left: 30px; }
  .fsb-qs--postcard { padding: 2rem 1.25rem; }
  .fsb-qs-paper { padding: 1.5rem 1.5rem 1.25rem; }
  .fsb-qs-stamp { font-size: 9px; }
  .fsb-qs-stamp--pos-top-right    { top: 1rem; right: 1rem; }
  .fsb-qs-stamp--pos-top-left     { top: 1rem; left: 1rem; }
  .fsb-qs-stamp--pos-bottom-right { bottom: 1rem; right: 1rem; }
  .fsb-qs-stamp--pos-bottom-left  { bottom: 1rem; left: 1rem; }
  .fsb-qs-stamp--circle { width: 44px; height: 44px; }
}