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

        :root {
            --black: #0a0a0a;
            --white: #ffffff;
            --off-white: #f8f8f6;
            --warm-gray: #e8e6e1;
            --mid-gray: #999;
            --light-gray: #c5c5c5;
            --text: #1a1a1a;
            --text-secondary: #666;
            --accent: #b08d57;
            --accent-light: #c9a96e;
            --accent-hover: #9a7a48;
            --section-pad: 140px 0;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--black); }
        ::-webkit-scrollbar-thumb { background: var(--accent); }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

        ::selection { background: var(--accent); color: var(--white); }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: var(--text);
            background: var(--white);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            -webkit-tap-highlight-color: transparent;
            padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        }

        /* iOS Safari fixes */
        @supports (-webkit-touch-callout: none) {
            body { min-height: -webkit-fill-available; }
            html { height: -webkit-fill-available; }
        }

        img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }
        a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
        button { cursor: pointer; border: none; font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
        .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

        /* ── PRELOADER ── */
        .preloader {
            position: fixed; inset: 0; z-index: 9999;
            background: var(--black);
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s ease;
        }
        .preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
        .preloader-inner {
            display: flex; flex-direction: column; align-items: center; gap: 32px;
        }
        .preloader-text {
            font-size: 10px; letter-spacing: 8px; text-transform: uppercase;
            color: var(--accent); font-weight: 600;
        }
        .preloader-bar {
            width: 160px; height: 1px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden;
        }
        .preloader-bar::after {
            content: ''; position: absolute; left: -100%; top: 0; width: 60%; height: 100%;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: preload 1.4s ease-in-out infinite;
        }
        @keyframes preload { 0% { left: -60%; } 100% { left: 100%; } }

        /* ── NAV ── */
        header {
            position: fixed; top: 0; left: 0; right: 0; height: 80px;
            z-index: 1000;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        header::after {
            content: ''; position: absolute; bottom: 0; left: 0; right: 0;
            height: 1px; background: rgba(255,255,255,0.06);
            transition: opacity 0.5s ease;
        }
        header.scrolled::after { opacity: 0; }
        header.scrolled {
            background: rgba(255,255,255,0.96);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
            box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
        }
        header.scrolled .nav-link { color: var(--text); }
        header.scrolled .nav-link:hover { color: var(--accent); }
        header.scrolled .logo-text { color: var(--text); }
        header.scrolled .hamburger span { background: var(--text); }

        nav {
            max-width: 1400px; margin: 0 auto; height: 100%;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 40px;
            gap: 20px;
            overflow: visible;
        }

        .logo-wrap {
            display: flex; align-items: center; gap: 10px;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
        }
        .logo-wrap .logo-svg {
            height: 42px; width: auto;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        .logo-wrap .logo-svg .logo-shape { fill: #fff; transition: fill 0.4s ease; }
        header.scrolled .logo-wrap .logo-svg { height: 36px; }
        header.scrolled .logo-wrap .logo-svg .logo-shape { fill: var(--accent); }
        .logo-text-group {
            display: flex; flex-direction: column; line-height: 1;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .logo-text {
            font-family: 'Inter', sans-serif;
            font-size: 12px; font-weight: 700; letter-spacing: 3px;
            text-transform: uppercase; color: var(--white);
            transition: color 0.4s ease;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .logo-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 8px; font-weight: 500; letter-spacing: 2.5px;
            text-transform: uppercase; color: rgba(255,255,255,0.5);
            margin-top: 3px;
            transition: color 0.4s ease;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        header.scrolled .logo-subtitle { color: var(--mid-gray); }

        .nav-links {
            display: flex; gap: 24px; list-style: none; align-items: center;
            flex-shrink: 0;
        }
        .nav-link {
            font-size: 11px; font-weight: 500; letter-spacing: 1.5px;
            text-transform: uppercase; color: rgba(255,255,255,0.85);
            transition: color 0.3s ease; position: relative;
            white-space: nowrap;
        }
        .nav-link::after {
            content: ''; position: absolute; bottom: -4px; left: 0;
            width: 0; height: 1px; background: var(--accent);
            transition: width 0.3s ease;
        }
        .nav-link:hover { color: var(--white); }
        .nav-link:hover::after { width: 100%; }
        header.scrolled .nav-link:hover::after { width: 100%; }

        .nav-cta {
            font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
            text-transform: uppercase; padding: 11px 26px;
            border: 1px solid var(--accent); color: var(--accent);
            transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            background: transparent;
            position: relative; overflow: hidden;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .nav-cta::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: var(--accent); transform: scaleY(0); transform-origin: bottom;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .nav-cta:hover::before { transform: scaleY(1); }
        .nav-cta:hover { color: var(--white); border-color: var(--accent); }
        .nav-cta span { position: relative; z-index: 1; }
        /* Scrolled header: ensure button visible on white bg */
        header.scrolled .nav-cta { border-color: var(--accent); color: var(--accent); }
        header.scrolled .nav-cta:hover { color: var(--white); border-color: var(--accent); }
        header.scrolled .nav-cta::before { background: var(--accent); }

        .hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; padding: 4px; }
        .hamburger span {
            width: 24px; height: 1.5px; background: var(--white);
            transition: all 0.3s ease; display: block;
        }
        .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

        /* ── HERO ── */
        .hero {
            height: 100vh; height: 100dvh; min-height: 700px;
            position: relative; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        @supports (-webkit-touch-callout: none) {
            .hero { height: -webkit-fill-available; }
        }
        .hero-bg {
            position: absolute; inset: 0;
            background-image: url('/img/2280-ralston-ave-belmont-ca-small-002-059-twilight-front-666x444-72dpi_orig.jpg');
            background-size: cover; background-position: center 40%;
            transform: scale(1.08);
            transition: transform 12s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hero-bg.loaded { transform: scale(1); }
        .hero-overlay {
            position: absolute; inset: 0;
            background:
                linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.2) 40%, rgba(10,10,10,0.7) 100%),
                radial-gradient(ellipse at center, transparent 0%, rgba(10,10,10,0.3) 100%);
        }
        .hero-content {
            position: relative; z-index: 2;
            text-align: center; max-width: 900px; padding: 0 32px;
        }
        .hero-label {
            font-size: 10px; font-weight: 600; letter-spacing: 8px;
            text-transform: uppercase; color: var(--accent);
            margin-bottom: 32px; display: inline-flex; align-items: center; gap: 16px;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
        }
        .hero-label::before, .hero-label::after {
            content: ''; width: 40px; height: 1px; background: var(--accent); opacity: 0.5;
        }
        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(42px, 6.5vw, 80px);
            font-weight: 400; color: var(--white);
            line-height: 1.08; margin-bottom: 28px;
            opacity: 0; transform: translateY(30px);
            animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
        }
        .hero-sub {
            font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.65);
            line-height: 1.9; max-width: 560px; margin: 0 auto 52px;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
        }
        .hero-actions {
            display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
            opacity: 0; transform: translateY(20px);
            animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 1s;
        }
        .btn {
            font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
            text-transform: uppercase; padding: 17px 44px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex; align-items: center; gap: 10px;
            position: relative; overflow: hidden;
        }
        .btn-filled {
            background: var(--accent); color: var(--white); border: 1px solid var(--accent);
        }
        .btn-filled:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(176,141,87,0.3); }
        .btn-outline {
            background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.25);
        }
        .btn-outline:hover { border-color: var(--white); transform: translateY(-2px); }
        .btn-dark {
            background: var(--black); color: var(--white); border: 1px solid var(--black);
        }
        .btn-dark:hover { background: #222; }

        .scroll-indicator {
            position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%) translateY(20px);
            z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px;
            opacity: 0; animation: fadeUpCentered 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.4s;
        }
        .scroll-indicator span {
            font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
            color: rgba(255,255,255,0.35); font-weight: 500;
        }
        .scroll-line {
            width: 1px; height: 48px; background: rgba(255,255,255,0.1);
            position: relative; overflow: hidden;
        }
        .scroll-line::after {
            content: ''; position: absolute; top: -100%; left: 0;
            width: 100%; height: 50%; background: linear-gradient(180deg, transparent, var(--accent));
            animation: scrollDown 2.5s ease-in-out infinite;
        }
        @keyframes scrollDown { 0% { top: -50%; } 60% { top: 100%; } 100% { top: 100%; } }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeUpCentered {
            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        /* ── MARQUEE STRIP ── */
        .trust-strip {
            background: var(--black); padding: 20px 0;
            overflow: hidden; position: relative;
            border-top: 1px solid rgba(176,141,87,0.15);
            border-bottom: 1px solid rgba(176,141,87,0.15);
        }
        .trust-strip-inner {
            display: flex; align-items: center; gap: 60px;
            animation: marquee 35s linear infinite;
            white-space: nowrap;
        }
        .trust-item {
            font-size: 11px; font-weight: 500; letter-spacing: 3.5px;
            text-transform: uppercase; color: rgba(255,255,255,0.4);
            display: flex; align-items: center; gap: 16px; flex-shrink: 0;
        }
        .trust-item .dot {
            width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
            box-shadow: 0 0 8px rgba(176,141,87,0.4);
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ── SECTION COMMONS ── */
        .section { padding: var(--section-pad); }
        .section-dark { background: var(--black); color: var(--white); }
        .section-warm { background: var(--off-white); }

        .section-header {
            margin-bottom: 80px;
        }
        .section-label {
            font-size: 10px; font-weight: 600; letter-spacing: 6px;
            text-transform: uppercase; color: var(--accent);
            margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px;
        }
        .section-label::before {
            content: ''; width: 32px; height: 1px; background: var(--accent);
        }
        .section-dark .section-label { color: var(--accent); }
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(34px, 4.5vw, 54px);
            font-weight: 400; line-height: 1.12; margin-bottom: 24px;
        }
        .section-desc {
            font-size: 16px; color: var(--text-secondary);
            max-width: 540px; line-height: 1.85; font-weight: 300;
        }
        .section-dark .section-desc { color: rgba(255,255,255,0.45); }

        /* ── ABOUT ── */
        .about-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;
        }
        .about-image-wrap {
            position: relative;
        }
        .about-image-wrap::before {
            content: ''; position: absolute; top: -16px; left: -16px;
            width: 120px; height: 120px; border-left: 1px solid var(--accent);
            border-top: 1px solid var(--accent); opacity: 0.4; z-index: 1;
        }
        .about-image-wrap img {
            width: 100%; aspect-ratio: 4/5; object-fit: cover;
        }
        .about-image-badge {
            position: absolute; bottom: -30px; right: -30px;
            background: var(--accent); color: var(--white);
            padding: 32px; text-align: center; min-width: 148px;
        }
        .about-image-badge .badge-num {
            font-family: 'Playfair Display', serif;
            font-size: 46px; font-weight: 700; line-height: 1;
        }
        .about-image-badge .badge-text {
            font-size: 9px; font-weight: 600; letter-spacing: 3px;
            text-transform: uppercase; margin-top: 6px;
        }
        .about-text { padding-right: 20px; }
        .about-text p {
            font-size: 16px; color: var(--text-secondary); line-height: 1.9;
            margin-bottom: 24px; font-weight: 300;
        }
        .about-text p:first-of-type {
            font-size: 21px; color: var(--text); font-weight: 400; line-height: 1.7;
        }

        /* ── STATS ── */
        .stats-section {
            padding: 100px 0; background: var(--black);
            position: relative;
        }
        .stats-section::before {
            content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 1px; height: 60px; background: linear-gradient(180deg, var(--accent), transparent);
            opacity: 0.3;
        }
        .stats-grid {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 0; text-align: center;
        }
        .stat {
            padding: 48px 20px;
            border-right: 1px solid rgba(255,255,255,0.06);
            transition: transform 0.4s ease;
        }
        .stat:last-child { border-right: none; }
        .stat-num {
            font-family: 'Playfair Display', serif;
            font-size: 58px; font-weight: 700; color: var(--white); line-height: 1;
            margin-bottom: 12px;
        }
        .stat-label {
            font-size: 10px; font-weight: 500; letter-spacing: 4px;
            text-transform: uppercase; color: rgba(255,255,255,0.35);
        }

        /* ── SERVICES ── */
        .services-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
        }
        .service-card {
            position: relative; overflow: hidden;
            aspect-ratio: 3/4; cursor: pointer;
        }
        .service-card img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
        }
        .service-card:hover img { transform: scale(1.08); filter: brightness(0.85); }
        .service-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(0deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.05) 55%);
            display: flex; flex-direction: column; justify-content: flex-end;
            padding: 44px;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .service-card:hover .service-overlay {
            background: linear-gradient(0deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.35) 65%);
        }
        .service-num {
            font-size: 10px; font-weight: 600; letter-spacing: 4px;
            color: var(--accent); margin-bottom: 14px;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .service-num::after {
            content: ''; width: 24px; height: 1px; background: var(--accent); opacity: 0.5;
        }
        .service-name {
            font-family: 'Playfair Display', serif;
            font-size: 30px; font-weight: 400; color: var(--white);
            margin-bottom: 14px;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .service-card:hover .service-name { transform: translateY(-4px); }
        .service-desc {
            font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.75;
            font-weight: 300; max-width: 300px;
            max-height: 0; overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
            opacity: 0;
        }
        .service-card:hover .service-desc { max-height: 140px; opacity: 1; }

        /* ── GALLERY ── */
        .gallery-filters {
            display: flex; gap: 6px; margin-bottom: 56px; flex-wrap: wrap;
        }
        .filter-btn {
            font-size: 10px; font-weight: 500; letter-spacing: 2.5px;
            text-transform: uppercase; padding: 11px 26px;
            background: transparent; color: var(--text-secondary);
            border: 1px solid var(--warm-gray);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
        }
        .filter-btn.active, .filter-btn:hover {
            background: var(--black); color: var(--white); border-color: var(--black);
        }
        .gallery-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
        }
        .gallery-item {
            position: relative; overflow: hidden; cursor: pointer;
            aspect-ratio: 1; transition: opacity 0.4s ease;
        }
        .gallery-item.hidden { display: none; }
        .gallery-item img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
        }
        .gallery-item:hover img { transform: scale(1.06); filter: brightness(0.8); }
        .gallery-item-overlay {
            position: absolute; inset: 0;
            background: rgba(10,10,10,0);
            display: flex; align-items: center; justify-content: center;
            transition: background 0.4s ease;
        }
        .gallery-item:hover .gallery-item-overlay { background: rgba(10,10,10,0.2); }
        .gallery-item-overlay svg {
            width: 28px; height: 28px; color: var(--white);
            opacity: 0; transform: scale(0.8);
            transition: all 0.3s ease;
        }
        .gallery-item:hover .gallery-item-overlay svg { opacity: 1; transform: scale(1); }

        /* ── LIGHTBOX ── */
        .lightbox {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(10,10,10,0.97);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.4s ease;
        }
        .lightbox.active { display: flex; opacity: 1; }
        .lightbox img {
            max-width: 85vw; max-height: 85vh; object-fit: contain;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        .lightbox-close {
            position: absolute; top: 28px; right: 28px;
            width: 52px; height: 52px; background: none;
            color: var(--white); font-size: 28px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; opacity: 0.5; transition: all 0.3s ease;
        }
        .lightbox-close:hover { opacity: 1; color: var(--accent); }
        .lightbox-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 56px; height: 56px; background: none;
            border: 1px solid rgba(255,255,255,0.15);
            color: var(--white); font-size: 20px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; opacity: 0.6; transition: all 0.3s ease;
        }
        .lightbox-nav:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
        .lightbox-prev { left: 28px; }
        .lightbox-next { right: 28px; }
        .lightbox-counter {
            position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
            font-size: 11px; letter-spacing: 4px; color: rgba(255,255,255,0.3);
        }

        /* ── PROJECTS ── */
        .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
        .project-card { position: relative; overflow: hidden; }
        .project-card-image {
            aspect-ratio: 16/10; overflow: hidden;
        }
        .project-card-image img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .project-card:hover .project-card-image img { transform: scale(1.04); }
        .project-card-body { padding: 36px 0 0; }
        .project-status {
            font-size: 9px; font-weight: 600; letter-spacing: 3px;
            text-transform: uppercase; display: inline-block;
            padding: 5px 14px; margin-bottom: 18px;
        }
        .status-active { background: var(--accent); color: var(--white); }
        .status-sold { background: var(--black); color: var(--white); }
        .project-card-body h3 {
            font-family: 'Playfair Display', serif;
            font-size: 26px; font-weight: 400; margin-bottom: 14px;
        }
        .project-card-body p {
            font-size: 14px; color: var(--text-secondary); line-height: 1.8;
            font-weight: 300; margin-bottom: 24px;
        }
        .project-specs {
            display: flex; gap: 32px; flex-wrap: wrap;
            padding-top: 24px; border-top: 1px solid var(--warm-gray);
        }
        .project-spec {
            display: flex; flex-direction: column; gap: 4px;
        }
        .project-spec-val {
            font-size: 20px; font-weight: 600; color: var(--text);
        }
        .project-spec-label {
            font-size: 9px; font-weight: 500; letter-spacing: 2.5px;
            text-transform: uppercase; color: var(--mid-gray);
        }

        /* ── TESTIMONIALS ── */
        .testimonials-wrap { position: relative; overflow: hidden; }
        .testimonials-track {
            display: flex; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .testimonial-slide {
            min-width: 100%; padding: 0 60px;
        }
        .testimonial-inner {
            max-width: 760px; margin: 0 auto; text-align: center;
        }
        .testimonial-inner::before {
            content: '\201C'; font-family: 'Playfair Display', serif;
            font-size: 120px; color: rgba(176,141,87,0.15); line-height: 1;
            display: block; margin-bottom: -40px;
        }
        .testimonial-stars {
            display: flex; justify-content: center; gap: 5px; margin-bottom: 40px;
        }
        .testimonial-stars svg { width: 14px; height: 14px; color: var(--accent); fill: var(--accent); }
        .testimonial-quote {
            font-family: 'Playfair Display', serif;
            font-size: clamp(22px, 2.8vw, 32px);
            font-weight: 400; line-height: 1.65;
            color: var(--white); margin-bottom: 44px;
            font-style: italic;
        }
        .testimonial-author {
            font-size: 12px; font-weight: 600; letter-spacing: 3px;
            text-transform: uppercase; color: var(--white);
        }
        .testimonial-location {
            font-size: 11px; color: rgba(255,255,255,0.35);
            margin-top: 6px; letter-spacing: 1.5px;
        }
        .testimonial-nav {
            display: flex; justify-content: center; align-items: center;
            gap: 28px; margin-top: 64px;
        }
        .testimonial-arrow {
            width: 52px; height: 52px; background: none;
            border: 1px solid rgba(255,255,255,0.15);
            color: var(--white); display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            font-size: 16px;
        }
        .testimonial-arrow:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
        .testimonial-dots { display: flex; gap: 10px; }
        .testimonial-dot {
            width: 6px; height: 6px; background: rgba(255,255,255,0.15);
            border-radius: 50%; cursor: pointer; transition: all 0.4s ease; border: none;
        }
        .testimonial-dot.active { background: var(--accent); transform: scale(1.4); box-shadow: 0 0 8px rgba(176,141,87,0.4); }

        /* ── FAQ ── */
        .faq-list { max-width: 800px; }
        .faq-item { border-bottom: 1px solid rgba(0,0,0,0.06); }
        .faq-question {
            width: 100%; padding: 32px 0; background: none;
            display: flex; justify-content: space-between; align-items: center;
            font-size: 17px; font-weight: 500; color: var(--text);
            text-align: left; cursor: pointer; transition: color 0.3s ease;
            gap: 24px;
        }
        .faq-question:hover { color: var(--accent); }
        .faq-icon {
            width: 28px; height: 28px; flex-shrink: 0; position: relative;
            border: 1px solid rgba(0,0,0,0.08); transition: border-color 0.3s ease;
        }
        .faq-question:hover .faq-icon { border-color: var(--accent); }
        .faq-icon::before, .faq-icon::after {
            content: ''; position: absolute; background: var(--text);
            transition: all 0.3s ease;
        }
        .faq-question:hover .faq-icon::before, .faq-question:hover .faq-icon::after { background: var(--accent); }
        .faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
        .faq-answer {
            max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .faq-answer-inner {
            padding: 0 0 32px;
            font-size: 15px; color: var(--text-secondary); line-height: 1.85; font-weight: 300;
        }

        /* ── CONTACT ── */
        .contact-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 100px;
        }
        .form-group { margin-bottom: 28px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .form-label {
            font-size: 10px; font-weight: 600; letter-spacing: 2.5px;
            text-transform: uppercase; color: var(--text);
            display: block; margin-bottom: 10px;
        }
        .form-input, .form-select, .form-textarea {
            width: 100%; padding: 14px 0; font-size: 15px;
            font-family: 'Inter', sans-serif;
            border: none; border-bottom: 1px solid rgba(0,0,0,0.1);
            background: transparent; color: var(--text);
            transition: border-color 0.4s ease; outline: none;
        }
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            border-color: var(--accent);
        }
        .form-input::placeholder, .form-textarea::placeholder { color: var(--light-gray); }
        .form-textarea { resize: vertical; min-height: 120px; }
        .form-select { cursor: pointer; -webkit-appearance: none; appearance: none; }
        .form-checkbox-wrap {
            display: flex; align-items: center; gap: 12px; margin-top: 28px;
        }
        .form-checkbox-wrap input[type="checkbox"] {
            width: 16px; height: 16px; accent-color: var(--accent);
        }
        .form-checkbox-wrap label {
            font-size: 13px; color: var(--text-secondary); font-weight: 300;
        }
        .form-submit {
            margin-top: 36px;
            font-size: 10px; font-weight: 600; letter-spacing: 3px;
            text-transform: uppercase; padding: 19px 52px;
            background: var(--black); color: var(--white); border: none;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
            position: relative; overflow: hidden;
        }
        .form-submit:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(176,141,87,0.25); }
        .form-success {
            display: none; padding: 20px; text-align: center;
            font-size: 15px; color: var(--accent); font-weight: 500;
        }

        .contact-info { padding-top: 12px; }
        .contact-info h3 {
            font-family: 'Playfair Display', serif;
            font-size: 30px; font-weight: 400; margin-bottom: 20px;
        }
        .contact-info p {
            font-size: 15px; color: var(--text-secondary); line-height: 1.85;
            font-weight: 300; margin-bottom: 36px;
        }
        .contact-detail {
            display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px;
        }
        .contact-detail-icon {
            width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px;
            color: var(--accent);
        }
        .contact-detail-text { font-size: 15px; color: var(--text); line-height: 1.6; font-weight: 500; }
        .contact-detail-text small {
            display: block; font-size: 12px; color: var(--mid-gray); margin-top: 3px; font-weight: 300;
        }
        .contact-call-btn {
            display: inline-flex; align-items: center; gap: 12px;
            padding: 17px 40px; background: var(--accent); color: var(--white);
            font-size: 10px; font-weight: 600; letter-spacing: 3px;
            text-transform: uppercase; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            margin-top: 20px;
        }
        .contact-call-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(176,141,87,0.25); }
        .contact-map {
            margin-top: 44px; aspect-ratio: 16/9; overflow: hidden;
        }
        .contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.1); transition: filter 0.5s ease; }
        .contact-map:hover iframe { filter: grayscale(0.5) contrast(1); }

        /* ── FOOTER ── */
        footer {
            background: var(--black); color: var(--white); padding: 100px 0 0;
            position: relative;
        }
        footer::before {
            content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 60px; height: 1px; background: var(--accent); opacity: 0.3;
        }
        .footer-grid {
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px;
            padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .footer-about p {
            font-size: 14px; color: rgba(255,255,255,0.35); line-height: 1.85;
            margin-top: 24px; font-weight: 300;
        }
        .footer-heading {
            font-size: 10px; font-weight: 600; letter-spacing: 4px;
            text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 28px;
        }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 14px; }
        .footer-links a {
            font-size: 14px; color: rgba(255,255,255,0.35);
            transition: all 0.3s ease; font-weight: 300;
        }
        .footer-links a:hover { color: var(--accent); padding-left: 4px; }
        .footer-newsletter-input {
            display: flex; margin-top: 12px;
        }
        .footer-newsletter-input input {
            flex: 1; padding: 14px 0; background: transparent;
            border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
            color: var(--white); font-size: 14px; font-family: 'Inter', sans-serif;
            outline: none; transition: border-color 0.3s ease;
        }
        .footer-newsletter-input input:focus { border-color: var(--accent); }
        .footer-newsletter-input input::placeholder { color: rgba(255,255,255,0.2); }
        .footer-newsletter-input button {
            padding: 14px 20px; background: transparent;
            color: var(--accent); font-size: 10px; font-weight: 600;
            letter-spacing: 3px; text-transform: uppercase; border: none;
            cursor: pointer; transition: color 0.3s ease;
        }
        .footer-newsletter-input button:hover { color: var(--white); }
        .footer-bottom {
            display: flex; justify-content: space-between; align-items: center;
            padding: 28px 0; flex-wrap: wrap; gap: 16px;
        }
        .footer-bottom p {
            font-size: 11px; color: rgba(255,255,255,0.2); font-weight: 300; letter-spacing: 0.5px;
        }
        .footer-bottom-links { display: flex; gap: 28px; }
        .footer-bottom-links a {
            font-size: 11px; color: rgba(255,255,255,0.2);
            transition: color 0.3s ease; font-weight: 300; letter-spacing: 0.5px;
        }
        .footer-bottom-links a:hover { color: var(--accent); }

        /* ── BACK TO TOP ── */
        .back-to-top {
            position: fixed; bottom: 36px; right: 36px;
            width: 50px; height: 50px; background: var(--black);
            color: var(--white); display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 900;
            opacity: 0; visibility: hidden; transform: translateY(10px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(255,255,255,0.08);
            font-size: 14px;
        }
        .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        .back-to-top:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(176,141,87,0.3); }

        /* ── REVEAL ANIMATION ── */
        .reveal {
            opacity: 0; transform: translateY(50px);
            transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.15s; }
        .reveal-delay-2 { transition-delay: 0.3s; }
        .reveal-delay-3 { transition-delay: 0.45s; }

        /* ── iOS SAFARI SPECIFIC ── */
        @supports (-webkit-touch-callout: none) {
            .hero-bg { background-attachment: scroll !important; }
            .nav-links { -webkit-overflow-scrolling: touch; }
            input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom on focus */
        }

        /* ── RESPONSIVE ── */
        /* 1200px: tighten nav spacing, shrink logo text */
        @media (max-width: 1200px) {
            .nav-links { gap: 18px; }
            .nav-link { font-size: 10px; letter-spacing: 1px; }
            .nav-cta { padding: 10px 20px; font-size: 10px; letter-spacing: 1.5px; }
            .logo-text { font-size: 11px; letter-spacing: 2px; }
            .logo-subtitle { font-size: 7px; letter-spacing: 2px; }
            .logo-wrap .logo-svg { height: 38px; }
            nav { padding: 0 24px; gap: 16px; }
        }

        /* 1024px: hide logo subtitle, reduce further */
        @media (max-width: 1024px) {
            .logo-subtitle { display: none; }
            .logo-wrap .logo-svg { height: 36px; }
            .logo-text { font-size: 10px; letter-spacing: 1.5px; }
            .nav-links { gap: 14px; }
            .nav-link { font-size: 10px; letter-spacing: 1px; }
            nav { padding: 0 20px; }

            .about-grid { grid-template-columns: 1fr; gap: 48px; }
            .about-image-badge { bottom: -20px; right: 20px; }
            .services-grid { grid-template-columns: 1fr 1fr; }
            .gallery-grid { grid-template-columns: repeat(3, 1fr); }
            .projects-grid { grid-template-columns: 1fr; }
            .contact-grid { grid-template-columns: 1fr; gap: 60px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .stat:nth-child(2) { border-right: none; }
            .stat:nth-child(1), .stat:nth-child(2) {
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }
        }

        /* 900px: hide entire text group, just icon + hamburger */
        @media (max-width: 900px) {
            .logo-text-group { display: none; }
            .logo-wrap .logo-svg { height: 34px; }
            .hamburger { display: flex; }
            .nav-links {
                position: fixed; top: 0; right: -100%; width: 100%;
                height: 100vh; height: 100dvh;
                background: var(--black);
                flex-direction: column; justify-content: center; gap: 28px;
                transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
                z-index: 999;
                -webkit-overflow-scrolling: touch;
                overflow-y: auto;
            }
            .nav-links.open { right: 0; }
            .nav-link { font-size: 14px; letter-spacing: 3px; color: var(--white) !important; }
            .nav-cta { margin-top: 12px; font-size: 12px; padding: 14px 32px; }
        }

        @media (max-width: 768px) {
            :root { --section-pad: 100px 0; }
            nav { padding: 0 16px; }
            .logo-wrap .logo-svg { height: 32px; }

            .services-grid { grid-template-columns: 1fr; }
            .service-card { aspect-ratio: 3/2; }
            .service-desc { max-height: none; opacity: 1; }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
            .form-row { grid-template-columns: 1fr; }
            .contact-grid { gap: 60px; }
            .footer-grid { grid-template-columns: 1fr; gap: 36px; }
            .footer-bottom {
                padding-bottom: calc(28px + var(--safe-bottom));
            }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .stat-num { font-size: 44px; }
            .hero h1 { font-size: 38px; }
            .hero-label::before, .hero-label::after { width: 24px; }
            .testimonial-slide { padding: 0 20px; }
            .section-title { font-size: clamp(30px, 6vw, 48px); }
            .section-header { margin-bottom: 56px; }
            .about-image-wrap::before { display: none; }
            .about-image-badge { bottom: -16px; right: 16px; padding: 22px; }
            .about-image-badge .badge-num { font-size: 34px; }
        }

        @media (max-width: 480px) {
            :root { --section-pad: 80px 0; }
            .logo-wrap .logo-svg { height: 28px; }
            nav { padding: 0 12px; }
            header { height: 64px; }
            html { scroll-padding-top: 64px; }
            .gallery-grid { grid-template-columns: 1fr 1fr; gap: 3px; }
            .hero-actions { flex-direction: column; align-items: center; }
            .hero-label::before, .hero-label::after { display: none; }
            .stats-grid { grid-template-columns: 1fr; }
            .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 36px 20px; }
            .stat:last-child { border-bottom: none; }
            .stat-num { font-size: 42px; }
            .section-header { margin-bottom: 44px; }
            .testimonial-inner::before { font-size: 80px; margin-bottom: -24px; }
            .projects-grid { gap: 36px; }
            .contact-grid { gap: 48px; }
        }

