/*======================================================
Section Surfaces
Grouped so each background is declared once instead of being
repeated for every section that uses it.
======================================================*/
.about-career-section,
.about-beliefs-section,
.about-media-section,
.about-fees-section{
    background-color: #faf8fc;
}

.about-facts-section,
.about-hub-section {
    background-color: #17102e;
}

.about-facts-section h2,
.about-facts-section h3,
.about-hub-section h2,
.about-hub-section h3 {
    color: #ffffff;
}

.about-facts-section p,
.about-hub-section p {
    color: #cfc6e6;
}

.about-hub-section .eyebrow {
    color: #a99bd1;
}

.about-hub-section p.deck {
    color: #bea9f0;
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Anchor targets clear the fixed header and the sticky jump navigation. */
.about-story-section,
.about-career-section,
.about-method-section,
.about-beliefs-section,
.about-experience-section,
.about-media-section,
.about-credentials-section,
.about-fees-section,
.about-faq-section {
    scroll-margin-top: 130px;
}

.about-experience-section .left-side{    padding-right: 50px;position: sticky; top: 180px;}

/*======================================================
Shared Card Pattern
Every card fills its grid cell so rows stay level, and they all
share one padding, border and hover treatment.
======================================================*/
.about-belief,
.about-media-card,
.about-edit-pane {
    height: 100%;
    padding: 30px;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    background-color: #ffffff;
}

.about-belief,
.about-media-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-belief:hover,
.about-media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(23, 16, 46, 0.1);
    border-color: #4b3585;
    text-decoration: none;
}

/* One gutter for every card grid on the page. */
.about-beliefs,
.about-media-grid,
.about-edit-row {
    row-gap: 24px;
}

/* One heading size for every card on the page. */
.about-beliefs-section .about-belief h3,
.about-media-section .about-media-card h3.about-media-outlet,
.about-credentials-section h3.about-credential-value,
.about-hub-section .about-hub-tile h3.about-hub-name,
.about-method-section .about-rules h3 {
font-size: 30px; line-height: 40px; margin: 0 0 15px; text-transform: capitalize;
}
.about-media-section .about-media-card h4.about-media-headline, .about-media-section h4.about-media-headline{font-size: 20px; line-height: 28px;}

/* Small uppercase label used inside cards and data strips. */
.about-fact-label,
.about-press-label,
.about-media-meta,
.about-media-date,
.about-credential-key,
.about-era-title,
.about-practical dt {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4b3585;
}
.about-timeline-year{display: block; font-size: 16px; font-weight: 600; line-height: 25px; letter-spacing: 0; text-transform: uppercase; color: #4b3585;}
.about-hub-action, .about-media-link{font-size: 16px; color: #17102e;}
.about-edit-tag{display: block; font-size: 20px; font-weight: 600; line-height: 31px; letter-spacing: 0; text-transform: uppercase;}


.about-prose h3 {
    margin-top: 20px;
}
.about-prose h3:first-child{margin-top: 0;}

/*======================================================
On Page Jump Navigation
======================================================*/
.about-jump-nav {
    position: sticky;
    top: 80px;
    z-index: 50;
    background-color: #ffffff;
    border-bottom: 1px solid #dfd8ec;
}

.about-jump-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    /* justify-content: center; */
    justify-content: start;

}

.about-jump-list::-webkit-scrollbar {
    display: none;
}

.about-jump-list a {
    padding: 20px 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: #6b6484;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.about-jump-list a:hover,
.about-jump-list a:focus,
.about-jump-list a.is-active {
    color: #0e0024;
    border-bottom-color: #4b3585;
    text-decoration: none;
}

/*======================================================
Hero Section
======================================================*/
.about-hero-section {
    background-image: linear-gradient(178deg, #faf8fc 0%, #ffffff 72%);
    border-top: 1px solid #dfd8ec;
}

.about-hero-row {
    align-items: center;
}

.about-hero-section h1 em {
    font-style: italic;
    color: #4b3585;
}

.about-hero-identity {
    margin: 28px 0;
}


.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 18px;
}

.about-hero-section p.about-hero-note {
    font-size: 16px;
    line-height: 22px;
    color: #6b6484;
    padding-bottom: 0;
}

.about-portrait {
    margin: 0;
}

.about-portrait img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 14px 44px rgba(23, 16, 46, 0.1);
}

.about-portrait figcaption {
font-size: 16px; line-height: 25px; color: #333; position: relative; z-index: 2; margin-top: 24px; padding: 22px 26px; border: 1px solid #dfd8ec; border-left: 4px solid #4b3585; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 18px rgba(17, 17, 17, .06);
}

/*======================================================
Brand Facts Section
======================================================*/
.about-facts-section {
    padding: 0;
}

.about-fact {
    padding: 40px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.13);
        text-align: center;
}

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

