/* ============================================
   A M TILE RENOVATIONS - LUSION-INSPIRED DESIGN
   ============================================ */

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

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #141414;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --accent: #c9a96e;
    --accent-light: #e0c992;
    --accent-dark: #a8883f;
    --accent-glow: rgba(201, 169, 110, 0.3);
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --gradient-1: linear-gradient(135deg, #c9a96e 0%, #e0c992 50%, #c9a96e 100%);
    --gradient-2: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    cursor: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 80px);
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10001;
    mix-blend-mode: difference;
    transition: transform 0.15s ease;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    transition: transform 0.25s var(--ease-out-expo), width 0.3s ease, height 0.3s ease;
    transform: translate(-50%, -50%);
}

.cursor-follower.hovering {
    width: 60px;
    height: 60px;
    border-color: var(--accent-light);
    background: var(--accent-glow);
}

@media (max-width: 768px) {
    .cursor, .cursor-follower { display: none; }
    body { cursor: auto; }
}

/* ---------- PRELOADER ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader.done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader-inner { text-align: center; position: relative; }

.preloader-3d {
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
}

.preloader-text {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.3em;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.preloader-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
}

.preloader-bar {
    width: 200px;
    height: 2px;
    background: var(--border);
    margin: 0 auto 16px;
    border-radius: 2px;
    overflow: hidden;
}

.preloader-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-1);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.preloader-percent {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* ---------- NAVIGATION ---------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px clamp(20px, 4vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.6s var(--ease-out-expo);
}

.nav.scrolled {
    padding: 16px clamp(20px, 4vw, 80px);
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-logo a { display: flex; align-items: center; gap: 8px; }

.logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.logo-large { font-size: 2.5rem; }

.logo-accent {
    color: var(--accent);
    font-weight: 300;
    margin-left: 2px;
}

.nav-links { display: flex; gap: 40px; }

.nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    position: relative;
    padding: 4px 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out-expo);
}

.nav-link:hover { color: var(--text-primary); }

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-right { display: flex; align-items: center; gap: 24px; }

.nav-cta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 28px;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: 100px;
    transition: all 0.3s ease;
}

.nav-cta:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--accent-glow);
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.nav-hamburger span {
    width: 28px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.4s var(--ease-out-expo);
    transform-origin: center;
}

.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 968px) {
    .nav-links, .nav-cta { display: none; }
    .nav-hamburger { display: flex; }
}

/* ---------- MOBILE MENU ---------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s var(--ease-out-expo);
}

.mobile-menu.active { pointer-events: auto; opacity: 1; visibility: visible; }

.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(40px);
}

.mobile-menu-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 100px 40px 40px;
}

.mobile-link {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s var(--ease-out-expo);
}

.mobile-menu.active .mobile-link { opacity: 1; transform: translateY(0); }
.mobile-link:hover { color: var(--accent); }

.mobile-menu-footer { margin-top: auto; }

.mobile-cta {
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 40px;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: 100px;
    display: inline-block;
}

/* ---------- HERO SECTION ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-3d-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-3d-canvas canvas { width: 100% !important; height: 100% !important; }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(10,10,10,0.3) 0%,
        rgba(10,10,10,0.1) 40%,
        rgba(10,10,10,0.6) 80%,
        rgba(10,10,10,0.95) 100%
    );
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 8s infinite;
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    10% { opacity: 0.6; transform: scale(1); }
    90% { opacity: 0.1; }
    100% { opacity: 0; transform: translateY(-100vh) scale(0); }
}

.hero-content {
    position: relative;
    z-index: 5;
    padding: 0 clamp(20px, 4vw, 80px);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.hero-tag {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    opacity: 0;
}

.hero-tag-line { width: 60px; height: 1px; background: var(--accent); }

.hero-tag-text {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 8vw, 7.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
}

/* overflow:hidden is the wipe-up mask. line-height:1 leaves it no room, so the
   descenders in "Transforming" / "Spaces" and the italic serif get sliced off.
   Pad the mask and pull it back with a matching negative margin: descenders
   clear the edge, spacing is unchanged. */
