/* ========================================================================== 
   About page — modern institutional layout
   ========================================================================== */
.about-modern-wrap {
    box-sizing: border-box;
    width: min(1280px, calc(100% - 48px));
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 ;
}

/* Own the WordPress one-column primary width, rather than compensating inside a 740px column.
   Overrides style.css .page.page-one-column:not(.customtheme-front-page) #primary
   through specificity, without adding an importance flag. */
body.page.page-one-column #primary.about-modern-primary {
    float: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.about-modern-primary {
    float: none ;
    width: 100% ;
    max-width: none ;
    margin: 0 ;
    padding: 0 ;
}

.about-modern-page {
    --about-navy: #123e68;
    --about-blue: #2776b9;
    --about-teal: #2d8c82;
    --about-amber: #b67a27;
    --about-ink: #17344f;
    --about-muted: #5c7183;
    --about-line: #dce6ed;
    --about-soft: #f5f8fb;
    color: var(--about-ink);
}

.about-modern-page * {
    box-sizing: border-box;
}

.about-modern-hero,
.about-modern-stats,
.about-modern-section,
.about-modern-trust,
.about-modern-cta {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.about-modern-hero {
    max-width: 940px;
    padding: 72px 0 52px;
}

.about-modern-eyebrow,
.about-modern-kicker {
    display: inline-block;
    color: var(--about-blue);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.about-modern-hero h1 {
    margin: 15px auto 0 ;
    color: var(--about-navy) ;
    font-weight: 600 ;
}

.about-modern-hero > p {
    margin: 20px auto 0;
}

.about-modern-hero-actions,
.about-modern-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 29px;
}

.about-modern-button,
.about-modern-button:link,
.about-modern-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none ;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.about-modern-button-primary,
.about-modern-button-primary:link,
.about-modern-button-primary:visited {
    color: #fff ;
    background: var(--about-navy);
    border: 1px solid var(--about-navy);
}

.about-modern-button-secondary,
.about-modern-button-secondary:link,
.about-modern-button-secondary:visited {
    color: var(--about-navy) ;
    background: #fff;
    border: 1px solid #b9cad7;
}

@media (hover: hover) and (pointer: fine) {
    .about-modern-button-primary:hover,
    .about-modern-button-primary:focus {
        color: #fff;
        background: #174f82;
        border-color: #174f82;
        box-shadow: 0 6px 18px rgba(18, 62, 104, .12);
        transform: translateY(-1px);
    }

    .about-modern-button-secondary:hover,
    .about-modern-button-secondary:focus {
        color: var(--about-navy);
        background: #f2f7fa;
        border-color: #8eabba;
    }
}

.about-modern-stats {
    display: grid;
    overflow: hidden;
    margin-bottom: 78px;
    background: #fff;
    border: 1px solid var(--about-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(18, 55, 82, .045);
}

.about-modern-stat {
    min-width: 0;
    border-right: 1px solid var(--about-line);
}

.about-modern-stat:last-child {
    border-right: 0;
}

.about-modern-stat strong,
.about-modern-stat span {
    display: block;
}

.about-modern-stat strong {
    font-weight: 700;
    line-height: 1.1;
}

.about-modern-stat span {
    margin-top: 7px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.about-modern-section {
    padding: 0 0 88px;
}

.about-modern-section-heading {
    max-width: 720px;
}

.about-modern-section-heading-centered {
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-modern-section-heading h2,
.about-modern-method-copy h2,
.about-modern-trust h2 {
    margin: 10px 0 0 ;
    font-weight: 600 ;
    letter-spacing: -.025em;
}

.about-modern-cta h2 {
    margin: 10px 0 0 ;
    line-height: 1.18 ;
}

.about-modern-section-heading > p {
    margin: 14px 0 0;
}

.about-modern-method-copy p {
    margin: 0 0 17px;
    color: #4f6577;
    font-size: 16px;
    line-height: 1.72;
}

.about-modern-what {
    padding-top: 78px;
    padding-bottom: 84px;
    border-top: 1px solid #edf2f5;
}

.about-modern-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-modern-service {
    --service-accent: var(--about-blue);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 330px;
    border-top: 4px solid var(--service-accent);
}

.about-modern-service-teal {
    --service-accent: var(--about-teal);
}

.about-modern-service-amber {
    --service-accent: var(--about-amber);
}

.about-modern-service-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.about-modern-service h3 {
    margin: 12px 0 11px;
    font-weight: 600;
    line-height: 1.25;
}

.about-modern-service p {
    margin: 0 0 18px;
}

.about-modern-service-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: auto;
}

.about-modern-service-links a,
.about-modern-service-links a:link,
.about-modern-service-links a:visited,
.about-modern-service-action,
.about-modern-service-action:link,
.about-modern-service-action:visited {
    color: var(--service-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.about-modern-service-action {
    margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
    .about-modern-service-links a:hover,
    .about-modern-service-links a:focus,
    .about-modern-service-action:hover,
    .about-modern-service-action:focus {
        text-decoration: none;
        text-underline-offset: 3px;
    }
}

.about-modern-method-card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 42px;
}

.about-modern-method-copy p {
    opacity: .88;
}

.about-modern-text-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 23px;
}

.about-modern-text-links a,
.about-modern-text-links a:link,
.about-modern-text-links a:visited {
    color: #fff ;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none ;
}

.about-modern-method-points {
    display: grid;
    gap: 12px;
}

.about-modern-method-points > div {
    padding: 19px 20px;
    border-radius: 8px;
}

.about-modern-method-points strong,
.about-modern-method-points span {
    display: block;
}

.about-modern-method-points strong {
    font-size: 14px;
    font-weight: 700;
}

.about-modern-method-points span {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.55;
}

.about-modern-trust {
    text-align: center;
}

.about-modern-trust h2 {
    margin-left: auto ;
    margin-right: auto ;
}

.about-modern-trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.about-modern-trust-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14px;
    font-weight: 600;
}

.about-modern-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    margin-bottom: 80px;
    background: linear-gradient(135deg, #eef6fb 0%, #f8fbfd 100%);
    border: 1px solid #d4e4ef;
    border-radius: 11px;
}

.about-modern-cta > div:first-child {
    max-width: 650px;
}

.about-modern-cta h2 {
    font-size: 26px ;
}

.about-modern-cta p {
    margin: 10px 0 0;
    color: var(--about-muted);
}

.about-modern-cta-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

@media (max-width: 980px) {
    .about-modern-hero h1 {
        font-size: 44px ;
    }

    .about-modern-service-grid {
        grid-template-columns: 1fr;
    }

    .about-modern-service {
        min-height: 0;
    }

    .about-modern-method-card {
        grid-template-columns: 1fr;
    }

    .about-modern-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-modern-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .about-modern-hero,
    .about-modern-stats,
    .about-modern-section,
    .about-modern-trust,
    .about-modern-cta {
        width: calc(100% - 32px);
    }

    .about-modern-hero {
        padding: 46px 0 35px;
        text-align: left;
    }

    .about-modern-hero h1 {
        margin-left: 0 ;
        margin-right: 0 ;
        line-height: 1.12 ;
    }

    .about-modern-hero > p {
        margin-left: 0;
        margin-right: 0;
        font-size: 16px;
        line-height: 1.6;
    }

    .about-modern-hero-actions {
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        margin-top: 23px;
    }

    .about-modern-button {
        width: 100%;
        min-height: 47px;
    }

    .about-modern-stats {
        margin-bottom: 56px;
    }

    .about-modern-stat {
        padding: 19px 18px 18px;
    }

    .about-modern-stat strong {
        font-size: 25px;
    }

    .about-modern-stat span {
        font-size: 10px;
    }

    .about-modern-section-heading,
    .about-modern-section-heading-centered {
        text-align: left;
        margin-bottom: 24px;
    }

    .about-modern-section-heading h2,
    .about-modern-method-copy h2,
    .about-modern-trust h2,
    .about-modern-cta h2 {
        font-size: 29px ;
        line-height: 1.22 ;
    }

    .about-modern-section-heading > p {
        font-size: 15px;
    }

    .about-modern-method-card {
        gap: 22px;
    }

    .about-modern-what {
        padding-top: 56px;
        padding-bottom: 58px;
    }

    .about-modern-service-grid {
        gap: 13px;
    }

    .about-modern-service {
        padding: 23px 22px 22px;
    }

    .about-modern-service h3 {
        font-size: 21px;
    }

    .about-modern-method-card {
        padding: 27px 23px;
        border-radius: 10px;
    }

    .about-modern-trust {
        margin-bottom: 56px;
        padding: 29px 22px 30px;
        text-align: left;
    }

    .about-modern-trust h2 {
        margin-left: 0 ;
        margin-right: 0 ;
    }

    .about-modern-trust-grid {
        justify-content: flex-start;
        gap: 7px;
        margin-top: 20px;
    }

    .about-modern-cta {
        margin-bottom: 58px;
        padding: 28px 23px;
        gap: 22px;
    }

    .about-modern-cta-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }
}

@media (max-width: 420px) {

    .about-modern-stat,
    .about-modern-stat:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--about-line);
    }

    .about-modern-stat:last-child {
        border-bottom: 0;
    }

    .about-modern-hero h1 {
        font-size: 32px ;
    }
}


