/* Swiss Spirits — Luxury baseline
   - Dark background, ivory text
   - Serif headlines, clean sans body
   - Big whitespace, big media, subtle motion
*/

:root{
  --bg: #0b0b0c;
  --bg2:#111114;
  --ivory:#f4f1ea;
  --ivory2:#e9e4d8;
  --muted: rgba(244,241,234,.68);
  --line: rgba(244,241,234,.12);
  --silver: rgba(220,224,235,.9);
  --gold: rgba(210, 173, 95, .9);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --max: 1180px;

  --serif: "Libre Baskerville", ui-serif, Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --step-0: clamp(15px, 1.2vw, 16px);
  --step-1: clamp(18px, 1.6vw, 20px);
  --step-2: clamp(22px, 2.2vw, 26px);
  --step-3: clamp(28px, 3vw, 36px);
  --step-4: clamp(38px, 4.4vw, 56px);
  --step-5: clamp(54px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--ivory);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(210,173,95,.10), transparent 60%),
              radial-gradient(900px 700px at 100% 30%, rgba(220,224,235,.08), transparent 55%),
              var(--bg);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height:1.55;
  letter-spacing: .1px;
}

.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main content grows to fill space, pushing footer down */
.page > main{
  flex: 1 0 auto;
}

/* footer never collapses */
.footer{
  margin-top: auto;
}


img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }

.wrap{ width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.app{ overflow:hidden; }

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

/* Typography */
.h1{ font-family:var(--serif); font-size: var(--step-5); line-height:1.02; letter-spacing:-.6px; margin:0 0 12px; }
.h2{ font-family:var(--serif); font-size: var(--step-4); line-height:1.06; letter-spacing:-.4px; margin:0 0 10px; }
.h3{ font-family:var(--serif); font-size: var(--step-3); line-height:1.12; letter-spacing:-.2px; margin:0 0 10px; }
.h4{ font-family:var(--serif); font-size: var(--step-2); margin:0 0 8px; }
.h5{ font-family:var(--serif); font-size: var(--step-1); margin:0 0 6px; }
.h6{ font-family:var(--sans); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:12px; margin:0 0 8px; }
.lead{ font-size: var(--step-1); color: var(--ivory2); }
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color: rgba(244,241,234,.75);
}
.kicker::before{
  content:""; width:36px; height:1px; background: var(--line); display:inline-block;
}
.kicker--dark{ color: rgba(11,11,12,.72); }
.kicker--dark::before{ background: rgba(11,11,12,.18); }

.link{ text-decoration:none; border-bottom: 1px solid rgba(244,241,234,.22); padding-bottom:2px; }
.link:hover{ border-bottom-color: rgba(244,241,234,.55); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ivory);
  cursor:pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  user-select:none;
  backdrop-filter: blur(10px);
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(244,241,234,.28); }
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: rgba(244,241,234,.08);
  border-color: rgba(244,241,234,.22);
}
.btn--ghost{ background: rgba(0,0,0,.08); }
.btn--small{ height: 40px; padding: 0 14px; font-size: 13px; }
.btn--icon{
  width:44px; padding:0; border-radius: 999px;
}
.btn--mag{ position:relative; overflow:hidden; }
.btn--mag::after{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(240px 100px at var(--mx,50%) var(--my,50%), rgba(210,173,95,.22), transparent 55%);
  opacity:0; transition: opacity .22s ease;
}
.btn--mag:hover::after{ opacity:1; }

/* Header */
.header{
  position: fixed; top:0; left:0; right:0;
  z-index: 60;
  border-bottom: 1px solid rgba(244,241,234,.08);
  background: rgba(11,11,12,.56);
  backdrop-filter: blur(14px);
}
.header > *{ pointer-events:auto; }
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 22px;
}
.brand__mark{ font-family: var(--serif); letter-spacing:.12em; font-size:14px; }
.brand__mark--muted{ color: rgba(244,241,234,.62); }
.brand{
  display:flex;
  align-items:center;
}

.brand__logo{
  height: 60px;          /* adjust to your logo */
  width: auto;
  display:block;
}

