/* ================================================================
   JOHNNY'S AUTO SPA + DETAIL — STYLESHEET
   ================================================================ */

/* ---- Tokens ---- */
:root {
    --navy-darkest: #060E28;
    --navy-dark:    #0A1640;
    --navy:         #0C1C55;
    --navy-mid:     #13246A;
    --navy-light:   #1B3080;
    --yellow:       #F5ED1A;
    --yellow-hover: #E8E000;
    --yellow-dim:   rgba(245, 237, 26, 0.14);
    --yellow-text:  #F5ED1A;

    --white:        #FFFFFF;
    --white-80:     rgba(255, 255, 255, 0.80);
    --white-55:     rgba(255, 255, 255, 0.55);
    --white-28:     rgba(255, 255, 255, 0.28);
    --white-12:     rgba(255, 255, 255, 0.12);

    --light-bg:     #F2F5FB;
    --light-card:   #FFFFFF;
    --light-border: #D2DAEE;
    --text-navy:    #0C1C55;
    --text-navy-2:  #3A4F8A;
    --text-navy-3:  #7080B0;

    --shadow:       0 8px 40px rgba(6, 14, 40, 0.65);
    --shadow-sm:    0 2px 12px rgba(6, 14, 40, 0.35);

    --radius:       4px;
    --transition:   210ms ease;

    --container:    1200px;
    --pad-x:        48px;
    --section-v:    96px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--white);
    background-color: var(--navy-darkest);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

::selection {
    background-color: var(--yellow);
    color: var(--navy-dark);
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--navy-darkest); }
::-webkit-scrollbar-thumb {
    background-color: var(--navy-light);
    border-radius: 8px;
    border: 3px solid var(--navy-darkest);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--navy-mid); }

/* Firefox */
html { scrollbar-color: var(--navy-light) var(--navy-darkest); scrollbar-width: thin; }

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
body { animation: pageFadeIn 480ms ease; }


/* ---- Typography ---- */
/* Inline emphasis link within a sentence of body copy — an intentional
   exception to the 44px touch-target rule (WCAG 2.5.8's own "inline in
   a block of text" exception): enlarging a link mid-sentence would
   break the paragraph's reading flow. */
.link-accent {
    color: var(--yellow);
    font-weight: 600;
}

.eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--yellow-text);
}

/* Eyebrow used as a standalone back-link (article page), not an inline
   emphasis — this is the whole tap target, so it gets the full 44px
   minimum via padding rather than .link-accent's inline exception. */
.eyebrow-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: -15px;
    color: var(--yellow-text);
    text-decoration: none;
}
.eyebrow-link:hover { color: var(--yellow); }

.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-top: 10px;
}

.section-sub {
    font-size: 16px;
    line-height: 1.72;
    color: var(--white-55);
    max-width: 520px;
    margin-top: 14px;
}

/* On light sections */
.on-light .eyebrow   { color: var(--navy); }
.on-light .section-title { color: var(--text-navy); }
.on-light .section-sub   { color: var(--text-navy-2); }

.body-text {
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--white-80);
}
.body-text + .body-text { margin-top: 16px; }
.on-light .body-text { color: var(--text-navy-2); }


/* ---- Layout ---- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
}

.section {
    padding-top: var(--section-v);
    padding-bottom: var(--section-v);
    background-color: var(--navy);
}

.section-light {
    background-color: var(--light-bg);
}

.section-dark {
    background-color: var(--navy-darkest);
}

.section-header {
    max-width: 640px;
    margin-bottom: 56px;
}


/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform 180ms ease, box-shadow 220ms ease;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

.btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn--yellow {
    background-color: var(--yellow);
    color: var(--navy-dark);
    border-color: var(--yellow);
    box-shadow: 0 0 0 rgba(245, 237, 26, 0);
}
.btn--yellow:hover {
    background-color: var(--yellow-hover);
    border-color: var(--yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -6px rgba(245, 237, 26, 0.45);
}
.btn--yellow:active { transform: translateY(0); box-shadow: 0 4px 14px -6px rgba(245, 237, 26, 0.4); }

.btn--outline-white {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white-28);
}
.btn--outline-white:hover {
    border-color: var(--white);
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.btn--outline-navy {
    background-color: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn--outline-navy:hover {
    background-color: var(--navy);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(12, 28, 85, 0.5);
}

.btn--navy {
    background-color: var(--navy);
    color: var(--yellow);
    border-color: var(--navy);
}
.btn--navy:hover {
    background-color: var(--navy-mid);
    border-color: var(--navy-mid);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(6, 14, 40, 0.4);
}

.btn--full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }


/* ---- Navigation ---- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background-color: var(--navy-darkest);
    border-bottom: 1px solid var(--white-12);
    transition: box-shadow 260ms ease, background-color 260ms ease, backdrop-filter 260ms ease;
}

.nav.scrolled {
    background-color: rgba(6, 14, 40, 0.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 4px 24px rgba(6, 14, 40, 0.8);
}

.nav-inner {
    display: flex;
    align-items: center;
    height: 68px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: auto;
}

.logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    transition: transform 220ms ease;
}
.nav-logo:hover .logo-img { transform: scale(1.04); }
.nav-logo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 2px; }

.logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}

.logo-primary {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--yellow);
    letter-spacing: 0.02em;
    line-height: 1;
}

.logo-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white-55);
    line-height: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: 28px;
}

.nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--white-55);
    transition: color var(--transition);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.nav-link:hover,
.nav-link.active { color: var(--white); }
.nav-link:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 4px;
    border-radius: 2px;
}

.nav-link.active {
    position: relative;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0; right: 0;
    height: 2px;
    background-color: var(--yellow);
    border-radius: 2px;
}

.nav-cta {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 13px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
}
.nav-toggle span {
    display: block; width: 22px; height: 1.5px;
    background-color: var(--white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
    display: none;
    position: fixed;
    top: 68px; left: 0; right: 0;
    z-index: 890;
    background-color: var(--navy-darkest);
    border-bottom: 1px solid var(--white-12);
    padding: 8px var(--pad-x) 24px;
    flex-direction: column;
    box-shadow: var(--shadow);
}
.nav-mobile.open { display: flex; }
.nav-mobile .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--white-12);
    font-size: 16px;
    color: var(--white);
}
.nav-mobile .nav-link.active { color: var(--yellow); }
.nav-mobile .btn { margin-top: 20px; justify-content: center; }


/* ---- Page Hero (inner pages) ---- */
.page-hero {
    position: relative;
    padding-top: 136px;
    padding-bottom: 72px;
    background-color: var(--navy-dark);
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--navy-dark) 0%, transparent 50%, var(--navy-dark) 100%);
}

