/* ============================================================
   METAL FABRICATION WEBSITE — INDUSTRIAL PREMIUM THEME
   Rewritten: No SaaS patterns. Planted. Heavy. Precise.
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #0e0e0e;
    --bg-tertiary: #111111;
    --bg-card: #141414;
    --bg-elevated: #1a1a1a;
    --text-primary: #f5f2ed;
    --text-secondary: #bab5ae;
    --text-muted: #a39e97;
    --accent: #e8621a;
    --accent-bright: #ff7a2e;
    --accent-dark: #b84d10;
    --steel: #333333;
    --steel-light: #4a4a4a;
    --border: #222222;
    --border-strong: #333333;
    --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    --font-body: 'Barlow', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-primary: var(--font-body);
    --font-nepali: 'Noto Sans Devanagari', 'Barlow', sans-serif;
    --transition: 0.25s ease;
    --transition-slow: 0.4s ease;
    --container-max: 1280px;
    --container-pad: 32px;
}

section { scroll-margin-top: 100px; }
html {
    scroll-behavior: smooth;
    font-size: 16px;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;

    width: 100%;

}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Accessibility Skip Link — visually hidden off-screen until focused via keyboard */
.skip-link {
    position: absolute;
    top: -100px;
    left: 24px;
    background: var(--accent);
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    z-index: 99999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 14px;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ============================================================
   DEVANAGARI / NEPALI TYPOGRAPHY — UNIVERSAL ZERO LETTER-SPACING
   Devanagari characters are joined by the continuous horizontal
   headline (shirorekha / शिरोरेखा). ANY letter-spacing (positive or
   negative) breaks this line, creating gaps between letters and
   disconnecting vowel marks (matras) and conjuncts.
   Across the entire website, whenever Nepali mode is active,
   every element strictly enforces zero letter-spacing.
   ============================================================ */
html[lang="ne"],
html[lang="ne"] *,
html[lang="ne"] *::before,
html[lang="ne"] *::after,
body.lang-ne,
body.lang-ne *,
body.lang-ne *::before,
body.lang-ne *::after {
    letter-spacing: 0 !important;
}

html[lang="ne"],
body.lang-ne {
    --font-display: 'Noto Sans Devanagari', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--font-nepali);
}

body.lang-ne .section-title,
body.lang-ne .hero-title,
body.lang-ne .cta-title,
body.lang-ne .services-fixed-prefix,
body.lang-ne .ticker-item,
body.lang-ne .process-step-number,
body.lang-ne .process-step-name,
body.lang-ne .stat-number,
body.lang-ne .service-card-number,
body.lang-ne .why-card-title,
body.lang-ne .footer-heading,
body.lang-ne .nav-logo-text {
    font-family: var(--font-nepali);
    letter-spacing: 0 !important;
}

/* Devanagari needs zero letter-spacing — wide spacing breaks readability */
body.lang-ne .hero-title,
body.lang-ne .section-title,
body.lang-ne .section-tag,
body.lang-ne .section-subtitle,
body.lang-ne .cta-title,
body.lang-ne .cta-subtitle,
body.lang-ne .btn,
body.lang-ne .nav-cta,
body.lang-ne .nav-links a,
body.lang-ne .filter-btn,
body.lang-ne .service-card-title,
body.lang-ne .why-card-title,
body.lang-ne .process-step-title,
body.lang-ne .process-step-name,
body.lang-ne .process-card-num,
body.lang-ne .team-caption-name,
body.lang-ne .testimonial-name,
body.lang-ne .footer-heading,
body.lang-ne .contact-info-title,
body.lang-ne .hero-trust span,
body.lang-ne .trust-dot { letter-spacing: 0 !important; }

body.lang-ne .hero-title {
    line-height: 1.18;
    font-size: clamp(1.85rem, 4.6vw, 4.2rem);
    letter-spacing: 0 !important;
    max-width: 24ch;
}
body.lang-ne .hero-title .hero-title-line2,
body.lang-ne .hero-title-line2 {
    white-space: nowrap;
    display: inline-block;
}
body.lang-ne .section-title {
    font-family: var(--font-nepali) !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: 0 !important;
}
body.lang-ne .services-fixed-prefix,
body.lang-ne .ticker-item,
body.lang-ne .ticker-text {
    font-family: var(--font-nepali) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}
body.lang-ne .cta-title { line-height: 1.15; font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: 0 !important; }
body.lang-ne .btn { letter-spacing: 0 !important; padding: 16px 28px; }
body.lang-ne .btn-lg { padding: 20px 36px; }
body.lang-ne .nav-cta { letter-spacing: 0 !important; }
body.lang-ne .filter-btn { letter-spacing: 0 !important; }
body.lang-ne .section-tag { letter-spacing: 0 !important; font-size: 0.68rem; }

/* Nepali glyph coverage — Bebas has no Devanagari, so every display-font
   component falls back to a mismatched system font. Pin them all. */
body.lang-ne .page-hero-title,
body.lang-ne .standard-card-title,
body.lang-ne .guarantee-card-title,
body.lang-ne .guide-heading,
body.lang-ne .faq-card-q,
body.lang-ne .coverflow-card-title,
body.lang-ne .service-lightbox-title,
body.lang-ne .project-card-title,
body.lang-ne .lightbox-title,
body.lang-ne .contact-info-title,
body.lang-ne .guarantee-badge,
body.lang-ne .faq-back-link a,
body.lang-ne .page-related-link span,
body.lang-ne .breadcrumb a,
body.lang-ne .breadcrumb span,
body.lang-ne .standard-card-text,
body.lang-ne .guarantee-card-text,
body.lang-ne .guide-para,
body.lang-ne .guide-list li {
    font-family: var(--font-nepali);
    letter-spacing: 0 !important;
}
/* Devanagari needs a taller line box for matras — the Bebas-scale 0.95–1.05 clips them */
body.lang-ne .page-hero-title { line-height: 1.25; }
body.lang-ne .standard-card-title,
body.lang-ne .guarantee-card-title { line-height: 1.35; }
body.lang-ne .guide-heading { line-height: 1.4; }
body.lang-ne .faq-card-q {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0 !important;
    line-height: 1.5;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.lightbox-note { margin-top: 16px; font-size: 0.75rem; color: var(--text-muted); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--steel); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

.preloader-bar-wrap {
    position: relative;
    width: 280px;
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.preloader-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.preloader-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(235, 94, 40, 0.6);
    will-change: width;
}
.preloader-percentage {
    position: relative;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    min-width: max-content;
}

/* ============================================================
   NAVIGATION — FLOATING BREATHING PILL
   Inspired by Framer Breathing Navbar with ambient molten glow
   ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1001;
    padding: 18px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    background: transparent !important;
    border: none !important;
    transition: padding 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled {
    padding: 10px 24px;
}

/* Floating capsule container - Nas.com morphing behavior */
.nav-container {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 1.8vw, 24px);
    width: 100%;
    max-width: min(1280px, calc(100vw - 48px));
    padding: 6px 14px 6px 18px;
    border-radius: 9999px;
    background-color: rgba(13, 14, 18, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    overflow: visible;
    transition: 
        max-width 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled .nav-container {
    width: 100%;
    max-width: min(1120px, calc(100vw - 32px));
    padding: 6px 8px 6px 18px;
    background-color: rgba(13, 14, 18, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 
        0 20px 45px -12px rgba(0, 0, 0, 0.85),
        0 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Primary ambient breathing aura */
.nav-container::before {
    content: '';
    position: absolute;
    top: -65px;
    left: var(--glow-x, 50%);
    width: 300px;
    height: 125px;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(232, 98, 26, 0.65) 0%,
        rgba(255, 122, 46, 0.38) 32%,
        rgba(232, 98, 26, 0.12) 60%,
        transparent 75%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
    animation: breathingGlow 5.5s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
    will-change: transform, opacity, filter;
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled .nav-container::before {
    opacity: 1;
}

/* Secondary bottom glimmer */
.nav-container::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: var(--glow-x, 50%);
    width: 200px;
    height: 65px;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 160, 50, 0.28) 0%,
        rgba(232, 98, 26, 0.08) 42%,
        transparent 72%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(16px);
    animation: breathingGlowSubtle 5.5s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
    animation-delay: -2.75s;
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled .nav-container::after {
    opacity: 1;
}

@keyframes breathingGlow {
    0% {
        transform: translateX(-56%) scale(0.85);
        opacity: 0.38;
        filter: blur(18px);
    }
    50% {
        transform: translateX(-46%) scale(1.22);
        opacity: 0.92;
        filter: blur(26px);
    }
    100% {
        transform: translateX(-40%) scale(1.02);
        opacity: 0.58;
        filter: blur(22px);
    }
}

@keyframes breathingGlowSubtle {
    0% {
        transform: translateX(-44%) scale(0.88);
        opacity: 0.2;
    }
    100% {
        transform: translateX(-56%) scale(1.28);
        opacity: 0.65;
    }
}

/* Nav Logo */
.nav-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 9999px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.nav-logo:hover {
    opacity: 0.95;
    transform: translateY(-0.5px);
}

.nav-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px rgba(232, 40, 26, 0.5));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.nav-logo:hover .nav-logo-img {
    transform: scale(1.1) rotate(-4deg);
}

.footer-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    filter: drop-shadow(0 0 10px rgba(237, 28, 36, 0.6));
    transition: transform 0.3s ease;
}

.footer-logo:hover .footer-logo-img {
    transform: scale(1.08);
}

.nav-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--accent-bright);
    position: relative;
}

.nav-logo-mark::before {
    content: '✦';
    font-size: 1.15rem;
    line-height: 1;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 8px rgba(232, 98, 26, 0.85));
    animation: markSparkle 4s ease-in-out infinite alternate;
}

@keyframes markSparkle {
    0%, 100% {
        transform: scale(0.95) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(232, 98, 26, 0.7));
    }
    50% {
        transform: scale(1.2) rotate(45deg);
        filter: drop-shadow(0 0 12px rgba(255, 140, 50, 1));
    }
}

.nav-logo-text {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1.1;
}

.nav-logo-text br {
    display: none;
}

/* Nav Links */
.nav-links {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: inline-flex;
    align-items: center;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(240, 237, 232, 0.68);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: 9999px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.nav-links a::after {
    display: none !important;
}

.nav-links a::before { display: none !important; }

.nav-links a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-0.5px);
}

.nav-links a.active,
.nav-links li.active a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

/* Nav Actions */
.nav-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Language Switcher — Docked Top-Right Outside Navbar */
.nav-lang-topright {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    background-color: rgba(13, 14, 18, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 3px;
    gap: 2px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 1002;
    pointer-events: auto;
    transition: 
        right 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled .nav-lang-topright {
    right: 24px;
    background-color: rgba(13, 14, 18, 0.88);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 
        0 16px 36px -10px rgba(0, 0, 0, 0.85),
        0 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 3px;
    gap: 2px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(240, 237, 232, 0.6);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1;
    cursor: pointer;
    height: 26px;
    padding: 0 9px;
    border-radius: 9999px;
    transition: all 0.2s ease;
    white-space: nowrap;
    vertical-align: middle;
}

.lang-btn:hover {
    color: #ffffff;
}

.lang-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.lang-btn[data-lang="ne"] {
    font-family: var(--font-nepali) !important;
    letter-spacing: 0;
    font-size: 0.76rem;
    line-height: 1;
    padding-top: 1px;
}

.lang-divider {
    display: none;
}

/* Call to Action Button - Pill Style */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--accent) 0%, #ff7a2e 100%);
    padding: 8px 18px;
    border-radius: 9999px;
    text-decoration: none;
    line-height: 1;
    box-shadow: 
        0 4px 14px rgba(232, 98, 26, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-cta::after {
    content: '↗';
    font-size: 0.95em;
    line-height: 1;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.nav-cta:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(232, 98, 26, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #f06a24 0%, #ff8944 100%);
}

.nav-cta:hover::after {
    transform: translate(2px, -2px);
}

.nav-cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(232, 98, 26, 0.4);
}

/* Hamburger — Framer MotionHamburger animation
   (https://framer.com/m/MotionHamburger-al89CL.js@4Tot2eChkxSNYKSgkwnl)
   The two curled outer bars slide their stroke dashes from a 21.9 run
   (bar only) to a 20 run anchored at the path tail (the bent end), while
   the whole icon rotates 45deg — the tails close into a cross — and the
   middle bar collapses with scaleX(0). */
.nav-hamburger {
    display: none;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    z-index: 10001;
    -webkit-tap-highlight-color: transparent;
}
.nav-hamburger-icon {
    display: block;
    width: 34px;
    height: 34px;
    overflow: visible;
    transform-origin: 50% 50%;
    transform: rotate(0deg) scale(1);
    transition: transform 620ms cubic-bezier(0.68, -0.2, 0.265, 1.25);
}
.nav-hamburger:hover .nav-hamburger-icon,
.nav-hamburger:focus-visible .nav-hamburger-icon {
    transform: rotate(0deg) scale(1.08);
}
.nav-hamburger.active .nav-hamburger-icon {
    transform: rotate(45deg) scale(1);
}
.nav-hamburger.active:hover .nav-hamburger-icon,
.nav-hamburger.active:focus-visible .nav-hamburger-icon {
    transform: rotate(45deg) scale(1.08);
}
.nav-hamburger:focus-visible { outline: none; }
.nav-hamburger:focus-visible .nav-hamburger-icon {
    filter: drop-shadow(0 0 6px rgba(232, 98, 26, 0.55));
}
.hb-path {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hb-top,
.hb-bottom {
    transition: stroke-dashoffset 620ms cubic-bezier(0.33, 1, 0.68, 1),
                stroke-dasharray 620ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* Measured path lengths: top 61.22, bottom 75.71 units. The closed run
   stops at 21.9 so the dash end stays clear of the bend; the open run is
   the last 20 units — the (16,6)-(16,26) and (6,16)-(26,16) tails that
   cross into a cross once the icon rotates 45deg. */
.hb-top { stroke-dasharray: 21.9 61.22; stroke-dashoffset: 0; }
.hb-bottom { stroke-dasharray: 21.9 75.71; stroke-dashoffset: 0; }
.nav-hamburger.active .hb-top { stroke-dasharray: 20 61.22; stroke-dashoffset: -41.22; }
.nav-hamburger.active .hb-bottom { stroke-dasharray: 20 75.71; stroke-dashoffset: -55.71; }
.hb-middle {
    /* the bar is a zero-height line, so anchor the pivot to the viewBox
       centre (16,16) rather than an empty fill box */
    transform-box: view-box;
    transform-origin: 16px 16px;
    transform: scaleX(1);
    opacity: 1;
    transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1), opacity 420ms ease;
}
.nav-hamburger.active .hb-middle { transform: scaleX(0); opacity: 0; }

/* The menu is a full-screen overlay, so the top bar (logo + hamburger)
   has to ride above it — that's the only close control, no cross button. */
body.menu-open .nav {
    z-index: 10001;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(10, 11, 14, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 100px 24px 60px;
}
.mobile-menu.active { opacity: 1; visibility: visible; }
.mobile-nav-links { margin-bottom: 32px; list-style: none; padding: 0; }
.mobile-nav-links li { margin-bottom: 6px; }
.mobile-nav-links a {
    font-family: var(--font-display);
    font-size: 2.1rem;
    letter-spacing: 3px;
    color: var(--text-primary);
    display: block;
    padding: 8px 0;
    transition: color 0.25s;
    text-decoration: none;
}
.mobile-nav-links a:hover,
.mobile-nav-links a:active { color: var(--accent); }
.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}
.mobile-menu-actions .btn {
    width: 100%;
    max-width: 260px;
}

/* ============================================================
   BUTTONS — Flat, sharp, no rounded corners
   ============================================================ */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 16px 36px;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
}
.btn-primary {
    background: var(--accent);
    color: #0b0c10;
    font-weight: 800;
}
.btn-primary:hover {
    background: var(--accent-bright);
    color: #0b0c10;
}
.btn-primary:active {
    transform: translateY(1px);
    background: var(--accent-dark);
    color: #ffffff;
}
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--steel-light);
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.btn-outline:active {
    transform: translateY(1px);
}
.btn-lg { padding: 20px 48px; font-size: 0.8rem; }
.btn-sm { padding: 10px 24px; font-size: 0.65rem; }
.btn-full { width: 100%; }

/* ============================================================
   QUICK SCAN BUTTONS — the CTA pair
   Framer "Quick Scan Button" component
   (https://framer.com/m/Quick-Scan-Button-SSCR2S.js@BTZQgRgqfTue3IydMoGc)
   A thin reticle plate with four "+" marks that lock into corner
   brackets on hover, an accent scan that floods the plate, and a
   duplicate label that rolls up and staggers in word by word.
   ============================================================ */
.scan-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    border: 1px solid rgba(240, 237, 232, 0.14);
    box-shadow: inset 0 -1px 0 rgba(232, 98, 26, 0.35);
    color: var(--text-primary);
    --scan-mark: rgba(240, 237, 232, 0.5);
    transition: background 0.25s, color 0.3s, border-color 0.3s, transform 0.15s;
}
.scan-btn:active { transform: translateY(1px); }

