/* IFUNDA Website — Version 32
   About page: cinematic founder story and South African school experience. */

:root {
    --about-ink: #271811;
    --about-ink-soft: #4a2d1e;
    --about-walnut: #5e3a26;
    --about-caramel: #b77a45;
    --about-gold: #e5b55f;
    --about-gold-bright: #ffd992;
    --about-ivory: #f7efe2;
    --about-ivory-deep: #eadbc8;
    --about-paper: #fffaf1;
    --about-navy: #172230;
    --about-shadow: 0 30px 90px rgba(22, 12, 7, .22);
}

body.about-body {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--about-ink);
    color: var(--about-paper);
}

.about-body::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(229, 181, 95, .12), transparent 30%),
        radial-gradient(circle at 86% 36%, rgba(145, 87, 49, .14), transparent 34%),
        linear-gradient(145deg, #20120d, #3a2116 52%, #1e120d);
}

.about-body .about-site-header {
    z-index: 42;
}

.about-main {
    position: relative;
    isolation: isolate;
}

.about-container {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
}

.about-section {
    position: relative;
    padding: clamp(88px, 10vw, 150px) 0;
    scroll-margin-top: 126px;
}

.about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 20px;
    color: var(--about-gold-bright);
    font-size: .76rem;
    font-weight: 760;
    letter-spacing: .2em;
    line-height: 1.3;
    text-transform: uppercase;
}

.about-kicker span {
    display: block;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--about-gold-bright), transparent);
}

.about-kicker-dark {
    color: #8c582e;
}

.about-kicker-dark span {
    background: linear-gradient(90deg, #a86c38, transparent);
}

.about-section-heading {
    max-width: 790px;
    margin-bottom: 52px;
}

.about-section-heading h2,
.about-origin-heading h2,
.about-turning-copy h2,
.about-founder-copy h2,
.about-final h2 {
    margin: 0;
    text-wrap: balance;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.5rem, 5.2vw, 5rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .98;
}

.about-section-heading > p:last-child {
    max-width: 670px;
    margin: 25px 0 0;
    color: rgba(255, 247, 234, .7);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.75;
}

.about-section-heading-light h2,
.about-section-heading-light > p:last-child {
    color: var(--about-paper);
}

/* Hero */
.about-hero {
    position: relative;
    display: grid;
    min-height: 100svh;
    align-items: end;
    overflow: hidden;
    padding: 176px 0 128px;
    background:
        linear-gradient(90deg, rgba(25, 14, 9, .99) 0%, rgba(36, 20, 13, .92) 38%, rgba(32, 18, 12, .32) 68%, rgba(24, 14, 10, .2) 100%),
        linear-gradient(180deg, rgba(21, 12, 8, .2), rgba(21, 12, 8, .84));
}

.about-hero::before {
    content: "30";
    position: absolute;
    z-index: 0;
    top: 10%;
    left: 3.8%;
    color: transparent;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(13rem, 33vw, 36rem);
    font-weight: 700;
    letter-spacing: -.12em;
    line-height: .8;
    opacity: .11;
    -webkit-text-stroke: 1px rgba(255, 217, 146, .58);
    pointer-events: none;
}

.about-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 230px;
    background: linear-gradient(180deg, transparent, rgba(28, 16, 11, .9));
    pointer-events: none;
}

.about-hero-image {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url("../images/products-page-background/ifunda-products-classroom-background.webp");
    background-position: 69% center;
    background-size: cover;
    transform: scale(1.02);
    animation: about-hero-settle 2.4s cubic-bezier(.16,.8,.2,1) both;
}

.about-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 32%, rgba(255, 211, 133, .14), transparent 24%),
        linear-gradient(90deg, rgba(25, 13, 8, .95) 0%, rgba(28, 15, 10, .8) 38%, transparent 75%);
}