.hero-title-line {
    display: block;
    overflow: hidden;
    padding: 0.06em 0.08em 0.20em;
    margin: -0.06em -0.08em -0.20em;
}

.hero-word {
    display: inline-block;
    transform: translateY(120%);
}

.hero-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 550px;
    line-height: 1.7;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(20px);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 18px 36px;
    border-radius: 100px;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
}

.btn-primary { background: var(--accent); color: var(--bg-primary); }
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-primary:hover {
    background: var(--accent-light);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px);
}

.btn-large { padding: 22px 48px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

.btn-icon { display: flex; transition: transform 0.3s ease; }
.btn:hover .btn-icon { transform: translate(4px, -4px); }

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
}

.scroll-text {
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}

.scroll-line-fill {
    width: 100%;
    height: 30px;
    background: var(--accent);
    position: absolute;
    top: -30px;
    animation: scrollLine 2s var(--ease-in-out) infinite;
}

@keyframes scrollLine {
    0% { top: -30px; }
    100% { top: 60px; }
}

/* Hero Stats */
.hero-stats {
    position: absolute;
    bottom: 40px;
    right: clamp(20px, 4vw, 80px);
    z-index: 5;
    display: flex;
    gap: 48px;
}

.hero-stat { text-align: right; opacity: 0; transform: translateY(20px); }

.hero-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.hero-stat-suffix,
.hero-stat-decimal {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
}

.hero-stat-label {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

@media (max-width: 768px) {
    .hero-stats {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: flex-start;
        gap: 32px;
        margin-top: 48px;
        padding: 0 clamp(20px, 4vw, 80px);
    }
    .hero-stat { text-align: left; }
}

/* ---------- MARQUEE SECTION ---------- */
.marquee-section {
    padding: 32px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-secondary);
}

.marquee { position: relative; overflow: hidden; }

.marquee-track {
    display: flex;
    align-items: center;
    gap: 48px;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
    width: max-content;
}

.marquee-item {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.marquee-item:hover { opacity: 1; }

.marquee-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- SECTION HEADERS ---------- */
.section-header { margin-bottom: 80px; }
.section-header.center { text-align: center; }

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
    padding: 8px 20px;
    border: 1px solid rgba(201, 169, 110, 0.25);
    border-radius: 100px;
}

.section-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.section-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

/* Same descender fix as .hero-title-line — this mask wraps every section heading. */
.title-reveal {
    display: block;
    overflow: hidden;
    padding: 0.06em 0.08em 0.20em;
    margin: -0.06em -0.08em -0.20em;
}

/* ---------- ABOUT SECTION ---------- */
.about {
    position: relative;
    padding: 160px 0;
    overflow: hidden;
}

.about-3d-canvas {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.about-founder {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.founder-image-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.founder-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.founder-info span { font-size: 0.8125rem; color: var(--accent); }

.about-visual { position: relative; }
.about-image-stack { position: relative; display: flex; flex-direction: column; gap: 18px; }

.about-img-1 {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
}

.about-img-2 {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
}

.about-image-float {
    position: relative;
}

.float-card {
    background: var(--accent);
    color: var(--bg-primary);
    padding: 18px 28px;
    border-radius: 16px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 16px 40px rgba(201, 169, 110, 0.22);
}

.float-number { font-size: 1.9rem; font-weight: 800; line-height: 1; }

.float-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 968px) {
    .about-grid { grid-template-columns: 1fr; gap: 60px; }
}

/* ---------- SERVICES SECTION ---------- */
.services {
    position: relative;
    padding: 160px 0;
    background: var(--bg-secondary);
    overflow: hidden;
}

.services-bg-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.15;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

.service-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.6s var(--ease-out-expo);
}

.service-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px var(--accent-glow);
}

.service-card-inner { padding: 48px; position: relative; }

.service-3d-icon { width: 80px; height: 80px; margin-bottom: 24px; }

.service-number {
    font-size: 6rem;
    font-weight: 900;
    color: var(--border);
    position: absolute;
    top: 24px;
    right: 32px;
    line-height: 1;
    transition: color 0.4s ease;
}

