/* ============================================================
   GIMMI — Better Soda. For Every Mood.
   Editorial design system
   Display: Instrument Serif  ·  Labels: Space Mono  ·  Body: Hanken Grotesk
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

/* ============================================================
   BRAND FONTS — Swiss grotesk identity (embedded)
   Display + body: neue-haas-grotesk-display
   Labels / micro-type: Akzidenz Grotesk Pro Condensed
   ============================================================ */
/* @font-face{ font-family:'neue-haas-grotesk-display'; src:url('assets/fonts/NeueHaasDisplay-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'neue-haas-grotesk-display'; src:url('assets/fonts/NeueHaasDisplay-Roman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'neue-haas-grotesk-display'; src:url('assets/fonts/NeueHaasDisplay-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'akzidenz-grotesk-next-conden'; src:url('assets/fonts/AkzidenzGroteskPro-Cn.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'akzidenz-grotesk-next-conden'; src:url('assets/fonts/AkzidenzGroteskPro-BoldCn.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } */

@import url("https://use.typekit.net/atk0vwv.css");

:root{
  /* Base — white + brushed-aluminium world */
  --cream:      #F7F6F2;   /* primary soft-white background */
  --paper:      #FCFBF8;   /* lifted near-white panels */
  --snow:       #FFFFFF;   /* pure white */
  --bone:       #E9E7E0;   /* image-slot empty / subtle panel */
  --ink:        #1A1815;   /* deep charcoal text */
  --ink-soft:   #56524A;   /* secondary text */
  --ink-faint:  #8F8A7E;   /* tertiary / captions */
  --silver:     #C4C8CA;   /* aluminum */
  --silver-deep:#9AA0A2;
  --line:       #E4E1D8;   /* hairlines on white */
  --line-metal: #BFC4C6;   /* hairlines on silver */

  /* Flavor colors — taken from the can lineup */
  --mood:      #E07B1E;   /* MOOD · mango pineapple · orange */
  --hydration: #34BEEC;   /* HYDRATION · churchill · cyan */
  --reset:     #4E8A2F;   /* RESET · cucumber mint basil · forest green */
  --boost:     #F2B41A;   /* BOOST · ginger lemon · golden yellow */
  --focus:     #7FBC44;   /* FOCUS · matcha yuzu · matcha green */

  /* Legacy accent aliases mapped to the can palette */
  --turquoise:  var(--hydration);
  --lemon:      var(--boost);
  --lime:       var(--focus);
  --mango:      var(--mood);
  --aqua:       var(--hydration);

  /* Brushed aluminium surfaces */
  --silver-grad: linear-gradient(104deg,#cfd3d5 0%,#eef0f1 13%,#c2c6c9 29%,#e9ebec 47%,#c9cdcf 63%,#edeef0 81%,#cdd1d3 100%);
  --silver-soft: linear-gradient(135deg,#eceeef 0%,#d4d8da 38%,#e6e8e9 68%,#d6dadc 100%);
  --silver-base: #e2e5e6;

  /* Type — brand Swiss grotesk */
  /* --serif: 'neue-haas-grotesk-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'akzidenz-grotesk-next-conden', 'Helvetica Neue', Arial, sans-serif;
  --sans:  'neue-haas-grotesk-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --round: 'Fredoka', 'neue-haas-grotesk-display', sans-serif; */

  /* Type — brand Swiss grotesk */

    --serif: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --sans:  "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono:  "akzidenz-grotesk-next-conden", "Helvetica Neue", Arial, sans-serif;
    --round: "Fredoka", "neue-haas-grotesk-display", sans-serif;



  /* Rhythm */
  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1560px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--cream); }

/* ---------- Typography helpers ---------- */
.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:.94; }
.display{
  font-family:var(--serif); font-weight:400; line-height:.9;
  letter-spacing:-.018em; font-size:clamp(64px, 13vw, 230px);
}
.h1{ font-family:var(--serif); font-size:clamp(48px,7.4vw,128px); line-height:.92; letter-spacing:-.018em; }
.h2{ font-family:var(--serif); font-size:clamp(38px,5.4vw,92px); line-height:1; letter-spacing:-.016em; }
.h3{ font-family:var(--serif); font-size:clamp(30px,3.4vw,58px); line-height:.98; letter-spacing:-.01em; }
.ital{ font-style:italic; }

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft);
}
.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft);
}
.lede{
  font-size:clamp(18px,1.55vw,24px); line-height:1.45; color:var(--ink-soft);
  font-weight:400; max-width:46ch; text-wrap:pretty;
}
.body{ font-size:17px; line-height:1.62; color:var(--ink-soft); max-width:62ch; text-wrap:pretty; }
.num{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-faint); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,10vw,170px); position:relative; }
.bleed{ width:100%; }
.divline{ height:1px; background:var(--line); border:0; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7em;
  padding:16px 26px; border-radius:100px; border:1px solid var(--ink);
  background:var(--ink); color:var(--cream); cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--cream{ background:var(--snow); color:var(--ink); border-color:var(--line-metal); }
.btn--lg{ padding:19px 34px; font-size:13px; }

.arrowlink{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px;
}
.arrowlink span{ transition:transform .4s var(--ease); }
.arrowlink:hover span{ transform:translateX(6px); }

/* ============================================================
   FLAVOR PATTERN SYSTEM — derived from the can lineup
   ============================================================ */
.metal{ background:var(--silver-grad); }
.metal-soft{ background:var(--silver-soft); }
[class*="pat-"]{ background-color:var(--silver-base); background-repeat:repeat; }

/* MOOD — orange fingerprint / topographic rings */
.pat-mood{
  background-color:#dfe2e3;
  background-image:repeating-radial-gradient(circle at 30% 44%, transparent 0 6px, var(--mood) 6px 9px, transparent 9px 16px);
}
/* HYDRATION — cyan pixel checkerboard */
.pat-hydration{
  --s:30px; background-color:#e3e6e7;
  background-image:conic-gradient(var(--hydration) 25%, transparent 0 50%, var(--hydration) 0 75%, transparent 0);
  background-size:var(--s) var(--s);
}
/* RESET — green vertical dashes */
.pat-reset{
  background-color:#e0e3e4;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 13px, #e0e3e4 13px 25px),
    repeating-linear-gradient(90deg, var(--reset) 0 4px, transparent 4px 30px);
}
/* BOOST — golden bold zigzag chevrons */
.pat-boost{
  --s:34px; background-color:#e4e7e8;
  background-image:
    linear-gradient(135deg, var(--boost) 25%, transparent 25%),
    linear-gradient(225deg, var(--boost) 25%, transparent 25%),
    linear-gradient(315deg, var(--boost) 25%, transparent 25%),
    linear-gradient(45deg,  var(--boost) 25%, transparent 25%);
  background-size:var(--s) var(--s);
  background-position: calc(var(--s)/-2) 0, calc(var(--s)/-2) 0, 0 0, 0 0;
}
/* FOCUS — green diagonal pinstripes */
.pat-focus{
  background-color:#e6e8e9;
  background-image:repeating-linear-gradient(-58deg, var(--focus) 0 2px, transparent 2px 13px);
}

/* Pattern strip — the five-can lineup as a band */
.patstrip{ display:grid; grid-template-columns:repeat(5,1fr); }
.patstrip > div{ position:relative; }
.patstrip > div::after{
  content:attr(data-mood); position:absolute; left:0; right:0; bottom:10px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(26,24,21,.55);
}

/* ---------- Image slots (editorial empty state) ---------- */
image-slot{
  --is-bg:var(--bone);
  background:var(--bone);
  position:relative; overflow:hidden; display:block;
}
image-slot::part(placeholder){
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.photoframe{ position:relative; overflow:hidden; background:var(--bone); width:100%; }
.photoframe image-slot{ width:100%; height:100%; }
.photoframe::after{ /* subtle frame on empty editorial slots */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(26,24,21,.06);
}
.photoframe > img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__showcase image-slot{ display:block; width:100%; max-width:1700px; margin:0 auto; aspect-ratio:1600/893; --is-bg:transparent; }
.hero__video{ height:clamp(360px,66vh,660px); width:clamp(390px,25vw,480px); max-width:100%; aspect-ratio:1176/1760; object-fit:cover; border-radius:12px; box-shadow:none; background:var(--silver-base); display:block; position:relative; z-index:1; }
.discovery__box image-slot{ display:block; width:100%; aspect-ratio:1600/893; height:auto; --is-bg:transparent; }
.msys__img image-slot{ position:absolute; inset:0; width:100%; height:100%; --is-bg:transparent; }
.film__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.flavors .photoframe, .find .photoframe, .pro .photoframe{ background:var(--bone); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:34px;
  padding:18px max(var(--pad), calc((100vw - 1340px) / 2)) 18px max(var(--pad), calc((100vw - 1460px) / 2));
  transition:background .5s var(--ease), color .4s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{ background:var(--snow); backdrop-filter:none; border-color:var(--line); }
.nav__brand{ font-family:var(--round); font-weight:700; font-size:30px; letter-spacing:-.02em; line-height:1; text-transform:lowercase; }
.nav__links{ display:flex; gap:30px; align-items:center; }
.nav__links a{ font-family:var(--round); font-size:15px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:1; transition:opacity .3s, color .3s; }
.nav__links a:hover{ opacity:1; }
.nav__right{ display:flex; gap:10px; align-items:center; }
.nav__cart{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; gap:.5em; align-items:center; }
.nav__lang{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:14.5px; font-weight:400; letter-spacing:.08em; }
.nav__lang button{ background:none; border:0; cursor:pointer; color:var(--ink); font:inherit; letter-spacing:inherit; padding:3px 1px; opacity:.6; transition:opacity .3s; }
.nav__lang button.on{ opacity:1; }
.nav__lang .sep{ opacity:.35; }
.nav__menu{ display:none; font-family:var(--mono); font-size:14.5px; font-weight:400; letter-spacing:.09em; text-transform:uppercase; background:none; border:0; cursor:pointer; color:var(--ink); }
.nav.on-dark{ color:var(--cream); }
.nav.on-dark .nav__cart, .nav.on-dark .nav__menu{ color:var(--cream); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line-metal); background:var(--silver-soft); color:var(--ink); }
.marquee__track{ display:flex; gap:0; white-space:nowrap; will-change:transform; animation:scrollx 28s linear infinite; }
.marquee__track span{
  font-family:var(--serif); font-size:clamp(34px,5vw,76px); line-height:1.1;
  padding:14px 40px; display:inline-flex; align-items:center; gap:40px;
}
.marquee__track .star{ font-size:.5em; transform:translateY(-.1em); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- Page transitions ---------- */
/* Soft cross-page fade. ENTRANCE is pure CSS (a keyframe), so it self-completes
   even if JS never runs — content can't get stuck hidden. EXIT is JS: clicking an
   in-site link adds is-leaving (fade out) just before navigating; gimmi.js owns
   that toggle plus a timed fallback so navigation always happens.
   OPACITY ONLY — a transform on <body> would make it the containing block for the
   position:fixed nav, so the header would scroll away with the page. Don't add
   transform/filter/perspective here. */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageIn .45s var(--ease) both; transition:opacity .4s var(--ease); }
body.is-leaving{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  body{ animation:none; transition:none; }
  body.is-leaving{ opacity:1; }
}

/* ---------- Reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease); }
.clip.in{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  .reveal,.clip{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .marquee__track{ animation:none; }
}

/* ============================================================
   SECTION-SPECIFIC
   ============================================================ */

/* HERO — light editorial (white ground, metallic accents) — two-column: copy left, video right */
.hero{ position:relative; overflow:hidden; background:var(--snow); display:flex; align-items:center;
  min-height:100svh; padding:clamp(118px,15vh,176px) 0 clamp(40px,5vw,72px); }
.hero::before{ content:none; }
.hero__copy{ position:relative; z-index:2; display:flex; flex-direction:column; width:100%; }
.hero__showcase{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.hero__frame{ position:relative; width:fit-content; max-width:100%; display:flex; justify-content:center; align-items:center; }
.hero__frame::after{
  content:""; position:absolute; left:50%; bottom:clamp(-30px,-2.4vw,-18px); z-index:0;
  width:86%; height:clamp(48px,7vw,92px); transform:translateX(-50%);
  border-radius:50%; background:rgba(26,24,21,.055); filter:blur(26px); pointer-events:none;
}
.hero__frame:has(.hero__banner){ width:100%; max-width:760px; }
.hero__showcase img{ display:block; width:100%; max-width:1700px; margin:0 auto; height:auto; }
.hero__tagbar{ width:100%; display:flex; justify-content:center; margin-top:clamp(10px,1.1vw,16px); }
.hero__showcase .shelfcap{
  position:static; z-index:3; color:var(--ink); text-align:center; opacity:.5; font-weight:800;
  width:100%; margin-top:0; line-height:1.25; text-shadow:none;
}
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,5vw,76px); align-items:center; width:100%; }
.hero__title{ font-family:var(--serif); color:var(--ink); line-height:.84; letter-spacing:-.02em; margin-top:20px; }
.hero__title .big{ display:block; font-size:clamp(74px,11vw,184px); }
.hero__logo{ display:block; width:clamp(260px,40vw,540px); height:auto; margin:8px 0 clamp(14px,1.8vw,26px);
  filter:drop-shadow(0 18px 34px rgba(26,24,21,.12)); }
/* Brand wordmark in nav & footer */
.nav__brand-mark{ display:block; height:clamp(24px,2.4vw,32px); width:clamp(78px,8vw,110px);
  background:#E01B22;
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat; }
.footer__brand-mark{ display:block; height:clamp(40px,5vw,72px); width:clamp(120px,15vw,210px);
  background:#E01B22;
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat; }
.footer__brand{ align-self:start; display:flex; flex-direction:column; align-items:flex-start; }
.footer__tag{ margin-top:22px; max-width:34ch; font-family:var(--sans); font-size:15px; line-height:1.65; letter-spacing:0; text-transform:none; color:var(--ink-soft); text-wrap:balance; }
.footer__tag .mood{ display:block; margin-top:10px; font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.hero__title .sub{ display:block; white-space:nowrap; font-size:clamp(28px,4.4vw,64px); font-style:italic; line-height:1.04; margin-top:.12em; color:var(--ink-soft); }
.hero__row{ display:flex; align-items:flex-start; gap:clamp(22px,3vw,44px); flex-wrap:wrap; margin-top:clamp(24px,3vw,40px); }
.hero__sub{ font-family:var(--sans); font-size:clamp(16.5px,1.4vw,21px); max-width:36ch; color:var(--ink-soft); line-height:1.55; font-weight:500; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__eyebrow{ color:var(--ink-soft); margin-bottom:0; display:flex; gap:.6em; align-items:center; flex-wrap:wrap; }
.hero__media{ position:relative; aspect-ratio:1672/941; height:auto; max-height:clamp(440px,74vh,780px); border-radius:10px; overflow:hidden;
  background:var(--bone); box-shadow:0 40px 90px -50px rgba(26,24,21,.45); }
.hero__media image-slot{ width:100%; height:100%; }
.scrollcue{ position:absolute; right:var(--pad); bottom:clamp(20px,3vw,40px); z-index:3; color:var(--ink-soft); writing-mode:vertical-rl; font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; opacity:.7; }
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; gap:30px; }
  /* Cancel the landscape aspect-ratio on mobile: in the single column the width
     must come from the viewport. With aspect-ratio still set, width is derived
     from the 54vh height (×1.78) and balloons to ~894px, overflowing the screen
     (hidden by .hero overflow, but the image renders huge/cropped). */
  .hero__media{ width:100%; aspect-ratio:auto; height:54vh; order:-1; }
  .scrollcue{ display:none; }
  /* On mobile, vertically centering the hero/slide pushes a short slide
     (e.g. the lineup slide with less content) far down, leaving a big empty
     gap under the nav. Top-align instead so every slide starts just below
     the nav. */
  .hero{ align-items:flex-start; min-height:auto; padding-top:clamp(110px,24vw,150px); padding-bottom:clamp(30px,8vw,50px); }
  /* Slides are stretched to equal height by the track, so a short slide (the
     lineup slide) would otherwise center its content and float ~200px down.
     Pin every slide + its grid/copy to the top so all three start at the same
     place under the nav. !important because the base .herocar__slide rule
     (align-items:center) is declared AFTER this block and would otherwise win. */
  .herocar__slide{ align-items:flex-start !important; }
  .hero__grid{ align-items:start; align-content:start; }
  .hero__copy{ justify-content:flex-start; }
  /* The portrait hero shot is height-driven on desktop (fixed 66vh, explicit
     width), which on a narrow phone would be wider than the column. Make it
     width-driven on mobile — full column width, aspect-ratio sets the height.
     aspect-ratio is fine here (mobile slides aren't the desktop carousel layer
     that mis-measured it). */
  .hero__showcase image-slot.hero__shot{ width:100% !important; height:auto !important;
    aspect-ratio:1176/1760; }
  .hero__frame{ width:100%; max-width:100%; }
}

/* HERO CAROUSEL — swipeable, video + photo slides */
.herocar{ position:relative; width:100%; }
.herocar__vp{ overflow:hidden; touch-action:pan-y; }
.herocar__track{ display:flex; align-items:stretch; will-change:transform;
  transition:transform .62s cubic-bezier(.76,0,.2,1); }
.herocar.dragging .herocar__track{ transition:none; }
.herocar__slide{ flex:0 0 100%; min-width:100%; display:flex; align-items:center; }
/* text titles (slides without the logo) */
.hero__title--text{ margin-top:clamp(28px,2.8vw,46px); }
.hero__title--text .big{ display:block; font-size:clamp(52px,7.6vw,124px); }
/* photo showcase — match the film card's portrait frame.
   Width is given EXPLICITLY (height × 1176/1760) instead of width:auto +
   aspect-ratio. Safari mis-measures a width:auto + aspect-ratio box inside the
   carousel's transform/GPU layer when its image loads late, compositing a
   blank layer (the slide-2 blank-image bug). An explicit width is deterministic
   — same approach as the working slide 3 (width:100%). */
.hero__showcase image-slot.hero__shot{ display:block; margin:0;
  height:clamp(360px,66vh,660px); width:clamp(240px,44vh,441px); max-width:100%;
  border-radius:12px; overflow:hidden;
  box-shadow:none; --is-bg:transparent; position:relative; z-index:1; }
/* slide 3 — horizontal lineup banner */
.hero__showcase image-slot.hero__banner{ display:block; margin:0; width:100%; max-width:760px;
  height:auto; aspect-ratio:1600/893; border-radius:12px; overflow:hidden;
  box-shadow:none; --is-bg:transparent; position:relative; z-index:1; }
/* arrows (desktop) */
.herocar__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.66); border:1px solid var(--line-metal); color:var(--ink);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s, transform .25s; }
.herocar__arrow:hover{ background:#fff; }
.herocar__arrow:active{ transform:translateY(-50%) scale(.94); }
.herocar__arrow svg{ width:22px; height:22px; }
.herocar__arrow--prev{ left:clamp(10px,2vw,30px); }
.herocar__arrow--next{ right:clamp(10px,2vw,30px); }
/* hud — dots + counter, bottom centre */
.herocar__hud{ position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(-76px,-4.4vw,-46px); z-index:6; display:flex; align-items:center; gap:16px; }
.herocar__dots{ display:flex; gap:9px; }
.herocar__dot{ width:30px; height:3px; padding:0; border:0; cursor:pointer; border-radius:2px;
  background:var(--line-metal); transition:width .3s, background .3s; }
.herocar__dot.on{ width:46px; background:var(--ink); }
.herocar__num{ color:var(--ink-soft); font-size:11px; letter-spacing:.22em; }
@media (max-width:860px){
  .herocar__arrow{ display:none; }
  .herocar__hud{ bottom:-34px; gap:12px; }
}

/* EDITORIAL GALLERY (horizontal scroll) */
.gallery{ background:var(--cream); }
.gallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(56px,7vw,104px); }
.gallery__marquee{ overflow:hidden; }
.gallery__rail{ display:flex; gap:clamp(16px,2vw,30px); padding-inline:var(--pad); width:max-content; padding-bottom:10px; will-change:transform; }
.gcard{ flex:0 0 auto; scroll-snap-align:start; }
.gcard .photoframe{ height:clamp(420px,62vh,720px); }
.gcard.w-tall{ width:clamp(300px,30vw,460px); }
.gcard.w-wide{ width:clamp(440px,46vw,760px); }
.gcard__cap{ display:flex; justify-content:space-between; margin-top:14px; }

