/* ============================================
   POCKY PREMIUM MICROSITE - STYLESHEET
   ============================================ */

/* -------------------------
   CSS VARIABLES
------------------------- */
:root {
  /* Brand Colors */
  --color-pocky-red: #E60012;
  --color-maroon: #361019;
  --color-brown: #4B3600;
  --color-gold: #D1BC76;
  --color-gold-dark: #9A7F3C;
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-cream: #FFFBEF;
  --color-black: #000000;
  
  /* Typography */
  --font-family: 'Inter', sans-serif;
  
  /* Mobile design unit: 1 design px on the 750px mobile artboard.
     Phones render the page at ~375-430px, i.e. half the artboard,
     so "22px" in the mobile design = calc(22 * var(--m)) ≈ 11-12.6px.
     Capped at 600px so tablets don't blow up. */
  --m: calc(min(100vw, 600px) / 750);

  /* Desktop design unit: 1 design px on the 1440px desktop artboard.
     From 640px wide (landscape phones, tablets, laptops) the DESKTOP
     layout is used and scales down proportionally; at 1440px+ it is
     1:1 with the design. --u is what the rules use:
       phones (portrait) -> --u = 1px   (mobile rules unchanged)
       640px and wider   -> --u = --d   (scaled desktop)          */
  --d: calc(min(100vw, 1440px) / 1440);
  --u: 1px;

  /* Spacing */
  --container-mobile: 750px;
  --container-desktop: 1200px;
  --padding-mobile: 25px;
  --padding-desktop: 120px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index layers */
  --z-background: 1;
  --z-content: 10;
  --z-overlay: 20;
  --z-navigation: 100;
  --z-mobile-menu: 200;
  --z-cookie: 300;
}

/* Use the page width without the scrollbar where supported */
@supports (width: 1cqw) {
  body {
    container-type: inline-size;
  }

  body * {
    --d: calc(min(100cqw, 1440px) / 1440);
  }
}

@media (min-width: 640px) {
  :root,
  body * {
    --u: var(--d);
  }
}

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

html {
  font-size: max(11px, calc(16 * var(--u)));
  scroll-behavior: smooth;
    /* Fills the iPhone notch area and the bounce area when scrolling past
     the top/bottom. Dark hero red instead of white. */
  background-color: #2B0A0E;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-brown);
  background-color: var(--color-white);
  overflow-x: hidden;
}

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

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

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

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

/* -------------------------
   TYPOGRAPHY
------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: max(11px, calc(28 * var(--u)));
  color: var(--color-pocky-red);
}

h2 {
  font-size: max(11px, calc(22 * var(--u)));
  color: var(--color-maroon);
}

h3 {
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 600;
  color: var(--color-brown);
}

h4 {
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 600;
  color: var(--color-brown);
}

p {
  font-size: max(11px, calc(16 * var(--u)));
  color: var(--color-brown);
}

/* Desktop Typography */
@media (min-width: 640px) {
  h1 {
    font-size: max(11px, calc(48 * var(--u)));
  }
  
  h2 {
    font-size: max(11px, calc(32 * var(--u)));
  }
  
  h3 {
    font-size: max(11px, calc(24 * var(--u)));
  }
  
  h4 {
    font-size: max(11px, calc(18 * var(--u)));
  }
  
  p {
    font-size: max(11px, calc(18 * var(--u)));
  }
}

/* -------------------------
   CONTAINER
------------------------- */
.container-content {
  width: 100%;
  max-width: var(--container-mobile);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-mobile);
  padding-right: var(--padding-mobile);
}

@media (min-width: 640px) {
  .container-content {
    max-width: var(--container-desktop);
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
  }
}

/* ============================================
   NAVIGATION BAR
   ============================================ */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: calc(12 * var(--u)) 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  
  /* Mobile: Red from start */
  background-color: #E60012;
}

/* Desktop: Transparent initially */
@media (min-width: 640px) {
  .nav-bar {
    background-color: transparent;
  }
}

/* Desktop: Red when scrolled */
@media (min-width: 640px) {
  .nav-bar.scrolled {
    background-color: #E60012 !important;
    box-shadow: 0 2px calc(10 * var(--u)) rgba(0, 0, 0, 0.1);
  }
}