/* Label stack — the visible label, with a duplicate parked underneath */
.scan-btn-mask {
    position: relative;
    z-index: 2;
    display: block;
    height: 1.6em;
    overflow: hidden;
}
.scan-btn-roll {
    display: block;
    transition: transform 0.5s cubic-bezier(0.44, 0, 0, 1);
}
.scan-btn-label {
    display: block;
    line-height: 1.6;
    white-space: nowrap;
}
.scan-btn:hover .scan-btn-roll,
.scan-btn:focus-visible .scan-btn-roll { transform: translateY(-50%); }

/* The duplicate arrives word by word (the component staggers by character;
   words keep Devanagari conjuncts intact) */
.scan-btn-label-ghost .scan-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s cubic-bezier(0.44, 0, 0, 1), transform 0.3s cubic-bezier(0.44, 0, 0, 1);
    transition-delay: calc(var(--scan-word-index, 0) * 55ms);
}
.scan-btn:hover .scan-btn-label-ghost .scan-word,
.scan-btn:focus-visible .scan-btn-label-ghost .scan-word {
    opacity: 1;
    transform: translateY(0);
}

/* Scan — a hairline rail that floods the plate from the bottom edge */
.scan-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--accent);
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.45s cubic-bezier(0.44, 0, 0, 1);
}
.scan-btn:hover::after,
.scan-btn:focus-visible::after { transform: scaleY(1); }

/* Corner reticle — four "+" marks 5px off each corner, each made of two
   1px lines. On hover every line slides to the outer edge of its mark,
   so each "+" locks into a corner bracket. */
.scan-btn::before {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: 3;
    pointer-events: none;
    background-image:
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark)),
        linear-gradient(var(--scan-mark), var(--scan-mark));
    background-repeat: no-repeat;
    background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px;
    background-position:
        5px 0,
        0 5px,
        calc(100% - 6px) 0,
        calc(100% - 11px) 5px,
        5px calc(100% - 11px),
        0 calc(100% - 6px),
        calc(100% - 6px) calc(100% - 11px),
        calc(100% - 11px) calc(100% - 6px);
    transition: background-position 0.45s cubic-bezier(0.44, 0, 0, 1);
}
.scan-btn:hover::before,
.scan-btn:focus-visible::before {
    background-position:
        0 0,
        0 0,
        calc(100% - 1px) 0,
        calc(100% - 11px) 0,
        0 calc(100% - 11px),
        0 calc(100% - 1px),
        calc(100% - 1px) calc(100% - 11px),
        calc(100% - 11px) calc(100% - 1px);
}

/* Fill variant — the plate floods with weld heat (component's Button One) */
.scan-btn-fill { color: var(--accent); }
.scan-btn-fill::before { --scan-mark: rgba(232, 98, 26, 0.85); }
.scan-btn-fill:hover,
.scan-btn-fill:focus-visible { color: #fff; border-color: var(--accent); }
.scan-btn-fill:hover::before,
.scan-btn-fill:focus-visible::before { --scan-mark: rgba(255, 255, 255, 0.9); }

/* Line variant — the same scan at lower heat (component's Button Two) */
.scan-btn-line::before { --scan-mark: rgba(240, 237, 232, 0.45); }
.scan-btn-line:hover,
.scan-btn-line:focus-visible { border-color: rgba(232, 98, 26, 0.6); }
.scan-btn-line:hover::before,
.scan-btn-line:focus-visible::before { --scan-mark: var(--accent); }
.scan-btn-line::after { background: rgba(232, 98, 26, 0.35); }

/* ============================================================
   HERO CTA BUTTONS — two Framer components
   ------------------------------------------------------------
   GET A QUOTE — "Wave Button"
   (https://framer.com/m/Wave-Button-QoxZ.js@rCoL0pIYuvXgMAkDQTlA)
   Three nested 400px circles (border-radius 50%), offsets 0/-48/-96,
   parked as a 5%-scale dot 40px below the plate and clipped by
   overflow:hidden. On hover they grow to scale 1 roughly 30px higher,
   so layered colour waves rise through the plate, the innermost colour
   is what floods it, and the label rolls up through a mask.
   ------------------------------------------------------------
   VIEW OUR WORK — Framer "NovaGlowButton"
   (https://framer.com/m/NovaGlowButton-5MIGHX.js@KIzZQQnjARJRpogfeHfj)
   Smooth 360-degree rotating conic gradient with border edge mask,
   blurred underglow halo, and interactive glass shine swipe.
   ============================================================ */
.wave-btn {
    --wave-min: 400px;
    --wave-1: #ffd166;
    --wave-2: #ff9a4d;
    --wave-3: var(--accent-bright);
    position: relative;
    overflow: hidden;
    background: var(--accent);
    color: #fff;
    isolation: isolate;
}
/* the waves do the colour work, so the plate itself holds still */
.wave-btn:hover { background: var(--accent); }
.wave-btn:active { background: var(--accent-dark); }
.wave-btn:active .wave-btn-ripple-3 { background: var(--accent-dark); }

.wave-btn-ripples {
    position: absolute;
    left: 51%;
    /* anchored to the plate's bottom edge: the circle's centre parks 40px
       below it (as the component does), then creeps to 34px on hover */
    top: 100%;
    width: max(var(--wave-min), 130%);
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) translateY(40px) scale(0.05);
    transition: transform 1s cubic-bezier(0.12, 0.23, 0.09, 0.99);
    will-change: transform;
}
.wave-btn:hover .wave-btn-ripples,
.wave-btn:focus-visible .wave-btn-ripples {
    transform: translate(-50%, -50%) translateY(34px) scale(1);
}
.wave-btn-ripple {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.wave-btn-ripple-1 { background: var(--wave-1); }
.wave-btn-ripple-2,
.wave-btn-ripple-3 { bottom: -12%; }
.wave-btn-ripple-2 { background: var(--wave-2); }
.wave-btn-ripple-3 {
    background: var(--wave-3);
    transition: background 0.3s ease;
}

/* Label — the component swaps two text layers on a 1s ease; a mask and
   roll does the same job and survives both languages. */
.wave-btn-mask {
    position: relative;
    z-index: 2;
    display: block;
    /* 1.6em clears Devanagari matras (the scan buttons use the same) */
    height: 1.6em;
    overflow: hidden;
}
.wave-btn-roll {
    display: block;
    transition: transform 1s cubic-bezier(0.12, 0.23, 0.09, 0.99);
}
.wave-btn-label {
    display: block;
    height: 1.6em;
    line-height: 1.6;
    white-space: nowrap;
}
.wave-btn:hover .wave-btn-roll,
.wave-btn:focus-visible .wave-btn-roll { transform: translateY(-50%); }

/* ============================================================
   HERO CTA BUTTON — Molten Loop Border Glow
   A distinct glowing laser/welding spark line moving continuously
   around the border perimeter of the dark steel plate.
   ============================================================ */
.nova-glow-btn {
    --nova-bg: #121214;
    --nova-text: #f0ede8;
    --nova-border: rgba(255, 122, 46, 0.22);
    --nova-radius: 0px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 48px;
    padding: 16px 36px;
    background: var(--nova-bg);
    color: var(--nova-text);
    border: 1px solid var(--nova-border);
    border-radius: var(--nova-radius);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 14px rgba(232, 98, 26, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    will-change: transform, box-shadow;
}

.nova-glow-btn:hover,
.nova-glow-btn:focus-visible {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 28px rgba(255, 122, 46, 0.45), 0 0 10px rgba(255, 209, 102, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 122, 46, 0.5);
}

.nova-glow-btn:active {
    transform: translateY(0) scale(0.99);
}

/* 1. The moving light beam that creates the looping border line */
.nova-glow-edge {
    position: absolute;
    width: 350%;
    height: 600%;
    left: -125%;
    top: -250%;
    background: conic-gradient(
        transparent 0deg,
        transparent 230deg,
        rgba(184, 77, 16, 0.2) 250deg,
        #b84d10 275deg,
        #e8621a 305deg,
        #ff7a2e 330deg,
        #ffd166 350deg,
        #ffffff 358deg,
        transparent 360deg
    );
    animation: novaBorderLineLoop 2.6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* 2. Concentrated moving underglow halo that travels with the line */
.nova-glow-blur {
    position: absolute;
    width: 350%;
    height: 600%;
    left: -125%;
    top: -250%;
    background: conic-gradient(
        transparent 0deg,
        transparent 240deg,
        rgba(184, 77, 16, 0.3) 270deg,
        rgba(232, 98, 26, 0.7) 310deg,
        rgba(255, 122, 46, 0.95) 338deg,
        rgba(255, 209, 102, 1) 355deg,
        transparent 360deg
    );
    filter: blur(10px);
    animation: novaBorderLineLoop 2.6s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.22s ease;
}

.nova-glow-btn:hover .nova-glow-blur {
    opacity: 1;
}

@keyframes novaBorderLineLoop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 3. Solid inner plate: covers the center, leaving ONLY the 2px perimeter beam exposed */
.nova-glow-surface {
    position: absolute;
    inset: 2px;
    background: var(--nova-bg);
    border-radius: var(--nova-radius);
    pointer-events: none;
    z-index: 2;
}

/* 4. Glass shine swipe on hover */
.nova-glow-shine {
    position: absolute;
    inset: 2px;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 100%
    );
    transform: translateX(-38%);
    opacity: 0.4;
    pointer-events: none;
    transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
    z-index: 3;
}

.nova-glow-btn:hover .nova-glow-shine,
.nova-glow-btn:focus-visible .nova-glow-shine {
    transform: translateX(38%);
    opacity: 1;
}

/* 5. Typography */
.nova-glow-label {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.6;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--nova-text);
    transition: color 0.22s ease;
}

.nova-glow-btn:hover .nova-glow-label {
    color: #ffffff;
}

/* ============================================================
   SECTION HEADERS — Industrial scale
   ============================================================ */
.section-tag {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text-primary);
    text-transform: uppercase;
}
.section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.7;
}
.section-header { margin-bottom: 56px; }
.section-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 14px;
}

/* ============================================================
   HERO — Cinematic, dark, dramatic
   ============================================================ */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    padding: 100px 0 160px;
    margin-bottom: 0;
}
.hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-bg-image {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center 40%;
    animation: heroZoom 25s ease-in-out infinite alternate;
}
@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10,10,10,0.85) 0%,
            rgba(10,10,10,0.45) 35%,
            rgba(10,10,10,0.5) 65%,
            rgba(10,10,10,0.92) 100%
        );
}
/* Subtle orange glow from welding sparks area */
.hero-sparks {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 65% 55%, rgba(232,98,26,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 35% 45%, rgba(232,98,26,0.05) 0%, transparent 40%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-pad);
    transform: translateY(-24px);
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5.75rem);
    letter-spacing: 4px;
    line-height: 0.95;
    margin-bottom: 20px;
    color: var(--text-primary);
    max-width: 22ch;
}
.hero-subtitle {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    color: var(--text-secondary);
    max-width: 42ch;
    margin: 0 0 32px;
    line-height: 1.6;
}
.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.hero-trust span {
    padding: 0 16px;
}
.trust-dot {
    color: var(--accent) !important;
    padding: 0 4px !important;
    font-size: 0.4rem;
}
.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hero-scroll span {
    font-size: 0.55rem;
    letter-spacing: 4px;
    color: var(--text-muted);
}
.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: var(--steel);
    position: relative;
    overflow: hidden;
}
.hero-scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--accent);
    animation: scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine {
    0% { top: -50%; }
    100% { top: 150%; }
}

/* All sections following hero roll over the pinned hero background */
main > section:not(.hero), footer {
    position: relative;
    z-index: 2;
    background: var(--bg-primary);
}

