/* ========================================
   OAkley Gas Station & Convenience Store
   Premium Dark-Mode Design System
   ======================================== */

/* ========= CUSTOM PROPERTIES ========= */
:root {
  /* Colors - Dark Mode */
  --bg-primary: #0d0f14;
  --bg-secondary: #141821;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-glass: rgba(255, 255, 255, 0.06);
  --bg-glass-hover: rgba(255, 255, 255, 0.1);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-hover: rgba(255, 255, 255, 0.15);

  /* Accent Colors */
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark: #d97706;
  --accent-glow: rgba(245, 158, 11, 0.25);
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-on-accent: #0d0f14;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;

  /* Borders & Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-Index Scale */
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-cta-bar: 500;
}

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent);
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ========= TYPOGRAPHY ========= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
}

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
}

/* ========= LAYOUT ========= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-3xl) 0;
}

.section--lg {
  padding: var(--space-4xl) 0;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.flex-wrap {
  flex-wrap: wrap;
}

.text-center {
  text-align: center;
}

/* ========= GLASSMORPHISM COMPONENTS ========= */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
}

@supports not (backdrop-filter: blur(16px)) {
  .glass {
    background: rgba(20, 24, 33, 0.95);
  }
}

.glass:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-glass-hover);
}

.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

@supports not (backdrop-filter: blur(16px)) {
  .glass-card {
    background: rgba(20, 24, 33, 0.95);
  }
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-glass-hover);
}

/* ========= BUTTONS ========= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background: var(--accent-light);
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--accent-glow);
}

.btn-secondary {
  background: var(--bg-glass);
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

.btn-secondary:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-glass-hover);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--text-on-accent);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-full);
}

/* ========= NAVIGATION ========= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  /* No padding-top: the utility bar is the first row inside the nav and sits
     flush against the top edge of the viewport. Vertical rhythm for the logo
     row lives on .nav-inner instead. */
  padding: 0 0 var(--space-sm);
  transition: background var(--transition-base), box-shadow var(--transition-base), padding var(--transition-base);
}

.nav.scrolled {
  background: rgba(13, 15, 20, 0.92);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  box-shadow: 0 1px 0 var(--border-glass), var(--shadow-md);
  padding: 0 0 var(--space-xs);
}

/* ---- Global utility bar --------------------------------------------------
   A slim strip at the very top of the fixed nav, on every page at every width.
   It answers the three things a driver actually wants to know before setting
   off - are you open, what is regular today, and how do I call you - which the
   nav alone could not do: the phone link and the Directions button only appear
   at 1120px and up, and the bottom CTA bar only below 768px, so between those
   two widths the site offered no way to call without scrolling. */
.util-bar {
  background: rgba(9, 11, 16, 0.92);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom: 1px solid var(--border-glass);
  font-size: var(--text-xs);
}

.util-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 38px;
}

.util-bar__cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* .status-bar is a page-level callout elsewhere (big pill, bottom margin).
   Inside the bar it has to read as one line of chrome. */
.util-bar .status-bar {
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: 0;
  gap: 6px;
  white-space: nowrap;
}

.util-bar .status-dot {
  width: 6px;
  height: 6px;
}

.util-bar__cell--price { margin-left: auto; }

.util-bar__price-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.util-bar__label {
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.util-bar__value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.util-bar__ask {
  display: none;
  align-items: center;
  min-height: 38px;
  color: var(--accent-light);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Exactly one of these two shows, and js/prices.js decides which - never the
   markup. `pending` keeps the placeholder; `unknown` swaps the number for a
   phone call rather than showing a figure nobody can stand behind. */
.util-bar__cell--price[data-price-state="unknown"] .util-bar__price-wrap { display: none; }
.util-bar__cell--price[data-price-state="unknown"] .util-bar__ask { display: inline-flex; }

.util-bar__call { display: none; }

@media (min-width: 768px) {
  /* Below 768px the fixed bottom CTA bar already carries Call Now, so showing
     the number here as well would just duplicate it in a smaller tap target. */
  .util-bar__cell--price { margin-left: 0; }
  .util-bar__call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-height: 38px;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
  }
  .util-bar__call:hover { color: var(--accent-light); }
}

/* Exactly one visible way to call at any width, never two:
   below 768px the fixed bottom CTA bar owns it, 768-1119px this bar owns it,
   and from 1120px the nav's own phone link comes back and owns it again.
   With the number gone the bar rebalances - state left, price right. */
@media (min-width: 1120px) {
  .util-bar__call { display: none; }
  .util-bar__cell--price { margin-left: auto; }
}

/* Nav inner: 3-column grid on desktop (logo | links | right actions) */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  /* Replaces the padding-top removed from .nav so the utility bar can sit
     flush against the top of the viewport. */
  padding-top: var(--space-sm);
}

