/* =========================================================
   RedPill Audio — shared stylesheet
   Dark, refined audio-luxury. Signature red accent.
   ========================================================= */

:root {
  --bg:        #0b0b0d;
  --bg-2:      #101013;
  --surface:   #16161b;
  --surface-2: #1d1d23;
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.16);
  --text:      #f2f1ee;
  --muted:     #9a9aa2;
  --muted-2:   #6e6e76;
  --red:       #e22b25;
  --red-hi:    #ff4138;
  --red-soft:  rgba(226,43,37,0.14);
  --red-glow:  rgba(226,43,37,0.35);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* one curve, three speeds; every transition on the site uses these */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.2s;   /* hover / press micro-feedback */
  --t-med:  0.4s;   /* structural movement: lifts, drawer, nav */
  --t-slow: 0.8s;   /* scroll reveals, image fades */

  --hover-zoom: 1.02;   /* desktop hover scale; tune from here (1 = off) */

  --radius: 10px;   /* soft corner radius; tune all corners from here */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* fine grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lead { color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }

/* ---------- buttons ---------- */
.btn {
  --pad: 14px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--text); background: rgba(255,255,255,0.04); }
.btn--red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 0 0 var(--red-glow);
}
/* in-flight loading state: hide the label, show a centred spinner, button
   disabled. Used on the contact + enquiry submit buttons (all .btn--red, so a
   white spinner reads on the red fill). */
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading:disabled { opacity: 1; }   /* stay bright while loading, not the disabled 0.4 */
.btn.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn--red:hover {
  background: var(--red-hi);
  border-color: var(--red-hi);
  box-shadow: 0 8px 40px -8px var(--red-glow);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) 22px max(var(--gut), env(safe-area-inset-left));
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease),
              padding var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.nav.scrolled {
  background: rgba(11,11,13,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: 14px;
}
/* hide on scroll down, show on scroll up (toggled in main.js) */
.nav.nav--hidden { transform: translateY(-100%); }
/* Logo lockup. The PNGs are trimmed to their visible content, so
   align-items:center puts both visual midlines on the same axis exactly.
   --brand-h sets the wordmark height; the mark is --brand-mark-ratio times
   taller so it reads as the dominant element. Resize the whole lockup by
   changing --brand-h only; the ratio keeps the proportion everywhere. */
.brand {
  --brand-h: 14px;
  --brand-mark-ratio: 2.4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark { height: calc(var(--brand-h) * var(--brand-mark-ratio)); width: auto; display: block; }
.brand__wordmark { height: var(--brand-h); width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a.link {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.nav-links a.link:hover { color: var(--text); }
.nav-links a.link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--red);
  transition: width 0.3s var(--ease);
}
.nav-links a.link:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* cart button */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-btn:active { transform: translateY(1px); }
.cart-btn:hover { border-color: var(--text); }
.cart-btn svg { width: 17px; height: 17px; }
.cart-count {
  min-width: 19px; height: 19px;
  padding: 0 5px;
  background: var(--red);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.cart-count.empty { display: none; }

.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 70% 10%, #2a0f0e 0%, transparent 55%),
    linear-gradient(180deg, #141416 0%, #0b0b0d 100%);
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.45) 0%, rgba(11,11,13,0.25) 40%, rgba(11,11,13,0.95) 100%),
    radial-gradient(60% 60% at 30% 60%, rgba(11,11,13,0) 0%, rgba(11,11,13,0.55) 100%);
}
.hero .wrap { padding-bottom: clamp(48px, 9vh, 110px); width: 100%; }
.hero h1 {
  font-size: clamp(34px, 5.6vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  max-width: 18ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
}
.hero__tag {
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--muted);
  margin-top: 22px;
  max-width: 42ch;
  line-height: 1.55;
  letter-spacing: 0;
}
.hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__minor {
  display: inline-block; margin-top: 22px;
  font-size: 14px; letter-spacing: 0.04em; color: var(--muted);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease);
}
.hero__minor:hover { color: var(--text); }
.scrollcue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scrollcue .ln { width: 1px; height: 38px; background: linear-gradient(var(--red), transparent); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* one-off settle as the hero media loads in */
@keyframes hero-settle {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: var(--hero-img-o, 0.6); transform: scale(1); }
}
.hero__media img, .hero__media video,
.cat-hero__media img { animation: hero-settle 2.4s var(--ease) both; }