/* WHAT IS GIMMI — two column */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,90px); align-items:center; }
.split--rev{ grid-template-columns:1fr 1.05fr; }
.split__media{ height:clamp(460px,72vh,820px); }
.split__media .photoframe{ height:100%; }

/* FLAVOR SYSTEM — brushed aluminium + can patterns */
.flavors{ background:var(--silver-grad); color:var(--ink); }
.flavors .eyebrow,.flavors .label{ color:var(--ink-soft); }
.flavors__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:50px; }
.flavors__head h2{ color:var(--ink); }
.fgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.fcard{
  --accent:var(--mood);
  position:relative; border:1px solid var(--line-metal); border-radius:7px;
  padding:24px 22px; min-height:clamp(380px,46vh,560px);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; background:#e8eaeb;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
  cursor:pointer;
}
.fcard__pat{ position:absolute; inset:0; z-index:0; opacity:.34; transition:opacity .6s var(--ease); }
.fcard:hover{ transform:translateY(-10px); border-color:var(--accent); box-shadow:0 30px 60px -28px rgba(26,24,21,.4); }
.fcard:hover .fcard__pat{ opacity:1; }
.fcard > *{ position:relative; z-index:1; }
.fcard__idx{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-soft); }
.fcard__name{ font-family:var(--serif); font-size:clamp(34px,2.6vw,52px); line-height:.96; color:var(--ink); }
.fcard__flavor{ font-family:var(--round); font-weight:600; text-transform:lowercase; font-size:clamp(19px,1.5vw,26px); line-height:1; color:var(--accent); margin-top:12px; letter-spacing:-.01em; }
.fcard__tag{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.1; color:var(--ink-soft); margin-top:14px; }
.fcard__meta{ display:flex; flex-direction:column; gap:6px; background:rgba(232,234,235,.7); backdrop-filter:blur(2px); border-radius:5px; padding:10px 12px; margin:-6px; }
.fcard__meta .label{ color:var(--ink-soft); }
.fcard__swatch{ width:26px; height:26px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px rgba(26,24,21,.12); }
.fcard__top{ display:flex; justify-content:space-between; align-items:flex-start; }

