/* ============================================================
   CLOUD PAINTS — Design System
   Brand: Corporate Blue · Wine Red · Mustard Gold
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand palette */
  --blue:      #1e3a8a;
  --blue-2:    #2547b8;
  --blue-deep: #0f1f5c;
  --red:       #8b1e2c;
  --red-2:     #b8243a;
  --red-glow:  #d92843;
  --gold:      #e8a317;
  --gold-2:    #ffc93d;
  --gold-soft: #fde68a;

  --ink:        #0a0e27;
  --ink-2:      #131838;
  --ink-3:      #1f2547;
  --line:       rgba(255,255,255,0.08);

  /* Light theme — warm cream, clearly paint-industry */
  --bg:         #faf6ec;
  --bg-2:       #fff9f0;
  --bg-soft:    #f2e8d2;
  --surface:    #fff9f0;
  --surface-2:  #faf6ec;
  --surface-3:  #f2e8d2;
  --text:       #0a0e27;
  --text-2:     #424560;
  --text-3:     #787a9a;
  --border:     rgba(10,14,39,0.11);
  --border-2:   rgba(10,14,39,0.06);
  --shadow-1:   0 2px 10px rgba(10,14,39,0.06);
  --shadow-2:   0 14px 40px -16px rgba(10,14,39,0.18);
  --shadow-3:   0 30px 80px -30px rgba(10,14,39,0.30);

  /* Type scale */
  --serif: 'Fraunces','Lora',Georgia,serif;
  --sans:  'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:  'JetBrains Mono','SF Mono',Consolas,monospace;

  /* Spacing */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-py: clamp(72px, 10vw, 140px);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --t-fast: .25s cubic-bezier(.4,0,.2,1);
  --t-mid:  .45s cubic-bezier(.4,0,.2,1);
  --t-slow: .8s cubic-bezier(.16,1,.3,1);
  --t-ease-pour: cubic-bezier(.6,.05,.3,1);

  /* Paint palette — used by landing hero, colour-mix widget, decorative fields */
  --paint-red:    #d92843;
  --paint-gold:   #b8934a;
  --paint-cobalt: #1e3a8a;
  --paint-forest: #166534;
  --paint-clay:   #6e3122;
  --paint-lime:   #84cc16;
  --paint-dusk:   #5a4374;
  --paint-sand:   #d6b884;

  /* Mobile-first breakpoint tokens */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Grain texture reference — used by .texture-grain utility in motion.css */
  --grain: url("../images/textures/grain.svg");
}

[data-theme="dark"] {
  /* True deep dark — near-black with warm-violet undertone */
  --bg:         #070610;
  --bg-2:       #0d0c1e;
  --bg-soft:    #141228;
  --surface:    #111026;   /* noticeably lighter than bg for cards/panels */
  --surface-2:  #181630;
  --surface-3:  #201d3e;
  --text:       #f5f1e8;
  --text-2:     #c8c4de;
  --text-3:     #7c7a9e;
  --border:     rgba(255,255,255,0.13);
  --border-2:   rgba(255,255,255,0.07);
  --shadow-1:   0 2px 14px rgba(0,0,0,0.60);
  --shadow-2:   0 14px 40px -12px rgba(0,0,0,0.80);
  --shadow-3:   0 30px 80px -20px rgba(0,0,0,0.95);
  --line:       rgba(255,255,255,0.07);
  /* Brighter red/gold in dark so accent still pops */
  --red-glow:   #f03050;
  --gold-2:     #ffd252;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t-mid), color var(--t-mid);
}
img,svg,video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input,textarea,select { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* Skip-to-content (a11y) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  background: var(--ink, #0a0a0d);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  transition: top .18s ease;
}
.skip-to-content:focus { top: 12px; outline: 2px solid var(--gold, #b8934a); outline-offset: 2px; }

/* Visible focus ring for keyboard users */
*:focus-visible {
  outline: 2px solid var(--red-2, #d92843);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-py); position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--red-2);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px; background: currentColor;
  border-radius: 2px;
}
[data-theme="dark"] .eyebrow { color: var(--gold-2); }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.05; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.2; }

h1 em, h2 em, h3 em {
  font-style: italic; font-weight: 400; color: var(--red-2);
}
[data-theme="dark"] h1 em, [data-theme="dark"] h2 em, [data-theme="dark"] h3 em { color: var(--gold-2); }

/* ---------- 3b. Section heads — name leads, line supports ----------
   Every section on the site is written as `.eyebrow` (the section's name,
   e.g. "Why Cloud Paints") followed immediately by an h2/h3 carrying a
   descriptive line ("Painted with intent."). The section name is the title
   a reader scans for, so it takes the display size and the descriptive line
   drops to a subheading beneath it.

   Page heroes are deliberately excluded: there the h1 *is* the page title
   and already outranks its eyebrow, which is the same hierarchy. Only the
   h2/h3 pattern inverts.

   The selectors are doubled (.eyebrow.eyebrow) purely for specificity:
   main.css loads before the per-page sheets, which hold same-specificity
   rules like `.lp-featured-head h2`, and those would otherwise win on
   source order. */
.eyebrow.eyebrow:has(+ h2),
.eyebrow.eyebrow:has(+ h3) {
  display: block;
  font-family: var(--serif);
  /* Floor kept modest: these names run long ("Where Cloud Paints turns up")
     and a bigger minimum pushes them into the gutter on a 390px screen. */
  font-size: clamp(1.75rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 12px;
  /* Several sections dress the eyebrow as a small pill. That reads as a
     kicker ornament and falls apart at display size, so strip it. */
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  gap: 0;
}
/* The accent dash reads as a kicker ornament; at display size it just
   collides with the cap-height. */
.eyebrow.eyebrow:has(+ h2)::before,
.eyebrow.eyebrow:has(+ h3)::before { content: none; }

.eyebrow.eyebrow + h2,
.eyebrow.eyebrow + h3 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-2);
  max-width: 62ch;
}
.eyebrow.eyebrow + h2 { font-size: clamp(1.05rem, 1.75vw, 1.4rem); }
.eyebrow.eyebrow + h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); }
/* Keep the brand accent alive on the demoted line — it is the only colour
   left in the pairing now that the name above it sits in --text. */
.eyebrow.eyebrow + h2 em,
.eyebrow.eyebrow + h3 em { font-weight: 500; }
/* Centred section heads must keep their subheading centred too. */
.section-head .eyebrow.eyebrow + h2,
.section-head .eyebrow.eyebrow + h3 { margin-inline: auto; }

p { color: var(--text-2); }
.lead { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--red-2), var(--red-glow));
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(217, 40, 67, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(217, 40, 67, 0.65); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(232, 163, 23, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(232, 163, 23, 0.65); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text); }
.btn-dark {
  background: var(--ink); color: #fff;
}
.btn-dark:hover { transform: translateY(-2px); }

.btn .arr { transition: transform var(--t-fast); }
.btn:hover .arr { transform: translateX(4px); }

/* Site-wide base for the hero-style CTA pair. These classes are used
   on ten pages but were only styled under page-scoped parents
   (.lp-hero-ctas, .in-cta …), so pages like textures/colours/services
   rendered them as bare text links. Scoped rules still override. */
.btn-pour {
  background: linear-gradient(135deg, var(--red-glow), var(--red-2));
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(217,40,67,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-pour:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -12px rgba(217,40,67,0.7); }
.btn-ghost-d {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  backdrop-filter: blur(8px);
}
.btn-ghost-d:hover {
  border-color: var(--gold-2);
  background: rgba(232,163,23,0.08);
  color: var(--gold-2);
}

/* ---------- 5. Header — Phase 3 nav system ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  background: transparent;
  transition: background var(--t-mid), padding var(--t-mid), backdrop-filter var(--t-mid), border-color var(--t-mid);
}
.site-header.scrolled {
  background: rgba(250, 247, 240, 0.90);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,14,39,0.08);
  box-shadow: 0 2px 24px rgba(10,14,39,0.07);
}
[data-theme="dark"] .site-header.scrolled {
  background: rgba(8, 7, 16, 0.88);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.site-header.scrolled::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grain) repeat;
  background-size: 240px 240px;
  opacity: 0.04; mix-blend-mode: overlay;
  pointer-events: none;
}

.cp-nav-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}
/* Floating back-to-top — appears after ~1400px of scroll */
.cp-to-top {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red-glow), var(--red-2));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(217,40,67,0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--t-mid), transform var(--t-mid), box-shadow var(--t-fast);
}
.cp-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cp-to-top:hover { box-shadow: 0 18px 36px -10px rgba(217,40,67,0.7); transform: translateY(-2px) scale(1.02); }
/* Clear the mobile sticky add-to-quote bar on product pages */
@media (max-width: 900px) {
  body[data-page="product"] .cp-to-top { bottom: 92px; }
}

/* Slim vertical divider separating the wordmark from the nav links */
.cp-nav-inner::before {
  content: none;
}
.cp-nav-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, var(--border), transparent);
  margin: 0 6px;
  display: none;
}
@media (min-width: 1024px) {
  .cp-nav-divider { display: block; }
}
@media (min-width: 1024px) {
  .cp-nav-inner { min-height: 72px; }
}

