/* ============================================================
   About the Firm page layout
   Loaded after home.css. This file intentionally does not modify
   the shared stylesheet.
   ============================================================ */

.about-page.about-oaken {
    --about-page-gold: #C4963C;
    --about-page-navy: #111827;
    --about-page-blue: #1B2A4A;
    --about-page-copy: #3E536A;
    --about-page-muted: #5B6E83;
    --about-page-rule: rgba(196, 150, 60, 0.74);
    --about-page-border: rgba(27, 42, 74, 0.14);
    --about-page-max: 1264px;
    --about-page-gutter: clamp(24px, 6.4vw, 112px);
    --about-page-top-pad: clamp(94px, 8.2vw, 132px);
    --about-page-bottom-pad: clamp(84px, 8.6vw, 144px);

    padding:
            var(--about-page-top-pad)
            var(--about-page-gutter)
            var(--about-page-bottom-pad);
    color: #111827;
}

/* The standalone About the Firm page reuses the .about-oaken class. After
   the homepage swap moved .about-oaken to a navy treatment, restore the
   original light + image background for the standalone page only. */
.about-page.about-oaken::before {
    background:
            linear-gradient(
                    90deg,
                    rgba(220, 230, 243, 0.28) 0%,
                    rgba(255, 255, 255, 0) 100%
            ),
            linear-gradient(
                    rgba(244, 248, 251, 0.85),
                    rgba(244, 248, 251, 0.85)
            ),
            url("../images/background_images/sell_section_backround.webp") -14% 58% / cover no-repeat
            #F4F8FB;
}

.about-page__inner {
    position: relative;
    z-index: 1;
    width: min(100%, var(--about-page-max));
    margin: 0 auto;
}

.about-page__top-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(380px, 0.86fr);
    column-gap: clamp(56px, 7vw, 116px);
    align-items: start;
}

.about-page__intro-column {
    min-width: 0;
}

.about-page__header {
    display: grid;
    gap: clamp(16px, 1.4vw, 22px);
    margin-bottom: clamp(56px, 4.9vw, 74px);
}

.about-page__eyebrow {
    display: grid;
    gap: 14px;
    margin: 0;
    color: #35526B;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.875rem, 0.98vw, 1.05rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-page__eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--about-page-gold);
}

.about-page__heading {
    display: grid;
    gap: 0;
    margin: 0;
    color: var(--about-page-navy);
    font-family: "Sitka Heading Bold", Georgia, serif;
    font-size: clamp(4.2rem, 5.45vw, 5.75rem);
    font-weight: 700;
    line-height: 0.93;
    letter-spacing: -0.018em;
}

.about-page__opening {
    display: grid;
    gap: 22px;
    margin-bottom: clamp(44px, 4.1vw, 64px);
}

.about-page__lead {
    margin: 0;
    color: #223B59;
    font-family: "Sitka Heading Bold", Georgia, serif;
    font-size: clamp(1.65rem, 1.86vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.about-page__copy {
    margin: 0;
    color: var(--about-page-copy);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1rem, 1.04vw, 1.0875rem);
    font-weight: 400;
    line-height: 1.72;
}

.about-page__copy strong {
    color: #23364E;
    font-weight: 700;
}

.about-page__stack {
    display: grid;
    gap: clamp(36px, 3.15vw, 48px);
}

.about-page__text-block {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.about-page__block-title {
    margin: 0;
    color: #17263A;
    font-family: "Sitka Heading Bold", Georgia, serif;
    font-size: clamp(1.35rem, 1.45vw, 1.64rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.012em;
}

.about-page__text-block--feature .about-page__block-title,
.about-page__text-block--lower .about-page__block-title {
    font-size: clamp(1.46rem, 1.55vw, 1.82rem);
}

.about-page__media-column {
    position: relative;
    min-width: 0;
    padding-top: clamp(86px, 6.8vw, 116px);
}

.about-page__media-column .about-oaken__media-stack {
    width: 100%;
}


.about-page__rule {
    height: 2px;
    margin: clamp(66px, 6.2vw, 104px) 0 clamp(48px, 4.7vw, 76px);
    background: var(--about-page-rule);
}

.about-page__middle-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(420px, 1.08fr);
    gap: clamp(44px, 5.2vw, 78px);
    align-items: center;
}

.about-page__support-media {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(27, 42, 74, 0.10);
    box-shadow: 0 18px 34px rgba(27, 42, 74, 0.14);
}

.about-page__support-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 24, 39, 0) 52%, rgba(9, 24, 39, 0.10) 100%);
}

.about-page__support-image {
    display: block;
    width: 100%;
    aspect-ratio: 1.52;
    object-fit: cover;
    object-position: center;
}

.about-page__lower-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 3.9vw, 58px);
    margin-top: clamp(44px, 4.9vw, 72px);
    padding-top: clamp(34px, 3.1vw, 48px);
    border-top: 2px solid var(--about-page-rule);
}

.about-page__text-block--lower {
    position: relative;
}

.about-page__text-block--lower + .about-page__text-block--lower {
    padding-left: clamp(28px, 3.2vw, 48px);
    border-left: 2px solid rgba(196, 150, 60, 0.58);
}

.about-page__cta-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) auto minmax(320px, 0.6fr);
    align-items: center;
    gap: clamp(22px, 2.6vw, 36px);
    margin-top: clamp(58px, 5.9vw, 86px);
    padding: clamp(22px, 2.35vw, 34px) clamp(28px, 3.9vw, 56px);
    color: #F7FAFC;
    background:
            linear-gradient(90deg, rgba(9, 24, 39, 0.985), rgba(23, 38, 59, 0.965)),
            url("../images/background_images/sell_section_backround.webp") center 58% / cover no-repeat;
    border-top: 4px solid var(--about-page-gold);
    box-shadow: 0 14px 32px rgba(17, 24, 39, 0.16);
}

.about-page__cta-panel > *:not(.about-page__cta-leaf) {
    position: relative;
    z-index: 1;
}

.about-page__cta-headline {
    display: grid;
    gap: 0.02em;
    margin: 0;
    color: #FFFFFF;
    font-family: "Sitka Heading Bold", Georgia, serif;
    font-size: clamp(1.62rem, 1.92vw, 2.26rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.012em;
}

.about-page__cta-headline span {
    display: block;
}

.about-page__cta-divider {
    display: block;
    width: 2px;
    height: clamp(76px, 5.8vw, 104px);
    background: rgba(196, 150, 60, 0.46);
}

.about-page__cta-action {
    --about-page-cta-button-width: 196px;
    display: grid;
    width: min(100%, var(--about-page-cta-button-width));
    gap: clamp(10px, 0.95vw, 14px);
    justify-items: start;
    align-content: center;
}

.about-page__cta-action p {
    width: min(100%, var(--about-page-cta-button-width));
    max-width: var(--about-page-cta-button-width);
    margin: 0;
    color: rgba(247, 250, 252, 0.62);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.62rem, 0.61vw, 0.72rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0;
}

.about-page__cta,
.about-page__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 196px;
    min-height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 10px 22px;
    color: #FFFFFF;
    background-color: var(--about-page-gold);
    border-radius: 3px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.015em;
    text-decoration: none;
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 clamp(4px, 0.277778vw, 10.6667px)
            clamp(16px, 1.111111vw, 42.6667px)
            clamp(-5.3333px, -0.138889vw, -2px)
            rgba(22, 22, 22, 0.10);
    transition:
            background-color 160ms ease,
            color 160ms ease,
            box-shadow 160ms ease;
}

