/* ============================================================
   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: #f0ede8;
    --text-secondary: #9a9692;
    --text-muted: #6a6866;
    --accent: #e8621a;
    --accent-bright: #ff7a2e;
    --accent-dark: #b84d10;
    --steel: #333333;
    --steel-light: #4a4a4a;
    --border: #222222;
    --border-strong: #333333;
    --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
    --font-body: 'Barlow', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-nepali: 'Noto Sans Devanagari', 'Barlow', sans-serif;
    --transition: 0.25s ease;
    --transition-slow: 0.4s ease;
    --container-max: 1280px;
    --container-pad: 32px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    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;
}

body.lang-ne { font-family: var(--font-nepali); }
body.lang-ne .section-title,
body.lang-ne .hero-title,
body.lang-ne .cta-title,
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); }

/* Devanagari needs zero letter-spacing — wide spacing breaks readability */
body.lang-ne .hero-title,
body.lang-ne .hero-badge,
body.lang-ne .hero-subtitle,
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.15; font-size: clamp(2.2rem, 6.5vw, 5rem); }
body.lang-ne .section-title { line-height: 1.2; }
body.lang-ne .cta-title { line-height: 1.15; font-size: clamp(2rem, 4.5vw, 3.5rem); }
body.lang-ne .btn { letter-spacing: 0.5px !important; padding: 16px 28px; }
body.lang-ne .btn-lg { padding: 20px 36px; }
body.lang-ne .nav-cta { letter-spacing: 0.5px !important; }
body.lang-ne .filter-btn { letter-spacing: 0.5px !important; }
body.lang-ne .section-tag { letter-spacing: 2px !important; font-size: 0.6rem; }
body.lang-ne .hero-badge { letter-spacing: 1px !important; font-size: 0.6rem; }
body.lang-ne .mobile-nav-links a { font-size: 1.6rem; letter-spacing: 0 !important; }
body.lang-ne .hero-trust { letter-spacing: 0 !important; }
body.lang-ne .hero-trust span { padding: 0 8px; letter-spacing: 0 !important; }
body.lang-ne .hero-subtitle { line-height: 1.9; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
::selection { background: var(--accent); color: var(--bg-primary); }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 10001;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 700;
}
.skip-link:focus { top: 12px; }
.nav-logo-mark {
    width: 10px;
    height: 28px;
    background: var(--accent);
    flex-shrink: 0;
}
.form-status {
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 12px 14px;
    border: 1px solid var(--accent);
    background: var(--bg-card);
}
.form-status[hidden] { display: none; }
.file-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.lightbox-note {
    margin-top: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Scrollbar */
::-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 */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ============================================================
   MINIMAL PRELOADER — Framer MinimalPreloader component
   Ref: https://framer.com/m/MinimalPreloader-cc1jlH.js@90xfSUueigFLBdzFT7LN
   ============================================================ */
.minimal-preloader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0D0E11;
    opacity: 1;
    pointer-events: auto;
    user-select: none;
}
.minimal-preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px;
    text-align: center;
}
.preloader-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.preloader-mark {
    width: 10px;
    height: 28px;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(235, 94, 40, 0.45);
    flex-shrink: 0;
}
.preloader-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 4px;
    line-height: 1;
    color: var(--text-primary);
}
.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
   ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background 0.3s, border-color 0.3s;
    background: transparent;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 0;
    border-bottom-color: var(--border);
}
.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-logo-icon {
    font-size: 1.6rem;
    color: var(--accent);
    line-height: 1;
}
.nav-logo-text {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 2px;
    line-height: 1.1;
    color: var(--text-primary);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-links a {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary);
    position: relative;
    padding: 4px 0;
    transition: color 0.25s;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lang-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.25s;
    font-family: inherit;
}
.lang-btn:hover, .lang-btn.active { color: var(--accent); }
.lang-divider { color: var(--steel); font-size: 0.7rem; }
.nav-cta {
    background: var(--accent);
    color: #fff !important;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 22px;
    text-transform: uppercase;
    transition: background 0.25s;
}
.nav-cta:hover { background: var(--accent-bright); }
.nav-cta:active { transform: translateY(1px); background: var(--accent-dark); }

/* 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: 10000;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 24px;
}
.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: #fff;
}
.btn-primary:hover {
    background: var(--accent-bright);
}
.btn-primary:active {
    transform: translateY(1px);
    background: var(--accent-dark);
}
.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 — "glow moving button"
   (https://framer.com/m/button-NWXPHb.js@1LDB2ljrpGaPaQ7LFfWY)
   A blurred glow, a gradient rim and a fill inset 2px (which is what
   turns the rim into a 2px stroke). The glow rests as a small blob on
   one edge, opens to fill the plate on hover, and each hover advances
   it one edge round the rim (the component's cycle order).
   ============================================================ */
