*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Glacial Indifference', sans-serif;
}

:root {
    --bg: #FAFAF8;
    --bg-2: #F2F0EB;
    --bg-3: #ECEAE3;
    --bg-card: #FFFFFF;
    --text: #1C1C1C;
    --text-2: #4A4A4A;
    --text-3: #888888;
    --gold: #B8913A;
    --gold-light: #D4A94D;
    --gold-dim: rgba(184, 145, 58, 0.12);
    --gold-line: rgba(184, 145, 58, 0.25);
    --border: rgba(28, 28, 28, 0.08);
    --border-2: rgba(28, 28, 28, 0.14);
    --font: 'Glacial Indifference', sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Responsive Spacing System */
    --container-px: clamp(1.5rem, 5vw, 6rem);
    --section-pad: clamp(5rem, 10vw, 10rem);
    --max-w: 1360px;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 300;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: var(--bg-2);
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
}

/* NAVBAR */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.8rem var(--container-px);
    width: 100%;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: background .5s var(--ease), padding .4s var(--ease), box-shadow .4s;
}

nav.scrolled {
    background: rgba(250, 250, 248, 0.96);
    padding: 1.1rem var(--container-px);
    box-shadow: 0 1px 0 var(--border-2);
    backdrop-filter: blur(20px);
}

nav.scrolled .nav-logo {
    color: var(--text);
}

nav.scrolled .nav-links a {
    color: var(--text-2);
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo img {
    height: 65px;
    width: auto;
    border-radius: 50%;
    /* The logo is circular, but this ensures it stays clean */
    transition: transform .4s var(--ease);
}

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

.nav-links {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    margin-left: auto;
    margin-right: 2.5rem;
}

.nav-links a {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    transition: color .4s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width .4s var(--ease);
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gold);
    padding: .75rem 1.8rem;
    text-decoration: none;
    border-radius: 30px;
    transition: background .3s, transform .2s;
}

.nav-cta:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

/* ========================
   MODERN MENU BUTTON ICON
   ======================== */
.nav-menu-btn {
    display: none;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: .55rem 1rem .55rem .7rem;
    cursor: pointer;
    z-index: 2100;
    position: relative;
    transition: background .3s, border-color .3s, transform .2s;
}

nav.scrolled .nav-menu-btn {
    background: rgba(28, 28, 28, 0.07);
    border-color: rgba(28, 28, 28, 0.12);
}

.nav-menu-btn:hover {
    background: rgba(184, 145, 58, 0.15);
    border-color: rgba(184, 145, 58, 0.4);
    transform: scale(1.03);
}

.nav-menu-btn.active {
    background: rgba(184, 145, 58, 0.18);
    border-color: rgba(184, 145, 58, 0.5);
}

.menu-icon {
    width: 26px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.bar {
    display: block;
    height: 1.5px;
    background: #fff;
    border-radius: 4px;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

nav.scrolled .bar {
    background: var(--text);
}

.bar-1 {
    width: 100%;
}

.bar-2 {
    width: 70%;
}

.bar-3 {
    width: 45%;
}

/* HOVER EFFECT - Magnetic stretch */
.nav-menu-btn:hover .bar {
    width: 100%;
    background: var(--gold);
}

/* ACTIVE STATE → Stylized Modern X */
.nav-menu-btn.active .bar-1 {
    transform: translateY(7px) rotate(45deg);
    width: 100%;
    background: var(--gold);
}

.nav-menu-btn.active .bar-2 {
    opacity: 0;
    transform: translateX(20px);
}

.nav-menu-btn.active .bar-3 {
    transform: translateY(-7.5px) rotate(-45deg);
    width: 100%;
    background: var(--gold);
}

.menu-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    transition: color .3s, opacity .3s;
}

nav.scrolled .menu-label {
    color: var(--text);
}

.nav-menu-btn.active .menu-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
}


/* ================================
   MOBILE DROPDOWN PANEL
   ================================ */
.mob-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1800;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.mob-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.mob-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1900;
    background: rgba(10, 8, 5, 0.96);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(184, 145, 58, 0.25);
    transform: translateY(-110%);
    transition: transform .65s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    max-height: 100vh;
}

.mob-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
}

.mob-dropdown.open {
    transform: translateY(0);
}

.mob-dropdown-inner {
    padding: 6rem 2rem 2rem;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.mob-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .3s, transform .4s var(--ease), border-color .3s;
    z-index: 10;
}

.mob-close:hover {
    background: rgba(184, 145, 58, 0.15);
    border-color: var(--gold);
    transform: rotate(90deg);
    color: var(--gold);
}

/* NAV ITEMS */
.mob-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
}

.mob-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem .5rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-20px);
    transition:
        opacity .5s var(--ease),
        transform .6s var(--ease),
        background .3s;
}

.mob-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(184, 145, 58, 0.08), transparent);
    transition: width .4s var(--ease);
}

.mob-nav-item:hover::before {
    width: 100%;
}

.mob-dropdown.open .mob-nav-item {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delays */
.mob-dropdown.open .mob-nav-item:nth-child(1) {
    transition-delay: .12s;
}

.mob-dropdown.open .mob-nav-item:nth-child(2) {
    transition-delay: .19s;
}

.mob-dropdown.open .mob-nav-item:nth-child(3) {
    transition-delay: .26s;
}

.mob-dropdown.open .mob-nav-item:nth-child(4) {
    transition-delay: .33s;
}

.mob-dropdown.open .mob-nav-item:nth-child(5) {
    transition-delay: .40s;
}

.mob-nav-num {
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .25em;
    color: var(--gold);
    opacity: .7;
    min-width: 20px;
    font-family: var(--font);
    pointer-events: none;
}

.mob-nav-label {
    font-size: 1.35rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -.01em;
    flex: 1;
    transition: color .3s;
}

.mob-nav-item:hover .mob-nav-label {
    color: var(--gold);
}

.mob-nav-arrow {
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    transition: color .3s, transform .35s var(--ease);
}

.mob-nav-item:hover .mob-nav-arrow {
    color: var(--gold);
    transform: translateX(4px);
}

/* TOUCH OPTIMIZATION */
@media (pointer: coarse) {
    .mob-nav-item {
        padding: 1.25rem .5rem;
    }

    .f-btn,
    .btn-gold,
    .nav-cta,
    .mob-cta-btn {
        min-height: 48px;
    }
}

/* FOOTER */
.mob-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s .5s, transform .5s .5s;
}

.mob-dropdown.open .mob-dropdown-footer {
    opacity: 1;
    transform: translateY(0);
}

.mob-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    letter-spacing: .04em;
    transition: color .3s;
}

.mob-contact-pill:hover {
    color: var(--gold);
}

.mob-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gold);
    padding: .65rem 1.3rem;
    border-radius: 30px;
    text-decoration: none;
    transition: background .3s, transform .2s;
}

.mob-cta-btn:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

/* HERO */
#hero {
    --hero-bg-x: 0px;
    --hero-bg-y: 0px;
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 100px;
    padding-bottom: 60px;
}

.hero-bg {
    position: absolute;
    inset: -2%;
    overflow: hidden;
    transform: scale(1.08);
    transition: transform 14s var(--ease);
}

.hero-bg::before,
.hero-bg::after {
    content: '';
    position: absolute;
}

.hero-bg::before {
    inset: -24px;
    background: url('assets/backgroundhero.jpeg') center/cover no-repeat;
    transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0);
    transition: transform 1.1s cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
}

.hero-bg::after {
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.56) 100%);
}

#hero.loaded .hero-bg {
    transform: scale(1.015);
}

.hero-vline {
    display: none;
}

.hero-cnt {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 3rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    overflow: hidden;
    opacity: 0;
    filter: blur(7px);
    transform: translateY(34px) scale(.965);
    will-change: transform, opacity, filter;
}

.hero-cnt::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, .13) 48%, transparent 68%);
    transform: translateX(-130%);
}