/* Reserves two label lines so every figure in the row sits on one baseline
   even when a label wraps. */
.about-facts-section .about-fact-label {
    /* min-height: 40px; */
    color: #a99bd1;
    margin-bottom: 10px;
}

.about-fact-number {
    display: block;
    font-size: 30px;
    line-height: 40px;
    color: #ffffff;
    margin-bottom: 10px;
}

.about-facts-section p.about-fact-context {
    font-size: 16px;
    line-height: 25px;
    color: #beb2dc;
    padding-bottom: 0;
}

/*======================================================
Press Section
======================================================*/
.about-press-section {
    background-color: #ffffff;
    border-bottom: 1px solid #dfd8ec;
}

.about-press-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.about-press-section .about-press-label {
    color: #6b6484;
}

.about-press-list a {
    font-size: 20px;
    line-height: 28px;
    color: #0e0024;
    /* opacity: 0.72; */
    transition: opacity 0.2s ease, color 0.2s ease;
}

.about-press-list a:hover,
.about-press-list a:focus {
    opacity: 1;
    color: #4b3585;
    text-decoration: none;
}


/*======================================================
Origin Story Section
Portrait on the left, the long-form story on the right.
======================================================*/
.about-story-row {
    /* align-items: center; */
    align-items: self-start;
    row-gap: 32px;
}

/* The story runs far longer than the portrait, so the image keeps pace
   with the reading column instead of leaving a gap beside it. */

.about-story-section .about-story-row .left-side{
     position: sticky;
    top: 140px;
    margin: 0;
}

.about-story-image {
    position: sticky;
    top: 140px;
    margin: 0;
}

.about-story-image img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 14px 44px rgba(23, 16, 46, 0.1);
}

.about-story-section .right-side {
    padding-left: 30px;
}


/*======================================================
Quote Section
======================================================*/
.about-quote-section {
    position: relative;
    overflow: hidden;
    background-color: #4b3585;
    text-align: center;
}

.about-quote-inner {
    position: relative;
    margin: 0;
}
.about-quote-mark1{font-size: 110px; color: #ffffff; opacity: 1; text-align: center; font-family: sans-serif; display: block; margin-top: 35px;}
.about-quote-text {
    position: relative;
    margin: 0 0 20px;
}

.about-quote-section .about-quote-text p {
    font-size: 30px;
    font-weight: 300;
    font-style: italic;
    line-height: 44px;
    color: #ffffff;
    padding-bottom: 0;
}

.about-quote-attribution {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d7cbf2;
}

/*======================================================
Second Career Section
======================================================*/
.about-eras {
    margin-top: 48px;
    row-gap: 24px;
}

/* Each career sits in its own card, matching the shared card pattern. */
.about-era-card {
    height: 100%;
    padding: 40px;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    background-color: #ffffff;
}

.about-era-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
    /* padding-bottom: 18px;
    border-bottom: 1px solid #dfd8ec; */
        padding-bottom: 0;
    border-bottom: 0;
}

.about-era-number {
font-size: 47px; line-height: 50px; color: #0e0024;
}

