:root {
    --bg: #2f2f2f;
    --bg-soft: #3a3a3a;
    --bg-strong: #232323;
    --text: #f5f5f5;
    --accent: goldenrod;
    --muted: #bdbdbd;
    --shadow: rgba(0, 0, 0, 0.3);
    --hero-bg: #2b2b2b;
    --hero-spotlight: rgba(255, 255, 255, 0.025);
    --gold-hi: #f7edb8;
    --gold-mid: #d7b24a;
    --gold-lo: #8a6413;
    --gold-0: #fff7dc;
    --gold-1: #f6e39a;
    --gold-2: #e2c15a;
    --gold-3: #c99a2e;
    --gold-4: #7a5510;
    --gold-glow: rgba(255, 231, 160, 0.14);
    --gold-gradient: linear-gradient(
        90deg,
        #fff7d4 0%,
        #f1d389 14%,
        #dcb15a 28%,
        #c99833 50%,
        #dcb15a 72%,
        #f1d389 86%,
        #fff7d4 100%
    );
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    /* Base ambient backdrop for smoother section blending */
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(#2b2b2b, #262626);
    color: var(--text);
}

/* Match the home hero background treatment across all pages (subtle gold pattern overlay). */
body:not(.home-page) {
    position: relative;
    isolation: isolate;
}

body:not(.home-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(700px 380px at 20% 28%, rgba(255, 247, 212, 0.18), transparent 62%),
        radial-gradient(760px 420px at 82% 52%, rgba(212, 168, 87, 0.16), transparent 64%),
        radial-gradient(520px 320px at 55% 18%, rgba(247, 227, 154, 0.10), transparent 60%),
        repeating-linear-gradient(
            135deg,
            rgba(220, 177, 90, 0.10) 0px,
            rgba(220, 177, 90, 0.10) 1px,
            rgba(0, 0, 0, 0) 10px,
            rgba(0, 0, 0, 0) 18px
        );
    opacity: 0.9;
    mix-blend-mode: screen;
    filter: blur(0.2px);
}

body:not(.home-page) > * {
    position: relative;
    z-index: 1;
}

.home-page {
    position: relative;
    isolation: isolate;
    background-attachment: fixed, fixed;
}

.home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Gold gradient pattern overlay (full home page) */
    background:
        radial-gradient(700px 380px at 20% 28%, rgba(255, 247, 212, 0.18), transparent 62%),
        radial-gradient(760px 420px at 82% 52%, rgba(212, 168, 87, 0.16), transparent 64%),
        radial-gradient(520px 320px at 55% 18%, rgba(247, 227, 154, 0.10), transparent 60%),
        repeating-linear-gradient(
            135deg,
            rgba(220, 177, 90, 0.10) 0px,
            rgba(220, 177, 90, 0.10) 1px,
            rgba(0, 0, 0, 0) 10px,
            rgba(0, 0, 0, 0) 18px
        );
    opacity: 0.9;
    mix-blend-mode: screen;
    filter: blur(0.2px);
}

.home-page > * {
    position: relative;
    z-index: 1;
}

.home-page .nav-btn,
.home-page .btn-secondary,
.home-page button,
.home-page input,
.home-page textarea,
.home-page select {
    background-color: #1a1a1a;
}

.btn-gold-outline {
    position: relative;
    border: 1px solid transparent !important;
    background-color: #1a1a1a !important;
}

/* Gradient border that respects border-radius without fighting text gradients. */
.btn-gold-outline::before,
.btn-secondary.luxury-gold::before,
.nav-btn.luxury-gold::before,
.header .nav-btn:not(.nav-cta)::before,
.header .menu-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gold-gradient);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Solid charcoal surfaces for home-page cards/tiles. */
.home-page .feature-card,
.home-page .testimonial-card,
.home-page .process-item,
.home-page .trust-item,
.home-page .contact-form {
    background: #1a1a1a;
}

.home-page .hero::before {
    content: none !important;
}

.home-page .section,
.home-page .band,
.home-page .cta-band,
.home-page .footer {
    background: transparent !important;
}

.home-page .footer {
    background: #1a1a1a !important;
}

.home-page [data-gold-glow]::before {
    content: none !important;
}


/* Snap container for panel scrolling */
html,
body {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

/* Desktop: disable snap scrolling on all non-home pages. */
@media (min-width: 769px) {
    body:not(.home-page) [data-snap-panel],
    body:not(.home-page) .panel {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

[data-snap-panel] {
    min-height: 100vh;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: var(--header-offset, 80px);
}


.panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.panel-content {
    will-change: transform, opacity;
}

.panel-content > * {
    opacity: 0;
    transform: translateX(var(--slide-from, 0));
    transition: transform 720ms cubic-bezier(0.16, 0.84, 0.2, 1), opacity 720ms ease;
}

.preload .panel-content > * {
    transition: none;
}

.preload .panel.is-active .panel-content > * {
    opacity: 0;
    transform: translateX(var(--slide-from, 0));
}

.contact-page .panel-content > * {
    transition: transform 980ms cubic-bezier(0.16, 0.84, 0.2, 1), opacity 980ms ease;
}

.panel.is-active .panel-content > * {
    opacity: 1;
    transform: translateX(0);
}

.test {
    color: gray;
    background-color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
}

button {
    height: 45px;
    width: 135px;
    padding: 5px;
    border: 1px solid #ffffff;
    margin: 10px;
    border-radius: 10px;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 18px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background-color: #1a1a1a;
    color: #d8b25a;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.nav-btn.luxury-gold {
    position: relative;
    border-color: transparent;
}

.nav-btn.nav-cta {
    background-image: var(--gold-gradient);
    color: #1a1a1a;
    border-color: #d4a857;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), 0 0 14px rgba(212, 168, 87, 0.2);
}

.nav-btn.nav-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32), 0 0 18px rgba(212, 168, 87, 0.28);
}

.nav-btn.nav-cta:focus-visible {
    outline: 2px solid #d4a857;
    outline-offset: 2px;
}

a.nav-btn,
a.nav-btn:visited,
a.nav-btn:hover,
a.nav-btn:active,
a.nav-btn:focus {
    color: inherit;
    text-decoration: none;
}

a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:focus,
a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:active,
a.btn-secondary:focus {
    color: inherit;
    text-decoration: none;
}

a.luxury-gold,
a.luxury-gold:visited,
a.luxury-gold:hover,
a.luxury-gold:active,
a.luxury-gold:focus,
.nav-btn.luxury-gold,
.hero .btn-primary.luxury-gold,
.hero .btn-secondary.luxury-gold {
    color: #d8b25a;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: var(--gold-gradient) !important;
}

.product-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    text-decoration: none;
    background-color: #1a1a1a;
    color: inherit;
}

