/* ==========================================================================
   SAIKO PROTEIN WATER — landing page
   ========================================================================== */

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ROOT VARIABLES */
:root {
  --orange: #f5551a;
  --orange-bright: #ff6a2b;
  --ink: #090d14;
  --night: #060a10;
  --night-soft: #0b1018;
  --sky: #d9e4ee;
  --ice: #e6eef6;
  --steel: #5f7b9a;
  --white: #ffffff;
  --muted: #3c4656;
  --line-dark: rgba(9, 13, 20, 0.35);
  --line-light: rgba(255, 255, 255, 0.45);

  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Chakra Petch", "Space Mono", sans-serif;
    /* --font-logo: "Saira Stencil One", "Anton", sans-serif; */

  --gutter: clamp(20px, 7vw, 150px);
  --radius-pill: 999px;
  --ease: 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  --d: min(0.15625vw, 2.6px); /* 1 design px of the 640px reference (logo + emblem sizing) */
}

/* GLOBAL */
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

.sk-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* TYPOGRAPHY */
.sk-micro {
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.95vw, 12px);
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sk-rule { display: block; width: clamp(18px, 2.6vw, 34px); height: 1px; background: currentColor; }
.sk-rule-dark { color: var(--ink); opacity: 0.55; }
.sk-rule-light { color: var(--white); opacity: 0.6; }

/* PILL BUTTONS */
.sk-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: clamp(11px, 1.35vw, 17px) clamp(20px, 2.6vw, 36px);
  border: 1px solid;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: transform var(--ease), background-color var(--ease), color var(--ease), border-color var(--ease);
}
.sk-pill:hover { transform: translateY(-2px); }
.sk-pill-arrow { font-size: 1.3em; line-height: 1; letter-spacing: 0; transition: transform var(--ease); }
.sk-pill:hover .sk-pill-arrow { transform: translateX(3px); }
.sk-pill-light { color: var(--ink); border-color: var(--ink); background: rgba(255, 255, 255, 0.55); }
.sk-pill-light:hover { background: var(--ink); color: var(--white); }
.sk-pill-ghost { color: var(--white); border-color: var(--line-light); background: rgba(6, 10, 16, 0.45); backdrop-filter: blur(4px); }
.sk-pill-ghost:hover { background: var(--white); color: var(--night); border-color: var(--white); }

/* REVEAL (only active when JS is present; hero is never hidden) */
.sk-js .sk-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.sk-js .sk-reveal.sk-is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.sk-hero {
  position: relative;
  min-height: clamp(500px, 56.25vw, 940px);
  background: var(--sky);
  overflow: hidden;
  isolation: isolate;
}
.sk-hero-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 80% 60%;
}
.sk-hero-inner {
  position: relative;
  min-height: inherit;
  padding: clamp(18px, 3vw, 54px) var(--gutter) clamp(30px, 4.5vw, 80px);
  display: flex; flex-direction: column;
}

.sk-logo {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-logo);
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--d) * 32);
  margin-top: 30px;
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: var(--orange);
}

.sk-hero-meta {
  position: absolute;
  top: clamp(20px, 3.8vw, 64px);
  right: clamp(60px, 15vw, 330px);
  display: flex; gap: clamp(26px, 4.8vw, 90px);
  font-size: clamp(7px, 0.75vw, 11px);
  letter-spacing: 0.2em;
  color: var(--ink);
}

.sk-hero-copy { margin-top: clamp(0px, 2.4vw, 50px); display: flex; flex-direction: column; align-items: flex-start; }
.sk-hero-tag { color: var(--ink); line-height: 1.35; margin-bottom: clamp(12px, 2.4vw, 44px); }
.sk-hero-copy > .sk-rule { margin: -6px 0 0; display: none; }