.nav-container {
  width: 100%;
  max-width: calc(1440 * var(--u));
  margin: 0 auto;
  padding: 0 calc(25 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 640px) {
  .nav-container {
    padding: 0 calc(120 * var(--u));
  }
}

/* Logo Button */
.nav-logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-logo img {
  height: calc(32 * var(--u));
  width: auto;
}

/* ============================================
   DESKTOP MENU
   ============================================ */
.nav-menu {
  display: none;
}

@media (min-width: 640px) {
  .nav-menu {
    display: block;
  }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav Link Button - Default State */
.nav-link {
  background: none;
  border: none;
  padding: 0;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Nav Link Button - Hover State */
.nav-link:hover {
  color: #D1BC76 !important;
}

/* Nav Link Button - Active State */
.nav-link.active {
  color: #D1BC76 !important;
  font-weight: 600;
}

/* Contact Us Button */
.nav-cta {
  background-color: #D1BC76 !important;
  color: #FFFFFF !important;
  padding: calc(10 * var(--u)) calc(20 * var(--u)) !important;
  border-radius: calc(4 * var(--u));
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.nav-cta:hover {
  background-color: #9A7F3C !important;
  color: #FFFFFF !important;
}

.nav-cta.active {
  background-color: #9A7F3C !important;
  color: #FFFFFF !important;
}

/* ============================================
   HAMBURGER BUTTON (Mobile)
   ============================================ */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(5 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  padding: calc(5 * var(--u));
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 640px) {
  .nav-hamburger {
    display: none;
  }
}

.hamburger-line {
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(calc(7 * var(--u))) rotate(45deg);
}

.nav-hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(calc(-7 * var(--u))) rotate(-45deg);
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: #E60012;
  z-index: 200;
  transition: right 0.3s ease;
  padding: calc(12 * var(--u)) calc(25 * var(--u));
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(40 * var(--u));
}

.mobile-menu-close {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(20 * var(--u));
  height: 2px;
  background-color: #FFFFFF;
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile Menu Link Button - Default */
.mobile-menu-link {
  background: none;
  border: none;
  padding: 0;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  text-align: left;
}

/* Mobile Menu Link Button - Hover */
.mobile-menu-link:hover {
  color: #D1BC76 !important;
}

/* Mobile Menu Link Button - Active */
.mobile-menu-link.active {
  color: #D1BC76 !important;
  font-weight: 600;
}


/* ============================================
   SECTION 1: HERO
   ============================================ */
.section-hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(60 * var(--u)); /* Account for fixed nav */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ============================================
   HERO BACKGROUND - Different for Mobile/Desktop
   (Includes Pocky Box in image)
   ============================================ */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Background */
.hero-background--mobile {
  display: block;
}

.hero-background--desktop {
  display: none;
}

@media (min-width: 640px) {
  /* Desktop/landscape: hero keeps the 1440 x 810 artboard ratio (16:9)
     instead of 100vh, so short landscape screens don't squash it */
  .section-hero {
    min-height: 56.25vw;
  }

  .hero-background--mobile {
    display: none;
  }
  
  .hero-background--desktop {
    display: block;
  }
}

/* ============================================
   CONNECT WITH A SMILE BADGE
   (Top right corner of Hero section)
   ============================================ */
.hero-badge {
  position: absolute; /* Relative to .section-hero */
  z-index: 20;
  object-fit: contain;

  /* Mobile: scaled from 750px XD artboard (116 x 64) */
  width: calc(116 * var(--m));
  height: calc(64 * var(--m));

  /* Mobile: Top right corner
     56px = real nav bar height + 39px gap under nav in XD */
  top: calc(calc(56 * var(--u)) + 39 * var(--m));
  right: calc(41 * var(--m));
}

@media (min-width: 640px) {
  .hero-badge {
    /* Desktop: original size & position */
    width: calc(117 * var(--u));
    height: calc(65 * var(--u));
    top: calc(70 * var(--u));
    right: calc(120 * var(--u));
  }
}

/* ============================================
   HERO CONTENT
   ============================================ */
.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: calc(750 * var(--u));
  margin: 0 auto;
  padding: calc(40 * var(--u)) calc(25 * var(--u));
  
  /* Mobile: Column layout - logos top, tagline bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  min-height: calc(100vh - calc(60 * var(--u)));
}

@media (min-width: 640px) {
  .hero-content {
    max-width: calc(1440 * var(--u));
    padding: calc(60 * var(--u)) calc(120 * var(--u));
    
    /* Desktop: Content on left side only */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    min-height: auto;
  }
}

/* ============================================
   HERO LOGOS (Top on Mobile, Left on Desktop)
   ============================================ */
.hero-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  
  /* Mobile: At top */
  order: 1;
}

@media (min-width: 640px) {
  .hero-logos {
    align-items: flex-start;
    gap: calc(16 * var(--u));
    order: 1;
  }
}

.hero-glico-logo {
  height: calc(36 * var(--u));
  width: auto;
}

@media (min-width: 640px) {
  .hero-glico-logo {
    height: calc(50 * var(--u));
  }
}

.hero-pocky-logo {
  height: calc(70 * var(--u));
  width: auto;
}

@media (min-width: 640px) {
  .hero-pocky-logo {
    height: calc(120 * var(--u));
  }
}

.hero-chocolate-logo {
  height: calc(24 * var(--u));
  width: auto;
}

@media (min-width: 640px) {
  .hero-chocolate-logo {
    height: calc(32 * var(--u));
  }
}

/* ============================================
   HERO TAGLINE (Bottom on Mobile, Below logos on Desktop)
   ============================================ */
.hero-tagline-wrapper {
  /* Mobile: At bottom */
  order: 2;
}

@media (min-width: 640px) {
  .hero-tagline-wrapper {
    /* Desktop: Below logos on left side */
    order: 2;
    margin-top: calc(24 * var(--u));
  }
}

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(16 * var(--u)));
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 640px) {
  .hero-tagline {
    font-size: max(11px, calc(18 * var(--u)));
    text-align: left;
  }
}