/* ============================================================
   TRUST / INTRO SECTION
   ============================================================ */
.trust-section {
    position: relative;
    z-index: 2;
    padding: 130px 0 100px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}
.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.trust-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.stat-card {
    background: var(--bg-card);
    padding: 36px 24px;
    text-align: center;
    border: 1px solid var(--border);
    transition: border-color 0.25s;
}
.stat-card:hover {
    border-color: var(--accent);
}
.stat-number {
    font-family: var(--font-display);
    font-size: 3.2rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 2px;
}
.stat-suffix {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--accent);
    margin-top: -6px;
    display: inline-block;
}

/* Sliding number digit columns */
.sliding-number {
    display: inline-flex;
    align-items: flex-end;
    overflow: hidden;
    vertical-align: bottom;
    height: 3.2rem;
}
.sliding-digit {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 3.2rem;
    line-height: 3.2rem;
}
.sliding-digit-inner {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transition: transform 5s cubic-bezier(0.55, 0.05, 0.9, 0.85);
}
.sliding-digit-inner span {
    display: block;
    height: 3.2rem;
    line-height: 3.2rem;
    font-family: var(--font-display);
    font-size: 3.2rem;
    color: var(--accent);
}
.sliding-suffix {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--accent);
    display: inline-block;
    margin-left: 2px;
    height: 3.2rem;
    line-height: 3.2rem;
    vertical-align: bottom;
}
.stat-icon {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 12px;
}
.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    line-height: 1.4;
}
.trust-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 32px;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.about-blueprint {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image:
        linear-gradient(var(--steel) 1px, transparent 1px),
        linear-gradient(90deg, var(--steel) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.about-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.about-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(232, 98, 26, 0.25);
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
}
.about-image-wrapper img,
.about-image-wrapper video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.about-image-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--accent);
    padding: 16px 24px;
    text-align: center;
    line-height: 1;
    border-top-left-radius: 14px;
    z-index: 3;
}
.about-badge-number {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: #fff;
    display: block;
    line-height: 1;
}
.about-badge-text {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.85);
}
.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
}
.about-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.about-feature-icon {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ============================================================
   SERVICES — 3D COVERFLOW CAROUSEL (Framer-inspired)
   ============================================================ */
.services-section {
    padding: clamp(24px, 3.5vh, 40px) 0 clamp(20px, 3vh, 32px);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 80px;
}

/* ============================================================
   SERVICES — Inline WE BUILD + Framer Ticker Blurred Text
   Matches https://framer.com/m/Ticker-Blurred-Text-pGHttQ.js
   ============================================================ */
.services-combo-header {
    text-align: center;
    margin-bottom: clamp(10px, 1.8vh, 18px);
    position: relative;
    z-index: 5;
}

.services-title-combo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 1.8vw, 20px);
    position: relative;
    margin: 0 auto;
    text-align: left;
}

.services-fixed-prefix {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
}

.services-ticker {
    position: relative;
    width: clamp(340px, 48vw, 620px);
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    touch-action: pan-y;
    margin: 0;
}
.services-ticker.is-dragging {
    cursor: grabbing;
}
.services-ticker-fade-mask {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.services-ticker-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    will-change: transform;
    transform: translateY(0);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-ticker.no-transition .services-ticker-track {
    transition: none !important;
}
.ticker-item {
    height: 56px;
    line-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.28);
    filter: blur(2.5px);
    opacity: 0.24;
    transform-origin: left center;
    transform: scale(0.96);
    transition: filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.85s ease;
}
.ticker-item:hover {
    opacity: 0.5;
    filter: blur(1.5px);
}
.ticker-item.is-active {
    filter: blur(0px);
    opacity: 1;
    color: #ffffff;
    transform: scale(1);
}
.ticker-item.is-active .ticker-text {
    color: #ffffff;
    text-shadow: 0 0 28px rgba(235, 94, 40, 0.85), 0 0 10px rgba(255, 140, 66, 0.6);
}

.services-combo-header .section-subtitle {
    text-transform: uppercase;
    font-family: var(--font-body);
    font-size: clamp(0.78rem, 1.1vw, 0.95rem);
    letter-spacing: 2px;
    line-height: 1.45;
    max-width: 680px;
    margin: 10px auto 0;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-align: center;
}

@media (max-width: 768px) {
    .services-section {
        padding: 20px 0 24px;
    }
    .services-combo-header {
        margin-bottom: 10px;
    }
    .services-title-combo {
        gap: 10px;
    }
    .services-fixed-prefix {
        font-size: clamp(2.0rem, 5.5vw, 2.6rem);
        letter-spacing: 2.5px;
    }
    .services-ticker {
        width: clamp(220px, 58vw, 360px);
        height: 80px;
    }
    .ticker-item {
        height: 40px;
        line-height: 40px;
        font-size: clamp(2.0rem, 5.5vw, 2.6rem);
        letter-spacing: 2.5px;
    }
    .services-combo-header .section-subtitle {
        font-size: 0.74rem;
        letter-spacing: 1.5px;
        margin-top: 6px;
        padding: 0 12px;
    }
}
@media (max-width: 480px) {
    .services-title-combo {
        gap: 8px;
    }
    .services-fixed-prefix {
        font-size: clamp(1.6rem, 5.5vw, 2.0rem);
        letter-spacing: 1.5px;
    }
    .services-ticker {
        width: clamp(190px, 60vw, 280px);
        height: 68px;
    }
    .ticker-item {
        height: 34px;
        line-height: 34px;
        font-size: clamp(1.6rem, 5.5vw, 2.0rem);
        letter-spacing: 1.5px;
    }
}

.coverflow-wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 6px 0 10px;
    user-select: none;
    touch-action: pan-y;
}

.coverflow-stage {
    position: relative;
    width: 100%;
    height: clamp(290px, 43vh, 340px);
    perspective: 1400px;
    perspective-origin: center center;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.coverflow-stage:active {
    cursor: grabbing;
}

.coverflow-card {
    position: absolute;
    left: 50%;
    width: 240px;
    height: clamp(270px, 40vh, 320px);
    transform-style: preserve-3d;
    will-change: transform, opacity, width;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease,
                width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
}

.coverflow-card-inner {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.coverflow-card.active .coverflow-card-inner {
    border-color: rgba(232, 98, 26, 0.6);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 24px rgba(232, 98, 26, 0.25);
}

/* Image fills most of the card — text pushed to bottom */
.coverflow-card-image {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--steel);
}

.coverflow-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.coverflow-card.active .coverflow-card-image img {
    transform: scale(1.04);
}

.coverflow-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0.2) 40%, transparent 100%);
    pointer-events: none;
}

.coverflow-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: #ff9d5c;
    font-family: var(--font-display);
    font-size: 1.05rem;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* Content area — compact, bottom-hugging */
.coverflow-card-content {
    padding: 8px 14px 10px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coverflow-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.15;
    transition: color 0.25s;
}

.coverflow-card.active .coverflow-card-title {
    color: #ffffff;
}

.coverflow-card-text {
    font-size: 0.78rem;
    color: #c8c3bc;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coverflow-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff9d5c;
    transition: gap 0.25s, color 0.25s;
    align-self: flex-start;
    margin-top: 2px;
}

.coverflow-card-link svg {
    transition: transform 0.25s;
}

.coverflow-card.active .coverflow-card-link:hover {
    color: var(--accent-bright);
    gap: 10px;
}

.coverflow-card.active .coverflow-card-link:hover svg {
    transform: translateX(3px);
}

/* Nav Arrows */
.coverflow-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 120;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.25s, color 0.25s;
}

.coverflow-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.coverflow-prev {
    left: 20px;
}

.coverflow-next {
    right: 20px;
}

/* Pagination Dots */
.coverflow-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.coverflow-dot {
    height: 6px;
    width: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}

.coverflow-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.coverflow-dot.active {
    width: 26px;
    background: var(--accent);
}

@media (max-width: 768px) {
    .coverflow-wrapper {
        padding: 4px 0 8px;
    }
    .coverflow-stage {
        height: 270px;
        perspective: 900px;
    }
    .coverflow-card {
        width: 190px;
        height: 250px;
    }
    .coverflow-prev { left: 6px; width: 36px; height: 36px; }
    .coverflow-next { right: 6px; width: 36px; height: 36px; }
    .coverflow-nav-btn {
        width: 36px;
        height: 36px;
    }
    .coverflow-dots {
        margin-top: 8px;
    }
}

/* ============================================================
   PROJECTS — THE VISUAL CENTERPIECE
   Asymmetric grid. Large featured image. Full bleed impact.
   ============================================================ */
/* ============================================================
   PROJECTS — Smart Grid (Single Viewport Fit & Mobile Responsive)
   ============================================================ */
.projects-section {
    padding: clamp(20px, 3vh, 36px) 0 clamp(16px, 2.5vh, 28px);
    background: var(--bg-primary);
}

.projects-section .section-header {
    margin-bottom: clamp(10px, 1.8vh, 16px);
    text-align: center;
}

.projects-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    line-height: 1.05;
    margin-bottom: 6px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.projects-section .section-subtitle {
    font-size: clamp(0.76rem, 1vw, 0.88rem);
    color: var(--text-secondary);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.45;
}

/* Framer-style Glass Capsule Filters */
.projects-filters-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(12px, 1.8vh, 18px);
}
.projects-filters {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 9999px;
    padding: 4px 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.filter-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 7px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-body);
    white-space: nowrap;
}
.filter-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.filter-btn.active {
    background: var(--accent);
    color: #0b0c10;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(235, 94, 40, 0.4);
}
.filter-btn:active {
    transform: translateY(1px);
}

/* Grid Container */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--container-pad, 24px);
    transition: opacity 0.3s ease;
}

/* Card Base */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                opacity 0.35s ease,
                scale 0.35s ease;
    height: clamp(170px, 24vh, 200px);
    display: flex;
    flex-direction: column;
}
.project-card.hidden {
    display: none !important;
}
.project-card.is-filtering {
    opacity: 0;
    transform: scale(0.96);
}
.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(235, 94, 40, 0.6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(235, 94, 40, 0.2);
}

/* Card Image */
.project-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-card-image img {
    transform: scale(1.06);
}

/* Hover Action Pill */
.project-card-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.project-card:hover .project-card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.project-card-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15, 15, 15, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    padding: 5px 12px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Card Details */
.project-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 16px 12px;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.95) 0%, rgba(10, 10, 12, 0.6) 60%, transparent 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.project-card-type {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(235, 94, 40, 0.14);
    border: 1px solid rgba(235, 94, 40, 0.3);
    padding: 2px 8px;
    border-radius: 9999px;
    margin-bottom: 2px;
    backdrop-filter: blur(6px);
}
.project-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 1.2px;
    color: #ffffff;
    line-height: 1.15;
}
.project-card-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   ADAPTIVE SCREEN-FIT ENGINE (Never giant, never overlapping)
   ------------------------------------------------------------ */
@media (min-width: 901px) {
    /* 1 Item: Elegant Featured Card (Centered, Never Billboard-Wide) */
    .projects-grid[data-count="1"] {
        display: flex;
        justify-content: center;
    }
    .projects-grid[data-count="1"] .project-card {
        width: 100%;
        max-width: 580px;
        height: clamp(270px, 40vh, 330px);
    }

    /* 2 Items: Centered Dual Cards (Clear separation, never touching/overlapping) */
    .projects-grid[data-count="2"] {
        display: flex;
        justify-content: center;
        gap: 24px;
        max-width: 1040px;
        margin: 0 auto;
    }
    .projects-grid[data-count="2"] .project-card {
        flex: 1 1 0;
        max-width: 480px;
        height: clamp(270px, 40vh, 330px);
    }

    /* 3 Items: Balanced Single Row */
    .projects-grid[data-count="3"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1160px;
        margin: 0 auto;
    }
    .projects-grid[data-count="3"] .project-card {
        height: clamp(260px, 39vh, 320px);
    }

    /* 4 Items: Balanced Single Row */
    .projects-grid[data-count="4"] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 1240px;
        margin: 0 auto;
    }
    .projects-grid[data-count="4"] .project-card {
        height: clamp(250px, 38vh, 310px);
    }

    /* 5 & 6 Items: Compact 3-Column Grid */
    .projects-grid[data-count="5"],
    .projects-grid[data-count="6"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        max-width: 1160px;
        margin: 0 auto;
    }
    .projects-grid[data-count="5"] .project-card,
    .projects-grid[data-count="6"] .project-card {
        height: clamp(170px, 24vh, 195px);
    }

    /* 7 & 8 Items: Compact 4-Column Grid */
    .projects-grid[data-count="7"],
    .projects-grid[data-count="8"],
    .projects-grid:not([data-count]) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 1240px;
        margin: 0 auto;
    }
    .projects-grid[data-count="7"] .project-card,
    .projects-grid[data-count="8"] .project-card,
    .projects-grid:not([data-count]) .project-card {
        height: clamp(170px, 24vh, 195px);
    }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 40px;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-inner {
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.lightbox-close {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s;
    z-index: 10;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.lightbox-gallery { overflow: hidden; }
.lightbox-gallery img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
}
.lightbox-details { padding: 36px; }
.lightbox-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 2px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.lightbox-meta-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.lightbox-meta-item:last-child { border-bottom: none; }
.lightbox-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.lightbox-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ============================================================
   BEFORE / AFTER — Framer-style Horizontal Comparison with Soft Fade
   ============================================================ */
.beforeafter-section {
    padding: 100px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ba-container {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    touch-action: none;
    --slider-pos: 50%;
}
.ba-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ba-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}
.ba-after {
    z-index: 1;
}
/* BEFORE layer with smooth feathered soft-fade edge */
.ba-before {
    z-index: 2;
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(var(--slider-pos, 50%) - 28px),
        transparent calc(var(--slider-pos, 50%) + 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(var(--slider-pos, 50%) - 28px),
        transparent calc(var(--slider-pos, 50%) + 28px),
        transparent 100%
    );
    will-change: mask-image, -webkit-mask-image;
}
/* Pill Badges */
.ba-label {
    position: absolute;
    top: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: #ffffff;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: opacity 0.25s ease;
}
.ba-label-before {
    left: 20px;
}
.ba-label-after {
    right: 20px;
}
/* Slider Divider Line & Circular Handle */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slider-pos, 50%);
    width: 2px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    will-change: left;
}
/* Soft fade transition divider line */
.ba-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 15%,
        rgba(255, 255, 255, 0.9) 85%,
        rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.35), 0 0 25px rgba(0, 0, 0, 0.5);
}
.ba-handle-circle {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.ba-container:hover .ba-handle-circle {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.ba-container.is-dragging .ba-handle-circle {
    transform: scale(1.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
.ba-placeholder-note {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 14px;
}

@media (max-width: 600px) {
    .ba-container {
        border-radius: 14px;
        aspect-ratio: 4 / 3;
    }
    .ba-label {
        top: 12px;
        font-size: 0.65rem;
        padding: 4px 10px;
    }
    .ba-label-before {
        left: 12px;
    }
    .ba-label-after {
        right: 12px;
    }
    .ba-handle-circle {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   WHY CHOOSE US — ScrollTextFade Component
   Inspired by https://framer.com/m/ScrollTextFade-QYMODL.js
   Fixed-height sticky stage with smooth vertical translation,
   center item bright + accented with draw underline and glow halo,
   edge fade mask, interactive scroll & auto-sliding when idle.
   ============================================================ */
.why-section {
    padding: 100px 0 110px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.scroll-text-fade-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 36px auto 0;
    height: 560px;
    border-radius: 24px;
    background: radial-gradient(ellipse at center, #17171a 0%, #0d0d0f 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    overscroll-behavior: contain;
    touch-action: none;
}
.scroll-text-fade-container.is-dragging {
    cursor: grabbing;
}

/* Subtle edge feathering only */
.stf-vignette {
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 20;
    pointer-events: none;
}
.stf-vignette-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(13, 13, 15, 0.8) 0%, transparent 100%);
}
.stf-vignette-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(13, 13, 15, 0.8) 0%, transparent 100%);
}

/* Stage & Track */
.stf-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 16px 40px;
    box-sizing: border-box;
}

.stf-track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    will-change: transform;
    transform: translateY(0);
}

/* Items */
.stf-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 16px;
    cursor: pointer;
    will-change: transform, opacity;
}


