/* =========================================================
   ABOUT PAGE — section-scoped styles only.
   All selectors prefixed with .about-* (per CLAUDE.md no-cross-section rule).
   The site-header sits transparently over the hero (light variant) until
   scroll reveals it via the existing global header behavior.
   ========================================================= */

/* ===== HEADER (page-scoped — light variant absolute over hero) ===== */
.about-page .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* Shared text underline pattern reused from website.css */
.about-hero-underline,
.about-builders-emphasis,
.about-final-cta-underline {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: 1px;
    text-decoration-skip-ink: none;
}
.about-hero-underline       { text-decoration-color: #b2baff; }
.about-builders-emphasis    { text-decoration-color: var(--clr-blue); }
.about-final-cta-underline  { text-decoration-color: var(--clr-blue); }

/* ===== HERO =====
   Full-bleed photo bg (Kathy at desk with tablet). Photo composition has the
   subject on the left and a bright window/wall on the right where the headline
   reads cleanly. */
.about-hero {
    position: relative;
    background-color: #fffdf8;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: -5% -15px;
    overflow: hidden;
    padding: 220px 0 140px;
    min-height: 880px;
}

.about-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px) 0 clamp(24px, 6vw, 80px);
}

.about-hero-content {
    margin-left: auto;
    max-width: 720px;
    padding-top: 60px;
    transform: translateX(clamp(0px, 4vw, 80px));
}

/* Geometric divider strip — floats inside the lavender stats section, just
   below the hero edge with comfortable space above and below it. */
.about-stats::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    background-image: url('../assets/images/1x/shape-border.png');
    background-repeat: repeat-x;
    background-size: auto 22px;
    background-position: left center;
    pointer-events: none;
    z-index: 3;
}

.about-hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--clr-navy);
    margin: 0 0 24px;
}
.about-hero-title .line { display: block; }

/* Hand-drawn yellow oval around "excellent." in the hero */
.about-hero-circle {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background-image: url('../assets/images/yellow-circle-scribble.svg');
    background-repeat: no-repeat;
    background-position: center 52%;
    background-size: 100% 110%;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.about-hero-lede {
    margin: 0 0 32px;
    max-width: 640px;
}

/* ===== STATS =====
   Lavender-light band with 3 stat columns. Each stat = red icon + bold serif
   number + body label. Sub-titles can include emphasis via <strong>. */
.about-stats {
    background: var(--clr-blue-light);
    padding: 126px 0 102px;
    position: relative;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.about-stats-lede {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 880px;
}

.about-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 56px);
    text-align: center;
    align-items: start;
}

/* Each stat is a 3-row stack: fixed icon row + number + label.
   Fixed icon row guarantees the number and label baselines align across
   columns even when the icons have different intrinsic aspect ratios. */
.about-stat {
    display: grid;
    grid-template-rows: 76px auto auto;
    align-items: end;
    justify-items: center;
    row-gap: 0;
}

.about-stat-icon {
    height: clamp(54px, 5.2vw, 72px);
    width: auto;
    align-self: end;
    display: block;
    color: var(--clr-red);
}
/* Stars icon is naturally wide & short; scale it down so it doesn't visually
   outweigh the badge & horn icons in the row. */
.about-stat:last-child .about-stat-icon {
    height: clamp(26px, 2.4vw, 34px);
}

/* "15 years" / "104 small business" / "24 5-star" — section-sublede size,
   weight 400 to keep the number visually anchored above the label.
   Local line-height override (0.95) — does NOT change the canonical
   section-sublede token; only tightens this stat block. */
.about-stat-num {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.94vw, 1.8rem);
    line-height: 0.95;
    letter-spacing: 0.2px;
    color: var(--clr-navy);
    margin: 18px 0 0;
}

/* Uses the canonical "section-sublede" typographic treatment. Line-height
   intentionally tighter (1.0) than the token's default for this row only. */
.about-stat-label {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.94vw, 1.8rem);
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--clr-navy);
    margin: 0;
}
.about-stat-label strong { font-weight: 500; }

/* ===== TEAM PHOTO BANNER =====
   Full-bleed photo. The mission band's yellow rectangle below this section
   pulls UP via negative margin so it overlaps the bottom of the photo. */