/* HAPPINESS STARTER - Gold */
.tagline-highlight {
  color: #D1BC76;
  font-weight: 600;
  letter-spacing: 2px;
  display: block;
  margin-bottom: calc(8 * var(--u));
}

@media (min-width: 640px) {
  .tagline-highlight {
    letter-spacing: calc(3 * var(--u));
  }
}

/* Crafted for Moments, Worth Sharing - White */
.tagline-sub {
  color: #FFFFFF;
  font-weight: 400;
  display: block;
}


/* ============================================
   SECTION 2: THE ORIGIN (Self-hosted video)
   Frame from XD: desktop 891px wide, mobile 582 / 750 artboard.
   ============================================ */
.section-origin {
  background-color: #E60012;
  padding: calc(60 * var(--m)) 0 calc(40 * var(--m));
}

.origin-container {
  display: flex;
  justify-content: center;
  padding: 0 calc(84 * var(--m));
}

.video-player {
  position: relative;
  width: 100%;
  max-width: calc(891 * var(--u));
  aspect-ratio: 16 / 9;          /* change here if the final video isn't 16:9 */
  background: #000000;
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.3);
}

.video-player__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* poster fills the frame */
  background: #000000;
}

.video-player.is-started .video-player__media {
  object-fit: contain;            /* never crop the actual video */
}

/* Big play button (before first play) */
.video-player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.video-player__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58 * var(--m));
  height: calc(58 * var(--m));
  min-width: calc(44 * var(--u));
  min-height: calc(44 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(calc(4 * var(--u)));
  backdrop-filter: blur(calc(4 * var(--u)));
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-player__play-icon svg {
  width: 42%;
  height: 42%;
  margin-left: 6%;                /* optical centre of the triangle */
  fill: #FFFFFF;
}

.video-player__play:hover .video-player__play-icon {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.06);
}

.video-player__play:focus-visible {
  outline: calc(3 * var(--u)) solid #FFFFFF;
  outline-offset: calc(-6 * var(--u));
}

.video-player.is-started .video-player__play {
  display: none;
}

@media (min-width: 640px) {
  .section-origin {
    padding: calc(80 * var(--u)) 0 calc(70 * var(--u));
  }

  .origin-container {
    padding: 0 calc(24 * var(--u));
  }

  .video-player__play-icon {
    width: calc(88 * var(--u));
    height: calc(88 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-player__play-icon {
    transition: none;
  }
}

/* ============================================
   SECTION 3: THE CRAFT
   --------------------------------------------
   MOBILE  : sizes use var(--m) = 1px of the 750px mobile artboard.
             e.g. "22px in the design" -> calc(22 * var(--m)).
             This keeps the layout proportional to the design on every
             phone (375 / 393 / 430px...) instead of being 2x too big.
   DESKTOP : sizes are 1:1 with the 1440px artboard.
   ============================================ */
.section-craft {
  position: relative;
  background: #F4E4C2 url('../images/Backgroud-image-TheStory-section-Mobile.png') top center / 100% auto no-repeat;
}

/* ---------- 3A. STORY ---------- */
.craft-story {
  /* top padding follows the photo baked into the background (199px @375) */
  padding: 53.07vw 0 calc(82 * var(--m));
}

.craft-inner {
  width: 100%;
  max-width: calc(600 * var(--u));
  margin: 0 auto;
}

.craft-intro {
  position: relative;
  text-align: center;
}

/* Decorations (desktop only) */
.craft-deco {
  display: none;
}

.craft-intro-icon {
  width: calc(120 * var(--m));
  height: auto;
  margin: 0 auto;
}

.craft-title {
  margin-top: calc(8 * var(--m));
  font-size: calc(32 * var(--m));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-pocky-red);
}

/* Mobile: one grid, rows/cols "disappear" so items can be re-ordered */
.craft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(12 * var(--m));
  margin-top: calc(72 * var(--m));
  padding: 0 calc(20 * var(--m));
}

.craft-row,
.craft-col {
  display: contents;
}

.story-text-block,
.story-media,
.story-map,
.story-fruit {
  grid-column: 1 / -1;
}

.story-text-block--origin  { order: 1; }
.story-media--1            { order: 2; }
.story-map                 { order: 3; }
.story-text-block--where   { order: 4; }
.story-text-block--born    { order: 5; }
.story-media--2            { order: 6; grid-column: 1; }
.story-media--3            { order: 7; grid-column: 2; }
.story-fruit               { order: 8; }
.story-text-block--climate { order: 9; }

