/* ─── fonts (klikkie self-hosted Lato) ───────────────────────────── */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url('/assets/fonts/lato/lato-300.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/lato/lato-400.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/lato/lato-700.woff2') format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url('/assets/fonts/lato/lato-900.woff2') format('woff2'); }

/* ─── tokens (edit these to retune the whole mockup) ─────────────── */
:root {
  --ink:          #1a1a1a;
  --ink-soft:     #555;
  --teal:         #18b2bb;   /* klikkie accent */
  --nav-h:        72px;
  --top-h:        96px;      /* white banner — fits the 80px logo with 8px padding */
  --label-pad:    44px;
  --side-w:       min(420px, 86vw);
  --ease:         cubic-bezier(.2,.7,.2,1);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html, body { background:#000; }
body {
  font-family:'Lato', sans-serif;
  font-weight:400;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ─── top bar (white banner on desktop, transparent on mobile) ─────
   Homepage-only override: nav.css ships position:sticky sitewide, but
   the homepage's full-viewport video scroller needs the topbar to
   overlay (not push down) the tiles. Pin back to fixed here and pull
   the discountbanner along with it. */
body.is-home .topbar {
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
}
body.is-home .discountbanner {
  position:fixed !important; top:var(--top-h, 96px) !important; left:0 !important; right:0 !important;
}
/* Homepage topbar: white on desktop (matches the rest of the site,
   keeps brand + hamburger readable), transparent on mobile so the
   hero video bleeds through behind the floating logo + glass hamburger. */
@media (max-width: 760px) {
  body.is-home .topbar { background:transparent !important; border-bottom:0 !important; }
}
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; z-index:101;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* logo + primary nav share the left half of the banner */
.topbar__left { display:flex; align-items:center; gap:36px; }

/* horizontal nav inside the banner (desktop only) */
.topbar-nav, .topbar-right {
  display:flex; align-items:center; gap:28px;
}
.topbar-nav a, .topbar-right a {
  font-size:12px !important; letter-spacing:.18em !important; text-transform:uppercase !important;
  font-weight:700 !important;
  color:var(--ink) !important; text-decoration:none !important;
  opacity:.85; transition:opacity .25s var(--ease);
  white-space:nowrap;
}
.topbar-nav a:hover, .topbar-right a:hover { opacity:1; }
.topbar-right a.is-profile { color:#000 !important; opacity:1; }

/* locale chip — single trigger that opens a panel with both pickers.
   The chip shows: country flag + active language code. Language and
   country are independent inside the panel. */
.topbar-right .locale-pick { position:relative; }
.locale-pick__btn {
  appearance:none; border:1px solid rgba(0,0,0,.1); background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Lato', sans-serif;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ink);
  padding:6px 10px 6px 8px; border-radius:999px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.locale-pick__btn:hover { border-color:rgba(0,0,0,.25); background:#fafafa; }
.locale-pick__flag { font-size:16px; line-height:1; }
.locale-pick__caret { opacity:.55; }

/* the panel — wider than a single dropdown since it hosts two pickers */
.locale-pick__panel {
  position:absolute; top:calc(100% + 10px); right:0;
  width:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 12px 32px -6px rgba(0,0,0,.16);
  padding:14px 0;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  z-index:120;
}
.locale-pick__panel.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }

.locale-pick__section { padding:6px 0; }
.locale-pick__section + .locale-pick__section { border-top:1px solid rgba(0,0,0,.06); margin-top:6px; padding-top:12px; }
.locale-pick__label {
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
  padding:0 18px 8px;
}
/* Hide an empty "Suggested" subgroup (the JS leaves the suggested slot
   empty if the browser hints a language we don't ship). The label would
   otherwise float in space. */
.locale-pick__subgroup[data-slot="lang-suggested-group"]:has(.locale-pick__suggested:empty),
.locale-pick__subgroup[data-slot="lang-suggested-group"]:has(.sidemenu__lang-suggested:empty) {
  display:none;
}
.locale-pick__subgroup + .locale-pick__subgroup { margin-top:8px; }
.locale-pick__sublabel {
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink-soft);
  padding:4px 18px;
  opacity:.75;
}

.locale-pick__lang, .locale-pick__country { display:flex; flex-direction:column; }
.locale-pick__country { max-height:280px; overflow-y:auto; }
.locale-pick__lang a, .locale-pick__country a {
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  font-size:13px; font-weight:400;
  color:var(--ink-soft); text-decoration:none;
  transition:background .2s, color .2s;
}
.locale-pick__lang a:hover, .locale-pick__country a:hover {
  background:rgba(0,0,0,.04); color:var(--ink);
}
.locale-pick__lang a[hidden], .locale-pick__country a[hidden] { display:none; }
/* Tint the currently-active language and country wherever they
   appear. For language: in the Suggested row when it's a browser-
   detected lang, or in "Other languages" if not. For country: at
   the top of the unified list (JS moves the .is-current row to the
   top of the list). */
.locale-pick__lang a.is-current,
.sidemenu__lang-menu a.is-current,
[data-slot="lang-suggested"] a.is-current,
.locale-pick__country a.is-current,
.sidemenu__country-list a.is-current {
  background:rgba(24,178,187,.08);
  color:var(--ink);
  font-weight:700;
}

.locale-pick__search,
.sidemenu__country-search {
  appearance:none; outline:none;
  margin:0 14px 8px; padding:8px 12px;
  width:calc(100% - 28px);
  font-family:'Lato', sans-serif; font-size:13px; color:var(--ink);
  background:#f5f5f5; border:1px solid transparent; border-radius:6px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.locale-pick__search:focus,
.sidemenu__country-search:focus { background:#fff; border-color:rgba(0,0,0,.2); }

/* "Suggested" (language we recognised) and "Selected" (active country)
   rows pinned at the top of each picker section. Only the "Selected"
   country row gets the teal tint — it's the actual current state. The
   Suggested language row is a hint, not a state, so it stays neutral. */
.locale-pick__suggested,
.sidemenu__lang-suggested,
.sidemenu__country-selected {
  margin:0 8px 8px;
  border-radius:6px;
  overflow:hidden;
}
/* Tint only the actively-selected country row. */
.locale-pick__suggested[data-slot="country-selected"],
.sidemenu__country-selected {
  background:rgba(24,178,187,.08);   /* var(--teal) at 8% */
}
.locale-pick__suggested:empty,
.sidemenu__lang-suggested:empty,
.sidemenu__country-selected:empty { display:none; }
.locale-pick__suggested a,
.sidemenu__lang-suggested a,
.sidemenu__country-selected a {
  display:flex !important; align-items:center; gap:10px;
  padding:10px 12px !important;
  font-weight:700 !important;
  color:var(--ink) !important; text-decoration:none !important;
}
.locale-pick__suggested .pick-badge,
.sidemenu__lang-suggested .pick-badge,
.sidemenu__country-selected .pick-badge {
  margin-left:auto;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--teal); opacity:.9;
}

.pick-flag { font-size:16px; line-height:1; flex-shrink:0; }

/* preserve brand lowercase "klikkie" inside uppercase nav labels */
.lc { text-transform:lowercase !important; }


/* hamburger button — icon-only, lifted with a soft drop shadow so it
   reads as a tappable affordance over the white topbar (and also over
   the video on the transparent mobile topbar). Same shadow vocabulary
   as the sidemenu drawer for visual consistency. */
.hamburger {
  appearance:none; cursor:pointer;
  padding:10px 14px;
  display:none; align-items:center; justify-content:center;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
  box-shadow:0 4px 18px -4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);
  transition:box-shadow .25s var(--ease), transform .15s var(--ease);
}
.hamburger:hover { box-shadow:0 6px 22px -4px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.03); }
.hamburger:active { transform:translateY(1px); }
.hamburger__bars {
  display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center;
  width:22px; height:14px; gap:5px;
}
.hamburger__bars span {
  display:block; width:20px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
}
.hamburger__bars span:nth-child(2) { width:16px; }
.hamburger:hover .hamburger__bars span:nth-child(2) { width:20px; }
.hamburger.is-open .hamburger__bars span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); width:20px; }
.hamburger.is-open .hamburger__bars span:nth-child(2) { opacity:0; }
.hamburger.is-open .hamburger__bars span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); width:20px; }