.about-hero-grain {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.about-hero-inner {
    position: relative;
    z-index: 4;
    display: grid;
    width: min(1220px, calc(100% - 72px));
    margin: 0 auto;
    align-items: end;
    gap: clamp(40px, 6vw, 90px);
    grid-template-columns: minmax(0, 1.1fr) minmax(310px, .62fr);
}

.about-hero-copy {
    max-width: 760px;
}

.about-hero h1 {
    max-width: 780px;
    margin: 0;
    color: #fff8ed;
    text-wrap: balance;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 8.7vw, 8.6rem);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: .84;
    text-shadow: 0 14px 50px rgba(0,0,0,.45);
}

.about-hero h1 em {
    display: block;
    color: var(--about-gold-bright);
    font-style: italic;
    font-weight: 500;
}

.about-hero-lead {
    max-width: 700px;
    margin: 32px 0 0;
    color: rgba(255, 247, 234, .82);
    font-size: clamp(1.08rem, 1.75vw, 1.38rem);
    line-height: 1.68;
    text-shadow: 0 3px 20px rgba(0,0,0,.55);
}

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

.about-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 23px;
    border: 1px solid rgba(255, 225, 169, .3);
    border-radius: 999px;
    color: #fff8ed;
    font-size: .92rem;
    font-weight: 720;
    letter-spacing: .035em;
    outline: none;
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.about-button-primary {
    border-color: rgba(255, 219, 145, .72);
    background: linear-gradient(135deg, #e6b55d, #b67838);
    box-shadow: 0 16px 38px rgba(126, 75, 31, .34), inset 0 1px 0 rgba(255,255,255,.32);
    color: #25140c;
}

.about-button-ghost {
    background: rgba(42, 24, 15, .48);
    backdrop-filter: blur(16px) saturate(118%);
}

.about-button:hover,
.about-button:focus-visible {
    border-color: var(--about-gold-bright);
    box-shadow: 0 18px 42px rgba(35, 18, 9, .34), 0 0 0 4px rgba(231, 183, 93, .1);
    transform: translateY(-3px);
}

.about-hero-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(255, 222, 159, .27);
    border-radius: 28px;
    background:
        radial-gradient(circle at 94% 0%, rgba(255, 220, 151, .15), transparent 33%),
        linear-gradient(145deg, rgba(70, 41, 25, .72), rgba(25, 14, 9, .72));
    box-shadow: 0 34px 80px rgba(7, 3, 2, .35), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(20px) saturate(125%);
}

.about-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 22%, rgba(255,245,217,.08) 44%, transparent 63%);
    transform: translateX(-120%);
    animation: about-card-sheen 6.5s ease-in-out infinite 1.5s;
}

.about-hero-card > p {
    margin: 0 0 12px;
    color: var(--about-gold-bright);
    font-size: .7rem;
    font-weight: 780;
    letter-spacing: .18em;
}

.about-hero-card > strong {
    display: block;
    max-width: 370px;
    color: #fff8ec;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 2.7vw, 2.5rem);
    font-weight: 500;
    line-height: 1.08;
}

.about-hero-statline {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 225, 170, .18);
}

.about-hero-statline span {
    display: grid;
    gap: 4px;
}

.about-hero-statline b {
    color: var(--about-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 500;
    line-height: .9;
}

.about-hero-statline small {
    color: rgba(255, 246, 230, .65);
    font-size: .74rem;
    letter-spacing: .07em;
    line-height: 1.45;
    text-transform: uppercase;
}

.about-scroll-cue {
    position: absolute;
    z-index: 6;
    bottom: 30px;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 12px;
    color: rgba(255,246,231,.6);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.about-scroll-cue i {
    position: relative;
    display: block;
    width: 1px;
    height: 38px;
    overflow: hidden;
    background: rgba(255, 219, 149, .2);
}

.about-scroll-cue i::after {
    content: "";
    position: absolute;
    top: -60%;
    left: 0;
    width: 1px;
    height: 60%;
    background: var(--about-gold-bright);
    animation: about-scroll-line 2s ease-in-out infinite;
}

/* Origin */
.about-origin {
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(191, 129, 70, .12), transparent 28%),
        linear-gradient(180deg, var(--about-paper), var(--about-ivory));
    color: var(--about-ink);
}

.about-origin::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -130px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(154, 96, 51, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 52px rgba(154,96,51,.035), 0 0 0 104px rgba(154,96,51,.022);
}

.about-origin-grid {
    display: grid;
    gap: clamp(50px, 8vw, 120px);
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.18fr);
}

