/* =====================================================
   BAOIAM - ABOUT US

   Built from the Figma frame "about Us" (node 3557:2848, 1440px).
   This page introduces its own warm neutral ramp on top of the
   shared tokens: #171411 ink, #685B52 body, #E7D6C8 rules.
===================================================== */

.ab-page{

    /* Figma's About-page ink ramp */
    --ab-ink:#171411;
    --ab-body:#332C28;
    --ab-bone:#E7D6C8;
    --ab-navy:#101828;

    background:#FFFFFF;
}

.ab-orange{
    color:var(--primary);
}

/* ==========================
   SHARED SECTION HEADER
========================== */

.ab-head{
    text-align:center;
}

.ab-head h2,
.ab-head-solo{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
}

.ab-head p{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    font-weight:500;
    line-height:1.4;
    /* Was var(--ink) — pure #000. Every other lead on this page (.tm-head > p,
       .ab-callback-sub) sits at --ink-500, so the section intros were the only
       black ones and read as heavier than the headings they sit under. #4A4A4A
       is still 9:1 on white, well past AAA — this is a harshness fix, not a
       contrast one. */
    color:var(--ink-500);
    /* These section intros had no measure of their own, so they ran the full
       width of the container as one long line before wrapping.
       No balance or pretty here: both keep the lines near-equal, which on the
       three-line Student Success intro left the LAST line the longest of the
       three. Plain wrapping fills each line to the measure in turn, so the
       block tapers — longest first, shortest last. */
    max-width:60rem;
    margin-inline:auto;
    text-wrap:normal;
}

.ab-head-solo{
    text-align:center;
}

/* ==========================
   HERO

   Figma: eyebrow, a 92px two-line headline where line two is Inter
   Italic in orange, then a 1.30fr / 0.70fr footer row.
========================== */

/* position + overflow for the wave bands at its foot: they run wider than
   the section as they stretch and must not open a horizontal scrollbar. */

.ab-hero{
    position:relative;
    overflow:hidden;
    padding:var(--space-section) 0;
    background:
        radial-gradient(circle at 97% 45%,rgba(255,102,0,.2) 0%,rgba(255,255,255,.2) 100%),
        radial-gradient(circle at 5% -29%,#FFE2CF 0%,#FFFFFF 100%);
}

.ab-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--primary);
}

.ab-eyebrow::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--primary);
}

/* Two columns: the copy on the left, the illustration filling what used to be
   an empty right half of the hero. */

/* The copy column takes a larger share than 1.08fr did: its lower row is
   split between the paragraph and the "Learn. Build. Grow." tag, so the
   paragraph only ever gets about 400px of it and the intro ran to six
   lines. */

/* Above the waves. */

.ab-hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.26fr) minmax(0,.74fr);
    gap:clamp(32px,4vw,64px);
    align-items:center;
}

/* The container's own inline padding (20px, shared by every section on the
   site) reads as flush-left on a hero this wide. This nudges just the copy
   in from that edge without touching .container elsewhere. */

/* 64px held the copy well inside the container; 24 took it too far the
   other way. This sits between them. */

.ab-hero-copy{
    padding-left:clamp(20px,4.6vw,68px);
}

.ab-hero-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    /* Pulled in off the section edge rather than out toward it -- the copy
       carries the outer inset on its side, so the artwork balances it by
       coming in on this one. The negative left margin moves the whole box
       over rather than only trimming its right edge. Both in vw so they
       close before the hero stacks. */
    margin-left:clamp(-20px,-1.4vw,0px);
    margin-right:clamp(0px,3.6vw,52px);
}

.ab-hero-visual picture{
    display:contents;
}

.ab-hero-visual img{
    position:relative;
    z-index:1;
    width:100%;
    /* 560 was the old artwork's ceiling and never bound -- the track is
       narrower than that. 430 actually caps this one, which is what brings
       its size down. */
    /* The artwork is 1004 wide now, not 936: the right-hand card and the
       shapes beside it were cut off in the old export and have been put
       back. Held at the same rendered size by taking the cap up in the
       same proportion, so nothing else on the hero moves. */
    max-width:461px;
    height:auto;
    display:block;
    /* The card treatment -- rounded corners and a lift -- was here because the
       old artwork shipped on a white background and had to be made to look
       deliberate. This one is a cut-out with its own alpha, so a card would
       draw a box around nothing. */
    animation:abHeroFloat 6s var(--ease-soft) infinite;
}

/* Three bands along the foot of the hero, tinted off the brand ramp so they
   read as the hero's own wash lifting rather than as a graphic laid over it.

   Each rises a little further than the one behind it, stretches sideways and
   fades as it goes, then runs back -- alternate is the yoyo. The durations
   differ per band, which is what stops the three moving as one block, and
   the curve is sine.inOut written out as its bezier.

   transform-box:fill-box so scaleX pivots on each band's own centre rather
   than on the SVG's origin. */

.ab-hero-waves{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:clamp(120px,15vw,240px);
    z-index:0;
    pointer-events:none;
}

.ab-hero-wave{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:abWaveDrift var(--wave-time) cubic-bezier(.37,0,.63,1) infinite alternate;
}

.ab-hero-wave-1{ --wave-time:3s; --wave-lift:-20px; fill:rgba(255,102,0,.07); }
.ab-hero-wave-2{ --wave-time:4s; --wave-lift:-10px; fill:rgba(255,102,0,.10); }
.ab-hero-wave-3{ --wave-time:5s; --wave-lift:0px;   fill:rgba(255,226,207,.85); }

@keyframes abWaveDrift{
    to{
        transform:translateY(var(--wave-lift)) scaleX(1.2);
        opacity:.4;
    }
}

@media (prefers-reduced-motion:reduce){

    .ab-hero-wave{
        animation:none;
    }

}

/* Warm halo behind the artwork, echoing the hero's own gradient. */

.ab-hero-glow{
    position:absolute;
    inset:8% 6% 12%;
    border-radius:42% 58% 46% 54%/48% 42% 58% 52%;
    background:radial-gradient(circle at 32% 30%,rgba(255,102,0,.18) 0%,rgba(255,102,0,.04) 62%,transparent 78%);
}

@keyframes abHeroFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

@media (prefers-reduced-motion:reduce){
    .ab-hero-visual img{
        animation:none;
    }
}

.ab-hero h1{
    margin-top:36px;
    font-family:var(--font-sans);
    font-size:var(--fs-hero);
    font-weight:400;
    line-height:1.04;
    letter-spacing:-.02em;
    color:var(--ab-ink);
}

.ab-hero h1 em{
    font-style:italic;
    color:var(--primary);
}

/* The "Learn. Build. Grow." tag used to share this row with the paragraph.
   It sits under the artwork now, the way the frame has it, so the row holds
   the paragraph alone. */

.ab-hero-foot{
    margin-top:36px;
}

/* The hero sits on a peach wash rather than white, which eats some of the
   contrast — hence the extra weight over the 400 used elsewhere. Larger
   than --fs-lead too: this is the only paragraph in the hero and it was
   reading at the size of a section intro halfway down the page. */

.ab-hero-foot p{
    font-family:var(--font-sans);
    font-size:clamp(16px,1.35vw,19px);
    font-weight:500;
    line-height:1.65;
    color:var(--ab-body);
    /* Squares the right edge off against the left one -- which is what
       this comment always claimed, but `left` only squares the left. The
       three lines were 490, 529 and 437 in a 570 column, so the right edge
       stepped in and out by nearly 100px beneath a heading whose own two
       lines sit flush.

       Justified rather than balanced: balance evens the line lengths but
       leaves the ends ragged, and it is the ends that had to line up. The
       stretch is small at this measure -- the loosest line gains about 9px
       spread over nine word gaps, which reads as slightly open spacing
       rather than as rivers. Worth another look if this column ever gets
       narrower, since the same stretch in a shorter line is what makes
       justified text gappy. */
    text-align:justify;
    /* With the tag gone from this row the paragraph would run the whole
       column. The frame breaks it over four lines, which is what this
       measure comes to. */
    max-width:30em;
}

/* The aside sits behind a hairline rule in Figma. */

.ab-hero-aside{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.ab-hero-tag{
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ab-ink);
}

/* Below this the container is narrow enough that the tag's fixed ~200px
   beside the paragraph is what forces a fourth line, so it drops under the
   copy and gives the row back to the paragraph. Measured: the paragraph
   needs about 495px to hold three lines, which it loses just under 1360. */

@media (max-width:1360px){

    .ab-hero-foot{
        grid-template-columns:minmax(0,1fr);
    }

    .ab-hero-aside{
        padding-left:0;
        border-left:0;
    }

}

/* ==========================
   OUR JOURNEY

   A dashed centre rail with alternating cards. Figma uses a 5px
   16/16 dashed line, 50px ring nodes and translucent glass cards.
========================== */

.ab-journey{
    position:relative;
    padding:var(--space-section) 0;
    overflow:hidden;
}

.ab-journey-shape{
    position:absolute;
    width:220px;
    max-width:14vw;
    height:auto;
    opacity:.18;
    pointer-events:none;
    z-index:0;
}

.ab-journey-shape.is-left{
    top:-15px;
    left:-20px;
}

.ab-journey-shape.is-right{
    right:-20px;
    bottom:-15px;
}

@media (max-width:768px){
    .ab-journey-shape{
        display:none;
    }
}

/* The intro is a full paragraph now, not the one short line it used to be.
   Holding it to a clean centred column keeps it well clear of both corner shapes,
   and the stacking context guarantees the copy sits above everything. */

.ab-journey .ab-head{
    position:relative;
    z-index:2;
}

.ab-journey .ab-head p{
    max-width:50rem;
    margin-inline:auto;
    font-size:clamp(15px,1.25vw,18px);
    line-height:1.6;
    text-wrap:balance;
}

.ab-journey-list{
    position:relative;
    margin-top:var(--space-block);
    list-style:none;
    display:grid;
    gap:44px;
}

/* The dashed spine. */

