/* ==================================================
   SFIVE BEVERAGES — MAIN STYLESHEET
   ================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --bg-primary: #1f1a20;
  --bg-secondary: #171318;
  --bg-dark: #0f0d10;
  --gold-primary: #d7ab47;
  --gold-light: #f4d477;
  --gold-dark: #9a7028;
  --white: #ffffff;
  --off-white: #f5f2f3;
  --text-muted: #b8b1b7;
  --border-color: rgba(255, 255, 255, 0.12);
  --container-width: 1280px;
  --header-height: 88px;

  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --font-utility: 'Jost', 'Manrope', sans-serif;

  --gold-gradient: linear-gradient(120deg, var(--gold-dark), var(--gold-light) 45%, var(--gold-primary) 100%);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.4s var(--ease-premium);
}

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

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

body {
  background-color: var(--bg-primary);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout Helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(4rem, 9vw, 8rem);
  position: relative;
}

.section-dark { background: var(--bg-dark); }
.section-secondary { background: var(--bg-secondary); }

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold-gradient);
}

.section-head.center .eyebrow::before { display: none; }

h1, .h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); letter-spacing: -0.01em; }
h2, .h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { color: var(--text-muted); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  max-width: 46ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-utility);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  border-radius: 2px;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  min-height: 44px;
}

.btn-primary {
  background: var(--gold-gradient);
  color: var(--bg-dark);
  font-weight: 600;
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(215, 171, 71, 0.55); }

.btn-outline {
  border: 1px solid var(--border-color);
  color: var(--off-white);
}

.btn-outline:hover {
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-text {
  color: var(--gold-primary);
  font-family: var(--font-utility);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.btn-text::after {
  content: '';
  width: 0;
  height: 1px;
  background: var(--gold-primary);
  transition: width var(--transition-base);
  position: absolute;
  bottom: -4px;
  left: 0;
}

.btn-text:hover::after { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 500;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), height var(--transition-base);
}

.site-header.is-scrolled {
  background: rgba(15, 13, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border-color);
  height: 72px;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand img { height: 34px; width: auto; }

.main-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }

.main-nav a {
  font-family: var(--font-utility);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
  position: relative;
  padding-block: 0.4rem;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold-gradient);
  transition: width var(--transition-base);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { width: 100%; }

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

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 600;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--off-white);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s var(--ease-premium), visibility 0.6s var(--ease-premium);
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-mark { width: 72px; height: 72px; }

.preloader-bar {
  width: 220px;
  height: 1px;
  background: var(--border-color);
  position: relative;
  overflow: hidden;
}

.preloader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  background: var(--gold-gradient);
  transition: width 0.2s linear;
}

.preloader-percent {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

body.is-loading { overflow: hidden; height: 100vh; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--header-height);
  background: radial-gradient(ellipse at 70% 20%, rgba(215, 171, 71, 0.12), transparent 55%), var(--bg-primary);
  overflow: hidden;
}

.hero-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(244, 212, 119, 0.35), rgba(215, 171, 71, 0.05));
  border: 1px solid rgba(215, 171, 71, 0.25);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 2;
}

.hero-copy .eyebrow { opacity: 0; }
.hero-title { overflow: hidden; }
.hero-title span { display: block; }
.hero-title .line-inner { display: inline-block; transform: translateY(110%); }

.hero-lede { margin-block: 1.75rem 2.25rem; opacity: 0; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; }

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(360px, 46vw, 560px);
}

.hero-visual .monogram-draw {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.hero-visual .monogram-draw path,
.hero-visual .monogram-draw text {
  opacity: 0;
}

.gold-underline {
  display: block;
  height: 2px;
  width: 0;
  background: var(--gold-gradient);
  margin-top: 0.75rem;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  z-index: 2;
}

.scroll-cue .line { width: 1px; height: 40px; background: var(--border-color); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold-primary);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 0%; }
  100% { top: 100%; }
}

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding-block: 1.5rem;
  overflow: hidden;
  background: var(--bg-dark);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marqueeScroll 32s linear infinite;
}

.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.marquee-track span em {
  font-style: normal;
  color: var(--gold-primary);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Product Cards / Grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.product-card {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2.5rem 1.75rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  transition: border-color var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover { border-color: rgba(215, 171, 71, 0.5); transform: translateY(-6px); }

.product-card-media {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border-radius: 3px;
  overflow: hidden;
}

.product-card-media img { height: 82%; width: auto; transition: transform 0.6s var(--ease-premium); }
.product-card:hover .product-card-media img { transform: scale(1.05) rotate(-2deg); }

.product-card-media--lifestyle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-card:hover .product-card-media--lifestyle img {
  transform: scale(1.045);
}

.detail-visual--lifestyle {
  padding: 0;
  overflow: hidden;
}

.detail-visual--lifestyle img {
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: cover;
  object-position: center;
}

.product-card .category {
  font-family: var(--font-utility);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 0.5rem;
}

.product-card h3 { margin-bottom: 0.6rem; }
.product-card p { font-size: 0.9rem; margin-bottom: 1.25rem; flex-grow: 1; }

/* ---------- Pinned Showcase ---------- */
.showcase {
  position: relative;
  background: var(--bg-dark);
}

