/* ==========================================================================
   About Page (ab-page)
   Same brand palette/type as the rest of the site
   (navy / gold / white, from variables.css) — its
   own layout language lives here, isolated from
   the other page stylesheets so no other page is
   touched.

   This page reads as a single long-form narrative
   (the founder's own words) rather than a stack of
   sales sections, so the layout language is editorial:
   one centered reading column per "chapter," numbered
   eyebrows for wayfinding, and three recurring beats —
   .ab-thesis (the big pull-quotes), .ab-emphasis-line
   (smaller punch lines) and .ab-pledges (the two
   mirrored promise lists) — that repeat on purpose so
   the page feels like one composed piece, not six.
   Background alternates --color-background /
   --color-background-alt per chapter (.ab-chapter--alt)
   for quiet rhythm without breaking into the stark
   white .section-light treatment used elsewhere.
   ========================================================================== */

/* ==========================================
   SHARED FADE-UP KEYFRAME
========================================== */

@keyframes abFadeUp{

    from{ opacity:0; transform:translateY(22px); }

    to{ opacity:1; transform:translateY(0); }

}

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

/* Hero — deliberately mirrors the homepage's .home-hero
   system (same hero-bg.jpg background, same scrim
   mechanics, same orbiting medallion — .home-hero__mark's
   markOrbitSpin/markFloat keyframes live in homepage.css,
   already loaded on this page, and are reused here rather
   than duplicated) so the two hero sections share one
   visual language. Only the copy differs, per page. */
.ab-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:150px 0 110px;

}
.ab-hero__media{

    position:absolute;

    inset:0;

    z-index:0;

}
.ab-hero__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}
.ab-hero__scrim{

    position:absolute;

    inset:0;

    z-index:0;

    background:

        linear-gradient(115deg, rgba(8,21,45,.9) 0%, rgba(8,21,45,.68) 34%, rgba(8,21,45,.32) 58%, rgba(8,21,45,.18) 100%),

        linear-gradient(180deg, rgba(8,21,45,.4) 0%, rgba(8,21,45,0) 20%, rgba(8,21,45,0) 74%, rgba(8,21,45,.6) 100%);

}
.ab-hero__wrapper{

    position:relative;

    z-index:1;

    display:grid;

    grid-template-columns:1.5fr 1fr;

    align-items:center;

    gap:60px;

}
.ab-hero__header{

    max-width:640px;

}
.ab-hero__eyebrow{

    opacity:0;

    animation:abFadeUp .85s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:.15s;

}
.ab-hero__title{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.4vw, 3.4rem);

    line-height:1.22;

    letter-spacing:-1px;

    color:var(--color-white);

    text-shadow:0 10px 34px rgba(0,0,0,.5);

    opacity:0;

    animation:abFadeUp .9s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:.35s;

}
.ab-hero__brand-gold{

    color:var(--color-gold);

}
.ab-hero__brand-bold{

    font-weight:800;

}

/* Medallion — structure/sizing is page-specific (ab-
   prefixed), but the spin/float motion reuses homepage.css's
   @keyframes markOrbitSpin / markFloat by name so both
   heroes move identically. */
.ab-hero__mark{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:1 / 1;

    opacity:0;

    animation:abFadeUp .85s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:.4s;

}
.ab-hero__mark-glow{

    position:absolute;

    inset:8%;

    border-radius:50%;

    background:radial-gradient(circle, rgba(220,177,58,.35) 0%, rgba(220,177,58,0) 70%);

    filter:blur(50px);

    z-index:0;

}
.ab-hero__mark-orbit{

    position:absolute;

    inset:2%;

    border:1px solid rgba(216,177,75,.28);

    border-radius:50%;

    z-index:1;

    animation:markOrbitSpin 44s linear infinite;

}
.ab-hero__mark-orbit::before,
.ab-hero__mark-orbit::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:0 0 10px 2px rgba(216,177,75,.6);

}
.ab-hero__mark-orbit::before{

    top:-3px;

    left:50%;

    margin-left:-3px;

}
.ab-hero__mark-orbit::after{

    bottom:10%;

    right:4%;

}
.ab-hero__mark img{

    width:78%;

    height:78%;

    object-fit:contain;

    border-radius:50%;

    position:relative;

    z-index:2;

    filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));

    animation:markFloat 7s ease-in-out infinite;

}