.ab-journey-list::before{
    content:"";
    position:absolute;
    left:50%;
    top:24px;
    bottom:24px;
    width:0;
    border-left:5px dashed var(--primary);
    transform:translateX(-50%);
}

.ab-journey-row{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

/* Clearance from the spine = 25px node radius + 100px connector + 19px gap,
   the same run Figma lays out. Anything less and the card sits on the line. */

.ab-journey-row.is-left .ab-journey-card{
    grid-column:1;
    justify-self:end;
    margin-right:144px;
}

.ab-journey-row.is-right .ab-journey-card{
    grid-column:2;
    justify-self:start;
    margin-left:144px;
}

/* 50px white ring node on the spine. */

.ab-journey-dot{
    position:absolute;
    left:50%;
    top:50%;
    width:50px;
    height:50px;
    border:10px solid var(--primary);
    border-radius:50%;
    background:#fff;
    transform:translate(-50%,-50%);
    transition:transform var(--dur-base) var(--ease-spring);
}

.ab-journey-row:hover .ab-journey-dot{
    transform:translate(-50%,-50%) scale(1.12);
}

/* The connector from node to card. */

.ab-journey-row::before{
    content:"";
    position:absolute;
    top:50%;
    width:100px;
    height:3px;
    background:var(--primary);
    transform:translateY(-50%);
}

.ab-journey-row.is-left::before{
    right:50%;
    margin-right:25px;
}

.ab-journey-row.is-right::before{
    left:50%;
    margin-left:25px;
}

.ab-journey-card{
    /* Widened from 462px. Justified text needs a wide enough measure or the
       browser has to stretch the word spaces to reach the right edge — at
       462px/24px the worst line was being pulled 136px wider than its natural
       width. 500px paired with the smaller type below brings that down to
       ~39px, which reads as normal spacing. */
    max-width:500px;
    padding:22px 25px;
    /* Was rgba(255,255,255,.25) + a blur — glass-see-through by design, but
       the section's two 427px corner shapes land directly under the 2nd and
       3rd cards (checked their actual boxes: they genuinely overlap), and at
       25% opacity the card did nothing to stop the shape's hard orange edges
       showing straight through, cutting across the card's border. Solid
       background makes the card fully occlude whatever sits behind it,
       regardless of where the decorative shapes fall. */
    background:#fff;
    border-radius:var(--r-20);
    box-shadow:0 4px 4px var(--primary-25);
    transition:transform var(--dur-base) var(--ease-out);
}

/* Figma flips which edge carries the 3px orange rule. */

.ab-journey-row.is-right .ab-journey-card{
    border-top:1px solid var(--primary);
    border-left:3px solid var(--primary);
}

.ab-journey-row.is-left .ab-journey-card{
    border-top:1px solid var(--primary);
    border-right:3px solid var(--primary);
    /* Left-hand cards used to carry text-align:right to mirror the layout.
       Mirroring the card is fine; mirroring the text is not — it left every
       line on that side starting at a different point, which read as
       misaligned next to the flush left edge of the cards opposite. The
       orange rule on the right edge still carries the mirroring. */
}

.ab-journey-row:hover .ab-journey-card{
    transform:translateY(-4px);
}

.ab-journey-card p{
    font-family:var(--font-display);
    /* Capped at 20px rather than 24px — see the max-width note above; the two
       together are what keep the justified lines from going gappy. */
    font-size:clamp(15px,1.45vw,20px);
    font-weight:400;
    line-height:1.45;
    color:var(--ink);
    /* Flush on both edges, matching the rest of the site's body copy. */
    text-align:left;
}

/* ==========================
   FOUR WAYS
========================== */

/* Frosted cards need something behind them or the blur has nothing to do, so
   the flat grey wash becomes a light field with colour in it: cool on the
   left, warm on the right, both well short of anything you would call a
   tint. The two blobs sit at the height the card row runs through, which is
   the only band where the blur actually shows.

   overflow:hidden is what keeps the blobs from widening the page -- they
   deliberately hang past both edges so neither reads as a shape. */

.ab-ways{
    position:relative;
    overflow:hidden;
    padding:var(--space-section) 0;
    background:
        radial-gradient(58% 86% at 10% 16%,rgba(122,166,255,.16) 0%,rgba(122,166,255,0) 62%),
        radial-gradient(54% 78% at 92% 76%,rgba(255,150,86,.14) 0%,rgba(255,150,86,0) 64%),
        linear-gradient(180deg,#F6F9FD 0%,#FDFAF7 100%);
}

.ab-ways::before,
.ab-ways::after{
    content:"";
    position:absolute;
    z-index:0;
    border-radius:50%;
    filter:blur(64px);
    pointer-events:none;
}

.ab-ways::before{
    width:540px;
    height:340px;
    left:-120px;
    top:34%;
    background:radial-gradient(circle,rgba(96,150,255,.34) 0%,rgba(96,150,255,0) 70%);
}

.ab-ways::after{
    width:580px;
    height:360px;
    right:-140px;
    top:48%;
    background:radial-gradient(circle,rgba(255,138,61,.28) 0%,rgba(255,138,61,0) 70%);
}

/* The copy sits above the blobs. */

.ab-ways > .container{
    position:relative;
    z-index:1;
}

.ab-ways-title{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.0078em;
    text-align:center;
    color:var(--ab-ink);
}

/* ==========================
   FOUR WAYS  —  cards hanging off a wavy line

   Was a plain 4-column grid with a hairline over each column. Now the four
   sit on one horizontal track that runs wider than the container on purpose,
   so the fourth card is always part-visible and the row reads as draggable.

   --ab-wave-band  height reserved above the cards for the wave itself
   --ab-wave-drop  length of the little cord between the pin and the card
   --ab-wave-swing vertical distance between a crest card and a trough card;
                   js/about-ways.js reads this so the drawn path and the card
                   offsets can never disagree.
========================== */

/* --ab-wave-drop has to stay LARGER than --ab-wave-swing. A trough pin sits
   one swing below a crest pin but only one drop above its own card, so with a
   short cord the trough sank past the top of the raised card and the line cut
   straight through its text. Cord longer than the swing keeps the whole curve
   clear of every card, and reads more like something actually hanging. */

.ab-ways{
    --ab-wave-band:28px;
    --ab-wave-drop:72px;
    --ab-wave-swing:56px;
}

.ab-ways-scroller{
    margin-top:var(--space-block);
    overflow-x:auto;
    overflow-y:hidden;
    /* Bleeds to the viewport edges so cards can run off the side rather than
       stopping short at the container's padding. */
    margin-inline:calc(var(--container-padding) * -1);
    padding-inline:var(--container-padding);
    /* Kinetic scrolling on iOS, and no rubber-banding of the whole page. */
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
    /* No visible bar. The row is dragged, swiped or arrow-keyed, and the
       cards running off the viewport edge already say that it moves --
       overflow-x stays auto, so every one of those still works. */
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.ab-ways-scroller.is-dragging{
    cursor:grabbing;
    /* Stops the drag from selecting the card text as it moves. */
    user-select:none;
}

.ab-ways-scroller:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:4px;
    border-radius:var(--radius-sm);
}

.ab-ways-scroller::-webkit-scrollbar{
    display:none;
}

/* Shrink-wraps the row so the SVG can be stretched across its full width. */

.ab-ways-inner{
    position:relative;
    width:max-content;
    /* Room underneath for the lower (trough) cards. */
    padding-bottom:var(--ab-wave-swing);
}

/* Spans the whole inner box, not just the band above the cards: a trough pin
   sits a full --ab-wave-swing below a crest pin, which is past the band. With
   the SVG covering everything, its viewBox maps 1:1 to CSS pixels and the
   script can place points at the cards' real offsets with no conversion. */

.ab-ways-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:visible;
}

.ab-ways-wave-path{
    stroke:rgba(255,102,0,.55);
    stroke-width:2.5;
    stroke-linecap:round;
}

.ab-ways-row{
    display:flex;
    gap:36px;
    align-items:flex-start;
    padding-top:calc(var(--ab-wave-band) + var(--ab-wave-drop));
}

/* Fixed width rather than 1fr: the track has to be wider than the container
   for the fourth card to peek and invite the drag. */

/* Proper cards now, not bare columns. No border-top any more either: that
   hairline was the old connector, and with the wave above them the two read
   as two separate lines. The wave plus each card's cord does that job. */

.ab-way{
    position:relative;
    flex:0 0 clamp(250px,23vw,330px);
    display:flex;
    flex-direction:column;
    gap:11px;
    padding:24px 22px 26px;
    /* Glass: a light lip along the top edge where the light would catch, a
       fill that lets the field behind show through, and the blur that makes
       it read as a pane rather than a transparent box. saturate lifts the
       colour it is picking up, which is what stops it going grey. */
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--radius-lg);
    background:linear-gradient(152deg,rgba(255,255,255,.74) 0%,rgba(240,246,255,.56) 100%);
    backdrop-filter:blur(16px) saturate(155%);
    -webkit-backdrop-filter:blur(16px) saturate(155%);
    box-shadow:
        0 12px 32px -14px rgba(58,86,142,.28),
        inset 0 1px 0 rgba(255,255,255,.95);
    text-align:left;

    /* Hung things don't sit perfectly square — a fraction of a degree, in
       opposite directions, is enough to suggest that without looking like a
       mistake. Straightens under the cursor. */
    transform:rotate(-.7deg);
    transform-origin:top center;

    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.ab-way:nth-child(even){
    transform:rotate(.7deg);
}

/* Every second card hangs from a trough, so it sits lower. */

.ab-way:nth-child(even){
    margin-top:var(--ab-wave-swing);
}

/* The cord from the wave down to the card, and the pin sitting on the wave. */

.ab-way::before{
    content:"";
    position:absolute;
    left:50%;
    top:calc(var(--ab-wave-drop) * -1);
    width:1px;
    height:var(--ab-wave-drop);
    background:var(--primary-35);
    transition:background var(--dur-base) var(--ease-out);
}

.ab-way::after{
    content:"";
    position:absolute;
    left:50%;
    top:calc(var(--ab-wave-drop) * -1);
    width:9px;
    height:9px;
    margin-left:-4.5px;
    margin-top:-4.5px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--primary);
    transition:transform var(--dur-base) var(--ease-spring);
}