.about-origin-heading h2 {
    max-width: 480px;
    color: var(--about-ink);
}

.about-origin-story {
    max-width: 720px;
}

.about-origin-story p {
    margin: 0 0 24px;
    color: #5a3a29;
    font-size: clamp(1.06rem, 1.45vw, 1.22rem);
    line-height: 1.82;
}

.about-origin-story .about-dropcap {
    color: #2f1c13;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.5;
}

.about-dropcap::first-letter {
    float: left;
    margin: .08em .12em 0 0;
    color: #a36734;
    font-size: 4.35em;
    line-height: .72;
}

.about-origin-story blockquote {
    position: relative;
    margin: 42px 0 0;
    padding: 28px 30px 28px 40px;
    border-left: 3px solid #b6783e;
    background: rgba(255,255,255,.52);
    color: #3c2518;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    font-style: italic;
    line-height: 1.35;
    box-shadow: 0 18px 50px rgba(73, 42, 23, .08);
}

/* Gaps */
.about-gaps {
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 5%, rgba(229, 181, 95, .12), transparent 24%),
        linear-gradient(145deg, #21130e, #402519 52%, #21130e);
}

.about-gaps::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -240px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 218, 146, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,218,146,.025), 0 0 0 140px rgba(255,218,146,.018);
}

.about-gap-grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-gap-grid article {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    padding: 30px 26px;
    border: 1px solid rgba(255, 225, 171, .14);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.about-gap-grid article::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 219, 149, .1);
    border-radius: 50%;
}

.about-gap-grid article:hover {
    border-color: rgba(255, 220, 151, .35);
    background: linear-gradient(155deg, rgba(229,181,95,.09), rgba(255,255,255,.02));
    transform: translateY(-8px);
}

.about-gap-grid span {
    display: block;
    margin-bottom: 48px;
    color: rgba(255, 217, 144, .5);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.1rem;
    line-height: 1;
}

.about-gap-grid h3 {
    margin: 0;
    color: #fff8ed;
    font-size: 1.28rem;
    line-height: 1.25;
}

.about-gap-grid p {
    margin: 15px 0 0;
    color: rgba(255, 245, 229, .67);
    font-size: .98rem;
    line-height: 1.7;
}

/* Turning point */
.about-turning {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 85%, rgba(177, 111, 54, .1), transparent 26%),
        linear-gradient(180deg, #f8f0e3, #eee0ce);
    color: var(--about-ink);
}

.about-turning-grid {
    display: grid;
    align-items: center;
    gap: clamp(55px, 8vw, 120px);
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
}

.about-turning-visual {
    position: relative;
    min-width: 0;
    padding: 26px 0 54px;
}

.about-screen-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(107, 67, 37, .18);
    border-radius: 28px;
    background: #28170f;
    box-shadow: 0 38px 90px rgba(70, 40, 21, .25), 0 0 0 10px rgba(255,255,255,.34);
    transform: perspective(1200px) rotateY(3deg) rotateX(1deg);
}

.about-screen-frame img {
    display: block;
    width: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: left top;
}

.about-screen-frame::before {
    content: "TEXTBOOK360 CONTROL CENTRE";
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 20px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 219, 148, .34);
    border-radius: 999px;
    background: rgba(32, 18, 11, .72);
    color: #ffe1a7;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    backdrop-filter: blur(12px);
}

.about-screen-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.09) 43%, transparent 60%);
    transform: translateX(-120%);
    animation: about-screen-shine 7s ease-in-out infinite 1.7s;
}

