/**
 * About, Services, Contact, and Consultation pages. Pulled from the Figma
 * "02 - Public Website" file: About (34:6), Services (34:162), Contact
 * (34:558), Consultation (34:703). These four pages share enough visual
 * DNA (hero pattern, section titles, card grid, form fields, CTA banner)
 * that one shared stylesheet made more sense than four near-duplicates -
 * page-specific rules are grouped under their own comment headers below.
 *
 * KNOWN FIGMA GAP (Services page only): the "Services-Grid-Section" frame
 * (34:193) has all 6 of its service cards absolutely positioned at
 * identical bounds (x=0, y=0, width=1280 for every card) - confirmed via
 * a direct screenshot, which renders as illegible overlapping text, not a
 * usable layout. This is a broken/unfinished export in the Figma file
 * itself, not a real spec to reproduce. The individual card's own visual
 * spec (icon, title, description, "Learn More" styling) IS fully and
 * clearly specified and is used as-is; the CONTAINER arrangement below
 * instead reuses this same page's own "Values-Grid" pattern (a plain
 * 3-column grid, already used in .our-approach-grid below) since that's
 * the established, working equivalent already confirmed elsewhere on
 * this exact page.
 *
 * Also on Services: the confirmed BRAND_VOICE.md service list is five
 * services; the Figma frame shows six (adds "Diaspora Support", not in
 * BRAND_VOICE.md's confirmed list) - per explicit instruction, only the
 * five confirmed services are rendered.
 */

/* ---------------------------------------------------------------------
 * Shared: hero variants
 * --------------------------------------------------------------------- */

.static-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 80px;
    box-sizing: border-box;
    overflow: hidden;
}

.static-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.static-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.static-hero__kicker {
    position: relative;
    z-index: 2;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-champagne-gold);
    text-transform: uppercase;
    margin: 0;
}

.static-hero__title {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

/* Large hero (About, Services) - content bottom-aligned, 520px tall */
.static-hero--large {
    height: 520px;
    justify-content: flex-end;
    gap: 12px;
    padding-bottom: 80px;
}

.static-hero--large .static-hero__overlay {
    background: linear-gradient(160deg, rgba(6, 34, 23, 0.102) 25%, rgba(6, 34, 23, 0.8) 57.5%, rgba(6, 34, 23, 0.949) 75%);
}

.static-hero--large .static-hero__kicker {
    font-size: 12px;
}

.static-hero--large .static-hero__title {
    font-size: 48px;
    line-height: 1.15;
    max-width: 700px;
}

/* Compact hero (Contact, Consultation) - content vertically centered, 300px tall */
.static-hero--compact {
    height: 300px;
    justify-content: center;
    gap: 12px;
}

.static-hero--compact .static-hero__overlay {
    background-color: rgba(6, 34, 23, 0.75);
}

.static-hero--compact .static-hero__kicker {
    font-size: 13px;
}

.static-hero--compact .static-hero__title {
    font-size: 42px;
    max-width: 700px;
}

/* ---------------------------------------------------------------------
 * Shared: section title (kicker + heading, centered)
 * --------------------------------------------------------------------- */

.static-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
}

.static-section-title__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-champagne-gold);
    text-transform: uppercase;
    margin: 0;
}

.static-section-title__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 42px;
    color: var(--color-primary-green);
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Shared: 3-column card grid (About's Values-Grid / Our Approach, and
 * Services' service cards - see file comment on the Services layout gap)
 * --------------------------------------------------------------------- */

.static-card-grid {
    display: flex;
    gap: 40px;
    align-items: stretch;
    width: 100%;
}

.static-card-grid--wrap {
    flex-wrap: wrap;
}

.static-card {
    flex: 1 0 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-sizing: border-box;
}

.static-card__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.static-card__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-primary-green);
    margin: 0 0 12px;
}

.static-card__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin: 0;
}

.static-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-champagne-gold);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Shared: CTA banner (dark green bar with phone number)
 * --------------------------------------------------------------------- */