.about-career-section h3.about-era-title {
    margin: 0;
}

.about-career-section p.about-era-sub {
        font-style: italic;
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 0;
    min-height: 25px;
}

/* Entries read as label/detail rows separated by hairlines: the year holds
   the left column, the title and detail stack in the right one. */
.about-timeline {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.about-timeline > li {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 24px;
    padding: 20px 0;
    border-top: 1px solid #dfd8ec;
}

.about-timeline > li:last-child {
    padding-bottom: 0;
}

.about-timeline-year {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    padding-top: 5px;
}


/* A step below the card heading, so entry titles sit inside the narrow
   card column without wrapping over three lines. */
.about-career-section h4.about-timeline-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 6px;
}

.about-career-section p.about-timeline-detail {
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 0;
}

/*======================================================
Certificate Wall Figures
======================================================*/
.about-wall {
    margin: 48px 0 0;
}

.about-wall img {
    width: 100%;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    box-shadow: 0 14px 44px rgba(23, 16, 46, 0.1);
}

.about-wall figcaption {
font-size: 18px; line-height: 28px; color: #333; position: relative; z-index: 2; margin-top: 24px; padding: 22px 26px; border: 1px solid #dfd8ec; border-left: 4px solid #4b3585; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 18px rgba(17, 17, 17, .06);
}

.about-wall figcaption strong {
    color: #0e0024;
    font-weight: 600;
}

/*======================================================
Method Section
======================================================*/
.about-edit-row {
    margin-top: 10px;
    margin-bottom: 50px;
}

.about-method-section h3.about-edit-tag {
    margin: 0 0 16px;
}

.about-method-section .about-edit-pane p {
    font-size: 18px;
    line-height: 28px;
    padding-bottom: 0;
}

.about-edit-before {
    background-color: #fcf2f0;
    border-color: #efd3cd;
}

.about-method-section .about-edit-before h3.about-edit-tag {
    color: #b4301f;
}

.about-method-section .about-edit-before p {
color: #5e1e13; text-decoration: line-through; text-decoration-color: rgb(180 48 31 / 46%); text-decoration-thickness: 2.8px;
}

.about-edit-after {
    background-color: #f0f3fe;
    border-color: #cbd6f7;
}

.about-method-section .about-edit-after h3.about-edit-tag {
    color: #1e33a8;
}

.about-method-section .about-edit-after p {
    color: #11215e;
}

.about-method-section p.about-marginalia {
font-size: 22px; line-height: 34px; color: #0e0024; margin: 5px 0 10px 0; padding: 4px 0 4px 24px; border-left: 3px solid #4b3585; font-style: italic;
}

.about-rules {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    row-gap: 40px;
}

/* The divider is drawn inside the column gutter so each entry keeps its own
   rule, instead of the row reading as one line running across all three. */
.about-rules > li {
    position: relative;
    padding-top: 20px;
}

.about-rules > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background-color: #17102e;
}


/*======================================================
Beliefs Section
======================================================*/
.about-beliefs {
    margin-top: 44px;
}

.about-belief-number {
   margin-bottom: 15px; font-size: 40px; line-height: normal;display: block;
}


/*======================================================
Lived Experience Section
======================================================*/
.about-experience-section h3 {
font-size: 30px; line-height: 37px; margin-bottom: 15px;
}

.about-experience-section .row{align-items: self-start;}

/*======================================================
Media Section
======================================================*/
.about-media-lead {
    margin-top: 44px;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: hidden;
      margin-left: 0;
    margin-right: 0;
}

.about-media-body {
    padding: 40px;
}

.about-media-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    background-color: #17102e;
}


.about-media-meta,
.about-media-date {
    margin-bottom: 16px;
}



.about-media-section .about-media-aside h4.about-media-key {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a99bd1;
    margin: 0 0 14px;
}

.about-media-quote {
margin: 0 0 25px; padding-left: 12px; border-left: 2px solid #17102e;
}

