/* ===== Cream Texas Orange Theme — Cleaned ===== */
:root {
    --bg: #FAF7F2;            /* warm cream */
    --fg: #2c2c2c;            /* primary text */
    --muted: #6b5e52;         /* secondary text */
    --accent: #BF5700;        /* Texas Orange */
    --accent-2: #4B8F8C;      /* soft teal */
    --card: #ffffff;
    --card-2: #f3ede6;
    --border: #e0d9cf;
    --shadow: 0 6px 18px rgba(0,0,0,.08);
    --radius: 14px;
    --radius-sm: 10px;
    --ring: 0 0 0 3px rgba(191,87,0,.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: Inter, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fg);
    background:
    radial-gradient(800px 400px at -10% -10%, rgba(191,87,0,.05), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(75,143,140,.05), transparent 60%),
    var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.container { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }

/* ===== Header / Nav ===== */
header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    backdrop-filter: blur(6px); /* not universal, but fine */
}
nav {
    max-width: 1080px; margin: 0 auto; padding: .85rem 1rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
}
nav a {
    color: var(--fg);
    font-weight: 600;
    padding: .35rem .6rem;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}
nav a.active,
nav a:hover {
    color: var(--accent);
    background: rgba(191,87,0,.10);
}

/* Robust logo sizing + alignment */
nav a.logo {
    padding: 0 !important;      /* remove nav link padding */
    margin-right: 10px;
    display: flex;
    align-items: center;
    line-height: 0;              /* trims extra inline gap */
}
header nav a.logo img {
    height: 40px;                /* tweak as needed */
    width: auto;
    border-radius: 8px;          /* smooth corners */
    display: block;
}

/* Reserve space for the scrollbar on every page */
html { scrollbar-gutter: stable both-edges; }

/* Fallback for browsers without scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

/* ===== Hero (with optional background video) ===== */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 6rem 1rem 3.5rem;   /* taller to showcase video */
    border-bottom: 1px solid var(--border);
    background:
    linear-gradient(180deg, rgba(191,87,0,.06), rgba(250,247,242,0) 70%),
    var(--bg);
}

/* Background video fills area, stays centered, slightly faded */
.hero-video-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(2px) saturate(1.05);
    opacity: .32;
    transform: scale(1.02);
    z-index: 0;
}

/* Optional soft animated rings above video, below text */
.rings, .rings::before, .rings::after {
    position: absolute; inset: 0; pointer-events: none;
}
.rings {
    --size: 1200px;
    background:
    radial-gradient(closest-side, rgba(191,87,0,.12), transparent 60%) 10% -10% / var(--size) var(--size) no-repeat,
    radial-gradient(closest-side, rgba(75,143,140,.10), transparent 60%) 90% -20% / var(--size) var(--size) no-repeat;
    filter: blur(8px);
    z-index: 1;
}
.rings::before {
    content: "";
    --g: conic-gradient(from 0deg, rgba(191,87,0,.25), rgba(191,87,0,0) 40%, rgba(75,143,140,.25), rgba(75,143,140,0) 70%, transparent 100%);
    background: var(--g);
    mix-blend-mode: multiply; transform: translateY(-35%) scale(1.2);
    animation: spin 22s linear infinite;
}
.rings::after {
    content: "";
    --g2: conic-gradient(from 90deg, rgba(191,87,0,.18), rgba(191,87,0,0) 50%, rgba(75,143,140,.2), rgba(75,143,140,0) 85%, transparent 100%);
    background: var(--g2);
    mix-blend-mode: multiply; transform: translateY(-35%) scale(0.9);
    animation: spinReverse 28s linear infinite;
}
@keyframes spin { to { transform: translateY(-35%) scale(1.2) rotate(360deg); } }
@keyframes spinReverse { to { transform: translateY(-35%) scale(0.9) rotate(-360deg); } }

/* Text layer sits above video+rings */
.hero .container { position: relative; z-index: 2; }
.hero h1 {
    margin: 0 0 .6rem;
    color: #1a1a1a;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    letter-spacing: .2px;
}
.eyebrow {
    display: inline-block;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--muted);
    background: rgba(255,255,255,.65);
    border: 1px solid var(--border);
    padding: .25rem .5rem;
    border-radius: 999px;
    margin-bottom: .75rem;
    backdrop-filter: blur(8px);
}
.chips { margin: 1rem auto 0; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* NEW: chip (used in the hero) */
.chip {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.65);
    border: 1px solid var(--border);
    padding: .45rem .7rem;
    border-radius: 999px;
    font-size: .88rem;
    box-shadow: var(--shadow);
}

.cta-row { margin-top: 1rem; display: inline-flex; gap: .6rem; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: .85rem 1.1rem;
    border-radius: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(191,87,0,.22);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(191,87,0,.28); }
.btn:active { transform: translateY(1px); }
.btn.secondary {
    background: var(--accent-2);
    color: #fff;
    box-shadow: 0 4px 12px rgba(75,143,140,.22);
}
.btn.secondary:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(75,143,140,.30); }

/* ===== Filmstrip (optional section below hero) ===== */
.filmstrip { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.strip { display: flex; gap: 12px; padding: 12px; width: max-content; animation: slide 32s linear infinite; }
.strip img { height: 120px; width: auto; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.1); border: 1px solid var(--border); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) { .strip img { height: 90px; } }

/* ===== Footer ===== */
footer { background: #fff; border-top: 1px solid var(--border); }
small { color: #4b5563; }

/* ===== A11y / Reduced Motion ===== */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 600px) {
    nav { justify-content: center; }
    .hero { padding: 4rem 1rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .hero-video-bg { display: none; }
    .rings, .rings::before, .rings::after { animation: none !important; }
}