/* ---- Logo ---- */
.nav-logo {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.nav-logo:hover {
  color: var(--text-primary);
}

.nav-logo .logo-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.nav-logo .logo-text {
  white-space: nowrap;
}

.nav-logo .logo-accent {
  color: var(--accent);
}

.nav-logo .logo-ampersand {
  color: var(--accent);
  font-weight: 900;
}

/* ---- Centered Nav Links ---- */
.nav-links {
  display: none;
  gap: var(--space-xs);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  padding: 4px;
}

.nav-links a {
  /* 0.7rem, not 0.9rem: the nav carries six links since the Ferry Tickets page
     was added, and the centered pill collided with the phone number at 0.9rem. */
  padding: 0.4rem 0.7rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.nav-links a.active {
  color: var(--text-on-accent);
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Full nav only fits once logo + 6 links + phone + CTA have room, with margin.
   Re-measured 2026-08-15 after the Ferry Tickets link made this six: the centred
   pill is 569px wide, the phone sits 257px in from the right edge, so the pill's
   right edge collides with it below ~1107px. 1120px clears it with room to spare.
   If you add a seventh link, re-measure — do not assume this still holds. */
@media (min-width: 1120px) {
  .nav-links {
    display: flex;
  }
}

/* ---- Right side: phone + CTA + hamburger ---- */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.nav-phone {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-phone:hover {
  color: var(--accent);
}

.nav-phone svg {
  color: var(--accent);
  flex-shrink: 0;
}

.nav-phone-text {
  display: none;
}

.btn-nav {
  display: none;
  padding: 0.45rem 1rem;
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
}

/* Phone + CTA join the nav at the same width the links do */
@media (min-width: 1120px) {
  .nav-phone {
    display: flex;
  }
  .btn-nav {
    display: inline-flex;
  }
}

@media (min-width: 1120px) {
  .nav-phone-text {
    display: inline;
  }
}

/* ---- Hamburger ---- */
.nav-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: calc(var(--z-overlay) + 1);
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  position: absolute;
  left: 50%;
  width: 24px;
  margin-left: -12px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), opacity 0.25s ease, top 0.35s cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 29px; }

@media (min-width: 1120px) {
  .nav-toggle {
    display: none;
  }
}

/* ---- Mobile Menu Overlay ---- */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  background: rgba(13, 15, 20, 0.98);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  padding: var(--space-2xl);
}

.nav-mobile.open {
  opacity: 1;
  visibility: visible;
}

.nav-mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.nav-mobile a {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-sm) 0;
}

.nav-mobile a:hover,
.nav-mobile a.active {
  color: var(--accent);
}

.nav-mobile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 280px;
  margin-top: var(--space-xl);
}

body.nav-open {
  overflow: hidden;
}
body.nav-open .nav {
  z-index: calc(var(--z-overlay) + 2);
}

body.nav-open .nav-toggle span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

body.nav-open .nav-toggle span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* ========= ANNOUNCEMENT BAR ========= */
.announcement-bar {
  background: var(--accent);
  color: var(--text-on-accent);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}

.announcement-bar a {
  color: var(--text-on-accent);
  text-decoration: underline;
}

/* ========= HERO ========= */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: calc(80px + var(--space-3xl)) 0 var(--space-3xl);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, var(--accent-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 40%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero h1 {
  margin-bottom: var(--space-lg);
  line-height: 1.1;
}

.hero h1 .highlight {
  color: var(--accent);
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 540px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Hero - Page variant (smaller) */
.hero-page {
  min-height: auto;
  padding: calc(80px + var(--space-2xl)) 0 var(--space-2xl);
}

.hero-page h1 {
  font-size: var(--text-3xl);
}

@media (min-width: 768px) {
  .hero-page h1 {
    font-size: var(--text-4xl);
  }
}

/* ========= BUSINESS STATUS ========= */
.status-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-xl);
}

.status-bar--open {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-bar--closed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

/* ========= QUICK FACTS STRIP ========= */
.quick-facts {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  padding: var(--space-xl) 0;
}

.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .quick-facts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .quick-facts-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.quick-fact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.quick-fact-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.quick-fact-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.quick-fact-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ========= AMENITY / SERVICE ICON GRID ========= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  text-align: center;
  padding: var(--space-xl);
}

