/* ==========================================
   RESET
========================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    /* Scroll-reveal animations (reveal-left / reveal-right etc.) enter on
       a translateX before their intersection observer fires, which counts
       toward the page's scrollable width -- without this, that shows up as
       a real horizontal scrollbar on mobile any time one of those
       off-screen sections exists below the fold, even though nothing is
       actually meant to be reachable by scrolling sideways. */
    overflow-x: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-black);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================
   CONTAINER
========================================== */

.container {
    width: 100%;
    /* Was a flat 1440px cap, which meant everything inside froze at
       "laptop" width on any screen wider than that -- the wider the
       monitor, the more dead space piled up on both sides. This scales
       the ceiling with the viewport instead, so sections keep growing
       on ultrawide monitors rather than sitting stranded in the middle. */
    max-width: min(1800px, 92vw);
    margin: 0 auto;
    padding-inline: clamp(3rem, 6vw, 7rem);
}

/* Wider variant for showcase/grid sections (service cards, portfolio
   slider) -- deliberately different from .container so these sections
   visually punch past the text sections next to them instead of
   sharing the exact same edges as everything else. */
.container-wide {
    width: 100%;
    max-width: min(2000px, 96vw);
    margin: 0 auto;
    padding-inline: clamp(2rem, 4vw, 5rem);
}

.container-narrow {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding-inline: clamp(3rem, 6vw, 7rem);
}

/* ==========================================
   GRID
========================================== */

.grid {
    display: grid;
    gap: var(--space-md);
}

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

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

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   UTILITY CLASSES
========================================== */

.full-height {
    min-height: 100vh;
}

.text-gradient {
    background:
        linear-gradient(
            90deg,
            var(--color-white),
            rgba(var(--color-white-rgb), .65)
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================
   ACCESSIBILITY - FOCUS STATES
========================================== */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ==========================================
   CUSTOM CURSOR HOOK
   Elements tagged .cursor-hover hide the native
   pointer and let the custom cursor (main.js)
   take over. Harmless on touch (cursor is unused).
========================================== */

.cursor-hover {
    cursor: none;
}