/* Excel Gas - The Flame of Quality
   Palette and type taken from the vehicle wrap / flyer artwork. */

:root {
  --navy-900: #04122a;
  --navy-800: #082042;
  --navy-700: #0d2c57;
  --navy-600: #143a6e;
  --orange: #f5821f;
  --gold: #fbb040;
  --ember: #e8412a;
  --ink: #ffffff;
  --muted: #a9bfdd;
  --edge: rgba(245, 130, 32, 0.38);
  --shell: 1180px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-900);
  background-image:
    radial-gradient(120% 80% at 78% 0%, #123869 0%, rgba(18, 56, 105, 0) 58%),
    linear-gradient(180deg, #051730 0%, #04122a 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold); }

h1, h2, h3, .display {
  font-family: "Archivo Black", "Barlow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.1rem, 8.4vw, 4.15rem); }
h2 { font-size: clamp(1.65rem, 5.4vw, 2.6rem); }
h3 { font-size: 1.06rem; letter-spacing: 0.01em; }

p { margin: 0 0 1.1em; max-width: 66ch; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

.lede { color: #d7e4f5; font-size: 1.08rem; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-flame {
  background: linear-gradient(180deg, var(--gold) 0%, var(--orange) 100%);
  color: #241000;
}

.btn-ghost {
  border-color: var(--edge);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.btn:hover { transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(4, 18, 42, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(169, 191, 221, 0.14);
}

.topbar .shell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

/* The mark is Anton's own logo, traced to vector so it stays sharp. */
.brand .mark {
  width: 34px;
  height: auto;
  flex: none;
}

.brand-name {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--orange);
}

.brand-tag {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  font-family: "Barlow", Arial, sans-serif;
  font-style: italic;
  margin-top: 4px;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.nav {
  display: none;
  width: 100%;
  padding-bottom: 18px;
}

.nav.open { display: block; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a {
  display: block;
  padding: 11px 4px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(169, 191, 221, 0.12);
}

.nav a[aria-current="page"] { color: var(--orange); }

.topbar-call { display: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block; width: auto; padding: 0; }
  .nav ul { flex-direction: row; gap: 26px; }
  .nav a { border: 0; padding: 6px 0; }
  .nav a:hover { color: var(--gold); }
  .topbar-call {
    display: inline-flex;
    margin-left: 22px;
    padding: 11px 20px;
    font-size: 0.85rem;
  }
}

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero-art {
  position: relative;
  height: 330px;
  background: var(--navy-700);
  overflow: hidden;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}

.seal {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 108px;
  padding: 12px 10px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--gold), var(--orange));
  color: #2a1200;
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
}

/* tick sits on its own line under the wording, as it does on the van */
.seal svg { display: block; width: 22px; height: 22px; margin: 7px auto 0; }

.hero-copy { padding: 34px 0 44px; }

.hero-copy h1 span { color: var(--orange); display: block; }

.strap {
  font-family: "Archivo Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: clamp(0.82rem, 3.1vw, 1rem);
  letter-spacing: 0.01em;
  color: #e6eefb;
  margin-bottom: 20px;
}

.strap i { color: var(--orange); font-style: normal; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 900px) {
  .hero .shell {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
  }
  .hero-copy { padding: 78px 0 88px; }
  .hero-art {
    height: 540px;
    border-radius: 270px 18px 18px 270px;
    border-left: 5px solid var(--orange);
  }
  .hero-art img { object-position: center center; }
}

/* ---------- sections ---------- */

.band { padding: 56px 0; }
.band-alt { background: rgba(8, 32, 66, 0.72); border-block: 1px solid rgba(169, 191, 221, 0.12); }

.band-head { margin-bottom: 30px; }
.band-head p { color: var(--muted); }

/* ---------- service tiles ---------- */

/* The tiles wrap onto as many rows as they need. All five sit on one
   line once there is room for them, and nothing is ever cut off or
   hidden behind a sideways scroll. */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

@media (min-width: 1000px) {
  .tiles { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .tile-body h3 { font-size: 0.98rem; }
  .tile-body p { font-size: 0.88rem; line-height: 1.5; }
}

@media (min-width: 1100px) {
  .tiles { gap: 16px; }
  .tile-body p { font-size: 0.9rem; }
}

.tile {
  position: relative;
  border: 2px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--navy-800);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: none;
  background: var(--navy-700);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stacked on a phone the tiles run long, so the photo takes a slightly
   shallower band. It goes back to 4:3 as soon as they sit side by side. */
@media (max-width: 539px) {
  .thumb { aspect-ratio: 3 / 2; }
}

.tile-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -21px 0 12px;
  border-radius: var(--r-pill);
  background: var(--navy-900);
  border: 2px solid var(--orange);
}

.tile-badge svg { width: 19px; height: 19px; }
/* the brand mark is taller than it is wide, so height drives the size */
.tile-badge img { width: auto; height: 22px; }

.tile-body {
  position: relative;
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
}

.tile-body h3 { color: var(--gold); margin-bottom: 6px; }
.tile-body p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* ---------- trust row ---------- */

.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: rgba(4, 18, 42, 0.6);
}

.trust-item { display: flex; gap: 14px; }
.trust-item svg { width: 30px; height: 30px; flex: none; }
.trust-item img { width: auto; height: 30px; flex: none; }
.trust-item h3 { color: var(--ink); font-size: 0.98rem; margin-bottom: 2px; }
.trust-item p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ---------- content blocks ---------- */

.split {
  display: grid;
  gap: 26px;
}

@media (min-width: 860px) {
  .split { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

.card {
  border: 1px solid rgba(169, 191, 221, 0.18);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-md);
  background: rgba(8, 32, 66, 0.55);
  padding: 24px;
}

.card h3 { color: var(--gold); font-size: 1.15rem; }
.card p:last-child { margin-bottom: 0; }

.checklist { list-style: none; margin: 0; padding: 0; }

.checklist li {
  position: relative;
  padding: 0 0 12px 30px;
  color: #d7e4f5;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), var(--ember));
}

/* ---------- gallery ---------- */

.carousel { position: relative; }

.track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 86%;
  scroll-snap-align: center;
  border: 2px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--navy-800);
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}

/* Most of Anton's photos are portrait phone shots, a few are wide.
   A square thumbnail crops both fairly; the full frame opens on click. */
.slide img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }

.slide figcaption {
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: left;
}

@media (min-width: 700px) { .slide { flex-basis: 45%; } }
@media (min-width: 1050px) { .slide { flex-basis: 31.5%; } }

.arrow {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 2px solid var(--orange);
  background: rgba(4, 18, 42, 0.88);
  color: var(--orange);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
}

.arrow:hover { background: var(--orange); color: #231000; }
.arrow[disabled] { opacity: 0.3; cursor: default; }
.arrow-prev { left: -6px; }
.arrow-next { right: -6px; }

@media (min-width: 1240px) {
  .arrow-prev { left: -26px; }
  .arrow-next { right: -26px; }
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 9, 20, 0.94);
  padding: 16px;
}

.lightbox.open { display: flex; }

.lb-figure { margin: 0; max-width: 1000px; width: 100%; text-align: center; }

.lb-figure img {
  max-height: 74vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 2px solid var(--edge);
}

.lb-caption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.lb-count { color: var(--orange); font-family: "Archivo Black", Arial, sans-serif; }

.lb-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 2px solid var(--orange);
  background: rgba(4, 18, 42, 0.9);
  color: var(--orange);
  font-size: 1.5rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 14px; right: 12px; font-size: 1.2rem; }