.ab-hero__scroll{

    position:absolute;

    left:50%;

    bottom:44px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    z-index:1;

    opacity:0;

    animation:abFadeUp .9s ease forwards;

    animation-delay:1s;

}
.ab-hero__scroll-line{

    width:1px;

    height:46px;

    background:linear-gradient(to bottom, rgba(216,177,75,.7), rgba(216,177,75,0));

}
.ab-hero__scroll-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:0 0 10px 2px rgba(216,177,75,.6);

    animation:abScrollDot 2.4s ease-in-out infinite;

}
@keyframes abScrollDot{

    0%, 100%{ transform:translateY(0); opacity:1; }

    50%{ transform:translateY(30px); opacity:0; }

}

/* ==========================================
   CHAPTERS — shared scaffolding
========================================== */

.ab-chapter{

    position:relative;

    background:var(--color-background);

    padding:var(--space-3xl) 0;

}
.ab-chapter--alt{

    background:var(--color-background-alt);

}
.ab-chapter__inner{

    max-width:760px;

    margin-inline:auto;

    opacity:0;

    transform:translateY(28px);

    transition:opacity .8s ease, transform .8s ease;

}
.ab-chapter__inner.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ab-chapter__inner h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.6vw, 2.75rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:36px;

}
.ab-chapter__inner > p{

    font-size:1.15rem;

    line-height:1.95;

    color:var(--color-text);

    font-weight:300;

    margin-bottom:26px;

    /* No :last-child margin reset here on purpose — three
       chapters end on .ab-thesis or .ab-emphasis-line, and
       a same-specificity-weight reset on plain "p" would
       have clipped their bottom margin. The section's own
       --space-3xl padding already absorbs the extra 26px. */

}

/* Lede, emphasis-line, thesis, callout and word-beat
   are all <p> elements that are direct children of
   .ab-chapter__inner too, so each is prefixed with
   .ab-chapter__inner below — otherwise the generic
   ".ab-chapter__inner > p" rule above (same specificity
   weight as a lone class, but with an extra type
   selector) would win the cascade and silently flatten
   all of them back to plain body-copy styling. */
.ab-chapter__inner .ab-lede{

    font-family:var(--font-heading);

    font-size:1.65rem;

    line-height:1.5;

    color:var(--color-white);

    font-weight:500;

    margin-bottom:34px;

}

/* Emphasis line — a shorter mid-weight punch line */
.ab-chapter__inner .ab-emphasis-line{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.4rem;

    line-height:1.55;

    color:var(--color-gold);

    text-align:center;

    max-width:620px;

    margin:44px auto;

}

/* Thesis — the page's three big pull-quotes */
.ab-chapter__inner .ab-thesis{

    position:relative;

    font-family:var(--font-heading);

    font-weight:600;

    font-style:italic;

    font-size:clamp(1.75rem, 3.2vw, 2.5rem);

    line-height:1.45;

    color:var(--color-white);

    text-align:center;

    max-width:680px;

    margin:70px auto;

    padding-top:20px;

}
.ab-thesis::before{

    content:"\201C";

    position:absolute;

    top:-58px;

    left:50%;

    transform:translateX(-50%);

    font-family:Georgia, "Times New Roman", serif;

    font-style:normal;

    font-weight:700;

    font-size:9rem;

    line-height:1;

    color:rgba(216,177,75,.55);

}

/* Quote stack — the three marketing-promise lines */
.ab-quote-stack{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin:32px 0;

    padding-left:26px;

    border-left:2px solid rgba(216,177,75,.35);

}
.ab-quote-stack p{

    font-style:italic;

    color:var(--color-text);

    font-size:1.05rem;

    margin:0;

}

/* Callout — the forgotten-template anecdote */
.ab-chapter__inner .ab-callout{

    font-style:italic;

    color:var(--color-white);

    background:rgba(255,255,255,.03);

    border-left:3px solid var(--color-gold);

    border-radius:0 var(--radius-sm) var(--radius-sm) 0;

    padding:20px 28px;

    margin:34px 0;

}

/* Word beat — the standalone "AI." line */
.ab-chapter__inner .ab-word-beat{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2.75rem, 8vw, 5rem);

    color:var(--color-gold);

    text-align:center;

    letter-spacing:2px;

    text-shadow:0 0 40px rgba(216,177,75,.35);

    margin:50px 0;

}

/* Story aside — the grandmother story, bracketed
   by hairlines and set apart from the surrounding
   prose like a story within the story */