/* Text */
.story-text-block {
  text-align: center;
  padding: 0 calc(4 * var(--m));
}

.story-title {
  font-size: calc(28 * var(--m));
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--color-brown);
  margin-bottom: calc(16 * var(--m));
}

.story-title--origin {
  color: var(--color-maroon);
}

/* secondary titles are a touch smaller than the Origin title on mobile */
.story-text-block--where .story-title,
.story-text-block--born .story-title,
.story-text-block--climate .story-title {
  font-size: calc(26 * var(--m));
}

.story-title--why {
  margin-top: calc(50 * var(--m));
}

.story-text {
  font-size: max(calc(11 * var(--u)), calc(22 * var(--m)));
  line-height: 1.45;
  color: var(--color-brown);
}

.br-desktop {
  display: none;
}

/* Media */
.story-media img {
  width: 100%;
  height: calc(300 * var(--m));
  object-fit: cover;
  border-radius: calc(12 * var(--m));
}

.story-media--1 { margin-top: calc(70 * var(--m)); }
.story-map      { margin-top: calc(26 * var(--m)); padding: 0 calc(8 * var(--m)); }
.story-map > img:not(.craft-deco) { width: 100%; height: auto; }

.story-text-block--where { margin-top: calc(20 * var(--m)); }
.story-text-block--born  { margin-top: calc(70 * var(--m)); }

.story-media--2,
.story-media--3 { margin-top: calc(46 * var(--m)); }

.story-fruit {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: calc(596 * var(--m));
  height: auto;
  margin-top: calc(-36 * var(--m));
}

.story-text-block--climate { margin-top: calc(8 * var(--m)); }

/* ---------- 3B. RED BAND (full width) ---------- */
.craft-band {
  position: relative;
  z-index: 3;
  background: #E60012 url('../images/craft-band-beans.jpg') center / cover no-repeat;
}

.craft-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(230, 0, 18, 0.77); /* matched to design */
}

.craft-band-inner {
  position: relative;
  max-width: calc(600 * var(--u));
  height: calc(400 * var(--m));
  margin: 0 auto;
  padding: 0 calc(50 * var(--m)) 0 calc(258 * var(--m));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.craft-band-stick {
  position: absolute;
  left: calc(54 * var(--m));
  top: calc(-34 * var(--m));
  width: calc(146 * var(--m));
  height: auto;
  pointer-events: none;
}

.craft-band-title {
  font-size: calc(32 * var(--m));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.13;
  color: var(--color-white);
  margin-bottom: calc(28 * var(--m));
}

.craft-band-text {
  font-size: max(calc(11 * var(--u)), calc(22 * var(--m)));
  line-height: 1.25;
  color: var(--color-white);
}

/* ---------- 3C. CAROUSEL ---------- */
.craft-carousel-area {
  position: relative;
  z-index: 2;
  padding: calc(70 * var(--m)) 0 calc(48 * var(--m));
}

.craft-carousel {
  max-width: calc(600 * var(--u));
  margin: 0 auto;
}

.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--m));
}

/* arrow PNG has transparent padding, so the box is a bit bigger than the visible circle */
.carousel-arrow {
  flex: 0 0 auto;
  width: calc(86 * var(--m));
  height: calc(86 * var(--m));
  padding: 0;
  transition: transform var(--transition-fast);
}

.carousel-arrow:hover {
  transform: scale(1.06);
}

.carousel-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-track-wrapper {
  flex: 0 1 calc(492 * var(--m));
  min-width: 0;
  overflow: hidden;
  padding: calc(8 * var(--u)) 0; /* room for the card shadow */
}

.carousel-track {
  display: flex;
  transition: transform var(--transition-medium);
}

.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  padding: 0;
}

.carousel-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEF 100%);
  border-radius: calc(12 * var(--m));
  overflow: hidden;
  box-shadow: 0 2px calc(8 * var(--u)) rgba(0, 0, 0, 0.12);
}

.carousel-card-image {
  width: 100%;
  aspect-ratio: 984 / 676;
}

.carousel-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(250 * var(--m));
  padding: calc(50 * var(--m)) calc(32 * var(--m)) calc(70 * var(--m));
  text-align: center;
}

.carousel-card-title {
  font-size: calc(28 * var(--m));
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--color-brown);
  margin-bottom: calc(14 * var(--m));
}

.carousel-card-text {
  font-size: max(calc(11 * var(--u)), calc(20 * var(--m)));
  line-height: 1.35;
  color: var(--color-brown);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--m));
  margin-top: calc(22 * var(--m));
}

.carousel-dot {
  width: max(calc(8 * var(--u)), calc(16 * var(--m)));
  height: max(calc(8 * var(--u)), calc(16 * var(--m)));
  padding: 0;
  border-radius: 50%;
  background-color: #B59648;
  transition: background-color var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--color-pocky-red);
}

