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

/* scroll-padding-top offsets anchor jumps by the fixed header height so
   the targeted section's title isn't hidden under the header. Values
   track the responsive logo/header sizing. */
html {
  /* Global zoom-out: everything sized in rem shrinks proportionally
     (16px base * 93.75% = 15px). Reduce/raise this single value to
     scale the whole site up or down. */
  font-size: 93.75%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 140px;
}
@media (max-width: 900px) { html { scroll-padding-top: 112px; } }
@media (max-width: 640px) { html { scroll-padding-top: 92px; } }
@media (max-width: 480px) { html { scroll-padding-top: 80px; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-black);
  background: var(--color-cream);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
  line-height: 0.92;
}
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-red); }

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

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--color-red);
  color: var(--color-cream);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
  z-index: -1;
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { background: var(--color-red-dark); color: var(--color-cream); transform: translateY(-3px) scale(1.03); }

.hero__cta {
  background: var(--color-cream);
  color: var(--color-red-dark);
  animation: cta-pulse 2.6s var(--ease-in-out) infinite;
}
.hero__cta:hover {
  background: var(--color-gold);
  color: var(--color-black);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(14, 14, 14, 0.35), 0 0 0 0 rgba(232, 184, 75, 0.65); }
  50%      { box-shadow: 0 24px 60px rgba(14, 14, 14, 0.45), 0 0 0 18px rgba(232, 184, 75, 0); }
}

.btn--outline {
  border: 2px solid var(--color-black);
  color: var(--color-black);
}
.btn--outline:hover { background: var(--color-black); color: var(--color-cream); }

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.85); }
[data-reveal="flip"]  { transform: perspective(700px) rotateX(18deg) translateY(20px); transform-origin: top; }
[data-reveal].is-in { transform: none; }