.showcase-pin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.showcase-visual {
  position: relative;
  height: clamp(320px, 55vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-visual img {
  position: absolute;
  height: 88%;
  width: auto;
  opacity: 0;
}

.showcase-text { max-width: 460px; }
.showcase-text .step {
  position: absolute;
  opacity: 0;
}

.showcase-index {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold-primary);
  margin-bottom: 1rem;
}

/* ---------- Feature / Split sections ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split.reverse .split-visual { order: 2; }

.split-visual {
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.stat-row .num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--gold-light);
  display: block;
}

.stat-row .label {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Value / Feature grid (icons) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.feature-item { text-align: left; }

.feature-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1.25rem;
  color: var(--gold-primary);
}

.feature-icon svg { width: 100%; height: 100%; }

.feature-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.feature-item p { font-size: 0.9rem; }

/* ---------- Distribution / Contact CTA band ---------- */
.cta-band {
  background: var(--gold-gradient);
  color: var(--bg-dark);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.cta-band h2 { color: var(--bg-dark); }
.cta-band p { color: rgba(15,13,16,0.75); }

.cta-band .btn-outline {
  border-color: rgba(15,13,16,0.4);
  color: var(--bg-dark);
}

.cta-band .btn-outline:hover { border-color: var(--bg-dark); color: var(--bg-dark); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border-color);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
}

.footer-brand img { height: 32px; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.9rem; max-width: 32ch; }

.footer-col h4 {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a, .footer-col address { font-size: 0.9rem; color: var(--text-muted); font-style: normal; }
.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-legal { display: flex; gap: 1.5rem; }

.back-to-top {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  z-index: 400;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--gold-primary); }

/* ---------- Page Header (inner pages) ---------- */
.page-header {
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 3rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.breadcrumbs {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.breadcrumbs a { color: var(--gold-primary); }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  color: var(--white);
  transition: border-color var(--transition-base);
  min-height: 44px;
}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--gold-primary); outline: none; }

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select { border-color: #d9645a; }

.field-error {
  font-size: 0.78rem;
  color: #e08579;
  display: none;
}

.form-field.has-error .field-error { display: block; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  grid-column: 1 / -1;
}

.consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--gold-primary);
  flex-shrink: 0;
}

.consent-row label { font-size: 0.85rem; color: var(--text-muted); }

.form-status {
  grid-column: 1 / -1;
  padding: 1rem 1.25rem;
  border-radius: 2px;
  font-size: 0.9rem;
  display: none;
}

.form-status.is-success { display: block; background: rgba(96, 174, 116, 0.12); border: 1px solid rgba(96, 174, 116, 0.4); color: #8fd3a3; }
.form-status.is-error { display: block; background: rgba(217, 100, 90, 0.12); border: 1px solid rgba(217, 100, 90, 0.4); color: #e08579; }

.submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(15,13,16,0.3);
  border-top-color: var(--bg-dark);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}

.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.7; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- FAQ Accordion ---------- */
.faq-item {
  border-bottom: 1px solid var(--border-color);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
}

.faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--gold-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::before { width: 100%; height: 1px; }
.faq-icon::after { width: 1px; height: 100%; transition: transform var(--transition-base); }

.faq-question[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-answer p { padding-bottom: 1.5rem; font-size: 0.95rem; }

/* ---------- Distribution page specific ---------- */
.region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.region-card {
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-radius: 3px;
  text-align: center;
}

.region-card .count { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-light); display: block; margin-bottom: 0.35rem; }
.region-card .name { font-family: var(--font-utility); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted); }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 780px; }
.legal-content h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 1rem; }
.legal-content ul { margin: 1rem 0 1.5rem 1.25rem; list-style: disc; }
.legal-content ul li { color: var(--text-muted); margin-bottom: 0.5rem; }
.legal-content strong { color: var(--white); }
.legal-updated { font-family: var(--font-utility); font-size: 0.8rem; color: var(--gold-primary); margin-bottom: 2rem; letter-spacing: 0.05em; }

