/* =====================================================
   The Global Business Alliance — Brand Style Overrides
   ===================================================== */

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

/* --- Color Tokens --- */
:root {
  --ivory:          #F3F0ED;
  --soft-stone:     #E5DFDA;
  --taupe-line:     #D5CBC4;
  --charcoal:       #4E4E4A;
  --deep-charcoal:  #2F302D;
  --copper:         #B48C73;
  --deep-copper:    #8C614B;
}

/* --- Base --- */
body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--ivory) !important;
  color: var(--charcoal) !important;
  font-size: 16px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  color: var(--deep-charcoal) !important;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.012em;
}

p { color: var(--charcoal); }

a { color: var(--copper) !important; text-decoration: none; }
a:hover { color: var(--deep-copper) !important; }

hr { border-color: var(--taupe-line) !important; }

/* The template's global `input, select, textarea { appearance: none }`
   reset removes native checkbox/radio rendering with no replacement,
   collapsing them to 0x0 (invisible, unclickable). Restore native
   rendering with explicit size for consent checkboxes on the forms. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Utility Bar --- */
#utility-bar {
  background: var(--deep-charcoal);
  color: var(--taupe-line);
  text-align: center;
  padding: 0.65em 1em;
  font-family: 'Inter', sans-serif;
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#utility-bar strong {
  color: var(--copper);
  font-weight: 600;
}

@media (max-width: 736px) {
  #utility-bar { font-size: 0.6em; letter-spacing: 0.1em; padding: 0.6em 0.75em; }
}

/* --- Navigation --- */
#header {
  background: var(--ivory) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--taupe-line);
  padding: 2.4em 0 1.6em 0 !important;
}

/* The homepage template default is a 100vh photo hero with a dark overlay.
   The dark logo needs a light field, and #banner below already carries the
   dramatic hero moment, so the header collapses to the same slim bar used
   on inner pages instead of stacking two dark full-bleed sections. */
body.homepage #header {
  height: auto !important;
  min-height: 0 !important;
}

body.homepage #header:after {
  display: none !important;
}

#header .inner header h1 a#logo {
  border: none !important;
  display: inline-block;
}

#header .inner header hr {
  position: static !important;
  top: auto !important;
  border-color: var(--copper) !important;
  border-width: 1px;
  width: 50px;
  height: 0;
  margin: 0.6em auto;
}

#header .inner header hr:before,
#header .inner header hr:after {
  display: none !important;
}

#header .inner header p {
  color: var(--deep-copper) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7em !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500;
}

/* Logo image (used in full header, inner-page nav, and footer) */
.site-logo {
  display: block;
  height: auto;
  width: clamp(220px, 22vw, 280px);
}

.nav-logo {
  display: flex;
  align-items: center;
  border: none !important;
}

.nav-logo img {
  display: block;
  height: 36px;
  width: auto;
}

#nav > ul > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72em !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--deep-charcoal) !important;
}

#nav > ul > li > a:hover,
#nav > ul > li.active > a {
  color: var(--copper) !important;
}

#nav > ul > li > ul {
  background: var(--ivory) !important;
  border-top: 2px solid var(--copper) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

#nav > ul > li > ul li a {
  color: var(--deep-charcoal) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85em !important;
}

#nav > ul > li > ul li a:hover {
  color: var(--copper) !important;
}

/* --- Buttons ---
   Default is a restrained ghost/seal treatment (outline, small caps, no
   fill) so calls to action read as considered invitations rather than
   storefront "buy now" blocks. .primary is reserved for the single most
   important action on a given page/section. */
.button,
input[type="submit"],
button[type="submit"] {
  background-color: transparent !important;
  border: 1px solid var(--deep-charcoal) !important;
  color: var(--deep-charcoal) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.7em !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.95em 2.2em !important;
  display: inline-block;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--deep-charcoal) !important;
  border-color: var(--deep-charcoal) !important;
  color: var(--ivory) !important;
}

.button.primary,
.tier-card .button {
  border-color: var(--deep-charcoal) !important;
  background-color: var(--deep-charcoal) !important;
  color: var(--ivory) !important;
  border-bottom: 2px solid var(--copper) !important;
}