/* ── INNER PAGE HEADER ── */
/* On non-home pages, header starts dark with white bg since there's no hero */
header.inner-header {
    background: var(--black);
}
header.inner-header .nav-link { color: rgba(255,255,255,0.85); }
header.inner-header .logo-wrap .logo-svg .logo-shape { fill: #fff; }
header.inner-header .logo-text { color: var(--white); }
header.inner-header .logo-subtitle { color: rgba(255,255,255,0.5); }
header.inner-header .hamburger span { background: var(--white); }
header.inner-header.scrolled {
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.03);
}
header.inner-header.scrolled .nav-link { color: var(--text); }
header.inner-header.scrolled .nav-link:hover { color: var(--accent); }
header.inner-header.scrolled .logo-text { color: var(--text); }
header.inner-header.scrolled .logo-subtitle { color: var(--mid-gray); }
header.inner-header.scrolled .hamburger span { background: var(--text); }
header.inner-header.scrolled .logo-wrap .logo-svg .logo-shape { fill: var(--accent); }

/* Inner page hero banner for sub-pages */
.page-banner {
    padding: 180px 0 100px;
    background: var(--black);
    text-align: center;
}
.page-banner .section-label { color: var(--accent); }
.page-banner .section-title { color: var(--white); margin-bottom: 16px; }
.page-banner .section-desc { color: rgba(255,255,255,0.5); margin: 0 auto; }