/* ---------- FLAVORS SUB-PAGE ---------- */
.subhero{ padding:clamp(130px,16vh,200px) var(--pad) clamp(40px,6vw,80px); }
/* Fixed 2-col grid so the side paragraph always sits to the RIGHT of the
   headline, in any language. (Was flex-wrap, which let the longer EN headline
   push the paragraph onto a new line below it.) */
.subhero__row{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:clamp(30px,5vw,70px); }
.subhero .h1{ font-size:clamp(40px,6.6vw,104px); }
.subhero .h1 .ital{ display:inline-block; margin-left:-.06em; }
/* Tablet / small-laptop (861–1024px): the 2-col split squeezes the headline
   into the narrow left column while the paragraph sits cramped beside it.
   Stack to one column here so the headline gets full width and the paragraph
   reads cleanly below it. */
@media (min-width:861px) and (max-width:1024px){
  /* Tablet / small-laptop: stack so the headline gets full width instead of
     being squeezed into the narrow left column beside the paragraph. */
  .subhero__row{ grid-template-columns:1fr; align-items:start; gap:clamp(20px,3vw,32px); }
  .subhero__row .lede{ max-width:60ch; }
}
.flv{ position:relative; border-top:1px solid var(--line); }
.flv__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; min-height:clamp(560px,82vh,860px); padding-block:clamp(40px,5vw,70px); }
.flv--rev .flv__inner{ direction:rtl; }
.flv--rev .flv__inner > *{ direction:ltr; }
.flv__media{ position:relative; height:auto; }
.flv__media .photoframe{ aspect-ratio:3/4; width:100%; height:auto; border-radius:8px; background:#d3d6d7; }
.flv__media image-slot{ --is-bg:transparent; width:100%; height:100%; }
.flv__media .photoframe model-viewer{ position:absolute; inset:0; width:100%; height:100%; background:transparent; --poster-color:transparent; }
.flv__bignum{ display:none; }
.flv__idx{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent2,var(--ink-soft)); }
.flv__name{ font-family:var(--serif); font-size:clamp(64px,9vw,150px); line-height:.86; letter-spacing:-.02em; margin:14px 0 4px; }
.flv__flavor{ font-family:var(--round); font-weight:600; text-transform:lowercase; font-size:clamp(26px,3vw,46px); line-height:1; color:var(--accent); letter-spacing:-.01em; }
.flv__mood{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.2vw,34px); margin:24px 0 10px; }
.flv__desc{ font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); max-width:38ch; line-height:1.7; }
.flv__spec{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:30px 0 30px; }
.flv__spec span{ display:inline-flex; align-items:center; height:38px; box-sizing:border-box; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:0 15px; border-radius:100px; border:1px solid var(--ink); }
.flv__swatch{ flex:0 0 auto; width:14px; height:14px; border-radius:50%; background:var(--accent); margin-right:8px; }
.flv__cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.flv__can{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.cantext{ margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); line-height:1.9; }

/* Flavors page: the layout was scaled down with zoom:0.75, but zoom shrank the
   already-small body copy below legibility. Instead, scale ONLY the oversized
   display elements (~×0.75) and leave small text at its natural, readable size. */
.flavors-page .subhero .h1{ font-size:clamp(34px,5vw,78px); }
.flavors-page .flv__name{ font-size:clamp(48px,6.75vw,112px); }
.flavors-page .flv__flavor{ font-size:clamp(22px,2.3vw,35px); }
.flavors-page .flv__mood{ font-size:clamp(19px,1.7vw,26px); margin:18px 0 10px; }
.flavors-page .flv__inner{ min-height:clamp(530px,71vh,760px); }
/* Flavor cards: no scroll reveal at all. The reveal's opacity/transform
   transition flattened this subtree onto a temporary compositor layer and folded
   it back at the end, flashing a 1px grey hairline across the can's overflow
   edge on every scroll-in. The cards are large hero rows that don't need an
   entrance animation — render them static so there's no layer to fold. */
.flavors-page .flv__inner.reveal{ opacity:1; transform:none; transition:none; }
/* Cap the can image on desktop so it doesn't dominate the column now that the
   page-wide zoom is gone (mobile keeps the full-width single-column image).
   Constrain the whole media stack (not just the photoframe) so the spec chips
   and cantext sit directly under the can at the same width. */