.page-hero-body {
    position: relative;
    z-index: 1;
}

.page-hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(52px, 8vw, 96px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-top: 12px;
}


/* ---- Home Hero ---- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--navy-dark);
}

/* Holds the still image and, when there is one, the video. It is
   taller than the hero at both ends so the parallax drift can never
   uncover an edge; .hero has overflow:hidden, so the slack is clipped.
   js/content.js writes translate3d() here on scroll. */
.hero-media {
    position: absolute;
    inset: -70px 0;
    z-index: 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--hero-focus, center);
    z-index: 0;
    animation: heroKenBurns 22s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

/* The slow zoom is for a still photo. Paused rather than removed once
   video takes over: the poster is still half-visible through the
   900ms cross-fade, and cancelling an animation snaps the transform
   back to its start, which reads as a jolt. Pausing freezes it exactly
   where it is, and it picks up again if the video later drops out. */
.hero.has-video .hero-bg { animation-play-state: paused; }

/* Switched off deliberately by the owner (Hero → slow zoom). */
.hero.no-motion .hero-bg { animation: none; }

/* Hero background image set via inline style on the element.
   Video sits above the still, and fades in over it — see the fade-in
   rule in the ADDITIONS section further down. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--hero-focus, center);
    z-index: 1;
    pointer-events: none;
}

/* Two layers: the angled wash that keeps the white headline readable
   over any footage, and a soft fade into the section below so a video
   hero doesn't end on a hard horizontal line.
   The --ov-* values are what the "Darkening" setting changes. */
.hero-overlay {
    --ov-1: 0.88;
    --ov-2: 0.60;
    --ov-3: 0.30;
    --ov-foot: 0.52;
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            105deg,
            rgba(6, 14, 40, var(--ov-1)) 0%,
            rgba(6, 14, 40, var(--ov-2)) 55%,
            rgba(12, 28, 85, var(--ov-3)) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(6, 14, 40, 0) 62%,
            rgba(6, 14, 40, var(--ov-foot)) 100%
        );
}

.hero-overlay--light { --ov-1: 0.74; --ov-2: 0.42; --ov-3: 0.16; --ov-foot: 0.40; }
.hero-overlay--heavy { --ov-1: 0.94; --ov-2: 0.78; --ov-3: 0.52; --ov-foot: 0.62; }

.hero-body {
    position: relative;
    z-index: 2;
    padding-top: 110px;
    padding-bottom: 80px;
    max-width: 720px;
}

.hero-headline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(80px, 11vw, 148px);
    font-weight: 800;
    line-height: 0.91;
    letter-spacing: -0.03em;
    color: var(--white);
    text-wrap: balance;
    margin-top: 14px;
}

.hero-sub {
    font-size: 17px;
    line-height: 1.7;
    color: var(--white-80);
    max-width: 480px;
    margin-top: 24px;
    /* The shipped hero footage has pale lavender and yellow passages; a
       soft shadow keeps the smaller body copy crisp over them without
       visibly changing it over darker frames or the still photo. */
    text-shadow: 0 1px 12px rgba(4, 8, 26, 0.55), 0 1px 2px rgba(4, 8, 26, 0.45);
}

.hero-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hero-scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--yellow), transparent);
    animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    35%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
    80%  { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
    100% { opacity: 0; }
}


/* ---- Highlight Bar ---- */
.highlight-bar {
    background-color: var(--yellow);
}
.highlight-inner {
    display: flex;
    align-items: stretch;
    min-height: 78px;
}
.highlight-item {
    flex: 1;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
}
.highlight-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1;
    letter-spacing: -0.01em;
}
.highlight-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(10, 22, 64, 0.65);
    line-height: 1;
}
.highlight-rule {
    width: 1px;
    background-color: rgba(10, 22, 64, 0.18);
    flex-shrink: 0;
    align-self: stretch;
}


/* ---- Vehicle Showcase ---- */
.showcase {
    position: relative;
    background-color: var(--navy-darkest);
    overflow: hidden;
    padding: 120px 0;
}

.showcase-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245, 237, 26, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 237, 26, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 62% 50%, black 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 65% 65% at 62% 50%, black 0%, transparent 78%);
}

.showcase-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 24px;
    align-items: center;
}

.showcase-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(40px, 5vw, 62px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--white);
    text-wrap: balance;
    margin-top: 10px;
}
.showcase-title .accent { color: var(--yellow); }

.showcase-sub {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--white-55);
    max-width: 42ch;
    margin-top: 20px;
}

.showcase-text .btn { margin-top: 30px; }

.showcase-stage {
    position: relative;
    aspect-ratio: 16 / 10.5;
    perspective: 1400px;
}

