/**
 * Wito Projects — Vertical rhythm (canonical)
 * AUDIT pass 2: Core Services double-gap removed; page bundles aligned (stack-gap 0, lead margin-top 0).
 * ---------------------------------------------------------------------------
 * Uniform heading → accent line → lead → body spacing sitewide.
 * Load AFTER page bundles / location-landing so these rules win.
 *
 * Reference section: homepage "Core Services" (heading → line → lead).
 *
 * Rhythm (locked on all pages / breakpoints):
 *   heading → accent   = 0.75rem  (--rhythm-heading-to-accent)
 *   accent  → lead     = 1.75rem  (lead margin-top; accent mb = 0)
 *   lead    → content  = 1.75rem  (--rhythm-lead-to-content)
 *   paragraph stack    = 1rem     (--rhythm-paragraph)
 *
 * Surfaces: --bg-white #fff · --bg-offwhite #f4f4f4 (neutral grey, not blue)
 * Brand: --heading-color #2d1650 · --accent-color #aa4400
 * ---------------------------------------------------------------------------
 */

:root {
  /* Spacing aliases (xs → xl) */
  --spacing-xs: var(--space-2, 0.5rem);
  --spacing-sm: var(--space-3, 0.75rem);
  --spacing-md: var(--space-4, 1rem);
  --spacing-lg: var(--space-6, 1.5rem);
  --spacing-xl: var(--space-7, 2rem);
  --spacing-2xl: var(--space-8, 2.5rem);

  /* Vertical rhythm — Core Services reference (locked sitewide) */
  --rhythm-heading-to-accent: 0.75rem;
  --rhythm-accent-to-lead: 1.75rem;
  --rhythm-lead-to-content: 1.75rem;
  --rhythm-paragraph: var(--spacing-md);
  --rhythm-section-gap: var(--section-padding, 5rem);

  /* Accent rule geometry */
  --accent-line-width: 60px;
  --accent-line-height: 4px;

  /* Type measure */
  --body-line-height: 1.6;
  --lead-line-height: 1.65;
  --prose-line-height: 1.75;

  /* Bridge legacy tokens used in bundles */
  --wito-heading-stack-gap: 0; /* accent margins own the stack; do not add flex gap */
  --wito-heading-to-lead-gap: 0;
  --wito-section-lead-margin-bottom: var(--rhythm-lead-to-content);
}

