/* ═══════════════════════ TOKENS ═══════════════════════ */
:root {
    --bg:           #040912;
    --bg-2:         #070e20;
    --bg-card:      rgba(255,255,255,0.025);
    --bg-card-h:    rgba(255,255,255,0.05);
    --accent:       #00cfe0;
    --accent-2:     #3d5af1;
    --accent-glow:  rgba(0,207,224,0.12);
    --text:         #d8e8f0;
    --muted:        #6a7d90;
    --border:       rgba(255,255,255,0.07);
    --border-a:     rgba(0,207,224,0.2);
    --text-body:    rgba(255,255,255,0.52);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

/* ═══════════════════════ NAV ═══════════════════════ */
#nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: 80px;
    padding: 0 3rem;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .35s, border-color .35s;
    border-bottom: 1px solid transparent;
}
#nav.scrolled {
    background: rgba(4,9,18,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border);
}
.nav-logo {
    display: flex; align-items: center; gap: .75rem;
    text-decoration: none;
}
.nav-logo svg { width:30px; height:30px; }
.nav-logo-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: #fff;
}
.nav-logo-text em { font-style:normal; }
.nav-links {
    display: flex; gap: 2.5rem; list-style: none;
}
.nav-links a {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.90);
    text-decoration: none;
    transition: color .2s;
}
.nav-links a:hover { color: var(--accent); }

/* ═══════════════════════ HERO ═══════════════════════ */
#hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#hero-canvas {
    position: absolute; inset: 0; z-index: 0;
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,207,224,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 75% 30%, rgba(61,90,241,0.05) 0%, transparent 60%);
}
.hero-content {
    position: relative; z-index: 2;
    text-align: center;
    padding: 2rem;
    display: flex; flex-direction: column; align-items: center;
}

.hero-mark {
    width: 76px; height: 76px;
    margin-bottom: 2.2rem;
    animation: spinIn 1.4s cubic-bezier(.16,1,.3,1) both;
}

@keyframes spinIn {
    from { opacity:0; transform: rotate(-30deg) scale(.6); }
    to   { opacity:1; transform: rotate(0) scale(1); }
}

.hero-brand {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(4.5rem, 11vw, 10rem);
    letter-spacing: .22em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 80px rgba(0,207,224,.22);
    animation: fadeUp .9s .3s ease both;
}
.hero-brand em, .hero-brand span { font-style:normal; }
.brand-dash {
    display: inline-block;
    width: 0.32em;
    height: 0.06em;
    background: #fff;
    vertical-align: middle;
    margin: 0 0.04em;
    position: relative;
    top: -0.05em;
}

.hero-rule {
    width: 56px; height: 1px;
    background: var(--accent);
    margin: 1.6rem auto;
    opacity: .55;
    animation: fadeUp .9s .5s ease both;
}

.hero-sub {
    font-size: clamp(.7rem, 1.8vw, .88rem);
    font-weight: 300;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.90);
    animation: fadeUp .9s .65s ease both;
}

.scroll-hint {
    position: absolute; bottom: 2.4rem; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    animation: fadeUp 1s 1.2s ease both, bounce 2.2s 2.2s ease-in-out infinite;
}
.scroll-hint span {
    font-size: .6rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--accent); opacity:.5;
}
.scroll-hint-line {
    width:1px; height:38px;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

@keyframes fadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes bounce {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%      { transform:translateX(-50%) translateY(7px); }
}

/* ═══════════════════════ SHARED LAYOUT ═══════════════════════ */
.section-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 5rem 2.5rem;
}
.section-label {
    font-size:.68rem;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:.9rem;
}
.section-title {
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size: clamp(2.4rem,5vw,4rem);
    color:#fff;
    line-height:1.08;
    margin-bottom:1.4rem;
}
.section-body {
    font-size:.96rem;
    line-height:1.85;
    color:var(--text-body);
    max-width:58ch;
}
.divider {
    max-width:1240px;
    margin: 0 auto;
    height:1px;
    background:var(--border);
}