/* equaliser motif */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq span { width: 3px; background: var(--red); animation: eq 1s ease-in-out infinite; }
.eq span:nth-child(1){height:40%;animation-delay:0s}
.eq span:nth-child(2){height:90%;animation-delay:.2s}
.eq span:nth-child(3){height:60%;animation-delay:.4s}
.eq span:nth-child(4){height:100%;animation-delay:.1s}
@keyframes eq { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

/* ---------- sections ---------- */
section { position: relative; }
/* in-page anchor targets land below the fixed header (height + top safe-area)
   with a little breathing room, instead of under it. env() is 0 on desktop. */
section[id] { scroll-margin-top: calc(80px + env(safe-area-inset-top)); }
/* DESKTOP: showroom anchor lands flush at the very top (the header hides on
   scroll-down, so nothing covers the video there). #id beats section[id], so
   only the showroom is zeroed; other sections keep the header offset. Mobile
   showroom uses its own block:end landing (main.js) and is unaffected. */
@media (min-width: 761px) { #showroom { scroll-margin-top: 0; } }
/* Contact buttons anchor to the "Get in touch" HEADING (not the section top),
   so the form heading lands near the viewport top with 24px breathing room
   instead of below the contact section's 80-160px top padding. The carousel
   (section directly above) is naturally off-screen above. Same on mobile and
   desktop. Nudge the 24px to taste. */
#get-in-touch { scroll-margin-top: 24px; }
.sec { padding-block: clamp(80px, 13vh, 160px); }
.sec--tight { padding-block: clamp(56px, 9vh, 100px); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(34px, 5.4vw, 68px); margin-top: 20px; }
.sec-head p { margin-top: 22px; }

/* philosophy: one stacked, left-aligned statement (eyebrow, heading, body) */
/* now an h2: same family/weight/spacing as every other section heading;
   only the size (the sec-head h2 clamp) and rhythm are set here */
.philosophy .statement {
  font-size: clamp(34px, 5.4vw, 68px);
  margin-top: 20px;
}
/* showroom heading: same size as its old inline clamp (desktop unchanged),
   now a class so the mobile rule can override it */
.showroom-head { font-size: clamp(32px, 4.6vw, 56px); }

.philosophy .body { margin-top: 32px; max-width: 640px; }
.philosophy .body p { font-size: 17px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
.philosophy .body p:last-child { margin-bottom: 0; }
.philosophy .body strong { color: var(--text); font-weight: 600; }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.features--three { grid-template-columns: repeat(3, 1fr); }

.environments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.env { background: var(--bg); padding: 30px 28px; transition: background var(--t-med) var(--ease); }
.env:hover { background: var(--surface); }
.env h3 { font-size: 17px; margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.25; }
.env p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.env p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.env p a:hover { color: var(--red); }
/* Accordion is a mobile-only affordance. These base rules strip the toggle
   button back to a plain block so desktop renders exactly like the old bare
   heading; the chevron is hidden and the panel is an inert wrapper. All
   collapse/expand styling lives in the max-width:760px block below, so above
   760px every item stays fully expanded. */
.env__toggle,
.feature__toggle {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: auto;
}
.env__chev,
.feature__chev { display: none; }
/* header group wrapping the number + heading; block so num/h3 stack exactly
   as the old direct children did on desktop, and a clean flex item on mobile */
.feature__head { display: block; }
.feature { background: var(--bg); padding: 38px 30px; transition: background var(--t-med) var(--ease); }
.feature:hover { background: var(--surface); }
.feature .num { font-family: var(--font-display); font-size: 13px; color: var(--red); letter-spacing: 0.1em; }
.feature h3 { font-size: 22px; margin: 26px 0 12px; }
.feature p { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* product cards */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.card__media {
  aspect-ratio: 4/3;
  position: relative;
  background:
    radial-gradient(80% 80% at 50% 35%, #26262d 0%, #131318 70%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__cat { z-index: 2; }
/* in-place gallery: swipeable snap track with subtle dots (only rendered
   when a product actually has more than one image) */
.media-track {
  width: 100%; height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.media-track::-webkit-scrollbar { display: none; }
.media-track img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.media-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; z-index: 2;
}
.media-dots button {
  width: 18px; height: 18px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.media-dots button::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(242,241,238,0.35);
  transition: background var(--t-fast) var(--ease);
}
.media-dots button.active::after { background: var(--text); }
.media-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,13,0.55); backdrop-filter: blur(4px);
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--text); cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.media-nav svg { width: 15px; height: 15px; }
.media-nav--prev { left: 10px; }
.media-nav--next { right: 10px; }
.card__media:hover .media-nav { opacity: 1; }
.media-nav:hover { border-color: var(--line-2); }
@media (hover: none) { .media-nav { display: none; } }  /* touch swipes instead */
.card__media .ph {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--muted-2); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.card__media .ph svg { width: 40px; height: 40px; opacity: 0.5; }
.card__cat {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text); background: rgba(11,11,13,0.7); backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: 2px; border: 1px solid var(--line);
}
.card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 23px; }
.card__body .desc { font-size: 14.5px; color: var(--muted); margin: 12px 0 18px; line-height: 1.6; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.card__price {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.card__price small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.14em;
  margin-top: 3px;
}
.add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  font-family: var(--font-body);
}
.add-btn:active { transform: translateY(1px); }
.add-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.add-btn svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.add-btn.added { background: var(--red-soft); border-color: var(--red); color: var(--red-hi); }
/* enquire-only items keep the toggle: the plus turns into a cross */
.add-btn.added svg { transform: rotate(45deg); }
/* priced items swap the button for an inline stepper once added */
.add-btn--swapped { display: none; }
.card-qty { margin-top: 0; animation: qty-in var(--t-med) var(--ease); }
@keyframes qty-in { from { opacity: 0; transform: translateY(4px); } }

/* feature product (large) on landing */
.feat-prod { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }

/* showroom */
/* showroom: full-width drone footage on top, text content directly below,
   sharing one continuous dark background so they read as a single section.
   The footage's lower edge fades into the section colour and the heading
   block rises slightly over it, binding the two together. */
.showroom { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 0; }
.showroom__film {
  position: relative;
  width: 100%;
  height: clamp(300px, 58vh, 640px);
  overflow: hidden;
  background: #000;
}
.showroom__film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showroom__film::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,0.4) 0%, rgba(16,16,19,0) 28%, rgba(16,16,19,0) 56%, #101013 100%);
  pointer-events: none;
}
.showroom__content {
  max-width: 640px;
  position: relative;
  /* the eyebrow + heading sit just over the footage's faded lower edge */
  margin-top: clamp(-64px, -7vh, -36px);
}
.addr { margin-top: 30px; display: grid; gap: 18px; }
.addr .row { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.addr .row svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 3px; }
.addr .row strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }
.addr .row a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.addr .row a:hover { color: var(--text); }
.addr-sub { display: block; font-size: 13px; color: var(--muted-2); margin-top: 4px; }

