/* ============================================================
   Ikabin — design system
   Apple-inspired: white space, big type, hairline rules,
   frosted nav, one red accent (sampled from the logo).
   ============================================================ */

/* ---------- self-hosted premium typeface ---------- */
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f6;
  --bg-warm: #faf8f5;       /* warm cream alt for premium sections */
  --bg-dark: #0b0c0e;       /* deep, slightly cool near-black */
  --ink: #17181c;           /* richer near-black for crisper type */
  --ink-mute: #62646b;
  --ink-faint: #8a8c93;
  --accent: #c94138;        /* sampled from ikabin logo */
  --accent-press: #ae362e;
  --accent-soft: rgba(201,65,56,.08);
  --steel: #3f4a5e;         /* secondary engineering tone */
  --on-accent: #ffffff;
  --rule: #d6d6dc;
  --rule-soft: #ebebef;

  --nav-h: 60px;
  --maxw: 1180px;
  --readw: 720px;
  --radius: 3px;
  --radius-lg: 3px;
  --pill: 3px;

  --shadow-xs: 0 1px 2px rgba(17,18,22,.05);
  --shadow-sm: 0 1px 3px rgba(17,18,22,.06), 0 6px 16px rgba(17,18,22,.05);
  --shadow-md: 0 4px 12px rgba(17,18,22,.08), 0 18px 40px rgba(17,18,22,.08);
  --shadow-lg: 0 14px 30px rgba(17,18,22,.10), 0 44px 80px rgba(17,18,22,.10);
  --shadow-xl: 0 30px 60px rgba(17,18,22,.16), 0 70px 140px rgba(17,18,22,.12);
  --shadow-accent: 0 14px 30px rgba(201,65,56,.22);

  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: clamp(64px, 10vw, 140px); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #f5f5f7; }
.center { text-align: center; }
.rule { height: 1px; background: var(--rule-soft); border: 0; }

/* ---------- typography ---------- */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent);
}
.display {
  font-size: clamp(42px, 7.2vw, 84px);
  line-height: 1.01; font-weight: 700; letter-spacing: -0.04em;
}
.h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; }
.h3 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.subhead {
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.3; font-weight: 500;
  color: var(--ink-mute); letter-spacing: -0.01em;
}
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-mute); }
.muted { color: var(--ink-mute); }
.measure { max-width: var(--readw); margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 1px solid transparent; border-radius: var(--pill);
  padding: 13px 26px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  transition: transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(201,65,56,.25), 0 8px 20px rgba(201,65,56,.18); }