/* ═══════════════════════ ABOUT ═══════════════════════ */
.about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;
    align-items:center;
}
.about-visual {
    position:relative;
    aspect-ratio:4/5;
    background:var(--bg-card);
    border:1px solid var(--border);
    overflow:hidden;
}
.about-visual .g-media {
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    position:absolute;
    inset:0;
}
.about-visual::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(0,207,224,.04),rgba(61,90,241,.04));
}
.corner {
    position:absolute;
    width:28px; height:28px;
    border-color:var(--accent); border-style:solid; opacity:.5;
}
.corner.tl { top:14px; left:14px; border-width:1px 0 0 1px; }
.corner.br { bottom:14px; right:14px; border-width:0 1px 1px 0; }
.visual-placeholder {
    width:100%; height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:.6rem;
    color:var(--muted); font-size:.75rem; letter-spacing:.08em;
}
.visual-placeholder svg { width:36px; height:36px; opacity:.25; }

.stats-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:.8rem; margin-top:3rem;
}
.stat {
    padding:1.4rem 1.6rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-top:2px solid var(--accent);
    transition:background .25s;
}
.stat:hover { background:var(--bg-card-h); }
.stat-n {
    font-family:'Cormorant Garamond',serif;
    font-size:2.2rem; font-weight:300;
    color:var(--accent); line-height:1;
}
.stat-l {
    font-size:.72rem; letter-spacing:.1em;
    color:var(--muted); margin-top:.3rem;
}

/* ═══════════════════════ SERVICES ═══════════════════════ */
#services .section-wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
#services .section-title { margin-bottom: 0.6rem; }
#gallery .section-wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; max-width: 900px; }
#gallery .section-title { margin-bottom: 0; }

.services-head {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:2rem;
}
.services-grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    border:1px solid var(--border);
    gap:1px;
    background:var(--border);
}
.svc-card {
    background:var(--bg);
    padding:1.6rem 1.8rem;
    position:relative; overflow:hidden;
    transition:background .3s;
    cursor:default;
}
.svc-card::after {
    content:'';
    position:absolute; bottom:0; left:0;
    width:0; height:2px;
    background:var(--accent);
    transition:width .4s ease;
}
.svc-card:hover { background:var(--bg-card); }
.svc-card:hover::after { width:100%; }

.svc-num {
    font-family:'Cormorant Garamond',serif;
    font-size:.78rem; letter-spacing:.1em;
    color:var(--accent); opacity:.45;
    margin-bottom:.8rem;
}
.svc-icon {
    width:32px; height:32px;
    margin-bottom:.8rem; color:var(--accent); opacity:.7;
}
.svc-name {
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem; font-weight:400;
    color:#fff; margin-bottom:.4rem;
}
.svc-desc {
    font-size:.94rem; line-height:1.72;
    color:var(--text-body);
}

/* ═══════════════════════ GALLERY ═══════════════════════ */
@keyframes gcFade {
    from { opacity:0; transform:scale(1.015); }
    to   { opacity:1; transform:scale(1); }
}
.gallery-carousel { position:relative; margin-top:1.8rem; }
.gc-track { position:relative; }
.gc-slide { display:none; }
.gc-slide.active { display:block; animation:gcFade .4s ease; }
.g-media {
    width:100%;
    height:auto;
    max-height:72vh;
    object-fit:contain;
    display:block;
}
.gc-btn {
    position:absolute;
    top:50%; transform:translateY(-50%);
    z-index:2;
    width:38px; height:38px;
    
    display:flex; align-items:center; justify-content:center;
    background:rgba(4,9,18,0.55);
    border:1px solid var(--border-a);
    color:var(--accent);
    cursor:pointer;
    transition:background .2s, border-color .2s;
}
.gc-btn:hover { background:rgba(0,207,224,0.12); border-color:var(--accent); }
.gc-prev { left:1rem; }
.gc-next { right:1rem; }
.gc-footer {
    display:flex; justify-content:center; align-items:center;
    gap:1.5rem;
    padding:.9rem 0;
}
.gc-dots { display:flex; gap:.5rem; align-items:center; }
.gc-dot {
    width:24px; height:2px;
    background:var(--border);
    cursor:pointer;
    transition:background .25s, width .25s;
}
.gc-dot.active { background:var(--accent); width:40px; }
.gc-counter {
    font-family:'Cormorant Garamond',serif;
    font-size:.82rem; letter-spacing:.2em;
    color:var(--muted);
}