/* Logo — SVG cloud mark + text wordmark in brand colours */
.cp-logo {
  --cp-logo-blue: #1D1E51;
  --cp-logo-red: #e11f29;
  display: flex; flex-direction: row; align-items: center;
  gap: 11px; line-height: 1;
  text-decoration: none;
  transition: transform var(--t-mid);
}
.site-header.scrolled .cp-logo { transform: scale(0.95); }
.cp-logo-mark {
  height: 50px; width: auto;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 3px 7px rgba(225,31,41,0.30));
}
.cp-logo-text { display: flex; flex-direction: column; gap: 4px; }
.cp-logo-name {
  display: flex; align-items: baseline; gap: 0.16em;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.cp-logo-name .c-blue { color: var(--cp-logo-blue); }
.cp-logo-name .c-red  { color: var(--cp-logo-red); font-style: italic; }
.cp-logo-tag {
  display: flex; align-items: center; gap: 0.36em;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800; font-style: italic;
  letter-spacing: 0.08em;
  opacity: 1;
}
.cp-logo-tag .c-blue { color: var(--cp-logo-blue); }
.cp-logo-tag .c-red  { color: var(--cp-logo-red); }
.cp-logo-tag .dot { color: var(--cp-logo-red); font-weight: 800; }
/* Dark mode: brighten the navy in the slogan so 'Buy it · Love it'
   reads cleanly against the dark navbar. The wordmark above stays on
   the true logo navy; only the smaller tagline lifts. */
[data-theme="dark"] .cp-logo-tag .c-blue {
  color: #b9c3ee;
  text-shadow: 0 0 10px rgba(185,195,238,0.35);
}
[data-theme="dark"] .cp-logo-tag .c-red {
  text-shadow: 0 0 8px rgba(225,31,41,0.3);
}
/* Keep CLOUD on the true logo navy (#1D1E51) in dark mode too —
   matches the hero stage and loader. Add a soft cream glow so it
   reads cleanly against the dark header. */
[data-theme="dark"] .cp-logo-name .c-blue {
  text-shadow:
    0 0 12px rgba(255,255,255,0.55),
    0 0 26px rgba(255,255,255,0.28);
}
/* (slogan dark-mode treatment now defined alongside .cp-logo-tag above) */

/* ---------- Theme toggle button (sun / moon) ---------- */
.cp-theme-toggle { position: relative; }
.cp-theme-icon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.5,1.5,.5,1);
}
.cp-theme-icon svg { width: 18px; height: 18px; }
[data-theme="dark"]  .cp-theme-icon--sun  { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"]  .cp-theme-icon--moon { opacity: 0; transform: rotate(45deg) scale(0.6); }
[data-theme="light"] .cp-theme-icon--sun  { opacity: 0; transform: rotate(-45deg) scale(0.6); }
[data-theme="light"] .cp-theme-icon--moon { opacity: 1; transform: rotate(0) scale(1); }
@media (min-width: 768px) {
  .cp-logo-mark { height: 56px; width: auto; }
  .cp-logo-name { font-size: 34px; }
  .cp-logo-tag { font-size: 11.5px; letter-spacing: 0.08em; }
}
@media (max-width: 420px) {
  /* The wordmark was colliding with the theme/cart/menu buttons at
     375px — keep the whole logo block under ~200px. */
  .cp-logo { gap: 7px; min-width: 0; flex-shrink: 1; }
  .cp-logo-mark { height: 36px; width: auto; }
  .cp-logo-text { min-width: 0; }
  .cp-logo-name { font-size: 17px; }
  .cp-logo-tag { font-size: 7px; letter-spacing: 0.03em; gap: 0.2em; }
}

/* Primary nav (desktop) */
.cp-primary {
  display: none;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}
@media (min-width: 1024px) {
  /* Extra left margin: the italic PAINTS overhang visually eats the
     grid gap and the wordmark was touching "Home". */
  .cp-primary { display: flex; margin-left: 18px; }
}
.cp-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  border-radius: 100px;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.cp-link > span { position: relative; }
.cp-link > span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--red-2);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.cp-link:hover > span::after,
.cp-link.active > span::after { transform: scaleX(1); }
.cp-link.active { color: var(--red-2); }
[data-theme="dark"] .cp-link.active { color: var(--gold-2); }
[data-theme="dark"] .cp-link > span::after { background: var(--gold-2); }
/* Active-link splatter dot */
.cp-link.active::before {
  content: "";
  position: absolute; top: 2px; right: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: -6px 4px 0 -2px var(--red-glow);
}
.cp-link-caret { transition: transform var(--t-fast); }
.cp-has-mega.is-open .cp-link-caret,
.cp-has-drop.is-open .cp-link-caret { transform: rotate(180deg); }

/* Small dropdown flyout — used for Inspiration and About in the
   consolidated navbar. Tighter than the Products mega so it fits
   beside it without dominating. */
.cp-has-drop { position: relative; }
.cp-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 20;
}
.cp-has-drop.is-open .cp-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cp-drop ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background var(--t-fast);
}
.cp-drop a:hover { background: var(--surface-2); }
.cp-drop-name {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.cp-drop-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.3;
}
.cp-drop a:hover .cp-drop-name { color: var(--red-2); }
[data-theme="dark"] .cp-drop a:hover .cp-drop-name { color: var(--gold-2); }

/* Mega-menu flyout */
.cp-has-mega { position: relative; }
.cp-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1120px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  padding: 28px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 20;
}
.cp-has-mega.is-open .cp-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cp-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cp-mega-col h5 {
  font-family: var(--serif);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.cp-mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-mega-col a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  font-size: 14px;
  color: var(--text);
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast), padding var(--t-fast);
}
.cp-mega-col a:hover { background: var(--surface-2); color: var(--red-2); padding-left: 14px; }
[data-theme="dark"] .cp-mega-col a:hover { color: var(--gold-2); }
.cp-mega-foot {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border-2);
}
.cp-mega-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--serif); font-weight: 500; font-size: 15px;
  color: var(--red-2);
}
.cp-mega-all:hover .arr { transform: translateX(4px); }
[data-theme="dark"] .cp-mega-all { color: var(--gold-2); }

/* Mega-menu feature cards — Colour Collection + Texture Collection
   sit at the TOP of the mega so the two flagship browse experiences
   are seen the moment the menu opens. Each card shows a colour-strip
   preview + eyebrow / title / sub line. */
.cp-mega-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-2);
}
.cp-mega-feat {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.cp-mega-feat:hover {
  transform: translateY(-2px);
  border-color: var(--red-2);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.18);
}
[data-theme="dark"] .cp-mega-feat:hover { border-color: var(--gold-2); box-shadow: 0 18px 36px -18px rgba(0,0,0,0.55); }
.cp-mega-feat-strip {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  border-radius: 10px;
  overflow: hidden;
  height: 88px;
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.cp-mega-feat-strip i {
  display: block;
  width: 100%; height: 100%;
}
/* Colours card — 12 spectrum bands as a stacked rainbow */
.cp-mega-feat--colours .cp-mega-feat-strip {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}
/* Textures card — 10 texture swatches in a 5x2 mini-grid */
.cp-mega-feat-strip--tex {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}
.cp-mega-feat-meta {
  display: flex; flex-direction: column;
  gap: 2px;
}
.cp-mega-feat-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-2);
}
[data-theme="dark"] .cp-mega-feat-eyebrow { color: var(--gold-2); }
.cp-mega-feat-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 2px;
}
.cp-mega-feat-sub {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin-top: 4px;
}
.cp-mega-feat:hover .cp-mega-feat-sub { color: var(--red-2); }
[data-theme="dark"] .cp-mega-feat:hover .cp-mega-feat-sub { color: var(--gold-2); }
.cp-mega-feat:hover .arr { transform: translateX(4px); }

/* Cramped widths fall back to a single stacked column */
@media (max-width: 960px) {
  .cp-mega-features { grid-template-columns: 1fr; }
}

/* Right-side actions */
.cp-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  position: relative;
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); transform: translateY(-1px); }
.icon-btn .cp-icon { width: 20px; height: 20px; }
.icon-btn svg { width: 20px; height: 20px; }
/* Header icon buttons — frosted glass visible over both dark/light hero */
.site-header:not(.scrolled) .cp-actions .icon-btn {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header:not(.scrolled) .cp-actions .icon-btn:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
/* Light mode over light hero */
[data-theme="light"] .site-header:not(.scrolled) .cp-actions .icon-btn {
  background: rgba(10,14,39,0.07);
  border-color: rgba(10,14,39,0.18);
  color: #1a1525;
}
[data-theme="light"] .site-header:not(.scrolled) .cp-actions .icon-btn:hover {
  background: rgba(10,14,39,0.13);
}
/* Theme toggle — CSS-driven initial icon state (JS sets inline after click) */
#themeToggle .sun { display: none; }
#themeToggle .moon { display: block; }
[data-theme="dark"] #themeToggle .sun { display: block; }
[data-theme="dark"] #themeToggle .moon { display: none; }

/* Scrolled state: revert to solid surface */
.site-header.scrolled .cp-actions .icon-btn {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.scrolled .cp-actions .icon-btn:hover {
  background: var(--surface-3);
}
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red-2);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.site-header.scrolled .cart-count { border-color: transparent; }
.cart-count.has-items { transform: scale(1); }
.cart-count.pop { animation: cartBadgePop 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes cartBadgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}

.cp-quote-btn {
  display: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
}
@media (min-width: 1024px) {
  .cp-quote-btn { display: inline-flex; }
}

.menu-toggle { display: none; }
@media (max-width: 1023.98px) {
  .menu-toggle { display: inline-flex; }
}

/* ---------- 5b. Mobile drawer ---------- */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 14, 39, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 150;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.mobile-drawer {
  position: fixed; top: 0; right: 0;
  width: min(380px, 88vw);
  height: 100vh;
  background: #0e1230;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(.76,0,.24,1);
  z-index: 160;
  display: flex; flex-direction: column;
  padding: 18px 24px 20px;
  overflow-y: auto;
  isolation: isolate;
}
.mobile-drawer::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grain) repeat;
  background-size: 240px 240px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none; z-index: -1;
}
.mobile-drawer.is-open { transform: translateX(0); }
html.nav-lock { overflow: hidden; }

.md-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.md-eyebrow {
  font-family: var(--serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.md-head .icon-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

.md-nav {
  display: flex; flex-direction: column;
  padding: 18px 0 10px;
  gap: 2px;
}
.md-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  position: relative;
}
.md-link em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
}
.md-link::before {
  content: "";
  position: absolute; left: -24px; top: 50%;
  width: 18px; height: 2px;
  background: var(--gold-2);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.3s ease;
}
.md-link:hover::before,
.md-link.active::before { transform: scaleX(1); }
.md-link.active em { color: var(--gold-2); }
.md-arr { opacity: 0.4; transition: transform var(--t-fast), opacity var(--t-fast); }
.md-link:hover .md-arr { opacity: 1; transform: translate(3px, -3px); }