.button.primary:hover,
.tier-card .button:hover {
  background-color: var(--deep-copper) !important;
  border-color: var(--deep-copper) !important;
  border-bottom-color: var(--copper) !important;
  color: var(--ivory) !important;
}

.button.alt {
  background: transparent !important;
  border-color: rgba(213, 203, 196, 0.55) !important;
  color: var(--ivory) !important;
}

.button.alt:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: var(--copper) !important;
  color: var(--copper) !important;
}

/* Override the template's default #header .button, which is a fixed-size
   circular icon button (width/height:4.5em, border-radius:100%) meant for
   a round scroll arrow — wrong shape entirely for a text CTA. */
#header .button.circled {
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 0.7em !important;
  padding: 0.85em 2em !important;
  white-space: nowrap;
}

.button.circled {
  border-color: var(--copper) !important;
  color: var(--copper) !important;
  background: transparent !important;
}

.button.circled:hover {
  background-color: var(--copper) !important;
  color: var(--ivory) !important;
}

/* Quiet text-link CTA, used where a full button would over-claim
   importance (e.g. one of several parallel options in a list). */
.link-arrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.76em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-copper) !important;
  border-bottom: 1px solid var(--taupe-line);
  padding-bottom: 0.2em;
}

.link-arrow:after {
  content: '\2192';
  margin-left: 0.5em;
}

.link-arrow:hover {
  color: var(--copper) !important;
  border-bottom-color: var(--copper);
}

/* --- Banner / Hero --- */
#banner {
  background-color: var(--deep-charcoal) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px) !important;
  background-size: auto !important;
  background-blend-mode: normal !important;
  padding-bottom: 3em !important;
  position: relative;
  overflow: hidden;
}

/* --- Brand watermark ---
   A faint, oversized rendering of the compass mark set into dark
   sections, like an engraved seal — institutional weight without
   reprinting the logo lockup itself. Decorative only (aria-hidden). */
#banner:before,
.page-hero:before,
.wrapper.style3:before,
#footer:before {
  content: '';
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: 34em;
  height: 34em;
  max-width: 60vw;
  max-height: 60vw;
  background-image: url('../../images/logo/gba-symbol-only-color-corrected.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

#banner .inner, #banner header, #banner footer,
.page-hero .eyebrow, .page-hero h1, .page-hero p,
.wrapper.style3 .container, #footer .container {
  position: relative;
  z-index: 1;
}

#banner header h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--ivory) !important;
  font-size: 3.2em !important;
  line-height: 1.15 !important;
  font-weight: 700;
}

#banner header p {
  color: var(--taupe-line) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1em !important;
  line-height: 1.75 !important;
  max-width: 640px;
  margin: 0 auto;
}

#banner .eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.8em;
}

.banner-microcopy {
  font-size: 0.78em;
  color: var(--taupe-line);
  margin-top: 1em;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.04em;
}

/* --- Section Wrappers --- */
.wrapper.style1 {
  background: var(--soft-stone) !important;
}

.wrapper.style2 {
  background: var(--ivory) !important;
}

/* The template zeroes .wrapper.style2's top padding to avoid double-
   spacing under sections that already carry their own lead-in (e.g.
   .content-section). The homepage's first section sits directly under
   the hero with no such wrapper, so it needs real top padding restored. */
.wrapper.style2.lead-in {
  padding-top: 5.5em !important;
}

@media (max-width: 736px) {
  .wrapper.style2.lead-in { padding-top: 3.5em !important; }
}

.wrapper.style3 {
  background: var(--deep-charcoal) !important;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.02) 50px, rgba(255,255,255,0.02) 51px) !important;
  position: relative;
  overflow: hidden;
}

.wrapper.style3 h2,
.wrapper.style3 h3 {
  color: var(--ivory) !important;
}

.wrapper.style3 p {
  color: var(--taupe-line) !important;
}

.wrapper.style3 .button {
  background: transparent !important;
  border-color: var(--copper) !important;
  color: var(--copper) !important;
}