a.product-button,
a.product-button:visited,
a.product-button:hover,
a.product-button:active,
a.product-button:focus {
    color: inherit;
    text-decoration: none;
}
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    background: var(--bg-strong);
    border-bottom: 2px solid #1a1a1a;
    --header-offset: 80px;
}

.header .nav-btn {
    border-color: transparent;
}

.header .call-now-btn {
    margin-left: auto;
}

.header .menu-toggle {
    border-color: transparent;
}

.header button {
    background-color: #1a1a1a;
    border-color: transparent;
}

.header .nav-btn:not(.nav-cta),
.header .menu-toggle {
    position: relative;
}

.header button,
.hero .cta-row button {
    height: 54px;
    width: 162px;
    padding: 6px;
    font-size: 1.2em;
}

.left-side,
.right-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #ffffff;
    background: #1a1a1a;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    align-self: center;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #d8b25a;
    border-radius: 999px;
}

.right-side.nav-links {
    position: absolute;
    top: 100%;
    right: 16px;
    left: auto;
    background: var(--bg-strong);
    padding: 14px 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    display: none;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
    z-index: 999;
    min-width: 240px;
}

.header.nav-open .right-side.nav-links {
    display: flex;
}

/* Dropdown menu CTA: ensure text is charcoal (avoid any inherited/gradient text rules). */
.right-side.nav-links .nav-btn.nav-cta {
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

.logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    background: #1c1c1c;
    padding: 6px;
}

.brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 1.12rem;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

.hero {
    padding: 64px 0 36px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Hero spotlight + soft vignette for premium depth */
    background:
      radial-gradient(640px 320px at 50% 32%, rgba(255, 255, 255, 0.06), transparent 62%),
      radial-gradient(1100px 700px at 50% 120%, rgba(0, 0, 0, 0.35), transparent 70%),
      linear-gradient(#2f2f2f, #2a2a2a);
    z-index: 0;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}


.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    text-align: center;
    justify-items: center;
}

.hero-text h1 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.08;
    max-width: 22ch;
    margin: 12px 0 16px;
    margin-left: auto;
    margin-right: auto;
    color: #111;
}


.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555;
    font-size: 12px;
}

.lead {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: #444;
    line-height: 1.6;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 20px;
}

.hero .cta-row {
    justify-content: center;
}

.home-page .hero .hero-call-now-mobile {
    display: none;
}

.home-page.call-in-hero .header > .nav-btn.call-now-btn {
    display: none;
}

.home-page.call-in-hero .hero .hero-call-now-mobile {
    display: inline-flex;
}

.trust-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.hero .trust-row {
    justify-content: center;
}

.trust-item {
    /* Light surface with soft edge */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 120px;
    transition: border-color 160ms ease;
}

.hero .trust-row .trust-item:first-child,
.hero .trust-row .trust-item:last-child {
    /* Darker emphasis tiles */
    background: rgba(0, 0, 0, 0.55);
}

.trust-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.trust-label {
    color: #555;
    font-size: 12px;
}

.trust-item:hover {
    border-color: #d4a857;
}

.trust-item.is-placeholder {
    display: none;
}