.about-media-section .about-media-quote p {
    font-style: italic;
    font-size: 18px;
    line-height: 25px;
    color: #4b3585;
    padding-bottom: 0;
}

.about-media-aside .about-media-quote {
    border-left-color: rgba(255, 255, 255, 0.24);
}

.about-media-section .about-media-aside .about-media-quote p {
    font-size: 21px;
    line-height: 32px;
    color: #ffffff;
}

.about-media-section .about-media-aside p.about-media-note {
    font-size: 14px;
    line-height: 22px;
    color: #beb2dc;
    padding-bottom: 0;
}

.about-media-link {
    display: inline-block;
    color: #4b3585;
}

.about-media-section .about-media-date {
    color: #6b6484;
}

.about-media-grid {
    margin-top: 24px;
}

.about-media-card {
    display: flex;
    flex-direction: column;
}

.about-media-section .about-media-card p.about-media-topic {
    flex: 1 1 auto;
    padding-bottom: 20px;
}

.about-media-section p.about-media-footnote {
    margin-top: 32px;
    padding-bottom: 0;
}

/*======================================================
Credentials and Independent Sources Section
One panel split into a wide credentials column and a narrower
column of independent profile links.
======================================================*/
.about-verify-panel {
    background-color: #ffffff;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    overflow: hidden;
}

.about-verify-main {
    padding: 55px 50px;
}

.about-verify-aside {
    padding: 55px 45px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- left: credentials ---- */
.about-credentials {
    margin-top: 40px;
}

.about-credential {
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid #dfd8ec;
}

.about-credential:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.about-credential-key {
    margin-bottom: 10px;
}

.about-credentials-section p.about-credential-note {
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 14px;
}

.about-credential a {
    font-size: 14px;
    font-weight: 600;
}

/* ---- right: independent sources ---- */
.about-hub {
    margin-top: 40px;
}

.about-hub-tile {
    display: block;
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.about-hub-tile:hover{    text-decoration: none;}
.about-hub-tile:hover .about-hub-action{text-decoration: underline;}

.about-hub-tile:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.about-hub-section .about-hub-tile p.about-hub-note {
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 10px;
}

.about-hub-section .about-hub-action {
    /* color: #a99bd1; */
    transition: color 0.2s ease;
    font-size: 18px;
    color: #fff;
    text-decoration: underline;
}

.about-hub-tile:hover .about-hub-action,
.about-hub-tile:focus .about-hub-action {
    color: #ffffff;
}

/*======================================================
Practical Details and Serving Section
======================================================*/
.about-practical {
    margin: 20px 0 0;
    background-color: #ffffff;
    border: 1px solid #dfd8ec;
    border-radius: 4px;
    overflow: hidden;
}

.about-practical > div {
    padding: 30px;
    border-right: 1px solid #dfd8ec;
}

.about-practical > div:last-child {
    border-right: 0;
}

.about-practical dt {
    color: #6b6484;
    margin-bottom: 10px;
}

.about-practical dd {
    margin: 0;
    font-size: 30px;
    line-height: 42px;
    color: #0e0024;
}

.about-practical dd small {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 22px;
    color: #333333;
}

.about-fees-body {
    margin-top: 44px;
}

/* The two closing blocks read as a matched pair, each opened by a rule so
   their headings sit on one line however unevenly the copy runs. */
.about-fees-columns {
    margin-top: 44px;
    row-gap: 40px;
}

.about-fees-block {
    height: 100%;
    padding-top: 26px;
    border-top: 2px solid #17102e;
}

.about-fees-section h3 {
    margin-top: 0;
    font-size: 26px;
    line-height: 34px;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0 20px;
    padding: 0;
    list-style: none;
}

.about-tags li {
    padding: 8px 18px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #dfd8ec;
    border-radius: 999px;
}

/*======================================================
FAQ Section
======================================================*/
.about-faq {
    margin-top: 20px;
    border-top: 1px solid #dfd8ec;
}

.about-faq details {
    border-bottom: 1px solid #dfd8ec;
}

.about-faq summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 24px 46px 24px 0;
    font-size: 20px;
    line-height: 30px;
    color: #0e0024;
}

.about-faq summary::-webkit-details-marker {
    display: none;
}

.about-faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 22px;
    font-size: 26px;
    line-height: 1;
    color: #4b3585;
}

