/* ============================================================
   Mint Green Creative — shared design system.

   Every page links this. Page-specific pieces (the homepage mark,
   the booking form, a tool's output panel) stay inline on that page;
   anything that should look the same everywhere lives here.

   Before this file each page carried its own copy of the tokens and
   the nav, which is how they drifted apart in the first place.
   ============================================================ */

:root {
    --bg: #141414;
    --bg-raise: #1b1b1b;
    --line: rgba(255, 255, 255, 0.10);
    --text: #faf8f4;
    --muted: #9a9a9a;
    --accent: #00ffce;
    --accent-dim: rgba(0, 255, 206, 0.14);
}

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

/* Both, per the mobile rule: html alone lets body scroll sideways. */
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Film grain. Fixed, non-interactive, very low so it reads as texture. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }

/* ============================================================
   Nav
   ============================================================ */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}
nav.scrolled { border-bottom-color: var(--line); background: rgba(20, 20, 20, 0.92); }

.nav-mark { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.rec-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    animation: rec 2.4s ease-in-out infinite;
}
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Mobile keeps the Book button and drops the rest. Most visitors are on a
   phone, so losing the one path to checkout to save space is a bad trade. */
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a:not(.book) { display: none; }
@media (min-width: 860px) { .nav-links a:not(.book) { display: inline; } }
.nav-links a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.book {
    color: var(--bg);
    background: var(--accent);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
}
.nav-links a.book:hover { color: var(--bg); filter: brightness(1.1); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-block;
    padding: 0.95rem 2rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #10241f; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: rgba(255,255,255,0.28); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ============================================================
   Section scaffolding — numbered like a shot list
   ============================================================ */
section.blk { padding: 6rem 0; border-bottom: 1px solid var(--line); }
.blk-head { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 2.6rem; }
.blk-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 1.5px;
    padding-top: 0.5rem;
}
.blk-head h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 4.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: 0.4px;
}

/* Page banner for interior pages that have no hero video or mark. */
.page-head { padding: 9rem 0 3.5rem; border-bottom: 1px solid var(--line); }
.page-head h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 6.5vw, 4.6rem);
    line-height: 0.96;
    letter-spacing: -0.4px;
    margin: 1rem 0 1.1rem;
    text-wrap: balance;
}
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head p.sub { color: var(--muted); font-size: 1.08rem; max-width: 52ch; }

.split { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 0.85fr; gap: 5rem; } }

.lede { font-size: 1.12rem; color: #cfcfcf; margin-bottom: 1.2rem; }
.body-copy p { color: var(--muted); margin-bottom: 1.1rem; max-width: 58ch; }
.body-copy p:last-child { margin-bottom: 0; }

/* ============================================================
   Forms
   ============================================================ */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 0.45rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    padding: 0.8rem 0.9rem;
    transition: border-color 0.25s ease;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent); }
.submit-btn {
    background: var(--accent); color: #10241f;
    border: 0; border-radius: 999px;
    padding: 0.95rem 2.2rem;
    font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.25s ease;
}
.submit-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.submit-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.form-error { color: #ff8b7a; font-size: 0.88rem; margin-top: 0.8rem; }
.form-success { border: 1px solid rgba(0,255,206,0.3); border-radius: 4px; padding: 2rem; text-align: center; }
.form-success-check { color: var(--accent); font-size: 2rem; line-height: 1; margin-bottom: 0.6rem; }
.form-success h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 500; margin-bottom: 0.5rem; }
.form-success p { color: var(--muted); }

/* ============================================================
   Footer
   ============================================================ */
footer { padding: 4rem 0 3rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
    .rec-dot { animation: none; }
    html { scroll-behavior: auto; }
}