.wrapper.style3 .button:hover {
  background: var(--copper) !important;
  color: var(--ivory) !important;
}

/* --- Main Article / Section Headers --- */
article#main header h2 a,
article#main header h2,
section.container.special header h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--deep-charcoal) !important;
}

article#main header p,
section.container.special header p {
  color: var(--charcoal) !important;
  font-family: 'Inter', sans-serif !important;
}

/* --- Features / Pillars ---
   Presented as sequential clauses (numbered in small caps roman
   numerals) rather than four identical bordered cards, so the section
   reads like articles of a charter instead of a SaaS feature grid. */
#features header h2 {
  color: var(--deep-charcoal) !important;
}

#features .row {
  counter-reset: pillar;
}

#features article {
  text-align: left !important;
  padding: 0 1.75em 0 0;
  border-left: 1px solid var(--taupe-line);
  padding-left: 1.75em;
}

#features article:first-child {
  border-left: none;
}

#features article header h3 a,
#features article header h3,
section#features .special header h3 {
  font-family: 'Playfair Display', serif !important;
  color: var(--deep-charcoal) !important;
  font-size: 1.15em !important;
  display: inline;
}

#features article p {
  font-size: 0.93em !important;
  color: var(--charcoal) !important;
  text-align: left;
}

/* Pillar numeral, in place of the old centered accent rule */
#features article header::before {
  counter-increment: pillar;
  content: counter(pillar, upper-roman);
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--copper);
  margin-bottom: 0.7em;
}

@media (max-width: 736px) {
  /* col-6-mobile (50% width) still applies here — col-12-small does
     nothing, since this template only defines a single "mobile"
     breakpoint. Force full width so pillars actually stack in one
     column instead of a 2-up grid, which was cutting the divider
     line off at the column boundary. */
  #features article {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--taupe-line);
    padding-top: 1.75em;
    margin-top: 1.75em;
  }
  #features article:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}

/* --- Footer --- */
#footer {
  background: var(--deep-charcoal) !important;
  position: relative;
  overflow: hidden;
}

.footer-logo {
  display: inline-block;
  background: var(--ivory);
  padding: 0.7em 1.2em;
  margin-bottom: 1.5em;
  border: none !important;
}

.footer-logo img {
  display: block;
  height: 38px;
  width: auto;
}

#footer h2, #footer h3 {
  color: var(--ivory) !important;
  font-family: 'Playfair Display', serif !important;
}

#footer p, #footer li {
  color: var(--taupe-line) !important;
  font-family: 'Inter', sans-serif;
}

#footer a {
  color: var(--copper) !important;
}

#footer a:hover {
  color: var(--ivory) !important;
}

#footer a.button {
  color: var(--ivory) !important;
  border-color: var(--copper) !important;
}

#footer a.button:hover {
  color: var(--ivory) !important;
  background: var(--copper) !important;
  border-color: var(--copper) !important;
}

/* Masthead line: quiet institutional credential, sits above the copyright row */
#footer .masthead-line {
  font-family: 'Inter', sans-serif;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper) !important;
  margin-bottom: 1.75em;
  display: block;
}

#footer .copyright li {
  color: var(--charcoal) !important;
  font-size: 0.78em;
  font-family: 'Inter', sans-serif;
}

#footer .icon.circled {
  border-color: var(--copper) !important;
  color: var(--copper) !important;
  background: transparent !important;
}

#footer .icon.circled:hover {
  background: var(--copper) !important;
  color: var(--ivory) !important;
}

#footer hr {
  border-color: rgba(213, 203, 196, 0.2) !important;
}

#footer .divided li {
  border-top-color: rgba(213, 203, 196, 0.15) !important;
}

/* --- Page Hero (inner pages) --- */
.page-hero {
  background: var(--deep-charcoal);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px),
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px);
  padding: 7em 2em 5.5em;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero .eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.9em;
}