.hero-card {
    background: linear-gradient(145deg, #3d3d3d, #2b2b2b);
    border: 1px solid #444;
    border-radius: 16px;
    box-shadow: 0 20px 40px var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: 14px 18px;
    background: #1f1f1f;
    font-weight: 600;
    border-bottom: 1px solid #3c3c3c;
}

.card-body {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.preview-block {
    height: 120px;
    background: #4a4a4a;
    border-radius: 12px;
}

.preview-block.short {
    height: 24px;
    width: 70%;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.preview-grid div {
    height: 64px;
    background: #4f4f4f;
    border-radius: 10px;
}

.preview-bar {
    height: 28px;
    background: #444;
    border-radius: 999px;
}

.section {
    padding: 48px 0;
    /* Section surface blend for smoother transitions */
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(255, 255, 255, 0.03), transparent 60%);
}

.section.why-panel {
    background:
        radial-gradient(800px 520px at 50% -15%, rgba(255, 255, 255, 0.05), transparent 62%),
        linear-gradient(#2b2b2b, #252525);
}

.section.why-panel .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section.why-panel .feature-grid {
    justify-items: center;
}

.section.cta-strip {
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(255, 255, 255, 0.04), transparent 62%),
        linear-gradient(#2a2a2a, #242424);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.section.full-panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.section h2 {
    margin-bottom: 10px;
}

.section-subtitle {
    color: var(--muted);
    max-width: 680px;
    line-height: 1.6;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.feature-row-center {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.feature-row-center .feature-card {
    max-width: 320px;
    width: 100%;
}

.feature-card {
    /* Soft translucent surface for premium cards */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #dcb15a;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(220, 177, 90, 0.35);
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

.feature-card h3 {
    margin-bottom: 8px;
}

.feature-card:hover,
.testimonial-card:hover,
.package-card:hover,
.product-button:hover,
.process-item:hover {
    transform: translateY(-6px);
    border-color: rgba(247, 231, 169, 0.3);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4), 0 0 18px rgba(212, 168, 87, 0.12);
}

.band {
    /* Slightly lifted band to avoid harsh blocks */
    background:
        radial-gradient(900px 520px at 50% -20%, rgba(255, 255, 255, 0.04), transparent 60%),
        linear-gradient(#2a2a2a, #242424);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}

.process-list {
    display: grid;
    gap: 16px;
}

.process-item {
    display: flex;
    gap: 16px;
    /* Elevated process panels */
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 16px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.step {
    font-size: 20px;
    font-weight: 700;
    min-width: 40px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.section.testimonials-panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.testimonial-card {
    /* Subtle glow to separate from background */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.testimonial-name {
    display: block;
    margin-top: 12px;
    font-weight: 600;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}

.product-grid a {
    text-decoration: none;
}

.product-button {
    width: min(75vw, 900px);
    height: auto;
    margin: 0;
    padding: 22px 24px;
    min-height: 72px;
    /* Product tiles with subtle depth */
    background-color: #1a1a1a;
    border: 1px solid #ffffff;
    font-size: 16px;
    letter-spacing: 0.3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.project-actions .status-input {
    flex: 1 1 220px;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid #ffffff;
    background: #0f0f0f;
    color: #f5f5f5;
    padding: 8px 12px;
}

.project-actions .status-input.milestone-input,
.project-actions .status-input.eta-input {
    flex: 1 1 180px;
}

.project-actions .status-message {
    font-size: 12px;
    color: #d8b25a;
}

.product-title {
    font-size: 18px;
    font-weight: 700;
}

.product-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.products-page .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}

.products-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.products-page main {
    flex: 1;
}

.products-page .section {
    text-align: center;
}

.products-page .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.products-page .product-grid {
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
}

.products-page .product-button {
    max-width: none;
}

.packages-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.packages-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.packages-page main {
    flex: 1;
    display: flex;
}

.packages-page .packages-section {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
}

.packages-page .packages-grid {
    max-height: 100%;
    overflow: auto;
}

/* Ambient gold glow for selected panels */
[data-gold-glow] {
    position: relative;
    overflow: hidden;
}

[data-gold-glow]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Adjust stops/opacity for stronger or softer glow */
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 223, 128, 0.18) 0%,
        rgba(255, 190, 90, 0.12) 18%,
        rgba(200, 140, 40, 0.07) 40%,
        rgba(0, 0, 0, 0) 70%
    );
    filter: blur(100px) brightness(1.05);
    opacity: 0.75;
    animation: goldGlowPulse 16s ease-in-out infinite alternate;
}

/* Ensure content sits above the glow */
[data-gold-glow] > * {
    position: relative;
    z-index: 1;
}

@keyframes goldGlowPulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0.9;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-gold-glow]::before {
        animation: none;
    }
}

.packages-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.packages-section .hero-title {
    text-align: center;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.package-card {
    /* Premium package surfaces */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #d4a857;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.package-card.highlight {
    /* Gold‑tinted emphasis */
    border-color: #d4a857;
    box-shadow: 0 22px 50px rgba(212, 168, 87, 0.22);
}

.package-tagline {
    color: #ddd;
    margin: 0;
}

.package-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    color: #eee;
}

.package-list li::before {
    content: "•";
    color: #d8b25a;
    margin-right: 8px;
}

.package-card a {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.contact-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    scroll-snap-type: none;
}

.contact-page main {
    flex: 1;
    padding-bottom: 80px;
}

.contact-page [data-snap-panel],
.contact-page .panel {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --auth-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --auth-slide: 520ms;
    --auth-fade: 200ms;
    --auth-radius: 24px;
}

.login-page main {
    flex: 1;
}

.login-page .contact-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.login-page .contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 260px at 50% 34%, rgba(255, 255, 255, 0.035), transparent 64%),
        radial-gradient(680px 420px at 25% 20%, rgba(220, 177, 90, 0.07), transparent 62%),
        radial-gradient(760px 460px at 78% 55%, rgba(255, 247, 212, 0.05), transparent 64%),
        linear-gradient(#2f2f2f, #262626);
    z-index: 0;
    pointer-events: none;
}

.login-page .contact-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    background:
        radial-gradient(820px 520px at 50% 10%, rgba(0, 0, 0, 0.35), transparent 60%),
        repeating-linear-gradient(
            135deg,
            rgba(255, 247, 212, 0.04) 0px,
            rgba(255, 247, 212, 0.04) 1px,
            rgba(0, 0, 0, 0) 12px,
            rgba(0, 0, 0, 0) 20px
        );
    mix-blend-mode: overlay;
    animation: authAmbientDrift 28s var(--auth-ease) infinite alternate;
}

@keyframes authAmbientDrift {
    0% {
        transform: translate3d(-0.6%, -0.4%, 0) scale(1.01);
        opacity: 0.5;
    }
    100% {
        transform: translate3d(0.6%, 0.4%, 0) scale(1.02);
        opacity: 0.7;
    }
}

.login-page .contact-section .container {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1100px;
}

.login-page .panel-content > * {
    opacity: 1;
    transform: none;
}

/* Auth visibility safety (desktop): avoid a blank auth card if reveal.js doesn't run. */
@media (min-width: 769px) {
    .login-page .auth-shell [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* Desktop auth sizing + proportions (layout only; does not change animation logic). */
    .login-page .login-hero {
        /* Center the card in the remaining viewport below the sticky header. */
        min-height: calc(100dvh - var(--header-offset, 80px));
        display: flex;
        align-items: center;
        padding-top: clamp(24px, 4vh, 48px);
        padding-bottom: clamp(24px, 4vh, 56px);
    }

    .login-page .login-hero > .container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .login-page .auth-shell {
        width: min(100%, clamp(860px, 62vw, 1100px));
        max-width: none;
        margin: 0 auto;
    }

    .login-page .auth-card {
        min-height: clamp(520px, 56vh, 680px);
        /* Give children a real height so vertical centering works reliably. */
        height: clamp(520px, 56vh, 680px);
    }

    .login-page .auth-form {
        padding: clamp(28px, 3vw, 48px);
    }

    .login-page .auth-overlay-panel {
        padding: clamp(28px, 3vw, 48px);
    }

    .login-page .auth-forms-track.form-stack .auth-form > form {
        height: 100%;
        max-width: 360px;
        max-height: 100%;
        overflow-y: auto;
        padding-bottom: 18px;
        scrollbar-gutter: stable;
    }

    .login-page .auth-overlay-panel .section-subtitle {
        max-width: 40ch;
    }

    /* Desktop vertical centering inside panes, with safe overflow handling. */
    .login-page .login-form,
    .login-page .signup-form {
        align-content: center;
    }

    .login-page .auth-overlay-panel {
        max-height: 100%;
        overflow-y: auto;
        padding-bottom: calc(clamp(28px, 3vw, 48px) + 18px);
        scrollbar-gutter: stable;
    }
}

.login-page .contact-title {
    margin-bottom: 12px;
}

.login-page .contact-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 48px;
}

.auth-shell {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Unified auth card: the outer shell is the only true "card" frame. */
.login-page .auth-shell {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--auth-radius);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(900px 520px at 15% 18%, rgba(255, 247, 212, 0.05), transparent 60%) padding-box,
        linear-gradient(180deg, rgba(18, 18, 18, 0.94), rgba(9, 9, 9, 0.96)) padding-box,
        var(--gold-gradient) border-box;
    background-clip: padding-box, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateZ(0);
    transition: transform var(--auth-slide) var(--auth-ease), box-shadow var(--auth-slide) var(--auth-ease);
}

/* Subtle divider behind content (desktop only). */
.login-page .auth-shell::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(212, 168, 87, 0.16),
        rgba(255, 247, 212, 0.10),
        rgba(212, 168, 87, 0.16),
        transparent
    );
}

.login-page .auth-shell > * {
    position: relative;
    z-index: 1;
}

/* Inside the auth shell, remove competing frames from the inner card element. */
.login-page .auth-shell .login-box.auth-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: inherit;
    isolation: auto;
    transition: none;
    transform: none;
}