.about-page__cta:hover,
.about-page__cta:focus-visible {
    background-color: #B3832F;
    color: #FFFFFF;
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 clamp(6px, 0.416667vw, 16px)
            clamp(18px, 1.25vw, 48px)
            clamp(-5.3333px, -0.138889vw, -2px)
            rgba(22, 22, 22, 0.12);
}

.about-page__cta:active {
    background-color: #A8792C;
    color: #FFFFFF;
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.18),
            0 clamp(2px, 0.138889vw, 5.3333px)
            clamp(8px, 0.555556vw, 21.3333px)
            clamp(-5.3333px, -0.138889vw, -2px)
            rgba(22, 22, 22, 0.10);
}

.about-page__cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: clamp(3px, 0.208333vw, 6px);
}

.about-page__cta-leaf {
    position: absolute;
    z-index: 0;
    top: auto;
    right: clamp(22px, 2.8vw, 46px);
    bottom: 0;
    width: auto;
    height: 120%;
    color: rgba(245, 247, 250, 0.024);
    transform: none;
    transform-origin: bottom right;
    pointer-events: none;
}

@media (max-width: 74em) {
    .about-page__top-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
        column-gap: clamp(40px, 5vw, 72px);
    }

    .about-page__heading {
        font-size: clamp(3.65rem, 5.4vw, 4.6rem);
    }

    .about-page__media-column {
        padding-top: clamp(78px, 6vw, 100px);
    }

}

@media (max-width: 56.1875em) {
    .about-page.about-oaken {
        padding:
                clamp(92px, 14vw, 124px)
                clamp(22px, 5.8vw, 44px)
                clamp(72px, 10vw, 100px);
    }

    .about-page__top-grid,
    .about-page__middle-grid,
    .about-page__lower-grid,
    .about-page__cta-panel {
        grid-template-columns: 1fr;
    }

    .about-page__header {
        margin-bottom: clamp(36px, 7vw, 54px);
    }

    .about-page__heading {
        font-size: clamp(3.05rem, 10vw, 4.5rem);
    }

    .about-page__media-column {
        order: 2;
        padding-top: clamp(36px, 8vw, 60px);
    }


    .about-page__rule {
        margin: clamp(54px, 9vw, 72px) 0 clamp(38px, 8vw, 54px);
    }

    .about-page__support-image {
        aspect-ratio: 1.58;
    }

    .about-page__lower-grid {
        gap: 30px;
    }

    .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: 30px;
        padding-left: 0;
        border-top: 2px solid rgba(196, 150, 60, 0.58);
        border-left: 0;
    }

    .about-page__cta-panel {
        justify-items: start;
        gap: 20px;
        padding: clamp(28px, 6.5vw, 38px) clamp(24px, 6vw, 38px);
    }

    .about-page__cta-divider {
        width: 52px;
        height: 2px;
    }

    .about-page__cta-leaf {
        top: auto;
        right: -28px;
        bottom: 0;
        width: 118px;
        height: auto;
        color: rgba(245, 247, 250, 0.024);
        transform: none;
    }
}

@media (max-width: 30em) {



    .about-page__support-image {
        aspect-ratio: 1.35;
    }

    .about-page__cta,
    .about-page__cta:visited {
        width: 100%;
        box-sizing: border-box;
    }
}

/* About page main portrait image override */
.about-page .about-oaken__media::before {
    background:
            linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.12) var(--about-media-overlay-step-1),
                    rgba(0, 0, 0, 0.58) var(--about-media-overlay-step-2),
                    rgba(0, 0, 0, 0.58) var(--about-media-overlay-step-3),
                    rgba(0, 0, 0, 0.24) var(--about-media-overlay-step-4),
                    rgba(0, 0, 0, 0) 100%
            ),
            url("../images/background_images/ian_vertical.jpg") center 24% / cover no-repeat;
}

/* Match the existing mobile override from home.css */
@media (max-width: 56.1875em) {
    .about-page .about-oaken__media::before {
        background: url("../images/background_images/ian_vertical.jpg") center 24% / cover no-repeat !important;
    }
}

/* Match the existing tablet override from home.css */
@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page .about-oaken__media::before {
        background: url("../images/background_images/ian_vertical.jpg") center 31% / cover no-repeat !important;
    }
}

