/*
|--------------------------------------------------------------------------
| Word Intelligence - About page, Contact-style redesign
|--------------------------------------------------------------------------
|
| Design direction:
| - Matches the restrained editorial language used on the Contact page.
| - Uses PT Serif rather than PT Serif Pro.
| - Removes decorative colour gradients, circles and coloured card effects.
| - Leaves the shared About/Contact header and general footer untouched.
|
*/

body {
    --wi-about-width: 1180px;
    --wi-about-page-edge: clamp(18px, 4vw, 44px);
    --wi-about-text: var(--text-color, #111111);
    --wi-about-muted: #686c68;
    --wi-about-line: rgba(17, 17, 17, 0.13);
    --wi-about-card: #f3f3f1;
    --wi-about-card-hover: #ececea;
    --wi-about-strong: #111111;
    --wi-about-inverse: #ffffff;
    --wi-about-stat-line: rgba(255, 255, 255, 0.18);
}

body.dark-mode {
    --wi-about-muted: #a5aaa5;
    --wi-about-line: rgba(255, 255, 255, 0.13);
    --wi-about-card: #1b1d1b;
    --wi-about-card-hover: #232623;
    --wi-about-strong: #f5f5f2;
    --wi-about-inverse: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Shared type rules for the About page only
|--------------------------------------------------------------------------
*/

.wi-about-hero h1,
.about-body .about-text-body h1,
.about-body .about-anchors > h1,
.about-body .about-theme,
.about-body .about-abstract h1,
.accounts-social h1,
.wi-about-newsletter h2,
.glance .count {
    font-family:
        "PT Serif",
        Georgia,
        serif !important;
}

.about-body .about-text-body p,
.about-body .about-abstract p {
    font-family:
        "PT Serif",
        Georgia,
        serif !important;
}

.about-body .text-bold,
.about-body .church-link,
.about-body .italic-text {
    font-family:
        "PT Serif",
        Georgia,
        serif !important;
}

.about-body .text-bold,
.about-body .church-link {
    font-weight: 700 !important;
}

.about-body .italic-text {
    font-style: italic !important;
    font-weight: 700 !important;
}

/*
|--------------------------------------------------------------------------
| About WI hero - same visual language as Contact Us
|--------------------------------------------------------------------------
*/

.wi-about-hero {
    width:
        min(
            var(--wi-about-width),
            calc(100% - (var(--wi-about-page-edge) * 2))
        );

    margin: 0 auto;

    padding:
        clamp(68px, 8vw, 126px)
        0
        clamp(62px, 8vw, 118px);

    border-bottom:
        1px solid
        var(--wi-about-line);

    background: transparent !important;
}

.wi-about-hero__inner {
    width: 100%;
}

.wi-about-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        0
        0
        clamp(24px, 3vw, 38px);

    color:
        var(--wi-about-muted);

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wi-about-hero__eyebrow i {
    display: block;

    width: 22px;
    height: 1px;

    background:
        var(--accent-color, #ffb534);
}

.wi-about-hero h1 {
    max-width: 900px;

    margin: 0;

    color:
        var(--wi-about-text);

    font-size:
        clamp(4rem, 8.4vw, 8.2rem);

    font-weight: 400;
    letter-spacing: -0.065em;
    line-height: 0.88;
}

.wi-about-hero__intro {
    max-width: 690px;

    margin:
        clamp(25px, 3.2vw, 42px)
        0
        0;

    color:
        var(--wi-about-muted);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(0.88rem, 1.15vw, 1.02rem);

    line-height: 1.75;
}

/*
|--------------------------------------------------------------------------
| Main content width
|--------------------------------------------------------------------------
*/

.about-body {
    width:
        min(
            var(--wi-about-width),
            calc(100% - (var(--wi-about-page-edge) * 2))
        ) !important;

    margin:
        0
        auto !important;

    padding:
        0 !important;

    background:
        transparent !important;
}

/*
|--------------------------------------------------------------------------
| Author section
|--------------------------------------------------------------------------
*/

.about-body .about-info {
    position: relative;

    display: grid !important;
    grid-template-columns:
        minmax(280px, 0.82fr)
        minmax(0, 1.18fr) !important;

    align-items: start !important;

    gap:
        clamp(42px, 7vw, 96px) !important;

    margin: 0 !important;

    padding:
        clamp(72px, 9vw, 132px)
        0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-bottom:
        1px solid
        var(--wi-about-line) !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

/* Remove the previous decorative colour shapes. */
.about-body .about-info::before,
.about-body .about-info::after {
    content:
        none !important;
}

.about-body .about-info > img {
    position: static !important;

    display: block;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 4 / 5;

    border-radius: 14px !important;

    object-fit: cover;
    object-position: center top;

    box-shadow:
        none !important;
}

.about-body .about-text-body {
    position: static !important;

    display: block !important;

    min-width: 0;

    padding:
        clamp(4px, 1vw, 14px)
        0
        0 !important;
}

.wi-about-author-kicker {
    margin:
        0
        0
        22px !important;

    color:
        var(--wi-about-muted) !important;

    font-family:
        "Inter",
        sans-serif !important;

    font-size:
        0.67rem !important;

    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.3 !important;
    text-transform: uppercase;
}

.about-body .about-text-body h1 {
    max-width: 720px;

    margin:
        0
        0
        clamp(30px, 4vw, 48px) !important;

    color:
        var(--wi-about-text);

    font-size:
        clamp(3rem, 5.3vw, 5.55rem);

    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.about-body .about-text-body p {
    max-width: 730px;

    margin: 0;

    color:
        var(--wi-about-muted);

    font-size:
        clamp(1rem, 1.35vw, 1.18rem) !important;

    line-height:
        1.86 !important;

    text-align:
        left !important;
}

.about-body .about-text-body p + p {
    margin-top:
        1.3rem;
}

.about-body .church-link {
    color:
        var(--wi-about-text) !important;

    text-decoration-color:
        var(--accent-color, #ffb534);

    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Existing four content pillars
|--------------------------------------------------------------------------
*/

.about-body .about-anchors {
    margin:
        0 !important;

    padding:
        clamp(74px, 9vw, 126px)
        0 !important;

    border-bottom:
        1px solid
        var(--wi-about-line);
}

.about-body .about-anchors > h1,
.about-body .about-theme {
    max-width: 760px;

    margin:
        0
        0
        clamp(36px, 5vw, 60px) !important;

    padding:
        0 !important;

    color:
        var(--wi-about-text);

    font-size:
        clamp(2.55rem, 4.4vw, 4.65rem);

    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;

    text-align:
        left !important;
}

.about-body .about-vison,
.about-body .about-vision {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap:
        14px !important;

    padding:
        0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.about-body .daily-capsules {
    position: relative;

    display: flex;
    min-width: 0;
    min-height: 245px;
    flex-direction: column;
    align-items: flex-start;

    padding:
        clamp(27px, 3vw, 36px) !important;

    overflow: hidden;

    border:
        1px solid
        var(--wi-about-line);

    border-radius: 13px;

    background:
        var(--wi-about-card) !important;

    color:
        var(--wi-about-text);

    text-align:
        left !important;

    box-shadow:
        none !important;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

/* Remove old decorative circle. */
.about-body .daily-capsules::after {
    content:
        none !important;
}

.about-body .daily-capsules:hover {
    border-color:
        rgba(255, 181, 52, 0.72);

    background:
        var(--wi-about-card-hover) !important;

    transform:
        translateY(-4px);
}

.about-body .daily-capsules img {
    display: block;

    width: 30px !important;
    height: 30px !important;

    margin:
        0
        0
        auto !important;

    padding: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    object-fit: contain;

    filter:
        brightness(0) !important;
}

body.dark-mode
.about-body
.daily-capsules img {
    filter:
        brightness(0)
        invert(1) !important;
}

.about-body .daily-capsules h2,
.about-body .daily-capsules h3,
.about-body .daily-capsules h4 {
    margin:
        50px
        0
        11px;

    color:
        var(--wi-about-text);

    font-family:
        "PT Serif",
        Georgia,
        serif;

    font-size:
        clamp(1.28rem, 1.8vw, 1.68rem);

    font-weight: 400;
    line-height: 1.15;
}

.about-body .daily-capsules p,
.about-body .daily-capsules span {
    margin: 0;

    color:
        var(--wi-about-muted);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.82rem;

    line-height:
        1.65;
}

/*
|--------------------------------------------------------------------------
| Existing abstract section
|--------------------------------------------------------------------------
*/

.about-body .about-abstract {
    position: relative;

    display: grid !important;
    grid-template-columns:
        minmax(210px, 0.72fr)
        minmax(0, 1.28fr) !important;

    align-items: start;

    gap:
        clamp(42px, 7vw, 104px);

    margin:
        0 !important;

    padding:
        clamp(76px, 9vw, 130px)
        0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-bottom:
        1px solid
        var(--wi-about-line) !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    color:
        var(--wi-about-text) !important;

    box-shadow:
        none !important;
}

/* Remove the previous colour-background ornaments. */
.about-body .about-abstract::before,
.about-body .about-abstract::after {
    content:
        none !important;
}

.about-body .about-abstract h1 {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        var(--wi-about-text) !important;

    font-size:
        clamp(2.55rem, 4.3vw, 4.55rem);

    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;

    text-align:
        left !important;
}

.about-body .about-abstract p {
    position: static !important;

    max-width: 760px;

    margin: 0;

    color:
        var(--wi-about-muted) !important;

    font-size:
        clamp(1rem, 1.35vw, 1.17rem) !important;

    line-height:
        1.88 !important;
}

.about-body .about-abstract p + p {
    margin-top:
        1.25rem;
}

.about-body .about-abstract a {
    color:
        var(--wi-about-text) !important;

    text-decoration-color:
        var(--accent-color, #ffb534);
}

/*
|--------------------------------------------------------------------------
| Full-width statistics band with icons
|--------------------------------------------------------------------------
*/

.glance {
    position: relative;
    left: 50%;

    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    width:
        100% !important;
    max-width:
        none !important;

    gap:
        0 !important;

    margin:
        0
        0
        clamp(84px, 10vw, 144px) !important;

    margin-left:
        -50vw !important;

    padding:
        clamp(58px, 7vw, 88px)
        max(
            var(--wi-about-page-edge),
            calc((100vw - var(--wi-about-width)) / 2)
        ) !important;

    background:
        #111111 !important;

    color:
        #ffffff !important;

    font-family:
        "Inter",
        sans-serif !important;
}

.glance > div {
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr);

    min-width: 0;
    min-height: 154px;
    align-items: center;

    gap:
        20px;

    padding:
        0
        clamp(22px, 3vw, 42px);

    border-right:
        1px solid
        var(--wi-about-stat-line);

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.glance > div:first-child {
    padding-left:
        0;
}

.glance > div:last-child {
    padding-right:
        0;

    border-right:
        0;
}

.glance > div::before {
    display: grid;
    width: 46px;
    height: 40px;
    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.42);

    border-radius: 50%;

    color:
        #ffffff;

    font-family:
        "Font Awesome 6 Free";

    font-size:
        1rem;

    font-weight: 900;
    line-height: 1;
}

.glance > div:nth-child(1)::before {
    content: "\f1ea";
}

.glance > div:nth-child(2)::before {
    content: "\f02c";
}

.glance > div:nth-child(3)::before {
    content: "\f06e";
}

.glance > div:nth-child(4)::before {
    content: "\f0ac";
}

.glance > div h2 {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    align-items: flex-start !important;

    gap:
        12px !important;

    margin:
        0 !important;

    color:
        #ffffff !important;

    font-family:
        "Inter",
        sans-serif !important;

    font-size:
        0.7rem !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.12em;

    line-height:
        1.35;

    text-transform:
        uppercase;
}

.glance .posts-count,
.glance .category-count,
.glance .read-count,
.glance .reach-count {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;

    gap:
        2px;
}

.glance .count {
    color:
        #ffffff !important;

    font-size:
        clamp(2.65rem, 4.2vw, 4.8rem) !important;

    font-weight:
        400 !important;

    letter-spacing:
        -0.055em;

    line-height:
        0.95;
}

.glance .plus {
    margin-left:
        2px;

    color:
        var(--accent-color, #ffb534) !important;

    font-family:
        "PT Serif",
        Georgia,
        serif;

    font-size:
        clamp(1.4rem, 2.1vw, 2.3rem);

    line-height:
        1;

    opacity:
        1 !important;
}

/*
|--------------------------------------------------------------------------
| Newsletter call-to-action
|--------------------------------------------------------------------------
|
| The layout follows the same wide, two-column treatment as the Contact
| page's Ministry & Partnerships section, while using an image behind it.
|
*/

.wi-about-newsletter {
    position: relative;

    width:
        min(
            var(--wi-about-width),
            calc(100% - (var(--wi-about-page-edge) * 2))
        );

    min-height:
        390px;

    margin:
        0
        auto
        clamp(90px, 10vw, 145px);

    overflow:
        hidden;

    border-radius:
        15px;

    background:
        #111111;

    color:
        #ffffff;
}

.wi-about-newsletter__media,
.wi-about-newsletter__veil {
    position:
        absolute;

    inset:
        0;
}

.wi-about-newsletter__media img {
    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;
    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}

.wi-about-newsletter__image--dark {
    display:
        none !important;
}

body.dark-mode
.wi-about-newsletter__image--light {
    display:
        none !important;
}

body.dark-mode
.wi-about-newsletter__image--dark {
    display:
        block !important;
}

.wi-about-newsletter__veil {
    background:
        rgba(7, 9, 7, 0.7);
}

.wi-about-newsletter__content {
    position:
        relative;

    z-index:
        1;

    display:
        grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.85fr);

    min-height:
        370px;

    align-items:
        end;

    gap:
        clamp(40px, 7vw, 96px);

    padding:
        clamp(42px, 6vw, 72px);
}

.wi-about-newsletter__eyebrow {
    margin:
        0
        0
        19px;

    color:
        rgba(255, 255, 255, 0.76);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}

.wi-about-newsletter h2 {
    max-width:
        610px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(2.75rem, 4.6vw, 5rem);

    font-weight:
        400;

    letter-spacing:
        -0.055em;

    line-height:
        0.98;
}

.wi-about-newsletter__body > p {
    max-width:
        520px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.78);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.87rem;

    line-height:
        1.7;
}

/*
| Reuse the existing working newsletter component and restyle it locally.
*/

.wi-about-newsletter .newsletter-sr-only {
    position:
        absolute !important;

    width:
        1px !important;
    height:
        1px !important;

    padding:
        0 !important;
    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}

.wi-about-newsletter .subscribe-form {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        start;

    gap:
        10px;

    width:
        100% !important;
    max-width:
        540px !important;

    margin:
        25px
        0
        0 !important;
}

.wi-about-newsletter .newsletter-footer__field {
    position:
        relative;

    width:
        100%;
}

.wi-about-newsletter
.newsletter-footer__field input {
    width:
        100%;

    min-height:
        50px;

    margin:
        0 !important;

    padding:
        0
        46px
        0
        16px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.46) !important;

    border-radius:
        7px !important;

    background:
        rgba(255, 255, 255, 0.1) !important;

    color:
        #ffffff !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.86rem;

    outline:
        none;
}

.wi-about-newsletter
.newsletter-footer__field input::placeholder {
    color:
        rgba(255, 255, 255, 0.68);
}

.wi-about-newsletter
.newsletter-footer__field input:focus {
    border-color:
        #ffffff !important;

    box-shadow:
        0
        0
        0
        3px
        rgba(255, 255, 255, 0.13);
}

.wi-about-newsletter .email-icon {
    position:
        absolute !important;

    top:
        50% !important;
    right:
        16px !important;

    color:
        rgba(255, 255, 255, 0.75) !important;

    font-size:
        0.92rem;

    transform:
        translateY(-50%);

    pointer-events:
        none;
}

.wi-about-newsletter .subscribe-button {
    display:
        inline-flex !important;

    width:
        auto !important;

    min-width:
        118px;
    min-height:
        50px;

    align-items:
        center;
    justify-content:
        center;

    margin:
        0 !important;

    padding:
        0
        22px !important;

    border:
        1px solid
        #ffffff !important;

    border-radius:
        7px !important;

    background:
        #ffffff !important;

    color:
        #111111 !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.79rem;

    font-weight:
        700;

    cursor:
        pointer;
}

.wi-about-newsletter
.subscribe-button:hover {
    border-color:
        var(--accent-color, #ffb534) !important;

    background:
        var(--accent-color, #ffb534) !important;
}

.wi-about-newsletter
.subscribe-button:disabled {
    opacity:
        0.72;

    cursor:
        wait;
}

.wi-about-newsletter
.newsletter-footer__message {
    grid-column:
        1 / -1;

    min-height:
        1.3em;

    margin:
        2px
        0
        0 !important;

    color:
        #ffffff;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1.45;
}

.wi-about-newsletter
.newsletter-footer__message.is-success {
    color:
        #d3f5d8;
}

.wi-about-newsletter
.newsletter-footer__message.is-error {
    color:
        #ffc2c2;
}

.wi-about-newsletter__privacy {
    margin:
        12px
        0
        0 !important;

    color:
        rgba(255, 255, 255, 0.58) !important;

    font-size:
        0.68rem !important;
}

/*
|--------------------------------------------------------------------------
| Social account section - Contact-page card language
|--------------------------------------------------------------------------
*/

.accounts-social {
    width:
        min(
            var(--wi-about-width),
            calc(100% - (var(--wi-about-page-edge) * 2))
        ) !important;

    margin:
        0
        auto
        clamp(88px, 10vw, 142px) !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--wi-about-text);

    box-shadow:
        none !important;

    text-align:
        left !important;
}

.accounts-social h1 {
    max-width:
        800px;

    margin:
        0
        0
        clamp(34px, 5vw, 54px) !important;

    color:
        var(--wi-about-text);

    font-size:
        clamp(2.65rem, 4.5vw, 4.85rem);

    font-weight:
        400;

    letter-spacing:
        -0.05em;

    line-height:
        1;
}

.accounts-social .account-icons {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width:
        100%;
    max-width:
        none !important;

    gap:
        12px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.accounts-social .account-icons a {
    display:
        flex !important;

    min-width:
        0;
    min-height:
        76px;

    align-items:
        center;
    justify-content:
        flex-start;

    gap:
        14px !important;

    margin:
        0 !important;

    padding:
        18px
        20px !important;

    border:
        1px solid
        var(--wi-about-line) !important;

    border-radius:
        12px !important;

    background:
        var(--wi-about-card) !important;

    color:
        var(--wi-about-muted) !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.81rem !important;

    font-weight:
        600 !important;

    line-height:
        1.35;

    text-align:
        left;

    text-decoration:
        none;

    box-shadow:
        none !important;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.accounts-social .account-icons a i {
    position:
        static !important;

    display:
        inline-grid;

    width:
        30px;
    height:
        30px;

    flex:
        0 0
        30px;

    place-items:
        center;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--wi-about-text) !important;

    font-size:
        1rem !important;
}

.accounts-social .account-icons a:hover {
    border-color:
        rgba(255, 181, 52, 0.75) !important;

    background:
        var(--wi-about-card-hover) !important;

    color:
        var(--wi-about-text) !important;

    transform:
        translateY(-3px);
}

/*
|--------------------------------------------------------------------------
| Focus states
|--------------------------------------------------------------------------
*/

.about-body a:focus-visible,
.accounts-social a:focus-visible,
.wi-about-newsletter input:focus-visible,
.wi-about-newsletter button:focus-visible {
    outline:
        3px solid
        rgba(255, 181, 52, 0.42);

    outline-offset:
        4px;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1020px) {
    .about-body .about-info {
        grid-template-columns:
            1fr !important;

        gap:
            42px !important;
    }

    .about-body .about-info > img {
        width:
            min(620px, 100%) !important;

        aspect-ratio:
            16 / 11;

        object-position:
            center 22%;
    }

    .about-body .about-vison,
    .about-body .about-vision {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .about-body .about-abstract {
        grid-template-columns:
            1fr !important;

        gap:
            34px;
    }

    .glance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .glance > div {
        min-height:
            135px;

        border-bottom:
            1px solid
            var(--wi-about-stat-line);
    }

    .glance > div:nth-child(2) {
        border-right:
            0;
    }

    .glance > div:nth-child(3),
    .glance > div:nth-child(4) {
        border-bottom:
            0;
    }

    .glance > div:nth-child(3) {
        padding-left:
            0;
    }

    .wi-about-newsletter__content {
        grid-template-columns:
            1fr;

        align-content:
            end;
    }

    .accounts-social .account-icons {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 680px) {
    .wi-about-hero {
        padding:
            48px
            0
            60px;
    }

    .wi-about-hero__eyebrow {
        margin-bottom:
            19px;
    }

    .wi-about-hero h1 {
        font-size:
            clamp(3.25rem, 17vw, 5rem);

        letter-spacing:
            -0.06em;
    }

    .wi-about-hero__intro {
        margin-top:
            22px;

        font-size:
            0.86rem;
    }

    .about-body .about-info {
        gap:
            34px !important;

        padding:
            58px
            0 !important;
    }

    .about-body .about-info > img {
        aspect-ratio:
            4 / 5;

        border-radius:
            11px !important;
    }

    .about-body .about-text-body h1 {
        margin-bottom:
            26px !important;

        font-size:
            clamp(2.65rem, 13.5vw, 4rem);
    }

    .about-body .about-text-body p {
        font-size:
            1rem !important;

        line-height:
            1.78 !important;
    }

    .about-body .about-anchors {
        padding:
            58px
            0 !important;
    }

    .about-body .about-anchors > h1,
    .about-body .about-theme {
        font-size:
            clamp(2.35rem, 12vw, 3.55rem);

        text-align:
            left !important;
    }

    .about-body .about-vison,
    .about-body .about-vision {
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;
    }

    .about-body .daily-capsules {
        min-height:
            210px;

        padding:
            27px !important;
    }

    .about-body .about-abstract {
        gap:
            27px;

        padding:
            58px
            0 !important;
    }

    .about-body .about-abstract h1 {
        font-size:
            clamp(2.35rem, 12vw, 3.55rem);

        text-align:
            left !important;
    }

    .about-body .about-abstract p {
        font-size:
            1rem !important;

        line-height:
            1.78 !important;
    }

    .glance {
        grid-template-columns:
            1fr !important;

        padding:
            44px
            var(--wi-about-page-edge) !important;
    }

    .glance > div,
    .glance > div:first-child,
    .glance > div:nth-child(3),
    .glance > div:last-child {
        min-height:
            118px;

        padding:
            22px
            0 !important;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--wi-about-stat-line);
    }

    .glance > div:last-child {
        border-bottom:
            0;
    }

    .wi-about-newsletter {
        min-height:
            540px;

        border-radius:
            12px;
    }

    .wi-about-newsletter__content {
        min-height:
            540px;

        gap:
            32px;

        padding:
            34px
            25px;
    }

    .wi-about-newsletter h2 {
        font-size:
            clamp(2.45rem, 12vw, 3.7rem);
    }

    .wi-about-newsletter .subscribe-form {
        grid-template-columns:
            1fr;
    }

    .wi-about-newsletter .subscribe-button {
        width:
            100% !important;
    }

    .accounts-social h1 {
        font-size:
            clamp(2.45rem, 12vw, 3.7rem);
    }

    .accounts-social .account-icons {
        grid-template-columns:
            1fr !important;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .about-body *,
    .about-body *::before,
    .about-body *::after,
    .glance *,
    .glance *::before,
    .glance *::after,
    .accounts-social *,
    .accounts-social *::before,
    .accounts-social *::after,
    .wi-about-newsletter *,
    .wi-about-newsletter *::before,
    .wi-about-newsletter *::after {
        transition:
            none !important;
    }
}