.stf-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    letter-spacing: 2.5px;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
    transition: color 0.25s ease;
}

/* Glow Halo Effect */
.stf-glow-halo {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(220px, 65%, 480px);
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(235, 94, 40, 0.5), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Underline Draw Effect matching Framer */
.stf-accent-line {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #ffd166);
    width: 0px;
    margin-top: 8px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stf-subtitle {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 52ch;
    margin: 6px auto 0;
}

/* Side Pagination Indicators - Ultra-Subtle Minimalist Numbers */
.stf-pagination {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 30;
    pointer-events: auto;
}

.stf-dot {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    opacity: 0.18;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, color 0.3s ease, transform 0.25s ease;
    padding: 2px 6px;
    border-radius: 2px;
}
.stf-dot:hover {
    opacity: 0.45;
    color: #ffffff;
}
.stf-dot.active {
    opacity: 0.75;
    color: var(--accent);
    font-weight: 600;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: scale(1.06);
}

/* Ambient Scroll Hint - hidden to keep clean unobstructed view */
.stf-hint {
    display: none;
}
.stf-hint-icon {
    font-size: 0.85rem;
    color: var(--accent);
    animation: bounceUpDown 2s infinite ease-in-out;
}
@keyframes bounceUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-text-fade-container {
        height: 500px;
        margin-top: 28px;
        border-radius: 18px;
    }
    .stf-stage {
        padding: 0 16px 0 16px;
    }
    .stf-pagination {
        right: 8px;
        gap: 4px;
    }
    .stf-dot {
        width: 22px;
        height: 18px;
        font-size: 0.62rem;
    }
    .stf-title {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem);
    }
    .stf-subtitle {
        font-size: 0.82rem;
        max-width: 90%;
    }
}

/* ============================================================
   PROCESS — Framer-Inspired AnimatedPath Workflow
   Path: https://framer.com/m/AnimatedPath-zpq9rv.js — smooth
   uninterrupted curved path with a glowing animated trail and
   pulsing nodes. Cards: Framer "Card — Folder"
   (https://cards-folder.framer.website/).
   ============================================================ */
/* Kept deliberately tight: the workflow is meant to read in one screen,
   so the header gives up its usual air and the cards take it. Everything
   in the cards is measured in --process-u (one design pixel), and on
   desktop that unit scales with the viewport height, so the two card rows
   plus the wave always finish inside the fold. */
.process-section {
    --process-u: 1px;
    --process-h: 610px;
    padding: 40px 0 44px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.process-section .section-header { margin-bottom: 26px; }
.process-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    line-height: 1.05;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.process-section .section-subtitle { max-width: 560px; }

@media (min-width: 901px) {
    .process-section {
        --process-h: clamp(420px, calc(100vh - 360px), 760px);
        --process-u: calc(var(--process-h) / 610);
    }
}

/* The band is exactly 1200 design units wide, so the 1200x610 SVG overlay
   lands 1:1 on the cards instead of being stretched — and it can grow past
   the page container on tall screens, which is where the cards get wide. */
.process-path-container {
    position: relative;
    width: 100%;
    max-width: min(calc(var(--process-u) * 1200), 100%);
    margin: calc(var(--process-u) * 24) auto 0;
    min-height: var(--process-h);
}

/* SVG Path Overlay */
.process-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.process-svg-desktop {
    display: block;
}
.process-svg-mobile {
    display: none;
}

/* Trail Animation: Infinite Linear Dash Flow matching Framer */
@keyframes smoothProcessFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -1;
    }
}

.process-mask-trail {
    animation: smoothProcessFlow 4.8s linear infinite;
    animation-play-state: paused;
    will-change: stroke-dashoffset;
}

.process-section.is-active-anim .process-mask-trail,
.process-section:hover .process-mask-trail {
    animation-play-state: running;
}

/* Pulsing Node Rings — GPU-composited transform scale instead of CPU layout 'r' */
@keyframes processNodePulse {
    0% {
        transform: scale(0.4);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

.process-node-core {
    fill: var(--accent);
    stroke: #141416;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 8px rgba(235, 94, 40, 0.9));
}

.process-node-halo {
    fill: none;
    stroke: rgba(235, 94, 40, 0.5);
    stroke-width: 1.5px;
    transform-origin: center;
    transform-box: fill-box;
    animation: processNodePulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: var(--node-delay, 0s);
    will-change: transform, opacity;
}

/* ------------------------------------------------------------
   Step Cards — Framer "Card — Folder"
   (https://cards-folder.framer.website/)
   A photo plate under a folder flap that carries the step number and
   an arrow. On hover the flap drops 70px, the document PNG lifts out
   and tilts -10deg, the photo eases open, and every layer rides the
   component's soft spring.
   ------------------------------------------------------------ */
.process-step-cards-wrapper {
    position: relative;
    width: 100%;
    height: var(--process-h);
}

.process-step-card {
    position: absolute;
    /* 400 design units at the 1200-unit design width: three cards plus the
       hairline seams fill the band edge to edge, so the columns touch. */
    width: min(calc(var(--process-u) * 400), 33%);
    height: calc(var(--process-u) * 250);
    background: #0f0f11;
    border: calc(var(--process-u) * 6) solid #17171a;
    border-radius: calc(var(--process-u) * 16);
    overflow: hidden;
    cursor: default;
    z-index: 10;
    transition: border-color 0.4s ease, box-shadow 0.5s ease;
}
.process-step-card:hover,
.process-step-card.is-active,
.process-step-card:focus-within {
    z-index: 12;
    border-color: rgba(232, 98, 26, 0.55);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.62);
}

/* Background plate — Framer GradientMotionBackground
   (https://framer.com/m/GradientMotionBackground-WD0KcZ.js)
   Each step keeps its own colour story, but the flat gradient is replaced
   by the component's composition: soft blurred blobs drifting inside a
   dark base, blended in screen mode. The blobs themselves are injected by
   main.js (positions come from the component's seeded PRNG) and are only
   ever moved with a transform. */
.process-card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--card-base, #0d1219);
    /* the component's container filter: contrast(110%) */
    filter: contrast(110%);
    transform: scale(1);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.process-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0.7) 100%);
}
.process-step-card:hover .process-card-bg,
.process-step-card.is-active .process-card-bg,
.process-step-card:focus-within .process-card-bg { transform: scale(1.14); }

.process-card-blob {
    position: absolute;
    border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
    mix-blend-mode: screen;
    /* 120px in the component; tied to the design unit so it tracks the card */
    filter: blur(calc(var(--process-u) * 110));
    will-change: transform;
    pointer-events: none;
}

/* Per-step palettes: blueprint cool at the desk, weld heat through
   fabrication, steel again at handover. */
.process-step-card[data-step="1"] {
    --card-base: #0b1016;
    --blob-a: #24405c;
    --blob-b: #123049;
    --blob-c: #2f5f7a;
}
.process-step-card[data-step="2"] {
    --card-base: #091014;
    --blob-a: #1b4a52;
    --blob-b: #0f333b;
    --blob-c: #2c6b73;
}
.process-step-card[data-step="3"] {
    --card-base: #1a0a06;
    --blob-a: #7c3208;
    --blob-b: #a8490f;
    --blob-c: #4a1c05;
}
.process-step-card[data-step="4"] {
    --card-base: #240f06;
    --blob-a: #c25712;
    --blob-b: #e8830f;
    --blob-c: #8a3a0c;
}
.process-step-card[data-step="5"] {
    --card-base: #2b1206;
    --blob-a: #e8621a;
    --blob-b: #ff8f3c;
    --blob-c: #c95a12;
}
.process-step-card[data-step="6"] {
    --card-base: #101013;
    --blob-a: #2a2a30;
    --blob-b: #3d3d46;
    --blob-c: #1c1c20;
}

/* 3D Model Asset — pops up from behind the folder flap on hover */
.process-card-sheet {
    position: absolute;
    left: 50%;
    top: 30%;
    width: min(calc(var(--process-u) * 220), 72%);
    height: auto;
    max-width: none;
    aspect-ratio: 2000 / 1414;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6));
    transform: translateX(-50%) translateY(calc(var(--process-u) * 8)) scale(0.92) rotate(0deg);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s ease;
    z-index: 1;
    will-change: transform, filter;
    pointer-events: none;
}
.process-step-card:hover .process-card-sheet,
.process-step-card.is-active .process-card-sheet,
.process-step-card:focus-within .process-card-sheet {
    transform: translateX(-50%) translateY(calc(var(--process-u) * -60)) scale(1.08) rotate(-5deg);
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(235, 94, 40, 0.22));
}

/* Folder flap — panel + tab, carrying the number and the arrow */
.process-card-folder {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    bottom: 0;
    z-index: 2;
    transition: transform 0.95s cubic-bezier(0.34, 1.35, 0.64, 1);
    will-change: transform;
}
.process-step-card:hover .process-card-folder,
.process-step-card.is-active .process-card-folder,
.process-step-card:focus-within .process-card-folder { transform: translateY(calc(var(--process-u) * 70)); }

.process-card-folder::before {
    content: '';
    position: absolute;
    inset: 0 calc(var(--process-u) * 5);
    background: #141416;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-top-right-radius: calc(var(--process-u) * 12);
}
.process-card-tab {
    position: absolute;
    bottom: calc(100% - (var(--process-u) * 2));
    left: calc(var(--process-u) * 5);
    width: 46%;
    height: calc(var(--process-u) * 18);
    background: #141416;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: calc(var(--process-u) * 7) calc(var(--process-u) * 10) 0 0;
}
.process-card-num {
    position: absolute;
    left: calc(var(--process-u) * 14);
    top: calc(var(--process-u) * -7);
    z-index: 3;
    font-family: var(--font-display);
    font-size: calc(var(--process-u) * 30.4);
    line-height: 1;
    letter-spacing: calc(var(--process-u) * 1);
    color: var(--accent);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.process-card-arrow {
    position: absolute;
    top: calc(var(--process-u) * 12);
    right: calc(var(--process-u) * 14);
    z-index: 3;
    display: block;
    width: calc(var(--process-u) * 14);
    height: calc(var(--process-u) * 14);
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-card-arrow svg { display: block; width: 100%; height: 100%; }
.process-step-card:hover .process-card-arrow,
.process-step-card.is-active .process-card-arrow,
.process-step-card:focus-within .process-card-arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
}

/* Step copy — parked on the flap, never moves */
.process-card-text {
    position: absolute;
    left: calc(var(--process-u) * 14);
    /* capped measure: the flap is twice as wide now, so the copy keeps its
       density instead of stretching to a single thin line */
    width: min(calc(var(--process-u) * 250), 62%);
    bottom: calc(var(--process-u) * 13);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: calc(var(--process-u) * 3);
}
.process-step-name {
    font-family: var(--font-display);
    font-size: calc(var(--process-u) * 17.6);
    letter-spacing: calc(var(--process-u) * 1.4);
    line-height: 1.15;
    color: #ffffff;
}
.process-step-desc {
    font-size: calc(var(--process-u) * 10.9);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.66);
}

/* Top Cards: 01, 03, 05 — a 400u card at these centres spans the band
   almost edge to edge, so the rows line up instead of staggering (a
   stagger would push the outer cards past the clipped section edge). */
.process-card-top[data-step="1"] { left: 16.7%; top: 0; transform: translateX(-50%); }
.process-card-top[data-step="3"] { left: 50%; top: 0; transform: translateX(-50%); }
.process-card-top[data-step="5"] { left: 83.3%; top: 0; transform: translateX(-50%); }

/* Bottom Cards: 02, 04, 06 — directly under their column */
.process-card-bottom[data-step="2"] { left: 16.7%; top: calc(var(--process-u) * 360); transform: translateX(-50%); }
.process-card-bottom[data-step="4"] { left: 50%; top: calc(var(--process-u) * 360); transform: translateX(-50%); }
.process-card-bottom[data-step="6"] { left: 83.3%; top: calc(var(--process-u) * 360); transform: translateX(-50%); }

