/* Image-led, fully block-editable About page. */
.wp-block-group.bb-about-page {
    width: auto;
    max-width: none;
    margin: 0 calc(-1 * var(--bb-page-gutter));
    overflow: hidden;
    background: var(--wp--preset--color--canvas);
}
.bb-about-page > * { margin-block: 0 !important; }
.bb-about-page :is(h1,h2,h3,p,figure,ul) { margin-block-end: 0; }
.bb-about-page :is(h1, h2, h3, h4, h5, h6) em {
    font-family: var(--wp--preset--font-family--cormorant-garamond);
    font-weight: inherit;
}
.bb-about-editorial {
    font-family: var(--wp--preset--font-family--switzer);
    font-size: var(--wp--preset--font-size--body);
    font-style: normal;
    line-height: 1.5;
}
.bb-about-page :is(.bb-about-story,.bb-about-buddy,.bb-about-approach,.bb-about-connected,.bb-about-promise,.bb-about-cta) {
    padding: var(--wp--preset--spacing--96) var(--bb-page-gutter);
}

/* Point of view: heading and story side by side, like the homepage introductions. */
.bb-about-story { background: var(--wp--custom--color--black--50); }
.wp-block-group.bb-about-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: var(--wp--preset--spacing--64);
    align-items: end;
}
.wp-block-group.bb-about-story__inner > * { margin-block: 0; min-width: 0; }
.wp-block-group.bb-about-story__heading {
    display: grid;
    gap: var(--wp--preset--spacing--24);
}
.bb-about-story__heading h2 { max-width: 22ch; text-wrap: balance; }
.bb-about-promise__heading {
    display: grid;
    grid-template-columns: 3fr 8fr;
    gap: var(--wp--preset--spacing--64);
    align-items: start;
}
.bb-about-story__heading h2,
.bb-about-buddy__content h2,
.bb-about-approach__heading h2,
.bb-about-connected__copy h2,
.bb-about-promise__heading h2,
.bb-about-cta__inner h2 {
    margin: 0;
    font-size: clamp(2.75rem,4vw,4.5rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.04em;
}
.bb-about-story__heading h2 em,
.bb-about-approach__heading h2 em,
.bb-about-connected__copy h2 em,
.bb-about-promise__heading h2 em,
.bb-about-cta__inner h2 em { color: var(--wp--preset--color--accent-text); }
.wp-block-group.bb-about-story__body {
    display: grid;
    gap: var(--wp--preset--spacing--16);
    max-width: 520px;
}
:is(.wp-site-blocks, .editor-styles-wrapper) .bb-about-story__body > .bb-about-editorial {
    padding-block-end: var(--wp--preset--spacing--8);
    color: var(--wp--preset--color--ink);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
    text-align: left;
}
.bb-about-story__body > p:not(.bb-about-editorial) { color: var(--wp--preset--color--body); hyphens: manual; }
.wp-block-group.bb-about-story__principles {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding-block-start: var(--bb-content-gap);
    border-top: 1px solid var(--wp--preset--color--border);
}
/* Same card language as the contact steps: white surface, orange number badge. */
.bb-about-principle {
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--32);
    border-radius: var(--wp--preset--spacing--24);
    background: var(--wp--preset--color--white);
}
.bb-about-step > p:first-child {
    color: var(--wp--preset--color--accent-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
}
:is(.wp-site-blocks, .editor-styles-wrapper) .bb-about-principle > p:first-child {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}
.bb-about-principle h3 { margin-block-start: var(--wp--preset--spacing--40); }
.bb-about-principle h3 + p { color: var(--wp--preset--color--body); text-align: left; hyphens: manual; }

/* Why Buddy */
.bb-about-buddy { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.bb-about-buddy__inner {
    display: grid;
    grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
    gap: clamp(32px,5vw,80px);
    align-items: start;
}
.bb-about-buddy__media { position: relative; margin-block-start: 0; }
.bb-about-buddy__content { min-width: 0; margin-block-start: 0; }
.bb-about-buddy__media figure {
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: var(--wp--preset--spacing--24);
}
.bb-about-buddy__media img,
.bb-about-connected__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bb-about-buddy__media img { object-position: center; }
.bb-about-buddy__caption {
    position: static;
    max-width: none;
    margin: var(--wp--preset--spacing--20) 0 0;
    box-sizing: border-box;
    padding: 0 0 0 var(--wp--preset--spacing--16);
    border-left: 2px solid var(--wp--preset--color--accent);
    border-radius: 0;
    background: transparent;
    color: var(--wp--custom--color--black--200);
    font-family: var(--wp--preset--font-family--switzer);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.5;
}
.bb-about-buddy__content h2 { margin-block-start: var(--wp--preset--spacing--20); color: var(--wp--preset--color--white); text-wrap: balance; }
.bb-about-buddy__content h2 em { color: var(--wp--preset--color--accent); }
.bb-about-buddy__content :is(.bb-about-buddy__intro,.bb-about-buddy__body,.bb-about-buddy__promise,.bb-about-buddy__closing) {
    font-family: var(--wp--preset--font-family--switzer);
    font-size: var(--wp--preset--font-size--body);
    font-style: normal;
    line-height: 1.5;
}
.bb-about-buddy__content .bb-about-buddy__intro {
    margin-block-start: var(--wp--preset--spacing--24);
    color: var(--wp--preset--color--white);
    font-weight: 600;
}
.bb-about-buddy__content .bb-about-buddy__body { margin-block-start: var(--wp--preset--spacing--20); color: var(--wp--custom--color--black--200); }
.bb-about-buddy__content .bb-about-buddy__promise { margin-block-start: var(--wp--preset--spacing--32); color: var(--wp--preset--color--white); }
.bb-about-buddy__content .bb-about-buddy__closing { margin-block-start: var(--wp--preset--spacing--24); color: var(--wp--custom--color--black--200); }
.bb-about-buddy__content .bb-about-editorial { margin-block-start: var(--wp--preset--spacing--32); color: var(--wp--custom--color--black--200); }
.bb-about-buddy__list {
    margin-block-start: var(--wp--preset--spacing--24) !important;
    padding: 0;
    list-style: none;
}
.bb-about-buddy__list li {
    padding-block: var(--wp--preset--spacing--12);
    border-top: 1px solid rgba(255,255,255,.07);
    color: var(--wp--preset--color--white);
}
.bb-about-buddy__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }

/* Approach */
.bb-about-approach { background: var(--wp--preset--color--canvas); }
.bb-about-approach__heading {
    display: grid;
    grid-template-columns: minmax(280px,480px) minmax(0,1fr);
    column-gap: var(--wp--preset--spacing--48);
    row-gap: var(--wp--preset--spacing--12);
    align-items: center;
}
.bb-about-approach__heading .bb-about-label { grid-column: 1; grid-row: 1; }
.bb-about-approach__heading h2 { grid-column: 1; grid-row: 2; }
.bb-about-approach__heading > p:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    max-width: 40ch;
    color: var(--wp--preset--color--secondary);
    text-align: right;
}
.bb-about-approach__steps {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: var(--wp--preset--spacing--16);
    margin-block-start: var(--wp--preset--spacing--64);
}
.bb-about-step {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--24);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--preset--spacing--24);
    background: var(--wp--preset--color--white);
    transition: transform .35s ease, border-color .35s ease;
}
.bb-about-step:nth-child(2) { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.bb-about-step:nth-child(2) > p:first-child { color: var(--wp--preset--color--ink); }
.bb-about-step > p:first-child { margin: 0 0 auto; }
.bb-about-step h3 { margin: 0; }
.bb-about-step h3 + p { margin-block-start: var(--wp--preset--spacing--16); color: var(--wp--preset--color--body); }
.bb-about-step:hover { transform: translateY(-8px); border-color: var(--wp--preset--color--accent); }

/* Connected */
.bb-about-connected { background: var(--wp--preset--color--white); }
.bb-about-connected__inner {
    display: grid;
    grid-template-columns: minmax(340px,.8fr) minmax(0,1.2fr);
    gap: clamp(48px,7vw,112px);
    align-items: center;
}
.bb-about-connected__copy h2 { margin-block-start: var(--wp--preset--spacing--32); }
.bb-about-connected__copy .bb-about-editorial,
.bb-about-connected__copy > p:not(.bb-about-label) { margin-block-start: var(--wp--preset--spacing--32); }
.bb-about-connected__copy > p:not(.bb-about-label):not(.bb-about-editorial) { color: var(--wp--preset--color--body); }
.bb-about-connected__copy .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--40); }
.bb-about-connected__media { position: relative; min-height: 650px; }
.bb-about-connected__image--main {
    position: absolute;
    inset: 0 0 64px 12%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--wp--preset--spacing--24);
}
.bb-about-connected__image--detail {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48%;
    aspect-ratio: 4/3;
    margin: 0;
    overflow: hidden;
    border: 8px solid var(--wp--preset--color--white);
    border-radius: var(--wp--preset--spacing--20);
    box-shadow: 0 20px 56px rgba(23,23,23,.16);
}