.service-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-2xl);
  color: var(--accent);
}

.service-card h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ========= FUEL PRICE TICKER ========= */
.fuel-ticker {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding: var(--space-sm) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fuel-ticker::-webkit-scrollbar {
  display: none;
}

.fuel-price-card {
  flex-shrink: 0;
  min-width: 140px;
  text-align: center;
  padding: var(--space-lg);
}

.fuel-price-card .fuel-type {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.fuel-price-card .fuel-price {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent);
}

.fuel-price-card .fuel-unit {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ========= WHY STOP HERE ========= */
.reasons-grid {
  counter-reset: reason;
}

.reason-card {
  position: relative;
  padding-left: 4rem;
}

.reason-card::before {
  counter-increment: reason;
  content: counter(reason, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-3xl);
  font-weight: 800;
  color: rgba(245, 158, 11, 0.2);
  line-height: 1;
}

.reason-card h4 {
  margin-bottom: var(--space-sm);
}

.reason-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ========= TESTIMONIALS ========= */
.testimonial-card {
  padding: var(--space-xl);
}

.testimonial-stars {
  color: var(--accent);
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}

.testimonial-text {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.testimonial-author {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* ========= DEALS / PROMO CARDS ========= */
.promo-card {
  position: relative;
  overflow: hidden;
}

.promo-card-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.promo-card-content {
  padding: var(--space-xl);
}

.promo-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.promo-card .promo-value {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.promo-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.promo-card .promo-terms {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ========= FAQ ACCORDION ========= */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.accordion-item {
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.accordion-item:hover {
  border-color: var(--border-glass-hover);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-glass);
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-trigger::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--accent);
  transition: transform var(--transition-base);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.accordion-item.is-open .accordion-trigger::after {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion-content-inner {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ========= MAP BLOCK ========= */
.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  aspect-ratio: 16 / 9;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: brightness(0.85) contrast(1.1) saturate(0.8);
}

/* ========= CONTACT FORM ========= */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ========= CTA BANNER ========= */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(59, 130, 246, 0.1)),
    var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.cta-banner h2 {
  margin-bottom: var(--space-md);
}

.cta-banner p {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ========= FOOTER ========= */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-md);
  max-width: 280px;
}

.footer h5 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.footer-links a {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border-glass);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-md);
  }
}

/* ========= STICKY MOBILE CTA BAR ========= */
.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cta-bar);
  background: rgba(13, 15, 20, 0.95);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-top: 1px solid var(--border-glass);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  gap: var(--space-sm);
  transform: translateY(0);
  transition: transform var(--transition-base);
}

.mobile-cta-bar.hidden {
  transform: translateY(100%);
}

.mobile-cta-bar .btn {
  flex: 1;
  font-size: var(--text-sm);
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .mobile-cta-bar {
    display: none;
  }
}

/* Add padding to body bottom on mobile to prevent CTA bar overlap */
@media (max-width: 767px) {
  body {
    padding-bottom: 70px;
  }
}

/* ========= HOURS TABLE ========= */
.hours-table {
  width: 100%;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-glass);
  font-size: var(--text-sm);
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-day {
  font-weight: 600;
  color: var(--text-primary);
}

.hours-time {
  color: var(--text-secondary);
}

.hours-row.today {
  color: var(--accent);
}

.hours-row.today .hours-day,
.hours-row.today .hours-time {
  color: var(--accent);
}

/* ========= BADGE / TAG ========= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
}

.badge--accent {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--accent);
}

.badge--green {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--accent-green);
}

/* ========= PRODUCT / CATEGORY CARDS ========= */
.category-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
  background: var(--bg-glass);
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 15, 20, 0.9), transparent);
  z-index: 1;
}

.category-card-content {
  position: relative;
  z-index: 2;
}

.category-card h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.category-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ========= SPEC / FEATURE LIST ========= */
.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .spec-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spec-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.spec-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-green);
  margin-top: 2px;
}

/* ========= DIVIDER ========= */
.divider {
  border: none;
  border-top: 1px solid var(--border-glass);
  margin: var(--space-3xl) 0;
}

/* ========= ANIMATIONS ========= */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.slide-left {
  transform: translateX(-24px);
}

.animate-on-scroll.slide-left.is-visible {
  transform: translateX(0);
}

.animate-on-scroll.scale-in {
  transform: scale(0.95);
}

.animate-on-scroll.scale-in.is-visible {
  transform: scale(1);
}

