/* ============================================
   ADZIO — About Page
   Refined dark-editorial agency layout
   ============================================ */

.about-page-main {
    padding-top: 0;
    overflow-x: clip;
}

.abt-shell {
    max-width: min(1500px, 92vw);
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

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

.abt-hero {
    position: relative;
    padding: 0.5rem 0 1rem;
    text-align: center;
    overflow: visible;
}

.abt-hero::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 50%;
    width: 760px;
    height: 480px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(59, 165, 181, 0.22) 0%, transparent 68%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.abt-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}

.abt-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 165, 181, 0.4);
    background: rgba(11, 27, 33, 0.7);
    color: var(--accent-primary);
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.abt-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 12px var(--accent-primary);
    animation: abt-pulse 2.4s ease-in-out infinite;
}

@keyframes abt-pulse {

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

    50% {
        opacity: 0.45;
        transform: scale(0.82);
    }
}

.abt-hero-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 5.2vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    margin: 0 auto 1.4rem;
    max-width: none;
    text-align: center;
}

.abt-hero-lead {
    max-width: 620px;
    margin: 0 auto 2.2rem;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.7;
    color: var(--text-secondary);
}

.abt-hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.abt-hero-cta .btn {
    min-width: 210px;
}

.abt-hero .ed-hero-cta .btn {
    inline-size: min(216px, 100%);
    justify-content: center;
    white-space: nowrap;
    position: relative;
    transition: inline-size 0.36s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, box-shadow 0.2s ease;
}

.abt-hero .ed-hero-cta .btn > span {
    position: absolute;
    left: 108px;
    transform: translateX(-50%);
    pointer-events: none;
}

.abt-hero .ed-hero-cta .btn:hover,
.abt-hero .ed-hero-cta .btn:focus-visible {
    inline-size: min(250px, 100%);
    transform: none;
}

.abt-hero .ed-hero-cta .btn svg {
    position: absolute;
    right: 2rem;
}

.abt-hero .ed-hero-cta .btn-primary:hover,
.abt-hero .ed-hero-cta .btn-primary:focus-visible {
    --btn-bg: var(--accent-gradient);
    --btn-ring: none;
    color: var(--bg-primary);
}

.abt-hero .ed-hero-cta .btn-ghost:hover,
.abt-hero .ed-hero-cta .btn-ghost:focus-visible {
    --btn-bg: transparent;
    --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.22);
    color: var(--text-primary);
}

@media (min-width: 1001px) {
    .abt-hero .ed-hero-title .d-mobile-only {
        display: none !important;
    }
}

/* Stat band */
.abt-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 3.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.abt-stat-item {
    padding: 1.9rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(13, 22, 28, 0.92), rgba(8, 13, 18, 0.92));
}

.abt-stat-item strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #ffffff, var(--accent-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.abt-stat-item span {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* ============================================
   SHARED SECTION HEADERS
   ============================================ */

.abt-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.abt-section-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.abt-section-title-accent {
    color: #00b8d4;
}

.abt-section-sub {
    margin-top: 1.1rem;
    color: var(--text-secondary);
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.7;
}

.abt-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}

.abt-section-head--wide {
    max-width: 980px;
}

/* ============================================
   STORY
   ============================================ */

.abt-story {
    padding: 4.4rem 0;
}

/* Single column since the dashboard widget was removed. The copy holds its own
   measure rather than stretching the full shell width. */
.abt-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding-left: clamp(42px, 4.5vw, 75px);
}

.abt-story-copy .abt-section-title {
    margin-bottom: 1.3rem;
    max-width: 24ch;
}

.abt-story-copy p {
    color: var(--text-secondary);
    font-size: 1.04rem;
    line-height: 1.74;
    margin-bottom: 1.1rem;
    max-width: 62ch;
}

/* Story visual card */
.abt-story-visual {
    padding: 1.5rem;
}

/* Bookings feed — what "get booked every month" looks like on a client's
   phone. Deliberately quiet: hairline rows, one accent, no dashboard mimicry. */
.bookings-card {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 22px;
    padding: clamp(20px, 2vw, 28px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, rgba(13, 19, 25, 0.94), rgba(7, 10, 14, 0.97));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 30px 80px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.bookings-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 184, 212, 0.22);
}

.bookings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bookings-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bookings-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan, #00b8d4);
    box-shadow: 0 0 10px rgba(0, 184, 212, 0.7);
    animation: abt-pulse 2.2s ease-in-out infinite;
}