/* endorsements */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.quote { border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; background: var(--surface); position: relative; }
.quote p { font-family: var(--font-display); font-weight: 300; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; margin: 18px 0 24px; }
.quote .who { font-size: 13px; letter-spacing: 0.06em; }
.quote .who strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: 0; }
.quote .who span { color: var(--muted-2); }
/* pagination dots exist only for the mobile carousel; hidden on desktop so
   the layout is byte-for-byte unchanged */
.quotes-dots, .feat-dots { display: none; }

/* collaborators */
.partners { text-align: center; }
.partners .marquee {
  margin-top: 32px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partners .marquee__track {
  display: flex;
  width: max-content;
  animation: rpa-marquee 70s linear infinite;
  will-change: transform;
}
.partners .marquee:hover .marquee__track { animation-play-state: paused; }
.partners .marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(56px, 6vw, 96px);
  padding-right: clamp(56px, 6vw, 96px);
}
.partners img {
  width: auto;
  height: auto;
  max-height: 26px;
  max-width: 210px;
  opacity: 0.6;
  filter: brightness(1.15);
  flex-shrink: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.partners img.symbol        { max-height: 40px; max-width: 60px;  }
.partners img.symbol--wide  { max-width: 130px; }
.partners img:hover { opacity: 0.95; }

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

@media (prefers-reduced-motion: reduce) {
  .partners .marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .partners .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .partners .marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    gap: clamp(32px, 4vw, 56px);
  }
  .partners .marquee__group[aria-hidden="true"] { display: none; }
}

/* contact */
.contact { background: var(--bg-2); border-top: 1px solid var(--line); }
.contact .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.field input, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field textarea { resize: vertical; min-height: 130px; }
.contact-info { display: grid; gap: 26px; align-content: start; }
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info .item svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; margin-top: 3px; }
.contact-info .item strong { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-info .item a, .contact-info .item span { font-size: 17px; }
.contact-info .item a { transition: color var(--t-fast) var(--ease); }
.contact-info .item a:hover { color: var(--red); }
.contact-info .item .item-sub { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* footer */
/* extra bottom padding keeps the floating WhatsApp button clear of the
   footer base line when scrolled to the very end of the page */
.footer { padding: 56px var(--gut) 96px; border-top: 1px solid var(--line); }
.footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.footer .brand { --brand-h: 16px; }
.footer .links { display: flex; gap: 30px; flex-wrap: wrap; }
.footer .links a { font-size: 14px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer .links a:hover { color: var(--text); }
.footer .base { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted-2); }

/* =========================================================
   Shop page specifics
   ========================================================= */
.cat-hero { position: relative; padding-top: 160px; padding-bottom: clamp(56px, 8vh, 88px); overflow: hidden; }
.cat-hero h1 { font-size: clamp(46px, 8vw, 96px); font-weight: 700; letter-spacing: -0.035em; }
.cat-hero p { margin-top: 22px; max-width: 56ch; }
/* darkened background image behind the heading, landing-hero style, but the
   photo is held to the right half at a calmer scale so the chrome logo reads
   as a logo (focal point ~50%/30% of the frame), vertically centred opposite
   the text and clear of the nav. Its left edge melts into the dark header. */
.cat-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--bg-2); }
.cat-hero__media img {
  --hero-img-o: 0.78;
  position: absolute; top: 0; right: 0;
  width: min(46vw, 700px); height: 100%;
  object-fit: cover;
  object-position: 50% 8%;   /* brings the logo to the vertical centre of the band */
  opacity: var(--hero-img-o);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.cat-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,13,0.85) 0%, rgba(11,11,13,0.3) 55%, rgba(11,11,13,0.08) 100%),
    linear-gradient(180deg, rgba(11,11,13,0.45) 0%, rgba(11,11,13,0) 30%, rgba(11,11,13,0) 55%, rgba(11,11,13,0.97) 100%);
}

