:root { --ink: #292522; --clay: #a66a48; --line: #ded8d0; }
.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }
.button-primary { display: inline-block; background: var(--ink); color: #fff; padding: .75rem 1.15rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease; }
.button-primary:hover { background: var(--clay); }
.button-outline { display: inline-block; border: 1px solid var(--ink); color: var(--ink); padding: .7rem 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.button-outline:hover { background: var(--ink); color: #fff; }
.nav-link { transition: color .2s ease; }.nav-link:hover, .footer-link:hover { color: var(--clay); }
.footer-link { color: #a8a29e; transition: color .2s ease; }
.admin-link { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; color: #a8a29e; }.admin-link:hover, .admin-link.active { background: #3b3530; color: #fff; }
.form-input { width: 100%; border: 1px solid var(--line); background: #fff; padding: .8rem 1rem; color: var(--ink); outline: none; }.form-input:focus { border-color: var(--clay); box-shadow: 0 0 0 2px #a66a4822; }

/* Slow, blended colour waves behind the home hero. */
.hero-color-waves { position: absolute; inset: -20%; overflow: hidden; background: #17121f; }
.hero-wave { position: absolute; width: 72%; height: 85%; border-radius: 42% 58% 64% 36% / 45% 38% 62% 55%; opacity: 0; filter: blur(38px); mix-blend-mode: screen; will-change: transform, opacity, filter; }
.hero-wave-1 { left: -20%; top: 4%; background: #ff6b00; animation: hero-wave-drift 11s ease-in-out infinite; }
.hero-wave-2 { left: 22%; top: -18%; background: #8b35ff; animation: hero-wave-drift 13s ease-in-out -4s infinite reverse; }
.hero-wave-3 { right: -18%; top: 18%; background: #00c9a7; animation: hero-wave-drift 15s ease-in-out -8s infinite; }
.hero-wave-4 { left: 16%; bottom: -35%; background: #ff177f; animation: hero-wave-drift 12s ease-in-out -6s infinite reverse; }

@keyframes hero-wave-drift {
    0% { opacity: 0; transform: translate3d(-45%, 25%, 0) scale(.55) rotate(0deg); filter: blur(90px) hue-rotate(0deg); }
    18% { opacity: .85; }
    55% { opacity: .7; transform: translate3d(38%, -12%, 0) scale(1.2) rotate(35deg); filter: blur(42px) hue-rotate(70deg); }
    84% { opacity: .8; }
    100% { opacity: 0; transform: translate3d(115%, 18%, 0) scale(.7) rotate(80deg); filter: blur(60px) hue-rotate(150deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-wave { animation: none; opacity: .18; }
}

.mobile-contact-bar { display: none; }
.mobile-swipe-hint { display: none; }

@media (max-width: 639px) {
    body { padding-bottom: 4.5rem; }
    main > section { scroll-margin-top: 4.5rem; }
    #site-menu { max-height: calc(100vh - 4.5rem); overflow-y: auto; padding: .65rem 1rem 1rem; }
    #site-menu > div { gap: 0; }
    #site-menu .nav-link { display: block; border-bottom: 1px solid #e7e5e4; padding: .85rem .25rem; font-size: .9rem; }
    #site-menu .button-primary { margin-top: .75rem; width: 100%; padding: .95rem 1rem; }
    #site-menu .dashboard-login-button { margin-top: .75rem; width: 100%; padding: .9rem 1rem; }

    .home-hero > div:nth-child(3) { gap: 2rem; padding-top: 3rem; padding-bottom: 3.5rem; }
    .home-hero h1 { font-size: clamp(2.9rem, 14vw, 3.6rem); line-height: .94; letter-spacing: -.025em; }
    .home-hero h1 + p { font-size: 1rem; line-height: 1.7; }
    .home-hero .button-primary,
    .home-hero .button-primary + a { flex: 1 1 9rem; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
    .hero-showcase {
        display: flex;
        height: auto;
        gap: .9rem;
        margin-top: .25rem;
        padding: .35rem 1.8rem 3.7rem .15rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-left: .15rem;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hero-showcase::-webkit-scrollbar { display: none; }
    .hero-showcase > div:first-child { display: none; }
    .hero-slab {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 78%;
        width: 78%;
        height: auto;
        aspect-ratio: 4 / 4.8;
        transform: none !important;
        scroll-snap-align: start;
        border-width: 3px;
        border-radius: .85rem;
        box-shadow: 0 18px 36px rgba(0, 0, 0, .38);
    }
    .hero-slab:active { transform: scale(.98) !important; }
    .hero-slab.is-active {
        transform: scale(1.035) !important;
        box-shadow: 0 24px 45px rgba(0, 0, 0, .48);
    }
    .hero-slab > img { filter: saturate(.94) contrast(1.04); }
    .hero-slab > div { display: none; }
    .hero-showcase > div:last-child {
        bottom: .15rem;
        left: .15rem;
        right: auto;
        transform: none;
        width: max-content;
        max-width: 94%;
        padding: .75rem 1.1rem;
        border-radius: 999px;
        font-size: .58rem;
        letter-spacing: .17em;
        text-align: center;
    }
    .mobile-swipe-hint { display: inline; color: #d6d3d1; }

    @media (prefers-reduced-motion: reduce) {
        .hero-showcase { scroll-behavior: auto; }
        .hero-slab.is-active { transform: none !important; }
    }

    main section:not(.home-hero) { overflow-x: hidden; }
    main section:not(.home-hero) h1 { line-height: 1; }
    .button-primary, .button-outline { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    article { border-radius: .15rem; }
    form.bg-white { border: 1px solid #e7e5e4; box-shadow: 0 12px 35px rgba(41,37,34,.06); }
    input, select, textarea, button, a { -webkit-tap-highlight-color: transparent; }

    .mobile-contact-bar { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #44403c; background: rgba(28,25,23,.96); padding: .5rem max(.75rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); box-shadow: 0 -8px 30px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
    .mobile-contact-bar a { display: flex; min-height: 49px; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; }
    .mobile-contact-bar a + a { border-left: 1px solid #57534e; }
    .mobile-contact-bar span { color: #d6d3d1; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .mobile-contact-bar strong { margin-top: .1rem; font-size: .8rem; }

    /* Compact rhythm for phone screens only. */
    main > section:not(.home-hero) { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    main > section:not(.home-hero) .mt-12 { margin-top: 2rem !important; }
    main > section:not(.home-hero) .mt-10 { margin-top: 1.75rem !important; }
    main > section:not(.home-hero) .mt-9,
    main > section:not(.home-hero) .mt-8 { margin-top: 1.5rem !important; }
    main > section:not(.home-hero) .mt-7,
    main > section:not(.home-hero) .mt-6 { margin-top: 1.25rem !important; }
    main > section:not(.home-hero) .gap-12 { gap: 2rem !important; }
    main > section:not(.home-hero) .gap-10,
    main > section:not(.home-hero) .gap-8 { gap: 1.5rem !important; }
    main > section:not(.home-hero) .p-10,
    main > section:not(.home-hero) .p-8 { padding: 1.5rem !important; }
    main > section:not(.home-hero) .p-7,
    main > section:not(.home-hero) .p-6 { padding: 1.25rem !important; }
    footer > div:first-child { gap: 1.75rem !important; padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}