@media (min-width:861px){
  .flavors-page .flv__media{ max-width:clamp(483px,41vw,644px); }
  /* Can is height-bound (aspect-ratio 3/4 inside a centred grid row), so growing
     it +15% means lifting the frame height, not the max-width. */
  .flavors-page .flv__media .photoframe{ height:clamp(470px,55vh,620px); width:auto; margin-inline:auto; }
  /* Pull the can toward the centre gutter (the content side) so the pair reads
     tight instead of drifting to opposite page edges. Normal card: content is on
     the right, so hug the right edge; reversed card: content is on the left. */
  .flavors-page .flv:not(.flv--rev) .flv__media{ margin-left:auto; }
  .flavors-page .flv--rev .flv__media{ margin-right:auto; }
  /* The frame is centred inside .flv__media (width:auto + margin-inline:auto),
     but .cantext / .flv__spec stretch the full media width and strand to the
     left. Column-align them to the same edge as the frame so they sit tidily
     under the can: normal card frame hugs the right, reversed hugs the left. */
  .flavors-page .flv__media{ display:flex; flex-direction:column; }
  .flavors-page .flv:not(.flv--rev) .flv__media .cantext,
  .flavors-page .flv:not(.flv--rev) .flv__media .flv__spec{ align-self:flex-end; }
  .flavors-page .flv--rev .flv__media .cantext,
  .flavors-page .flv--rev .flv__media .flv__spec{ align-self:flex-start; }
  /* Frame is height-bound (aspect 3/4), so its real width = height × 0.75.
     Match that exactly so the text sits flush under the can edges. */
  .flavors-page .flv__media .cantext,
  .flavors-page .flv__media .flv__spec{ max-width:calc(clamp(470px,55vh,620px) * 0.75); width:100%; }
  /* Cap the content column and pin it to the gutter so the text block meets the
     can instead of stranding at the page edge (kept left-aligned for readability).
     Normal: content sits at the column's left (already the gutter). Reversed:
     push the block to the right so it hugs the gutter next to the can. */
  .flavors-page .flv__inner > div:not(.flv__media){ max-width:46ch; }
  .flavors-page .flv--rev .flv__inner > div:not(.flv__media){ margin-left:auto; }
}

/* ---------- PRO SUB-PAGE ---------- */
/* Was an inline grid:1fr 1fr — inline style beats the mobile media query, so the
   heading + paragraph stayed cramped in two columns on phones. Moved to a class
   so the @media rule below can collapse it to one column. */
.pro-intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; }
.proband{ background:var(--silver-grad); color:var(--ink); }
.proband .eyebrow{ color:var(--ink-soft); }
.proband h1{ color:var(--ink); }
.proservices{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
.psvc{ padding:clamp(34px,4vw,56px) clamp(24px,3vw,44px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:16px; transition:background .4s var(--ease); }
.proservices .psvc:nth-child(2n){ border-right:0; }
.psvc:hover{ background:var(--bone); }
.psvc__num{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--turquoise); }
.psvc h3{ font-family:var(--serif); font-size:clamp(30px,3.2vw,52px); font-weight:400; line-height:.98; }
.psvc p{ font-size:15px; color:var(--ink-soft); max-width:42ch; line-height:1.6; }
.proform{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); }
.proform__fields{ display:flex; flex-direction:column; gap:0; }
.proform__fields label{ display:flex; flex-direction:column; gap:8px; padding:18px 0; border-bottom:1px solid var(--line); }
.proform__fields .label{ color:var(--ink-faint); }
.proform__fields input, .proform__fields select{ background:none; border:0; font-family:var(--serif); font-size:clamp(22px,2.4vw,34px); color:var(--ink); outline:none; padding:0; }
.proform__fields input::placeholder{ color:var(--silver-deep); }

@media (max-width:860px){
  .flavors-page .subhero{ padding-block:clamp(110px,18vh,150px) 30px; padding-inline:32px; }
  .flavors-page .subhero .h1{ font-size:clamp(40px,11vw,64px); }
  .subhero__row{ grid-template-columns:1fr; }
  .flv__inner{ grid-template-columns:1fr; min-height:auto; gap:30px; }
  .flv--rev .flv__inner{ direction:ltr; }
  .proservices{ grid-template-columns:1fr; }
  .proservices .psvc{ border-right:0; }
  .proform{ grid-template-columns:1fr; }
  .pro-intro{ grid-template-columns:1fr; gap:18px; align-items:start; }
}

/* CAMPAIGN FILM (video module) */
.film{ background:var(--cream); position:relative; }
.film__media{ position:relative; height:clamp(480px,76vh,860px); overflow:hidden; background:var(--silver-grad); }
.film__media image-slot{ width:100%; height:100%; }
.film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:var(--silver-base); }
.film__scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(247,246,242,.5), rgba(247,246,242,0) 30%, rgba(247,246,242,0) 58%, rgba(247,246,242,.6)); pointer-events:none; }
.film__ui{ position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,4vw,60px); color:var(--ink); }
.film__bottom{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.film__bottom h3{ font-family:var(--serif); line-height:.92;
  /* One line in every language, mobile→desktop. The 7vw term keeps the longest
     string (TR "İyiliğin hayatından bir gün.") on one line down to ~320px; the
     84px cap holds the design size on desktop. nowrap forbids the old 2-line wrap. */
  white-space:nowrap; font-size:clamp(20px,6.6vw,84px);
  /* White outline so the dark headline stays legible over the video. Stroke
     gives a crisp edge; the multi-direction shadow thickens it without eating
     the glyph body. */
  -webkit-text-stroke:1.5px var(--snow);
  text-shadow:0 0 1px var(--snow), 1px 1px 0 var(--snow), -1px 1px 0 var(--snow), 1px -1px 0 var(--snow), -1px -1px 0 var(--snow); }
.film__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:auto;
  width:clamp(84px,9vw,128px); height:clamp(84px,9vw,128px); border-radius:50%;
  border:1px solid rgba(26,24,21,.4); background:color-mix(in srgb, var(--snow) 55%, transparent);
  backdrop-filter:blur(6px); color:var(--ink); cursor:pointer; z-index:4;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s;
}
.film__play:hover{ transform:translate(-50%,-50%) scale(1.06); background:var(--ink); border-color:var(--ink); color:var(--snow); }
.film__play svg{ width:34%; height:34%; transform:translateX(8%); }
.film.playing .film__play, .film.playing .film__scrim, .film.playing image-slot{ opacity:0; pointer-events:none; transition:opacity .4s; }
/* Mobile: drop the white outline — the headline sits over a lighter part of the
   frame there and the stroke reads as clutter at small sizes. */
@media (max-width:640px){
  .film__bottom h3{ -webkit-text-stroke:0; text-shadow:none; }
}

/* PRODUCT STORY */
.product{ background:var(--cream); }
.canline{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-metal); border-block:1px solid var(--line-metal); }
.canframe{ position:relative; overflow:hidden; aspect-ratio:3/4;
  background:radial-gradient(120% 82% at 50% 36%, #e7e9ea 0%, #d2d5d6 72%, #c6c9ca 100%); }
.canframe img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.canframe:hover img{ transform:scale(1.045); }
.canframe figcaption{ position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.canframe .cf-mood{ position:absolute; left:0; right:0; top:16px; text-align:center;
  font-family:var(--round); font-weight:600; text-transform:lowercase; font-size:15px; color:var(--accent); }
@media (max-width:760px){
  .canline{ grid-template-columns:repeat(5, 62vw); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .canline::-webkit-scrollbar{ display:none; }
  .canframe{ scroll-snap-align:center; }
}
.product__hero{ height:clamp(520px,86vh,960px); position:relative; }
.product__hero .photoframe{ height:100%; }
.product__tags{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,4vw,56px); pointer-events:none; }
.prowrow{ display:flex; gap:18px; flex-wrap:wrap; }
.pchip{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--ink); border-radius:100px; background:color-mix(in srgb,var(--cream) 70%, transparent); backdrop-filter:blur(6px); }

/* FEEL GOOD MOVEMENT */
.movement{ background:var(--silver-soft); color:var(--ink); }
.movement .eyebrow{ color:var(--ink-soft); }
.movement__title{ font-family:var(--serif); font-size:clamp(54px,9vw,180px); line-height:.9; letter-spacing:-.02em; }
.movement__title .ital{ color:var(--hydration); }
.movement__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; margin-top:40px; }
.movement__words{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:30px; }
.movement__words span{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,40px); }
.movement__words .sep{ font-style:normal; opacity:.5; }

/* INGREDIENT PHILOSOPHY */
.ingredients{ background:var(--paper); }
.ig-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:56px; }
.iggrid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.igcell{
  padding:30px 26px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  transition:background .4s var(--ease);
}
.iggrid .igcell:nth-child(3n){ border-right:0; }
.igcell:hover{ background:var(--bone); }
.igcell h4{ font-family:var(--serif); font-size:clamp(26px,2.2vw,40px); font-weight:400; }
.igcell .num{ align-self:flex-start; }

/* LIFESTYLE MOSAIC */
.mosaic{ background:var(--cream); }
/* Row height is capped by 16vh as well as 12vw so the 5-row-tall m-a video cell
   never grows taller than the viewport on wide-but-short desktops (where it used
   to overflow and clip the subject). min() picks whichever is smaller. */