.static-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 32px 80px;
    background-color: var(--color-primary-green);
    box-sizing: border-box;
}

.static-cta-banner__text {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    color: var(--color-white);
    margin: 0;
}

.static-cta-banner__phone {
    display: flex;
    align-items: center;
    gap: 12px;
}

.static-cta-banner__phone-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-champagne-gold);
}

.static-cta-banner__phone-number {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-white);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Shared: form fields (Contact, Consultation) - a 48px/4px-radius/white-
 * bg spec distinct from both forms.css's general library (44px/4px) and
 * the enquiry modal's (48px/6px), so it gets its own scoped classes here
 * rather than an inexact reuse of either.
 * --------------------------------------------------------------------- */

.static-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.static-field__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-charcoal);
}

.static-input,
.static-select,
.static-textarea {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-near-black);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.static-input::placeholder,
.static-textarea::placeholder {
    color: #717171;
}

.static-input:focus,
.static-select:focus,
.static-textarea:focus {
    outline: none;
    border-color: var(--color-primary-green);
}

.static-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px;
    padding-right: 36px;
    cursor: pointer;
}

.static-select.is-placeholder {
    color: #717171;
}

.static-textarea {
    height: 120px;
    padding: 16px;
    resize: vertical;
}

.static-phone {
    display: flex;
    gap: 8px;
}

.static-phone__prefix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
    box-sizing: border-box;
}

.static-phone .static-input {
    flex: 1 0 0;
    min-width: 0;
}

/* Radio group - same solid-fill-dot visual language as the Enquiry modal
   (confirmed via the same Ellipse asset pair used in both places). */
.static-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 4px;
}

.static-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.static-radio__input {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.static-radio__dot {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-stone);
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.static-radio__label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
}

.static-radio__input:checked ~ .static-radio__dot {
    background-color: var(--color-primary-green);
    border-color: var(--color-primary-green);
}

.static-radio__input:focus-visible ~ .static-radio__dot {
    outline: 2px solid var(--color-primary-green);
    outline-offset: 2px;
}

.static-field-error {
    display: none;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--color-error);
    margin-top: -4px;
}

.static-field.is-error .static-input,
.static-field.is-error .static-select,
.static-field.is-error .static-textarea,
.static-field.is-error .static-phone__prefix {
    border-color: var(--color-error);
}

.static-field.is-error .static-field-error {
    display: block;
}

.static-form-error {
    display: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-error);
    margin: 0;
}

.static-form-error.is-visible {
    display: block;
}

.static-form-success {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 40px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    text-align: center;
}

.static-form-success.is-visible {
    display: flex;
}

.static-form-success__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: var(--color-primary-green);
    margin: 0;
}

.static-form-success__desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin: 0;
}

.static-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-primary-green);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-white);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.static-submit-btn:hover {
    background-color: var(--color-dark-green);
}

.static-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * About page
 * --------------------------------------------------------------------- */

.about-story-section {
    display: flex;
    align-items: center;
    gap: 96px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-warm-white);
    box-sizing: border-box;
}

.about-story-left {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-story-left p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-charcoal);
    margin: 0;
}

.about-story-right {
    flex: 1 0 0;
    min-width: 0;
    height: 560px;
    border-radius: 12px;
    overflow: hidden;
}

.about-story-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-approach-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-ivory);
    box-sizing: border-box;
}

.about-values-stats {
    display: flex;
    gap: 40px;
    width: 100%;
    padding: 100px 80px;
    background-color: var(--color-primary-green);
    box-sizing: border-box;
}

.about-values-stats__item {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

/* The heading now (was a small caption under a large em-dash "mark" -
   that mark is gone, see about.php's own comment on this section). Kept
   the same gold accent color the old numeral used, sized up so it still
   reads as this item's headline rather than a label under empty space. */
.about-values-stats__label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-light-gold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.about-values-stats__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
    opacity: 0.85;
    margin: 0;
    max-width: 240px;
}