/* Swings straight and lifts a little, as though steadied by hand. */

.ab-way:hover,
.ab-way:nth-child(even):hover{
    transform:rotate(0deg) translateY(-5px);
    border-color:rgba(255,255,255,1);
    box-shadow:
        0 20px 44px -16px rgba(58,86,142,.34),
        inset 0 1px 0 rgba(255,255,255,1);
}

/* Where the browser cannot blur, a translucent card over a coloured field is
   just washed-out text. These fall back to the opaque card they were. */

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

    .ab-way{
        border-color:rgba(255,102,0,.16);
        background:#fff;
        box-shadow:0 6px 20px rgba(0,0,0,.05);
    }

}

.ab-way:hover::before{
    background:var(--primary);
}

.ab-way:hover::after{
    transform:scale(1.25);
}

@media (prefers-reduced-motion:reduce){

    .ab-way,
    .ab-way::after{
        transition:none;
    }

    .ab-way,
    .ab-way:nth-child(even),
    .ab-way:hover,
    .ab-way:nth-child(even):hover{
        transform:none;
    }

}

/* On a phone the full 56px swing costs too much height, but flattening it to
   zero left a dead straight line with pins on it. A half swing keeps the
   shape and stays cheap. The script reads these values, so the path follows
   automatically. */

@media (max-width:640px){

    /* Same rule as above: the cord stays longer than the swing so the curve
       clears the cards. Both scale down together here. */
    .ab-ways{
        --ab-wave-band:20px;
        --ab-wave-drop:44px;
        --ab-wave-swing:28px;
    }

    .ab-ways-row{
        gap:20px;
    }

    .ab-way{
        padding:20px 18px 22px;
    }

}

.ab-way-step{
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--primary);
    text-align:left;
}

.ab-way h3{
    font-family:var(--font-sans);
    /* Fluid so all four titles stay on one line. At a flat 22px the longest
       ("Turn experience into confidence.") needed 336px against a 313px
       column and wrapped, leaving it the odd one out. The cap is set from
       that measurement with room to spare, and the vw term keeps the fit as
       the columns narrow. */
    font-size:clamp(15px,1.33vw,19px);
    font-weight:400;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--ab-ink);
    text-align:left;
    /* One line each now, so a single line is all the paragraphs below need
       reserved to start level with one another. */
    min-height:1.25em;
}

.ab-way p{
    font-family:var(--font-sans);
    font-size:15.5px;
    /* 500, not 400. These cards sit on the section's grey wash rather than on
       white, which costs the stroke some of its weight — the same 400 that
       holds up elsewhere reads thin here. */
    font-weight:500;
    line-height:1.6;
    color:var(--ab-body);
    /* Flush on both edges, matching the rest of the page's body copy. */
    text-align:left;
}

/* ==========================
   OUR SERVICES
========================== */

.ab-services{
    padding:var(--space-section) 0;
}

.ab-services-grid{
    margin-top:var(--space-block);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    /* Fluid rather than a flat 36px: four columns plus three fixed gaps ate
       the measure as the viewport narrowed, so between 1400 and 1100 the
       cards lost a line's worth of width and one card's copy spilled onto a
       fifth line while its neighbours held four. Full 36px from 1440 up. */
    gap:clamp(24px,2.5vw,36px);
}

.ab-service{
    display:flex;
    flex-direction:column;
    border:.8px solid rgba(255,102,0,.14);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.ab-service:hover{
    transform:translateY(-6px);
    border-color:var(--primary-35);
    box-shadow:var(--glow);
}

.ab-service-media{
    position:relative;
    height:184px;
    overflow:hidden;
}

.ab-service-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--dur-slow) var(--ease-out);
}

.ab-service:hover .ab-service-media img{
    transform:scale(1.06);
}

/* A light warm scrim keeps the badge readable without dulling the photo. */

.ab-service-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(255,102,0,.04) 0%,
        rgba(128,51,0,.05) 50%,
        rgba(0,0,0,.08) 100%);
}

.ab-service-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:1;
    padding:4px 9px;
    border-radius:5px;
    background:var(--primary);
    box-shadow:0 2px 8px rgba(255,102,0,.3);
    font-family:var(--font-sans);
    /* 9px in the Figma export. Uppercase and letter-spaced it was legible on a
       big monitor and a smear on a phone, so it sits at 12px now — still a
       micro-label, but readable. */
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#fff;
}

/* flex:1 lets every card's arrow sit on the same baseline via margin-top:auto,
   whatever the description length. The top padding clears the icon that
   straddles the photo edge. */

.ab-service-body{
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:38px 16px 18px;
}

/* Straddles the photo/body seam. It lives in the body (which paints after the
   media) so it sits above the scrim without needing a z-index. */

.ab-service-icon{
    position:absolute;
    top:0;
    left:16px;
    translate:0 -50%;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 4px 12px rgba(255,102,0,.32);
    font-size:17px;
    color:#fff;
}

/* These were 15px/13px, sized when the card copy was a single short line
   each. The rewritten descriptions run to several lines, and at 13px they
   read as fine print rather than as card body text. */

.ab-service-body h3{
    font-family:var(--font-sans);
    font-size:17px;
    font-weight:700;
    line-height:1.35;
    color:var(--ab-ink);
}

.ab-service-body p{
    font-family:var(--font-sans);
    font-size:15px;
    /* Matches .ab-way p — 500 so the card copy across the page carries the
       same weight. */
    font-weight:500;
    line-height:1.65;
    color:var(--ab-body);
}

/* Circular arrow pinned to the bottom-right of the card. */