/* ============================================
   THE CRAFT - DESKTOP (1:1 with 1440 artboard)
   ============================================ */
@media (min-width: 640px) {
  .section-craft {
    background: none;
  }

  /* 3A. STORY */
  .craft-story {
   background: #F4E4C2 url('../images/Backgroud-image-TheStory-section-Desktop.png') top center / cover no-repeat;
    padding: max(calc(434 * var(--u)), 30.14vw) 0 calc(90 * var(--u));
  }

  .craft-inner {
    max-width: calc(1248 * var(--u));
    padding: 0 calc(24 * var(--u));
  }

  .craft-intro-icon {
    width: calc(121 * var(--u));
  }

  .craft-deco {
    display: block;
    position: absolute;
    pointer-events: none;
  }

  .craft-deco--paint {
    left: calc(-29 * var(--u));
    top: calc(-15 * var(--u));
    width: calc(265 * var(--u));
  }

  .craft-deco--outline {
    left: -1px;
    top: calc(214 * var(--u));
    width: calc(240 * var(--u));
    z-index: -1;
  }

  .story-map > img:not(.craft-deco) {
    position: relative;
  }

  .craft-title {
    margin-top: calc(13 * var(--u));
    font-size: max(11px, calc(36 * var(--u)));
  }

  .craft-grid {
    display: block;
    margin-top: calc(75 * var(--u));
    padding: 0;
  }

  .craft-row {
    display: grid;
    align-items: start;
    position: relative;
  }

  .craft-col {
    display: block;
  }

  .story-text-block,
  .story-media,
  .story-map,
  .story-fruit,
  .story-text-block--origin,
  .story-media--1,
  .story-text-block--where,
  .story-text-block--born,
  .story-media--2,
  .story-media--3,
  .story-text-block--climate {
    order: 0;
    grid-column: auto;
  }

  .story-text-block {
    text-align: left;
    padding: 0;
  }

  .story-title,
  .story-text-block--where .story-title,
  .story-text-block--born .story-title,
  .story-text-block--climate .story-title {
    font-size: max(11px, calc(22 * var(--u)));
    margin-bottom: calc(16 * var(--u));
  }

  .story-title--origin {
    font-size: max(11px, calc(26 * var(--u)));
    margin-bottom: calc(18 * var(--u));
  }

  .story-title--why {
    margin-top: calc(60 * var(--u));
  }

  .story-text {
    font-size: max(11px, calc(18 * var(--u)));
    line-height: 1.48;
  }

  .br-desktop {
    display: inline;
  }

  .story-media img {
    height: auto;
    object-fit: initial;
    border-radius: calc(10 * var(--u));
  }

  /* Row 1 : Origin text | Image 1 */
  .craft-row--1 {
    grid-template-columns: minmax(0, 1fr) calc(492 * var(--u));
    z-index: 2;
  }

  .story-text-block--origin {
    padding: calc(83 * var(--u)) calc(24 * var(--u)) 0 0;
  }

  .story-media--1 {
    margin-top: 0;
  }

  /* Map : tucked under Image 1 */
  .story-map {
    position: relative;
    z-index: 1;
    width: calc(867 * var(--u));
    max-width: calc(100% - calc(11 * var(--u)));
    margin: calc(-61 * var(--u)) 0 0 calc(11 * var(--u));
    padding: 0;
  }

  /* Row 2 : Where + Born | Image 2 + cacao fruit */
  .craft-row--2 {
    grid-template-columns: minmax(0, 1fr) calc(492 * var(--u));
    margin-top: calc(-80 * var(--u));
    z-index: 2;
  }

  .craft-col--text {
    /* bottom padding = row 3 overlap (92) + 30 gap, so longer text
       (e.g. other languages / small screens) never runs under image 3 */
    padding: calc(66 * var(--u)) calc(24 * var(--u)) calc(122 * var(--u)) 0;
  }

  .story-text-block--where {
    margin-top: 0;
  }

  .story-text-block--born {
    margin-top: calc(58 * var(--u));
  }

  .story-media--2 {
    margin-top: 0;
  }

  .story-fruit {
    display: block;
    width: calc(555 * var(--u));
    max-width: none;
    margin: calc(-68 * var(--u)) 0 0 calc(-71 * var(--u));
  }

  /* Row 3 : Image 3 | Climate + Why */
  .craft-row--3 {
    grid-template-columns: calc(570 * var(--u)) minmax(0, 1fr);
    column-gap: calc(36 * var(--u));
    margin-top: calc(-92 * var(--u));
    z-index: 1;
  }

  .story-media--3 {
    margin-top: 0;
  }

  .story-text-block--climate {
    margin-top: 0;
    padding-top: calc(69 * var(--u));
  }

  /* 3B. RED BAND */
  .craft-band-inner {
    display: grid;
    grid-template-columns: minmax(0, calc(347 * var(--u))) calc(150 * var(--u)) minmax(0, calc(483 * var(--u)));
    align-items: center;
    width: min(calc(994 * var(--u)), 100% - calc(48 * var(--u)));
    max-width: none;
    height: calc(400 * var(--u));
    margin: 0 0 0 max(calc(24 * var(--u)), calc(50% - calc(454 * var(--u))));
    padding: 0;
  }

  .craft-band-title {
    grid-column: 1;
    grid-row: 1;
    font-size: max(11px, calc(30 * var(--u)));
    line-height: 1.2;
    margin: 0;
    padding-right: calc(16 * var(--u));
  }

  .craft-band-stick {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: calc(150 * var(--u));
    margin: calc(-57 * var(--u)) 0; /* sticks out ~57px above & below the band */
  }

  .craft-band-text {
    grid-column: 3;
    grid-row: 1;
    font-size: max(11px, calc(18 * var(--u)));
    line-height: 1.48;
    padding-left: calc(14 * var(--u));
  }

  /* 3C. CAROUSEL */
  .craft-carousel-area {
    background: #F4E4C2 url('../images/craft-bg-carousel-desktop.jpg') top center / cover no-repeat;
    padding: calc(101 * var(--u)) 0 calc(113 * var(--u)); /* 109 / 113 in design minus shadow room */
  }

  .craft-carousel {
    width: min(calc(1191 * var(--u)), 100% - calc(48 * var(--u)));
    max-width: none;
  }

  .carousel-container {
    gap: calc(13 * var(--u));
  }

  .carousel-arrow {
    width: calc(84 * var(--u));
    height: calc(84 * var(--u));
  }

  .carousel-track-wrapper {
    flex: 0 1 calc(997 * var(--u));
  }

  .carousel-card {
    flex-direction: row;
    height: calc(338 * var(--u));
    border-radius: calc(10 * var(--u));
  }

  .carousel-card-image {
    flex: 0 0 calc(492 * var(--u));
    width: calc(492 * var(--u));
    height: 100%;
    aspect-ratio: auto;
  }

  .carousel-card-image img {
    border-radius: calc(10 * var(--u));
  }

  .carousel-card-content {
    min-height: 0;
    padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)) calc(42 * var(--u));
    text-align: left;
  }

  .carousel-card-title {
    font-size: max(11px, calc(24 * var(--u)));
    letter-spacing: 0.02em;
    margin-bottom: calc(14 * var(--u));
  }

  .carousel-card-text {
    font-size: max(11px, calc(18 * var(--u)));
    line-height: 1.5;
  }

  .carousel-dots {
    gap: calc(16 * var(--u));
    margin-top: calc(45 * var(--u));
  }

  .carousel-dot {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
}