.ab-story-aside{

    margin:44px auto;

    max-width:600px;

    padding:36px 0;

    border-top:1px solid rgba(216,177,75,.25);

    border-bottom:1px solid rgba(216,177,75,.25);

    text-align:center;

}
.ab-story-aside p{

    font-style:italic;

    font-weight:300;

    font-size:1.2rem;

    line-height:1.85;

    color:var(--color-white);

    margin-bottom:16px;

}
.ab-story-aside p:last-child{

    margin-bottom:0;

}

/* ==========================================
   CULTURE (04) — HOW WE WORK
   Rebuilt as a split-screen: the family photo gets its
   own column (layered gold-bordered card behind the frame
   for a "kept snapshot" feel, plus a seal-style badge
   overlapping its corner) instead of sitting centered
   above the text, and the section's most personal line
   ("There isn't a giant wall...") is pulled out as a big
   gold-bordered quote — the same "extract a pull-quote,
   frame the portrait with warmth, keep it dark but
   personal" approach used for founder/family sections
   generally, adapted to this page's existing gold/navy
   language rather than introducing a new one.
========================================== */
.ab-chapter__inner.ab-culture__inner{

    max-width:1400px;

}
.ab-culture__grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:80px;

    align-items:center;

}

/* Portrait — the family photo. A glow behind the frame
   (same device as the hero medallion), an offset gold-
   bordered card layered behind it like a second kept
   photo, and a soft navy vignette baked into the frame
   itself keep a candid outdoor snapshot from reading as
   a random drop-in on an otherwise deliberate, moody
   page. The badge pinned on its corner is what actually
   says "family-owned" out loud, since the photo alone
   (a park bench, not a workspace) can't carry that on
   its own. */
.ab-culture__media{

    display:flex;

    justify-content:center;

}
.ab-culture__portrait{

    position:relative;

    max-width:480px;

    width:100%;

}
.ab-culture__portrait::before{

    content:"";

    position:absolute;

    inset:-26px;

    border-radius:50%;

    background:radial-gradient(circle, rgba(216,177,75,.18), rgba(216,177,75,0) 70%);

    filter:blur(40px);

}
.ab-culture__portrait::after{

    content:"";

    position:absolute;

    inset:18px -18px -18px 18px;

    border:1px solid rgba(216,177,75,.4);

    border-radius:var(--radius-lg);

    z-index:0;

}
.ab-culture__frame{

    position:relative;

    z-index:1;

    border-radius:var(--radius-lg);

    overflow:hidden;

    border:1px solid rgba(216,177,75,.35);

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}
.ab-culture__frame img{

    display:block;

    width:100%;

    height:auto;

    filter:saturate(.82) contrast(1.06) brightness(.97);

}
.ab-culture__frame::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(180deg, rgba(8,21,45,.1) 0%, rgba(8,21,45,0) 25%, rgba(8,21,45,0) 65%, rgba(8,21,45,.5) 100%),

        radial-gradient(ellipse at center, rgba(8,21,45,0) 55%, rgba(8,21,45,.35) 100%);

    pointer-events:none;

}
.ab-culture__badge{

    position:absolute;

    left:-20px;

    bottom:-20px;

    z-index:2;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    background:rgba(8,21,45,.82);

    border:1px solid rgba(216,177,75,.45);

    border-radius:var(--radius-pill);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 16px 40px rgba(0,0,0,.35);

}
.ab-culture__badge-icon{

    display:flex;

    color:var(--color-gold);

}
.ab-culture__badge-icon svg{

    width:18px;

    height:18px;

}
.ab-culture__badge-text{

    font-family:var(--font-heading);

    font-size:.92rem;

    font-weight:600;

    color:var(--color-white);

    white-space:nowrap;

}

/* Pull-quote — the section's warmest line, lifted out of
   the prose and given the same left-bordered treatment as
   .ab-callout, just bigger, since this is the emotional
   center of the chapter rather than a supporting aside. */
.ab-chapter__inner .ab-culture__pull{

    font-family:var(--font-heading);

    font-style:italic;

    font-weight:600;

    font-size:clamp(1.5rem, 2.2vw, 1.85rem);

    line-height:1.4;

    color:var(--color-white);

    border-left:3px solid var(--color-gold);

    padding:4px 0 4px 26px;

    margin:32px 0;

}