.about-leadership-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-warm-white);
    box-sizing: border-box;
}

/* flex-wrap + justify-content:center (not the original flex:1-per-card
   stretch-to-fill-the-row layout) - this grid is admin-managed
   (admin/about-team.php) and can hold any number of people, not always
   exactly 4 like the original hardcoded placeholder loop assumed. With
   .about-leadership-card's old flex:1 0 0, a single real team member
   stretched to fill the ENTIRE row width (a photo meant to be ~340px wide
   rendering at 1000px+) - flex-grow:0 below keeps every card at its own
   natural size regardless of how many exist, wrap+center means 1-3 cards
   sit centered together, and a 4th+ card wraps to its own centered row.
   max-width caps the row at exactly 3 cards' worth of width (3 x 340px +
   2 x 32px gaps) - per explicit instruction, 3 per row (not 4) reads
   better against the rest of this page's larger-scale photography (e.g.
   the Our Story section's 560px-tall image, and the single-member
   spotlight size below). Without this cap, a 4th card would still fit on
   wide-enough monitors even though every OTHER card here is sized for 3
   per row; the cap makes 3-per-row true at any viewport width, not just
   typical ones. */
.about-leadership-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    width: 100%;
    max-width: 1084px;
    margin: 0 auto;
}

.about-leadership-card {
    flex: 0 1 340px;
    max-width: 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.about-leadership-card__photo {
    width: 100%;
    height: 420px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

/* Spotlight size for the single-team-member case (about.php adds this
   modifier only when count($teamMembers) === 1) - same 260px card looked
   like an undersized thumbnail as the only content in the section.
   400x490 keeps the card's existing ~0.81 photo aspect ratio, just scaled
   up to roughly match the visual weight of this page's other single
   photos (e.g. .about-story-right's 560px-tall image). Reverts to the
   normal 260px grid automatically the moment a 2nd member exists, since
   this class is never added once count() > 1. */
.about-leadership-grid--single .about-leadership-card {
    flex-basis: 400px;
    max-width: 400px;
}

.about-leadership-grid--single .about-leadership-card__photo {
    height: 490px;
}

.about-leadership-card__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-green);
    margin: 0;
}

.about-leadership-card__role {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-champagne-gold);
    text-transform: uppercase;
    margin: 0;
}

.about-leadership-card__bio {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #717171;
    margin: 0;
}

.about-testimonial-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    padding: 120px 80px;
    background-color: var(--color-ivory);
    box-sizing: border-box;
}

.about-testimonial-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 800px;
    text-align: center;
}

.about-testimonial-mark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 56px;
    color: var(--color-champagne-gold);
    margin: 0;
    line-height: 1;
}

.about-testimonial-quote {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.4;
    color: var(--color-primary-green);
    margin: 0;
}

.about-testimonial-attribution {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
    text-transform: uppercase;
    margin: 0;
}

.about-testimonial-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.about-testimonial-actions__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary-green);
}

/* ---------------------------------------------------------------------
 * Services page
 * --------------------------------------------------------------------- */

.services-grid-section {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-warm-white);
    box-sizing: border-box;
}

.services-timeline-section {
    display: flex;
    flex-direction: column;
    gap: 72px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-ivory);
    box-sizing: border-box;
}

.services-timeline-row {
    display: flex;
    gap: 32px;
    width: 100%;
}

.services-timeline-item {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.services-timeline-item__number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 56px;
    color: var(--color-light-gold);
    margin: 0;
}

.services-timeline-item__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-primary-green);
    margin: 0 0 10px;
}

.services-timeline-item__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-charcoal);
    margin: 0;
}

.services-why-section {
    display: flex;
    align-items: center;
    gap: 96px;
    width: 100%;
    padding: 140px 80px;
    background-color: var(--color-warm-white);
    box-sizing: border-box;
}

.services-why-image {
    flex: 1 0 0;
    min-width: 0;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
}

.services-why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-why-content {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.services-why-content__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services-why-content__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-champagne-gold);
    text-transform: uppercase;
    margin: 0;
}