/* Promise and CTA */
.bb-about-promise {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--canvas);
}
.bb-about-promise__inner {
    max-width: 1280px;
    display: grid;
    grid-template-columns: minmax(280px,480px) minmax(0,1fr);
    column-gap: var(--wp--preset--spacing--32);
    align-items: center;
}
.bb-about-promise__heading {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--12);
}
.bb-about-promise .bb-about-label {
    color: var(--wp--preset--color--accent);
}
.bb-about-promise__heading h2 {
    color: var(--wp--preset--color--canvas);
    max-width: 460px;
    font-size: clamp(3rem,4.6vw,5rem);
    text-wrap: balance;
}
.bb-about-promise__heading h2 em { color: var(--wp--preset--color--accent); }
.bb-about-promise__list {
    display: grid;
    max-width: 780px;
    gap: var(--wp--preset--spacing--12);
    counter-reset: bb-promise;
}
.bb-about-promise__list > .wp-block-group {
    counter-increment: bb-promise;
    margin-block-start: 0 !important;
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: var(--wp--preset--spacing--24);
    row-gap: var(--wp--preset--spacing--8);
    align-items: center;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
    border: 1px solid rgba(247,246,242,.16);
    border-radius: var(--wp--preset--spacing--20);
    background: rgba(247,246,242,.05);
    transition: background-color .3s ease, transform .3s cubic-bezier(.2,.75,.2,1);
}
.bb-about-promise__list > .wp-block-group::before {
    content: "0" counter(bb-promise);
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--wp--preset--color--accent);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: .12em;
}
.bb-about-promise__list > .wp-block-group:hover {
    background: rgba(247,246,242,.09);
    transform: translateX(6px);
}
.bb-about-promise__list p {
    grid-column: 2;
    margin: 0;
    color: var(--wp--preset--color--canvas);
    line-height: 1.45;
}
.bb-about-promise__list p:first-of-type { grid-row: 1; color: rgba(247,246,242,.78); }
.bb-about-promise__list p:last-child {
    grid-row: 2;
    font-size: clamp(1.05rem,1.25vw,1.25rem);
    font-weight: 700;
}
.bb-about-cta {
    padding: var(--wp--preset--spacing--96) var(--bb-page-gutter);
    background:
        radial-gradient(circle at 50% 120%, rgba(244,119,43,.17), transparent 46%),
        var(--wp--preset--color--canvas);
}
.bb-about-cta__inner {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}
.bb-about-cta__inner h2 { margin-block-start: var(--wp--preset--spacing--32); font-size: clamp(3.5rem,6vw,6.5rem); }
.bb-about-cta__inner > p:not(.bb-about-label) { max-width: 640px; margin: var(--wp--preset--spacing--32) auto 0; color: var(--wp--preset--color--body); font-size: var(--wp--preset--font-size--medium); }
.bb-about-cta__inner .wp-block-buttons { justify-content: center; margin-block-start: var(--wp--preset--spacing--40); }

