/* =========================================================================
   Advance Careers UK — 2026 modern design system
   Layered on top of Bootstrap 4 + existing acuk-* theme colors.
   Brand colors are unchanged; this file modernizes type, spacing,
   radius, shadow and motion across the marketing site.
   ========================================================================= */

:root {
    --acuk-blue: #2b56a3;
    --acuk-blue-dark: #01194d;
    --acuk-orange: #f6a21e;
    --acuk-red: #f60508;
    --acuk-light-orange: #f8eddc;
    --acuk-grey: #e2e4e9;

    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(15, 23, 42, .06);
    --shadow-md: 0 14px 32px rgba(15, 23, 42, .10);
    --shadow-lg: 0 28px 60px rgba(15, 23, 42, .16);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --font-display: 'Plus Jakarta Sans', 'Nunito', -apple-system, sans-serif;
}

/* ---- Typography -------------------------------------------------------- */

body {
    font-family: var(--font-display);
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn {
    font-family: var(--font-display);
}

h1, h2, h3, h4 {
    color: var(--ink-900);
    letter-spacing: -0.02em;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acuk-blue);
    background: rgba(43, 86, 163, .08);
    padding: .4rem .9rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}

.section-eyebrow.on-dark {
    color: #ffd98a;
    background: rgba(255, 255, 255, .1);
}

.section-heading {
    font-weight: 800;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: .75rem;
}

.section-subtext {
    color: var(--ink-500);
    font-size: 1.05rem;
    max-width: 640px;
}

.mx-auto-text {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn[class*="btn-acuk-"],
.btn-modern {
    border: none;
    border-radius: var(--radius-sm) !important;
    padding: .85rem 1.75rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.btn[class*="btn-acuk-"]:hover,
.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.03);
}

.btn-acuk-orange { color: #23180a; }
.btn-acuk-red, .btn-acuk-blue { color: #fff; }

.btn-outline-modern {
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: .8rem 1.75rem;
    font-weight: 700;
    transition: all .2s var(--ease);
}

.btn-outline-modern:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

.btn-lg-modern { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn-pill { border-radius: var(--radius-pill) !important; }

/* ---- Sticky navbar -------------------------------------------------------- */

.acuk-topbar {
    background: var(--acuk-blue-dark);
    font-size: .875rem;
}

.acuk-topbar a { color: #ffd98a; font-weight: 700; text-decoration: none; }
.acuk-topbar a:hover { color: #fff; }

.acuk-navbar-wrap {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.acuk-navbar-wrap .nav-link {
    font-weight: 700;
    color: var(--ink-700) !important;
    position: relative;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.acuk-navbar-wrap .nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--acuk-orange);
    transform: scaleX(0);
    transition: transform .2s var(--ease);
}

.acuk-navbar-wrap .nav-link:hover::after,
.acuk-navbar-wrap .nav-item.active .nav-link::after {
    transform: scaleX(1);
}

.acuk-navbar-wrap .nav-link.btn { padding: .7rem 1.4rem !important; }
.acuk-navbar-wrap .nav-link.btn::after { display: none; }

/* Login/Register CTA — the .nav-link colour rule above is !important and
   more specific than .btn-acuk-red, so the red button needs its own. */
.acuk-navbar-wrap .nav-link.btn-acuk-red,
.acuk-navbar-wrap .nav-link.btn-acuk-red:hover,
.acuk-navbar-wrap .nav-link.btn-acuk-red:focus {
    color: #fff !important;
    background-color: var(--acuk-red);
    border-color: var(--acuk-red);
}

.acuk-navbar-wrap .dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
}

.acuk-navbar-wrap .dropdown-item {
    border-radius: var(--radius-sm);
    padding: .55rem .9rem;
    font-weight: 600;
}

.acuk-navbar-wrap .dropdown-item:hover {
    background: var(--acuk-light-orange);
}

/* ---- Hero ---------------------------------------------------------------- */

#hero-section {
    position: relative;
    min-height: 620px;
    height: auto !important;
    padding: 6rem 0 5rem;
    overflow: hidden;
}

#hero-section .hero-copy { position: relative; z-index: 2; max-width: 640px; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    padding: .5rem 1rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.5rem;
}

.hero-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acuk-orange);
    box-shadow: 0 0 0 4px rgba(246, 162, 30, .25);
}

#hero-section h1 {
    font-size: clamp(2.25rem, 1.7rem + 2.5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

#hero-section h3 {
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: .92;
}