.md-sub {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 4px;
}
.md-sub summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.md-sub summary::-webkit-details-marker { display: none; }
.md-caret { transition: transform 0.3s ease; color: rgba(255,255,255,0.5); }
.md-sub[open] .md-caret { transform: rotate(180deg); }
.md-sub-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  padding: 10px 0 6px;
}
.md-sub-grid a {
  display: block; padding: 8px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  transition: color var(--t-fast);
}
.md-sub-grid a:hover { color: var(--gold-2); }

.md-cta { padding: 18px 0 10px; }
.md-cta .btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 15px; font-weight: 600;
}
.btn-wa.md-wa {
  width: 100%; justify-content: center;
  border-radius: var(--radius, 14px);
  font-size: 15px; font-weight: 700;
  padding: 16px; gap: 9px;
  box-shadow: 0 8px 28px rgba(37,211,102,0.30);
}

.md-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.md-socials { display: flex; gap: 10px; }
.md-socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  transition: background var(--t-fast), color var(--t-fast);
}
.md-socials a:hover { background: rgba(255,255,255,0.1); color: var(--gold-2); }

/* ---------- 5c. Search overlay ---------- */
.search-overlay {
  position: fixed; inset: 0;
  z-index: 170;
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(10,14,39,0.45);
  backdrop-filter: blur(6px);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.so-sheet {
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
  padding: 90px 0 30px; /* push down below fixed header */
  box-shadow: var(--shadow-3);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.search-overlay.is-open .so-sheet { transform: translateY(0); }
.so-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.so-icon { color: var(--text-3); flex: none; }
#searchInput {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 400;
  padding: 10px 0;
}
#searchInput::placeholder { color: var(--text-3); }
.so-bar .btn {
  font-size: 11px;
  padding: 8px 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.so-results {
  max-height: 60vh; overflow-y: auto;
  margin-top: 14px;
}
.so-hint {
  padding: 22px 4px;
  font-size: 14px;
  color: var(--text-3);
}
.so-hint em { font-style: italic; color: var(--red-2); }
.so-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text);
  transition: background var(--t-fast), padding var(--t-fast);
}
.so-row:hover { background: var(--surface-2); padding-left: 14px; }
.so-swatch { width: 32px; height: 32px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); }
.so-txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.so-txt strong { font-size: 15px; font-weight: 600; }
.so-txt em { font-size: 12px; font-style: normal; color: var(--text-3); letter-spacing: 0.06em; }
.so-arr { color: var(--text-3); transition: transform var(--t-fast), color var(--t-fast); }
.so-row:hover .so-arr { color: var(--red-2); transform: translate(3px, -3px); }

/* ---------- 6. Hero ---------- */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(232,163,23,0.18), transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(139,30,44,0.18), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(30,58,138,0.10), transparent 70%),
    var(--bg);
}
[data-theme="dark"] .hero-bg {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(232,163,23,0.20), transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(217,40,67,0.20), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(37,71,184,0.20), transparent 70%),
    var(--bg);
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  animation: float 18s ease-in-out infinite;
}
.hero-blob.b1 { width: 480px; height: 480px; top: -120px; right: -100px; background: var(--red-glow); animation-delay: 0s; }
.hero-blob.b2 { width: 420px; height: 420px; bottom: -100px; left: -120px; background: var(--gold); animation-delay: -6s; }
.hero-blob.b3 { width: 380px; height: 380px; top: 40%; left: 40%; background: var(--blue-2); animation-delay: -12s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.05); }
  66% { transform: translate(-30px,30px) scale(0.95); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero-content .eyebrow { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.hero h1 .stack { display: block; }
.hero h1 .grad-red {
  background: linear-gradient(120deg, var(--red-2), var(--red-glow), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 400;
}
.hero p.lead {
  font-size: 1.2rem;
  color: var(--text-2);
  max-width: 48ch;
  margin-bottom: 36px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
  margin-top: 60px;
  display: flex; gap: 48px; flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border-2);
}
.hero-stat .num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--red-2), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.hero-stat .label {
  margin-top: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}

.hero-canvas-wrap {
  position: relative;
  aspect-ratio: 1/1.1;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
.hero-canvas-wrap canvas {
  width: 100% !important; height: 100% !important;
  display: block;
  cursor: grab;
}
.hero-canvas-wrap canvas:active { cursor: grabbing; }
.hero-canvas-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-1);
}
.hero-canvas-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.9); }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-3);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  animation: hop 2s ease-in-out infinite;
}
.scroll-cue .line { width: 1px; height: 36px; background: var(--text-3); }
@keyframes hop {
  0%,100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- 7. Marquee ---------- */
.marquee {
  padding: 36px 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  background: var(--bg);
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: center;
  gap: 60px;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}
.marquee-track span {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 60px;
}
.marquee-track span::after {
  content: '●'; color: var(--red-2); font-size: .6em;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 8. Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  padding: 38px 32px 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.pillar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-color, var(--red-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--brand-color, var(--red-2)); }
.pillar:hover::before { transform: scaleX(1); }
.pillar.red { --brand-color: var(--red-2); }
.pillar.blue { --brand-color: var(--blue-2); }
.pillar.gold { --brand-color: var(--gold); }

.pillar-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-color) 12%, transparent);
  color: var(--brand-color);
  margin-bottom: 22px;
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 { margin-bottom: 12px; font-size: 1.4rem; }
.pillar p { font-size: 14.5px; line-height: 1.6; }

/* ---------- 9. Section split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 50px; } }
.split-text .eyebrow { margin-bottom: 18px; }
.split-text h2 { margin-bottom: 22px; }
.split-text p { margin-bottom: 18px; font-size: 1rem; }

/* ---------- 10. Product cards ---------- */
.products-section { background: var(--surface-2); }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { margin-inline: auto; font-size: 1.1rem; max-width: 60ch; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
  position: relative;
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-3); }
.product-thumb {
  aspect-ratio: 1/1;
  background: var(--brand-bg, linear-gradient(135deg, var(--red-2), var(--red-glow)));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 18px 0 14px;
}
.product-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none; z-index: 0;
}
/* Legacy SVG bucket fallback — hidden when 3D buckets are active */
.product-thumb svg.bucket {
  display: none;
}
.product-thumb .floating-chip {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  backdrop-filter: blur(8px);
  z-index: 10;
}
.product-thumb .cert-badge {
  position: absolute; bottom: 14px; left: 14px;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: var(--ink);
  letter-spacing: .04em; line-height: 1;
  box-shadow: 0 4px 12px rgba(232,163,23,0.45);
  z-index: 10;
}
.cert-badge::before { content: '✓'; font-size: 12px; line-height: 1; }
.cert-badge::after { content: 'CERT'; margin-top: 3px; font-size: 6px; letter-spacing: .08em; }