/* ============================================================
   About page desktop proportional scaling
   Matches home.css 1440px reference scaling from 900px through 3840px.
   Relies on --about-desktop-scale set in the page head script.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken {
        --about-page-scale: var(--about-desktop-scale, 1);
        --about-page-max: calc(1264px * var(--about-page-scale));
        --about-page-gutter: calc(92.16px * var(--about-page-scale));
        --about-page-top-pad: calc(118.08px * var(--about-page-scale));
        --about-page-bottom-pad: calc(123.84px * var(--about-page-scale));

        padding:
                var(--about-page-top-pad)
                var(--about-page-gutter)
                var(--about-page-bottom-pad);
    }

    .about-page__top-grid {
        grid-template-columns: minmax(0, 0.94fr) minmax(calc(380px * var(--about-page-scale)), 0.86fr);
        column-gap: calc(100.8px * var(--about-page-scale));
    }

    .about-page__header {
        gap: calc(20.16px * var(--about-page-scale));
        margin-bottom: calc(70.56px * var(--about-page-scale));
    }

    .about-page__eyebrow {
        gap: calc(14px * var(--about-page-scale));
        font-size: calc(0.882rem * var(--about-page-scale));
    }

    .about-page__eyebrow::before {
        width: calc(32px * var(--about-page-scale));
        height: calc(2px * var(--about-page-scale));
    }

    .about-page__heading {
        font-size: calc(4.905rem * var(--about-page-scale));
    }

    .about-page__opening {
        gap: calc(22px * var(--about-page-scale));
        margin-bottom: calc(59.04px * var(--about-page-scale));
    }

    .about-page__lead {
        font-size: calc(1.674rem * var(--about-page-scale));
    }

    .about-page__copy {
        font-size: calc(0.936rem * var(--about-page-scale));
    }

    .about-page__stack {
        gap: calc(45.36px * var(--about-page-scale));
    }

    .about-page__text-block {
        gap: calc(13px * var(--about-page-scale));
    }

    .about-page__block-title {
        font-size: calc(1.305rem * var(--about-page-scale));
    }

    .about-page__text-block--feature .about-page__block-title,
    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.395rem * var(--about-page-scale));
    }

    .about-page__media-column {
        padding-top: calc(97.92px * var(--about-page-scale));
    }

    .about-page__rule {
        height: calc(2px * var(--about-page-scale));
        margin: calc(89.28px * var(--about-page-scale)) 0 calc(67.68px * var(--about-page-scale));
    }

    .about-page__middle-grid {
        grid-template-columns: minmax(0, 0.98fr) minmax(calc(420px * var(--about-page-scale)), 1.08fr);
        gap: calc(74.88px * var(--about-page-scale));
    }

    .about-page__support-media {
        border-width: calc(1px * var(--about-page-scale));
        box-shadow: 0 calc(18px * var(--about-page-scale)) calc(34px * var(--about-page-scale)) rgba(27, 42, 74, 0.14);
    }

    .about-page__lower-grid {
        gap: calc(56.16px * var(--about-page-scale));
        margin-top: calc(70.56px * var(--about-page-scale));
        padding-top: calc(44.64px * var(--about-page-scale));
        border-top-width: calc(2px * var(--about-page-scale));
    }

    .about-page__text-block--lower + .about-page__text-block--lower {
        padding-left: calc(46.08px * var(--about-page-scale));
        border-left-width: calc(2px * var(--about-page-scale));
    }

    .about-page__cta-panel {
        grid-template-columns: minmax(0, 0.88fr) auto minmax(calc(320px * var(--about-page-scale)), 0.6fr);
        gap: calc(37.44px * var(--about-page-scale));
        margin-top: calc(84.96px * var(--about-page-scale));
        padding: calc(33.84px * var(--about-page-scale)) calc(56.16px * var(--about-page-scale));
        border-top-width: calc(4px * var(--about-page-scale));
        box-shadow: 0 calc(14px * var(--about-page-scale)) calc(32px * var(--about-page-scale)) rgba(17, 24, 39, 0.16);
    }

    .about-page__cta-headline {
        font-size: calc(1.728rem * var(--about-page-scale));
    }

    .about-page__cta-divider {
        width: calc(2px * var(--about-page-scale));
        height: calc(83.52px * var(--about-page-scale));
    }

    .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-scale));
        gap: calc(13.68px * var(--about-page-scale));
    }

    .about-page__cta-action p {
        font-size: calc(0.549rem * var(--about-page-scale));
    }

    .about-page__cta,
    .about-page__cta:visited {
        min-width: calc(196px * var(--about-page-scale));
        min-height: calc(40px * var(--about-page-scale));
        padding: calc(10px * var(--about-page-scale)) calc(22px * var(--about-page-scale));
        border-radius: calc(3px * var(--about-page-scale));
        font-size: calc(0.84rem * var(--about-page-scale));
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-scale)) rgba(255, 255, 255, 0.18),
                0 calc(4px * var(--about-page-scale))
                calc(16px * var(--about-page-scale))
                calc(-2px * var(--about-page-scale))
                rgba(22, 22, 22, 0.10);
    }

    .about-page__cta:hover,
    .about-page__cta:focus-visible {
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-scale)) rgba(255, 255, 255, 0.18),
                0 calc(6px * var(--about-page-scale))
                calc(18px * var(--about-page-scale))
                calc(-2px * var(--about-page-scale))
                rgba(22, 22, 22, 0.12);
    }

    .about-page__cta:active {
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-scale)) rgba(255, 255, 255, 0.18),
                0 calc(2px * var(--about-page-scale))
                calc(8px * var(--about-page-scale))
                calc(-2px * var(--about-page-scale))
                rgba(22, 22, 22, 0.10);
    }

    .about-page__cta:focus-visible {
        outline-offset: calc(3px * var(--about-page-scale));
    }

    .about-page__cta-leaf {
        right: calc(40.32px * var(--about-page-scale));
    }
}


/* ============================================================
   About page desktop proportional typography correction
   Keeps the 1440px type sizes as the reference, then scales them
   with --about-desktop-scale from 900px through 3840px.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken {
        --about-page-scale: var(--about-desktop-scale, 1);
    }

    .about-page__eyebrow {
        font-size: calc(0.882rem * var(--about-page-scale));
    }

    .about-page__heading {
        font-size: calc(4.905rem * var(--about-page-scale));
    }

    .about-page__lead {
        font-size: calc(1.674rem * var(--about-page-scale));
    }

    .about-page__copy {
        font-size: calc(1rem * var(--about-page-scale));
    }

    .about-page__block-title {
        font-size: calc(1.35rem * var(--about-page-scale));
    }

    .about-page__text-block--feature .about-page__block-title,
    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.46rem * var(--about-page-scale));
    }

    .about-page__cta-headline {
        font-size: calc(1.728rem * var(--about-page-scale));
    }

    .about-page__cta-action p {
        font-size: calc(0.62rem * var(--about-page-scale));
    }

    .about-page__cta,
    .about-page__cta:visited {
        font-size: calc(0.84rem * var(--about-page-scale));
    }

    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: calc(1.5rem * var(--about-page-scale));
    }

    .about-page .about-oaken__quote-mark {
        font-size: calc(2.625rem * var(--about-page-scale));
    }
}

/* ============================================================
   About page mobile/tablet proportional scaling
   Mirrors the home.css mobile pattern by using the JS-provided
   --mobile-scale below 680px and --tablet-progress from 680–899px.
   ============================================================ */