.hero-cnt > * {
    position: relative;
    z-index: 1;
}

#hero.loaded .hero-cnt {
    animation: heroPanelIn 1.15s .08s cubic-bezier(.16, 1, .3, 1) forwards;
}

#hero.loaded .hero-cnt::before {
    animation: heroGlassSweep 1.45s 1.15s var(--ease) forwards;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(16px);
}

#hero.loaded .hero-tag {
    animation: fadeUp .8s .35s var(--ease) forwards;
}

.hero-tag::before,
.hero-tag::after {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
}

.hero-tag::before {
    transform-origin: right;
}

.hero-tag::after {
    transform-origin: left;
}

#hero.loaded .hero-tag::before,
#hero.loaded .hero-tag::after {
    animation: heroRuleIn .65s .8s var(--ease) forwards;
}

.hero-title {
    font-size: clamp(2rem, 6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #FFFFFF;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-bottom: 1.8rem;
}

.hero-title-line {
    display: block;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(58px);
}

#hero.loaded .hero-title-line:first-child {
    animation: heroLineIn .95s .52s cubic-bezier(.16, 1, .3, 1) forwards;
}

#hero.loaded .hero-title-line:nth-child(2) {
    animation: heroLineIn .95s .69s cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero-title .g {
    color: var(--gold);
    text-shadow: 0 0 34px rgba(199, 157, 57, .18);
}

.hero-sub {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: .04em;
    margin-bottom: 3.5rem;
    opacity: 0;
    transform: translateY(24px);
}

#hero.loaded .hero-sub {
    animation: fadeUp .9s .9s var(--ease) forwards;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    transform: translateY(20px);
}

#hero.loaded .hero-actions {
    animation: fadeUp .8s 1.08s var(--ease) forwards;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--gold);
    padding: 1.1rem 2.6rem;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

.btn-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold-light);
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
}

.btn-gold:hover::before {
    transform: translateX(0);
}

.btn-gold span {
    position: relative;
    z-index: 1;
}

.arrow {
    transition: transform .3s;
}

.btn-gold:hover .arrow {
    transform: translateX(5px);
}

.btn-out {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: color .3s, border-color .3s;
}

.btn-out:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* UTILITIES */
.lbl {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
}

.lbl::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--gold);
}

.h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--text);
}

.h2 .g {
    color: var(--gold);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
    will-change: opacity, transform;
}

.reveal.vis {
    opacity: 1;
    transform: translateY(0);
}

.d1 {
    transition-delay: 0.1s;
}

.d2 {
    transition-delay: 0.2s;
}

.d3 {
    transition-delay: 0.3s;
}

.d4 {
    transition-delay: 0.4s;
}

.d5 {
    transition-delay: 0.5s;
}

/* ABOUT */
#about {
    padding: var(--section-pad) 0;
    background: var(--bg);
}

.about-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 8rem;
    align-items: center;
}

.about-imgbox {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-imgbox::before {
    content: '';
    position: absolute;
    top: -1.8rem;
    left: -1.8rem;
    width: 55%;
    height: 55%;
    border-top: 2px solid var(--gold-line);
    border-left: 2px solid var(--gold-line);
}

.about-imgbox::after {
    content: '';
    position: absolute;
    bottom: -1.8rem;
    right: -1.8rem;
    width: 55%;
    height: 55%;
    border-bottom: 2px solid var(--gold-line);
    border-right: 2px solid var(--gold-line);
}

.about-ph {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: contain;
    background-color: var(--bg-2);
    border-radius: 30px;
}

.about-ph-v2 {
    aspect-ratio: 1.4;
}

.about-badge {
    background: var(--gold);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .55rem 1.3rem;
}

.about-p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.95;
    color: #000;
    margin: 1.8rem 0 2.5rem;
    text-align: justify;
}

.about-p em {
    color: var(--gold);
    font-style: italic;
    font-weight: 500;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border-2);
}

.metric {
    padding: 1.8rem 1.2rem;
    border-right: 1px solid var(--border-2);
    text-align: center;
}

.metric:last-child {
    border-right: none;
}

.m-n {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--gold);
    display: block;
    line-height: 1;
}

.m-l {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
    display: block;
    margin-top: .4rem;
}

.specs {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.spec {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
}

.spec::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gold);
    flex-shrink: 0;
}

/* SERVICES */
#services {
    padding: var(--section-pad) 0;
    background: #0A0805;
    position: relative;
    overflow: hidden;
}

/* Architectural Grid Background */
#services::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(184, 145, 58, 0.04) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(184, 145, 58, 0.04) 1.5px, transparent 1.5px);
    background-size: 60px 60px;
    opacity: 0.6;
}

#services::after {
    content: '';
    position: absolute;
    top: -15%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(184, 145, 58, 0.12) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
}

.svc-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    position: relative;
    z-index: 2;
}

.svc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
    margin-bottom: 7rem;
}

.svc-head .h2 {
    color: #fff;
}

.svc-note {
    max-width: 460px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    text-align: left;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.svc-card {
    position: relative;
    perspective: 1500px;
    /* Height must be defined so the absolute back face matches the front.
       Or we make the front relative and give it padding. */
}

.svc-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.svc-card:hover {
    transform: translateY(-20px);
}

.svc-card:hover .svc-card-inner {
    transform: rotateY(180deg);
}

.svc-card-front,
.svc-card-back {
    width: 100%;
    backface-visibility: hidden;
    border-radius: 32px;
    overflow: hidden;
}

.svc-card-front {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4.5rem 3rem;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.svc-card-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
    z-index: 1;
}

.svc-back-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(184, 145, 58, 0.1),
            transparent 40%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: 3;
    border-radius: 32px;
}

.svc-card:hover::before {
    opacity: 1;
}


.svc-num {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    height: 1.1em;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 0.3em;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
}

.svc-num-inner {
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.svc-num::after {
    content: attr(data-num);
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.svc-card:hover .svc-num-inner,
.svc-card:hover .svc-num::after {
    transform: translateY(-100%);
}

.svc-icon {
    font-size: 2.8rem;
    margin-bottom: 2.5rem;
    display: block;
    transition: transform .6s var(--ease);
}

.svc-icon-img {
    width: auto;
    height: 9rem;
    margin-bottom: 2.5rem;
    display: block;
    transition: all .6s var(--ease);
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.svc-card:hover .svc-icon {
    transform: scale(1.25) rotate(5deg);
}

.svc-card:hover .svc-icon-img {
    transform: scale(1.15) translateY(-5px);
    filter: drop-shadow(0 15px 30px rgba(184, 145, 58, 0.3));
}

.svc-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.svc-desc {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    font-weight: 300;
}

.svc-tag {
    display: inline-block;
    align-self: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    padding: 0.6rem 1.4rem;
    background: var(--gold);
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(184, 145, 58, 0.3);
    transition: all .3s;
}

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1.4rem;
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.svc-more span {
    color: var(--gold-light);
    font-size: 1rem;
    transition: transform .3s var(--ease);
}

.svc-card-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 32px;
}

.svc-card-link:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 6px;
}

.svc-card:hover .svc-more span {
    transform: translateX(.35rem);
}

.svc-card:hover .svc-tag {
    background: #fff;
    color: var(--gold);
    transform: scale(1.05);
}

/* 3D Entrance Animation for Services */
.svc-card.reveal {
    opacity: 0;
    transform: perspective(1200px) rotateX(15deg) translateY(60px);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-card.reveal.vis {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0);
}

/* PORTFOLIO */
#portfolio {
    padding: var(--section-pad) 0;
    background: var(--bg);
}

.port-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

.port-head {
    text-align: center;
    margin-bottom: 4rem;
}

.port-head .lbl {
    justify-content: center;
}

.port-head .lbl::before {
    display: none;
}

.port-head .lbl::after {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--gold);
}

.filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 3rem auto 0;
    gap: 0.8rem;
}

