* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    --bg: #060606;
    --panel: #0f0f10;
    --panel-2: #121214;
    --text: #f4f1ea;
    --muted: #bbb4aa;
    --accent: #e2b10f;
    --line: rgba(255, 255, 255, 0.08);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-shell {
    min-height: 100vh;
}

.hero {
    background: #050505;
}

.hero-render-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.hero-render {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.hero-hotspots {
    position: absolute;
    inset: 0;
}

.hotspot {
    position: absolute;
    display: block;
    border-radius: 8px;
}

.hotspot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Positions tuned to the supplied render */
.nav-home     { left: 51.4%; top: 1.6%; width: 4.7%; height: 5.9%; }
.nav-services { left: 58.1%; top: 1.6%; width: 5.4%; height: 5.9%; }
.nav-work     { left: 65.2%; top: 1.6%; width: 5.8%; height: 5.9%; }
.nav-training { left: 73.3%; top: 1.6%; width: 5.8%; height: 5.9%; }
.nav-about    { left: 81.8%; top: 1.6%; width: 5.4%; height: 5.9%; }
.nav-contact  { left: 89.6%; top: 1.6%; width: 6.0%; height: 5.9%; }

.button-services { left: 3.0%; top: 65.7%; width: 16.4%; height: 6.9%; }
.button-work     { left: 20.4%; top: 65.7%; width: 16.1%; height: 6.9%; }

.content-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 88px 28px;
}

.content-section-alt {
    max-width: none;
    padding-left: max(28px, calc((100% - 1120px) / 2));
    padding-right: max(28px, calc((100% - 1120px) / 2));
    background: var(--panel);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-tag {
    margin: 0 0 16px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.26em;
}

.content-section h1,
.content-section h2 {
    max-width: 920px;
    margin: 0 0 22px;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.06;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.content-section p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.content-section a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.35);
}

.content-section a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (max-width: 900px) {
    .content-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

@media (max-width: 800px) {
    .hero-hotspots {
        display: none;
    }
}