/* ---------- Product detail page ---------- */
.detail-hero {
  padding-top: calc(var(--header-height) + 2.5rem);
  padding-bottom: 4rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.detail-visual {
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  position: relative;
}

.detail-visual img { height: 80%; width: auto; }

.detail-highlights { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.75rem; }
.detail-highlights span {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--gold-light);
}

.detail-meta { display: flex; gap: 2.5rem; margin-top: 2rem; }
.detail-meta div span { display: block; font-family: var(--font-utility); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; }
.detail-meta div strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); font-weight: 500; }

.not-found {
  text-align: center;
  padding-block: 4rem;
}

/* ---------- Enquiry Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 16, 0.7);
  backdrop-filter: blur(4px);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.is-open { opacity: 1; visibility: visible; }

.modal-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  max-width: 480px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform var(--transition-base);
}

.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.modal-close:hover { color: var(--gold-light); }
.modal-box h3 { margin-bottom: 0.5rem; }
.modal-box p { margin-bottom: 1.5rem; font-size: 0.9rem; }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.mt-lg { margin-top: 2.5rem; }

/* ===== ROKSTAR brand and product photo refinements ===== */
.brand img, .footer-brand img { height: 54px; width: auto; max-width: 190px; object-fit: contain; }
.preloader-mark { width: 76px; height: 110px; object-fit: contain; }
.product-grid { align-items: stretch; }
.product-card-media--photo { display:block; overflow:hidden; aspect-ratio: 4 / 5; height:auto; padding:0; border-radius:inherit; }
.product-card-media--photo img { width:100%; height:100%; object-fit:cover; transform:none; }
.product-card:hover .product-card-media--photo img { transform:scale(1.035); }
.detail-gallery { min-width:0; }
.detail-visual--photo { height:min(650px, 72vh); padding:0; overflow:hidden; border-radius:18px; }
.detail-visual--photo img { width:100%; height:100%; object-fit:contain; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:12px; margin-top:14px; }
.gallery-thumb { appearance:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); padding:0; aspect-ratio:1; overflow:hidden; border-radius:10px; cursor:pointer; transition:.25s ease; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-thumb:hover, .gallery-thumb.is-active { border-color:var(--gold); transform:translateY(-2px); }
.detail-meta { flex-wrap:wrap; }
@media (max-width:768px){
  .site-header .container { min-height:72px; }
  .brand img { height:46px; max-width:145px; }
  .footer-brand img { height:58px; max-width:180px; }
  .detail-visual--photo { height:auto; aspect-ratio:4/5; }
  .gallery-thumbs { grid-template-columns:repeat(3,1fr); }
  .product-card { padding:14px; }
  .product-card-media--photo { aspect-ratio:4/5; }
}
@media (max-width:390px){ .brand img{height:40px;max-width:125px}.gallery-thumbs{gap:8px}.detail-meta{display:grid;grid-template-columns:1fr 1fr}.detail-meta div:last-child{grid-column:1/-1} }

/* ===== Final ROKSTAR logo consistency fix ===== */
.brand,
.footer-brand { display:flex; align-items:center; }
.brand img,
.footer-brand img {
  display:block;
  width:auto;
  height:52px;
  max-width:210px;
  object-fit:contain;
  object-position:left center;
}
.footer-brand img { height:46px; }
.preloader-mark {
  width:78px;
  height:126px;
  object-fit:contain;
}
.product-card-media--photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media (max-width:768px){
  .brand img{height:42px;max-width:165px}
  .footer-brand img{height:42px;max-width:170px}
}
@media (max-width:390px){
  .brand img{height:36px;max-width:140px}
}