.about-faq details[open] summary::after {
    content: "\2013";
}

.about-faq-answer {
    padding: 0 6px 26px 0;
}

.about-faq-answer p {
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 0;
}

figure.about-portrait.mobile-version,
.about-story-image.mobile-image{
    display: none;
}


.about-story-section h2{ text-wrap-style: pretty;}


.logos-sect{
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center;
}





/*======================================================
Large Desktop
======================================================*/
@media (min-width: 1401px) and (max-width: 1800px) {




    .about-beliefs-section .about-belief h3, 
    .about-media-section .about-media-card h3.about-media-outlet, 
    .about-credentials-section h3.about-credential-value, 
    .about-hub-section .about-hub-tile h3.about-hub-name, 
    .about-method-section .about-rules h3 {
    font-size: 27px;
    line-height: 37px;
}

.about-facts-section { padding: 20px 0; }
.about-method-section p.about-marginalia { font-size: 20px; line-height: 34px;}


}
/*======================================================
Desktop
======================================================*/
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .about-experience-section .row {
    align-items: self-start;
}

.about-facts-section .about-fact-label{
    font-size: 12px;
}
.about-story-row{align-items: flex-start;}

.about-beliefs-section .about-belief h3, 
.about-media-section .about-media-card h3.about-media-outlet, 
.about-credentials-section h3.about-credential-value, 
.about-hub-section .about-hub-tile h3.about-hub-name, 
.about-method-section .about-rules h3{    
    font-size: 26px;
    line-height: 36px;
    margin: 0 0 10px;
}

.about-belief-number{font-size: 35px;}

.about-belief, .about-media-card, .about-edit-pane{
    padding: 24px;
}



.about-facts-section { padding: 20px 0; }

.about-timeline-year{font-size: 15px; line-height: 24px;}
.about-timeline > li{    column-gap: 15px;  }
.about-era-card{    padding: 30px 30px;}
.about-career-section h4.about-timeline-title {font-size: 18px; line-height: 26px;}
.about-fact { padding: 30px 10px;}
.about-facts-section p.about-fact-context { font-size: 15px;}
.about-fact-number{font-size: 28px; line-height: 38px;}
.about-portrait figcaption{    padding: 18px 18px;}



}

/*======================================================
Laptop
======================================================*/
@media (min-width: 992px) and (max-width: 1199.98px) {

    .about-era-card {
        padding: 30px;
    }

    .about-timeline > li {
        grid-template-columns: 140px 1fr;
        column-gap: 18px;
    }

    .about-verify-main {
        padding: 45px 36px;
    }

    .about-verify-aside {
        padding: 45px 32px;
    }

    .about-belief,
    .about-media-card,
    .about-edit-pane,
    .about-media-body,
    .about-media-aside,
    .about-practical > div,
    .about-fact {
        padding: 26px;
    }

    .about-story-row {
    align-items: flex-start}

.about-quote-section .about-quote-text p{
   font-size: 26px;
       line-height: 40px;
}

.about-career-section .about-eras .about-era{width: 100%;}

.about-beliefs-section .about-belief h3, 
.about-media-section .about-media-card h3.about-media-outlet, 
.about-credentials-section h3.about-credential-value, 
.about-hub-section .about-hub-tile h3.about-hub-name, 
.about-method-section .about-rules h3{    
    font-size: 26px;
    line-height: 36px;
    margin: 0 0 10px;
}

.about-belief-number{font-size: 35px;}


.about-facts-section {
    padding: 30px 0;
}
.about-fact-number{
    font-size: 26px;
}





}