/* ═══════════════════════ REVIEWS ═══════════════════════ */
.reviews-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1.4rem; margin-top:3rem;
}
.rv-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    padding:2.2rem;
    position:relative;
    transition:border-color .25s, background .25s;
}
.rv-card:hover {
    background:var(--bg-card-h);
    border-color:var(--border-a);
}
.rv-mark {
    font-family:'Cormorant Garamond',serif;
    font-size:3.6rem; line-height:.4;
    color:var(--accent); opacity:.25;
    margin-bottom:.9rem;
}
.rv-text {
    font-size:.94rem; line-height:1.75;
    color:var(--text-body); font-style:italic;
    margin-bottom:1.4rem;
}
.rv-stars { display:flex; gap:3px; margin-bottom:.9rem; }
.rv-stars svg { width:13px; height:13px; fill:var(--accent); }
.rv-name { font-size:.82rem; font-weight:500; color:#fff; }
.rv-role {
    font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); margin-top:.2rem;
}
#reviews {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 2.5rem 2.5rem;
}
.statement {
    text-align:center;
    font-size:clamp(1.05rem,2vw,1.35rem);
    font-weight:300;
    line-height:1.8;
    color:rgba(255,255,255,0.75);
    max-width:52ch;
    margin:0 auto;
}
.statement::before {
    content:'';
    display:block;
    width:32px;
    height:2px;
    background:var(--accent);
    margin:0 auto 1.8rem;
}

/* ═══════════════════════ LOCATION ═══════════════════════ */
.location-grid {
    display:grid; grid-template-columns:1fr 1.6fr;
    gap:3.5rem; align-items:start;
}
.map-wrap { align-self:center; margin-top:3rem; }
.loc-info { display:flex; flex-direction:column; gap:1rem; }
.loc-info .section-label { margin-bottom:0; }
.loc-info .section-title { margin-bottom:.8rem; }
.loc-item { display:flex; gap:1rem; align-items:flex-start; }
.loc-icon {
    width:40px; height:40px; flex-shrink:0;
    border:1px solid var(--border-a);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
}
.loc-label {
    font-size:.68rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--muted);
    margin-bottom:.25rem; display:block;
}.loc-val { font-size:.94rem; color:var(--text); text-decoration:none; }
a.loc-val { text-decoration:underline; text-underline-offset:3px; }
a.loc-val:hover { color:var(--accent); }
a.loc-icon { transition:border-color .2s, color .2s; }
a.loc-icon:hover { border-color:var(--accent); color:var(--accent); }

.map-wrap {
    aspect-ratio:3/2;
    background:var(--bg-card);
    border:1px solid var(--border);
    overflow:hidden; position:relative;
}
.map-wrap iframe {
    width:100%; height:100%;
    border:none;
    opacity:0.9;
}

/* ═══════════════════════ FOOTER ═══════════════════════ */
.footer-logo { height:90px; width:auto; object-fit:contain; display:block; }
footer {
    border-top:1px solid var(--border);
    height:90px;
    padding:0 2.5rem;
    max-width:1240px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:1rem;
    overflow:hidden;
}
.footer-note { font-size:0.85rem; color:var(--muted); }

/* ═══════════════════════ ANIMATIONS ═══════════════════════ */
.reveal {
    opacity:0; transform:translateY(28px);
    transition:opacity .85s ease, transform .85s ease;
}
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }

/* ═══════════════════════ HAMBURGER ═══════════════════════ */
.nav-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
}
.nav-toggle span {
    display:block;
    width:22px; height:1.5px;
    background:rgba(255,255,255,0.85);
    transition:transform .3s ease, opacity .3s ease;
    transform-origin:center;
}
#nav.nav-open .nav-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
#nav.nav-open .nav-toggle span:nth-child(2) { opacity:0; transform:scaleX(0); }
#nav.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:960px) {
    /* ── Nav ── */
    #nav { padding:0 1.5rem; height:64px; align-items:stretch; }
    .nav-logo { align-items:center; }
    #nav .nav-logo img { height:74px !important; width:auto !important; }
    .nav-toggle { display:flex; align-items:center; justify-content:center; padding:0 4px; margin-bottom:6px; }
    .nav-links {
        display:none;
        position:absolute;
        top:64px; left:0; right:0;
        background:rgba(4,9,18,0.97);
        backdrop-filter:blur(24px);
        -webkit-backdrop-filter:blur(24px);
        border-bottom:1px solid var(--border);
        flex-direction:column;
        align-items:center;
        gap:0;
        padding:1rem 0 1.4rem;
    }
    #nav.nav-open .nav-links { display:flex; }
    .nav-links li { width:100%; text-align:center; }
    .nav-links a { display:block; padding:.75rem 1.5rem; }

    /* ── Shared ── */
    .section-wrap { padding:3.5rem 1.5rem; }
    #services .section-wrap { padding-top:2.5rem; padding-bottom:2.5rem; }
    #gallery .section-wrap { padding-top:2.5rem; padding-bottom:2.5rem; }

    /* ── About ── */
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
    .about-visual { aspect-ratio:16/9; }
    .stats-grid { margin-top:2rem; }

    /* ── Services ── */
    .services-grid { grid-template-columns:repeat(2,1fr); }

    /* ── Gallery ── */
    .g-media { max-height:55vh; }
    .gc-prev { left:.5rem; }
    .gc-next { right:.5rem; }

    /* ── Statement ── */
    #reviews { padding:0 1.5rem 2rem; }

    /* ── Location ── */
    .location-grid { grid-template-columns:1fr; gap:2rem; }
    .map-wrap { margin-top:0; }

    /* ── Footer ── */
    footer { height:auto; padding:1.2rem 1.5rem; }
}

@media (max-width:640px) {
    /* ── Nav ── */
    #nav { height:56px; padding:0 1rem; align-items:stretch; }
    #nav .nav-logo img { height:64px !important; width:auto !important; }
    .nav-links { top:56px; }

    /* ── Shared ── */
    .section-wrap { padding:2.5rem 1.2rem; }
    #services .section-wrap { padding-top:2rem; padding-bottom:2rem; }
    #gallery .section-wrap { padding-top:2rem; padding-bottom:2rem; }

    /* ── Hero ── */
    .hero-brand { font-size:clamp(2.2rem, 14vw, 4.5rem); white-space:nowrap; letter-spacing:.16em; }
    .hero-sub { letter-spacing:.18em; font-size:.7rem; }
    .hero-sep { display:none; }
    .hero-city { display:block; }
    .scroll-hint { display:none; }

    /* ── About ── */
    .about-visual { aspect-ratio:4/3; }
    .stat { padding:1rem 1.1rem; }
    .stat-n { font-size:1.8rem; }

    /* ── Services ── */
    .services-grid { grid-template-columns:1fr; }
    .svc-card { padding:1.3rem 1.4rem; }

    /* ── Gallery ── */
    .gc-btn { width:30px; height:30px; }

    /* ── Statement ── */
    #reviews { padding:0 1.2rem 1.8rem; }

    /* ── Location ── */
    .loc-icon { width:34px; height:34px; }
    .loc-val { font-size:.88rem; }

    /* ── Footer ── */
    footer { flex-direction:column; align-items:center; text-align:center; }
    .footer-logo { height:80px !important; }
    .footer-note { font-size:.75rem; }
}