/* Responsive: Mobile & Tablet View (Stacked Vertical Flow) */
@media (max-width: 900px) {
    .process-section {
        padding: 48px 0 56px;
    }
    .process-path-container {
        min-height: auto;
        margin-top: 24px;
    }
    .process-svg-desktop {
        display: none;
    }
    /* Hide the heavy animated SVG path on mobile entirely */
    .process-svg-mobile {
        display: none !important;
    }
    .process-step-cards-wrapper {
        height: auto;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 16px;
    }
    .process-step-card {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 80px;
        /* no hover transitions on mobile */
        transition: none !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    /* Freeze the blob background — no drift animation on mobile */
    .process-card-blob {
        display: none;
    }
    /* Static gradient instead of animated blobs */
    .process-card-bg {
        filter: none !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
    /* No image pop-up on mobile */
    .process-card-sheet {
        display: none;
    }
    /* Kill all hover/active transitions */
    .process-step-card:hover .process-card-bg,
    .process-step-card.is-active .process-card-bg,
    .process-step-card:focus-within .process-card-bg {
        transform: none !important;
    }
    .process-step-card:hover .process-card-folder,
    .process-step-card.is-active .process-card-folder,
    .process-step-card:focus-within .process-card-folder {
        transform: none !important;
    }
    /* Static folder — just show number + text inline */
    .process-card-folder {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        width: 100%;
        padding: 12px 16px 10px;
        transition: none;
        will-change: auto;
    }
    .process-card-folder::before {
        inset: 0;
        border-radius: 0;
    }
    .process-card-tab { display: none; }
    .process-card-text {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        padding: 8px 16px 14px;
        gap: 4px;
    }
    .process-card-num {
        position: relative;
        top: auto;
        left: auto;
        font-size: 1rem;
        display: block;
        margin-bottom: 4px;
    }
    .process-step-name { font-size: 1rem; }
    .process-step-desc { font-size: 0.8rem; }
    /* Pulse halo animation off on mobile */
    .process-node-halo {
        animation: none;
        opacity: 0;
    }
    /* Trail animation off on mobile */
    .process-mask-trail {
        animation: none !important;
    }
    /* No border glow on active/hover */
    .process-step-card:hover,
    .process-step-card.is-active,
    .process-step-card:focus-within {
        box-shadow: none;
        border-color: rgba(232, 98, 26, 0.3);
    }
    .process-card-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .process-mask-trail {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
    .process-node-halo {
        animation: none !important;
    }
    .process-card-bg,
    .process-card-sheet,
    .process-card-folder,
    .process-card-arrow {
        transition: none !important;
    }
    /* the blob drift is stopped from JS; this covers a mid-flight paint */
    .process-card-blob { will-change: auto; }
    .wave-btn-ripples,
    .wave-btn-roll,
    .wave-btn-ripple-3,
    .nova-glow-edge,
    .nova-glow-blur,
    .nova-glow-shine,
    .nova-glow-label { transition: none !important; }
    .nova-glow-btn { animation: none !important; --nova-glow-rotation: 42deg !important; }
    .wave-btn:hover .wave-btn-ripples,
    .wave-btn:focus-visible .wave-btn-ripples { transform: translate(-50%, -50%) translateY(34px) scale(1); }
}

/* ============================================================
   WORKSHOP — Full-bleed horizontal gallery
   ============================================================ */
.workshop-section {
    padding: 100px 0 80px;
    overflow: hidden;
}
/* ============================================================
   WORKSHOP — CMS BEND CAROUSEL (3D Curved Arc & Center Text Reveal)
   ============================================================ */
.workshop-gallery {
    position: relative;
    margin-top: 36px;
    width: 100%;
}
.workshop-stage {
    position: relative;
    height: 520px;
    perspective: 1200px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.workshop-stage.is-dragging {
    cursor: grabbing;
}

/* Edge blur vignettes (Framer module effect) */
.workshop-stage::before,
.workshop-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.workshop-stage::before {
    left: 0;
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
}
.workshop-stage::after {
    right: 0;
    mask-image: linear-gradient(to left, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

.workshop-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* Card: Tall elegant portrait proportions dynamically fitted to stage */
.workshop-item {
    position: absolute;
    top: 15px;
    left: 50%;
    width: clamp(260px, calc((100% - 30px) * 0.72), 360px);
    height: calc(100% - 30px);
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    pointer-events: auto;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.workshop-item:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65);
}
.workshop-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Subtle dark depth tint on non-centered cards */
.workshop-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--depth-dim, 0));
    pointer-events: none;
    transition: background 0.2s ease;
}

/* Center Text Badge: sleek compact floating glassmorphism card at bottom so photo remains full and unblocked */
.workshop-item-overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 14px 12px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.workshop-item.is-center .workshop-item-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.workshop-item-tag {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(235, 94, 40, 0.22);
    border: 1px solid rgba(235, 94, 40, 0.45);
    padding: 2px 8px;
    border-radius: 9999px;
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.workshop-item-label {
    font-family: var(--font-display);
    font-size: 1.18rem;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin-bottom: 2px;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.7);
}
.workshop-item-sub {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
    max-width: 270px;
    line-height: 1.35;
    text-shadow: 0 1px 5px rgba(0,0,0,0.85);
}

/* Navigation Buttons */
.workshop-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}
.workshop-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.workshop-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(235, 94, 40, 0.4);
}
.workshop-nav-btn:active {
    transform: scale(0.96);
}

@media (max-width: 768px) {
    .workshop-stage {
        height: clamp(420px, 54vh, 480px);
    }
    .workshop-item {
        top: 12px;
        width: clamp(250px, 70vw, 310px);
        height: calc(100% - 24px);
        border-radius: 18px;
    }
    .workshop-item-overlay {
        padding: 10px 14px 12px;
    }
    .workshop-item-label {
        font-size: 1.2rem;
    }
    .workshop-item-sub {
        font-size: 0.74rem;
        max-width: 250px;
    }
    .workshop-nav {
        margin-top: 14px;
    }
}

@media (max-width: 480px) {
    .workshop-stage {
        height: clamp(380px, 50vh, 430px);
    }
    .workshop-item {
        top: 10px;
        width: clamp(230px, 76vw, 290px);
        height: calc(100% - 20px);
        border-radius: 16px;
    }
    .workshop-item-overlay {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 8px 12px 10px;
    }
    .workshop-item-label {
        font-size: 1.05rem;
    }
    .workshop-item-sub {
        font-size: 0.7rem;
        max-width: 230px;
    }
    .workshop-nav {
        margin-top: 12px;
    }
}

/* ============================================================
   TEAM — GLIDECAROUSEL (3D Floating Card Carousel with Physics Motion)
   Inspired by https://glidecarousel.framer.website/
   Tall floating portrait cards, multi-axis physics (Magnetic, Wind, Drift),
   smooth inertial drag, bottom control toolbar, and click-to-expand modal.
   ============================================================ */
.team-section {
    padding: 110px 0 100px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.glide-carousel-container {
    position: relative;
    margin-top: 36px;
    width: 100%;
}

/* 3D Perspective Stage */
.glide-stage {
    position: relative;
    height: 520px;
    perspective: 1200px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.glide-stage.is-dragging {
    cursor: grabbing;
}

/* Edge blur vignettes matching Framer module */
.glide-stage::before,
.glide-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    z-index: 20;
    pointer-events: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.glide-stage::before {
    left: 0;
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
}
.glide-stage::after {
    right: 0;
    mask-image: linear-gradient(to left, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

.glide-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* 3D Floating Cards */
.glide-card {
    position: absolute;
    top: 35px;
    left: 50%;
    width: 320px;
    height: 440px;
    margin: 0;
    border-radius: 24px;
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    pointer-events: auto;
}

.glide-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform-style: preserve-3d;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glide-card:hover .glide-card-inner,
.glide-card.is-center .glide-card-inner {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(235, 94, 40, 0.35);
}

/* Inner Media with Parallax Headroom */
.glide-card-media {
    position: absolute;
    inset: -12px;
    overflow: hidden;
    will-change: transform;
}
.glide-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: scale(1.08);
    transition: transform 0.2s ease-out;
}

/* Bottom Card Scrim & Information */
.glide-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.7) 50%, transparent 100%);
    padding: 36px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.glide-card-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
}
.glide-card-role {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
}

/* Side Card Depth Dimming */
.glide-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: rgba(0, 0, 0, var(--depth-dim, 0));
    pointer-events: none;
    transition: background 0.2s ease;
    z-index: 10;
}

/* Navigation Chevrons */
.glide-arrow {
    position: absolute;
    top: 245px;
    z-index: 30;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 20, 24, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.glide-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(235, 94, 40, 0.4);
}
.glide-arrow:active {
    transform: scale(0.96);
}
.glide-arrow-prev { left: 24px; }
.glide-arrow-next { right: 24px; }



/* Click-To-Expand Detail Modal */
.team-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}
.team-modal[hidden] {
    display: none !important;
}
.team-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.team-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 8, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.team-modal-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 440px;
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-modal.is-open .team-modal-card {
    transform: scale(1) translateY(0);
}
.team-modal-image-wrap {
    width: 100%;
    height: 320px;
    overflow: hidden;
    position: relative;
}
.team-modal-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-modal-body {
    position: relative;
    padding: 26px 28px 30px;
    background: #141416;
}
.team-modal-role {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.team-modal-name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 2.5px;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.1;
}
.team-modal-bio {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    letter-spacing: 0.3px;
    margin: 0;
    padding-right: 48px;
}
.team-modal-close {
    position: absolute;
    bottom: 26px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.team-modal-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
}

/* Responsive Breakpoints for GlideCarousel */
@media (max-width: 768px) {
    .glide-stage {
        height: 450px;
    }
    .glide-card {
        top: 25px;
        width: 270px;
        height: 380px;
        border-radius: 20px;
    }
    .glide-card-inner {
        border-radius: 20px;
    }
    .glide-arrow {
        top: 210px;
        width: 40px;
        height: 40px;
    }
    .glide-arrow-prev { left: 10px; }
    .glide-arrow-next { right: 10px; }
}
@media (max-width: 480px) {
    .glide-stage {
        height: 410px;
    }
    .glide-card {
        top: 20px;
        width: 240px;
        height: 340px;
    }
    .glide-arrow {
        top: 190px;
    }
}

/* ============================================================
   TESTIMONIALS — No giant quote marks
   ============================================================ */

/* ============================================================
   TESTIMONIALS — Editorial counter carousel
   Big "1 / 3" counter, small label, one large quote at a time.
   Auto-advances every 6s. Framer-reference style.
   ============================================================ */
.testimonials-section {
    padding: 110px 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
}
.testimonials-carousel {
    max-width: 860px;
    margin: 0 auto;
}
/* Counter — "1 / 3" split around the slash */
.testimonial-counter {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    margin-bottom: 10px;
}
.testimonial-counter-current {
    font-size: 3.4rem;
    line-height: 1;
    color: var(--text-primary);
    min-width: 1.1em;
}
.testimonial-counter-sep {
    font-size: 1.6rem;
    color: var(--text-muted);
    transform: translateY(-2px);
}
.testimonial-counter-total {
    font-size: 1.6rem;
    color: var(--text-muted);
}
.testimonial-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.testimonials-track {
    position: relative;
}
.testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
    pointer-events: none;
}
.testimonial-slide.active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s, visibility 0s;
    pointer-events: auto;
}
.testimonial-content {
    padding: 0;
}
/* Industrial accent line above quote */
.testimonial-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent);
    margin: 0 0 30px;
}
.testimonial-text {
    font-size: clamp(1.35rem, 3.2vw, 2.1rem);
    line-height: 1.45;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 30px;
}
.testimonial-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 3px;
}
.testimonial-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .testimonials-section { padding: 72px 0; }
    .testimonial-counter-current { font-size: 2.6rem; }
    .testimonial-counter-sep,
    .testimonial-counter-total { font-size: 1.2rem; }
    .testimonial-label { margin-bottom: 26px; }
}

/* ============================================================
   CTA — Dark, heavy, dramatic
   ============================================================ */
.cta-section {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
}
.cta-bg {
    position: absolute;
    inset: 0;
}
.cta-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.9);
}
.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.cta-title {
    padding-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6.5vw, 92px);
    letter-spacing: 4px;
    line-height: 1.02;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.cta-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 12px;
}
.cta-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.cta-services {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    flex-wrap: wrap;
}
.cta-services span { padding: 0 14px; }
.cta-dot { color: var(--accent) !important; padding: 0 2px !important; }

/* ============================================================
   CONTACT — Form + info
   ============================================================ */
.contact-section {
    padding: 100px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label,
.form-group .file-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 12px 14px;
    transition: border-color 0.25s;
    outline: none;
    width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.form-group textarea {
    resize: vertical;
    min-height: 110px;
}
.file-upload {
    border: 1px dashed var(--border-strong);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s;
    position: relative;
}
.file-upload:hover { border-color: var(--accent); }
.file-upload:active { border-color: var(--accent-bright); }
.file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.file-upload-icon {
    font-size: 1.2rem;
    color: var(--accent);
}
.file-upload-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.file-upload-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 28px;
    margin-bottom: 20px;
}
.contact-info-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.contact-info-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.contact-info-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
}
.contact-info-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
a.contact-info-value:hover { color: var(--accent); }
a.contact-info-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-map {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
}
.contact-map iframe {
    display: block;
    filter: grayscale(60%) brightness(0.65);
}
.contact-map .btn {
    border: none;
    border-top: 1px solid var(--border);
}

/* ============================================================
   FOOTER — Oversized Wordmark (Framer Footer-Oversized-Wordmark style)
   ============================================================ */
.footer {
    background: #080809;
    border-top: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}