/* ==========================================
   APPROACH (03) — WHITE TWO-COLUMN VARIANT
   Built from the user's own mockup: white background,
   equal-width left/right split with a thin gold rule
   between them (mirrors the .ab-story white-section
   conventions above — #0B1D3A headline, #5B6472 body,
   gold eyebrow/accent). Left carries the narrative +
   the thesis re-cast as a solid navy quote block; right
   opens with the "digital solutions" line and lists the
   four capabilities as bordered icon rows that glow on
   hover, closing on the italic/bold punch pairing.
========================================== */
.ab-chapter.ab-approach{

    background:#ffffff;

}
.ab-chapter__inner.ab-approach__inner{

    max-width:1400px;

}
.ab-approach__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:72px;

    align-items:start;

}
.ab-approach__left{

    max-width:560px;

}
.ab-chapter__inner.ab-approach__inner .ab-approach__kicker{

    display:block;

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.1rem;

    font-weight:500;

    color:#5B6472;

    margin:0 0 14px;

}
.ab-chapter__inner.ab-approach__inner .ab-approach__title{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3vw, 2.6rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:#0B1D3A;

    margin:0 0 28px;

}
.ab-approach__quote{

    background:var(--color-background);

    border-radius:var(--radius-md);

    padding:28px 32px;

    margin-bottom:32px;

}
.ab-approach__left .ab-approach__quote p{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.3rem;

    line-height:1.5;

    color:var(--color-white);

    margin:0;

}
.ab-chapter__inner.ab-approach__inner .ab-approach__subhead{

    font-family:var(--font-heading);

    font-size:1.2rem;

    font-weight:600;

    color:#0B1D3A;

    margin:0 0 14px;

}
.ab-approach__left p{

    font-size:1.05rem;

    line-height:1.85;

    color:#5B6472;

    font-weight:300;

    margin-bottom:20px;

}
.ab-approach__left p:last-child{

    margin-bottom:0;

}
.ab-approach__right{

    border-left:1px solid rgba(216,177,75,.3);

    padding-left:72px;
}
.ab-chapter__inner.ab-approach__inner .ab-approach__right-title{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.6rem, 2.2vw, 2rem);

    line-height:1.35;

    letter-spacing:-.3px;

    color:#0B1D3A;

    margin:0 0 32px;

}
.ab-capability-rows{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin:0 0 36px;

    list-style:none;

    padding:0;

}
.ab-capability-row{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 26px;

    background:#ffffff;

    border:1px solid rgba(11,29,58,.12);

    border-radius:var(--radius-md);

    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;

}
.ab-capability-row:hover{

    border-color:var(--color-gold);

    transform:translateY(-3px);

    animation:abCapabilityGlow 1.7s ease-in-out infinite;

}
@keyframes abCapabilityGlow{

    0%, 100%{ box-shadow:0 6px 18px rgba(11,29,58,.06), 0 0 0 rgba(216,177,75,0); }

    50%{ box-shadow:0 6px 18px rgba(11,29,58,.06), 0 0 32px rgba(216,177,75,.45); }

}
.ab-capability-row__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:24px;

    height:24px;

    color:var(--color-gold);

    transition:transform .3s ease;

}
.ab-capability-row:hover .ab-capability-row__icon{

    transform:scale(1.12);

}
.ab-capability-row__icon svg{

    width:22px;

    height:22px;

}
.ab-capability-row__label{

    font-family:var(--font-heading);

    font-size:1.15rem;

    font-weight:600;

    color:#0B1D3A;

}
.ab-approach__divider{

    height:1px;

    background:rgba(11,29,58,.12);

    margin:0 0 28px;

}
.ab-approach__caption{

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.05rem;

    color:#5B6472;

    margin:0 0 8px;

}
.ab-approach__closing{

    font-family:var(--font-heading);

    font-weight:700;

    font-size:1.5rem;

    color:#0B1D3A;

    margin:0;

}

/* Pledges — the two mirrored promise lists (04's
   "if you..." commitments and 06's "you don't need
   to..." reassurances share this treatment on purpose,
   since the two chapters are a matched pair) */
.ab-pledges{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:38px 0;

    list-style:none;

    padding:0;

}
.ab-pledges li{

    position:relative;

    padding-left:34px;

    font-size:1.1rem;

    line-height:1.7;

    color:var(--color-text);

}
.ab-pledges li::before{

    content:"\2014";

    position:absolute;

    left:0;

    color:var(--color-gold);

    font-weight:700;

}