.f-btn {
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-2);
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 0.8rem 1.8rem;
    cursor: pointer;
    border-radius: 40px;
    transition: all .4s var(--ease);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.f-btn.on {
    color: #fff;
    background: var(--gold);
    box-shadow: 0 8px 20px rgba(184, 145, 58, 0.3);
    transform: translateY(-2px);
    border-color: var(--gold);
}

.f-btn:hover:not(.on) {
    color: var(--gold);
    border-color: var(--gold-line);
    transform: translateY(-1px);
    background: var(--bg-card);
}

@media (max-width: 768px) {
    .filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem var(--container-px) 1.5rem;
        margin-left: calc(-1 * var(--container-px));
        margin-right: calc(-1 * var(--container-px));
        width: 100vw;
        scrollbar-width: none;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .f-btn {
        font-size: 0.7rem;
        padding: 0.7rem 1.4rem;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--border);
    }

    .f-btn.on {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff;
    }
}

/* SUB FILTERS (Rendu Intérieur) */
.sub-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.6s var(--ease);
    padding: 0.5rem;
    background: rgba(28, 28, 28, 0.03);
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(28, 28, 28, 0.05);
}

.sub-filters.active {
    opacity: 1;
    max-height: 100px;
    margin-top: 2.5rem;
    visibility: visible;
    padding: 0.5rem 1.5rem;
}

.sf-btn {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: none;
    padding: 0.7rem 1.2rem;
    cursor: pointer;
    position: relative;
    transition: all 0.4s var(--ease);
    border-radius: 30px;
    white-space: nowrap;
}

.sf-btn:hover {
    color: var(--text);
}

.sf-btn.on {
    color: #fff;
    background: var(--gold);
    box-shadow: 0 4px 12px rgba(184, 145, 58, 0.25);
}

/* MOBILE REFINEMENT */
@media (max-width: 768px) {
    .sub-filters {
        width: 100vw;
        margin-left: calc(-1 * var(--container-px));
        margin-right: calc(-1 * var(--container-px));
        border-radius: 0;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem var(--container-px) 1.5rem;
        gap: 0.8rem;
        background: transparent;
        border: none;
        scrollbar-width: none;
        position: relative;
    }

    .sub-filters::-webkit-scrollbar {
        display: none;
    }

    .sub-filters.active {
        max-height: 140px;
        margin-top: 1rem;
        display: flex;
    }

    .sf-btn {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.7rem 1.2rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 0, 0, 0.05);
        color: var(--text-2);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        border-radius: 40px;
    }

    .sf-btn.on {
        background: var(--gold);
        color: #fff;
        border-color: var(--gold);
        box-shadow: 0 6px 15px rgba(184, 145, 58, 0.25);
    }
}

.masonry {
    columns: 3;
    column-gap: 1.5rem;
    margin-top: 4rem;
}

.m-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: 1px 350px;
}

.m-img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-2);
    /* Placeholder while loading */
    transition: transform .8s var(--ease);
    border-radius: 12px;
}

.m-item:hover .m-img {
    transform: scale(1.06);
}

.m-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 28, 28, .72) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

.m-item:hover .m-ov {
    opacity: 1;
}

.m-line {
    width: 0;
    height: 2px;
    background: var(--gold);
    margin-bottom: .8rem;
    transition: width .5s .1s var(--ease);
}

.m-item:hover .m-line {
    width: 36px;
}

.m-title {
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
}

.m-cat {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-top: .2rem;
}

/* Gallery Layout for Grouped Items */
.m-img-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.m-img-main {
    flex: 1;
    background-size: cover;
    background-position: center;
    transition: transform .8s var(--ease);
}

.m-img-subs {
    display: flex;
    gap: 4px;
    height: 100px;
    /* Adjust height of thumbnails */
}

.m-img-sub {
    flex: 1;
    background-size: cover;
    background-position: center;
    transition: transform .8s var(--ease);
}

.m-item:hover .m-img-main,
.m-item:hover .m-img-sub {
    transform: scale(1.08);
}

/* Split Layout for 2 Photos */
.m-split-container {
    display: flex;
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.m-split-pane {
    flex: 1;
    background-size: cover;
    background-position: center;
    transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.split-left {
    border-right: 1px solid var(--bg);
}

.split-right {
    border-left: 1px solid var(--bg);
}

.m-split-container:hover .split-left:hover {
    flex: 2.5;
}

.m-split-container:hover .split-right:hover {
    flex: 2.5;
}

.m-split-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 30px;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    gap: 2px;
    color: #fff;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.4s;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.m-item:hover .m-split-divider {
    opacity: 0;
}

/* PROJECT */
#project {
    padding: var(--section-pad) 0;
    background: var(--bg-2);
}

.proj-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

.proj-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 6rem;
    align-items: end;
    margin-bottom: 5rem;
}

.proj-img {
    width: 100%;
    aspect-ratio: 4/3;
    background:
        linear-gradient(160deg, rgba(242, 240, 235, .4) 0%, rgba(236, 234, 227, .2) 100%),
        url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=900&q=85') center/cover no-repeat;
    position: relative;
}

.proj-img::after {
    content: 'REHAUSSEMENT VILLA MODERNE';
    position: absolute;
    bottom: 1.5rem;
    left: 2rem;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .25em;
    color: var(--gold);
    opacity: .7;
}

.proj-title {
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 1.2rem 0;
}

.proj-desc {
    font-size: .95rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.9;
    color: var(--text-2);
    margin-bottom: 2.5rem;
    border-left: 2px solid var(--gold);
    padding-left: 1.5rem;
}

.proj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid var(--border-2);
}

.p-cell {
    padding: 1.1rem 1.4rem;
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
}

.p-cell:nth-child(even) {
    border-right: none;
}

.p-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

.p-k {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.p-v {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    margin-top: .25rem;
}

.rooms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.room-ph {
    width: 100%;
    aspect-ratio: 4/3;
}

.room-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 1rem;
}

.room-sub {
    font-size: .75rem;
    font-weight: 400;
    color: var(--text-3);
    margin-top: .2rem;
}

/* ==========================================================================
   WHY (NOS ATOUTS) - ADVANCED MODERN REDESIGN
   ========================================================================== */
#why {
    padding: var(--section-pad) 0;
    background: #0a0a0a;
    /* Deep dark immersive background */
    position: relative;
    overflow: hidden;
    color: #fff;
    /* Ensure text is light by default in this section */
}

/* Subtle glowing orb in the background */
#why::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(184, 145, 58, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

#why .lbl {
    color: var(--gold);
}

#why .lbl::before,
#why .lbl::after {
    background: var(--gold);
}

#why .h2 {
    color: #fff;
}

#why .why-w>.reveal:first-child {
    text-align: center;
}

#why .why-w>.reveal:first-child .lbl {
    justify-content: center;
}

.why-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    position: relative;
    z-index: 1;
    /* Above the glowing orb */
}

.why-grid-v3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 5rem;
}

/* Glassmorphism Bento Cards */
.why-card-v3 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 3.5rem 3rem;
    transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.card-main {
    position: relative;
    z-index: 2;
    padding: 0;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card-ico {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(184, 145, 58, 0.2), rgba(184, 145, 58, 0.05));
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(184, 145, 58, 0.3);
    transition: all .5s var(--ease);
}

.why-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.why-txt {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

/* Hover Effects */
.why-card-v3:hover {
    transform: translateY(-10px);
    border-color: rgba(184, 145, 58, 0.5);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(184, 145, 58, 0.1);
}



.why-card-v3:hover .card-ico {
    background: var(--gold);
    color: #000;
    transform: scale(1.1) rotate(5deg);
}

/* Float animation for "live" feel */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.card-anim-wrapper {
    display: block;
    /* Overriding previous flex layout */
    width: 100%;
    height: 100%;
    transition: all .5s var(--ease);
}

.why-card-v3.vis .card-anim-wrapper {
    animation: float 8s ease-in-out infinite;
}

.why-card-v3:nth-child(2).vis .card-anim-wrapper {
    animation-delay: 1s;
}

.why-card-v3:nth-child(3).vis .card-anim-wrapper {
    animation-delay: 2s;
}

.why-card-v3:nth-child(4).vis .card-anim-wrapper {
    animation-delay: 3s;
}

/* Specific entrance for Why Us */
.why-card-v3.reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
}