/* Final brand placement: ROKSTAR in header/footer, S FIVE only in home hero */
.hero-visual--sfive{display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.5rem)}
.sfive-hero-logo{display:block;width:min(100%,620px);max-height:70vh;object-fit:contain;border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.28)}
.preloader-mark{width:min(220px,58vw)!important;height:auto!important;max-height:90px;object-fit:contain!important;transform:none!important;rotate:0deg!important}
.brand img,.footer-brand img{transform:none!important;rotate:0deg!important}
@media(max-width:768px){.hero-visual--sfive{padding:.5rem}.sfive-hero-logo{width:min(100%,480px);max-height:48vh;border-radius:12px}}


/* v5: consistent ROKSTAR branding and can imagery */
.brand img, .footer-brand img, .preloader-mark {
  content: normal;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  rotate: 0deg !important;
}
.can-showcase {
  width: min(100%, 560px);
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.4rem, 2vw, 1.25rem);
  padding: clamp(1rem, 3vw, 2rem);
  margin-inline: auto;
}
.can-showcase img {
  width: clamp(82px, 25%, 145px);
  height: auto;
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.36));
}
.can-showcase img:nth-child(2) { transform: translateY(-18px); }
@media (max-width: 640px) {
  .can-showcase { min-height: 300px; padding: 1rem .4rem; gap: .25rem; }
  .can-showcase img { width: 31%; max-height: 275px; }
  .can-showcase img:nth-child(2) { transform: translateY(-10px); }
}