.hero-stats {
    display: flex;
    gap: 2.25rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.hero-stats .stat-num {
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    line-height: 1;
}

.hero-stats .stat-label {
    font-size: .8rem;
    color: rgba(255, 255, 255, .65);
    margin-top: .35rem;
}

/* ---- Feature strip (ribbon) ---------------------------------------------- */

#ribbon-caption {
    background: var(--acuk-blue-dark) !important;
}

.feature-strip-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left !important;
}

.feature-icon-circle {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* ---- Cards ---------------------------------------------------------------- */

.modern-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(15, 23, 42, .05);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.course-card-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acuk-blue);
    background: rgba(43, 86, 163, .08);
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
}

.course-card-img {
    height: 190px;
    object-fit: cover;
    width: 100%;
}

/* ---- Upcoming Events — continuous right-to-left marquee ------------------- */

.ev-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ev-track {
    display: flex;
    width: max-content;
    animation: ev-scroll linear infinite;
    will-change: transform;
}

.ev-marquee:hover .ev-track,
.ev-marquee:focus-within .ev-track { animation-play-state: paused; }

.ev-track > .ev-item {
    flex: 0 0 320px;
    max-width: 320px;
    padding: .5rem;
    display: flex;
}

@keyframes ev-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .ev-track > .ev-item { flex-basis: 78vw; max-width: 78vw; }
    .ev-marquee { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-marquee { overflow-x: auto; }
    .ev-track { animation: none; }
}

/* ---- "Why Choose Us" read-more (mobile only) ----------------------------- */

.wcu-toggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.wcu-toggle { display: none; }

/* ---- Trusted-by logo strip — continuous right-to-left scroll ------------- */

.logo-marquee {
    overflow: hidden;
    width: 100%;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: logo-scroll 32s linear infinite;
    will-change: transform;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-cell {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding-right: 3rem;
}

.logo-track img {
    display: block;
    height: 90px;
    width: auto;
    max-width: none;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 767.98px) {
    .logo-track { animation-duration: 20s; }
    .logo-track img { height: 56px; }
    .logo-cell { padding-right: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee { overflow-x: auto; }
    .logo-track { animation: none; }
}

/* ---- Path / value cards ---------------------------------------------------- */

.path-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.path-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.path-card .icon-circle {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--acuk-blue), #4472c4);
    color: #fff;
}

/* ---- Section wrappers ------------------------------------------------------ */

.section-pad { padding: 5.5rem 0; }
.bg-surface-soft { background: var(--surface-soft) !important; }

.section-dark {
    background: var(--acuk-blue-dark) !important;
    color: rgba(255, 255, 255, .82);
}

.section-dark .section-heading,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
    color: #fff;
}

/* ---- Testimonials ----------------------------------------------------------- */

.testimonial-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 3rem 2.5rem;
    text-align: center;
}

.testimonial-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto 1.25rem;
    border: 3px solid var(--acuk-light-orange);
}

.testimonial-quote {
    font-size: 1.05rem;
    color: var(--ink-700);
    max-width: 620px;
    margin: 1rem auto 0;
    line-height: 1.7;
}

#carouselExampleIndicators .carousel-indicators li {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--acuk-grey);
    opacity: 1;
}

#carouselExampleIndicators .carousel-indicators li.active {
    background-color: var(--acuk-orange);
    width: 24px; border-radius: var(--radius-pill);
}

.carousel-control-prev, .carousel-control-next {
    width: 48px; height: 48px; top: 50%; transform: translateY(-50%);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    opacity: 1 !important;
}

.carousel-control-prev { left: -10px; }
.carousel-control-next { right: -10px; }

@media (max-width: 767px) {
    .carousel-control-prev, .carousel-control-next { display: none; }
}

/* ---- Footer -------------------------------------------------------------- */

.acuk-footer {
    background: var(--acuk-blue-dark) !important;
    color: rgba(255, 255, 255, .68);
}

.acuk-footer h3, .acuk-footer h5 {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
    margin-bottom: 1.25rem;
}

.acuk-footer p, .acuk-footer .nav-link {
    color: rgba(255, 255, 255, .62);
}

.acuk-footer .nav-link {
    padding: .3rem 0;
    font-weight: 500;
    transition: color .15s var(--ease), transform .15s var(--ease);
}

.acuk-footer .nav-link:hover {
    color: #fff;
    transform: translateX(3px);
}

.acuk-footer .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-newsletter input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    border: none;
    padding: .7rem 1rem;
}