/* DESKTOP shop hero: match the home hero — full-screen, content bottom-aligned
   and lifted, with home's eyebrow->heading->paragraph->button rhythm, so the
   intro sits low/breathes and the Q-series caveat begins below the first
   screen. Scoped to desktop (min-width) AND shop-only (:has(.cat-hero__media)),
   so the gallery header (no media) and the mobile shop hero (max-width:760px,
   its own rules) are both untouched. */
@media (min-width: 761px) {
  .cat-hero:has(.cat-hero__media) {
    min-height: 100svh;
    display: flex; align-items: flex-end;
    padding-bottom: 0;                /* lift comes from .wrap, like home */
  }
  .cat-hero:has(.cat-hero__media) .wrap { padding-bottom: clamp(48px, 9vh, 110px); }
  .cat-hero:has(.cat-hero__media) h1 { margin-top: 18px; }
  .cat-hero:has(.cat-hero__media) .cat-hero__cta { margin-top: 36px; }
}

.shop-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 36px; align-items: stretch; }
/* push the price/actions to the card base so rows bottom-align */
.card__body .card__foot { margin-top: auto; }
/* while a card is expanded, its row neighbours keep their natural height
   instead of stretching empty (class set in main.js per row) */
.shop-grid .card--natural { align-self: start; }
.card__body .desc { margin-bottom: 18px; }

/* shop-wide passive range note */
/* shop intro button pair: brochure (primary) + enquire (secondary) sit
   side by side under the intro, stacking full-width on small screens like
   the hero buttons. Each keeps its own .btn / .btn--red styling. */
.cat-hero__cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* bottom CTA: two primary enquiry paths, two quiet links beneath */
.shop-cta { margin-top: 70px; text-align: center; border-top: 1px solid var(--line); padding-top: 60px; }
.shop-cta .lead { max-width: 52ch; margin: 18px auto 30px; }
.shop-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.shop-cta__links { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.shop-cta__links a {
  font-size: 14px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}
.shop-cta__links a:hover { color: var(--text); }

.shop-note {
  max-width: 64ch;
  margin: 28px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--line-2);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* collapsed / expanded card states */
.card__body { display: flex; flex-direction: column; }
.card__body .desc { margin-bottom: 14px; }
.card__more { display: none; }
.card--open .card__more { display: block; margin-bottom: 18px; }
.card__more .specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 6px;
  margin: 0 0 14px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
}
.card__more .specs dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  align-self: center;
}
.card__more .specs dd {
  color: var(--text);
  margin: 0;
  font-weight: 500;
  align-self: center;
}
.card__passive {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 10px 0 0;
  margin: 0 0 18px;
  border-top: 1px dashed var(--line);
}


.card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 0 4px;
  margin-top: 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.card__toggle:hover { color: var(--text); }
.card__toggle svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease); }
.card--open .card__toggle svg { transform: rotate(180deg); }

/* F1 Portal enquiry-only variant */
.card__note {
  font-size: 13px;
  color: var(--muted-2);
  margin: 0 0 16px;
  line-height: 1.55;
  font-style: italic;
}
.card__foot--enquire { justify-content: flex-end; }
.add-btn--enquire svg { width: 13px; height: 13px; }

/* enquiry drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  padding-top: env(safe-area-inset-top);
  border-radius: var(--radius) 0 0 var(--radius);
  width: min(440px, 100%);
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer__head { padding: 26px 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer__head h3 { font-size: 22px; }
.drawer__head .close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; transition: color var(--t-fast) var(--ease); }
.drawer__head .close svg { width: 24px; height: 24px; }
.drawer__head .close:hover { color: var(--text); }
/* Everything below the head + tabs scrolls as one column; the head and
   tabs stay fixed. min-height:0 lets the scroll area shrink instead of
   pushing the form off-screen on short viewports. */
.drawer__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.drawer__scroll .drawer__foot { margin-top: auto; }
.drawer__body { padding: 12px 28px; }
.drawer__empty { text-align: center; color: var(--muted-2); padding: 60px 20px; font-size: 15px; }
.drawer__empty svg { display: block; width: 44px; height: 44px; opacity: 0.4; margin: 0 auto 16px; }
/* empty enquiry list: grow #drawerBody and centre the empty-state vertically in
   the space above the foot, so it looks deliberate instead of floating up top.
   Scoped with :has so it ONLY applies when empty — with line items present,
   #drawerBody stays a normal block (items start at the top and scroll). */