.mgrid{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(110px,min(12vw,16vh),200px); gap:clamp(10px,1.2vw,18px); }
.mgrid .photoframe{ width:100%; height:100%; }
.mgrid .photoframe video{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
/* m-a holds the portrait 2:3 hero video — 6 cols wide × 5 rows tall lands the
   cell at ~2:3 so the video fills with almost no cover-crop. The right column
   (m-b + m-c/m-d) stacks to the same 5-row height; the rest re-flows beneath. */
.m-a{ grid-column:1/7;   grid-row:1/6; }
.m-b{ grid-column:7/13;  grid-row:1/4; }
.m-c{ grid-column:7/10;  grid-row:4/6; }
.m-d{ grid-column:10/13; grid-row:4/6; }
.m-e{ grid-column:1/4;   grid-row:6/9; }
.m-f{ grid-column:4/7;   grid-row:6/9; }
.m-g{ grid-column:7/10;  grid-row:6/9; }
.m-h{ grid-column:10/13; grid-row:6/9; }

/* FIND GIMMI */
.find{ background:var(--silver-grad); color:var(--ink); }
.find .eyebrow{ color:var(--ink-soft); }
.find h2{ color:var(--ink); }
.findlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:50px; border-top:1px solid var(--line-metal); }
.findrow{ display:flex; align-items:center; justify-content:space-between; padding:26px 4px; border-bottom:1px solid var(--line-metal); }
.findrow:nth-child(odd){ border-right:1px solid var(--line-metal); padding-right:34px; }
.findrow:nth-child(even){ padding-left:34px; }
.findrow h4{ font-family:var(--serif); font-size:clamp(26px,2.4vw,44px); font-weight:400; }
.findrow .num{ color:var(--ink-faint); }

/* ABOUT */
.about{ background:var(--paper); color:var(--ink); }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:start; }
.about .body{ color:var(--ink); font-size:18px; }
/* The TR translation of this headline ("Modern Yaşam İçin Daha İyi Bir Soda.")
   is much longer than the EN and ran to 4 ragged lines. Cap the size a touch
   and let the browser balance the line breaks so both languages sit cleanly. */
.about__title{ font-size:clamp(36px,4.6vw,76px); line-height:1.0; text-wrap:balance; }
.healthhedo{ font-family:var(--serif); font-style:italic; color:var(--boost); }

/* PRO AREA (homepage teaser) */
.pro{ background:var(--silver-grad); color:var(--ink); position:relative; overflow:hidden; }
.pro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.pro h2{ color:var(--ink); }
.pro .body{ color:var(--ink-soft); }
.pro__media{ height:clamp(420px,60vh,680px); }
.pro__media .photoframe{ height:100%; }
/* Two art-directed crops: a wide landscape shot on desktop, a portrait shot on
   mobile (the landscape one gets badly cropped in the narrow single column).
   Each is its own image-slot so both stay independently editable from /admin. */
.pro__media-mobile{ display:none; }
@media (min-width:861px){
  /* Desktop: the teaser is a wide ~16:9 shot; a near-square frame cropped ~35%
     off the sides. A 3:2 aspect (height-capped) makes the crop gentle. Scoped to
     desktop — on mobile the single-column width comes from the viewport, so an
     aspect-ratio there would derive width from height and overflow the screen. */
  .pro__media{ height:auto; aspect-ratio:3/2; max-height:clamp(420px,60vh,680px); }
}
@media (max-width:860px){
  .pro__media-desktop{ display:none; }
  .pro__media-mobile{ display:block; }
  /* Width comes from the viewport (100%); height is derived from the 4:5 portrait
     ratio. Must override the base `height:100%` — otherwise aspect-ratio derives
     WIDTH from an inherited height and overflows the column. */
  .pro__media{ height:auto; }
  .pro__media-mobile.photoframe{ width:100%; height:auto; aspect-ratio:4/5; }
}
.protags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.protags span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line-metal); border-radius:100px; color:var(--ink-soft); }

/* FOOTER */
.footer{ background:var(--cream); color:var(--ink); padding-top:clamp(60px,8vw,120px); }
.footer__news{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; padding-bottom:50px; border-bottom:1px solid var(--line); }
.footer__news h3{ font-family:var(--serif); font-size:clamp(40px,5.5vw,92px); line-height:.92; letter-spacing:-.01em; }
.subscribe{ display:flex; align-items:center; gap:0; border-bottom:1px solid var(--ink); max-width:480px; }
.subscribe input{ flex:1; background:none; border:0; padding:14px 4px; font-family:var(--mono); font-size:13px; letter-spacing:.05em; color:var(--ink); outline:none; }
.subscribe input::placeholder{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
.subscribe button{ background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:10px 4px; }
.footer__cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding-block:56px; }
.footcol h5{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.footcol a{ display:block; font-size:15px; color:var(--ink-soft); padding:5px 0; transition:color .3s; }
.footcol a:hover{ color:var(--ink); }
.footer__base{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-block:30px; border-top:1px solid var(--line); }
.footer__base .label{ color:var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .fgrid{ grid-template-columns:repeat(2,1fr); }
  .fcard{ min-height:340px; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav{ gap:14px; padding-top:26px; padding-bottom:26px; }
  .nav__links{ display:none; }
  .nav__right{ gap:12px; }
  .nav__lang{ font-size:12.5px; gap:4px; }
  .nav__lang button{ padding:2px 1px; }
  .nav__menu{ display:inline-block; font-size:12.5px; padding-left:13px; margin-left:1px; border-left:1px solid var(--line); }
  .nav.on-dark .nav__menu{ border-left-color:rgba(255,255,255,.28); }
  .split,.split--rev,.movement__grid,.about__grid,.pro__grid,.footer__news{ grid-template-columns:1fr; }
  /* Carousel dots sit 34px below the carousel (HUD bottom:-34px) and were
     landing flush on the next section. Give the carousel bottom margin so the
     dots float in clear space, then a little top padding on the next section. */
  .herocar{ margin-bottom:64px; }
  .category{ padding-top:clamp(48px,10vw,80px); }
  /* Italic 2nd line was overlapping the 1st at the tight .92 line-height on
     large mobile type — give it room. */
  .category__head h2{ line-height:1.04; font-size:clamp(34px,8.5vw,46px); }
  /* Slash-separated tagline wrapped awkwardly on mobile; stack each phrase on
     its own line and drop the slashes. */
  .movement__words{ flex-direction:column; gap:6px; }
  .movement__words .sep{ display:none; }
  /* Slide 3 (lineup) has less content than the others, so it left extra empty
     space below on mobile. Push its content down a bit for better balance. */
  .herocar__slide--lineup .hero__copy{ padding-top:clamp(16px,6vw,40px); }
  .split__media,.pro__media{ height:64vh; }
  /* Stack the heading + intro paragraph instead of cramming them side by side. */
  .ig-head{ grid-template-columns:1fr; gap:18px; margin-bottom:40px; }
  .iggrid{ grid-template-columns:repeat(2,1fr); }
  .iggrid .igcell:nth-child(3n){ border-right:1px solid var(--line); }
  .iggrid .igcell:nth-child(2n){ border-right:0; }
  .findlist{ grid-template-columns:1fr; }
  .findrow:nth-child(odd){ border-right:0; padding-right:4px; }
  .findrow:nth-child(even){ padding-left:4px; }
  .mgrid{ grid-template-columns:repeat(6,1fr); }
  .m-a,.m-d{ grid-column:span 6; grid-row:span 3; }
  .m-b,.m-c,.m-e,.m-f,.m-g,.m-h{ grid-column:span 3; grid-row:span 2; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:span 2; }
}
@media (max-width:560px){
  .fgrid{ grid-template-columns:1fr; }
  .iggrid{ grid-template-columns:1fr; }
  .iggrid .igcell{ border-right:0!important; }
  /* "The spread" intro caption on one line — shrink to fit (EN is the widest,
     needs ~3.5vw down to 320px). Stays a small editorial caption. */
  .mosaic .gallery__head .lede{ white-space:nowrap; font-size:min(3.5vw,18px); }
  /* Drop the fixed-height auto-rows that squashed cells into thin 2:1 strips
     (12vw rows × span 2 ≈ 124px tall on a ~250px-wide column), which forced
     cover to over-crop and upscale every photo. Let each cell size from its
     own square aspect-ratio instead so any image fills cleanly. */
  .mgrid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .m-a,.m-b,.m-c,.m-d,.m-e,.m-f,.m-g,.m-h{ grid-column:span 1; grid-row:auto; }
  .mgrid .m-b,.mgrid .m-c,.mgrid .m-d,
  .mgrid .m-e,.mgrid .m-f,.mgrid .m-g,.mgrid .m-h{ aspect-ratio:1/1; }
  /* m-a is the portrait 2:3 hero video — span both columns so it keeps its
     native ratio without cropping instead of being squashed into a square. */
  .mgrid .m-a{ grid-column:span 2; aspect-ratio:2/3; }
  /* 7 square cells after m-a leave the last one (m-h) orphaned in a half-width
     slot. Make it full-width so the grid closes cleanly — no empty gap. */
  .mgrid .m-h{ grid-column:span 2; aspect-ratio:3/2; }
  .mgrid .photoframe{ height:100%; }
}

/* ---------- 3D Showcase ---------- */
.show3d{ background:var(--silver-grad); color:var(--ink); padding-block:clamp(70px,10vw,150px); }
.show3d .eyebrow,.show3d .label{ color:var(--ink-soft); }
.show3d__inner{ display:grid; grid-template-columns:1fr .82fr; gap:clamp(24px,3vw,50px); align-items:center; }
/* Pull the copy toward the can so it doesn't float far left in a wide column. */
.show3d__copy{ max-width:46ch; margin-left:auto; }
.show3d__copy h2{ color:var(--ink); }
.show3d__stage{ position:relative; aspect-ratio:4/5; width:100%; }
.show3d__stage model-viewer{
  width:100%; height:100%; background:transparent; --poster-color:transparent;
  cursor:grab;
}
.show3d__stage model-viewer:active{ cursor:grabbing; }
/* Headline must stay on ONE line in both languages. The copy lives in a narrow
   grid column on desktop, so cap the size to ~3.6vw (fits "See it in your hand."
   / "Onu elinde hisset." within the column at 1920+). */
.show3d__h{ white-space:nowrap; font-size:min(2.8vw,54px); }
@media (max-width:860px){
  .show3d__inner{ grid-template-columns:1fr; gap:30px; }
  .show3d__stage{ aspect-ratio:1/1; max-width:480px; margin-inline:auto; order:-1; }
  /* Column is full-width when stacked — size to the viewport so it still fits
     one line on the smallest phones. */
  .show3d__h{ font-size:clamp(28px,8.6vw,56px); }
}

/* ============================================================
   OPTIMIZATION LAYER — persuasion sections (added)
   ============================================================ */

/* ---- Truth band: the repeated brand truth ---- */
.truthband{ background:var(--ink); color:var(--cream); border-block:1px solid var(--ink); }
.truthband__in{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,44px);
  flex-wrap:wrap; padding:clamp(20px,2.6vw,34px) var(--pad); text-align:center; }
.truthband__line{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,3.4vw,52px); line-height:1; letter-spacing:-.01em; }
.truthband__line .b{ font-style:normal; }
.truthband__star{ color:var(--boost); font-size:.7em; }
.truthband--metal{ background:var(--silver-grad); color:var(--ink); border-color:var(--line-metal); }
.truthband--metal .truthband__star{ color:var(--mood); }