/* Stagger children */
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }
.stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 320ms; }
.stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 400ms; }
.stagger-children > .animate-on-scroll:nth-child(7) { transition-delay: 480ms; }
.stagger-children > .animate-on-scroll:nth-child(8) { transition-delay: 560ms; }

/* ========= REDUCED MOTION ========= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ========= UTILITY CLASSES ========= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.pt-0 { padding-top: 0; }

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ========= FOOTER CONTACT ADDRESS ========= */
.footer-contact {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.8;
}

.footer-contact a {
  color: var(--accent-light);
  text-decoration: none;
}

.footer-contact a:hover {
  color: var(--accent);
}

/* ========= EXTRA RESPONSIVE: TABLET (768-1023) ========= */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .hero h1 {
    font-size: var(--text-4xl);
  }
}

/* ========= EXTRA RESPONSIVE: LARGE DESKTOP (1440+) ========= */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }

  .hero {
    min-height: 85vh;
  }

  .hero h1 {
    font-size: 4rem;
  }

  .footer-grid {
    gap: var(--space-3xl);
  }
}

/* ========= EXTRA RESPONSIVE: SMALL MOBILE (< 480) ========= */
@media (max-width: 479px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .hero {
    min-height: 80vh;
    padding: calc(70px + var(--space-2xl)) 0 var(--space-2xl);
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .fuel-price-card {
    min-width: 120px;
    padding: var(--space-md);
  }

  .glass-card {
    padding: var(--space-lg);
  }

  .cta-banner {
    padding: var(--space-xl) var(--space-lg);
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ========= ULTRA-SMALL MOBILE (< 360) ========= */
@media (max-width: 359px) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.35rem; }

  .container {
    padding: 0 var(--space-sm);
  }

  .fuel-price-card {
    min-width: 100px;
    padding: var(--space-sm);
  }

  .fuel-price-card .fuel-price {
    font-size: var(--text-2xl);
  }

  .btn {
    padding: 0.6rem 1rem;
    font-size: var(--text-xs);
  }

  .btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
  }

  .nav-logo {
    font-size: var(--text-sm);
  }

  .nav-logo .logo-icon {
    width: 20px;
    height: 20px;
  }

  .glass-card {
    padding: var(--space-md);
  }

  .status-bar {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ========= MID-PHONE (480–767px) ========= */
@media (min-width: 480px) and (max-width: 767px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* ========= LANDSCAPE MOBILE ========= */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(70px + var(--space-xl)) 0 var(--space-xl);
  }
}

/* ========= ULTRA-WIDE DESKTOP (1920+) ========= */
@media (min-width: 1920px) {
  .container {
    max-width: 1480px;
  }

  .hero h1 {
    font-size: 4.5rem;
  }
}

/* ========= TOUCH DEVICES — min tap targets ========= */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .glass-card:hover {
    transform: none;
  }

  .accordion-trigger {
    min-height: 48px;
  }

  .nav-toggle {
    /* already 44x44, no override needed */
  }

  .footer-links a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* ========= MOBILE FOOTER — compact, horizontal, professional ========= */
.footer-mobile {
  display: none;
}

@media (max-width: 767px) {
  .footer {
    padding: var(--space-xl) 0 var(--space-lg);
  }
  .footer-desktop {
    display: none !important;
  }
  .footer-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
  }

  /* Brand */
  .footer-mobile__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }
  .footer-mobile__brand .nav-logo {
    font-size: var(--text-base);
  }
  .footer-mobile__brand p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
  }

  /* Two-column links (Quick Links + Services) */
  .footer-mobile__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
    text-align: left;
  }
  .footer-mobile__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .footer-mobile__col h5 {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs);
    letter-spacing: 0.02em;
  }
  .footer-mobile__col a {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .footer-mobile__col a:hover {
    color: var(--accent);
  }

  /* Contact Info section */
  .footer-mobile__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
  }
  .footer-mobile__info h5 {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
  }
  .footer-mobile__info-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .footer-mobile__info-item svg {
    color: var(--accent);
    flex-shrink: 0;
  }
  .footer-mobile__info-item a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 600;
  }

  /* Legal links */
  .footer-mobile__legal {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
  }
  .footer-mobile__legal a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .footer-mobile__legal a:hover {
    color: var(--accent);
  }
  .footer-mobile__legal span {
    color: var(--text-muted);
    opacity: 0.5;
  }

  /* Copyright */
  .footer-mobile__copy {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin: 0;
  }
}

/* Very small phones */
@media (max-width: 374px) {
  .footer-mobile__columns {
    gap: var(--space-md);
  }
  .footer-mobile__col a {
    font-size: 11px;
  }
}