/* Language dropdown (luxury) */
.lang{
  position: relative;
}

.lang__btn{
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244,241,234,.14);
  background: rgba(255,255,255,.04);
  color: rgba(244,241,234,.92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.lang__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(244,241,234,.22);
  background: rgba(255,255,255,.06);
}

.lang__label{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.lang__chev{
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 1px solid rgba(244,241,234,.68);
  border-bottom: 1px solid rgba(244,241,234,.68);
  transform: rotate(45deg);
  margin-top: -2px;
}

.lang.is-open .lang__chev{
  transform: rotate(-135deg);
  margin-top: 2px;
}

.lang__menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 180px;
  border-radius: 18px;
  border: 1px solid rgba(244,241,234,.12);
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

.lang.is-open .lang__menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang__item{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(244,241,234,.92);
  border: 1px solid rgba(244,241,234,.06);
  background: rgba(255,255,255,.02);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.lang__item:hover{
  border-color: rgba(244,241,234,.18);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}

.lang__tag{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.70);
}

/* Variant when used inside the mobile menu */
.lang--menu{
  margin-top: 12px;
}

.lang--menu .lang__menu{
  right: auto;
  left: 0;
  width: 100%;
}

.nav{ display:flex; gap: 16px; align-items:center; }
.nav__link{
  color: rgba(244,241,234,.72);
  font-size: 12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding: 10px 8px;
  position:relative;
}
.nav__link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:6px; height:1px;
  background: rgba(244,241,234,.22);
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.nav__link:hover::after, .nav__link.is-active::after{ transform: scaleX(1); }

.header__cta{ display:flex; gap:10px; align-items:center; }
/* Hide hamburger on desktop */
@media (min-width: 981px){
  .header__cta [data-menu-toggle]{
    display:none;
  }
}

.icon-lines, .icon-x{ display:inline-block; width:18px; height:12px; position:relative; }
.icon-lines::before, .icon-lines::after, .icon-lines span{
  content:""; position:absolute; left:0; right:0; height:1px; background: rgba(244,241,234,.8);
}
.icon-lines::before{ top:0; }
.icon-lines::after{ bottom:0; }
.icon-lines span{ top:50%; transform:translateY(-50%); }
.icon-x::before, .icon-x::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(244,241,234,.8);
}
.icon-x::before{ transform: rotate(45deg); }
.icon-x::after{ transform: rotate(-45deg); }

/* Menu overlay */
/* Mobile menu only: hidden on desktop */
.menu{
  display:none;
}

@media (max-width: 980px){
  .header__cta .btn--ghost, .header__cta .lang{
    display: none;
  }
  /* Menu overlay */
  .menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:9999;              /* above header */
    pointer-events:none;
    opacity:0;
    transition: opacity .22s ease;

    /* IMPORTANT: don't set background here (it can mask panel issues) */
    background: transparent;
  }

  .menu.is-open{
    opacity:1;
    pointer-events:auto;
  }

  /* Pure black backdrop */
  .menu__backdrop{
    position:absolute;
    inset:0;
    background:#000;           /* ✅ pure black */
  }

  .menu__panel{
    position:absolute;
    right:0;
    top:0;
    height:100vh;              /* ✅ viewport height (not parent height) */
    width:min(420px, 86vw);

    background: rgba(11,11,12,.92);
    border-left:1px solid rgba(244,241,234,.10);
    backdrop-filter: blur(16px);

    transform: translateX(105%);  /* ✅ fully off-canvas when closed */
    transition: transform .25s ease;

    padding:18px 18px 26px;
    display:flex;
    flex-direction:column;
    z-index:1;                 /* above backdrop */
  }

  .menu.is-open .menu__panel{
    transform: translateX(0);
  }

  .menu__top{ display:flex; justify-content:space-between; align-items:center; }
  .menu__label{ letter-spacing:.22em; text-transform:uppercase; font-size:12px; color: rgba(244,241,234,.7); }

  .menu__links{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:22px 6px;
  }

  .menu__link{
    padding:12px 10px;
    border-radius:14px;
    border:1px solid rgba(244,241,234,.08);
    background: rgba(255,255,255,.02);
  }

  .menu__link:hover{ border-color: rgba(244,241,234,.16); }
  .menu__foot{ margin-top:auto; padding:10px 6px; border-top:1px solid rgba(244,241,234,.08); }
}