.services-why-content__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.15;
    color: var(--color-primary-green);
    margin: 0;
}

/* .services-why-content__body, not p.services-why-content__body - same
   reasoning as investment.css's .inv-body: admin/page-content.php's
   editable version of this copy wraps TinyMCE's <p> output in a
   <div class="services-why-content__body">, and a tag-qualified selector
   would stop matching a div. Inheritable typography properties still
   reach the nested <p> tags either way. */
.services-why-content .services-why-content__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-charcoal);
    margin: 0;
}

/* Was two separate <p class="services-why-content__body"> elements
   getting the 40px flex gap from .services-why-content between them -
   restores that separation for the nested <p> tags now living inside one
   merged wrapper (see the comment above). */
.services-why-content .services-why-content__body p {
    margin: 0 0 40px;
}

.services-why-content .services-why-content__body p:last-child {
    margin-bottom: 0;
}

/* Was three separate <p> elements directly inside .about-story-left
   getting its 32px flex gap between them - admin/page-content.php's
   editable version of this copy (get_content_block('about',
   'about_intro_body', ...)) merges them into one
   <div class="about-intro-body"> holding TinyMCE's own <p> tags, which
   that flex gap no longer reaches between. .about-story-left p (below,
   pre-existing) still supplies the font/color styling via descendant
   matching regardless of the extra wrapper div - only the inter-paragraph
   spacing needs restoring here. */
.about-story-left .about-intro-body p:not(:last-child) {
    margin-bottom: 32px;
}

.services-why-cta {
    display: inline-flex;
    align-items: center;
    padding: 16px 36px;
    background-color: var(--color-primary-green);
    border-radius: 4px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    width: fit-content;
}

/* ---------------------------------------------------------------------
 * Contact page
 * --------------------------------------------------------------------- */

.contact-main-section {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
    padding: 100px 80px;
    box-sizing: border-box;
}

.contact-form-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1 0 0;
    min-width: 0;
    max-width: 733px;
}

.contact-form-column__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form-column__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    color: var(--color-primary-green);
    margin: 0;
}

.contact-form-column__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #717171;
    margin: 0;
}

.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 515px;
    flex-shrink: 0;
}

.contact-info-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    padding: 40px;
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-stone);
    border-radius: 12px;
    box-sizing: border-box;
}

.contact-info-card__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-info-card__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    color: var(--color-champagne-gold);
    margin: 0;
}

.contact-info-card__name {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    color: var(--color-primary-green);
    margin: 0;
}

.contact-info-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.contact-info-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.contact-info-row__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-info-row__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
    min-width: 0;
}

.contact-info-row__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #717171;
    margin: 0;
}

.contact-info-row__value {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-charcoal);
    margin: 0;
}

.contact-info-card__divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-stone);
    border: none;
    margin: 0;
}

.contact-info-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.contact-info-social__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #717171;
    margin: 0;
}

.contact-info-social__handle {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-primary-green);
    margin: 0;
}

.contact-map {
    width: 100%;
    height: 240px;
    border: 1px solid var(--color-stone);
    border-radius: 12px;
    overflow: hidden;
}

.contact-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------------
 * Consultation page
 * --------------------------------------------------------------------- */

.consultation-intro {
    width: 100%;
    padding: 80px 80px 0;
    box-sizing: border-box;
}

.consultation-intro__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 952px;
}

.consultation-intro__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    color: var(--color-primary-green);
    margin: 0;
}

.consultation-intro__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-charcoal);
    margin: 0;
}

.consultation-main {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
    padding: 64px 80px 120px;
    box-sizing: border-box;
}

.consultation-form-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1 0 0;
    min-width: 0;
    max-width: 733px;
}

.consultation-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.consultation-step__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-champagne-gold);
    margin: 0;
}

/* Calendar widget */
.consultation-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 24px;
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-stone);
    border-radius: 8px;
    box-sizing: border-box;
}