@media (max-width: 42.4375em) {
    .about-page.about-oaken {
        --about-page-mobile-scale: var(--mobile-scale, 1);
        --about-page-gutter: calc(22px * var(--about-page-mobile-scale));
        --about-page-top-pad: calc(92px * var(--about-page-mobile-scale));
        --about-page-bottom-pad: calc(72px * var(--about-page-mobile-scale));

        padding:
                var(--about-page-top-pad)
                var(--about-page-gutter)
                var(--about-page-bottom-pad);
    }

    .about-page__header {
        gap: calc(16px * var(--about-page-mobile-scale));
        margin-bottom: calc(36px * var(--about-page-mobile-scale));
    }

    .about-page__eyebrow {
        gap: calc(14px * var(--about-page-mobile-scale));
        font-size: calc(0.875rem * var(--about-page-mobile-scale));
    }

    .about-page__eyebrow::before {
        width: calc(32px * var(--about-page-mobile-scale));
        height: calc(2px * var(--about-page-mobile-scale));
    }

    .about-page__heading {
        font-size: calc(3.05rem * var(--about-page-mobile-scale));
    }

    .about-page__opening {
        gap: calc(22px * var(--about-page-mobile-scale));
        margin-bottom: calc(44px * var(--about-page-mobile-scale));
    }

    .about-page__lead {
        font-size: calc(1.65rem * var(--about-page-mobile-scale));
    }

    .about-page__copy {
        font-size: calc(1rem * var(--about-page-mobile-scale));
    }

    .about-page__stack {
        gap: calc(36px * var(--about-page-mobile-scale));
    }

    .about-page__text-block {
        gap: calc(13px * var(--about-page-mobile-scale));
    }

    .about-page__block-title {
        font-size: calc(1.35rem * var(--about-page-mobile-scale));
    }

    .about-page__text-block--feature .about-page__block-title,
    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.46rem * var(--about-page-mobile-scale));
    }

    .about-page__media-column {
        padding-top: calc(36px * var(--about-page-mobile-scale));
    }

    .about-page__rule {
        height: calc(2px * var(--about-page-mobile-scale));
        margin:
                calc(54px * var(--about-page-mobile-scale))
                0
                calc(38px * var(--about-page-mobile-scale));
    }

    .about-page__middle-grid {
        gap: calc(44px * var(--about-page-mobile-scale));
    }

    .about-page__support-media {
        border-width: calc(1px * var(--about-page-mobile-scale));
        box-shadow:
                0
                calc(18px * var(--about-page-mobile-scale))
                calc(34px * var(--about-page-mobile-scale))
                rgba(27, 42, 74, 0.14);
    }

    .about-page__lower-grid {
        gap: calc(30px * var(--about-page-mobile-scale));
        margin-top: calc(44px * var(--about-page-mobile-scale));
        padding-top: calc(34px * var(--about-page-mobile-scale));
        border-top-width: calc(2px * var(--about-page-mobile-scale));
    }

    .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: calc(30px * var(--about-page-mobile-scale));
        border-top-width: calc(2px * var(--about-page-mobile-scale));
    }

    .about-page__cta-panel {
        gap: calc(20px * var(--about-page-mobile-scale));
        margin-top: calc(58px * var(--about-page-mobile-scale));
        padding:
                calc(28px * var(--about-page-mobile-scale))
                calc(24px * var(--about-page-mobile-scale));
        border-top-width: calc(4px * var(--about-page-mobile-scale));
        box-shadow:
                0
                calc(14px * var(--about-page-mobile-scale))
                calc(32px * var(--about-page-mobile-scale))
                rgba(17, 24, 39, 0.16);
    }

    .about-page__cta-headline {
        font-size: calc(1.62rem * var(--about-page-mobile-scale));
    }

    .about-page__cta-divider {
        width: calc(52px * var(--about-page-mobile-scale));
        height: calc(2px * var(--about-page-mobile-scale));
    }

    .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-mobile-scale));
        gap: calc(10px * var(--about-page-mobile-scale));
    }

    .about-page__cta-action p {
        font-size: calc(0.62rem * var(--about-page-mobile-scale));
    }

    .about-page__cta,
    .about-page__cta:visited {
        min-width: calc(196px * var(--about-page-mobile-scale));
        min-height: calc(40px * var(--about-page-mobile-scale));
        padding:
                calc(10px * var(--about-page-mobile-scale))
                calc(22px * var(--about-page-mobile-scale));
        border-radius: calc(3px * var(--about-page-mobile-scale));
        font-size: calc(0.84rem * var(--about-page-mobile-scale));
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-mobile-scale)) rgba(255, 255, 255, 0.18),
                0 calc(4px * var(--about-page-mobile-scale))
                calc(16px * var(--about-page-mobile-scale))
                calc(-2px * var(--about-page-mobile-scale))
                rgba(22, 22, 22, 0.10);
    }

    .about-page__cta:hover,
    .about-page__cta:focus-visible {
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-mobile-scale)) rgba(255, 255, 255, 0.18),
                0 calc(6px * var(--about-page-mobile-scale))
                calc(18px * var(--about-page-mobile-scale))
                calc(-2px * var(--about-page-mobile-scale))
                rgba(22, 22, 22, 0.12);
    }

    .about-page__cta:active {
        box-shadow:
                inset 0 0 0 calc(1px * var(--about-page-mobile-scale)) rgba(255, 255, 255, 0.18),
                0 calc(2px * var(--about-page-mobile-scale))
                calc(8px * var(--about-page-mobile-scale))
                calc(-2px * var(--about-page-mobile-scale))
                rgba(22, 22, 22, 0.10);
    }

    .about-page__cta:focus-visible {
        outline-offset: calc(3px * var(--about-page-mobile-scale));
    }

    .about-page__cta-leaf {
        right: calc(-28px * var(--about-page-mobile-scale));
        width: calc(118px * var(--about-page-mobile-scale));
    }

    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: calc(1.5rem * var(--about-page-mobile-scale));
    }

    .about-page .about-oaken__quote-mark {
        font-size: calc(2.625rem * var(--about-page-mobile-scale));
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken {
        --about-page-tablet-scale: calc(1 + (0.12 * var(--tablet-progress, 0)));
    }

    .about-page__header {
        gap: calc(16px * var(--about-page-tablet-scale));
        margin-bottom: calc(47.6px * var(--about-page-tablet-scale));
    }

    .about-page__eyebrow {
        gap: calc(14px * var(--about-page-tablet-scale));
        font-size: calc(1.05rem * var(--about-page-tablet-scale));
    }

    .about-page__eyebrow::before {
        width: calc(32px * var(--about-page-tablet-scale));
        height: calc(2px * var(--about-page-tablet-scale));
    }

    .about-page__heading {
        font-size: calc(4.25rem * var(--about-page-tablet-scale));
    }

    .about-page__opening {
        gap: calc(22px * var(--about-page-tablet-scale));
        margin-bottom: calc(44px * var(--about-page-tablet-scale));
    }

    .about-page__lead {
        font-size: calc(1.97625rem * var(--about-page-tablet-scale));
    }

    .about-page__copy {
        font-size: calc(1.0875rem * var(--about-page-tablet-scale));
    }

    .about-page__stack {
        gap: calc(42.84px * var(--about-page-tablet-scale));
    }

    .about-page__text-block {
        gap: calc(13px * var(--about-page-tablet-scale));
    }

    .about-page__block-title {
        font-size: calc(1.540625rem * var(--about-page-tablet-scale));
    }

    .about-page__text-block--feature .about-page__block-title,
    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.653125rem * var(--about-page-tablet-scale));
    }

    .about-page__media-column {
        padding-top: calc(54.4px * var(--about-page-tablet-scale));
    }

    .about-page__rule {
        height: calc(2px * var(--about-page-tablet-scale));
        margin:
                calc(61.2px * var(--about-page-tablet-scale))
                0
                calc(54px * var(--about-page-tablet-scale));
    }

    .about-page__middle-grid {
        gap: calc(78px * var(--about-page-tablet-scale));
    }

    .about-page__lower-grid {
        gap: calc(30px * var(--about-page-tablet-scale));
        margin-top: calc(66px * var(--about-page-tablet-scale));
        padding-top: calc(48px * var(--about-page-tablet-scale));
        border-top-width: calc(2px * var(--about-page-tablet-scale));
    }

    .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: calc(30px * var(--about-page-tablet-scale));
        border-top-width: calc(2px * var(--about-page-tablet-scale));
    }

    .about-page__cta-panel {
        gap: calc(20px * var(--about-page-tablet-scale));
        margin-top: calc(86px * var(--about-page-tablet-scale));
        padding:
                calc(38px * var(--about-page-tablet-scale))
                calc(38px * var(--about-page-tablet-scale));
        border-top-width: calc(4px * var(--about-page-tablet-scale));
    }

    .about-page__cta-headline {
        font-size: calc(2.27rem * var(--about-page-tablet-scale));
    }

    .about-page__cta-divider {
        width: calc(52px * var(--about-page-tablet-scale));
        height: calc(2px * var(--about-page-tablet-scale));
    }

    .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-tablet-scale));
        gap: calc(14px * var(--about-page-tablet-scale));
    }

    .about-page__cta-action p {
        font-size: calc(0.72rem * var(--about-page-tablet-scale));
    }

    .about-page__cta,
    .about-page__cta:visited {
        min-width: calc(196px * var(--about-page-tablet-scale));
        min-height: calc(40px * var(--about-page-tablet-scale));
        padding:
                calc(10px * var(--about-page-tablet-scale))
                calc(22px * var(--about-page-tablet-scale));
        border-radius: calc(3px * var(--about-page-tablet-scale));
        font-size: calc(0.84rem * var(--about-page-tablet-scale));
    }

    .about-page__cta-leaf {
        right: calc(-28px * var(--about-page-tablet-scale));
        width: calc(118px * var(--about-page-tablet-scale));
    }

    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: calc(1.5rem * var(--about-page-tablet-scale));
    }

    .about-page .about-oaken__quote-mark {
        font-size: calc(2.625rem * var(--about-page-tablet-scale));
    }
}