/* —— Accent line (pseudo + element) —— */
.wito-heading-center .wito-main-title::after,
.wito-heading-left .wito-main-title::after {
  content: "";
  display: block;
  width: var(--accent-line-width);
  height: var(--accent-line-height);
  background-color: var(--accent-color, #aa4400);
  /* Gap below the line is owned by the lead (see accent→paragraph lock) */
  margin: var(--rhythm-heading-to-accent) auto 0;
}

.wito-heading-left .wito-main-title::after {
  margin-left: 0;
  margin-right: 0;
}

.wito-title-line-inline,
span.wito-title-line-inline {
  display: block;
  width: var(--accent-line-width);
  height: var(--accent-line-height);
  background-color: var(--accent-color, #aa4400);
  margin: var(--rhythm-heading-to-accent) auto 0;
  border: 0;
  padding: 0;
}

.wito-heading-left .wito-title-line-inline,
.wito-legal .wito-title-line-inline {
  margin-left: 0;
  margin-right: 0;
}

/* When heading stack uses flex gap for eyebrow → title only; accent uses its own margins */
.wito-heading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  margin-bottom: 0;
}

.wito-heading-center > .wito-location-intro-eyebrow,
.wito-heading-center > .wito-home-faq-eyebrow,
.wito-heading-center > .wito-services-faq-eyebrow {
  margin-bottom: var(--rhythm-heading-to-accent, 0.75rem);
}

.wito-heading-center .wito-main-title {
  margin-bottom: 0;
}

.wito-heading-center > .wito-title-line-inline {
  margin-top: var(--rhythm-heading-to-accent);
  margin-bottom: 0;
}

/* Hide duplicate ::after when an explicit title-line is present */
.wito-heading-center:has(> .wito-title-line-inline) .wito-main-title::after,
.wito-heading-left:has(> .wito-title-line-inline) .wito-main-title::after {
  display: none;
}

/* Consult head: shared orange accent under the title (no title-line-inline) */
.wito-commercial-contact-head .wito-heading-center .wito-main-title::after,
.index-page .wito-commercial-contact-head .wito-main-title::after,
.contact-page #contact .wito-commercial-contact-head .wito-main-title::after,
body.wito-location-landing .wito-commercial-contact-head .wito-main-title::after {
  content: "";
  display: block !important;
  width: var(--accent-line-width, 60px);
  height: var(--accent-line-height, 4px);
  background-color: var(--accent-color, #aa4400);
  margin: var(--rhythm-heading-to-accent, 0.75rem) auto 0;
}

/* Commercial consult head: sub-text sits after heading-center (not inside it) */
.wito-commercial-contact-head .wito-title-line-inline,
.wito-commercial-contact-head .wito-heading-center > .wito-title-line-inline {
  margin: var(--rhythm-heading-to-accent, 0.75rem) auto 0;
}

.wito-commercial-contact-head .wito-heading-center + .wito-sub-text,
.wito-commercial-contact-head > .wito-sub-text {
  margin-top: 0;
  margin-bottom: var(--rhythm-lead-to-content, 1.75rem);
}

/* —— Lead / sub-text after heading block —— */
.wito-sub-text,
.wito-lead-text,
.wito-contact-guide-lead,
.wito-process-style-lead,
.wito-featured-guides-lead {
  margin-top: 0;
  margin-bottom: var(--rhythm-lead-to-content);
  line-height: var(--lead-line-height);
  font-size: 1rem;
}

.wito-wide-wrapper > .wito-heading-center + .wito-sub-text,
.wito-wide-wrapper > .wito-heading-center + .wito-lead-text,
.wito-wide-wrapper > .wito-heading-center + .wito-contact-guide-lead,
.wito-wide-wrapper > .wito-heading-center + .wito-process-style-lead,
.wito-wide-wrapper > .wito-heading-center + .wito-featured-guides-lead,
.wito-location-contact-head + .wito-sub-text,
.wito-location-faq-head + .wito-sub-text,
.wito-commercial-contact-head + .wito-sub-text,
.wito-heading-center > .wito-title-line-inline + .wito-sub-text,
.wito-heading-center > .wito-title-line-inline + .wito-lead-text {
  margin-top: 0;
  margin-bottom: var(--rhythm-lead-to-content);
}

/* Centered leads share one measure */
.wito-heading-center ~ .wito-sub-text,
.wito-heading-center ~ .wito-lead-text,
.wito-wide-wrapper > .wito-sub-text,
.wito-wide-wrapper > .wito-lead-text {
  text-align: center;
  max-width: var(--lead-max-width, 44rem);
  margin-left: auto;
  margin-right: auto;
}

/* —— Body / prose paragraph flow —— */
.wito-wide-wrapper > p,
.wito-location-body > p,
.wito-legal-prose p,
.wito-seo-prose p,
.wito-blog-detail-content p,
.wito-portfolio-detail-content p,
.wito-about-main p,
article p {
  line-height: var(--body-line-height);
  margin-top: 0;
  margin-bottom: var(--rhythm-paragraph);
}

.wito-location-body > p:last-child,
.wito-legal-prose p:last-child,
.wito-seo-prose p:last-child,
article p:last-child {
  margin-bottom: 0;
}

/* —— Section titles (h1–h6) base —— */
h1, h2, h3, h4, h5, h6,
.wito-main-title,
.wito-sub-heading {
  font-family: var(--heading-font, Roboto, sans-serif);
  color: var(--heading-color, #2d1650);
  line-height: var(--heading-line-height, 1.25);
}

.wito-main-title {
  font-size: var(--heading-h2-size, clamp(1.75rem, 4vw, 2.25rem));
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h3 {
  font-size: var(--heading-h3-size, clamp(1.4rem, 3vw, 1.65rem));
}

h4 {
  font-size: var(--heading-h4-size, 1.25rem);
}

h5 {
  font-size: var(--heading-h5-size, 1.1rem);
}

h6 {
  font-size: var(--heading-h6-size, 1rem);
}

/* —— Responsive: section padding only — heading/accent/lead rhythm stays locked —— */
@media (max-width: 768px) {
  :root {
    --rhythm-section-gap: clamp(3rem, 10vw, 4rem);
  }
}



/* Heading stacks: no flex gap — accent margins own vertical space */
.wito-heading-center,
.wito-heading-left,
body.wito-location-landing .wito-heading-center,
body.wito-location-landing .wito-location-intro .wito-heading-center,
body.wito-location-landing .wito-cx-sectors-head .wito-heading-center,
body.wito-location-landing .wito-cx-proof-head .wito-heading-center {
  gap: 0 !important;
}
.wito-heading-center .wito-main-title,
.wito-heading-left .wito-main-title {
  margin-top: 0;
  margin-bottom: 0;
}
/* —— Accent → paragraph lock (homepage + sitewide) ——
 * Exact gap under the orange line = 1.75rem on EVERY section.
 * Accent line never adds bottom margin; the following lead owns the gap.
 * Use padding-top so margin: shorthand rules cannot collapse it to 0.
 */
:root {
  --rhythm-accent-to-lead: 1.75rem;
}

.wito-heading-center .wito-main-title::after,
.wito-heading-left .wito-main-title::after,
.wito-process-style-heading .wito-main-title::after,
.portfolio-details-page .wito-main-title::after,
.about-page .wito-about-story-head .wito-main-title::after,
.wito-title-line-inline,
span.wito-title-line-inline,
.wito-heading-center > .wito-title-line-inline,
.wito-heading-left > .wito-title-line-inline,
.wito-legal .wito-heading-left .wito-title-line-inline,
.wito-commercial-contact-head .wito-title-line-inline,
.wito-commercial-contact-head .wito-heading-center > .wito-title-line-inline,
.index-page .wito-commercial-contact-head .wito-title-line-inline,
.contact-page #contact .wito-commercial-contact-head .wito-title-line-inline,
body.wito-location-landing .wito-commercial-contact-head .wito-title-line-inline,
.portfolio-details-page .wito-seo-prose-section .wito-title-line-inline {
  margin-bottom: 0 !important;
}

.index-page .wito-wide-wrapper > .wito-heading-center + .wito-sub-text,
.index-page .wito-wide-wrapper > .wito-heading-center + .wito-lead-text,
.index-page .wito-wide-wrapper > .wito-heading-center + .wito-contact-guide-lead,
.index-page .wito-wide-wrapper > .wito-heading-center + .wito-process-style-lead,
.index-page .wito-wide-wrapper > .wito-heading-center + .wito-featured-guides-lead,
.index-page #service-overview .wito-sub-text,
.index-page #portfolio-highlights .wito-sub-text,
.index-page #clients .wito-lead-text,
.index-page #testimonials .wito-lead-text,
.index-page #home-faq .wito-sub-text,
.index-page #home-process .wito-contact-guide-lead,
.index-page .wito-commercial-contact-head > .wito-sub-text,
.wito-heading-center + .wito-sub-text,
.wito-heading-center + .wito-lead-text,
.wito-heading-center + .wito-contact-guide-lead,
.wito-heading-center + .wito-process-style-lead,
.wito-heading-center + .wito-featured-guides-lead,
.wito-wide-wrapper > .wito-heading-center + .wito-sub-text,
.wito-wide-wrapper > .wito-heading-center + .wito-lead-text,
.wito-wide-wrapper > .wito-heading-center + .wito-contact-guide-lead,
.wito-wide-wrapper > .wito-heading-center + .wito-process-style-lead,
.wito-wide-wrapper > .wito-heading-center + .wito-featured-guides-lead,
.wito-heading-center > .wito-title-line-inline + .wito-sub-text,
.wito-heading-center > .wito-title-line-inline + .wito-lead-text,
.wito-commercial-contact-head .wito-heading-center + .wito-sub-text,
.wito-commercial-contact-head > .wito-sub-text,
.wito-process-style-heading + .wito-lead-text,
.wito-process-style-heading + .wito-process-style-lead,
.wito-process-style-heading + .wito-sub-text,
.wito-home-services .wito-sub-text,
.wito-home-portfolio .wito-sub-text,
.wito-home-faq .wito-sub-text,
.wito-featured-guides-lead,
.wito-contact-guide-lead {
  margin-top: 0 !important;
  padding-top: 1.75rem !important;
}


/* —— Surface band contrast: white vs off-white —— */
:root {
  --bg-white: #ffffff;
  --background-color: #ffffff;
  --surface-color: #ffffff;
  --bg-offwhite: #f4f4f4;
  --neutral-color: #f5f5f5;
}

.bg-white,
section.bg-white,
.index-page section.bg-white,
.about-page section.bg-white,
.contact-page section.bg-white,
.blog-page section.bg-white,
.portfolio-page section.bg-white,
body.wito-location-landing section.bg-white {
  background-color: var(--bg-white, #ffffff);
}

.bg-offwhite,
section.bg-offwhite,
.index-page section.bg-offwhite,
.about-page section.bg-offwhite,
.contact-page section.bg-offwhite,
.blog-page section.bg-offwhite,
.portfolio-page section.bg-offwhite,
body.wito-location-landing section.bg-offwhite,
#contact.wito-about-consult,
.wito-contact-guide,
.wito-portfolio-process,
.wito-featured-guides,
.wito-crumb-bar,
.wito-silo {
  background-color: var(--bg-offwhite, #f4f4f4);
}

/* Cards / form panels stay pure white so they lift off off-white bands */
.wito-contact-form-wrapper,
.wito-commercial-contact-form-panel,
.wito-info-blocks--layered,
.wito-silo-col,
.wito-about-consult-card {
  background-color: var(--surface-color, #ffffff);
}
/* Titles share one margin lock — do not re-add lead margin-top (padding-top owns accent→lead). */
.wito-heading-center .wito-main-title,
.wito-heading-left .wito-main-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Section leads with expanded accent→paragraph gap (homepage section heads) */
.index-page #clients.wito-home-brands .wito-sub-text,
.index-page #service-overview .wito-sub-text,
.index-page #portfolio-highlights .wito-sub-text,
.index-page #turnkey-process .wito-sub-text,
.index-page #testimonials .wito-sub-text,
.index-page #home-faq .wito-sub-text,
.index-page .wito-commercial-contact-head > .wito-sub-text,
body.wito-location-landing .wito-location-faq-head + .wito-sub-text,
body.wito-location-landing #service-faq > .wito-wide-wrapper > .wito-sub-text,
body.wito-location-landing .wito-cx-sectors-head > .wito-sub-text,
body.wito-location-landing .wito-cx-sectors-head .wito-heading-center + .wito-sub-text,
body.wito-location-landing #areas-gauteng > .wito-wide-wrapper > .wito-areas-lead,
body.wito-location-landing .wito-areas-gauteng .wito-areas-lead,
body.wito-location-landing .wito-heading-center + .wito-areas-lead,
body.wito-location-landing .wito-commercial-contact-head > .wito-sub-text,
body.wito-location-landing .wito-commercial-contact-head .wito-heading-center + .wito-sub-text,
body.wito-location-landing #contact .wito-commercial-contact-head > .wito-sub-text,
.contact-page #wito-contact-restack > .wito-wide-wrapper > .wito-sub-text,
.contact-page #contact .wito-commercial-contact-head > .wito-sub-text,
.contact-page #contact .wito-commercial-contact-head .wito-heading-center + .wito-sub-text,
.portfolio-page #portfolio > .wito-wide-wrapper > .wito-sub-text,
.portfolio-page #contact > .wito-wide-wrapper > .wito-sub-text {
  padding-top: 2.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 2.25rem !important;
}