.login-page .auth-shell .login-box.auth-card::before,
.login-page .auth-shell .login-box.auth-card::after {
    content: none;
}

.login-page .auth-shell.is-animating {
    box-shadow:
        0 34px 86px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 34px rgba(212, 168, 87, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translate3d(0, -2px, 0) scale(1.01);
}

.login-box {
    position: relative;
    background:
        radial-gradient(900px 520px at 15% 18%, rgba(255, 247, 212, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(10, 10, 10, 0.96));
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 32px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--auth-slide) var(--auth-ease), box-shadow var(--auth-slide) var(--auth-ease);
    transform: translateZ(0);
}

.login-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gold-gradient);
    pointer-events: none;
    opacity: 0.85;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}

.login-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(620px 380px at 20% 16%, rgba(255, 247, 212, 0.12), transparent 62%),
        radial-gradient(560px 340px at 80% 78%, rgba(212, 168, 87, 0.10), transparent 62%);
    opacity: 0.65;
    filter: blur(0.2px);
}

.login-page .auth-card.is-animating {
    box-shadow: none;
    transform: none;
}

.auth-card {
    position: relative;
    width: 100%;
    min-height: 560px;
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    contain: layout paint;
}

.auth-forms {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Premium auth transition */
.auth-forms-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    transition: transform var(--auth-slide) var(--auth-ease);
    will-change: transform;
}

.auth-form {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    height: 100%;
    transition: opacity var(--auth-fade) ease, transform var(--auth-slide) var(--auth-ease), filter var(--auth-slide) var(--auth-ease);
    will-change: opacity, transform;
}

/* Desktop-only form crossfade (grid layering; does not affect mobile switcher). */
@media (min-width: 769px) {
    .login-page .auth-forms-track.form-stack {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        height: 100%;
        transition: none;
        will-change: auto;
    }

    .login-page .auth-forms-track.form-stack .auth-form {
        grid-area: 1 / 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        filter: blur(0.4px);
        pointer-events: none;
        transition: opacity 240ms ease, transform 320ms var(--auth-ease), filter 320ms var(--auth-ease);
        will-change: opacity, transform, filter;
    }

    .login-page .auth-forms-track.form-stack .auth-form > form {
        width: 100%;
        max-width: 340px;
    }

    .login-page .auth-forms-track.form-stack .auth-form--login > form {
        grid-column: 1;
    }

    .login-page .auth-forms-track.form-stack .auth-form--signup > form {
        grid-column: 2;
    }

    .login-page .auth-card:not([data-mode]) .auth-forms-track.form-stack .auth-form--login,
    .login-page .auth-card[data-mode="login"] .auth-forms-track.form-stack .auth-form--login,
    .login-page .auth-card[data-mode="signup"] .auth-forms-track.form-stack .auth-form--signup {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: none;
        pointer-events: auto;
    }

    /* Sync fades with the overlay slide for a premium handoff. */
    .login-page .auth-card.is-animating[data-mode="signup"] .auth-forms-track.form-stack .auth-form--signup,
    .login-page .auth-card.is-animating[data-mode="login"] .auth-forms-track.form-stack .auth-form--login {
        transition-delay: 160ms;
    }

    /* Ensure the inner form surface only fills its half of the card. */
    .login-page .auth-forms-track.form-stack .auth-form::before {
        top: clamp(18px, 2.6vw, 28px);
        bottom: clamp(18px, 2.6vw, 28px);
        left: clamp(18px, 2.6vw, 28px);
        right: calc(50% + clamp(18px, 2.6vw, 28px));
    }

    .login-page .auth-forms-track.form-stack .auth-form--signup::before {
        left: calc(50% + clamp(18px, 2.6vw, 28px));
        right: clamp(18px, 2.6vw, 28px);
    }
}