/* ==========================================
   LEARNING (05) — WHITE VARIANT
   Rebuilt from the user's own mockup: white background,
   left-aligned throughout (no centered climax like the
   section used to have), hairline dividers bracketing the
   "changes" list, which itself becomes a plain 2-column
   bulleted grid instead of pill chips. The closing quote
   reuses the exact left-bordered, non-centered treatment
   already established for .ab-story__inner's white-section
   .ab-thesis above, rather than inventing a second variant
   of the same idea. Kept compact (reduced section padding,
   tightened heading/paragraph margins) per the earlier
   "fit in one screen" ask — that goal didn't change, only
   the visual language did.
========================================== */
.ab-chapter.ab-learning{

    background:#ffffff;

    padding:72px 0;

}
.ab-chapter__inner.ab-learning__inner{

    max-width:820px;

}
.ab-chapter__inner.ab-learning__inner h2{

    font-family:var(--font-heading);

    font-weight:600;

    color:#0B1D3A;

    margin-bottom:16px;

}
/* :not() exclusion matters here — this is a direct-child
   "> p" selector with an extra class, which outranks the
   plain ".ab-chapter__inner .ab-thesis" rule elsewhere in
   this file (same specificity trap flagged in the STORY
   white-variant comment above). Without excluding it, this
   rule's font-size/color would quietly override the
   section's pull-quote too. */
.ab-chapter__inner.ab-learning__inner > p:not(.ab-thesis):not(.ab-learning__closing){

    font-size:1.05rem;

    line-height:1.7;

    color:#5B6472;

    font-weight:300;

    margin-bottom:0;

}
.ab-learning__divider{

    height:1px;

    background:rgba(11,29,58,.12);

    margin:28px 0;

}

/* "Changes" list — a plain 2-column bulleted grid instead
   of the pill-chip row this used to be; still staggers
   into view together via is-visible (added in app.js),
   just as a gentle fade-up instead of a slide-in. */
.ab-flux{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:40px;

    row-gap:18px;

    margin:0;

    list-style:none;

    padding:0;

}
.ab-flux__item{

    position:relative;

    padding-left:22px;

    font-family:var(--font-heading);

    font-size:1.05rem;

    font-weight:700;

    line-height:1.4;

    color:#0B1D3A;

    opacity:0;

    transform:translateY(10px);

    transition:opacity .5s ease, transform .5s ease;

}
.ab-flux__item::before{

    content:"";

    position:absolute;

    left:0;

    top:.5em;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--color-gold);

}
.ab-flux__item.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ab-flux__item:nth-child(1){ transition-delay:0s; }
.ab-flux__item:nth-child(2){ transition-delay:.12s; }
.ab-flux__item:nth-child(3){ transition-delay:.24s; }
.ab-flux__item:nth-child(4){ transition-delay:.36s; }

/* Pull-quote — reuses .ab-story__inner's exact white-
   section .ab-thesis recipe (left-aligned, no giant quote
   mark, gold left border) rather than a new one-off. */
.ab-chapter__inner.ab-learning__inner .ab-thesis{

    text-align:left;

    font-style:italic;

    font-weight:600;

    font-size:1.4rem;

    line-height:1.55;

    max-width:none;

    margin:28px 0;

    padding:0 0 0 28px;

    border-left:3px solid var(--color-gold);

    color:#0B1D3A;

}
.ab-chapter__inner.ab-learning__inner .ab-thesis::before{

    content:none;

}
.ab-chapter__inner.ab-learning__inner .ab-learning__closing{

    font-family:var(--font-heading);

    font-weight:700;

    font-size:1.15rem;

    color:#0B1D3A;

    margin:0;

}

/* ==========================================
   REASSURE (06) — RANK YOUR BIZ
   Rebuilt from the user's mockup: the three "you don't
   need to..." pledges and the closing "That's our job"
   collapse into one flowing paragraph (was a bulleted list
   + separate emphasis line), and the two closing lines
   become a single quote card — var(--color-card), the
   site's own "slightly lighter than page background" card
   tone, with a gold left border — instead of two more
   plain paragraphs. Stays on the section's existing dark
   background; only the structure changed.
========================================== */
.ab-reassure__quote{

    background:var(--color-card);

    border-left:4px solid var(--color-gold);

    border-radius:var(--radius-md);

    padding:36px 40px;

    margin-top:10px;

}
.ab-reassure__quote p{

    font-family:var(--font-heading);

    font-style:italic;

    font-weight:600;

    font-size:1.25rem;

    line-height:1.6;

    color:var(--color-white);

    margin:0;

}

