/* ==========================================================
   Mobile-only design enhancements.
   Every rule here is scoped under @media (max-width: 768px) so
   desktop layouts are never touched.
   ========================================================== */

@media (max-width: 768px) {

    /* Hero heading — the inline clamp()'s minimum (2.6rem) is what actually
       renders on every phone/small-tablet width (its vw-scaling term only
       overtakes that floor above ~800px viewports), so this override reads
       as one flat, predictable size here. Reduced ~10% so the heading reads
       as confident rather than dominating the whole viewport. The matching
       "Building Websites." / "Expanding Reach." two-line break (instead of
       wrapping onto three) comes from the nowrap span already wrapping each
       line's words in home.blade.php — this size reduction is what keeps
       "Expanding Reach." comfortably fitting on its own line at this width. */
    #hero-heading {
        font-size: 2.35rem !important;
    }

    /* Mobile hero laptop — continuous idle float + subtle tilt + a breathing
       ground shadow, all one animation applied to the outer
       #hero-device-mobile-frame wrapper (not #hero-device-mobile itself,
       which GSAP's entrance tween in home.blade.php already owns the
       transform of — the frame/device split in the markup exists
       specifically so this animation and GSAP's inline transform never
       land on the same element). translateY mirrors 0px → -8px → 0px →
       +5px → 0px; rotate swings a very subtle -2deg → 0 → +2deg → 0 → -2deg
       in sync with it (both in one `transform`, since two separate
       `animation`s can't both drive the same property without one silently
       overriding the other). The box-shadow grows softer/wider as the
       laptop rises and tightens as it settles, reinforcing the sense that
       it's actually floating rather than just sliding up and down. */
    #hero-device-mobile-frame {
        animation: hero-mobile-laptop-float 9s ease-in-out infinite;
    }
    @keyframes hero-mobile-laptop-float {
        0%, 100% {
            transform: translateY(0) rotate(-2deg);
            box-shadow: 0 24px 32px -6px rgba(11,15,23,0.45);
        }
        25% {
            transform: translateY(-8px) rotate(0deg);
            box-shadow: 0 32px 46px -4px rgba(11,15,23,0.32);
        }
        50% {
            transform: translateY(0) rotate(2deg);
            box-shadow: 0 24px 32px -6px rgba(11,15,23,0.45);
        }
        75% {
            transform: translateY(5px) rotate(0deg);
            box-shadow: 0 18px 22px -8px rgba(11,15,23,0.5);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        #hero-device-mobile-frame { animation: none; box-shadow: 0 24px 32px -6px rgba(11,15,23,0.45); }
    }

    /* Rotating halo behind the mobile laptop — reuses the `hero-halo-spin`
       keyframe already defined globally (layouts/app.blade.php, driving the
       desktop #hero-halo), just slower (40s vs desktop's 55s) and on the new
       mobile-only ring element. */
    #hero-halo-mobile-ring {
        animation: hero-halo-spin 40s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        #hero-halo-mobile-ring { animation: none; }
    }

    /* Gold light trail behind the mobile laptop — a slow orbiting arc,
       mirroring desktop's #hero-orbit (see that rule's own comments in
       layouts/app.blade.php for the general technique) but at a much
       slower 25s (desktop is 9s) and with only two stroke layers instead
       of desktop's three. stroke-dashoffset animates the dash segment
       around the fixed ellipse path (not a transform:rotate on the shape
       itself, which would rigidly tilt/warp this non-circular ellipse
       through the spin instead of sliding smoothly around it). */
    #hero-trail-mobile-bloom, #hero-trail-mobile-core {
        animation: hero-trail-mobile-travel 25s linear infinite;
    }
    #hero-trail-mobile-bloom {
        opacity: .55;
        filter: blur(4px) drop-shadow(0 0 10px rgba(255,140,20,.55));
    }
    #hero-trail-mobile-core {
        filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(255,180,60,.75));
    }
    @keyframes hero-trail-mobile-travel {
        from { stroke-dashoffset: 0; }
        to   { stroke-dashoffset: -1014; }
    }
    @media (prefers-reduced-motion: reduce) {
        #hero-trail-mobile-bloom, #hero-trail-mobile-core { animation: none; }
    }

    /* "Who We Are" mosaic — taller box + larger background scale so the
       "Building Websites. Expanding Reach." text baked into the source
       photo doesn't get cropped/overlapping across the sliced cells. */
    #about-mosaic {
        min-height: 480px !important;
    }
    #about-mosaic .mosaic-panel {
        background-size: 340% 230% !important;
    }

    /* Caption backdrop — push the gradient higher and darker so the quote
       always sits on a solid dark area instead of a busy image cell. */
    #about-mosaic-fade {
        background: linear-gradient(to top, rgba(17,29,51,0.97) 0%, rgba(17,29,51,0.85) 38%, rgba(17,29,51,0.25) 70%, transparent 100%) !important;
    }
    #about-mosaic-quote {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }
    #about-mosaic-caption {
        padding: 22px 18px 26px !important;
    }

    /* Breathing room between the subtitle, mosaic, and Mission/Vision cards */
    #about-subtitle {
        margin-bottom: 0.5rem !important;
    }
    #about-mosaic-wrap {
        margin-bottom: 4px !important;
    }
    #about-mosaic-grid {
        gap: 2.5rem !important;
    }

    /* Tighten the gap between the subtitle and the mosaic image */
    #about-intro {
        margin-bottom: 2rem !important;
    }

    /* Mission/Vision icon circles — bigger with a colored ring accent so
       they read as intentional rather than small/flat against the cards */
    #mission-icon, #vision-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Premium icon badge — circular glass container (blurred backdrop over
       the arc/particles/photo layers behind it), a thin border, and a
       pulsing gold/teal glow. The glyph itself gets a slow, gentle rotate
       sway (not the badge/ring — a rotating ring would just look static). */
    #mission-icon, #vision-icon {
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
    }
    #mission-icon {
        width: 56px !important;
        height: 56px !important;
        border: 1.5px solid rgba(201,168,76,0.4) !important;
        border-radius: 999px !important;
        background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0.05) 100%);
        animation: about-icon-pulse-gold 2.6s ease-in-out infinite;
    }
    #vision-icon {
        width: 56px !important;
        height: 56px !important;
        border: 1.5px solid rgba(42,157,143,0.45) !important;
        border-radius: 999px !important;
        background: radial-gradient(circle, rgba(42,157,143,0.2) 0%, rgba(42,157,143,0.06) 100%);
        animation: about-icon-pulse-teal 2.6s ease-in-out infinite;
    }
    @keyframes about-icon-pulse-gold {
        0%, 100% { box-shadow: 0 0 0 4px rgba(201,168,76,0.08), 0 0 12px 1px rgba(201,168,76,0.15); }
        50%      { box-shadow: 0 0 0 6px rgba(201,168,76,0.16), 0 0 22px 6px rgba(201,168,76,0.4); }
    }
    @keyframes about-icon-pulse-teal {
        0%, 100% { box-shadow: 0 0 0 4px rgba(42,157,143,0.08), 0 0 12px 1px rgba(42,157,143,0.18); }
        50%      { box-shadow: 0 0 0 6px rgba(42,157,143,0.18), 0 0 22px 6px rgba(42,157,143,0.45); }
    }
    #mission-icon svg {
        animation: about-icon-sway 4s ease-in-out infinite;
        transform-origin: 50% 50%;
    }
    #vision-icon svg {
        animation: about-icon-sway 4s ease-in-out infinite 0.3s;
        transform-origin: 50% 50%;
    }
    @keyframes about-icon-sway {
        0%, 100% { transform: rotate(-6deg); }
        50%      { transform: rotate(6deg); }
    }
    @media (prefers-reduced-motion: reduce) {
        #mission-icon, #vision-icon { animation: none; }
        #mission-icon svg, #vision-icon svg { animation: none; }
    }

    /* Each menu item is its own glass card now (see .mobile-menu-link's
       glass-highlight rule further down), spaced apart with a real gap in
       the markup instead of a border-bottom divider between them — a
       divider line reads as a continuous list; a gap reads as separate
       cards, which is the point. */

    /* Get Started CTA — clearer separation from the links above it, and a
       stronger shadow so it doesn't look like it's clipping the panel edge.
       Pinned to the bottom of the full-screen menu (`mt-auto` in the
       markup), so margin-top no longer controls its distance from the links
       above — #mobile-menu-divider-cta (a real element now, not a ::before —
       see the comment on it in the markup for why) draws a line directly
       above the button instead, regardless of how much empty space
       `mt-auto` pushes in between. */
    #mobile-menu-cta {
        box-shadow: 0 10px 24px rgba(201,168,76,0.4) !important;
    }
    #mobile-menu-divider-cta {
        margin-bottom: 1.25rem !important;
    }
    #mobile-menu-links {
        padding-bottom: 16px !important;
    }

    /* Parallax dividers — background-attachment:fixed is broken/ignored on
       iOS (Safari and any other iOS browser, since they all run WebKit), so
       the dramatic bridge-photo dividers render flat there. Chrome on
       desktop/Android and DevTools mobile emulation handle fixed attachment
       fine, so this fallback is scoped to real iOS only via the
       `ios-fixed-broken` class mobile-design.js adds — everywhere else keeps
       the native fixed background, same as the footer.

       On iOS, mobile-design.js replaces the CSS background with a separate
       oversized `.ios-parallax-layer` div behind the text, translated via
       scroll-linked JS — a background-position pan can't decouple the photo
       from the text since both live in the same scrolling box, but a
       transformed layer can move at its own rate. */
    .ios-parallax-layer {
        position: absolute;
        inset: -48% 0;
        background-size: cover;
        background-repeat: no-repeat;
        will-change: transform;
        z-index: 0;
    }

    /* Hero ambient orbs — the radial gradients are tuned for large desktop
       canvases and read as almost invisible on small, bright phone screens.
       Boost intensity rather than position (repositioning risks clipping
       differently across phone sizes). */
    .hero-orb {
        filter: brightness(1.45) saturate(1.3);
        transform: scale(1.3);
    }

    /* Hero trust avatars — fade in as one flat block on every breakpoint via
       the existing GSAP heroTl; on mobile give them an individual pop-in
       stagger instead so the row feels alive. Triggered by mobile-design.js
       once heroTl reveals #hero-trust. */
    @keyframes hero-avatar-pop {
        0%   { transform: scale(0.3); opacity: 0; }
        60%  { transform: scale(1.15); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }
    #hero-avatars.avatars-pop > div {
        animation: hero-avatar-pop 0.45s cubic-bezier(.34,1.56,.64,1) both;
    }
    #hero-avatars.avatars-pop > div:nth-child(1) { animation-delay: 0s; }
    #hero-avatars.avatars-pop > div:nth-child(2) { animation-delay: 0.1s; }
    #hero-avatars.avatars-pop > div:nth-child(3) { animation-delay: 0.2s; }
    #hero-avatars.avatars-pop > div:nth-child(4) { animation-delay: 0.3s; }

    /* Hero primary CTA — its shimmer/glow only fires on :hover, which never
       triggers on touch, so on mobile the button just sits flat. Give it a
       passive autoplay shimmer (reusing the sitewide btn-shine keyframe) and
       a tap/active press-down on both hero buttons for touch feedback. */
    .hero-btn-primary::before {
        content: '';
        position: absolute;
        top: -50%; left: -80%;
        width: 48%; height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
        transform: skewX(-18deg);
        pointer-events: none;
        animation: btn-shine 3.2s ease-in-out infinite 1.2s;
    }
    .hero-btn-primary:active,
    .hero-btn-secondary:active {
        transform: scale(0.96);
    }

    /* Mobile nav dropdown — wow-factor pass: icon per link, dim backdrop
       behind the panel, and a staggered slide-in for the links/CTA when the
       menu opens. The backdrop element and menu-opening/is-visible classes
       are added by mobile-design.js. */
    /* Full-screen immersive takeover, not a floating dropdown card — this ID
       selector is what actually governs #mobile-menu's position/z-index
       (an ID always outranks the `fixed inset-0 z-50` Tailwind classes on
       the same element in the markup, regardless of source order), so the
       real fix for "make it full-screen" had to happen here, not just in
       the HTML class list. */
    #mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 50;
    }
    #mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(21,32,44,0.42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 45;
    }
    #mobile-menu-backdrop.is-visible {
        opacity: 1;
    }

    /* Bigger, scannable menu items — icon badge, then title + full
       description stacked beside it. Back to a row layout (icon + text),
       reversing the earlier flex-column-only pass, now that the icon is a
       proper premium badge rather than a small glyph competing with the
       text for attention. */
    #mobile-menu-links .mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        position: relative;
        overflow: hidden;
        background: rgba(255,255,255,0.045);
        border: 1px solid rgba(255,255,255,0.09);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    #mobile-menu-links .mobile-menu-link:hover {
        background: rgba(255,255,255,0.08) !important;
    }
    /* Glass highlight — a soft diagonal sheen across the top-left corner of
       each card, like light reflecting off glass. Very low opacity (this
       should read as a subtle premium detail, not an obvious visual
       effect) and z-index:0 so it sits behind the icon badge/text (both are
       already positioned via flex, so they paint above this automatically,
       but z-index makes that explicit and safe against future changes). */
    #mobile-menu-links .mobile-menu-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 45%);
        pointer-events: none;
    }
    #mobile-menu-links .mobile-menu-link > * {
        position: relative;
        z-index: 1;
    }

    /* Menu item typography — explicit values per the boss's own spec,
       rather than relying on Tailwind's closest utility (tracking-wide is
       0.025em, not the requested 0.03em; text-sm is already 14px so that
       one matched, but opacity:.7 (a literal element-opacity dim) is a
       different mechanism than the rgba-alpha color this used before). */
    .menu-item-title {
        font-weight: 700;
        letter-spacing: .03em;
    }
    .menu-item-desc {
        opacity: .7;
        font-size: 14px;
        color: #FFFFFF;
    }

    /* Premium icon badge — rounded (not a plain circle or square), a
       translucent gold-gradient fill for the "gold gradient" ask, and a
       frosted border + blur for "glass background", instead of the old
       thin thin flat-outline glyph with no background treatment at all. */
    .menu-icon-badge {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(201,168,76,.35) 0%, rgba(223,192,106,.15) 100%);
        border: 1px solid rgba(255,255,255,.18);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 4px 14px rgba(0,0,0,.25);
    }

    /* "Login" menu row — teal instead of the shared gold badge/card, so it
       reads as a distinct "your account" action rather than another
       marketing link (About/Services/etc.), matching desktop's #nav-login
       pill treatment. #mobile-menu-links-scoped to outrank the ID-scoped
       base .mobile-menu-link background rule above. */
    .menu-icon-badge--login {
        background: linear-gradient(135deg, rgba(42,157,143,.4) 0%, rgba(111,216,203,.18) 100%) !important;
        border-color: rgba(143,232,219,.3) !important;
    }
    #mobile-menu-links .mobile-menu-link--login {
        background: rgba(42,157,143,0.08) !important;
        border-color: rgba(42,157,143,0.4) !important;
    }
    #mobile-menu-links .mobile-menu-link--login:hover {
        background: rgba(42,157,143,0.16) !important;
    }

    /* The old CSS-keyframe stagger (nth-child animation-delay, 50ms apart,
       links + CTA only) is removed — replaced by a GSAP-driven stagger in
       mobile-design.js that covers the full open sequence (panel/blur, the
       header, all 5 links, then the CTA) at a consistent 60ms cadence, per
       the boss's own timeline. Keeping both would have meant two systems
       fighting over the same opacity/transform on the same elements. */

    /* Hamburger → X morph. menu-btn is already md:hidden (mobile/tablet
       only), so no extra media-query gating is needed for the button itself —
       this block just lives here to keep all mobile-only rules in one file. */
    #menu-btn {
        width: 24px;
        height: 24px;
    }
    #menu-btn .hamburger-bar {
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    }
    #menu-btn .hamburger-bar:nth-child(1) { top: 6px; }
    #menu-btn .hamburger-bar:nth-child(2) { top: 11px; }
    #menu-btn .hamburger-bar:nth-child(3) { top: 16px; }
    #menu-btn.is-open .hamburger-bar:nth-child(1) { top: 11px; transform: rotate(45deg); }
    #menu-btn.is-open .hamburger-bar:nth-child(2) { opacity: 0; }
    #menu-btn.is-open .hamburger-bar:nth-child(3) { top: 11px; transform: rotate(-45deg); }

    /* Sticky floating "Get Started" pill — surfaces the CTA while scrolling
       through content sections, hidden over the hero (which already has its
       own CTA) and over the contact section (which has the real form). */
    #mobile-sticky-cta {
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translate(-50%, 24px) scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.55s cubic-bezier(.34,1.56,.64,1);
        background: linear-gradient(135deg, #C9A84C 0%, #E6C878 50%, #C9A84C 100%);
        color: #15202C;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 14px 30px;
        border-radius: 999px;
        box-shadow: 0 10px 28px rgba(201,168,76,0.45);
        z-index: 39;
        white-space: nowrap;
    }
    #mobile-sticky-cta.is-visible {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        pointer-events: auto;
        animation: mobile-sticky-cta-idle-bounce 2.6s ease-in-out 0.6s infinite;
    }
    #mobile-sticky-cta:active {
        animation-play-state: paused;
        transform: translate(-50%, 0) scale(0.92) !important;
        transition: transform 0.15s ease;
    }
    @keyframes mobile-sticky-cta-idle-bounce {
        0%, 100% { transform: translate(-50%, 0) scale(1); }
        50%      { transform: translate(-50%, -6px) scale(1.03); }
    }
    /* Hide it while the dropdown menu is open so it doesn't peek through
       the dim backdrop. */
    body.mobile-menu-is-open #mobile-sticky-cta {
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* Top scroll-progress bar — mobile has no equivalent of the desktop
       #section-rail dot nav, so this gives scroll feedback in its place.
       Sits above the nav (z-index higher than #navbar) with a glow so it
       reads clearly against both light and dark section backgrounds. */
    #mobile-scroll-progress {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: rgba(47,58,69,0.10);
        z-index: 70;
    }
    #mobile-scroll-progress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #FFFFFF, #C9A84C);
        box-shadow: 0 0 10px rgba(201,168,76,0.85), 0 0 6px rgba(255,255,255,0.85);
        transition: width 0.12s linear;
    }

    /* Core Values / Services / Portfolio cards — their hover effects (image
       scale, shimmer sweep, arrow reveal) are :hover/group-hover driven and
       never fire on touch, so tapping a card currently gives zero feedback.
       Gold ring + press-down on :active gives touch users a response.
       Requires the touchstart-unlock listener in mobile-design.js for iOS
       Safari to actually trigger :active on non-link elements. */
    .value-card-outer:active .value-card,
    .services-card:active,
    .portfolio-card:active {
        transform: scale(0.97);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 0 0 2px rgba(201,168,76,0.45), 0 8px 20px rgba(21,32,44,0.12) !important;
    }

    /* Services card photos — blur-up placeholder while the lazy-loaded
       image fetches, instead of popping in abruptly on slower connections.
       .is-loaded is added by mobile-design.js once the image fires `load`. */
    .services-card img {
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.45s ease, filter 0.45s ease;
    }
    .services-card img.is-loaded {
        opacity: 1;
        filter: blur(0);
    }

    /* Section entrance bounce — a soft overshoot settle on each major
       section as it first scrolls into view, layered underneath the
       existing per-card GSAP reveals (which target the cards inside, not
       the section wrapper itself), giving scrolling a more tactile feel. */
    @keyframes mobile-section-bounce-in {
        0%   { opacity: 0; transform: translateY(36px) scale(0.98); }
        60%  { opacity: 1; transform: translateY(-5px) scale(1.004); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    #about.mobile-section-bounce-in,
    #services.mobile-section-bounce-in,
    #why.mobile-section-bounce-in,
    #plans.mobile-section-bounce-in,
    #portfolio.mobile-section-bounce-in,
    #partnership.mobile-section-bounce-in,
    #contact.mobile-section-bounce-in {
        animation: mobile-section-bounce-in 0.7s cubic-bezier(.22,1,.36,1) both;
    }

    /* Inner-card staggered reveal — pairs with the inner-card reveal JS.
       .mobile-reveal-pending is only ever added by JS right before the
       IntersectionObserver starts watching, so if JS fails to run the
       cards simply stay visible (no permanently-hidden content). */
    .mobile-reveal-pending {
        opacity: 0;
        transform: translateY(28px);
    }
    .mobile-reveal-in {
        animation: mobile-card-reveal-in 0.6s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes mobile-card-reveal-in {
        0%   { opacity: 0; transform: translateY(28px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* ── iOS "Liquid Glass" pass — targeted accents ──
       Frosted, translucent panels with larger continuous corner radii and a
       soft inner highlight border, applied to cards/buttons/nav only.
       Section backgrounds are left untouched. */

    .value-card,
    .services-card,
    .portfolio-card,
    .plan-card-panel {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(21,32,44,0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    }
    .value-card-photo,
    .services-card img {
        border-radius: 18px;
    }

    /* No rounded corners — it's full-screen now, not a floating card, so
       rounded corners would just leave odd gaps at the true screen edges. */
    #mobile-menu {
        border-radius: 0 !important;
    }
    #mobile-menu-cta,
    #mobile-sticky-cta {
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(201,168,76,0.85) 0%, rgba(230,200,120,0.85) 50%, rgba(201,168,76,0.85) 100%) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.45) !important;
    }
    .hero-btn-primary,
    .contact-submit-btn,
    .plan-cta-btn,
    #nav-cta {
        border-radius: 999px !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.4) !important;
    }
    .hero-btn-secondary {
        border-radius: 999px !important;
    }
    #svc-toggle-btn {
        border-radius: 999px !important;
        background: rgba(47,58,69,0.65) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* ── Liquid Glass pass 2 — extend to section panels, the floating
       navbar, and the Contact form, on top of the card/button accents
       already in place above. */

    #portfolio-panel {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(16px) saturate(120%);
        -webkit-backdrop-filter: blur(16px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
    }
    #why-quote-card .rounded-3xl {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
    }
    #why-feature-cards > div {
        background: rgba(255,255,255,0.82) !important;
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 20px !important;
    }

    /* Navbar grows more glassy + glowy the deeper you scroll. --nav-blur and
       --nav-glow are set continuously in mobile-design.js as a function of
       scroll progress (0 at top, 1 at bottom of page). Box-shadow is left
       out of the inherited transition list so it tracks scroll instantly
       instead of lagging half a second behind the live updates. */
    #nav-inner.nav-pill {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(var(--nav-blur, 22px)) saturate(125%) !important;
        -webkit-backdrop-filter: blur(var(--nav-blur, 22px)) saturate(125%) !important;
        box-shadow: 0 8px 36px rgba(47,58,69,0.16), 0 0 0 1px rgba(201,168,76,0.10), var(--nav-glow, 0 0 0 0 transparent) !important;
        transition: background 0.5s ease, border-radius 0.5s ease,
                    max-width 0.55s ease, border-color 0.5s ease,
                    height 0.4s ease, padding 0.4s ease !important;
    }

    #contact-form input,
    #contact-form textarea,
    #service-select-trigger {
        background: rgba(255,255,255,0.8) !important;
        backdrop-filter: blur(12px) saturate(120%);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        border-radius: 16px !important;
    }

    /* "Who We Are" Mission/Vision cards — dark glowing-photo redesign.
       Each card gets a background photo (set via the --photo custom
       property in the markup, so both cards can share one rule) faded
       into a dark gradient on the left so the copy stays readable, with
       a pill badge, colored underline, and inline keyword highlights
       (the .hl-accent spans are already in the markup for desktop too,
       but only colored here — desktop's plain paragraph is untouched). */
    .about-card {
        backdrop-filter: blur(14px) saturate(120%);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        border-radius: 24px !important;
        padding: 26px 24px !important;
        box-shadow: 0 10px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    /* Phase 8 — ambient glow behind each card. box-shadow isn't clipped by
       the card's own overflow:hidden (only descendant content is), so this
       reads as a soft radial-gradient-style halo bleeding out past the
       card edges without needing extra unclipped DOM elements. */
    /* Phase 17 — subtle gradient borders (gold on Mission, cyan/teal on
       Vision) instead of a flat single-color line. border-image doesn't
       cooperate with border-radius, so this uses the standard two-layer
       background-clip technique instead: one background layer clipped to
       the padding-box (the card's own fill), one clipped to the
       border-box (the gradient "border"), with a transparent real border
       to reserve the 1px ring between them. */
    .about-cards .about-card--mission {
        border: 1px solid transparent !important;
        background-image:
            linear-gradient(160deg, rgba(64,48,15,0.92) 0%, rgba(28,20,8,0.95) 45%, rgba(12,10,6,0.97) 100%),
            linear-gradient(135deg, rgba(201,168,76,0.55) 0%, rgba(230,200,120,0.2) 50%, rgba(201,168,76,0.55) 100%) !important;
        background-origin: border-box !important;
        background-clip: padding-box, border-box !important;
        box-shadow: 0 10px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 100px 24px rgba(201,168,76,0.1) !important;
    }
    .about-cards .about-card--vision {
        border: 1px solid transparent !important;
        background-image:
            linear-gradient(180deg, rgba(10,28,30,0.9) 0%, rgba(6,17,21,0.96) 100%),
            linear-gradient(135deg, rgba(42,157,143,0.55) 0%, rgba(111,216,203,0.2) 50%, rgba(42,157,143,0.55) 100%) !important;
        background-origin: border-box !important;
        background-clip: padding-box, border-box !important;
        box-shadow: 0 10px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 100px 24px rgba(42,157,143,0.1) !important;
    }
    .about-card > * {
        position: relative;
        z-index: 1;
    }

    /* Phase 18 — a soft light sweep crosses each card once every 12s.
       Idles off-screen left for most of the cycle, transits across in
       ~1.4s, then holds off-screen right until the loop restarts —
       clipped by the card's own overflow:hidden, same as the shine
       already used on .hero-btn-primary elsewhere on this page. */
    .about-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 45%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, transparent 100%);
        transform: skewX(-18deg);
        animation: about-card-light-sweep 12s ease-in-out infinite;
    }
    @keyframes about-card-light-sweep {
        0%, 80%  { left: -60%; }
        92%, 100% { left: 130%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .about-card::after { animation: none; display: none; }
    }
    /* Decorative-only background layer (Mission's bridge photo) — 15%
       opacity plus a screen blend so the photo's bright/golden highlights
       still read as an ambient glow against the dark card, instead of
       flattening into invisibility the way a plain low-opacity photo does. */
    .about-card-photo-bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        opacity: 0.15;
        mix-blend-mode: screen;
        background-image: var(--photo);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Golden arc (Mission) — a faint slow-rotating ring in the top-right
       corner. A *complete* ring (not a partial dashed arc) mostly cropped
       off-canvas by the card's own overflow:hidden, so it reads as a
       deliberate corner accent rather than a stray floating line. */
    /* Phase 10 — large gold arc, a full slow 360° rotation every 40s. */
    .about-card-arc {
        position: absolute !important;
        top: -90px !important;
        right: -90px !important;
        width: 220px !important;
        height: 220px !important;
        z-index: 0 !important;
        opacity: 0.15;
        animation: about-card-arc-spin 40s linear infinite;
    }
    @keyframes about-card-arc-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* Drifting particles — gold on Mission, teal on Vision (nth-child below).
       Decorative only: small, blurred, low-opacity dots that gently rise
       and fade, never fully opaque. */
    .about-card-particles {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }
    /* Phase 9 — each particle gets its own duration, drift direction, and
       opacity range (via custom properties feeding one shared keyframe)
       instead of all six just being time-shifted copies of each other. */
    .about-card-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        animation-name: about-card-particle-float;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: var(--dur, 7s);
    }
    .about-card-particles span:nth-child(1) { top: 15%; left: 66%; animation-delay: 0s;    --dur: 6s;   --dx: 5px;  --dy: -14px; --op-min: .25; --op-max: .8; }
    .about-card-particles span:nth-child(2) { top: 48%; left: 84%; animation-delay: 1.4s;  --dur: 9.5s; --dx: -7px; --dy: -22px; --op-min: .35; --op-max: .95; }
    .about-card-particles span:nth-child(3) { top: 72%; left: 56%; animation-delay: 2.8s;  --dur: 7.2s; --dx: 6px;  --dy: -10px; --op-min: .3;  --op-max: .75; }
    .about-card-particles span:nth-child(4) { top: 30%; left: 92%; animation-delay: 4.2s;  --dur: 5.4s; --dx: -4px; --dy: -18px; --op-min: .4;  --op-max: 1; }
    .about-card-particles span:nth-child(5) { top: 60%; left: 70%; animation-delay: 2.1s;  --dur: 8.3s; --dx: 5px;  --dy: -12px; --op-min: .28; --op-max: .85; }
    .about-card-particles span:nth-child(6) { top: 85%; left: 88%; animation-delay: 3.5s;  --dur: 6.6s; --dx: -6px; --dy: -16px; --op-min: .32; --op-max: .9; }
    @keyframes about-card-particle-float {
        0%, 100% { transform: translate(0, 0) scale(0.85); opacity: var(--op-min, 0.3); }
        50%      { transform: translate(var(--dx, 0), var(--dy, -16px)) scale(1); opacity: var(--op-max, 0.9); }
    }
    .about-cards .about-card--mission .about-card-particles span {
        background: #F2D98C;
        box-shadow: 0 0 6px 1px rgba(242,217,140,0.9);
    }
    .about-cards .about-card--vision .about-card-particles span {
        background: #8FE8DB;
        box-shadow: 0 0 6px 1px rgba(143,232,219,0.9);
    }

    /* Phase 9 (cont.) — a second particle layer in the space AROUND/between
       the two cards, not just inside each one. .about-cards itself has no
       overflow:hidden, so these are free to drift past the card edges. */
    .about-cards {
        position: relative;
    }
    .about-cards-ambient-particles {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .about-cards-ambient-particles span {
        position: absolute;
        border-radius: 50%;
        animation-name: about-card-particle-float;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    .about-cards-ambient-particles span:nth-child(1) { top: 2%;  left: 12%; width: 5px; height: 5px; background: #F2D98C; box-shadow: 0 0 6px 1px rgba(242,217,140,.8); animation-duration: 10s;  animation-delay: .5s; --dx: 6px;  --dy: -20px; --op-min: .2; --op-max: .6; }
    .about-cards-ambient-particles span:nth-child(2) { top: 46%; left: 6%;  width: 4px; height: 4px; background: #F2D98C; box-shadow: 0 0 5px 1px rgba(242,217,140,.8); animation-duration: 7.4s; animation-delay: 2.2s; --dx: -5px; --dy: -14px; --op-min: .25;--op-max: .7; }
    .about-cards-ambient-particles span:nth-child(3) { top: 92%; left: 15%; width: 5px; height: 5px; background: #8FE8DB; box-shadow: 0 0 6px 1px rgba(143,232,219,.8); animation-duration: 9s;   animation-delay: 1.1s; --dx: 5px;  --dy: -18px; --op-min: .22;--op-max: .65; }
    .about-cards-ambient-particles span:nth-child(4) { top: 55%; left: 94%; width: 4px; height: 4px; background: #8FE8DB; box-shadow: 0 0 5px 1px rgba(143,232,219,.8); animation-duration: 6.5s; animation-delay: 3.4s; --dx: -6px; --dy: -12px; --op-min: .25;--op-max: .7; }
    .about-cards-ambient-particles span:nth-child(5) { top: 12%; left: 90%; width: 5px; height: 5px; background: #F2D98C; box-shadow: 0 0 6px 1px rgba(242,217,140,.8); animation-duration: 8.2s; animation-delay: 0s;   --dx: -4px; --dy: -16px; --op-min: .2; --op-max: .6; }

    /* Mountain range + winding road (Vision) — no matching photo asset
       exists in public/image, so this is hand-drawn SVG. Anchored to the
       bottom of the card as a shallow band (not inset:0/cover) so it reads
       as a distant horizon silhouette instead of one giant zoomed-in peak. */
    .about-card-scenery {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: auto !important;
        height: 42% !important;
        z-index: 0 !important;
        opacity: 0.15;
    }

    /* Light beam off the tallest peak (~118/300 → ~39% from the left,
       matching .about-card-scenery's path), shining down from the top of
       the card. */
    .about-card-beam {
        position: absolute !important;
        top: 0 !important;
        left: 37% !important;
        width: 2px !important;
        height: 55% !important;
        z-index: 0 !important;
        opacity: 0.18;
        filter: blur(3px);
        background: linear-gradient(180deg, rgba(111,216,203,0.6) 0%, transparent 100%);
    }
    .about-card-badge {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 10px;
    }
    .about-cards .about-card--mission .about-card-badge {
        color: #DFC06A;
        border: 1px solid rgba(201,168,76,0.45);
        background: rgba(201,168,76,0.08);
    }
    .about-cards .about-card--vision .about-card-badge {
        color: #6FD8CB;
        border: 1px solid rgba(42,157,143,0.45);
        background: rgba(42,157,143,0.1);
    }
    .about-cards .about-card .card-title {
        color: #FFFFFF !important;
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em;
    }
    .about-cards .about-card .card-body {
        color: rgba(255,255,255,0.78) !important;
    }
    .about-card-underline {
        display: block;
        width: 42px;
        height: 3px;
        border-radius: 2px;
        margin: 8px 0 16px;
    }
    .about-cards .about-card--mission .about-card-underline {
        background: #C9A84C;
        box-shadow: 0 0 8px 1px rgba(201,168,76,0.6);
    }
    .about-cards .about-card--vision .about-card-underline {
        background: #2A9D8F;
        box-shadow: 0 0 8px 1px rgba(42,157,143,0.6);
    }
    .about-cards .about-card--mission .hl-accent { color: #DFC06A; font-weight: 700; }
    .about-cards .about-card--vision .hl-accent { color: #6FD8CB; font-weight: 700; }

    /* Mission/Vision CTA bar — the only "Get Started" surfaced in this
       section; #mobile-sticky-cta is suppressed while #about is in view
       (mobile-design.js) so it no longer overlaps this card/bar. */
    /* CTA bar — compact horizontal row (icon, text, button) per the
       reference mockup, not a tall stacked/centered card. */
    .about-cards-cta-bar {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 20px;
        padding: 18px;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(21,32,44,0.9) 0%, rgba(15,23,32,0.95) 100%);
        border: 1px solid rgba(201,168,76,0.35);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .about-cards-cta-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #DFC06A;
        border: 1px solid rgba(201,168,76,0.45);
        background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0.05) 100%);
    }
    .about-cards-cta-text {
        flex: 1;
        min-width: 0;
    }
    .about-cards-cta-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #DFC06A;
        line-height: 1.3;
    }
    .about-cards-cta-sub {
        font-size: 0.78rem;
        color: rgba(255,255,255,0.6);
        margin-top: 2px;
    }
    .about-cards-cta-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 16px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.85rem;
        background: linear-gradient(135deg, #C9A84C 0%, #E6C878 50%, #C9A84C 100%);
        color: #15202C;
        white-space: nowrap;
        box-shadow: 0 6px 16px rgba(201,168,76,0.35);
    }

    /* Story Overture project cards — .story-cards-grid deliberately stays
       2-up even on mobile (so both cards fit the pinned scroll-scrubbed
       scene height), but .portfolio-card-* was only ever sized for a full
       desktop-width card, not one squeezed into ~45vw. Shrinking padding/
       font-size here (rather than dropping to 1-up, which would need
       reworking the GSAP pinned-scene timeline) keeps the existing scroll
       mechanics untouched while making the halved card actually legible. */
    .portfolio-card-body { padding: 14px 14px 12px !important; }
    .portfolio-card-num { font-size: 1.3rem !important; top: 8px !important; right: 10px !important; }
    .portfolio-card-title { font-size: 0.92rem !important; margin-bottom: 3px !important; line-height: 1.2 !important; }
    .portfolio-card-tagline { font-size: 0.68rem !important; margin-bottom: 7px !important; }
    .portfolio-card-desc { font-size: 0.72rem !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
    .portfolio-card-features { gap: 5px !important; margin-bottom: 4px !important; }
    .portfolio-card-features li { font-size: 0.58rem !important; padding: 3px 8px !important; }
    .portfolio-card-btn-wrap { padding-top: 10px !important; }
    .portfolio-card-btn { font-size: 0.7rem !important; padding: 8px 12px !important; gap: 5px !important; }
    .portfolio-industry-badge,
    .portfolio-status-pill { font-size: 0.56rem !important; padding: 4px 9px !important; }
}