/* ---- Category section (below hero): what GIMMI is ---- */
.category{ background:var(--cream); padding-top:clamp(70px,9vw,150px); padding-bottom:clamp(120px,13vw,210px); overflow:clip; }
.category__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(34px,6vw,100px); align-items:end; }
.category__head h2{ font-family:var(--serif); font-size:clamp(40px,6vw,108px); line-height:1; letter-spacing:-.018em; text-wrap:balance; }
.category__head h2 .ital{ color:var(--ink-soft); display:inline-block; margin-top:.18em; }
.category__aside{ display:flex; flex-direction:column; gap:22px; }
.category__aside .lede{ color:var(--ink); }
.catpos{ display:flex; align-items:stretch; gap:0; margin-top:clamp(40px,5vw,72px); border-top:1px solid var(--line); }
.catpos__col{ flex:1; padding:30px 28px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; }
.catpos__col:last-child{ border-right:0; }
.catpos__col.is-mid{ background:var(--ink); color:var(--cream); margin-top:-1px; }
.catpos__k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.catpos__col.is-mid .catpos__k{ color:var(--boost); }
.catpos__v{ font-family:var(--serif); font-size:clamp(19px,1.5vw,24px); line-height:1.15; margin-top:16px; text-wrap:balance; }
.catpos__d{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.6; color:var(--ink-soft); margin:14px 0 24px; }
.catpos__col.is-mid .catpos__d{ color:color-mix(in srgb,var(--cream) 78%, transparent); }
@media (max-width:860px){
  .category__grid{ grid-template-columns:1fr; align-items:start; gap:28px; }
  .catpos{ flex-direction:column; }
  .catpos__col{ border-right:0; border-bottom:1px solid var(--line); }
  .catpos__col.is-mid{ margin-top:0; }
}

/* ---- Mood System: the master matrix ---- */
.moodsys{ background:var(--silver-grad); color:var(--ink); }
.moodsys .eyebrow{ color:var(--ink-soft); }
.moodsys h2{ color:var(--ink); }
.moodsys__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,56px); }
.moodsys__note{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; line-height:1.7; color:var(--ink-soft); max-width:40ch; }
.moodsys__legend{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:34px 0 12px; }
.moodsys__legend span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.msgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.msys{ --accent:var(--mood); position:relative; display:flex; flex-direction:column; background:#e8eaeb;
  border:1px solid var(--line-metal); border-radius:8px; overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.msys:hover{ transform:translateY(-10px); border-color:var(--accent); box-shadow:0 30px 60px -28px rgba(26,24,21,.4); }
.msys__bar{ height:6px; background:var(--accent); }
.msys__img{ aspect-ratio:1/1.15; background:radial-gradient(120% 82% at 50% 34%, #eceeef 0%, #d6d9da 70%, #cccfd0 100%); position:relative; overflow:hidden; }
.msys__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.msys:hover .msys__img img{ transform:scale(1.05); }
.msys__idx{ position:absolute; top:12px; left:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-soft); z-index:2; pointer-events:none; }
.msys__body{ padding:20px 18px 22px; display:flex; flex-direction:column; }
.msys__name{ font-family:var(--serif); font-size:clamp(30px,2.5vw,46px); line-height:.96; color:var(--ink); }
.msys__func{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:6px; }
.msys__row{ border-top:1px solid var(--line-metal); padding-top:11px; margin-top:14px; }
.msys__lab{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.msys__val{ font-family:var(--round); font-weight:600; text-transform:lowercase; font-size:clamp(16px,1.2vw,20px); line-height:1.05; color:var(--ink); margin-top:5px; letter-spacing:-.01em; }
.msys__val.is-ing{ font-family:var(--serif); font-weight:400; font-style:italic; text-transform:none; font-size:clamp(17px,1.3vw,21px); }
@media (max-width:1100px){
  .moodsys__legend{ display:none; }
  .msgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .msgrid{ grid-template-columns:1fr; } }

/* ---- Discovery Pack: primary conversion / stock-up ---- */
.discovery{ background:var(--cream); position:relative; overflow:hidden; }
.discovery__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,80px); align-items:center; }
.discovery__copy{ display:flex; flex-direction:column; }
.discovery__title{ font-family:var(--serif); font-size:clamp(44px,6vw,104px); line-height:.9; letter-spacing:-.018em; margin:18px 0 22px; }
.discovery__title .ital{ color:var(--mood); }
.discovery__findline{ color:var(--ink); }
.discovery__logo-word{
  --logo-orange:#E01B22;
  display:inline-block;
  width:3.42em;
  height:.86em;
  margin-left:.03em;
  margin-top:.18em;
  vertical-align:-.13em;
  background:var(--logo-orange);
  -webkit-mask:url('assets/brand/gimmi-logo.png') center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') center / contain no-repeat;
}
/* Inline GIMMI logo mark (ink) used in place of the word "GIMMI" in headlines
   — pro teaser ("GIMMI, on your terms") and the movement closer ("GIMMI That
   Mood."). em-sized so it scales with whatever font-size it sits in. */
.proteaser__logo-word, .movement__logo-word{
  display:inline-block;
  width:3.3em;
  height:.82em;
  vertical-align:-.1em;
  background:var(--ink);
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
}
/* Flavors hero — inline GIMMI mark in red, inside "Choose your [GiMMi]." */
.flv__head--tr{ display:none; }
html[lang="tr"] .flv__head--en{ display:none; }
html[lang="tr"] .flv__head--tr{ display:block; }
.flv__choose{ display:block; margin-top:.12em; }
.flv__logo-word{
  display:inline-block; width:2.7em; height:.74em; vertical-align:-.06em; margin:0 .04em;
  background:#E01B22;
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
}
.disc-steps{ display:flex; flex-direction:column; gap:0; margin:8px 0 30px; border-top:1px solid var(--line); }
.disc-step{ display:flex; gap:18px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
.disc-step .num{ flex:0 0 auto; }
.disc-step h4{ font-family:var(--serif); font-size:clamp(20px,1.8vw,28px); font-weight:400; }
.disc-step p{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-soft); margin-top:4px; line-height:1.6; }
.discovery__cta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.discovery__price{ display:flex; align-items:baseline; gap:10px; }
.discovery__price .big{ font-family:var(--serif); font-size:clamp(30px,3vw,46px); }
.discovery__price .was{ font-family:var(--mono); font-size:13px; color:var(--ink-faint); text-decoration:line-through; }
.discovery__price .save{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--reset); }
.discovery__media{ position:relative; }
.discovery__box{ position:relative; border-radius:12px; overflow:hidden; background:var(--silver-grad);
  box-shadow:0 40px 90px -50px rgba(26,24,21,.5); padding:clamp(20px,3vw,40px); }
.discovery__box img{ display:block; width:100%; height:auto; }
.discovery__ribbon{ position:absolute; top:18px; right:18px; z-index:3; pointer-events:none; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:var(--cream); padding:9px 15px; border-radius:100px; }
.discovery__count{ position:absolute; left:clamp(20px,3vw,40px); bottom:clamp(18px,2.4vw,32px); z-index:3; pointer-events:none;
  font-family:var(--serif); font-size:clamp(20px,2vw,30px); color:var(--ink); }