/* Sections */
.section{ padding: 92px 0; }
.section--tight{ padding: 70px 0;
align-items: center;
text-align: center;
justify-content: center; }
.section--media{ padding: 92px 0; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%, transparent); border-top: 1px solid rgba(244,241,234,.06); border-bottom: 1px solid rgba(244,241,234,.06); }
.section--ivory{
  background: radial-gradient(1000px 600px at 20% 0%, rgba(210,173,95,.08), transparent 70%),
              #efe9dc;
  color: #0b0b0c;
}
.section__head{ display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom: 26px; }
.section__head p{ max-width: 52ch; }

/* Hero */
.hero{ position:relative; min-height: 100vh; padding-top: 92px; display:flex; align-items:stretch; }
.hero__bg{ position:absolute; inset:0; overflow:hidden; }

.hero__video{
  position:absolute;
  inset:-10px;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  object-fit:cover;
  opacity:0;            /* hidden by default */
  transform: scale(1.02);
  transition: none;     /* ✅ no fade */
  will-change: auto;
}

.hero__video.is-on{
  opacity:1;            /* ✅ instant switch */
}

.hero__bw{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1; /* above videos, below grain/vignette if you want */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%),
    radial-gradient(900px 520px at 35% 18%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 620px at 70% 70%, rgba(255,255,255,.04), transparent 55%);
  mix-blend-mode: multiply;
  opacity: .95;
}

/* Desaturate & unify contrast */
.hero__video{
  filter: grayscale(1) contrast(1.08) brightness(.9);
}

.hero__grain{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.28;
  pointer-events:none;
}
.hero__vignette{ position:absolute; inset:0; background: radial-gradient(70% 55% at 50% 38%, transparent 0%, rgba(0,0,0,.52) 70%, rgba(0,0,0,.82) 100%); }

.hero__content{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.5fr 0.5fr;
  gap: 40px;
  align-items:center;
  padding: 38px 0 44px;
}
.hero__actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 18px; }
.hero__meta{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 18px; }
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  color: rgba(244,241,234,.78);
  font-size: 12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pill--soft{ background: rgba(255,255,255,.03); }

.video-card{
  border-radius: var(--radius);
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.video-card--tall{ height: min(520px, 64vh); }
.video-card__media{ width:100%; height:100%; object-fit:cover; }
.video-card__cap{
  padding: 12px 14px;
  border-top: 1px solid rgba(244,241,234,.10);
  background: rgba(11,11,12,.62);
}

.hero__scroll{
  position:absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index: 2;
}
.scroll-line{
  width:1px; height: 44px; background: rgba(244,241,234,.28);
  animation: scrollLine 1.7s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: translateY(0); opacity:.5; }
  50%{ transform: translateY(10px); opacity:1; }
  100%{ transform: translateY(0); opacity:.5; }
}