.why-card-v3.reveal.vis {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.why-card-v3:hover .card-accent {
    background: var(--gold);
    color: #000;
}

.why-card-v3:hover .card-ico {
    background: var(--gold);
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

/* Responsive */
@media(max-width: 1100px) {
    .why-grid-v3 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media(max-width: 600px) {
    .why-card-v3 {
        flex-direction: column;
        text-align: center;
    }

    .card-accent {
        width: 100%;
        height: 60px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .card-head {
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    .card-main {
        padding: 2.5rem 1.5rem;
    }
}

/* CTA */
#cta-band {
    padding: var(--section-pad) 0;
    background: var(--text);
    text-align: center;
}

.cta-in {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--container-px);
}

.cta-title {
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 700;
    color: var(--bg);
    line-height: 1.1;
    margin-bottom: 1.2rem;
}

.cta-title .g {
    color: var(--gold);
}

.cta-sub {
    font-size: 1rem;
    font-style: italic;
    font-weight: 300;
    color: rgba(250, 250, 248, .5);
    margin-bottom: 3.5rem;
}

/* CONTACT */
#contact {
    padding: var(--section-pad) 0;
    background: var(--bg);
}

.cont-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 8rem;
    align-items: center;
}

.cont-p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text);
    margin: 2rem 0;
    max-width: 90%;
}

.cont-status {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    background: var(--bg-2);
    padding: .6rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 3rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-txt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-2);
}

.cont-extra {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.extra-item {
    padding-left: 1.2rem;
    border-left: 1.5px solid var(--gold-line);
}

.extra-lbl {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .3rem;
}

.extra-val {
    font-size: .85rem;
    font-weight: 400;
    color: var(--text);
}

/* CONTACT CARDS */
.cont-cards {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cont-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-card);
    padding: 1.8rem 2rem;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all .4s var(--ease);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.cont-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--gold-dim), transparent);
    transform: translateX(-100%);
    transition: transform .6s var(--ease);
}

.cont-card:hover {
    border-color: var(--gold);
    transform: translateX(10px);
    box-shadow: 0 15px 45px rgba(184, 145, 58, 0.08);
}

.cont-card:hover::before {
    transform: translateX(0);
}

.card-ico {
    width: 54px;
    height: 54px;
    background: var(--bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
    transition: transform .4s var(--ease), background .3s;
}

.card-ico svg {
    width: 24px;
    height: 24px;
    display: block;
}

.ico-wa {
    color: #25D366;
}

.cont-card:hover .card-ico {
    transform: scale(1.1) rotate(-5deg);
    background: var(--gold);
    color: #fff;
}

.cont-card:hover .ico-wa {
    background: #25D366;
    color: #fff;
}

.card-info {
    flex: 1;
    min-width: 0;
    /* Important for preventing overflow in flex items */
}

.card-lbl {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: .4rem;
}

.card-val {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.card-action {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transform: translateX(-10px);
    transition: all .4s var(--ease);
}

.cont-card:hover .card-action {
    opacity: 1;
    transform: translateX(0);
}

/* WhatsApp Variant */
.cont-card.whatsapp {
    background: #25D366;
    border-color: #25D366;
}

.cont-card.whatsapp .card-lbl {
    color: rgba(255, 255, 255, 0.6);
}

.cont-card.whatsapp .card-val {
    color: #fff;
}

.cont-card.whatsapp .card-ico {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.cont-card.whatsapp .card-action {
    color: #fff;
}

.cont-card.whatsapp:hover {
    background: #20bd5a;
    border-color: #20bd5a;
    box-shadow: 0 15px 45px rgba(37, 211, 102, 0.2);
}

/* FOOTER */
footer {
    background: #000000;
    padding: 2rem 6rem;
}

.foot-in {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foot-logo {
    display: flex;
    align-items: center;
}

.foot-logo img {
    height: 55px;
    width: auto;
    border-radius: 50%;
}

.foot-copy {
    font-size: .75rem;
    color: #ffffff;
    letter-spacing: .08em;
}

.foot-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.foot-links a {
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: color .3s;
}

.foot-links a:hover {
    color: var(--gold);
}

/* CREDIT BAR */
.credit-bar {
    background: #050505;
    padding: 1.2rem var(--container-px);
    border-top: 1px solid rgba(184, 145, 58, 0.15);
}

.credit-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.credit-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 145, 58, 0.4), transparent);
    max-width: 200px;
}

.credit-txt {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

.credit-name {
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.2em;
    transition: opacity 0.3s;
}

.credit-name:hover {
    opacity: 0.7;
}

/* KEYFRAMES */
@keyframes heroPanelIn {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes heroGlassSweep {
    to {
        transform: translateX(130%);
    }
}

@keyframes heroLineIn {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes heroRuleIn {
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .35
    }

    50% {
        opacity: .9
    }
}

/* PHOTO PLACEHOLDERS */
.ph1 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 320px;
}

.ph2 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 240px;
}

.ph3 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 380px;
}

.ph4 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 270px;
}

.ph5 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 340px;
}

.ph6 {
    background: linear-gradient(160deg, #ede9e0, #ddd8cc), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80') center/cover;
    background-blend-mode: multiply;
    height: 300px;
}

.r1 {
    background: url('https://images.unsplash.com/photo-1600210491892-03d54c0aaf87?w=600&q=80') center/cover;
}

.r2 {
    background: url('https://images.unsplash.com/photo-1617325247661-675ab4b64ae2?w=600&q=80') center/cover;
}

.r3 {
    background: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=600&q=80') center/cover;
}

/* RESPONSIVE */


/* --- 1200px (Laptop/Small Desktop) --- */
@media(max-width: 1200px) {
    :root {
        --container-px: 4rem;
    }
}

/* --- 1024px (Tablet Landscape) --- */
@media(max-width: 1024px) {
    :root {
        --container-px: 3rem;
        --section-pad: 8rem;
    }

    .nav-links,
    .nav-cta {
        display: none;
    }

    .nav-menu-btn {
        display: flex;
    }

    .about-w,
    .cont-w {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .about-imgbox {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-cnt {
        max-width: 90%;
        padding: 4rem 2rem;
    }
}

/* --- 768px (Tablet Portrait) --- */
@media(max-width: 768px) {
    :root {
        --container-px: 2rem;
        --section-pad: 6rem;
    }

    .hero-cnt {
        padding: 3rem 1.5rem;
        border-radius: 30px;
        width: calc(100% - (var(--container-px) * 2));
        margin: 0 auto;
    }

    .about-w>div:nth-child(2) .lbl,
    .about-w>div:nth-child(2) .h2 {
        text-align: center;
        width: 100%;
        justify-content: center;
    }

    .about-w>div:nth-child(2) .about-p {
        text-align: justify;
    }

    .about-ph {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 1;
        border-radius: 12px;
    }

    .about-imgbox::before {
        top: -1rem;
        left: -1rem;
    }

    .about-imgbox::after {
        bottom: -1rem;
        right: -1rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .hero-tag::before,
    .hero-tag::after {
        width: 20px;
    }

    .svc-head {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 4rem;
    }

    .svc-note {
        text-align: center;
        margin: 0 auto;
    }

    .svc-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .svc-card {
        padding: 3rem 2rem;
    }

    .masonry {
        columns: 2;
    }

    .filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1rem;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .filters::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }

    .f-btn {
        flex-shrink: 0;
    }

    .why-grid-v3 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cont-w {
        text-align: center;
    }

    .lbl {
        justify-content: center;
    }

    .lbl::before {
        display: none;
    }

    .lbl::after {
        content: '';
        width: 28px;
        height: 1.5px;
        background: var(--gold);
    }

    .cont-status {
        justify-content: center;
    }

    .cont-extra {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .extra-item {
        border-left: none;
        border-top: 1px solid var(--gold-line);
        padding: 1rem 0 0 0;
        text-align: center;
        min-width: 200px;
    }

    footer {
        text-align: center;
    }

    .foot-in {
        flex-direction: column;
        gap: 2rem;
    }

    .foot-links {
        justify-content: center;
    }
}

/* --- 480px (Mobile) --- */
@media(max-width: 480px) {
    :root {
        --container-px: 1.25rem;
        --section-pad: 5rem;
    }

    .hero-cnt {
        padding: 2.5rem 1.25rem;
        border-radius: 20px;
        width: calc(100% - (var(--container-px) * 2));
        margin: 0 auto;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
    }

    .btn-gold {
        width: 100%;
        justify-content: center;
    }

    .metrics {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .masonry {
        columns: 1;
    }

    .why-card-v3,
    .card-anim-wrapper {
        flex-direction: column;
    }

    .card-accent {
        width: 100%;
        height: 60px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .card-main {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .card-head {
        flex-direction: column;
        gap: 1rem;
    }

    .cont-card {
        padding: 1.25rem 1rem;
    }

    .card-val {
        font-size: .9rem;
    }
}


/* --- 360px (Small Mobile) --- */
@media(max-width: 360px) {
    .card-val {
        font-size: .8rem;
    }
}

/* ==========================================================================
   LIGHTBOX / ZOOM
   ========================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 5, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lb-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    /* Allow scrolling if zoomed very large */
    position: relative;
}

#lbImg {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    cursor: grab;
}

#lbImg:active {
    cursor: grabbing;
}

.lb-controls {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 1rem;
    z-index: 10000;
}

.lb-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: all 0.3s var(--ease);
}

.lb-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    transform: scale(1.1);
}

.lb-counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-right: 1.5rem;
    display: flex;
    align-items: center;
}

.lb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease);
    z-index: 10001;
    backdrop-filter: blur(10px);
}