.showcase-glow {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 92%;
    height: 74%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 50% 50% at center, rgba(245, 237, 26, 0.24) 0%, rgba(245, 237, 26, 0.07) 45%, transparent 75%);
    filter: blur(4px);
    animation: showcaseGlowPulse 5s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
}
@keyframes showcaseGlowPulse {
    0%, 100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.showcase-shadow {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 58%;
    height: 10%;
    transform: translateX(-50%) scaleX(0.25);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 80%);
    filter: blur(3px);
    opacity: 0;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 480ms, opacity 700ms ease 480ms;
    will-change: transform;
    z-index: 1;
}

.showcase-car-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.showcase-car-float {
    position: relative;
    width: 100%;
    height: 100%;
    animation: showcaseFloat 6.5s ease-in-out infinite;
    animation-delay: 1.4s;
    will-change: transform;
}
@keyframes showcaseFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.showcase-car {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 66% 76% at 50% 45%, black 58%, transparent 92%);
    mask-image: radial-gradient(ellipse 66% 76% at 50% 45%, black 58%, transparent 92%);
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4)) blur(18px);
    opacity: 0;
    transform: translateX(-58%) scale(0.94) skewX(-7deg);
    transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1), filter 1150ms ease, opacity 650ms ease;
}

.showcase-speedlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.showcase-speedlines span {
    position: absolute;
    left: -25%;
    width: 55%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(245, 237, 26, 0.75), transparent);
    opacity: 0;
    transform: scaleX(0.2);
    transform-origin: left center;
    border-radius: 2px;
}
.showcase-speedlines span:nth-child(1) { top: 28%; }
.showcase-speedlines span:nth-child(2) { top: 42%; }
.showcase-speedlines span:nth-child(3) { top: 58%; }
.showcase-speedlines span:nth-child(4) { top: 72%; }

.showcase-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 52%, transparent 60%);
    mix-blend-mode: overlay;
    transform: translateX(-130%);
    will-change: transform;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 66% 76% at 50% 45%, black 58%, transparent 92%);
    mask-image: radial-gradient(ellipse 66% 76% at 50% 45%, black 58%, transparent 92%);
}

.showcase-tag {
    position: absolute;
    left: 6%;
    bottom: 4%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: rgba(6, 14, 40, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(245, 237, 26, 0.3);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease 1400ms, transform 600ms ease 1400ms;
}
.showcase-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--yellow);
    flex-shrink: 0;
    box-shadow: 0 0 8px 1px rgba(245, 237, 26, 0.7);
}
.showcase-tag span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--white-80);
    white-space: nowrap;
}

/* Triggered state */
.showcase-stage.visible .showcase-car {
    opacity: 1;
    transform: translateX(0) scale(1) skewX(0deg);
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4)) blur(0);
}
.showcase-stage.visible .showcase-shadow {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    animation: showcaseShadowBreathe 6.5s ease-in-out infinite;
    animation-delay: 1.4s;
}
@keyframes showcaseShadowBreathe {
    0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.95; }
    50%      { transform: translateX(-50%) scaleX(0.86); opacity: 0.55; }
}
.showcase-stage.visible .showcase-tag {
    opacity: 1;
    transform: translateY(0);
}
.showcase-stage.visible .showcase-speedlines span {
    animation: speedLineFlash 650ms ease-out forwards;
}
.showcase-stage.visible .showcase-speedlines span:nth-child(1) { animation-delay: 40ms; }
.showcase-stage.visible .showcase-speedlines span:nth-child(2) { animation-delay: 130ms; }
.showcase-stage.visible .showcase-speedlines span:nth-child(3) { animation-delay: 80ms; }
.showcase-stage.visible .showcase-speedlines span:nth-child(4) { animation-delay: 190ms; }

@keyframes speedLineFlash {
    0%   { opacity: 0; transform: scaleX(0.2) translateX(0); }
    35%  { opacity: 1; transform: scaleX(1) translateX(10%); }
    100% { opacity: 0; transform: scaleX(1) translateX(65%); }
}

.showcase-stage.visible .showcase-shine {
    animation: shineSweepLoop 4.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    animation-delay: 1000ms;
}
@keyframes shineSweepLoop {
    0%   { transform: translateX(-130%); }
    30%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}


/* ---- Service Cards (home preview) ---- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: var(--white-12);
    border: 1px solid var(--white-12);
    overflow: hidden;
}

.service-card {
    background-color: var(--navy);
    padding: 40px 30px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color var(--transition), transform 260ms ease, box-shadow 260ms ease;
    overflow: hidden;
    z-index: 0;
}
.service-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-color: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
}
.service-card:hover {
    background-color: var(--navy-mid);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
    z-index: 1;
}
.service-card:hover::after { transform: scaleX(1); }

.service-icon {
    color: var(--yellow);
    margin-bottom: 22px;
    flex-shrink: 0;
    transition: transform 300ms ease;
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(-4deg); }
.service-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    line-height: 1.1;
}
.service-desc {
    font-size: 14.5px;
    line-height: 1.66;
    color: var(--white-55);
    flex: 1;
}
.service-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    gap: 6px;
    margin-top: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow-text);
    text-decoration: none;
    transition: gap var(--transition);
}
/* The visible label is only ~22px tall; this expands the tap target
   to 44px without touching the visual size or position. */
.service-link::before {
    content: '';
    position: absolute;
    inset: -12px -8px;
}
.service-link::after { content: '\2192'; font-size: 14px; transition: transform var(--transition); }
.service-card:hover .service-link { gap: 10px; }
.service-card:hover .service-link::after { transform: translateX(2px); }