/* ============================================================
   About page mobile wrapping + shared About media scaling fixes
   Keeps desktop unchanged. Loaded after earlier About page rules.
   ============================================================ */

.about-page__cta-line--mobile {
    display: none;
}

@media (max-width: 42.4375em) {
    .about-page__cta-line--desktop {
        display: none;
    }

    .about-page__cta-line--mobile {
        display: block;
    }

    .about-page__cta-headline {
        font-size: calc(1.5rem * var(--mobile-scale));
        line-height: 1.08;
        letter-spacing: -0.012em;
    }

    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.375rem * var(--mobile-scale));
        line-height: 1.08;
    }
}

/* Let the About-page portrait quote use the same sub-900 container-based
   sizing pattern as the shared home About media block. */
@media (max-width: 56.1875em) {
    .about-page .about-oaken__media-content {
        gap: 2.924cqw;
        padding-block: 2.3392cqw;
    }

    .about-page .about-oaken__media-line {
        height: 0.2924cqw;
    }

    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: 5.2632cqw;
        line-height: 1.28;
    }
}

@media (max-width: 42.4375em) {
    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: min(4.95cqw, calc(1.046875rem * var(--mobile-scale)));
        line-height: 1.22;
        letter-spacing: 0.03em;
    }

    .about-page .about-oaken__media-quote .about-oaken__media-title {
        column-gap: calc(10px * var(--mobile-scale));
        padding-inline: 0;
    }

    .about-page .about-oaken__quote-mark {
        font-size: 12.2808cqw;
    }
}


/* ============================================================
   Final mobile CTA/heading/quote corrections
   Removes the need for duplicate desktop/mobile CTA text,
   controls mobile title breaks explicitly, and lets the quote
   follow the shared home.css container-scale pattern.
   ============================================================ */

.about-page__cta-mobile-break {
    display: none;
}

.about-page__lower-title-line {
    display: inline;
}

@media (max-width: 42.4375em) {
    .about-page__cta-line {
        display: block;
    }

    .about-page__cta-mobile-break {
        display: block;
    }

    .about-page__cta-headline {
        font-size: calc(1.4375rem * var(--mobile-scale));
        line-height: 1.08;
        letter-spacing: -0.012em;
    }

    .about-page__lower-title-line {
        display: block;
    }

    .about-page__text-block--lower .about-page__block-title {
        font-size: calc(1.3125rem * var(--mobile-scale));
        line-height: 1.08;
    }
}

/* Keep the About-page quote on the same mobile/tablet scale as the shared home About block. */
@media (max-width: 56.1875em) {
    .about-page .about-oaken__media-content {
        gap: 2.924cqw;
        padding-block: 2.3392cqw;
    }

    .about-page .about-oaken__media-line {
        height: 0.2924cqw;
    }

    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: 5.2632cqw;
        line-height: 1.28;
    }
}

@media (max-width: 42.4375em) {
    .about-page .about-oaken__media-title,
    .about-page .about-oaken__media-quote-text {
        font-size: min(4.95cqw, calc(1.046875rem * var(--mobile-scale)));
        line-height: 1.22;
        letter-spacing: 0.03em;
    }

    .about-page .about-oaken__media-quote .about-oaken__media-title {
        column-gap: calc(10px * var(--mobile-scale));
        padding-inline: 0;
    }

    .about-page .about-oaken__quote-mark {
        font-size: 12.2808cqw;
    }
}

/* ============================================================
   Final mobile CTA leaf centering
   Centers the decorative leaf in the open space between the CTA
   button and the right edge of the mobile CTA panel.
   ============================================================ */
@media (max-width: 42.4375em) {
    .about-page__cta-leaf {
        right: calc(14px * var(--mobile-scale));
        bottom: 0;
        width: calc(100px * var(--mobile-scale));
        height: auto;
        transform: none;
        transform-origin: bottom right;
    }
}

/* ============================================================
   Final mobile CTA leaf size correction
   Enlarges the mobile CTA leaf so it fills more of the lower-right
   panel area while staying anchored to the bottom edge.
   ============================================================ */
@media (max-width: 42.4375em) {
    .about-page__cta-leaf {
        right: calc(2px * var(--mobile-scale));
        bottom: 0;
        width: calc(128px * var(--mobile-scale));
        height: auto;
        transform: none;
        transform-origin: bottom right;
    }
}


/* ============================================================
   Tablet CTA composition correction
   Keep the bottom CTA panel in the desktop-style horizontal
   composition through the tablet range instead of stacking early.
   Mobile below 680px still uses the stacked treatment.
   ============================================================ */
@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page__cta-panel {
        grid-template-columns:
                minmax(0, 1fr)
                auto
                minmax(calc(220px * var(--about-page-tablet-scale)), 0.62fr);
        align-items: center;
        justify-items: stretch;
        gap: calc(32px * var(--about-page-tablet-scale));
        max-width: none;
        margin-inline: 0;
        padding:
                calc(34px * var(--about-page-tablet-scale))
                calc(44px * var(--about-page-tablet-scale));
    }

    .about-page__cta-headline {
        max-width: 28ch;
        font-size: calc(1.8125rem * var(--about-page-tablet-scale));
        line-height: 1.08;
    }

    .about-page__cta-divider {
        width: calc(2px * var(--about-page-tablet-scale));
        height: calc(78px * var(--about-page-tablet-scale));
    }

    .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-tablet-scale));
        width: min(100%, var(--about-page-cta-button-width));
        justify-items: start;
        gap: calc(12px * var(--about-page-tablet-scale));
    }

    .about-page__cta-action p {
        width: min(100%, var(--about-page-cta-button-width));
        max-width: var(--about-page-cta-button-width);
        font-size: calc(0.625rem * var(--about-page-tablet-scale));
        line-height: 1.28;
    }

    .about-page__cta,
    .about-page__cta:visited {
        width: auto;
        min-width: var(--about-page-cta-button-width);
        min-height: calc(40px * var(--about-page-tablet-scale));
        padding:
                calc(10px * var(--about-page-tablet-scale))
                calc(22px * var(--about-page-tablet-scale));
        font-size: calc(0.84rem * var(--about-page-tablet-scale));
    }

    .about-page__cta-leaf {
        top: auto;
        right: calc(22px * var(--about-page-tablet-scale));
        bottom: 0;
        width: auto;
        height: 112%;
        transform: none;
        transform-origin: bottom right;
    }
}