/* Top bar: brand left, links right */
.footer-top-bar {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}
.footer-brand {
    flex: 0 0 auto;
    max-width: 320px;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.footer-logo .nav-logo-text {
    font-family: var(--font-display, var(--font-body));
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
}
.footer-desc {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}
.footer-links-wrap {
    display: flex;
    gap: 56px;
}
.footer-heading {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 0 12px rgba(255,255,255,0.25);
}
.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li,
.footer-links a {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: #ffffff;
    transition: color 0.22s ease, opacity 0.22s ease, transform 0.2s ease;
    text-decoration: none;
}
.footer-links a {
    color: #ffffff;
    opacity: 0.92;
    display: inline-block;
}
.footer-links a:hover {
    color: #ffffff;
    opacity: 1;
    transform: translateX(3px);
    text-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.footer-links li {
    color: #ffffff;
    opacity: 0.92;
}

/* Oversized Wordmark — the main visual centrepiece */
.footer-wordmark-wrap {
    padding: 0;
    line-height: 1;
    overflow: hidden;
    user-select: none;
}
.footer-wordmark {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(80px, 14vw, 200px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.88;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.12);
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.22) 0%,
        rgba(235, 94, 40, 0.18) 50%,
        rgba(255,255,255,0.06) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    padding: 24px 0 0;
    transition: -webkit-text-stroke 0.4s ease;
}
.footer-wordmark:hover {
    -webkit-text-stroke: 1px rgba(235,94,40,0.5);
}

/* Bottom bar */
.footer-bottom {
    padding: 18px 48px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}
.footer-bottom p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.5px;
}
.footer-bottom-links {
    display: flex;
    gap: 28px;
}
.footer-bottom-links a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.22s ease;
}
.footer-bottom-links a:hover { color: #ffffff; }

/* Legacy selectors kept for i18n compat */
.footer-contact-items { display: none; }
.footer-grid { display: none; }


/* ============================================================
   MOBILE BOTTOM CTA — Uniform industrial
   ============================================================ */
.mobile-bottom-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
}
.mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid var(--bg-primary);
}
.mobile-cta-btn:last-child { border-right: none; }
.mobile-cta-call { background: var(--accent); color: #0b0c10; font-weight: 800; }
.mobile-cta-whatsapp { background: #1e7e4a; }
.mobile-cta-quote { background: var(--steel); }

/* ============================================================
   WHATSAPP FLOAT — Bottom-right of the page, desktop only
   (below 769px the sticky bottom bar already carries WhatsApp)
   ============================================================ */
.whatsapp-float {
    display: none;
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 997;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease;
}
.whatsapp-float-icon {
    display: block;
    width: 28px;
    height: 28px;
}
.whatsapp-float:hover {
    background: #2ee070;
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(37, 211, 102, 0.15);
}
.whatsapp-float:active { transform: translateY(-1px); }
.whatsapp-float-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (min-width: 769px) {
    .whatsapp-float { display: flex; }
}

/* ============================================================
   REVEAL — Subtle, not bouncy
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — Tighter on mobile
   ============================================================ */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    :root { --container-pad: 24px; }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-cta {
    font-family: var(--font-display);
    background: var(--accent);
    color: #fff !important;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 2px;
    padding: 10px 24px;
    text-transform: uppercase;
    transition: background 0.25s;
}
    .nav .lang-switcher,
    .nav-lang-topright { display: none !important; }
    .trust-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-image-wrapper img,
    .about-image-wrapper video { height: auto; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    /* Footer wordmark: tablet — reduce wordmark, stack if narrow */
    .footer-top-bar-inner { padding: 0 28px; gap: 32px; }
    .footer-links-wrap { gap: 36px; }
    .footer-bottom { padding: 16px 28px; }
    .lightbox-content { grid-template-columns: 1fr; }
    .lightbox-gallery img { min-height: 220px; }
    /* Responsive Grid on Tablets */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .projects-grid[data-count="1"] {
        display: flex;
        justify-content: center;
    }
    .projects-grid[data-count="1"] .project-card {
        width: 100%;
        max-width: 520px;
        height: 270px;
    }
    .projects-grid:not([data-count="1"]) .project-card {
        height: 200px;
    }
}

@media (max-width: 768px) {
    :root { --container-pad: 16px; }

    /* Nav - Mobile pill adaptations */
    .nav { padding: 10px 14px; }
    .nav-container { width: 100%; max-width: 100%; padding: 5px 8px 5px 14px; }
    .nav-logo-text { font-size: 0.76rem; letter-spacing: 1px; }
    .nav-logo-mark { width: 18px; height: 18px; }

    /* Hero */
    .hero {
        min-height: calc(100svh - 48px);
        min-height: calc(100vh - 48px);
        padding: 85px 0 45px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .hero-content {
        transform: none;
        padding: 0 16px;
        z-index: 3;
    }
    .hero-title {
        font-size: clamp(2.3rem, 10vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: 2px;
        margin-bottom: 14px;
        max-width: 100%;
    }
    body.lang-ne .hero-title {
        font-size: clamp(1.75rem, 6.8vw, 2.7rem);
        line-height: 1.2;
        letter-spacing: 0 !important;
        max-width: 100%;
    }
    .hero-badge { font-size: 0.58rem; letter-spacing: 3px; }
    .hero-subtitle {
        font-size: 0.92rem;
        line-height: 1.5;
        margin: 0 0 24px;
        max-width: 100%;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    .hero-buttons .btn {
        width: 100%;
        min-height: 48px;
        padding: 14px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.74rem;
        letter-spacing: 2px;
    }
    .hero-trust {
        font-size: 0.52rem;
        letter-spacing: 1.5px;
        gap: 4px;
        justify-content: flex-start;
    }
    .hero-trust span { padding: 0 6px; }
    .trust-dot { display: none; }

    /* Section headers */
    .section-title,
    .projects-section .section-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); letter-spacing: 2.5px; }
    .section-desc { font-size: 0.9rem; }

    /* Trust / Stats */
    .trust-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .stat-card { padding: 20px 14px; }
    .stat-number { font-size: 2.2rem; }

    /* About Section */
    .about-image-wrapper { max-height: 300px; }
    .about-image-wrapper img,
    .about-image-wrapper video { height: 100%; object-fit: cover; }

    /* Services Grid */
    .services-grid { grid-template-columns: 1fr; gap: 14px; }
    .service-card {
        display: grid;
        grid-template-columns: 100px 1fr;
        border-radius: 14px;
    }
    .service-card-image { height: 100%; min-height: 120px; }

    /* Mobile Bento: 1 Column Stream */
    /* Filters slide sideways instead of wrapping — the bar makes the
       hidden pills discoverable (touch browsers show it while sliding) */
    .projects-filters-wrapper {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: rgba(232, 98, 26, 0.6) rgba(255, 255, 255, 0.07);
        -webkit-overflow-scrolling: touch;
    }
    .projects-filters-wrapper::-webkit-scrollbar { height: 5px; }
    .projects-filters-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.07);
        border-radius: 999px;
    }
    .projects-filters-wrapper::-webkit-scrollbar-thumb {
        background: rgba(232, 98, 26, 0.6);
        border-radius: 999px;
    }
    .projects-filters-wrapper::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    .projects-filters { flex-wrap: nowrap; gap: 8px; }
    .filter-btn { padding: 8px 16px; font-size: 0.68rem; white-space: nowrap; }

    .projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 16px;
        max-width: 480px;
        margin: 0 auto;
    }
    .project-card {
        min-height: auto;
        height: 210px;
        border-radius: 14px;
    }
    .project-card-title { font-size: 1.1rem; }

    /* Before/After */
    .ba-container {
        aspect-ratio: 16 / 10;
        max-height: 320px;
        border-radius: 16px;
    }

    /* Workshop & Team Carousels */
    .workshop-stage { height: clamp(420px, 54vh, 480px); }
    .workshop-item { width: clamp(250px, 70vw, 310px); height: calc(100% - 24px); }
    .glide-stage { height: 400px; }
    .glide-card { width: 220px; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; gap: 14px; }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
    }

    /* Footer */
    .footer-top-bar { padding: 36px 0 24px; }
    .footer-top-bar-inner { flex-direction: column; padding: 0 16px; gap: 28px; }
    .footer-brand { max-width: 100%; }
    .footer-logo-img { width: 42px; height: 42px; margin-right: 10px; }
    .footer-logo .nav-logo-text { font-size: 1.18rem; }
    .footer-links-wrap { flex-wrap: wrap; gap: 24px; }
    .footer-links { flex: 1 1 130px; }
    .footer-wordmark-wrap { overflow: hidden; max-width: 100vw; }
    .footer-wordmark {
        font-size: clamp(32px, 12.5vw, 90px);
        letter-spacing: -0.01em;
        white-space: normal;
        word-break: break-word;
        line-height: 1;
        padding: 16px 16px 0;
    }
    .footer-bottom { flex-direction: column; gap: 10px; padding: 16px; text-align: center; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 16px; }

    /* Sticky Mobile Bottom CTA */
    .mobile-bottom-cta { display: flex; }
    body { padding-bottom: 50px; }
    .cta-buttons { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
    .cta-buttons .btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .hero-title { font-size: clamp(2.1rem, 9.5vw, 2.6rem); letter-spacing: 1.5px; }
    body.lang-ne .hero-title {
        font-size: clamp(1.48rem, 6.8vw, 2.05rem);
        line-height: 1.22;
        letter-spacing: 0 !important;
        max-width: 100%;
    }
    .hero-subtitle { font-size: 0.84rem; }
    .trust-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stat-card { padding: 16px 10px; }
    .stat-number { font-size: 1.85rem; }
    .stat-label { font-size: 0.62rem; }
    .about-features { grid-template-columns: 1fr; }
    .lightbox { padding: 10px; }
    .lightbox-details { padding: 18px; }
    .mobile-nav-links a { font-size: 1.7rem; letter-spacing: 2px; }
    .cta-title {
    padding-top: 10px; letter-spacing: 1.5px; font-size: 2.2rem; }
    .section-header { margin-bottom: 30px; }
    .hero-scroll { display: none; }
    .workshop-stage { height: clamp(380px, 50vh, 430px); }
    .workshop-item { width: clamp(230px, 76vw, 290px); height: calc(100% - 20px); }
    .glide-stage { height: 360px; }
    .glide-card { width: 200px; }
    .footer-wordmark { font-size: clamp(26px, 11vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
    section { scroll-margin-top: 100px; }
    html { scroll-behavior: auto; }

    .hero-bg-image { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .preloader-fill { transition: none; }
    .btn-primary:active,
    .btn-outline:active,
    .scan-btn:active,
    .nav-cta:active,
    .filter-btn:active,
    .workshop-nav-btn:active,
    .testimonial-btn:active { transform: none; }
    .testimonial-slide,
    .testimonial-slide.active { transition: none; transform: none; }
    .testimonial-card,
    .testimonial-deck.in .testimonial-card { transition: none; transform: rotate(var(--card-rot, 0deg)); opacity: 1; }
    .testimonial-quote .testimonial-text,
    .testimonial-quote .testimonial-name,
    .testimonial-quote .testimonial-role { transition: none; }
    .ba-container .ba-before,
    .ba-container .ba-handle { transition: none; }
    .service-card:hover .service-card-image img,
    .project-card:hover .project-card-image img,
    .workshop-item:hover img { transform: none; }
    .scan-btn::before,
    .scan-btn::after,
    .scan-btn-roll,
    .scan-btn-label-ghost .scan-word { transition: none; }
    .whatsapp-float,
    .whatsapp-float-label { transition: none; }
    .nav-hamburger-icon,
    .hb-top,
    .hb-bottom,
    .hb-middle { transition: none; }
}

/* ============================================================
   RICH CONTENT & MOBILE HANDHELD ENHANCEMENTS
   ============================================================ */
.standards-section,
.guide-section,
.guarantee-section,
.faq-section {
    padding: 96px 0;
    position: relative;
    border-top: 1px solid var(--border);
}

.standards-section { background: var(--bg-secondary); }
.guide-section { background: var(--bg-tertiary); }
.guarantee-section { background: var(--bg-secondary); }
.faq-section { background: var(--bg-primary); }

.standards-grid,
.guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.standard-card,
.guarantee-card,
.guide-article {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 36px 30px;
    border-radius: 4px;
    transition: var(--transition);
    position: relative;
}

.standard-card:hover,
.guarantee-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.standard-card-num {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.9;
}

.standard-card-title,
.guarantee-card-title,
.guide-heading {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.3;
}

.standard-card-text,
.guarantee-card-text,
.guide-para {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.standard-spec-list,
.guide-list {
    list-style: none;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.standard-spec-list li,
.guide-list li {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 18px;
    position: relative;
}

.standard-spec-list li::before,
.guide-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.6rem;
    color: var(--accent);
}

.standard-spec-list strong,
.guide-list strong,
.spec-meta strong {
    color: var(--text-primary);
}

.spec-meta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.guarantee-badge {
    display: inline-block;
    background: rgba(232, 98, 26, 0.12);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 16px;
}

.guide-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 48px;
}

/* ============================================================
   FAQ REVEAL GRID — Framer style (https://faqrevealcard.framer.website/)
   Questions sit in a six-column grid, two columns each. The open card
   widens to four columns and two rows, so the grid reflows around it and
   the whole set stays on one screen at desktop sizes.
   ============================================================ */
.faq-section {
    --faq-gap: 14px;
    --faq-h: clamp(92px, calc((100vh - 500px) / 4), 132px);
    --faq-open-h: calc(var(--faq-h) * 2 + var(--faq-gap));
    --faq-ow: 1.55fr;
    padding: clamp(28px, 3.4vh, 48px) 0;
}

/* the band is sized to sit inside one desktop screen */
.faq-section .section-header {
    margin-bottom: clamp(24px, 3.6vh, 40px);
}

.faq-grid {
    display: flex;
    flex-direction: column;
    margin-top: clamp(20px, 3vh, 34px);
}

.faq-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.32s ease, border-radius 0.32s ease, box-shadow 0.32s ease;
}

.faq-card:hover,
.faq-card:focus-within,
.faq-card.is-open {
    background: var(--accent);
    border-bottom-color: transparent;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(232, 98, 26, 0.22);
}

.faq-card-header {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 34px 90px 34px 32px;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-card-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.faq-card-num {
    flex: 0 0 auto;
    margin-right: 16px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.5;
    align-self: flex-start;
    margin-top: 7px;
    transition: opacity 0.3s ease;
}

.faq-card:hover .faq-card-num,
.faq-card.is-open .faq-card-num { opacity: 1; }


.faq-card-q {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.faq-card-icon {
    position: absolute;
    right: 32px;
    top: 50%;
    margin-top: -22px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--text-primary);
    flex-shrink: 0;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-card:hover .faq-card-icon,
.faq-card.is-open .faq-card-icon {
    border-color: var(--bg-primary);
    color: var(--bg-primary);
}

.faq-card.is-open .faq-card-icon { transform: rotate(-45deg); }



.faq-icon-line {
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, background 0.3s;
}



.faq-icon-h { width: 11px; height: 1.6px; }
.faq-icon-v { width: 1.6px; height: 11px; }

.faq-card.is-open .faq-icon-v {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

/* the answer — 0fr closed, 1fr open */
.faq-card.is-open {
    z-index: 2;
}

.faq-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.faq-card.is-open .faq-card-body {
    max-height: 1000px;
}

.faq-card-body-inner {
    padding: 0 90px 0 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s, padding 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card.is-open .faq-card-body-inner {
    opacity: 1;
    visibility: visible;
    padding: 14px 90px 30px 32px;
}

.faq-card-body-inner::-webkit-scrollbar { width: 5px; }
.faq-card-body-inner::-webkit-scrollbar-track { background: transparent; }
.faq-card-body-inner::-webkit-scrollbar-thumb { background: rgba(255, 122, 46, 0.45); border-radius: 5px; }

.faq-card-body-inner p {
    margin: 0;
    max-width: 640px;
    padding-top: 0;
    border-top: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

/* link through to the standalone FAQ page (shown where the grid is trimmed) */
.faq-explore-link {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

.faq-explore-link:hover {
    color: var(--accent-bright);
    transform: translateX(3px);
}

.faq-explore-link svg { flex: 0 0 auto; }

/* ---- standalone FAQ page: two columns, every card opens in place ---- */
/* two flowing columns, so an open card leaves no gap beside it */
/* padding-top must clear the fixed navbar (~70px) + breathing room */
.faq-section.faq-page {
    padding-top: 165px !important;
    padding-bottom: 96px !important;
}
.faq-page .faq-grid {
    display: block;
    columns: 2;
    column-gap: 16px;
    margin-top: 36px;
}

.faq-page .faq-card {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
}

.faq-page .faq-card,
.faq-page .faq-card.is-open {
    grid-column: auto;
    grid-row: auto;
}

.faq-back-link {
    margin-top: 34px;
    font-size: 0.85rem;
}

.faq-back-link a {
    color: var(--accent);
    text-decoration: none;
}

.faq-back-link a:hover { color: var(--accent-bright); }

/* short screens: pull the title in so the grid still lands above the fold */
@media (max-height: 880px) {
    .faq-section .section-title {
        font-size: clamp(2.2rem, 3.8vw, 3.2rem);
        letter-spacing: 2.5px;
    }

    /* short windows: smaller tiles + 2-line questions keep the grid above the fold */
    .faq-section {
        --faq-h: clamp(76px, calc((100vh - 500px) / 4), 104px);
    }

    .faq-card-q {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ---- below the six-column grid: four questions, then the FAQ page ---- */
@media (max-width: 1023px) {
    .faq-section {
        --faq-row: auto;
        padding: 64px 0;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
        margin-top: 32px;
    }

    .faq-card,
    .faq-card.is-open {
        grid-column: auto;
        grid-row: auto;
    }

    .faq-grid {
        transition: none;
    }

    .faq-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

    .faq-grid--reveal .faq-card:nth-child(n + 5) { display: none; }

    .faq-explore-link { display: inline-flex; }

    .faq-section.faq-page {
        padding-top: 130px !important;
        padding-bottom: 64px !important;
    }
    .faq-page .faq-grid { columns: 1; }
    .faq-page .faq-section .section-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); letter-spacing: 2.5px; }
}

/* Form status states */
.form-status-success {
    border-color: #25d366 !important;
    background: rgba(37, 211, 102, 0.08) !important;
    color: #e0f8e9 !important;
}

.form-status-error {
    border-color: #ff5555 !important;
    background: rgba(255, 85, 85, 0.08) !important;
    color: #ffdada !important;
}

/* Mobile Handheld Ergonomics */
@media (max-width: 768px) {
    .standards-section,
    .guide-section,
    .guarantee-section,
    .faq-section {
        padding: 64px 0;
    }

    .standards-grid,
    .guarantee-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .standard-card,
    .guarantee-card,
    .guide-article {
        padding: 24px 20px;
    }


    /* Handheld form inputs: prevent iOS zoom */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
        min-height: 48px;
    }

    /* Ergonomic bottom bar */
    .mobile-bottom-cta {
        padding: 8px 12px;
        gap: 8px;
    }

    .mobile-cta-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    .mobile-cta-btn:active {
        transform: scale(0.96);
    }
}



/* ==========================================================================
   SERVICE LIGHTBOX — Framer "CMS Dynamic Lightbox" (modalAnimation: Scale)
   Geometry taken from the component instance:
     modalMaxWidth 960 · modalMaxHeightVh 90 · modalPadding 40
     modalRadius 16 · modalBackground #fff · lockScroll
     closeButton position Outside (inset 14) · overlay closes · background blur 8
     transition spring(duration .4, bounce .2) → cubic-bezier(.34, 1.32, .64, 1)
   ========================================================================== */
.service-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.34s cubic-bezier(0.34, 1.32, 0.64, 1), visibility 0.34s;
}

.service-lightbox[hidden] {
    display: none !important;
}

.service-lightbox[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.service-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.service-lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    perspective: 1000px;
}

.service-lightbox-card {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    color: #141416;
    border-radius: 16px;
    /* the close button sits OUTSIDE the panel, so the panel must not clip */
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.08);
    /* top/left/width/height/border-radius are driven by JS: the trigger card
       morphs into this panel (Framer layout animation on modalAnimation: Scale) */
    will-change: top, left, width, height, border-radius;
    transform-origin: top left;
}

/* Close button — component default: closeButton.position "Outside", inset 14 */
.service-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.service-lightbox[aria-hidden="false"] .service-lightbox-close {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.46s;
}

.service-lightbox-close:hover {
    background: var(--accent);
    color: #ffffff;
    transform: scale(1.08);
}

/* Hero — bleeds to the panel edges by cancelling the 40px modal padding */
.service-lightbox-hero {
    position: relative;
    margin: -40px -40px 24px;
    height: 260px;
    flex-shrink: 0;
    overflow: hidden;
    background: #101014;
}

.service-lightbox-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0) 100%);
}

.service-lightbox-title {
    position: relative;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #101014;
    margin: 0 0 18px;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-lightbox[aria-hidden="false"] .service-lightbox-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.34s;
}

.service-lightbox-body {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555555;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-lightbox[aria-hidden="false"] .service-lightbox-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.42s;
}

.service-lightbox-body p {
    margin-bottom: 1.5rem;
}

.service-lightbox-body h3 {
    color: #222222;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.service-lightbox-body ul {
    margin-bottom: 2rem;
    padding-left: 0;
}

.service-lightbox-body li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 18px;
}

.service-lightbox-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 6px;
    height: 6px;
    background: var(--accent);
}

