/* Prestige Worldwide Vending — cream, black, logo blue and red.
   Design language, in the spirit of the inspiration sites: elegant serif
   display type, wide-tracked uppercase eyebrows, generous whitespace,
   alternating cream bands, a black header and footer, and sharp,
   rectangular buttons and cards. Product imagery is actual pack art
   and actual photos of the machine and graded cards, so nothing on
   the page is stock or generated. */

:root {
  --cream: #faf3e3;
  --cream-dark: #f0e6cf;
  --white: #ffffff;
  --black: #111111;
  --ink: #1a1a1a;
  --blue: #0038a8;
  --blue-dark: #002a7d;
  --red: #841617;
  --muted: #555555;
  --muted-light: #c9c9c9;
  --border: #ddd2b8;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
}

a { color: var(--blue); }
a:hover, a:focus { color: var(--blue-dark); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Header: black band, in the inspiration style */

.site-header {
  background: var(--black);
  color: #fff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--blue);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  text-decoration: none;
}

.brand img { border-radius: 50%; }

.brand-text {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.main-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.main-nav a {
  color: #e8e8e8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.main-nav a:hover, .main-nav a:focus { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Hero: centered, black, serif-led, like the inspiration heroes */

.hero {
  background: var(--black);
  color: #fff;
  text-align: center;
  padding: 5.5rem 0 5rem;
}

.hero-logo {
  display: block;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin: 0 0 1.25rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

.section h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}

.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); }

.hero-sub {
  color: #d8d8d8;
  font-size: 1.2rem;
  max-width: 720px;
  margin: 1.5rem auto 2rem;
}

.hero-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  margin-top: 3rem;
  color: var(--muted-light);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Buttons: sharp rectangles, generous padding */

.button {
  display: inline-block;
  background: var(--blue);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2rem;
  border-radius: 0;
  border: 2px solid var(--blue);
}

.button:hover, .button:focus { background: var(--blue-dark); border-color: var(--blue-dark); color: #ffffff; }

.button-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.button-outline:hover, .button-outline:focus { background: #ffffff; color: var(--black); border-color: #ffffff; }

/* Sections: generous rhythm, alternating bands, centered introductions */

.section { padding: 5rem 0; }
.section-dark { background: var(--cream-dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-black { background: var(--black); color: #fff; }
.section-black h2, .section-black h3 { color: #fff; }
.section-black p { color: #d8d8d8; }

.section h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  text-align: center;
  margin-bottom: 1rem;
}

.section .eyebrow { text-align: center; color: var(--red); }

.gold-rule {
  width: 72px;
  height: 3px;
  background: var(--blue);
  margin: 0 auto 2.25rem;
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--muted);
}

/* Fact panel */

.fact-panel {
  background: var(--white);
  border: none;
  padding: 2.25rem 2.5rem;
}

.fact-panel p { margin: 0 0 1rem; }
.fact-panel p:last-child { margin-bottom: 0; }

/* Cards: rectangular, white, equal weight for every offering */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--white);
  border: none;
  border-radius: 0;
  padding: 2.25rem;
}

.card h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.card p:last-child { margin-bottom: 0; }

.note { color: var(--muted); }

.badge {
  display: inline-block;
  background: var(--red);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 0;
}

/* FAQ: clean, divided list */

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-item h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.faq-item p:last-child { margin-bottom: 0; }

.contact-lines { font-size: 1.15rem; }

/* Photo gallery: flat white cards, pack art shown whole, never cropped */

.gallery-group h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 2.5rem 0 1rem;
}

.gallery-group:first-of-type h3 { margin-top: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
}

.gallery--wide {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.gallery figure {
  background: var(--white);
  margin: 0;
  padding: 1rem 1rem 0.75rem;
  text-align: center;
}

.gallery img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  display: block;
}

.gallery--wide img { height: 360px; }

.gallery figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.75rem;
}

/* Brand carousel: black band at the bottom, moving logo marquee,
   in the wide-tracked uppercase style of the inspiration site */

.brand-carousel {
  background: var(--black);
  color: #fff;
  padding: 3.5rem 0;
  overflow: hidden;
}

.brand-carousel h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2rem;
}

.carousel-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.carousel-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: carousel-scroll 32s linear infinite;
}

.carousel-set {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding-right: 5rem;
}

.carousel-track:hover { animation-play-state: paused; }

.carousel-track img {
  height: 64px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

@keyframes carousel-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
}

/* Footer: deep black, multi-column, centered credit line */

.site-footer {
  background: var(--black);
  color: #d8d8d8;
  padding: 3.5rem 0 2rem;
  border-top: 3px solid var(--blue);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.site-footer h3 {
  font-family: var(--sans);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.site-footer a { color: #e8e8e8; }
.site-footer a:hover, .site-footer a:focus { color: #fff; }

.footer-links { margin: 0; }
.footer-links a { display: block; margin-bottom: 0.4rem; }

.footer-credit {
  border-top: 1px solid #333;
  padding-top: 1.5rem;
  text-align: center;
  color: var(--muted-light);
}

@media (max-width: 700px) {
  .hero { padding: 4rem 0 3.5rem; }
  .section { padding: 3.5rem 0; }
  .fact-panel { padding: 1.5rem; }
 .brand-text { font-size: 1.1rem; }
}