.service-card:hover .service-number { color: rgba(201, 169, 110, 0.15); }

.service-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }

.service-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.service-image-wrapper { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.service-img { width: 100%; aspect-ratio: 4/3; }

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    transition: gap 0.3s ease;
}

.service-link:hover { gap: 14px; }

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
    .service-card-inner { padding: 32px; }
}

/* ---------- PROCESS SECTION ---------- */
.process { padding: 160px 0; position: relative; overflow: hidden; }

.process-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.process-line {
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.process-line-fill {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top center;
    background: var(--gradient-1);
    transition: transform 0.6s var(--ease-out-expo);
}

.process-step {
    position: relative;
    padding-left: 80px;
    padding-bottom: 80px;
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

.process-step.active { opacity: 1; }
.process-step:last-child { padding-bottom: 0; }

.process-step-dot {
    position: absolute;
    left: 13px;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    transition: all 0.4s ease;
    z-index: 1;
}

.process-step.active .process-step-dot {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.process-step-num {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.process-step-content h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }

.process-step-content p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
}

@media (max-width: 768px) {
    .process-step { padding-left: 60px; }
}

/* ---------- PROJECTS GALLERY ---------- */
.projects {
    padding: 160px 0;
    background: var(--bg-secondary);
    overflow: hidden;
}

.projects-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.project-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

.project-large { grid-column: span 7; }
.project-small { grid-column: span 5; }
.project-medium { grid-column: span 6; }

.project-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.project-img {
    width: 100%;
    aspect-ratio: 3/2;
    transition: transform 0.8s var(--ease-out-expo);
}

/* Boxes match each photo's true shape so nothing important gets cropped away */
.project-img.is-portrait { aspect-ratio: 4/5; }
.project-img.is-square { aspect-ratio: 1/1; }

.project-item:hover .project-img,
.project-item:hover .placeholder-image { transform: scale(1.05); }

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    padding: 32px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-item:hover .project-overlay { opacity: 1; }

.project-category {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.project-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; }
.project-location { font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .project-large, .project-small, .project-medium { grid-column: span 12; }
}

/* ---------- BEFORE / AFTER SECTION ---------- */
.before-after { padding: 160px 0; overflow: hidden; }

.ba-slider-container { max-width: 900px; margin: 0 auto; }

.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: 20px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-after { clip-path: inset(0 0 0 50%); }

.ba-img { width: 100%; height: 100%; object-fit: cover; }

.ba-label {
    position: absolute;
    bottom: 24px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.ba-label-before {
    left: 24px;
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff9999;
}

.ba-label-after {
    right: 24px;
    background: rgba(100, 255, 100, 0.2);
    border: 1px solid rgba(100, 255, 100, 0.3);
    color: #99ff99;
}

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.ba-handle-line { flex: 1; width: 2px; background: var(--accent); }

.ba-handle-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* ---------- TESTIMONIALS SECTION ---------- */
.testimonials {
    position: relative;
    padding: 160px 0;
    background: var(--bg-secondary);
    overflow: hidden;
}

.testimonials-bg-canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.1; }

.testimonials-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0 -80px;
    padding: 0 80px;
}

.testimonials-track {
    display: flex;
    gap: 24px;
    animation: testimonialScroll 40s linear infinite;
    width: max-content;
}

.testimonials-track:hover { animation-play-state: paused; }

@keyframes testimonialScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    min-width: 400px;
    max-width: 400px;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.testimonial-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.testimonial-stars { margin-bottom: 20px; display: flex; gap: 4px; }
.testimonial-stars span { color: var(--accent); font-size: 1.125rem; }

.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-author { display: flex; align-items: center; gap: 14px; }

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.testimonial-author h3 { font-size: 0.9375rem; font-weight: 600; }
.testimonial-author span { font-size: 0.75rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .testimonial-card { min-width: 300px; max-width: 300px; padding: 28px; }
}

/* ---------- CTA SECTION ---------- */
.cta-section {
    position: relative;
    padding: 200px 0;
    text-align: center;
    overflow: hidden;
}

.cta-3d-canvas { position: absolute; inset: 0; z-index: 0; }

.cta-content { position: relative; z-index: 1; }

.cta-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}