/* ============================================
   SECTION 4: USP
   ============================================ */
.section-usp {
  position: relative;
  background-color: #E60012;
  padding: calc(60 * var(--u)) 0;
  overflow: hidden;
}

@media (min-width: 640px) {
  .section-usp {
    padding: calc(80 * var(--u)) 0;
  }
}

/* Decorative Background Images */
.usp-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  display: none;
}

@media (min-width: 640px) {
  .usp-decor {
    display: block;
  }
}

.usp-decor--left {
  left: calc(120 * var(--u));
  top: calc(60 * var(--u));
  width: calc(265 * var(--u));
  height: calc(222 * var(--u));
}

.usp-decor--left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.usp-decor--right {
  right: calc(120 * var(--u));
  top: 0;
  width: calc(245 * var(--u));
  height: calc(261 * var(--u));
}

.usp-decor--right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* USP Container */
.usp-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(750 * var(--u));
  margin: 0 auto;
  padding: 0 calc(25 * var(--u));
}

@media (min-width: 640px) {
  .usp-container {
    max-width: calc(1440 * var(--u));
    padding: 0 calc(120 * var(--u));
  }
}

/* USP Title */
.usp-title {
  color: #FFFFFF;
  text-align: center;
  font-size: max(11px, calc(22 * var(--u)));
  font-weight: 700;
  margin-bottom: calc(40 * var(--u));
}

@media (min-width: 640px) {
  .usp-title {
    font-size: max(11px, calc(32 * var(--u)));
    margin-bottom: calc(48 * var(--u));
  }
}

/* USP Content Layout */
.usp-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 640px) {
  .usp-content {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(45 * var(--u));
  }
}

/* Pocky Package */
.usp-product {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  /* Mobile: Negative margin to overlap card below */
  margin-bottom: calc(-80 * var(--u));
}

.usp-product img {
  /* Mobile: 261px × 470px */
  width: calc(261 * var(--u));
  height: calc(470 * var(--u));
  object-fit: contain;
}

@media (min-width: 640px) {
  .usp-product {
    /* Desktop: No overlap, side by side */
    margin-bottom: 0;
    align-self: center;
  }
  
  .usp-product img {
    /* Desktop: 313px × 560px */
    width: calc(313 * var(--u));
    height: calc(560 * var(--u));
  }
}