.lb-nav-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}

.lb-prev {
    left: 2rem;
}

.lb-next {
    right: 2rem;
}

.lb-nav-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

@media(max-width: 768px) {
    .lb-controls {
        top: auto;
        bottom: 2rem;
        right: 50%;
        transform: translateX(50%);
        background: rgba(0, 0, 0, 0.5);
        padding: 0.5rem 1rem;
        border-radius: 50px;
        width: max-content;
    }

    .lb-counter {
        margin-right: 1rem;
        font-size: 0.75rem;
    }

    .lb-nav-btn {
        width: 44px;
        height: 44px;
    }

    .lb-prev {
        left: 1rem;
    }

    .lb-next {
        right: 1rem;
    }

    #lbImg {
        max-width: 95vw;
    }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq {
    padding: var(--section-pad) 0;
    background: var(--bg-2);
}

.faq-w {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.faq-head {
    position: sticky;
    top: 8rem;
}

.faq-head>p {
    max-width: 28rem;
    margin-top: 1.6rem;
    color: var(--text-2);
    line-height: 1.8;
}

.faq-list {
    border-top: 1px solid var(--border-2);
}

.faq-list details {
    border-bottom: 1px solid var(--border-2);
}

.faq-list summary {
    position: relative;
    padding: 1.65rem 3.2rem 1.65rem 0;
    color: var(--text);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: .3rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 400;
    transform: translateY(-50%);
    transition: transform .3s var(--ease), background .3s;
}

.faq-list details[open] summary::after {
    background: var(--gold);
    color: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.faq-list details p {
    max-width: 48rem;
    padding: 0 3.2rem 1.8rem 0;
    color: var(--text-2);
    font-size: .94rem;
    line-height: 1.8;
}

/* ========================================================================== 
   QUOTE FORM
   ========================================================================== */
#devis {
    padding: var(--section-pad) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(184, 145, 58, .18), transparent 34%),
        radial-gradient(circle at 86% 82%, rgba(184, 145, 58, .1), transparent 30%),
        #0a0a0a;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.quote-w {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--container-px);
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}

.quote-intro {
    position: sticky;
    top: 8rem;
}

.quote-intro .lbl,
.quote-intro .h2 {
    color: #fff;
}

.quote-intro .g {
    color: var(--gold-light);
}

.quote-intro>p {
    color: rgba(255, 255, 255, .68);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 38rem;
    margin-top: 1.7rem;
}

.quote-steps {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
}

.quote-steps li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    align-items: center;
    color: rgba(255, 255, 255, .84);
    line-height: 1.5;
}

.quote-steps span {
    color: var(--gold-light);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.quote-intro .quote-note {
    display: inline-block;
    color: #d9fbe8;
    font-size: .78rem;
    line-height: 1.4;
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 999px;
    padding: .7rem 1rem;
}

.quote-form {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--text);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
}

.quote-form-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
}

.quote-form-head span {
    font-size: 1.2rem;
    font-weight: 700;
}

.quote-form-head strong {
    color: var(--text-3);
    font-size: .68rem;
    font-weight: 500;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    color: var(--text-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    padding: .9rem 1rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.field textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #aaa;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-dim);
}

.consent-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .75rem;
    margin-top: 1.4rem;
    color: var(--text-2);
    font-size: .76rem;
    line-height: 1.5;
    cursor: pointer;
}

.consent-row input {
    width: 1rem;
    height: 1rem;
    margin-top: .1rem;
    accent-color: var(--gold);
}

.consent-row a {
    color: #7d5f1e;
    font-weight: 600;
}

.quote-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .8rem;
    margin-top: 1.6rem;
}

.quote-submit,
.quote-email {
    min-height: 3.2rem;
    border-radius: 999px;
    padding: .85rem 1.3rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    transition: transform .2s, background .2s, border-color .2s;
}

.quote-submit {
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quote-email {
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text);
}

.quote-submit:hover,
.quote-email:hover {
    transform: translateY(-2px);
}

.quote-submit:hover {
    background: var(--gold-light);
}

.quote-email:hover {
    border-color: var(--gold);
}

.quote-status {
    min-height: 1.2rem;
    margin-top: 1rem;
    color: #3e6e54;
    font-size: .76rem;
    line-height: 1.45;
}

/* Portfolio and keyboard accessibility */
.m-item {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
}

.m-item:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
    border-radius: 12px;
}

.m-item:focus-visible .m-ov {
    opacity: 1;
}