@media (max-width:900px){

    /* Centers via align-items:center on min-height:100vh, same as
       .ll-hero — reducing padding alone barely moves the visible gap
       above the content because centering just redistributes half of
       whatever padding is saved back onto the space below. Anchor to
       the top instead, like the rest of the site's heroes. */
    .ab-hero{ align-items:flex-start; padding:130px 0 90px; }

    .ab-hero__wrapper{ grid-template-columns:1fr; text-align:center; }

    .ab-hero__header{ max-width:640px; margin-inline:auto; }

    .ab-hero__mark{ max-width:280px; margin-inline:auto; }

    .ab-hero__scrim{

        background:

            linear-gradient(180deg, rgba(8,21,45,.55) 0%, rgba(8,21,45,.35) 30%, rgba(8,21,45,.3) 60%, rgba(8,21,45,.75) 100%);

    }

    .ab-chapter__inner .ab-word-beat{ margin:36px 0; }

    .ab-approach__grid{ grid-template-columns:1fr; gap:44px; }

    .ab-approach__left{ max-width:none; }

    .ab-approach__right{

        border-left:none;

        padding-left:0;

        padding-top:44px;

        border-top:1px solid rgba(11,29,58,.12);

    }

    .ab-culture__grid{ grid-template-columns:1fr; gap:56px; }

    .ab-culture__portrait{ max-width:400px; margin:0 auto; }

    .ab-culture__badge{ left:8px; bottom:-18px; padding:10px 16px; }

    .ab-culture__badge-text{ font-size:.82rem; }

    .ab-flux{ grid-template-columns:1fr; }

    .ab-reassure__quote{ padding:28px 26px; }

}
@media (max-width:640px){

    .ab-hero{ padding:80px 0 60px; }

}

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

    .ab-hero__mark-orbit,
    .ab-hero__mark img{ animation:none; }

    .ab-hero__eyebrow,
    .ab-hero__title,
    .ab-hero__mark,
    .ab-hero__scroll{ animation:none !important; opacity:1 !important; transform:none !important; }

    /* .ab-hero__scroll's translateX(-50%) is structural
       centering, not decorative — restore it. */
    .ab-hero__scroll{ transform:translateX(-50%) !important; }

    .ab-hero__scroll-dot{ animation:none !important; }

    .ab-chapter__inner{ transition:none; opacity:1; transform:none; }

    .ab-flux__item{ transition:none; opacity:1; transform:none; }

    .ab-capability-row{ transition:none; }

    .ab-capability-row:hover{ animation:none; transform:none; box-shadow:0 0 24px rgba(216,177,75,.4); }

}

/* ==========================================
   STORY (01) — WHITE VARIANT
   Rebuilt per feedback: a real eyebrow+headline
   pair for actual hierarchy (the numeral/sticky-
   rail device it replaced read as unclear), a
   wider two-column layout — narrative left, a
   tinted card holding the quotes + callout as a
   sidebar on the right — so the section uses the
   container's width instead of leaving big empty
   margins, and one consistent var(--color-gold)
   throughout (the sitewide darker light-section
   gold, #A9791F, was later retired everywhere —
   see global.css .eyebrow / .section-light .eyebrow).
   Overrides stay compound-scoped
   (.ab-chapter__inner.ab-story__inner ...) so they
   safely outrank the shared dark-mode rules above
   regardless of source order — the same
   specificity trap already hit once on this file.
========================================== */

.ab-chapter.ab-story{

    background:#ffffff;

}
.ab-chapter__inner.ab-story__inner{

    max-width:1400px;

}
.ab-story__head{

    max-width:880px;

    margin-bottom:52px;

}
.ab-story__head .eyebrow{

    color:var(--color-gold);

}
/* Compound-scoped (not just .ab-story__title) — the
   shared ".ab-chapter__inner h2" rule above includes the
   "h2" element in its selector, which outranks a lone
   class. Without this prefix the dark-mode white text
   color would win here and the headline would render
   white-on-white. */
.ab-chapter__inner.ab-story__inner .ab-story__title{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2.1rem, 3.4vw, 3rem);

    line-height:1.3;

    letter-spacing:-.5px;

    color:#0B1D3A;

    margin-top:14px;

}
.ab-story__grid{

    display:grid;

    grid-template-columns:1.6fr 1fr;

    gap:72px;

    align-items:start;

    margin-bottom:56px;

}
/* The max-width:900px override for this selector down in that
   earlier shared breakpoint block (search "ab-story__grid" there)
   never wins: it's a plain class selector positioned in the
   cascade BEFORE the base rule above, and that base rule is the
   same specificity and comes later in source order — so it always
   won regardless of viewport. Redeclaring the override here, after
   the rule it needs to beat, actually takes effect. */