/* ============================================================
   Final tablet/mobile CTA panel correction
   Tablet keeps the horizontal CTA layout but removes the leaf.
   Mobile gets an actual max-width and stays centered.
   ============================================================ */
@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page__cta-leaf {
        display: none;
    }
}

@media (max-width: 42.4375em) {
    .about-page__cta-panel {
        width: min(100%, calc(348px * var(--mobile-scale, 1)));
        max-width: calc(348px * var(--mobile-scale, 1));
        margin-inline: auto;
        box-sizing: border-box;
    }

    .about-page__cta-headline {
        max-width: 19ch;
    }

    .about-page__cta-action {
        max-width: var(--about-page-cta-button-width);
    }

    .about-page__cta-action p {
        max-width: min(100%, 28ch);
    }
}

/* Force the CTA headline tablet break so "worry about." stays together */
@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page__cta-mobile-break {
        display: block;
    }

    .about-page__cta-headline {
        max-width: none;
    }
}
/* Force the CTA headline tablet break so "to worry about." stays together */
@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page__cta-mobile-break {
        display: block;
    }

    .about-page__cta-headline {
        max-width: none;
    }
}

/* ============================================================
   Final About CTA typography parity with Attorneys page
   Matches the bottom CTA text scale used on the Attorneys page
   across desktop, tablet, and mobile.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page__cta-headline {
        font-size: calc(2.02rem * var(--about-page-scale, 1)) !important;
        line-height: 1.08 !important;
    }

    .about-page__cta-action p {
        font-size: calc(0.67rem * var(--about-page-scale, 1)) !important;
        line-height: 1.28 !important;
    }

    .about-page__cta,
    .about-page__cta:visited {
        font-size: calc(0.84rem * var(--about-page-scale, 1)) !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page__cta-headline {
        max-width: none !important;
        font-size: calc(1.8125rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1.08 !important;
    }

    .about-page__cta-action p {
        font-size: calc(0.625rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1.28 !important;
    }

    .about-page__cta,
    .about-page__cta:visited {
        font-size: calc(0.84rem * var(--about-page-tablet-scale, 1)) !important;
    }
}

@media (max-width: 42.4375em) {
    .about-page__cta-headline {
        max-width: 19ch !important;
        font-size: clamp(1.62rem, 1.92vw, 2.26rem) !important;
        line-height: 1.08 !important;
    }

    .about-page__cta-action p {
        font-size: clamp(0.62rem, 0.61vw, 0.72rem) !important;
        line-height: 1.28 !important;
    }

    .about-page__cta,
    .about-page__cta:visited {
        font-size: calc(0.84rem * var(--mobile-scale, 1)) !important;
    }
}

@media (max-width: 30em) {
    .about-page__cta-headline {
        max-width: 13.5ch !important;
        font-size: calc(1.72rem * var(--mobile-scale, 1)) !important;
        line-height: 1.03 !important;
    }

    .about-page__cta-action p {
        max-width: 29ch !important;
        font-size: calc(0.72rem * var(--mobile-scale, 1)) !important;
    }

    .about-page__cta,
    .about-page__cta:visited {
        min-width: min(100%, calc(214px * var(--mobile-scale, 1))) !important;
        min-height: calc(42px * var(--mobile-scale, 1)) !important;
        font-size: calc(0.84rem * var(--mobile-scale, 1)) !important;
    }
}

/* ============================================================
   Final About CTA button parity with Attorneys page
   The earlier generic mobile rule made the About CTA button stretch
   wider than the Attorneys CTA. Keep the action column and button at
   the same measured mobile width used by the Attorneys page.
   ============================================================ */
@media (max-width: 42.4375em) {
    .about-page.about-oaken .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--mobile-scale, 1));
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        justify-items: start !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        display: inline-flex !important;
        width: min(100%, calc(214px * var(--mobile-scale, 1))) !important;
        min-width: 0 !important;
        max-width: calc(214px * var(--mobile-scale, 1)) !important;
        min-height: calc(42px * var(--mobile-scale, 1)) !important;
        padding:
                calc(10px * var(--mobile-scale, 1))
                calc(22px * var(--mobile-scale, 1)) !important;
        box-sizing: border-box !important;
        font-size: calc(0.84rem * var(--mobile-scale, 1)) !important;
        line-height: 1 !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-tablet-scale, 1));
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        justify-items: start !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        display: inline-flex !important;
        width: auto !important;
        min-width: var(--about-page-cta-button-width) !important;
        max-width: var(--about-page-cta-button-width) !important;
        min-height: calc(40px * var(--about-page-tablet-scale, 1)) !important;
        padding:
                calc(10px * var(--about-page-tablet-scale, 1))
                calc(22px * var(--about-page-tablet-scale, 1)) !important;
        box-sizing: border-box !important;
        font-size: calc(0.84rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1 !important;
    }
}

/* ============================================================
   Final About bottom CTA heading parity with Attorneys page
   Loaded last so About uses the same measured headline scale as
   the Attorneys CTA at desktop, tablet, and mobile widths.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: none !important;
        font-size: calc(2.02rem * var(--about-desktop-scale, 1)) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: none !important;
        font-size: calc(1.8125rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }

    .about-page.about-oaken .about-page__cta-mobile-break {
        display: block !important;
    }
}

@media (max-width: 42.4375em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: 19ch !important;
        font-size: clamp(1.62rem, 1.92vw, 2.26rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }

    .about-page.about-oaken .about-page__cta-mobile-break {
        display: block !important;
    }
}

@media (max-width: 30em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: 13.5ch !important;
        font-size: calc(1.72rem * var(--mobile-scale, 1)) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.012em !important;
    }
}

/* ============================================================
   Final About CTA headline wrapping parity
   Keep “We’ll handle the fight.” on one line like the Attorneys CTA.
   This must load after the earlier <=30em mobile override that narrowed
   the headline to 13.5ch.
   ============================================================ */
@media (max-width: 42.4375em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: 19ch !important;
        font-size: clamp(1.62rem, 1.92vw, 2.26rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }
}

@media (max-width: 30em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: 19ch !important;
        font-size: calc(1.62rem * var(--mobile-scale, 1)) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }
}