.portfolio-error {
    padding: 2rem;
    background: var(--bg-2);
    border-left: 3px solid var(--gold);
    color: var(--text-2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 3px;
}

/* Privacy page */
.legal-page {
    min-height: 100vh;
    background: var(--bg);
}

.legal-nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem var(--container-px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.legal-back {
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

.legal-main {
    max-width: 850px;
    margin: 0 auto;
    padding: clamp(4rem, 9vw, 8rem) var(--container-px);
}

.legal-main>h1 {
    margin-top: 1rem;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1;
}

.legal-updated {
    color: var(--text-3);
    font-size: .82rem;
    margin: 1.5rem 0 4rem;
}

.legal-main section {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.legal-main h2 {
    font-size: 1.25rem;
    margin-bottom: .8rem;
}

.legal-main section p {
    color: var(--text-2);
    line-height: 1.8;
}

.legal-main section a {
    color: #7d5f1e;
    font-weight: 600;
}

.legal-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    background: #050505;
    color: #fff;
    padding: 2rem var(--container-px);
}

.legal-footer a {
    color: var(--gold-light);
}

.foot-links {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media(max-width: 1024px) {
    .faq-w {
        grid-template-columns: 1fr;
    }

    .faq-head {
        position: static;
    }

    .quote-w {
        grid-template-columns: 1fr;
    }

    .quote-intro {
        position: static;
    }
}

@media(max-width: 768px) {
    .quote-intro,
    .quote-intro .lbl {
        text-align: center;
        justify-content: center;
    }

    .quote-intro>p {
        margin-left: auto;
        margin-right: auto;
    }

    .quote-steps {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .quote-form-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-footer {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
}

@media(max-width: 600px) {
    .form-grid,
    .quote-actions {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .quote-submit {
        justify-content: center;
    }

    .quote-form {
        border-radius: 18px;
        padding: 1.35rem;
    }
}

@media(prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-bg,
    .hero-bg::before,
    .hero-cnt,
    .hero-cnt::before,
    .hero-tag,
    .hero-title-line,
    .hero-sub,
    .hero-actions {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
        transition: none !important;
    }

    .hero-tag::before,
    .hero-tag::after {
        transform: scaleX(1);
        animation: none !important;
    }

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

/* ========================================================================== 
   SERVICE DETAIL PAGES
   ========================================================================== */
.service-page {
    background: var(--bg);
}

.service-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    padding: 1.5rem var(--container-px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.service-topbar .nav-logo img {
    height: 64px;
}

.service-top-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.service-back {
    color: rgba(255, 255, 255, .82);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
}

.service-back:hover {
    color: var(--gold-light);
}

.service-top-cta,
.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 3rem;
    border-radius: 999px;
    padding: .8rem 1.45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .25s, background .25s, border-color .25s;
}

.service-top-cta,
.service-btn-primary {
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #fff;
}

.service-top-cta:hover,
.service-btn:hover {
    transform: translateY(-2px);
}

.service-hero {
    min-height: min(880px, 88vh);
    padding: clamp(9rem, 18vw, 14rem) var(--container-px) clamp(5rem, 9vw, 8rem);
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #070707;
    display: flex;
    align-items: flex-end;
}

.service-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 46%, rgba(0, 0, 0, .16) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 48%),
        var(--service-image);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.service-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 78%, rgba(184, 145, 58, .2), transparent 28%);
    pointer-events: none;
}

.service-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
}

.service-kicker {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.4rem;
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.service-kicker::before {
    content: '';
    width: 2.5rem;
    height: 1px;
    background: currentColor;
}

.service-title {
    max-width: 930px;
    margin: 0;
    font-size: clamp(3rem, 8vw, 7.2rem);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .94;
}

.service-title .g {
    color: var(--gold-light);
}

.service-lead {
    max-width: 720px;
    margin-top: 2rem;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.7;
}

.service-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

.service-btn-secondary {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .2);
    color: #fff;
    backdrop-filter: blur(10px);
}

.service-btn-secondary:hover {
    border-color: var(--gold-light);
}

.service-facts {
    width: min(100%, 950px);
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.service-fact strong,
.service-fact span {
    display: block;
}

.service-fact strong {
    color: #fff;
    font-size: .94rem;
    font-weight: 600;
}

.service-fact span {
    margin-top: .35rem;
    color: rgba(255, 255, 255, .58);
    font-size: .78rem;
    line-height: 1.5;
}

.service-main {
    overflow: hidden;
}

.service-section {
    padding: var(--section-pad) var(--container-px);
}

.service-section-alt {
    background: var(--bg-2);
}

.service-section-inner {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
}

.service-section-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(3rem, 9vw, 9rem);
    align-items: start;
}

.service-section-copy .h2 {
    max-width: 630px;
}

.service-section-copy>p {
    max-width: 650px;
    margin-top: 1.5rem;
    color: var(--text-2);
    line-height: 1.8;
}

.service-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.service-info-card {
    min-height: 230px;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
}

.service-info-card .service-card-num {
    display: block;
    margin-bottom: 2.4rem;
    color: var(--gold);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.service-info-card h2,
.service-info-card h3 {
    margin-bottom: .8rem;
    font-size: 1.2rem;
    line-height: 1.25;
}

.service-info-card p {
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.7;
}

.service-process {
    list-style: none;
    counter-reset: service-step;
    border-top: 1px solid var(--border-2);
}

.service-process li {
    counter-increment: service-step;
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.2rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--border-2);
}

.service-process li::before {
    content: '0' counter(service-step);
    color: var(--gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.service-process h3 {
    margin-bottom: .5rem;
    font-size: 1.05rem;
}

.service-process p {
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.7;
}

.service-checklist {
    list-style: none;
    display: grid;
    gap: .8rem;
    margin-top: 2rem;
}

.service-checklist li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--text-2);
    line-height: 1.6;
}

.service-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

.service-note {
    margin-top: 2rem;
    padding: 1.3rem 1.5rem;
    border-left: 3px solid var(--gold);
    background: var(--gold-dim);
    color: var(--text-2);
    font-size: .86rem;
    line-height: 1.7;
}

.service-cta-band {
    padding: clamp(4rem, 9vw, 8rem) var(--container-px);
    background:
        radial-gradient(circle at 82% 40%, rgba(184, 145, 58, .18), transparent 28%),
        #070707;
    color: #fff;
}

.service-cta-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
}

.service-cta-copy h2 {
    max-width: 820px;
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: 1;
}

.service-cta-copy p {
    max-width: 680px;
    margin-top: 1.3rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
}

.service-page footer .foot-links {
    max-width: 700px;
}

@media(max-width: 900px) {
    .service-section-grid {
        grid-template-columns: 1fr;
    }

    .service-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width: 680px) {
    .service-topbar {
        padding-top: 1rem;
    }

    .service-top-actions .service-back {
        display: none;
    }

    .service-top-cta {
        min-height: 2.7rem;
        padding: .7rem 1rem;
        font-size: .65rem;
    }

    .service-hero {
        min-height: 780px;
        align-items: center;
        background-position: 65% center;
    }

    .service-hero::before {
        background-image:
            linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .48)),
            linear-gradient(0deg, rgba(0, 0, 0, .84), transparent 55%),
            var(--service-image);
    }

    .service-facts,
    .service-card-grid {
        grid-template-columns: 1fr;
    }

    .service-facts {
        gap: 1rem;
    }

    .service-info-card {
        min-height: 0;
    }

    .service-process li {
        grid-template-columns: 2.5rem 1fr;
    }
}

/* ========================================================================== 
   PORTFOLIO SHOWCASE V2
   ========================================================================== */
#portfolio {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 8%, rgba(184, 145, 58, .11), transparent 28%),
        linear-gradient(180deg, #f8f6f1 0%, #fafaf8 42%, #f2f0eb 100%);
}

#portfolio::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(28, 28, 28, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 28, 28, .025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 48%);
}

#portfolio .port-w {
    position: relative;
    z-index: 1;
}

.port-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr);
    align-items: end;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-bottom: 3rem;
}

.port-intro .port-head {
    margin: 0;
    text-align: left;
}

.port-intro .port-head .lbl {
    justify-content: flex-start;
}

.port-intro .port-head .lbl::before {
    display: block;
}

.port-intro .port-head .lbl::after {
    display: none;
}

.port-lead {
    max-width: 720px;
    margin-top: 1.4rem;
    color: var(--text-2);
    font-size: clamp(.95rem, 1.3vw, 1.12rem);
    line-height: 1.75;
}

.port-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.75rem 1.25rem;
    color: #fff;
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    box-shadow: 0 28px 60px rgba(28, 28, 28, .16);
}

.port-proof div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