.product-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.product-body .cat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.product-body h4 {
  font-size: 1.3rem; margin-bottom: 8px;
  font-family: var(--serif);
}
.product-body .desc {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-2);
  flex: 1;
  margin-bottom: 18px;
}
.product-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.product-foot .sizes {
  display: flex; gap: 6px;
}
.size-chip {
  padding: 5px 9px;
  font-size: 10px; font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.add-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
[data-theme="dark"] .add-btn { background: var(--gold); color: var(--ink); }
.add-btn:hover { transform: rotate(90deg) scale(1.1); }
.add-btn svg { width: 18px; height: 18px; }

/* Brand colour hooks */
.brand-silk-vinyl   { --brand-bg: linear-gradient(135deg, #6b1f6e, #8b1e6e); }
.brand-vinyl-matt   { --brand-bg: linear-gradient(135deg, #1e3a8a, #3b5bdb); }
.brand-iris         { --brand-bg: linear-gradient(135deg, #d4940a, #f5b700); }
.brand-supermatt    { --brand-bg: linear-gradient(135deg, #b8243a, #d92843); }
.brand-weatherguard { --brand-bg: linear-gradient(135deg, #8b1e2c, #b8243a); }
.brand-gloss        { --brand-bg: linear-gradient(135deg, #0f1f5c, #1e3a8a); }
.brand-undercoat    { --brand-bg: linear-gradient(135deg, #4a5568, #718096); }
.brand-roof         { --brand-bg: linear-gradient(135deg, #8b1e2c, #2d1a3a); }
.brand-floor        { --brand-bg: linear-gradient(135deg, #2d3748, #4a5568); }
.brand-varnish      { --brand-bg: linear-gradient(135deg, #92400e, #d69e2e); }
.brand-thinner      { --brand-bg: linear-gradient(135deg, #cbd5e0, #a0aec0); }
.brand-rocketex     { --brand-bg: linear-gradient(135deg, #1f2547, #2547b8); }

/* ---------- 11. Projects ---------- */
.projects-rail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.proj { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.proj:hover img { transform: scale(1.05); }
.proj::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,14,39,0.85));
}
.proj .meta {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  z-index: 2; color: #fff;
}
.proj .meta .tag {
  display: inline-block;
  padding: 5px 11px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 10px;
}
.proj .meta h4 { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.proj .meta p { color: rgba(255,255,255,0.75); font-size: 13px; }
.proj.lg { grid-column: span 7; aspect-ratio: 16/11; }
.proj.md { grid-column: span 5; aspect-ratio: 16/11; }
.proj.sm { grid-column: span 4; aspect-ratio: 1/1; }
.proj.wide { grid-column: span 8; aspect-ratio: 16/8; }
@media (max-width: 800px) {
  .proj.lg, .proj.md, .proj.sm, .proj.wide { grid-column: span 12; aspect-ratio: 16/11; }
}

/* ---------- 12. Cart Drawer ---------- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,14,39,0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  background: var(--bg);
  z-index: 201;
  transform: translateX(100%);
  transition: transform var(--t-mid);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px -20px rgba(0,0,0,0.4);
  border-left: 1px solid var(--border);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-2);
}
.cart-head h3 { font-family: var(--serif); font-size: 1.4rem; }
.cart-head .icon-btn { width: 36px; height: 36px; }
.cart-body { flex: 1; overflow-y: auto; padding: 22px 26px; }
.cart-empty {
  text-align: center; padding: 60px 20px;
  color: var(--text-3);
}
.cart-empty svg { width: 60px; height: 60px; margin: 0 auto 18px; opacity: .4; }
.cart-empty p { font-size: 14px; }

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-2);
  align-items: center;
}
.cart-item .thumb {
  width: 64px; height: 64px;
  border-radius: 10px;
  background: var(--brand-bg, var(--surface-2));
  display: flex; align-items: center; justify-content: center;
}
.cart-item .thumb svg { width: 60%; height: 60%; }
.cart-item .info h5 { font-size: 14px; font-weight: 700; margin-bottom: 4px; font-family: var(--sans); }
.cart-item .info .size { font-size: 11px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.qty {
  display: inline-flex; align-items: center;
  background: var(--surface-2);
  border-radius: 100px;
  padding: 4px;
  border: 1px solid var(--border-2);
}
.qty button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px; font-weight: 700;
  color: var(--text-2);
}
.qty button:hover { background: var(--surface); color: var(--text); }
.qty .v { padding: 0 10px; font-size: 13px; font-weight: 700; min-width: 18px; text-align: center; }

.cart-foot {
  padding: 22px 26px;
  border-top: 1px solid var(--border-2);
  background: var(--surface);
}
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
  font-size: 14px;
}
.cart-total .v { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.cart-actions { display: flex; flex-direction: column; gap: 10px; }
.cart-actions .btn { width: 100%; padding: 16px; }

/* --- Cart review + send --- */
#cartReviewToggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#cartReviewToggle:hover { background: var(--surface); border-color: var(--text-3); }
#cartReviewToggle svg {
  transition: transform .28s cubic-bezier(.6,.05,.3,1);
}
.cart-foot.is-reviewing #cartReviewToggle svg { transform: rotate(180deg); }

.cart-review {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.6,.05,.3,1), opacity .22s ease, margin .32s ease;
  margin-top: 0;
}
.cart-foot.is-reviewing .cart-review {
  max-height: 60vh;
  opacity: 1;
  margin-top: 14px;
  overflow: visible;
}

.cart-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cart-field label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.cart-field input,
.cart-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  transition: border-color .18s ease, background .18s ease;
}
.cart-field input:focus,
.cart-field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--surface);
}
.cart-field textarea {
  resize: none;
  min-height: 160px;
  max-height: 40vh;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
}
.cart-note {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 2px 0 12px;
}

.cart-send-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.cart-send-row .btn {
  width: 100%;
  padding: 14px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 12px;
}
.cart-send-row .btn svg { width: 18px; height: 18px; }
.btn-wa {
  background: #25D366;
  color: #0b2e19;
  border: 1px solid transparent;
}
.btn-wa:hover { background: #1fb658; color: #fff; }
.btn-mail {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.btn-mail:hover { background: #1a1a1f; }

.cart-clear {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease;
}
.cart-clear:hover { color: var(--red); }

@media (max-width: 520px) {
  .cart-drawer { width: 100%; max-width: 100%; }
  .cart-body { padding: 18px 16px; }
  .cart-foot { padding: 18px 16px; }
  .cart-send-row .btn { font-size: 12px; padding: 13px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-review,
  #cartReviewToggle svg,
  .cart-count.pop { transition: none !important; animation: none !important; }
}

/* ---------- 13. Footer ---------- */
footer {
  background: var(--ink);
  color: #fff;
  padding: 100px 0 30px;
  position: relative; overflow: hidden;
  /* Brand-spectrum hairline along the top edge — a soft gradient
     accent that ties the dark theme's sections together. */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,
    #d92843 0%, #e8a317 22%, #2f5d40 45%,
    #1f4088 68%, #8C74D0 84%, #d92843 100%) 1;
}
footer::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,40,67,0.30), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
footer::after {
  content: ''; position: absolute; bottom: -100px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,163,23,0.25), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 50px;
  position: relative; z-index: 2;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { max-width: 360px; }
.footer-brand h3 { color: #fff; font-size: 2.4rem; margin-bottom: 16px; }
.footer-brand h3 em { color: var(--gold-2); }
.footer-brand p { color: rgba(255,255,255,0.65); font-size: 14.5px; margin-bottom: 16px; }
/* KEBS Standardization Mark — communicates certified quality. The S-mark
   SVG is rendered inline; container shows the mark beside a short label. */
.cp-kebs {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #f5f1e8;
}
.cp-kebs-mark {
  display: inline-grid; place-items: center;
  color: var(--gold-2, #b8934a);
  flex-shrink: 0;
}
.cp-kebs-mark svg { display: block; }
.cp-kebs-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.cp-kebs-text strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.cp-kebs-text span {
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
  color: #fff;
}
.socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.socials a[aria-label="WhatsApp"] { background: rgba(37,211,102,0.15); color: #25D366; }
.socials a[aria-label="WhatsApp"]:hover { background: #25D366; color: #fff; }
.socials svg { width: 18px; height: 18px; }

.footer-col h5 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  color: var(--gold-2);
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 18px;
}
/* The gap used to be 11px between 17px-tall inline links: a 17px tap target,
   well under the 24px minimum, on every page of the site. Moving the space
   inside the link as padding makes the target 25px without changing the
   rhythm of the list — 25 + 2 lands within a pixel of the old 17 + 11. */
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.footer-col a {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px; color: rgba(255,255,255,0.65);
  transition: color var(--t-fast);
}
.footer-col a:hover { color: #fff; }
.footer-col p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

.footer-base {
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  position: relative; z-index: 2;
}
.footer-base .tag {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--gold-2);
}
.footer-legal-links {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.footer-legal-links a {
  /* Inline at 12px these were 19px-tall tap targets. Padding takes them
     over the 24px minimum without changing where the line sits — the row
     is centred, so the extra height grows evenly above and below. */
  display: inline-block;
  padding: 4px 2px;
  margin: -4px 0;
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast);
}
.footer-legal-links a:hover { color: rgba(255,255,255,0.9); }
.footer-legal-links span[aria-hidden] {
  color: rgba(255,255,255,0.25);
}

/* ---------- 14. Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal-l.in { opacity: 1; transform: translateX(0); }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal-r.in { opacity: 1; transform: translateX(0); }
.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: 0s; }
.stagger.in > *:nth-child(2) { transition-delay: .08s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .24s; }
.stagger.in > *:nth-child(5) { transition-delay: .32s; }
.stagger.in > *:nth-child(6) { transition-delay: .40s; }
.stagger.in > *:nth-child(7) { transition-delay: .48s; }
.stagger.in > *:nth-child(8) { transition-delay: .56s; }

/* Char-by-char hero text */
.split-chars span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.split-chars.in span { opacity: 1; transform: translateY(0); }
.split-chars span:nth-child(n) { transition-delay: calc(var(--i, 0) * 25ms); }

/* ---------- 15. Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  z-index: 300;
  transition: transform var(--t-mid);
  border: 1px solid var(--border);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--gold-2); }

/* ---------- 16. Page-specific ---------- */
.page-hero {
  padding: 180px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 20px; }
.page-hero p { font-size: 1.15rem; max-width: 60ch; }
.page-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(232,163,23,0.18), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(139,30,44,0.15), transparent 50%),
    var(--bg);
}

/* Filter chips on products page */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 50px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-2);
}
.chip {
  padding: 9px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--text); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="dark"] .chip.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Product detail */
.pd-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) { .pd-grid { grid-template-columns: 1fr; gap: 40px; } }
.pd-canvas {
  aspect-ratio: 1/1.05;
  background: var(--brand-bg, var(--surface-2));
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.pd-canvas canvas { width: 100% !important; height: 100% !important; cursor: grab; }
.pd-canvas canvas:active { cursor: grabbing; }
.pd-canvas .corner-text {
  position: absolute; bottom: 24px; left: 24px;
  color: rgba(255,255,255,0.9);
  font-family: var(--serif);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}
.pd-canvas .size-toggle {
  position: absolute; bottom: 24px; right: 24px;
  display: flex; gap: 6px;
  background: rgba(0,0,0,0.30);
  padding: 5px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}
.pd-canvas .size-toggle button {
  padding: 6px 14px;
  border-radius: 100px;
  color: rgba(255,255,255,0.8);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
}
.pd-canvas .size-toggle button.active {
  background: rgba(255,255,255,0.95);
  color: var(--ink);
}

.pd-info .eyebrow { margin-bottom: 16px; }
.pd-info h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 18px; }
.pd-info .desc { font-size: 1.05rem; line-height: 1.7; margin-bottom: 30px; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.spec {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
}
.spec .k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.spec .v {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 700;
  color: var(--text);
}

.feature-list {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 30px;
}
.feature-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-2);
}
.feature-list li::before {
  content: '✓';
  width: 22px; height: 22px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}

.pd-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-meta {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-2);
  display: flex; flex-wrap: wrap; gap: 24px;
  font-size: 12px; color: var(--text-3);
}
.pd-meta .item { display: flex; align-items: center; gap: 8px; }
.pd-meta .item strong { color: var(--text); font-family: var(--mono); font-size: 11px; }

/* Map / Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  display: flex; gap: 18px; align-items: flex-start;
}
.contact-card .ic {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand, var(--red-2)) 12%, transparent);
  color: var(--brand, var(--red-2));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-card h4 { margin-bottom: 6px; font-family: var(--sans); font-size: 14px; font-weight: 700; }
.contact-card p, .contact-card a { font-size: 14px; color: var(--text-2); display: block; }

.form-card {
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.form-card h3 { margin-bottom: 6px; }
.form-card .sub { font-size: 14px; margin-bottom: 26px; color: var(--text-2); }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-2);
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--red-2);
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 120px; }

/* About / Team */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } }

.cert-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 60px;
}
@media (max-width: 800px) { .cert-row { grid-template-columns: repeat(2, 1fr); } }
.cert {
  padding: 30px 24px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cert .ic {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink);
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.cert h4 { font-family: var(--sans); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.cert p { font-size: 12.5px; color: var(--text-2); }

/* CTA strip */
.cta-strip {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--ink) 60%, var(--red) 100%);
  color: #fff;
  padding: 80px 0;
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  margin: 0 var(--gutter);
}
.cta-strip::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,163,23,0.4), transparent 60%);
  filter: blur(60px);
}
.cta-strip h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 16px; max-width: 18ch; }
.cta-strip h2 em { color: var(--gold-2); }
.cta-strip p { color: rgba(255,255,255,0.75); margin-bottom: 30px; font-size: 1.1rem; max-width: 50ch; }
.cta-strip .inner { position: relative; z-index: 2; }

/* ============================================================
   17. LOADING SCREEN — The Pour
   Full-viewport black backdrop, warm off-centre glow.
   Sequence: logo fade → drip draw → splatter → wordmark char
   stagger → gold progress line → splash lifts + red paint
   curtain wipes down behind it. Emits `loader:done` when done.
   ============================================================ */

/* Pre-cover — paints the loader backdrop from the very first frame so the
   page content never flashes before loader.js injects #cpLoader.
   Removed the instant the real loader mounts (.cp-loader-mounted). */
body.cp-loading:not(.cp-loader-mounted)::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998;
  background: #0e0a14;
  animation: cpPreFailsafe 0s linear 9s forwards;
}
@keyframes cpPreFailsafe { to { opacity: 0; visibility: hidden; } }

#cpLoader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(160deg, rgba(8,8,16,0.78) 0%, rgba(8,8,16,0.62) 50%, rgba(8,8,16,0.88) 100%),
    url(../images/showroom/showroom-hero-new.jpg) center/cover no-repeat;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(.76,0,.24,1);
}
/* Hybrid — softened paint cluster over the photo backdrop */
#cpLoader .cp-blob       { opacity: 0.42; filter: blur(58px); }
#cpLoader .cp-blob.b5    { opacity: 0.34; }
#cpLoader .cp-splat      { opacity: 0.07; }
[data-theme="light"] #cpLoader .cp-blob    { opacity: 0.18; }
[data-theme="light"] #cpLoader .cp-blob.b5 { opacity: 0.14; }
[data-theme="light"] #cpLoader .cp-splat   { opacity: 0.05; }
#cpLoader.cp-lift { transform: translateY(-100vh); }
#cpLoader.cp-hide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; }

/* Warm off-centre glow */
#cpLoader::before {
  content: "";
  position: absolute; inset: 0;
  /* Option 1 — adds a soft warm glow over the darkened showroom photo */
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(217,40,67,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(232,163,23,0.16) 0%, transparent 65%);
  pointer-events: none;
}
/* Grain overlay */
#cpLoader::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--grain) repeat;
  background-size: 220px 220px;
  opacity: 0.04; mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Animated paint field (artsy backdrop) ---------- */
.cp-paint {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* slowly morphing, drifting paint blobs in the brand palette */
.cp-blob {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 46% 54% 61% 39% / 48% 42% 58% 52%;
  filter: blur(46px);
  opacity: 0.7;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
}
.cp-blob.b1 { width: 38vmin; height: 38vmin; background:#e11f29; animation: cpBlob1 15s ease-in-out infinite; }
.cp-blob.b2 { width: 32vmin; height: 32vmin; background:#2d5ad2; animation: cpBlob2 18s ease-in-out infinite; }
.cp-blob.b3 { width: 36vmin; height: 36vmin; background:#e8a317; animation: cpBlob3 17s ease-in-out infinite; }
.cp-blob.b4 { width: 30vmin; height: 30vmin; background:#2f9e44; animation: cpBlob4 21s ease-in-out infinite; }
.cp-blob.b5 { width: 26vmin; height: 26vmin; background:#e11f29; opacity:0.55; animation: cpBlob5 14s ease-in-out infinite; }
/* all blobs orbit the centre (behind the logo) within a small range */
@keyframes cpBlob1 {
  0%,100% { transform: translate(-50%,-50%) translate(-5vmin,-4vmin) rotate(0deg) scale(1); border-radius:46% 54% 61% 39% / 48% 42% 58% 52%; }
  34% { transform: translate(-50%,-50%) translate(3vmin,4vmin) rotate(70deg) scale(1.16); border-radius:62% 38% 43% 57% / 57% 61% 39% 43%; }
  67% { transform: translate(-50%,-50%) translate(-2vmin,-7vmin) rotate(160deg) scale(0.92); border-radius:37% 63% 57% 43% / 43% 49% 51% 57%; }
}
@keyframes cpBlob2 {
  0%,100% { transform: translate(-50%,-50%) translate(6vmin,-4vmin) rotate(0deg) scale(1); border-radius:55% 45% 38% 62% / 50% 56% 44% 50%; }
  40% { transform: translate(-50%,-50%) translate(-2vmin,3vmin) rotate(-60deg) scale(1.18); border-radius:40% 60% 62% 38% / 60% 40% 60% 40%; }
  72% { transform: translate(-50%,-50%) translate(8vmin,-8vmin) rotate(-140deg) scale(0.92); border-radius:60% 40% 45% 55% / 42% 58% 42% 58%; }
}
@keyframes cpBlob3 {
  0%,100% { transform: translate(-50%,-50%) translate(5vmin,5vmin) rotate(0deg) scale(1); border-radius:50% 50% 55% 45% / 55% 45% 55% 45%; }
  45% { transform: translate(-50%,-50%) translate(-4vmin,-3vmin) rotate(80deg) scale(1.2); border-radius:38% 62% 40% 60% / 62% 38% 62% 38%; }
}
@keyframes cpBlob4 {
  0%,100% { transform: translate(-50%,-50%) translate(-6vmin,5vmin) rotate(0deg) scale(1); border-radius:60% 40% 50% 50% / 45% 55% 45% 55%; }
  38% { transform: translate(-50%,-50%) translate(3vmin,-4vmin) rotate(-70deg) scale(1.18); border-radius:44% 56% 60% 40% / 56% 44% 56% 44%; }
  74% { transform: translate(-50%,-50%) translate(7vmin,8vmin) rotate(-150deg) scale(0.9); border-radius:58% 42% 38% 62% / 40% 62% 38% 60%; }
}
@keyframes cpBlob5 {
  0%,100% { transform: translate(-50%,-50%) rotate(0deg) scale(1); border-radius:48% 52% 50% 50% / 52% 48% 52% 48%; }
  50% { transform: translate(-50%,-50%) translate(2vmin,-3vmin) rotate(120deg) scale(1.3); border-radius:60% 40% 42% 58% / 44% 60% 40% 56%; }
}
/* faint paint-splatter slowly turning behind the logo */
.cp-splat {
  position: absolute;
  left: 50%; top: 48%;
  width: 52vmin; height: 52vmin;
  transform: translate(-50%,-50%);
  fill: #e11f29;
  opacity: 0.12;
  will-change: transform, opacity;
  animation: cpSplatSpin 46s linear infinite, cpSplatPulse 9s ease-in-out infinite;
}
@keyframes cpSplatSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes cpSplatPulse {
  0%,100% { opacity: 0.09; }
  50%     { opacity: 0.17; }
}

.cp-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
/* soft halo so the logo + wordmark stay legible over the moving paint */
.cp-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 150%; height: 175%;
  background: radial-gradient(ellipse, rgba(8,8,14,0.74) 0%, rgba(8,8,14,0.34) 42%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
[data-theme="light"] .cp-stage::before {
  background: radial-gradient(ellipse, rgba(253,250,243,0.92) 0%, rgba(253,250,243,0.55) 42%, transparent 74%);
}

/* ---------- Logo mark ---------- */
.cp-mark {
  height: 124px; width: auto;
  object-fit: contain;
  opacity: 0; transform: scale(0.9);
  filter: drop-shadow(0 14px 44px rgba(225,31,41,0.5));
  animation: cpMarkIn 0.65s cubic-bezier(.22,1,.36,1) 0.1s forwards;
}
@keyframes cpMarkIn {
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Wordmark ---------- */
.cp-wordmark {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Match the hero "CLOUD" — true logo navy with a soft cream glow so
     it reads cleanly against the dark splash. */
  color: #1D1E51;
  text-shadow:
    0 0 18px rgba(255,255,255,0.60),
    0 0 38px rgba(255,255,255,0.32);
  display: flex;
  gap: 0;
}
.cp-wordmark .cp-wm-red {
  color: #e11f29;
  font-style: italic;
  text-shadow: 0 0 14px rgba(255,255,255,0.32);
}
.cp-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: cpCharIn 0.5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(0.5s + (var(--i, 0) * 0.035s));
}
@keyframes cpCharIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Progress line ---------- */
.cp-progress {
  width: 180px; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 24px;
}
.cp-progress i {
  display: block;
  width: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold, #e8a317) 0%, var(--gold-2, #ffc93d) 100%);
  box-shadow: 0 0 12px rgba(232,163,23,0.5);
  /* Resynced to the shortened loader (lift at 2.4s in loader.js) */
  animation: cpProgressDraw 1.5s 0.85s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cpProgressDraw { to { width: 100%; } }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .cp-mark { height: 92px; width: auto; }
  .cp-wordmark { font-size: 21px; letter-spacing: 0.02em; }
  .cp-progress { width: 130px; }
  .cp-stage { gap: 18px; }
}

/* ---------- Light-mode loader (bright variant) ----------
   Dark charcoal version above stays for dark mode; light theme
   gets a warm near-white splash. */
[data-theme="light"] body.cp-loading:not(.cp-loader-mounted)::before {
  background: #faf4ec;
}
[data-theme="light"] #cpLoader {
  background:
    linear-gradient(165deg, rgba(250,244,236,0.72) 0%, rgba(250,244,236,0.55) 50%, rgba(250,244,236,0.85) 100%),
    url(../images/showroom/showroom-hero-new.jpg) center/cover no-repeat;
}
[data-theme="light"] #cpLoader::before {
  background:
    radial-gradient(ellipse 58% 52% at 6% 8%,   rgba(217,40,67,0.13) 0%, transparent 62%),
    radial-gradient(ellipse 54% 50% at 95% 12%, rgba(45,90,210,0.11) 0%, transparent 62%),
    radial-gradient(ellipse 56% 52% at 92% 94%, rgba(232,163,23,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 52% 48% at 8% 95%,  rgba(47,158,68,0.10) 0%, transparent 64%);
}
[data-theme="light"] #cpLoader::after { opacity: 0.06; mix-blend-mode: multiply; }
[data-theme="light"] .cp-wordmark { color: #1D1E51; }            /* navy reads on white */
[data-theme="light"] .cp-mark { filter: drop-shadow(0 14px 40px rgba(225,31,41,0.30)); }
[data-theme="light"] .cp-progress { background: rgba(10,14,39,0.10); }
/* paint blobs: multiply-tint on the bright background instead of screen-glow */
[data-theme="light"] .cp-blob { mix-blend-mode: multiply; opacity: 0.22; filter: blur(60px); }
[data-theme="light"] .cp-blob.b5 { opacity: 0.18; }
[data-theme="light"] .cp-splat { opacity: 0.07; }

/* Paint field — reduced motion: hold still, no drifting */
@media (prefers-reduced-motion: reduce) {
  .cp-blob, .cp-splat { animation: none !important; }
}

/* ============================================================
   SITE-WIDE MORPHING BACKGROUND BLOBS
   Five paint-coloured blobs fixed behind every page, slowly
   drifting and morphing under heavy blur. Injected by partials.js
   at the top of <body> so they appear automatically on every page.
   ============================================================ */
.cp-bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}
.cp-bg-blob {
  position: absolute;
  border-radius: 46% 54% 61% 39% / 48% 42% 58% 52%;
  filter: blur(90px);
  opacity: 0.40;
  /* Multiply by default for the light theme so the brand colours
     read as a warm wash over the cream base. Dark theme overrides
     below switch to screen for a glow. */
  mix-blend-mode: multiply;
  will-change: transform, border-radius;
}
/* Five blobs anchored to viewport corners + centre, each drifting
   on its own 28-44s loop. Sizes are vmin so they scale with the
   smaller viewport edge — large enough to feel like a wash but
   never tile the screen. */
.cp-bg-blob.b1 { width: 55vmin; height: 55vmin; background: #e11f29; top: -10vmin; left: -8vmin;  animation: cpBgBlob1 34s ease-in-out infinite; }
.cp-bg-blob.b2 { width: 50vmin; height: 50vmin; background: #1f4088; top: 18vh;    right: -10vmin; animation: cpBgBlob2 38s ease-in-out infinite; }
.cp-bg-blob.b3 { width: 60vmin; height: 60vmin; background: #c4870a; bottom: -12vmin; left: 12vw;  animation: cpBgBlob3 42s ease-in-out infinite; }
.cp-bg-blob.b4 { width: 48vmin; height: 48vmin; background: #2f5d40; bottom: 8vh;  right: 6vw;     animation: cpBgBlob4 36s ease-in-out infinite; }
.cp-bg-blob.b5 { width: 42vmin; height: 42vmin; background: #b25a44; top: 38vh;    left: 30vw;     animation: cpBgBlob5 30s ease-in-out infinite; opacity: 0.32; }

/* Dark theme — switch to screen blend so the blobs glow on the
   near-black ground instead of disappearing into it. */
[data-theme="dark"] .cp-bg-blob {
  mix-blend-mode: screen;
  opacity: 0.40;
  filter: blur(88px);
}
[data-theme="dark"] .cp-bg-blob.b5 { opacity: 0.30; }

@keyframes cpBgBlob1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);     border-radius: 46% 54% 61% 39% / 48% 42% 58% 52%; }
  33%      { transform: translate(8vmin, 12vmin) rotate(60deg) scale(1.15); border-radius: 62% 38% 43% 57% / 57% 61% 39% 43%; }
  66%      { transform: translate(-4vmin, 6vmin) rotate(140deg) scale(0.92); border-radius: 37% 63% 57% 43% / 43% 49% 51% 57%; }
}
@keyframes cpBgBlob2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);     border-radius: 55% 45% 38% 62% / 50% 56% 44% 50%; }
  40%      { transform: translate(-10vmin, 14vmin) rotate(-50deg) scale(1.20); border-radius: 40% 60% 62% 38% / 60% 40% 60% 40%; }
  70%      { transform: translate(-4vmin, 4vmin) rotate(-110deg) scale(0.95);  border-radius: 60% 40% 45% 55% / 42% 58% 42% 58%; }
}
@keyframes cpBgBlob3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);     border-radius: 50% 50% 55% 45% / 55% 45% 55% 45%; }
  45%      { transform: translate(12vmin, -10vmin) rotate(80deg) scale(1.18);  border-radius: 38% 62% 40% 60% / 62% 38% 62% 38%; }
  72%      { transform: translate(-6vmin, -4vmin) rotate(150deg) scale(0.90);  border-radius: 56% 44% 60% 40% / 38% 62% 40% 60%; }
}
@keyframes cpBgBlob4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);     border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%; }
  35%      { transform: translate(-14vmin, -10vmin) rotate(-70deg) scale(1.22); border-radius: 42% 58% 55% 45% / 65% 35% 60% 40%; }
  68%      { transform: translate(6vmin, -16vmin) rotate(-140deg) scale(0.96); border-radius: 55% 45% 38% 62% / 50% 56% 44% 50%; }
}
@keyframes cpBgBlob5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);     border-radius: 52% 48% 47% 53% / 56% 42% 58% 44%; }
  50%      { transform: translate(8vmin, -8vmin) rotate(120deg) scale(1.10);   border-radius: 38% 62% 60% 40% / 45% 55% 50% 50%; }
}

/* Reduced motion — freeze the morphing entirely. The blobs stay
   visible as static colour fields so the page never goes 'flat',
   they just don't drift. */
@media (prefers-reduced-motion: reduce) {
  .cp-bg-blob { animation: none !important; }
}

/* Mobile — fewer blobs so weak GPUs aren't stressed by 5 large
   blurred elements. Drops to 3 blobs that still cover the screen. */
@media (max-width: 640px) {
  .cp-bg-blob.b2, .cp-bg-blob.b5 { display: none; }
  .cp-bg-blob { filter: blur(70px); }
}

/* The body needs to be transparent at the root so the fixed-blob
   layer behind it can show through. Pages that set their own bg
   on a wrapper section will still cover the blobs there — they
   only show through transparent zones (between sections, behind
   text-only blocks, etc.). */
html, body { background-color: transparent; }
html { background-color: var(--bg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cp-mark, .cp-wordmark span, .cp-progress i {
    animation: none !important;
  }
  .cp-mark { opacity: 1; transform: none; }
  .cp-wordmark span { opacity: 1; transform: none; }
  .cp-progress i { width: 100%; }
  #cpLoader { transition: opacity 0.3s ease, visibility 0.3s ease; }
  #cpLoader.cp-lift { transform: none; opacity: 0; visibility: hidden; }
}

/* ============================================================
   18. GLOBAL AMBIENT BLOBS + HERO PAINT DECORATION
   ============================================================ */

/* Global page background — subtle but present on every page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -100;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 8% 12%,  rgba(217,40,67,0.12),  transparent 65%),
    radial-gradient(ellipse 50% 60% at 92% 88%,  rgba(184,147,74,0.10),  transparent 65%),
    radial-gradient(ellipse 60% 50% at 55% 50%,  rgba(30,58,138,0.08),   transparent 70%);
  animation: bodyBlobDrift 22s ease-in-out infinite alternate;
  will-change: background-position;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 55% 45% at 8% 12%,  rgba(240,48,80,0.20),   transparent 65%),
    radial-gradient(ellipse 50% 60% at 92% 88%,  rgba(232,163,23,0.16),  transparent 65%),
    radial-gradient(ellipse 60% 50% at 55% 50%,  rgba(30,58,138,0.18),   transparent 70%);
}
@keyframes bodyBlobDrift {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.75; }
}

/* In-section hero paint decoration (morphing blobs) */
.hero-paint-deco {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}

.hpd-morph {
  position: absolute;
  filter: blur(1px);
  will-change: transform, border-radius;
  animation: hpdMorph 14s ease-in-out infinite;
}
.hpd-morph.m1 {
  width: clamp(320px, 38vw, 560px);
  height: clamp(280px, 32vw, 480px);
  top: -5%; right: -5%;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(217,40,67,0.42) 0%,
    rgba(184,36,58,0.22) 45%,
    transparent 72%);
  animation-delay: 0s;
}
.hpd-morph.m2 {
  width: clamp(260px, 30vw, 420px);
  height: clamp(240px, 28vw, 380px);
  bottom: 5%; left: -4%;
  background: radial-gradient(ellipse at 60% 55%,
    rgba(232,163,23,0.38) 0%,
    rgba(200,140,20,0.18) 45%,
    transparent 72%);
  animation-delay: -5s;
}
.hpd-morph.m3 {
  width: clamp(200px, 22vw, 340px);
  height: clamp(200px, 22vw, 340px);
  top: 38%; right: 22%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(37,71,184,0.30) 0%,
    rgba(30,58,138,0.14) 45%,
    transparent 70%);
  animation-delay: -9s;
}
.hpd-morph.m4 {
  width: clamp(180px, 18vw, 280px);
  height: clamp(180px, 18vw, 280px);
  top: 60%; right: 5%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(132,204,22,0.22) 0%,
    transparent 70%);
  animation-delay: -13s;
}
@keyframes hpdMorph {
  0%,100% { border-radius: 64% 36% 29% 71% / 58% 32% 68% 42%; transform: rotate(0deg) scale(1);     }
  20%      { border-radius: 40% 60% 60% 40% / 40% 50% 60% 50%; transform: rotate(6deg) scale(1.07);  }
  40%      { border-radius: 55% 45% 40% 60% / 55% 45% 55% 45%; transform: rotate(-4deg) scale(0.95); }
  60%      { border-radius: 30% 70% 70% 30% / 50% 40% 70% 40%; transform: rotate(10deg) scale(1.04); }
  80%      { border-radius: 60% 40% 50% 50% / 35% 65% 42% 58%; transform: rotate(-8deg) scale(1.02); }
}

/* Floating paint drop accents — large HD splashes */
.hpd-drop {
  position: absolute;
  border-radius: 50% 50% 38% 38% / 62% 62% 38% 38%;
  animation: hpdDrop 4.8s ease-in-out infinite;
  filter: blur(0.5px);
}
.hpd-drop.d1 {
  width: 24px; height: 34px;
  top: 20%; right: 16%;
  background: linear-gradient(180deg, #f04060, #d92843);
  box-shadow: 0 0 24px rgba(217,40,67,0.6);
  animation-delay: 0s;
}
.hpd-drop.d2 {
  width: 17px; height: 24px;
  top: 28%; right: 21%;
  background: linear-gradient(180deg, #ffd65a, #e8a317);
  box-shadow: 0 0 18px rgba(232,163,23,0.55);
  animation-delay: -1.4s;
}
.hpd-drop.d3 {
  width: 13px; height: 18px;
  top: 15%; right: 13%;
  background: linear-gradient(180deg, #e84060, #b8243a);
  animation-delay: -0.7s;
}
@keyframes hpdDrop {
  0%,100% { transform: translateY(0) scaleX(1); opacity: 0.9; }
  50%      { transform: translateY(10px) scaleX(0.88); opacity: 0.7; }
  80%      { transform: translateY(18px) scaleX(1.5) scaleY(0.25); opacity: 0; }
  80.01%   { transform: translateY(0) scaleX(1); opacity: 0; }
  85%      { opacity: 0.9; }
}

/* ============================================================
   19. REALISTIC 3D CSS PRODUCT BUCKET CARDS
   ============================================================ */
.bucket3d-wrap {
  width: 52%; max-width: 160px;
  perspective: 720px;
  perspective-origin: 50% 25%;
  position: relative;
}

.bucket3d {
  transform-style: preserve-3d;
  position: relative;
  animation: bktSway 7.5s ease-in-out infinite;
  will-change: transform;
}
.product-card:hover .bucket3d {
  animation: bktSpin 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bktSway {
  0%,100% { transform: rotateY(-6deg) rotateX(1.5deg); }
  50%      { transform: rotateY(6deg)  rotateX(-1deg);  }
}
@keyframes bktSpin {
  0%   { transform: rotateY(-6deg)   rotateX(1.5deg); }
  100% { transform: rotateY(354deg)  rotateX(0deg);   }
}

/* Wire handle arc */
.b-handle {
  width: 50%; margin: 0 auto -1px;
  padding-top: 16%;
  border: 3.5px solid rgba(165,165,165,0.80);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  background: transparent; position: relative; z-index: 3;
  box-shadow: inset 0 3px 5px rgba(255,255,255,0.12), 0 -1px 3px rgba(0,0,0,0.3);
}

/* Metallic lid */
.b-lid {
  height: 12px;
  background: linear-gradient(180deg,
    rgba(240,240,240,0.96) 0%,
    rgba(178,178,178,0.92) 38%,
    rgba(215,215,215,0.92) 65%,
    rgba(148,148,148,0.95) 100%
  );
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative; z-index: 2;
}
.b-lid::after {
  content: ''; position: absolute; bottom: 1px; left: 8%; right: 8%;
  height: 2px; background: rgba(0,0,0,0.18); border-radius: 2px;
}

/* Brand colour rim under lid */
.b-rim-top {
  height: 8px;
  background: var(--bkt-primary, var(--red-2));
  position: relative; z-index: 1;
}
.b-rim-top::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.38) 0%,
    rgba(255,255,255,0.18) 22%,
    rgba(255,255,255,0.10) 55%,
    rgba(0,0,0,0.30) 100%
  );
}

/* Main bucket body */
.b-body {
  position: relative; overflow: hidden;
  height: 108px;
}

/* Label image or brand gradient fill */
.b-label {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}

/* Cylinder depth — highlight strip */
.b-light {
  position: absolute; top: 0; bottom: 0;
  left: 10%; width: 22%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.24) 45%,
    rgba(255,255,255,0.30) 60%,
    transparent 100%
  );
  pointer-events: none;
}
/* Cylinder depth — left shadow */
.b-shadow-l {
  position: absolute; top: 0; bottom: 0; left: 0; width: 18%;
  background: linear-gradient(90deg, rgba(0,0,0,0.55), transparent);
}
/* Cylinder depth — right shadow */
.b-shadow-r {
  position: absolute; top: 0; bottom: 0; right: 0; width: 22%;
  background: linear-gradient(270deg, rgba(0,0,0,0.58), transparent);
}
/* Top paint sheen */
.b-sheen {
  position: absolute; top: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), transparent);
  pointer-events: none;
}