.services-grid .service-card:nth-child(1) { transition-delay: 0ms; }
.services-grid .service-card:nth-child(2) { transition-delay: 60ms; }
.services-grid .service-card:nth-child(3) { transition-delay: 120ms; }
.services-grid .service-card:nth-child(4) { transition-delay: 180ms; }


/* ---- Services Page Detailed ---- */
.service-detail {
    padding-top: var(--section-v);
    padding-bottom: var(--section-v);
}
.service-detail:nth-child(even) {
    background-color: var(--light-bg);
}
.service-detail:nth-child(odd) {
    background-color: var(--light-card);
}
.service-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.service-detail:nth-child(even) .service-detail-layout {
    direction: rtl;
}
.service-detail:nth-child(even) .service-detail-content {
    direction: ltr;
}
.service-detail-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--navy-mid);
    box-shadow: 0 24px 48px -20px rgba(6, 14, 40, 0.35);
    transition: box-shadow 300ms ease;
}
.service-detail-img:hover {
    box-shadow: 0 28px 56px -18px rgba(6, 14, 40, 0.45);
}
.service-detail-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.service-detail-img:hover img { transform: scale(1.03); }

.service-detail-content {}
.service-detail-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 72px;
    font-weight: 800;
    color: var(--light-border);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: -12px;
}
.service-detail-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--text-navy);
    line-height: 1.05;
    margin-top: 6px;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.service-detail-desc {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-navy-2);
    max-width: 50ch;
}
.service-detail-desc + .service-detail-desc { margin-top: 14px; }


/* ---- About / Feature Layout ---- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.feature-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--navy-mid);
    box-shadow: 0 24px 48px -20px rgba(6, 14, 40, 0.35);
}
.feature-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.feature-img:hover img { transform: scale(1.03); }

/* Facility photos strip (About) — full-bleed 3-up with the same
   hover-zoom treatment as .feature-img, kept in CSS instead of
   inline onmouseover/onmouseout so it survives a strict CSP. */
.facility-strip-section { padding-top: 0; padding-bottom: 0; }
.facility-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.facility-photo { overflow: hidden; aspect-ratio: 16 / 9; }
.facility-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.facility-photo:hover img { transform: scale(1.04); }

@media (max-width: 640px) {
    .facility-strip { grid-template-columns: 1fr; }
}

.stat-row {
    display: flex;
    align-items: stretch;
    background-color: var(--yellow);
    border: none;
}
.stat-block {
    flex: 1;
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-rule {
    width: 1px;
    background-color: rgba(10, 22, 64, 0.18);
    flex-shrink: 0;
}
.stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: -0.02em;
    line-height: 1;
}
.stat-unit { font-size: 18px; font-weight: 700; margin-left: 1px; }
.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(10, 22, 64, 0.6);
}

.owner-block {
    margin-top: 32px;
    border-left: 3px solid var(--yellow);
    padding: 20px 24px;
    background-color: rgba(12, 28, 85, 0.06);
}
.owner-block.on-dark {
    background-color: var(--white-12);
    border-left-color: var(--yellow);
}
.owner-quote {
    font-size: 15.5px;
    line-height: 1.68;
    font-style: italic;
}
.owner-credit {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.on-dark .owner-quote { color: var(--white-80); }
.on-dark .owner-credit { color: var(--yellow); }
.on-light .owner-quote { color: var(--text-navy-2); }
.on-light .owner-credit { color: var(--navy); }

.award-badge {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background-color: var(--yellow-dim);
    border: 1px solid rgba(245, 237, 26, 0.3);
    margin-top: 32px;
}
.award-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.award-text {}
.award-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--yellow);
    line-height: 1.1;
}
.award-desc { font-size: 13px; color: var(--white-55); margin-top: 4px; }


/* ---- Gallery Grid ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.gallery-item {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--navy-mid);
    position: relative;
    cursor: pointer;
    transition: transform 260ms ease, box-shadow 260ms ease;
    z-index: 0;
}
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 14, 40, 0.5);
    opacity: 0;
    transition: opacity var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay svg { color: var(--white); }

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6, 14, 40, 0.96);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
    animation: lightboxIn 260ms ease;
}
@keyframes lightboxIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.lightbox-close {
    position: absolute;
    top: 8px; right: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--white);
    cursor: pointer;
    background: none; border: none;
    font-family: inherit;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition), transform 220ms ease;
}
.lightbox-close:hover { opacity: 1; transform: rotate(90deg); }
.lightbox-close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; opacity: 1; }


/* ---- Testimonials ---- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--white-12);
    border: 1px solid var(--white-12);
    overflow: hidden;
}
.testimonial {
    background-color: var(--navy-mid);
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: background-color var(--transition), transform 260ms ease, box-shadow 260ms ease;
    position: relative;
    z-index: 0;
}
.testimonial:hover {
    background-color: var(--navy-light);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
    z-index: 1;
}
.stars {
    font-size: 15px;
    color: var(--yellow);
    letter-spacing: 2px;
}
.testimonial-quote {
    font-size: 15px;
    line-height: 1.72;
    color: var(--white-80);
    font-style: italic;
    flex: 1;
}
.testimonial-footer {
    padding-top: 16px;
    border-top: 1px solid var(--white-12);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.author-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}
.author-sep { color: var(--white-28); font-size: 13px; }
.author-note { font-size: 12.5px; color: var(--white-55); }


/* ---- CTA Band ---- */
.cta-band {
    background-color: var(--yellow);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(10, 22, 64, 0.035) 0px,
        rgba(10, 22, 64, 0.035) 1px,
        transparent 1px,
        transparent 14px
    );
    padding: 72px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band .eyebrow { color: var(--navy); opacity: 0.6; }
