/* About page: isolated responsive composition and alignment lock. */
.about-page .about-hero-footer {
    display: grid;
    width: min(100%, 920px);
    max-width: 920px;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}
.about-page .about-hero-footer > .button {
    min-height: 58px;
    justify-content: center;
}
.about-page .about-hero-notes {
    display: grid;
    min-width: 0;
    padding: 5px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(16, 38, 81, .14);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(9, 32, 68, .08);
}
.about-page .about-hero-notes li {
    display: grid;
    min-width: 0;
    min-height: 68px;
    padding: 9px 11px;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    color: var(--navy-900);
    background: linear-gradient(145deg, #fff, rgba(240, 244, 250, .82));
    border: 1px solid rgba(16, 38, 81, .1);
    border-radius: 13px;
    text-align: left;
}
.about-page .about-hero-notes li::before {
    display: grid;
    width: 36px;
    height: 36px;
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center;
    color: var(--navy-900);
    background: linear-gradient(145deg, #f5cf78, #dfaa35);
    border-radius: 11px;
    box-shadow: 0 5px 12px rgba(171, 117, 13, .18);
    content: "\2713";
    font-size: 1rem;
    line-height: 1;
}
.about-page .about-hero-notes li strong,
.about-page .about-hero-notes li small {
    min-width: 0;
    grid-column: 2;
}
.about-page .about-hero-notes li strong {
    align-self: end;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.08;
}
.about-page .about-hero-notes li small {
    align-self: start;
    color: #596a82;
    font-size: .58rem;
    font-weight: 750;
    line-height: 1.2;
}
.about-page .about-story-points {
    counter-reset: about-point;
    align-items: stretch;
}
.about-page .about-story-points article {
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    min-height: 158px;
    padding: 18px;
    grid-template-rows: 34px minmax(38px, auto) 1fr;
    align-content: center;
    gap: 8px;
    background: linear-gradient(145deg, #fff, #f3f6fa);
    border: 1px solid rgba(16, 38, 81, .13);
    border-top: 3px solid #d9a63a;
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(11, 31, 62, .07);
    text-align: center;
}
.about-page .about-story-point-number {
    display: grid !important;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    place-items: center;
    color: var(--navy-900);
    background: #fff3d4;
    border: 1px solid rgba(216, 169, 61, .24);
    border-radius: 10px;
    font-size: .68rem !important;
    font-weight: 900;
    line-height: 1 !important;
}
.about-page .about-story-points strong {
    display: grid;
    min-height: 38px;
    align-content: center;
    color: var(--navy-900);
    font-size: .92rem;
    line-height: 1.22;
}
.about-page .about-story-points article > span:last-child {
    display: grid;
    min-height: 46px;
    margin: 0;
    align-content: start;
    color: #5e6c82;
    font-size: .78rem;
    line-height: 1.42;
}
.about-page .about-expect-card {
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    align-content: center;
}
.about-page .about-expect-card .eyebrow,
.about-page .about-expect-card h3,
.about-page .about-expect-intro {
    margin-inline: auto;
    text-align: center;
}
.about-page .about-expect-card h3 {
    max-width: 15ch;
}
.about-page .about-expect-intro {
    max-width: 48ch;
}
.about-page .about-expect-grid span {
    display: grid;
    min-height: 72px;
    padding: 13px 14px;
    align-content: center;
    justify-items: center;
    gap: 4px;
    text-align: center;
}
.about-page .about-expect-grid strong {
    color: #f7ce72;
}
@media (min-width: 1101px) {
    .about-page .about-hero h1 {
        max-width: none !important;
        font-size: clamp(3.4rem, 5vw, 4.7rem) !important;
        white-space: nowrap;
    }
}
/* iPad Mini through iPad Pro use the intentional tablet composition: the
   story points remain one matched row and the approach becomes full width. */
@media (min-width: 561px) and (max-width: 1100px) {
    .about-page .about-hero-footer {
        width: min(100%, 760px);
        grid-template-columns: minmax(210px, 245px) minmax(0, 1fr);
        gap: 12px;
    }
    .about-page .about-hero-notes li {
        min-height: 66px;
        padding: 8px;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 8px;
    }
    .about-page .about-hero-notes li::before {
        width: 34px;
        height: 34px;
    }
    .about-page .about-hero-notes li strong {
        font-size: .76rem;
    }
    .about-page .about-hero-notes li small {
        font-size: .54rem;
    }
    .about-page .about-story .split-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
    .about-page .about-story-copy {
        min-width: 0;
    }
    .about-page .about-story-points {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .about-page .about-story-points article {
        min-height: 172px !important;
        padding: 16px 14px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 34px minmax(42px, auto) 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .about-page .about-story-points strong,
    .about-page .about-story-points article > span:last-child {
        display: grid !important;
        height: auto !important;
        align-content: center !important;
        text-align: center !important;
    }
    .about-page .about-expect-card {
        width: 100%;
        min-height: 330px;
        padding: 34px !important;
    }
    .about-page .about-expect-card h3 {
        max-width: 23ch;
        font-size: clamp(1.65rem, 3.7vw, 2.3rem) !important;
        line-height: 1.08;
    }
    .about-page .about-expect-intro {
        max-width: 62ch;
    }
    .about-page .about-expect-grid {
        width: min(100%, 760px);
        margin-inline: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .about-page .about-principles .card-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
    .about-page .about-principle-card {
        box-sizing: border-box !important;
        display: grid !important;
        min-height: 164px !important;
        padding: 20px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 42px auto 1fr !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 9px !important;
        text-align: center !important;
    }
    .about-page .about-principle-card .icon-tile {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 auto !important;
        place-self: center !important;
    }
    .about-page .about-principle-card h3,
    .about-page .about-principle-card p {
        margin-inline: auto !important;
        text-align: center !important;
    }
    /* The tablet footer mirrors the accepted phone hierarchy without turning
       the whole footer into a vertical accordion. */
    .about-page .site-footer {
        padding-top: 20px !important;
    }
    .about-page .site-footer .footer-main {
        box-sizing: border-box !important;
        display: grid !important;
        width: min(calc(100% - 32px), 980px) !important;
        margin-inline: auto !important;
        padding: 14px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        background: rgba(255, 255, 255, .025) !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 18px !important;
    }
    .about-page .site-footer .footer-brand {
        box-sizing: border-box !important;
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 110px !important;
        margin: 0 !important;
        padding: 18px 20px !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 150px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 20px !important;
        color: #e6edf8 !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)) !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 14px !important;
        text-align: left !important;
    }
    .about-page .site-footer .footer-brand img {
        width: 142px !important;
        height: auto !important;
        margin: 0 !important;
        align-self: center !important;
    }
    .about-page .site-footer .footer-brand p {
        width: 100% !important;
        max-width: 34ch !important;
        margin: 0 !important;
        color: #c5cfdf !important;
        text-align: left !important;
    }
    .about-page .site-footer .footer-brand > a {
        min-height: 42px !important;
        margin: 0 !important;
        padding: 10px 13px !important;
        color: #f7ce72 !important;
        background: rgba(232, 184, 72, .08) !important;
        border: 1px solid rgba(232, 184, 72, .22) !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }
    .about-page .site-footer .footer-column:not(.footer-availability) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 126px !important;
        margin: 0 !important;
        padding: 17px 19px !important;
        grid-column: auto !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)) !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        border-radius: 13px !important;
    }
    .about-page .site-footer .footer-column:not(.footer-availability) h2 {
        margin: 0 0 11px !important;
        text-align: left !important;
    }
    .about-page .site-footer .footer-column:not(.footer-availability) .footer-column-links {
        display: grid !important;
        width: 100% !important;
        padding: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 18px !important;
    }
    .about-page .site-footer .footer-availability {
        box-sizing: border-box !important;
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 70px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 128px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 16px !important;
        background: linear-gradient(90deg, rgba(216, 169, 61, .1), rgba(255, 255, 255, .035)) !important;
        border: 1px solid rgba(216, 169, 61, .24) !important;
        border-radius: 13px !important;
    }
    .about-page .site-footer .footer-availability h2 {
        display: flex !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 16px 0 2px !important;
        align-items: center !important;
        border-right: 1px solid rgba(255, 255, 255, .12) !important;
        text-align: left !important;
    }
    .about-page .site-footer .footer-availability .footer-column-links {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .about-page .site-footer .footer-availability span {
        box-sizing: border-box !important;
        display: grid !important;
        width: 100% !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        place-items: center !important;
        background: rgba(255, 255, 255, .045) !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 9px !important;
        text-align: center !important;
    }
    .about-page .site-footer .footer-bottom {
        box-sizing: border-box !important;
        width: min(calc(100% - 32px), 980px) !important;
        margin-inline: auto !important;
        gap: 14px !important;
    }
}
@media (min-width: 561px) and (max-width: 760px) {
    .about-page .about-hero-footer {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .about-page .about-hero-footer > .button {
        width: min(100%, 300px);
    }
    .about-page .site-footer .footer-brand {
        min-height: 142px !important;
        grid-template-columns: 128px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 9px 18px !important;
    }
    .about-page .site-footer .footer-brand img {
        width: 124px !important;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }
    .about-page .site-footer .footer-brand p,
    .about-page .site-footer .footer-brand > a {
        width: 100% !important;
        grid-column: 2 !important;
    }
    .about-page .site-footer .footer-brand p {
        grid-row: 1 !important;
        align-self: end !important;
    }
    .about-page .site-footer .footer-brand > a {
        grid-row: 2 !important;
        align-self: start !important;
        white-space: normal !important;
    }
}
@media (max-width: 560px) {
    .about-page .about-hero-footer {
        display: grid !important;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
    }
    .about-page .about-hero-footer > .button,
    .about-page .about-contact-card .button,
    .about-page .about-cta .button {
        width: min(100%, 300px) !important;
        margin-inline: auto !important;
        justify-self: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    /* These ideas repeat immediately below in the story section; removing the
       small hero rail keeps the phone opening focused on its primary action. */
    .about-page .about-hero-notes {
        display: none !important;
    }
    .about-page .about-story-points {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }
    .about-page .about-story-points article {
        min-height: 100px !important;
        padding: 13px 14px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 3px 12px !important;
        text-align: left !important;
    }
    .about-page .about-story-point-number {
        width: 38px;
        height: 38px;
        margin: 0;
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
    }
    .about-page .about-story-points strong,
    .about-page .about-story-points article > span:last-child {
        display: grid !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        grid-column: 2 !important;
        align-content: center !important;
        text-align: left !important;
    }
    .about-page .about-story-points strong {
        grid-row: 1 !important;
    }
    .about-page .about-story-points article > span:last-child {
        grid-row: 2 !important;
    }
    .about-page .about-expect-card {
        padding: 24px 18px !important;
    }
    .about-page .about-expect-card h3 {
        max-width: 16ch;
    }
    .about-page .about-expect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .about-page .about-expect-grid span {
        min-height: 68px;
        padding: 11px 8px;
    }
}