.about-team-banner {
    width: 100%;
    line-height: 0;
    background: #000;
}
.about-team-banner-img,
.about-team-banner-video {
    display: block;
    width: 100%;
    height: clamp(380px, 42vw, 620px);
    object-fit: cover;
    object-position: center 40%;
    pointer-events: none;
}

/* ===== MISSION =====
   Yellow rectangle overlaps the bottom of the team photo (negative margin-top
   on the band). Rectangle has rounded corners, white serif text with mixed
   weights for emphasis. Below: cream bg with a 2-column body. */
.about-mission {
    background: var(--clr-cream, #f5efe5);
    padding: 0 0 var(--section-py-lg);
}

.about-mission-container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 80px);
}

.about-mission-band {
    background: var(--clr-yellow);
    border-radius: 32px;
    padding: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 60px);
    margin: -120px auto 0;
    max-width: 1280px;
    position: relative;
    z-index: 2;
}
/* Scaled-down section-heading (~80%) to match the mockup proportions on
   the yellow band. Uses explicit `.line` spans to force the 4-line layout.
   Body weight is light (300) so the bold strongs ("marketing and
   communication" / "that moves people") stand out clearly. */
.about-mission-band p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 4.1vw, 3.6rem);
    line-height: 1.12;
    color: #fff;
    text-align: center;
    margin: 0;
}
.about-mission-band p .line { display: block; }
.about-mission-band p strong { font-weight: 500; }

.about-mission-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    margin-top: clamp(64px, 6vw, 96px);
}
/* Typography from .section-sublede (style.css). Layout only here. */
.about-mission-col-left p {
    margin: 0;
}
.about-mission-col-right p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
    margin: 0 0 16px;
}
.about-mission-col-right p:last-child { margin: 0; }

/* ===== 4 C's APPROACH =====
   4 large overlapping circles with mix-blend-mode multiply so the overlap
   regions tint to a darker blend of both colors (e.g. yellow + lavender = olive,
   lavender + red = burgundy, red + blue = navy). Labels sit above each circle
   with a colored brushstroke underline. */
.about-4cs {
    background: rgba(205, 211, 255, 0.19);
    padding: var(--section-py-lg) 0 96px;
    overflow-x: hidden;
}
/* Drop the container's horizontal padding for this section so the bigger
   circles can use the full viewport width without clipping the rightmost. */
.about-4cs .container {
    padding-left: clamp(12px, 2vw, 32px);
    padding-right: clamp(12px, 2vw, 32px);
}

.about-4cs-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    color: var(--clr-navy);
    text-align: center;
    margin: 0 0 51px;
}

.about-4cs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    isolation: isolate; /* keeps mix-blend within this section */
}
.about-4cs-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.about-4cs-label {
    text-align: center;
    margin-bottom: 14px; /* clean breathing room above the circle */
    font-family: var(--font-display);
    color: var(--clr-navy);
    z-index: 2;
}
/* Label: black serif text with a colored underline that hugs the baseline.
   Underline is rendered via ::after so it can sit close to the letters
   without being shifted by descenders. */