/* Cards & grids */
.grid{ display:grid; gap: 18px; }
.grid--brands{ grid-template-columns: repeat(4, 1fr); }
.grid--usps{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid--usps-about{ grid-template-columns: repeat(4, 1fr); gap: 18px; }

.grid--values{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid--founders{ grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid--categories{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid--journal{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid--clips{ grid-template-columns: repeat(3, 1fr); gap: 14px; }

.card{
  border-radius: var(--radius);
  border:1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow: 0 12px 44px rgba(0,0,0,.25);
}
.card__media{ position:relative; aspect-ratio: 3/5; overflow:hidden; display:block; }
.card__media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .65s ease; filter: contrast(1.05) saturate(.95); }
.card:hover .card__media img{ transform: scale(1.06); }

.card__shade{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.62) 100%); }
.badge{
  position:absolute; top: 12px; left: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(11,11,12,.62);
  border: 1px solid rgba(244,241,234,.18);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.card__body{ padding: 16px 16px 18px; display:flex; flex-direction:column; gap: 10px; }
.card__title{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.mini-line{ width: 46px; height:1px; background: rgba(244,241,234,.22); margin-bottom:10px; }

/* Parallax block */
.parallax{
  position:relative;
  background-image: var(--bg);
  background-size: cover;
  background-position:center;
  background-attachment: fixed; /* desktop */
  
  min-height: 76vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.parallax__bg{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.80));
}
.parallax__content{
  position:relative; z-index:1;
  padding: 86px 0 74px;
}
.parallax--subtle{ min-height: 64vh; }

.seal{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244,241,234,.16);
  background: rgba(0,0,0,.24);
  margin-bottom: 18px;
}
.seal__ring{ font-size: 11px; letter-spacing:.22em; text-transform:uppercase; color: rgba(244,241,234,.78); }
.seal__dot{ width: 4px; height: 4px; border-radius: 50%; background: rgba(244,241,234,.6); }

/* Split layouts */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items:start;
  margin-bottom: 34px;
}
.split--wide{ grid-template-columns: 1.1fr .9fr; }

.media-stack{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-stack__item{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(244,241,234,.10);
  background: rgba(0,0,0,.16);
}
.media-stack__item img{ width:100%; height:100%; object-fit:cover; min-height: 260px; }

.spacebox{
  border-radius: var(--radius);
  border: 1px dashed rgba(244,241,234,.18);
  background: rgba(255,255,255,.02);
  padding: 16px 16px;
}
.section--ivory .spacebox{
  border-color: rgba(11,11,12,.18);
  background: rgba(255,255,255,.5);
}
.section--ivory .lead--dark, .section--ivory .muted{ color: rgba(11,11,12,.74); }
.section--ivory .h2--dark{ color: #0b0b0c; }

.statement{ padding: 10px 0; }

/* USP block */
.usp__head{ display:flex; justify-content:space-between; gap:20px; margin-bottom: 18px; }
.usp__item{
  position: relative;
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(244,241,234,.08);
  background: rgba(255,255,255,.02);
  overflow: hidden;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.usp__item-about{
  background: rgba(0,0,0,.6);
}

/* Glow layer */
.usp__item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  /* subtle “luxury” glow */
  background:
    radial-gradient(320px 180px at 30% 20%, rgba(210,173,95,.14), transparent 60%),
    radial-gradient(240px 160px at 80% 70%, rgba(220,224,235,.10), transparent 55%);
  opacity: 0;
  transition: opacity .28s ease;
}

/* Inner sheen / edge */
.usp__item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%, rgba(0,0,0,.08));
  opacity: 0;
  transition: opacity .28s ease;
}

.usp__item:hover{
  transform: translateY(-4px);
  border-color: rgba(244,241,234,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(244,241,234,.06);
}

.usp__item:hover::before,
.usp__item:hover::after{
  opacity: 1;
}

/* Keyboard accessibility */
.usp__item:focus-within{
  transform: translateY(-3px);
  border-color: rgba(244,241,234,.22);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 2px rgba(210,173,95,.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .usp__item{
    transition:none;
  }
  .usp__item::before,
  .usp__item::after{
    transition:none;
  }
}

/* Founder */
.founder{
  border-radius: var(--radius);
  border:1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.founder__photo{ aspect-ratio: 3/4; overflow:hidden; background: rgba(0,0,0,.12); }
.founder__photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.08); }
.founder__body{ padding: 14px 14px 18px; display:flex; flex-direction:column; gap: 10px; }

.founder__logo-fallback{
  width: 100%;
  height: auto;
  display: block;
  opacity: .85;
  filter: grayscale(1) contrast(1.05);
  background-color: #e9e4d8;
}

/* Finder */
.finder{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(11,11,12,.14);
  padding: 18px;
}
.finder__card{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(11,11,12,.14);
  background: rgba(255,255,255,.86);
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  min-height: 270px;
}
.finder__q{ font-family: var(--serif); font-size: 24px; margin:0 0 12px; }
.finder__opts{ display:flex; flex-wrap:wrap; gap: 10px; }
.finder__opt{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,12,.16);
  background: rgba(255,255,255,.7);
  cursor:pointer;
  transition: transform .18s ease;
}
.finder__opt:hover{ transform: translateY(-1px); }
.finder__result{
  border-radius: calc(var(--radius));
  border: 1px solid rgba(11,11,12,.14);
  background: rgba(0,0,0,.05);
  padding: 14px;
  margin-top: 12px;
}
.finder__actions{ display:flex; gap:10px; margin-top: 14px; }

/* Product */
.product-hero{ position:relative; min-height: 92vh; padding-top: 92px; display:flex; align-items:center; }
.product-hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: contrast(1.06) saturate(.95);
}
.product-hero__shade{ position:absolute; inset:0; background: radial-gradient(70% 55% at 50% 38%, transparent 0%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.86) 100%); }
.product-hero__content{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items:center; padding: 38px 0 44px; }
.chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap: 10px; }
.chip{ padding: 10px 12px; border-radius:999px; border:1px solid rgba(244,241,234,.12); background: rgba(0,0,0,.16); font-size: 12px; letter-spacing:.06em; }
.list{ margin:0; padding-left: 18px; color: rgba(244,241,234,.78); }
.list li{ margin: 6px 0; }
.masonry{ columns: 3; column-gap: 14px; }
.masonry__item{ break-inside: avoid; margin: 0 0 14px; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(244,241,234,.10); background: rgba(255,255,255,.02); }
.masonry__item img{ width:100%; height:auto; display:block; }