.service-lightbox-body li strong {
    color: #141416;
}

.service-lightbox-cta {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-lightbox[aria-hidden="false"] .service-lightbox-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

@media (max-width: 768px) {
    .service-lightbox-container {
        padding: 0;
    }
    .service-lightbox-scroll {
        padding: 1.5rem;
    }
    .service-lightbox-hero {
        margin: -24px -24px 18px;
        height: 180px;
    }
    .service-lightbox-title {
        font-size: 2rem;
    }
    .service-lightbox-close {
        top: 10px;
        right: 10px;
    }
}

/* --- PANEL SURFACE + SCROLL AREA (component: modalPadding 40, lockScroll) --- */
.service-lightbox-scroll {
    position: relative;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    padding: 2.5rem;
    border-radius: inherit;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cccccc transparent;
}
.service-lightbox-scroll::-webkit-scrollbar { width: 6px; }
.service-lightbox-scroll::-webkit-scrollbar-track { background: transparent; }
.service-lightbox-scroll::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 6px; }

.service-lightbox-close {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333333 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
}

.service-lightbox-body {
    color: #555555 !important;
    font-size: 1.15rem !important;
}

.service-lightbox-body h3 {
    color: #222222 !important;
}

/* --------------------------------------------------------------------------
   LIGHTBOX PANEL INTERNALS
   -------------------------------------------------------------------------- */
.service-lightbox-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 1.5px;
}

.service-lightbox-hero {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.service-lightbox[aria-hidden="false"] .service-lightbox-hero {
    opacity: 1;
}

.service-lightbox[aria-hidden="false"] .service-lightbox-badge {
    animation: lightboxBadgeIn 0.5s cubic-bezier(0.34, 1.32, 0.64, 1) 0.5s both;
}

@keyframes lightboxBadgeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* closing: keep the panel visible while it morphs back into its card */
.service-lightbox.is-closing {
    opacity: 1;
    pointer-events: none;
}

/* the component locks page scroll while the modal is open */
body.lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .service-lightbox,
    .service-lightbox-hero,
    .service-lightbox-title,
    .service-lightbox-body,
    .service-lightbox-cta,
    .service-lightbox-close {
        transition: none !important;
    }
    .service-lightbox[aria-hidden="false"] .service-lightbox-badge {
        animation: none;
        opacity: 1;
    }
    .faq-card,
    .faq-card-icon,
    .faq-icon-line,
    .faq-card-body,
    .faq-card-body-inner {
    padding: 0 90px 0 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s, padding 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
}


body.lang-ne .service-lightbox-title {
    font-family: var(--font-nepali);
    letter-spacing: 0;
}

/* --- mobile geometry (must follow the panel/scroll rules above) --- */
@media (max-width: 768px) {
    .service-lightbox-scroll {
        padding: 1.5rem;
    }
    .service-lightbox-hero {
        margin: -24px -24px 18px;
        height: 180px;
    }
    .service-lightbox-title {
        font-size: 1.9rem;
    }
    .service-lightbox-body {
        font-size: 1rem !important;
    }
    .service-lightbox-close {
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   SUBPAGES (engineering-excellence / fabrication-guide / quality-commitment)
   ============================================================ */
.page-hero {
    padding: calc(80px + 4vh) 0 4vh;
    background:
        radial-gradient(60% 90% at 85% 0%, rgba(232, 98, 26, 0.08), transparent 60%),
        var(--bg-primary);
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent-bright); }
.breadcrumb span[aria-hidden] { color: var(--text-muted); opacity: 0.5; }
.breadcrumb span[aria-current] { color: var(--accent); }
.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    letter-spacing: 4px;
    line-height: 1.05;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.page-hero-sub {
    max-width: 620px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}
/* the imported section keeps its own padding; trim the top so it hugs the hero */
.page-engineering-excellence .standards-section,
.page-fabrication-guide .guide-section,
.page-quality-commitment .guarantee-section {
    padding-top: 40px;
}
.page-related { padding: 30px 0 90px; }
.page-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    border-top: 1px solid var(--border);
    padding-top: 30px;
}
.page-related-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--bg-card);
    transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.page-related-link:hover, .page-related-link:focus-visible {
    border-color: var(--accent);
    color: var(--accent-bright);
    transform: translateY(-2px);
}
.page-related-link svg { transition: transform var(--transition); }
.page-related-link:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
    .page-hero { padding: calc(70px + 2vh) 0 3vh; }
    .breadcrumb { letter-spacing: 1.5px; }
}

/* ============================================================
   TESTIMONIALS — Framer "Testimonials" photo-deck port
   Front card straight + opaque; back cards rotated & dimmed;
   0.35s cubic-bezier(.22,1,.36,1) tween; spring-in entrance.
   ============================================================ */
.testimonial-deck-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 26px;
    max-width: 980px;
    margin: 0 auto;
}
.testimonial-deck {
    position: relative;
    grid-row: 1 / span 2;
    width: clamp(200px, 24vw, 260px);
    aspect-ratio: 276 / 340;
    touch-action: pan-y;
}
.testimonial-card {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: rotate(var(--card-rot, 0deg)) translateY(14px) scale(0.97);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
/* entrance: spring-ish pop (component: spring 0.4, bounce 0.2) */
.testimonial-deck.in .testimonial-card {
    opacity: 1;
    transform: rotate(var(--card-rot, 0deg));
    transition:
        transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.4s ease;
}
.testimonial-card.is-front {
    transform: rotate(0deg);
    z-index: 3;
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
}
.testimonial-card.is-mid {
    opacity: 0.55;
    z-index: 2;
}
.testimonial-card.is-back {
    opacity: 0.55;
    z-index: 1;
}
/* role states must win over the .in entrance rule (same specificity, later) */
.testimonial-deck.in .testimonial-card.is-front { transform: rotate(0deg); }
.testimonial-deck.in .testimonial-card.is-mid,
.testimonial-deck.in .testimonial-card.is-back { opacity: 0.55; }
.testimonial-card-photo {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.testimonial-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testimonial-card-caption {
    display: none;
    padding: 14px 16px 16px;
    flex: 0 0 auto;
}
.testimonial-card-title {
    font-family: var(--font-nepali), var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.testimonial-card-text {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* side column: quote + controls */
.testimonial-side {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.testimonial-quote .testimonial-text {
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 22px;
    transition: opacity 0.28s ease;
}
.testimonial-quote.is-swapping .testimonial-text { opacity: 0; }
.testimonial-quote cite { font-style: normal; }
.testimonial-quote .testimonial-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 3px;
    transition: opacity 0.28s ease;
}
.testimonial-quote .testimonial-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: opacity 0.28s ease;
}
.testimonial-quote.is-swapping .testimonial-name,
.testimonial-quote.is-swapping .testimonial-role { opacity: 0; }
.testimonial-controls {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: start;
}
.testimonial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.testimonial-btn:hover,
.testimonial-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent-bright);
}
.testimonial-btn:active { transform: scale(0.94); }
.testimonial-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-primary);
    min-width: 64px;
    text-align: center;
}
.testimonial-counter > span { line-height: 1; display: inline-block; transform: translateY(-1px); }
.testimonial-counter-sep { color: var(--text-muted); font-size: 0.9rem; transform: none; }
#testimonialTotal { color: var(--text-muted); }
/* mobile: deck on top, quote under, full-width */
@media (max-width: 820px) {
    .testimonial-deck-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
        text-align: center;
    }
    .testimonial-deck {
        grid-row: 1;
        grid-column: 1;
        width: clamp(200px, 56vw, 260px);
    }
    .testimonial-side { grid-row: 2; grid-column: 1; }
    .testimonial-controls { grid-row: 3; grid-column: 1; justify-self: center; }
    .testimonial-quote .testimonial-name { letter-spacing: 1px; }
}

/* ------------------------------------------------------------
   WORK PROCESS POPUP
   Clicking a step card opens the shared service lightbox — the
   same CMS lightbox morph the WE BUILD cards use — carrying that
   step's model render on its own card gradient, with its number,
   name, description and the quote CTA.
   ------------------------------------------------------------ */
.process-step-card {
    cursor: pointer;
    outline: none;
}
.process-step-card:focus-visible {
    border-color: rgba(232, 98, 26, 0.85);
    box-shadow: 0 0 0 2px rgba(232, 98, 26, 0.45), 0 22px 46px rgba(0, 0, 0, 0.62);
}