#drawerBody:has(.drawer__empty) { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.line-item { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.line-item .li-info { flex: 1; }
.line-item .li-info h4 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.line-item .li-info .li-cat { font-size: 12px; color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
.line-item .li-price { font-size: 13px; color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.line-item .li-price .from { color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; margin-right: 6px; }
.line-item .li-price .unit { color: var(--muted-2); font-size: 12px; margin-left: 4px; }
.line-item .li-price.poa { color: var(--muted-2); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 6px; font-size: 14px; }
.drawer__total .label { color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.drawer__total .value { font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.drawer__total .hint { display: block; font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em; margin-top: 4px; text-transform: none; font-weight: 400; }
.qty { display: flex; align-items: center; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 3px; width: fit-content; }
.qty button { width: 30px; height: 30px; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 16px; transition: background var(--t-fast) var(--ease); }
.qty button:active { background: var(--surface-2); }
.qty button:hover { background: var(--surface-2); }
.qty span { width: 36px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.li-remove { background: none; border: 0; color: var(--muted-2); cursor: pointer; padding: 4px; transition: color var(--t-fast) var(--ease); }
.li-remove:hover { color: var(--red); }
.li-remove svg { width: 16px; height: 16px; }
.drawer__foot { padding: 24px 28px; border-top: 1px solid var(--line); }
.drawer__foot .note { font-size: 13px; color: var(--muted-2); line-height: 1.5; margin-bottom: 12px; }
.drawer__foot .note--amp { font-size: 12px; padding: 10px 12px; border-left: 2px solid var(--line-2); color: var(--muted); margin-bottom: 18px; }
.line-item .qty--single { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 6px 0 0; }

/* in-drawer enquiry form */
.drawer__form { margin: 0 0 14px; }
.drawer__supply {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 0.02em; margin: 0 0 14px;
  padding: 10px 12px; background: var(--bg-2);
  border-left: 2px solid var(--red); border-radius: var(--radius);
}
.drawer__form .field { margin-bottom: 12px; }
.drawer__form .field label {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.drawer__form .field input,
.drawer__form .field textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-body); font-size: 14px;
  border-radius: var(--radius);
}
.drawer__form .field textarea { resize: vertical; min-height: 92px; }
.drawer__form .field input:focus,
.drawer__form .field textarea:focus { outline: none; border-color: var(--line-2); }
.drawer__form .checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; cursor: pointer;
}
.drawer__form .checkbox input { margin-top: 3px; cursor: pointer; }
.drawer__form .checkbox span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.drawer__form button[disabled] { opacity: 0.4; cursor: not-allowed; }
.drawer__foot .btn { width: 100%; justify-content: center; }
.drawer__foot .btn + .btn { margin-top: 10px; }

/* drawer modes: product (basket) vs project (full install) */
.drawer__tabs { display: flex; gap: 8px; padding: 14px 28px 0; }
.drawer__tab {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; background: transparent;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.drawer__tab:hover { color: var(--text); border-color: var(--line-2); }
.drawer__tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.drawer__project .drawer__intro { font-size: 14.5px; color: var(--muted); line-height: 1.65; padding-top: 12px; }
.drawer__items-note { margin-top: 14px; font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.drawer__items-note:empty { display: none; }
/* product mode hides project-only elements; project mode hides basket-only ones */
.drawer:not(.drawer--project) .drawer__project,
.drawer:not(.drawer--project) .note--project,
.drawer:not(.drawer--project) .field--msg { display: none; }
.drawer--project #drawerBody,
.drawer--project .note--product,
.drawer--project .note--amp,
.drawer--project .drawer__total { display: none; }

/* =========================================================
   Gallery page
   ========================================================= */
.gallery-grid { columns: 3; column-gap: 14px; }
.gallery-item {
  display: block; margin-bottom: 14px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}
.gallery-item { position: relative; }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease), opacity var(--t-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.02); }
/* hover veil + centred expand icon (desktop affordance) */
.gallery-item__veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,13,0.35);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.gallery-item__veil svg {
  width: 30px; height: 30px; color: var(--text);
  transform: translateY(6px);
  transition: transform var(--t-med) var(--ease);
}
.gallery-item:hover .gallery-item__veil { opacity: 1; }
.gallery-item:hover .gallery-item__veil svg { transform: none; }
/* persistent corner badge (touch affordance; hidden where hover exists) */
.gallery-item__badge {
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px;
  display: none; align-items: center; justify-content: center;
  background: rgba(11,11,13,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--text);
  pointer-events: none;
}
.gallery-item__badge svg { width: 15px; height: 15px; }
@media (hover: none) {
  .gallery-item__veil { display: none; }
  .gallery-item__badge { display: flex; }
}
@media (max-width: 1024px) { .gallery-grid { columns: 2; } }
@media (max-width: 600px)  { .gallery-grid { columns: 1; } }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8,8,10,0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.lightbox.open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
}
.lightbox__img {
  max-width: min(92vw, 1400px); max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  touch-action: pan-y;
}
.lightbox button {
  position: absolute; z-index: 2;
  background: none; border: 0; color: var(--muted);
  cursor: pointer; padding: 14px;
  transition: color var(--t-fast) var(--ease);
}
.lightbox button:hover { color: var(--text); }
.lightbox__close { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }
.lightbox__close svg { width: 26px; height: 26px; }
.lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__nav svg { width: 34px; height: 34px; }
@media (max-width: 760px) {
  .lightbox__img { max-width: 100vw; max-height: 86vh; border-radius: 0; }
  .lightbox__nav svg { width: 28px; height: 28px; }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* DESKTOP: reveal whole content sections as blocks (reuses the reveal-once
   pattern; the class is added by JS, so without JS sections stay visible).
   The inner per-block reveals are shown immediately on desktop so the section
   eases in as ONE clean block, not child-by-child. Desktop-only, so mobile is
   completely untouched (it keeps its existing per-block reveals + shop cards). */
@media (min-width: 761px) {
  .section-reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .section-reveal.in { opacity: 1; transform: none; }
  /* shown immediately on desktop so the section reveals as one block; transform
     is NOT !important so element :hover rules (.card:hover/.quote:hover, higher
     specificity + later in source) win and their hover lift/zoom renders. */
  .reveal, .environments.reveal .env { opacity: 1 !important; transform: none; }
}

/* DESKTOP: per-card / per-tile first-load reveal. Reuses the .reveal-card
   mechanism (class added by JS, IntersectionObserver with a pre-fire rootMargin,
   add 'in' then unobserve, no-JS safe). Subtle fade + 16px rise, reveal-once.
   Generic .reveal-card keeps specificity LOW (0,1,0 hide / 0,2,0 .in) and this
   block sits BEFORE the hover block with NO !important, so once revealed
   (.in -> transform:none) the equal-specificity .card:hover (later in source)
   wins and the hover lift/zoom still renders. The gallery tile's hover is on
   its inner <img>, a different element, so its reveal transform never clashes.
   Desktop-only, so the mobile shop-card reveal (.shop-grid .card.reveal-card,
   max-width:760) is untouched and gallery tiles stay plain on mobile. */
@media (min-width: 761px) {
  .reveal-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  }
  .reveal-card.in { opacity: 1; transform: none; }
}

/* DESKTOP hover-zoom: hovering an interactive element nudges it slightly
   larger (--hover-zoom). Gated to a hovering pointer + desktop width so touch
   and mobile never get it. Scale value is tunable from the :root token. On
   desktop these cards are grid items (the carousels are mobile-only), so the
   scale can't affect scroll-snap or the peek. */
@media (min-width: 761px) and (hover: hover) {
  /* ensure a transform transition exists for elements that lack one
     (buttons + cards already transition transform) */
  .cart-btn { transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .quote { transition: transform var(--t-fast) var(--ease); }
  .btn:hover, .cart-btn:hover, .add-btn:hover, .quote:hover { transform: scale(var(--hover-zoom)); }
  .card:hover { transform: translateY(-4px) scale(var(--hover-zoom)); }  /* keeps the existing lift */

  /* environments + how-we-work: the cell stays fixed (it lives in a bordered,
     overflow:hidden divided grid), and its TEXT grows subtly WITHIN the cell on
     hover — same principle as the gallery tile's inner-zoom. transform-origin:
     left center keeps the left-aligned text growing in place. The existing
     background-lighten hover stays; this is added on top. Contained by the cell
     padding + the container's overflow:hidden, so nothing clips the border or
     crosses the 1px dividers. */
  .env h3, .env__panel p,
  .feature__head, .feature__panel p {
    transition: transform var(--t-med) var(--ease);
    transform-origin: left center;
  }
  .env:hover h3, .env:hover .env__panel p,
  .feature:hover .feature__head, .feature:hover .feature__panel p {
    transform: scale(1.04);
  }
}

/* gentle cascade inside the environments grid (one reveal container) */
.environments.reveal .env {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), background var(--t-med) var(--ease);
}
.environments.reveal.in .env { opacity: 1; transform: none; }
.environments.reveal.in .env:nth-child(2) { transition-delay: 0.06s, 0.06s, 0s; }
.environments.reveal.in .env:nth-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
.environments.reveal.in .env:nth-child(4) { transition-delay: 0.18s, 0.18s, 0s; }
.environments.reveal.in .env:nth-child(5) { transition-delay: 0.24s, 0.24s, 0s; }
.environments.reveal.in .env:nth-child(6) { transition-delay: 0.3s, 0.3s, 0s; }

/* images marked by main.js fade in as they finish loading; the opacity
   transition lives on the context rules (.card__media img, .gallery-item img)
   so it never clobbers their other transitions */
img.will-fade { opacity: 0; }
img.will-fade.loaded { opacity: 1; }
.card__media img { transition: opacity 0.6s var(--ease); }

/* soft one-off pulse on the enquiry count when an item is added */
@keyframes count-bump { 50% { transform: scale(1.18); } }
.cart-count.bump { animation: count-bump 0.3s var(--ease); }

/* floating WhatsApp button: above content (nav 100), below the drawer
   overlay (200) and drawer (201), so the drawer always covers it */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom));
  z-index: 150;
  width: 46px; height: 46px;            /* matches the floating burger's ~46px */
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);          /* rounded square, same as the burger */
  background: rgba(11,11,13,0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
  /* quiet one-off entrance after the page settles ("backwards" releases the
     animated values afterwards so the hover transitions still work) */
  animation: wa-in var(--t-slow) var(--ease) 0.6s backwards;
}
@keyframes wa-in { from { opacity: 0; transform: translateY(10px); } }
.wa-float:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.wa-float:active { transform: translateY(0); }
.wa-float svg { width: 23px; height: 23px; }