/* Self-contained SVG logo (black circle + white wordmark in one file) */
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { width:80px; height:80px; display:block; }


/* ─── side menu (slide-out drawer from the left) ─────────────────── */
.sidemenu-backdrop {
  /* z-index above the homepage topbar (z:101 in home.css) so the
     open drawer fully covers it and clicks land on the drawer's
     .sidemenu__close — not on the topbar peeking through. */
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.42);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.sidemenu-backdrop.is-open { opacity:1; pointer-events:auto; }

.sidemenu {
  position:fixed; top:0; bottom:0; left:0; z-index:2001;
  width:var(--side-w); max-width:100vw;
  background:#fff;
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
  padding:calc(var(--top-h) + 24px) 0 0;   /* leaves room for the floating topbar controls */
  box-shadow:0 0 40px rgba(0,0,0,.08);
}
.sidemenu.is-open { transform:translateX(0); }

.sidemenu__list {
  list-style:none; margin:0; padding:0 0 18px;
  display:flex; flex-direction:column; flex:1;   /* fills the menu so we can pin profile to the bottom */
  overflow-y:auto;
}
.sidemenu__list a {
  display:block; padding:18px 32px;
  font-size:22px !important; font-weight:300; letter-spacing:-.005em;
  color:var(--ink) !important; text-decoration:none !important; text-transform:none !important;
  transition:padding-left .25s var(--ease), color .25s var(--ease);
  position:relative;
}
.sidemenu__list a:hover {
  padding-left:40px; color:#000;
}
.sidemenu__list a:hover:before {
  opacity:1; transform:translateY(-50%) translateX(0);
}
.sidemenu__list a:before {
  content:"→"; position:absolute; left:20px; top:50%;
  transform:translateY(-50%) translateX(-8px);
  opacity:0; transition:transform .25s var(--ease), opacity .25s var(--ease);
  color:var(--teal); font-size:14px;
}
.sidemenu__list li + li a { border-top:1px solid rgba(0,0,0,.04); }