.cta-band-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 10px;
    text-wrap: balance;
}
.cta-band-sub {
    font-size: 16px;
    color: rgba(7, 18, 47, 0.65);
    margin-top: 14px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.cta-band .btn { margin-top: 32px; }


/* ---- Quick Actions (Contact Hub) ---- */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.quick-action {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 30px;
    background-color: var(--navy-mid);
    border: 1px solid var(--white-12);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color var(--transition), transform 260ms ease, box-shadow 260ms ease, border-color var(--transition);
}
.quick-action:hover {
    background-color: var(--navy-light);
    border-color: var(--yellow);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
}
.quick-action:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}
.quick-action-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--yellow-dim);
    color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition), transform 260ms ease;
}
.quick-action:hover .quick-action-icon {
    background-color: var(--yellow);
    color: var(--navy-dark);
    transform: scale(1.06);
}
.quick-action-text { flex: 1; }
.quick-action-text h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.quick-action-text p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--white-55);
}
.quick-action-arrow {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--yellow);
    transition: transform 220ms ease;
}
.quick-action:hover .quick-action-arrow { transform: translateX(4px); }

.quick-actions-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--white-28);
}


/* ---- Contact ---- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: start;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}
.form-field:last-of-type { margin-bottom: 0; }
.form-row .form-field { margin-bottom: 0; }

.form-field label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-55);
}

.form-field input,
.form-field select,
.form-field textarea {
    background-color: rgba(255,255,255,0.06);
    border: 1px solid var(--white-28);
    border-radius: var(--radius);
    padding: 13px 14px;
    color: var(--white);
    font-size: 16px;   /* iOS Safari zooms the page on focus below 16px */
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
    resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--white-28); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px var(--yellow-dim);
}
.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.form-field select option { background-color: var(--navy); }

.contact-form .btn--yellow { margin-top: 24px; }
.form-note { margin-top: 10px; font-size: 12px; color: var(--white-28); text-align: center; }

/* Required disclosure of how a submission is used — kept separate from
   .form-note (which main.js overwrites with live submit status) so a
   "Sending…"/"Message Sent" update can never clobber this notice. */
.form-legal-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--white-55);
    text-align: center;
}
.form-legal-note a {
    color: var(--yellow-text);
    text-decoration: underline;
    text-decoration-color: rgba(245, 237, 26, 0.5);
}
.form-legal-note a:hover { text-decoration-color: currentColor; }
.form-legal-note a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: 2px;
}

.contact-aside {
    display: flex;
    flex-direction: column;
}
.info-block {
    padding: 22px 0;
    border-bottom: 1px solid var(--white-12);
}
.info-block:first-child { padding-top: 0; }
.info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 8px;
}
.info-value {
    font-size: 15px;
    line-height: 1.65;
    color: var(--white-80);
}
.info-value a {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    color: var(--white-80);
    transition: color var(--transition);
}
.info-value a:hover { color: var(--yellow); }
.info-directions {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--white-28);
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-top: 4px;
}
/* The old <thead> ("Day" / "Hours") is gone — hours tables now use
   <th scope="row"> for the day label. Styling for those lives in the
   HOURS section further down this file. */
.hours-table td {
    padding: 4px 0;
    color: var(--white-80);
    vertical-align: top;
}
.hours-closed { color: var(--white-28); }


/* ---- Legal Pages ---- */
.legal-updated {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-navy-3);
    margin-bottom: 40px;
}

.legal-content {
    max-width: 720px;
}

.legal-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-navy);
    letter-spacing: -0.005em;
    margin-top: 48px;
    margin-bottom: 14px;
}
.legal-content > h2:first-child { margin-top: 0; }

.legal-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-navy);
    margin-top: 26px;
    margin-bottom: 8px;
}

.legal-content p {
    font-size: 15px;
    line-height: 1.78;
    color: var(--text-navy-2);
}
.legal-content p + p { margin-top: 14px; }

.legal-content ul,
.legal-content ol {
    margin-top: 12px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.legal-content li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-navy-2);
}

.legal-content a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--light-border);
    text-underline-offset: 2px;
}
.legal-content a:hover { text-decoration-color: var(--navy); }

.legal-content strong { color: var(--text-navy); }

.legal-toc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 48px;
    padding: 24px 28px;
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
    max-width: 720px;
}
.legal-toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 6px;
}
.legal-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 0;
    font-size: 14px;
    color: var(--text-navy-2);
    transition: color var(--transition);
}
.legal-toc a:hover { color: var(--navy); }


/* ---- Footer ---- */
.footer {
    background-color: var(--navy-darkest);
    border-top: 1px solid var(--white-12);
}
.footer-inner {
    padding-top: 56px;
    padding-bottom: 40px;
}
.footer-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--white-12);
    margin-bottom: 24px;
}
.footer-tagline {
    font-size: 14px;
    color: var(--white-55);
    padding-top: 6px;
    line-height: 1.6;
}
.footer-links-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    justify-content: flex-end;
    padding-top: 0;
}
.footer-nav a {
    display: inline-flex;
    align-items: center;
    padding: 12px 4px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--white-55);
    transition: color var(--transition);
}
.footer-nav a:hover { color: var(--yellow); }

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--white-12);
    color: var(--white-55);
    transition: color var(--transition), border-color var(--transition),
                background-color var(--transition), transform 220ms ease;
}
.footer-social a:hover {
    color: var(--navy-dark);
    background-color: var(--yellow);
    border-color: var(--yellow);
    transform: translateY(-3px);
}
.footer-social a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-legal {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-copy {
    font-size: 12.5px;
    color: var(--white-28);
}
.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.footer-legal-links a {
    display: inline-flex;
    align-items: center;
    padding: 12px 4px;
    font-size: 12.5px;
    color: var(--white-28);
    transition: color var(--transition);
}
.footer-legal-links a:hover { color: var(--yellow); }
.footer-legal-links .sep { color: var(--white-12); }
.footer-phone {
    font-size: 13px;
    font-weight: 600;
    color: var(--yellow);
    letter-spacing: 0.02em;
}
.footer-phone a {
    display: inline-flex;
    align-items: center;
    padding: 12px 4px;
    color: inherit;
}


/* ---- Scroll Reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.visible { opacity: 1; transform: none; }


/* ---- Back to Top ---- */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 800;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--yellow);
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px -8px rgba(6, 14, 40, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 260ms ease, transform 260ms ease, visibility 260ms, background-color var(--transition);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background-color: var(--yellow-hover);
    transform: translateY(-3px);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}