/* toast */
.toast {
  position: fixed; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%) translateY(24px);
  background: var(--text); color: var(--bg); padding: 14px 24px; border-radius: 4px;
  font-size: 14px; font-weight: 600; z-index: 300;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.6); display: flex; align-items: center; gap: 10px;
}
.toast.show {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0s;
}
.toast svg { width: 18px; height: 18px; color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .features--three { grid-template-columns: repeat(3, 1fr); }
  .prod-grid, .feat-prod, .shop-grid, .quotes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* showroom anchor lands via scrollIntoView(block:end) on the CTA button
     (main.js): the button's BOTTOM sits near the viewport bottom and the
     section fills upward. This margin is the gap below the button: a small
     inset + the home-bar safe-area, so the button is fully visible and clear
     of the home indicator. Nudge the 16px to taste. Desktop is flush-to-top
     (min-width:761 block). */
  #showroom .btn--red { scroll-margin-bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* collaborator logos scroll faster on mobile (desktop stays 70s). Only the
     duration is overridden, so the linear seamless -50% loop is unchanged.
     Reduced-motion still wins (it sets animation-name:none). Nudge to taste. */
  .partners .marquee__track { animation-duration: 35s; }
  /* scrolled header fully opaque on mobile (no content shows through). The
     status-bar strip above it stays solid #0b0b0d via the theme-color meta,
     so no viewport-fit=cover / env() is needed. At-top transparent state
     (.nav without .scrolled) is unchanged. Desktop keeps its frosted 0.82. */
  .nav.scrolled { background: var(--bg); }

  /* FLOATING-BURGER MODE (mobile): once scrolled down the page (.scrolled) with
     the menu closed, the show-on-scroll-up state no longer brings back the full
     bar — only the burger shows, as a small floating button top-right. Reuses
     the EXISTING scroll handler's classes: .nav--hidden still hides everything
     on scroll-down (it translates the whole nav up, burger included); removing
     it on scroll-up reveals just this burger. The burger is the EXISTING
     .nav-toggle (same menu toggle + close-on-tap handlers — no new element).
     At the top (.nav without .scrolled) the full header is unchanged; opening
     the menu (.mobile-open) restores the full header + dropdown as before. */
  .nav.scrolled:not(.mobile-open) {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none;            /* transparent bar must not block content */
    padding-top: 16px;
    padding-right: 16px;             /* burger ~16px from the right edge */
  }
  .nav.scrolled:not(.mobile-open) .brand { opacity: 0; pointer-events: none; }   /* hide logo */
  .nav.scrolled:not(.mobile-open) .nav-toggle {
    pointer-events: auto;            /* only the burger stays tappable */
    margin-right: 0;
    border-radius: var(--radius);    /* 10px rounded square, site language */
    background: rgba(11,11,13,0.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
            backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  /* smooth, quick fade for the full-header <-> floating-burger swap */
  .brand { transition: opacity var(--t-med) var(--ease); }
  .nav-toggle { transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), margin var(--t-med) var(--ease); }

  /* hero eyebrow held to a single line at narrow widths */
  .hero .eyebrow { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; padding: 10px; margin-right: -10px; }
  .nav.mobile-open .nav-links {
    display: flex; flex-direction: column; gap: 14px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(11,11,13,0.97); backdrop-filter: blur(14px);
    padding: 22px var(--gut) 30px; border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
  .nav.mobile-open .nav-links a.link { padding: 10px 0; }
  .nav.mobile-open .nav-links .nav-actions { flex-direction: column; align-items: stretch; }
  /* match the dropdown enquiry button to the brochure (.btn) metrics so the
     two stack as an identical pair: same padding/height, gap, font-size and
     icon size (alignment is already the same flex-start on both) */
  .nav.mobile-open .nav-links .cart-btn { padding: 14px 26px; gap: 10px; font-size: 14px; }
  .nav.mobile-open .nav-links .cart-btn svg { width: 16px; height: 16px; }
  /* centre icon+label within the stacked dropdown buttons (brochure + enquiry) */
  .nav.mobile-open .nav-links .btn,
  .nav.mobile-open .nav-links .cart-btn { justify-content: center; }
  .contact .grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .features--three { grid-template-columns: 1fr; }
  .environments { grid-template-columns: 1fr; }
  /* tap-to-expand accordion (mobile only): Environments + How we work share
     one mechanism */
  .env__toggle,
  .feature__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    cursor: pointer;
  }
  .env__toggle h3,
  .feature__toggle h3 { margin-bottom: 0; }
  .env__chev,
  .feature__chev {
    display: block; width: 18px; height: 18px; flex-shrink: 0;
    color: var(--muted); transition: transform var(--t-med) var(--ease);
  }
  .env.is-open .env__chev,
  .feature.is-open .feature__chev { transform: rotate(180deg); }
  .env__panel,
  .feature__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-med) var(--ease);
  }
  .env__panel > p,
  .feature__panel > p { overflow: hidden; min-height: 0; padding-top: 14px; }
  .env.is-open .env__panel,
  .feature.is-open .feature__panel { grid-template-rows: 1fr; }
  .prod-grid, .shop-grid { grid-template-columns: 1fr; }
  /* shop product cards (mobile pilot) ------------------------------------- */
  /* scroll-reveal: reuses the site's reveal vocabulary (same translate +
     opacity + --t-slow). The .reveal-card class is added by JS, so without
     JS the cards are simply visible (no-JS safe). Scoped to .shop-grid +
     mobile so desktop and other sections are untouched. */
  .shop-grid .card.reveal-card {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  }
  .shop-grid .card.reveal-card.in { opacity: 1; transform: none; }
  /* more generous spacing + a larger image so each card reads as a stop */
  .shop-grid { gap: 40px; }
  .shop-grid .card__media { aspect-ratio: 5 / 4; }
  .shop-grid .card__body { padding: 28px 24px 30px; }
  .hero { align-items: flex-end; }
  /* hold these three headings to one line at 390px (sizes chosen with headroom
     under each heading's measured single-line width; desktop sizes untouched) */
  .philosophy .statement { font-size: 28px; white-space: nowrap; }
  .sec-head h2.feat-head { font-size: 30px; white-space: nowrap; }
  .showroom-head { font-size: 25px; white-space: nowrap; }
  .scrollcue { display: none; }
  .hero__minor { padding: 10px 0; }

  /* horizontal swipe carousel (mobile only): testimonials + featured products
     share one mechanism and identical dot styling */
  .quotes,
  .feat-prod {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quotes::-webkit-scrollbar,
  .feat-prod::-webkit-scrollbar { display: none; }
  .quotes .quote,
  .feat-prod .card {
    flex: 0 0 calc(100% - 30px);   /* ~16px peek of the next card + 14px gap */
    scroll-snap-align: start;
    opacity: 1; transform: none;   /* peek card must stay visible (neutralise reveal) */
  }
  .quotes-dots,
  .feat-dots {
    display: flex; justify-content: center; gap: 8px; margin-top: 22px;
  }
  .quotes-dots button,
  .feat-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(242,241,238,0.3);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .quotes-dots button.active,
  .feat-dots button.active { background: var(--text); transform: scale(1.15); }
  /* shop intro matches the home hero exactly: full first screen, content
     bottom-aligned via align-items:flex-end and lifted by the same .wrap
     padding-bottom, with home's eyebrow->heading->paragraph->button rhythm.
     The caveat begins just below the fold. */
  /* full-screen hero treatment only for the shop header (which has a bg
     image); the gallery header has no media, so it keeps the plain compact
     header and its eyebrow/heading stack normally. */
  .cat-hero:has(.cat-hero__media) {
    padding-top: 120px;
    min-height: 100svh;
    display: flex; align-items: flex-end;
  }
  .cat-hero:has(.cat-hero__media) .wrap { padding-bottom: clamp(48px, 9vh, 110px); }
  /* home's eyebrow->heading->paragraph->button rhythm */
  .cat-hero h1 { margin-top: 18px; }
  .cat-hero__cta { margin-top: 36px; }
  .shop-note { margin-top: 16px; }
  .cat-hero__media img { width: 78vw; --hero-img-o: 0.5; }
  /* centre the whole footer as a stacked group: logo, both nav rows,
     copyright and Bali line */
  .footer .top { flex-direction: column; align-items: center; text-align: center; }
  .footer .base { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  /* footer nav as two rows of three with CSS dot separators (no dots in the
     markup). The 3-col grid fixes exactly 3 per row, so there's never a
     trailing dot or a wrap orphan. */
  .footer .links {
    display: grid; grid-template-columns: repeat(3, max-content);
    justify-content: center; column-gap: 0; row-gap: 4px;
  }
  .footer .links a { padding: 8px 9px; }
  /* dot after every item except the 3rd in each row (right column) */
  .footer .links a:nth-child(3n+1)::after,
  .footer .links a:nth-child(3n+2)::after {
    content: "·"; margin-left: 18px; color: var(--muted-2);
  }

  /* drawer ergonomics on small screens */
  .drawer { height: 100dvh; }            /* tracks the dynamic mobile viewport; falls back to top/bottom anchoring */
  .drawer__head { padding: 18px 22px; }
  .drawer__head .close { padding: 10px; margin: -6px; }
  .drawer__tabs { padding: 12px 22px 0; }
  .drawer__tab { padding: 11px 18px; }
  .drawer__body { padding: 12px 22px; }
  .drawer__foot { padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); }
  .qty button { width: 38px; height: 38px; }
  .qty span { width: 40px; }
  .li-remove { padding: 10px; margin: -6px; }
  .drawer__form .field input,
  .drawer__form .field textarea { font-size: 16px; }  /* 16px stops iOS zooming the page on focus */
  .drawer__form .checkbox input { width: 18px; height: 18px; flex-shrink: 0; }
}
@media (max-width: 440px) {
  .features { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .cat-hero__cta .btn { width: 100%; justify-content: center; }
  .shop-cta__actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Reduced motion: collapse all animation to instant
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  .reveal, .environments.reveal .env,
  .shop-grid .card.reveal-card, .reveal-card,
  .section-reveal { opacity: 1 !important; transform: none !important; }
  :root { --hover-zoom: 1; }   /* no hover scale under reduced motion */
  .hero__media img, .hero__media video,
  .cat-hero__media img { animation: none !important; opacity: var(--hero-img-o, 0.6) !important; }
  img.will-fade { opacity: 1 !important; }
  .scrollcue .ln, .eq span { animation: none !important; }
}