/* Bottom metallic rim */
.b-rim-bot {
  height: 10px;
  background: linear-gradient(180deg,
    rgba(168,168,168,0.72) 0%,
    rgba(118,118,118,0.90) 55%,
    rgba(85,85,85,0.82) 100%
  );
  border-radius: 0 0 7px 7px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Remove old SVG bucket styles from hover (replaced by 3D system) */
.product-thumb .bucket3d-wrap {
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.32));
  transition: filter var(--t-mid);
}
.product-card:hover .bucket3d-wrap {
  filter: drop-shadow(0 24px 36px rgba(0,0,0,0.42));
}

/* When card has a real photo, neutralise the coloured thumb background */
.product-thumb:has(.bucket-photo-wrap) {
  background: #0d0b12;
  padding: 0;
}
.product-thumb:has(.bucket-photo-wrap)::before { display: none; }

/* Real product photo buckets (swap-in for .bucket3d-wrap) */
.bucket-photo-wrap {
  width: 100%; height: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 80% at 50% 40%, #241f2e 0%, #0d0b12 100%);
  overflow: hidden;
}
.bucket-photo-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 25%, rgba(255,255,255,0.07), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.bucket-photo {
  width: 82%; height: 82%;
  object-fit: contain;
  transition: transform var(--t-mid), filter var(--t-mid);
  position: relative; z-index: 2;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.7)) drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.product-card:hover .bucket-photo {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,0.85));
}