/* ========================================================================== 
   About page — remove legacy 240px sidebar reservation
   ========================================================================== */
body.page-template-page-about .site-content #primary.about-modern-primary,
body.page-template-page-about-php .site-content #primary.about-modern-primary,
.site-content #primary.about-modern-primary {
    float: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.page-template-page-about .about-modern-wrap,
body.page-template-page-about-php .about-modern-wrap,
.site-content .about-modern-wrap {
    /* Centre the About template on the same desktop rail as navigation. */
    box-sizing: border-box;
    width: min(1280px, calc(100% - 48px));
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   CEI — About page final refinement
   Light-touch calibration: premium scale, fewer boxes, calmer evidence.
   ========================================================================== */
.about-modern-hero {
    padding-top: 58px ;
    padding-bottom: 44px ;
}
.about-modern-hero h1 {
    max-width: 800px;
    font-size: clamp(40px, 4.5vw, 54px) ;
    line-height: 1.05 ;
    letter-spacing: -.03em ;
}
.about-modern-hero > p {
    max-width: 760px;
    color: #3f4f5e ;
    font-size: 17px ;
    line-height: 1.68 ;
}
.about-modern-hero-actions {
    margin-top: 22px ;
}

/* Five independent proof cards, matching the homepage presentation. */
.about-modern-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
    gap: 12px ;
    border: 0 ;
    background: transparent ;
    box-shadow: none ;
}
.about-modern-stat {
    min-height: 144px;
    padding: 22px 22px 20px;
    border: 1px solid #dbe6ed;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(18, 55, 82, .045);
}
.about-modern-stat + .about-modern-stat { border-left: 1px solid #dbe6ed; }
.about-modern-stat strong { font-size: clamp(29px, 2.3vw, 36px); }
.about-modern-stat:last-child strong { font-size: clamp(25px, 1.85vw, 30px); letter-spacing: -.045em; }
.about-modern-stat span { font-size: 13px; line-height: 1.35; }

/* Standard section rhythm. */
.about-modern-section {
    padding-top: 62px ;
    padding-bottom: 64px ;
}
.about-modern-section-heading {
    margin-bottom: 26px;
}
.about-modern-section-heading h2,
.about-modern-method-copy h2,
.about-modern-trust h2 {
    color: #153b5c ;
    font-size: 26px ;
    line-height: 1.18 ;
}
.about-modern-section-heading > p,
.about-modern-service p,
.about-modern-method-copy p {
    color: #5d6f7d ;
    font-size: 14.5px ;
    line-height: 1.68 ;
    text-align: left ;
}

/* Services: editorial dividers instead of floating cards. */
.about-modern-service-grid {
    gap: 0;
    border-top: 1px solid #d9e3ea;
    border-bottom: 1px solid #d9e3ea;
}
.about-modern-service {
    padding: 26px 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.about-modern-service + .about-modern-service {
    border-left: 1px solid #d9e3ea;
}
.about-modern-service h3 {
    color: #153b5c;
    font-size: 20px;
}
.about-modern-service-label {
    color: #2874a6;
}

/* Method panel remains distinctive but loses unnecessary framing. */
.about-modern-method-card,
.about-modern-method-card {
    padding: 32px 0 ;
}

/* Trust list as a restrained final proof band. */
.about-modern-trust-grid {
    gap: 0 ;
    border-top: 1px solid #d9e3ea;
    border-bottom: 1px solid #d9e3ea;
}
.about-modern-trust-grid span {
    padding: 16px 18px ;
    border: 0 ;
    border-radius: 0 ;
    background: transparent ;
    color: #173f5e ;
}
.about-modern-trust-grid span + span {
    border-left: 1px solid #d9e3ea ;
}

@media (max-width: 767px) {
    .about-modern-hero {
        padding-top: 40px;
        padding-bottom: 34px;
    }
    .about-modern-hero h1 {
        font-size: 35px;
    }
    .about-modern-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .about-modern-service + .about-modern-service,
    .about-modern-trust-grid span + span {
        border-left: 0;
        border-top: 1px solid #d9e3ea;
    }
}

/* CEI — hero alignment standardisation */
.about-modern-hero { text-align:center; }
.about-modern-hero h1,
.about-modern-hero > p {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.about-modern-hero-actions { justify-content:center; }

/* CEI 2026-09-26 — About page methodology visibility after editorial panel refinement.
 * The later refinement makes the methodology panel background transparent, so
 * restore dark-on-light colours for links and principle cards that were
 * originally authored for the former navy panel. */
.about-modern-method-copy .about-modern-kicker {
    color: #2874a6;
}

.about-modern-method-copy .about-modern-text-links a,
.about-modern-method-copy .about-modern-text-links a:link,
.about-modern-method-copy .about-modern-text-links a:visited {
    color: #2874a6;
}

.about-modern-method-points > div {
    background: #f6f9fb;
    border: 1px solid #d9e3ea;
}

.about-modern-method-points strong {
    color: #153b5c;
}

.about-modern-method-points span {
    color: #5d6f7d;
}

/* ========================================================================== 
   About page — company history timeline (canonical implementation)
   Icons live inside each card for a cleaner editorial treatment.
   ========================================================================== */
.about-timeline {
    position: relative;
    overflow: hidden;
    margin: 0 0 90px;
    padding: 70px 0 82px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
    border-top: 1px solid #edf3f7;
    border-bottom: 1px solid #e4edf3;
}

.about-timeline::before,
.about-timeline::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.about-timeline::before {
    top: 12px;
    right: -28px;
    width: 470px;
    height: 210px;
    opacity: .28;
    background-image: radial-gradient(circle, #9ecbea 1.35px, transparent 1.55px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(ellipse at 58% 38%, #000 0 48%, transparent 76%);
    mask-image: radial-gradient(ellipse at 58% 38%, #000 0 48%, transparent 76%);
}

.about-timeline::after {
    left: -138px;
    bottom: -154px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(143, 190, 220, .15);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(143, 190, 220, .045),
        0 0 0 76px rgba(143, 190, 220, .022);
}

.about-timeline__inner {
    position: relative;
    z-index: 1;
    width: calc(100% - 56px);
    max-width: 1188px;
    margin: 0 auto;
}

.about-timeline__heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.about-timeline__heading .about-modern-kicker {
    position: relative;
    padding-right: 76px;
}

.about-timeline__heading .about-modern-kicker::after {
    content: "";
    position: absolute;
    left: calc(100% + 13px);
    top: 50%;
    width: 54px;
    height: 2px;
    background: #9cccf0;
    transform: translateY(-50%);
}

.about-timeline__heading h2 {
    max-width: 690px;
    margin: 10px 0 0;
    color: var(--about-navy);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.03em;
}

.about-timeline__heading p {
    max-width: 700px;
    margin: 15px 0 0;
    color: #536a7b;
    font-size: 16px;
    line-height: 1.62;
}

.about-timeline__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 222px 58px 222px;
    column-gap: 26px;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-timeline__item {
    position: relative;
    min-width: 0;
}

/* Reveal only the timeline card surfaces, not the timeline shell or its
   heading. This is armed by the About template only when JavaScript and
   motion preferences allow it. Cards retain their layout throughout. */
@media (prefers-reduced-motion: no-preference) {
    html.cei-about-timeline-reveal-ready .about-modern-page .about-timeline__item .about-timeline__card {
        transition: opacity 1500ms cubic-bezier(0.42, 0, 0.58, 1);
    }
    html.cei-about-timeline-reveal-ready .about-modern-page .about-timeline__item:not(.cei-about-timeline-item-visible) .about-timeline__card {
        opacity: 0;
    }
}

.about-timeline__item--1 { grid-column: 1; grid-row: 1; }
.about-timeline__item--2 { grid-column: 2; grid-row: 1; }
.about-timeline__item--3 { grid-column: 3; grid-row: 1; }
.about-timeline__item--4 { grid-column: 4; grid-row: 1; }
.about-timeline__item--5 { grid-column: 1; grid-row: 3; }
.about-timeline__item--6 { grid-column: 2; grid-row: 3; }
.about-timeline__item--7 { grid-column: 3; grid-row: 3; }
.about-timeline__item--8 { grid-column: 4; grid-row: 3; }

.about-timeline__card {
    position: relative;
    height: 222px;
    min-height: 222px;
    padding: 33px 26px 27px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(252,254,255,.985) 100%);
    border: 1px solid rgba(183, 205, 220, .60);
    border-radius: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        0 18px 38px -30px rgba(18, 55, 82, .40),
        0 5px 14px rgba(25, 66, 94, .025);
}

.about-timeline__node {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 22px;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #1d70a7;
    background:
        radial-gradient(circle at 33% 25%, #fff 0 12%, rgba(255,255,255,0) 13%),
        linear-gradient(155deg, #f8fcff 0%, #eaf6fd 48%, #dceff9 100%);
    border: 1.5px solid rgba(255,255,255,.98);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(132, 185, 218, .14),
        0 7px 18px rgba(31, 78, 108, .08),
        inset 0 1px 4px rgba(255,255,255,.95);
}

.about-timeline__node::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(74, 144, 188, .07);
    border-radius: 50%;
}

.about-timeline__node::after {
    content: none;
}

.about-timeline__node svg {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-timeline__card time,
.about-timeline__date {
    display: block;
    max-width: calc(100% - 58px);
    margin-bottom: 20px;
    color: #196bab;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
}

.about-timeline__card time::after,
.about-timeline__date::after {
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    margin-top: 11px;
    background: #8fcaf1;
}

.about-timeline__card h3 {
    margin: 0;
    color: #153b5c;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: -.012em;
}

.about-timeline__card p {
    margin: 11px 0 0;
    color: #566d7e;
    font-size: 14px;
    line-height: 1.6;
}

@media (min-width: 981px) and (max-width: 1120px) {
    .about-timeline__grid {
        column-gap: 18px;
    }

    .about-timeline__card {
        padding-left: 21px;
        padding-right: 21px;
    }

    .about-timeline__node {
        right: 18px;
    }

    .about-timeline__card h3 {
        font-size: 14.6px;
    }
}

@media (max-width: 980px) {
    .about-timeline {
        margin-bottom: 66px;
        padding: 60px 0 66px;
    }

    .about-timeline::before {
        width: 360px;
        height: 170px;
        opacity: .22;
    }

    .about-timeline__inner {
        width: calc(100% - 40px);
    }

    .about-timeline__heading {
        margin-bottom: 34px;
    }

    .about-timeline__heading h2 {
        font-size: 34px;
    }

    .about-timeline__grid {
        display: block;
    }

    .about-timeline__item,
    .about-timeline__item--1,
    .about-timeline__item--2,
    .about-timeline__item--3,
    .about-timeline__item--4,
    .about-timeline__item--5,
    .about-timeline__item--6,
    .about-timeline__item--7,
    .about-timeline__item--8 {
        margin: 0 0 16px;
    }

    .about-timeline__item:last-child {
        margin-bottom: 0;
    }

    .about-timeline__card {
        height: auto;
        min-height: 0;
        padding: 26px 24px 24px;
    }

    .about-timeline__node {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    .about-timeline__node svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 767px) {
    .about-timeline {
        padding: 50px 0 56px;
    }

    .about-timeline__inner {
        width: calc(100% - 32px);
    }

    .about-timeline__heading .about-modern-kicker {
        padding-right: 58px;
    }

    .about-timeline__heading .about-modern-kicker::after {
        left: calc(100% + 10px);
        width: 40px;
    }

    .about-timeline__heading h2 {
        font-size: 26px;
        line-height: 1.2;
    }

    .about-timeline__heading p {
        font-size: 15px;
    }

    .about-timeline__card {
        padding: 24px 20px 22px;
        border-radius: 11px;
    }

    .about-timeline__node {
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
    }

    .about-timeline__node svg {
        width: 19px;
        height: 19px;
    }

    .about-timeline__card time,
    .about-timeline__date {
        max-width: calc(100% - 52px);
        margin-bottom: 16px;
    }

    .about-timeline__card h3 {
        font-size: 16.5px;
    }
}

/* ========================================================================== 
   About page — consolidated narrative
   Removes duplicated origins/team presentation and combines methodology + team.
   ========================================================================== */
.about-modern-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-modern-method-team {
    display: grid;
}

.about-modern-method-team-number {
    line-height: 1;
    text-align: center;
}

.about-modern-method-team-copy strong,
.about-modern-method-team-copy span,
.about-modern-method-team-copy a {
    display: block;
}

.about-modern-method-team-copy strong {
    line-height: 1.3;
}

.about-modern-method-team-copy a,
.about-modern-method-team-copy a:link,
.about-modern-method-team-copy a:visited {
    font-weight: 700;
    text-decoration: none;
}

.about-modern-trust {
    margin-bottom: 66px;
    padding: 24px 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.about-modern-trust h2 {
    max-width: 860px;
    width: 100%;
    font-size: 27px;
}

.about-modern-trust-grid {
    margin-top: 21px;
}

/* Keep the About card grid in step with the shared homepage card breakpoints. */
@media (min-width: 901px) and (max-width: 980px) {
    .about-modern-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .about-modern-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-modern-stats > .cei-home-hero__stat:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .about-modern-stats { grid-template-columns: 1fr; }
    .about-modern-stats > .cei-home-hero__stat:last-child { grid-column: auto; }
    .about-modern-stat + .about-modern-stat { border-top: 1px solid #dbe6ed; }

    .about-modern-trust {
        padding-top: 20px;
    }
}


@media (max-width: 420px) {
    .about-modern-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CEI — About page natural line wrapping
   Prevent balanced/inherited wrapping from leaving avoidable orphan words or
   short phrases on a second line when usable space remains on the first.
   ========================================================================== */
.about-modern-page h1,
.about-modern-page h2,
.about-modern-page h3,
.about-modern-page p,
.about-modern-page .about-modern-stat span,
.about-modern-page .about-modern-eyebrow,
.about-modern-page .about-modern-kicker,
.about-timeline__heading h2,
.about-timeline__heading p,
.about-timeline__card h3,
.about-timeline__card p {
    text-wrap: wrap;
}

.about-modern-stat span,
.about-timeline__card h3,
.about-timeline__card p {
    width: 100%;
    max-width: none;
}

/* ==========================================================================
   CEI — polished Full transparency CTA
   Clear primary/secondary actions with restrained institutional emphasis.
   ========================================================================== */
.about-modern-cta {
    position: relative;
    overflow: hidden;
    padding: 42px 44px;
    background: linear-gradient(135deg, #edf6fb 0%, #f8fbfd 68%, #ffffff 100%);
    border-color: #c8dce9;
    box-shadow: 0 12px 34px rgba(21, 59, 92, .07);
}

.about-modern-cta::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #2f6f9f;
}

.about-modern-cta > div {
    position: relative;
    z-index: 1;
}

.about-modern-cta h2 {
    margin-top: 8px;
    color: var(--about-navy);
    font-weight: 600;
    letter-spacing: -.025em;
}

.about-modern-cta p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.65;
}

.about-modern-cta-actions {
    gap: 10px;
}

.about-modern-cta-actions .about-modern-button {
    padding-left: 21px;
    padding-right: 21px;
    font-size: 14px;
    white-space: nowrap;
}

.about-modern-cta-actions .about-modern-button-primary {
    background: #1b4568;
    border-color: #1b4568;
    box-shadow: 0 4px 12px rgba(21, 59, 92, .13);
}

.about-modern-cta-actions .about-modern-button-secondary {
    border-color: #9fb8ca;
}

@media (hover: hover) and (pointer: fine) {
    .about-modern-cta-actions .about-modern-button-primary:hover,
    .about-modern-cta-actions .about-modern-button-primary:focus {
        background: #24577e;
        border-color: #24577e;
    }

    .about-modern-cta-actions .about-modern-button-secondary:hover,
    .about-modern-cta-actions .about-modern-button-secondary:focus {
        background: #f2f7fa;
        border-color: #6f96b2;
    }
}

@media (max-width: 980px) {
    .about-modern-cta {
        padding: 34px 32px;
    }
}

@media (max-width: 620px) {
    .about-modern-cta {
        padding: 30px 24px;
    }
}

/* Final CTA consistency: exact About CTA actions */
.about-modern-hero-actions .about-modern-button,
.about-modern-cta-actions .about-modern-button {
    width: 225px;
    min-width: 225px;
    min-height: 42px;
    box-sizing: border-box;
}
.about-modern-hero-actions .about-modern-button-secondary,
.about-modern-cta-actions .about-modern-button-secondary,
.about-modern-hero-actions .about-modern-button-secondary:link,
.about-modern-cta-actions .about-modern-button-secondary:link,
.about-modern-hero-actions .about-modern-button-secondary:visited,
.about-modern-cta-actions .about-modern-button-secondary:visited {
    background: #fff;
    color: #1b4568;
    border: 1px solid #9fb8ca;
    box-shadow: none;
}
.about-modern-button span[aria-hidden="true"] { display: none; }
@media (max-width: 620px) {
    .about-modern-hero-actions .about-modern-button,
    .about-modern-cta-actions .about-modern-button { width: 100%; min-width: 0; }
}

/* ========================================================================== 
   About page — methodology section polish
   2026-09-30: refined contained editorial panel with clearer hierarchy.
   ========================================================================== */

.about-modern-method-combined .about-modern-method-card {
    background: linear-gradient(135deg, #f8fbfd 0%, #f3f7fa 100%);
}

.about-modern-method-combined .about-modern-method-copy {
    padding: 4px 0 2px;
}

.about-modern-method-combined .about-modern-method-copy h2 {
    margin-top: 14px;
    margin-bottom: 20px;
}

.about-modern-method-combined .about-modern-method-copy p {
    margin-bottom: 17px;
    color: #526a7d;
}

.about-modern-method-combined .about-modern-text-links a,
.about-modern-method-combined .about-modern-text-links a:link,
.about-modern-method-combined .about-modern-text-links a:visited {
    position: relative;
    line-height: 1.35;
    text-decoration: none;
}

.about-modern-method-combined .about-modern-text-links a span {
    position: absolute;
    right: 2px;
}

.about-modern-method-side {
    grid-template-rows: 1fr auto;
}

.about-modern-method-team {
    box-shadow: none;
}

.about-modern-method-team-number {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #237f76;
    background: #fff;
    border: 1px solid #cfe5e1;
    border-radius: 50%;
    font-weight: 700;
}

.about-modern-method-team-copy strong {
    color: #123e68;
}

.about-modern-method-team-copy span {
    color: #587082;
}

.about-modern-method-team-copy a,
.about-modern-method-team-copy a:link,
.about-modern-method-team-copy a:visited {
    color: #216aa5;
}

@media (hover: hover) and (pointer: fine) {

    .about-modern-method-combined .about-modern-text-links a:hover span,
    .about-modern-method-combined .about-modern-text-links a:focus span {
        transform: translateX(3px);
    }
}

@media (max-width: 980px) {
    .about-modern-method-combined .about-modern-method-card {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 38px 34px;
    }

    .about-modern-method-combined .about-modern-method-copy h2,
    .about-modern-method-combined .about-modern-method-copy p,
    .about-modern-method-combined .about-modern-text-links {
        max-width: none;
    }
}

@media (max-width: 600px) {

    .about-modern-method-team-number {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
}

/* ========================================================================== 
   About page — methodology section refinement pass 2
   Stronger container, spacing and numbered methodology layout.
   ========================================================================== */
.about-modern-method-combined {
    padding-top: 76px;
    padding-bottom: 82px;
}

.about-modern-method-combined .about-modern-method-card {
    position: relative;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 64px;
    align-items: stretch;
    padding: 52px 54px;
    background: #f7fafc;
    border: 1px solid #d9e4ec;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(18, 62, 104, .055);
}

.about-modern-method-combined .about-modern-method-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 8px;
}

.about-modern-method-combined .about-modern-method-copy .about-modern-kicker {
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .13em;
}

.about-modern-method-combined .about-modern-method-copy h2 {
    max-width: 640px;
    margin: 0 0 22px;
    font-size: clamp(34px, 3.05vw, 48px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.about-modern-method-combined .about-modern-method-copy p {
    max-width: 650px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.72;
}

.about-modern-method-combined .about-modern-method-copy p + p {
    margin-top: 2px;
}

.about-modern-method-combined .about-modern-text-links {
    max-width: 650px;
    width: 100%;
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid #d7e2ea;
}

.about-modern-method-combined .about-modern-text-links a,
.about-modern-method-combined .about-modern-text-links a:link,
.about-modern-method-combined .about-modern-text-links a:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0 4px;
    border-bottom: 1px solid #d7e2ea;
    color: #216aa5;
    font-size: 13px;
    font-weight: 700;
    transition: color .18s ease, padding .18s ease, background .18s ease;
}

.about-modern-method-combined .about-modern-text-links a span {
    flex: 0 0 auto;
    margin-left: 14px;
    font-size: 16px;
    transition: transform .18s ease;
}

.about-modern-method-side {
    position: relative;
    display: grid;
    align-content: start;
    gap: 22px;
    min-width: 0;
    padding-left: 36px;
    border-left: 1px solid #d7e2ea;
}

.about-modern-method-combined .about-modern-method-points {
    counter-reset: about-method-step;
    display: grid;
    gap: 12px;
}

.about-modern-method-combined .about-modern-method-points > div {
    counter-increment: about-method-step;
    position: relative;
    min-height: 104px;
    padding: 20px 20px 20px 72px;
    background: #fff;
    border: 1px solid #d8e4ec;
    border-radius: 10px;
    box-shadow: 0 4px 13px rgba(18, 62, 104, .035);
}

.about-modern-method-combined .about-modern-method-points > div::before {
    content: counter(about-method-step, decimal-leading-zero);
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #216aa5;
    background: #f3f8fc;
    border: 1px solid #cfe0ec;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .03em;
}

.about-modern-method-combined .about-modern-method-points strong {
    color: #123e68;
    font-size: 14px;
    line-height: 1.35;
}

.about-modern-method-combined .about-modern-method-points span {
    margin-top: 7px;
    color: #5b7183;
    font-size: 13px;
    line-height: 1.58;
}

.about-modern-method-team {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 24px 22px;
    background: #eef8f6;
    border: 1px solid #d0e6e2;
    border-radius: 10px;
}

.about-modern-method-team-number {
    width: 58px;
    height: 58px;
    font-size: 26px;
}

.about-modern-method-team-copy strong {
    font-size: 14px;
}

.about-modern-method-team-copy span {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
}

.about-modern-method-team-copy a,
.about-modern-method-team-copy a:link,
.about-modern-method-team-copy a:visited {
    margin-top: 10px;
    font-size: 13px;
}

@media (hover: hover) and (pointer: fine) {
    .about-modern-method-combined .about-modern-text-links a:hover,
    .about-modern-method-combined .about-modern-text-links a:focus {
        padding-left: 10px;
        padding-right: 10px;
        color: #123e68;
        background: #f1f6f9;
    }
}

@media (max-width: 1080px) {
    .about-modern-method-combined .about-modern-method-card {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
        gap: 42px;
        padding: 44px 40px;
    }

    .about-modern-method-side {
        padding-left: 28px;
    }
}

@media (max-width: 900px) {
    .about-modern-method-combined .about-modern-method-card {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 42px 38px;
    }

    .about-modern-method-side {
        padding-top: 34px;
        padding-left: 0;
        border-top: 1px solid #d7e2ea;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .about-modern-method-combined {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    .about-modern-method-combined .about-modern-method-card {
        gap: 30px;
        padding: 30px 22px;
        border-radius: 12px;
    }

    .about-modern-method-combined .about-modern-method-copy .about-modern-kicker {
        margin-bottom: 16px;
    }

    .about-modern-method-combined .about-modern-method-copy h2 {
        margin-bottom: 18px;
        font-size: 32px;
    }

    .about-modern-method-combined .about-modern-method-points > div {
        min-height: 0;
        padding: 18px 16px 18px 62px;
    }

    .about-modern-method-combined .about-modern-method-points > div::before {
        top: 18px;
        left: 16px;
        width: 32px;
        height: 32px;
    }

    .about-modern-method-team {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 16px;
    }
}

/* ==========================================================================
   CEI 2026-10-01 — About methodology numbers non-overlapping grid
   Put the counter in its own grid column rather than absolutely positioning
   it over the card copy. This remains safe at narrow/mobile widths.
   ========================================================================== */
html body .about-modern-method-combined .about-modern-method-points > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 18px 20px;
}

html body .about-modern-method-combined .about-modern-method-points > div::before {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 32px;
    height: 32px;
    margin: 0;
}

html body .about-modern-method-combined .about-modern-method-points > div > strong {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

html body .about-modern-method-combined .about-modern-method-points > div > span {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

@media (max-width: 767px) {
    html body .about-modern-method-combined .about-modern-method-points > div {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 12px;
        padding: 17px 16px;
    }

    html body .about-modern-method-combined .about-modern-method-points > div::before {
        width: 28px;
        height: 28px;
    }
}

/* ========================================================================== 
   About page — narrative order and wrapping refinement
   Keep headings balanced and body copy readable without hard-coded line breaks.
   ========================================================================== */
.about-modern-hero h1,
.about-modern-section-heading h2,
.about-modern-method-copy h2,
.about-modern-trust h2,
.about-timeline__heading h2,
.about-timeline__card h3,
.about-modern-cta h2 {
    text-wrap: balance;
}

.about-modern-hero > p,
.about-modern-section-heading > p,
.about-modern-service p,
.about-modern-method-copy p,
.about-modern-method-points span,
.about-modern-method-team-copy span,
.about-timeline__heading p,
.about-timeline__card p,
.about-modern-cta p {
    text-wrap: pretty;
}

/* ========================================================================== 
   CEI 2026-10-01 — About page site-typography and presentation polish
   Normalise the About page to the established site type scale, refine the
   service/method sections, strengthen timeline icons and equalise CTA actions.
   ========================================================================== */

/* 1. Site-wide typography scale: keep About visually consistent with the
   refined CEI page system rather than letting local display rules run large. */
.about-modern-page .about-modern-eyebrow,
.about-modern-page .about-modern-kicker {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .12em;
}

.about-modern-page .about-modern-hero h1 {
    max-width: 820px;
}

.about-modern-page .about-modern-hero > p {
    max-width: 760px;
    color: #526a7f;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
}

.about-modern-page .about-modern-section-heading h2,
.about-modern-page .about-modern-method-copy h2,
.about-modern-page .about-modern-trust h2,
.about-modern-page .about-timeline__heading h2,
.about-modern-page .about-modern-cta h2 {
    color: #153b5c;
    font-size: 26px;
    line-height: 1.18;
}

.about-modern-page .about-modern-section-heading > p,
.about-modern-page .about-modern-method-copy p,
.about-modern-page .about-modern-trust > p,
.about-modern-page .about-timeline__heading p,
.about-modern-page .about-modern-cta p {
    color: #5d6f7d;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.68;
}

/* 2. What we do: clearer editorial hierarchy with balanced columns. */
.about-modern-page .about-modern-what {
    padding-top: 66px;
    padding-bottom: 72px;
}

.about-modern-page .about-modern-what .about-modern-section-heading-centered {
    max-width: 760px;
    margin-bottom: 32px;
}

.about-modern-page .about-modern-service-grid {
    align-items: stretch;
    border-color: #d7e2ea;
}

.about-modern-page .about-modern-service {
    min-height: 308px;
    padding: 29px 30px 27px;
}

.about-modern-page .about-modern-service + .about-modern-service {
    border-left-color: #d7e2ea;
}

.about-modern-page .about-modern-service-label {
    color: #2874a6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
}

.about-modern-page .about-modern-service h3 {
    margin: 11px 0 12px;
    color: #153b5c;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.about-modern-page .about-modern-service p {
    margin-bottom: 20px;
    color: #5d6f7d;
    font-size: 14.5px;
    line-height: 1.66;
}

.about-modern-page .about-modern-service-links,
.about-modern-page .about-modern-service-action {
    margin-top: auto;
}

.about-modern-page .about-modern-service-links a,
.about-modern-page .about-modern-service-action,
.about-modern-page .about-modern-service-action:link,
.about-modern-page .about-modern-service-action:visited {
    color: #216aa5;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 3. Methodology: retain the useful two-column concept, but bring its scale
   and density into line with the rest of the site. */
.about-modern-page .about-modern-method-combined {
    padding-bottom: 40px;
}

.about-modern-page .about-modern-method-combined .about-modern-method-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
    gap: 48px;
    padding: 42px 44px;
    background: #f8fafc;
    border: 1px solid #d9e4ec;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(18, 62, 104, .045);
}

.about-modern-page .about-modern-method-combined .about-modern-method-copy {
    padding-right: 0;
}

.about-modern-page .about-modern-method-combined .about-modern-method-copy .about-modern-kicker {
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: .12em;
}

.about-modern-page .about-modern-method-combined .about-modern-method-copy h2 {
    max-width: 580px;
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.18;
}

.about-modern-page .about-modern-method-combined .about-modern-method-copy p {
    max-width: 620px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.68;
}

.about-modern-page .about-modern-method-combined .about-modern-text-links {
    max-width: 620px;
    margin-top: 22px;
}

.about-modern-page .about-modern-method-combined .about-modern-text-links a,
.about-modern-page .about-modern-method-combined .about-modern-text-links a:link,
.about-modern-page .about-modern-method-combined .about-modern-text-links a:visited {
    min-height: 44px;
    font-size: 12.75px;
    font-weight: 600;
}

.about-modern-page .about-modern-method-side {
    gap: 16px;
    padding-left: 32px;
}

html body .about-modern-page .about-modern-method-combined .about-modern-method-points > div {
    min-height: 0;
    padding: 17px 18px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(18, 62, 104, .025);
}

.about-modern-page .about-modern-method-combined .about-modern-method-points strong {
    font-size: 13.5px;
    font-weight: 600;
}

.about-modern-page .about-modern-method-combined .about-modern-method-points span {
    font-size: 15px;
    line-height: 1.55;
}

.about-modern-page .about-modern-method-team {
    padding: 20px 20px;
    border-radius: 8px;
}

.about-modern-page .about-modern-method-team-number {
    width: 52px;
    height: 52px;
    font-size: 27px;
}

/* 4. Timeline icons: stronger strokes and slightly darker ink for clearer
   reproduction at normal and high-density display sizes. */
.about-modern-page .about-timeline__node {
    color: #17699f;
}

.about-modern-page .about-timeline__node svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.35;
}

/* 5. Full-transparency CTA: both actions use exactly the same box and type
   metrics. Visual hierarchy comes from fill/border, not different dimensions. */
.about-modern-page .about-modern-cta-actions .about-modern-button,
.about-modern-page .about-modern-cta-actions .about-modern-button:link,
.about-modern-page .about-modern-cta-actions .about-modern-button:visited {
    flex: 0 0 225px;
    width: 225px;
    min-width: 225px;
    max-width: 225px;
    height: 42px;
    min-height: 42px;
    padding: 0 20px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
}

@media (max-width: 900px) {
    .about-modern-page .about-modern-method-combined .about-modern-method-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 34px;
    }

    .about-modern-page .about-modern-method-side {
        padding-top: 28px;
        padding-left: 0;
        border-top: 1px solid #d7e2ea;
        border-left: 0;
    }
}

@media (max-width: 767px) {

    .about-modern-page .about-modern-section-heading h2,
    .about-modern-page .about-modern-method-copy h2,
    .about-modern-page .about-modern-trust h2,
    .about-modern-page .about-timeline__heading h2,
    .about-modern-page .about-modern-cta h2,
    .about-modern-page .about-modern-method-combined .about-modern-method-copy h2 {
        font-size: 28px;
        line-height: 1.22;
    }

    .about-modern-page .about-modern-service {
        min-height: 0;
        padding: 24px 22px;
    }

    .about-modern-page .about-modern-method-combined .about-modern-method-card {
        padding: 28px 22px;
    }

    .about-modern-page .about-modern-cta-actions .about-modern-button,
    .about-modern-page .about-modern-cta-actions .about-modern-button:link,
    .about-modern-page .about-modern-cta-actions .about-modern-button:visited {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/* ========================================================================== 
   About page — final mobile layout owner
   Consolidates older responsive refinements into one authoritative phone pass.
   Desktop and tablet presentation remain unchanged.
   ========================================================================== */
@media (max-width: 600px) {
    html body .about-modern-page {
        overflow-x: clip;
    }

    html body .about-modern-page .about-modern-hero,
    html body .about-modern-page .about-modern-stats,
    html body .about-modern-page .about-modern-section,
    html body .about-modern-page .about-modern-trust,
    html body .about-modern-page .about-modern-cta,
    html body .about-modern-page .about-timeline__inner {
        width: calc(100% - 32px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    html body .about-modern-page .about-modern-hero {
        padding-top: 42px;
        padding-bottom: 34px;
        text-align: left;
    }

    html body .about-modern-page .about-modern-hero h1 {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        font-size: 34px;
        line-height: 1.13;
        letter-spacing: -.025em;
    }

    html body .about-modern-page .about-modern-hero > p {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        font-size: 17px;
        line-height: 1.55;
    }

    html body .about-modern-page .about-modern-hero-actions {
        width: 100%;
        grid-template-columns: 1fr;
        row-gap: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    html body .about-modern-page .about-modern-stats {
        grid-template-columns: 1fr;
        margin-bottom: 52px;
    }

    html body .about-modern-page .about-modern-stat,
    html body .about-modern-page .about-modern-stat:nth-child(2),
    html body .about-modern-page .about-modern-stat:nth-child(-n+2),
    html body .about-modern-page .about-modern-stat:last-child {
        border-right: 0;
        border: 1px solid #dbe6ed;
    }

    html body .about-modern-page .about-modern-stat:last-child {
        border-bottom: 1px solid #dbe6ed;
    }

    html body .about-modern-page .about-modern-section {
        padding-bottom: 54px;
    }

    html body .about-modern-page .about-modern-section-heading,
    html body .about-modern-page .about-modern-section-heading-centered {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 22px;
        text-align: left;
    }

    html body .about-modern-page .about-modern-section-heading h2,
    html body .about-modern-page .about-modern-method-copy h2,
    html body .about-modern-page .about-modern-trust h2,
    html body .about-modern-page .about-timeline__heading h2,
    html body .about-modern-page .about-modern-cta h2,
    html body .about-modern-page .about-modern-method-combined .about-modern-method-copy h2 {
        font-size: 27px;
        line-height: 1.22;
    }

    html body .about-modern-page .about-modern-service-grid,
    html body .about-modern-page .about-modern-method-card,
    html body .about-modern-page .about-modern-method-combined .about-modern-method-card {
        grid-template-columns: 1fr;
    }

    html body .about-modern-page .about-modern-service {
        min-height: 0;
        padding: 23px 20px;
    }

    html body .about-modern-page .about-modern-method-combined {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    html body .about-modern-page .about-modern-method-combined .about-modern-method-card {
        gap: 28px;
        padding: 26px 20px;
        border-radius: 10px;
    }

    html body .about-modern-page .about-modern-method-side {
        min-width: 0;
        padding-top: 24px;
        padding-left: 0;
        border-top: 1px solid #d7e2ea;
        border-left: 0;
    }

    html body .about-modern-page .about-modern-method-combined .about-modern-method-points > div {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 11px;
        padding: 16px 14px;
    }

    html body .about-modern-page .about-modern-method-combined .about-modern-method-points > div::before {
        width: 27px;
        height: 27px;
    }

    html body .about-modern-page .about-modern-method-team {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 13px;
        padding: 17px 14px;
    }

    html body .about-modern-page .about-modern-method-team-number {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    html body .about-modern-page .about-modern-trust {
        padding: 26px 20px;
        text-align: left;
    }

    html body .about-modern-page .about-timeline {
        padding-top: 48px;
        padding-bottom: 54px;
    }

    html body .about-modern-page .about-timeline__heading {
        margin-bottom: 28px;
        text-align: left;
    }

    html body .about-modern-page .about-timeline__heading .about-modern-kicker {
        padding-right: 0;
    }

    html body .about-modern-page .about-timeline__heading .about-modern-kicker::after {
        display: none;
    }

    html body .about-modern-page .about-timeline__grid {
        display: block;
    }

    html body .about-modern-page .about-timeline__item {
        margin: 0 0 14px;
    }

    html body .about-modern-page .about-timeline__item:last-child {
        margin-bottom: 0;
    }

    html body .about-modern-page .about-timeline__card {
        height: auto;
        min-height: 0;
        padding: 22px 18px 20px;
    }

    html body .about-modern-page .about-modern-cta {
        margin-bottom: 54px;
        padding: 26px 20px;
        gap: 20px;
    }

    html body .about-modern-page .about-modern-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    html body .about-modern-page .about-modern-cta-actions .about-modern-button,
    html body .about-modern-page .about-modern-cta-actions .about-modern-button:link,
    html body .about-modern-page .about-modern-cta-actions .about-modern-button:visited {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/* ========================================================================== 
   About page — methodology section top-edge cleanup
   Removes the redundant shaded spacer above the contained methodology panel.
   ========================================================================== */
.about-modern-page .about-modern-method-combined {
    padding-top: 0;
    background: transparent;
    border-top: 0;
}

/* CEI 2026-10-01 — About timeline date emphasis */
@media (max-width: 600px) {
    .about-timeline__card time,
    .about-timeline__date {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.1;
    }
}

/* CEI 2026-10-01 — remove stray divider between methodology and audience sections */
.about-modern-page .about-modern-method-combined {
    border-bottom: 0;
}

.about-modern-page .about-modern-trust {
    border-top: 0;
}

/* ========================================================================== 
   CEI 2026-10-02 — About typography alignment
   Match the established informational-page typography used by Why Consensus
   Economics without changing About page layout, spacing or component geometry.
   ========================================================================== */
.about-modern-page .about-modern-hero h1 {
    font-family: var(--cei-font-editorial, Georgia, "Times New Roman", serif);
    font-size: clamp(40px, 4.5vw, 54px);
    font-weight: 400;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.about-modern-page .about-modern-section-heading h2,
.about-modern-page .about-modern-method-copy h2,
.about-modern-page .about-modern-trust h2,
.about-modern-page .about-timeline__heading h2,
.about-modern-page .about-modern-cta h2,
.about-modern-page .about-modern-method-combined .about-modern-method-copy h2 {
    font-family: var(--cei-font-editorial, Georgia, "Times New Roman", serif);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.025em;
}

@media (max-width: 767px) {
    .about-modern-page .about-modern-hero h1 {
        font-size: 35px;
        font-weight: 400;
        line-height: 1.08;
        letter-spacing: -.025em;
    }
}


/* CEI 2026 — Our Methodology editorial consistency pass.
   Page-scoped refinements only; original hero treatment and content unchanged. */

.about-modern-page .about-modern-section-heading h2,
.about-modern-page .about-timeline__heading h2 {font-weight: 550; letter-spacing: -.027em; line-height: 1.17;}
.about-modern-page .about-modern-section-heading > p,
.about-modern-page .about-timeline__heading p {line-height: 1.62; max-width: 760px;}
.about-modern-page .about-timeline__card time,
.about-modern-page .about-timeline__date {font-weight: 650; letter-spacing: -.012em;}
.about-modern-page .about-timeline__card h3 {font-weight: 600; line-height: 1.28; margin-top: 10px; margin-bottom: 10px;}
.about-modern-page .about-timeline__card p {line-height: 1.6;}
.about-modern-page .about-modern-method-card {line-height: 1.6;}
.about-modern-page .about-modern-button:focus-visible {outline: 3px solid #2876b1; outline-offset: 3px;}
@media (max-width: 767px) {
 .about-modern-page .about-modern-section-heading h2,
 .about-modern-page .about-timeline__heading h2 {font-size: clamp(24px, 6vw, 27px);}
 .about-modern-page .about-modern-section-heading > p,
 .about-modern-page .about-timeline__heading p,
 .about-modern-page .about-timeline__card p {font-size: 16px; line-height: 1.58;}
 .about-modern-page .about-timeline__card h3 {font-size: 20px;}
}

/* About: widen the page's internal rail and keep it centred within its wrapper. */
@media (min-width: 768px) {
    .about-modern-page :is(.about-modern-hero, .about-modern-stats, .about-modern-section, .about-modern-trust, .about-modern-cta) {
        box-sizing: border-box;
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
    }
    .about-modern-page .about-modern-hero {
        max-width: 1060px;
    }
}