/* USP Card */
.usp-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(677 * var(--u));
  background: linear-gradient(141deg, #FFFFFF 0%, #FFFBEF 100%);
  border: 1px solid #B59648;
  border-radius: calc(17 * var(--u));
  /* Mobile: Extra padding-top to accommodate package overlap */
  padding: calc(140 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u));
}

@media (min-width: 640px) {
  .usp-card {
    /* Desktop: Normal padding, no overlap */
    width: calc(793 * var(--u));
    max-width: calc(793 * var(--u));
    flex-shrink: 0;
    padding: calc(48 * var(--u)) calc(56 * var(--u));
  }
}

/* USP List */
.usp-list {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
}

@media (min-width: 640px) {
  .usp-list {
    gap: calc(36 * var(--u));
  }
}

/* USP Item */
.usp-item {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--u));
}

@media (min-width: 640px) {
  .usp-item {
    align-items: center;
    gap: calc(28 * var(--u));
  }
}

/* USP Icon */
.usp-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(147 * var(--u));
  height: calc(103 * var(--u));
}

.usp-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 640px) {
  .usp-item-icon {
    width: calc(166 * var(--u));
    height: calc(115 * var(--u));
  }
}

/* USP Item Content */
.usp-item-content {
  flex: 1;
  min-width: 0;
}

.usp-item-title {
  color: #4B3600;
  font-size: max(11px, calc(24 * var(--u)));
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: calc(8 * var(--u));
}

.usp-item-text {
  color: #4B3600;
  font-size: max(11px, calc(22 * var(--u)));
  font-weight: 400;
  line-height: 1.4;
}

/* ============================================
   SECTION 4: USP - MOBILE (matches 750px XD artboard)
   Uses var(--m): "22px in the mobile design" = calc(22 * var(--m)).
   Desktop (>=1024px) is untouched.
   ============================================ */
@media (max-width: 639.98px) {
  .section-usp {
    padding: calc(65 * var(--m)) 0 calc(80 * var(--m));
  }

  /* Decorative cacao sketches */
  .usp-decor {
    display: block;
  }

  .usp-decor--left {
    left: calc(20 * var(--m));
    top: calc(190 * var(--m));
    width: calc(185 * var(--m));
    height: auto;
  }

  .usp-decor--right {
    left: auto;
    right: 0;
    top: calc(-20 * var(--m));
    width: calc(205 * var(--m));
    height: auto;
  }

  .usp-decor img {
    height: auto;
  }

  .usp-container {
    max-width: calc(600 * var(--u));
    padding: 0;
  }

  .usp-title {
    font-size: calc(30 * var(--m));
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin-bottom: calc(67 * var(--m));
    padding: 0 calc(30 * var(--m));
  }

  /* Pocky box overlaps the top of the card */
  .usp-product {
    margin-bottom: calc(-42 * var(--m));
  }

  .usp-product img {
    width: calc(261 * var(--m));
    height: calc(470 * var(--m));
  }

  /* Card */
  .usp-card {
    width: calc(675 * var(--m));
    max-width: none;
    border-radius: calc(20 * var(--m));
    padding: calc(95 * var(--m)) calc(40 * var(--m)) calc(63 * var(--m)) calc(10 * var(--m));
  }

  /* List */
  .usp-list {
    gap: calc(48 * var(--m));
  }

  /* icon PNGs have transparent padding, so the box is larger and the gap smaller */
  .usp-item {
    align-items: flex-start;
    gap: calc(6 * var(--m));
  }

  .usp-item-icon {
    width: calc(150 * var(--m));
    height: calc(125 * var(--m));
    margin-top: calc(-14 * var(--m));
  }

  .usp-item-title {
    font-size: max(calc(12 * var(--u)), calc(23 * var(--m)));
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: calc(8 * var(--m));
  }

  .usp-item-text {
    font-size: max(calc(11 * var(--u)), calc(20 * var(--m)));
    line-height: 1.35;
  }
}

/* ============================================
   SECTION 5: CONTACT
   ============================================ */
.section-contact {
  background-color: #E60012;
  padding: calc(20 * var(--u)) 0;
  text-align: center;
}

@media (min-width: 640px) {
  .section-contact {
    padding: calc(20 * var(--u)) 0;
  }
}

.contact-container {
  width: 100%;
  max-width: calc(750 * var(--u));
  margin: 0 auto;
  padding: 0 calc(25 * var(--u));
  margin-bottom: calc(30 * var(--u));
}

@media (min-width: 640px) {
  .contact-container {
    max-width: calc(1200 * var(--u));
    padding: 0 calc(120 * var(--u));
  }
}

/* Contact Title */
.contact-title {
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(32 * var(--u)));
  font-weight: 500; /* Mobile: Medium */
  margin-bottom: calc(16 * var(--u));
}