/* No-mockup products — clean branded colour panel (no fake bucket) */
.product-thumb:has(.bucket-noimg) { background: #0d0b12; padding: 0; }
.product-thumb:has(.bucket-noimg)::before { display: none; }
.bucket-noimg {
  width: 100%; height: 100%;
  aspect-ratio: 1/1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 26px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 60% at 50% 26%, color-mix(in srgb, var(--bkt-accent), #ffffff 16%), transparent 72%),
    linear-gradient(165deg, var(--bkt-accent) 0%, var(--bkt-primary) 100%);
}
.bucket-noimg::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.08; mix-blend-mode: overlay;
  pointer-events: none;
}
.bucket-noimg-label {
  position: relative; z-index: 1;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.72);
}
.bucket-noimg-name {
  position: relative; z-index: 1;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.product-card:hover .bucket-noimg-name { transform: none; }

/* ============================================================
   20. FONT & HERO TYPOGRAPHY REFINEMENTS
   ============================================================ */
/* Larger, more dramatic hero headline */
.hero h1 {
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero h1 .stack { display: block; }
.hero-content .eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
}
.hero p.lead {
  font-size: 1.18rem;
  line-height: 1.65;
  max-width: 46ch;
}

/* Improved section heading */
.section-head h2 { letter-spacing: -0.03em; }

/* Better eyebrow across the board */
.eyebrow { font-size: 11.5px; letter-spacing: 0.26em; }

/* Page hero h1 larger */
.page-hero h1 { font-size: clamp(3rem, 7vw, 5.8rem); line-height: 0.97; letter-spacing: -0.035em; }

/* ============================================================
   21. HEADER IMPROVEMENTS
   ============================================================ */
/* Taller logo image for better visibility */
.logo img { height: 48px; width: 48px; }
.logo-text .name { font-size: 18px; letter-spacing: -0.02em; }

/* Scrolled header gets a subtle border-bottom paint-stroke colour */
.site-header.scrolled::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red-2), var(--gold), var(--blue-2), var(--red-2));
  background-size: 200% 100%;
  animation: headerLine 6s linear infinite;
  opacity: 0.6;
}
@keyframes headerLine { to { background-position: -200% 0; } }