/* Two separate boxes side-by-side — account + language */
.sidemenu__top {
  display:flex; flex-direction:column;
  gap:10px;
  margin:0 18px 18px;
}
.sidemenu__top-btn--full { width:100%; }
/* the two small chips below Account share a row */
.sidemenu__chip-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px;
}
.sidemenu__lang-wrap, .sidemenu__country-wrap { position:relative; }

/* push the bottom box to the bottom of the drawer */
.sidemenu__top--bottom {
  margin-top:auto;
  margin-bottom:24px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
}
/* both dropdowns open UPWARD (their triggers are at the bottom of the drawer) */
.sidemenu__top--bottom .sidemenu__lang-menu,
.sidemenu__top--bottom .sidemenu__country-menu {
  top:auto; bottom:calc(100% + 6px); right:0;
  transform:translateY(4px);
}
.sidemenu__top--bottom .sidemenu__lang-menu.is-open,
.sidemenu__top--bottom .sidemenu__country-menu.is-open { transform:translateY(0); }
.sidemenu__top-btn {
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  padding:16px 12px !important;
  background:#f3f3f3;
  border:1px solid rgba(0,0,0,.06);
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--ink) !important; text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease;
}
.sidemenu__top-btn:hover { background:#ebebeb; }
.sidemenu__top > a.sidemenu__top-btn { border:none !important; }   /* Account: no outline */
.sidemenu__top-btn svg { flex-shrink:0; }
.sidemenu__top-btn:before { content:none !important; }   /* kill the inherited arrow */
button.sidemenu__top-btn { appearance:none; border:0; cursor:pointer; width:100%; }

/* mobile language + country dropdowns — open below the button by default */
.sidemenu__lang-menu { min-width:180px; }
.sidemenu__country-menu { min-width:240px; max-height:50vh; overflow-y:auto; }
.sidemenu__lang-menu, .sidemenu__country-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:6px;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.15);
  padding:6px 0;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:110;
}
.sidemenu__lang-menu.is-open,
.sidemenu__country-menu.is-open { opacity:1; pointer-events:auto; transform:translateY(0); }
.sidemenu__lang-menu a,
.sidemenu__country-menu a {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400;
  color:var(--ink-soft); text-decoration:none;
  transition:background .2s, color .2s;
}
.sidemenu__lang-menu a[hidden],
.sidemenu__country-menu a[hidden] { display:none; }
.sidemenu__lang-menu a:before,
.sidemenu__country-menu a:before { content:none !important; }
.sidemenu__lang-menu a:hover,
.sidemenu__country-menu a:hover { background:rgba(0,0,0,.04); color:var(--ink) !important; }
.sidemenu__lang-menu a.is-current,
.sidemenu__country-menu a.is-current { color:var(--ink) !important; font-weight:700 !important; }