/* ---- Responsive ---- */
@media (max-width: 1100px) {
    :root { --pad-x: 32px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .contact-layout { grid-template-columns: 1fr 300px; gap: 40px; }
}

@media (max-width: 900px) {
    :root { --section-v: 72px; --pad-x: 24px; }

    .nav-links, .nav-cta { display: none; }
    .nav-toggle { display: flex; }

    .hero-headline { font-size: clamp(70px, 14vw, 100px); }

    .services-grid { grid-template-columns: 1fr; }
    .service-detail-layout { grid-template-columns: 1fr; gap: 36px; }
    .service-detail:nth-child(even) .service-detail-layout { direction: ltr; }
    .two-col { grid-template-columns: 1fr; gap: 40px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr; }
    .showcase-inner { grid-template-columns: 1fr; gap: 48px; }
    .showcase-text { text-align: center; }
    .showcase-sub { margin-left: auto; margin-right: auto; }
    .showcase-stage { aspect-ratio: 16 / 9; }
    .footer-top { grid-template-columns: 1fr; gap: 20px; }
    .footer-nav { justify-content: flex-start; }
    .footer-links-col { align-items: flex-start; }
    .footer-social { justify-content: flex-start; }
}

@media (max-width: 640px) {
    :root { --section-v: 56px; --pad-x: 20px; }
    .hero-headline { font-size: clamp(60px, 16vw, 80px); }
    .hero-ctas { flex-direction: column; align-items: flex-start; }
    .hero-ctas .btn { width: 100%; }
    .highlight-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: auto; }
    .highlight-rule { display: none; }
    .highlight-item:nth-child(1), .highlight-item:nth-child(2) { border-bottom: 1px solid rgba(10,22,64,0.18); }
    .highlight-item:nth-child(odd) { border-right: 1px solid rgba(10,22,64,0.18); }
    .form-row { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .showcase { padding: 80px 0; }
    .showcase-stage { aspect-ratio: 4 / 3; }
    .showcase-tag span { font-size: 10.5px; }
}


/* ================================================================
   ADDITIONS — hero video, specials, news, article
   Everything below was added alongside the Firebase-backed admin
   panel. Tokens and spacing follow the same system as above.
   ================================================================ */

/* ---- Hero video fade-in ----
   content.js layers a <video class="hero-video"> over .hero-bg and
   adds .ready on the 'playing' event — not 'canplay' — so the still
   image cross-fades into moving frames rather than into a frozen one.
   A long, eased fade reads as a dissolve instead of a switch. */
.hero-video {
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.33, 0, 0.2, 1);
}
.hero-video.ready { opacity: 1; }

/* Hero motion is decoration. Anyone who has asked their system to
   calm things down gets the still photo, held perfectly still —
   content.js also declines to load the video at all. */
@media (prefers-reduced-motion: reduce) {
    .hero-bg   { animation: none; }
    .hero-media { transform: none !important; }
}

/* Partial-star support for admin-entered ratings below 5 */
.stars-empty { color: var(--white-28); }


/* ---- Current Specials ---- */
.section-specials {
    background-color: var(--navy-dark);
    background-image:
        radial-gradient(circle at 12% 0%, rgba(245, 237, 26, 0.07), transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(27, 48, 128, 0.55), transparent 46%);
}

.specials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.specials-grid:has(> :only-child) { max-width: 780px; margin: 0 auto; }

.special-card {
    display: flex;
    flex-direction: column;
    background-color: var(--navy);
    border: 1px solid var(--white-12);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    position: relative;
    transition: transform 280ms ease, box-shadow 280ms ease, border-color var(--transition);
}
.special-card:not(.is-static):hover {
    transform: translateY(-6px);
    border-color: rgba(245, 237, 26, 0.45);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.7);
}

.special-media {
    position: relative;
    overflow: hidden;
    background-color: var(--navy-darkest);
    line-height: 0;
}
.special-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 600ms ease;
}
.special-card:not(.is-static):hover .special-media img { transform: scale(1.04); }

.special-body { padding: 26px 28px 28px; }
.special-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--white);
}
.special-caption {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--white-55);
    margin-top: 10px;
}
.special-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow-text);
    transition: gap var(--transition);
}
.special-card:hover .special-link { gap: 11px; }


/* ---- Reviews: let the last row fill the width ----
   Overrides the fixed 3-column grid above so an admin can publish
   any number of reviews without leaving a hole in the last row. */
.testimonials-grid {
    grid-template-columns: repeat(6, 1fr);
}
.testimonials-grid > .testimonial { grid-column: span 2; }
.testimonials-grid > .testimonial:last-child:nth-child(3n + 1) { grid-column: span 6; }
.testimonials-grid > .testimonial:nth-last-child(2):nth-child(3n + 1),
.testimonials-grid > .testimonial:nth-last-child(2):nth-child(3n + 1) ~ .testimonial { grid-column: span 3; }