@media (max-width:900px){

    .ab-story__grid{

        grid-template-columns:1fr;

        gap:32px;

        margin-bottom:40px;

    }

}
.ab-story__body{

    max-width:640px;

}
.ab-story__body > p{

    font-size:1.08rem;

    line-height:1.9;

    color:#5B6472;

    font-weight:300;

    margin-bottom:26px;

}
.ab-story__body > p:last-child{

    margin-bottom:0;

}
.ab-chapter__inner.ab-story__inner .ab-emphasis-line{

    color:var(--color-gold);

}
.ab-story__aside{

    background:#F7F4EC;

    border:1px solid rgba(169,121,31,.18);

    border-radius:var(--radius-lg);

    padding:36px 32px;

}
.ab-story__aside .ab-quote-stack{

    border-left-color:rgba(216,177,75,.5);

    margin:0;

}
.ab-story__aside .ab-quote-stack p{

    color:#5B6472;

}
.ab-chapter__inner.ab-story__inner .ab-callout{

    background:transparent;

    border-left-color:var(--color-gold);

    color:#0B1D3A;

}
.ab-story__aside .ab-callout{

    margin-top:28px;

    padding-top:20px;

    border-top:1px solid rgba(169,121,31,.2);

}
/* Matches .mfg-explain__closing from manufacturing-page.css
   exactly (left-bordered italic pull-quote, not the big-
   quote-mark centered treatment used everywhere else this
   class appears) — scoped to this one instance only. */
.ab-chapter__inner.ab-story__inner .ab-thesis{

    text-align:left;

    font-style:italic;

    font-weight:400;

    font-size:1.4rem;

    line-height:1.55;

    max-width:720px;

    margin:0 auto;

    padding:0 0 0 28px;

    border-left:3px solid var(--color-gold);

    color:#0B1D3A;

}
.ab-chapter__inner.ab-story__inner .ab-thesis::before{

    content:none;

}

/* ==========================================
   PRESENCE (02) — TWO-CARD "AI" SPOTLIGHT
   Rebuilt per feedback: the plain prose block plus
   grandmother-story aside read too flat for the section
   that's supposed to carry the page's "AI" idea. Split
   into two staggered glass cards instead — "The Shift"
   (up-left, 75% width) sets up the concept, "The Proof"
   (down-right, 75% width) is the concrete family story —
   with a connector between them that visibly sends a
   pulse from card to card, echoing the section's own line
   about AI "connecting the dots." Ambient gold glows
   behind the cards reuse the same radial-glow device as
   .ab-hero__mark-glow / .ab-cta__glow rather than
   introducing a new decorative language.
========================================== */

.ab-presence{

    position:relative;

    overflow:hidden;

}
.ab-presence__field{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

}
.ab-presence__node{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

}
.ab-presence__node--1{

    width:360px;

    height:360px;

    top:-140px;

    right:6%;

    background:radial-gradient(circle, rgba(216,177,75,.16), rgba(216,177,75,0) 70%);

}
.ab-presence__node--2{

    width:280px;

    height:280px;

    bottom:-120px;

    left:4%;

    background:radial-gradient(circle, rgba(216,177,75,.12), rgba(216,177,75,0) 70%);

}
.ab-chapter__inner.ab-presence__inner{

    max-width:1650px;

}
.ab-presence__inner{

    position:relative;

    z-index:1;

}

.ab-presence__cards{

    display:flex;

    flex-direction:column;

    margin-top:60px;

}
.ab-presence__card{

    position:relative;

    width:75%;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(216,177,75,.22);

    border-radius:calc(var(--radius-lg) + 4px);

    padding:44px 48px;

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

    transition:border-color .4s ease, box-shadow .4s ease, transform .4s ease;

}
.ab-presence__card:hover{

    border-color:rgba(216,177,75,.45);

    box-shadow:0 34px 80px rgba(0,0,0,.4), 0 0 46px rgba(216,177,75,.14);

    transform:translateY(-4px);

}
.ab-presence__card--one{

    align-self:flex-start;

}
.ab-presence__card--two{

    align-self:flex-end;

}
.ab-presence__card p{

    font-size:1.05rem;

    line-height:1.9;

    color:var(--color-text);

    font-weight:300;

    margin-bottom:20px;

}
.ab-presence__card p:last-child{

    margin-bottom:0;

}
.ab-presence__card-tag{

    display:inline-block;

    font-family:var(--font-heading);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--color-gold);

    background:rgba(216,177,75,.1);

    border:1px solid rgba(216,177,75,.3);

    border-radius:999px;

    padding:6px 14px;

    margin-bottom:24px;

}