.login-page .auth-form::before {
    content: "";
    position: absolute;
    inset: clamp(18px, 2.6vw, 28px);
    border-radius: calc(var(--auth-radius) - 8px);
    background:
        radial-gradient(620px 360px at 25% 18%, rgba(255, 247, 212, 0.045), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.10));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--auth-fade) ease, box-shadow var(--auth-slide) var(--auth-ease), border-color var(--auth-slide) var(--auth-ease), filter var(--auth-slide) var(--auth-ease);
}

.login-page .auth-form > * {
    position: relative;
    z-index: 1;
}

.login-page .auth-form.active-panel {
    transform: none;
    filter: saturate(1) brightness(1.02);
}

.login-page .auth-form.active-panel::before {
    border-color: rgba(212, 168, 87, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 212, 0.05),
        inset 0 0 20px rgba(212, 168, 87, 0.10);
    opacity: 1;
}

.login-page .auth-form.inactive-panel {
    transform: none;
    filter: saturate(0.96) brightness(0.96);
}

.login-page .auth-form.inactive-panel::before {
    opacity: 0.55;
    filter: blur(0.25px);
}

.auth-card:not(.is-signup) .auth-form--signup {
    opacity: 0.55;
    visibility: visible;
    pointer-events: none;
}

.auth-card.is-signup .auth-form--login {
    opacity: 0.55;
    visibility: visible;
    pointer-events: none;
}

.auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background:
        radial-gradient(760px 520px at 30% 18%, rgba(255, 247, 212, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(20, 20, 20, 0.92), rgba(10, 10, 10, 0.94));
    backdrop-filter: blur(6px);
    overflow: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--auth-slide) var(--auth-ease), box-shadow var(--auth-fade) ease, opacity var(--auth-fade) ease;
    will-change: transform, box-shadow;
    z-index: 2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 44px rgba(0, 0, 0, 0.28);
}

.login-page .auth-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(520px 280px at 30% 22%, rgba(255, 247, 212, 0.10), transparent 60%),
        radial-gradient(520px 300px at 75% 80%, rgba(212, 168, 87, 0.08), transparent 60%);
    opacity: 0.75;
    transform: scale(1);
}

.login-page .auth-card.is-animating .auth-overlay::before {
    animation: authOverlayBreath var(--auth-slide) var(--auth-ease) 1;
}