.bookings-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.bookings-range {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(244, 241, 234, 0.45));
}

.bookings-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.booking-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.booking-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #56cfe1;
    background: rgba(0, 184, 212, 0.08);
    border: 1px solid rgba(0, 184, 212, 0.16);
}

.booking-icon svg {
    width: 17px;
    height: 17px;
}

.booking-icon--win {
    color: #7be0c3;
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.18);
}

.booking-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.booking-main {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.booking-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.booking-time {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, rgba(244, 241, 234, 0.4));
}

.bookings-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.bookings-tally {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0;
}

.bookings-tally strong {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--text-primary);
    line-height: 1;
}

.bookings-tally span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.bookings-delta {
    font-size: 0.76rem;
    font-weight: 700;
    color: #56cfe1;
    white-space: nowrap;
}

/* Rows cascade in once the section scrolls into view (.visible is added by
   initScrollAnimations in main.js) — like notifications arriving. */
.abt-story-visual .booking-item {
    opacity: 0;
    transform: translateY(10px);
}

.abt-story-visual.visible .booking-item {
    animation: booking-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.abt-story-visual.visible .booking-item:nth-child(1) { animation-delay: 0.25s; }
.abt-story-visual.visible .booking-item:nth-child(2) { animation-delay: 0.45s; }
.abt-story-visual.visible .booking-item:nth-child(3) { animation-delay: 0.65s; }
.abt-story-visual.visible .booking-item:nth-child(4) { animation-delay: 0.85s; }

@keyframes booking-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .abt-story-visual .booking-item {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .bookings-live-dot {
        animation: none;
    }
}

/* ============================================
   STORY — INTERACTIVE GROWTH COMMAND CENTER
   ============================================ */

.growth-console {
    position: relative;
    width: min(100%, 660px);
    margin: 0 auto;
    padding: clamp(20px, 2.2vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    background:
        linear-gradient(150deg, rgba(15, 24, 31, 0.98), rgba(5, 9, 14, 0.99)),
        #080d12;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
    isolation: isolate;
}

.growth-console::before {
    display: none;
}

.growth-console-glow {
    display: none;
}

.growth-console-head,
.growth-chart-head,
.growth-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.growth-console-head {
    gap: 16px;
    margin-bottom: 22px;
}

.growth-console-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.growth-console-head p {
    max-width: 43ch;
    margin: 2px 0 0;
    color: rgba(244, 241, 234, 0.52);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.45;
}

.growth-console-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(244, 241, 234, 0.52);
    font-family: 'Archivo', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.growth-console-kicker i,
.growth-chart-status i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #22d3ee;
}

.growth-console-head strong {
    color: var(--text-primary);
    font-family: 'Archivo', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.growth-view-picker {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex: none;
}

.growth-view-picker > span {
    color: rgba(244, 241, 234, 0.42);
    font-family: 'Archivo', sans-serif;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.growth-periods {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
}

.growth-periods button {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 7px 8px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(244, 241, 234, 0.45);
    font-family: 'Archivo', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.growth-periods button b,
.growth-periods button small {
    display: block;
    line-height: 1;
}

.growth-periods button b {
    font-size: 0.7rem;
}

.growth-periods button small {
    margin-top: 4px;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.growth-periods button:hover,
.growth-periods button:focus-visible {
    color: var(--text-primary);
}

.growth-periods button.active {
    color: #061117;
    background: #33d6ee;
    box-shadow: none;
}

.growth-kpis {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.growth-kpi {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.026);
}

.growth-kpi--primary {
    border-color: rgba(0, 184, 212, 0.23);
    background: linear-gradient(145deg, rgba(0, 184, 212, 0.115), rgba(255, 255, 255, 0.02));
}

.growth-kpi span,
.growth-kpi em {
    display: block;
    white-space: nowrap;
}

.growth-kpi span {
    overflow: hidden;
    margin-bottom: 9px;
    color: rgba(244, 241, 234, 0.45);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.growth-kpi strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.growth-kpi em {
    color: #55d6c2;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
}

.growth-chart-wrap {
    padding: 15px 16px 7px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(2, 7, 11, 0.48);
}

.growth-chart-head {
    gap: 14px;
    margin-bottom: 3px;
    color: rgba(244, 241, 234, 0.6);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.growth-chart-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #55d6c2;
    font-size: 0.57rem;
}

.growth-chart-status i {
    width: 5px;
    height: 5px;
    background: #55d6c2;
    box-shadow: none;
}

.growth-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Recessive grid: present enough to read a value off, never competing with the data */
.growth-grid line {
    stroke: rgba(244, 241, 234, 0.07);
    stroke-width: 1;
}

.growth-ylabels text,
.growth-xlabels text {
    fill: rgba(244, 241, 234, 0.42);
    font-family: 'Archivo', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.growth-area {
    fill: url(#growthArea);
}

/* Baseline = what the business was already doing. Deliberately grey and dashed so
   it reads as the reference, and so the two series are never colour-alone. */
.growth-baseline {
    fill: none;
    stroke: rgba(244, 241, 234, 0.36);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: d 0.4s ease;
}

.growth-line {
    fill: none;
    stroke: #22d3ee;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: d 0.4s ease;
}

.growth-chart-end {
    fill: #22d3ee;
    stroke: #080d12;
    stroke-width: 3;
    transition: cx 0.4s ease, cy 0.4s ease;
}

.growth-channels {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.growth-channel {
    display: grid;
    grid-template-columns: 98px 1fr 34px;
    gap: 10px;
    color: rgba(244, 241, 234, 0.65);
    font-size: 0.65rem;
    font-weight: 700;
}

.growth-channel > span {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.growth-channel > div {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
}

/* Each bar carries its own channel colour. This used to be one shared blue-to-cyan
   gradient on all three, which made the bars impossible to tell apart. */
.growth-channel b {
    display: block;
    width: var(--channel-width);
    height: 100%;
    border-radius: inherit;
    background: var(--channel-color, #129FB0);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.growth-channel > strong {
    color: var(--text-primary);
    font-size: 0.63rem;
    text-align: right;
}

.growth-channel-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 2px;
}

.growth-channel-dot { background: var(--channel-color, #129FB0); }

/* ── Channel + chart legend, KPI baselines, sample-data note ──
   Categorical hues are validated for colour-blind separation against this
   surface (worst adjacent pair ΔE 17.6 CVD / 22.0 normal). The previous
   Meta/Google pair sat at ΔE 9.0 normal, which is below the readable floor. */
.growth-channels-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    color: rgba(244, 241, 234, 0.52);
    font-family: 'Archivo', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.growth-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.growth-legend i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(244, 241, 234, 0.55);
    font-family: 'Archivo', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.growth-swatch {
    width: 14px;
    height: 0;
    flex: none;
    border-radius: 2px;
}

.growth-swatch--base {
    border-top: 2px dashed rgba(244, 241, 234, 0.5);
}

.growth-swatch--adzio {
    border-top: 2px solid #22d3ee;
}

.growth-chart-head b {
    color: rgba(244, 241, 234, 0.72);
    font-weight: 800;
}

/* Baseline reference under each KPI, so a number is never shown on its own */
.growth-kpi small {
    display: block;
    margin-top: 4px;
    color: rgba(244, 241, 234, 0.4);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.growth-kpi small b {
    color: rgba(244, 241, 234, 0.62);
    font-weight: 700;
}

/* Cost per booked job improves by going DOWN, so it gets the same positive
   treatment rather than reading as a loss. */
.growth-kpi em.is-down {
    color: #5ee7a8;
}

.growth-console-note {
    margin: 14px 0 0;
    color: rgba(244, 241, 234, 0.34);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.growth-console--updated .growth-kpi strong,
.growth-console--updated .growth-kpi em {
    animation: growth-value-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes growth-value-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.abt-story-visual.visible .growth-console {
    animation: growth-console-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes growth-console-in {
    from { opacity: 0; transform: perspective(1000px) rotateY(-5deg) translateY(20px); }
    to { opacity: 1; transform: perspective(1000px) rotateY(0) translateY(0); }
}

@media (max-width: 560px) {
    .growth-console-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .growth-view-picker {
        align-items: flex-start;
        width: 100%;
    }

    .growth-periods {
        width: 100%;
    }

    .growth-periods button {
        flex: 1;
    }

    .growth-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .growth-kpi--primary {
        grid-column: 1 / -1;
    }

    .growth-channel {
        grid-template-columns: 88px 1fr 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abt-story-visual.visible .growth-console,
    .growth-console--updated .growth-kpi strong,
    .growth-console--updated .growth-kpi em {
        animation: none;
    }

    .growth-console-kicker i,
    .growth-chart-status i {
        animation: none;
    }
}


/* ============================================
   VALUES
   ============================================ */

.abt-values {
    padding: clamp(5rem, 9vh, 9rem) 0;
}

/* Editorial index: full-width numbered rows with hairline dividers.
   One accent, no icon chips — the numbers and typography do the work. */
.abt-values-list {
    max-width: min(1400px, 90vw);
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.abt-value-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(18px, 3vw, 52px);
    padding: clamp(30px, 4.5vh, 48px) clamp(4px, 1vw, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.abt-value-row:nth-child(1) { --row-accent: #00b8d4; }
.abt-value-row:nth-child(2) { --row-accent: #4285F4; }
.abt-value-row:nth-child(3) { --row-accent: #0866FF; }
.abt-value-row:nth-child(4) { --row-accent: #0A2FA0; }

.abt-value-row h3 .val-accent {
    color: var(--row-accent, #00b8d4);
    transition: color 0.35s ease;
}

/* Dynamic accent line sweeps along the divider on hover */
.abt-value-row::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--row-accent, #00b8d4), transparent);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.abt-value-row:hover::before {
    width: 100%;
}

.abt-value-num {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    letter-spacing: 0.14em;
    color: var(--row-accent, #00b8d4);
    padding-top: 0.35em; /* optical alignment with the title's cap height */
    transition: color 0.35s ease, text-shadow 0.35s ease;
    opacity: 0.9;
}


.abt-value-row:hover .abt-value-num {
    opacity: 1;
    text-shadow: 0 0 14px var(--row-accent);
}

.abt-value-row h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 2.7vw, 2.7rem);
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: #F8F4EC;
    margin: 0;
    transition: color 0.35s ease;
}

.abt-value-row:hover h3 {
    color: var(--row-accent);
}

.abt-value-row p {
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.65;
    color: rgba(244, 241, 234, 0.88);
    max-width: 54ch;
    margin: 0;
    padding-top: 0.4em;
}

/* ── Hover Typewriter "Book a Call →" link in far right bottom corner ── */
.row-book-call {
    position: absolute;
    bottom: clamp(14px, 2.2vh, 24px);
    right: clamp(12px, 1.8vw, 24px);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.72rem, 0.85vw, 0.84rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

.row-book-call:hover {
    color: var(--row-accent, #00b8d4);
}

.row-book-call .type-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.abt-value-row:hover .row-book-call {
    opacity: 1;
    pointer-events: auto;
}

.abt-value-row:hover .row-book-call .type-text {
    animation: typeOutWord 0.45s steps(14, end) forwards;
}

@keyframes typeOutWord {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Underline in the section's accent color — only when hovering the link itself */
.row-book-call::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--row-accent, #00b8d4);
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.row-book-call:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    .abt-value-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 28px 2px;
    }

    .abt-value-num {
        padding-top: 0;
    }

    .abt-value-row p {
        padding-top: 0;
    }
}

.abt-team {
    padding: clamp(5rem, 9vh, 9rem) 0;
}

.abt-team-heading {
    margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
    margin-left: calc(-1 * clamp(32px, 4.7vw, 90px));
}

@media (min-width: 1001px) {
    .abt-team-heading {
        margin-left: clamp(72px, 7vw, 140px);
    }
}

@media (max-width: 768px) {
    .abt-team-heading {
        margin-left: 0;
    }
}

.abt-team-heading .abt-section-title {
    max-width: none;
    font-size: clamp(3.2rem, 6.2vw, 6.8rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.abt-team-heading .abt-grad {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #00b8d4;
    color: #00b8d4;
}

.abt-grad {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #00b8d4;
    color: #00b8d4;
}

.abt-team-layout {
    display: block;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.abt-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 42px);
    width: min(1000px, 62vw);
    max-width: none;
    margin-left: auto;
}

.abt-team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--hairline);
}

.abt-team-photo-placeholder span {
    padding: 0 1.5rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--text-secondary);
}

.abt-team-card {
    --team-accent: var(--cyan, #00b8d4);
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    border-radius: 10px;
    border: none;
    background: rgba(13, 19, 24, 0.7);
    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, background-color, box-shadow;
}

.abt-team-card--anton {
    --team-accent: #2854CC;
}

.abt-team-card:hover {
    transform: translate3d(0, -6px, 0);
    background-color: rgba(15, 23, 29, 0.78);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}

.abt-team-card.animate-on-scroll.visible {
    transition-delay: 0s;
}

.abt-team-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1.42 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--team-accent) 14%, transparent), rgba(9, 13, 18, 0.92));
}

.abt-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.abt-team-photo-devyn img {
    object-position: center 65%;
}

.abt-team-card:hover .abt-team-photo img {
    transform: scale(1.04);
}

.abt-team-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-height: clamp(92px, 6.2vw, 118px);
    padding: clamp(16px, 1.4vw, 26px);
}

.abt-team-card h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.05rem, 1.1vw, 1.35rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}

.abt-role {
    display: block;
    font-size: clamp(0.78rem, 0.75vw, 0.92rem);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

.abt-team-email-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.68rem, 0.65vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
    align-self: flex-end;
}

.abt-team-email-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--team-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.abt-team-email-link:hover,
.abt-team-card:hover .abt-team-email-link {
    color: var(--team-accent);
}

.abt-team-email-link:hover::after,
.abt-team-card:hover .abt-team-email-link::after {
    transform: scaleX(1);
}

.abt-team-email-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}

.abt-team-email-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.abt-team-email-link:hover .abt-team-email-icon,
.abt-team-card:hover .abt-team-email-icon {
    transform: translateX(6px);
}

/* Get in touch: general CTA under the team grid */
.abt-team-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
    margin-top: clamp(48px, 6vw, 72px);
    padding: clamp(32px, 4vw, 48px);
    border-radius: 28px;
    border: 1px solid var(--hairline);
    background: linear-gradient(140deg, rgba(0, 184, 212, 0.06), rgba(255, 255, 255, 0.015) 60%);
}

.abt-team-cta-text h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.abt-team-cta-text p {
    margin: 0;
    max-width: 46ch;
    font-size: 0.98rem;
    color: var(--text-secondary);
}

.abt-team-cta-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .abt-team-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .abt-team-cta-text p {
        max-width: none;
    }

    .abt-team-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .abt-team-cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/* ============================================
   PROOF — founder-built audiences
   ============================================ */

.abt-proof {
    padding: clamp(5rem, 9vh, 9rem) 0 2rem;
}

@media (min-width: 1001px) {
    .abt-proof {
        padding-top: clamp(2rem, 3.5vh, 3.5rem);
    }

    .abt-proof .abt-section-head {
        margin-bottom: clamp(1.45rem, 2.4vw, 2.2rem);
    }

    .abt-proof .abt-section-title {
        font-size: clamp(2.35rem, 3vw, 3.75rem);
        line-height: 0.98;
    }

    .abt-proof .abt-section-sub {
        margin-top: 0.55rem;
        font-size: clamp(0.92rem, 1.02vw, 1.06rem);
        line-height: 1.42;
    }
}

.abt-proof .abt-shell {
    max-width: min(1750px, 96vw);
}

.abt-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 550px));
    justify-content: center;
    gap: clamp(24px, 2.7vw, 44px);
    max-width: min(1190px, 88vw);
    margin: 0 auto;
}

/* On narrower desktop screens the fixed side nav occupies the left gutter.
   Reserve that space before sizing the proof cards so the section stays
   comfortably inside the viewport instead of running beneath the nav. */
@media (min-width: 769px) and (max-width: 1700px) {
    .abt-proof .abt-shell {
        padding-left: clamp(84px, 5.5vw, 96px);
        padding-right: clamp(24px, 3vw, 48px);
    }

    .abt-proof-grid {
        max-width: min(1160px, 100%);
    }

    .abt-proof-card {
        padding: clamp(22px, 1.55vw, 28px);
    }
}

/* Keep the same navbar clearance on wide desktop too; the cards scale into
   the remaining width instead of starting flush against the fixed nav gutter. */
@media (min-width: 769px) {
    .abt-proof .abt-shell {
        padding-left: clamp(84px, 4.5vw, 100px);
        padding-right: clamp(28px, 3vw, 54px);
    }

    .abt-proof-grid {
        max-width: min(1190px, 100%);
    }

    .abt-proof-card {
        padding: clamp(24px, 1.65vw, 30px);
    }
}

.abt-proof-card {
    --proof: #00b8d4;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.62 / 1;
    width: min(100%, 550px);
    justify-self: center;
    padding: clamp(24px, 1.65vw, 30px);
    border-radius: clamp(52px, 4.8vw, 68px);
    text-decoration: none;
    background: transparent;
    border: none;
    box-shadow: none;
    isolation: isolate;
}

.abt-proof-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: none;
    background: linear-gradient(145deg, color-mix(in srgb, var(--proof) 8%, rgba(16, 24, 30, 0.92)), rgba(9, 13, 18, 0.92));
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

/* Match the Twan Whips proof card to its blue treatment on the Services page. */
.abt-proof-card--purple {
    --proof: #2854CC;
}

.abt-proof-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 0.62rem;
}

/* Instagram mark in the card's top corner, so the account source is obvious
   without reading the handle. */
.abt-proof-ig {
    width: clamp(20px, 1.7vw, 26px);
    height: clamp(20px, 1.7vw, 26px);
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.abt-proof-card:hover .abt-proof-ig {
    opacity: 1;
    transform: scale(1.06);
}

.abt-proof-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--proof) 12%, transparent);
    border: 2px solid color-mix(in srgb, var(--proof) 40%, transparent);
    color: var(--proof);
    overflow: hidden;
}

.abt-proof-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.abt-proof-icon svg {
    width: 24px;
    height: 24px;
}

.abt-proof-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.abt-proof-handle {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.abt-proof-by {
    font-family: 'Archivo', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--proof);
}

.abt-proof-text {
    font-size: 0.76rem;
    line-height: 1.43;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

/* Follower/engagement stat row, matching the compact strip used on the
   services page's version of these same proof cards. */
.abt-proof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0.75rem;
    padding: 0.46rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.abt-proof-stat {
    text-align: center;
}

.abt-proof-stat + .abt-proof-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.abt-proof-stat strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(0.86rem, 1.05vw, 1rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.1;
}

.abt-proof-stat span {
    display: block;
    margin-top: 4px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.abt-proof-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    margin-left: auto;
    align-self: flex-end;
    font-family: 'Archivo', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s ease;
}

.abt-proof-cta span {
    position: relative;
}

.abt-proof-cta span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.abt-proof-cta:hover span::after {
    transform: scaleX(1);
}

.abt-proof-cta:hover {
    color: var(--proof);
    gap: 14px;
}

@media (max-width: 720px) {
    .abt-proof-grid {
        grid-template-columns: 1fr;
    }
}

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

.abt-cta {
    padding: 1rem 0 2rem;
}

.abt-cta-panel {
    position: relative;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    border-radius: 0;
    overflow: visible;
    border: none;
    background: none;
    box-shadow: none;
}

.abt-cta-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
}

.abt-cta-panel>* {
    position: relative;
    z-index: 1;
}

.abt-eyebrow--center {
    display: inline-block;
}

.abt-cta-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
    margin: 0 auto 1rem;
    max-width: 18ch;
}

.abt-cta-sub {
    max-width: 52ch;
    margin: 0 auto 2.4rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

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

@media (max-width: 1000px) {
    .abt-story-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .abt-story-copy p {
        max-width: none;
    }

    .abt-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-team-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .abt-team-intro {
        text-align: center;
    }

    .abt-team-intro .abt-section-title {
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .abt-shell {
        padding: 0 20px;
    }

    .about-page-main {
        padding-top: 60px;
    }

    .abt-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .abt-hero-cta .btn {
        width: 100%;
    }

    .abt-stats {
        grid-template-columns: 1fr;
    }

    .abt-team-grid {
        grid-template-columns: 1fr;
    }

    .abt-story-visual {
        padding: 0.5rem;
    }
}

/* Match the single-column mobile composition used by the Services hero. */
@media (max-width: 768px) {
    .abt-hero {
        padding-top: clamp(22px, 6vw, 34px);
        min-height: calc(100svh - 60px);
        text-align: left;
    }

    .abt-hero .ed-hero-aside {
        position: static;
        right: auto;
        bottom: auto;
        width: auto;
        margin: 0;
        padding: clamp(16px, 2.6vh, 24px) 0 0;
    }

    .abt-hero .ed-hero-aside::before {
        display: none;
    }

    .abt-hero .ed-hero-cta {
        --abt-hero-cta-reveal: 34px;
        width: min(100%, 250px);
        margin-left: auto;
        align-items: flex-start;
    }

    .abt-hero .ed-hero-cta .btn {
        inline-size: calc(100% - var(--abt-hero-cta-reveal));
        min-width: 0;
        min-height: 54px;
        padding-inline: 2rem;
        font-size: 1.1rem;
    }

    .abt-hero .ed-hero-cta .btn:hover,
    .abt-hero .ed-hero-cta .btn:focus-visible {
        inline-size: 100%;
    }
}


/* ============================================
   INSTAGRAM FEED INTEGRATION
   ============================================ */

.abt-proof-header-link {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 0.5rem;
}

.abt-proof-header-link:hover .abt-proof-handle {
    color: var(--proof);
}

.abt-proof-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(6px, 0.58vw, 8px);
    margin: 0.62rem 0 0.68rem;
}

.abt-feed-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.abt-feed-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.abt-feed-item:hover {
    border-color: color-mix(in srgb, var(--proof) 60%, transparent);
    box-shadow: none;
}

.abt-feed-item:hover img {
    transform: scale(1.08);
}

.abt-feed-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.82) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.abt-feed-item:hover .abt-feed-overlay {
    opacity: 1;
}

.abt-feed-overlay svg {
    display: none !important;
}

.abt-feed-overlay::after {
    content: 'View Post';
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--proof);
    transform: scale(0.85) translateY(3px);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-size 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
    /* Left-to-right underline sweep in the same color as the text */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
}

.abt-feed-item:hover .abt-feed-overlay::after {
    transform: scale(1) translateY(0);
    background-size: 100% 2px;
}

/* Skeletons & Shimmer Animation */
.abt-feed-skeleton {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: abt-shimmer 1.8s infinite linear;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

@keyframes abt-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Logo carousel heading. This page does not load services-page.css, so the
   accent phrase and the tighter word gap are declared here. */
.svc-platform-heading {
    gap: 0.35em;
}

.svc-platform-heading > span {
    color: var(--cyan);
}

/* ============================================
   MOBILE PASS - tap targets
   Scoped to (max-width: 768px); desktop base rules untouched.
   ============================================ */
@media (max-width: 768px) {

    /* Hit-area expansion - grows the touch region to 44px with no visual
       change. Both of these sit alone in their cards, so there is no sibling
       for the expanded area to collide with. Neither uses ::before. */
    .abt-proof-cta::before,
    .abt-team-email-link::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
        background: transparent;
        pointer-events: auto;
    }

    /* .abt-team-email-link is already relative; this one is not. */
    .abt-proof-cta {
        position: relative;
    }

    /* Reporting-period segmented control: adjacent buttons, so the boxes
       themselves grow rather than overlaying hit areas that would steal each
       other's taps. */
    .growth-periods button {
        min-height: 44px;
        justify-content: center;
    }
}


/* ============================================
   MOBILE PASS 2 - typography
   Scoped to (max-width: 768px). Desktop base rules untouched.
   ============================================ */
@media (max-width: 768px) {

    .abt-mobile-white {
        color: var(--text-primary);
    }

    /* Story paragraphs were 15.6px. :not([class]) deliberately excludes
       .abt-story-kicker, which is a p in the same block already sitting at
       17.25px - a blanket rule would have shrunk it. */
    .abt-story-copy > p:not([class]) {
        font-size: 16px;
    }

    /* Role line under each team member's name. The name is an h3 at 20.25px,
       so 16px here keeps a clear step down. */
    .abt-role {
        font-size: 16px;
    }

    .abt-proof-text {
        font-size: 16px;
    }
}


/* ============================================
   MOBILE PASS 3 - single-column alignment
   Scoped to (max-width: 1000px), the width at which .abt-story-grid already
   collapses to one column, so no two-column desktop layout is affected.
   ============================================ */
@media (max-width: 1000px) {

    /* .abt-story-grid carries padding-left: clamp(42px, 4.5vw, 75px) to offset
       its two-column desktop layout. The existing block at this width collapses
       the grid to one column but leaves that padding behind, so the story copy
       and the growth console both sat ~42px right of centre (77px left gutter
       against 35px right) while every other block on the page was symmetric. */
    .abt-story-grid {
        padding-left: 0;
    }
}


/* ============================================
   Story section: fill the screen + paragraph link arrow (desktop only)
   Scoped to min-width: 1001px, which is exactly where .abt-story-grid stops
   being a single column, so the phone/tablet layout is untouched. The arrow is
   drawn with ::before/::after on the second paragraph rather than added to the
   markup, so there is no new element that could reach mobile at all.
   ============================================ */
@media (min-width: 1001px) {

    /* Was 499px tall in a 1000px viewport. Grid rather than flex so the block
       children keep their own widths and only the vertical placement changes. */
    .abt-story {
        min-height: 100svh;
        display: grid;
        align-content: center;
    }

    /* Was font-weight 300 at 14.56px, which read as very light once the section
       filled the screen. */
    .abt-story-copy > p:nth-of-type(1),
    .abt-story-copy > p:nth-of-type(2) {
        font-weight: 500;
        font-size: clamp(1.02rem, 1.08vw, 1.24rem);
        line-height: 1.75;
        max-width: 74ch;
    }

    /* Room for the arrow to sit between the two paragraphs. */
    .abt-story-copy > p:nth-of-type(2) {
        position: relative;
        margin-top: 0.6rem;
        padding-top: 68px;
    }

    /* Stem: fades in from nothing so it reads as flowing out of paragraph one. */
    .abt-story-copy > p:nth-of-type(2)::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 11px;
        width: 2px;
        height: 34px;
        background: linear-gradient(180deg, rgba(0, 184, 212, 0), var(--cyan, #00b8d4));
        border-radius: 1px;
    }

    /* Chevron head pointing down into paragraph two. */
    .abt-story-copy > p:nth-of-type(2)::after {
        content: '';
        position: absolute;
        top: 40px;
        left: 5px;
        width: 13px;
        height: 13px;
        border-right: 2px solid var(--cyan, #00b8d4);
        border-bottom: 2px solid var(--cyan, #00b8d4);
        transform: rotate(45deg);
    }
}

/* Keep the founder introduction readable in one mobile viewport. */
@media (max-width: 768px) {
    .abt-team {
        padding: 3rem 0 3.5rem;
    }

    .abt-team-heading {
        margin-bottom: 1.75rem;
    }

    .abt-team-heading .abt-section-title {
        font-size: clamp(2.6rem, 11vw, 3.25rem);
    }

    .abt-team-layout {
        margin-bottom: 0;
    }

    .abt-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin-left: 0;
    }

    .abt-team-photo {
        aspect-ratio: 1.42 / 1;
    }

    .abt-team-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20px;
        align-items: end;
        gap: 6px;
        min-height: 0;
        padding: 12px;
    }

    .abt-team-card h3 {
        font-size: 1rem;
        line-height: 1.1;
        margin-bottom: 0.25rem;
    }

    .abt-team .abt-role {
        font-size: clamp(0.66rem, 2.3vw, 0.8rem);
        line-height: 1.3;
        white-space: nowrap;
    }

    .abt-team-email-link {
        align-self: end;
        padding: 2px;
        font-size: 0;
    }

    .abt-team-email-link::after {
        display: none;
    }

    .abt-team-email-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}


/* ============================================
   Proof cards: make the mobile collapse actually take effect
   There is already a max-width: 720px rule setting grid-template-columns: 1fr,
   but `1fr` is shorthand for minmax(auto, 1fr) and that `auto` floor resolves to
   the card's min-content. The stats and feed rows are repeat(3, 1fr) whose items
   default to min-width: auto, so the card could not shrink below ~764px and
   rendered 550px wide hanging ~78px off BOTH edges of a 393px screen.
   minmax(0, 1fr) plus min-width: 0 on the shrinkable descendants is what
   actually lets the card fit.
   ============================================ */
@media (max-width: 720px) {

    .abt-proof-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .abt-proof-card,
    .abt-proof-header-link,
    .abt-proof-head,
    .abt-proof-meta,
    .abt-proof-text,
    .abt-proof-stat {
        min-width: 0;
    }

    /* Same implicit-auto-minimum problem one level down: these are what pinned
       the card's min-content in the first place. */
    .abt-proof-stats,
    .abt-proof-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Long handles would otherwise re-introduce a content floor. */
    .abt-proof-handle,
    .abt-proof-by {
        overflow-wrap: anywhere;
    }
}

/* Tighter chrome once the card is genuinely full-bleed on a phone. */
@media (max-width: 480px) {
    .abt-proof-card {
        padding: 18px 16px;
    }

    .abt-proof-stats {
        padding: 0.55rem 0;
    }
}