/* Local font-face declarations — no third-party CDN (GDPR §19.1) */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { color-scheme: light; }

button, a, summary {
    cursor: pointer;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}

/* Scaled heading hierarchy (-10% smaller) */
h1 {
    font-size: clamp(31px, 7.5vw, 94px);
}
h2 {
    font-size: clamp(25px, 3.8vw, 43px);
}
.service-card-title {
    font-size: clamp(21px, 2.8vw, 28px);
}
.tip-title {
    font-size: clamp(18px, 2.2vw, 22px);
}
.footer-section-title {
    font-size: 22px;
}

html {
    scroll-behavior: smooth;
}

/* Premium Underline Hover Animation */
.nav-link-underline {
    position: relative;
    padding-bottom: 4px;
}
.nav-link-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Hero thumbnail cards (translucent dark panel behind the 3 service links) */
.hero-card {
    background: rgba(8, 8, 8, 0.60);
}

/* Skip link — visually hidden until focused */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    color: #111111;
    font-weight: 700;
    text-decoration: none;
    border-radius: 2px;
}
.skip-link:focus {
    left: 0.5rem;
}

/* Visible focus indicator that works on both light and dark backgrounds:
   dark outline reads on white sections, white ring reads on dark ones. */
:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* Micro-interactions */
.btn-luxury {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn-luxury:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
}

.btn-smooth-raise {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn-smooth-raise:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* Scroll Animations.
   Gated behind the `js` class that js/head.js puts on <html>, so that if the
   scripts fail to load the content stays visible instead of being stuck at
   opacity 0. Without JS there is nothing to add `.active`. */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js .reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.js .reveal-delay-1 { transition-delay: 150ms; }
.js .reveal-delay-2 { transition-delay: 300ms; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #000000; }

@media (prefers-reduced-motion: reduce) {
    /* Smooth scrolling is the motion most likely to cause discomfort. */
    html { scroll-behavior: auto; }

    .js .reveal,
    .js .reveal.active {
        transition: none !important;
        transition-delay: 0ms !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .btn-luxury,
    .btn-smooth-raise,
    .nav-link-underline::after {
        transition: none !important;
    }
    .btn-luxury:hover,
    .btn-smooth-raise:hover {
        transform: none !important;
    }
}

.text-shadow-sm {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Space Grotesk benefits from negative tracking at display sizes */
.font-serif {
    letter-spacing: -0.02em;
}
.hero-image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Full Hero Glassmorphism Overlay */
.diagonal-hero-overlay {
    background: rgba(10, 10, 10, 0.52);
}

/* Hero Grid Pattern */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}