@media (min-width: 640px) {
  .contact-title {
    color: #FFFFFF;
    font-size: max(11px, calc(32 * var(--u)));
    font-weight: 600; /* Desktop: SemiBold */
    margin-bottom: calc(24 * var(--u));
  }
}

/* Contact Info */
.contact-info {
  color: #FFFFFF;
}

/* Company Name */
.contact-company {
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(24 * var(--u))); /* Mobile */
  font-weight: 400; /* Regular */
  margin-bottom: calc(8 * var(--u));
}

@media (min-width: 640px) {
  .contact-company {
    color: #FFFFFF;
    font-size: max(11px, calc(20 * var(--u))); /* Desktop */
    margin-bottom: calc(12 * var(--u));
  }
}

/* Address */
.contact-address {
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: max(11px, calc(24 * var(--u))); /* Mobile */
  font-weight: 400; /* Regular */
  line-height: 1.5;
}

@media (min-width: 640px) {
  .contact-address {
    font-size: max(11px, calc(20 * var(--u))); /* Desktop */
  }
}


/* Footer Logos */
.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(24 * var(--u));
  padding: 0 var(--padding-mobile);
}

@media (min-width: 640px) {
  .footer-logos {
    gap: calc(48 * var(--u));
  }
}

.footer-logo {
  height: calc(40 * var(--u));
  width: auto;
  opacity: 0.8;
}

@media (min-width: 640px) {
  .footer-logo {
    height: calc(50 * var(--u));
  }
}

/* ============================================
   SECTION 6: COPYRIGHT
   ============================================ */
.section-copyright {
  background-color: var(--color-black);
  height: calc(41 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-text {
  color: var(--color-white);
  font-size: max(11px, calc(12 * var(--u)));
  text-align: center;
}

@media (min-width: 640px) {
  .copyright-text {
    font-size: max(11px, calc(14 * var(--u)));
  }
}

/* ============================================
   COOKIE CONSENT BAR
   ============================================ */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-cookie);
  transform: translateY(100%);
  transition: transform var(--transition-medium);
}

.cookie-consent.active {
  transform: translateY(0);
}

/* Mobile: Cream Background, Centered */
.cookie-consent-container {
  background-color: var(--color-cream);
  padding: calc(24 * var(--u)) var(--padding-mobile);
  text-align: center;
}

.cookie-consent-text {
  margin-bottom: calc(16 * var(--u));
}

.cookie-title {
  font-weight: 600;
  color: var(--color-pocky-red);
  margin-bottom: calc(8 * var(--u));
}

.cookie-description {
  font-size: max(11px, calc(14 * var(--u)));
  color: var(--color-brown);
}

.cookie-consent-actions {
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--u));
}

.cookie-btn {
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border-radius: calc(4 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 600;
  transition: all var(--transition-fast);
}

.cookie-btn--accept {
  background-color: transparent;
  color: var(--color-gold);
  border: 2px solid var(--color-gold);
}

.cookie-btn--accept:hover {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.cookie-btn--manage {
  background-color: transparent;
  color: var(--color-gold);
  text-decoration: underline;
}

.cookie-btn--manage:hover {
  color: var(--color-gold-dark);
}

/* Desktop: Red Background, Horizontal */
@media (min-width: 640px) {
  .cookie-consent-container {
    background-color: var(--color-pocky-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(16 * var(--u)) var(--padding-desktop);
    text-align: left;
  }
  
  .cookie-consent-text {
    margin-bottom: 0;
  }
  
  .cookie-title {
    color: var(--color-white);
  }
  
  .cookie-description {
    color: var(--color-white);
    opacity: 0.9;
  }
  
  .cookie-consent-actions {
    flex-shrink: 0;
  }
  
  .cookie-btn--accept {
    color: var(--color-white);
    border-color: var(--color-white);
  }
  
  .cookie-btn--accept:hover {
    background-color: var(--color-white);
    color: var(--color-pocky-red);
  }
  
  .cookie-btn--manage {
    color: var(--color-white);
  }
  
  .cookie-btn--manage:hover {
    color: var(--color-cream);
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */
/* Fade In */
[data-animate] {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate].animated {
  opacity: 1;
  transform: translate(0, 0);
}

[data-animate="fade-up"] {
  transform: translateY(calc(30 * var(--u)));
}

[data-animate="fade-down"] {
  transform: translateY(calc(-30 * var(--u)));
}

[data-animate="fade-left"] {
  transform: translateX(calc(30 * var(--u)));
}

[data-animate="fade-right"] {
  transform: translateX(calc(-30 * var(--u)));
}

[data-animate="fade-in"] {
  transform: scale(0.95);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.text-white {
  color: var(--color-white);
}

.bg-red {
  background-color: var(--color-pocky-red);
}

.bg-cream {
  background-color: var(--color-cream);
}

.bg-black {
  background-color: var(--color-black);
}