/* =====================================================================
   RautingTech — MOBILE-FIRST OVERHAUL
   Loaded AFTER style.css so it cascades last.
   Applies to: index.html, ai-native-apps.html, consulting.html, discover.html
   Scope: <= 768px (phones + small tablets).
   Goal: feels like a modern webapp on mobile, not a shrunken brochure.
   ===================================================================== */

/* iOS dynamic-viewport variable, populated by mobile-enhance.js.
   Fallback to plain vh for browsers that haven't set --vh yet. */
:root {
    --vh: 1vh;
    --rt-bar-h: 0px;
    --rt-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Page background that respects the device, so the sticky bar's blur
   has something to blur against on light pages. */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

@media (max-width: 768px) {

    /* ============================================================
       1. Type & rhythm — fluid clamp() ramp, not breakpoint patches
       ============================================================ */
    body {
        font-size: 16px;
        line-height: 1.6;
        -webkit-tap-highlight-color: transparent;
    }
    h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); letter-spacing: -1.1px; line-height: 1.08; }
    h2 { font-size: clamp(1.55rem, 6.2vw, 2rem); letter-spacing: -0.6px; line-height: 1.15; }
    h3 { font-size: clamp(1.15rem, 4.6vw, 1.35rem); letter-spacing: -0.3px; line-height: 1.25; }
    h4 { font-size: 1.02rem; letter-spacing: -0.2px; line-height: 1.3; }
    p  { font-size: 0.96rem; line-height: 1.6; }

    /* Section header parity */
    .section-header h2 { font-size: clamp(1.55rem, 6.2vw, 2rem); }
    .section-header p  { font-size: 0.95rem; }

    /* Add bottom padding so the sticky CTA bar never covers content */
    body.rt-has-stickybar { padding-bottom: calc(var(--rt-bar-h) + var(--rt-safe-bottom) + 12px); }

    /* ============================================================
       2. Navigation — sheet-style drawer (upgrade from slide-down)
       ============================================================ */
    .navbar {
        padding: 0.65rem 1rem;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Larger hamburger target for thumb reach */
    .nav-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .on-dark .nav-toggle,
    .hero-light + * .nav-toggle { border-color: rgba(255,255,255,0.18); }

    /* Scrim behind the open drawer */
    .navbar::after {
        content: "";
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(8, 12, 18, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 90;
    }
    .navbar.nav-open::after { opacity: 1; pointer-events: auto; }

    /* Drawer itself — slides DOWN from the navbar, rounded bottom corners,
       fills enough of the viewport to feel like a sheet, not a strip. */
    .navbar .nav-links {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1.1rem 1.4rem;
        padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border: none;
        border-bottom-left-radius: 22px;
        border-bottom-right-radius: 22px;
        box-shadow: 0 30px 60px rgba(10, 14, 20, 0.18);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            max-height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 0.22s ease,
            transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
            padding 0.2s ease;
        z-index: 95;
    }
    .navbar.nav-open .nav-links {
        max-height: calc(var(--vh, 1vh) * 100 - 56px - 24px);
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        transform: translateY(0);
        -webkit-overflow-scrolling: touch;
    }

    /* Each nav item — large, app-style row */
    .navbar .nav-links li { display: block !important; width: 100%; }
    .navbar .nav-links li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.05rem 0.4rem;
        font-size: 1.04rem;
        font-weight: 600;
        color: var(--ink);
        border-bottom: 1px solid rgba(10, 14, 20, 0.06);
        min-height: 52px;
        line-height: 1.4;
    }
    .navbar .nav-links li a::after {
        content: "›";
        color: var(--slate-300);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1;
    }
    .navbar .nav-links li:last-child a { border-bottom: none; }
    .navbar .nav-links a.nav-cta {
        margin-top: 0.9rem;
        background: var(--primary);
        color: var(--ink);
        border-radius: 12px;
        padding: 1rem 1.2rem !important;
        font-size: 1.04rem !important;
        font-weight: 700;
        justify-content: center;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0, 217, 70, 0.28);
    }
    .navbar .nav-links a.nav-cta::after { display: none; }

    /* ============================================================
       3. Hero — restructured mobile-first
       ============================================================ */
    .hero-light {
        padding: 2.4rem 1.1rem 2.8rem;
        padding-left: max(1.1rem, env(safe-area-inset-left));
        padding-right: max(1.1rem, env(safe-area-inset-right));
        min-height: auto;
    }
    .hero-light-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    /* The grid children are .hero-light-content and .hero-light-stage.
       Content must lead on mobile — the headline is the first thing a
       visitor should read, not the decorative prism + plan trigger.
       (Setting order on .hero-light-visual was inert: it's nested inside
       the stage, not a direct grid child, so the stage kept order:0 and
       rendered above the headline.) */
    .hero-light-content { order: 0; }
    .hero-light-stage   { order: 1; gap: 0.25rem; }
    .hero-light-visual {
        max-width: 300px;
        margin: 0.4rem auto 0;
        opacity: 0.7;
    }
    /* The plan invite reads as the "try it" moment after the pitch —
       give it room and let it sit on its own, not crowded under the SVG. */
    .hero-light-stage .hero-plan { margin-top: 0.4rem; }
    .hero-light .hero-eyebrow {
        font-size: 0.68rem;
        padding: 0.36rem 0.85rem;
        letter-spacing: 1.6px;
        margin-bottom: 1.1rem;
    }
    .hero-light h1 {
        font-size: clamp(2rem, 8.5vw, 2.55rem);
        letter-spacing: -1.1px;
        line-height: 1.08;
        margin-bottom: 1rem;
    }
    .hero-light .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        color: var(--slate-600);
    }
    .hero-light .hero-cta {
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.4rem;
    }
    .hero-light .hero-cta .cta-button { width: 100%; }
    .hero-light .hero-microproof {
        font-size: 0.78rem;
        gap: 0.55rem;
        line-height: 1.45;
        color: var(--slate-500);
    }

    /* Plan trigger — feels like an action card, not a tertiary link */
    .hero-plan { margin-top: 1.25rem; margin-bottom: 1.2rem; }
    .plan-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 0.95rem 1.1rem;
        font-size: 0.96rem;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
    }
    .plan-form input {
        font-size: 1rem;
        padding: 0.95rem 1rem;
        border-radius: 12px;
        min-height: 52px;
    }
    .plan-submit {
        font-size: 0.96rem;
        padding: 0.95rem 1.1rem;
        min-height: 52px;
        border-radius: 12px;
    }

    /* Tap targets — primary buttons at least 52px on mobile */
    .cta-button {
        min-height: 52px;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 0.98rem;
        border-radius: 12px;
    }

    /* ============================================================
       4. Card carousels — horizontal scroll-snap on mobile
       Shapes-grid and showcase-grid become swipeable card stacks
       instead of vertical lists. The peek of the next card hints
       "there's more →" without needing dots/arrows.
       ============================================================ */
    .shapes-section { padding: 4rem 0 4.2rem; }
    .shapes-section .section-header { padding: 0 1.2rem; }
    .shapes-grid {
        grid-template-columns: none;
        display: flex;
        gap: 0.9rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.2rem;
        padding: 0.5rem 1.2rem 1.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shapes-grid::-webkit-scrollbar { display: none; }
    .shapes-section .shape-card {
        flex: 0 0 82vw;
        max-width: 320px;
        scroll-snap-align: start;
        padding: 1.7rem 1.4rem 1.6rem;
        border-radius: 18px;
    }
    .shapes-section .shape-card h3 { font-size: 1.32rem; }
    .shapes-section .shape-price { font-size: 0.92rem; margin-bottom: 0.9rem; }
    .shapes-section .shape-card p { font-size: 0.9rem; line-height: 1.55; }
    .shapes-section .shape-num { margin-bottom: 0.9rem; }

    /* Scroll-edge fade indicator on right side of carousel */
    .shapes-section { position: relative; }
    .shapes-section::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 40px;
        background: linear-gradient(90deg, rgba(10,14,20,0) 0%, rgba(10,14,20,1) 100%);
        pointer-events: none;
        z-index: 2;
        opacity: 0.6;
    }

    /* Samples showcase — same carousel pattern, light theme */
    .samples-showcase { padding: 4rem 0 4.5rem; }
    .samples-showcase .section-header { padding: 0 1.2rem; }
    .showcase-grid {
        grid-template-columns: none;
        display: flex;
        gap: 0.9rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.2rem;
        padding: 0.5rem 1.2rem 1.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .showcase-grid::-webkit-scrollbar { display: none; }
    .showcase-tile {
        flex: 0 0 84vw;
        max-width: 330px;
        scroll-snap-align: start;
        border-radius: 18px;
    }
    .showcase-img { aspect-ratio: 16 / 10; }
    .showcase-body { padding: 1.3rem 1.25rem 1.4rem; }
    .showcase-body h3 { font-size: 1.18rem; }
    .showcase-body p { font-size: 0.88rem; }
    .showcase-cta-row { padding: 0 1.2rem; margin-top: 1.6rem; }
    .showcase-cta-row .cta-button { width: 100%; max-width: 360px; }

    /* ============================================================
       5. Vertical card sections — full-bleed look on mobile
       ============================================================ */
    .beyond-section { padding: 3.5rem 1.1rem 4rem; }
    .beyond-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .beyond-card {
        padding: 1.5rem 1.3rem;
        border-radius: 16px;
    }
    .beyond-card h3 { font-size: 1.15rem; }
    .beyond-card p { font-size: 0.92rem; line-height: 1.55; }

    /* Flow steps — clean 2x2 grid, larger numbers */
    .flow-section { padding: 3.5rem 1.1rem 4rem; }
    .flow-steps {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .flow-step {
        padding: 1.3rem 1.1rem;
        border-radius: 14px;
    }
    .flow-step .flow-num {
        font-size: 0.62rem;
        letter-spacing: 1.6px;
        margin-bottom: 0.55rem;
    }
    .flow-step h4 { font-size: 0.98rem; margin-bottom: 0.4rem; }
    .flow-step p  { font-size: 0.82rem; line-height: 1.5; }

    /* Outcomes — stat rows on mobile. Three cramped fine-print columns
       at 390px read as a footnote; full-width rows with a prominent stat
       badge read as proof. num spans both text rows via grid-areas. */
    .outcomes-section { padding: 3.6rem 1.1rem 4rem; }
    .outcomes-grid,
    .outcomes-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.7rem;
    }
    .outcome {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "num label"
            "num desc";
        align-items: center;
        column-gap: 1.15rem;
        row-gap: 0.15rem;
        text-align: left;
        padding: 1.25rem 1.3rem;
        border-radius: 16px;
    }
    .outcome-num {
        grid-area: num;
        align-self: center;
        font-size: 1.95rem;
        line-height: 1;
        min-width: 3.2rem;
    }
    .outcome-label { grid-area: label; font-size: 0.92rem; letter-spacing: 0.2px; }
    .outcome-desc  { grid-area: desc;  font-size: 0.84rem; line-height: 1.5; margin-top: 0.15rem; }

    /* ============================================================
       6. Contact form — large taps, single column, sticky-friendly
       ============================================================ */
    .contact { padding: 3.6rem 1.1rem 4rem; }
    .contact h2 { font-size: clamp(1.55rem, 6.2vw, 1.9rem); }
    .contact-sub { font-size: 0.94rem; margin-bottom: 1.5rem; }
    .form-row { grid-template-columns: 1fr; gap: 0.65rem; }
    .contact-form { gap: 0.65rem; }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 1rem;
        padding: 0.95rem 1.05rem;
        min-height: 52px;
        border-radius: 12px;
    }
    .contact-form textarea { min-height: 130px; }
    .contact-form .cta-button { width: 100%; min-height: 56px; font-size: 1rem; }

    /* ============================================================
       7. Footer — compact, single-column, larger taps
       ============================================================ */
    footer { padding: 3rem 1.1rem 1.6rem; }
    .footer-multi {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        padding-bottom: 1.6rem;
    }
    .footer-brand { grid-column: span 1; }
    .footer-brand p { font-size: 0.86rem; line-height: 1.55; }
    .footer-col h5 { font-size: 0.74rem; letter-spacing: 1.6px; margin-bottom: 0.85rem; }
    .footer-col ul { gap: 0.55rem; }
    .footer-col a {
        font-size: 0.92rem;
        padding: 0.35rem 0;
        display: inline-block;
        line-height: 1.4;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        margin-top: 1rem;
        padding-top: 1.4rem;
    }
    .footer-legal { gap: 1rem; flex-wrap: wrap; }
    .footer-legal a { font-size: 0.78rem; padding: 0.3rem 0; display: inline-block; }

    /* ============================================================
       8. AI-Native Apps — shape-card spectrum (page-scoped grid)
       ============================================================ */
    .spectrum-grid {
        grid-template-columns: none !important;
        display: flex !important;
        gap: 0.9rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1.2rem;
        padding: 0.5rem 1.2rem 1.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -1.1rem;
        margin-right: -1.1rem;
    }
    .spectrum-grid::-webkit-scrollbar { display: none; }
    .spectrum-grid .shape-card {
        flex: 0 0 84vw;
        max-width: 330px;
        scroll-snap-align: start;
        border-radius: 18px;
        padding: 1.8rem 1.5rem 1.7rem;
    }
    .spectrum-rail {
        font-size: 0.62rem;
        letter-spacing: 1.4px;
        margin: 0.8rem 1.2rem 1rem;
    }

    /* ============================================================
       9. Discover chat panel — full-width feel, big inputs
       ============================================================ */
    .discover-main { padding: 3rem 1.1rem 6rem; }
    .discover-eyebrow { font-size: 0.66rem; }
    .discover-header h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
    .discover-lead { font-size: 0.96rem; line-height: 1.6; }
    .discover-chat {
        padding: 1.2rem 1.1rem 1rem;
        border-radius: 18px;
        margin-left: -0.3rem;
        margin-right: -0.3rem;
    }
    .chat-thread { max-height: 56vh; gap: 0.7rem; }
    .msg {
        font-size: 0.94rem;
        line-height: 1.5;
        padding: 0.8rem 1rem;
        max-width: 92%;
    }
    .chat-input {
        flex-direction: column;
        gap: 0.6rem;
    }
    .chat-input input,
    .chat-input textarea {
        font-size: 1rem;
        padding: 0.95rem 1rem;
        min-height: 52px;
        border-radius: 12px;
        width: 100%;
    }
    .chat-input button {
        min-height: 52px;
        font-size: 1rem;
        width: 100%;
        border-radius: 12px;
    }

    /* ============================================================
       10. Sticky bottom CTA bar (mobile only)
       ============================================================ */
    .rt-stickybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        padding: 10px 14px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(18px) saturate(1.5);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        border-top: 1px solid rgba(10, 14, 20, 0.08);
        box-shadow: 0 -8px 28px rgba(10, 14, 20, 0.08);
        transform: translateY(110%);
        transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .rt-stickybar.is-visible { transform: translateY(0); }
    .rt-stickybar.is-dark {
        background: rgba(10, 14, 20, 0.92);
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.3);
    }
    .rt-stickybar-inner {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        max-width: 720px;
        margin: 0 auto;
    }
    .rt-stickybar-label {
        flex: 1 1 auto;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--slate-700);
        letter-spacing: 0.1px;
    }
    .rt-stickybar.is-dark .rt-stickybar-label { color: var(--slate-200); }
    .rt-stickybar-label small {
        display: block;
        font-size: 0.64rem;
        font-weight: 500;
        color: var(--slate-500);
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-bottom: 1px;
    }
    .rt-stickybar.is-dark .rt-stickybar-label small { color: rgba(255, 255, 255, 0.45); }
    .rt-stickybar-cta {
        flex: 0 0 auto;
        background: var(--primary);
        color: var(--ink);
        font-weight: 700;
        font-size: 0.92rem;
        padding: 0.78rem 1.15rem;
        border-radius: 10px;
        text-decoration: none;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        box-shadow: 0 4px 12px rgba(0, 217, 70, 0.32);
        white-space: nowrap;
    }
    .rt-stickybar-cta:active { transform: scale(0.97); }

    /* Push the site-agent panel above the sticky bar so they don't collide */
    body.rt-has-stickybar .rt-fab,
    body.rt-has-stickybar .rt-fab-wrap {
        bottom: calc(var(--rt-bar-h) + var(--rt-safe-bottom) + 14px) !important;
    }

    /* ============================================================
       11. Scroll-reveal animations
       Cards rise and fade as they enter the viewport.
       Default: visible. The hidden state only applies once JS has
       confirmed IntersectionObserver is available AND added the
       `rt-revealing` class to <body>. That way if JS fails, never
       runs, or the IO doesn't fire (e.g. full-page screenshot
       capture), content stays visible instead of stuck invisible.
       ============================================================ */
    body.rt-revealing .rt-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: opacity, transform;
    }
    body.rt-revealing .rt-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ============================================================
       12. Section header rhythm
       ============================================================ */
    .section-header { margin-bottom: 1.8rem; }
    .section-label {
        font-size: 0.66rem;
        letter-spacing: 1.8px;
        margin-bottom: 0.7rem;
        display: inline-block;
    }

    /* ============================================================
       13. Tactile polish — the difference between "responsive" and
       "feels native". Press states give physical feedback on tap;
       manipulation kills the legacy 300ms delay; overscroll
       containment stops the nav drawer from scroll-chaining the page.
       ============================================================ */
    a, button, .cta-button, .shape-card, .showcase-tile, .beyond-card,
    .nav-toggle, .plan-trigger, .plan-submit, .rt-stickybar-cta {
        touch-action: manipulation;
    }

    /* Buttons & primary CTAs: quick, confident press */
    .cta-button { transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease; }
    .cta-button:active { transform: scale(0.975); }

    /* Cards: a gentle, weighty press — scale + shadow pull-in.
       Links inside the card shouldn't double up, so target the card itself. */
    .shape-card, .showcase-tile, .beyond-card {
        transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .shape-card:active, .showcase-tile:active, .beyond-card:active {
        transform: scale(0.985);
    }

    /* Nav drawer rows: highlight the row under the thumb */
    .navbar .nav-links li a:active { background: rgba(0, 217, 70, 0.06); }
    .navbar .nav-links a.nav-cta:active { transform: scale(0.98); }

    /* Plan trigger card press */
    .plan-trigger { transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease; }
    .plan-trigger:active { transform: scale(0.985); }

    /* Keep the open nav drawer's scroll from chaining to the page behind it */
    .navbar.nav-open .nav-links { overscroll-behavior: contain; }

    /* Crisper text rendering on mobile webkit */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* =====================================================================
   Very small phones — iPhone SE and similar (<= 380px)
   ===================================================================== */
@media (max-width: 380px) {
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.45rem; }
    .hero-light h1 { font-size: 1.85rem; letter-spacing: -0.9px; }
    .section-header h2 { font-size: 1.4rem; }
    .nav-content { gap: 0.5rem; }
    .logo-section svg { width: 140px; height: 22px; }
    .shapes-section .shape-card,
    .showcase-tile,
    .spectrum-grid .shape-card { flex: 0 0 88vw; }
    /* Outcomes already stack as 1-col stat rows from the base mobile rules;
       just tighten the badge a touch on the narrowest phones. */
    .outcome { padding: 1.15rem 1.1rem; column-gap: 0.95rem; }
    .outcome-num { font-size: 1.75rem; min-width: 2.9rem; }
    .flow-steps { grid-template-columns: 1fr; }
    .rt-stickybar-cta { padding: 0.75rem 0.95rem; font-size: 0.88rem; }
    .rt-stickybar-label { font-size: 0.74rem; }
}

/* =====================================================================
   Reduced-motion preference — strip transitions and animations
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rt-reveal,
    .rt-reveal.is-visible,
    .rt-stickybar,
    .navbar .nav-links,
    .shape-card,
    .showcase-tile {
        transition: none !important;
        animation: none !important;
    }
    .rt-reveal {
        opacity: 1;
        transform: none;
    }
}