.cta-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.cta-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 48px;
}

/* ---------- CONTACT SECTION ---------- */
.contact { padding: 160px 0; background: var(--bg-secondary); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.contact-details { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

.contact-item h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; }
.contact-item p { font-size: 0.875rem; color: var(--text-secondary); }
.contact-item a { color: var(--accent); transition: color 0.3s; }
.contact-item a:hover { color: var(--accent-light); }

.contact-socials { display: flex; gap: 16px; margin-top: 40px; }

.social-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.social-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-4px);
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 48px;
}

.form-group { margin-bottom: 32px; position: relative; }

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-family: var(--font-primary);
    outline: none;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-bottom-color: var(--accent); }

.form-group select { cursor: pointer; }
.form-group select option { background: var(--bg-card); color: var(--text-primary); }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.4s var(--ease-out-expo);
}

.form-group input:focus ~ .form-line,
.form-group select:focus ~ .form-line,
.form-group textarea:focus ~ .form-line { width: 100%; }

@media (max-width: 968px) {
    .contact-grid { grid-template-columns: 1fr; gap: 60px; }
    .contact-form-wrapper { padding: 32px; }
}

/* ---------- FOOTER ---------- */
.footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--border);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--border);
}

.footer-brand { max-width: 360px; }

.footer-brand p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-top: 16px;
}

.footer-links-grid { display: flex; gap: 80px; }

.footer-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.footer-col a {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
}

.footer-bottom p { font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .footer-top { flex-direction: column; }
    .footer-links-grid { gap: 40px; flex-wrap: wrap; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ---------- PLACEHOLDER IMAGES ---------- */
.placeholder-image {
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.8s var(--ease-out-expo);
}

.placeholder-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(201, 169, 110, 0.05) 0%,
        rgba(201, 169, 110, 0.02) 50%,
        rgba(201, 169, 110, 0.08) 100%
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.placeholder-image::after {
    content: attr(data-placeholder);
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.6;
}

.placeholder-image span {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

.founder-photo { width: 100%; height: 100%; border-radius: 50%; }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal-text { opacity: 0; transform: translateY(40px); }

.reveal-text.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

/* ---------- SELECTION & SCROLLBAR ---------- */
::selection { background: var(--accent); color: var(--bg-primary); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- HERO BACKGROUND IMAGE ---------- */
.hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.5);
}

/* ---------- SERVICE IMAGES ---------- */
.service-img {
    width: 100%;
    height: auto; /* beat the width/height attrs so aspect-ratio wins */
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.6s var(--ease-out-expo);
}

.service-card:hover .service-img { transform: scale(1.03); }

/* ---------- ABOUT IMAGES ---------- */
.about-img-1 img,
.about-img-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ---------- PROJECT IMAGES ---------- */
.project-img {
    width: 100%;
    height: auto; /* beat the width/height attrs so aspect-ratio wins */
    aspect-ratio: 3/2;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.project-item:hover .project-img { transform: scale(1.05); }

/* ---------- TRANSFORMATIONS SECTION ---------- */
.transformations {
    padding: 160px 0;
    overflow: hidden;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 16px;
}

.ba-showcase {
    margin-bottom: 80px;
}

.ba-showcase:last-child { margin-bottom: 0; }

.ba-showcase-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.05em;
}

.ba-slider-container {
    max-width: 900px;
    margin: 0 auto;
}

.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: 20px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    border: 1px solid var(--border);
}

.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-after { clip-path: inset(0 0 0 50%); }

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

.ba-label {
    position: absolute;
    bottom: 24px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.ba-label-before {
    left: 24px;
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff9999;
}

.ba-label-after {
    right: 24px;
    background: rgba(100, 255, 100, 0.2);
    border: 1px solid rgba(100, 255, 100, 0.3);
    color: #99ff99;
}

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.ba-handle-line { flex: 1; width: 2px; background: var(--accent); }

.ba-handle-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: transform 0.2s ease;
}

.ba-handle-circle:hover { transform: scale(1.15); }

/* ---------- CTA BACKGROUND IMAGE ---------- */
.cta-section { position: relative; }

.cta-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

/* ---------- SCROLL PROGRESS INDICATOR ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    height: 3px;
    background: var(--gradient-1);
    z-index: 10002;
    transition: width 0.1s linear;
}

/* ---------- ENHANCED SECTION TRANSITIONS ---------- */
section {
    position: relative;
}

.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

.section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- ENHANCED HOVER CARDS ---------- */
.service-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px var(--accent-glow);
}

