@font-face {
  font-family: Carlito;
  src: url("assets/fonts/carlito-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Carlito;
  src: url("assets/fonts/carlito-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #0d1010;
  --lime: #c4ff00;
  --cyan: #58c2e9;
  --white: #fff;
  --muted: #c6c6be;
  --u: min(.0694444444vw, 1px);
  --header-height: calc(140 * var(--u));
  --footer-height: calc(37 * var(--u));
  --float-size: calc(58 * var(--u));
  --float-right: calc(28 * var(--u));
  --float-bottom: calc(160 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; color: var(--white); background: var(--black); font-family: Carlito, Calibri, Arial, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 110; top: 12px; left: 12px; padding: 12px 18px; background: var(--lime); color: var(--black); transform: translateY(-180%); font-weight: 700; }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-height);
  background: var(--black);
}
.brand {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  height: 100%;
  margin-left: calc(70 * var(--u));
  text-decoration: none;
}
.brand__logo { position: absolute; top: calc(8 * var(--u)); left: 0; width: calc(120 * var(--u)); height: calc(120 * var(--u)); object-fit: contain; }
.brand__words { display: block; margin-left: calc(136 * var(--u)); padding-top: calc(39 * var(--u)); white-space: nowrap; }
.brand__name { display: block; font-size: calc(32 * var(--u)); line-height: 1.15; font-weight: 700; }
.brand__status { display: block; margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1; font-weight: 700; color: var(--cyan); }

.scene {
  position: relative;
  isolation: isolate;
  height: max(100svh, min(62.5vw, 900px));
  min-height: 620px;
  overflow: hidden;
  scroll-margin-top: var(--header-height);
}
.scene__picture { position: absolute; inset: 0; z-index: -2; display: block; }
.scene__picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene__footer { position: absolute; inset: auto 0 0; display: flex; align-items: flex-start; height: var(--footer-height); padding: calc(9 * var(--u)) calc(22 * var(--u)) 0; background: rgb(13 16 16 / 96%); }
.scene__footer small { color: var(--muted); font-size: calc(13 * var(--u)); line-height: 1.2; }
.content { position: absolute; }
.content h1, .content h2, .content p { margin: 0; font-weight: 400; }
.button {
  display: flex;
  align-items: center;
  width: calc(310 * var(--u));
  min-height: max(44px, calc(54 * var(--u)));
  padding: calc(15 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--lime);
  border-radius: 3px;
  color: var(--black);
  background: var(--lime);
  text-decoration: none;
  font-size: max(16px, calc(18 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
  transition: filter 150ms ease, box-shadow 150ms ease;
}
.button:hover { filter: brightness(1.08); box-shadow: 0 0 22px rgb(196 255 0 / 16%); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: rgb(13 16 16 / 22%); }
.hero__content { left: 0; top: calc(45.5555556% - 25 * var(--u)); width: calc(710 * var(--u)); padding: calc(25 * var(--u)) 0 calc(1 * var(--u)) calc(70 * var(--u)); background: rgb(13 16 16 / 72%); }
.hero h1 { max-width: calc(600 * var(--u)); color: var(--lime); font-size: calc(58 * var(--u)); line-height: 1.35; font-weight: 700; }
.hero p { margin-top: calc(20 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.35; max-width: calc(600 * var(--u)); }
.hero .button { margin-top: calc(25 * var(--u)); }

.store__content { left: 0; top: calc(65% - 24 * var(--u)); bottom: var(--footer-height); width: calc(700 * var(--u)); padding: calc(24 * var(--u)) 0 0 calc(70 * var(--u)); background: rgb(13 16 16 / 70%); }
.eyebrow { display: block; margin-bottom: calc(11 * var(--u)); color: var(--lime); font-size: calc(15 * var(--u)); line-height: 1; font-weight: 700; }
.store h2 { max-width: calc(600 * var(--u)); font-size: calc(48 * var(--u)); line-height: 1.35; font-weight: 700; }
.store p { max-width: calc(600 * var(--u)); margin-top: calc(15 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.35; }
.store .button { margin-top: calc(23 * var(--u)); }

.drinks__content { left: 0; right: 0; bottom: var(--footer-height); height: calc(163 * var(--u)); padding: calc(19 * var(--u)) calc(70 * var(--u)) 0; background: rgb(13 16 16 / 85%); }
.drinks h2 { font-size: calc(35 * var(--u)); line-height: 1.35; font-weight: 700; }
.drinks p { margin-top: calc(15 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.35; max-width: calc(920 * var(--u)); }
.drinks .button { position: absolute; top: calc(80 * var(--u)); right: calc(70 * var(--u)); width: calc(300 * var(--u)); }
.drinks__disclaimer { position: absolute; left: calc(70 * var(--u)); bottom: calc(17 * var(--u)); color: var(--muted); font-size: calc(12 * var(--u)); line-height: 1.2; }
.drinks__description--mobile { display: none; }

/* Section titles repeat the blue used on the SILVA lettering. */
.store h2, .drinks h2 { color: var(--cyan); }
.hero p, .store p, .drinks p { color: var(--white); }

.whatsapp-float {
  position: fixed;
  z-index: 70;
  right: max(var(--float-right), env(safe-area-inset-right));
  bottom: max(var(--float-bottom), calc(env(safe-area-inset-bottom) + 20px));
  display: grid;
  place-items: center;
  width: var(--float-size);
  height: var(--float-size);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 3px 0 3px rgb(0 0 0 / 28%);
  transform: translateY(var(--float-shift, 0px));
  transition: transform 120ms ease-out, box-shadow 150ms ease;
  will-change: transform;
}
.whatsapp-float img { width: calc(100% - 20 * var(--u)); height: calc(100% - 20 * var(--u)); }
.whatsapp-float:hover { box-shadow: 0 3px 0 3px rgb(0 0 0 / 28%), 0 0 20px rgb(37 211 102 / 30%); }

@media (max-width: 767px) {
  :root {
    --u: .2380952381vw;
    --header-height: calc(112 * var(--u));
    --float-size: calc(54 * var(--u));
    --float-right: calc(18 * var(--u));
    --float-bottom: calc(160 * var(--u));
  }
  .site-header { padding-top: env(safe-area-inset-top); height: calc(var(--header-height) + env(safe-area-inset-top)); }
  .brand { margin-left: calc(26 * var(--u)); }
  .brand__logo { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
  .brand__words { margin-left: calc(112 * var(--u)); padding-top: calc(33 * var(--u)); }
  .brand__name { font-size: calc(22 * var(--u)); }
  .brand__status { margin-top: calc(12 * var(--u)); font-size: calc(11 * var(--u)); }
  .scene { height: max(100svh, 200vw); min-height: 0; }
  .scene__footer small { font-size: calc(9 * var(--u)); }
  .button { width: calc(368 * var(--u)); min-height: max(44px, calc(54 * var(--u))); font-size: calc(18 * var(--u)); }
  .hero__content { top: auto; bottom: calc(67.8 * var(--u)); width: 100%; padding: calc(25 * var(--u)) calc(26 * var(--u)) calc(30.8 * var(--u)); margin-bottom: calc(-30.8 * var(--u)); }
  .hero h1 { max-width: none; font-size: calc(38 * var(--u)); }
  .hero p { max-width: none; font-size: calc(18 * var(--u)); }
  .store__background { top: var(--header-height); }
  .store__content { top: auto; bottom: var(--footer-height); width: 100%; padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u)); }
  .eyebrow { margin-bottom: calc(14 * var(--u)); font-size: calc(12 * var(--u)); }
  .store h2 { max-width: none; font-size: calc(34 * var(--u)); }
  .store p { max-width: none; font-size: calc(18 * var(--u)); }
  .store .button { margin-top: calc(23 * var(--u)); }
  .drinks__content { height: calc(243 * var(--u)); padding: calc(30 * var(--u)) calc(26 * var(--u)) 0; background: rgb(13 16 16 / 80%); }
  .drinks h2 { font-size: calc(24 * var(--u)); line-height: 1.35; }
  .drinks p { margin-top: calc(15 * var(--u)); font-size: calc(16 * var(--u)); }
  .drinks__description--desktop { display: none; }
  .drinks__description--mobile { display: block; }
  .drinks .button { position: static; width: calc(368 * var(--u)); margin-top: calc(20 * var(--u)); }
  .drinks__disclaimer { left: calc(26 * var(--u)); bottom: auto; top: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }
}

/* Panoramic monitors only: two sharp photographic halves, without blur.
   Hero and drinks reflect the scene; the storefront pairs with drink references. */
@media (min-width: 1280px) and (min-aspect-ratio: 2/1) {
  .scene { height: 100svh; }
  .hero { --panorama-image: url("assets/images/hero-desktop.webp"); }
  .store { --panorama-image: url("assets/images/hero-desktop.webp"); }
  .drinks { --panorama-image: url("assets/images/freezers-desktop.webp"); }
  .scene::before {
    content: "";
    position: absolute;
    inset: var(--header-height) 50% var(--footer-height) 0;
    z-index: -3;
    background: var(--panorama-image) center right / cover no-repeat;
    transform: scaleX(-1);
  }
  .store::before { display: none; }
  .scene__picture {
    left: 50%;
    top: var(--header-height);
    bottom: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scene__picture img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    mask-image: none;
  }
  .store .scene__picture { left: 0; }
  .store .scene__picture img { object-fit: cover; object-position: center; }
  .store__content {
    top: auto;
    bottom: var(--footer-height);
    width: min(700px, 50%);
    padding: 24px 32px 24px 70px;
  }
}

@media (min-width: 1280px) and (min-aspect-ratio: 3/1) {
  .scene::before { background-size: cover; }
  .scene__picture img { object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}