.sidemenu__foot {
  margin-top:auto; padding:24px 32px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex; gap:18px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.sidemenu__foot a { color:var(--ink-soft) !important; text-decoration:none !important; }
.sidemenu__foot a:hover { color:var(--ink) !important; }

/* ─── scroller — CSS snap, JS slows the animation per gesture ─────
   Capped at 1920px wide and centred so the video tiles don't grow
   beyond cinematic width on 4K / ultrawide monitors (they were filling
   2560px+ and reading as "I'm watching a billboard"). Side bands are
   the page background — looks intentional, not letterboxed. */
.scroller {
  /* dvh respects the browser's collapsible URL bar on iOS — using 100vh
     instead lets the CTA hide under the Chrome iOS bottom bar. The fallback
     keeps older browsers without dvh support working. */
  height:100vh;
  height:100dvh;
  overflow-y:scroll; overflow-x:hidden;
  max-width:1920px; margin:0 auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar { display:none; }

.section {
  height:100vh;
  height:100dvh;   /* iOS Chrome/Safari: account for the collapsing bottom URL bar */
  min-height:600px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
}
.mockup-footer { scroll-snap-align:start; }
.section--solo { grid-template-columns:1fr; }   /* single full-bleed tile */

/* ─── tiles ──────────────────────────────────────────────────────── */
.tile {
  position:relative; overflow:hidden;
  display:block; text-decoration:none; color:var(--ink);
  isolation:isolate;
}
.tile--white { background:#fff; }   /* shows through any transparent areas of the image */
.tile img, .tile video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
  will-change:transform;
}
.tile video { pointer-events:none; }   /* don't intercept clicks on the tile <a> */
.tile:hover img, .tile:hover video { transform:scale(1.035); }

/* Instagram-Reels-style bottom scrim — dark enough that white text always reads,
   smooth fade so the upper image/video stays fully visible */
.tile--labelled:before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:80%;
  background:linear-gradient(to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 22%,
    rgba(0,0,0,.28) 50%,
    rgba(0,0,0,.08) 78%,
    rgba(0,0,0,0)   100%);
  z-index:1; transition:opacity .4s var(--ease);
  pointer-events:none;
}

.tile__label {
  position:absolute;
  left:var(--label-pad); right:var(--label-pad);
  bottom:calc(var(--nav-h) + var(--label-pad));
  z-index:2; color:#fff;
  text-align:left !important;     /* webflow defaults can force center otherwise */
  transition:transform .5s var(--ease);
}
.tile__label * { text-align:left !important; }
.tile--labelled:hover .tile__label { transform:translateY(-4px); }

.tile__title {
  font-family:'Lato', sans-serif; font-weight:300;
  font-size:clamp(28px, 3.4vw, 56px); line-height:1.05;
  letter-spacing:-.01em;
  text-transform:none !important;   /* webflow CSS forces h2→uppercase */
  margin:0 0 22px;
  max-width:14ch;   /* let the title wrap; CTA stays on one line */
}
.tile__cta {
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:700 !important;
  padding:18px 32px;
  color:#fff !important; text-decoration:none !important;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  -webkit-backdrop-filter:saturate(160%) blur(10px);
          backdrop-filter:saturate(160%) blur(10px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.tile__cta:hover {
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.7);
}
.tile__cta:after {
  content:"→"; display:inline-block; transition:transform .35s var(--ease);
}
.tile--labelled:hover .tile__cta:after { transform:translateX(4px); }

/* ─── klikkie footer (Assouline-style: clean, no underlines) ────── */
.mockup-footer { background:#fff; padding-bottom:0; margin-top:80px; }   /* breathing room above */

/* Brand paragraph above the link grid — gives Google indexable text
   for the otherwise video-heavy homepage. Centred, readable measure,
   muted colour so it doesn't compete with the link cards below. */
.mockup-footer__intro {
  max-width:720px;
  margin:0 auto;
  /* Top padding clears the fixed topbar height (var(--top-h)) plus
     visual breathing room so the first line isn't behind the chrome. */
  padding:calc(var(--top-h) + 32px) 24px 8px;
  text-align:center;
}
.mockup-footer__intro p {
  margin:0;
  font-size:14px; line-height:1.7;
  color:var(--ink-soft);
}
@media (max-width: 760px) {
  .mockup-footer__intro { padding:calc(var(--top-h) + 16px) 20px 4px; }
  .mockup-footer__intro p { font-size:13px; line-height:1.65; }
}
.mockup-footer .section {
  height:auto; min-height:0; scroll-snap-align:none; display:block;
  padding:72px 48px 24px;
  background:#fff !important;
  /* No border-top — the SEO paragraph above already provides the
     visual transition from the video pillars into the footer. */
  border-top:0 !important;
}
/* The sitewide stylesheet adds .section.no-bottom-padding.softcolor
   { border-top: 1px solid #e0e0e0 !important } — kill it inside the
   mockup-footer with a higher-specificity override. */
.mockup-footer .section.no-bottom-padding.softcolor { border-top:0 !important; }
.mockup-footer .footer .section {
  background:#fff !important;
  padding:24px 48px 32px;
  border-top:1px solid rgba(0,0,0,.06);
}
.mockup-footer .full-container {
  display:block !important;   /* override Webflow's .full-container { display:flex }
                                 which would shrink .footer-grid to content-width */
  max-width:1280px !important; margin:0 auto !important; padding:0 !important;
}
/* On medium+ widths give the grid an explicit 5-col layout. Webflow's
   .w-layout-grid CSS provides this in the original site, but the rule
   only matches when its full inheritance chain is intact — easier to
   just spell it out here. */
.mockup-footer .footer-grid {
  display:grid !important;
  grid-template-columns:repeat(5, 1fr);
  gap:32px 24px;
  padding:48px 32px;
}

/* columns: left-aligned, no decorations on headers */
.mockup-footer .footer-card,
.mockup-footer .footer-card * { text-align:left !important; }
.mockup-footer .footer-card { display:flex !important; flex-direction:column; align-items:flex-start; gap:8px; }
.mockup-footer .footer-header,
.mockup-footer .footer-header-2 {
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:.2em !important; text-transform:uppercase !important;
  color:var(--ink) !important;
  border:none !important; padding:0 !important; margin:0 0 16px !important;
  text-decoration:none !important;
}
.mockup-footer .footer-link {
  display:block !important;
  font-size:13px !important; font-weight:400 !important; line-height:1.8 !important;
  color:var(--ink-soft) !important; text-decoration:none !important;
  padding:0 !important; margin:0 !important;
  transition:color .2s ease;
}
.mockup-footer .footer-link:hover { color:var(--ink) !important; }

/* social row — icons stacked vertically, no handle text */
.mockup-footer .container-8 { display:flex !important; flex-direction:column !important; gap:12px !important; padding:0 !important; }
.mockup-footer .link-block-9 .footer-link.with-logo-items { display:none !important; }

/* social row — minimal overrides; just swap the raster src for the SVG badge */
.mockup-footer .link-block-9 { text-decoration:none !important; }
.mockup-footer .link-block-9 img { display:none !important; }

/* the black circle that wraps the white SVG icon */
.social-badge {
  width:34px; height:34px;
  background:#000; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#fff;
}
.social-badge svg { width:16px; height:16px; display:block; }
/* TikTok's silhouette is top-heavy → nudge it down inside the circle */
.link-block-9.tiktok .social-badge svg { transform:translateY(1px); }

/* bottom strip */
.mockup-footer .footer-bar__row {
  display:flex !important; align-items:center; justify-content:space-between;
  max-width:1280px; margin:0 auto;
  flex-wrap:wrap; gap:24px;
  padding:0 !important;
}
.mockup-footer .paymentmethods { display:flex; align-items:center; gap:10px; }

/* Payment icon visibility is driven by JS reading the selected country's
   paymentMethods.allowed array from /data/active-countries.json. Each
   <img class="payments"> carries a data-method attribute (ideal, mc,
   visa, ...) and is hidden by default until the country JS shows it. */
.payments[data-method] { display:none; }
.mockup-footer .footertext {
  font-size:12px; color:var(--ink-soft) !important; letter-spacing:.04em;
  text-align:center !important; margin:16px 0 0 !important;
}
/* language moved to the top bar — hide it from the footer */
.mockup-footer .languagedrop { display:none !important; }

/* back-to-top button — mobile only */
.back-to-top { display:none; }

/* tablet — 2 cols. Goes up to 1100 since the nav already collapses
   to hamburger at 980, so by ~1100 we've lost the desktop nav width
   safety margin. 5 cols looks cramped below ~1100. */
@media (max-width: 1100px) and (min-width: 761px) {
  .mockup-footer .footer-grid {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:32px 24px !important;
    padding:32px 24px !important;
  }
}

/* phone — Assouline-style accordion */
@media (max-width: 760px) {
  .mockup-footer .full-container { max-width:100% !important; }
  .mockup-footer .footer-grid {
    display:block !important;     /* override webflow's .w-layout-grid */
    grid-template-columns:none !important;
    gap:0 !important;
    padding:0 !important;
    /* No border-top — the SEO paragraph above shouldn't be visually
       underlined by a divider. */
  }
  .mockup-footer .footer-card,
  .mockup-footer .footer-card * { text-align:left !important; }
  /* Higher specificity (.w-layout-grid.footer-grid) needed to beat
     Webflow's "width:calc(50% - 8px) !important" rule. */
  .mockup-footer .w-layout-grid.footer-grid .footer-card,
  .mockup-footer .footer-card {
    display:block !important; padding:0 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    flex:initial !important;          /* drop webflow's flex:0 0 calc(50%-8px) */
    min-height:0 !important;          /* override webflow's 250px floor */
    border-bottom:1px solid rgba(0,0,0,.08);
    align-self:stretch !important;
  }
  /* header is the accordion toggle. Flexbox so the label stays
     vertically centred with the chevron even when it wraps to two
     lines (e.g. "About us" on a narrow card).
     Selector is .mockup-footer .w-layout-grid.footer-grid .footer-card …
     to outscore head-styles.njk's sitewide rule that forces
     padding-top:0 / margin-top:0 on .footer-header at ≤991px. */
  .mockup-footer .w-layout-grid.footer-grid .footer-card .footer-header,
  .mockup-footer .w-layout-grid.footer-grid .footer-card .footer-header-2,
  .mockup-footer .footer-header,
  .mockup-footer .footer-header-2 {
    display:flex !important; align-items:center; justify-content:space-between;
    gap:12px;
    cursor:pointer; user-select:none;
    font-size:12px !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:.18em !important;
    color:var(--ink) !important;
    border:none !important;
    padding:20px 24px !important;
    margin:0 !important;
  }
  .mockup-footer .footer-header::after,
  .mockup-footer .footer-header-2::after {
    content:""; flex-shrink:0;
    width:8px; height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px, -2px);
    transition:transform .3s var(--ease);
  }
  .mockup-footer .footer-card.is-expanded .footer-header::after,
  .mockup-footer .footer-card.is-expanded .footer-header-2::after {
    transform:rotate(-135deg) translate(-2px, -2px);
  }
  /* the collapsible body */
  .mockup-footer .footer-card__body {
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .mockup-footer .footer-card.is-expanded .footer-card__body { max-height:600px; }
  .mockup-footer .footer-card__body > * {
    display:block !important;
    padding:6px 24px !important;
    font-size:13px !important;
    line-height:1.6 !important;
    color:var(--ink-soft) !important;
    text-decoration:none !important;
  }
  .mockup-footer .footer-card__body > *:first-child { padding-top:0 !important; }
  .mockup-footer .footer-card__body > *:last-child { padding-bottom:20px !important; }
  .mockup-footer .footer-card__body .container-8 {
    padding:6px 24px 20px !important;
    display:flex !important; flex-direction:row !important; gap:18px !important;
  }
  .mockup-footer .footer-card__body .link-block-9 {
    display:inline-flex !important; align-items:center;
  }
  .mockup-footer .footer-card__body .with-logo-items { display:none !important; }

  /* back-to-top — outlined pill button. Lives inside the Follow Us
     accordion body alongside the social icons row. Need !important
     on display + padding to outrank the generic
     .mockup-footer .footer-card__body > * rule above which forces
     display:block + padding:6px 24px on every body child. */
  .mockup-footer .footer-card__body > .back-to-top,
  .back-to-top {
    appearance:none; cursor:pointer;
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    padding:10px 16px !important;
    margin:0 24px 0 0 !important;
    font-family:'Lato', sans-serif;
    font-size:11px !important; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
    color:var(--ink) !important; background:#fff;
    border:1px solid var(--ink); border-radius:2px;
    transition:background .25s ease, color .25s ease;
    flex-shrink:0;
    white-space:nowrap;       /* keep icon + label on one line */
    width:auto;
  }
  .back-to-top:hover { background:var(--ink); color:#fff !important; }
  .back-to-top svg { display:block; flex-shrink:0; }

  /* "Follow us" — not an accordion; always-visible icon row above the bottom bar */
  .mockup-footer .footer-card:last-of-type { border-bottom:none !important; }
  .mockup-footer .footer-card:last-of-type .footer-header-2,
  .mockup-footer .footer-card:last-of-type .footer-header { display:none !important; }
  .mockup-footer .footer-card:last-of-type .footer-card__body { max-height:none !important; overflow:visible !important; }
  .mockup-footer .footer-card:last-of-type .container-8 {
    display:flex !important; flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important; gap:16px !important;
    padding:24px 24px !important;
  }
  /* mobile: bigger badges (40px), no handle text */
  .mockup-footer .footer-card:last-of-type .link-block-9 {
    display:inline-flex !important; gap:0 !important; padding:0 !important;
  }
  .mockup-footer .footer-card:last-of-type .social-badge {
    width:40px; height:40px;
  }
  .mockup-footer .footer-card:last-of-type .social-badge svg { width:20px; height:20px; }
  .mockup-footer .footer-card:last-of-type .with-logo-items { display:none !important; }

  /* bottom bar on mobile: payments LEFT, copyright RIGHT on one row.
     Note: the markup wraps payments in .footer-bar__row but renders
     .footertext as a SIBLING of that row (inside .footer-bar). To get
     them on one line we make .footer-bar itself the flex container. */
  /* Section padding is asymmetric: 0 horizontally so the payment row
     starts flush with the page edge (matches the accordion items'
     visual left baseline), but 24px horizontal padding on .footer-bar
     so copyright doesn't kiss the right edge either. */
  .mockup-footer .footer .section { padding:16px 0 28px !important; }
  .mockup-footer .footer-bar {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:0 24px;       /* breathing room on the right edge for the copyright */
  }
  .mockup-footer .footer-bar__row {
    display:flex !important;
    align-items:center;
    flex:0 1 auto;        /* don't grow to fill — let copyright sit next to it */
    padding:0 !important;
  }
  .mockup-footer .paymentmethods {
    justify-content:flex-start !important; flex-wrap:wrap; gap:6px !important;
  }
  .mockup-footer .paymentmethods img { width:28px !important; height:auto !important; }
  .mockup-footer .footertext {
    font-size:11px !important;
    text-align:right !important;
    margin:0 !important;
    flex:0 0 auto;        /* natural content width, doesn't stretch */
    width:auto !important;
    white-space:nowrap;
  }

  /* Follow us card on mobile: social icons LEFT, Back to top RIGHT
     on the same row inside the (expanded) accordion body. */
  .mockup-footer .footer-card:last-of-type .footer-card__body {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
  }
  .mockup-footer .footer-card:last-of-type .container-8 {
    flex:0 1 auto;
    padding:6px 24px 6px !important;
  }
}

/* language switcher — keep all 5 languages visible at any width */
.mockup-footer .languagedrop { overflow:visible !important; max-width:100% !important; }
.mockup-footer .kk-lang-dropdown {
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  white-space:nowrap;   /* each language stays on one line */
}
.mockup-footer .footer-bar__row { flex-wrap:wrap !important; gap:16px; padding:0 32px; }
@media (max-width: 760px) {
  .mockup-footer .footer-bar__row { justify-content:center; }
  .mockup-footer .kk-lang-dropdown { justify-content:center; }
  .mockup-footer .paymentmethods { justify-content:center; flex-wrap:wrap; }
}

/* ─── bottom nav (3 pillars) — labels float directly on the images ─
   Desktop only: on mobile the bar competes with the .tile__cta glass
   pill and adds yet another fixed row to juggle against device heights
   (per Jeff's review). Hidden ≤760px via the rule lower in this file. */
.botnav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--nav-h);
  display:grid; grid-template-columns:repeat(3, 1fr);
  pointer-events:none;   /* let the links re-enable; the bar itself is invisible */
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
@media (max-width: 760px) {
  .botnav { display:none !important; }
}
.botnav.is-hidden { opacity:0; transform:translateY(12px); }
.botnav.is-hidden a { pointer-events:none; }
.botnav a {
  pointer-events:auto;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;                               /* tight gap on desktop; mobile overrides */
  min-height:48px;                       /* WCAG 2.1 AA touch-target floor */
  padding-bottom:14px;                   /* leaves room below for the teal dot */
  text-decoration:none !important; color:#fff !important;
  font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase !important;
  font-weight:700 !important;
  opacity:.7; transition:opacity .3s var(--ease);
  text-shadow:0 1px 6px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.25);
}
.botnav small { color:#fff; }
.botnav a:hover { opacity:1; }
.botnav a.is-active { opacity:1; }
.botnav a:after {
  content:""; position:absolute; left:50%; bottom:10px;
  width:6px; height:6px; border-radius:50%; background:var(--teal);
  transform:translate(-50%, 6px) scale(0); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
  box-shadow:0 0 8px rgba(0,0,0,.3);
}
.botnav a.is-active:after { transform:translate(-50%, 0) scale(1); opacity:1; }
.botnav small {
  font-size:9px; letter-spacing:.14em; opacity:.6; font-weight:400;
  line-height:1;
}

/* ─── nav-collapse breakpoint ────────────────────────────────────
   The desktop nav + account row stops fitting around 940-1000px (the
   logo starts shrinking and "Account" gets cropped). So collapse to
   the hamburger drawer well before that, at <=980px. Below 760px the
   real phone tweaks (font sizes, video tile cropping, etc.) kick in. */
@media (max-width: 980px) {
  .topbar-nav, .topbar-right { display:none; }
  .hamburger { display:inline-flex; }
  /* side menu slides in from the RIGHT to match the hamburger position */
  .sidemenu { left:auto; right:0; transform:translateX(100%); box-shadow:0 0 40px rgba(0,0,0,.08); }
  .sidemenu.is-open { transform:translateX(0); }
}

/* ─── phone-only tweaks ──────────────────────────────────────────── */
@media (max-width: 760px) {
  :root {
    --label-pad:24px; --nav-h:56px; --top-h:80px;
    --side-w:min(320px, 88vw);    /* roomy enough for two chips side-by-side + 22px nav items */
  }
  .topbar {
    padding:10px 18px;
    background:transparent;     /* no banner on mobile — controls float on the image */
    border-bottom:none;
  }
  /* Homepage mobile: hamburger sits over the hero video on a
     transparent topbar. Keep the glass pill see-through (Jeff prefers
     the lighter feel), but switch the bars to dark ink so they read
     against any video frame. */
  .hamburger {
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.45);
    color:var(--ink);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
            backdrop-filter:saturate(160%) blur(10px);
    box-shadow:0 4px 14px -4px rgba(0,0,0,.22);
  }
  .hamburger:hover {
    background:rgba(255,255,255,.34);
    border-color:rgba(255,255,255,.7);
  }
  .hamburger__bars span {
    background:var(--ink);
    box-shadow:0 0 6px rgba(255,255,255,.6);
  }
  /* When the drawer is open the hamburger sits over the white
     sidemenu — drop the glass treatment and switch the bars (now
     the "X") to dark ink so they're visible. */
  .hamburger.is-open {
    background:#fff;
    border-color:rgba(0,0,0,.08);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .hamburger.is-open .hamburger__bars span { background:#333; }
  /* topbar-nav / topbar-right / hamburger / sidemenu side: handled by
     the 980px breakpoint above. Phone-only visual tweaks stay here. */
  .brand img { width:60px; height:60px; }
  .section { grid-template-columns:1fr; grid-auto-rows:1fr; }
  .tile__title { font-size:28px; }
  .sidemenu__list a { font-size:22px !important; padding:14px 24px; }
  /* compact bottom-nav labels so all 3 fit cleanly */
  .botnav a { font-size:9px !important; letter-spacing:.12em !important; padding:0 4px 14px; gap:6px; }
  .botnav small { font-size:8px; opacity:.5; }
  /* on phones, hide the right "image-only" tile (it's decorative) */
  .section .tile:nth-child(2) { display:none; }
  .section { grid-template-columns:1fr; }
  /* less empty space below the footer on phones; the SEO paragraph
     above already has its own top padding for the topbar, so the
     section below it only needs a small breathing gap. */
  .mockup-footer { padding-bottom:24px; }
  .mockup-footer .section { padding:8px 0 12px; }
}