/* ── Tokens ── */
:root {
    --ink-0: #060606;
    --ink-1: #0E0E0E;
    --ink-2: #161616;
    --ink-3: #202020;
    --orange: #C14A09;
    --orange-btn: #B8430A;
    --orange-btn-hover: #9C3808;
    --orange-hot: #E0642A;
    --teal: #09A688;
    --teal-text: #2FD0AE;
    --teal-deep: #067A64;
    --text: #E8E8E8;
    --text-body: #CFCFCF;
    --text-dim: #A9A9A9;
    --gold: #F2B01E;

    --r-panel: 14px;
    --r-card: 10px;
    --r-ctl: 6px;

    --gutter: clamp(16px, 4vw, 64px);
    --maxw: 1240px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Steel surface: lit top edge, inner highlight, shadow falling down and right */
    --steel: linear-gradient(180deg, rgba(34,34,34,0.92) 0%, rgba(20,20,20,0.92) 55%, rgba(16,16,16,0.94) 100%);
    --steel-edge: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.035);
    --steel-shadow: 6px 14px 30px -12px rgba(0,0,0,0.85), 2px 4px 10px -4px rgba(0,0,0,0.6);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    /* dvh tracks the real visible height on phones (address bar grows and shrinks). */
    height: 100vh;
    height: 100dvh;
    background-color: var(--ink-0);
    background-image:
        radial-gradient(120% 60% at 50% 115%, rgba(193,74,9,0.16) 0%, transparent 60%),
        radial-gradient(90% 50% at 50% -10%, rgba(255,255,255,0.05) 0%, transparent 60%);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Smoke ──
   smoke.js paints a canvas haze. Until it runs (or with no JavaScript),
   these two soft CSS layers give a still haze so the page is never flat. */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body::before {
    background:
        radial-gradient(ellipse 55% 30% at 18% 92%, rgba(224,100,42,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 45% 26% at 82% 88%, rgba(224,100,42,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 22% at 50% 8%, rgba(210,210,215,0.06) 0%, transparent 70%);
    filter: blur(30px);
}

body::after {
    background: var(--grain);
    opacity: 0.6;
}

.smoke {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.smoke.on { opacity: 1; }

/* Everything sits above the smoke */
header, main, footer, .call-bar {
    position: relative;
    z-index: 1;
}

:focus-visible {
    outline: 2px solid var(--teal-text);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000000;
    padding: 10px 16px;
    border-radius: var(--r-ctl);
    background: var(--orange-btn);
    color: #fff;
    font: 700 .95rem 'DM Sans', sans-serif;
    text-decoration: none;
    transition: top .2s ease;
}

.skip-link:focus { top: 12px; }