.about-visual-note {
    position: absolute;
    z-index: 4;
    padding: 11px 15px;
    border: 1px solid rgba(100, 60, 33, .17);
    border-radius: 999px;
    background: rgba(255, 251, 243, .9);
    color: #4a2d1d;
    font-size: .74rem;
    font-weight: 780;
    letter-spacing: .08em;
    box-shadow: 0 15px 35px rgba(62,35,19,.15);
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.about-note-one { top: 4px; right: 4%; }
.about-note-two { right: -2%; bottom: 76px; }
.about-note-three { bottom: 10px; left: 9%; }

.about-turning-copy h2 {
    color: var(--about-ink);
}

.about-turning-copy > p:not(.about-kicker) {
    margin: 24px 0 0;
    color: #5c3b2a;
    font-size: clamp(1.03rem, 1.35vw, 1.16rem);
    line-height: 1.82;
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    border-bottom: 1px solid rgba(140, 87, 43, .4);
    color: #7d4b26;
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: .04em;
    outline: none;
    padding-bottom: 7px;
    text-decoration: none;
    transition: gap 200ms ease, color 200ms ease, border-color 200ms ease;
}

.about-text-link:hover,
.about-text-link:focus-visible {
    gap: 20px;
    border-color: #8e562c;
    color: #4d2d18;
}

/* Journey timeline */
.about-journey {
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(22, 33, 47, .97), rgba(28, 40, 54, .95)),
        var(--about-navy);
}

.about-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 54px 54px;
}

.about-timeline {
    position: relative;
    z-index: 2;
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.about-timeline::before {
    content: "";
    position: absolute;
    top: 45px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 143, .55), transparent);
}

.about-timeline li {
    position: relative;
    padding: 0 22px;
    text-align: center;
}

.about-timeline li > span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 88px;
    height: 88px;
    margin: 0 auto 28px;
    place-items: center;
    border: 1px solid rgba(255, 220, 151, .32);
    border-radius: 50%;
    background: linear-gradient(145deg, #3c4653, #18222e);
    box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
    color: #ffe0a1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
}

.about-timeline small {
    color: var(--about-gold-bright);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.about-timeline h3 {
    margin: 9px 0 0;
    color: #fff9ef;
    font-size: 1.25rem;
}

.about-timeline p {
    margin: 14px auto 0;
    color: rgba(247, 239, 226, .65);
    font-size: .94rem;
    line-height: 1.72;
}

/* Founder */
.about-founder {
    background:
        radial-gradient(circle at 84% 18%, rgba(187, 122, 62, .11), transparent 28%),
        linear-gradient(180deg, #f8f0e4, #efe0cd);
    color: var(--about-ink);
}

.about-founder-card {
    position: relative;
    display: grid;
    overflow: hidden;
    align-items: stretch;
    gap: 0;
    grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
    border: 1px solid rgba(122, 76, 40, .16);
    border-radius: 34px;
    background: rgba(255, 251, 244, .72);
    box-shadow: var(--about-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}

.about-founder-card::after {
    content: "“";
    position: absolute;
    right: 38px;
    top: -58px;
    color: rgba(157, 96, 47, .08);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18rem;
    line-height: 1;
}

.about-founder-monogram {
    position: relative;
    display: grid;
    min-height: 560px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 22%, rgba(255, 223, 158, .19), transparent 25%),
        linear-gradient(145deg, #533321, #21140e 72%);
}

.about-founder-monogram::before,
.about-founder-monogram::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 221, 155, .15);
    border-radius: 50%;
}

.about-founder-monogram::before { width: 330px; height: 330px; }
.about-founder-monogram::after { width: 235px; height: 235px; }

.about-founder-monogram span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 166px;
    height: 166px;
    place-items: center;
    border: 1px solid rgba(255, 224, 164, .38);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(229,181,95,.14), rgba(255,255,255,.02));
    box-shadow: 0 25px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.11);
    color: var(--about-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.7rem;
    letter-spacing: -.05em;
}

.about-founder-copy {
    position: relative;
    z-index: 2;
    padding: clamp(42px, 6vw, 82px);
}

.about-founder-copy h2 {
    max-width: 760px;
    color: #2f1d14;
    font-size: clamp(2.2rem, 4.3vw, 4.2rem);
    line-height: 1.05;
}