/* Journal */
.post{ border-radius: var(--radius); border:1px solid rgba(244,241,234,.10); background: rgba(255,255,255,.02); overflow:hidden; }
.post__media{ position:relative; aspect-ratio: 16/10; display:block; overflow:hidden; }
.post__media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s ease; filter: contrast(1.05) saturate(.95); }
.post:hover .post__media img{ transform: scale(1.04); }
.post__body{ padding: 16px 16px 18px; display:flex; flex-direction:column; gap: 10px; }
.post__meta{ display:flex; align-items:center; gap: 10px; }
.dot{ width: 3px; height:3px; border-radius:50%; background: rgba(244,241,234,.3); }

.article-hero{ padding-top: 92px; border-bottom: 1px solid rgba(244,241,234,.06); }
.article-hero__media{ height: min(520px, 54vh); overflow:hidden; }
.article-hero__media img{ width:100%; height:100%; object-fit:cover; filter: contrast(1.05) saturate(.95); }
.article-hero__content{ padding: 22px 0 40px; }
.article{ max-width: 74ch; }
.pull{ margin: 22px 0; padding: 18px 18px; border-left: 1px solid rgba(244,241,234,.22); font-family: var(--serif); font-size: 22px; color: rgba(244,241,234,.9); }
.article__nav{ display:flex; gap:10px; margin-top: 18px; }