@media (max-width:860px){ .discovery__grid{ grid-template-columns:1fr; } .discovery__media{ order:-1; } }

/* ---- Ingredient philosophy: name + human explanation ---- */
.igcell{ flex-direction:column; align-items:stretch; gap:0; }
.igcell__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.igcell__why{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.55; color:var(--ink-soft); margin-top:12px; max-width:30ch; }

/* ---- Find GIMMI: logo wall + map + store finder ---- */
.find__finder{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:stretch; margin-top:clamp(40px,5vw,64px); }
.logowall{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-metal); border:1px solid var(--line-metal); border-radius:8px; overflow:hidden; }
.logowall__cell{ background:#e8eaeb; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px 14px; min-height:92px;
  font-family:var(--serif); font-size:clamp(16px,1.5vw,23px); color:var(--ink); letter-spacing:-.01em; text-align:center; transition:background .4s var(--ease); }
.logowall__cell small{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.logowall__cell:hover{ background:#dfe2e3; }
.findmap{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line-metal); background:
  radial-gradient(120% 120% at 70% 20%, #eef0f1 0%, #d9dcdd 60%, #cdd0d1 100%); min-height:280px; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px,3vw,34px); }
.findmap__grid{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line-metal) 1px, transparent 1px), linear-gradient(90deg, var(--line-metal) 1px, transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(120% 100% at 60% 30%, #000 30%, transparent 78%); }
.findmap__pins{ position:absolute; inset:0; z-index:1; }
.findmap__pin{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--mood); box-shadow:0 0 0 4px color-mix(in srgb,var(--mood) 28%, transparent); }
.findmap__pin::after{ content:attr(data-city); position:absolute; left:16px; top:-3px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.findmap__pin.p2{ background:var(--hydration); box-shadow:0 0 0 4px color-mix(in srgb,var(--hydration) 28%, transparent); }
.findmap__pin.p3{ background:var(--reset); box-shadow:0 0 0 4px color-mix(in srgb,var(--reset) 28%, transparent); }
.findmap__pin.p4{ background:var(--focus); box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 28%, transparent); }
.findmap__head{ position:relative; z-index:2; }
.findmap__cta{ position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cities{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.cities span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line-metal); border-radius:100px; color:var(--ink-soft); background:color-mix(in srgb,var(--snow) 50%, transparent); }
@media (max-width:860px){ .find__finder{ grid-template-columns:1fr; } }
/* On mobile the map shrinks and the Bodrum pin (top:80%) lands on the
   "Stock GIMMI" CTA — push it down clear of the buttons. */
@media (max-width:560px){ .findmap__pin.p3{ top:93%!important; } }


/* ===================================================================
   GIMMI — REVISION LAYER (merged in; was gimmi-revize.css)
   Loaded after the base above. Overrides base only where intentional.
   =================================================================== */

/* GIMMI — revision layer (brief: web revizyon). Loaded after gimmi.css.
   Scopes: full-bleed video hero, grey product band, nav "···" overflow menu,
   five-flavors inline logo word. Nothing here overrides base unless intentional. */

/* ============ NAV · white over video hero, dark on scroll ============ */
/* gimmi.js adds .on-dark when nav sits over a [data-nav-dark] zone (the video hero)
   and removes it once .solid kicks in on scroll — base only flips the wrapper color,
   so explicitly flip links, lang switcher, logo and the "···" button to white. */
/* nav stays dark in both states (over hero and on scroll); logo always black.
   Items a touch bolder than the base 500. */
.nav__links a{ font-weight:600; font-size:17px; }
.nav__lang button{ font-weight:600; font-size:16.5px; }
.nav__menu{ font-weight:600; font-size:16.5px; }
.nav__more-btn{ font-weight:700; }

/* Over the video hero the nav is NOT .solid — dark items wash out on bright
   frames. A soft white halo on every nav item (matching the hero logo) keeps
   them legible while staying black. Drops away once .solid paints a bg on scroll. */
.nav:not(.solid) .nav__brand{
  filter:drop-shadow(0 0 4px rgba(214,217,219,.34)) drop-shadow(0 0 11px rgba(214,217,219,.24)) drop-shadow(0 0 22px rgba(214,217,219,.16));
}
.nav:not(.solid) .nav__links a,
.nav:not(.solid) .nav__lang button,
.nav:not(.solid) .nav__lang .sep,
.nav:not(.solid) .nav__more-btn,
.nav:not(.solid) .nav__menu{
  text-shadow:0 0 8px rgba(255,255,255,.85), 0 0 16px rgba(255,255,255,.55);
}

/* ============ MARQUEE — keep scrolling even under reduced-motion ============ */
/* Base CSS kills .marquee__track animation when prefers-reduced-motion:reduce,
   which is what most phones report — so the banner sat still on mobile. The
   marquee is a decorative brand element; re-enable its scroll unconditionally. */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:scrollx 28s linear infinite !important; }
}

/* ============ NAV · "···" overflow (Find Us / Movement / Stockists) ============ */
.nav__more{ position:relative; display:flex; align-items:center; }
.nav__more-btn{
  font-family:var(--round); font-size:18px; line-height:1; letter-spacing:.04em;
  background:none; border:0; cursor:pointer; color:var(--ink);
  padding:2px 4px; transition:opacity .3s;
}
.nav__more-btn:hover{ opacity:.6; }
.nav.on-dark .nav__more-btn{ color:var(--cream); }
.nav__more-menu{
  position:absolute; top:calc(100% + 14px); right:0; min-width:230px;
  display:flex; flex-direction:column; gap:2px; padding:10px;
  background:var(--snow); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px -22px rgba(26,24,21,.32);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:60;
}
.nav__more.is-open .nav__more-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__more-menu a{
  font-family:var(--round); font-size:14px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); padding:10px 12px; border-radius:9px;
  transition:background .2s;
}
.nav__more-menu a:hover{ background:var(--cream); }

/* ============ 01 · FULL-BLEED VIDEO HERO ============ */
.vhero{
  position:relative; width:100%; min-height:100svh;
  display:block; overflow:hidden; background:var(--ink);
}
/* Carousel shell fills the hero; each slide is its own full-bleed stage. */
.vhero .herocar__vp{ height:100svh; }
.vhero .herocar__track{ height:100%; }
.vhero .herocar__slide{
  position:relative; flex:0 0 100%; min-width:100%; min-height:100svh;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--ink);
}
.vhero__video, .vhero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.vhero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%);
}
.vhero__in{
  position:relative; z-index:2; width:100%;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; padding-bottom:clamp(56px,9vh,120px); padding-top:clamp(120px,18vh,200px);
}
.vhero__left{ max-width:60%; }
/* mask + filter on the SAME element makes Chrome drop the shadow — so the
   masked red logo lives on the inner element and the halo (drop-shadow) lives
   on the wrapper, applied to the inner element's already-clipped render. */
.vhero__logo-wrap{ display:inline-block;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.32))
    drop-shadow(0 6px 16px rgba(0,0,0,.22))
    drop-shadow(0 0 24px rgba(0,0,0,.15));
}
.vhero__logo{
  display:block; height:clamp(64px,9.5vw,148px); width:clamp(220px,34vw,520px);
  background:#E01B22;
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
}
.vhero__tag{
  font-family:var(--serif); font-weight:400; line-height:.94;
  font-size:clamp(30px,5vw,76px); letter-spacing:-.018em; color:var(--snow);
  margin-top:clamp(12px,1.6vw,22px);
  /* subtle black shadow so the white tagline holds on bright video frames */
  text-shadow:0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
}
.vhero__right{
  display:flex; flex-direction:column; align-items:flex-end; text-align:right;
  gap:clamp(18px,2.4vw,30px); padding-bottom:6px; flex:0 0 auto;
}
.vhero__moment{
  font-family:var(--serif); font-weight:400; line-height:1.02;
  font-size:clamp(22px,3vw,46px); letter-spacing:-.01em; color:var(--snow);
  text-shadow:0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
}
.vhero__cta{ white-space:nowrap; }
.vhero .scrollcue{ position:absolute; z-index:2; }

/* Slide 3 — "What GIMMI Is" category block on a light panel,
   not the dark full-bleed treatment. */
.vhero .herocar__slide--category{ background:var(--snow); align-items:center; }
/* Per-language headline: EN is 2 lines, TR is 3 — show the one matching <html lang>. */
.category__h2--tr{ display:none; }
html[lang="tr"] .category__h2--en{ display:none; }
html[lang="tr"] .category__h2--tr{ display:block; }
.vhero .herocar__slide--category .category__head h2{ font-size:clamp(32px,4.4vw,72px); }
.vhero .herocar__slide--category .category{
  background:none; padding-top:clamp(96px,12vh,140px); padding-bottom:clamp(40px,6vh,72px);
  width:100%; overflow:visible; }

/* Slide 2 — split screen: full image left, clean copy panel right */
.herocar__slide--split{ padding:0; }
.vhero__split{ position:absolute; inset:0; display:flex; z-index:2; }
.vhero__half{ flex:1 1 50%; min-width:0; position:relative; }
.vhero__half--media{ overflow:hidden; }
.vhero__half--media .vhero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.vhero__half--copy{ background:var(--snow); display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:clamp(14px,1.8vw,24px);
  padding:clamp(40px,6vw,96px) clamp(32px,6vw,110px); }