/* ============================================================
   AMBIENT FLOATING PAINT BLOBS
   ============================================================
   Drop a <div class="cp-amb"></div> into any section that feels
   too white/empty. Adds 5 softly-drifting brand-colour blobs at
   low opacity. No content reflow — pure decoration.
   The blobs slowly drift on long-period transform animations
   (cheap on GPU, no blur recomputation each frame).
   ============================================================ */

.cp-amb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* If you parent it to a non-positioned element, force a stacking context: */
.cp-amb-parent { position: relative; isolation: isolate; }
.cp-amb-parent > .cp-amb { z-index: 0; }
.cp-amb-parent > :not(.cp-amb) { position: relative; z-index: 1; }

.cp-amb::before,
.cp-amb::after,
.cp-amb i {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.16;
  will-change: transform;
}
/* Blob 1 — red, upper-left */
.cp-amb::before {
  width: 360px; height: 360px;
  top: -120px; left: -120px;
  background: #d92843;
  animation: cpAmbDriftA 24s ease-in-out infinite alternate;
}
/* Blob 2 — gold, bottom-right */
.cp-amb::after {
  width: 420px; height: 420px;
  bottom: -150px; right: -140px;
  background: #b8934a;
  animation: cpAmbDriftB 28s ease-in-out infinite alternate;
}
/* Three smaller inline-blob elements for spread + variety */
.cp-amb i {
  display: block;
}
.cp-amb i.b1 {
  width: 260px; height: 260px;
  top: 30%; right: 18%;
  background: #1e3a8a;
  opacity: 0.12;
  animation: cpAmbDriftC 22s ease-in-out infinite alternate;
}
.cp-amb i.b2 {
  width: 220px; height: 220px;
  bottom: 24%; left: 12%;
  background: #166534;
  opacity: 0.10;
  animation: cpAmbDriftD 26s ease-in-out infinite alternate;
}
.cp-amb i.b3 {
  width: 180px; height: 180px;
  top: 12%; right: 30%;
  background: #6b1f6e;
  opacity: 0.09;
  animation: cpAmbDriftE 30s ease-in-out infinite alternate;
}

@keyframes cpAmbDriftA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes cpAmbDriftB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-80px, -50px) scale(1.08); }
}
@keyframes cpAmbDriftC {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, 30px) scale(1.10); }
}
@keyframes cpAmbDriftD {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(50px, -30px) scale(1.06); }
}
@keyframes cpAmbDriftE {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 20px) scale(1.14); }
}

/* Soft variant for dense sections where colour would be too loud */
.cp-amb.cp-amb--soft::before { opacity: 0.10; }
.cp-amb.cp-amb--soft::after  { opacity: 0.10; }
.cp-amb.cp-amb--soft i       { opacity: 0.06; }