/*======================================================
Tablet and Mobile Navigation
The desktop menu collapses into a stacked panel below the
fixed header, so the header height drops to 70px.
======================================================*/
@media (max-width: 991.98px) {


    .about-jump-nav {
        top: 80px;
    }

    .about-story-section,
    .about-career-section,
    .about-method-section,
    .about-beliefs-section,
    .about-experience-section,
    .about-media-section,
    .about-credentials-section,
    .about-fees-section,
    .about-faq-section {
        scroll-margin-top: 118px;
    }

    .about-story-row{row-gap: 0;}

    .about-experience-section h3,
    .about-fees-section h3,
    .about-media-section h3.about-media-outlet {
        font-size: 24px;
        line-height: 32px;
    }

    /* Card headings step down with the viewport. */
    .about-beliefs-section .about-belief h3,
    .about-media-section .about-media-card h3.about-media-outlet,
    .about-credentials-section h3.about-credential-value,
    .about-hub-section .about-hub-tile h3.about-hub-name,
    .about-method-section .about-rules h3 {
        font-size: 24px;
        line-height: 32px;
    }

    /* Hero */
    .about-hero-row {
        padding-top: 0;
    }

    .about-portrait {
        margin: 0 0 32px;
    }

    /* Scoped to the hero: only there does the portrait belong above the text.
       Left unscoped it also reordered the story and experience columns. */
    /* .about-hero-row .right-side {
        order: -1;
    } */


    /* Facts bar */
    .about-fact {
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }

    .about-fact:nth-child(2n) {
        border-right: 0;
    }

    .about-fact:last-child,
     .about-fact:nth-last-child(2) {
        border-bottom:0;
    }

    /* Two career timeline */
    .about-era-card {
        padding: 30px;
    }

  

    .about-story-section .right-side {
        padding-left: 0;
    }

    /* Credentials panel: the aside stacks under the main column, so its
       divider moves from the left edge to the top. */
    .about-verify-main {
        padding: 40px 32px;
    }

    .about-verify-aside {
        padding: 40px 32px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Practical strip */
    .about-practical > div {
        border-bottom: 1px solid #dfd8ec;
    }

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

    /* Quote */
    .about-quote-inner::before {
        top: -46px;
        font-size: 96px;
    }

    .about-quote-section .about-quote-text p {
        font-size: 26px;
        line-height: 38px;
    }



.about-fact:first-of-type{
padding-top: 0;

}
.about-fact:last-of-type{
padding-bottom: 0;

}
 
    
.about-hero-row .right-side{
        display: none;
}

figure.about-portrait.mobile-version{
    display: block;
}

.about-portrait img{
    border-radius: 14px;
}

.about-experience-section .left-side{
    padding-right: 12px;
}

.about-story-image.desktop-image{
    display:none
}

.about-story-image img{
    border-radius: 14px;
    
}


.about-story-image.mobile-image{
    display: block;
    margin-bottom: 20px;
}

/* Full width pills stay left aligned so the rest state and the label that
       rises on hover, which is anchored to the left edge, line up. */
    .about-hero-actions .common-btn {
        width: 100%;
        text-align: left;
    }

/* .col-12 {
    padding:0 15px;
} */

  .about-experience-section .row{
    align-items: self-start;
  }

  .about-beyond-section.common-sec h2 br{display: none;} 

.about-belief-number{
    font-size: 30px;
}

.logos-sect{
           flex-wrap: wrap;
                   gap: 10px;
}

  .about-story-image {
        position: static;
        top: auto;
        margin-bottom: 8px;
    }
  
  
.about-press-section .logos-sect img{
    width: auto;
    height: 80px;
}

.row {
    --bs-gutter-x:0;
}
  
  #sp-component{
  padding-right: 0;}

 .about-experience-section .left-side {
      
        padding-right: 12px;
    }

.about-hero-actions{
        flex-wrap: nowrap;
}







/*======================================================
Large Mobile and Small Tablet
======================================================*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .about-fact {
        border-right: 0;
    }
}


    
  .about-page-main-all-sec h4 {
        font-size: 20px;
        line-height: 28px;
    }

    .about-experience-section h3,
    .about-media-section h3.about-media-outlet {
        font-size: 22px;
        line-height: 30px;
        margin-top: 0;
    }

    .about-fees-section h3 {
        font-size: 22px;
        line-height: 30px;
    }

    .about-beliefs-section .about-belief h3,
    .about-media-section .about-media-card h3.about-media-outlet,
    .about-credentials-section h3.about-credential-value,
    .about-hub-section .about-hub-tile h3.about-hub-name,
    .about-method-section .about-rules h3 {
        font-size: 22px;
        line-height: 30px;
    }

    .about-hero-identity {
        /* padding-left: 20px; */
        margin: 24px 0;
    }

    .about-hero-actions .common-btn {
         min-width: 300px !important; max-width: 350px !important; text-align: left; margin-inline: auto;
    }

    .about-verify-main,
    .about-verify-aside {
        padding: 32px 24px;
    }

    .about-fact,
    .about-belief,
    .about-media-card,
    .about-edit-pane,
    .about-media-body,
    .about-media-aside,
    .about-practical > div {
        padding: 24px;
    }

    .about-fact,
    .about-practical > div {
        border-right: 0;
    }

    .about-media-lead,
    .about-beliefs,
    .about-credentials,
    .about-hub,
    .about-practical,
    .about-rules,
    .about-eras,
    .about-fees-body,
    .about-fees-columns,
    .about-faq,
    .about-wall {
        margin-top: 32px;
    }









    .about-era-card {
        padding: 20px 15px;
        
    }