/* The "AI." word-beat gets its own slow pulse inside this
   section specifically — the one place on the page meant
   to feel alive rather than just typographic. */
.ab-chapter__inner .ab-presence__word-beat{

    margin:30px 0;

    animation:abAiPulse 3.2s ease-in-out infinite;

}
@keyframes abAiPulse{

    0%, 100%{ text-shadow:0 0 40px rgba(216,177,75,.35); }

    50%{ text-shadow:0 0 70px rgba(216,177,75,.65), 0 0 20px rgba(216,177,75,.5); }

}
.ab-chapter__inner .ab-presence__card-emphasis{

    margin:34px 0 0;

}

/* Connector — the gap between the two cards, with a
   traveling dot that loops from top to bottom on its own
   (not scroll-triggered) so the "connecting the dots" idea
   reads as continuous, ambient motion. */
.ab-presence__connector{

    position:relative;

    align-self:center;

    width:2px;

    height:90px;

    flex-shrink:0;

}
.ab-presence__connector-line{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:1px;

    transform:translateX(-50%);

    background:linear-gradient(to bottom, rgba(216,177,75,0), rgba(216,177,75,.55) 18%, rgba(216,177,75,.55) 82%, rgba(216,177,75,0));

}
.ab-presence__connector-dot{

    position:absolute;

    left:50%;

    width:6px;

    height:6px;

    margin-left:-3px;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:0 0 10px 3px rgba(216,177,75,.6);

}
.ab-presence__connector-dot--top{ top:-3px; }
.ab-presence__connector-dot--bottom{ bottom:-3px; }
.ab-presence__connector-pulse{

    position:absolute;

    left:50%;

    top:0;

    width:8px;

    height:8px;

    margin-left:-4px;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:0 0 16px 5px rgba(216,177,75,.8);

    animation:abConnectorFlow 3.2s cubic-bezier(.45,0,.55,1) infinite;

}
@keyframes abConnectorFlow{

    0%{ top:0; opacity:0; }

    12%{ opacity:1; }

    88%{ opacity:1; }

    100%{ top:100%; opacity:0; }

}

@media (max-width:900px){

    .ab-presence__card{ width:100%; padding:36px 30px; }

    .ab-presence__connector{ height:64px; }

}

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

    .ab-presence__card{ transition:none; }

    .ab-presence__card:hover{ transform:none; }

    .ab-presence__connector-pulse{ animation:none; opacity:0; }

    .ab-chapter__inner .ab-presence__word-beat{ animation:none; }

}

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

.ab-cta{

    position:relative;

    background:#ffffff;

    padding:var(--space-3xl) 0;

    overflow:hidden;

}
.ab-cta__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}
.ab-cta__glow--two{

    width:460px;

    height:460px;

    bottom:-220px;

    right:6%;

    background:radial-gradient(circle, rgba(216,177,75,.14), rgba(216,177,75,0) 70%);

}
.ab-cta__card{

    position:relative;

    z-index:1;

    max-width:760px;

    margin:0 auto;

    text-align:center;

    background:var(--color-background);

    border:1px solid rgba(216,177,75,.3);

    border-radius:calc(var(--radius-lg) + 6px);

    padding:66px 60px;

    box-shadow:0 40px 90px rgba(11,29,58,.18);

    opacity:0;

    transform:translateY(24px);

    transition:opacity .7s ease, transform .7s ease;

}
.ab-cta__card.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ab-cta__card h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.2vw, 2.6rem);

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:22px;

}
.ab-cta__card h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.ab-cta__card p{

    font-size:1.1rem;

    line-height:1.8;

    color:var(--color-text);

    max-width:560px;

    margin:0 auto 40px;

}
.ab-cta .hero__buttons{

    justify-content:center;

}
@media (max-width:900px){

    .ab-cta__card{ padding:48px 28px; }

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

    .ab-cta__card{ transition:none; opacity:1; transform:none; }

}