.btn-primary:hover { background: var(--accent-press); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 19px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Apple-style inline link with chevron */
.link {
  color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: .25em;
}
.link::after { content: "›"; font-size: 1.15em; line-height: 0; transition: transform .3s var(--ease-spring); }
.link:hover::after { transform: translateX(4px); }
.link--light { color: #2997ff; }

/* ============================================================
   NAV (frosted, sticky)
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(17,18,22,.06);
  box-shadow: 0 1px 24px rgba(17,18,22,.04);
}
.nav__inner {
  height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav__logo img { height: 30px; width: auto; display: block; }
@media (max-width: 820px) { .nav__logo img { height: 27px; } }
.nav__menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; margin-left: 24px; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; padding: 0; margin: 0; }
/* products = primary, prominent */
.nav__links--products a { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; transition: color .2s; }
.nav__links--products a:hover { color: var(--accent); }
/* product nav: hover preview (desktop) */
.nav__product { position: relative; }
.nav__thumb { display: none; }
.nav__pcap, .nav__pprice { display: none; }
.nav__flyout {
  position: absolute; top: calc(100% + 8px); left: 0; width: 264px;
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px;
  box-shadow: var(--shadow-md); padding: 14px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 60;
}
.nav__flyout::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav__product:hover .nav__flyout, .nav__product:focus-within .nav__flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav__flyout-img { width: 60px; height: 60px; flex: 0 0 auto; object-fit: contain; background: var(--bg-alt); border-radius: 3px; padding: 6px; }
.nav__flyout-body { display: flex; flex-direction: column; min-width: 0; }
.nav__flyout-body strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.nav__flyout-cap { font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
.nav__flyout-price { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.nav__flyout-cta { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 3px; }
/* utility = secondary, de-emphasized */
.nav__util { display: flex; align-items: center; gap: 22px; }
.nav__util > a { font-size: 13px; color: var(--ink-mute); transition: color .2s; }
.nav__util > a:hover { color: var(--ink); }
.nav__cta { font-size: 14px; }
.nav__cta a {
  background: var(--accent); color: #fff; padding: 6px 15px; border-radius: var(--pill);
  font-weight: 500; transition: background .2s;
}
.nav__cta a:hover { background: var(--accent-press); }
.nav__toggle { display: none; background: none; border: 0; padding: 6px; }
.nav__toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: .3s var(--ease); }
.nav__toggle span + span { margin-top: 5px; }

/* Default: bar pill hidden — only shown in the collapsed-nav range below.
   Declared up here so the @media override that follows wins on source order. */
.nav__sales.nav__sales--bar { display: none; }

/* Below 1080px the nav collapses into a hamburger drawer earlier so the
   bar doesn't get cramped trying to fit products + util + pill + Buy. */
@media (max-width: 1080px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; justify-content: flex-start; flex: none; margin-left: 0;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule-soft); box-shadow: var(--shadow-md);
    padding: 8px 10px 18px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.open .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  /* product rows in the drawer — bigger card-style tappable rows with
     thumb on the left, name + capacity stacked, price flush-right,
     and a subtle chevron indicator. */
  .nav__links--products { margin-inline: -10px; display: flex; flex-direction: column; gap: 4px; }
  .nav__links--products a {
    display: grid;
    grid-template-columns: 60px 1fr auto 14px;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 6px;
    border-radius: 3px;
    border-bottom: 0;
    color: var(--ink);
    transition: background .15s var(--ease), transform .15s var(--ease);
    position: relative;
  }
  .nav__links--products a::after {
    content: ""; grid-column: 4;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--ink-faint);
    border-top: 1.5px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: border-color .15s var(--ease), transform .15s var(--ease);
  }
  .nav__links--products a:hover { background: var(--bg-alt); }
  .nav__links--products a:hover::after { border-color: var(--accent); transform: rotate(45deg) translate(2px, -2px); }
  .nav__links--products a:active { background: #e9ebef; }
  .nav__thumb {
    display: block; width: 60px; height: 60px; flex: 0 0 auto;
    object-fit: contain;
    background: linear-gradient(160deg, #fafafb, #eef0f3);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    padding: 6px;
  }
  .nav__pbody { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; gap: 3px; }
  .nav__pname { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
  .nav__pcap { display: block; font-size: 12.5px; color: var(--ink-mute); }
  .nav__pprice { display: block; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .nav__flyout { display: none; }
  /* Explore links collapse into a row of small bg-tinted pills under
     the EXPLORE label — much less vertical weight than full-width
     bordered rows, and the section reads as auxiliary navigation. */
  .nav__util { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .nav__util > a {
    padding: 8px 14px; font-size: 13px; line-height: 1;
    background: var(--bg-alt); border-radius: 3px;
    border-bottom: 0; color: var(--ink);
  }
  .nav__util > a:hover { background: #e9ebef; }
  /* The Buy button is redundant in the drawer — the product rows up
     top already link straight to checkout-able product pages, and the
     Talk to sales menu carries the primary action. */
  .nav__cta { display: none; }

  /* section labels — make it read as a structured menu */
  .nav__links--products,
  .nav__util { position: relative; padding-top: 28px; }
  .nav__links--products::before,
  .nav__util::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    font-size: 11px; font-weight: 600; letter-spacing: .12em;
    color: var(--ink-faint); text-transform: uppercase;
    padding: 14px 4px 6px;
  }
  .nav__links--products::before { content: "Range"; }
  .nav__util::before { content: "Explore"; }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* "Talk to sales" pill visible alongside the hamburger (replaces the
     in-bar nav items at this width). Double-class selector to outrank
     the .nav__sales base rule defined later in the file. */
  .nav__sales.nav__sales--bar { display: inline-flex; white-space: nowrap; }
  /* Push the bar pill (well, the .sales-nav wrap that contains it) all
     the way to the right, so it sits right next to the hamburger. */
  .sales-nav--bar { margin-left: auto; margin-right: 6px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; text-align: center; overflow: hidden; }
.hero--home { background: var(--bg-alt); }
.hero__inner { padding-block: clamp(56px, 9vw, 110px) 0; }
.hero .display { margin-bottom: 14px; }
.hero__sub { max-width: 640px; margin: 0 auto 28px; }
.hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(36px, 6vw, 64px); }
.hero__media { max-width: 1100px; margin-inline: auto; }
.hero__media img { width: 100%; height: auto; }

/* product hero (per product page) */
.phero { text-align: center; padding-top: clamp(40px, 6vw, 72px); }
.phero__price { font-size: 19px; color: var(--ink-mute); margin-top: 6px; }
.phero__price strong { color: var(--ink); font-weight: 600; }
.phero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.phero__media { margin-top: clamp(32px, 5vw, 56px); }
.phero__media img { width: 100%; border-radius: var(--radius-lg); }

/* ============================================================
   PRODUCT TILES (home)
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
  background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-xs);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.tile__media { background: linear-gradient(160deg, #fafafb, #eef0f3); padding: 28px 24px; display: grid; place-items: center; aspect-ratio: 1/1; }
.tile__media img { max-height: 100%; width: auto; object-fit: contain; max-width: 100%; transition: transform .5s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.tile__meta { flex: 1 1 0; min-width: 0; }
.tile__name { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.tile__cap { color: var(--ink-mute); font-size: 14px; margin-top: 3px; }
.tile__pricing { text-align: right; flex-shrink: 0; }
.tile__price { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tile__free { color: var(--accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.tile__free .icon { font-size: 14px; }
.tile__actions { padding: 16px 22px 22px; display: flex; gap: 12px; align-items: center; margin-top: auto; }

@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .tile__body { flex-wrap: wrap; }
  .tile__pricing { text-align: left; }
  .tile__free { justify-content: flex-start; }
}

/* ============================================================
   FEATURE ROWS (product pages)
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 110px); }
.feature--rev .feature__text { order: 2; }
.feature__media img { width: 100%; border-radius: var(--radius); background: var(--bg-alt); }
.feature__text .h2 { margin-bottom: 14px; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature--rev .feature__text { order: 0; }
}

/* ============================================================
   MATERIALS TRIO
   ============================================================ */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.trio__item { text-align: center; }
.trio__item .h3 { margin-bottom: 8px; }
.trio__icon { font-size: 30px; margin-bottom: 14px; }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   SPEC GRID
   ============================================================ */
.specs { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--rule); }
.spec { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--ink-mute); font-size: 15px; }
.spec dd { font-weight: 500; }
@media (max-width: 560px) { .spec { grid-template-columns: 1fr; gap: 2px; } }

/* clear render panel */
.panel { background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 64px); text-align: center; }
.panel img { margin-inline: auto; max-height: 560px; width: auto; }

/* ============================================================
   GALLERY + LIGHTBOX
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); cursor: zoom-in; aspect-ratio: 4 / 3; }
.gallery__item--feature { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: none; place-items: center; }
.lightbox.open { display: grid; }
.lightbox__main { max-width: 92vw; max-height: 78vh; width: auto; border-radius: 3px; transition: opacity .25s var(--ease); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.lightbox__count { position: absolute; top: 20px; left: 22px; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; letter-spacing: .03em; }
.lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 3px; font-size: 22px; display: grid; place-items: center; cursor: pointer; transition: background .2s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox__btn:hover { background: rgba(255,255,255,.25); }
.lightbox__prev { left: 18px; } .lightbox__next { right: 18px; }
.lightbox__close { top: 18px; right: 18px; transform: none; }
.lightbox__thumbs { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: 92vw; overflow-x: auto; padding: 4px; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumbs img { width: 62px; height: 46px; object-fit: cover; border-radius: 3px; opacity: .45; cursor: pointer; border: 2px solid transparent; transition: opacity .2s, border-color .2s; flex: 0 0 auto; }
.lightbox__thumbs img:hover { opacity: .8; }
.lightbox__thumbs img.active { opacity: 1; border-color: #fff; }
@media (max-width: 560px) { .lightbox__btn { width: 40px; height: 40px; } .lightbox__main { max-height: 70vh; } .lightbox__thumbs img { width: 50px; height: 38px; } }

/* ============================================================
   STICKY BUY BAR (product pages)
   ============================================================ */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--rule-soft);
  transform: translateY(110%); transition: transform .4s var(--ease);
  will-change: transform; /* own compositor layer — iOS keeps it pinned while the toolbar resizes */
}
.buybar.show { transform: translateY(0); }
.buybar__inner { max-width: var(--maxw); margin-inline: auto; padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buybar__name { font-weight: 600; }
.buybar__price { color: var(--ink-mute); font-size: 14px; }
.buybar__price strong { color: var(--ink); }
@media (max-width: 560px) { .buybar__meta { display: none; } .buybar__inner { justify-content: stretch; } .buybar .btn { width: 100%; } }

/* ============================================================
   CHECKOUT + SUCCESS
   ============================================================ */
.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.checkout--pay { grid-template-columns: 1.2fr 0.8fr; } /* payment page: give the card form more room */
/* payment page: single column — order details on top, card form below */
.paywrap { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.paywrap .summary { position: static; }
.paywrap .paystep { margin: 0; }
.summary { background: linear-gradient(180deg, #fbfbfc, var(--bg-alt)); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); position: sticky; top: calc(var(--nav-h) + 20px); box-shadow: var(--shadow-md); }
.summary__media { aspect-ratio: 1 / 1; border-radius: var(--radius); margin-bottom: 20px; background: #fff; border: 1px solid var(--rule-soft); display: grid; place-items: center; padding: 22px; }
.summary__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* compact product header for the order summary (small thumbnail + title) */
.summary__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.summary__thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 3px; background: #fff; border: 1px solid var(--rule-soft); display: grid; place-items: center; padding: 8px; }
.summary__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.summary__titles { min-width: 0; }
.summary__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
.summary__cap { font-size: 13px; color: var(--ink-mute); margin: 0; }
.summary__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.summary__row:last-child { border-bottom: 0; }
.summary__total { font-size: 22px; font-weight: 600; }
.trust { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 18px; color: var(--ink-mute); font-size: 13px; }
.trust span { display: inline-flex; align-items: center; gap: 6px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--rule); border-radius: 3px;
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,65,56,.15);
}
.field--phone { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.field--phone .prefix { display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-alt); color: var(--ink-mute); font-size: 15px; }
.field .err { color: var(--accent); font-size: 13px; margin-top: 6px; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select { border-color: var(--accent); }
.form-note { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.form-note a { color: var(--accent); }
.form-note a:hover { text-decoration: underline; }
.form-error { background: #fdecec; color: var(--accent-press); border: 1px solid #f5c6c3; border-radius: 3px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }

.uae-note { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-alt); border-radius: var(--pill); padding: 8px 16px; font-size: 13px; color: var(--ink-mute); margin-bottom: 22px; }

@media (max-width: 820px) {
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
}

/* ---- buttons: small ghost step ---- */
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ============================================================
   QUOTE form — buyer-type radios, line items, success card
   ============================================================ */
.quote-form { max-width: 640px; margin-inline: auto; }

/* light section headers to break the form into chunks */
.form-section { margin: 28px 0 14px; }
.form-section:first-child { margin-top: 8px; }
.form-section__title { font-size: 14px; font-weight: 600; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }

.field--radio { border: 0; padding: 0; margin: 0 0 22px; }
.field--radio legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field--radio .radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field--radio .radio { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; transition: border-color .15s, background .15s; font-size: 14px; }
.field--radio .radio input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.field--radio .radio:has(input:checked) { border-color: var(--accent); background: rgba(201,65,56,.04); }
@media (max-width: 520px) {
  .field--radio .radio-row { grid-template-columns: 1fr; }
}

/* pod picker: one card per model, bump qty to add */
.qpicker { margin: 0 0 28px; }
.qpicker__head { margin-bottom: 14px; }
.qpicker__head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.qpicker__head p { margin: 0; font-size: 14px; }
.qcards { display: flex; flex-direction: column; gap: 10px; }
.qcard {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.qcard:hover { border-color: var(--ink); }
.qcard.is-picked { border-color: var(--accent); background: rgba(201,65,56,.03); box-shadow: 0 1px 2px rgba(201,65,56,.06), 0 6px 18px rgba(201,65,56,.08); }
.qcard__thumb { width: 72px; height: 72px; background: var(--bg-alt); border-radius: 3px; display: grid; place-items: center; overflow: hidden; }
.qcard__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.qcard__info { min-width: 0; }
.qcard__name { margin: 0 0 2px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.qcard__cap  { margin: 0 0 4px; font-size: 13px; }
.qcard__price { margin: 0; font-size: 14px; }
.qcard__price strong { font-weight: 600; }

.qcard__stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #fff; }
.qcard__step { width: 36px; height: 36px; background: var(--bg-alt); color: var(--ink); border: 0; font-size: 18px; line-height: 1; cursor: pointer; font-weight: 500; transition: background .15s, color .15s; }
.qcard__step:hover { background: var(--ink); color: #fff; }
.qcard__num { width: 44px; text-align: center; border: 0; padding: 0; font-size: 15px; font-weight: 600; -moz-appearance: textfield; background: #fff; color: var(--ink); }
.qcard__num::-webkit-outer-spin-button, .qcard__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qcard.is-picked .qcard__num { color: var(--accent); }

@media (max-width: 520px) {
  .qcard { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 10px 12px; padding: 12px; }
  .qcard__thumb { width: 56px; height: 56px; }
  .qcard__stepper { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; border-radius: 3px; }
  .qcard__step { flex: 1; height: 40px; }
  .qcard__num { flex: 1; }
}

.qsubtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 16px; background: var(--bg-alt); border-radius: 3px; margin-top: 12px;
}
.qsubtotal strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* success card */
.quote-success { max-width: 640px; margin-inline: auto; }
.quote-success .pagehead { margin-bottom: 18px; }
.quote-success #qRefLabel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-alt); padding: 2px 10px; border-radius: 3px; letter-spacing: .02em; }

/* status banners (success page) */
.status { text-align: center; max-width: 560px; margin-inline: auto; }
.status__badge { width: 64px; height: 64px; border-radius: 3px; display: grid; place-items: center; margin: 0 auto 22px; font-size: 30px; }
.status__badge--ok { background: #fbe9e7; color: #c94138; }
.status__badge--wait { background: var(--bg-alt); color: var(--ink-mute); }
.status__badge--err { background: #fdecec; color: var(--accent-press); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap { display: flex; flex-direction: column; gap: 18px; }

.contact-card {
  background: var(--bg-alt); border-radius: var(--radius); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.contact-card { position: relative; }
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.contact-card .h3 { font-size: 19px; }
.contact-card__icon { font-size: 22px; color: var(--accent); }

/* ----- channels: WhatsApp / Email / Call ----- */
.contact-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ----- Dubai location: info panel + map ----- */
.contact-location {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px;
  align-items: stretch;
}
.contact-location__info {
  background: var(--bg-warm); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 32px 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.contact-location__info .eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.contact-location__addr { font-size: 16px; }
.contact-location__meta { list-style: none; padding: 0; margin: 4px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.contact-location__meta li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-mute); }
.contact-location__meta .icon { font-size: 16px; color: var(--accent); flex: none; }
.contact-location__info .btn { align-self: flex-start; margin-top: 6px; }
.contact-location__map {
  border-radius: var(--radius); overflow: hidden;
  min-height: 340px; box-shadow: var(--shadow-sm);
  background: var(--bg-alt);
}
.contact-location__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ----- message form ----- */
.contact-card--form { max-width: var(--readw); width: 100%; margin-inline: auto; }

@media (max-width: 820px) {
  .contact-channels { grid-template-columns: 1fr; }
  .contact-location { grid-template-columns: 1fr; }
  .contact-location__map, .contact-location__map iframe { min-height: 260px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-alt); border-top: 1px solid var(--rule-soft); padding-block: 44px; font-size: 13px; color: var(--ink-mute); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; align-items: center; }
.footer__logo img { height: 16px; opacity: .55; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__links a:hover { color: var(--ink); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Visible by default (no flash, no-JS safe). JS "arms" only the elements
   that start below the fold, which then fade up as they scroll in. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.armed { opacity: 0; transform: translateY(14px); }
.reveal.armed.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.armed { opacity: 1; transform: none; transition: none; } }

/* spacing utilities */
.mt-s { margin-top: 10px; } .mt-m { margin-top: 22px; } .mt-l { margin-top: 40px; }
.stack > * + * { margin-top: 16px; }

/* dark-section text + specs card (consistency) */
.on-dark-mute { color: #a1a1a6; }
.on-dark-strong { color: #fff; font-weight: 600; }
.specs--card { background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); padding: 8px 24px; }

/* subtle entrance stagger across the features grid (pure CSS) */
.fgrid .reveal.armed:nth-child(3n+2) { transition-delay: .06s; }
.fgrid .reveal.armed:nth-child(3n+3) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .fgrid .reveal.armed { transition-delay: 0s; } }

/* ============================================================
   v2 — high-tech components
   ============================================================ */

/* ---- icons ---- */
.icon { display: inline-flex; line-height: 0; vertical-align: middle; }
.icon svg { width: 1em; height: 1em; display: block; }
.ic {
  display: inline-grid; place-items: center; width: 50px; height: 50px;
  border-radius: 3px; background: rgba(201,65,56,.10); color: var(--accent);
  font-size: 25px; flex: 0 0 auto;
}
.ic--ink { background: rgba(29,29,31,.06); color: var(--ink); }

/* ---- CLS-safe media ---- */
.hero__media img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.phero__media img { aspect-ratio: 16 / 10; object-fit: cover; }
.feature__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.panel { min-height: 340px; }

/* ---- announcement bar ---- */
.topbar {
  background: var(--ink); color: #f0f0f2; font-size: 13px; text-align: center;
  padding: 9px 16px; letter-spacing: -0.01em;
}
.topbar .icon { font-size: 15px; color: var(--accent); margin-right: 7px; }
.topbar strong { color: #fff; font-weight: 600; }

/* ---- section header ---- */
.shead { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.shead--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow .icon { font-size: 15px; }

/* ---- hero glow ---- */
.hero--home { position: relative; isolation: isolate; }
.hero--home::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -120px;
  width: 1100px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 40%, rgba(201,65,56,.13), rgba(201,65,56,0) 70%);
  pointer-events: none;
}
/* split hero: copy left, product right (home + product pages) */
.hero-split .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; text-align: left; padding-block: clamp(36px, 5vw, 84px); }
.hero-split .hero__badges { justify-content: flex-start; margin-bottom: 22px; }
.hero-split .display { font-size: clamp(34px, 4.7vw, 62px); }
.hero-split .hero__sub { margin: 0 0 26px; max-width: 36ch; }
.hero-split .hero__cta { justify-content: flex-start; margin-bottom: 0; }
.hero__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* Colour-variant renders are portrait studio shots on white — show the whole
   pod (contain) on a white card so it sits seamlessly (no grey letterbox).
   Set by assets/js/product.js when a non-default colour is selected. */
.hero__art img.colorpick-variant { object-fit: contain; background: #fff; }
.hero--product { background: linear-gradient(180deg, var(--bg-alt), #fff 90%); }
.phero__price { margin: 0 0 8px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; }
.chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-mute); }
.chips .icon { font-size: 17px; color: var(--accent); }
.chips .chips__free { color: var(--accent-press); font-weight: 600; }
@media (max-width: 880px) {
  .hero-split .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero-split .hero__badges, .hero-split .hero__cta, .hero-split .chips { justify-content: center; }
  .hero-split .hero__sub { margin-inline: auto; }
  .hero__art { max-width: 460px; margin: 6px auto 0; }
}

/* --- Hero gallery (multiple images, used on product pages).
   Structure: .hero__art--gallery > .hero__art-track (image scroller)
                                  + .hero__art-thumbs (button row).
   Desktop shows only the main image in the track and hides the
   thumb strip — the page already has a dedicated gallery section
   further down. Mobile shows the swipeable main + a 4-thumb strip
   underneath. */
.hero__art-track img { display: block; }
.hero__art-thumbs { display: none; }
@media (min-width: 721px) {
  .hero__art-track img:not(:first-child) { display: none; }
}

/* --- Product hero, mobile: images first, text minimal. */
@media (max-width: 720px) {
  .hero--product { background: linear-gradient(180deg, var(--bg-alt), #fff 96%); }
  .hero-split .hero__inner { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(12px, 3vw, 22px); }
  /* image carousel sits between the eyebrow/h1 and the price/CTAs.
     hero__copy uses display:contents so its children participate in
     the parent flex order — we set order on each element. */
  .hero--product .hero__copy { display: contents; }
  .hero--product .eyebrow      { order: 1; margin-bottom: 0; }
  .hero--product .display      { order: 2; font-size: clamp(28px, 8.5vw, 38px); line-height: 1.05; margin: 0; }
  .hero--product .display br   { display: none; }
  .hero--product .hero__art    { order: 3; margin: 4px 0 0; }
  .hero--product .phero__price { order: 4; font-size: 16px; margin: 0; text-align: center; }
  .hero--product .hero__cta    { order: 5; gap: 10px; margin: 0; }
  .hero--product .hero__cta .btn-lg { padding: 12px 22px; font-size: 16px; }
  /* below-the-fold material */
  .hero--product .hero__sub    { order: 6; font-size: 15px; line-height: 1.45; margin: 6px auto 0; max-width: 32ch; }
  .hero--product .chips        { order: 7; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 8px; text-align: left; }
  .hero--product .chips li { font-size: 13px; line-height: 1.25; }
  .hero--product .chips .icon { font-size: 15px; flex: 0 0 auto; }
  .hero--product .chips__free { grid-column: 1 / -1; justify-self: center; }

  /* image gallery: main strip on top, thumb buttons below */
  .hero--product .hero__art--gallery { display: flex; flex-direction: column; gap: 12px; }

  /* main strip — full-width slides with HARD scroll-snap. Each swipe
     advances exactly one image regardless of velocity, because
     scroll-snap-stop:always blocks the carousel from skipping past
     a snap point. Images keep their natural aspect ratio (no crop). */
  .hero--product .hero__art-track {
    display: flex; gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--wrap-pad, 22px));
    padding-inline: 0;
    scrollbar-width: none;
  }
  .hero--product .hero__art-track::-webkit-scrollbar { display: none; }
  .hero--product .hero__art-track img {
    flex: 0 0 100%;
    width: 100%;
    height: 320px;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* thumb row — small tappable squares, current one highlighted */
  .hero--product .hero__art-thumbs {
    display: flex; gap: 8px; justify-content: center;
    flex-wrap: wrap;
  }
  .hero--product .hero__art-thumb {
    width: 56px; height: 56px; padding: 0; border: 0; background: transparent;
    border-radius: 3px; overflow: hidden; cursor: pointer;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow .15s var(--ease), transform .15s var(--ease);
  }
  .hero--product .hero__art-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: .65; transition: opacity .15s var(--ease);
  }
  .hero--product .hero__art-thumb.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
  .hero--product .hero__art-thumb.is-active img { opacity: 1; }
  .hero--product .hero__art-thumb:hover img { opacity: 1; }
}

/* --- Product colour picker (swatch row on the product hero).
   Mounted by assets/js/product.js into [data-colorpick]; data from
   assets/data/variants.json. Hidden until JS fills it (no-JS = no picker). */
.colorpick { margin: 2px 0 16px; }
.colorpick__label { font-size: 13px; color: var(--ink-mute); margin: 0 0 9px; }
.colorpick__label strong { color: var(--ink); font-weight: 600; }
.colorpick__row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 470px; }
.colorpick__dot {
  width: 26px; height: 26px; border-radius: 3px; padding: 0; cursor: pointer;
  background: var(--swatch, #ccc); border: 1px solid rgba(0,0,0,.18);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.colorpick__dot:hover { transform: scale(1.12); }
.colorpick__dot.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
@media (max-width: 720px) {
  /* hero__copy is display:contents on mobile — give the picker an explicit
     order so it sits with the price (4), not at the top (default 0).
     hero__inner uses align-items:center, which sizes items to their content —
     so the nowrap swatch row made .colorpick 1456px wide and bled off both
     edges. align-self:stretch + min-width:0 pin it to the screen width so the
     row SCROLLS inside it instead of overflowing. */
  .hero--product .colorpick { order: 4; margin: 6px 0 0; align-self: stretch; min-width: 0; }
  .colorpick__label { text-align: center; }
  .colorpick__row {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    min-width: 0; gap: 12px; max-width: none; padding: 8px 14px 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* soft fade at both ends to signal there's more to scroll */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .colorpick__row::-webkit-scrollbar { display: none; }
  /* Bigger, glossy "bubble" swatches with a springy tap + selected pop. */
  .colorpick__dot {
    flex: 0 0 auto; width: 36px; height: 36px;
    border: 2px solid rgba(255, 255, 255, .75);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .4), 0 2px 6px rgba(17, 18, 22, .2);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s var(--ease);
  }
  .colorpick__dot:hover { transform: none; }
  .colorpick__dot:active { transform: scale(.85); }
  .colorpick__dot.is-active {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent), 0 5px 12px rgba(17, 18, 22, .28);
  }
}

/* split hero: copy left, 3 small product cards stacked right (home) */
.hero--home { background: linear-gradient(180deg, #f4f5f7 0%, #ffffff 90%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.92fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 5vw, 80px); }
.hero__head { text-align: left; max-width: none; margin: 0; }
.hero__eyebrow { margin-bottom: 14px; }
.hero--home .display { font-size: clamp(36px, 4.2vw, 58px); text-wrap: balance; }
@media (min-width: 861px) { .hero--home .hero__grid { grid-template-columns: 1.2fr 0.8fr; } }
.hero--home .hero__sub { margin: 18px 0 0; max-width: 40ch; }

/* integrated perks line (free delivery lives here) */
.hero__perks { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.hero__perks li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.hero__perks .icon { color: var(--accent); font-size: 18px; }
.hero__perks strong { color: var(--ink); font-weight: 600; }
.hero__head .hero__cta { justify-content: flex-start; margin: 28px 0 0; }

.hero__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; font-size: 14px; }
.hero__contact-lbl { color: var(--ink-mute); }
.hero__contact a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--ink); font-weight: 600; text-decoration: none; }
.hero__contact a:hover { color: var(--accent); }
.hero__contact .icon { color: var(--accent); font-size: 18px; }
@media (max-width: 860px) { .hero__contact { justify-content: center; margin-top: 8px; } .hero__contact-lbl { flex-basis: 100%; } }

.hero__showcase { display: flex; flex-direction: column; gap: 12px; }
.hero__pod { display: flex; flex-direction: row; align-items: stretch; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.hero__pod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.hero__pod-media { background: var(--bg-alt); width: 104px; flex: 0 0 104px; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.hero__pod-media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.hero__pod:hover .hero__pod-media img { transform: scale(1.05); }
.hero__pod-info { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.hero__pod-text h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hero__pod-text p { color: var(--ink-mute); font-size: 12.5px; margin-top: 2px; }
.hero__pod-text strong { color: var(--ink); font-weight: 600; }
.hero__pod-go { color: var(--accent); flex: 0 0 auto; line-height: 0; transition: transform .3s var(--ease); }
.hero__pod-go svg { width: 20px; height: 20px; }
.hero__pod:hover .hero__pod-go { transform: translateX(3px); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 26px; text-align: center; padding-top: clamp(24px, 5vw, 44px); }
  .hero__head { text-align: center; }
  .hero--home .hero__sub { margin: 0 auto; }
  .hero__perks { justify-content: center; }
  .hero__head .hero__cta { justify-content: center; }
  .hero__showcase { max-width: 480px; width: 100%; margin-inline: auto; }
}

/* quick-nav row under the product cards — only shown on small mobile
   where we hide the verbose hero CTAs. Gives clear secondary paths
   to Compare, FAQ, Contact, and Request a quote without bloating
   the first-fold copy. */
.hero__quicknav { display: none; }

@media (max-width: 720px) {
  /* compress hero text so all three product cards land above the fold */
  .hero--home .hero__grid { gap: 14px; padding-block: clamp(12px, 3vw, 22px); }
  .hero--home .hero__eyebrow { margin-bottom: 6px; }
  .hero--home .display { font-size: clamp(28px, 8vw, 36px); line-height: 1.05; margin: 0; }
  .hero--home .display br { display: none; }
  /* the topbar already says "delivery + UAE-wide + 3 weeks", and the
     three product cards are the actions — so on phones we hide the
     subhead, perks line, and CTAs to free the fold */
  .hero--home .hero__sub,
  .hero--home .hero__perks,
  .hero--home .hero__head .hero__cta { display: none; }

  /* tighter product cards: smaller thumb, smaller text rows */
  .hero__showcase { gap: 8px; }
  .hero__pod-media { width: 80px; flex: 0 0 80px; padding: 8px; }
  .hero__pod-info { padding: 10px 14px; }
  .hero__pod-text h3 { font-size: 15px; }
  .hero__pod-text p { font-size: 12px; margin-top: 1px; }

  .hero__quicknav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  }
  .hero__quicknav a { font-size: 13px; color: var(--ink-mute); padding: 4px 0; transition: color .15s; }
  .hero__quicknav a:hover { color: var(--ink); }
}

#products { scroll-margin-top: 76px; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.pillbadge {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.7);
  border: 1px solid var(--rule); border-radius: var(--pill); padding: 7px 14px;
  font-size: 13px; color: var(--ink-mute); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pillbadge .icon { font-size: 15px; color: var(--accent); }

/* ---- stats: four separated cards with icon badges ---- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}
.stat {
  position: relative; text-align: left;
  background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  box-shadow: 0 1px 2px rgba(17,18,22,.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.stat:hover { transform: translateY(-2px); border-color: var(--rule); box-shadow: 0 10px 28px rgba(17,18,22,.06), 0 1px 2px rgba(17,18,22,.05); }
.stat__ic {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin: 0 0 22px;
  border-radius: 3px; background: rgba(201,65,56,.08);
  font-size: 20px; color: var(--accent);
}
.stat__num {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1; color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat__num .icon { font-size: .7em; color: #f5a623; }
.stat__label { color: var(--ink-mute); font-size: 14px; margin-top: 10px; line-height: 1.35; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 22px 20px 20px; } .stat__ic { width: 40px; height: 40px; margin-bottom: 18px; } }

/* ---- feature grid ---- */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcard {
  background: linear-gradient(180deg, #ffffff, #fcfcfd); border: 1px solid var(--rule-soft); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-xs);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.fcard h3 { font-size: 19px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -0.02em; }
.fcard p { color: var(--ink-mute); font-size: 15px; }
@media (max-width: 880px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

/* ---- split / showcase (image + copy, dark) ---- */
.showcase { position: relative; overflow: hidden; }
.showcase__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }

/* ---- compare table ---- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.compare th, .compare td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.compare thead th { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.compare thead .col-prod { color: var(--ink); font-size: 17px; text-transform: none; letter-spacing: -0.02em; font-weight: 700; vertical-align: bottom; }
.compare__thumb { display: block; width: 62px; height: 62px; margin-bottom: 10px; border-radius: 3px; background: linear-gradient(160deg, #fafafb, #eef0f3); border: 1px solid var(--rule-soft); padding: 6px; }
.compare__thumb img { width: 100%; height: 100%; object-fit: contain; }
.compare tbody th { font-weight: 500; color: var(--ink-mute); font-size: 14px; }
.compare td { font-weight: 500; }
.compare .feat { background: rgba(201,65,56,.04); }
.compare .price td, .compare .price th { font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 0; }
.compare .buyrow td { padding-top: 14px; }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }

/* Mobile compare: sticky feature labels on the left, swipe-snap the
   product columns. Each column gets 1/2 of the visible width minus the
   label column, so the current product and the next one both stay in
   view — the relationship that makes a comparison readable. */
@media (max-width: 720px) {
  .compare-wrap { scroll-snap-type: x mandatory; scrollbar-width: none; }
  .compare-wrap::-webkit-scrollbar { display: none; }
  .compare { min-width: 540px; }
  .compare th, .compare td { padding: 12px 12px; font-size: 13px; }
  .compare thead th { font-size: 11px; }
  .compare thead .col-prod { font-size: 14px; padding-top: 14px; }
  .compare__thumb { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 3px; padding: 4px; }
  .compare tbody th { font-size: 12px; }
  .compare .price td, .compare .price th { font-size: 15px; }
  /* sticky leftmost (feature-label) column */
  .compare th:first-child,
  .compare tbody th { /* row labels are <th> in tbody */
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    min-width: 96px; max-width: 96px;
    border-right: 1px solid var(--rule);
  }
  /* product columns scroll-snap so a swipe lands cleanly */
  .compare .col-prod, .compare td { scroll-snap-align: start; }
  .compare .buyrow .btn { padding: 8px 14px; font-size: 13px; }
}

/* ---- FAQ accordion ---- */
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; background: none; border: 0; text-align: left; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 4px; font-size: clamp(17px, 2vw, 20px); font-weight: 500; letter-spacing: -0.01em;
}
.faq__q .icon { font-size: 22px; color: var(--ink-mute); transition: transform .3s var(--ease); }
.faq__item.open .faq__q .icon { transform: rotate(45deg); color: var(--accent); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding: 0 4px 22px; color: var(--ink-mute); max-width: 70ch; }

/* ---- reviews / social proof ---- */
.proof { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.proof__score { text-align: center; }
.proof__big { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stars { display: inline-flex; gap: 3px; color: #f5a623; font-size: 18px; margin: 10px 0 6px; }
.proof__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proof__pillars .ic { margin-bottom: 12px; }
.proof__pillars h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.proof__pillars p { color: var(--ink-mute); font-size: 14px; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; text-align: center; } .proof__pillars { grid-template-columns: 1fr; gap: 26px; } }

/* ---- promise (lifetime service) — editorial divider layout ---- */
.promise { background: var(--bg-warm); }
.promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 5vw, 60px); }
.promise__item { padding: 4px clamp(22px, 3vw, 46px); border-left: 1px solid var(--rule); }
.promise__item:first-child { border-left: 0; padding-left: 0; }
.promise__ic { display: block; width: 30px; height: 30px; color: var(--accent); margin-bottom: 18px; }
.promise__item h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 9px; }
.promise__item p { color: var(--ink-mute); font-size: 15px; line-height: 1.55; }
.promise__proof { text-align: center; margin-top: clamp(36px, 4.5vw, 52px); color: var(--ink-mute); font-size: 14px; }
.promise__proof .icon { color: #f5a623; font-size: 16px; vertical-align: -2px; }
.promise__proof strong { color: var(--ink); font-weight: 700; }
.promise__proof .link { display: inline-flex; }
@media (max-width: 760px) {
  .promise__grid { grid-template-columns: 1fr; }
  .promise__item { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0 0; margin-top: 24px; }
  .promise__item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* ---- recent installations grid (small proof-of-work thumbnails) ---- */
/* ---- installs: auto-scrolling two-row marquee ----
   The renderer (initInstalls in main.js) builds two .install-row strips,
   duplicates each for a seamless loop, and lets CSS translate them in
   opposite directions. Hover pauses the scroll; prefers-reduced-motion
   stops it entirely. */
.installs {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.install-row { display: flex; gap: 10px; width: max-content; animation: installsLTR 80s linear infinite; }
.install-row--rtl { animation-name: installsRTL; }
.installs:hover .install-row { animation-play-state: paused; }

.install {
  /* Portrait 3:4 tiles — the install photos are portrait, so this shows the
     whole pod instead of a cropped middle slice. */
  flex: 0 0 165px; height: 220px;
  display: block; border-radius: 3px; overflow: hidden; background: var(--bg-alt);
  box-shadow: var(--shadow-xs);
}
.install img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.install:hover img { transform: scale(1.05); }

@media (max-width: 820px) { .install { flex: 0 0 135px; height: 180px; } }
@media (max-width: 520px) { .install { flex: 0 0 110px; height: 147px; } }

@keyframes installsLTR { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes installsRTL { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .install-row { animation: none; }
}

/* ---- checklist ---- */
.checklist { list-style: none; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; }
.checklist .icon { color: var(--accent); font-size: 20px; flex: 0 0 auto; margin-top: 1px; }

/* ---- dark section CTA glow ---- */
.section--dark { position: relative; isolation: isolate; overflow: hidden; }
.section--dark::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(55% 90% at 50% -10%, rgba(201,65,56,.30), rgba(201,65,56,0) 60%),
    radial-gradient(45% 80% at 100% 110%, rgba(90,120,170,.16), rgba(90,120,170,0) 60%);
}

/* ---- quantity stepper ---- */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--pill); overflow: hidden; background: #fff; }
.stepper button { width: 42px; height: 42px; background: #fff; border: 0; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.stepper button .icon { font-size: 18px; }
.stepper button:hover { background: var(--bg-alt); }
.stepper button:disabled { opacity: .3; pointer-events: none; }
.stepper input { width: 46px; text-align: center; border: 0; font-size: 16px; font-weight: 600; background: #fff; color: var(--ink); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.qty-row .muted { font-size: 14px; }

/* ---- payment page ---- */
.pay { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(24px, 4vw, 52px); align-items: start; max-width: 980px; margin-inline: auto; }
.paycard { background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-sm); }
.securebar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; }
.securebar .icon { color: #c94138; font-size: 17px; }
.demo-tag { display: inline-flex; align-items: center; gap: 7px; background: #fff7e6; color: #8a5a00; border: 1px solid #f0d9a8; border-radius: var(--pill); padding: 6px 13px; font-size: 12.5px; margin-bottom: 20px; }
.demo-tag .icon { font-size: 15px; }
.paygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.paygrid .field--full { grid-column: 1 / -1; }
.paygrid .field { margin-bottom: 0; }
@media (max-width: 760px) { .pay { grid-template-columns: 1fr; } }

/* checkout: what's included */
.summary__included { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.summary__included h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-mute); margin-bottom: 12px; }
.summary__included .checklist .icon { font-size: 18px; }
.summary__included .checklist li { font-size: 14px; }

/* coupon field (checkout summary) */
.coupon { display: flex; gap: 8px; margin: 14px 0 4px; }
.coupon input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font-size: 14px; text-transform: uppercase; }
.coupon input::placeholder { text-transform: none; }
.coupon input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,65,56,.15); }
.coupon .btn { padding: 11px 18px; }
.coupon__msg { font-size: 13px; min-height: 1.1em; margin: 0 0 4px; color: var(--ink-mute); }
.coupon__msg.ok { color: #c94138; font-weight: 500; }
.coupon__msg.err { color: var(--accent); }

/* page intro header (checkout/success) */
.pagehead { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.pagehead__loc {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 7px 16px; border: 1px solid var(--rule); border-radius: var(--pill);
  font-size: 14px; font-weight: 500; color: var(--ink-mute); background: var(--bg);
}
.pagehead__loc .icon { font-size: 15px; color: var(--accent); }
.steps { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-mute); margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.steps b, .steps .step.is-active { color: var(--ink); font-weight: 600; }
.steps .step { transition: color .2s ease; }
.steps .sep { color: var(--rule); }

/* checkout progress tracker (Details › Payment › Delivery) */
.progress { display: flex; max-width: 460px; margin: 22px auto 0; padding: 0; list-style: none; }
.progress__step { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.progress__step::before { content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--rule); z-index: 0; transition: background .25s ease; }
.progress__step:first-child::before { display: none; }
.progress__step.is-done::before, .progress__step.is-current::before { background: var(--accent); }
.progress__dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: #fff; border: 2px solid var(--rule); color: var(--ink-mute); font-size: 14px; font-weight: 600; transition: all .25s ease; }
.progress__label { font-size: 13px; font-weight: 500; color: var(--ink-mute); transition: color .25s ease; }
.progress__step.is-current .progress__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(201,65,56,.12); }
.progress__step.is-current .progress__label { color: var(--ink); font-weight: 600; }
.progress__step.is-done .progress__dot { background: var(--accent); border-color: var(--accent); font-size: 0; }
.progress__step.is-done .progress__dot::after { content: "✓"; font-size: 15px; color: #fff; }
.progress__step.is-done .progress__label { color: var(--ink); }
@media (max-width: 480px) { .progress__label { font-size: 12px; } .progress__dot { width: 30px; height: 30px; } .progress__step::before { top: 14px; } }

/* inline payment step (MamoPay embedded card form on the checkout page) */
.checkout__left { min-width: 0; }
.paystep { animation: payin .35s ease both; }
@keyframes payin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.paystep__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; margin-bottom: 12px; font: inherit; font-size: 14px; color: var(--ink-mute); cursor: pointer; text-decoration: none; }
.paystep__back:hover { color: var(--ink); }
.paystep__back span[aria-hidden] { font-size: 19px; line-height: 1; }
.paystep > h2 { margin-bottom: 6px; }
.paystep__intro { color: var(--ink-mute); font-size: 14px; margin-bottom: 18px; }
/* The provider renders its own card around the form, so we don't add a box —
   transparent frame means any reserved space blends into the page. */
.paystep__frame { border: 0; background: transparent; overflow: hidden; min-height: 200px; }
.paystep__frame:empty::before { content: "Loading secure payment…"; display: grid; place-items: center; height: 300px; color: var(--ink-mute); font-size: 14px; }
/* embedded card form: its SDK sets the iframe to height:100%, so the frame
   defines the size. Default fits a wallet+card form; pay.js snaps it to the
   iframe's real height so there's never a scrollbar. */
.paystep__frame--mamo { height: 480px; min-height: 0; }
.paystep__frame--mamo iframe { width: 100%; height: 100%; border: 0; display: block; }
/* demo payment page is a full page, so it needs more room */
.paystep__iframe { width: 100%; height: 720px; border: 0; display: block; }
.paystep__secure { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--ink-mute); margin-top: 14px; }
.paystep__secure .icon { font-size: 16px; color: #c94138; }

/* prominent amount at the payment step (so the buyer sees exactly what they pay) */
.payamount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 14px; padding: 14px 18px; background: var(--bg-alt); border: 1px solid var(--rule-soft); border-radius: 3px; }
.payamount__label { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.payamount__value { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* security reassurance grid (shown under the card form) */
.paysecure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paysecure li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px; }
.paysecure .icon { font-size: 19px; color: #c94138; flex: 0 0 auto; margin-top: 1px; }
.paysecure strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.paysecure small { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.35; }
.paysecure__lock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 2px; font-size: 13px; font-weight: 600; color: #c94138; }
.paysecure__lock .icon { font-size: 16px; }
@media (max-width: 560px) { .paysecure { grid-template-columns: 1fr; } }

/* ---- free delivery emphasis (used site-wide) ---- */
.freebar { display: inline-flex; align-items: center; gap: 10px; background: rgba(201,65,56,.07); border: 1px solid rgba(201,65,56,.2); color: var(--accent-press); border-radius: var(--pill); padding: 11px 20px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.freebar .icon { font-size: 19px; color: var(--accent); }
.freebar-wrap { text-align: center; }
.tile__free { color: var(--accent); font-weight: 600; font-size: 13px; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.tile__free .icon { font-size: 15px; }
.compare .free-cell { color: #c94138; font-weight: 700; }

/* ---- footer (dark, refined) ---- */
.footer { background: #0b0b0c; color: #9a9aa0; border-top: 0; padding-block: clamp(56px, 7vw, 84px) 34px; position: relative; isolation: isolate; overflow: hidden; }
.footer::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(55% 130% at 50% 0%, rgba(201,65,56,.13), transparent 58%); }
.footer__top { display: grid; grid-template-columns: 1.7fr .9fr .9fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 28px; }
.footer__logo img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 1; }
.footer__tag { color: #9a9aa0; font-size: 14px; line-height: 1.6; margin-top: 16px; max-width: 40ch; }
.footer__badges { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__badges li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #d6d6dc; }
.footer__badges .icon { color: var(--accent); font-size: 16px; flex: 0 0 auto; }
.footer__hours { display: block; color: #6e6e73; font-size: 13px; padding: 6px 0; }
.footer__col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: #6e6e73; margin-bottom: 16px; font-weight: 600; }
.footer__col a { display: block; width: max-content; max-width: 100%; color: #e8e8ed; padding: 6px 0; font-size: 15px; transition: color .2s var(--ease), transform .2s var(--ease); }
.footer__col a:hover { color: #fff; transform: translateX(3px); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; font-size: 13px; color: #6e6e73; }
.footer__legal { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__legal a { color: #c9c9d0; font-size: 13px; transition: color .2s var(--ease); }
.footer__legal a:hover { color: #fff; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer__brand { grid-column: 1 / -1; } .footer__tag { max-width: 52ch; } }
@media (max-width: 460px) { .footer__top { grid-template-columns: 1fr; } .footer__brand { grid-column: auto; } }

/* ============================================================
   LEGAL pages (privacy, terms, refunds, delivery)
   ============================================================ */
.legal { max-width: 800px; margin-inline: auto; }
.legal .h1 { margin: 8px 0 6px; }
.legal__updated { color: var(--ink-faint); font-size: 13px; margin: 0 0 22px; }
.legal p { color: var(--ink-mute); line-height: 1.72; font-size: 15.5px; margin: 0 0 14px; }
.legal h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 34px 0 10px; }
.legal h3 { font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.legal ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.legal ul li { position: relative; padding-left: 22px; color: var(--ink-mute); line-height: 1.6; font-size: 15px; }
.legal ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 3px; background: var(--accent); }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__box { background: var(--bg-alt); border: 1px solid var(--rule-soft); border-radius: 3px; padding: 16px 18px; margin: 18px 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink-mute); }
.legal__box strong { color: var(--ink); }

/* ============================================================
   COOKIE CONSENT banner
   ============================================================ */
.consent {
  position: fixed; left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 90; max-width: 360px;
  background: #fff; border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 16px 40px rgba(17,18,22,.18), 0 3px 10px rgba(17,18,22,.08);
  padding: 18px 18px 16px;
  animation: consentIn .3s var(--ease) both;
}
@keyframes consentIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.consent p { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); margin: 0 0 14px; }
.consent p a { color: var(--accent); }
.consent__btns { display: flex; gap: 8px; justify-content: flex-end; }
.consent .btn-sm { padding: 8px 16px; font-size: 14px; }
@media (max-width: 520px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---- dimensions (product pages): picture + diagram ---- */
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); }
.dims figure { margin: 0; text-align: center; }
.dims img { width: 100%; max-height: 400px; object-fit: contain; }
.dims figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-mute); }
@media (max-width: 640px) { .dims { grid-template-columns: 1fr; gap: 28px; } }


/* ============================================================
   Nav: "Talk to sales" pill — visually between text links and Buy CTA
   ============================================================ */
.nav__sales {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); border-radius: var(--pill);
  padding: 8px 14px; font-weight: 500; font-size: 14px;
  color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease);
  animation: navSalesGlow 2.6s ease-in-out infinite;
}
.nav__sales:hover { background: var(--ink); color: #fff; animation: none; }
.nav__sales::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px; background: #c94138;
  box-shadow: 0 0 0 0 rgba(29,138,63,.6);
  animation: navSalesDotPulse 1.8s ease-out infinite;
}
@keyframes navSalesDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(29,138,63,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(29,138,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,138,63,0); }
}
@keyframes navSalesGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,138,63,0); }
  50%      { box-shadow: 0 0 0 6px rgba(29,138,63,.14); }
}
.sales-nav.is-open .nav__sales { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__sales, .nav__sales::before { animation: none; }
}


/* ============================================================
   "For trade & bulk" section (home page)
   ============================================================ */
.trade {
  background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
}
.trade__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.trade__copy h2 { margin: 8px 0 14px; }
.trade__bullets { display: grid; gap: 14px; margin: 24px 0 30px; }
.trade__bullet { display: flex; gap: 14px; align-items: flex-start; }
.trade__bullet .icon { font-size: 20px; color: var(--accent); margin-top: 2px; }
.trade__bullet h3 { font-size: 17px; margin: 0 0 2px; }
.trade__bullet p { font-size: 14px; color: var(--ink-mute); margin: 0; }
.trade__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trade__art {
  background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius-lg);
  padding: 32px; display: grid; gap: 14px;
}
.trade__stat { display: flex; align-items: baseline; gap: 10px; }
.trade__stat strong { font-size: clamp(28px, 4vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
.trade__stat span { color: var(--ink-mute); font-size: 14px; }
.trade__stat + .trade__stat { padding-top: 14px; border-top: 1px solid var(--rule-soft); }
@media (max-width: 820px) { .trade__grid { grid-template-columns: 1fr; gap: 36px; } }


/* ============================================================
   Floating "Talk to sales" FAB — sticky bottom-right with mini-menu
   ============================================================ */
.sales-fab {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 80;
  transition: bottom .35s var(--ease);
}
/* When the sticky buy-bar slides up (product pages), lift the FAB above
   it so they don't overlap. The .has-buybar class is set by initBuybar(). */
body.has-buybar .sales-fab { bottom: calc(clamp(16px, 3vw, 28px) + 64px); }
.sales-fab__btn {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  background: var(--accent); color: var(--on-accent); border: 0;
  border-radius: var(--pill); padding: 14px 22px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(201,65,56,.32), 0 2px 6px rgba(201,65,56,.18);
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.sales-fab__btn:hover { background: var(--accent-press); transform: translateY(-2px); }
.sales-fab__btn:active { transform: scale(.97); }
.sales-fab__btn-ic { font-size: 18px; line-height: 1; }
.sales-fab.is-open .sales-fab__btn { background: var(--ink); box-shadow: 0 8px 24px rgba(17,18,22,.25); }

/* expanding pulse ring behind the FAB — same idea as the nav dot, scaled up */
.sales-fab__btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(201,65,56,.55);
  animation: salesFabPulse 2s ease-out infinite;
}
.sales-fab.is-open .sales-fab__btn::after,
.sales-fab__btn:hover::after { animation: none; }
@keyframes salesFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,65,56,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(201,65,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,65,56,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sales-fab__btn::after { animation: none; }
}

/* shared sales-menu popover (used by FAB and nav pill) */
.sales-menu {
  background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px;
  box-shadow: 0 24px 48px rgba(17,18,22,.18), 0 4px 12px rgba(17,18,22,.08);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 280px;
  animation: salesMenuIn .18s var(--ease);
}
.sales-menu[hidden] { display: none; }
@keyframes salesMenuIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sales-menu__head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); padding: 12px 14px 8px; }
.sales-menu__group { display: flex; flex-direction: column; gap: 2px; }
.sales-menu__opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 3px; color: var(--ink);
  transition: background .15s var(--ease);
}
.sales-menu__opt:hover { background: var(--bg-alt); }
.sales-menu__ic { font-size: 22px; color: var(--accent); width: 28px; text-align: center; }
.sales-menu__opt[data-lead-channel="whatsapp"] .sales-menu__ic { color: #25d366; }
.sales-menu__lbl { display: flex; flex-direction: column; line-height: 1.3; }
.sales-menu__lbl strong { font-weight: 500; }
.sales-menu__lbl .muted { font-size: 12px; }
.sales-menu__divider { height: 1px; background: var(--rule); margin: 6px 8px; }
.sales-menu__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 0 4px;
  padding: 14px 16px; border-radius: 3px;
  background: var(--accent); color: var(--on-accent);
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.sales-menu__cta:hover { background: var(--accent-press); transform: translateY(-1px); }
.sales-menu__cta-body { display: flex; flex-direction: column; line-height: 1.25; }
.sales-menu__cta-body strong { font-weight: 600; font-size: 15px; }
.sales-menu__cta-body .muted { color: rgba(255,255,255,.78); font-size: 12px; }
.sales-menu__cta-arrow { font-size: 20px; }

/* fab placement */
.sales-menu--fab { position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; transform-origin: bottom right; }
@media (max-width: 480px) {
  .sales-fab__btn-label { display: none; }
  .sales-fab__btn { padding: 14px; }
  .sales-fab__btn-ic { font-size: 22px; }
  .sales-menu--fab { width: calc(100vw - 28px); max-width: 320px; }
}

/* nav placement (anchored under the .nav__sales pill) */
.sales-nav { position: relative; display: inline-flex; }
.sales-menu--nav {
  position: absolute; top: calc(100% + 10px); right: 0; width: 300px; z-index: 60;
  transform-origin: top right;
}

/* mobile: hide the in-drawer pill trigger (its menu is rendered inline)
   but keep the bar pill visible next to the hamburger */
@media (max-width: 820px) {
  .nav__sales:not(.nav__sales--bar) { display: none !important; }
  .nav__sales:not(.nav__sales--bar)::before { animation: none; } /* dot pulse pointless when hidden */

  /* The IN-DRAWER pill's menu renders inline inside the hamburger drawer.
     Scoped with :not(.sales-nav--bar) so the BAR pill keeps acting like
     the desktop popover — tapping opens WhatsApp / Call / Quote above
     it, doesn't reorganise the layout.
     The whole sales-nav becomes its own visually-distinct segment
     (tinted background, full-bleed within the drawer, rounded corners)
     so it reads as "the way to reach us", not just another link. */
  .sales-nav:not(.sales-nav--bar) {
    display: block; width: auto;
    margin: 22px -4px 4px;
    padding: 18px 14px 14px;
    background: var(--bg-alt);
    border-radius: 3px;
    border-top: 0;
  }
  .sales-menu--nav:not(.sales-menu--bar) {
    position: static; width: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: 0; gap: 6px; animation: none; min-width: 0;
  }
  .sales-menu--nav:not(.sales-menu--bar)[hidden] { display: flex; }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__head { padding: 0 2px 12px; font-size: 12px; }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__group { gap: 6px; }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__opt {
    background: #fff; border-radius: 3px; padding: 14px 14px;
  }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__opt:hover { background: #f4f5f7; }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__divider { display: none; }
  .sales-menu--nav:not(.sales-menu--bar) .sales-menu__cta { margin-top: 8px; padding: 16px 18px; }
}

/* Bar pill's popover — anchored under the .nav__sales--bar at every width.
   At mobile the .nav__sales--bar sits some way in from the right edge
   (hamburger is to its right), so anchoring the popover at right:0 from
   the wrap would overflow the viewport's left side. Use position:fixed
   at small widths so it sits flush to the viewport's right padding. */
.sales-menu--bar {
  width: min(300px, calc(100vw - 24px));
  right: 0; left: auto;
}
@media (max-width: 1080px) {
  .sales-menu--bar {
    position: fixed;
    top: calc(var(--nav-h) + 8px);
    /* Centre horizontally in the viewport regardless of where the pill is. */
    left: 0; right: 0; margin-inline: auto;
    transform-origin: top center;
  }
}

/* ============================================================
   REVIEWS & RATINGS — star widget, inline rating lines, and the
   modern testimonial card carousel (shared by reviews.js +
   testimonials.js + ratings.js).
   ============================================================ */

/* Partial-fill star widget (accurate half-stars for averages). */
.stars { position: relative; display: inline-block; direction: ltr; white-space: nowrap; letter-spacing: 2px; line-height: 1; font-size: 14px; vertical-align: middle; }
.stars__off { color: #d9d9e0; }
.stars__on { color: #f5a623; position: absolute; inset: 0 auto 0 0; width: 0; overflow: hidden; }

/* Inline rating line: stars + "4.8" + "21 reviews" (or compact "(21)"). */
.rating-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stars__num { font-weight: 700; color: var(--ink); font-size: 14px; }
.stars__reviews, .stars__count { color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.rating-line::before { display: none; }

/* Placement variants */
.hero__rating { margin: 14px 0 0; }
.phero__rating { margin: 12px 0 0; text-decoration: none; cursor: pointer; }
.phero__rating:hover .stars__reviews { color: var(--ink); }
.tile__rating { margin: 8px 0 2px; }
.tile__rating .stars__num { font-size: 13px; }

/* ---- Review section header + carousel shell ---- */
.rv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rv__avg { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.rv__avg .stars__num { font-size: 17px; }
.rv__count { color: var(--ink-mute); font-weight: 500; font-size: 13px; }
.rv__tools { display: flex; align-items: center; gap: 8px; }
.rv__arrow { width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--line, #e2e2e8); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); display: none; transition: border-color .2s, background .2s, transform .2s; }
.rv__arrow:hover { border-color: var(--ink); transform: translateY(-1px); }
.rv__write { background: #fff; border: 1px solid var(--line, #d7d7dc); border-radius: 3px; padding: 10px 18px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); transition: border-color .2s, background .2s; }
.rv__write:hover { border-color: var(--ink); background: var(--bg-alt); }

.rv__scroller { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 18px; scrollbar-width: thin; }
.rv__scroller::-webkit-scrollbar { height: 6px; }
.rv__scroller::-webkit-scrollbar-thumb { background: #d9d9e0; border-radius: 3px; }

/* ---- Modern testimonial card ---- */
.rvc { flex: 0 0 340px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #ececf1; border-radius: 3px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.rvc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.rvc__quote { position: absolute; top: 10px; right: 20px; font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1; color: var(--accent); opacity: .12; pointer-events: none; }
.rvc__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rvc__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 3px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.rvc__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rvc__name { font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.2; }
.rvc__meta { font-size: 12px; color: var(--ink-faint); }
.rvc__stars { margin-bottom: 8px; }
.rvc__title { font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 4px; letter-spacing: -.01em; }
.rvc__body { font-size: 14px; line-height: 1.6; color: var(--ink-mute); margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvc__prod { align-self: flex-start; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ink-mute); background: var(--bg-alt); border-radius: 3px; padding: 5px 12px; text-decoration: none; transition: background .2s, color .2s; }
.rvc__prod:hover { background: var(--accent-soft); color: var(--accent); }

/* ---- Submit form (collapsed by default) ---- */
.rv__form { max-width: 540px; margin: 8px auto 0; text-align: left; background: var(--bg-alt); border-radius: var(--radius); padding: 22px 24px; }
.rv__form[hidden] { display: none; }

@media (min-width: 760px) { .rv__arrow { display: inline-flex; align-items: center; justify-content: center; } }
@media (max-width: 560px) { .rvc { flex-basis: 86%; } }

/* Skeleton while reviews load (only shows when the container is still empty —
   i.e. client-rendered fallback; prerendered pages fill it at build time). */
#reviews:empty, #testimonials:empty { display: block; min-height: 300px; border-radius: 3px; background: linear-gradient(100deg, #f1f1f4 28%, #e9e9ee 50%, #f1f1f4 72%); background-size: 200% 100%; animation: rv-shimmer 1.5s ease-in-out infinite; }
@keyframes rv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { #reviews:empty, #testimonials:empty { animation: none; } }

/* Product-page ratings summary — big score + per-star distribution bars. */
.rv__summary { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; background: var(--bg-alt); border: 1px solid #ececf1; border-radius: 3px; padding: 24px 28px; margin-bottom: 20px; }
.rv__score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; flex: 0 0 auto; }
.rv__score-num { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.rv__score-count { font-size: 12.5px; color: var(--ink-mute); }
.rv__bars { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.rv__bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-mute); }
.rv__bar-label { display: inline-flex; align-items: center; gap: 2px; width: 28px; color: var(--ink); font-weight: 600; }
.rv__bar-star { color: #f5a623; }
.rv__bar-track { flex: 1; height: 8px; border-radius: 3px; background: #e7e7ec; overflow: hidden; }
.rv__bar-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: #f5a623; transition: width .7s var(--ease); }
.rv__bar-pct { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.rv__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
@media (max-width: 560px) { .rv__summary { gap: 18px; padding: 18px 20px; } .rv__score { flex-direction: row; gap: 12px; width: 100%; min-width: 0; justify-content: center; } .rv__score-num { font-size: 38px; } }


/* ============================================================
   UAE identity — flag-colour accents + refined menu  (appended)
   ============================================================ */
:root{
  --uae-green:#c94138;
  --uae-green-press:#ae362e;
  --uae-red:#c8102e;
  --uae-black:#15171a;
}

/* Green = included / free / go */
.topbar .icon{ color:#f0a868; }
.chips .chips__free,
.chips .chips__free .icon{ color:var(--uae-green); }
.tile__free,
.tile__free .icon{ color:var(--uae-green); }
.free-cell{ color:var(--uae-green); }
.checklist .icon{ color:var(--uae-green); }
.footer__badges .icon{ color:var(--uae-green); }

/* Refined menu: animated underline on hover + a more premium CTA pill */
@media (min-width:1081px){
  .nav__util>a, .nav__links--products a{ position:relative; }
  .nav__util>a::after, .nav__links--products a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
    border-radius: 2px; background:var(--accent); transition:right .25s var(--ease);
  }
  .nav__util>a:hover::after, .nav__links--products a:hover::after{ right:0; }
}
.nav__cta a{ transition:background .2s, transform .2s var(--ease), box-shadow .2s; }
.nav__cta a:hover{ transform:translateY(-1px); box-shadow:var(--shadow-accent); }

/* Delivery = green everywhere (truck icon) for a consistent UAE-green "included" cue */
.icon[data-icon="truck"]{ color:var(--uae-green); }
.topbar .icon[data-icon="truck"]{ color:#f0a868; }


/* ============================================================
   Master mega-menu  (appended)
   ============================================================ */
.nav--mega .nav__inner{ gap:18px; }
.mnav{ display:flex; align-items:center; justify-content:space-between; flex:1; margin-left:14px; gap:18px; }
.mnav__list{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.mnav__link{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:15px; font-weight:600;
  letter-spacing:-0.01em; color:var(--ink); background:none; border:0; cursor:pointer;
  padding:9px 13px; border-radius: 3px; text-decoration:none;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.mnav__link:hover{ background:var(--bg-alt); }
.mnav__chev{ width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.45; transition:transform .2s var(--ease), opacity .2s; }
.mnav__item--has:hover > .mnav__link .mnav__chev,
.mnav__item--has.is-open > .mnav__link .mnav__chev{ transform:rotate(225deg) translateY(-1px); opacity:.85; }
.mnav__actions{ display:flex; align-items:center; gap:12px; }
.mnav__lang{ font-size:13px; font-weight:600; color:var(--ink-mute); text-decoration:none; padding:7px 6px; border-radius: 3px; }
.mnav__lang:hover{ color:var(--ink); background:var(--bg-alt); }
.mnav__cta{ padding:9px 19px; font-size:14px; box-shadow:0 1px 2px rgba(201,65,56,.28), 0 6px 16px rgba(201,65,56,.18); }
.mnav__cta:hover{ transform:translateY(-1px); }

/* desktop dropdown panel — full-width mega */
.mnav__panel{ position:absolute; top:100%; left:0; right:0; z-index:60; padding:12px 22px 0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
@media (min-width:1081px){
  .mnav__item--has:hover > .mnav__panel,
  .mnav__item--has:focus-within > .mnav__panel,
  .mnav__item--has.is-open > .mnav__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
}
.mnav__wrap{ max-width:var(--maxw); margin-inline:auto; background:#fff; border:1px solid var(--rule-soft); border-radius: 3px; box-shadow:var(--shadow-lg); padding:22px; }
.mega{ display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:24px; }
.mega--locations .mega__col--wide{ grid-column:1 / -1; }
.mega__label{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
.mega__col{ display:flex; flex-direction:column; }
.megaprod{ display:flex; align-items:center; gap:13px; padding:9px; border-radius: 3px; text-decoration:none; color:inherit; transition:background .15s var(--ease); }
.megaprod:hover{ background:var(--bg-alt); }
.megaprod__img{ width:52px; height:52px; flex:0 0 auto; object-fit:contain; background:linear-gradient(160deg,#fafafb,#eef0f3); border:1px solid var(--rule-soft); border-radius: 3px; padding:5px; }
.megaprod__b{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.megaprod__name{ font-size:15px; font-weight:600; color:var(--ink); }
.megaprod__cap{ font-size:12.5px; color:var(--ink-mute); }
.megaprod__price{ margin-left:auto; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.mega__link{ display:block; padding:9px 8px; font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none; border-radius: 3px; transition:color .15s, background .15s; }
.mega__link:hover{ color:var(--accent); background:var(--bg-alt); }
.mega__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mega__loc{ display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; background:var(--bg-alt); border-radius: 3px; transition:background .15s, color .15s, transform .15s var(--ease); }
.mega__loc::before{ content:""; width:7px; height:7px; border-radius: 3px; background:var(--uae-green); flex:0 0 auto; }
.mega__loc:hover{ background:#e9ebef; color:var(--accent); transform:translateY(-1px); }
.mega__feature{ display:flex; flex-direction:column; justify-content:center; gap:6px; text-decoration:none; padding:20px; border-radius: 3px; background:linear-gradient(150deg,#15171a,#2b313a); color:#fff; }
.mega__feature-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#f0a868; }
.mega__feature-title{ font-size:19px; font-weight:600; }
.mega__feature-text{ font-size:13px; color:rgba(255,255,255,.72); line-height:1.5; }

/* hamburger */
.mnav__toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.mnav__toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius: 2px; transition:.3s var(--ease); }
.mnav__toggle span + span{ margin-top:5px; }
.nav.open .mnav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .mnav__toggle span:nth-child(2){ opacity:0; }
.nav.open .mnav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer + accordion */
@media (max-width:1080px){
  .mnav__toggle{ display:block; }
  .mnav{ position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--rule-soft); box-shadow:var(--shadow-md); padding:10px 14px 18px; max-height:calc(100vh - var(--nav-h)); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
  .nav.open .mnav{ opacity:1; visibility:visible; transform:none; }
  .mnav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .mnav__link{ width:100%; justify-content:space-between; font-size:16px; padding:14px 12px; border-radius: 3px; }
  .mnav__chev{ margin-left:auto; }
  .mnav__panel{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; padding:0; max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .mnav__item--has.is-open > .mnav__panel{ max-height:760px; }
  .mnav__wrap{ border:0; box-shadow:none; border-radius: 0; padding:2px 4px 12px; max-width:none; }
  .mega{ grid-template-columns:1fr; gap:14px; }
  .mega__grid{ grid-template-columns:1fr 1fr; }
  .mnav__actions{ flex-direction:column; align-items:stretch; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--rule-soft); }
  .mnav__lang{ text-align:center; padding:11px; background:var(--bg-alt); border-radius: 3px; }
  .mnav__cta{ width:100%; text-align:center; justify-content:center; }
}


/* ============================================================
   Header line (appended) — clean hairline under the header
   + the square brand mark beside the logo in the nav and footer
   ============================================================ */
.nav::after{ display:none !important; }
.nav--mega, .nav{ border-bottom:1px solid var(--rule-soft); }


/* ============================================================
   Mega footer  (appended)
   ============================================================ */
.footer--mega .footer__top{ grid-template-columns:1.9fr 1fr 1.25fr 1.2fr 1.1fr; gap:clamp(22px,3vw,46px); align-items:start; }
.footer--mega .footer__brand{ max-width:340px; }
.footer__social{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:18px; }
.footer__social a{ font-size:13.5px; color:#cfcfd6; }
.footer__social a:hover{ color:#fff; }
/* square brand mark (favicon.svg) beside the wordmark */
.nav__logo{ display:inline-flex; align-items:center; gap:10px; }
.nav__logo::before{
  content:""; display:inline-block; flex:0 0 auto; width:26px; height:26px;
  background:url("/assets/img/brand/favicon.svg") center/contain no-repeat;
}
.footer__logo{ display:inline-flex; align-items:center; }
.footer__logo::after{
  content:""; display:inline-block; width:24px; height:24px; margin-left:12px;
  background:url("/assets/img/brand/favicon.svg") center/contain no-repeat;
}
@media (max-width:980px){ .footer--mega .footer__top{ grid-template-columns:1fr 1fr 1fr; } .footer--mega .footer__brand{ grid-column:1 / -1; max-width:none; } }
@media (max-width:640px){ .footer--mega .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:400px){ .footer--mega .footer__top{ grid-template-columns:1fr; } }

/* ============================================================
   Locations mega panel (appended) — UAE grid + GCC + Worldwide
   ============================================================ */
.mega--locations .mega__grid{ grid-template-columns:1fr 1fr; }
.mega__feature--sm{ padding:14px 16px; margin-top:10px; gap:3px; border-radius: 3px; }
.mega__feature--sm .mega__feature-title{ font-size:15.5px; }
@media (max-width:1080px){ .mega--locations .mega__grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   Homepage worldwide / globe section (appended)
   ============================================================ */
.globe-home [data-globe]{ margin:30px auto 0; max-width:560px; }
.globe-home__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:20px; }
.seals{ margin-top:34px; }

/* ============================================================
   Simple hero fix (appended) — pages whose hero is just a
   .hero__head inside .wrap had no vertical padding and sat
   flush against the nav. The homepage (hero__grid) is untouched.
   ============================================================ */
.hero > .wrap > .hero__head{ padding-block: clamp(48px,7vw,92px) clamp(40px,6vw,72px); }

/* ==========================================================
   V2 DESIGN PASS — compact rhythm, motion, conversion
   ========================================================== */
/* Rhythm: one consistent, tighter vertical scale */
.section { padding-block: clamp(40px, 5vw, 72px); }
.section--tight { padding-block: clamp(30px, 3.6vw, 48px); }
.shead { margin-bottom: clamp(20px, 2.4vw, 32px); }
.hero__grid { padding-block: clamp(26px, 3.4vw, 50px); }
.hero > .wrap > .hero__head { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.hero-split .hero__inner { padding-block: clamp(22px, 3vw, 42px); }
.hero__cta { margin-bottom: clamp(16px, 2.4vw, 28px); }
.pagehead { margin-bottom: clamp(18px, 2.4vw, 28px); }
main.section:has(.pagehead) { padding-top: clamp(24px, 3vw, 40px); }
.footer { padding-block: clamp(40px, 4.5vw, 60px) 26px; }

/* Logos: one mark, identical in header and footer */
.nav__logo::before, .footer__logo::after { content: none; display: none; }
.nav__logo img, .footer__logo img { height: 30px; width: auto; display: block; filter: none; opacity: 1; }
@media (max-width: 820px) { .nav__logo img, .footer__logo img { height: 27px; } }

/* Clear CTAs: secondary hero actions are real buttons */
.hero__cta .link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font-weight: 600; transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.hero__cta .link:hover { border-color: var(--ink); transform: translateY(-2px); }
.hero__cta .link::after { display: none; }
.hero--factory .hero__cta .link { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.hero--factory .hero__cta .link:hover { border-color: #fff; }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); animation: ik-shine 5.5s ease-in-out infinite; }
@keyframes ik-shine { 0%, 62% { left: -60%; } 86%, 100% { left: 130%; } }

/* Scroll progress */
.ik-progress { position: fixed; z-index: 9999; top: 0; left: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Currency switcher */
.ccy { position: relative; flex: 0 0 auto; margin-left: 12px; order: 5; }
.ccy__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s; }
.ccy__btn:hover, .ccy.open .ccy__btn { border-color: var(--ink); }
.ccy__btn svg { width: 12px; height: 12px; transition: transform .2s; }
.ccy.open .ccy__btn svg { transform: rotate(180deg); }
.ccy__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 230px; max-height: min(420px, 70vh); overflow: auto; padding: 6px; margin: 0; list-style: none; background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px; box-shadow: 0 18px 44px rgba(17,18,22,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s var(--ease); }
.ccy.open .ccy__menu { opacity: 1; visibility: visible; transform: none; }
.ccy__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ccy__opt:hover { background: var(--bg-alt); }
.ccy__opt b { width: 36px; font-weight: 600; }
.ccy__opt span { color: var(--ink-mute); font-size: 13px; flex: 1; }
.ccy__opt[aria-selected="true"] { background: var(--bg-alt); }
.ccy__opt[aria-selected="true"]::after { content: "✓"; color: var(--accent); font-weight: 700; }
@media (max-width: 1080px) { .ccy { order: 2; margin-left: auto; } .nav__inner > .mnav__toggle { order: 3; margin-left: 8px; } .ccy__btn { height: 34px; } }

/* Homepage hero */
.hero--home { overflow: hidden; }
.hero--home::before { animation: ik-aurora 14s ease-in-out infinite alternate; }
@keyframes ik-aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.14); } }
.hero--home .hero__head > * { animation: ik-rise .75s var(--ease) both; }
.hero--home .hero__head > :nth-child(2) { animation-delay: .07s; } .hero--home .hero__head > :nth-child(3) { animation-delay: .14s; } .hero--home .hero__head > :nth-child(4) { animation-delay: .2s; } .hero--home .hero__head > :nth-child(5) { animation-delay: .26s; } .hero--home .hero__head > :nth-child(n+6) { animation-delay: .32s; }
@keyframes ik-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__pod { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.hero__pod:hover .hero__pod-go { transform: translateX(5px); }
.hero__showcase { gap: 10px; }
.hero__pod-media { width: 84px; flex-basis: 84px; padding: 8px; }
.hero__pod-info { padding: 10px 16px; }

/* Hero review card */
.hreview { position: relative; display: block; padding: 18px 20px 16px; border-radius: var(--radius); background: #17181c; color: #f5f5f7; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 16px 36px rgba(17,18,22,.2); }
.hreview::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -70px; top: -120px; border-radius: 3px; background: radial-gradient(circle, rgba(201,65,56,.55), transparent 68%); animation: ik-aurora 9s ease-in-out infinite alternate; }
.hreview__top { display: flex; align-items: center; gap: 10px; }
.hreview__score { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.hreview__meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #a1a1a6; }
.hreview__meta .stars { line-height: 1; }
.hreview__quote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; margin: 12px 0 8px; font-size: 14.5px; line-height: 1.45; transition: opacity .35s, transform .35s; }
.hreview__who { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #a1a1a6; transition: opacity .35s; }
.hreview__who strong { color: #fff; font-weight: 600; }
.hreview.is-swap .hreview__quote { opacity: 0; transform: translateY(6px); }
.hreview.is-swap .hreview__who { opacity: 0; }
.hreview__dots { position: absolute; top: 20px; right: 20px; display: flex; gap: 5px; }
.hreview__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); transition: .3s; }
.hreview__dots i.on { width: 18px; border-radius: 3px; background: #fff; }

/* Contact row in hero */
.hero__contact { margin-top: 14px; }

/* Real-install ribbon */
.realstrip { padding-block: 4px clamp(26px, 3vw, 40px); overflow: hidden; }
.realstrip__track { display: flex; gap: 12px; width: max-content; animation: ik-marquee 62s linear infinite; }
.realstrip:hover .realstrip__track { animation-play-state: paused; }
.realstrip__item { position: relative; width: clamp(180px, 19vw, 280px); aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--bg-alt); }
.realstrip__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.realstrip__item:hover img { transform: scale(1.06); }
@keyframes ik-marquee { to { transform: translateX(-50%); } }

/* Stats */
.stat { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.stat::before { content: ""; position: absolute; z-index: -1; inset: auto -30% -70% -30%; height: 130%; background: radial-gradient(closest-side, rgba(201,65,56,.13), transparent); opacity: 0; transition: opacity .5s; }
.stat:hover { transform: translateY(-5px); }
.stat:hover::before, .stat.is-counted::before { opacity: 1; }
.stat::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), #f0a868); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.stat.is-counted::after { transform: scaleX(1); }
.stat__ic svg { transition: transform .4s var(--ease); }
.stat:hover .stat__ic svg { transform: scale(1.14) rotate(-4deg); }
.stat__num { font-variant-numeric: tabular-nums; }
.stat__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 10px; vertical-align: middle; }
.stat__bars i { width: 3px; border-radius: 2px; background: var(--accent); animation: ik-eq 1.1s ease-in-out infinite alternate; }
.stat__bars i:nth-child(1) { height: 40%; } .stat__bars i:nth-child(2) { height: 90%; animation-delay: .15s; } .stat__bars i:nth-child(3) { height: 55%; animation-delay: .3s; } .stat__bars i:nth-child(4) { height: 75%; animation-delay: .45s; }
@keyframes ik-eq { to { transform: scaleY(.35); } }

/* Cards and icon motion */
.fcard { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(17,18,22,.09); }
.fcard .ic svg, .fcard .ic .icon svg { transition: transform .4s var(--ease); }
.fcard:hover .ic svg { transform: scale(1.16) rotate(-5deg); }
.reveal.armed { transition-duration: .7s; }

/* Product pages */
.hero-split .display { font-size: clamp(32px, 3.7vw, 50px); }
.phero__price { font-size: 16px; margin-top: 12px; }
.phero__price strong { font-size: clamp(26px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.02em; margin-right: 4px; }
.colorpick__dot { width: 24px; height: 24px; }
.hero--product .hero__cta { flex-wrap: wrap; margin-top: 14px; }
.hero--product .hero__cta .btn-primary { flex: 1 1 220px; }
.buy-note { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-mute); }
.buy-note li { display: inline-flex; align-items: center; gap: 6px; }
.buy-note .icon { color: #c94138; font-size: 15px; }
.hero--product .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 8px; padding: 0; }
.hero--product .chips li { justify-content: flex-start; font-size: 13.5px; }
.gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15.5vw, 228px); grid-auto-flow: dense; gap: 10px; }
.gallery__item, .gallery__item--feature { position: relative; aspect-ratio: auto; grid-column: auto; }
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 3px; background: rgba(17,18,22,.72); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); pointer-events: none; }
.gallery__tag::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: #f0a868; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; } .hero--product .chips { grid-template-columns: 1fr 1fr; } }

/* Checkout */
.checkout { gap: clamp(22px, 3.2vw, 44px); grid-template-columns: 1.12fr .88fr; }
.summary { position: sticky; top: 86px; box-shadow: 0 16px 40px rgba(17,18,22,.07); }
.checkout-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.checkout-trust div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 3px; background: #fff; border: 1px solid var(--rule-soft); font-size: 11.5px; text-align: center; color: var(--ink-mute); }
.checkout-trust .icon { font-size: 20px; color: var(--accent); }
.checkout-help { margin-top: 12px; font-size: 13px; text-align: center; color: var(--ink-mute); }
.checkout-help a { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } .summary { position: static; } }

/* Contact */
.contact-main { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: stretch; margin-top: 14px; }
.contact-main .contact-location { display: flex; flex-direction: column; margin: 0; }
.contact-main .contact-location__map { flex: 1; min-height: 220px; }
.contact-main .contact-location__map iframe { width: 100%; height: 100%; min-height: 220px; border: 0; display: block; }
.cform { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--rule-soft); box-shadow: 0 16px 42px rgba(17,18,22,.07); }
.cform__head { margin-bottom: 16px; }
.cform__head h2 { font-size: clamp(22px, 2vw, 28px); margin: 0 0 4px; letter-spacing: -.02em; }
.cform__head p { margin: 0; color: var(--ink-mute); font-size: 14px; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cfield--full { grid-column: 1 / -1; }
.cfield label, .cfield legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.cfield label small { font-weight: 400; color: var(--ink-mute); font-size: 12px; }
.cfield input, .cfield textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-alt); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.cfield textarea { min-height: 112px; resize: vertical; }
.cfield input:focus, .cfield textarea:focus { outline: 0; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,65,56,.14); }
.cfield.has-error input, .cfield.has-error textarea { border-color: #c94138; }
.cfield__err { min-height: 0; font-size: 12px; color: #c94138; }
fieldset.cfield { border: 0; margin: 0; padding: 0; }
.cpills { display: flex; flex-wrap: wrap; gap: 7px; }
.cpills label { font-weight: 500; font-size: 13.5px; cursor: pointer; }
.cpills input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; padding: 0; }
.cpills span { display: inline-block; padding: 8px 13px; border: 1px solid var(--rule); border-radius: 3px; transition: .2s; }
.cpills input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.cpills input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201,65,56,.25); }
.cform__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.cform__foot .btn { flex: 1 1 220px; }
.cform__foot p { flex: 1 1 200px; margin: 0; font-size: 12.5px; color: var(--ink-mute); }
.cform__status { margin: 10px 0 0; font-size: 13.5px; color: #c94138; }
.cform__done { text-align: center; padding: 30px 8px; animation: ik-rise .5s var(--ease) both; }
.cform__tick { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 3px; background: #fbe9e7; color: #c94138; font-size: 28px; }
.cform__done h2 { margin: 0 0 6px; font-size: 24px; }
.cform__done p { margin: 0 auto 16px; max-width: 40ch; color: var(--ink-mute); }
@media (max-width: 820px) { .contact-main { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cform__grid { grid-template-columns: 1fr; } }

/* Manufacturing hero */
.hero--factory { position: relative; isolation: isolate; overflow: hidden; background: #101114; color: #fff; }
.hero--factory::before { display: none; }
.hero--factory__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ik-zoom 20s ease-out both; }
@keyframes ik-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero--factory::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(12,13,16,.9) 0%, rgba(12,13,16,.72) 44%, rgba(12,13,16,.16) 100%); }
.hero--factory .hero__head { padding-block: clamp(52px, 7vw, 104px) clamp(44px, 6vw, 88px) !important; }
.hero--factory .display, .hero--factory .hero__sub { color: #fff; }
.hero--factory .hero__eyebrow { color: #f0a868; }
.hero--factory .chips li { color: rgba(255,255,255,.86); }
.hero--factory .chips li.chips__free { color: #f0a868; }
.hero--factory .chips .icon { color: inherit; }
.factory-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.factory-strip figure { position: relative; margin: 0; height: clamp(190px, 21vw, 300px); border-radius: var(--radius); overflow: hidden; }
.factory-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.factory-strip figure:hover img { transform: scale(1.05); }
.factory-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 14px; font-weight: 600; }
.img-note { margin: 8px 2px 0; font-size: 11.5px; color: var(--ink-faint, #8a8a90); }
@media (max-width: 700px) { .factory-strip { grid-template-columns: 1fr; } .hero--factory::after { background: linear-gradient(180deg, rgba(12,13,16,.8), rgba(12,13,16,.72)); } }

/* Export crate */
.cratebox { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(18px, 3vw, 40px); align-items: center; }
.cratebox__media { position: relative; }
.cratebox__main { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: var(--radius-lg); }
.cratebox__inset { position: absolute; right: 14px; bottom: 14px; width: 36%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; border: 3px solid #fff; box-shadow: 0 14px 32px rgba(0,0,0,.28); animation: ik-float 6s ease-in-out infinite alternate; }
@keyframes ik-float { to { transform: translateY(-10px); } }
.crate-steps { display: grid; gap: 10px; padding: 0; margin: 16px 0 0; list-style: none; counter-reset: c; }
.crate-steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: c; }
.crate-steps li::before { content: counter(c); flex: 0 0 28px; height: 28px; border-radius: 3px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.crate-steps strong { display: block; font-size: 15px; }
.crate-steps span { color: var(--ink-mute); font-size: 13.5px; }
@media (max-width: 820px) { .cratebox { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .hero--home .hero__head .hero__cta { display: flex; margin: 12px 0 0; }
  .hero--home .hero__head .hero__cta > * { flex: 1 1 0; min-height: 46px; padding-inline: 12px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .hero--home::before, .hreview::before, .realstrip__track, .stat__bars i, .hero--factory__img, .cratebox__inset, .hero--home .hero__head > * { animation: none; }
}

.hero--factory .display { font-size: clamp(36px, 4.4vw, 62px); }
.hero--factory .hero__sub { margin-left: 0; font-size: clamp(16px, 1.3vw, 19px); }
.hero--factory .chips { justify-content: flex-start; padding-left: 0; }
.hero--factory .hero__cta { justify-content: flex-start; }
@media (max-width: 860px) { .hero--factory .hero__head { text-align: left; } .hero--factory .chips { justify-content: flex-start; } .hero--home .hreview { order: 9; } }

/* Click to enlarge */
.factory-strip figure, .realstrip__item, .cratebox__media img, .hero__art-track img, .install img { cursor: zoom-in; }
.factory-strip figcaption { pointer-events: none; }
.lightbox { z-index: 10000; }
.factory-strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .factory-strip { grid-template-columns: 1fr 1fr; } }
.hero--factory::after { background: linear-gradient(90deg, rgba(12,13,16,.92) 0%, rgba(12,13,16,.7) 46%, rgba(12,13,16,.05) 78%); }

/* Header CTA stays visible at every width */
@media (max-width: 1080px) {
  .sales-nav--bar { order: 1; margin-left: auto; position: relative; }
  .ccy { order: 2; margin-left: 8px; }
  .nav__inner > .mnav__toggle { order: 3; margin-left: 4px; }
  .nav__sales.nav__sales--bar { height: 34px; padding: 0 12px; font-size: 13px; align-items: center; }
}
@media (max-width: 460px) {
  .nav__logo img { height: 22px; }
  .nav__sales.nav__sales--bar { padding: 0 9px; font-size: 12px; }
  .nav__sales.nav__sales--bar::before { display: none; }
  .ccy { margin-left: 5px; }
  .ccy__btn { padding: 0 8px; font-size: 12px; height: 34px; gap: 3px; }
  .ccy__menu { right: -44px; }
}

/* Homepage hero: one aligned column when stacked, consistent card text */
.hero__pod-text, .hreview { text-align: left; }
.hreview__top { padding-right: 96px; }
.hreview__meta { align-items: flex-start; }
@media (max-width: 860px) {
  .hero--home .hero__grid { gap: 16px; }
  .hero--home .hero__head, .hero--home .hero__showcase { width: 100%; max-width: 560px; margin-inline: auto; }
  .hero--home .hero__perks { justify-content: center; margin-top: 16px; padding-top: 14px; gap: 8px 16px; }
  .hero--home .hero__head .hero__cta { margin-top: 14px; }
  .hero--home .hero__contact { flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin-top: 6px; }
  .hero--home .hero__contact-lbl { flex-basis: auto; }
}

/* Stat cards: identical structure, sound bars sit in the corner */
.stat__ic { display: inline-flex; }
.stat__num { display: block; }
.stat__bars { position: absolute; top: 30px; right: 26px; margin: 0; height: 26px; }

/* Geometric line work */
.hero--home::after { content: ""; position: absolute; z-index: -1; inset: -60px; pointer-events: none;
  background-image: linear-gradient(rgba(23,24,28,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,24,28,.055) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 40%, #000 15%, transparent 75%); mask-image: radial-gradient(70% 80% at 72% 40%, #000 15%, transparent 75%);
  animation: ik-grid 26s linear infinite; }
@keyframes ik-grid { to { transform: translate3d(60px, 60px, 0); } }
.hero__showcase { position: relative; isolation: isolate; }
.hero__showcase::before, .hero__showcase::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; border-radius: 3px; pointer-events: none; }
.hero__showcase::before { width: 620px; height: 620px; margin: -310px 0 0 -310px; border: 1px dashed rgba(201,65,56,.3); animation: ik-spin 70s linear infinite; }
.hero__showcase::after { width: 460px; height: 460px; margin: -230px 0 0 -230px; border: 1px solid rgba(23,24,28,.09); animation: ik-pulse 5s ease-in-out infinite alternate; }
@keyframes ik-spin { to { transform: rotate(360deg); } }
@keyframes ik-pulse { from { transform: scale(.94); opacity: .5; } to { transform: scale(1.06); opacity: 1; } }

.section--alt { background-image: repeating-linear-gradient(135deg, rgba(23,24,28,.028) 0 1px, transparent 1px 22px); }
.section--dark::after { content: ""; position: absolute; z-index: -1; inset: -80px; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 75% at 50% 50%, #000, transparent);
  animation: ik-grid-d 34s linear infinite; }
@keyframes ik-grid-d { to { transform: translate3d(80px, 0, 0); } }
.hero--factory .wrap { position: relative; }
.hero--factory .wrap::after { content: ""; position: absolute; right: 22px; top: 50%; width: 300px; height: 300px; margin-top: -150px; border-radius: 3px; border: 1px dashed rgba(255,255,255,.26); pointer-events: none; animation: ik-spin 60s linear infinite; }
.footer { background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 56px 56px; }
.shead .eyebrow::after { content: ""; display: inline-block; width: 0; height: 1px; margin-left: 10px; vertical-align: middle; background: currentColor; transition: width .9s var(--ease) .15s; }
.shead.in .eyebrow::after, .shead.is-in .eyebrow::after { width: 34px; }
@media (max-width: 860px) {
  .hero__showcase::before { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .hero__showcase::after { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .hero--factory .wrap::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--home::after, .hero__showcase::before, .hero__showcase::after, .section--dark::after, .hero--factory .wrap::after { animation: none; }
}

/* Product images are always shown whole */
.gallery__item img, .realstrip__item img, .install img, .hero__art img, .hero__art-track img { object-fit: contain; }
.gallery__item, .realstrip__item, .install { background: #eef0f3; }
.hero__art img, .hero__art-track img { background: #eef0f3; }
.showcase__media img, .feature__media img, .hero__media img, .phero__media img, .cratebox__main { aspect-ratio: auto; height: auto; object-fit: contain; }
.lightbox__thumbs img { object-fit: contain; }

/* Image-led menu */
@media (min-width: 1081px) {
  .mnav__wrap { padding: 16px; }
  .mega { grid-template-columns: 1.9fr .72fr 1fr; gap: 18px; }
  .mega__col:first-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
  .mega__col:first-child .mega__label { grid-column: 1 / -1; margin-bottom: 2px; }
  .mega:not(.mega--locations) .megaprod { flex-direction: column; align-items: flex-start; gap: 9px; padding: 8px; border: 1px solid var(--rule-soft); }
  .mega:not(.mega--locations) .megaprod__img { width: 100%; height: 150px; padding: 10px; transition: transform .35s var(--ease); }
  .mega:not(.mega--locations) .megaprod:hover .megaprod__img { transform: scale(1.04); }
  .mega:not(.mega--locations) .megaprod__price { margin: 0; }
  .mega--locations { grid-template-columns: 1.5fr .8fr 1fr; }
  .mega--locations .mega__col:first-child { display: flex; }
}
.mega__feature { position: relative; justify-content: flex-end; min-height: 210px; background: linear-gradient(180deg, rgba(10,11,14,.1), rgba(10,11,14,.9)), url("/assets/img/factory/hero.webp?v=3") center/cover; }
.mega__feature--sm { min-height: 104px; background: linear-gradient(180deg, rgba(10,11,14,.25), rgba(10,11,14,.88)), url("/assets/img/office/lobby.webp") center/cover; }

/* Homepage hero with a real install */
.hero--home .display { font-size: clamp(34px, 3.9vw, 52px); }
.hero--home .hero__sub { max-width: 46ch; }
.hero__head .hreview { margin-top: 16px; max-width: 520px; }
.hero__photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: #eef0f3; }
.hero__photo img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; }
@media (min-width: 861px) {
  .hero--home .hero__grid { grid-template-columns: 1fr 1fr; }
  .hero__showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero__photo { grid-column: 1 / -1; }
  .hero__showcase .hero__pod { flex-direction: column; }
  .hero__showcase .hero__pod-media { width: 100%; flex: 0 0 auto; height: 92px; aspect-ratio: auto; }
  .hero__showcase .hero__pod-go { display: none; }
  .hero__showcase .hero__pod-info { padding: 9px 11px 11px; }
  .hero__showcase .hero__pod-text p { font-size: 12px; }
  .hero__quicknav { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .hero__photo { display: none; } .hero__head .hreview { margin-inline: auto; } }

/* Craft and office accents */
.crafts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crafts__grid figure { position: relative; margin: 0; height: clamp(190px, 20vw, 280px); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.crafts__grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.crafts__grid figure:hover img { transform: scale(1.06); }
.crafts__grid figcaption { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; pointer-events: none; }
.crafts__grid figcaption strong { font-size: 15px; } .crafts__grid figcaption span { font-size: 12.5px; opacity: .82; }
.officeband { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.officeband__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); cursor: zoom-in; }
.officeband .hero__cta { justify-content: flex-start; margin: 18px 0 0; }
.section--dark.center { background-image: linear-gradient(rgba(12,13,16,.8), rgba(12,13,16,.86)), url("/assets/img/office/lobby.webp"); background-size: cover; background-position: center; }
.factory-strip.factory-strip--six { grid-template-columns: repeat(3, 1fr); }
.factory-strip--six figure { height: clamp(170px, 17vw, 240px); }
@media (max-width: 860px) { .crafts__grid, .factory-strip.factory-strip--six { grid-template-columns: 1fr 1fr; } .officeband { grid-template-columns: 1fr; } .officeband .hero__cta { justify-content: center; } }

/* Hero pods always whole */
.hero__pod-media picture { display: block; width: 100%; height: 100%; }
.hero__pod-media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.hero__showcase .hero__pod-text strong { display: inline-block; white-space: nowrap; }
main { overflow-x: clip; }

.mnav__new { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: #fbe9e7; color: #c94138; font-size: 10px; font-weight: 700; vertical-align: 1px; }

/* Quote */
.quotegrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.quotepage .quote-form { max-width: none; display: flex; flex-direction: column; gap: 12px; }
.qstep { padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 10px 30px rgba(17,18,22,.05); }
.qstep__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; letter-spacing: -.015em; }
.qstep__title span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px; background: var(--accent); color: #fff; font-size: 13px; }
.qstep__sub { margin: -6px 0 12px; font-size: 14px; }
.qstep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qstep__grid .field { margin: 0; min-width: 0; }
.qspan { grid-column: 1 / -1; }
.qhint { margin: 5px 0 0; font-size: 12.5px; }
.quotepage .qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quotepage .qcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.quotepage .qcard:hover { transform: translateY(-3px); }
.quotepage .qcard__thumb { width: 100%; height: 130px; }
.quotepage .qcard__stepper { justify-self: auto; }
.quotepage .qcard__step { flex: 0 0 34px; width: 34px; height: 34px; }
.quotepage .qcard__num { flex: 0 0 38px; width: 38px; }
.qbuyer { border: 0; padding: 0; margin: 14px 0 0; } .qbuyer legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.quotepage #qSubmit { margin-top: 14px; }
.qside { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 10px; }
.qside__img { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; margin-bottom: -10px; }
.qside__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.qside__body { padding: 16px 18px 18px; border: 1px solid var(--rule-soft); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fff; }
.qside__body h3 { margin: 0 0 10px; font-size: 17px; }
.crate-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.crate-list li { display: flex; align-items: center; gap: 9px; } .crate-list .icon { color: var(--accent); font-size: 18px; }
.qside__talk { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; }
.qside__talk a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; min-height: 34px; } .qside__talk .icon { color: var(--accent); }
.qside__dealer { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--radius); background: #17181c; color: #fff; text-decoration: none; }
.qside__dealer span { font-size: 11.5px; color: #f0a868; font-weight: 600; } .qside__dealer strong { font-size: 15px; }
@media (max-width: 900px) { .quotegrid { grid-template-columns: 1fr; } .qside { position: static; } }
@media (max-width: 620px) { .quotepage .qcards, .qstep__grid { grid-template-columns: 1fr; } .quotepage .qcard { flex-direction: row; text-align: left; } .quotepage .qcard__thumb { width: 64px; height: 64px; flex: 0 0 64px; } .quotepage .qcard__info { flex: 1; } }

/* Dealers */
.dealer-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 3px; background: rgba(240,168,104,.16); color: #f0a868; font-size: 13px; font-weight: 600; }
.dealer-badge i { width: 8px; height: 8px; border-radius: 3px; background: #f0a868; animation: ik-pulse 1.3s ease-in-out infinite alternate; }
.dealer-badge--light { background: #fbe9e7; color: #c94138; }
.dealer-apply { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.cfield select { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-alt); color: var(--ink); font: inherit; font-size: 15px; }
.cfield.has-error select { border-color: #c94138; }
.dealerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 18px 24px; border-radius: var(--radius); background: #17181c; color: #fff; text-decoration: none; transition: transform .3s var(--ease); }
.dealerbar:hover { transform: translateY(-3px); }
.dealerbar .dealer-badge { margin: 0; } .dealerbar strong { flex: 1 1 260px; font-size: 19px; letter-spacing: -.01em; }
.dealerbar__go { font-weight: 600; color: #f0a868; }
@media (max-width: 820px) { .dealer-apply { grid-template-columns: 1fr; } }

/* Trades and guarantee */
.crafts .shead .subhead { max-width: 62ch; margin-inline: auto; }
.trades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.trade { display: flex; flex-direction: column; border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.trade:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(17,18,22,.1); }
.trade figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.trade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.trade:hover img { transform: scale(1.06); }
.trade > div { padding: 12px 14px 15px; }
.trade h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.trade p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.standby { background: #111216; color: #f5f5f7; position: relative; overflow: hidden; isolation: isolate; }
.standby::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 90% at 50% 40%, #000, transparent); }
.standby__head { max-width: 680px; margin: 0 auto 22px; text-align: center; }
.standby__head .eyebrow { justify-content: center; color: #f0a868; }
.standby .h2 { color: #fff; } .standby .subhead { color: #b6b7bd; }
.cares { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.care { padding: 18px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); background: rgba(255,255,255,.04); transition: transform .3s var(--ease), border-color .3s; }
.care:hover { transform: translateY(-5px); border-color: rgba(240,168,104,.6); }
.care .ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 3px; background: rgba(201,65,56,.2); color: #f0a868; font-size: 21px; }
.care h3 { margin: 0 0 5px; font-size: 16px; color: #fff; }
.care p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #b6b7bd; }
@media (max-width: 1080px) { .trades, .cares { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .trades, .cares { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .cares { grid-template-columns: 1fr; } }

/* Hero pods: fixed box so each pod fits whole */
.hero__pod-media { display: block; }
.hero__pod-media picture, .hero__pod-media > img { display: block; width: 100%; height: 100%; }
.hero__showcase .hero__pod-media { height: 112px; padding: 6px; }

/* Pressable trade images */
.is-pressable { cursor: pointer; position: relative; }
.is-pressable:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.trade figure, .factory-strip figure { cursor: pointer; }
.is-pressable::after { content: "+"; position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 20px; line-height: 1; transition: transform .3s var(--ease), background .3s; }
.is-pressable:hover::after { transform: rotate(90deg); background: var(--accent); color: #fff; }
.tpanel { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8,9,12,.78); backdrop-filter: blur(6px); }
.tpanel.open { display: flex; }
.tpanel__card { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; width: min(940px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--radius-lg); background: #fff; animation: ik-rise .35s var(--ease) both; }
.tpanel__card > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.tpanel__b { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 36px); }
.tpanel__b .eyebrow { margin: 0 0 8px; }
.tpanel__b h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.tpanel__t { margin: 0; color: var(--ink-mute); font-size: 15.5px; line-height: 1.55; }
.tpanel__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tpanel__nav { display: flex; gap: 6px; margin-top: 16px; }
.tpanel__nav button { width: 42px; height: 42px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; font-size: 22px; cursor: pointer; }
.tpanel__nav button:hover { background: var(--ink); color: #fff; }
.tpanel__x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 42px; height: 42px; border: 0; border-radius: 3px; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
@media (max-width: 680px) { .tpanel__card { grid-template-columns: 1fr; } .tpanel__card > img { min-height: 0; height: auto; aspect-ratio: 16 / 10; } }

/* Dealers: territories, earnings, referral */
.ctry-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 14px; }
.ctry-tabs button { min-height: 40px; padding: 0 15px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.ctry-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ctry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
.ctry { border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff; }
.ctry[open] { box-shadow: 0 12px 28px rgba(17,18,22,.08); }
.ctry summary { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px; cursor: pointer; list-style: none; }
.ctry summary::-webkit-details-marker { display: none; }
.ctry summary strong { font-size: 15px; } .ctry summary span { font-size: 12.5px; color: var(--ink-mute); }
.ctry dl { margin: 0; padding: 0 14px 6px; font-size: 13px; }
.ctry dt { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; } .ctry dd { margin: 1px 0 0; }
.ctry__open { color: #c94138; font-weight: 600; }
.ctry > a { display: inline-block; padding: 4px 14px 13px; font-size: 13px; font-weight: 600; color: var(--accent); }
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.calc__rows { display: grid; gap: 14px; margin-top: 18px; }
.calc__rows label { display: block; } .calc__rows span { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; } .calc__rows b { color: var(--accent); }
.calc__rows input { width: 100%; height: 28px; accent-color: #c94138; cursor: pointer; }
.calc__out { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); background: #17181c; color: #fff; }
.calc__out p { margin: 0 0 2px; font-size: 13.5px; color: #a1a1a6; }
.calc__out strong { display: block; margin-bottom: 14px; font-size: 24px; font-variant-numeric: tabular-nums; }
.calc__out .calc__big { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.02em; color: #f0a868; }
.calc__out small { display: block; margin-bottom: 14px; font-size: 11.5px; line-height: 1.45; color: #8e8e94; }
.cares--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ctry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ctry-grid { grid-template-columns: 1fr 1fr; } .calc, .cares--three { grid-template-columns: 1fr; } }

/* Comfortable touch targets */
@media (pointer: coarse) { .is-pressable::after { width: 34px; height: 34px; } .btn, .ccy__opt, .faq__q { min-height: 44px; } }

/* Single-colour icons, consistent everywhere */
.topbar .icon { color: rgba(255,255,255,.85); }
.hero__perks .icon, .chips .icon, .chips__free .icon, .footer__badges .icon { color: var(--accent); }
.hero--factory .chips .icon, .hero--factory .chips__free .icon { color: #f0a868; }

/* Header at in-between widths */
.mnav__link { white-space: nowrap; }
.nav__quick { display: none; }
@media (min-width: 1081px) and (max-width: 1320px) {
  .mnav__list { gap: 0; }
  .mnav__link { padding-inline: 9px; font-size: 14px; }
  .mnav__new { display: none; }
  .nav__sales:not(.nav__sales--bar) { white-space: nowrap; }
  .ccy { margin-left: 8px; }
}
@media (min-width: 720px) and (max-width: 1080px) {
  .nav__inner > .nav__logo { order: 0; }
  .nav__quick { order: 1; display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); margin-left: clamp(14px, 2.4vw, 30px); white-space: nowrap; }
  .nav__quick a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
  .nav__quick a:hover { color: var(--accent); }
  .sales-nav--bar { order: 2; }
  .ccy { order: 3; }
  .nav__inner > .mnav__toggle { order: 4; }
}
@media (min-width: 720px) and (max-width: 859px) { .nav__quick--wide { display: none !important; } }

/* Seating plans */
.seatplan { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; color: var(--accent); }
.seatplan span { font-size: 13px; font-weight: 600; color: var(--ink); }
.seatplan svg { display: block; flex: 0 0 auto; max-width: 100%; height: auto; }
.seat-pod { fill: #f6f6f8; stroke: #17181c; stroke-width: 1.500; }
.seat-table { fill: #d8c3a5; stroke: #a98b64; stroke-width: 1; }
.seat { opacity: 0; }
.is-seated .seat { animation: ik-seat .5s var(--ease) both; }
@keyframes ik-seat { from { opacity: 0; } to { opacity: 1; } }
.seatplan--sm { margin: 6px 0 0; gap: 7px; }
.seatplan--sm svg { width: auto; height: 34px; }
.seatplan--sm span { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .seat { opacity: 1; } .is-seated .seat { animation: none; } }

/* Install ribbon: every photo whole at its natural shape, no empty bars */
.realstrip__item { width: auto; aspect-ratio: auto; height: clamp(230px, 24vw, 340px); background: none; flex: 0 0 auto; }
.realstrip__item img { width: auto; height: 100%; object-fit: initial; }
.seatplan--tile { margin: 0 0 12px; padding-inline: 20px; }

/* One shape everywhere: photos 3:4, videos 9:16 */
.realstrip__item { width: clamp(190px, 19vw, 270px); height: auto; aspect-ratio: 3 / 4; background: #eef0f3; }
.realstrip__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 10px; }
.gallery__item, .gallery__item--feature, .gallery__item--tall { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
.gallery__item img { object-fit: cover; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } }

/* Installation videos */
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.reel { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 9 / 16; border: 0; border-radius: var(--radius); overflow: hidden; background: #17181c; cursor: pointer; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.reel:hover video { transform: scale(1.04); }
.reel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.reel__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 3px; background: rgba(255,255,255,.92); transition: opacity .3s, transform .3s var(--ease); }
.reel__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #17181c; }
.reel.is-playing .reel__play { opacity: 0; }
.reel:hover .reel__play { opacity: 1; transform: scale(1.08); }
@media (max-width: 860px) { .reels { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; padding-inline: 22px; scrollbar-width: none; } .reels::-webkit-scrollbar { display: none; } .reel { flex: 0 0 min(58vw, 240px); scroll-snap-align: center; } }

/* Seated figures, table running up and down */
.seatplan { align-items: flex-start; }
.seatplan svg { width: 96px; height: auto; }
.seatplan--sm svg { width: 62px; height: auto; }
.seat-body { fill: none; stroke: currentColor; stroke-width: 2.600; stroke-linecap: round; stroke-linejoin: round; }
.seat-chair { fill: none; stroke: #8b8d94; stroke-width: 1.500; stroke-linecap: round; }

/* Trades: small image, plain text, not clickable */
.trades { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trade { flex-direction: row; align-items: center; gap: 13px; padding: 11px; cursor: default; }
.trade:hover { transform: none; box-shadow: none; }
.trade > img { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 3px; object-fit: cover; }
.trade > div { padding: 0; }
.trade--qc { background: #17181c; border-color: #17181c; }
.trade--qc h3 { color: #fff; } .trade--qc p { color: #b6b7bd; }
.trade--qc .ic { flex: 0 0 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(201,65,56,.22); color: #f0a868; font-size: 32px; }
.factory-strip figure { cursor: default; }
@media (max-width: 860px) { .trades { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trades { grid-template-columns: 1fr; } }

/* Size drawings: one consistent card */
.sizecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sizecard { margin: 0; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: #fff; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sizecard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(17,18,22,.09); }
.sizecard a { display: block; }
.sizecard img { display: block; width: 100%; aspect-ratio: 1240 / 840; object-fit: contain; background: #fff; }
.sizecard img + img { border-top: 1px solid var(--rule-soft); }
.sizecard figcaption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 11px 14px; font-size: 13px; color: var(--ink-mute); border-top: 1px solid var(--rule-soft); }
.sizecard strong { color: var(--ink); font-size: 15px; }
.quote-sizes .wrap { padding-inline: 0; }
@media (max-width: 860px) { .sizecards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Product summary: price with seating beside it */
.buyhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.buyhead .phero__price { margin: 0; }
.seat-pod { stroke: #d5d7dc; stroke-width: 1.500; }
.seatplan--buy { flex-direction: row-reverse; align-items: center; gap: 10px; margin: 0; flex: 0 0 auto; }
.seatplan--buy svg { width: 72px; height: auto; }
.seatplan--buy span { font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
.hero--product .buy-note { margin-top: 10px; }
.seatplan--tile { align-items: center; }
@media (max-width: 860px) { .buyhead { justify-content: center; flex-wrap: wrap; } }

/* Container configurator */
.cargo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: stretch; }
.cargo__build { padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); background: #fff; }
.cargo__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.cargo__presets span { font-size: 13px; font-weight: 600; margin-right: 3px; }
.cargo__presets button { min-height: 40px; padding: 0 13px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; transition: .2s; }
.cargo__presets button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cargo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule-soft); }
.cargo__row strong { display: block; font-size: 15.5px; } .cargo__row span { font-size: 12.5px; color: var(--ink-mute); }
.cargo__row--boxes { background: none; }
.cargo__step { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.cargo__step button { width: 44px; height: 44px; border: 0; background: var(--bg-alt); color: var(--ink); font-size: 19px; cursor: pointer; }
.cargo__step button:hover { background: var(--ink); color: #fff; }
.cargo__step input, .cargo__step output { width: 54px; text-align: center; border: 0; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.cargo__step input::-webkit-outer-spin-button, .cargo__step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cargo__out { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-lg); background: #17181c; color: #fff; }
.cargo__box { position: relative; height: 92px; border: 2px solid rgba(255,255,255,.55); border-radius: 3px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 6px, transparent 6px 14px); }
.cargo__fill { display: flex; height: 100%; }
.cargo__fill i { display: block; height: 100%; transition: width .45s var(--ease); }
.cargo__box b { position: absolute; right: 9px; top: 7px; padding: 2px 7px; border-radius: 3px; background: rgba(255,255,255,.9); color: #17181c; font-size: 11px; }
.cargo__pct { margin: 11px 0 1px; font-size: 14px; color: #b6b7bd; } .cargo__pct strong { font-size: 22px; color: #fff; }
.cargo__hint { margin: 0 0 8px; font-size: 13px; color: #f0a868; }
.cargo__out dl { margin: 0 0 8px; } .cargo__out dl > div { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cargo__out dt { font-size: 13px; color: #a1a1a6; } .cargo__out dd { margin: 1px 0 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cargo__margin dd { font-size: clamp(30px, 3.2vw, 40px); color: #f0a868; letter-spacing: -.02em; }
.cargo__out small { display: block; margin: auto 0 12px; font-size: 11.5px; line-height: 1.45; color: #8e8e94; }
.cargo__out .is-off { background: #4a4b50; box-shadow: none; cursor: not-allowed; }
.cargo__out .is-off::after { display: none; }
@media (max-width: 820px) { .cargo { grid-template-columns: 1fr; } }

/* Flowing installation videos */
.reels-view { margin-inline: calc(50% - 50vw); overflow: hidden; }
.reels { display: flex; flex-wrap: nowrap; gap: 10px; width: max-content; grid-template-columns: none; margin: 0; padding: 0 5px; overflow: visible; animation: ik-marquee 46s linear infinite; }
.reels-view:hover .reels, .reels-view:focus-within .reels, .vbox-open .reels { animation-play-state: paused; }
.reels .reel { flex: 0 0 clamp(150px, 17vw, 240px); width: clamp(150px, 17vw, 240px); }
.reel__sound { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 11px; border-radius: 3px; background: rgba(17,18,22,.72); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px); transition: background .25s; }
.reel:hover .reel__sound { background: var(--accent); }
.vbox { position: fixed; inset: 0; z-index: 10002; display: none; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(8,9,12,.92); }
.vbox.open { display: flex; }
.vbox video { max-width: min(92vw, 520px); max-height: calc(100dvh - 32px); border-radius: 3px; background: #000; }
.vbox button { flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 3px; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer; }
.vbox button:hover { background: var(--accent); }
.vbox__x { position: absolute; top: 14px; right: 14px; font-size: 17px !important; }
@media (max-width: 620px) { .vbox__n { position: absolute; top: 50%; margin-top: -23px; left: auto; right: 10px; z-index: 2; } .vbox__p { left: 10px; right: auto; } }
@media (prefers-reduced-motion: reduce) { .reels { animation: none; } .reels-view { overflow-x: auto; } }

/* Trust badges */
.trustbar { padding-block: 14px clamp(18px, 2.4vw, 28px); }
.tbadges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.tbadge { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 10px; border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.tbadge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(240,168,104,.2), transparent); transform: skewX(-18deg); animation: ik-shine 7s ease-in-out infinite; pointer-events: none; }
.tbadge:hover { transform: translateY(-3px); border-color: var(--accent); }
.tbadge .ic { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #17181c; color: #f0a868; font-size: 19px; }
.tbadge div { min-width: 0; } .tbadge strong { display: block; font-size: 13px; line-height: 1.2; letter-spacing: -.005em; } .tbadge div span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.25; color: var(--ink-mute); }
@media (max-width: 1180px) { .tbadges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .tbadges { grid-template-columns: 1fr 1fr; } .tbadge { padding: 9px 8px; } .tbadge .ic { flex-basis: 32px; width: 32px; height: 32px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .tbadge::after { animation: none; } }

/* Locations menu: four equal regions */
.mega__note { margin: -9px 0 8px; font-size: 12px; color: #c94138; font-weight: 600; }
.mega--regions .mega__link { padding-block: 6px; font-size: 14px; }
@media (min-width: 1081px) {
  .mega.mega--regions { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .mega--regions .mega__col:first-child { display: flex; }
  .mega--regions .mega__col:first-child .mega__label { margin-bottom: 12px; }
}
@media (max-width: 1080px) {
  .mega.mega--regions { grid-template-columns: 1fr 1fr; }
  .mnav__item--has.is-open > .mnav__panel { max-height: 1200px; }
}

/* Container sizes */
.cargo__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.cargo__types button { display: flex; flex-direction: column; gap: 2px; min-height: 58px; justify-content: center; padding: 9px 8px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: .2s; }
.cargo__types strong { font-size: 14px; } .cargo__types span { font-size: 11.5px; color: var(--ink-mute); line-height: 1.2; }
.cargo__types button.on { background: var(--ink); border-color: var(--ink); color: #fff; } .cargo__types button.on span { color: #f0a868; }
.cargo__custom { display: block; margin-top: 10px; padding: 6px; text-align: center; font-size: 13px; font-weight: 600; color: #f0a868; }
.cargo__out dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.cargo__out dd { font-size: 18px; }
.cargo__margin { display: block !important; }
.cargo__margin dd { font-size: clamp(25px, 2.6vw, 33px); }
@media (max-width: 460px) { .cargo__types strong { font-size: 13px; } }

/* Stats: one bold band */
.stats { position: relative; isolation: isolate; gap: 0; padding: clamp(10px, 1.4vw, 18px); border-radius: var(--radius-lg); background: #111216; overflow: hidden; }
.stats::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(50% 120% at 12% 0%, rgba(201,65,56,.34), transparent 70%), radial-gradient(45% 120% at 92% 100%, rgba(240,168,104,.16), transparent 70%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; }
.stat { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2vw, 26px); background: none; border: 0; border-radius: 0; box-shadow: none; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.1); }
.stat:hover { transform: none; box-shadow: none; }
.stat::before, .stat::after { display: none; }
.stat__ic { order: 3; display: none; }
.stat__num { order: 1; display: block; color: #fff; font-size: clamp(38px, 4.7vw, 62px); letter-spacing: -.04em; white-space: nowrap; }
.stat__label { order: 2; margin-top: 8px; color: #b6b7bd; font-size: 14.5px; }
.stat__viz { order: 4; display: flex; height: 26px; margin-top: auto; padding-top: 18px; box-sizing: content-box; }
.stat__viz i { display: block; opacity: .2; background: #fff; transition: opacity .4s calc(var(--i) * 45ms), transform .5s var(--ease) calc(var(--i) * 45ms); }
.stat.is-counted .stat__viz i { opacity: 1; background: linear-gradient(180deg, #f0a868, #c94138); }
.stat__viz--seg { gap: 5px; align-items: flex-end; }
.stat__viz--seg i { flex: 1; height: 7px; border-radius: 3px; }
.stat__viz--eq { gap: 3px; align-items: flex-end; }
.stat__viz--eq i { flex: 1; height: var(--h); border-radius: 2px; transform-origin: bottom; }
.stat.is-counted .stat__viz--eq i { animation: ik-eq 1.1s ease-in-out calc(var(--i) * 70ms) infinite alternate; }
.stat__viz--dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.stat__viz--dots i { aspect-ratio: 1; border-radius: 3px; }
@media (max-width: 820px) {
  .stats { gap: 0; }
  .stat { padding: 18px 14px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .stat__num { font-size: clamp(30px, 9vw, 46px); }
  .stat__label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .stat__viz i { opacity: 1; transition: none; } .stat.is-counted .stat__viz--eq i { animation: none; } }

/* Drawer contents never exceed the screen */
@media (max-width: 1080px) { .sales-nav:not(.sales-nav--bar) { max-width: 100%; overflow: hidden; } body { overflow-x: clip; } }

@media (max-width: 820px) { .stat__num { font-size: clamp(23px, 8vw, 46px); letter-spacing: -.03em; } }

/* Stats: editorial */
.stat__viz { display: none !important; }
.stat { padding: clamp(20px, 2.2vw, 30px); }
.stat__top { display: flex; align-items: center; gap: 8px; margin-bottom: clamp(18px, 2.2vw, 30px); color: #f0a868; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.stat__top .stat__ic { display: inline-flex; order: 0; width: auto; height: auto; margin: 0; background: none; border-radius: 0; color: inherit; font-size: 18px; }
.stat__num { font-size: clamp(50px, 6vw, 84px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.stat__num small { margin-left: .14em; font-size: .3em; font-weight: 500; letter-spacing: -.01em; color: #f0a868; vertical-align: .95em; }
.stat__label { margin-top: 12px; font-size: 14px; line-height: 1.4; }
.stat::after { display: block; content: ""; position: absolute; left: clamp(20px, 2.2vw, 30px); right: clamp(20px, 2.2vw, 30px); top: 0; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #c94138, #f0a868); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--ease); }
.stat.is-counted::after { transform: scaleX(1); }
@media (max-width: 820px) { .stat { padding: 18px 16px; } .stat__top { margin-bottom: 12px; font-size: 11px; letter-spacing: .06em; } .stat__num { font-size: clamp(36px, 12vw, 58px); } .stat__label { font-size: 12.5px; } .stat::after { left: 16px; right: 16px; } }

/* Video section: colour, geometry and layered overlays */
.reels-sec { position: relative; isolation: isolate; overflow: hidden; background: #101116; color: #fff; padding-block: clamp(38px, 4.6vw, 64px); }
.reels-sec::before { content: ""; position: absolute; z-index: -2; inset: -30%; background: radial-gradient(30% 34% at 18% 28%, rgba(201,65,56,.5), transparent 70%), radial-gradient(30% 36% at 78% 22%, rgba(240,168,104,.3), transparent 70%), radial-gradient(34% 40% at 62% 82%, rgba(201,65,56,.42), transparent 70%), radial-gradient(28% 34% at 26% 84%, rgba(240,168,104,.38), transparent 70%); animation: ik-aurora 16s ease-in-out infinite alternate; }
.reels-sec::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 26px); background-size: 64px 64px, 64px 64px, auto; }
.reels-sec .shead { position: relative; }
.reels-sec .h2 { color: #fff; }
.reels-sec .eyebrow { color: #f0a868; }
.reels-sec .shead::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border: 1px dashed rgba(255,255,255,.2); border-radius: 3px; animation: ik-spin 60s linear infinite; }
.reels-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reels .reel { --tint: 201,65,56; --tint2: 240,168,104; box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--tint),.55); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.reels .reel:nth-child(4n+2) { --tint: 23,24,28; --tint2: 240,168,104; }
.reels .reel:nth-child(4n+3) { --tint: 130,44,38; --tint2: 240,168,104; }
.reels .reel:nth-child(4n+4) { --tint: 190,120,70; --tint2: 240,168,104; }
.reels .reel video { filter: contrast(1.08) saturate(1.16) brightness(1.03); }
.reels .reel::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(var(--tint),.5) 0%, rgba(var(--tint),.08) 42%, rgba(10,11,16,.12) 62%, rgba(var(--tint),.62) 100%); mix-blend-mode: multiply; transition: opacity .4s; }
.reels .reel::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .75; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20180%20320'%20preserveAspectRatio%3D'none'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M0%2070L70%200M0%20120L120%200M60%20320L180%20200M110%20320L180%20250'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'46'%20r%3D'30'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'46'%20r%3D'44'%20stroke-dasharray%3D'3%205'%2F%3E%3Cpath%20d%3D'M14%20306V276M14%20306H44M166%2014'%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat, linear-gradient(180deg, transparent 58%, rgba(var(--tint),.4)); transition: opacity .4s, transform .6s var(--ease); }
.reels .reel:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(0,0,0,.55), 0 0 0 2px rgb(var(--tint2)); }
.reels .reel:hover::before { opacity: .22; }
.reels .reel:hover::after { opacity: 1; transform: scale(1.03); }
.reels .reel__sound { z-index: 3; background: rgba(var(--tint),.86); }
.reels .reel:hover .reel__sound { background: rgb(var(--tint2)); color: #17181c; }
@media (prefers-reduced-motion: reduce) { .reels-sec::before, .reels-sec .shead::after { animation: none; } }

.reels .reel::after { opacity: .36; }
.reels .reel:hover::after { opacity: .55; }

/* Videos are decorative: no pressing, no pause on hover */
.reel, .reels .reel { cursor: default; }
.reel video { pointer-events: none; }
.reels-view:hover .reels, .reels-view:focus-within .reels { animation-play-state: running; }
.reels .reel:hover { transform: none; box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--tint),.55); }
.reels .reel:hover::before { opacity: 1; }
.reels .reel:hover::after { opacity: .36; transform: none; }
.reel:hover video { transform: none; }

/* Site-wide background: pod squares and sound waves */
main > section.has-decor { position: relative; isolation: isolate; overflow: clip; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cg%20stroke%3D'%2317181c'%20stroke-opacity%3D'.03'%20stroke-width%3D'1.4'%3E%3Crect%20x%3D'26'%20y%3D'30'%20width%3D'44'%20height%3D'44'%20rx%3D'5'%2F%3E%3Crect%20x%3D'36'%20y%3D'40'%20width%3D'24'%20height%3D'24'%20rx%3D'3'%2F%3E%3Crect%20x%3D'196'%20y%3D'176'%20width%3D'58'%20height%3D'58'%20rx%3D'6'%2F%3E%3Cpath%20d%3D'M225%20176v58'%2F%3E%3Crect%20x%3D'118'%20y%3D'250'%20width%3D'26'%20height%3D'26'%20rx%3D'4'%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D'%23c94138'%20stroke-opacity%3D'.045'%20stroke-width%3D'2'%3E%3Cpath%20d%3D'M178%2044v18M188%2036v34M198%2028v50M208%2038v30M218%2046v14'%2F%3E%3Cpath%20d%3D'M46%20174a22%2022%200%200%201%200%2034M56%20164a36%2036%200%200%201%200%2054M66%20154a50%2050%200%200%201%200%2074'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'191'%20r%3D'4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 300px 300px; }
main > section.has-decor.section--alt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cg%20stroke%3D'%2317181c'%20stroke-opacity%3D'.03'%20stroke-width%3D'1.4'%3E%3Crect%20x%3D'26'%20y%3D'30'%20width%3D'44'%20height%3D'44'%20rx%3D'5'%2F%3E%3Crect%20x%3D'36'%20y%3D'40'%20width%3D'24'%20height%3D'24'%20rx%3D'3'%2F%3E%3Crect%20x%3D'196'%20y%3D'176'%20width%3D'58'%20height%3D'58'%20rx%3D'6'%2F%3E%3Cpath%20d%3D'M225%20176v58'%2F%3E%3Crect%20x%3D'118'%20y%3D'250'%20width%3D'26'%20height%3D'26'%20rx%3D'4'%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D'%23c94138'%20stroke-opacity%3D'.045'%20stroke-width%3D'2'%3E%3Cpath%20d%3D'M178%2044v18M188%2036v34M198%2028v50M208%2038v30M218%2046v14'%2F%3E%3Cpath%20d%3D'M46%20174a22%2022%200%200%201%200%2034M56%20164a36%2036%200%200%201%200%2054M66%20154a50%2050%200%200%201%200%2074'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'191'%20r%3D'4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), repeating-linear-gradient(135deg, rgba(23,24,28,.024) 0 1px, transparent 1px 22px); background-size: 300px 300px, auto; }
.bgdecor { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.bgdecor i { position: absolute; display: block; color: #c94138; opacity: .13; }
.bgdecor svg { display: block; width: 100%; height: auto; }
.bgdecor__a { width: clamp(150px, 19vw, 290px); top: 8%; animation: ik-drift 17s ease-in-out infinite alternate; }
.bgdecor__b { width: clamp(90px, 11vw, 170px); bottom: 7%; color: #17181c !important; opacity: .09 !important; animation: ik-drift 23s ease-in-out infinite alternate-reverse; }
.bgdecor--l .bgdecor__a { left: -4%; } .bgdecor--l .bgdecor__b { right: 3%; }
.bgdecor--r .bgdecor__a { right: -4%; } .bgdecor--r .bgdecor__b { left: 3%; }
@keyframes ik-drift { from { transform: translate3d(0, -14px, 0) rotate(-5deg); } to { transform: translate3d(0, 18px, 0) rotate(6deg); } }
@media (max-width: 700px) { .bgdecor i { opacity: .08; } .bgdecor__b { display: none; } .bgdecor--l .bgdecor__a { left: -22%; } .bgdecor--r .bgdecor__a { right: -22%; } main > section.has-decor { background-size: 220px 220px; } }
@media (prefers-reduced-motion: reduce) { .bgdecor i { animation: none; } }

/* Container drawing */
.cargo__types button:focus { outline: none; }
.cargo__types button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cargo__box { display: none; }
.cargo__unit { margin-bottom: 4px; }
.cargo__unitname { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: #f0a868; }
.cargo__ctr { position: relative; display: flex; height: 108px; padding-right: 26px; border: 3px solid #aeb4bd; border-radius: 3px; background: repeating-linear-gradient(90deg, #2a2c33 0 7px, #1f2127 7px 14px); overflow: hidden; transition: width .4s var(--ease), height .4s var(--ease); }
.cargo__ctr[data-size="20FT"] { width: 56%; }
.cargo__ctr[data-size="40FT"] { width: 100%; }
.cargo__ctr[data-size="40HC"] { width: 100%; height: 126px; }
.cargo__fill { flex: 1; display: flex; min-width: 0; height: 100%; }
.cargo__seg { position: relative; display: block; height: 100%; background-repeat: repeat-x; background-position: left 4px bottom 3px; background-size: auto 78%; border-right: 1px solid rgba(0,0,0,.25); transition: width .45s var(--ease); overflow: hidden; }
.cargo__seg--solo { background-color: #f6dfdb; background-image: url("/assets/img/solo/clear.webp"); }
.cargo__seg--duo { background-color: #fbe9d2; background-image: url("/assets/img/duo/clear.webp"); }
.cargo__seg--team { background-color: #dfe3e9; background-image: url("/assets/img/team/clear.webp"); }
.cargo__seg--free { background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 2px, transparent 2px 9px); }
.cargo__seg em { position: absolute; left: 6px; top: 5px; padding: 1px 7px; border-radius: 3px; background: #17181c; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.cargo__seg em:empty { display: none; }
.cargo__seg--free em { background: none; color: #d4d5da; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cargo__doors { position: absolute; right: 0; top: 0; bottom: 0; width: 26px; background: repeating-linear-gradient(0deg, #6d727b 0 2px, #4b4f57 2px 9px); border-left: 2px solid #aeb4bd; }
.cargo__doors::after { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: #d6d9de; }
.cargo__wheels { display: flex; justify-content: space-between; width: 56%; padding: 0 16px; height: 8px; }
.cargo__ctr[data-size="40FT"] + .cargo__wheels, .cargo__ctr[data-size="40HC"] + .cargo__wheels { width: 100%; }
.cargo__wheels i { width: 34px; height: 7px; border-radius: 0 0 3px 3px; background: #6d727b; }
.cargo__inside { margin-top: 10px; padding: 10px 12px; border-radius: 3px; background: rgba(255,255,255,.06); }
.cargo__inside h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a1a1a6; }
.cargo__inside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cargo__inside li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; }
.cargo__inside img, .cargo__fbox { width: 34px; height: 34px; border-radius: 3px; object-fit: contain; background: #fff; padding: 2px; }
.cargo__fbox { display: block; background: repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 2px, transparent 2px 7px); }
.cargo__inside strong { display: block; font-size: 14px; color: #fff; }
.cargo__inside em { font-style: normal; font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cargo__mini { display: block; height: 4px; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.cargo__mini b { display: block; height: 100%; background: #8b8d94; transition: width .45s var(--ease); }
.cargo__mini .cargo__b--solo { background: #c94138; } .cargo__mini .cargo__b--duo { background: #f0a868; } .cargo__mini .cargo__b--team { background: #dfe3e9; }
.cargo__pct { margin-top: 10px; }
.cargo__out small { margin-top: 10px; }
@media (max-width: 460px) { .cargo__ctr[data-size="20FT"], .cargo__ctr[data-size="20FT"] + .cargo__wheels { width: 70%; } }

/* Space per pod */
.cargo__build { display: flex; flex-direction: column; }
.cargo__space { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.cargo__space h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.cargo__space > div { display: grid; gap: 8px; }
.cargo__sp { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 3px; background: var(--bg-alt); }
.cargo__sp img { width: 62px; height: 62px; border-radius: 3px; background: #fff; object-fit: contain; padding: 4px; }
.cargo__sp strong { display: block; font-size: 14.5px; } .cargo__sp div span { font-size: 12px; color: var(--ink-mute); }
.cargo__sp p { margin: 0; text-align: right; } .cargo__sp p b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--accent); } .cargo__sp p span { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 420px) { .cargo__sp { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; } .cargo__sp img { width: 46px; height: 46px; } .cargo__sp p span { white-space: normal; display: block; max-width: 72px; } }

/* Quieter background behind content */
.bgdecor__a { opacity: .07; } .bgdecor__b { opacity: .05 !important; }

/* Image-led feature cards */
.fgrid--rich { counter-reset: feat; gap: 12px; }
.fgrid--rich .fcard { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--rule-soft); border-radius: var(--radius); background: #fff; counter-increment: feat; }
.fgrid--rich .fcard::before { display: none; }
.fgrid--rich .fcard__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #eef0f3; transition: transform .8s var(--ease); }
.fgrid--rich .fcard:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(17,18,22,.13); }
.fgrid--rich .fcard:hover .fcard__img { transform: scale(1.05); }
.fgrid--rich .fcard .ic { position: absolute; z-index: 2; left: 18px; top: calc((100% - 0px) * 0); margin: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #17181c; color: #f0a868; font-size: 22px; transform: translateY(14px); }
.fgrid--rich .fcard .ic svg, .fgrid--rich .fcard:hover .ic svg { transform: none; }
.fgrid--rich .fcard .ic .icon { color: inherit; }
.fgrid--rich .fcard::after { content: "0" counter(feat); position: absolute; z-index: 2; right: 14px; top: 14px; padding: 3px 9px; border-radius: 3px; background: rgba(17,18,22,.72); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.fgrid--rich .fcard h3 { margin: 16px 20px 5px; font-size: 19px; letter-spacing: -.015em; }
.fgrid--rich .fcard p { margin: 0 20px 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); }
@media (max-width: 880px) { .fgrid.fgrid--rich { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fgrid.fgrid--rich { grid-template-columns: 1fr; } }

/* Size switcher on product pages */
.sizeswitch { margin-top: 16px; }
.sizeswitch p { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sizeswitch > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sizeswitch a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.sizeswitch a:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 10px 22px rgba(17,18,22,.09); }
.sizeswitch a.on { border-color: var(--accent); background: rgba(201,65,56,.05); box-shadow: inset 0 0 0 1px var(--accent); }
.sizeswitch img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; }
.sizeswitch span { display: block; min-width: 0; text-align: left; }
.sizeswitch strong { display: block; font-size: 13.5px; line-height: 1.15; }
.sizeswitch small { display: block; font-size: 11.5px; color: var(--ink-mute); line-height: 1.25; }
.sizeswitch b { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) { .sizeswitch a { flex-direction: column; align-items: center; gap: 3px; } .sizeswitch span { text-align: center; } .sizeswitch img { flex-basis: auto; } }
/* Main product photo: no empty bars */
.hero__art--gallery .hero__art-track img, .hero__art--gallery > .hero__art-track { aspect-ratio: 1 / 1; }

/* Real photos in place of generated scenes */
.mega__feature { background: linear-gradient(180deg, rgba(10,11,14,.1), rgba(10,11,14,.9)), url("/assets/img/feat/new-6.webp") center/cover; }
.mega__feature--sm { background: linear-gradient(180deg, rgba(10,11,14,.25), rgba(10,11,14,.88)), url("/assets/img/feat/duo-6.webp") center/cover; }
.section--dark.center { background-image: linear-gradient(rgba(12,13,16,.78), rgba(12,13,16,.86)), url("/assets/img/feat/duo-6.webp"); }

/* Shipped worldwide: live globe */
.fcard__globe { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 72% 50%, #2b2120, #101116 72%); }
.fcard__globe [data-globe] { position: absolute; right: -6%; top: -8%; height: 116%; width: auto; aspect-ratio: 1; max-width: none; margin: 0; }
.fgrid--rich .fcard:hover .fcard__globe { transform: none; }
.fcard__places { position: absolute; z-index: 2; left: 16px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.fcard__places b { margin-bottom: 2px; color: #fff; font-size: 17px; letter-spacing: -.01em; }
.fcard__places span { padding: 2px 8px; border-radius: 3px; background: rgba(255,255,255,.13); color: #f5f5f7; font-size: 11.5px; backdrop-filter: blur(4px); animation: ik-rise .6s var(--ease) both; }
.fcard__places span:nth-child(3) { animation-delay: .1s; } .fcard__places span:nth-child(4) { animation-delay: .2s; } .fcard__places span:nth-child(5) { animation-delay: .3s; } .fcard__places span:nth-child(6) { animation-delay: .4s; } .fcard__places span:nth-child(7) { animation-delay: .5s; }

.fgrid--rich .fcard__globe.fcard__img { background: radial-gradient(70% 90% at 72% 50%, #2b2120, #101116 72%); }

.fcard__places { flex-direction: row; flex-wrap: wrap; max-width: 58%; }
.fcard__places b { flex: 0 0 100%; }

/* Install photos as a section of their own */
.realstrip--page { padding-block: clamp(22px, 2.6vw, 34px); }
.hero__art-thumbs { flex-wrap: wrap; }

/* Product photos: visible thumbnails at every size */
.hero__art--gallery .hero__art-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); background: #eef0f3; }
.hero__art--gallery .hero__art-track::-webkit-scrollbar { display: none; }
.hero__art--gallery .hero__art-track img { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; scroll-snap-align: center; }
.hero--product .hero__art-thumbs { display: flex; flex-wrap: nowrap; gap: 7px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
.hero--product .hero__art-thumbs::-webkit-scrollbar { display: none; }
.hero--product .hero__art-thumb { flex: 0 0 clamp(52px, 5.4vw, 72px); width: clamp(52px, 5.4vw, 72px); height: clamp(52px, 5.4vw, 72px); padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: #eef0f3; cursor: pointer; }
.hero--product .hero__art-thumb.is-active { border-color: var(--accent); }
.hero--product .hero__art-thumb img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; }

/* Footer */
.footcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(28px, 3.4vw, 44px); padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-lg); background: linear-gradient(120deg, #c94138, #8e2c26); }
.footcta p { margin: 0 0 3px; font-size: 13px; color: rgba(255,255,255,.82); }
.footcta h3 { margin: 0; color: #fff; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -.025em; }
.footcta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footcta .btn-primary { background: #fff; color: var(--ink); box-shadow: none; }
.footcta__alt { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 16px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 3px; color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s; }
.footcta__alt:hover { background: rgba(255,255,255,.14); }
.footer__col h4 { color: #f0a868; }
.footer__col a:hover { color: #f0a868; }
.footer__col a.footprod { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 3px; background: rgba(255,255,255,.05); transition: border-color .2s, transform .2s var(--ease); }
.footer__col a.footprod:hover { border-color: #f0a868; transform: translateX(3px); }
.footprod img { flex: 0 0 42px; width: 42px; height: 42px; padding: 3px; border-radius: 3px; background: #fff; object-fit: contain; }
.footprod strong { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.footprod small { display: block; color: #f0a868; font-size: 12px; }
@media (max-width: 560px) { .footcta__btns, .footcta__btns > * { width: 100%; justify-content: center; } }

/* Square by design: matching the shape of the pods */
button, .btn, input, select, textarea { border-radius: 3px; }
.hero__showcase::after { border-style: dashed; }
.reels-sec .shead::after { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.cargo__ctr { border-radius: 0; }

.rvc__avatar { background: #17181c !important; color: #f0a868; }

/* Product thumbnails: one size, no bars */
.hero--product .hero__art-thumbs { gap: 8px; margin-top: 10px; padding: 2px; }
.hero--product .hero__art-thumb { flex: 1 1 0; min-width: 54px; max-width: 92px; width: auto; height: auto; aspect-ratio: 1; border: 0; background: none; opacity: .68; outline: 2px solid transparent; outline-offset: 1px; transition: opacity .2s, outline-color .2s, transform .2s var(--ease); }
.hero--product .hero__art-thumb:hover { opacity: 1; transform: translateY(-2px); }
.hero--product .hero__art-thumb.is-active { opacity: 1; outline-color: var(--accent); }
.hero--product .hero__art-thumb img { object-fit: cover; }
/* Videos sit straight under the hero: tighter, lines quieter */
.reels-sec { padding-block: clamp(28px, 3.4vw, 46px); }
.reels .reel::after { opacity: .2; }
.reels .reel:hover::after { opacity: .2; }

/* Press a clip to enlarge */
.reel, .reels .reel { cursor: zoom-in; }
.reels-view:hover .reels { animation-play-state: paused; }
.vbox-open .reels { animation-play-state: paused; }
.reels .reel:hover { transform: translateY(-4px); }
.reels .reel--wide { flex-basis: calc(clamp(150px, 17vw, 240px) * 3.16); width: calc(clamp(150px, 17vw, 240px) * 3.16); aspect-ratio: 16 / 9; }
.vbox { cursor: zoom-out; }
.vbox video { width: auto; height: auto; max-width: min(92vw, 560px); max-height: calc(100dvh - 40px); border-radius: 3px; animation: ik-rise .3s var(--ease) both; }
.vbox.is-wide video { max-width: min(94vw, 1200px); }
.reels .reel__sound { display: none; }

/* Real-photo gallery: one flowing strip */
.galleryflow { max-width: none; padding-inline: 0; overflow: hidden; }
.gallery.gallery--flow { display: flex; width: max-content; gap: 10px; grid-auto-rows: auto; animation: ik-marquee 60s linear infinite; }
.galleryflow:hover .gallery--flow { animation-play-state: paused; }
.gallery--flow .gallery__item { flex: 0 0 clamp(190px, 19vw, 270px); width: clamp(190px, 19vw, 270px); aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: reduce) { .gallery.gallery--flow { animation: none; } .galleryflow { overflow-x: auto; } }

/* Talk to sales: always clear */
.cta-talk, .hero__cta .link.cta-talk { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 3px; background: #17181c; color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.cta-talk::before { content: ""; width: 8px; height: 8px; background: #f0a868; animation: ik-pulse 1.1s ease-in-out infinite alternate; }
.cta-talk::after { display: none; }
.cta-talk:hover, .hero__cta .link.cta-talk:hover { background: #2b2d33; color: #fff; transform: translateY(-2px); }
.hero--product .hero__cta .cta-talk { flex: 0 1 auto; }

/* Sticky bar */
.buybar__inner { padding-block: 9px; }
.buybar__product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.buybar__product img { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--rule-soft); background: #fff; padding: 3px; border-radius: 3px; }
.buybar__product strong { display: block; font-size: 15px; line-height: 1.2; }
.buybar__product small { display: block; font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; } .buybar__product b { color: var(--ink); }
.buybar__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.buybar .cta-talk, .buybar .btn { min-height: 46px; padding: 0 20px; width: auto; }
body.has-buybar .sales-fab { display: none; }
.buybar { border-top: 2px solid var(--accent); box-shadow: 0 -14px 34px -10px rgba(17,18,22,.22); }
@media (max-width: 620px) {
  .buybar__inner { flex-direction: column; align-items: stretch; gap: 7px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .buybar__product img { flex-basis: 34px; width: 34px; height: 34px; }
  .buybar__meta { display: block; }
  .buybar__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .buybar .cta-talk, .buybar .btn { width: 100%; padding: 0 8px; }
}

/* Sales window */
.salesbox { position: fixed; inset: 0; z-index: 10003; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8,9,12,.72); backdrop-filter: blur(5px); }
.salesbox.open { display: flex; }
.salesbox__card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-top: 3px solid var(--accent); border-radius: 3px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: ik-rise .3s var(--ease) both; }
.salesbox__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; }
.salesbox__product { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 44px; }
.salesbox__product img { width: 52px; height: 52px; padding: 3px; object-fit: contain; border: 1px solid var(--rule-soft); border-radius: 3px; }
.salesbox__product small { display: block; font-size: 12px; color: var(--ink-mute); } .salesbox__product strong { font-size: 16px; }
.salesbox h2 { margin: 0 0 3px; font-size: 26px; letter-spacing: -.02em; }
.salesbox p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-mute); }
.salesbox__opts { display: grid; gap: 8px; margin-bottom: 12px; }
.salesbox__opt { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 9px 12px; border: 1px solid rgba(201,65,56,.22); border-radius: 3px; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.salesbox__opt:hover { border-color: var(--accent); background: rgba(201,65,56,.05); transform: translateX(3px); }
.salesbox__ic { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #17181c; color: #f0a868; font-size: 20px; }
.salesbox__opt span:nth-child(2) { flex: 1; min-width: 0; } .salesbox__opt strong { display: block; font-size: 15.5px; } .salesbox__opt small { display: block; font-size: 13px; color: var(--ink-mute); overflow-wrap: anywhere; }
.salesbox__opt i { font-style: normal; color: var(--accent); }

/* Depth: fine accent borders and layered shade */
.tile, .fcard, .tbadge, .trade, .sizecard, .ctry, .qstep, .cform, .cargo__build, .qside__body, .contact-card, .rangecard, .loccard, .hero__pod, .faq__item, .sizeswitch a, .contact-location, .summary {
  border: 1px solid rgba(201,65,56,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(23,24,28,.05), 0 14px 30px -16px rgba(23,24,28,.2);
}
.tile:hover, .fcard:hover, .tbadge:hover, .sizecard:hover, .rangecard:hover, .loccard:hover, .hero__pod:hover, .ctry:hover { border-color: rgba(201,65,56,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(23,24,28,.06), 0 24px 44px -18px rgba(23,24,28,.3); }
.sizeswitch a.on { border-color: var(--accent); }
main > section.section--alt { background-color: #f1f1f4; box-shadow: inset 0 1px 0 rgba(23,24,28,.06), inset 0 -1px 0 rgba(23,24,28,.06); }
main > section.has-decor:not(.section--alt) { background-color: #fff; }
.hero__art--gallery .hero__art-track, .hero__photo, .gallery__item, .realstrip__item { box-shadow: 0 0 0 1px rgba(23,24,28,.08), 0 18px 36px -18px rgba(23,24,28,.32); }
.shead .h2 { text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* Six different clips fill the screen, so none appears twice at once */
.reels .reel { flex-basis: clamp(170px, 18vw, 260px); width: clamp(170px, 18vw, 260px); }
.reels .reel--wide { flex-basis: calc(clamp(170px, 18vw, 260px) * 3.16); width: calc(clamp(170px, 18vw, 260px) * 3.16); }

/* Clear, bright video: no tints or line overlays */
.reels .reel::before, .reels .reel::after { display: none; }
.reels .reel video { filter: none; }
.reels .reel { box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.16); }
.reels .reel:hover { box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 0 2px #f0a868; }

/* Container builder */
.cb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.cb__step { padding: clamp(16px, 2vw, 24px); border: 1px solid rgba(201,65,56,.17); border-radius: 3px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -16px rgba(23,24,28,.2); }
.cb__step:first-child { grid-column: 1 / -1; }
.cb__step h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 18px; letter-spacing: -.01em; }
.cb__step h3 b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 3px; background: var(--accent); color: #fff; font-size: 13px; }
.cb__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cb__types button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1.5px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.cb__types i { display: block; min-width: 26px; margin-bottom: 7px; border: 1.5px solid currentColor; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 5px); opacity: .55; }
.cb__types strong { font-size: 15px; } .cb__types span { font-size: 12px; color: var(--ink-mute); }
.cb__types button:hover { border-color: var(--ink); }
.cb__types button.on { border-color: #17181c; background: #17181c; color: #fff; } .cb__types button.on span { color: #f0a868; } .cb__types button.on i { opacity: 1; color: #f0a868; }
.cb__loadhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cb__loadhead h3 { margin: 0; }
.cb__boxes { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cb__boxes .cargo__step button { width: 36px; height: 36px; } .cb__boxes output { width: 38px; }
.cb .cargo__step { border-radius: 3px; }
.cb__grids { display: grid; gap: 8px; padding: 12px; border-radius: 3px; background: #17181c; }
.cb__ctr { position: relative; min-width: 150px; padding: 3px 14px 3px 3px; border: 2px solid #8b8d94; background: #23252b; }
.cb__cells { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(var(--cols), 1fr); gap: 1px; }
.cb__cells i { display: block; aspect-ratio: 1; background: rgba(255,255,255,.08); transition: background .2s; }
.cb__door { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(0deg, #8b8d94 0 2px, #5a5d65 2px 6px); }
.c-solo { background: #c94138 !important; } .c-solo.alt { background: #e0655b !important; }
.c-duo { background: #f0a868 !important; } .c-duo.alt { background: #f7c698 !important; }
.c-team { background: #f4f4f6 !important; } .c-team.alt { background: #bfc2c9 !important; }
.cb__more { margin: 0; color: #f0a868; font-size: 13px; font-weight: 600; }
.cb__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 10px; }
.cb__pct { margin: 0; font-size: 14px; color: var(--ink-mute); } .cb__pct strong { font-size: 26px; color: var(--ink); letter-spacing: -.02em; }
.cb__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.cb__legend li { display: inline-flex; align-items: center; gap: 5px; }
.cb__legend i { width: 12px; height: 12px; border: 1px solid rgba(23,24,28,.25); background: repeating-linear-gradient(135deg, #cfd1d6 0 2px, #fff 2px 4px); }
.cb__room { margin: 6px 0 12px; padding: 9px 11px; border-left: 3px solid var(--accent); background: #fbe9e7; font-size: 14px; font-weight: 600; }
.cb__pods { display: grid; gap: 8px; }
.cb__pod { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--rule-soft); border-left: 4px solid var(--rule); border-radius: 3px; transition: border-color .2s; }
.cb__pod--solo.is-on { border-left-color: #c94138; } .cb__pod--duo.is-on { border-left-color: #f0a868; } .cb__pod--team.is-on { border-left-color: #17181c; }
.cb__podimg { width: 62px; height: 62px; padding: 3px; border: 0; border-radius: 3px; background: #f4f4f6; cursor: pointer; }
.cb__podimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cb__podimg:disabled { cursor: not-allowed; opacity: .6; }
.cb__podinfo strong { display: block; font-size: 15px; } .cb__podinfo span { display: block; font-size: 12px; color: var(--ink-mute); } .cb__podinfo em { display: block; font-size: 12px; font-style: normal; font-weight: 600; color: var(--accent); }
.cb__ctrl { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cb .cargo__step button:disabled { opacity: .35; cursor: not-allowed; }
.cb__fill { min-height: 28px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cb__fill:disabled { color: var(--ink-faint); cursor: default; }
.cb__clear { margin-top: 8px; min-height: 36px; border: 0; background: none; color: var(--ink-mute); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.cb__sum { position: sticky; top: 84px; background: #17181c; color: #fff; border-color: #17181c; }
.cb__sum h3 { color: #fff; }
.cb__summary { margin: 0 0 10px; font-size: 13.5px; color: #d4d5da; }
.cb__sum dl { margin: 0 0 8px; } .cb__sum dl > div { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.cb__sum dt { font-size: 12.5px; color: #a1a1a6; } .cb__sum dd { margin: 1px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb__big dd { font-size: clamp(22px, 2.2vw, 28px); color: #f0a868; letter-spacing: -.02em; }
.cb__sum small { display: block; margin-bottom: 10px; font-size: 11.5px; line-height: 1.45; color: #8e8e94; }
.cb__hint { margin: 0 0 8px; font-size: 13px; color: #f0a868; }
.cb__sum .is-off { background: #4a4b50; box-shadow: none; cursor: not-allowed; } .cb__sum .is-off::after { display: none; }
@media (max-width: 900px) { .cb { grid-template-columns: 1fr; } .cb__sum { position: static; } }
@media (max-width: 560px) {
  .cb__types strong { font-size: 13px; } .cb__types span { font-size: 11px; }
  .cb__pod { grid-template-columns: 50px minmax(0, 1fr); } .cb__podimg { width: 50px; height: 50px; }
  .cb__ctrl { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .cb__grids { padding: 8px; }
}

/* Dealer deal sheet */
.cb__country { display: block; margin-bottom: 10px; }
.cb__country span { display: block; margin-bottom: 4px; font-size: 12.5px; color: #a1a1a6; }
.cb__country select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; background: #23252b; color: #fff; font: inherit; font-size: 15px; }
.cb__sum dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cb__sum dl > div dd { text-align: right; white-space: nowrap; font-size: 16px; }
.cb__minus dd { color: #d4d5da; }
.cb__sum dl > .cb__big { display: block; margin-block: 2px; padding: 11px; background: rgba(240,168,104,.12); border-top: 0; border-left: 3px solid #f0a868; }
.cb__sum dl > .cb__big dd { text-align: left; font-size: clamp(25px, 2.5vw, 32px); }

/* Country pages: large contact actions */
.bigcta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.bigcta__title { grid-column: 1 / -1; margin: 0; font-size: clamp(22px, 2.5vw, 30px); font-weight: 600; letter-spacing: -.02em; text-align: center; }
.bigcta__btn { display: flex; align-items: center; gap: 13px; min-height: 86px; padding: 12px 16px; border: 1.5px solid #17181c; border-radius: 3px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 14px 30px -16px rgba(23,24,28,.35); transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.bigcta__btn:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -16px rgba(23,24,28,.45); }
.bigcta__btn .icon { flex: 0 0 auto; font-size: 34px; color: var(--accent); }
.bigcta__btn strong { display: block; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.bigcta__btn small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-mute); overflow-wrap: anywhere; }
.bigcta__btn--wa { background: #17181c; color: #fff; } .bigcta__btn--wa .icon { color: #f0a868; } .bigcta__btn--wa small { color: #b6b7bd; }
.bigcta__btn--quote { background: var(--accent); border-color: var(--accent); color: #fff; } .bigcta__btn--quote .icon, .bigcta__btn--quote small { color: #fff; }
.mkt-hero__grid .bigcta { grid-template-columns: 1fr; max-width: 460px; }
.mkt-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(201,65,56,.2); border-radius: 3px; box-shadow: 0 26px 50px -22px rgba(23,24,28,.45); }
.mkt-photo > img { display: block; width: 100%; height: auto; }
.mkt-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: rgba(17,18,22,.76); color: #fff; font-size: 12px; font-weight: 600; }

/* Country guide */
.gd-top { padding-block: 10px 0; }
.gd-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; border: 1px solid rgba(201,65,56,.17); background: #fff; box-shadow: 0 14px 30px -18px rgba(23,24,28,.2); }
.gd-toc a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.gd-toc a:hover { background: #17181c; color: #fff; }
.gd-split { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.gd-p { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-mute); }
.gd-photo { margin: 0; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(23,24,28,.08), 0 18px 36px -18px rgba(23,24,28,.32); }
.gd-photo img { display: block; width: 100%; height: auto; }
.gd-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gd-size, .gd-city, .gd-card, .gd-step, .gd-dirgroup { border: 1px solid rgba(201,65,56,.17); border-radius: 3px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -18px rgba(23,24,28,.22); }
.gd-size img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gd-size > div { padding: 16px; }
.gd-kicker { margin: 0 0 3px; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.gd-size h3 { margin: 0 0 6px; font-size: 22px; } .gd-size h3 a { color: inherit; text-decoration: none; }
.gd-size p:not(.gd-kicker) { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-mute); }
.gd-size ul { display: grid; gap: 3px; margin: 12px 0; padding: 0; list-style: none; font-size: 14px; }
.gd-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-city { padding: 15px; } .gd-city h3 { margin: 0 0 3px; font-size: 17px; } .gd-city p:last-child { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.gd-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gd-card { padding: 15px; border-top: 3px solid var(--accent); } .gd-card h3 { margin: 0 0 5px; font-size: 16px; } .gd-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.gd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-steps--four { grid-template-columns: repeat(4, 1fr); }
.gd-step { display: flex; gap: 11px; padding: 15px; }
.gd-step > b { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #17181c; color: #f0a868; font-size: 14px; }
.gd-step h3 { margin: 0 0 4px; font-size: 16px; } .gd-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.gd-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.gd-dirgroup { padding: 15px; } .gd-dirgroup h3 { margin: 0 0 8px; color: var(--accent); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.gd-dirgroup div { display: flex; flex-wrap: wrap; gap: 4px; }
.gd-dirgroup a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 9px; background: #f1f1f4; color: var(--ink); font-size: 13.5px; text-decoration: none; }
.gd-dirgroup a:hover, .gd-dirgroup a[aria-current] { background: #17181c; color: #fff; }

/* Locations directory */
.ctrydir { display: grid; gap: 18px; }
.ctrydir__group h3 { margin: 0 0 8px; font-size: 20px; }
.ctrydir__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ctrydir__list a { display: block; padding: 13px; border: 1px solid rgba(201,65,56,.17); border-radius: 3px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 14px 30px -18px rgba(23,24,28,.22); transition: border-color .2s, transform .2s var(--ease); }
.ctrydir__list a:hover { border-color: var(--accent); transform: translateY(-3px); }
.ctrydir__list strong { display: block; font-size: 16px; } .ctrydir__list span { display: block; color: var(--accent); font-size: 12.5px; font-weight: 600; } .ctrydir__list small { display: block; margin-top: 3px; color: var(--ink-mute); font-size: 12.5px; }
@media (max-width: 960px) { .gd-sizes, .gd-photos, .gd-split { grid-template-columns: 1fr; } .gd-cities, .gd-steps, .gd-steps--four, .gd-cards, .ctrydir__list { grid-template-columns: 1fr 1fr; } .bigcta { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gd-cities, .gd-steps, .gd-steps--four, .gd-cards, .ctrydir__list { grid-template-columns: 1fr; } }

/* Square flags */
.flag { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23,24,28,.14); object-fit: cover; vertical-align: middle; }
.flag--xs { width: 18px; height: 18px; margin-right: 6px; } .flag--sm { width: 22px; height: 22px; margin-right: 7px; } .flag--md { width: 38px; height: 38px; } .flag--lg { width: 74px; height: 74px; }
.mkt-flagline { display: flex; align-items: center; gap: 11px; font-size: 16px; }
.mkt-photo figcaption { display: flex; align-items: center; }
.ctrydir__list .flag { float: right; }
.geodel { display: flex; align-items: center; gap: 10px; padding: 9px max(16px, calc((100% - var(--wrap, 1200px)) / 2)); background: #17181c; color: #fff; font-size: 14px; text-decoration: none; }
.geodel strong { color: #f0a868; } .geodel b { margin-left: auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { .geodel b { display: none; } }

/* Product showcase on country pages */
.shw { padding-block: clamp(34px, 5vw, 62px); background: linear-gradient(180deg, #17181c, #24262c); color: #fff; }
.shw__head { display: flex; align-items: center; gap: 17px; margin-bottom: 20px; }
.shw__head p { margin: 0 0 3px; color: #f0a868; font-weight: 600; } .shw__head h2 { margin: 0; color: #fff; }
.shw__head > span { margin-left: auto; max-width: 280px; color: #c9cad0; font-size: 14px; text-align: right; }
.shw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shw__pod { display: flex; flex-direction: column; padding: 16px; border: 1px solid rgba(240,168,104,.3); border-radius: 3px; background: #fff; color: var(--ink); box-shadow: 0 24px 44px -24px #000; transition: transform .25s var(--ease); }
.shw__pod:hover { transform: translateY(-5px); }
.shw__img { display: block; padding: 12px; background: linear-gradient(135deg, #f7f7f9, #e6e7eb); }
.shw__img img { display: block; width: 100%; height: auto; }
.shw__role { margin: 13px 0 1px; color: var(--accent); font-size: 13px; font-weight: 600; }
.shw__pod h3 { margin: 0; font-size: 24px; } .shw__pod h3 a { color: inherit; text-decoration: none; }
.shw__price { margin: 3px 0 9px; font-size: 21px; font-weight: 600; }
.shw__pod ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--ink-mute); font-size: 14px; }
.shw__stamp { display: flex; align-items: center; margin: 12px 0; padding: 8px; background: #f1f1f4; font-size: 13.5px; font-weight: 600; }
.shw__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.shw__btns a { min-height: 46px; display: flex; align-items: center; justify-content: center; }
.shw__quote { border: 1.5px solid #17181c; border-radius: 3px; color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .shw__grid { grid-template-columns: 1fr; } .shw__head { flex-wrap: wrap; } .shw__head > span { margin-left: 0; text-align: left; max-width: none; } .flag--lg { width: 56px; height: 56px; } }

/* Uniform product hero */
.hero--product .display { font-size: clamp(34px, 3.7vw, 52px); }
.hero--product .hero__art--gallery .hero__art-track, .hero--product .hero__art--gallery .hero__art-track img { aspect-ratio: 4 / 3; }
.sizeswitch > div { align-items: stretch; }
.sizeswitch a { position: relative; flex-direction: column; align-items: stretch; gap: 7px; padding: 9px; border: 1.5px solid rgba(23,24,28,.14); background: #fff; }
.sizeswitch a:hover, .sizeswitch a:focus-visible { border-color: #17181c; outline: 0; }
.sizeswitch a.on, .sizeswitch a.on:hover { border-color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px var(--accent), 0 14px 26px -16px rgba(201,65,56,.55); }
.sizeswitch img { flex: none; width: 100%; height: auto; aspect-ratio: 360 / 280; object-fit: contain; padding: 6px; background: linear-gradient(135deg, #f7f7f9, #e8e9ed); }
.sizeswitch strong { font-size: 15px; } .sizeswitch small { font-size: 12.5px; } .sizeswitch b { font-size: 14px; margin-top: 3px; }
.sizeswitch a > i { position: absolute; top: 9px; left: 9px; padding: 2px 6px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; }
@media (min-width: 1081px) { .colorpick__row { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; max-width: none; } .colorpick__dot { width: 100%; height: auto; aspect-ratio: 1; } }
@media (max-width: 480px) { .sizeswitch a { padding: 6px; } .sizeswitch strong { font-size: 12.5px; } .sizeswitch small { font-size: 11px; } .sizeswitch a > i { display: none; } }

/* Rich FAQ, the same everywhere */
.faq { max-width: 1040px; border-top: 0; }
.faq__group { margin-top: 22px; } .faq__group:first-child { margin-top: 0; }
.faq__group h3 { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: 19px; }
.faq__item { margin-bottom: 7px; padding-inline: 14px; border: 1px solid rgba(201,65,56,.17); border-radius: 3px; background: #fff; box-shadow: 0 12px 26px -20px rgba(23,24,28,.3); }
.faq__item.open { border-color: var(--accent); }

/* Currency pop-up */
.ccy__btn .flag { width: 18px; height: 18px; }
.ccym { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(13,14,18,.66); backdrop-filter: blur(5px); }
.ccym[hidden] { display: none; }
html.ccym-open { overflow: hidden; }
.ccym__panel { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border-top: 4px solid var(--accent); border-radius: 3px; background: #fff; box-shadow: 0 40px 80px -30px #000; animation: ccymIn .24s var(--ease); }
@keyframes ccymIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ccym__head { display: flex; justify-content: space-between; align-items: flex-start; }
.ccym__head p { margin: 0; color: var(--accent); font-size: 13px; font-weight: 600; } .ccym__head h2 { margin: 0; font-size: 28px; }
.ccym__close { width: 44px; height: 44px; border: 1px solid rgba(23,24,28,.16); border-radius: 3px; background: #fff; font-size: 24px; cursor: pointer; }
.ccym__search { width: 100%; min-height: 46px; margin: 13px 0; padding: 0 12px; border: 1.5px solid #17181c; border-radius: 3px; font: inherit; }
.ccym__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ccym .ccy__opt { display: flex; align-items: center; gap: 11px; padding: 9px; border: 1px solid rgba(23,24,28,.13); border-radius: 3px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.ccym .ccy__opt[hidden] { display: none; }
.ccym .ccy__opt:hover { border-color: #17181c; }
.ccym .ccy__opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ccym .ccy__opt .flag { width: 34px; height: 34px; }
.ccym .ccy__opt span { flex: 1; min-width: 0; color: inherit; font-size: inherit; } .ccym .ccy__opt b { display: block; width: auto; } .ccym .ccy__opt small { display: block; color: var(--ink-mute); font-size: 12.5px; }
.ccym .ccy__opt em { font-style: normal; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ccym__note { margin: 12px 0 0; color: var(--ink-mute); font-size: 12.5px; }
@media (max-width: 560px) { .ccym__grid { grid-template-columns: 1fr; } }

/* Container maximise and local prices */
.cb__max { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cb__max button { min-height: 44px; padding: 0 13px; border: 1.5px solid #17181c; border-radius: 3px; background: #17181c; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cb__max .cb__clear { margin: 0 0 0 auto; background: transparent; color: var(--ink); }
.cb__local { margin: 10px 0; padding: 10px; border: 1px solid rgba(255,255,255,.18); }
.cb__local p { margin: 0 0 5px; color: #f0a868; font-size: 13px; font-weight: 600; }
.cb__local ul { margin: 0; padding: 0; list-style: none; }
.cb__local li { display: flex; justify-content: space-between; font-size: 14.5px; }
.cb__sum dl > .cb__big dd { font-size: clamp(20px, 1.9vw, 25px); white-space: normal; }

/* Country hero: pod selector */
.pick { min-width: 0; padding: 12px; border: 1px solid rgba(201,65,56,.22); border-radius: 3px; background: #fff; box-shadow: 0 30px 56px -28px rgba(23,24,28,.5); }
.pick__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pick__tabs button { min-width: 0; min-height: 58px; padding: 7px 5px; border: 1.5px solid rgba(23,24,28,.14); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pick__tabs button:hover { border-color: #17181c; }
.pick__tabs button.on { border-color: #17181c; background: #17181c; color: #fff; }
.pick__tabs strong, .pick__tabs small { display: block; } .pick__tabs strong { font-size: 15px; } .pick__tabs small { font-size: 12px; opacity: .72; }
.pick__stage { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; margin-top: 8px; padding: 42px 24px 16px; overflow: hidden; border-radius: 3px; background-color: #f0f1f4; background-image: linear-gradient(rgba(23,24,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,24,28,.05) 1px, transparent 1px), radial-gradient(70% 60% at 50% 45%, #fff, transparent); background-size: 32px 32px, 32px 32px, 100% 100%; }
.pick__stage > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(23,24,28,.28)); animation: pickIn .38s var(--ease); }
.pick__stage > img[hidden], .pick__info[hidden], .mvs__group[hidden] { display: none; }
@keyframes pickIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.pick__tag { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; margin: 0; padding: 6px 9px; background: #17181c; color: #fff; font-size: 13px; font-weight: 600; }
.pick__info { padding: 13px 4px 3px; }
.pick__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pick__row p { margin: 0; color: var(--accent); font-size: 13px; font-weight: 600; } .pick__row h2 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; } .pick__row b { font-size: 26px; font-weight: 600; white-space: nowrap; }
.pick__info ul { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 8px 0 12px; padding: 0; list-style: none; color: var(--ink-mute); font-size: 13.5px; }
.pick__btns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.pick__btns a { min-height: 50px; display: flex; align-items: center; justify-content: center; }
.pick__quote { border: 1.5px solid #17181c; border-radius: 3px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mvs { --h: clamp(300px, 36vw, 480px); }
.mvs .reels .reel { flex: 0 0 auto; width: auto; height: var(--h); aspect-ratio: var(--r); }
.mvs .reel video, .mvs .reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vbox__img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.vbox__img[hidden], .vbox video[hidden] { display: none; }

/* WhatsApp is always green */
.bigcta__btn--wa { background: #1fa855; border-color: #1fa855; color: #fff; }
.bigcta__btn--wa:hover { background: #178f47; }
.bigcta__btn--wa .icon, .bigcta__btn--wa small { color: #fff; }
.footcta__alt[href*="wa.me"], .salesbox a[href*="wa.me"] { background: #1fa855; border-color: #1fa855; color: #fff; }
.footcta__alt[href*="wa.me"] .icon, .salesbox a[href*="wa.me"] .icon, .salesbox a[href*="wa.me"] small, .salesbox a[href*="wa.me"] span { color: #fff; }

/* Home hero refinements */
.topbar--geo { display: flex; align-items: center; justify-content: center; gap: 9px; }
.topbar--geo .flag { width: 20px; height: 20px; box-shadow: none; }
.topbar--geo strong { color: #f0a868; }
.topbar--geo a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hero__photo--video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #17181c; }
.hero--home .hero__pod { flex-direction: column; }
.hero--home .hero__pod-media { width: 100%; flex: none; aspect-ratio: 360 / 240; padding: 10px; }
.hero--home .hero__pod-media img { width: 100%; height: 100%; object-fit: contain; }
.hero--home .hero__pod-info { align-items: flex-start; padding: 11px 12px; }
.hero--home .hero__pod-text h3 { font-size: 16px; }
.hero--home .hero__pod-text p { margin: 2px 0 0; font-size: 13px; }
.hero--home .hero__pod-text b { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; }
.hero__contact a[href*="wa.me"] { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 3px; background: #1fa855; color: #fff; font-weight: 600; }
.hero__contact a[href*="wa.me"]:hover { background: #178f47; color: #fff; }
.hero__contact a[href*="wa.me"] .icon { color: #fff; }
.hreview { padding: 11px 15px; margin-top: 14px; }
.hreview__quote { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-block: 5px; }
.nav__sales, .nav__sales.nav__sales--bar { background: var(--accent); color: #fff; font-weight: 600; }
.nav__sales::before { background: #fff; }
.nav__sales:hover { background: #17181c; color: #fff; }
@media (max-width: 620px) { .topbar--geo { font-size: 12px; gap: 6px; } .topbar--geo a { display: none; } .hero--home .hero__pod-info { padding: 8px; } .hero--home .hero__pod-text h3 { font-size: 13px; } .hero--home .hero__pod-text p { font-size: 11.5px; } .hero--home .hero__pod-text b { font-size: 13px; } .hero--home .hero__pod-go { display: none; } }

/* Home hero: three swiping pod cards */
.hero--home .hero__showcase { display: block; }
.hcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 10px; }
.hero--home .hero__quicknav { display: none; }
.hcard { flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(201,65,56,.2); background: #fff; box-shadow: 0 26px 46px -26px rgba(23,24,28,.5); }
.hcard:hover { transform: translateY(-4px); border-color: var(--accent); }
.hcard__media { position: relative; }
.hcard__track { display: flex; aspect-ratio: 3 / 4; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #17181c; }
.hcard__track::-webkit-scrollbar { display: none; }
.hcard__slide { flex: 0 0 100%; display: block; min-width: 0; scroll-snap-align: start; }
.hcard__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hcard__slide--cut { padding: 16px 10px; background: linear-gradient(135deg, #f8f8fa, #e4e5ea); }
.hcard__nav { position: absolute; top: 50%; width: 34px; height: 44px; margin-top: -22px; border: 0; background: rgba(17,18,22,.72); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.hcard__nav--prev { left: 0; } .hcard__nav--next { right: 0; }
.hcard:hover .hcard__nav, .hcard__nav:focus-visible { opacity: 1; }
.hcard__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.hcard__dots i { width: 9px; height: 4px; background: rgba(255,255,255,.62); box-shadow: 0 0 0 1px rgba(17,18,22,.28); transition: width .25s, background .25s; }
.hcard__dots i.on { width: 20px; background: var(--accent); }
.hcard__info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; padding: 11px 12px; color: var(--ink); text-decoration: none; }
.hcard__info strong, .hcard__info small { display: block; } .hcard__info strong { font-size: 17px; } .hcard__info small { color: var(--ink-mute); font-size: 13px; } .hcard__info b { font-size: 16px; font-weight: 600; white-space: nowrap; }
@media (max-width: 960px) { .hcards { display: flex; gap: 10px; margin-inline: -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .hcards::-webkit-scrollbar { display: none; } .hcards .hcard { flex: 0 0 min(72vw, 300px); width: min(72vw, 300px); max-width: none; scroll-snap-align: center; } .hcards { flex-direction: row; flex-wrap: nowrap; align-items: stretch; grid-template-columns: none; } .hcard__nav { display: none; } }

/* Home hero copy */
.hero--home .display { font-size: clamp(34px, 3.3vw, 50px); line-height: 1.08; text-wrap: balance; }
.hero--home .hero__sub { margin-top: 12px; font-size: clamp(17px, 1.45vw, 21px); }
.hero--home .hero__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 18px; padding: 0; border: 0; }
.hero--home .hero__perks li { display: flex; align-items: center; gap: 7px; min-height: 50px; padding: 7px 9px; border: 1px solid rgba(201,65,56,.17); border-radius: 3px; background: #fff; font-size: 13.5px; line-height: 1.25; }
.hero--home .hero__head .hero__cta { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.hero--home .hero__cta > a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 56px; margin: 0; padding: 0 10px; font-size: 16px; white-space: nowrap; }
.hero--home .hero__cta a[href*="wa.me"] { border-radius: 3px; background: #1fa855; color: #fff; font-weight: 600; text-decoration: none; }
.hero--home .hero__cta a[href*="wa.me"]:hover { background: #178f47; }
.hero--home .hero__cta a[href*="wa.me"] .icon { color: #fff; font-size: 20px; }
.hero--home .hero__contact { margin-top: 10px; }
@media (max-width: 620px) { .hero--home .hero__perks { grid-template-columns: 1fr; } .hero--home .hero__perks li { min-height: 42px; } .hero--home .hero__head .hero__cta { grid-template-columns: 1fr 1fr; } .hero--home .hero__cta > a:first-child { grid-column: 1 / -1; } }
.hero--home .hero__showcase { min-width: 0; max-width: 100%; }
@media (max-width: 960px) { .hero--home .hero__showcase .hero__photo { display: block; } .hero--home .hero__showcase .hero__photo img { display: block; width: 100%; height: auto; } .hero--home .hero__showcase { width: 100%; overflow: visible; } .hcards { max-width: 100vw; } }

/* Video and photo tiles: brand-tinted overlay that clears on hover */
.reels .reel video, .reels .reel img { filter: brightness(.84) contrast(1.05) saturate(1.04); transition: filter .35s var(--ease); }
.reels .reel::before { display: block; content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(var(--tint), .62) 0%, rgba(17, 18, 22, .2) 46%, rgba(var(--tint2), .42) 100%); mix-blend-mode: multiply; opacity: 1; transition: opacity .35s var(--ease); }
.reels .reel::after { display: block; content: ""; position: absolute; z-index: 2; inset: 9px; pointer-events: none; border: 1px solid rgba(240, 168, 104, .6); background: linear-gradient(#f0a868, #f0a868) left top / 26px 3px no-repeat, linear-gradient(#f0a868, #f0a868) left top / 3px 26px no-repeat, linear-gradient(#c94138, #c94138) right bottom / 26px 3px no-repeat, linear-gradient(#c94138, #c94138) right bottom / 3px 26px no-repeat; opacity: 1; transform: none; transition: opacity .35s var(--ease), inset .35s var(--ease); }
.reels .reel:hover video, .reels .reel:hover img { filter: none; }
.reels .reel:hover::before { opacity: 0; }
.reels .reel:hover::after { opacity: .9; inset: 5px; transform: none; }
@media (prefers-reduced-motion: reduce) { .reels .reel::before, .reels .reel::after, .reels .reel video, .reels .reel img { transition: none; } }

/* Wider clips keep their full frame */
.reels-sec:not(.mvs) .reels .reel:has(video[src*="/sofa.mp4"]) { flex-basis: calc(clamp(170px, 18vw, 260px) * 1.333); width: calc(clamp(170px, 18vw, 260px) * 1.333); aspect-ratio: 3 / 4; }

/* Tile overlay: slow drifting geometry */
.reels .reel:nth-child(n)::after { inset: -120px; border: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23f0a868'%20stroke-width%3D'.7'%3E%3Crect%20x%3D'30'%20y%3D'30'%20width%3D'60'%20height%3D'60'%20opacity%3D'.55'%2F%3E%3Cpath%20d%3D'M60%200L120%2060L60%20120L0%2060Z'%20opacity%3D'.32'%2F%3E%3Cpath%20d%3D'M0%200H120M0%200V120'%20opacity%3D'.2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 120px 120px repeat; opacity: .5; will-change: transform; animation: reelGeo 22s linear infinite; }
.reels .reel:nth-child(2n)::after { animation-direction: reverse; animation-duration: 28s; }
.reels .reel:hover::after, .reels .reel:nth-child(n):hover::after { inset: -120px; opacity: .14; }
@keyframes reelGeo { to { transform: translate(120px, 120px); } }
@media (prefers-reduced-motion: reduce) { .reels .reel:nth-child(n)::after { animation: none; } }

/* /pods hero */
.podhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(22px, 4vw, 54px); align-items: center; }
.podhero__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.podhero__tiles a { min-width: 0; overflow: hidden; border: 1px solid rgba(201,65,56,.2); border-radius: 3px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 24px 44px -26px rgba(23,24,28,.5); transition: transform .25s var(--ease), border-color .25s; }
.podhero__tiles a:hover { transform: translateY(-5px); border-color: var(--accent); }
.podhero__tiles img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #17181c; }
.podhero__tiles span { display: block; padding: 9px 10px; }
.podhero__tiles strong, .podhero__tiles small { display: block; } .podhero__tiles strong { font-size: 15px; } .podhero__tiles small { color: var(--ink-mute); font-size: 12.5px; }
@media (max-width: 960px) { .podhero { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .podhero__tiles strong { font-size: 12.5px; } .podhero__tiles small { font-size: 11px; } .podhero__tiles span { padding: 7px; } }

/* Comfortable tap targets */
@media (pointer: coarse) { .colorpick__dot { width: 36px; height: 36px; } .cb__fill { min-height: 44px; } .hcard__dots { bottom: 10px; } }
.podhero__tiles img { padding: 16px 10px; background: linear-gradient(135deg, #f8f8fa, #e4e5ea); }