@media (min-width: 900px) {
  .lb-prev { left: 30px; }
  .lb-next { right: 30px; }
  .lb-close { right: 30px; }
}

/* ---------- contact ---------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(169, 191, 221, 0.3);
  background: rgba(4, 18, 42, 0.75);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 130px; resize: vertical; }

.form-note { font-size: 0.88rem; color: var(--muted); }

/* Honeypot: off screen for people, visible to bots that fill every input. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fallback text where the email address would be, if JS is off. */
noscript { display: block; font-size: 0.9rem; color: var(--muted); }

.contact-lines { list-style: none; margin: 0; padding: 0; }

.contact-lines li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(169, 191, 221, 0.14);
  align-items: flex-start;
}

.contact-lines svg { width: 24px; height: 24px; flex: none; margin-top: 3px; }
.contact-lines a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact-lines a:hover { color: var(--gold); }
.contact-lines small { display: block; color: var(--muted); font-weight: 400; }

/* ---------- call strip ---------- */

.callstrip {
  background: linear-gradient(180deg, var(--gold) 0%, var(--orange) 100%);
  color: #241000;
  padding: 22px 0;
}

.callstrip .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  text-align: center;
}

.callstrip .label {
  font-family: "Archivo Black", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #2a1200;
}

.callstrip .number {
  font-family: "Archivo Black", Arial, sans-serif;
  font-size: clamp(1.6rem, 6.5vw, 2.3rem);
  color: #10203a;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.callstrip .site { color: #10203a; font-weight: 700; text-decoration: none; }

/* ---------- footer ---------- */

.foot {
  background: #030d1e;
  border-top: 1px solid rgba(169, 191, 221, 0.14);
  padding: 40px 0 26px;
}

.foot-grid { display: grid; gap: 26px; }

@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; } }

.foot h3 { color: var(--gold); font-size: 0.95rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 5px 0; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--orange); }
.foot-hours { color: var(--gold); font-weight: 600; }

.foot-base {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(169, 191, 221, 0.14);
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

.page-head { padding: 42px 0 10px; }
.page-head p { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { scroll-behavior: auto; }
  .btn { transition: none; }
}