.page {
  --orange: #df2b11;
  --orange-deep: #b92812;
  --ink: #151515;
  --cream: #f7efe3;
  --paper: #fff9ef;
  --purple: #5d2781;
  --pink: #ef418b;
  --line: rgba(23, 17, 14, .16);
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

.page a { color: inherit; text-decoration: none; }
.page h1,
.page h2,
.page h3,
.page p { margin-top: 0; }

.page h1,
.page h2,
.page h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: .88;
  text-transform: uppercase;
}

.nav {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 92px;
  padding: 18px clamp(22px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  color: var(--ink);
  border-bottom: 1px solid rgba(21, 21, 21, .14);
  background: rgba(247, 239, 227, .9);
  backdrop-filter: blur(12px);
}

.brand { display: inline-flex; flex-direction: column; width: max-content; line-height: .82; }
.brand strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2rem; letter-spacing: 0; }
.brand strong::first-letter { color: var(--orange); }
.brand i { margin-top: 6px; font-size: .48rem; font-style: normal; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.navLinks { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.navLinks a { font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.navActions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.navHome { display: none; min-height: 46px; padding: 0 15px; align-items: center; border: 1px solid rgba(21,21,21,.28); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.navCta { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; border: 1px solid var(--ink); color: white !important; background: var(--ink); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.hero {
  position: relative;
  min-height: 930px;
  padding: 150px clamp(24px, 7vw, 110px) 90px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(247,239,227,.99) 0 43%, rgba(247,239,227,.9) 56%, rgba(247,239,227,.3) 76%, rgba(21,21,21,.18) 100%),
    url("../images/editorial/buba/buba-sabores-trio.jpg") 84% 45% / cover no-repeat;
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .15;
  background-image: radial-gradient(circle, var(--orange) 0 1.5px, transparent 2px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}

.heroCopy { position: relative; z-index: 5; max-width: 780px; }
.eyebrow { margin-bottom: 18px; color: var(--orange); font-size: .7rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hero .eyebrow { color: var(--orange); }
.hero h1 { margin-bottom: 30px; font-size: clamp(5.2rem, 8vw, 9.8rem); }
.hero h1 strong { display: block; color: var(--orange); font-weight: inherit; }
.lead { max-width: 640px; margin-bottom: 34px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.04rem, 1.45vw, 1.3rem); line-height: 1.58; }
.heroActions,
.pairingActions { display: flex; flex-wrap: wrap; gap: 12px; }
.primaryButton,
.secondaryButton,
.lightButton { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.primaryButton { color: white !important; border-color: var(--ink); background: var(--ink); }
.secondaryButton { color: var(--ink); background: transparent; }
.hero .secondaryButton { color: var(--ink); border-color: rgba(21,21,21,.5); background: rgba(247,239,227,.76); }
.primaryButton:hover,
.secondaryButton:hover,
.lightButton:hover,
.primaryButton:focus-visible,
.secondaryButton:focus-visible,
.lightButton:focus-visible { transform: translateY(-3px); }
.heroFacts { margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.heroFacts li { padding: 8px 12px; border: 1px solid rgba(21,21,21,.34); border-radius: 999px; background: rgba(247,239,227,.74); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.heroVisual { position: relative; z-index: 3; height: 740px; }
.heroVisual > img { position: absolute; z-index: 4; right: 1%; bottom: 1%; width: min(62%, 460px); height: auto; max-height: 82%; object-fit: contain; border: 10px solid rgba(255,249,239,.96); box-shadow: 0 28px 70px rgba(45, 25, 15, .24); transform: rotate(2deg); }
.orangeOrb { display: none; }
.bubbleField i { position: absolute; z-index: 3; display: block; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: inset -8px -10px 14px rgba(173,44,116,.25), 0 12px 32px rgba(105,24,7,.18); }
.bubbleField i:nth-child(1) { left: 5%; top: 18%; width: 72px; height: 72px; }
.bubbleField i:nth-child(2) { right: 0; top: 28%; width: 38px; height: 38px; }
.bubbleField i:nth-child(3) { left: 14%; bottom: 15%; width: 42px; height: 42px; background: #5d2781; }
.bubbleField i:nth-child(4) { right: 12%; bottom: 2%; width: 88px; height: 88px; background: #ec438c; }
.bubbleField i:nth-child(5) { left: 3%; top: 55%; width: 30px; height: 30px; background: #ffcf16; }
.heroSeal { position: absolute; z-index: 8; right: 0; bottom: 0; width: 118px; aspect-ratio: 1; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--orange); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.2rem; line-height: .9; text-align: center; text-transform: uppercase; transform: rotate(-5deg); }

.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); color: white; background: var(--ink); }
.promise article { min-height: 148px; padding: 28px clamp(18px, 3vw, 40px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; border-right: 1px solid rgba(255,255,255,.15); }
.promise article:last-child { border-right: 0; }
.promise strong { color: var(--orange); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2.4rem; }
.promise span { font-size: .7rem; font-weight: 900; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; }

.flavors { padding: 120px clamp(22px, 6vw, 92px) 140px; background: var(--paper); }
.sectionIntro { margin-bottom: 68px; display: grid; grid-template-columns: 1fr .55fr; gap: 60px; align-items: end; }
.sectionIntro h2 { margin-bottom: 0; font-size: clamp(3.8rem, 6vw, 7rem); }
.sectionIntro > p { max-width: 560px; margin-bottom: 8px; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.6; }
.flavorGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.flavorCard { position: relative; display: grid; grid-template-rows: auto auto; border: 1px solid var(--line); overflow: hidden; background: #f0e6db; }
.flavorImage { position: relative; min-height: 0; aspect-ratio: 2 / 3; overflow: hidden; background: var(--paper); }
.flavorImage::after { position: absolute; inset: 55% 0 0; content: ""; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.flavorImage img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 500ms ease; }
.flavorCard:hover .flavorImage img { transform: scale(1.025); }
.flavorCopy { position: relative; z-index: 3; min-height: 220px; padding: 32px 34px 36px; color: white; background: var(--ink); }
.flavorCopy > span { position: absolute; top: 28px; right: 30px; color: rgba(255,255,255,.45); font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.flavorCopy p { margin-bottom: 7px; color: #ffc05e; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.flavorCopy h3 { max-width: 88%; margin-bottom: 17px; font-size: clamp(2.1rem, 3vw, 3.7rem); }
.flavorCopy strong { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; }
.violet .flavorCopy { background: #4f256c; }
.yellow .flavorCopy { color: var(--ink); background: #f3b919; }
.yellow .flavorCopy p { color: #6e3600; }
.yellow .flavorCopy strong { border-color: rgba(23,17,14,.3); }
.green .flavorCopy { background: #174f25; }
.berry .flavorCopy { background: #680c29; }

.combine { min-height: 880px; display: grid; grid-template-columns: .9fr 1.1fr; color: white; background: var(--ink); }
.combineCopy { padding: 110px clamp(28px, 6vw, 100px); display: flex; flex-direction: column; justify-content: center; }
.combineCopy h2 { margin-bottom: 30px; font-size: clamp(4rem, 6vw, 7rem); }
.combineCopy > p:not(.eyebrow) { max-width: 600px; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.62; }
.steps { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.2); }
.steps article { padding: 21px 0; display: grid; grid-template-columns: 54px 1fr; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.2); }
.steps article > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--orange); font-weight: 900; }
.steps strong { display: block; margin-bottom: 4px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.steps p { margin-bottom: 0; color: rgba(255,255,255,.7); font-family: Georgia, serif; font-size: .92rem; }
.combineVisual { min-height: 760px; padding: clamp(24px, 4vw, 64px); display: grid; place-items: center; overflow: hidden; background: var(--cream); }
.combineVisual img { width: min(100%, 620px); height: auto; max-height: 760px; object-fit: contain; object-position: center; box-shadow: 0 24px 58px rgba(45,25,15,.2); }

.jokiPairing { min-height: 900px; padding: 100px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(50px, 8vw, 130px); background: #f1e6d9; }
.menuPoster { position: relative; max-width: 560px; margin: auto; }
.menuPoster::before { position: absolute; inset: -18px 22px 18px -22px; content: ""; border: 3px solid var(--orange); }
.menuPoster img { position: relative; z-index: 2; width: 100%; display: block; box-shadow: 0 34px 70px rgba(66,34,16,.22); }
.pairingCopy h2 { margin-bottom: 30px; font-size: clamp(4rem, 6vw, 7.4rem); }
.pairingCopy > p:not(.eyebrow) { max-width: 620px; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.62; }
.pairingCopy ul { margin: 32px 0 38px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pairingCopy li { padding: 13px 0 13px 24px; border-bottom: 1px solid var(--line); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pairingCopy li::before { margin-left: -24px; margin-right: 12px; color: var(--orange); content: "●"; }

.gallery { padding: 120px clamp(20px, 5vw, 78px) 140px; background: var(--paper); }
.galleryGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.galleryGrid figure { margin: 0; aspect-ratio: 2 / 3; padding: 8px; overflow: hidden; background: #efe3d4; }
.galleryGrid img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms ease; }
.galleryGrid figure:hover img { transform: scale(1.025); }

.business { min-height: 780px; display: grid; grid-template-columns: 1fr .85fr; color: var(--ink); background: var(--cream); border-top: 1px solid var(--line); }
.businessCopy { padding: 100px clamp(24px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; }
.businessCopy .eyebrow { color: var(--orange); }
.businessCopy h2 { margin-bottom: 28px; font-size: clamp(4rem, 6vw, 7.3rem); }
.businessCopy > p:not(.eyebrow) { max-width: 620px; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.6; }
.businessContacts { margin-top: 36px; display: grid; width: min(100%, 520px); border-top: 1px solid var(--line); }
.businessContacts a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.businessVisual { min-height: 700px; padding: clamp(24px, 4vw, 60px); display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.businessVisual img { width: min(100%, 560px); height: auto; max-height: 720px; object-fit: contain; object-position: center; box-shadow: 0 24px 58px rgba(45,25,15,.18); }

.finalCta { min-height: 500px; padding: 80px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 70px; color: white; background: var(--ink); }
.finalCta .eyebrow { color: #ffbd56; }
.finalCta h2 { margin-bottom: 0; font-size: clamp(4rem, 7vw, 8.4rem); }
.lightButton { color: var(--ink) !important; border-color: white; background: white; }

.footer { min-height: 140px; padding: 30px clamp(24px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: white; background: var(--ink); }
.footer p { margin: 0; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.footer > a { justify-self: end; color: var(--orange); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 140px; }
  .heroCopy { max-width: 900px; }
  .heroVisual { width: min(820px, 100%); margin: 20px auto 0; }
  .promise { grid-template-columns: repeat(2, 1fr); }
  .promise article:nth-child(2) { border-right: 0; }
  .promise article:nth-child(-n + 2) { border-bottom: 1px solid rgba(255,255,255,.15); }
  .jokiPairing { grid-template-columns: .9fr 1.1fr; gap: 55px; }
  .business { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 840px) {
  .nav { grid-template-columns: 1fr auto; }
  .navLinks { display: none; }
  .navHome { display: inline-flex; }
  .flavorGrid { grid-template-columns: 1fr; }
  .combine,
  .jokiPairing,
  .business { grid-template-columns: 1fr; }
  .combineVisual { min-height: 620px; }
  .jokiPairing { padding-top: 80px; }
  .menuPoster { width: min(580px, 90%); }
  .businessCopy { grid-row: 1; }
  .businessVisual { min-height: 620px; }
  .sectionIntro { grid-template-columns: 1fr; gap: 22px; }
  .galleryGrid { grid-template-columns: 1fr 1fr; }
  .galleryGrid figure:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 3; width: min(100%, 520px); justify-self: center; }
}

@media (max-width: 620px) {
  .nav { min-height: 72px; padding: 12px 18px; }
  .brand strong { font-size: 1.6rem; }
  .brand i { font-size: .39rem; }
  .navActions { gap: 6px; }
  .navHome,
  .navCta { min-height: 40px; padding: 0 11px; font-size: .55rem; }
  .hero { padding: 116px 18px 54px; background-position: 62% bottom; }
  .hero h1 { font-size: clamp(3.15rem, 14vw, 4.25rem); }
  .heroActions,
  .pairingActions { display: grid; }
  .primaryButton,
  .secondaryButton,
  .lightButton { width: 100%; }
  .heroFacts { display: grid; }
  .heroFacts li { text-align: center; }
  .heroVisual { height: 520px; }
  .heroVisual > img { right: 50%; bottom: 3%; width: min(78%, 340px); height: auto; max-height: 88%; border-width: 7px; transform: translateX(50%) rotate(1deg); }
  .orangeOrb { right: -18%; width: 98%; }
  .heroSeal { right: 0; bottom: 0; width: 102px; font-size: 1.05rem; }
  .promise { grid-template-columns: 1fr; }
  .promise article,
  .promise article:nth-child(2) { min-height: 110px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .flavors,
  .gallery { padding: 78px 14px; }
  .sectionIntro { padding: 0 6px; margin-bottom: 42px; }
  .sectionIntro h2,
  .combineCopy h2,
  .pairingCopy h2,
  .businessCopy h2 { font-size: clamp(3.7rem, 16vw, 5.2rem); }
  .flavorCard { min-height: auto; }
  .flavorImage { min-height: 0; }
  .flavorCopy { min-height: 200px; padding: 28px 24px 30px; }
  .combineCopy,
  .pairingCopy,
  .businessCopy { padding: 76px 20px; }
  .combineVisual,
  .businessVisual { min-height: 0; padding: 18px; }
  .jokiPairing { padding: 70px 14px; gap: 52px; }
  .menuPoster { width: calc(100% - 26px); }
  .galleryGrid { grid-template-columns: 1fr; }
  .galleryGrid figure,
  .galleryGrid figure:last-child { grid-column: auto; aspect-ratio: 2 / 3; }
  .finalCta { padding: 70px 20px; grid-template-columns: 1fr; gap: 36px; }
  .finalCta h2 { font-size: clamp(4rem, 18vw, 6rem); }
  .footer { padding: 34px 20px; grid-template-columns: 1fr auto; gap: 18px; }
  .footer p { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .page *,
  .page *::before,
  .page *::after { scroll-behavior: auto; transition-duration: .01ms !important; }
}