.vhero__logo-wrap--ink{ filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)) drop-shadow(0 5px 14px rgba(0,0,0,.1)); }
.vhero__logo-wrap--ink .vhero__logo{ background:#E01B22; }
.vhero__tag--ink{ color:var(--ink); text-shadow:none; }
.vhero__moment--ink{ color:var(--ink-soft); text-shadow:none; }
/* Carousel HUD inside the full-bleed hero — glass pill, dots over the media. */
.vhero .herocar__hud{ position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(20px,3.2vh,40px); z-index:5; display:flex; align-items:center; gap:16px;
  padding:11px 18px; border-radius:100px;
  background:rgba(20,18,16,.28); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28); }
.vhero .herocar__dot{ background:rgba(255,255,255,.5); }
.vhero .herocar__dot.on{ background:#fff; }

/* ============ 02 · GREY PRODUCT BAND (horizontal cans) ============ */
/* GIMMI nav anchor target — offset the scroll so the sticky nav doesn't cover
   the top of this band (the cans were ending up tucked under the header). */
#whatis, #ingredients, #moodsys{ scroll-margin-top:clamp(78px,11vw,104px); }
.prodband{ background:linear-gradient(180deg,#EFEEEA 0%, #E7E6E1 100%); padding:clamp(56px,8vw,120px) 0; }
.prodband__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.prodband__title{
  font-family:var(--serif); font-weight:400; line-height:1;
  font-size:clamp(30px,4vw,66px); letter-spacing:-.016em; color:var(--ink);
  margin:18px 0 22px;
  text-wrap:balance;   /* keep "meet" from dangling alone on its own line */
}
.prodband__lede{ max-width:42ch; }
.prodband__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
/* silver metallic card like the live site's hero lineup (no best-seller tag) */
.prodband__media{
  position:relative; border-radius:14px; overflow:hidden;
  background:var(--silver-grad);
  box-shadow:0 40px 90px -50px rgba(26,24,21,.5);
  padding:clamp(20px,3vw,40px);
}
.prodband__media image-slot{
  display:block; width:100%; aspect-ratio:1600/893; height:auto;
  border-radius:8px; --is-bg:transparent;
}

/* ============ FIND MAP — keep the heading clear of the city pins ============ */
/* Pins start at left:62%; constrain the heading so longer copy (e.g. the TR
   "Daha çok lokasyon, artmaya devam ediyor.") never overlaps İstanbul/Ankara. */
.findmap__head{ max-width:56%; }
.findmap__head p{ max-width:100%; font-size:clamp(24px,2.4vw,38px) !important; }
@media (max-width:760px){
  /* On phones the finder grid stacks to one column and the map is full-width but
     short — the heading and the city pins fight for the same space. Give the
     heading the full width and push every pin into the lower band of the map so
     they never sit under the title. */
  .findmap{ min-height:340px; }
  .findmap__head{ max-width:100%; }
  .findmap__head p{ font-size:clamp(24px,6vw,34px) !important; }
  .findmap__pin{ top:auto !important; }
  /* keep all four pins in the map's right/upper band, clear of the CTA button
     (which sits bottom-left) so none of them get hidden behind it */
  .findmap__pin[data-city="İstanbul"]{ left:20% !important; bottom:46%; }
  .findmap__pin.p4{ left:72% !important; bottom:48%; }   /* Ankara */
  .findmap__pin.p2{ left:46% !important; bottom:36%; }   /* İzmir  */
  .findmap__pin.p3{ left:78% !important; bottom:24%; }   /* Bodrum */
  /* city chips: keep them on a single row on phones */
  .cities{ flex-wrap:nowrap; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cities span{ flex:0 0 auto; padding:7px 10px; font-size:10px; letter-spacing:.06em; }
  /* eyebrows: the wide .34em tracking truncates longer TR strings
     ("DAHA İYİ BİR SODA") on narrow screens — tighten + allow wrap */
  .eyebrow{ letter-spacing:.2em; white-space:normal; overflow-wrap:break-word; }
}

/* ============ PATTERN BAND — glassmorphism label keys (MOOD/RESET/…) ============ */
.patstrip > div{ position:relative; }
/* frosted glass pill behind each mood label */
.patstrip > div::before{
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:clamp(78px,9vw,124px); height:26px; border-radius:999px; z-index:1;
  background:linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 18px -8px rgba(26,24,21,.35), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(7px) saturate(1.2); -webkit-backdrop-filter:blur(7px) saturate(1.2);
  pointer-events:none;
}
/* lift the label above the glass pill and recolor for contrast on the frost */
.patstrip > div::after{
  z-index:2; bottom:14px; color:rgba(26,24,21,.82); font-weight:500;
}
.moodsys__logo-word{
  display:inline-block; width:3.2em; height:.78em; vertical-align:-.08em;
  background:var(--ink);
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
}

/* Stockists hero — GIMMI logo used inline, as a word inside the headline
   ("[GiMMi]'ni bul."). Orange mark, matching the index discovery headline. */
.stockists__title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.18em; }
.stockists__logo-word{
  display:inline-block; width:2.55em; height:.62em; vertical-align:-.02em;
  background:#E01B22;
  -webkit-mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
  mask:url('assets/brand/gimmi-logo.png') left center / contain no-repeat;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  /* Overlay slides (film) — push all copy to the bottom, stacked. */
  .vhero .herocar__slide{ align-items:flex-end; }
  .vhero__in{ flex-direction:column; align-items:flex-start; justify-content:flex-end;
    min-height:100svh; gap:clamp(16px,3vh,28px); padding-bottom:clamp(64px,9vh,96px); padding-top:0; }
  .vhero__left{ max-width:100%; }
  .vhero__right{ align-items:flex-start; text-align:left; width:100%; }
  /* Mobile carousel: use dynamic viewport (dvh) so iOS Safari's URL bar can't
     clip the slide; keep each slide a single non-scrolling screen. */
  .vhero .herocar__vp{ height:100dvh; }
  .vhero .herocar__slide{ min-height:100dvh; }
  .vhero__in{ min-height:100dvh; }
  /* split slide stacks: image on top (taller so the subject fits), copy below */
  .vhero__split{ flex-direction:column; }
  .vhero__half--media{ flex:0 0 50%; }
  .vhero__half--media .vhero__img{ object-position:center 22%; }
  .vhero__half--copy{ flex:1 1 50%; justify-content:center;
    padding:clamp(16px,3.5vw,26px) clamp(22px,6vw,38px) clamp(60px,8vh,78px);
    gap:clamp(6px,1.4vw,11px); }
  .vhero__half--copy .hero__title--text{ margin-top:0; }
  .vhero__half--copy .hero__title--text .big{ font-size:clamp(34px,9vw,46px); }
  .vhero__half--copy .hero__sub{ font-size:clamp(14px,3.6vw,16px); }
  .vhero__half--copy .hero__cta{ margin-top:clamp(12px,2.4vh,20px); gap:10px; }
  .vhero__half--copy .hero__cta .btn{ padding-block:clamp(11px,2.4vh,15px); }
  /* category slide on mobile — compact so it fits one screen above the HUD */
  .vhero .herocar__slide--category{ align-items:stretch; }
  .vhero .herocar__slide--category .category{
    align-self:center; padding-top:clamp(72px,10vh,92px); padding-bottom:clamp(56px,8vh,72px); }
  .vhero .herocar__slide--category .category__head h2{ font-size:clamp(26px,6.4vw,38px); }
  .vhero .herocar__slide--category .eyebrow{ margin-bottom:12px !important; font-size:13px !important; }
  .vhero .herocar__slide--category .category__aside{ margin-top:10px; }
  .vhero .herocar__slide--category .catpos{ margin-top:clamp(18px,3vh,28px); }
  .vhero .herocar__slide--category .catpos__col{ padding:16px 16px; }
  .vhero .herocar__slide--category .catpos__v{ font-size:clamp(17px,4.4vw,20px); margin-top:10px; }
  .prodband__in{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); }
  .prodband__media{ order:-1; }
}
/* ============ Let the page scroll past product images on touch ============ */
/* image-slot puts touch-action:none on its inner <img> (cover pan/reframe), which
   cancels page scroll when a finger lands on a product photo. We never reframe on
   the live site — force vertical swipes through. (JS also patches the shadow img.) */
image-slot{ touch-action:pan-y !important; }
image-slot::part(img){ touch-action:pan-y !important; }
.flv__media image-slot, .flv__media .photoframe{ touch-action:pan-y !important; }

@media (max-width:760px){
  /* On mobile the base nav already hides .nav__links and shows .nav__menu,
     so the "···" group disappears with it — handled by the mobile Menu sheet. */
  .nav__more{ display:none; }
  /* pattern-band glass label pills: shrink to fit each narrow cell so the
     MOOD/HYDRATION/RESET/BOOST/FOCUS keys don't overlap their neighbours */
  .patstrip > div::before{ width:min(86%,72px); height:20px; bottom:5px; }
  .patstrip > div::after{ bottom:10px; font-size:8px; letter-spacing:.08em; }
}