.page-hero h1 {
  font-family: 'Playfair Display', serif;
  color: var(--ivory) !important;
  font-size: 2.6em;
  margin-bottom: 0.6em;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero p {
  color: var(--taupe-line);
  font-family: 'Inter', sans-serif;
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.02em;
  line-height: 1.78;
}

/* --- Eyebrow / Section Labels --- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  display: block;
  margin-bottom: 0.75em;
}

.copper-rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--copper);
  margin: 1.2em auto;
}

/* --- Membership Tier Cards --- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5em;
  margin: 2.5em 0;
}

.tier-card {
  background: var(--ivory);
  border: 1px solid var(--taupe-line);
  position: relative;
  padding: 2.25em 1.85em 2em;
}

.tier-card:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--copper);
  border-left: 1px solid var(--copper);
}

.tier-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  font-size: 1.2em;
  margin-bottom: 0.2em;
}

.tier-card .tier-for {
  font-family: 'Inter', sans-serif;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.75em;
  display: block;
}

.tier-card .tier-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--taupe-line);
}

.tier-card p {
  font-size: 0.9em;
  color: var(--charcoal);
  line-height: 1.6;
  margin: 0;
}

/* --- Qualification / Checklist --- */
.qual-list {
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
}

.qual-list li {
  padding: 0.65em 0 0.65em 1.8em;
  position: relative;
  border-bottom: 1px solid var(--taupe-line);
  font-size: 0.95em;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
}

.qual-list li:last-child { border-bottom: none; }

.qual-list li::before {
  content: '—';
  color: var(--copper);
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* --- Program / Launch Sequence ---
   Headings already carry their own numbering ("1. Recruit…"), so this
   reads as a numbered charter sequence, not a stack of colored cards. */
.program-card {
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--taupe-line);
  padding: 1.75em 0;
  margin-bottom: 0;
}

.program-card:first-child {
  border-top: none;
  padding-top: 0;
}

.program-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  font-size: 1.15em;
  margin-bottom: 0.5em;
}

.program-card p {
  font-size: 0.92em;
  color: var(--charcoal);
  margin-bottom: 0.6em;
  font-family: 'Inter', sans-serif;
  max-width: 640px;
}

.program-card .output-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72em;
  color: var(--copper);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Values (About page) ---
   A quiet register instead of six identical bordered cards. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 2.5em 0 0;
  border-top: 1px solid var(--taupe-line);
  border-left: 1px solid var(--taupe-line);
}

.value-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--taupe-line);
  border-bottom: 1px solid var(--taupe-line);
  padding: 1.85em;
}

.value-card h4 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  font-size: 1em;
  margin-bottom: 0.4em;
}

.value-card p {
  font-size: 0.88em;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.6;
}

/* --- Forms --- */
.form-group {
  margin-bottom: 1.25em;
}

.form-group label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
  margin-bottom: 0.4em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  font-family: 'Inter', sans-serif !important;
  background: #fff !important;
  border: 1px solid var(--taupe-line) !important;
  color: var(--deep-charcoal) !important;
  border-radius: 0 !important;
  padding: 0.8em 1em !important;
  width: 100%;
  display: block;
  font-size: 0.95em;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--copper) !important;
  outline: none;
}

.form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .page-hero h1 { font-size: 1.9em; }
  #banner header h2 { font-size: 2.2em !important; }
}

/* --- Alabama Markets list --- */
.market-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin: 1.5em 0;
}

.market-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-charcoal);
  background: var(--ivory);
  border: 1px solid var(--taupe-line);
  padding: 0.5em 1.2em;
}

/* --- Event Formats ---
   Hairline-divided register, not a stack of bordered cards. */
.event-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--taupe-line);
  padding: 1.85em 0;
  margin-bottom: 0;
}

.event-card:first-child {
  border-top: none;
  padding-top: 0;
}

.event-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  font-size: 1.2em;
  margin-bottom: 0.35em;
}

.event-card .event-type {
  font-family: 'Inter', sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.6em;
  display: block;
}

.event-card p {
  font-size: 0.92em;
  color: var(--charcoal);
  margin: 0;
}

/* --- Page inner content spacing --- */
.content-section {
  padding: 6em 0;
}

@media (max-width: 736px) {
  .content-section { padding: 3.5em 0; }
}