.about-4cs-label strong {
    position: relative;
    display: inline-block;
    color: var(--clr-navy);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.95vw, 1.75rem);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    padding-bottom: 4px;
}
.about-4cs-label strong::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--label-underline, var(--clr-navy));
    border-radius: 2px;
}
.about-4cs-label .about-4cs-script {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
.about-4cs-label span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    margin-top: 8px;
    color: var(--clr-navy);
    letter-spacing: 0.2px;
}
.about-4cs-label--yellow   { --label-underline: #f6bf00; }
.about-4cs-label--lavender { --label-underline: #8090ff; }
.about-4cs-label--red      { --label-underline: #ff512d; }
.about-4cs-label--blue     { --label-underline: #0152f5; }

/* Release the lavender ("Clarity — Brand") label from uppercase so it reads as
   mixed-case and visually contrasts with the all-caps "CLARITY (Messaging)"
   sibling above it. */
.about-4cs-label--lavender strong { text-transform: none; }

/* Circle: fixed square with a 2px navy border so the four shapes interlock
   visibly when they overlap. mix-blend-mode multiply keeps overlap regions
   tinted darker without affecting the borders. flex-direction column stacks
   the body paragraphs top-to-bottom (instead of side-by-side). */
.about-4cs-circle {
    position: relative;
    width: clamp(275px, 27.5vw, 400px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--clr-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(34px, 3.6vw, 54px);
    color: #fff;
    text-align: center;
    mix-blend-mode: multiply;
    box-sizing: border-box;
}
.about-4cs-circle p {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    line-height: 1.5;
    margin: 0 0 12px;
    letter-spacing: 0.2px;
    width: 100%;
}
.about-4cs-circle p:last-child { margin: 0; }
.about-4cs-circle p strong { font-weight: 500; }

.about-4cs-circle--yellow   { background: #f6bf00; }
.about-4cs-circle--lavender { background: #8090ff; }
.about-4cs-circle--red      { background: #ff512d; }
.about-4cs-circle--blue     { background: #0152f5; }

/* Each subsequent label+circle pair pulls LEFT by a fixed pixel amount so the
   overlap is consistent regardless of available container width. The flex
   parent centers the whole 4-item row in the viewport, so even at narrow
   widths the group stays centered (with the row extending under the section's
   overflow-x: hidden if it exceeds the viewport). */
.about-4cs-list .about-4cs-item + .about-4cs-item {
    margin-left: clamp(-52px, -2.7vw, -32px);
}

/* ===== BUILDERS / INDUSTRIES =====
   Heading + body + pill grid of industries. Each pill has a colored outline
   that cycles through navy / yellow / red so the grid feels lively. */
.about-builders {
    background: var(--clr-blue-light);
    padding: 88px 0 96px;
    position: relative;
}

.about-builders-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    color: var(--clr-navy);
    text-align: center;
    margin: 0 0 32px;
}
.about-builders-title .about-builders-emphasis {
    text-decoration-color: var(--clr-blue);
}

.about-builders-body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
    letter-spacing: 0.4px;
}

.about-industry-pills {
    margin: 0 auto 0;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.about-industry-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    justify-items: stretch;
}
.about-industry-row:last-child {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 86%;
    margin: 0 auto;
}
.about-industry-pills span {
    border: 1.5px solid var(--clr-navy);
    border-radius: 26px;
    padding: 16px 22px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--clr-navy);
    line-height: 1.25;
    text-align: center;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Per-row color cycle so the borders have visual rhythm matching the mockup.
   Default border is navy (set above); these rules selectively swap. */
.about-industry-row:nth-child(1) span:nth-child(2) { border-color: var(--clr-red); }
.about-industry-row:nth-child(1) span:nth-child(3) { border-color: var(--clr-yellow); }
.about-industry-row:nth-child(1) span:nth-child(5),
.about-industry-row:nth-child(1) span:nth-child(7) { border-color: #b2baff; }

.about-industry-row:nth-child(2) span:nth-child(1) { border-color: var(--clr-yellow); }
.about-industry-row:nth-child(2) span:nth-child(3) { border-color: var(--clr-red); }
.about-industry-row:nth-child(2) span:nth-child(5) { border-color: var(--clr-yellow); }
.about-industry-row:nth-child(2) span:nth-child(7) { border-color: var(--clr-red); }

.about-industry-row:nth-child(3) span:nth-child(3) { border-color: var(--clr-yellow); }
.about-industry-row:nth-child(3) span:nth-child(4) { border-color: var(--clr-red); }
.about-industry-row:nth-child(3) span:nth-child(7) { border-color: var(--clr-yellow); }

.about-industry-row:nth-child(4) span:nth-child(1),
.about-industry-row:nth-child(4) span:nth-child(3),
.about-industry-row:nth-child(4) span:nth-child(5) { border-color: #b2baff; }
.about-industry-row:nth-child(4) span:nth-child(6) { border-color: var(--clr-red); }

.about-industry-row:nth-child(5) span:nth-child(2) { border-color: var(--clr-red); }
.about-industry-row:nth-child(5) span:nth-child(3) { border-color: var(--clr-yellow); }
.about-industry-row:nth-child(5) span:nth-child(4) { border-color: var(--clr-red); }

/* The CTA hangs across the section boundary — bottom half overlaps the next
   section below. Achieved by positioning the foot absolutely at the bottom
   edge and translating it down by 50% of the button height. */
.about-builders-foot {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    text-align: center;
    z-index: 2;
}
.about-builders-foot .btn-yellow {
    font-family: var(--font-mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 16px 44px;
    color: #fff;
    background: var(--clr-yellow);
    border-color: var(--clr-yellow);
}

/* ===== AGENCY STANDARD + MARQUEE =====
   Striped wave bg behind the headline (using a subtle linear-gradient to
   suggest the cream/lavender wave illustration in the mockup). Below: a
   full-width red strip with infinitely-scrolling "MEET THE TEAM" copies. */
.about-standard {
    background-color: #fff;
    background-image: url('../assets/images/SVG/wavy-bg-service.svg');
    background-repeat: no-repeat;
    background-position: center calc(100% + 80px);
    background-size: 100% auto;
    padding: 160px 0 0;
    position: relative;
}

.about-standard .container {
    position: relative;
    z-index: 1;
}

.about-standard-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    color: var(--clr-navy);
    text-align: center;
    margin: 0 0 24px;
}
.about-standard-title .line { display: block; }
.about-standard-title strong { font-weight: 500; }

/* Typography from .section-sublede (style.css). Layout only here. */
.about-standard-sub {
    text-align: center;
    margin: 0 auto 110px;
}

.about-marquee {
    position: relative;
    z-index: 2;
    margin-bottom: -38px; /* intersect only with the lavender Kathy section below */
    background: var(--clr-red);
    overflow: hidden;
    padding: 22px 0;
    width: 100%;
}
.about-marquee-track {
    display: inline-flex;
    gap: clamp(64px, 6vw, 110px);
    white-space: nowrap;
    animation: about-marquee-slide 26s linear infinite;
    will-change: transform;
}
.about-marquee-track:hover {
    animation-play-state: paused;
}
.about-marquee-track span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-navy);
    flex-shrink: 0;
}
@keyframes about-marquee-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===== KATHY INTRO =====
   Photo is the section's background (Kathy in pink against lavender wall).
   Photo is anchored to the right so the lavender extends leftward where the
   text content sits. */
.about-kathy {
    position: relative;
    background-color: #a499d6;
    background-repeat: no-repeat;
    background-size: 113% auto;
    background-position: 100% -30%;
    overflow: hidden;
    min-height: 860px;
    padding: 140px 0 140px;
    display: flex;
    align-items: center;
}
.about-kathy-container {
    width: 100%;
}
.about-kathy-content {
    color: #fff;
    max-width: 560px;
}

/* Kathy signature PNG — peach/coral source recolored white via filter so it
   sits cleanly on the lavender background. Negative margin-left nudges the
   signature so the start of "Kathy" sits directly above the "F" in FOUNDER. */
.about-kathy-signature {
    display: block;
    width: clamp(220px, 28vw, 360px);
    height: auto;
    margin: 15px 0 16px clamp(-90px, -5vw, -66px);
    filter: brightness(0) invert(1);
}

/* Section-heading size with a one-step lighter weight (300) and a tighter
   line-height for this stacked-uppercase treatment. */
.about-kathy-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1;
    color: #fff;
    margin: 0 0 28px;
    text-transform: uppercase;
}
.about-kathy-title span { display: block; }

/* Typography from .section-sublede (style.css). Layout + white override. */
.about-kathy-lede {
    color: #fff;
    margin: 0;
    max-width: 540px;
}

/* ===== STORY STACK CARDS =====
   4 panels stacked via position: sticky with progressive top offsets.
   Pattern matches katelynjames.com/meet-katelyn — as the user scrolls, each
   subsequent panel slides up over the previous one and pins, leaving only
   the previous panel's top STRIP_HEIGHT visible above (the "header strip").
   The strip height is set per-card via top offsets that increase by the
   strip height for each successive card. */
.about-story {
    background: var(--clr-blue-light);
    padding: 64px 0 80px;
    --story-strip: 72px;   /* visible header strip of each previous panel */
    --story-anchor: 64px;  /* offset of the first card from the viewport top */
}
.about-story-stack {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 60px);
}
.about-story-card {
    position: sticky;
    top: calc(var(--story-anchor) + var(--card-i) * var(--story-strip));
    z-index: calc(1 + var(--card-i));
    min-height: 56vh;
    display: flex;
    align-items: stretch;
    border-radius: 28px;
    box-shadow: 0 18px 36px rgba(26, 31, 54, 0.08);
    overflow: hidden;
    margin-bottom: 24px;
}
.about-story-card-inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(36px, 4vw, 72px);
    align-items: center;
    padding: clamp(48px, 5vw, 80px);
    width: 100%;
}
.about-story-card-inner--reverse {
    grid-template-columns: 1.05fr 0.95fr;
}
.about-story-card-photo {
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    width: 100%;
    min-height: 320px;
    box-shadow: 0 6px 24px rgba(26, 31, 54, 0.08);
}
/* Typography from .section-sublede (style.css). Layout only here. */
.about-story-card-text h3 {
    margin: 0 0 22px;
}
.about-story-card-text p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    margin: 0 0 14px;
}
.about-story-card-text p:last-child { margin: 0; }

.about-story-card--lavender { background: #d8defb; }
.about-story-card--yellow   { background: #f1c947; }
.about-story-card--blue     { background: #b8c8e3; }
.about-story-card--coral    { background: #f4b9a8; }

/* ===== ORG CHART =====
   Single SVG asset (team-chart.svg) — supersedes the prior CSS-built tree. */
.about-orgchart {
    background: #fff;
    padding: var(--section-py-lg) 0 80px;
    position: relative;
}
.about-org-chart {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto;
}

/* ===== BRAND-OLOGY =====
   Photo on left with absolutely-positioned numbered pins (clickable buttons).
   Right column shows the active point copy; clicking a pin fades to a
   different point's content. Pins are buttons; <article> blocks are stacked
   absolutely inside .about-brandology-points, with .is-active controlling
   opacity transitions. */
.about-brandology {
    background: var(--clr-cream, #f5efe5);
    padding: 96px 0;
}
/* Wider container override for this section so the photo + content can
   stretch into the broader viewport width. */
.about-brandology .container {
    max-width: 1480px;
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}
.about-brandology-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
}
.about-brandology-photo {
    position: relative;
    margin: 0;
    border-radius: 24px;
    overflow: visible;
}
.about-brandology-photo img {
    display: block;
    width: 100%;
    height: clamp(360px, 38vw, 500px);
    border-radius: 24px;
    object-fit: cover;
    object-position: center;
}

/* Pins as buttons — sit absolutely positioned over the photo, tinted dots
   with a number in the center. Hover/active states give clear feedback. */
.about-brandology-pin {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.about-brandology-pin span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
}
.about-brandology-pin:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.about-brandology-pin[aria-pressed="true"] {
    transform: scale(1.18);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6), 0 6px 16px rgba(0, 0, 0, 0.22);
}
.about-brandology-pin--1 { background: #b2baff; left: 26%; bottom: 38%; }
.about-brandology-pin--2 { background: var(--clr-red); left: 50%; bottom: 8%; }
.about-brandology-pin--3 { background: var(--clr-yellow); right: 14%; top: 44%; color: var(--clr-navy); }
.about-brandology-pin--4 { background: var(--clr-blue); left: 14%; top: 40%; }

/* Smaller variant of section-heading — 64% scale (two 20% reductions from
   the canonical section-heading size). Pending user approval to formalize
   as a new typography token. */
.about-brandology-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 18px;
    text-decoration: underline;
    text-decoration-color: #b2baff;
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
    text-decoration-skip-ink: none;
    display: inline-block;
}

/* Typography from .section-sublede (style.css). Layout + lavender override. */
.about-brandology-tagline {
    color: #8090ff;
    margin: 0 0 32px;
}
.about-brandology-tagline span { display: block; }

/* Stacked points — each point is absolutely positioned in the same slot;
   only the active one fades in. Wrapper uses min-height to hold the tallest
   point so the layout doesn't jump on toggle. */
.about-brandology-points {
    position: relative;
    min-height: 420px;
}
.about-brandology-point {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
    pointer-events: none;
}
.about-brandology-point.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease, visibility 0s linear;
    pointer-events: auto;
}

.about-brandology-point .about-brandology-eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.16em;
    color: var(--clr-navy);
    margin: 0 0 2px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.about-brandology-point h3 {
    margin: 0 0 22px;
}
/* Uses the canonical "body-large" treatment. */
.about-brandology-point p {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 16px;
    letter-spacing: 0.4px;
}
.about-brandology-point p:last-child { margin: 0; }

/* ===== CLIENT RESULTS =====
   3 placeholder cards leading to work.html. "Proud Of" wrapped with an oval
   red circle scribble pulled from the brand SVG library. */
.about-results {
    background: #fff;
    padding: var(--section-py-lg) 0 80px;
}

/* Uses the canonical "section-heading-md" typographic treatment. */
.about-results-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    color: var(--clr-navy);
    text-align: center;
    margin: 0 0 56px;
}
.about-results-title .line { display: block; }
.about-results-circle {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    background-image: url('../assets/images/red-circle-scribble.svg');
    background-repeat: no-repeat;
    background-position: center 52%;
    background-size: 100% 110%;
}

.about-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    margin: 0 0 48px;
}
.about-results-card {
    display: block;
    border: 1px solid rgba(26, 31, 54, 0.18);
    border-radius: 18px;
    padding: 26px 32px 36px;
    text-decoration: none;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.about-results-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(26, 31, 54, 0.08);
}
/* Image placeholder: square corners (only the outer card stays rounded). */
.about-results-card-image {
    aspect-ratio: 16 / 11;
    border: 1px solid rgba(26, 31, 54, 0.18);
    border-radius: 0;
    background: #fff;
    margin-bottom: 22px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.about-results-card h3 {
    margin: 0 0 14px;
}
/* Uses the canonical "body-large" typographic treatment. */
.about-results-card p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.4px;
}

.about-results-foot {
    text-align: center;
}
.about-results-foot .btn-red {
    font-family: var(--font-mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 16px 40px;
}

/* ===== FINAL CTA =====
   Lavender close band with display headline + yellow rounded pill CTA. */
.about-final-cta {
    background: #abc3e7;
    padding: 100px 0 120px;
    text-align: center;
}
/* Uses the canonical "section-heading-md" typographic treatment. */
.about-final-cta-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 48px;
}
.about-final-cta-title .line { display: block; }

/* Deliberate exception: white label text on canonical yellow for the closing
   CTA. All other yellow buttons site-wide use canonical navy text. */
.about-final-cta-btn { color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .about-hero {
        padding: 160px 0 80px;
        min-height: 540px;
        background-position: 0% 30%;
    }
    .about-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(255, 253, 248, 0.6) 0%,
            rgba(255, 253, 248, 0.92) 35%,
            rgba(255, 253, 248, 0.98) 100%
        );
        pointer-events: none;
        z-index: 0;
    }
    .about-hero-content {
        max-width: 540px;
        margin-left: auto;
    }

    /* Keep 3-col at tablet — collapsing to 1-col here wastes ~700px of
       vertical space on a 768 viewport. The 1-col stack now applies only
       at ≤640 (see below). */
    .about-stats-list { gap: clamp(20px, 3vw, 40px); }

    .about-mission-band { margin-top: -80px; padding: clamp(40px, 5vw, 64px); border-radius: 28px; }
    .about-mission-body { grid-template-columns: 1fr; gap: 28px; }

    /* 4C's: keep all four circles in a single row at tablet (1024–769) so the
       interlocked "venn" identity survives. We shrink the circles instead of
       wrapping to a 2x2 (which removed all overlap because items 2 and 4 only
       had a -90px margin-left against 50%-wide items, leaving them disjoint). */
    .about-4cs-list { flex-wrap: nowrap; }
    .about-4cs-list .about-4cs-item { width: auto; align-items: center; }
    .about-4cs-circle { width: clamp(180px, 22vw, 240px); padding: clamp(20px, 2.4vw, 32px); }
    .about-4cs-circle p { font-size: clamp(0.72rem, 0.95vw, 0.88rem); line-height: 1.4; margin-bottom: 8px; }
    .about-4cs-label strong { font-size: clamp(1rem, 1.6vw, 1.25rem); }
    .about-4cs-label span { font-size: clamp(0.85rem, 1.1vw, 1rem); }

    /* Kathy section: at tablet/phone, the photo bg gets a stronger lavender
       veil so the headline text reads cleanly when stacked over Kathy.
       Veil is pushed further right than before — the original 50% mid-stop
       let "MARKETING / CONSULTANT" land over Kathy's torso at low contrast. */
    .about-kathy {
        background-position: 70% center;
        min-height: 600px;
    }
    .about-kathy::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(164, 153, 214, 0.98) 0%, rgba(164, 153, 214, 0.94) 60%, rgba(164, 153, 214, 0.45) 100%);
        z-index: 0;
    }
    .about-kathy-container { position: relative; z-index: 1; }
    .about-kathy-content { max-width: none; }
    /* Reset the desktop signature shift — the negative margin-left clipped the
       "K" against the page edge once the container started at 0. */
    .about-kathy-signature { margin-left: 0; }

    .about-story-card-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px 28px; }
    .about-story-card-inner--reverse { grid-template-columns: minmax(0, 1fr); }
    /* On mobile the card is narrower than the desktop photo's 4:3 × 320px
       min-height (which forced a 426px min-content width and pushed the
       text out of the card). Drop the min-height so aspect-ratio computes
       from the full-width column. */
    .about-story-card-photo { min-height: 0; }

    .about-brandology-grid { grid-template-columns: 1fr; }
    .about-brandology-note { text-align: center; }

    .about-results-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

    /* Industry pills: the desktop 7-col grid overflows narrow viewports because
       7 fixed columns × pill-text width exceeds the screen. Below 1024 we
       switch to a flex-wrap layout so each pill self-sizes to its label and
       wraps onto as many lines as the viewport allows. The per-row color
       cycle (via nth-child rules in the desktop block above) still applies
       since the row containers are unchanged. */
    .about-industry-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .about-industry-row:last-child { max-width: 100%; }
    .about-industry-pills span {
        padding: 12px 18px;
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .about-hero { padding: 120px 0 60px; min-height: 460px; }
    .about-hero-title { font-size: clamp(1.85rem, 7vw, 2.4rem); }

    .about-mission-band p { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .about-mission-col-left p { font-size: clamp(1.2rem, 4.5vw, 1.55rem); }

    .about-4cs-list { flex-direction: column; row-gap: 56px; align-items: center; }
    .about-4cs-list .about-4cs-item { width: auto; }
    .about-4cs-list .about-4cs-item,
    .about-4cs-list .about-4cs-item + .about-4cs-item,
    .about-4cs-list .about-4cs-item:nth-child(2),
    .about-4cs-list .about-4cs-item:nth-child(4) { margin-left: 0; }
    /* Restore full circle size in the stacked layout (the tablet rule shrinks
       them to fit a 4-in-a-row, which we don't need once they're stacked). */
    .about-4cs-circle { width: clamp(260px, 70vw, 340px); padding: clamp(28px, 5vw, 44px); }
    .about-4cs-circle p { font-size: clamp(0.9rem, 3.2vw, 1rem); line-height: 1.5; margin-bottom: 10px; }
    .about-4cs-label strong { font-size: clamp(1.2rem, 4vw, 1.5rem); }
    .about-4cs-label span { font-size: clamp(0.95rem, 3vw, 1.1rem); }

    /* Brandology: the desktop "tap a pin to reveal a point" pattern doesn't
       translate to phones — only point 1 was reachable without the user
       realizing the photo overlays are buttons. Below 768 we hide the pins
       and flow all four points stacked, so the section reads as a normal
       article. */
    .about-brandology-pin { display: none; }
    .about-brandology-points { min-height: 0; }
    .about-brandology-point {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-bottom: 32px;
        transition: none;
    }
    .about-brandology-point:last-child { margin-bottom: 0; }

    .about-builders-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }

    .about-standard-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }

    .about-results-grid { grid-template-columns: 1fr; }

    /* Story stack: drop sticky on mobile. The katelynjames-style
       sticky-overlap pattern adds ~1300px of scroll depth at 390 (vs a
       normal flow) and the strip effect is barely perceptible on a phone
       where the cards are already viewport-tall. Flow the cards normally. */
    .about-story-card {
        position: static;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .about-stats-list { grid-template-columns: 1fr; gap: 40px; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 480px) {
    .about-hero { padding: 100px 0 48px; min-height: 420px; }
    .about-hero-title { font-size: clamp(1.7rem, 8vw, 2rem); }
    .about-mission-band { padding: 32px 22px; border-radius: 22px; margin-top: -60px; }
    .about-mission-band p { font-size: 1.2rem; }

    .about-stats-lede { font-size: 1.1rem; }
    .about-stat-num { font-size: 1.25rem; }
    .about-stat-label { font-size: 1rem; }

    .about-marquee-track span { font-size: 1rem; }
    .about-marquee-track { gap: 56px; }

    .about-kathy-content { padding: 60px 0 20px; }
    .about-kathy-script { font-size: 4rem; }

    .about-industry-pills li { padding: 8px 16px; font-size: 0.85rem; }

    .about-final-cta { padding: 70px 0 80px; }
    .about-final-cta-title { font-size: 1.5rem; }
}