.sk-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(54px, 8.3vw, 156px);
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--ink);
      padding-top: 100px;
}
.sk-hero-line { display: block; white-space: nowrap; }
.sk-hero-line em {
  display: inline-block;
  font-style: normal;
  transform: skewX(-11deg);
  padding-right: 0.08em;
  background: linear-gradient(100deg, #101c2e 0%, #3c5878 42%, #8fa9c4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.sk-hero-kicker {
  margin-top: clamp(12px, 1.8vw, 34px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(11px, 1.55vw, 24px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.sk-hero-text {
  margin: clamp(10px, 1.5vw, 26px) 0 clamp(18px, 2.7vw, 50px);
  font-size: clamp(12px, 1.35vw, 21px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}

.sk-hero-side {
  position: absolute;
  right: clamp(12px, 3.2vw, 70px);
  top: 42%;
  color: var(--white);
  font-size: clamp(7px, 0.75vw, 11px);
  line-height: 1.55;
  letter-spacing: 0.22em;
  opacity: 0.9;
}
.sk-hero-side .sk-rule { margin-top: 14px; }

.sk-hero-emblem {
  position: absolute; left: calc(100% - var(--d) * 61); top: calc(var(--d) * 21);
  width: calc(var(--d) * 42); height: calc(var(--d) * 54);
  filter: drop-shadow(0 2px 5px rgba(244, 81, 22, 0.25));
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */
.sk-benefits { background: var(--night); color: var(--white); padding: clamp(22px, 3.2vw, 56px) var(--gutter); }
.sk-benefits-list { display: flex; align-items: stretch; justify-content: space-between; max-width: 1500px; margin: 0 auto; }
.sk-benefit {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(8px, 1.2vw, 16px);
  padding: 0 8px;
  position: relative;
}
.sk-benefit + .sk-benefit::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: clamp(34px, 4.6vw, 64px);
  background: rgba(255, 255, 255, 0.2);
}
.sk-benefit-icon {
  width: clamp(24px, 3.5vw, 46px); height: auto;
  fill: none; stroke: var(--white); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.sk-benefit-label { font-size: clamp(7.5px, 0.85vw, 12px); line-height: 1.6; letter-spacing: 0.2em; opacity: 0.85; }

/* ==========================================================================
   BUILT DIFFERENT
   ========================================================================== */
.sk-built { position: relative; background: var(--night); color: var(--white); min-height: clamp(300px, 40vw, 700px); overflow: hidden; isolation: isolate; display: flex; }
.sk-built-img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 40%;
}
.sk-built::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4, 7, 11, 0.55) 0%, rgba(4, 7, 11, 0) 55%);
}
.sk-built-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(28px, 4vw, 70px) var(--gutter);
}
.sk-built-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(46px, 7.4vw, 140px); line-height: 0.92; color: var(--white);
}
.sk-built-sub {
  margin-top: clamp(8px, 1.2vw, 20px);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(24px, 3.9vw, 72px); line-height: 1; color: var(--orange);
}
.sk-built-copy .sk-rule { margin: clamp(14px, 2vw, 30px) 0; }
.sk-built-text { max-width: 25em; font-size: clamp(11px, 1.3vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.88); }

.sk-built-list { position: absolute; right: clamp(12px, 3.2vw, 70px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: clamp(12px, 2vw, 34px); font-size: clamp(7px, 0.75vw, 11px); color: var(--white); }
.sk-built-list li { position: relative; padding-bottom: clamp(10px, 1.4vw, 22px); }
.sk-built-list li::after { content: ""; position: absolute; left: 0; bottom: 0; width: clamp(18px, 2vw, 30px); height: 1px; background: var(--line-light); }

/* ==========================================================================
   FLAVOURS
   ========================================================================== */
.sk-flavours { position: relative; background: var(--night); color: var(--white); overflow: hidden; isolation: isolate; aspect-ratio: 736 / 340; min-height: 330px; }
.sk-flavours-img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 80%;
}
.sk-flavours::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 16, 0.55) 0%, rgba(6, 10, 16, 0) 38%, rgba(6, 10, 16, 0) 72%, rgba(6, 10, 16, 0.5) 100%);
  pointer-events: none;
}
.sk-flavours-head { position: absolute; top: clamp(14px, 3.4vw, 64px); left: 0; right: 0; text-align: center; }
.sk-flavours-label { display: inline-flex; align-items: center; gap: 12px; opacity: 0.85; }
.sk-flavours-label .sk-rule { width: clamp(30px, 5vw, 80px); }
.sk-flavours-title {
  margin-top: clamp(4px, 1vw, 16px);
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 5.9vw, 112px); line-height: 1.05;
  letter-spacing: 0.24em; padding-left: 0.24em;
  color: var(--white);
}
.sk-flavours-side {
  position: absolute; right: clamp(12px, 5vw, 110px); top: 61%;
  font-size: clamp(7px, 0.75vw, 11px); line-height: 1.6; letter-spacing: 0.2em; color: var(--white);
}
.sk-flavours-side .sk-rule { margin-top: 12px; }