.content-section h2 {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  margin-bottom: 0.6em;
}

.content-section .section-intro {
  font-size: 1.02em;
  color: var(--charcoal);
  max-width: 700px;
  margin-bottom: 2em;
  line-height: 1.75;
}

/* --- Inner page nav (no fullscreen header) --- */
body:not(.homepage) #header .inner {
  display: none;
}

body:not(.homepage) #header {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: var(--ivory) !important;
  border-bottom: 1px solid var(--taupe-line);
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6em 2em !important;
}

/* #nav's own display (block on desktop, none on mobile behind the
   hamburger) is left to the template; the logo lives outside #nav
   so it stays visible at every breakpoint. */
body:not(.homepage) #nav {
  position: static !important;
  background: var(--ivory);
}

/* --- Divider with copper accent --- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 2.5em 0;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--taupe-line);
}

.section-divider span {
  color: var(--copper);
  font-size: 1.2em;
}

/* --- Pulled quote / statement blocks --- */
.statement-block {
  border-left: 3px solid var(--copper);
  padding: 1.25em 2em;
  margin: 2em 0;
  background: var(--soft-stone);
}

.statement-block p {
  font-family: 'Playfair Display', serif;
  font-size: 1.12em;
  font-style: italic;
  color: var(--deep-charcoal);
  margin: 0;
  line-height: 1.6;
}

/* --- Numbered clause grid (reusable editorial list pattern) --- */
.clause-grid {
  counter-reset: clause;
}

.clause-grid .clause {
  border-left: 1px solid var(--taupe-line);
  padding-left: 1.75em;
  padding-right: 1.75em;
}

.clause-grid .clause:first-child {
  border-left: none;
}

.clause-grid .clause-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--copper);
  margin-bottom: 0.6em;
}

.clause-grid .clause-label:before {
  counter-increment: clause;
  content: counter(clause, upper-roman);
}

.clause-grid strong {
  font-family: 'Playfair Display', serif;
  color: var(--deep-charcoal);
  display: block;
  margin-bottom: 0.4em;
  font-size: 1.05em;
}

@media (max-width: 736px) {
  .clause-grid .clause {
    border-left: none !important;
    border-top: 1px solid var(--taupe-line);
    padding-top: 1.5em;
    margin-top: 1.5em;
  }
  .clause-grid .clause:first-child {
    border-top: none; padding-top: 0; margin-top: 0;
  }
}

/* --- Audience segments (homepage) ---
   A quiet four-column register rather than four identical bordered
   CTA cards; each column reads as a line in a roster, not a pricing tile. */
.segment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 2.5em 0 0.5em;
  border-top: 1px solid var(--taupe-line);
}

.segment-card {
  text-align: left;
  padding: 1.75em 1.75em 1.75em 1.5em;
  background: transparent;
  border-left: 1px solid var(--taupe-line);
}

.segment-card:first-child {
  border-left: none;
}

.segment-card h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper) !important;
  margin-bottom: 0.6em;
}

.segment-card p {
  font-size: 0.9em;
  color: var(--charcoal);
  margin: 0 0 0.9em;
  line-height: 1.6;
}

.segment-card .link-arrow {
  font-size: 0.68em;
}

@media (max-width: 736px) {
  .segment-row { grid-template-columns: 1fr 1fr; }
  .segment-card {
    border-left: none;
    padding: 1.5em 0;
    border-bottom: 1px solid var(--taupe-line);
  }
  .segment-card:nth-child(odd) { padding-right: 1em; }
  .segment-card:nth-child(even) { padding-left: 1em; }
}

/* --- Logo in hero --- */
.hero-logo {
  display: block;
  max-width: 320px;
  margin: 0 auto 2em;
  opacity: 0.92;
}

@media (max-width: 736px) {
  .hero-logo { max-width: 240px; }
  .segment-row { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .site-logo { width: clamp(170px, 50vw, 210px); }
  .nav-logo img { height: 30px; }
  .footer-logo img { height: 32px; }
  body:not(.homepage) #header { justify-content: flex-start !important; }
}