.testimonial-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-glow);
}

.project-item:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- IMAGE PARALLAX CONTAINERS ---------- */
.parallax-img {
    will-change: transform;
}

/* ---------- SCROLL REVEAL BLUR ---------- */
.blur-reveal {
    opacity: 0;
    transform: translateY(50px);
}

.blur-reveal.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.9s var(--ease-out-expo),
                transform 0.9s var(--ease-out-expo);
}


/* ---------- FOOTER LEGAL (Privacy + Terms, collapsible) ---------- */
.legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 48px 0 32px;
}
@media (max-width: 700px) {
    .legal-grid { grid-template-columns: 1fr; gap: 12px; }
}
.legal-doc {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.6);
    overflow: hidden;
    transition: border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.legal-doc[open] {
    border-color: var(--accent-glow);
    box-shadow: 0 0 24px rgba(201, 169, 110, 0.12);
}
.legal-doc summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
    transition: background 0.25s var(--ease-out-expo);
}
.legal-doc summary::-webkit-details-marker { display: none; }
.legal-doc summary:hover { background: rgba(201, 169, 110, 0.05); }
.legal-eyebrow {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--border-hover);
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}
.legal-title {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--text-primary);
}
.legal-toggle {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--accent);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-hover);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo);
    flex-shrink: 0;
}
.legal-doc[open] .legal-toggle {
    transform: rotate(45deg);
    border-color: var(--accent);
}
.legal-body {
    max-height: 52vh;
    overflow-y: auto;
    padding: 4px 24px 28px;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dark) transparent;
}
.legal-body::-webkit-scrollbar { width: 6px; }
.legal-body::-webkit-scrollbar-track { background: transparent; }
.legal-body::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 3px; }
.legal-body p { margin: 0 0 12px; }
.legal-body h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 22px 0 8px;
}
.legal-body ul { margin: 0 0 12px; padding-left: 20px; }
.legal-body li { margin-bottom: 5px; }
.legal-body a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-glow);
    transition: border-color 0.2s var(--ease-out-expo);
}
.legal-body a:hover { border-color: var(--accent); }
.legal-body strong { color: var(--text-primary); font-weight: 600; }
.legal-date {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 18px !important;
    margin-top: 8px;
}

/* ============================================
   ROUND 5: iPHONE OPTIMIZATION + PREMIUM POLISH
   ============================================ */

/* Netlify Forms honeypot stays invisible and unfocusable */
.hidden-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Metallic gold CTAs read more premium than a flat fill */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
}