.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%); }

/* ---- glow moving button ---- */
.glow-btn {
    --glow-c1: #eb5e28;
    --glow-rest-size: 34% 100%;   /* the component's radial-gradient(17% 50%) */
    --glow-rest-end: rgba(255, 255, 255, 0.2);
    --glow-hot-end: #ffd166;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    isolation: isolate;
}
.glow-btn-glow,
.glow-btn-stroke,
.glow-btn-fill {
    position: absolute;
    pointer-events: none;
}

/* the soft halo that spills past the plate */
.glow-btn-glow {
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(closest-side, rgba(235, 94, 40, 0.85) 0%, rgba(235, 94, 40, 0) 100%);
    background-repeat: no-repeat;
    background-size: var(--glow-rest-size);
    background-position: 50% 0%;
    filter: blur(15px);
    transition: background-size 0.8s linear, background-position 0.8s linear;
}
/* the rim: a gradient that the fill's 2px inset turns into a stroke */
.glow-btn-stroke {
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(closest-side, var(--glow-c1) 0%, var(--glow-rest-end) 100%);
    background-repeat: no-repeat;
    background-size: 38% 100%;   /* the component's radial-gradient(19% 50%) */
    background-position: 50% 0%;
    transition: background-size 0.8s linear, background-position 0.8s linear, background-image 0.8s linear;
}
.glow-btn-fill {
    inset: 2px;
    z-index: 1;
    background: rgba(10, 10, 12, 0.45);
}
.glow-btn-label {
    position: relative;
    z-index: 2;
    /* same line box as the wave button's mask, so the pair stays level
       in both languages (Devanagari has a taller line box) */
    display: block;
    line-height: 1.6;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
.glow-btn:hover .glow-btn-label,
.glow-btn:focus-visible .glow-btn-label { color: #fff; }

/* the glow sits on one edge at rest (top is the component's default) */
.glow-btn[data-glow="right"] .glow-btn-glow,
.glow-btn[data-glow="right"] .glow-btn-stroke { background-position: 100% 50%; }
.glow-btn[data-glow="bottom"] .glow-btn-glow,
.glow-btn[data-glow="bottom"] .glow-btn-stroke { background-position: 50% 100%; }
.glow-btn[data-glow="left"] .glow-btn-glow,
.glow-btn[data-glow="left"] .glow-btn-stroke { background-position: 0% 50%; }

/* hover last, so it wins over the edge positions above */
.glow-btn:hover .glow-btn-glow,
.glow-btn:focus-visible .glow-btn-glow {
    background-size: 100% 400%;
    background-position: 50% 50%;
}
.glow-btn:hover .glow-btn-stroke,
.glow-btn:focus-visible .glow-btn-stroke {
    background-image: radial-gradient(closest-side, var(--glow-c1) 0%, var(--glow-hot-end) 100%);
    background-size: 200% 400%;
    background-position: 50% 50%;
}

/* ============================================================
   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.8rem, 5.5vw, 4.5rem);
    letter-spacing: 4px;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.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: 14ch;
}
.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 {
    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.8rem, 5.5vw, 4.5rem);
    letter-spacing: 3.5px;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.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.8rem, 5.5vw, 4.5rem);
    letter-spacing: 3.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.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--accent);
    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.75rem;
    color: var(--text-secondary);
    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.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    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);
}

.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: #ffffff;
    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.72rem;
    color: var(--text-muted);
    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-size: clamp(2.2rem, 4.2vw, 3.4rem);
    margin-bottom: 10px;
}
.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;
    will-change: stroke-dashoffset;
}

/* Pulsing Node Rings */
@keyframes processNodePulse {
    0% {
        r: 6px;
        opacity: 0.9;
    }
    100% {
        r: 17px;
        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;
    animation: processNodePulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: var(--node-delay, 0s);
}

/* ------------------------------------------------------------
   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 {
    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 { 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;
}

/* Document sheet — the PNG supplied per step. Sized off the design unit
   rather than a % of the width, so a wide card cannot stretch it past the
   flap (150u of a 250u card keeps it fully hidden at rest). */
.process-card-sheet {
    position: absolute;
    left: 50%;
    top: 38%;
    width: auto;
    height: calc(var(--process-u) * 150);
    /* beats the global img { max-width: 100% } so the sheet is never
       squeezed by the card's width — its size is the design unit's job */
    max-width: none;
    aspect-ratio: 489 / 409;
    object-fit: cover;
    background: #0f0f11;
    border-radius: calc(var(--process-u) * 5);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%) translateY(0) rotate(0deg);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    will-change: transform;
}
.process-step-card:hover .process-card-sheet {
    transform: translateX(-50%) translateY(calc(var(--process-u) * -46)) rotate(-10deg);
}

/* 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 { 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 {
    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: 80px 0 90px;
    }
    .process-path-container {
        min-height: 1580px;
        margin-top: 36px;
    }
    .process-svg-desktop {
        display: none;
    }
    .process-svg-mobile {
        display: block;
        width: 56px;
        height: 1580px;
        left: 8px;
    }
    .process-step-cards-wrapper {
        height: auto;
        padding-left: 64px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .process-step-card {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        height: 250px;
    }
}

@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,
    .glow-btn-glow,
    .glow-btn-stroke,
    .glow-btn-label { transition: none !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 (370px x 490px) */
.workshop-item {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 370px;
    height: 490px;
    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 Reveal positioned cleanly at bottom of card */
.workshop-item-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.96) 0%, rgba(10, 10, 12, 0.8) 55%, rgba(10, 10, 12, 0.2) 85%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 44px 22px 24px;
    opacity: 0;
    transform: translateY(12px);
    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.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(235, 94, 40, 0.18);
    border: 1px solid rgba(235, 94, 40, 0.35);
    padding: 3px 10px;
    border-radius: 9999px;
    margin-bottom: 8px;
}
.workshop-item-label {
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.15;
}
.workshop-item-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.4px;
    max-width: 280px;
    line-height: 1.4;
}