/* ---- News listing ---- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Loading / empty state for the news grid and article page. A bare
   line of text on a full-width dark section read as an unfinished
   page, so it gets its own small card with a quiet marker above it —
   deliberately static (no spinner) since this is also the "nothing
   to show" state, not only the transient loading one. */
.news-state {
    max-width: 360px;
    margin: 12px auto 8px;
    padding: 44px 32px;
    text-align: center;
    color: var(--white-55);
    font-size: 15px;
    line-height: 1.65;
    border: 1px dashed var(--white-12);
    border-radius: var(--radius);
}
.news-state::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 2px solid var(--yellow);
    opacity: 0.55;
}

.news-card {
    display: flex;
    flex-direction: column;
    background-color: var(--navy);
    border: 1px solid var(--white-12);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform 280ms ease, box-shadow 280ms ease, border-color var(--transition);
}
.news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 237, 26, 0.4);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.7);
}

/* First post spans two columns with the image beside the text */
.news-card--featured {
    grid-column: span 2;
    flex-direction: row;
}
.news-card--featured .news-card-media { width: 52%; flex-shrink: 0; }
.news-card--featured .news-card-body   { flex: 1; padding: 34px 34px 32px; }
.news-card--featured .news-card-title  { font-size: 30px; }

.news-card-media {
    position: relative;
    overflow: hidden;
    background-color: var(--navy-darkest);
    aspect-ratio: 16 / 10;
    line-height: 0;
}
.news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
}
.news-card:hover .news-card-media img { transform: scale(1.05); }

.news-card-media--empty {
    aspect-ratio: 16 / 6;
    background-image:
        linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-darkest) 100%),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(245, 237, 26, 0.05) 12px 24px);
}
.news-card--featured .news-card-media--empty { aspect-ratio: auto; }

.news-card-body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.news-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy-darkest);
    background-color: var(--yellow);
    padding: 4px 9px;
    border-radius: 2px;
}
.news-date {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white-55);
}

.news-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--white);
    text-wrap: balance;
}
.news-card-excerpt {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--white-55);
    margin-top: 11px;
    flex: 1;
}
.news-card-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow-text);
    transition: gap var(--transition);
}
.news-card:hover .news-card-more { gap: 11px; }


/* ---- Single article ---- */
.article-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.article-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.article-author {
    font-size: 12.5px;
    color: var(--white-55);
    font-style: italic;
}
.article-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(38px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--white);
    text-wrap: balance;
}
.article-lede {
    font-size: 18px;
    line-height: 1.68;
    color: var(--white-80);
    margin-top: 20px;
    padding-left: 18px;
    border-left: 2px solid var(--yellow);
}
.article-figure {
    margin: 36px 0;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}
.article-figure img { width: 100%; height: auto; display: block; }

.article-body { margin-top: 32px; }
.article-body p {
    font-size: 16px;
    line-height: 1.82;
    color: var(--white-80);
    margin-bottom: 22px;
}
.article-body p:last-child { margin-bottom: 0; }

.article-back { margin-top: 44px; display: inline-flex; }


/* ---- Responsive for the additions ---- */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-card--featured { grid-column: span 2; }
    .news-card--featured .news-card-title { font-size: 26px; }
}

@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .news-card--featured { grid-column: span 1; flex-direction: column; }
    .news-card--featured .news-card-media { width: 100%; aspect-ratio: 16 / 10; }
    .news-card--featured .news-card-body { padding: 24px 26px 26px; }
    .news-card--featured .news-card-title { font-size: 24px; }

    .specials-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Reviews collapse to one per row on phones */
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonials-grid > .testimonial,
    .testimonials-grid > .testimonial:last-child:nth-child(3n + 1),
    .testimonials-grid > .testimonial:nth-last-child(2):nth-child(3n + 1),
    .testimonials-grid > .testimonial:nth-last-child(2):nth-child(3n + 1) ~ .testimonial {
        grid-column: span 1;
    }

    .article-lede { font-size: 16.5px; }
    .article-body p { font-size: 15.5px; }
}

@media (max-width: 560px) {
    .special-body { padding: 22px 22px 24px; }
    .special-title { font-size: 23px; }
}


/* ================================================================
   HERO PROMO
   An admin-uploaded image laid over the hero background/video.
   Managed from the admin panel (Specials -> Hero Promo).
   ================================================================ */

/* Full-bleed overlay that mirrors .container's width so the image
   lines up with the right edge of the hero text block. pointer-events
   is off on the wrapper so it never blocks the hero buttons. */
.hero-promo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    padding: 110px var(--pad-x) 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.hero-promo-inner {
    pointer-events: auto;
    display: block;
    line-height: 0;
    animation: heroPromoIn 700ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
    transition: transform 320ms ease, filter 320ms ease;
}
a.hero-promo-inner:hover {
    transform: translateY(-5px) scale(1.02);
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}

.hero-promo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
    /* A tall portrait graphic would otherwise run past the hero. The
       height cap reins it in and object-fit keeps it undistorted. */
    max-height: 68svh;
    object-fit: contain;
}

@keyframes heroPromoIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* Size options offered in the admin panel — the size the owner asked
   for. The real width is whichever is smaller: this, or --promo-max.

   --promo-max is set by js/content.js from the measured right edge of
   the actual hero text, so the promo physically cannot reach the text
   no matter how the headline is reworded, how the viewport is sized,
   or whether the web font loaded. Without JS the fallback caps still
   apply, so it degrades safely. */
.hero-promo--sm { --promo-size: min(210px, 18vw); }
.hero-promo--md { --promo-size: min(300px, 24vw); }
.hero-promo--lg { --promo-size: min(360px, 28vw); }