.consultation-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.consultation-calendar__month {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-green);
    margin: 0;
}

.consultation-calendar__nav {
    display: flex;
    gap: 8px;
}

.consultation-calendar__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-primary-green);
    font-size: 14px;
}

.consultation-calendar__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.consultation-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #717171;
    text-align: center;
}

.consultation-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px;
    width: 100%;
}

.consultation-calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: none;
    border-radius: 4px;
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-charcoal);
    cursor: pointer;
    padding: 0;
}

.consultation-calendar__day:disabled {
    background: none;
    color: var(--color-stone);
    cursor: not-allowed;
}

.consultation-calendar__day.is-selected {
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-champagne-gold);
    color: var(--color-white);
    font-weight: 600;
}

.consultation-time-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.consultation-time-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}

.consultation-time-pill__time {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
}

.consultation-time-pill__period {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    color: #717171;
}

.consultation-time-pill.is-selected {
    background-color: var(--color-primary-green);
    border-color: var(--color-champagne-gold);
}

.consultation-time-pill.is-selected .consultation-time-pill__time {
    color: var(--color-white);
}

.consultation-time-pill.is-selected .consultation-time-pill__period {
    color: var(--color-champagne-gold);
}

.consultation-details-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.consultation-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-champagne-gold);
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-white);
    text-transform: uppercase;
    cursor: pointer;
}

.consultation-book-btn:hover {
    background-color: var(--color-dark-green);
}

.consultation-book-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.consultation-side-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 515px;
    flex-shrink: 0;
}

.consultation-expect-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    padding: 40px;
    background-color: var(--color-warm-white);
    border: 1px solid var(--color-stone);
    border-radius: 12px;
    box-sizing: border-box;
}

.consultation-expect-card__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    color: var(--color-primary-green);
    margin: 0;
}

.consultation-expect-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.consultation-expect-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.consultation-expect-item__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: var(--color-primary-green);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
}

.consultation-expect-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
    min-width: 0;
}

.consultation-expect-item__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-charcoal);
    margin: 0;
}

.consultation-expect-item__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #717171;
    margin: 0;
}

.consultation-advisor-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 32px;
    background-color: var(--color-primary-green);
    border-radius: 12px;
    box-sizing: border-box;
}

.consultation-advisor-card__header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.consultation-advisor-card__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.consultation-advisor-card__name {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    color: var(--color-white);
    margin: 0 0 4px;
}

.consultation-advisor-card__role {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-champagne-gold);
    margin: 0;
}

.consultation-advisor-card__quote {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
    opacity: 0.9;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Mobile / tablet
 * --------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .static-hero,
    .about-story-section,
    .about-approach-section,
    .about-values-stats,
    .about-leadership-section,
    .about-testimonial-section,
    .services-grid-section,
    .services-timeline-section,
    .services-why-section,
    .contact-main-section,
    .consultation-intro,
    .consultation-main,
    .static-cta-banner {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* The "Speak With an Advisor" button and the phone link can't both fit
       on one line at phone widths - flex-wrap drops the phone link to its
       own centered row below the button instead of letting the number
       itself wrap mid-text (see about.php's own comment on the link). */
    .about-testimonial-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .static-hero--large {
        height: auto;
        min-height: 420px;
        padding-top: 100px;
        padding-bottom: 48px;
    }

    .static-hero--large .static-hero__title,
    .static-hero--compact .static-hero__title {
        font-size: 32px;
    }

    .static-card-grid,
    .about-story-section,
    .about-values-stats,
    .about-leadership-grid,
    .services-timeline-row,
    .services-why-section,
    .contact-main-section,
    .consultation-main {
        flex-direction: column;
    }

    .about-story-right,
    .services-why-image {
        width: 100%;
        height: 320px;
    }

    .contact-info-column,
    .consultation-side-column {
        width: 100%;
    }

    .static-cta-banner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .about-leadership-grid {
        flex-wrap: wrap;
    }

    .about-leadership-card {
        flex: 1 0 45%;
    }
}