.ab-service-more{
    margin-top:auto;
    align-self:flex-end;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1.5px solid var(--primary);
    font-size:12px;
    color:var(--primary);
    transition:
        background-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.ab-service:hover .ab-service-more{
    background:var(--primary);
    color:#fff;
}

/* ==========================
   BEYOND THE SCREEN
========================== */

.ab-events{
    padding:var(--space-section) 0;
    background:
        radial-gradient(circle at 97% 45%,rgba(255,102,0,.2) 0%,rgba(255,255,255,.2) 100%),
        radial-gradient(circle at 5% -29%,#FFE2CF 0%,#FFFFFF 100%);
}

/* This one intro is pulled in from the shared 60rem. At the full measure the
   sentence ran on to "and experience" and left "something new." alone on the
   second line. 708 is the width that puts the break after "share ideas,", so
   "ask questions and experience something new." starts the second line and the
   pair reads as two thoughts rather than a long line with a stub under it.

   The number is exact rather than round: 720 still carried "ask" up to the
   first line and 685 pushed "ideas," down to the second.

   Scoped to this section on purpose. The shared rule's taper is right for the
   other intros, which are longer and set in three lines. */

.ab-events .ab-head p{
    max-width:708px;
}

.ab-events-img{
    display:block;
    width:100%;
    height:auto;
    margin-top:var(--space-block);
    border-radius:28px;
    object-fit:cover;
}

/* ==========================
   FOUNDER'S NOTE

   Portrait card on the left, a peach quote card on the right with an
   oversized orange quotation mark — matches the Figma "Founder's Note" panel.
========================== */

/* ==========================
   TEAM STATS
========================== */

/* Lifted out of the team section and set between the events band and the
   founder’s note. The card brings its own border, background and shadow, so
   all it needs from a band is air either side — and less of it than a full
   section, since this is one strip rather than a block of content.

   The events band above closes on a peach wash and the note below opens on
   white, so the strip sits on the seam between them; keeping the band
   transparent lets whichever page colour is behind it carry through instead
   of drawing a third edge across the join. */

.ab-stats{
    padding:var(--space-section-sm) 0;
}

/* margin-top was its gap from the team header it used to sit under; there is
   nothing above it here but the band’s own padding.

   White on white left the card with only its hairline to hold it together,
   and on this seam that read as four numbers floating rather than a strip.
   It takes the warm tint the events band above it fades out to, and its
   edges come up a step to match — dark enough to sit down on the page,
   light enough that the icon chips inside keep their own colour. */

.ab-stats .tm-stats{
    margin-top:0;
    /* cream-500 is four steps off the cream-100 fill, so on it the edge and
       the three dividers came out almost the same colour as the card and the
       four cells read as one block. The brand orange at half strength keeps
       the warmth and actually draws a line. */
    border-color:var(--primary-50);
    background:var(--cream-100);
    box-shadow:0 12px 30px -18px rgba(160,84,30,.45);
}

.ab-stats .tm-stat{
    border-right-color:var(--primary-50);
}

.ab-stats .tm-stat:last-child{
    border-right:none;
}

.ab-founder{
    /* Was clamp(28,2.8vw,40) top and nothing at all on the bottom, trimmed
       back so the note would sit close to its neighbours. Too close at both
       ends: the events band above closes on a hard peach edge, and with no
       floor here the team section below had to carry the whole gap on its
       own top padding - which its corner dot grids then sat 86px inside,
       putting them back at the boundary the padding was opening.

       Symmetric now. The note holds its own separation at both ends and the
       section below can go back to the plain section token.

       And on the page's own token rather than a size of its own: at 4.6vw
       this section's two seams came to 145px against the 159 every other
       seam on the page carries, so the note sat a touch tighter than
       everything around it. */
    padding:var(--space-section) 0;
}

/* Figma splits this ~60/40. The quote card matches the photo's height and
   centres its own content, so the two columns stay balanced even though the
   quote is far shorter than the photo. */

.ab-founder-grid{
    display:grid;
    /* Was 1.57fr. The row's height is set by the quote card, not the photo
       (the image is height:100%, so it contributes no intrinsic height), so
       giving the quote a wider measure is what actually shortens the block —
       and it narrows the photo by the same amount. */
    grid-template-columns:1.32fr 1fr;
    align-items:stretch;
    gap:clamp(24px,3.8vw,52px);
    /* The quote mark hangs 58% of its own height above the card's top edge
       -- about 31px at full width -- so this margin is not the gap you see.
       At 36px the heading sat roughly 5px off the mark while every other
       section on the page opens its content 40 to 64px below its heading,
       which is why the note read as glued to its title.

       Sized to clear the overhang and then land in that same band: 88px
       here leaves 57px of daylight at 1440, and the clamp tracks the mark
       (which is itself a vw clamp) down to about 44px at 1100. */
    margin-top:clamp(64px,6.2vw,88px);
}

/* The photo is a peach *frame*: 1px border, a white gutter, then the image
   with its own smaller radius inside. */

.ab-founder-photo{
    padding:clamp(8px,1vw,14px);
    border:1px solid var(--cream-500);
    border-radius:26px;
    background:var(--white);
}

/* The quote card's length now varies with its content, so the photo instead
   stretches to match whatever height the row ends up being (align-items:stretch
   on .ab-founder-grid gives this box the full row height already) — object-fit
   keeps the source (1600x980) cropped sensibly at any resulting ratio. */

.ab-founder-photo > img{
    display:block;
    width:100%;
    height:100%;
    min-height:260px;
    border-radius:14px;
    object-fit:cover;
}

.ab-founder-quote{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,30px);
    border:1px solid var(--cream-500);
    border-radius:26px;
    background:var(--cream-200);
    color:var(--ink-900);
}

/* Sits proud of the card's top-left corner — the offsets are a fraction of the
   mark's own box so it keeps its position as the mark scales down. `translate`
   rather than `transform` so the card's data-reveal="right" animation (which
   ends at transform:none) can't wipe it out. */

.ab-founder-mark{
    position:absolute;
    top:0;
    left:0;
    width:clamp(46px,4.3vw,60px);
    height:auto;
    translate:-35% -58%;
    fill:var(--primary);
}

.ab-founder-quote p{
    font-family:var(--font-sans);
    /* Was 23px at full width — pull-quote scale on three paragraphs of prose.
       The photo stretches to whatever height this card ends up, so the
       oversized text was what made the whole section tower over the page. */
    font-size:clamp(15px,1.2vw,17px);
    font-weight:500;
    line-height:1.55;
    color:var(--ink-900);
    /* Justified again, so each line sits square under the one above it rather
       than ending in a different place.

       It failed the first time because it was justify on its own: with plain
       wrapping the lines come out at whatever length the words allow, and
       justify then stretches each one to the measure, so the word gaps vary
       line to line. Paired with pretty the lines arrive nearly full already
       and there is almost nothing left to stretch. Same pairing as the hero
       paragraph in css/hero.css and the internship intro.

       The phone guard that shipped with the first attempt is still in place
       further down: under 600px the card's measure drops near 310px, and no
       pairing saves justification at that width. */
    text-align:justify;
    text-wrap:pretty;
}

/* The note runs to three paragraphs. Without a gap between them the whole
   quote reads as one unbroken block, so each new thought gets its own space. */

.ab-founder-quote p + p{
    margin-top:clamp(12px,1.3vw,18px);
}

.ab-founder-quote footer{
    margin-top:clamp(18px,1.7vw,24px);
    font-family:var(--font-sans);
    font-size:clamp(14px,1.15vw,16px);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

/* ==========================
   OUR TEAM
========================== */

/* Replaces the old .ab-team / .ab-member row. That was a drag-scrolling
   strip of photo-and-name cards; this is the section as designed - a header
   with its own badge, a stat bar, five profile cards and a values strip. */

.tm{
    position:relative;
    /* The corner dot grids sit outside the container and must not open a
       horizontal scrollbar on a narrow window. */
    overflow:hidden;
    /* Back to the plain token at both ends. The extra 48 on top was covering
       for the founder's note having no bottom padding; it has one now, so
       this stacks on top of that rather than doing the whole job. */
    padding:var(--space-section) 0;
}

/* Corner confetti. One repeating radial rather than 30 elements. */

.tm-dots{
    position:absolute;
    /* Measured from the section's top edge, not from the content, so it has
       to move with the padding above or it stays behind at the boundary and
       lands in the new gap. */
    top:86px;
    width:76px;
    height:58px;
    background-image:radial-gradient(var(--primary-35) 1.7px,transparent 1.7px);
    background-size:13px 13px;
    pointer-events:none;
}

.tm-dots-l{ left:30px; }
.tm-dots-r{ right:30px; }

.tm-inner{
    position:relative;
}

/* --- Header --- */

.tm-head{
    position:relative;
    text-align:center;
}

/* The pill now carries the "Meet Our Core Team" line that used to sit in its
   own band below the stats, squiggles and all. They are the same paths, drawn
   in currentColor, so on the orange ground they come out white instead of
   orange -- the mark inverts with the pill rather than needing a second
   colour rule. */

/* Sized as a heading rather than as an eyebrow. It carries the line that used
   to be a standalone h3, so 11px read as a caption of it rather than as the
   thing itself; this lands near the size that heading had. Letter-spacing eases
   off as the type grows -- .12em was set for 11px and turns a nineteen-pixel
   uppercase line into a very wide band. */

.tm-pill{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:12px 28px;
    border-radius:var(--r-50);
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:clamp(15px,1.5vw,19px);
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:#fff;
}

/* Back to the size the standalone heading drew them at, now that the label
   beside them is that heading's size again. */

.tm-pill svg{
    flex:none;
    width:30px;
    height:9px;
}

.tm-head h2{
    /* More air above than the 18 it had - the pill was sitting almost on the
       cap line of a headline this size. */
    margin-top:24px;
    font-family:var(--font-sans);
    /* Ceiling down from 58. At that size it was the largest type on the page
       by some way, including the hero. */
    font-size:clamp(26px,3.6vw,46px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.02em;
    text-wrap:balance;
    color:var(--ink);
}

.tm-head > p{
    margin:18px auto 0;
    max-width:560px;
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.6;
    text-wrap:pretty;
    color:var(--ink-500);
}

/* --- Stat bar --- */

.tm-stats{
    display:grid;
    /* Four stats, not five — the "120+ Team Members" cell was removed. The
       dividers are cell borders, so the column count has to match the cell
       count or the last cell keeps a rule with nothing after it. */
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:var(--space-block);
    /* Same as the values strip: the dividers are cell borders, so the
       breathing room has to live on the cells or the lines stop short of the
       card edge. */
    padding:0 6px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-20);
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.tm-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:22px 14px;
    border-right:1px solid var(--border-soft);
}

.tm-stat:last-child{ border-right:none; }

.tm-stat i{
    display:grid;
    place-items:center;
    flex:none;
    width:34px;
    height:34px;
    border-radius:11px;
    font-size:14px;
}

.tm-stat strong{
    display:block;
    font-family:var(--font-sans);
    font-size:19px;
    font-weight:800;
    line-height:1.2;
    color:var(--ink);
}

.tm-stat small{
    display:block;
    font-family:var(--font-sans);
    font-size:12px;
    line-height:1.35;
    color:var(--ink-500);
}

/* Icon tints. Tinted plate behind the glyph for the stat row and the badge,
   flat glyph colour for the values strip. */

.tint-violet{ background:#EFEAFE; color:#7C5CFC; }
.tint-blue{   background:#E6F2FE; color:#2F8BEA; }
.tint-green{  background:#E6F7EE; color:#1FA366; }
.tint-orange{ background:var(--primary-10); color:var(--primary); }
.tint-pink{   background:#FDE9F1; color:#E8558E; }

.flat-orange{ color:var(--primary); }
.flat-blue{   color:#2F8BEA; }
.flat-green{  color:#1FA366; }
.flat-amber{  color:#E8A400; }

/* --- Band heading --- */

/* --- Profile cards --- */

/* The band that used to introduce this grid is gone; its heading moved into
   .tm-pill and its strapline was dropped. The grid picks up the block gap the
   band was carrying, so the cards do not ride straight up against the stats. */

.tm-carousel-wrap{
    position:relative;
    margin-top:var(--space-block);
}

.tm-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:18px;
    margin-top:0;
    padding:12px 6px 20px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
}

.tm-grid::-webkit-scrollbar{
    display:none;
}

.tm-grid.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto;
    scroll-snap-type:none;
}

.tm-card{
    flex:0 0 255px;
    min-width:255px;
    max-width:275px;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border-soft);
    border-radius:16px;
    background:#fff;
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

@media (min-width:1200px){
    .tm-card{
        flex:0 0 calc((100% - (3 * 18px)) / 4.25);
        min-width:250px;
        max-width:275px;
    }
}

@media (max-width:1050px){
    .tm-card{
        flex:0 0 calc((100% - (2 * 16px)) / 3.2);
        min-width:225px;
    }
}

@media (max-width:768px){
    .tm-card{
        flex:0 0 calc((100% - 14px) / 2.2);
        min-width:215px;
    }
}

@media (max-width:520px){
    .tm-card{
        flex:0 0 82%;
        min-width:230px;
    }
}

.tm-carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    cursor:pointer;
    z-index:10;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.tm-carousel-btn.tm-prev{
    left:-22px;
}

.tm-carousel-btn.tm-next{
    right:-22px;
}

.tm-carousel-btn:hover:not(:disabled){
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 6px 20px rgba(255,102,0,.35);
    transform:translateY(-50%) scale(1.08);
}

.tm-carousel-btn:active:not(:disabled){
    transform:translateY(-50%) scale(0.96);
}

.tm-carousel-btn:disabled{
    opacity:0.25;
    cursor:not-allowed;
    box-shadow:none;
    pointer-events:none;
}

@media (max-width:1240px){
    .tm-carousel-btn.tm-prev{ left:-10px; }
    .tm-carousel-btn.tm-next{ right:-10px; }
}

@media (max-width:768px){
    .tm-carousel-btn.tm-prev{ left:-6px; width:38px; height:38px; font-size:13px; }
    .tm-carousel-btn.tm-next{ right:-6px; width:38px; height:38px; font-size:13px; }
}

.tm-carousel-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:16px;
    padding-bottom:4px;
}

.tm-carousel-dot{
    width:8px;
    height:8px;
    border-radius:4px;
    background:rgba(31,41,55,.18);
    border:none;
    padding:0;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}

.tm-carousel-dot:hover{
    background:rgba(255,102,0,.5);
}

.tm-carousel-dot.is-active{
    width:24px;
    background:var(--primary);
    border-radius:4px;
}

.tm-card:hover,
.tm-card:focus-within{
    transform:translateY(-6px);
    border-color:var(--primary-35);
    box-shadow:0 18px 38px rgba(0,0,0,.10);
}

/* The founder card carries the accent at rest, the way the design marks it
   out from the four beside it. */

.tm-card.is-lead{
    border-color:var(--primary-35);
}

.tm-card-photo{
    position:relative;
    aspect-ratio:1/1;
    /* The per-photo zoom below has to be clipped here. The card clips too,
       but only at its own rounded edge - without this, a zoomed portrait
       spills down over the name and role. */
    overflow:hidden;
    /* White, not cream. These are cut-out portraits on a white ground - the
       plate behind them has to be that same white or a seam shows down the
       side of every card. */
    background:#fff;
}

.tm-card-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    /* These five photos are not one set. Three are 537x600 head-and-
       shoulders, one is 368x518 three-quarter length, and one is a 360x185
       landscape frame with the subject off to the right. A single crop rule
       cannot frame all five, so each card can override the two things that
       matter - where the crop is taken from, and how far in.

       --pos defaults to `center top`: a portrait taller than its square
       loses the bottom, and centred it took the top of every head with it.
       --zoom defaults to 1 and exists for the wider shot, whose subject sits
       further from the camera than the rest. */
    object-position:var(--pos,center top);
    transform:scale(var(--zoom,1));
    transition:transform var(--dur-slow) var(--ease-out);
}

.tm-card:hover .tm-card-photo img{
    /* Composes with the per-photo zoom rather than replacing it. */
    transform:scale(calc(var(--zoom,1) * 1.05));
}

.tm-tag{
    position:absolute;
    top:8px;
    left:8px;
    max-width:calc(100% - 42px);
    padding:3px 8px;
    border-radius:var(--r-50);
    background:#fff;
    font-family:var(--font-sans);
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.07em;
    line-height:1.4;
    text-transform:uppercase;
    color:var(--primary);
    box-shadow:0 2px 6px rgba(0,0,0,.14);
}

.tm-star{
    position:absolute;
    top:8px;
    right:8px;
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:6px;
    background:var(--primary);
    font-size:9.5px;
    color:#fff;
}

.tm-card-body{
    /* Takes the slack so the link row stays on the card floor however many
       lines a bio runs to - five cards in a row, five different lengths. */
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 12px 10px;
}

.tm-card-body strong{
    font-family:var(--font-sans);
    font-size:15.5px;
    font-weight:800;
    line-height:1.3;
    color:var(--ink);
}

.tm-role{
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    color:var(--primary);
}

.tm-exp{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:700;
    color:var(--primary);
}

.tm-bio{
    margin-top:4px;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:13px;
    line-height:1.5;
    text-wrap:pretty;
    color:var(--ink-600);
}

.tm-links{
    display:flex;
    gap:8px;
    padding:10px 12px 12px;
    border-top:1px solid var(--border-soft);
}

.tm-links a{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--cream-50);
    font-size:12.5px;
    color:var(--ink-500);
    text-decoration:none;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.tm-links a:hover,
.tm-links a:focus-visible{
    background:var(--primary);
    color:#fff;
}

/* --- Values strip --- */

.tm-values{
    display:grid;
    grid-template-columns:1.15fr repeat(4,minmax(0,1fr));
    /* Balanced against what sits below it. This strip is the last thing in the
       section, so the white under it is .tm's bottom padding plus .ab-success's
       top padding -- two section tokens stacked. Matching that expression here
       leaves equal air above and below the band at every width; a fixed number
       only agreed at one. */
    margin-top:calc(var(--space-section) * 2);
    /* No vertical padding here. The dividers are border-rights on the cells,
       so they can only be as tall as the cells are - with the breathing room
       on this box the cells stopped 22px short of the card top and bottom and
       the lines read as floating stubs. The room moves into the cells, which
       then run the full height and take their borders with them. */
    /* Padding dropped from 0 8px so the first cell's tint can run to the card
       edge, and overflow clips it to the radius. Without the clip the tinted
       corner squares off against a rounded card. */
    padding:0;
    overflow:hidden;
    border:1px solid var(--border-soft);
    border-radius:var(--r-20);
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* This cell titles the strip; the four beside it are the values themselves.
   Set as a peer it read as a fifth value with a longer name, which is the
   confusion. A cream ground, a warm divider and a heavier marker make it the
   header of the row rather than a member of it. */

.tm-values-lead{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:24px 20px;
    background:var(--cream-50);
    border-right:1px solid rgba(255,102,0,.22);
    text-align:left;
}

/* Solid rather than the 10% tint, so it does not read as one more of the
   flat glyphs sitting above each value. */

.tm-values-lead i{
    display:grid;
    place-items:center;
    flex:none;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--primary);
    font-size:15px;
    color:#fff;
}

/* Was 13.5px, under the 15px the value names beside it take -- the title of
   the box was the smallest type in it. It now sits clearly above them. */

.tm-values-lead strong{
    display:block;
    font-family:var(--font-sans);
    font-size:clamp(16px,1.45vw,19px);
    font-weight:800;
    line-height:1.3;
    letter-spacing:-0.01em;
    text-wrap:balance;
    color:var(--ink);
}

.tm-accent{ color:var(--primary); }

.tm-values-lead-sub{
    display:block;
    margin-top:9px;
    font-family:var(--font-sans);
    font-size:13.5px;
    /* Was inheriting 400, the only unweighted copy in the strip, and it sits
       on the cream ground where 400 goes thinner than the same 400 does on
       the white cells beside it. */
    font-weight:600;
    line-height:1.5;
    color:var(--ink-600);
}

.tm-value{
    padding:22px 16px;
    border-right:1px solid var(--border-soft);
    text-align:center;
}

.tm-value:last-child{ border-right:none; }

.tm-value i{ font-size:17px; }

.tm-value strong{
    display:block;
    margin-top:9px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:800;
    color:var(--ink);
}

.tm-value p{
    margin-top:6px;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:13px;
    line-height:1.5;
    text-wrap:pretty;
    color:var(--ink-600);
}

/* --- Responsive --- */

/* Five profile cards need about 190px each to keep a bio readable; below
   ~1050 they go to three and then two rather than being squeezed. The
   dividers move with the wrap, so a row never ends on a hanging rule. */

@media (max-width:1050px){

    .tm-stats{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }

    .tm-stat{
        border-right:1px solid rgba(255,102,0,.22);
    }

    .tm-stat:last-child{ border-right:none; }

    .tm-values{
        grid-template-columns:repeat(2,minmax(0,1fr));
        row-gap:20px;
    }

    .tm-values-lead{
        grid-column:1 / -1;
        padding-bottom:20px;
        border-right:none;
        border-bottom:1px solid rgba(255,102,0,.22);
    }

    .tm-value:nth-child(odd){ border-right:none; }

}

@media (max-width:680px){

    .tm-dots{ display:none; }

    .ab-stats{
        padding:8px 0 12px !important;
    }

    .tm-stats{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        padding:6px 2px !important;
        border-radius:12px !important;
        gap:0 !important;
        overflow:visible !important;
    }

    .tm-stat{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
        justify-content:center !important;
        gap:2px !important;
        padding:3px 2px !important;
        border-right:1px solid rgba(255,102,0,.22) !important;
        min-width:0 !important;
    }

    .tm-stat:last-child{
        border-right:none !important;
    }

    .tm-stat span{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
        width:100% !important;
    }

    .tm-stat i{
        width:21px !important;
        height:21px !important;
        border-radius:6px !important;
        font-size:9.5px !important;
        margin-bottom:1px !important;
        flex:none !important;
    }

    .tm-stat strong{
        font-size:11.5px !important;
        font-weight:800 !important;
        line-height:1.1 !important;
        letter-spacing:-0.02em !important;
        white-space:nowrap !important;
        margin:0 !important;
    }

    .tm-stat small{
        font-size:8px !important;
        line-height:1.12 !important;
        margin-top:1px !important;
        color:var(--ink-500) !important;
        text-align:center !important;
        word-break:normal !important;
        text-wrap:balance !important;
    }

    .tm-values{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        margin-top:clamp(20px, 5vw, 36px) !important;
        border-radius:14px !important;
        border:1px solid var(--border-soft) !important;
        box-shadow:0 4px 14px rgba(0,0,0,.04) !important;
        overflow:hidden !important;
        background:#fff !important;
    }

    .tm-values-lead{
        grid-column:1 / -1 !important;
        display:flex !important;
        align-items:center !important;
        gap:10px !important;
        padding:12px 14px !important;
        background:var(--cream-50) !important;
        border-right:none !important;
        border-bottom:1px solid rgba(255,102,0,.18) !important;
        text-align:left !important;
    }

    .tm-values-lead i{
        width:28px !important;
        height:28px !important;
        font-size:12px !important;
        border-radius:8px !important;
        flex:none !important;
    }

    .tm-values-lead strong{
        font-size:clamp(12px, 3.2vw, 14px) !important;
        line-height:1.25 !important;
    }

    .tm-values-lead-sub{
        font-size:clamp(9.5px, 2.4vw, 11px) !important;
        margin-top:2px !important;
        line-height:1.35 !important;
    }

    .tm-value{
        padding:12px 10px !important;
        text-align:center !important;
        border-right:1px solid var(--border-soft) !important;
        border-bottom:1px solid var(--border-soft) !important;
    }

    .tm-value:nth-child(3),
    .tm-value:nth-child(5){
        border-right:none !important;
    }

    .tm-value:nth-child(4),
    .tm-value:nth-child(5){
        border-bottom:none !important;
    }

    .tm-value i{
        font-size:15px !important;
        display:inline-block !important;
    }

    .tm-value strong{
        font-size:clamp(12px, 3vw, 13.5px) !important;
        margin-top:5px !important;
        color:var(--ink) !important;
    }

    .tm-value p{
        font-size:clamp(9.5px, 2.3vw, 11px) !important;
        line-height:1.35 !important;
        margin-top:4px !important;
        max-width:100% !important;
        color:var(--ink-600) !important;
    }

}

@media (prefers-reduced-motion:reduce){

    .tm-card,
    .tm-card-photo img{
        transition:none;
    }

    .tm-card:hover,
    .tm-card:focus-within{
        transform:none;
    }

    .tm-card:hover .tm-card-photo img{
        /* Holds the framing zoom, drops only the hover movement. */
        transform:scale(var(--zoom,1));
    }

}

/* ==========================
   STUDENT SUCCESS
========================== */

.ab-success{
    padding:var(--space-section) 0;
}

.ab-success-rail{
    margin-top:var(--space-block);
    margin-inline:clamp(14px, 3.5vw, 36px);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.ab-success-track{
    display:flex;
    /* 72 was set around 640px cards. At 430 that gap read as a hole between
       them rather than as spacing. */
    gap:28px;
    padding-inline:10px;
}

.ab-student{
    flex:none;
    display:flex;
    align-items:center;
    gap:18px;
    width:430px;
    padding:30px 24px;
    border-radius:28px;
    /* Transparent border rather than none, so the hover state can colour it
       without the card changing width as it does. */
    border:1px solid transparent;
    background:rgba(217,217,217,.5);
    transition:
        transform var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

/* The rail pauses on hover, so a card under the pointer is standing still
   and worth answering. It lifts off the grey and onto white. */

.ab-student:hover{
    transform:translateY(-6px);
    background:#fff;
    border-color:var(--primary-20);
    box-shadow:0 16px 34px rgba(0,0,0,.10);
}

/* Drawn avatars, not photographs. These four are placeholder testimonials -
   one quote repeated across all of them, every role ending "at XYZ" - so
   there is nobody behind them to photograph, and the site's only genuine
   learner portraits belong to three other named people.

   A plain head-and-shoulders mark, no features: no eyes, no mouth, no hair.
   That is the whole difference between a professional placeholder and a
   cartoon - the moment a face gets expression it reads as an illustration
   of somebody, and these are not anybody. Same mark on all four, over the
   tint that already varies per card.

   Real photos are a straight swap - the disc is already sized and clipped
   for an <img>. */

.ab-student-avatar{
    flex:none;
    position:relative;
    overflow:hidden;
    /* 104 was nearly a third of the card and outweighed the name it sits
       beside. 68 keeps the disc readable at the speed the rail moves while
       giving the quote the width it was short of. */
    width:68px;
    height:68px;
    border-radius:50%;
    background:var(--tint,linear-gradient(145deg,#FF7A1A,#E85C00));
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
    transition:transform var(--dur-base) var(--ease-out);
}

/* Fills the disc rather than sitting inside it, so the shoulders run to the
   bottom edge the way a cropped portrait would. */

.ab-avatar-art{
    display:block;
    width:100%;
    height:100%;
}

.ab-student:hover .ab-student-avatar{
    transform:scale(1.06);
}

.ab-student-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-align:center;
}

.ab-student-body strong{
    font-family:var(--font-sans);
    font-size:17px;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--ink);
}

.ab-student-role{
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
    color:var(--ink);
}

.ab-student-stars{
    display:flex;
    gap:2px;
}

.ab-student-stars i{
    width:14px;
    height:14px;
    transition:transform var(--dur-base) var(--ease-out);
    background:linear-gradient(180deg,#FFEE00 0%,#F1981C 100%);
    -webkit-mask:var(--star-shape) center/contain no-repeat;
    mask:var(--star-shape) center/contain no-repeat;
    --star-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .6l3.2 7.4 8 .7-6 5.3 1.8 7.9L12 17.7 5 21.9l1.8-7.9-6-5.3 8-.7z'/%3E%3C/svg%3E");
}

/* Five stars rising in sequence rather than as one block - 40ms apart is
   enough to read as a run without becoming a performance. */

.ab-student:hover .ab-student-stars i{
    transform:translateY(-2px) scale(1.12);
}

.ab-student:hover .ab-student-stars i:nth-child(2){ transition-delay:.04s; }
.ab-student:hover .ab-student-stars i:nth-child(3){ transition-delay:.08s; }
.ab-student:hover .ab-student-stars i:nth-child(4){ transition-delay:.12s; }
.ab-student:hover .ab-student-stars i:nth-child(5){ transition-delay:.16s; }

@media (prefers-reduced-motion:reduce){

    .ab-student,
    .ab-student-avatar,
    .ab-student-stars i{
        transition:none;
    }

    .ab-student:hover{ transform:none; }
    .ab-student:hover .ab-student-avatar{ transform:none; }
    .ab-student:hover .ab-student-stars i{ transform:none; transition-delay:0s; }

}

.ab-student blockquote{
    margin-top:6px;
    font-family:var(--font-sans);
    font-size:14.5px;
    font-weight:400;
    line-height:1.4;
    color:var(--ink);
}

/* ==========================
   CTA
========================== */

/* This is the homepage's closing band on another page, so it takes that
   band's ground rather than one of its own. It was a single radial fading
   to white against a section that already ends in white, which left nothing
   marking where one stopped and the other began: same arc, same three-layer
   wash and same hairline as .cta-hero in cta.css now.

   The top edge is an arc rather than a straight line -- the horizontal
   radius is half the width and the vertical radius a fixed 72px, which is
   what makes the curve shallow and wide instead of a circle. */

.ab-cta{
    position:relative;
    /* Extra on top so the copy clears the arc's deepest point at the sides.
       The +8 came off with the two heading lines: the copy is short enough
       now that the arc is no longer close to it. */
    padding:var(--space-section-sm) 0 32px;
    border-radius:50% 50% 0 0 / 72px 72px 0 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,102,0,.10) 0%, rgba(255,255,255,0) 46%),
        radial-gradient(circle at 86% 78%, rgba(255,102,0,.08) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
}

/* A hairline that follows the arc, so the edge reads as drawn rather than as
   a colour change. Inset to the top only, so it does not close the shape
   along the bottom. */

.ab-cta::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:160px;
    border-radius:inherit;
    border-top:1px solid var(--primary-20);
    border-left:1px solid var(--primary-10);
    border-right:1px solid var(--primary-10);
    pointer-events:none;
}

.ab-cta-inner{
    display:grid;
    /* Narrowed with the phone column's height below. The two phones overlap
       only because together they are wider than the column; shrinking their
       height without also narrowing this pulls them apart into a gap. */
    /* Was minmax(0,1fr) against the phones, which let the copy track eat
       every pixel the container had: the copy started hard against the left
       inset, the phones against the right, and the middle carried the
       difference as dead air. The homepage answers this by sizing both
       tracks and centring the pair, and so does this now - the copy takes
       the measure its own paragraph already caps at, and the row closes
       around the two of them. */
    /* 640 -> 680: both headings are single lines now and the wider of the
       two measures about 630px at --fs-section/800, so 640 left no margin
       for a font that tracks the viewport. The paragraphs are capped well
       below this (64ch and 560px), so widening the track does not widen
       them. The phone track drops by the same proportion as the stack's
       height below, which is what keeps the two phones overlapping. */
    grid-template-columns:minmax(0,680px) 230px;
    justify-content:center;
    gap:clamp(40px,5vw,72px);
    /* end, not center: the phone stack should sit ON the section floor the
       way it does on the homepage, rather than floating in the middle with
       its shadow cut off. */
    align-items:end;
}

.ab-cta-copy{
    text-align:left;
    /* Lifts the copy off the floor now that the column is bottom-aligned,
       the same beat .cta-left carries on the homepage. */
    padding-bottom:var(--space-tight);
}

/* Matched to .ab-callback-title below, which is the one deliberately tuned to
   the homepage's callback. The two sit in the same column a paragraph apart
   and were 700 against 800, with only the lower one tracked in, so the second
   read as the heading and the first as a caption of it. */

.ab-cta-copy h2{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    /* Off the heavy weight. 500 rather than 400: at this size a true regular
       goes thin on the peach ground this section sits on. */
    font-weight:500;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-wrap:balance;
    text-align:left;
}

.ab-cta-kicker{
    margin-top:28px;
    font-family:var(--font-sans);
    font-size:var(--fs-sub);
    font-weight:700;
    line-height:1.2;
    color:var(--ink);
}

.ab-cta-copy > p:not(.ab-cta-kicker){
    margin-top:22px;
    /* Matched to the homepage's equivalent block (.cta-description in
       cta.css) rather than the page's own display font — that one ran up to
       28px in font-display, nearly double the homepage's 17px cap in
       font-sans, which is why the same words read so differently between the
       two pages. Content is unchanged, only the treatment. */
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    /* Cream gradient behind this whole section — 400 goes thin on it. */
    font-weight:500;
    line-height:1.6;
    /* Shares the homepage pitch's habit of a measure: the copy column here
       is the full grid track, and at 17px that ran past 110 characters a
       line. */
    max-width:min(64ch,100%);
    text-wrap:pretty;
    /* Was a bare #222, the page's one grey outside the ink ramp. --ink-800 is
       #232121: the same colour to the eye, but on the token system. */
    color:var(--ink-800);
    /* Was justify. With no hyphenation, forcing a straight right edge stretched
       the word spacing so hard that white rivers ran down the middle of both
       paragraphs. A ragged right edge reads far better at this measure. */
    text-align:left;
}

.ab-cta-copy > p:not(.ab-cta-kicker) + p:not(.ab-cta-kicker){
    margin-top:0;
}

/* --- Callback strip --- */

.ab-callback{
    /* Was --space-block, a header-to-grid gap. This is one block of copy
       following another inside the same card, not a new section. */
    margin-top:clamp(26px,2.6vw,36px);
    /* A hairline where the first block of copy ends, so the two headings read
       as two things rather than one long run. Warm rather than grey: this
       section sits on the peach wash, where a neutral rule looks like a stray
       table border. */
    padding-top:clamp(26px,2.6vw,36px);
    border-top:1px solid rgba(255,102,0,.22);
}

/* This block is the homepage's callback strip on another page, but it was
   set as a different component: the display face at up to 27px in
   rgba(0,0,0,.87), against font-sans at --fs-section/800 in --ink on the
   homepage. Same type as .cta-callback in cta.css now, accent word and all,
   so the two read as one thing. */

.ab-callback-title{
    font-family:var(--font-sans);
    font-size:var(--fs-section);
    /* Matches the heading above it, which is the whole point of this pair. */
    font-weight:500;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-wrap:balance;
}

/* Same treatment as the paragraph above it: size and weight already agreed,
   but --ink-500 against that one's --ink-800 made the second look like a
   footnote to the first on this peach ground. The measure matches too, so the
   two blocks wrap on the same rhythm. */

.ab-callback-sub{
    /* 6px was set under a 27px title; this one is --fs-section. */
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:var(--fs-lead);
    /* Cream ground under this strip, so 400 reads lighter here than the same
       400 does on white. */
    font-weight:500;
    line-height:1.6;
    /* Was capped at 64ch, which stopped it well short of the heading above.
       It now runs to the same measure the heading does, so the block reads as
       one column of type rather than a wide title over a narrow paragraph. */
    max-width:100%;
    /* balance rather than pretty. pretty only keeps a stub off the last line;
       across two lines it still left one long line over a short one. balance
       evens the pair, which is what sits them one under the other. */
    text-wrap:balance;
    color:var(--ink-800);
}

.ab-callback-form{
    margin-top:16px;
    display:flex;
    align-items:stretch;
    /* Homepage proportions: a 460px row 44px tall, not 440 on whatever
       height 10px of padding on 13px type happened to produce. */
    width:460px;
    max-width:100%;
    height:44px;
    /* Was a 1px hairline at .18 over a transparent fill, which on the CTA's
       cream left the field as a faint outline beside a solid orange button
       -- the button read as the control and the box it belongs to did not.
       A heavier, darker edge on white gives it the same standing. */
    border:1.5px solid rgba(0,0,0,.38);
    border-radius:7px;
    background:#FFFFFF;
    overflow:hidden;
    transition:border-color var(--dur-base) var(--ease-out);
}

.ab-callback-form:focus-within{
    border-color:var(--primary);
}

.ab-callback-code{
    display:grid;
    place-items:center;
    padding:0 12px;
    border-right:1.5px solid rgba(0,0,0,.22);
    font-family:var(--font-sans);
    font-size:14px;
    /* A fixed country code, not a hint: it carries the same weight as the
       number the field is waiting for. */
    font-weight:600;
    /* Was rgba(0,0,0,.5) — an effective #808080 that came out around 3.9:1 on
       the strip's cream, under the 4.5:1 floor for normal text. The one piece
       of copy on this page that genuinely failed. */
    color:var(--ink-500);
}

/* The placeholder is the only thing in the field until someone types, so it
   sets how filled-in the box looks; at the browser default grey it read as
   disabled next to the heavier edge. */

.ab-callback-form input::placeholder{
    color:var(--ink-500);
    opacity:1;
}

.ab-callback-form input{
    flex:1;
    min-width:0;
    padding:0 16px;
    border:0;
    background:transparent;
    font-family:var(--font-sans);
    font-size:14px;
    color:var(--ink);
    outline:none;
}

.ab-callback-form button{
    min-width:140px;
    padding:0 20px;
    border:0;
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:background var(--dur-base) var(--ease-out);
}

.ab-callback-form button:hover{
    background:var(--primary-hover);
}

.ab-callback-status{
    display:none;
    margin-top:12px;
    font-size:14px;
}

.ab-callback-status.visible{
    display:block;
    animation:baoFadeUp var(--dur-base) var(--ease-out);
}

.ab-callback-status.error{ color:#d93025; }
.ab-callback-status.success{ color:#188038; }

/* --- Phone mockups --- */

/* Sized by height, not width: these are tall 0.38-ratio screenshots, and
   width-sizing overflowed the column straight into the footer. */

.ab-cta-phones{
    position:relative;
    /* Was 720px, then 520. The copy column beside it now runs about 400px,
       so at 520 the stack was still setting a band taller than anything
       standing in it. The two phones keep their overlap at this height
       because the track narrowed with them, 320 to 260.

       420 -> 370 with the track at 230: the stack was setting the row's
       height on its own, so the section could not get shorter until it
       did. Both numbers scale by the same factor, so the overlap and the
       front phone's offset come out exactly as before, just smaller. */
    min-height:370px;
}

.ab-phone{
    position:absolute;
    width:auto;
    border-radius:36px;
    box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.ab-phone.is-back{
    top:0;
    left:0;
    height:100%;
}

.ab-phone.is-front{
    right:0;
    bottom:0;
    height:76%;
}

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

@media (max-width:1100px){

    .ab-ways-grid,
    .ab-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .ab-cta-inner{
        grid-template-columns:minmax(0,1fr);
    }

    .ab-cta-phones{
        width:230px;
        height:350px;
        min-height:350px;
        margin:24px auto 0;
        position:relative;
        justify-self:center;
    }

    .ab-founder-grid{
        grid-template-columns:1fr;
        /* The mark tucks back inside the card below this width, so there is
           no overhang to pay for and the margin is the gap as measured. */
        margin-top:clamp(40px,4.4vw,52px);
    }

    /* Stacked, the card runs to the container edge, so the mark tucks back
       inside instead of hanging off into the page gutter. */

    .ab-founder-mark{
        position:static;
        display:block;
        translate:none;
        margin-bottom:18px;
    }

}

@media (max-width:900px){

    /* Hero section: 2-column side-by-side compact layout matching reference */
    .ab-hero{
        padding:clamp(24px,5.5vw,40px) 0 clamp(20px,4.5vw,32px);
    }

    .ab-hero-inner{
        grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr);
        gap:clamp(10px,2.8vw,24px);
        align-items:center;
    }

    .ab-hero-visual{
        margin-left:0;
        margin-right:0;
        gap:6px;
    }

    .ab-hero-copy{
        padding-left:0;
    }

    .ab-eyebrow{
        font-size:clamp(9.5px,2.2vw,11.5px);
        letter-spacing:.12em;
        gap:6px;
    }

    .ab-eyebrow::before{
        width:5px;
        height:5px;
    }

    .ab-hero h1{
        margin-top:clamp(8px,1.8vw,14px);
        font-size:clamp(17px,4.3vw,26px);
        line-height:1.15;
    }

    .ab-hero-visual picture{
        display:contents;
    }

    .ab-hero-visual img{
        max-width:100%;
        width:clamp(125px,33vw,210px);
        margin-inline:auto;
    }

    .ab-hero-foot{
        margin-top:clamp(8px,1.8vw,14px);
        grid-template-columns:1fr;
        gap:12px;
    }

    .ab-hero-foot p{
        font-size:clamp(13px, 3.2vw, 15px);
        line-height:1.55;
        text-align:left;
        max-width:100%;
        text-wrap:pretty;
    }

    .ab-hero-aside{
        padding-left:0;
        border-left:0;
        margin-top:2px;
    }

    .ab-hero-tag{
        font-size:clamp(9.5px, 2.2vw, 11.5px);
        letter-spacing:.12em;
        font-weight:800;
    }

    /* Journey: 2-sided alternating timeline with central dashed line & nodes */
    .ab-journey{
        padding:clamp(28px,6vw,48px) 0;
    }

    .ab-journey-shape{
        display:block !important;
        opacity:.45;
        pointer-events:none;
    }

    .ab-journey-shape.is-left{
        top:0;
        left:-12px;
        width:clamp(95px,25vw,160px);
        max-width:none;
    }

    .ab-journey-shape.is-right{
        bottom:0;
        right:-12px;
        width:clamp(95px,25vw,160px);
        max-width:none;
    }

    .ab-journey .ab-head h2{
        font-size:clamp(20px,5.2vw,30px);
        text-wrap:balance;
    }

    .ab-journey .ab-head p{
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.5;
        margin-top:8px;
        max-width:94%;
        margin-inline:auto;
        text-wrap:balance;
    }

    .ab-journey-list{
        margin-top:clamp(20px,5vw,36px);
        gap:clamp(16px,4vw,30px);
    }

    .ab-journey-list::before{
        left:50%;
        top:8px;
        bottom:8px;
        width:0;
        border-left:3px dashed var(--primary);
        transform:translateX(-50%);
    }

    .ab-journey-row{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:center;
        position:relative;
    }

    .ab-journey-dot{
        left:50%;
        top:50%;
        width:clamp(22px,5.5vw,34px);
        height:clamp(22px,5.5vw,34px);
        border:clamp(4px,1.1vw,7px) solid var(--primary);
        border-radius:50%;
        background:#fff;
        transform:translate(-50%,-50%);
        z-index:2;
    }

    .ab-journey-row::before{
        top:50%;
        height:2px;
        background:var(--primary);
        transform:translateY(-50%);
        z-index:1;
    }

    .ab-journey-row.is-left::before{
        right:50%;
        left:auto;
        margin-right:clamp(11px,2.8vw,17px);
        width:clamp(14px,3.8vw,32px);
    }

    .ab-journey-row.is-right::before{
        left:50%;
        right:auto;
        margin-left:clamp(11px,2.8vw,17px);
        width:clamp(14px,3.8vw,32px);
    }

    .ab-journey-card{
        padding:clamp(10px,2.6vw,16px) clamp(12px,3vw,18px);
        border-radius:clamp(10px,2.5vw,14px);
        box-shadow:0 3px 6px rgba(255,102,0,.12);
        background:#ffffff;
        max-width:calc(50vw - 26px);
    }

    .ab-journey-row.is-left .ab-journey-card{
        grid-column:1;
        justify-self:end;
        margin-right:clamp(25px,6.6vw,49px);
        margin-left:0;
        border-top:1px solid var(--primary);
        border-right:clamp(2px,.6vw,3px) solid var(--primary);
        border-left:1px solid rgba(255,102,0,.2);
        border-bottom:1px solid rgba(255,102,0,.2);
        text-align:left;
    }

    .ab-journey-row.is-right .ab-journey-card{
        grid-column:2;
        justify-self:start;
        margin-left:clamp(25px,6.6vw,49px);
        margin-right:0;
        border-top:1px solid var(--primary);
        border-left:clamp(2px,.6vw,3px) solid var(--primary);
        border-right:1px solid rgba(255,102,0,.2);
        border-bottom:1px solid rgba(255,102,0,.2);
        text-align:left;
    }

    .ab-journey-card p{
        font-size:clamp(12px, 2.8vw, 13.5px);
        line-height:1.45;
        color:var(--ink);
        text-align:left;
        font-weight:500;
        margin:0;
    }

    .ab-student{
        width:min(400px,86vw);
    }

}

@media (max-width:600px){

    /* Point 3: One path, four ways (compact card & text) */
    .ab-ways{
        --ab-wave-band:16px;
        --ab-wave-drop:36px;
        --ab-wave-swing:22px;
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .ab-ways-title{
        font-size:clamp(19px, 5vw, 24px);
        text-wrap:balance;
    }

    .ab-ways-row{
        gap:16px;
    }

    .ab-way{
        flex:0 0 clamp(215px, 60vw, 245px) !important;
        padding:15px 14px 16px !important;
        gap:8px !important;
        border-radius:14px !important;
    }

    .ab-way-step{
        font-size:11px !important;
    }

    .ab-way h3{
        font-size:15px !important;
        min-height:auto !important;
    }

    .ab-way p{
        font-size:13px !important;
        line-height:1.45 !important;
    }

    /* Point 4: More Than Classes (compact cards & text) */
    .ab-services{
        overflow:hidden;
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .ab-services .ab-head h2{
        font-size:clamp(19px, 5vw, 24px) !important;
        text-wrap:balance !important;
    }

    .ab-services .ab-head p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        text-wrap:balance !important;
    }

    .ab-services-grid{
        display:flex !important;
        flex-direction:row !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory !important;
        -webkit-overflow-scrolling:touch !important;
        gap:12px !important;
        padding:10px 16px 18px !important;
        margin-inline:-16px !important;
        scrollbar-width:none !important;
    }

    .ab-services-grid::-webkit-scrollbar{
        display:none !important;
    }

    .ab-service{
        flex:0 0 225px !important;
        width:225px !important;
        max-width:74vw !important;
        scroll-snap-align:center !important;
        scroll-snap-stop:normal !important;
        display:flex !important;
        flex-direction:column !important;
        border-radius:14px !important;
    }

    .ab-service-media{
        height:130px !important;
    }

    .ab-service-badge{
        font-size:9.5px !important;
        padding:2px 7px !important;
    }

    .ab-service-body{
        padding:24px 12px 14px !important;
        gap:4px !important;
    }

    .ab-service-icon{
        width:32px !important;
        height:32px !important;
        font-size:13px !important;
        left:12px !important;
    }

    .ab-service-body h3{
        font-size:15px !important;
    }

    .ab-service-body p{
        font-size:12.5px !important;
        line-height:1.45 !important;
    }

    .ab-service-more{
        width:24px !important;
        height:24px !important;
        font-size:10px !important;
    }

    .ab-journey-shape{
        display:block;
    }

    /* Point 5: Beyond the screen text & stats */
    .ab-events{
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .ab-events .ab-head h2{
        font-size:clamp(19px, 5vw, 24px) !important;
        text-wrap:balance !important;
    }

    .ab-events .ab-head p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        text-wrap:balance !important;
    }

    /* Point 6: Founder's Note (quote text/card slightly smaller, photo untouched) */
    .ab-founder{
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .ab-founder .ab-head-solo{
        font-size:clamp(19px, 5vw, 24px) !important;
        text-wrap:balance !important;
    }

    .ab-founder-grid{
        margin-top:clamp(20px, 4vw, 32px) !important;
        gap:16px !important;
    }

    .ab-founder-quote{
        padding:18px 16px !important;
        border-radius:18px !important;
    }

    .ab-founder-mark{
        width:32px !important;
        margin-bottom:10px !important;
    }

    .ab-founder-quote p{
        font-size:13px !important;
        line-height:1.55 !important;
        text-align:left !important;
    }

    .ab-founder-quote p + p{
        margin-top:10px !important;
    }

    .ab-founder-quote footer{
        font-size:12.5px !important;
        margin-top:12px !important;
    }

    /* Point 7: Meet Core Team / Mentors (compact pill, title & cards) */
    .tm{
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .tm-pill{
        padding:5px 14px !important;
        font-size:11px !important;
        gap:8px !important;
    }

    .tm-pill svg{
        width:20px !important;
        height:6px !important;
    }

    .tm-head h2{
        font-size:clamp(19px, 5vw, 24px) !important;
        margin-top:12px !important;
        text-wrap:balance !important;
    }

    .tm-head > p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        text-wrap:balance !important;
    }

    .tm-card{
        flex:0 0 205px !important;
        min-width:205px !important;
        max-width:215px !important;
        border-radius:14px !important;
    }

    .tm-tag{
        font-size:9px !important;
        padding:2px 7px !important;
    }

    .tm-star{
        width:16px !important;
        height:16px !important;
        font-size:9px !important;
        border-radius:4px !important;
    }

    .tm-card-body{
        padding:12px 10px 10px !important;
        gap:3px !important;
    }

    .tm-card-body strong{
        font-size:14px !important;
    }

    .tm-bio{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-top:3px !important;
    }

    .tm-links{
        padding:6px 10px 8px !important;
        gap:6px !important;
    }

    .tm-links a{
        width:24px !important;
        height:24px !important;
        font-size:11.5px !important;
    }

    .tm-carousel-btn{
        width:30px !important;
        height:30px !important;
        font-size:11px !important;
    }

    /* Point 9: Student Success Stories (compact cards & text) */
    .ab-success{
        padding:clamp(24px, 5.5vw, 40px) 0;
    }

    .ab-success .ab-head h2{
        font-size:clamp(19px, 5vw, 24px) !important;
        text-wrap:balance !important;
    }

    .ab-success .ab-head p{
        font-size:clamp(13px, 3.2vw, 14.5px) !important;
        line-height:1.5 !important;
        margin-top:8px !important;
        text-wrap:balance !important;
    }

    .ab-success-rail{
        margin-inline:14px !important;
    }

    .ab-success-track{
        gap:14px !important;
    }

    .ab-student{
        flex-direction:row !important;
        width:260px !important;
        min-width:260px !important;
        padding:14px 15px !important;
        border-radius:16px !important;
        gap:10px !important;
        align-items:flex-start !important;
    }

    .ab-student-avatar{
        width:44px !important;
        height:44px !important;
        flex:none !important;
    }

    .ab-student-body{
        align-items:flex-start !important;
        text-align:left !important;
        gap:2px !important;
    }

    .ab-student-body strong{
        font-size:14px !important;
    }

    .ab-student-role{
        font-size:11.5px !important;
    }

    .ab-student-stars i{
        width:11px !important;
        height:11px !important;
    }

    .ab-student blockquote{
        font-size:12.5px !important;
        line-height:1.45 !important;
        margin-top:4px !important;
    }

    .ab-cta{
        padding:clamp(28px, 6vw, 44px) 0 20px;
        border-radius:36px 36px 0 0 / 22px 22px 0 0;
    }

    .ab-cta::before{
        height:50px;
    }

    .ab-cta-inner{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
    }

    .ab-cta-copy{
        padding-bottom:0;
    }

    .ab-cta-copy h2{
        font-size:clamp(19px, 5vw, 23px);
        font-weight:700;
        line-height:1.25;
        text-wrap:balance;
    }

    .ab-cta-copy > p:not(.ab-cta-kicker){
        margin-top:8px;
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.5;
        color:var(--ink-700);
        text-wrap:balance;
    }

    .ab-callback{
        margin-top:16px;
        padding-top:14px;
        border-top:1px solid rgba(255,102,0,.18);
    }

    .ab-callback-title{
        font-size:clamp(16px, 4.4vw, 20px);
        font-weight:700;
        line-height:1.2;
    }

    .ab-callback-sub{
        margin-top:6px;
        font-size:clamp(12px, 3vw, 13.5px);
        line-height:1.45;
        color:var(--ink-700);
    }

    .ab-callback-form{
        margin-top:12px;
        width:100%;
        max-width:360px;
        height:40px;
        border-radius:6px;
        border:1.5px solid rgba(0,0,0,.3);
        display:flex;
        align-items:stretch;
        background:#fff;
    }

    .ab-callback-code{
        font-size:12.5px;
        font-weight:600;
        padding:0 8px;
        border-right:1px solid rgba(0,0,0,.2);
        display:grid;
        place-items:center;
    }

    .ab-callback-form input{
        font-size:13px;
        padding:0 10px;
        min-width:0;
        flex:1;
    }

    .ab-callback-form button{
        min-width:auto;
        padding:0 14px;
        font-size:12.5px;
        font-weight:700;
        white-space:nowrap;
        background:var(--primary);
        color:#fff;
        border:0;
    }

    .ab-cta-phones{
        width:170px;
        height:260px;
        min-height:260px;
        margin:12px auto 0;
    }

    .ab-phone{
        border-radius:20px;
        box-shadow:0 10px 28px rgba(0,0,0,.12);
    }

}

/* ==========================================
   MENTORS
   ==========================================

   The cards themselves come from css/internship.css. Only the section's own
   rhythm lives here, so the row sits on this page's spacing rather than the
   internship page's. */

.ab-mentors{
    padding:var(--space-section) 0;
}

.ab-mentors .bao-marquee{
    margin-top:var(--space-block);
}

/* ==========================================
   TOUCH TARGETS
========================================== */
@media (max-width:768px), (hover:none){

    .tm-links a{
        width:40px;
        height:40px;
        font-size:14px;
    }

    .tm-links{
        gap:12px;
    }

    .tm-tag{
        font-size:12px;
        padding:4px 9px;
    }

}

.ab-callback-form input{
    min-width:0;
}