.footer-newsletter .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    margin: 0 .3rem;
    transition: all .2s var(--ease);
}

.footer-social a:hover {
    background: var(--acuk-orange);
    color: var(--ink-900) !important;
    transform: translateY(-3px);
}

.footer-gallery img {
    border-radius: var(--radius-sm);
    transition: transform .2s var(--ease);
}

.footer-gallery img:hover { transform: scale(1.06); }

/* ---- Rating stars -------------------------------------------------------- */

.rating-stars i { color: var(--acuk-orange); }

/* ---- Misc ------------------------------------------------------------------ */

.soft-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,.08), transparent);
    border: none;
}

/* =========================================================================
   MOBILE  — 90%+ of traffic is on phones, so this block gets real attention.
   ========================================================================= */

/* ---- Collapsed navbar (<lg) --------------------------------------------- */
@media (max-width: 991.98px) {
    .acuk-navbar-wrap .navbar-collapse {
        padding: .5rem 0 1rem;
        border-top: 1px solid rgba(15, 23, 42, .08);
        margin-top: .5rem;
    }
    .acuk-navbar-wrap .navbar-nav .nav-item { width: 100%; }
    .acuk-navbar-wrap .navbar-nav .nav-link {
        padding: .85rem .25rem !important;
        font-size: 1.05rem;
    }
    .acuk-navbar-wrap .navbar-nav .nav-link::after { display: none; }
    .acuk-navbar-wrap .navbar-nav .dropdown-menu {
        box-shadow: none;
        padding: 0 0 .5rem 1rem;
        margin: 0;
    }
    /* Login/Register button: full-width, proper tap target */
    .acuk-navbar-wrap .nav-item.ml-lg-2 { margin-top: .5rem; }
    .acuk-navbar-wrap .nav-link.btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: .95rem 1rem !important;
        font-size: 1.05rem;
    }
    .navbar-toggler {
        border: none;
        font-size: 1.4rem;
        padding: .35rem .5rem;
    }
}