/* 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: 480px;
    }
    .workshop-item {
        top: 15px;
        width: 310px;
        height: 450px;
        border-radius: 18px;
    }
    .workshop-item-overlay {
        padding: 24px 16px 20px;
    }
    .workshop-item-label {
        font-size: 1.3rem;
    }
    .workshop-item-sub {
        font-size: 0.76rem;
        max-width: 250px;
    }
    .workshop-nav {
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .workshop-stage {
        height: 440px;
    }
    .workshop-item {
        top: 12px;
        width: 280px;
        height: 416px;
        border-radius: 16px;
    }
    .workshop-item-overlay {
        padding: 20px 14px 18px;
    }
    .workshop-item-label {
        font-size: 1.2rem;
    }
    .workshop-item-sub {
        font-size: 0.72rem;
        max-width: 230px;
    }
    .workshop-nav {
        margin-top: 10px;
    }
}

/* ============================================================
   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;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.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.8rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 36px;
}
.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 {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    letter-spacing: 5px;
    line-height: 1.05;
    margin-bottom: 16px;
}
.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 {
    font-size: 0.72rem;
    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.65rem;
    color: var(--text-muted);
}
.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: 260px;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.footer-desc {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
}
.footer-links-wrap {
    display: flex;
    gap: 56px;
}
.footer-heading {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 18px;
}
.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.92rem;
    color: rgba(255,255,255,0.62);
    transition: color 0.22s ease;
    text-decoration: none;
}
.footer-links a:hover { color: var(--accent); }
.footer-links li { color: rgba(255,255,255,0.42); }

/* 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);
    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);
    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.75rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}
.footer-bottom-links {
    display: flex;
    gap: 28px;
}
.footer-bottom-links a {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.22s ease;
}
.footer-bottom-links a:hover { color: var(--accent); }

/* 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); }
.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 { display: none; }
    .nav .lang-switcher { display: none; }
    .trust-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-image-wrapper img { 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 */
    .nav { padding: 12px 0; }
    .nav-container { padding: 0 16px; }
    .nav-logo-text { font-size: 0.76rem; letter-spacing: 1.5px; line-height: 1.15; }
    .nav-logo-mark { width: 8px; height: 24px; }

    /* 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%;
    }
    .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 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .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 { 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: 380px; }
    .workshop-item { width: 220px; height: 310px; }
    .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-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; }
    .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 { letter-spacing: 1.5px; font-size: 2.2rem; }
    .section-header { margin-bottom: 30px; }
    .hero-scroll { display: none; }
    .workshop-stage { height: 330px; }
    .workshop-item { width: 190px; height: 265px; }
    .glide-stage { height: 360px; }
    .glide-card { width: 200px; }
    .footer-wordmark { font-size: clamp(26px, 11vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
    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; }
    .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; }
}