.about-founder-copy > p:not(.about-kicker) {
    max-width: 760px;
    margin: 23px 0 0;
    color: #5d3d2b;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.78;
}

.about-founder-copy > strong {
    display: grid;
    width: fit-content;
    gap: 4px;
    margin-top: 34px;
    color: #3b2519;
    font-size: 1.04rem;
}

.about-founder-copy > strong span {
    color: #966038;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* Principles */
.about-principles {
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(229, 181, 95, .12), transparent 26%),
        linear-gradient(145deg, #29170f, #4b2b1c 54%, #25150f);
}

.about-principle-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-principle-grid article {
    position: relative;
    min-height: 240px;
    padding: 34px 34px 32px 102px;
    border: 1px solid rgba(255, 222, 160, .15);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.about-principle-grid article:hover {
    border-color: rgba(255, 221, 157, .34);
    background: linear-gradient(145deg, rgba(229,181,95,.09), rgba(255,255,255,.02));
    transform: translateY(-5px);
}

.about-principle-grid i {
    position: absolute;
    top: 34px;
    left: 31px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 221, 156, .24);
    border-radius: 50%;
    color: var(--about-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
}

.about-principle-grid h3 {
    margin: 0;
    color: #fff8ed;
    font-size: 1.35rem;
}

.about-principle-grid p {
    margin: 15px 0 0;
    color: rgba(255, 245, 230, .68);
    font-size: 1rem;
    line-height: 1.72;
}

/* Final CTA */
.about-final {
    position: relative;
    display: grid;
    min-height: 680px;
    align-items: center;
    overflow: hidden;
    padding: 110px 0;
    background: #20130e;
}

.about-final-image {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(25, 14, 9, .94), rgba(25,14,9,.58) 58%, rgba(25,14,9,.78)),
        url("../images/coffee-shop-study-background.webp") center/cover no-repeat;
    filter: saturate(.8) contrast(1.04);
    transform: scale(1.025);
}

.about-final::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 68% 30%, rgba(255, 213, 134, .12), transparent 25%);
}

.about-final-inner {
    position: relative;
    z-index: 2;
}