.about-method-section p.about-marginalia{
    font-size: 16px;
        line-height: 26px;
        margin: 5px 0 10px 0;
        padding: 4px 0 4px 10px;
        border-left: 3px solid #4b3585;
}

.about-edit-row{
    margin-bottom: 0;
}

.about-rules{row-gap: 0px;}

.about-rules > li {
    position: relative;
    padding: 20px 5px;
}
.about-rules > li::before{
    left: 0;
}

.about-rules > li:last-of-type       {padding-bottom: 0;;}

.about-wall figcaption{
             font-size: 14px;
        line-height: 24px;
        padding: 15px 12px;
        border-left: 2px solid #4b3585;
}



.about-fact-number{font-size: 25px;}


.about-media-section .about-media-card h4.about-media-headline, .about-media-section h4.about-media-headline {
    font-size: 18px;
    line-height: 26px;
}

.about-media-section .about-media-date{margin-bottom: 10px;}

.about-fees-columns{row-gap: 30px;}

.about-timeline{margin-top: 20px ;}


  .about-experience-section .left-side {
        padding-right: 12px;
    }

/* .about-press-section .logos-sect a:nth-child(1) img{
        width: auto;
    height: 35px;
}
.about-press-section .logos-sect a:nth-child(2) img{
        width: auto;
    height: 60px;
}
.about-press-section .logos-sect a:nth-child(3) img{
        width: auto;
           height: 50px;
}
.about-press-section .logos-sect a:nth-child(4) img{
        width: 140px;
    height: auto;
}
.about-press-section .logos-sect a:nth-child(5) img{
    width: 130px;
    height: auto;

}
.about-press-section .logos-sect a:nth-child(6) img{    
        width: 150px;
    height: auto;
} */


/* 

.about-press-section .logos-sect a:nth-child(1) img{
        width: auto;
        height: 30px;
}
.about-press-section .logos-sect a:nth-child(2) img{
        width: auto;
        height: 50px;
}
.about-press-section .logos-sect a:nth-child(3) img{
        width: auto;
        height: 45px;
}
.about-press-section .logos-sect a:nth-child(4) img{
        width: 100px;
        height: auto;
}
.about-press-section .logos-sect a:nth-child(5) img{
    width: 90px;
    height: auto;
}
.about-press-section .logos-sect a:nth-child(6) img{
        width: 100px;
        height: auto;
} */