@media (max-width: 1000px) {
    .wp-block-group.bb-about-story__inner,
    .bb-about-buddy__inner,
    .bb-about-connected__inner { grid-template-columns: 1fr; }
    .wp-block-group.bb-about-story__inner { row-gap: var(--wp--preset--spacing--32); }
    .wp-block-group.bb-about-story__body { max-width: 640px; }
    .bb-about-buddy__content { max-width: 720px; }
    .bb-about-approach__steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bb-about-connected__copy { max-width: 720px; }
    .bb-about-promise__inner { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--24); }
    .bb-about-promise__heading h2 { max-width: none; }
    .bb-about-promise__list { margin-block-start: var(--wp--preset--spacing--24); }
}

@media (max-width: 600px) {
    .bb-about-page :is(.bb-about-story,.bb-about-buddy,.bb-about-approach,.bb-about-connected,.bb-about-promise,.bb-about-cta) { padding-block: var(--wp--preset--spacing--64); }
    .bb-about-cta__inner h2 { font-size: 3rem; line-height: 1.02; }
    .bb-about-story__heading h2,
    .bb-about-buddy__content h2,
    .bb-about-approach__heading h2,
    .bb-about-connected__copy h2,
    .bb-about-promise__heading h2 { font-size: 2.75rem; line-height: 1.05; }
    .wp-block-group.bb-about-story__principles,
    .bb-about-approach__heading,
    .bb-about-approach__steps,
    .bb-about-promise__list > .wp-block-group { grid-template-columns: 1fr; }
    .bb-about-approach__heading h2,
    .bb-about-approach__heading > p:last-child { grid-column: 1; grid-row: auto; }
    .bb-about-story__principles,
    .bb-about-approach__steps { gap: var(--wp--preset--spacing--12); }
    .bb-about-promise__list { margin-block-start: var(--wp--preset--spacing--40); }
    .bb-about-promise__list > .wp-block-group {
        grid-template-columns: 36px minmax(0,1fr);
        gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
        padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--20);
    }
    .bb-about-promise__list > .wp-block-group::before { grid-row: 1 / 3; align-self: start; padding-block-start: 5px; }
    .bb-about-promise__list > .wp-block-group > p { grid-column: 2; }
    .bb-about-story__body > p:not(.bb-about-editorial) { text-align: left; }
    .bb-about-principle { padding: var(--wp--preset--spacing--24); }
    .bb-about-principle h3 { margin-block-start: var(--wp--preset--spacing--24); }
    .bb-about-step { min-height: 300px; }
    .bb-about-buddy__media figure { height: auto; }
    .bb-about-buddy__caption { font-size: 1rem; }
    .bb-about-connected__media { min-height: 440px; }
    .bb-about-connected__image--main { inset: 0 0 48px 8%; }
    .bb-about-connected__image--detail { width: 58%; border-width: 5px; }
}


/* Grid gaps provide spacing; WordPress flow margins must not offset cards. */
.bb-about-story__principles > .bb-about-principle,
.bb-about-approach__steps > .bb-about-step {
    margin-block: 0;
}

@media (max-width: 600px) {
    :is(.bb-services-page, .bb-work-page) > .bb-about-cta { padding-block: var(--wp--preset--spacing--64); }
}

/* Keep the promise heading on two deliberate lines at every screen size. */
.bb-about-page .bb-about-promise__heading {
    container-type: inline-size;
    min-width: 0;
}
.bb-about-page .bb-about-promise__heading h2 {
    max-width: none;
    font-size: min(3rem, 10cqi);
    line-height: 1.15;
    white-space: nowrap;
    text-wrap: nowrap;
}
.bb-about-page .bb-about-promise__heading h2 em {
    display: block;
}
.bb-about-page .bb-about-promise__heading h2 em::first-letter {
    text-transform: uppercase;
}