/* Timeline */
.timeline{
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.timeline__head{ display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom: 12px; }
.timeline__rail{
  display:flex;
  gap: 12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.timeline__item{
  min-width: min(360px, 84vw);
  scroll-snap-align: start;
  border-radius: var(--radius);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(0,0,0,.16);
  padding: 16px;
}
.timeline__tag{
  display:inline-flex; align-items:center;
  font-size: 11px; letter-spacing:.22em; text-transform:uppercase;
  padding: 7px 10px; border-radius: 999px;
  border:1px solid rgba(244,241,234,.14);
  margin-bottom: 10px;
}
.timeline__tag--gold{ border-color: rgba(210,173,95,.40); color: rgba(210,173,95,.95); }
.timeline__hint{ margin-top: 10px; }

/* Forms */
.form-shell{
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.form{ display:flex; flex-direction:column; gap: 12px; }
.form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field{ display:flex; flex-direction:column; gap: 6px; }
.field label{ font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(244,241,234,.7); }
.field input, .field select, .field textarea{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.22);
  color: var(--ivory);
}
.field textarea{ resize: vertical; }
.field--full{ grid-column: 1 / -1; }
.hp{ position:absolute; left:-9999px; opacity:0; }

.mini-form{ display:flex; gap: 10px; align-items:center; margin-top: 10px; }
.mini-form input{ flex:1; }

/* Footer */
.footer{ border-top: 1px solid rgba(244,241,234,.06); padding: 58px 0 26px; background: #000; }
.footer__grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.footer__social{ display:flex; gap: 14px; margin-top: 10px; }
.footer__bar{
  display:flex; justify-content:space-between; gap: 12px; align-items:center;
  border-top: 1px solid rgba(244,241,234,.06);
  margin-top: 22px;
  padding-top: 16px;
}
.footer-credits-text{
  align-items: center;
  text-align: center;
  justify-content: center;
  opacity: 0.8;
}
.footer-credits-text a{
color: (210, 173, 95, .8);
}
.footer-credits-text a:hover{
color: (210, 173, 95);
}

.footer__legal{ display:flex; gap: 12px; }

/* CTA band */
.cta-band{
  display:flex; justify-content:space-between; gap: 22px; align-items:center;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  padding: 18px;
}

/* Pages */
.page-hero{ padding-top: 132px; padding-bottom: 40px; }
.paper{
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.code{
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(244,241,234,.10);
  padding: 12px;
  border-radius: 14px;
  overflow:auto;
}

/* Preloader */
.preloader{
  position:fixed; inset:0; z-index:100;
  background: var(--bg);
  display:grid; place-items:center;
  transition: opacity .55s ease, visibility .55s ease;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ display:flex; gap:10px; align-items:baseline; }
.preloader__word{
  font-family: var(--serif);
  letter-spacing:.18em;
  font-size: 16px;
  opacity:.92;
  animation: fadeUp 1.05s ease both;
}
.preloader__word--muted{ opacity:.62; animation-delay:.12s; }

@keyframes fadeUp{
  from{ transform: translateY(8px); opacity:0; }
  to{ transform: translateY(0); opacity: .92; }
}

/* Cookie */
.cookie{
  position:fixed; left:0; right:0; bottom:0;
  z-index: 70;
  transform: translateY(110%);
  transition: transform .35s ease;
  padding: 12px;
}
.cookie.is-on{ transform: translateY(0); }
.cookie__inner{
  width:min(var(--max), calc(100% - 24px));
  margin: 0 auto;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(11,11,12,.82);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:center;
}
.cookie__text{ margin:0; color: rgba(244,241,234,.78); max-width: 80ch; }
.cookie__actions{ display:flex; gap: 10px; }

/* Reveal animations */
[data-reveal]{ opacity:0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-inview{ opacity:1; transform: translateY(0); }

/* Clip */
.clip{ border-radius: var(--radius); overflow:hidden; border: 1px solid rgba(244,241,234,.10); background: rgba(255,255,255,.02); }
.clip video{ width:100%; height: 220px; object-fit:cover; }
.clip__cap{ padding: 10px 12px; border-top: 1px solid rgba(244,241,234,.08); }

/* Logo row */
.logo-row{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }
.logo-pill{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.16);
  font-size: 12px;
  letter-spacing:.12em;
}

/* Utilities */
.hide-sm{ display:inline-flex; }

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .grid--brands{ grid-template-columns: repeat(2, 1fr); }
  .grid--founders{ grid-template-columns: repeat(2, 1fr); }
  .grid--usps{ grid-template-columns: repeat(2, 1fr); }
  .grid--values{ grid-template-columns: repeat(2, 1fr); }
  .grid--journal{ grid-template-columns: repeat(2, 1fr); }
  .hero__content{ grid-template-columns: 1fr; }
  .product-hero__content{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .finder{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .hide-sm{ display:none; }
}
@media (max-width: 560px){
  .wrap{ width:min(var(--max), calc(100% - 30px)); }
  .grid--brands{ grid-template-columns: 1fr; }
  .grid--journal{ grid-template-columns: 1fr; }
  .masonry{ columns: 1; }
  .form__grid{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .section__head{ flex-direction:column; align-items:flex-start; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .scroll-line{ animation:none; }
  [data-reveal]{ transition:none; opacity:1; transform:none; }
  .hero__layer{ transition:none; }
  .btn{ transition:none; }
  .btn--mag::after{ display:none; }
  .preloader{ display:none; }
}


.partners{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px){
  .partners{ grid-template-columns: 1fr; }
}

.partner{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 18px 16px;
  border-radius: 18px;
  text-decoration: none;

  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.02);
  overflow: hidden;

  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* subtle luxury highlight */
.partner::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity .22s ease;

  background:
    radial-gradient(520px 240px at 35% 20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(520px 240px at 70% 80%, rgba(210,173,95,.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.35));
  mix-blend-mode: screen;
}

/* logo styling */
.partner__logo{
  width: auto;
  height: 100px;
  object-fit: contain;
  display:block;

  border-radius: 18px;
  /* B/W by default */
  filter: grayscale(1) brightness(.92) contrast(1.08);
  opacity: .92;

  transition: filter .22s ease, opacity .22s ease, transform .22s ease;
}

.partner__meta{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.70);
}

/* Hover = lift + glow + color */
.partner:hover{
  transform: translateY(-3px);
  border-color: rgba(244,241,234,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(244,241,234,.06);
}

.partner:hover::before{
  opacity: 1;
}

.partner:hover .partner__logo{
  filter: grayscale(0) brightness(1.02) contrast(1.10);
  opacity: 1;
  transform: scale(1.02);
}

/* Keyboard focus */
.partner:focus-visible{
  outline: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.42), 0 0 0 2px rgba(210,173,95,.22);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .partner, .partner__logo, .partner::before{ transition: none; }
}


.carousel__head{
  max-width: 70ch;
  margin-bottom: 18px;
}

/* Prevent text selection while dragging */
.carousel__track.is-dragging{
  cursor: grabbing;
  user-select: none;
}

.carousel__viewport{
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(244,241,234,.08);
  background: rgba(255,255,255,.02);
}

.carousel__track{
  display: flex;
  gap: 16px;
  padding: 18px;
  overflow-x: auto;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;              /* programmatic smooth */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  transform-style: preserve-3d;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.citem{
  scroll-snap-align: center;
  flex: 0 0 clamp(240px, 32vw, 360px);

  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(11,11,12,.78);

  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* optional: a touch more depth */
.citem{
  box-shadow: 0 22px 80px rgba(0,0,0,.45);
}
.citem__media{
  position: relative;
  height: 240px;                      /* ✅ taller = more visual impact */
  overflow: hidden;
  background: #000;
}

.citem__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;

  filter: grayscale(1) contrast(1.08) brightness(.90);
  transform: translateZ(20px) scale(1.06); /* ✅ feels “closer” */
  will-change: transform, filter;
  transition: transform .2s ease, filter .2s ease;
}

/* B/W overlay */
.citem__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72)),
    radial-gradient(800px 420px at 30% 18%, rgba(255,255,255,.09), transparent 60%);
  mix-blend-mode: multiply;
  opacity: .98;
}

.citem__body{
  padding: 16px 16px 18px;
}

.citem__tag{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,241,234,.80);
  border: 1px solid rgba(244,241,234,.10);
  background: rgba(255,255,255,.03);
  padding: 8px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.citem__tag--gold{
  border-color: rgba(210,173,95,.26);
  color: rgba(210,173,95,.95);
}

/* Active card glow (JS toggles .is-active) */
.citem.is-active{
  border-color: rgba(244,241,234,.20);
  box-shadow:
    0 32px 120px rgba(0,0,0,.70),
    0 0 0 1px rgba(244,241,234,.08),
    0 0 60px rgba(210,173,95,.10);
}

.citem.is-active .citem__media img{
  filter: grayscale(0.75) contrast(1.12) brightness(.98);
  transform: translateZ(30px) scale(1.08);
}

@media (prefers-reduced-motion: reduce){
  .citem{ will-change:auto; }
  .carousel__track{ scroll-behavior:auto; }
}