.logos-sect{
           flex-wrap: wrap;
                   gap: 10px;
}
.about-press-section .logos-sect img{
    width: auto;
    height: 80px;
}


.about-method-section .about-edit-pane p {
    font-size: 16px;
    line-height: 26px;}

.about-media-section .about-media-aside .about-media-quote p {
    font-size: 18px;
    line-height: 28px;}







}

/*======================================================
Mobile
======================================================*/
@media (max-width: 575.98px) {

   .about-page-main-all-sec h4 {
        font-size: 19px;
        line-height: 27px;
    }

    .about-beliefs-section .about-belief h3,
    .about-media-section .about-media-card h3.about-media-outlet,
    .about-credentials-section h3.about-credential-value,
    .about-hub-section .about-hub-tile h3.about-hub-name,
    .about-method-section .about-rules h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .about-jump-list a {
        padding: 13px 12px;
        font-size: 13px;
    }

    .about-hero-row {
        padding-top: 0;
    }

    .about-portrait {
        margin-bottom: 26px;
    }


    .about-quote-inner::before {
        top: -34px;
        font-size: 76px;
    }

    .about-quote-section .about-quote-text p {
        font-size: 22px;
        line-height: 33px;
    }

    .about-era-number {
        font-size: 26px;
        line-height: 34px;
    }

    /* The label column drops above its detail so neither is squeezed. */
    .about-timeline > li {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .about-timeline-year {
        grid-row: auto;
        padding-top: 0;
            font-size: 14px;
    }


    .about-career-section h4.about-timeline-title,
    .about-career-section p.about-timeline-detail {
        grid-column: 1;
        grid-row: auto;
    }
    .about-career-section h4.about-timeline-title{
        font-size: 18px;
    }
    .about-career-section p.about-timeline-detail{
        font-size: 16px;
    }
    

    .about-practical dd {
        font-size: 22px;
        line-height: 30px;
    }

    .about-faq summary {
        font-size: 18px;
        line-height: 27px;
        padding-right: 38px;
    }

    .about-faq summary::after {
        font-size: 24px;
        top: 24px;
    }


    .about-fact:nth-last-child(2){
                border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }
    .about-method-section h3.about-edit-tag {
    margin: 0 0 10px;
}   
.about-edit-tag{
    font-size: 18px;
}
}

/*======================================================
Small Phones
======================================================*/
@media (max-width: 400px) {
    .container-md {
        padding-left: 16px;
        padding-right: 16px;
    }

    .about-verify-main,
    .about-verify-aside {
        padding: 26px 20px;
    }

    .about-fact,
    .about-belief,
    .about-media-card,
    .about-edit-pane,
    .about-media-body,
    .about-media-aside,
    .about-practical > div {
        padding: 20px 15px;  
    }

    .about-tags li {
             font-size: 12px;
        padding: 6px 14px;
    }

}

/*======================================================
Extra Small Devices
======================================================*/
@media (min-width: 280px) and (max-width: 330px) {
    .container-md {
        padding-left: 12px;
        padding-right: 12px;
    }

    .about-quote-section .about-quote-text p {
        font-size: 20px;
        line-height: 30px;
    }

    .about-practical dd {
        font-size: 20px;
        line-height: 28px;
    }

    .about-faq summary {
        font-size: 17px;
        line-height: 26px;
    }

    .about-hero-actions .common-btn { min-width: 255px !important; max-width: 255px !important; text-align: left; margin-inline: auto; }
}

@media (max-width: 767.98px) {
.about-hero-actions{
        flex-wrap: wrap !important;
}


.row {
    --bs-gutter-x:0;
}
#sp-component{
  padding-right: 0;}

 .about-experience-section .left-side {
        position: static;
        padding-right: 12px;
    }
}



body.page-template-about .body-innerwrapper{
  overflow-x: unset;
}