.hero-promo-inner {
    width: min(var(--promo-size, min(300px, 24vw)), var(--promo-max, 100%));
}

@media (prefers-reduced-motion: reduce) {
    .hero-promo-inner { animation: none; }
    a.hero-promo-inner:hover { transform: none; }
}

/* ---- Tablet: pull it in a little ----
   Sets --promo-size, never width directly — writing width here would
   be more specific than the .hero-promo-inner rule above and would
   quietly defeat the --promo-max cap. */
@media (max-width: 1024px) {
    .hero-promo--sm { --promo-size: min(180px, 20vw); }
    .hero-promo--md { --promo-size: min(240px, 26vw); }
    .hero-promo--lg { --promo-size: min(290px, 30vw); }
}

/* ---- Phones ----
   Beside the headline there is no room, so the hero stacks and the
   promo drops underneath the buttons instead of overlapping them. */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        justify-content: center;
    }
    .hero-body {
        padding-bottom: 26px;
        width: 100%;
    }
    .hero-promo {
        position: static;
        inset: auto;
        max-width: none;
        width: 100%;
        padding: 0 var(--pad-x) 46px;
        justify-content: flex-start;
    }
    /* Size by height on phones so a tall graphic can't push the hero
       content off-screen; wide graphics are still capped by width.
       The promo is below the text here, so --promo-max doesn't apply. */
    .hero-promo-inner {
        width: auto;
    }
    .hero-promo img {
        max-height: 26svh;
        max-width: min(280px, 62vw);
        width: auto;
    }
}

@media (max-width: 560px) {
    .hero-promo img {
        max-height: 24svh;
        max-width: min(240px, 66vw);
    }
}


/* ================================================================
   HOURS
   Homepage section plus the shared table used on the contact page.
   ================================================================ */

.section-hours {
    background-color: var(--navy-dark);
    background-image:
        radial-gradient(circle at 85% 10%, rgba(245, 237, 26, 0.06), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(27, 48, 128, 0.5), transparent 50%);
}

.hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

.hours-card {
    background-color: var(--navy);
    border: 1px solid var(--white-12);
    border-radius: var(--radius);
    padding: 30px 32px 26px;
}

.hours-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
    line-height: 1;
}

/* The headline answer: one line that says whether you can come now
   and what happens next. The dot is decorative — meaning is carried
   by the words, so this reads fine in greyscale or to a screen
   reader, never by colour alone. */
.hours-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 9px;
    margin-top: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--white-12);
    font-size: 16px;
}
.hours-status .hours-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
    align-self: center;
}
.hours-word { font-weight: 700; letter-spacing: -0.01em; }
.hours-detail {
    color: var(--white-55);
    font-size: 15px;
    font-weight: 400;
}
.hours-sep { color: var(--white-28); }

.hours-status.is-open { color: #63DDA0; }
.hours-status.is-open .hours-dot { animation: hoursPulse 2.2s ease-in-out infinite; }
.hours-status.is-shut { color: var(--white-80); }
.hours-status.is-shut .hours-dot { background-color: var(--white-28); }

/* Today's hours are whatever the owner typed — "By appointment",
   "Weather permitting". We can't say open or closed, so the dot goes
   yellow to mean "read the words" rather than green or grey, both of
   which would be a claim we can't stand behind. */
.hours-status.is-info { color: var(--white-80); }
.hours-status.is-info .hours-dot { background-color: var(--yellow); }

@keyframes hoursPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(99, 221, 160, 0.5); }
    50%      { opacity: 0.75; box-shadow: 0 0 0 5px rgba(99, 221, 160, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hours-status.is-open .hours-dot { animation: none; }
}

.hours-card .hours-table { margin-top: 6px; }

.hours-note {
    margin-top: 22px;
    padding: 14px 18px;
    border-left: 3px solid var(--yellow);
    background-color: rgba(245, 237, 26, 0.07);
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    color: var(--white-80);
}

.hours-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 34px;
}

/* ---- The table itself (also used on the contact page) ---- */
.hours-table { width: 100%; border-collapse: collapse; }

.hours-table th[scope="row"] {
    text-align: left;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--white-80);
    padding: 11px 0;
    border-bottom: 1px solid var(--white-12);
}
.hours-table td {
    text-align: right;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    color: var(--white);
    padding: 11px 0;
    border-bottom: 1px solid var(--white-12);
    white-space: nowrap;
}
.hours-table tr:last-child th[scope="row"],
.hours-table tr:last-child td { border-bottom: 0; }

.hours-table .hours-closed { color: var(--white-55); }

/* Today's row is nudged forward, but only as a scanning aid — the
   status line above already states the situation in words. */
.hours-table tr.is-today th[scope="row"],
.hours-table tr.is-today td { color: var(--yellow-text); font-weight: 600; }

/* On the light contact-page aside the palette flips */
.contact-aside .hours-table th[scope="row"] { color: var(--white-80); }
.contact-aside .hours-table td { color: var(--white); }


/* ---- Responsive ---- */
@media (max-width: 860px) {
    .hours-grid { grid-template-columns: 1fr; gap: 18px; }
    .hours-card { padding: 26px 24px 22px; }
    .hours-card-title { font-size: 24px; }
}

@media (max-width: 560px) {
    .hours-card-title { font-size: 26px; }
    .hours-status { font-size: 15px; }
    .hours-detail { font-size: 14px; }
    .hours-table th[scope="row"], .hours-table td { font-size: 14px; padding: 10px 0; }
    .hours-actions { flex-direction: column; }
    .hours-actions .btn { width: 100%; }
}