@keyframes authOverlayBreath {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

.auth-card.is-signup .auth-overlay {
    transform: translate3d(0, 0, 0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 54px rgba(0, 0, 0, 0.34);
}

.auth-overlay-track {
    display: flex;
    width: 200%;
    height: 100%;
    transform: translateX(-50%);
    transition: transform var(--auth-slide) var(--auth-ease);
    will-change: transform;
}

.auth-card.is-signup .auth-overlay-track {
    transform: translateX(0);
}

.auth-overlay-panel {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: opacity var(--auth-fade) ease, transform var(--auth-slide) var(--auth-ease), filter var(--auth-slide) var(--auth-ease);
    will-change: opacity, transform;
}

.login-page .auth-overlay-panel.active-panel {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: brightness(1.03);
}

.login-page .auth-overlay-panel.inactive-panel {
    transform: translate3d(0, 0, 0) scale(0.985);
    opacity: 0.68;
    filter: saturate(0.9) brightness(0.92);
}

.auth-overlay-panel .btn-secondary,
.auth-overlay-panel .btn-primary {
    align-self: center;
}

.login-page .auth-overlay-panel .contact-title,
.login-page .auth-overlay-panel .section-subtitle {
    transition: opacity var(--auth-fade) ease, transform var(--auth-fade) ease;
    will-change: opacity, transform;
}

.login-page .auth-overlay-panel.inactive-panel .contact-title,
.login-page .auth-overlay-panel.inactive-panel .section-subtitle {
    opacity: 0.75;
    transform: translate3d(0, 2px, 0);
}

.auth-card .btn-primary,
.auth-card .btn-secondary {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.auth-card .btn-primary:hover,
.auth-card .btn-secondary:hover {
    transform: translateY(-1px);
}

.auth-card .btn-primary:active,
.auth-card .btn-secondary:active {
    transform: scale(0.98);
}

.auth-card .form-field input:focus,
.auth-card .form-field textarea:focus,
.auth-card .form-field select:focus {
    outline: none;
    border-color: #d4a857;
    box-shadow: 0 0 0 2px rgba(212, 168, 87, 0.35);
}

/* Premium auth micro-interactions */
.login-page .auth-card .form-field input,
.login-page .auth-card .form-field textarea {
    background: rgba(10, 10, 10, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
    transition: border-color 180ms ease, background-color 220ms ease,
        box-shadow 220ms var(--auth-ease), transform 220ms var(--auth-ease), color 180ms ease;
    will-change: transform, box-shadow;
}

.login-page .auth-card .form-field input::placeholder,
.login-page .auth-card .form-field textarea::placeholder {
    color: rgba(245, 245, 245, 0.42);
}

.login-page .auth-card .form-field input:focus-visible,
.login-page .auth-card .form-field textarea:focus-visible {
    border-color: rgba(212, 168, 87, 0.92);
    background-color: rgba(12, 12, 12, 0.92);
    box-shadow:
        0 0 0 3px rgba(212, 168, 87, 0.22),
        0 18px 48px rgba(0, 0, 0, 0.38);
    transform: translateZ(0) scale(1.01);
}

.login-page .auth-card .btn-primary,
.login-page .auth-card .btn-secondary {
    position: relative;
    overflow: hidden;
    transition: transform 240ms var(--auth-ease), box-shadow 240ms var(--auth-ease),
        filter 240ms var(--auth-ease), background-position 520ms var(--auth-ease);
    will-change: transform, box-shadow, filter, background-position;
}

.login-page .auth-card .btn-primary {
    background-size: 160% 100%;
    background-position: 0% 50%;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        0 0 0 rgba(212, 168, 87, 0);
}

.login-page .auth-card .btn-primary::after {
    content: "";
    position: absolute;
    inset: -60% -60%;
    background: linear-gradient(120deg, transparent, rgba(255, 247, 212, 0.26), transparent);
    transform: translate3d(-55%, 0, 0) rotate(10deg);
    opacity: 0;
    transition: transform 700ms var(--auth-ease), opacity var(--auth-fade) ease;
    pointer-events: none;
}

.login-page .auth-card .btn-primary:focus-visible,
.login-page .auth-card .btn-secondary:focus-visible {
    outline: 2px solid rgba(212, 168, 87, 0.92);
    outline-offset: 3px;
    box-shadow:
        0 0 0 4px rgba(212, 168, 87, 0.14),
        0 18px 48px rgba(0, 0, 0, 0.38);
}

@media (hover: hover) and (pointer: fine) {
    .login-page .auth-card .btn-primary:hover {
        transform: translateY(-1px) scale(1.01);
        background-position: 100% 50%;
        filter: brightness(1.06);
        box-shadow:
            0 22px 54px rgba(0, 0, 0, 0.46),
            0 0 28px rgba(212, 168, 87, 0.18);
    }

    .login-page .auth-card .btn-primary:hover::after {
        opacity: 1;
        transform: translate3d(55%, 0, 0) rotate(10deg);
    }

    .login-page .auth-card .btn-secondary.btn-gold-outline:hover {
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.06);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.42),
            0 0 24px rgba(212, 168, 87, 0.16);
    }
}

.login-page .auth-forms,
.login-page .auth-overlay {
    transition: opacity var(--auth-fade) ease;
}

.login-page .auth-card.is-fade-swap .auth-forms,
.login-page .auth-card.is-fade-swap .auth-overlay {
    opacity: 0;
}

.login-box .contact-form {
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.login-form {
  display: grid;
  row-gap: 30px;
  justify-content: flex-start;
  height: 100%;
  min-height: 100%;
}

.login-card-left {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.auth-form .login-form,
.auth-form .signup-form {
    height: 100%;
    align-self: stretch;
}

.login-form .form-grid {
    display: contents;
}

.login-form .form-actions {
    display: contents;
}

.login-form .form-field,
.login-form .form-actions > * {
    width: 100%;
    max-width: 360px;
    align-self: center;
}

.login-box .form-actions {
    margin-top: 0;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.login-box .form-actions .btn-secondary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-box .form-actions button,
.login-box .form-actions .btn-secondary {
    max-width: 360px;
}

@media (prefers-reduced-motion: reduce) {
    .login-page .contact-section::after {
        animation: none;
    }

    .login-page [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Reduced motion: no slide/scale effects; JS will fade-swap between modes. */
    .login-page .auth-overlay,
    .login-page .auth-overlay-track,
    .login-page .auth-forms-track {
        transition-property: opacity !important;
        transition-duration: var(--auth-fade) !important;
        transition-timing-function: ease !important;
    }

    .login-page .auth-form,
    .login-page .auth-overlay-panel,
    .login-page .auth-card.is-animating {
        transform: none !important;
        filter: none !important;
    }

    .login-page .auth-card .btn-primary,
    .login-page .auth-card .btn-secondary {
        transform: none !important;
        transition: box-shadow var(--auth-fade) ease, filter var(--auth-fade) ease, opacity var(--auth-fade) ease !important;
    }

    .login-page .auth-card .btn-primary::after {
        transition: none !important;
        opacity: 0 !important;
    }

    .login-page .auth-card .form-field input:focus-visible,
    .login-page .auth-card .form-field textarea:focus-visible {
        transform: none !important;
    }

    .login-page .auth-card.is-animating {
        box-shadow:
            0 24px 70px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .login-page .auth-overlay::before {
        animation: none !important;
    }
}

.login-info-card {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: calc(var(--auth-radius) - 8px);
    padding: 48px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.login-page .login-info-card {
    background:
        radial-gradient(700px 420px at 20% 20%, rgba(255, 247, 212, 0.06), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.10));
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

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

    .login-page .contact-form {
        max-width: 100%;
    }
}

.contact-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.contact-page .contact-section {
    min-height: auto;
}

.contact-title {
    text-align: center;
    margin-bottom: 12px;
}

.contact-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-section .container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dashboard-hero {
    text-align: center;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #d4a857;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #cfcfcf;
}

.dashboard-value {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    transition: opacity 220ms ease;
    will-change: opacity;
}

.dashboard-section[data-sb-state="loading"] .dashboard-stats {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.dashboard-section[data-sb-state="loaded"][data-has-project="true"] .dashboard-stats {
    visibility: visible;
    opacity: 1;
}

.dashboard-section[data-sb-state="loaded"][data-has-project="false"] .dashboard-stats {
    display: none;
}

.dashboard-empty-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding-top: 6px;
}

.dashboard-empty-cta .btn-primary {
    color: #000000;
    -webkit-text-fill-color: #000000;
}

.dashboard-section[data-sb-state="loading"] .dashboard-empty-cta {
    display: none;
}

.dashboard-section[data-sb-state="loaded"][data-has-project="false"] .dashboard-empty-cta {
    display: flex;
}

.stat-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: #c9c9c9;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
}

.dashboard-list {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
    color: #e2e2e2;
    display: grid;
    gap: 8px;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.dashboard-actions .btn-secondary {
    min-width: 180px;
}
.contact-form {
    margin-top: 32px;
    /* Contact panel surface */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #ffffff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

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

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.form-field label {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

.form-field input,
.form-field textarea {
    background: #0f0f0f;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 14px;
    font-size: 15px;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.form-actions {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

.form-status {
    margin-top: 12px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
}

.form-actions button {
    min-width: 180px;
    font-weight: 700;
}
.cta-band {
    /* CTA band with warm ambient glow */
    background:
        radial-gradient(900px 480px at 50% -10%, rgba(255, 255, 255, 0.04), transparent 60%),
        linear-gradient(135deg, #333333, #242424);
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.cta-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    padding: 48px 0;
}

.footer {
    padding: 28px 0;
    /* Footer blend into page */
    background:
        radial-gradient(800px 420px at 50% -20%, rgba(255, 255, 255, 0.03), transparent 60%),
        #1f1f1f;
    border-top: 2px solid #111;
    scroll-snap-align: none;
    width: 100%;
    margin-top: auto;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-text {
    color: var(--muted);
}

.footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-links a {
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-links .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    text-decoration: none;
}

.footer-links .social-link svg {
    width: 44px;
    height: 44px;
    display: block;
}

.header a,
.footer-links a,
.cta-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.centered-div {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

button:hover,
.nav-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.product-button:hover,
.hero .btn:hover,
.hero a.btn:hover,
.hero a.button:hover {
    transform: translateY(-2px);
    border-color: #d4a857;
    filter: brightness(1.12);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

button:active,
.nav-btn:active,
.btn-primary:active,
.btn-secondary:active,
.product-button:active,
.hero .btn:active,
.hero a.btn:active,
.hero a.button:active {
    transform: none;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 48px;
    min-width: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.btn-primary {
    background-image: var(--gold-gradient);
    border: 1px solid #d4a857;
    color: #1a1a1a;
}

/* CTA rows sometimes set `a { color: inherit; }` (legacy pages). Keep primary button text charcoal. */
.cta-band .cta-row a.btn-primary,
.cta-row a.btn-primary {
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

.btn-secondary {
    background-color: #1a1a1a;
    border: 1px solid #ffffff;
    color: #d8b25a;
}

.btn-secondary.luxury-gold {
    position: relative;
    border-color: transparent;
}

.btn-primary.luxury-gold {
    color: #1a1a1a;
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-image: var(--gold-gradient) !important;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: #d4a857;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid #d4a857;
    outline-offset: 2px;
}

.hero {
    color: #f2f2f2;
}

.hero h1 {
    color: #f2f2f2;
}

.hero h1 .luxury-gold {
    color: inherit;
}

.hero .lead {
    color: #d2d2d2;
}

.hero .cta-row a {
    text-decoration: none;
    color: inherit;
}

.hero .cta-row a.btn-secondary {
    background-color: #1a1a1a !important;
}

.hero .btn-primary {
    color: #111 !important;
}

.hero .btn-primary.luxury-gold,
.hero .btn-secondary.luxury-gold,
.nav-btn.luxury-gold {
    color: #d8b25a;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.hero a,
.hero a:visited {
  color: inherit;
  text-decoration: none;
}

.hero .btn,
.hero .button,
.hero a.btn,
.hero a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem;
  border-radius: 0.9rem;
  border: 1px solid #ffffff;
  background: #fff;
  color: #111;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
}

.hero .btn--primary {
  border-color: #ffffff;
  box-shadow: 0 14px 40px rgba(212, 168, 87, 0.16);
}

.hero .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 45px rgba(17, 17, 17, 0.09);
}

.btn-primary:hover {
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25), 0 0 18px rgba(212, 168, 87, 0.3);
}

.btn-secondary:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.btn-primary:active,
.btn-secondary:active,
.nav-btn:active {
    transform: translateY(1px);
}

.small-muted {
    color: var(--muted);
    font-size: 0.95rem;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card[data-reveal]:nth-child(1),
.testimonial-card[data-reveal]:nth-child(1),
.process-item[data-reveal]:nth-child(1),
.package-card[data-reveal]:nth-child(1) {
    --reveal-delay: 60ms;
}

.feature-card[data-reveal]:nth-child(2),
.testimonial-card[data-reveal]:nth-child(2),
.process-item[data-reveal]:nth-child(2),
.package-card[data-reveal]:nth-child(2) {
    --reveal-delay: 120ms;
}

.feature-card[data-reveal]:nth-child(3),
.testimonial-card[data-reveal]:nth-child(3),
.process-item[data-reveal]:nth-child(3),
.package-card[data-reveal]:nth-child(3) {
    --reveal-delay: 180ms;
}

.feature-card[data-reveal]:nth-child(4),
.testimonial-card[data-reveal]:nth-child(4),
.package-card[data-reveal]:nth-child(4) {
    --reveal-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .feature-card,
    .testimonial-card,
    .package-card,
    .process-item,
    .product-button,
    .btn-primary,
    .btn-secondary,
    .nav-btn {
        transition: none;
        transform: none;
    }
}

@media (max-width: 900px) {
    .hero-grid,
    .split,
    .feature-grid,
    .testimonial-grid,
    .product-grid,
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 34px;
    }

    .header {
        flex-direction: row;
        gap: 12px;
        position: sticky;
    }

    .left-side {
        flex: 1;
    }

    .menu-toggle {
        margin-left: auto;
    }

    .right-side.nav-links {
        right: 0;
        left: 0;
        border-radius: 0 0 12px 12px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .packages-page .packages-grid {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    html,
    body {
        scroll-snap-type: none;
    }

    [data-snap-panel],
    .panel {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .header {
        padding: 8px 12px;
    }

    .hero {
        padding: 40px 0 20px;
    }

    .cta-row {
        gap: 10px;
    }

    .trust-row {
        gap: 12px;
    }

    .trust-item {
        min-width: 140px;
    }

    .feature-grid,
    .testimonial-grid,
    .packages-grid {
        gap: 14px;
    }

    .section {
        padding: 28px 0;
    }

    .login-page .auth-shell {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .login-page .auth-shell::before {
        display: none;
    }

    .login-box.auth-card {
        padding: 0;
        width: 100%;
        max-width: none;
        overflow: hidden;
    }

    .auth-card {
        min-height: 0;
        flex-direction: column;
    }

    /* Mobile auth switcher: viewport + vertical sliding track. */
    .auth-forms {
        position: relative;
        overflow: hidden;
        height: var(--maxH, auto);
    }

    .auth-forms-track {
        display: flex;
        flex-direction: column;
        width: 100%;
        transform: translateY(0);
        transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .auth-card.is-signup .auth-forms-track {
        transform: translateY(calc(-1 * var(--maxH, 0px)));
    }

    .auth-form {
        width: 100%;
        min-height: var(--maxH, auto);
        padding: 28px;
    }

    .auth-overlay {
        position: relative;
        width: 100%;
        height: var(--overlayH, auto);
        transform: none;
        order: -1;
    }

    .auth-overlay-track {
        flex-direction: column;
        width: 100%;
        transform: translateY(calc(-1 * var(--overlayH, 0px)));
        transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .auth-card.is-signup .auth-overlay-track {
        transform: translateY(0);
    }

    .auth-overlay-panel {
        width: 100%;
        height: var(--overlayH, auto);
    }

    .dashboard-card {
        padding: 16px;
    }

    .panel-content > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .section.why-panel .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        justify-content: center;
    }

.section.why-panel .feature-card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 250px;
    max-width: 180px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 901px) {
    .section.why-panel .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
    }

    .section.why-panel .feature-card {
        max-width: 260px;
        width: 100%;
    }
}

    .auth-overlay-panel .contact-title,
    .auth-overlay-panel .section-subtitle {
        text-align: center;
    }

    .auth-overlay-panel .contact-title {
        font-size: 1.4rem;
    }

    .auth-overlay-panel .section-subtitle {
        font-size: 0.95rem;
    }

    .login-box .form-field input,
    .login-box .form-field textarea {
        padding: 9px 12px;
        border-radius: 8px;
    }

    .login-box .btn-primary,
    .login-box .btn-secondary {
        min-height: 40px;
        font-size: 0.9rem;
    }

    .logo {
        width: 40px;
        height: 40px;
        padding: 4px;
    }

    .brand {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .header {
        padding: 12px 16px;
    }

    .left-side {
        gap: 8px;
    }

    .btn-primary,
    .btn-secondary,
    .hero .cta-row a,
    .product-button,
    .form-actions button,
    .right-side.nav-links .nav-btn {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* Keep the header call button compact on narrow screens. */
    .header > .nav-btn.call-now-btn {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.9rem;
        line-height: 1;
        white-space: nowrap;
    }

    .cta-row {
        gap: 10px;
    }

    .trust-row {
        gap: 10px;
    }

    .trust-item {
        width: 100%;
        max-width: 320px;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 56px 0 40px;
    }

    .hero-text h1 {
        font-size: 30px;
    }

    .section {
        padding: 40px 0;
    }

    .feature-card,
    .process-item,
    .testimonial-card,
    .package-card {
        padding: 18px;
    }

    .packages-grid,
    .feature-grid,
    .testimonial-grid {
        gap: 14px;
    }

    .packages-page .packages-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .contact-form {
        padding: 20px;
    }

    .form-field input,
    .form-field textarea {
        font-size: 16px;
    }

    .product-button {
        width: 100%;
    }

    .footer-grid {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        gap: 12px;
    }

    .footer-links .social-link {
        width: 48px;
        height: 48px;
    }

    .footer-links .social-link svg {
        width: 36px;
        height: 36px;
    }

    .login-box.auth-card {
        padding: 0;
    }

    .auth-form {
        padding: 20px;
    }

    .dashboard-grid {
        gap: 16px;
    }

    .dashboard-actions .btn-secondary {
        min-width: 100%;
    }
}

.luxury-gold {
  color: #d8b25a; /* fallback */

  background-image: var(--gold-gradient);

  text-shadow:
    0 0 1px rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.18);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Render gradient text where supported, fall back to solid gold elsewhere. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .luxury-gold {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.gold-gradient-text {
  color: #d8b25a;
  background-image: var(--gold-gradient);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-gradient-text {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}