@media (max-width: 768px) {
    /* 3D service icons are gated off in JS on phones; reclaim the empty gap they left */
    .service-3d-icon { display: none; }
    .service-card-inner { padding-top: 40px; }

    /* Hero is a default row flex; stack it on phones so the stats sit BELOW the
       content instead of being squeezed onto the right edge. */
    .hero { flex-direction: column; align-items: flex-start; justify-content: center; }
    .hero-content { width: 100%; }
    .hero-scroll-indicator { display: none; }
    .hero-stats { width: 100%; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
    .hero-stat-number { font-size: 2.1rem; }
}

/* ---------- FORM STATUS MESSAGE ---------- */
.form-status {
    margin-top: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 1.25em;
}
.form-status.is-ok { color: #6fcf7f; }
.form-status.is-error { color: #ff8a80; }
.form-status a { color: var(--accent); text-decoration: underline; }

/* ---------- NO-GSAP SAFETY NET ----------
   Everything below is revealed by GSAP. If the animation CDN never arrives,
   show the copy rather than leaving the page half-blank. */
.no-gsap .hero-tag,
.no-gsap .hero-subtitle,
.no-gsap .hero-buttons,
.no-gsap .hero-scroll-indicator,
.no-gsap .hero-stat,
.no-gsap .hero-word,
.no-gsap .title-reveal,
.no-gsap .reveal-text,
.no-gsap .section-reveal,
.no-gsap .blur-reveal,
.no-gsap .preloader-letter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.no-gsap .preloader { display: none !important; }

/* ============================================
   MOBILE POLISH + MOTION SAFETY
   ============================================ */

/* 160px of top and bottom padding is a desktop rhythm. On a phone it reads as
   dead space between every section, so tighten it. */
@media (max-width: 768px) {
    .about,
    .services,
    .process,
    .projects,
    .transformations,
    .before-after,
    .testimonials,
    .contact,
    .footer {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .cta-section { padding: 110px 0; }

    .section-header { margin-bottom: 40px; }

    .ba-showcase { margin-bottom: 48px; }

    .process-step { padding-bottom: 48px; }

    .hero-stats { gap: 24px; flex-wrap: wrap; }
    .hero-buttons { gap: 14px; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
}

/* backdrop-filter is the single biggest scroll-jank source on phones.
   Swap every blurred panel for a solid one below the tablet breakpoint. */
@media (max-width: 968px) {
    .nav.scrolled,
    .mobile-menu-bg,
    .ba-label,
    .float-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .nav.scrolled { background: #0a0a0a; }
    .mobile-menu-bg { background: #0a0a0a; }
    .ba-label { background: rgba(10, 10, 10, 0.82); }
}

/* Visitors who ask their device for less motion get the finished layout,
   not a page of invisible elements waiting on a scroll trigger. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hero-tag,
    .hero-subtitle,
    .hero-buttons,
    .hero-scroll-indicator,
    .hero-stat,
    .hero-word,
    .reveal-text,
    .section-reveal,
    .blur-reveal,
    .preloader-letter {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .marquee-track,
    .testimonials-track { animation: none !important; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- SERVICE CARD STACKING ----------
   .service-number is absolutely positioned, so it painted *over* the heading
   instead of sitting behind it as a watermark. Push it back and lift the copy. */
.service-number { z-index: 0; pointer-events: none; }

.service-title,
.service-desc,
.service-image-wrapper,
.service-link {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    /* The 3D icon canvas is never rendered on phones — don't reserve 80px for it. */
    .service-3d-icon { display: none; }

    /* Narrow cards: shrink the watermark and keep the two-line title clear of it. */
    .service-number { font-size: 4rem; top: 20px; right: 24px; }
    .service-title { padding-right: 76px; }
}

/* ---------- GALLERY CAPTIONS ON TOUCH ----------
   .project-overlay only fades in on :hover, which never fires on a phone —
   every gallery photo was going out unlabelled. Show it by default there. */
@media (hover: none), (max-width: 768px) {
    .project-overlay { opacity: 1; }
    .project-item:hover .project-img { transform: none; }
}

/* ---------- DECORATIVE CANVAS LAYERING ----------
   The *-bg-canvas layers are position:absolute with z-index:0, which paints them
   above the section's non-positioned content — the services and testimonials
   headings were sitting underneath their own background. Lift the containers,
   and make sure a decorative layer can never intercept a click. */
.about > .container,
.services > .container,
.testimonials > .container {
    position: relative;
    z-index: 1;
}

.hero-3d-canvas,
.hero-particles,
.hero-bg-image,
.hero-overlay,
.about-3d-canvas,
.services-bg-canvas,
.testimonials-bg-canvas,
.cta-3d-canvas,
.cta-bg-image {
    pointer-events: none;
}

/* ---------- GALLERY: FINISHED SPACES vs CRAFT DETAILS ----------
   A shower-valve close-up and a flat tile swatch were getting the same
   full-width slot as a finished bathroom, which made the set read like padding.
   Detail and material shots pair up at half width so the hierarchy is
   deliberate: big frames are rooms, small frames are craft. */
@media (max-width: 768px) {
    .project-item.project-detail { grid-column: span 6; }
    .project-detail .project-overlay { padding: 16px; }
    .project-detail .project-name { font-size: 0.9375rem; line-height: 1.25; }
    .project-detail .project-category { font-size: 0.5625rem; margin-bottom: 4px; }
    .project-detail .project-location { display: none; }
}

.contact-sub { margin-top: 4px; font-size: 0.8125rem; }
.contact-sub a { color: var(--text-muted); }
.contact-sub a:hover { color: var(--accent); }

/* Always-on captions need a stronger scrim than hover captions did: several of
   these photos are bright tile, and white text was washing out against them. */
@media (hover: none), (max-width: 768px) {
    .project-overlay {
        background: linear-gradient(180deg,
            rgba(10, 10, 10, 0) 30%,
            rgba(10, 10, 10, 0.55) 62%,
            rgba(10, 10, 10, 0.92) 100%);
    }
}

/* ================== MOBILE POLISH ==================
   Everything below is phone-only correction of things that read fine on a
   laptop but look accidental on a 390px screen. */
@media (max-width: 768px) {

    /* HERO ART DIRECTION.
       The desktop hero is a 16:9 landscape crop. Poured into a ~412x923 phone
       box, object-fit:cover shows barely a quarter of its width -- you get the
       stone wall and lose the tub and fireplace entirely. A portrait crop of
       the same photo is served instead (see <picture> in the markup), so the
       phone gets the composition the laptop gets. */
    .hero-bg-image img { object-position: center center; }

    /* THE MARQUEE STRIP.
       A ticker sliding words past the edge of the screen reads as a stray
       browser artifact on a phone, and every term in it ("Custom Showers",
       "Floor Renovation") is already stated properly in the services section
       directly below. It earns its space on a wide screen and nothing on a
       narrow one. */
    .marquee-section { display: none; }

    /* HERO STATS.
       Three flex items with a 28px gap wrap to 2 + 1, orphaning "5.0" on its
       own row and making the set look broken. A three-column grid keeps them
       as one deliberate band. */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        flex-wrap: nowrap;
    }
    .hero-stat { text-align: left; }
    .hero-stat-number { font-size: 1.75rem; }
    .hero-stat-label { font-size: 0.5625rem; letter-spacing: 0.12em; }

    /* SERVICE CARDS.
       The photo is the proof of the work, and it was sitting at 284px wide
       inside a 350px card, boxed in by 32px of padding on every side. Letting
       it run the full width of the card makes it ~50% larger in area and puts
       the craftsmanship first. */
    .service-card-inner { padding: 28px 20px 24px; }
    .service-image-wrapper { margin: 0 -20px; border-radius: 0; }
    .service-img { border-radius: 0; }

    /* VERTICAL RHYTHM.
       88px of section padding is a laptop measurement; on a phone it reads as
       dead black space between every band. */
    .about, .services, .transformations, .projects,
    .process, .testimonials, .cta-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* ================== MOBILE POLISH: LEGIBILITY ==================
   Second pass, from reading the phone render rather than the laptop one. */
@media (max-width: 768px) {

    /* The scrim was tuned for the landscape crop, where the headline landed on
       a dark part of the frame. On the portrait crop the headline sits on the
       brightest stone in the photo and white type goes mushy. This darkens the
       top and bottom bands and leaves a clear window across the middle so the
       fireplace and tub still read. */
    .hero-overlay {
        background: linear-gradient(180deg,
            rgba(10,10,10,0.74) 0%,
            rgba(10,10,10,0.56) 38%,
            rgba(10,10,10,0.34) 56%,
            rgba(10,10,10,0.82) 82%,
            rgba(10,10,10,0.97) 100%
        );
    }

    /* Muted grey body text over a photograph is a desktop luxury. */
    .hero-subtitle {
        color: rgba(255,255,255,0.88);
        margin-bottom: 36px;
    }

    /* "PROJECTS COMPLETED" was the only label wrapping to two lines, which
       left the stat row visibly ragged. */
    .hero-stat-label {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}

/* ================== STRUCTURAL AUDIT FIXES ================== */

/* ANCHOR LANDING.
   The nav is position:fixed, so every in-page link ("Services", "Reviews",
   "Get a Quote") was dropping the section heading underneath it -- the visitor
   lands on a title that is already half covered. */
html { scroll-padding-top: 96px; }
section[id] { scroll-margin-top: 96px; }

/* VIEWPORT UNITS.
   100vh on iOS is the height WITHOUT the address bar, so the hero jumps and
   reflows the moment the user starts scrolling. svh is the stable measurement;
   the 100vh line stays first as the fallback for older browsers. */
.hero { min-height: 100vh; min-height: 100svh; }

/* Duplicate reviews exist only to make the desktop loop seamless. They are
   the same five people repeated, so they are hidden from screen readers. */
.testimonial-card.is-clone { user-select: none; }

@media (max-width: 768px) {

    /* REVIEWS ON A PHONE.
       The strip was overflow:hidden with an 8-card, 2568px track and no way to
       scroll it -- only the auto-animation moved it. Anyone with Reduce Motion
       turned on (a very common iPhone setting) saw one and a half reviews,
       frozen, forever. On a phone this is now a swipeable carousel that works
       with the animation off, and the duplicate cards are removed so nobody
       swipes into the same review twice. */
    .testimonials-track { animation: none !important; }
    .testimonial-card.is-clone { display: none; }

    .testimonials-marquee {
        margin: 0 -20px;
        padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .testimonials-marquee::-webkit-scrollbar { display: none; }
    .testimonials-track { gap: 16px; }
    .testimonial-card {
        scroll-snap-align: center;
        min-width: 82vw;
        max-width: 82vw;
    }

    /* TAP TARGETS.
       Apple's minimum is 44px. The phone number -- the single most valuable
       tap on a contractor's site -- was a 17px-tall line of text. */
    .contact-item a,
    .contact-sub a { display: inline-block; padding: 12px 0; min-height: 44px; }
    .service-link { padding: 12px 0; min-height: 44px; }
    .mobile-link { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
    .social-link { min-width: 44px; min-height: 44px; display: inline-flex;
                   align-items: center; justify-content: center; }
    .nav-hamburger { min-width: 44px; min-height: 44px; justify-content: center; }
    .legal-doc summary { min-height: 44px; }
}

@media (max-width: 768px) {
    /* Footer nav links were 18px-tall targets stacked 4 deep -- easy to miss,
       easy to hit the wrong one. Inline links inside legal paragraphs are
       deliberately left alone: padding them would break the sentence flow,
       and WCAG exempts links set inside a block of text. */
    .footer-col a { padding: 11px 0; min-height: 44px; display: flex; align-items: center; }
    .nav-logo a { min-height: 44px; align-items: center; }
}

/* Detail cards were reading a touch small once they were paired up. Tighter
   gutter buys width, and a portrait frame buys height -- roughly 30% more
   image area without breaking the two-up pairing. */
@media (max-width: 768px) {
    .projects-gallery { gap: 16px; }
    .project-item.project-detail .project-img { aspect-ratio: 4/5; }
    .project-detail .project-name { font-size: 1rem; }
}

/* ==========================================================================
   MOBILE PERFORMANCE GUARD
   backdrop-filter is the single most expensive thing a phone GPU can be asked
   to do while scrolling. Kill it under 800px and use a solid background — the
   elements below already carry a near-opaque colour, so the look barely shifts.
   ========================================================================== */
@media (max-width: 800px) {
    .nav.scrolled,
    .mobile-menu-bg,
    .ba-label {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .nav.scrolled   { background: rgba(10, 10, 10, 0.97); }
    .mobile-menu-bg { background: rgba(10, 10, 10, 0.99); }
}