/* ---- Tablet / small ---------------------------------------------------- */
@media (max-width: 991.98px) {
    .section-pad { padding: 3.5rem 0; }
    .section-heading { font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.25rem); }
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section-pad { padding: 2.75rem 0; }

    /* Hero — no forced tall box, lighter padding, thinner overlay so the
       photo reads through more, headline pinned to two lines */
    #hero-section {
        min-height: 0;
        padding: 3.25rem 0 2.75rem;
        text-align: left;
        background-position: 68% center !important;
        background-image: linear-gradient(180deg, rgba(1, 25, 77, .86) 0%, rgba(1, 25, 77, .66) 44%, rgba(1, 25, 77, .44) 100%),
            url('/website/images/hero-section.jpg') !important;
    }
    #hero-section .hero-copy {
        max-width: 100%;
        text-shadow: 0 1px 12px rgba(1, 15, 46, .45);
    }
    .hero-badge { font-size: .72rem; padding: .4rem .8rem; margin-bottom: 1rem; }
    #hero-section h1 {
        font-size: 1.8rem;
        line-height: 1.15;
        margin-bottom: .75rem !important;
    }
    #hero-section h1 br { display: inline; }   /* keep the "career / Tech one" 2-line break */
    #hero-section h3 { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.5rem !important; }

    /* CTAs — compact, sized to content, not full-width blocks */
    .hero-cta-row { flex-direction: column; align-items: flex-start; gap: .6rem !important; }
    .hero-cta-row .btn {
        width: auto;
        max-width: 100%;
        white-space: normal;
        padding: .6rem 1.15rem !important;
        font-size: .85rem !important;
        min-height: 0 !important;
        line-height: 1.3;
    }
    .btn-lg-modern { padding: .95rem 1.5rem; font-size: 1rem; }
    .btn[class*="btn-acuk-"], .btn-modern, .btn-outline-modern { min-height: 44px; }

    /* Section-level CTAs that sit in a centered row */
    .section-pad .row.justify-content-center > .btn,
    .section-pad .row.d-flex.justify-content-center > .btn { width: 100%; }

    /* Hero stats — 3-up, compact, all left-aligned */
    .hero-stats {
        gap: .5rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        justify-content: flex-start;
    }
    .hero-stats > div { flex: 1; text-align: left; }
    .hero-stats .stat-num { font-size: 1.15rem; }
    .hero-stats .stat-label { font-size: .68rem; margin-top: .25rem; }

    /* Announcement bar — on phones it sits BELOW the navbar (between nav and
       hero), contact details hidden, compact */
    .site-header { display: flex; flex-direction: column; }
    .site-header .acuk-navbar-wrap { order: 1; }
    .site-header .acuk-topbar { order: 2; }
    .acuk-topbar { font-size: .78rem; }
    .acuk-topbar .container { padding-left: 1rem; padding-right: 1rem; }
    .acuk-topbar p { line-height: 1.35; }
    .acuk-topbar .col-md-7 { padding: 0; }

    /* Feature strip — horizontal scroll: ~2 items visible with a peek of
       the 3rd so it's obvious you can swipe for the 3rd and 4th */
    #ribbon-caption .row { margin-left: 0; margin-right: 0; }
    #ribbon-caption .col-md-12.feature-strip {
        padding: .85rem .6rem !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .4rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #ribbon-caption .col-md-12.feature-strip::-webkit-scrollbar { display: none; }
    .feature-strip-item {
        flex: 0 0 43%;
        scroll-snap-align: start;
        align-items: center;
        text-align: left !important;
        gap: .55rem;
        padding: .5rem .55rem !important;
    }
    .feature-strip-item h5 { font-size: .78rem; line-height: 1.22; }
    .feature-icon-circle { width: 40px; height: 40px; font-size: 1rem; }

    /* Cards — trim the generous desktop padding */
    .modern-card .p-4 { padding: 1.25rem !important; }
    .course-card-img { height: 190px; }

    /* Course cards — horizontal swiper on phones (like the feature strip):
       ~1 card fully in view with the next one peeking. */
    .card-scroller {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding: 0 .75rem .5rem;
        scroll-snap-type: x proximity;
        scroll-padding-left: .75rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .card-scroller::-webkit-scrollbar { display: none; }
    .card-scroller > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    .card-scroller .pillar-card { padding: 1.5rem; }
    .card-scroller .pillar-card li { font-size: .9rem; }
    .path-card { padding: 1.75rem 1.35rem; }
    .path-card .icon-circle { width: 54px; height: 54px; margin-bottom: 1rem; font-size: 1.25rem; }
    .testimonial-card { padding: 1.75rem 1.25rem; }
    .testimonial-quote { font-size: 1rem; line-height: 1.6; }
    .testimonial-avatar { width: 68px; height: 68px; }

    /* Kill oversized horizontal padding that squeezes copy on small screens */
    .section-pad .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Practical Work Experience / Why Choose Us split images */
    .bg-acuk-light-orange .container .pr-md-4 { padding-right: 0 !important; }

    /* Footer — link columns sit two-up, gallery as a compact 3-wide grid */
    .acuk-footer.section-pad { padding: 3rem 0 2.25rem; }
    .footer-links h5 { font-size: .9rem; margin-bottom: .7rem; }
    .footer-links .nav-link { font-size: .86rem; padding: .28rem 0; }
    .footer-gallery { gap: .35rem !important; }
    .footer-gallery img { width: calc(33.333% - .24rem) !important; height: 54px !important; }
    .acuk-footer.py-4 .row { flex-wrap: nowrap; }
    .acuk-footer.py-4 .small { font-size: .7rem; line-height: 1.3; }
    .acuk-footer .footer-social { gap: 0; justify-content: space-between; width: 100%; }
    .acuk-footer .footer-social a { width: 28px; height: 28px; margin: 0; }
    .acuk-footer .footer-social a i { font-size: .78rem; }

    /* "Why Choose Us" — collapse after the first paragraph, Read more toggle */
    .wcu-rest { display: none; }
    .wcu-toggle-cb:checked ~ .wcu-rest { display: block; }
    .wcu-toggle {
        display: inline-block;
        margin-top: .35rem;
        color: var(--acuk-blue);
        font-weight: 800;
        font-size: .92rem;
        cursor: pointer;
        user-select: none;
    }
    .wcu-toggle::after { content: 'Read more \0025be'; }
    .wcu-toggle-cb:checked ~ .wcu-toggle::after { content: 'Read less \0025b4'; }
    .wcu-toggle-cb:focus ~ .wcu-toggle { text-decoration: underline; }

    h1, h2, h3, h4 { letter-spacing: -0.01em; }
    .section-subtext { font-size: 1rem; }
}

/* ---- Very small phones ------------------------------------------------- */
@media (max-width: 359.98px) {
    #hero-section h1 { font-size: 1.7rem; }
    .hero-stats .stat-num { font-size: 1rem; }
    .hero-stats .stat-label { font-size: .62rem; }
}