/* The popup keeps the card look: the model render sits contained on
   the step's gradient instead of being cropped like a photo. */
.service-lightbox.is-step .service-lightbox-hero {
    height: 230px;
}
.service-lightbox-hero.is-step img {
    object-fit: contain;
    padding: 14px 18px 6px;
}
.service-lightbox.is-step .service-lightbox-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
@media (max-width: 640px) {
    .service-lightbox.is-step .service-lightbox-hero {
        height: 180px;
    }
    .service-lightbox-hero.is-step img {
        padding: 10px 12px 4px;
    }
}

/* ------------------------------------------------------------
   STANDARDS DROPDOWN — access to the three standards pages.
   Opens on hover and via the caret (touch/keyboard); the label
   itself still navigates to Engineering Excellence.
   ------------------------------------------------------------ */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}
/* hover bridge: keeps the menu open across the gap under the label */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    height: 18px;
}
.nav-drop-caret {
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    transition: color 0.25s;
}
.nav-drop-caret:hover, .nav-dropdown.open .nav-drop-caret { color: var(--text-primary); }
.nav-drop-caret svg { width: 10px; height: 7px; transition: transform 0.25s; }
.nav-dropdown.open .nav-drop-caret svg,
.nav-dropdown:hover .nav-drop-caret svg { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 300px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #121215;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    z-index: 80;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.nav-dropdown-menu { counter-reset: navitem; }
.nav-dropdown-menu a {
    display: flex;
    align-items: baseline;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a::before {
    counter-increment: navitem;
    content: '0' counter(navitem);
    color: var(--accent);
    font-size: 0.6rem;
    margin-right: 12px;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}

/* mobile menu sub-links */
.mobile-sub-link a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 0 4px 22px;
    position: relative;
}
.mobile-sub-link a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 10px;
    height: 1.5px;
    background: var(--accent);
}
.mobile-sub-link a:hover,
.mobile-sub-link a:active { color: var(--accent); }

/* ------------------------------------------------------------
   CONTACT — fit on one desktop screen.
   The section measured 1101px tall against ~831px of usable
   viewport; these are the compounding trims that bring it to
   about 780px while keeping every field, the info card and
   the map. A short-viewport fallback relaxes the paddings.
   ------------------------------------------------------------ */
.contact-section {
    padding: 44px 0 40px;
}
.contact-section .section-header {
    margin-bottom: 18px;
}
.contact-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: 2.5px;
    line-height: 1.05;
    margin-bottom: 0;
    text-transform: uppercase;
}
.contact-grid {
    gap: 40px;
}
.contact-form {
    gap: 10px;
}
.form-row {
    gap: 10px;
}
.form-group {
    gap: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 9px 12px;
}
.form-group textarea {
    min-height: 84px;
}
.form-group .file-upload {
    padding: 12px;
}
.contact-form .btn {
    padding: 12px 28px;
}
.contact-info-card {
    padding: 20px 22px;
    margin-bottom: 12px;
}
.contact-info-title {
    margin-bottom: 12px;
}
.contact-info-items {
    gap: 9px;
}
.contact-info-value {
    font-size: 0.8rem;
}
.contact-map iframe {
    height: 150px;
}
.contact-map .btn {
    padding: 10px 24px;
}
/* short viewports (1366x768 laptops and smaller): trim to one screen */
@media (max-height: 820px) and (min-width: 1025px) {
    .contact-section { padding: 24px 0 22px; }
    .contact-section .section-header { margin-bottom: 10px; }
    .contact-section .section-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); letter-spacing: 2.5px; }
    .contact-grid { gap: 32px; }
    .contact-form { gap: 8px; }
    .form-group input,
    .form-group select,
    .form-group textarea { padding: 8px 12px; }
    .form-group textarea { min-height: 64px; }
    .form-group .file-upload { padding: 8px; }
    .contact-info-card { padding: 16px 18px; }
    .contact-info-items { gap: 7px; }
    .contact-map iframe { height: 110px; }
}

/* landing: the explore link shows at every width (only 4 questions live here) */
.faq-explore-link--always { display: inline-flex; }
/* four questions in a 2x2 bento: two column pairs, two taller rows.
   --faq-open-h is redefined HERE (not inherited from .faq-section) so it
   computes from this grid's --faq-h; closed and expanded both fit one screen */
@media (min-width: 1024px) {
    .faq-grid--reveal {
        --faq-h: clamp(118px, calc((100vh - 620px) / 2), 150px);
        --faq-open-h: calc(var(--faq-h) * 2 + var(--faq-gap));
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--faq-h));
    }
    .faq-grid--reveal .faq-card[data-faq="3"],
    .faq-grid--reveal .faq-card[data-faq="4"] { grid-row: 2; }
}


/* ------------------------------------------------------------
   Mobile menu: STANDARDS accordion.
   The label keeps the big display-link style; the caret button
   expands/collapses the three standards pages with a grid-rows
   slide. JS drives aria-expanded + .is-open.
   ------------------------------------------------------------ */
.mobile-accordion {
    position: relative;
}
.mobile-accordion .mobile-acc-label {
    padding-right: 44px;
}
.mobile-acc-toggle {
    position: absolute;
    top: 2px;
    right: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-acc-toggle svg {
    width: 12px;
    height: 8px;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-acc-toggle:hover,
.mobile-acc-toggle:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}
.mobile-acc-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.mobile-acc-toggle[aria-expanded='true'] svg {
    transform: rotate(180deg);
}
.mobile-acc-panel {
    display: grid;
    grid-template-rows: repeat(3, 0fr);
    transition: grid-template-rows 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-acc-panel > li {
    min-height: 0;
    overflow: hidden;
}
.mobile-accordion.is-open .mobile-acc-panel {
    grid-template-rows: repeat(3, 1fr);
}
/* keep the old sub-link look inside the panel */
.mobile-acc-panel a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 0 4px 22px;
    position: relative;
}
.mobile-acc-panel a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 10px;
    height: 1.5px;
    background: var(--accent);
}
/* belt-and-braces: nothing paints even if a track leaks height */
.mobile-acc-panel > li { visibility: hidden; transition: visibility 0s 0.36s; }
.mobile-accordion.is-open .mobile-acc-panel > li { visibility: visible; transition-delay: 0s; }

.mobile-acc-panel a:hover,
.mobile-acc-panel a:active { color: var(--accent); }
/* Full Nepali coverage: components wired in the coverage pass */
body.lang-ne .workshop-item-tag,
body.lang-ne .workshop-item-sub,
body.lang-ne .glide-card-name,
body.lang-ne .glide-card-role,
body.lang-ne .team-modal-name,
body.lang-ne .team-modal-role,
body.lang-ne .team-modal-bio,
body.lang-ne .stf-hint-text,
body.lang-ne .skip-link,
body.lang-ne .file-upload-hint,
body.lang-ne .lightbox-note,
body.lang-ne .contact-info-value,
body.lang-ne .whatsapp-float-label,
body.lang-ne .footer-bottom a,
body.lang-ne .faq-explore-link { font-family: var(--font-nepali); letter-spacing: 0 !important; }
body.lang-ne .workshop-item-tag { font-size: 0.72rem; }
body.lang-ne .glide-card-role,
body.lang-ne .team-modal-role { font-size: 0.72rem; line-height: 1.5; }
body.lang-ne .team-modal-bio { line-height: 1.9; }
/* ============================================================
   ONE-SCREEN FIT: before-after, why-choose, workshop.
   Each measured ~950-1020px against ~830px usable viewport;
   these are the compounding trims that land each near 750px.
   ============================================================ */
.beforeafter-section,
.why-section,
.workshop-section { padding: 44px 0 40px; }
.beforeafter-section .section-header,
.why-section .section-header,
.workshop-section .section-header { margin-bottom: 18px; }
/* slider: cap the 16/10 box so wide screens don't inflate it */
.ba-container { max-height: clamp(400px, 58vh, 560px); }
.why-section .scroll-text-fade-container { height: clamp(400px, 56vh, 550px); margin-top: 18px; }
.workshop-gallery { margin-top: 18px; }
.workshop-section .workshop-stage { height: clamp(480px, 58vh, 540px); }
@media (max-width: 768px) {
    .workshop-section .workshop-stage { height: clamp(420px, 54vh, 480px); }
}
@media (max-width: 480px) {
    .workshop-section .workshop-stage { height: clamp(380px, 50vh, 430px); }
}
/* short laptops (1366x768): trim a little more */
@media (max-height: 820px) {
    .ba-container { max-height: 54vh; }
    .why-section .scroll-text-fade-container { height: 52vh; }
}


/* ============================================================
   LANDING FAQ — premium stacked list (faqpremiumv1 style)
   Rows light up in the accent colour on hover/open; the answer
   slides open beneath the question; a workshop photo floats at
   the row's right edge, tilted, following the cursor slightly.
   ============================================================ */

/* on the accent fill, question + number flip dark like the reference */
.faq-card:hover .faq-card-q,
.faq-card:focus-within .faq-card-q,
.faq-card.is-open .faq-card-q,
.faq-card:hover .faq-card-num,
.faq-card:focus-within .faq-card-num,
.faq-card.is-open .faq-card-num { color: var(--bg-primary); }
.faq-page .faq-card:hover .faq-card-q,
.faq-page .faq-card.is-open .faq-card-q,
.faq-page .faq-card:hover .faq-card-num,
.faq-page .faq-card.is-open .faq-card-num { color: var(--text-primary); }
.faq-grid--reveal { max-width: 1020px; margin-left: auto; margin-right: auto; }
.faq-grid--reveal .faq-card:first-child { border-top: 1px solid rgba(255, 255, 255, 0.09); }

.faq-float {
    position: absolute;
    right: 110px;
    top: 50%;
    width: 200px;
    height: 236px;
    margin-top: -118px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: scale(0.8) rotate(-8deg) translateX(24px);
    transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card.is-open .faq-float,
.faq-card:hover .faq-float {
    opacity: 1;
    transform: scale(1) rotate(-3deg) translateX(0);
}

.faq-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

.faq-explore-link { margin-top: 30px; }

@media (max-width: 1350px) { .faq-float { right: 64px; } }

@media (max-width: 1023px) {
    .faq-grid--reveal { gap: 0; }
    .faq-float { display: none; }
    .faq-grid--reveal .faq-card-header { padding: 22px 66px 22px 0; }
    .faq-grid--reveal .faq-card-icon { right: 6px; width: 38px; height: 38px; margin-top: -19px; }
    .faq-grid--reveal .faq-card-q { font-size: 1.05rem; }
    .faq-grid--reveal .faq-card-num { font-size: 0.95rem; margin-top: 3px; }
    .faq-grid--reveal .faq-card-body-inner {
    padding: 0 90px 0 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s, padding 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
    .faq-grid--reveal .faq-card.is-open .faq-card-body-inner {
    opacity: 1;
    visibility: visible;
    padding: 14px 90px 30px 32px;
}
}

/* ---- standalone FAQ page: keeps the plated card look ---- */
.faq-page .faq-card {
    background: #121215;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 16px;
}
.faq-page .faq-card:hover,
.faq-page .faq-card:focus-within,
.faq-page .faq-card.is-open {
    background: #16161a;
    border-color: rgba(255, 122, 46, 0.42);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}
.faq-page .faq-card-header { padding: 24px 70px 24px 24px; gap: 14px; }
.faq-page .faq-card-q { font-size: 1.02rem; }
.faq-page .faq-card-num { font-size: 0.8rem; margin-top: 2px; }
.faq-page .faq-card-icon { right: 22px; width: 34px; height: 34px; margin-top: -17px; }
.faq-page .faq-card-body-inner {
    padding: 0 90px 0 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s, padding 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-page .faq-card.is-open .faq-card-body-inner {
    opacity: 1;
    visibility: visible;
    padding: 14px 90px 30px 32px;
}
.faq-page .faq-card-body-inner p { font-size: 0.92rem; }






body.lang-ne .nav-links a { font-family: var(--font-nepali) !important; font-size: 1rem !important; letter-spacing: 0 !important; }
body.lang-ne .nav-cta { font-family: var(--font-nepali) !important; font-size: 1.05rem !important; letter-spacing: 0 !important; }

.nav-links a::before { display: none !important; }
.nav-links a:first-child::before { display: inline-block; }


/* ============================================================
   SCROLL MARGIN TOP — Prevent fixed nav from hiding section headers
   ============================================================ */
section[id],
main > section[id],
footer[id] {
    scroll-margin-top: 96px;
}
@media (max-width: 768px) {
    section[id],
    main > section[id],
    footer[id] {
        scroll-margin-top: 76px;
    }
}


/* Mobile cleanups: hide redundant nav-cta in header on small phones; hide desktop whatsapp float */
@media (max-width: 600px) {
    .nav-container .nav-cta {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .whatsapp-float {
        display: none !important;
    }
}

/* Nepali Typography enhancements & overflow protections */
body.lang-ne .stf-title {
    font-family: var(--font-nepali) !important;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}
body.lang-ne .stf-subtitle {
    font-family: var(--font-nepali) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}
body.lang-ne .coverflow-card-link {
    font-family: var(--font-nepali) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    margin-top: 1px;
}
body.lang-ne .coverflow-card-title {
    font-family: var(--font-nepali) !important;
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}
body.lang-ne .coverflow-card-text {
    font-family: var(--font-nepali) !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
}
.coverflow-card {
    height: clamp(285px, 42vh, 335px);
}

/* Universal guard: absolute zero letter-spacing for Devanagari across all breakpoints */
html[lang="ne"],
html[lang="ne"] *,
html[lang="ne"] *::before,
html[lang="ne"] *::after,
body.lang-ne,
body.lang-ne *,
body.lang-ne *::before,
body.lang-ne *::after {
    letter-spacing: 0 !important;
}



/* ============================================================
   FAQ PAGE NAVBAR CLEARANCE ENFORCEMENT
   Guarantees the fixed floating navigation never overlaps the
   FAQ page header across any screen width or mobile device.
   ============================================================ */
.faq-section.faq-page {
    padding-top: 165px !important;
}
@media (max-width: 900px) {
    .faq-section.faq-page {
        padding-top: 130px !important;
        padding-bottom: 64px !important;
    }
}
@media (max-width: 600px) {
    .faq-section.faq-page {
        padding-top: 110px !important;
        padding-bottom: 48px !important;
    }
}