/* Dark-bg variant — boost opacity slightly so blobs read */
[data-theme="dark"] .cp-amb::before,
[data-theme="dark"] .cp-amb::after { opacity: 0.20; }
[data-theme="dark"] .cp-amb i      { opacity: 0.16; }

@media (prefers-reduced-motion: reduce) {
  .cp-amb::before,
  .cp-amb::after,
  .cp-amb i { animation: none !important; }
}
@media (max-width: 720px) {
  /* Mobile: keep 2 of the 5 to avoid mobile-GPU strain */
  .cp-amb i.b2,
  .cp-amb i.b3 { display: none; }
  .cp-amb::before { width: 280px; height: 280px; }
  .cp-amb::after  { width: 320px; height: 320px; }
}

/* ============================================================
   MOBILE RESPONSIVENESS POLISH PASS
   Catches small clashes / overflows / cramped layouts that
   could otherwise show up only on certain device widths.
   ============================================================ */

/* Hero on mobile — keep brand stage centred + bucket visible */
@media (max-width: 1023px) {
  body[data-page="home"] .lp-pour {
    min-height: 360px;
    padding-top: 24px;
  }
  /* Deliberately empty. This used to flip the brand stage to
     position:relative on mobile — see the note in css/landing.css. The
     stage is absolute and spans the hero column at every width now. */
  body[data-page="home"] .lp-hero-grid {
    gap: clamp(20px, 4vw, 40px);
  }
  body[data-page="home"] .lp-hero-h1 {
    font-size: clamp(2.4rem, 9vw, 4rem);
  }
  /* Side-gradient hero scrim — switch to vertical on mobile so
     headline + bucket both sit on darkened ground. Lifted so the
     room photo still reads through the scrim. */
  .lp-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(11,10,16,0.20) 0%,
        rgba(11,10,16,0.42) 45%,
        rgba(11,10,16,0.72) 100%) !important;
  }
  [data-theme="light"] .lp-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(250,244,236,0.35) 0%,
        rgba(250,244,236,0.65) 45%,
        rgba(250,244,236,0.92) 100%) !important;
  }
}

/* Nav: brand wordmark + first nav link tighter on mid widths */
@media (min-width: 1024px) and (max-width: 1180px) {
  .cp-nav-inner { gap: 14px; }
  .cp-link { padding: 10px 10px; font-size: 13.5px; }
}

/* Featured product grid: ensure no overflow on small tablets */
@media (max-width: 900px) {
  .lp-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 520px) {
  .lp-featured-grid { grid-template-columns: 1fr; }
}

/* About hero on mobile — image stacks under copy cleanly */
@media (max-width: 900px) {
  .ab-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .ab-hero-media { max-width: 520px; margin: 0 auto; aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  .ab-hero-media { aspect-ratio: 5/4; }
  .ab-hero-badge { bottom: 14px; left: 14px; right: 14px; }
  .ab-hero-badge .cap { font-size: 0.95rem; }
}

/* About story on mobile — two cols become one, lead drop-cap stays */
@media (max-width: 800px) {
  .ab-story { grid-template-columns: 1fr; gap: 30px; }
  .ab-story-col .pullquote { font-size: 1.2rem; }
}

/* About timeline becomes vertical on mobile */
@media (max-width: 900px) {
  .ab-timeline { grid-template-columns: 1fr; gap: 20px; }
  .ab-timeline::before { display: none; }
  .ab-tl-item { padding: 18px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; }
  .ab-tl-item .dot { margin-bottom: 12px; }
}

/* About process: 3 cards become 1-col on mobile */
@media (max-width: 720px) {
  .ab-process { grid-template-columns: 1fr; }
}

/* About markets: clean wrap at intermediate width */
@media (min-width: 720px) and (max-width: 900px) {
  .ab-markets { grid-template-columns: repeat(2, 1fr); }
}

/* About beyond-paint mosaic — keep tidy on mobile */
@media (max-width: 600px) {
  .ab-beyond-mosaic { aspect-ratio: 4 / 3; }
  .ab-beyond-mosaic img.m1,
  .ab-beyond-mosaic img.m2,
  .ab-beyond-mosaic img.m3,
  .ab-beyond-mosaic img.m4 { transform: none; }
}

/* Why Cloud Paints — better wrap on narrow tablets */
@media (min-width: 720px) and (max-width: 1023px) {
  .lp-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Projects modal — no clashing scroll on mobile */
@media (max-width: 700px) {
  .pj-modal-panel { max-height: 92vh; overflow-y: auto; }
  .pj-modal-body { padding: 22px; }
}

/* Inspiration filter bar wraps cleanly */
@media (max-width: 900px) {
  .in-filter-bar { flex-wrap: wrap; gap: 14px; }
  .in-filter-group { width: 100%; }
}

/* Visualiser preview frame doesn't crush on narrow screens */
@media (max-width: 640px) {
  .vs-preview-frame { aspect-ratio: 4 / 3; }
  .vs-hex-row { flex-wrap: wrap; }
  .vs-hex-row input { min-width: 0; }
}

/* Services skill grid: 1 col on narrow phones */
@media (max-width: 520px) {
  .sv-painters-grid { grid-template-columns: 1fr; max-width: none; }
}

/* Surface tile drips — hide on extra-small screens (visual noise) */
@media (max-width: 480px) {
  .pp-tile-drip { display: none; }
}

/* Lightbox close button — keep above other UI */
@media (max-width: 600px) {
  .in-lb-close { top: 12px; right: 12px; }
}

/* Footer columns wrap properly */
@media (max-width: 720px) {
  .footer-grid { gap: 28px; }
}

/* Hero CTAs don't crowd on small screens */
@media (max-width: 420px) {
  .lp-hero-ctas { gap: 10px; }
  .lp-hero-ctas .btn-pour,
  .lp-hero-ctas .btn-ghost-d {
    width: 100%; justify-content: center; padding: 14px 20px;
    font-size: 14px;
  }
}

/* Universal: prevent horizontal scroll from rounding-error overflow */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* ============================================================
   SITE-WIDE MICRO-POLISH
   Surgical refinements — no layout changes. Touches selection
   colour, link hover affordance, scrollbar, button active state,
   focus rings on form fields, print rules.
   ============================================================ */

/* Selection: warm cream-on-red so the brand reads in any text */
::selection {
  background: var(--red-2, #d92843);
  color: #f5f1e8;
  text-shadow: none;
}

/* Custom scrollbar — slim, brand-flavoured, only where the page is
   not Lenis-managed (Lenis hides the native scrollbar on desktop). */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 35%, transparent);
  background-clip: content-box;
}

/* Text links inside prose: subtle underline-grow on hover. Skips
   links that already have their own styling (buttons, nav, chips). */
.lp-about p a:not(.btn):not(.btn-outline):not(.btn-pour):not(.btn-ghost-d),
.lp-why p a:not(.btn):not(.btn-outline):not(.btn-pour):not(.btn-ghost-d),
.cp-footer-col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(.4,0,.2,1), color var(--t-fast);
}
.lp-about p a:not(.btn):not(.btn-outline):not(.btn-pour):not(.btn-ghost-d):hover,
.lp-why p a:not(.btn):not(.btn-outline):not(.btn-pour):not(.btn-ghost-d):hover,
.cp-footer-col a:hover { background-size: 100% 1px; }

/* Buttons: tactile active-state. Lifts cancel on press. */
.btn:active,
.btn-pour:active,
.btn-outline:active,
.btn-ghost-d:active,
.icon-btn:active { transform: translateY(1px) scale(0.985); }

.btn[disabled],
.btn-pour[disabled],
.btn-outline[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Icon button hover: a soft brand-tinted ring instead of bare colour
   shift. Same shape as the existing icon-btn, no layout change. */
.icon-btn {
  position: relative;
  transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover {
  background-color: color-mix(in srgb, var(--red-2, #d92843) 12%, transparent);
}

/* Form inputs: visible focus glow without changing layout */
.field input:focus, .field textarea:focus, .field select:focus,
.cart-field input:focus, .cart-field textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-2, #d92843) 22%, transparent);
}

/* Images: a subtle background placeholder until they decode. Helps
   prevent a flash of section colour through unloaded photos. Skips
   transparent PNGs (logos, buckets, splatter, drips, icons). */
img { background-color: color-mix(in srgb, var(--surface) 70%, transparent); }
img[src*="logo"], img[src*="splatter"], img[src*="bucket"],
img[src*="drip"], img[src*="icon"], img[src$=".png"] {
  background-color: transparent;
}

/* Anchor jumps land below the sticky header (the header is ~86px).
   Applied at root so every in-page link benefits. */
html { scroll-padding-top: 96px; }

/* ============================================================
   PRINT STYLES — render readable, ink-friendly pages
   ============================================================ */
@media print {
  :root { background: #fff !important; color: #111 !important; }
  body { background: #fff !important; color: #111 !important; }
  .site-header, .cp-footer, #cpLoader, .cart-drawer, .nav-backdrop,
  .lp-marquee-wrap, .lp-scroll-cue, .cp-amb, .lp-feat-deco,
  .vs-cta-wrap, .skip-to-content { display: none !important; }
  a { color: #111 !important; text-decoration: underline; }
  img, .lp-about-bg, .lp-hero-bg { filter: none !important; }
  .lp-about-bg, .lp-hero-bg-img { display: none !important; }
  h1, h2, h3 { page-break-after: avoid; }
  p, blockquote { page-break-inside: avoid; }
}

/* ============================================================
   Mobile legibility floor — forms only
   ============================================================
   The small uppercase eyebrow is a deliberate editorial device and
   it stays as it is. Form furniture is different: a field label you
   have to read before typing, and the consent line under a submit
   button, are the two places on the site where 11px on a phone
   costs someone something. Both go to 12px below the tablet
   breakpoint, which is the floor Google measures against too.

   Letter-spacing comes down a touch at the same time — uppercase at
   12px with 0.14em set is wider than the field it labels on a
   360px screen. */
@media (max-width: 767px) {
  .ct-field label,
  .pd-calc-field label,
  .cart-field label {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .ct-form-card .fineprint {
    font-size: 12px;
    line-height: 1.5;
  }
}