:root {
            --obs: #03080F;
            --nd: #040D1A;
            --nm: #071628;
            --ns: #0A1E35;
            --nc: #0C2340;
            --nb: rgba(10, 80, 180, 0.18);
            --bv: #ff7430;
            --bm: #ff7530ea;
            --bp: #ed6724;
            --bg: rgba(10, 95, 255, 0.12);
            --gv: #ff7f40;
            --gm: #ed6724;
            --gg: rgba(0, 200, 150, 0.10);
            --w: #FAFCFF;
            --wd: rgba(240, 248, 255, 0.78);
            --wm: rgba(200, 220, 245, 0.45);
            --wf: rgba(180, 210, 240, 0.13);
            --lb: #5E8AB4;
            --serif: 'Cormorant Garamond', Georgia, serif;
            --sans: 'DM Sans', sans-serif;
            --mono: 'DM Mono', monospace;
            --gut: clamp(20px, 4vw, 72px);
            --max: 1400px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            background: var(--nd);
            color: var(--w);
            font-family: var(--sans);
            font-weight: 300;
            overflow-x: hidden;
        }

        /* ── PROGRESS ── */
        #progress {
            position: fixed; top: 0; left: 0; height: 2px;
            background: linear-gradient(90deg, var(--bv), var(--gv));
            z-index: 9999; width: 0; transition: width .1s;
        }

        /* ── NAV ── */
        nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            padding: 0 var(--gut);
            background: rgba(4, 13, 26, 0.85);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--wf);
            height: 68px; display: flex; align-items: center;
        }
        .nav-i {
            width: 100%; max-width: var(--max); margin: 0 auto;
            display: flex; align-items: center; gap: 40px;
        }
        .logo { text-decoration: none; }
        .lt { font-family: var(--serif); font-size: 18px; color: var(--w); letter-spacing: .01em; }
        .lt b { font-weight: 600; color: var(--bv); }
        .nav-links { display: flex; gap: 28px; margin-left: auto; }
        .nav-links a {
            font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--wm); text-decoration: none; transition: color .2s;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--w); }
        .nav-r { display: flex; align-items: center; gap: 16px; margin-left: 32px; }
        .nav-tel { font-family: var(--mono); font-size: 12px; color: var(--lb); text-decoration: none; letter-spacing: .08em; }
        .btn {
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; font-family: var(--sans); font-size: 13px;
            font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
            border-radius: 2px; transition: all .25s; cursor: pointer; border: none;
        }
        .btn-p {
            background: var(--bv); color: #fff; padding: 10px 22px;
        }
        .btn-p:hover { background: var(--bp); transform: translateY(-1px); }
        .btn-ghost {
            background: transparent; color: var(--w);
            border: 1px solid rgba(255,255,255,0.2); padding: 10px 22px;
        }
        .btn-ghost:hover { border-color: var(--bv); color: var(--bv); }
        .arr::after { content: '→'; }

        /* ── HAMBURGER MENU ── */
        .nav-toggle {
            display: none; flex-direction: column; gap: 6px; cursor: pointer;
            background: none; border: none; padding: 0; margin-left: auto;
        }
        .nav-toggle span {
            width: 24px; height: 2px; background: var(--w); transition: all .3s;
        }
        .nav-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(10px, 10px);
        }
        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        .nav-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }

        /* ── NAV OVERLAY ── */
        .nav-overlay {
            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.6); z-index: 99; backdrop-filter: blur(4px);
            opacity: 0; transition: opacity .3s;
        }
        .nav-overlay.active {
            opacity: 1;
        }

        /* ── PAGE HERO ── */
        .page-hero {
            position: relative; padding: 160px var(--gut) 100px;
            background: var(--obs); overflow: hidden;
            border-bottom: 1px solid var(--wf);
        }
        .page-hero::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255,116,48,.08) 0%, transparent 70%);
        }
        .page-hero-in {
            max-width: var(--max); margin: 0 auto;
            display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
        }
        .ph-kicker {
            display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
        }
        .ph-kicker-line { width: 40px; height: 1px; background: var(--bv); }
        .eyebrow {
            font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--bv);
        }
        .page-hero h1 {
            font-family: var(--serif); font-size: clamp(52px, 7vw, 96px);
            font-weight: 300; line-height: .95; color: var(--w);
        }
        .page-hero h1 em { font-style: italic; color: var(--gv); }
        .ph-right { padding-bottom: 8px; }
        .ph-right p { font-size: 15px; color: var(--wd); line-height: 1.8; margin-bottom: 28px; }
        .ph-stats { display: flex; gap: 32px; }
        .ph-stat-n {
            font-family: var(--serif); font-size: 42px; font-weight: 300; color: var(--bv); line-height: 1;
        }
        .ph-stat-l { font-size: 11px; color: var(--wm); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

        /* ── TICKER ── */
        .ticker {
            background: var(--nm); overflow: hidden; padding: 14px 0;
            border-top: 1px solid var(--wf); border-bottom: 1px solid var(--wf);
        }
        .t-track {
            display: flex; gap: 0; white-space: nowrap;
            animation: ticker 40s linear infinite;
            width: max-content;
        }
        .ticker:hover .t-track { animation-play-state: paused; }
        @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .t-item {
            display: inline-flex; align-items: center; gap: 0;
            font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--wm); padding: 0 24px;
        }
        .td { width: 4px; height: 4px; background: var(--bv); border-radius: 50%; margin-right: 24px; flex-shrink: 0; }
        .tg { color: var(--bv); }

        /* ── FILTER BAR ── */
        .filter-bar {
            background: var(--nm); padding: 28px var(--gut);
            border-bottom: 1px solid var(--wf); position: sticky; top: 68px; z-index: 50;
        }
        .filter-in {
            max-width: var(--max); margin: 0 auto;
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        }
        .filter-lbl {
            font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--wm); margin-right: 8px;
        }
        .filter-btn {
            background: transparent; border: 1px solid var(--wf); color: var(--wm);
            font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
            text-transform: uppercase; padding: 7px 16px; border-radius: 2px;
            cursor: pointer; transition: all .2s;
        }
        .filter-btn:hover, .filter-btn.active {
            background: var(--bv); border-color: var(--bv); color: #fff;
        }

        /* ── SERVICES GRID ── */
        .svc-section { padding: 80px var(--gut); }
        .svc-in { max-width: var(--max); margin: 0 auto; }

        .svc-category {
            margin-bottom: 80px; opacity: 0; transform: translateY(30px);
            transition: opacity .7s ease, transform .7s ease;
        }
        .svc-category.visible { opacity: 1; transform: translateY(0); }
        .svc-category.hidden { display: none; }

        .cat-hdr {
            display: flex; align-items: center; gap: 20px; margin-bottom: 40px;
            padding-bottom: 20px; border-bottom: 1px solid var(--wf);
        }
        .cat-num {
            font-family: var(--mono); font-size: 11px; color: var(--bv);
            letter-spacing: .1em; opacity: .7;
        }
        .cat-title {
            font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--w);
        }
        .cat-title em { font-style: italic; color: var(--gv); }
        .cat-line { flex: 1; height: 1px; background: var(--wf); }

        /* ── CONTACT FORM ── */
        .contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
        .form-row { width: 100%; }
        .form-row input, .form-row select, .form-row textarea {
            width: 100%; padding: 12px 14px; background: var(--nm); 
            border: 1px solid var(--wf); color: var(--w); 
            font-family: var(--sans); font-size: 13px; 
            border-radius: 2px; transition: all .2s;
        }
        .form-row input::placeholder, .form-row textarea::placeholder {
            color: var(--wm);
        }
        .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
            outline: none; border-color: var(--bv); background: rgba(255,116,48,.05);
        }
        .contact-form .btn { margin-top: 10px; width: 100%; }

        /* ── SERVICE CARDS ── */
        .svc-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
            background: var(--wf); border: 1px solid var(--wf);
        }
        .svc-card {
            background: var(--nm); position: relative; overflow: hidden;
            transition: background .3s; cursor: default;
        }
        .svc-card:hover { background: var(--ns); }
        .svc-card:hover .svc-photo { transform: scale(1.05); opacity: 1; }
        .svc-card:hover .svc-card-overlay { opacity: 1; }
        .svc-card:hover .svc-cta-row { opacity: 1; transform: translateY(0); }

        .svc-photo-wrap {
            position: relative; height: 200px; overflow: hidden;
        }
        .svc-photo {
            width: 100%; height: 100%; background-size: cover; background-position: center;
            transition: transform .6s ease, opacity .4s;
            opacity: .85;
            background-color: var(--ns);
        }
        .svc-photo-fallback {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--ns) 0%, var(--nc) 100%);
        }
        .svc-photo-fallback svg {
            width: 48px; height: 48px; stroke: var(--bv); stroke-width: 1; fill: none; opacity: .4;
        }
        .svc-card-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(4,13,26,.9) 0%, rgba(4,13,26,.3) 60%, transparent 100%);
            opacity: .7; transition: opacity .3s;
        }
        .svc-badge {
            position: absolute; top: 16px; left: 16px;
            font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--bv);
            background: rgba(4,13,26,.85); border: 1px solid rgba(255,116,48,.3);
            padding: 4px 10px; border-radius: 2px;
        }

        .svc-body { padding: 28px 28px 24px; }
        .svc-icon-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
        .svc-ico {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(255,116,48,.25); border-radius: 2px; flex-shrink: 0;
        }
        .svc-ico svg { width: 18px; height: 18px; stroke: var(--bv); stroke-width: 1.5; fill: none; }
        .svc-no-label {
            font-family: var(--mono); font-size: 10px; color: var(--wm); letter-spacing: .1em;
        }
        .svc-card h3 {
            font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--w);
            line-height: 1.2; margin-bottom: 10px;
        }
        .svc-card p { font-size: 13px; color: var(--wm); line-height: 1.75; margin-bottom: 18px; }

        .svc-bullets { margin-bottom: 18px; }
        .svc-bullet {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 12px; color: var(--wd); line-height: 1.6; margin-bottom: 6px;
        }
        .svc-bullet::before {
            content: '→'; color: var(--bv); font-size: 11px; flex-shrink: 0; margin-top: 1px;
        }

        .svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
        .svc-tag {
            font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
            text-transform: uppercase; color: var(--wm);
            border: 1px solid var(--wf); padding: 4px 10px; border-radius: 2px;
        }

        .svc-cta-row {
            display: flex; align-items: center; justify-content: space-between;
            border-top: 1px solid var(--wf); padding-top: 18px;
            opacity: 0; transform: translateY(6px); transition: all .3s ease;
        }
        .svc-card:hover .svc-cta-row { opacity: 1; transform: translateY(0); }
        .svc-cta-link {
            font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--bv); text-decoration: none;
            display: flex; align-items: center; gap: 6px; transition: gap .2s;
        }
        .svc-cta-link:hover { gap: 10px; }
        .svc-avail { font-size: 10px; color: var(--wm); }
        .svc-avail span { color: #4ade80; }

        /* ── FEATURED LARGE CARD ── */
        .svc-grid.featured { grid-template-columns: 1fr 1fr; }
        .svc-card.large .svc-photo-wrap { height: 300px; }

        /* ── PROCESS STRIP ── */
        .proc-strip {
            background: var(--obs); padding: 80px var(--gut);
            border-top: 1px solid var(--wf); border-bottom: 1px solid var(--wf);
        }
        .proc-strip-in {
            max-width: var(--max); margin: 0 auto;
        }
        .proc-strip-hdr {
            text-align: center; margin-bottom: 60px;
        }
        .proc-strip-hdr h2 {
            font-family: var(--serif); font-size: clamp(36px, 4vw, 56px);
            font-weight: 300; color: var(--w); margin-top: 12px;
        }
        .proc-strip-hdr h2 em { font-style: italic; color: var(--gv); }
        .proc-steps {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
            position: relative;
        }
        .proc-steps::before {
            content: ''; position: absolute; top: 24px; left: 10%; right: 10%;
            height: 1px; background: linear-gradient(90deg, transparent, var(--wf) 20%, var(--bv) 50%, var(--wf) 80%, transparent);
        }
        .proc-step-item {
            display: flex; flex-direction: column; align-items: center;
            text-align: center; padding: 0 20px;
        }
        .proc-node-wrap {
            width: 48px; height: 48px; border-radius: 50%;
            border: 1px solid var(--wf); background: var(--nd);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 20px; position: relative; z-index: 1;
            transition: all .3s;
        }
        .proc-node-wrap.done { border-color: var(--bv); background: rgba(255,116,48,.1); }
        .proc-node-wrap svg { width: 20px; height: 20px; stroke: var(--wm); stroke-width: 1.5; fill: none; }
        .proc-node-wrap.done svg { stroke: var(--bv); }
        .proc-sn { font-family: var(--mono); font-size: 9px; color: var(--bv); letter-spacing: .1em; margin-bottom: 6px; }
        .proc-st { font-family: var(--serif); font-size: 16px; color: var(--w); margin-bottom: 6px; }
        .proc-sd { font-size: 11px; color: var(--wm); line-height: 1.6; }

        /* ── FAQ SECTION ── */
        .faq-section {
            padding: 80px var(--gut); background: var(--nm);
        }
        .faq-in { max-width: 900px; margin: 0 auto; }
        .faq-hdr { margin-bottom: 50px; }
        .faq-hdr h2 {
            font-family: var(--serif); font-size: clamp(36px, 4vw, 54px);
            font-weight: 300; color: var(--w); margin-top: 12px;
        }
        .faq-hdr h2 em { font-style: italic; color: var(--gv); }

        .faq-item {
            border-bottom: 1px solid var(--wf); overflow: hidden;
        }
        .faq-q {
            display: flex; align-items: center; justify-content: space-between;
            padding: 22px 0; cursor: pointer; gap: 20px;
        }
        .faq-q-text {
            font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--wd);
            transition: color .2s;
        }
        .faq-q:hover .faq-q-text { color: var(--w); }
        .faq-icon {
            width: 28px; height: 28px; border: 1px solid var(--wf); border-radius: 2px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            transition: all .3s; font-size: 16px; color: var(--bv);
        }
        .faq-item.open .faq-icon { background: var(--bv); color: #fff; border-color: var(--bv); transform: rotate(45deg); }
        .faq-a {
            max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease;
            font-size: 13px; color: var(--wm); line-height: 1.85;
        }
        .faq-item.open .faq-a { max-height: 200px; padding-bottom: 20px; }

        /* ── CTA STRIP ── */
        .cta-strip {
            padding: 80px var(--gut); background: var(--obs);
            border-top: 1px solid var(--wf); position: relative; overflow: hidden;
        }
        .cta-strip::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,116,48,.1) 0%, transparent 70%);
            pointer-events: none;
        }
        .cta-strip-in {
            max-width: var(--max); margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between; gap: 40px;
        }
        .cta-strip h2 {
            font-family: var(--serif); font-size: clamp(32px, 4vw, 52px);
            font-weight: 300; color: var(--w); line-height: 1.1;
        }
        .cta-strip h2 em { font-style: italic; color: var(--gv); }
        .cta-strip p { font-size: 14px; color: var(--wm); margin-top: 10px; max-width: 420px; line-height: 1.75; }
        .cta-strip-acts { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
        .cta-strip-acts .btn { width: 240px; justify-content: center; font-size: 13px; padding: 16px 30px; }

        /* ── FOOTER ── */
        footer {
            background: var(--obs); border-top: 1px solid var(--wf);
            padding: 60px var(--gut) 32px;
        }
        .foot-in { max-width: var(--max); margin: 0 auto; }
        .foot-top { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--wf); }
        .foot-brand p { font-size: 13px; color: var(--wm); line-height: 1.75; margin-top: 16px; max-width: 280px; }
        .foot-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
        .fcol h5 { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bv); margin-bottom: 16px; }
        .fcol a { display: block; font-size: 13px; color: var(--wm); text-decoration: none; margin-bottom: 8px; transition: color .2s; }
        .fcol a:hover { color: var(--w); }
        .foot-bot { display: flex; align-items: center; justify-content: space-between; }
        .foot-copy { font-size: 11px; color: var(--wm); }
        .social-icons { display: flex; gap: 14px; }
        .social-icons a {
            width: 34px; height: 34px; border: 1px solid var(--wf); border-radius: 2px;
            display: flex; align-items: center; justify-content: center;
            color: var(--wm); font-size: 13px; text-decoration: none; transition: all .2s;
        }
        .social-icons a:hover { border-color: var(--bv); color: var(--bv); }

        /* ── ANIMATIONS ── */
        .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            .page-hero-in { grid-template-columns: 1fr; }
            .ph-right { display: none; }
            .svc-grid { grid-template-columns: 1fr 1fr; }
            .svc-grid.featured { grid-template-columns: 1fr; }
            .proc-steps { grid-template-columns: repeat(3, 1fr); gap: 30px; }
            .proc-steps::before { display: none; }
            .cta-strip-in { flex-direction: column; }
            .foot-top { grid-template-columns: 1fr; }
            .foot-links { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            :root {
                --gut: clamp(16px, 3vw, 32px);
            }

            /* NAV */
            nav { padding: 0 16px; }
            .nav-i { gap: 20px; }
            .nav-toggle { display: flex; }
            .nav-links { 
                position: fixed; top: 68px; left: 0; right: 0; 
                flex-direction: column; gap: 0; background: var(--nd);
                border-bottom: 1px solid var(--wf); transform: translateX(-100%);
                opacity: 0; pointer-events: none; transition: all .3s;
                padding: 20px 0; z-index: 98; max-height: calc(100vh - 68px);
                overflow-y: auto;
            }
            .nav-links.active { 
                transform: translateX(0); opacity: 1; pointer-events: all;
            }
            .nav-links a { 
                display: block; padding: 16px var(--gut); 
                border-bottom: 1px solid rgba(255,255,255,0.08);
                font-size: 14px;
            }
            .nav-overlay { display: block; }
            .nav-r { 
                display: none; gap: 12px; flex-direction: column; 
                width: 100%; padding: var(--gut); padding-top: 0;
                position: fixed; top: auto; bottom: 0; left: 0; right: 0;
                background: var(--nd); border-top: 1px solid var(--wf);
                z-index: 98;
            }
            .nav-links.active ~ .nav-r { display: flex; }
            .nav-tel { display: none; }
            .nav-r .btn-p { width: 100%; justify-content: center; }
            .nav-r .btn-ghost { width: 100%; justify-content: center; }

            /* Hide button from nav-r on desktop, show in menu on mobile */
            .nav-r .btn-p { display: none; }
            .nav-r .btn { width: 100%; justify-content: center; }

            /* PAGE SECTIONS */
            .svc-section { padding: 60px var(--gut); }
            .page-hero { padding: 120px var(--gut) 80px; }
            .ph-stats { gap: 20px; }
            .ph-stat-n { font-size: 32px; }
            
            /* GRID */
            .svc-grid { grid-template-columns: 1fr; }
            .svc-grid.featured { grid-template-columns: 1fr; }
            .projects-grid { grid-template-columns: 1fr; }
            .gallery-grid { grid-template-columns: 1fr 1fr; }
            
            /* PROCESS */
            .proc-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
            .proc-strip { padding: 60px var(--gut); }
            
            /* CTA */
            .cta-strip { padding: 60px var(--gut); }
            .cta-strip-in { flex-direction: column; gap: 30px; }
            .cta-strip-acts .btn { width: 100%; }
            
            /* FOOTER */
            footer { padding: 40px var(--gut) 24px; }
            .foot-top { gap: 40px; }
            .foot-links { grid-template-columns: 1fr; }
            .foot-bot { flex-direction: column; gap: 16px; align-items: flex-start; }
            
            /* FILTER */
            .filter-bar { padding: 16px var(--gut); top: 68px; }
            .filter-in { gap: 8px; }
            .filter-btn { padding: 6px 12px; font-size: 9px; }
        }

        @media (max-width: 600px) {
            :root { --gut: 16px; }
            
            /* NAV */
            .nav-i { gap: 16px; }
            .logo .lt { font-size: 14px; }
            
            /* HERO */
            .page-hero { padding: 100px 16px 60px; }
            .page-hero h1 { font-size: clamp(32px, 6vw, 56px); }
            .ph-stats { flex-direction: column; gap: 16px; }
            
            /* SECTIONS */
            .svc-section { padding: 50px 16px; }
            
            /* GRIDS */
            .gallery-grid { grid-template-columns: 1fr; }
            .projects-grid { grid-template-columns: 1fr; }
            
            /* CARDS */
            .svc-card { padding: 16px; }
            .svc-photo-wrap { height: 180px; }
            
            /* PROCESS */
            .proc-steps { grid-template-columns: 1fr; gap: 16px; }
            .proc-step-item { padding: 0 12px; }
            .proc-node-wrap { width: 40px; height: 40px; }
            
            /* TEXT */
            .page-hero h1 { font-size: 36px; }
            .cta-strip h2 { font-size: clamp(24px, 5vw, 36px); }
            .proc-strip-hdr h2 { font-size: clamp(24px, 5vw, 36px); }
            
            /* CTA */
            .cta-strip { padding: 48px 16px; }
            .cta-strip-acts { width: 100%; }
            .cta-strip-acts .btn { font-size: 12px; padding: 12px 20px; }
            
            /* FOOTER */
            footer { padding: 32px 16px 20px; }
            .foot-links { gap: 24px; }
            .social-icons { gap: 10px; }
            .social-icons a { width: 30px; height: 30px; }
        }

        @media (max-width: 480px) {
            :root { --gut: 12px; }
            
            nav { height: 60px; }
            nav { padding: 0 12px; }
            .logo .lt { font-size: 12px; }
            .nav-toggle { gap: 4px; }
            .nav-toggle span { width: 20px; height: 1.5px; }
            
            .page-hero { padding: 80px 12px 50px; }
            .page-hero h1 { font-size: 28px; line-height: 1.1; }
            
            .svc-section { padding: 40px 12px; }
            .cat-hdr { margin-bottom: 20px; }
            .cat-title { font-size: clamp(20px, 4vw, 28px); }
            
            .filter-bar { padding: 12px; }
            .filter-in { gap: 6px; }
            
            .gallery-item img { height: 180px; }
            .project-card { border-radius: 8px; }
            
            .cta-strip-in > div > h2 { font-size: 24px; }
            .cta-strip-in > div > p { font-size: 12px; }
            
            .faq-q { padding: 16px 0; }
            .faq-q-text { font-size: 16px; }
            
            .proc-sn { font-size: 8px; }
            .proc-st { font-size: 13px; }
            .proc-sd { font-size: 10px; }
        }