/* ===== Contact page premium redesign v6 ===== */
.contact-hero{position:relative;overflow:hidden;padding:calc(var(--header-height) + clamp(3.5rem,8vw,7rem)) 0 clamp(4rem,8vw,7rem);background:radial-gradient(circle at 80% 30%,rgba(198,149,57,.18),transparent 34%),linear-gradient(135deg,#0f0d10 0%,#171219 55%,#0f0d10 100%);border-bottom:1px solid var(--border-color)}
.contact-hero-glow{position:absolute;inset:auto -12% -55% auto;width:52vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(214,168,73,.17),transparent 66%);filter:blur(12px);pointer-events:none}
.contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:clamp(2rem,6vw,6rem)}
.contact-hero-copy .h1{max-width:780px;margin:.7rem 0 1.4rem}.contact-hero-copy .lede{max-width:690px}.contact-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.contact-hero-products{min-height:480px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.3rem,1.6vw,1rem);position:relative}
.contact-hero-products::before{content:'';position:absolute;inset:18% 4% 2%;border:1px solid rgba(214,168,73,.2);border-radius:50%;transform:perspective(600px) rotateX(68deg);background:radial-gradient(circle,rgba(214,168,73,.14),transparent 60%)}
.contact-hero-products img{position:relative;z-index:1;width:clamp(90px,27%,150px);max-height:430px;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.contact-hero-products img:nth-child(2){transform:translateY(-34px)}
.contact-main{background:linear-gradient(180deg,var(--bg-dark),#121014)}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-form-card,.contact-info-card{border:1px solid var(--border-color);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:0 25px 70px rgba(0,0,0,.18)}
.contact-form-card{padding:clamp(1.4rem,4vw,3.2rem);border-radius:18px}.contact-card-heading{margin-bottom:2.2rem}.contact-card-heading .h2{margin:.4rem 0 .8rem}.contact-card-heading>p:last-child{max-width:650px}
.contact-form-card .form-field input,.contact-form-card .form-field select,.contact-form-card .form-field textarea{background:rgba(0,0,0,.22);border-radius:8px;border-color:rgba(255,255,255,.12)}
.contact-form-card .form-field input::placeholder,.contact-form-card .form-field textarea::placeholder{color:rgba(255,255,255,.35)}
.contact-form-card .submit-row{justify-content:space-between;flex-wrap:wrap}.secure-note{font-size:.78rem;color:var(--text-muted)}
.contact-info-stack{display:grid;gap:1.15rem}.contact-info-card{padding:1.65rem;border-radius:14px}.contact-info-card--gold{background:linear-gradient(145deg,rgba(198,149,57,.18),rgba(198,149,57,.045));border-color:rgba(214,168,73,.35)}
.contact-info-card h3{font-size:1.25rem;margin:.45rem 0 1rem}.contact-info-card address{font-style:normal;color:var(--off-white);line-height:1.75;margin-bottom:1.2rem}.contact-info-card p:last-child{font-size:.88rem;margin-top:.55rem}.contact-detail-link{display:inline-block;color:var(--gold-light);font-weight:600;overflow-wrap:anywhere}
.contact-mini-products{display:flex;align-items:flex-end;justify-content:center;gap:.25rem;min-height:220px;padding:1rem;border:1px solid var(--border-color);border-radius:14px;background:radial-gradient(circle at 50% 100%,rgba(198,149,57,.16),transparent 62%)}
.contact-mini-products img{width:31%;max-height:190px;object-fit:contain;filter:drop-shadow(0 18px 17px rgba(0,0,0,.36))}.contact-mini-products img:nth-child(2){transform:translateY(-13px)}
@media(max-width:980px){.contact-hero-grid,.contact-layout{grid-template-columns:1fr}.contact-hero-products{min-height:380px;order:-1}.contact-hero-copy{text-align:center}.contact-hero-copy .lede{margin-inline:auto}.contact-hero-actions{justify-content:center}.contact-hero-products img{max-height:340px}.contact-info-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-mini-products{grid-column:1/-1}}
@media(max-width:640px){.contact-hero{padding-top:calc(var(--header-height) + 2.4rem)}.contact-hero-products{min-height:285px}.contact-hero-products img{width:31%;max-height:260px}.contact-hero-products img:nth-child(2){transform:translateY(-18px)}.contact-info-stack{grid-template-columns:1fr}.contact-mini-products{grid-column:auto}.contact-form-card{border-radius:12px}.contact-form-card .form-grid{grid-template-columns:1fr}.contact-form-card .form-field.full,.contact-form-card .consent-row,.contact-form-card .form-status,.contact-form-card .submit-row{grid-column:1}.secure-note{width:100%}}

/* Product catalogue expansion v6 */
.product-long-description{margin-top:1rem;max-width:68ch;line-height:1.85}
.product-information{display:grid;gap:1rem;margin-top:1.5rem}
.product-information>div{padding:1.15rem 1.25rem;border:1px solid rgba(201,162,75,.22);background:rgba(255,255,255,.025)}
.product-information h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:.45rem}
.product-information p{color:var(--text-muted);line-height:1.7}
.product-detail-actions{opacity:1;margin-top:2rem}
.product-card>p:not(.category){display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.product-information{grid-template-columns:repeat(3,1fr)}}


/* Contact page correction v7 */
.contact-hero-products a{position:relative;z-index:1;width:clamp(90px,27%,150px);max-height:430px;display:flex;align-items:flex-end;justify-content:center;transition:transform .35s ease,filter .35s ease}
.contact-hero-products a img{width:100%;max-height:430px;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5));transition:inherit}
.contact-hero-products a:nth-child(2){transform:translateY(-34px)}
.contact-hero-products a:hover{transform:translateY(-10px) scale(1.025);filter:brightness(1.07)}
.contact-hero-products a:nth-child(2):hover{transform:translateY(-44px) scale(1.025)}
.contact-mini-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:1rem;border:1px solid var(--border-color);border-radius:14px;background:rgba(255,255,255,.02)}
.contact-mini-products a{min-width:0;padding:.65rem .4rem;border:1px solid rgba(255,255,255,.07);border-radius:10px;text-align:center;background:rgba(0,0,0,.16);transition:transform .25s ease,border-color .25s ease}
.contact-mini-products a:hover{transform:translateY(-3px);border-color:rgba(214,168,73,.42)}
.contact-mini-products img{width:100%;height:105px;object-fit:contain;display:block;margin-bottom:.45rem}
.contact-mini-products span{display:block;font-size:.68rem;line-height:1.25;color:var(--off-white)}
.contact-form-card select{appearance:auto}
@media(max-width:980px){.contact-hero-products a{max-height:340px}.contact-hero-products a img{max-height:340px}}
@media(max-width:640px){.contact-hero-products a{width:31%;max-height:260px}.contact-hero-products a img{max-height:260px}.contact-hero-products a:nth-child(2){transform:translateY(-18px)}.contact-hero-products a:nth-child(2):hover{transform:translateY(-24px) scale(1.02)}.contact-mini-products{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-mini-products img{height:120px}}