.about-final h2 {
    max-width: 900px;
    color: #fff8ec;
    font-size: clamp(3rem, 6.5vw, 6.5rem);
    line-height: .92;
    text-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.about-final-inner > p:not(.about-kicker) {
    max-width: 650px;
    margin: 28px 0 0;
    color: rgba(255, 246, 232, .78);
    font-size: clamp(1.07rem, 1.5vw, 1.25rem);
    line-height: 1.72;
}

.about-site-footer {
    position: relative;
    z-index: 18;
}

/* Reveal motion */
.js [data-about-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 820ms cubic-bezier(.2,.8,.2,1), transform 820ms cubic-bezier(.2,.8,.2,1);
}

.js [data-about-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.about-gap-grid [data-about-reveal]:nth-child(2),
.about-timeline [data-about-reveal]:nth-child(2),
.about-principle-grid [data-about-reveal]:nth-child(2) { transition-delay: 90ms; }
.about-gap-grid [data-about-reveal]:nth-child(3),
.about-timeline [data-about-reveal]:nth-child(3),
.about-principle-grid [data-about-reveal]:nth-child(3) { transition-delay: 180ms; }
.about-gap-grid [data-about-reveal]:nth-child(4),
.about-timeline [data-about-reveal]:nth-child(4),
.about-principle-grid [data-about-reveal]:nth-child(4) { transition-delay: 270ms; }

@keyframes about-hero-settle {
    from { opacity: .5; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1.02); }
}

@keyframes about-card-sheen {
    0%, 70%, 100% { transform: translateX(-120%); opacity: 0; }
    78% { opacity: 1; }
    92% { transform: translateX(120%); opacity: 0; }
}

@keyframes about-scroll-line {
    0% { transform: translateY(0); }
    100% { transform: translateY(270%); }
}

@keyframes about-screen-shine {
    0%, 68%, 100% { transform: translateX(-120%); opacity: 0; }
    75% { opacity: .8; }
    88% { transform: translateX(120%); opacity: 0; }
}

@media (max-width: 1100px) {
    .about-hero-inner {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .about-hero-card {
        padding: 24px;
    }

    .about-gap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-gap-grid article {
        min-height: 250px;
    }

    .about-timeline {
        gap: 30px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-timeline::before {
        display: none;
    }
}

@media (max-width: 880px) {
    .about-container {
        width: min(100% - 40px, 760px);
    }

    .about-hero {
        min-height: 900px;
        padding: 160px 0 110px;
    }

    .about-hero-image {
        background-position: 68% center;
    }

    .about-hero-inner {
        width: min(100% - 40px, 760px);
        gap: 38px;
        grid-template-columns: 1fr;
    }

    .about-hero-card {
        width: min(100%, 520px);
    }

    .about-origin-grid,
    .about-turning-grid,
    .about-founder-card {
        grid-template-columns: 1fr;
    }

    .about-origin-heading h2 {
        max-width: 680px;
    }

    .about-turning-grid {
        gap: 58px;
    }

    .about-founder-monogram {
        min-height: 330px;
    }

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

    .about-site-footer .footer-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-container,
    .about-hero-inner {
        width: calc(100% - 28px);
    }

    .about-section {
        padding: 78px 0;
    }

    .about-hero {
        min-height: 860px;
        padding: 138px 0 106px;
        background: linear-gradient(180deg, rgba(25,14,9,.62), rgba(25,14,9,.93) 62%, rgba(25,14,9,.98));
    }

    .about-hero-image {
        background-position: 65% center;
        opacity: .78;
    }

    .about-hero h1 {
        font-size: clamp(3.5rem, 18vw, 5.6rem);
    }

    .about-hero-lead {
        padding-right: 68px;
        font-size: 1.03rem;
        line-height: 1.65;
    }

    .about-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-button {
        width: 100%;
    }

    .about-hero-card {
        border-radius: 22px;
    }

    .about-hero-statline {
        gap: 12px;
    }

    .about-hero-statline b {
        font-size: 2.8rem;
    }

    .about-scroll-cue {
        display: none;
    }

    .about-section-heading,
    .about-origin-heading {
        margin-bottom: 38px;
    }

    .about-section-heading h2,
    .about-origin-heading h2,
    .about-turning-copy h2,
    .about-founder-copy h2,
    .about-final h2 {
        font-size: clamp(2.45rem, 12vw, 4.1rem);
    }

    .about-origin-story blockquote {
        padding: 24px 22px;
        font-size: 1.42rem;
    }

    .about-gap-grid,
    .about-timeline {
        grid-template-columns: 1fr;
    }

    .about-gap-grid article {
        min-height: 230px;
    }

    .about-gap-grid span {
        margin-bottom: 34px;
    }

    .about-timeline li {
        display: grid;
        align-items: start;
        gap: 20px;
        grid-template-columns: 66px 1fr;
        padding: 0;
        text-align: left;
    }

    .about-timeline li > span {
        width: 66px;
        height: 66px;
        margin: 0;
        font-size: 1.55rem;
    }

    .about-screen-frame {
        border-radius: 18px;
        transform: none;
    }

    .about-screen-frame img {
        min-height: 330px;
    }

    .about-visual-note {
        font-size: .61rem;
    }

    .about-note-one { right: 1%; }
    .about-note-two { right: 0; bottom: 54px; }
    .about-note-three { bottom: 0; left: 4%; }

    .about-founder-monogram {
        min-height: 280px;
    }

    .about-founder-copy {
        padding: 34px 24px 42px;
    }

    .about-principle-grid article {
        min-height: 0;
        padding: 88px 25px 28px;
    }

    .about-principle-grid i {
        top: 26px;
        left: 25px;
    }

    .about-final {
        min-height: 650px;
        padding: 90px 0;
    }

    .about-final-image {
        background-position: 38% center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero-image,
    .about-hero-card::before,
    .about-scroll-cue i::after,
    .about-screen-shine {
        animation: none !important;
    }

    .js [data-about-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}