.sk-notify { position: absolute; left: 50%; bottom: clamp(14px, 3.3vw, 60px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; width: max-content; max-width: 92%; }
.sk-notify .sk-pill { min-width: clamp(190px, 29vw, 440px); }
.sk-notify-form { width: min(440px, 88vw); padding: 14px; border-radius: 22px; background: rgba(6, 10, 16, 0.78); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); }
.sk-notify-form[hidden] { display: none; }
.sk-notify-field { display: flex; align-items: center; border: 1px solid var(--line-light); border-radius: var(--radius-pill); padding: 4px 4px 4px 20px; background: rgba(255, 255, 255, 0.06); }
.sk-notify-input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--white); font-size: 14px; padding: 9px 0; }
.sk-notify-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.sk-notify-field:focus-within { border-color: var(--orange); }
.sk-notify-submit { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--orange); color: var(--white); font-size: 17px; line-height: 1; transition: background-color var(--ease), transform var(--ease); }
.sk-notify-submit:hover { background: var(--orange-bright); transform: scale(1.06); }
.sk-notify-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.sk-notify-check input { accent-color: var(--orange); }
.sk-notify-msg { min-height: 1.4em; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.sk-notify-msg.sk-is-error { color: #ffb08f; }
.sk-notify-msg.sk-is-ok { color: #ffd2bd; }

/* ==========================================================================
   CLEAN INGREDIENTS
   ========================================================================== */
.sk-clean { position: relative; background: var(--ice); color: var(--ink); min-height: clamp(300px, 41vw, 700px); overflow: hidden; isolation: isolate; display: flex; }
.sk-clean-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.sk-clean-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 70px) var(--gutter); }
.sk-clean-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 5.7vw, 108px); line-height: 0.96; color: var(--ink);
}
.sk-clean-title span { color: var(--orange); }
.sk-clean-text { margin-top: clamp(12px, 1.6vw, 26px); max-width: 24em; font-size: clamp(11px, 1.3vw, 20px); line-height: 1.55; color: #1c2430; }
.sk-clean-copy .sk-rule { margin: clamp(14px, 2vw, 30px) 0 clamp(10px, 1.4vw, 22px); }

.sk-clean-list { position: absolute; right: clamp(12px, 3.2vw, 70px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; width: clamp(96px, 12.5vw, 220px); font-size: clamp(7px, 0.75vw, 11px); color: var(--ink); text-shadow: 0 0 8px rgba(230, 238, 246, 0.95), 0 0 3px rgba(230, 238, 246, 0.9); }
.sk-clean-list li { padding: clamp(10px, 1.5vw, 24px) 0; border-bottom: 1px solid var(--line-dark); }
.sk-clean-list li:first-child { border-top: 1px solid var(--line-dark); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sk-footer {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: clamp(14px, 2vw, 34px) var(--gutter);
  background: var(--night-soft); color: var(--white);
}
.sk-footer-logo { display: inline-block; font-family: var(--font-logo); font-weight: 700; text-transform: uppercase; font-size: calc(var(--d) * 28); line-height: 0.8; letter-spacing: 0.02em; color: var(--orange); }
.sk-footer-name { font-size: clamp(7px, 0.85vw, 12px); letter-spacing: 0.3em; opacity: 0.85; white-space: nowrap; }
.sk-footer-rule { flex: 1; max-width: clamp(60px, 9vw, 160px); height: 1px; background: rgba(255, 255, 255, 0.45); }
.sk-footer-tag { margin-left: auto; font-size: clamp(7px, 0.85vw, 12px); letter-spacing: 0.26em; opacity: 0.85; text-align: right; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .sk-hero-meta { right: 16vw; gap: 22px; }
  .sk-benefit-label { letter-spacing: 0.14em; }
}

/* Stack image + text on phones */
@media (max-width: 600px) {
  :root { --gutter: 22px; }
  .sk-micro { font-size: 10px; }

  /* hero: copy first, product image below */
  .sk-hero { min-height: 0; background: linear-gradient(180deg, #dbe6ef 0%, #cfdce9 100%); }
  .sk-hero-img { position: static; z-index: 0; order: 2; height: auto; aspect-ratio: 5 / 6; object-position: 77% 50%; }
  .sk-hero { display: flex; flex-direction: column; }
  .sk-hero-inner { min-height: 0; padding: 20px var(--gutter) 28px; }
  .sk-hero-meta { display: none; }
  .sk-hero-side { display: none; }
  .sk-logo { font-size: 46px; }
  .sk-hero-emblem { left: auto; right: var(--gutter); top: 24px; width: 40px; height: 48px; }
  .sk-hero-copy { margin-top: 18px; }
  .sk-hero-title { font-size: clamp(54px, 17vw, 80px); }
  .sk-hero-kicker { font-size: 14px; }
  .sk-hero-text { font-size: 14px; }
  .sk-pill { font-size: 11px; padding: 14px 26px; }

  /* benefits: 2 x 2 (+1 centered) */
  .sk-benefits { padding: 28px var(--gutter); }
  .sk-benefits-list { flex-wrap: wrap; row-gap: 26px; }
  .sk-benefit { flex: 0 0 50%; }
  .sk-benefit:last-child { flex-basis: 100%; }
  .sk-benefit + .sk-benefit::before { display: none; }
  .sk-benefit-icon { width: 32px; }
  .sk-benefit-label { font-size: 10px; }

  /* built different */
  .sk-built { display: block; min-height: 0; }
  .sk-built-img { position: static; z-index: 0; height: auto; aspect-ratio: 4 / 3; object-position: 68% 50%; }
  .sk-built::after { display: none; }
  .sk-built-inner { flex-direction: column; align-items: flex-start; padding: 28px var(--gutter) 36px; gap: 26px; }
  .sk-built-title { font-size: clamp(52px, 17vw, 80px); }
  .sk-built-sub { font-size: clamp(30px, 9vw, 44px); }
  .sk-built-text { font-size: 14px; }
  .sk-built-list { position: static; transform: none; flex-direction: row; gap: 22px; width: 100%; font-size: 10px; }
  .sk-built-list li { flex: 1; }

  /* flavours */
  .sk-flavours { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; padding-top: 26px; background: #05080d; }
  .sk-flavours::after { display: none; }
  .sk-flavours-head { position: static; }
  .sk-flavours-title { font-size: clamp(34px, 11vw, 56px); letter-spacing: 0.2em; padding-left: 0.2em; }
  .sk-flavours-img { position: static; z-index: 0; height: auto; aspect-ratio: 16 / 10; margin-top: 12px; object-position: 50% 55%; }
  .sk-flavours-side { position: static; align-self: flex-start; margin: 4px var(--gutter) 20px; font-size: 10px; order: 3; }
  .sk-notify { position: static; transform: none; width: auto; max-width: none; padding: 4px var(--gutter) 32px; order: 4; }
  .sk-notify .sk-pill { min-width: 0; width: 100%; }

  /* clean */
  .sk-clean { display: block; min-height: 0; }
  .sk-clean-img { position: static; z-index: 0; height: auto; aspect-ratio: 4 / 3; object-position: 85% 50%; }
  .sk-clean-inner { flex-direction: column; align-items: flex-start; padding: 28px var(--gutter) 36px; gap: 26px; }
  .sk-clean-title { font-size: clamp(44px, 14vw, 68px); }
  .sk-clean-text { font-size: 14px; }
  .sk-clean-list { position: static; transform: none; width: 100%; font-size: 10px; }

  /* footer */
  .sk-footer { flex-wrap: wrap; row-gap: 8px; }
  .sk-footer-logo { font-size: 24px; }
  .sk-footer-rule { display: none; }
  .sk-footer-name, .sk-footer-tag { font-size: 9px; }
}

/* DESKTOP VIEWPORT SIZING
   Screen 1 = hero, Screen 2 = benefits + built, Screen 3 = flavours, Screen 4 = clean ingredients.
   Only heights / vertical spacing are tuned here; everything is capped by the existing vw sizes. */
@media (min-width: 1024px) {
  /* screen 1 */
  .sk-hero { height: 100svh; min-height: 540px; }
  .sk-hero-inner { padding-top: min(3vw, 3.6svh); padding-bottom: min(4.5vw, 4svh); }
  .sk-hero-copy { margin-top: min(2.4vw, 2.4svh); }
  .sk-hero-tag { margin-bottom: min(2.4vw, 2.2svh); }
  .sk-hero-title { font-size: clamp(54px, min(8.3vw, 12.4svh), 156px); }
  .sk-hero-kicker { margin-top: min(1.8vw, 2svh); font-size: clamp(11px, min(1.55vw, 2.4svh), 24px); }
  .sk-hero-text { margin: min(1.5vw, 1.6svh) 0 min(2.7vw, 3svh); font-size: clamp(12px, min(1.35vw, 2.1svh), 21px); }

  /* screen 2: benefits + built ≈ 100svh */
  .sk-benefits { height: 23svh; min-height: 120px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
  .sk-benefits-list { width: 100%; }
  .sk-built { height: 77svh; min-height: 0; }
  .sk-built-inner { padding-top: min(4vw, 4svh); padding-bottom: min(4vw, 4svh); }
  .sk-built-title { font-size: clamp(46px, min(7.4vw, 12svh), 140px); }
  .sk-built-sub { margin-top: min(1.2vw, 1.4svh); font-size: clamp(24px, min(3.9vw, 6.4svh), 72px); }
  .sk-built-copy .sk-rule { margin: min(2vw, 2.2svh) 0; }
  .sk-built-text { font-size: clamp(11px, min(1.3vw, 2.1svh), 20px); }

  /* screen 3 */
  .sk-flavours { height: 100svh; min-height: 540px; aspect-ratio: auto; }
  .sk-flavours-head { top: min(3.4vw, 4svh); }
  .sk-flavours-title { font-size: clamp(30px, min(5.9vw, 10svh), 112px); }

  /* screen 4 */
  .sk-clean { min-height: 100svh; }
  .sk-clean-inner { padding-top: min(4vw, 4svh); padding-bottom: min(4vw, 4svh); }
  .sk-clean-title { font-size: clamp(38px, min(5.7vw, 9.6svh), 108px); }
  .sk-clean-text { margin-top: min(1.6vw, 1.8svh); font-size: clamp(11px, min(1.3vw, 2.1svh), 20px); }
  .sk-clean-copy .sk-rule { margin: min(2vw, 2.2svh) 0 min(1.4vw, 1.6svh); }
}

/* DESKTOP HERO IMAGE FRAMING
   The whole 16:9 photo stays visible at any desktop shape. A blurred copy of the same
   photo extends the sky where the viewport is wider/taller than 16:9. */
@media (min-width: 1024px) {
  .sk-hero::before {
    content: ""; position: absolute; inset: -4%; z-index: -2;
    background: url("images/saiko_hero_clean.jpg") 0% 30% / cover no-repeat;
    filter: blur(26px);
  }
  .sk-hero-meta { right: 16vw; }
}
/* wider than 16:9: fit the height, anchor right, fade the photo's left edge into the sky */
@media (min-width: 1024px) and (min-aspect-ratio: 16/9) {
  .sk-hero-img {
    inset: 0 0 0 auto; width: auto; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%);
  }
}
/* taller than 16:9: fit the width, anchor bottom; the strip above is filled with the photo's own top-edge sky colours */
@media (min-width: 1024px) and (max-aspect-ratio: 16/9) {
  .sk-hero::before {
    inset: 0; filter: none;
    background: linear-gradient(90deg, #bfd4e2 0, #c2d6e4 10%, #c0d5e3 20%, #bad1df 30%, #c2d7e6 40%, #cfe1eb 50%, #c3d9e7 60%, #cae0ee 70%, #bbd6e6 80%, #b1d0e4 90%, #aecbdc 100%);
  }
  .sk-hero-img {
    inset: auto 0 0 0; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%), radial-gradient(ellipse 5.2% 12% at 93.3% 6.2%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%), radial-gradient(ellipse 5.2% 12% at 93.3% 6.2%, #000 55%, transparent 100%);
  }
  .sk-hero-side { top: calc(100svh - 33.2vw); }
}

/* near-16:9 and wider: the can's top reaches the label row, so keep the labels in the gap between logo and can */
@media (min-width: 1024px) and (min-aspect-ratio: 17/10) {
  .sk-hero-meta { right: 36vw; gap: 2.6vw; }
}

@media (max-width: 380px) {
  .sk-logo { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sk-js .sk-reveal { opacity: 1; transform: none; transition: none; }
  .sk-pill, .sk-pill-arrow, .sk-notify-submit { transition: none; }
}