/* ============================================================
   Final CTA parity lock with Attorneys page
   Keep the About bottom CTA using the same measured rules as
   the Attorneys CTA. This intentionally loads last to neutralize
   earlier About-only mobile overrides.
   ============================================================ */
.about-page.about-oaken .about-page__cta-panel {
    text-align: left !important;
    border-bottom: 0 !important;
}

.about-page.about-oaken .about-page__cta-headline {
    display: grid !important;
    gap: 0.02em !important;
    max-width: none !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: "Sitka Heading Bold", Georgia, serif !important;
    font-size: clamp(1.62rem, 1.92vw, 2.26rem) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
}

.about-page.about-oaken .about-page__cta-headline span {
    display: block !important;
}

.about-page.about-oaken .about-page__cta-mobile-break {
    display: none !important;
}

@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__cta-panel {
        grid-template-columns: minmax(0, 0.88fr) auto minmax(calc(320px * var(--about-page-scale, var(--about-desktop-scale, 1))), 0.6fr) !important;
        gap: calc(36px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        margin-top: calc(86px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        padding:
                calc(34px * var(--about-page-scale, var(--about-desktop-scale, 1)))
                calc(56px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        border-top-width: calc(4px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__cta-headline {
        max-width: none !important;
        font-size: calc(2.02rem * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        line-height: 1.08 !important;
    }

    .about-page.about-oaken .about-page__cta-divider {
        width: calc(2px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        height: calc(104px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-scale, var(--about-desktop-scale, 1)));
        width: min(100%, var(--about-page-cta-button-width)) !important;
        justify-items: start !important;
    }

    .about-page.about-oaken .about-page__cta-action p {
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        font-size: calc(0.67rem * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        line-height: 1.28 !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        width: auto !important;
        min-width: calc(196px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        max-width: none !important;
        min-height: calc(40px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        padding:
                calc(10px * var(--about-page-scale, var(--about-desktop-scale, 1)))
                calc(22px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        font-size: calc(0.84rem * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__cta-panel {
        grid-template-columns:
                minmax(0, 1fr)
                auto
                minmax(calc(220px * var(--about-page-tablet-scale, 1)), 0.62fr) !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: calc(32px * var(--about-page-tablet-scale, 1)) !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding:
                calc(34px * var(--about-page-tablet-scale, 1))
                calc(44px * var(--about-page-tablet-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta-headline {
        max-width: none !important;
        font-size: calc(1.8125rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1.08 !important;
    }

    .about-page.about-oaken .about-page__cta-divider {
        width: calc(2px * var(--about-page-tablet-scale, 1)) !important;
        height: calc(78px * var(--about-page-tablet-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--about-page-tablet-scale, 1));
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        justify-items: start !important;
        gap: calc(12px * var(--about-page-tablet-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta-action p {
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        font-size: calc(0.625rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1.28 !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        width: auto !important;
        min-width: var(--about-page-cta-button-width) !important;
        max-width: var(--about-page-cta-button-width) !important;
        min-height: calc(40px * var(--about-page-tablet-scale, 1)) !important;
        padding:
                calc(10px * var(--about-page-tablet-scale, 1))
                calc(22px * var(--about-page-tablet-scale, 1)) !important;
        font-size: calc(0.84rem * var(--about-page-tablet-scale, 1)) !important;
        line-height: 1 !important;
    }

    .about-page.about-oaken .about-page__cta-mobile-break {
        display: block !important;
    }

    .about-page.about-oaken .about-page__cta-leaf {
        display: none !important;
    }
}

@media (max-width: 30em) {
    .about-page.about-oaken .about-page__cta-headline {
        max-width: 13.5ch !important;
        font-size: calc(1.72rem * var(--mobile-scale, 1)) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.012em !important;
    }

    .about-page.about-oaken .about-page__cta-action p {
        max-width: 29ch !important;
        font-size: calc(0.72rem * var(--mobile-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        min-width: min(100%, calc(214px * var(--mobile-scale, 1))) !important;
        max-width: calc(214px * var(--mobile-scale, 1)) !important;
        min-height: calc(42px * var(--mobile-scale, 1)) !important;
        font-size: calc(0.84rem * var(--mobile-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta-leaf {
        right: calc(18px * var(--mobile-scale, 1)) !important;
        bottom: 0 !important;
        width: calc(96px * var(--mobile-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__cta-mobile-break {
        display: inline !important;
    }
}

@media (max-width: 42.4375em) {
    .about-page.about-oaken .about-page__cta-panel {
        width: min(100%, calc(348px * var(--mobile-scale, 1))) !important;
        max-width: calc(348px * var(--mobile-scale, 1)) !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    .about-page.about-oaken .about-page__cta-headline {
        max-width: 19ch !important;
    }

    .about-page.about-oaken .about-page__cta-action {
        --about-page-cta-button-width: calc(196px * var(--mobile-scale, 1));
        width: min(100%, var(--about-page-cta-button-width)) !important;
        max-width: var(--about-page-cta-button-width) !important;
        justify-items: start !important;
    }

    .about-page.about-oaken .about-page__cta-action p {
        max-width: min(100%, 28ch) !important;
    }

    .about-page.about-oaken .about-page__cta,
    .about-page.about-oaken .about-page__cta:visited {
        display: inline-flex !important;
        width: min(100%, calc(214px * var(--mobile-scale, 1))) !important;
        min-width: 0 !important;
        max-width: calc(214px * var(--mobile-scale, 1)) !important;
        min-height: calc(42px * var(--mobile-scale, 1)) !important;
        padding:
                calc(10px * var(--mobile-scale, 1))
                calc(22px * var(--mobile-scale, 1)) !important;
        box-sizing: border-box !important;
        font-size: calc(0.84rem * var(--mobile-scale, 1)) !important;
        line-height: 1 !important;
    }

    .about-page.about-oaken .about-page__cta-mobile-break {
        display: block !important;
    }

    .about-page.about-oaken .about-page__cta-leaf {
        display: block !important;
        top: auto !important;
        right: calc(2px * var(--mobile-scale, 1)) !important;
        bottom: 0 !important;
        width: calc(128px * var(--mobile-scale, 1)) !important;
        height: auto !important;
        transform: none !important;
        transform-origin: bottom right !important;
    }
}

/* ============================================================
   About page middle/lower editorial refinement
   Shrinks the collaboration image to read as a companion to the
   text block and softens the lower-column dividers.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__middle-grid {
        grid-template-columns:
                minmax(0, 1fr)
                minmax(0, calc(470px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        align-items: center !important;
        gap: calc(78px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__support-media {
        justify-self: end !important;
        width: min(100%, calc(470px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        aspect-ratio: 1.52 !important;
    }

    .about-page.about-oaken .about-page__support-image {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    .about-page.about-oaken .about-page__lower-grid {
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
        gap: calc(52px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower {
        padding-top: calc(22px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(42px * var(--about-page-scale, var(--about-desktop-scale, 1)));
        height: max(1px, calc(2px * var(--about-page-scale, var(--about-desktop-scale, 1))));
        background: rgba(196, 150, 60, 0.82);
    }

    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        border-left: 1px solid rgba(27, 42, 74, 0.14) !important;
        padding-left: calc(46px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }
}

@media (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__lower-grid {
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower {
        padding-top: calc(20px * var(--about-page-mobile-scale, var(--mobile-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(38px * var(--about-page-mobile-scale, var(--mobile-scale, 1)));
        height: max(1px, calc(2px * var(--about-page-mobile-scale, var(--mobile-scale, 1))));
        background: rgba(196, 150, 60, 0.82);
    }

    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__text-block--lower {
        padding-top: calc(22px * var(--about-page-tablet-scale, 1)) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        width: calc(42px * var(--about-page-tablet-scale, 1));
        height: max(1px, calc(2px * var(--about-page-tablet-scale, 1)));
    }
}


/* ============================================================
   Final About middle/lower correction — Option B dividers
   Keeps the collaboration image editorially paired with the text
   and uses only soft navy dividers in the lower three-column row.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__rule {
        margin:
                calc(70px * var(--about-page-scale, var(--about-desktop-scale, 1)))
                0
                calc(50px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__middle-grid {
        grid-template-columns:
                minmax(0, 1fr)
                minmax(0, calc(540px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        align-items: start !important;
        gap: calc(58px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--feature {
        max-width: calc(660px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__support-media {
        justify-self: end !important;
        width: min(100%, calc(540px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        aspect-ratio: 1.52 !important;
    }

    .about-page.about-oaken .about-page__support-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .about-page.about-oaken .about-page__lower-grid {
        margin-top: calc(54px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        padding-top: calc(48px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        gap: calc(54px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower {
        position: relative !important;
        padding-top: 0 !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        content: none !important;
    }

    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: 0 !important;
        padding-left: calc(48px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        border-top: 0 !important;
        border-left: 1px solid rgba(27, 42, 74, 0.16) !important;
    }
}

@media (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__lower-grid {
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower {
        position: relative !important;
        padding-top: 0 !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        content: none !important;
    }

    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: calc(28px * var(--about-page-mobile-scale, var(--mobile-scale, 1))) !important;
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(27, 42, 74, 0.14) !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: calc(30px * var(--about-page-tablet-scale, 1)) !important;
    }
}

/* ============================================================
   Final About middle/photo refinement
   Uses one gold section divider, keeps the lower-column vertical
   dividers muted, and makes the collaboration image wider but
   shallower so it pairs with the fixed-measure text block.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__rule {
        height: calc(2px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        margin:
                calc(68px * var(--about-page-scale, var(--about-desktop-scale, 1)))
                0
                calc(48px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        background: rgba(196, 150, 60, 0.72) !important;
    }

    .about-page.about-oaken .about-page__middle-grid {
        grid-template-columns:
                minmax(0, calc(640px * var(--about-page-scale, var(--about-desktop-scale, 1))))
                minmax(0, calc(620px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: calc(64px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--feature {
        max-width: calc(640px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__support-media {
        justify-self: end !important;
        width: min(100%, calc(620px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        aspect-ratio: 2.06 / 1 !important;
    }

    .about-page.about-oaken .about-page__support-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center 18% !important;
    }

    .about-page.about-oaken .about-page__lower-grid {
        margin-top: calc(52px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        padding-top: calc(46px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        gap: calc(54px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        border-top: 2px solid rgba(196, 150, 60, 0.66) !important;
    }

    .about-page.about-oaken .about-page__text-block--lower {
        position: relative !important;
        padding-top: 0 !important;
    }

    .about-page.about-oaken .about-page__text-block--lower::before {
        content: none !important;
    }

    .about-page.about-oaken .about-page__text-block--lower + .about-page__text-block--lower {
        padding-top: 0 !important;
        padding-left: calc(48px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
        border-top: 0 !important;
        border-left: 1px solid rgba(27, 42, 74, 0.16) !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__lower-grid {
        border-top: 2px solid rgba(196, 150, 60, 0.62) !important;
    }
}

@media (max-width: 42.4375em) {
    .about-page.about-oaken .about-page__lower-grid {
        border-top: 2px solid rgba(196, 150, 60, 0.62) !important;
    }
}

/* ============================================================
   Final middle photo presence correction
   Slightly increases the collaboration image's visual width while
   keeping the text column fixed and the image shallow/cropped.
   ============================================================ */
@media (min-width: 56.25em) {
    .about-page.about-oaken .about-page__middle-grid {
        grid-template-columns:
                minmax(0, calc(548px * var(--about-page-scale, var(--about-desktop-scale, 1))))
                minmax(0, calc(660px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: calc(56px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__text-block--feature {
        max-width: calc(548px * var(--about-page-scale, var(--about-desktop-scale, 1))) !important;
    }

    .about-page.about-oaken .about-page__support-media {
        justify-self: end !important;
        width: min(100%, calc(660px * var(--about-page-scale, var(--about-desktop-scale, 1)))) !important;
        aspect-ratio: 2.2 / 1 !important;
    }

    .about-page.about-oaken .about-page__support-image {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center 16% !important;
    }
}

/* ============================================================
   Final About portrait image lock
   Prevents the shared home.css About-media photo rule from swapping
   the About page portrait to the homepage image on desktop.
   ============================================================ */
.about-page.about-oaken .about-oaken__media::before {
    background:
            linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.12) var(--about-media-overlay-step-1),
                    rgba(0, 0, 0, 0.58) var(--about-media-overlay-step-2),
                    rgba(0, 0, 0, 0.58) var(--about-media-overlay-step-3),
                    rgba(0, 0, 0, 0.24) var(--about-media-overlay-step-4),
                    rgba(0, 0, 0, 0) 100%
            ),
            url("../images/background_images/ian_vertical.jpg") center 24% / cover no-repeat !important;
}

@media (max-width: 56.1875em) {
    .about-page.about-oaken .about-oaken__media::before {
        background: url("../images/background_images/ian_vertical.jpg") center 24% / cover no-repeat !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-oaken__media::before {
        background: url("../images/background_images/ian_vertical.jpg") center 31% / cover no-repeat !important;
    }
}

/* ============================================================
   About page support-photo mobile/tablet scale correction
   Keeps the second/collaboration image controlled on phone widths,
   then lets it use the available tablet measure without large side
   padding while adding back enough height for visual presence.
   ============================================================ */
@media (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__middle-grid {
        justify-items: stretch !important;
    }

    .about-page.about-oaken .about-page__support-media {
        justify-self: center !important;
        width: min(
                100%,
                clamp(
                        calc(340px * var(--about-page-mobile-scale, var(--mobile-scale, 1))),
                        86vw,
                        620px
                )
        ) !important;
        aspect-ratio: 1.62 / 1 !important;
    }

    .about-page.about-oaken .about-page__support-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center 18% !important;
    }
}

@media (min-width: 42.5em) and (max-width: 56.1875em) {
    .about-page.about-oaken .about-page__support-media {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1.82 / 1 !important;
    }
}