.port-proof div + div {
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.port-proof strong {
    color: var(--gold-light);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 500;
    line-height: 1;
}

.port-proof span {
    color: rgba(255, 255, 255, .68);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-feature {
    position: relative;
    margin-bottom: 2.25rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 92% 5%, rgba(211, 177, 91, .2), transparent 24%),
        linear-gradient(145deg, #242321 0%, #151515 58%, #0f0f0f 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    box-shadow: 0 30px 75px rgba(28, 28, 28, .2);
}

.admin-feature::before {
    content: '';
    position: absolute;
    top: 0;
    right: 2.25rem;
    width: min(34vw, 420px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light));
}

.admin-feature-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(2rem, 6vw, 6rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.admin-feature-head > div {
    max-width: 820px;
}

.admin-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .8rem;
    color: var(--gold-light);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.admin-feature-eyebrow::before {
    content: '';
    width: 2.3rem;
    height: 1px;
    background: currentColor;
}

.admin-feature h3 {
    max-width: 760px;
    color: #fff;
    font-size: clamp(1.65rem, 3.5vw, 3.15rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.admin-feature h3 span {
    color: var(--gold-light);
}

.admin-feature-head p {
    max-width: 720px;
    margin-top: 1rem;
    color: rgba(255, 255, 255, .66);
    font-size: clamp(.9rem, 1.2vw, 1rem);
    line-height: 1.7;
}

.admin-feature-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.3rem;
    min-width: 218px;
    min-height: 3.2rem;
    padding: .85rem 1rem;
    color: #191919;
    background: var(--gold-light);
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .35s ease, background .35s ease, transform .35s var(--ease);
}

.admin-feature-head > a:hover,
.admin-feature-head > a:focus-visible {
    color: #151515;
    background: #fff;
    transform: translateY(-2px);
}

.admin-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.8rem, 1.6vw, 1.25rem);
}

.admin-showcase-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background: #0d0d0d;
    border: 0;
    border-radius: 16px;
    cursor: zoom-in;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.admin-showcase-card:first-child {
    grid-column: 1 / -1;
}

.admin-showcase-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: inherit;
}

.admin-showcase-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s var(--ease), filter .6s ease;
}

.admin-showcase-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .8) 100%);
}

.admin-showcase-index,
.admin-showcase-label,
.admin-showcase-open,
.admin-showcase-card strong {
    position: absolute;
    z-index: 2;
}

.admin-showcase-index {
    top: 1rem;
    left: 1rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    color: #151515;
    background: var(--gold-light);
    border-radius: 50%;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.admin-showcase-label {
    right: 1rem;
    bottom: 3.55rem;
    left: 1.1rem;
    color: var(--gold-light);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.admin-showcase-card strong {
    right: 8.5rem;
    bottom: 1.2rem;
    left: 1.1rem;
    color: #fff;
    font-size: clamp(.95rem, 1.6vw, 1.25rem);
    font-weight: 600;
    line-height: 1.2;
}

.admin-showcase-open {
    right: 1.1rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .78);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-showcase-card:hover,
.admin-showcase-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 26px 55px rgba(0, 0, 0, .42);
}

.admin-showcase-card:hover img,
.admin-showcase-card:focus-visible img {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.02);
}

.admin-showcase-card:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}

.admin-feature-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.25rem;
}

.admin-feature-tags span {
    padding: .65rem .85rem;
    color: rgba(255, 255, 255, .68);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.portfolio-toolbar {
    padding: 1.4rem;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(28, 28, 28, .09);
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(28, 28, 28, .07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.portfolio-toolbar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .25rem .9rem;
    border-bottom: 1px solid var(--border);
}

.portfolio-toolbar-label,
.portfolio-result {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.portfolio-toolbar-label {
    color: var(--text);
}

.portfolio-result {
    color: var(--gold);
}

.portfolio-toolbar .filters {
    justify-content: flex-start;
    width: 100%;
    margin: 1rem 0 0;
    gap: .65rem;
}

.portfolio-toolbar .f-btn {
    padding: .72rem 1.15rem;
    color: var(--text-2);
    background: #f6f4ef;
    border-color: transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: .68rem;
    letter-spacing: .08em;
}

.portfolio-toolbar .f-btn:hover:not(.on) {
    color: var(--text);
    background: #ece8de;
    border-color: transparent;
    transform: none;
}

.portfolio-toolbar .f-btn.on {
    color: #fff;
    background: #1c1c1c;
    border-color: #1c1c1c;
    box-shadow: 0 10px 24px rgba(28, 28, 28, .14);
    transform: none;
}

.portfolio-toolbar .sub-filters,
.portfolio-toolbar .sub-filters.active {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
}

.portfolio-toolbar .sub-filters.active {
    max-height: 120px;
    margin-top: 1rem;
    padding: .6rem;
    background: #f2efe8;
    border: 1px solid rgba(28, 28, 28, .06);
}

.portfolio-toolbar .sf-btn {
    padding: .65rem .9rem;
    color: var(--text-2);
    border-radius: 8px;
    font-size: .65rem;
    letter-spacing: .08em;
}

.portfolio-toolbar .sf-btn.on {
    color: #fff;
    background: var(--gold);
    box-shadow: 0 8px 18px rgba(184, 145, 58, .22);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin-top: 2rem;
}

.project-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background: #1c1c1c;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(28, 28, 28, .12);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

.project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: inherit;
}

.project-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .9s var(--ease), filter .7s var(--ease);
}

.project-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, .08) 25%, rgba(10, 10, 10, .82) 100%);
    transition: background .5s var(--ease);
}

.project-card-category,
.project-card-count {
    position: absolute;
    top: 1rem;
    z-index: 2;
    padding: .55rem .75rem;
    color: #fff;
    background: rgba(16, 16, 16, .68);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-card-category {
    left: 1rem;
    max-width: calc(100% - 7rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-card-count {
    right: 1rem;
    color: var(--gold-light);
}

.project-card-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 4rem 1.3rem 1.25rem;
}

.project-card-kicker {
    display: block;
    margin-bottom: .35rem;
    color: var(--gold-light);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.project-card h3 {
    max-width: 90%;
    color: #fff;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 600;
    line-height: 1.2;
}

.project-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    opacity: 0;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: max-height .45s var(--ease), margin .45s var(--ease), opacity .35s ease;
}

.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-7px);
    box-shadow: 0 26px 52px rgba(28, 28, 28, .2);
}

.project-card:hover .project-card-image,
.project-card:focus-visible .project-card-image {
    transform: scale(1.07);
    filter: saturate(1.05) contrast(1.03);
}

.project-card:hover .project-card-shade,
.project-card:focus-visible .project-card-shade {
    background: linear-gradient(180deg, rgba(10, 10, 10, .04) 18%, rgba(10, 10, 10, .9) 100%);
}

.project-card:hover .project-card-link,
.project-card:focus-visible .project-card-link {
    max-height: 2rem;
    margin-top: .9rem;
    opacity: 1;
}

.project-card:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}

.portfolio-grid .portfolio-error {
    grid-column: 1 / -1;
}

.portfolio-more {
    margin-top: 2.5rem;
    text-align: center;
}

.portfolio-more[hidden] {
    display: none;
}

.portfolio-more-btn {
    min-height: 3.2rem;
    padding: .85rem 1.5rem;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    cursor: pointer;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .35s ease, background .35s ease, border-color .35s ease;
}

.portfolio-more-btn:hover,
.portfolio-more-btn:focus-visible {
    color: #fff;
    background: #1c1c1c;
    border-color: #1c1c1c;
}

.portfolio-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: #fff;
    background: #1c1c1c;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(28, 28, 28, .16);
}