/* ── ACCESSIBILITY WIDGET ── */
.a11y-toggle {
    position: fixed; bottom: 100px; right: 36px; z-index: 950;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--accent); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; box-shadow: 0 4px 20px rgba(176,141,87,0.4);
    transition: all 0.3s ease; font-size: 20px;
}
.a11y-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(176,141,87,0.5); }
.a11y-panel {
    position: fixed; bottom: 160px; right: 36px; z-index: 950;
    width: 280px; background: var(--white); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); padding: 24px;
    display: none; max-height: 70vh; overflow-y: auto;
}
.a11y-panel.open { display: block; }
.a11y-panel h3 {
    font-size: 14px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text); margin-bottom: 20px;
}
.a11y-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.a11y-option:last-child { border-bottom: none; }
.a11y-option label {
    font-size: 13px; color: var(--text); font-weight: 500; cursor: pointer;
}
.a11y-option input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}
.a11y-option .a11y-size-controls {
    display: flex; align-items: center; gap: 8px;
}
.a11y-option .a11y-size-controls button {
    width: 28px; height: 28px; border-radius: 4px;
    border: 1px solid var(--warm-gray); background: transparent;
    color: var(--text); font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.a11y-option .a11y-size-controls button:hover {
    border-color: var(--accent); color: var(--accent);
}
.a11y-option .a11y-size-controls span {
    font-size: 12px; color: var(--text-secondary); min-width: 36px; text-align: center;
}
.a11y-reset {
    margin-top: 16px; width: 100%; padding: 10px;
    background: var(--off-white); border: 1px solid var(--warm-gray);
    border-radius: 6px; font-size: 11px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.3s ease;
}
.a11y-reset:hover { border-color: var(--accent); color: var(--accent); }

/* Accessibility active states */
body.a11y-high-contrast { filter: contrast(1.4); }
body.a11y-grayscale { filter: grayscale(1); }
body.a11y-high-contrast.a11y-grayscale { filter: contrast(1.4) grayscale(1); }
body.a11y-highlight-links a { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
body.a11y-big-cursor, body.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 2l20 14-10 2 6 12-4 2-6-12-6 8z' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 5 2, auto !important; }
body.a11y-no-animations *, body.a11y-no-animations *::before, body.a11y-no-animations *::after {
    animation-duration: 0s !important; transition-duration: 0s !important;
}

@media (max-width: 768px) {
    .a11y-toggle { bottom: 90px; right: 16px; width: 44px; height: 44px; font-size: 18px; }
    .a11y-panel { right: 16px; bottom: 144px; width: calc(100vw - 32px); max-width: 300px; }
    .page-banner { padding: 140px 0 60px; }
}
@media (max-width: 480px) {
    .a11y-toggle { bottom: 80px; right: 12px; }
    .a11y-panel { right: 12px; bottom: 134px; }
    .page-banner { padding: 120px 0 48px; }
}