.portfolio-cta div {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.portfolio-cta span {
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portfolio-cta strong {
    color: #fff;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    font-weight: 500;
}

.portfolio-cta a {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.2rem;
    padding: .85rem 1.2rem;
    color: #1c1c1c;
    background: var(--gold-light);
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: transform .35s var(--ease), background .35s ease;
}

.portfolio-cta a:hover {
    background: #fff;
    transform: translateY(-2px);
}

@media(max-width: 1080px) {
    .port-intro {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .port-proof {
        max-width: 640px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width: 720px) {
    .port-intro .port-head {
        text-align: left;
    }

    .port-proof {
        width: 100%;
        padding: 1.35rem .65rem;
    }

    .port-proof span {
        font-size: .52rem;
        letter-spacing: .06em;
    }

    .admin-feature {
        padding: 1rem;
        border-radius: 18px;
    }

    .admin-feature-head {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .admin-feature-head > a {
        width: 100%;
    }

    .admin-showcase {
        grid-template-columns: 1fr;
    }

    .admin-showcase-card:first-child {
        grid-column: auto;
    }

    .admin-showcase-card {
        border-radius: 13px;
    }

    .portfolio-toolbar {
        padding: 1rem;
        border-radius: 14px;
    }

    .portfolio-toolbar-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .portfolio-toolbar .filters,
    .portfolio-toolbar .sub-filters,
    .portfolio-toolbar .sub-filters.active {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .portfolio-toolbar .filters {
        padding: .15rem 0 .5rem;
    }

    .portfolio-toolbar .sub-filters.active {
        max-height: 90px;
        padding: .6rem;
    }

    .portfolio-toolbar .f-btn,
    .portfolio-toolbar .sf-btn {
        flex: 0 0 auto;
    }

    .portfolio-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width: 560px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        aspect-ratio: 4 / 3;
        border-radius: 15px;
    }

    .project-card-link {
        max-height: 2rem;
        margin-top: .75rem;
        opacity: 1;
    }

    .portfolio-cta a {
        width: 100%;
        justify-content: space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .admin-showcase-card,
    .admin-showcase-card img,
    .project-card,
    .project-card-image,
    .project-card-link {
        transition: none;
    }
}

/* ==========================================================================
   MOBILE COMPACT SWIPE LAYOUT
   ========================================================================== */
.mobile-swipe-hint {
    display: none;
}

@keyframes swipeHint {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@media(max-width: 720px) {
    :root {
        --section-pad: 4.5rem;
    }

    .mobile-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .55rem;
        margin: 1.25rem 0 .75rem;
        color: #7b6230;
        font-size: .61rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .mobile-swipe-hint-light {
        color: var(--gold-light);
    }

    .mobile-swipe-hint span {
        display: inline-block;
        font-size: 1rem;
        animation: swipeHint 1.6s ease-in-out infinite;
    }

    .mobile-swipe-track {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: .85rem;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .15rem 0 .85rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .mobile-swipe-track::-webkit-scrollbar {
        display: none;
    }

    .mobile-swipe-track > * {
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .about-w {
        gap: 2.75rem;
    }

    .about-imgbox {
        grid-auto-columns: 88%;
        margin: 0;
    }

    .about-imgbox::before,
    .about-imgbox::after {
        display: none;
    }

    .about-ph,
    .about-ph-v2 {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 16px;
    }

    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .metric {
        padding: 1.05rem .35rem;
    }

    .m-n {
        font-size: clamp(1.15rem, 6vw, 1.65rem);
    }

    .m-l {
        font-size: .52rem;
        letter-spacing: .05em;
    }

    .specs {
        grid-auto-columns: 78%;
        margin-top: 1.35rem;
    }

    .spec {
        align-items: flex-start;
        min-height: 5.6rem;
        padding: 1rem;
        color: var(--text-2);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        font-size: .86rem;
        line-height: 1.5;
        box-shadow: 0 10px 28px rgba(28, 28, 28, .06);
    }

    .svc-head {
        margin-bottom: 1rem;
    }

    .svc-grid {
        grid-auto-columns: 86%;
        align-items: stretch;
        gap: .85rem;
    }

    .svc-card,
    .svc-card.reveal,
    .svc-card.reveal.vis {
        min-height: 410px;
        padding: 0;
        transform: none;
    }

    .svc-card-inner {
        height: 100%;
        transform: none;
    }

    .svc-card-front {
        height: 100%;
        min-height: 410px;
        padding: 1.75rem 1.25rem;
        border-radius: 22px;
    }

    .svc-card-back {
        display: none;
    }

    .svc-card:hover,
    .svc-card:hover .svc-card-inner {
        transform: none;
    }

    .svc-icon-img {
        height: 6.2rem;
        margin-bottom: 1.3rem;
    }

    .svc-name {
        margin-bottom: .9rem;
        font-size: 1.28rem;
    }

    .svc-desc {
        margin-bottom: 1.25rem;
        font-size: .88rem;
        line-height: 1.6;
    }

    .svc-tag {
        margin-top: auto;
        padding: .55rem .9rem;
        font-size: .62rem;
    }

    .svc-more {
        margin-top: 1rem;
        font-size: .62rem;
    }

    .admin-feature {
        margin-bottom: 1.5rem;
    }

    .admin-feature-head {
        margin-bottom: 0;
    }

    .admin-showcase {
        grid-auto-columns: 88%;
        gap: .75rem;
    }

    .admin-showcase-card,
    .admin-showcase-card:first-child {
        grid-column: auto;
        aspect-ratio: 16 / 10;
    }

    .admin-showcase-label {
        bottom: 2.8rem;
    }

    .admin-showcase-card strong {
        right: 1rem;
        bottom: 1rem;
    }

    .admin-showcase-open {
        display: none;
    }

    .portfolio-grid {
        grid-auto-columns: 86%;
        gap: .8rem;
        margin-top: 0;
    }

    .portfolio-grid .project-card {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .portfolio-more {
        margin-top: 1.25rem;
    }

    .portfolio-cta {
        margin-top: 2.25rem;
    }

    .why-grid-v3 {
        grid-auto-columns: 86%;
        align-items: stretch;
        gap: .85rem;
        margin-top: 0;
    }

    .why-card-v3 {
        min-height: 240px;
        padding: 1.5rem;
        text-align: left;
        border-radius: 18px;
    }

    .why-card-v3 .card-anim-wrapper {
        animation: none !important;
    }

    .why-card-v3 .card-main {
        padding: 0;
        text-align: left;
    }

    .why-card-v3 .card-head {
        flex-direction: row;
        gap: 1rem;
        margin-bottom: 1.1rem;
        text-align: left;
    }

    .why-card-v3 .card-ico {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 13px;
    }

    .why-name {
        font-size: 1.12rem;
    }

    .why-txt {
        font-size: .88rem;
        line-height: 1.6;
    }

    .quote-w {
        gap: 2.5rem;
    }

    .quote-steps {
        grid-auto-columns: 84%;
        gap: .7rem;
        margin-top: 0;
    }

    .quote-steps li {
        min-height: 5.4rem;
        padding: 1rem;
        background: rgba(255, 255, 255, .055);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 14px;
        font-size: .86rem;
    }

    .cont-cards {
        position: relative;
        display: flex;
        gap: .75rem;
        padding-top: 3.2rem;
    }

    .cont-cards > .lbl {
        position: absolute;
        top: .25rem;
        left: 0;
        margin: 0;
    }

    .cont-cards > .cont-card {
        flex: 0 0 86%;
        min-height: 5.6rem;
        padding: 1rem;
    }

    .cont-extra {
        gap: .75rem;
    }

    .extra-item {
        min-width: 0;
        padding-top: .75rem;
    }

    .faq-list summary {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        font-size: .92rem;
    }
}

@media(max-width: 480px) {
    :root {
        --section-pad: 3.75rem;
    }

    .hero-sub {
        margin-bottom: 2.2rem;
    }

    .about-p {
        margin: 1.25rem 0 1.7rem;
        line-height: 1.75;
    }

    .port-intro {
        margin-bottom: 2rem;
    }

    .portfolio-toolbar {
        margin-top: 0;
    }

    .quote-form {
        padding: 1.15rem;
    }

    .quote-form-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1.3rem;
        padding-bottom: .9rem;
    }

    .form-grid {
        gap: .9rem;
    }

    .field textarea {
        min-height: 6.5rem;
    }
}

@media(prefers-reduced-motion: reduce) {
    .mobile-swipe-hint span {
        animation: none;
    }
}