/* ==========================================================================
   GAURAV INDUSTRIES · STYLES
   00 Fonts
   01 Tokens
   02 Reset & base
   03 Layout primitives
   04 Type & eyebrows
   05 Buttons & chips
   06 Header & navigation
   07 Sticky action bar
   08 Hero
   09 Stat band
   10 Category cards
   11 Product cards & grid
   12 Filters & search
   13 Video sections
   14 Consumables & industries
   15 Why / works / CEO
   16 Location & map
   17 Forms & modal
   18 Gallery & lightbox
   19 Footer
   20 Page headers & inner pages
   21 Motion & reduced motion
   22 Print (catalogue)
   ========================================================================== */

/* ==========================================================================
   00 · FONTS — self-hosted, no third-party requests
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root {
  --ink: #0b1332;
  --ink-soft: #1b2450;
  --ink-70: rgba(11, 19, 50, 0.7);
  --orange: #ff6b1a;
  --orange-deep: #e2540a;
  --orange-tint: #fff1e8;
  /* Small orange text on light surfaces: #FF6B1A (2.7:1) and #E2540A (3.6:1) both
     fail WCAG AA, so all orange *text* on cream/white/tint uses this instead.
     --orange and --orange-deep stay exactly as specified, for fills and hovers. */
  --orange-text: #b84208;
  --blue: #2b5fd9;
  /* Brand stripe only — never a UI accent. Orange stays the CTA colour. */
  --red: #d93025;
  --blue-tint: #edf2fe;
  --cream: #fbf7f0;
  --surface: #ffffff;
  --line: #e8e0d4;
  --muted: #5a6478;
  --body: #2a3145;
  --whatsapp: #25d366;

  --font-head: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow: 0 1px 2px rgba(11, 19, 50, 0.04), 0 8px 24px rgba(11, 19, 50, 0.06);
  --shadow-lift: 0 2px 4px rgba(11, 19, 50, 0.05), 0 16px 38px rgba(11, 19, 50, 0.1);

  --container: 1200px;
  --pad-x: 20px;
  --section-y: clamp(56px, 9vw, 120px);
  --bar-h: 64px;
  --header-h: 68px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --pad-x: 40px;
    --header-h: 76px;
  }
}

/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

body.is-locked { overflow: hidden; }

img,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

a {
  color: var(--orange-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* ==========================================================================
   03 · LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--cream); }
.section--white { background: var(--surface); }
.section--ink { background: var(--ink); color: #dbe1f0; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

.section--ink h2,
.section--ink h3 { color: #fff; }

/* Subtle ink-dot texture for dark panels */
.dotted {
  position: relative;
  isolation: isolate;
}
.dotted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.35;
  pointer-events: none;
}

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Diagonal three-line stripe motif — echoes the machine livery */
.stripe {
  display: inline-flex;
  gap: 3px;
  transform: skewX(-18deg);
}
.stripe i {
  display: block;
  width: 5px;
  height: 16px;
  background: var(--orange);
  border-radius: 1px;
}
.stripe i:nth-child(2) { background: var(--blue); }
.stripe i:nth-child(3) { background: var(--red); }
.stripe--rule {
  display: block;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--orange) 0 34%,
    var(--blue) 34% 66%,
    var(--red) 66% 100%
  );
  border: 0;
  margin: 0;
}

/* ==========================================================================
   04 · TYPE & EYEBROWS
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.12;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.75rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); }
.section--ink .lead,
.section--ink p { color: #b9c2d9; }
small, .small { font-size: 0.875rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--orange);
  flex: none;
}
.section--ink .eyebrow,
.hero .eyebrow { color: var(--orange); }

.section-head {
  position: relative;
  margin-bottom: clamp(28px, 4vw, 48px);
  max-width: 760px;
}
.section-head p { margin-bottom: 0; }

/* Numbered section index — big ghosted numerals, desktop only */
.section-head[data-index]::after {
  content: attr(data-index);
  display: none;
}
@media (min-width: 1024px) {
  .section-head[data-index]::after {
    display: block;
    position: absolute;
    right: -40px;
    top: -46px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 7.5rem;
    line-height: 1;
    color: rgba(11, 19, 50, 0.06);
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }
  .section--ink .section-head[data-index]::after { color: rgba(255, 255, 255, 0.07); }
  .section-head > * { position: relative; z-index: 1; }
}

.num { font-variant-numeric: tabular-nums; }

/* Unresolved content awaiting client confirmation */
.todo-client {
  border-bottom: 1px dashed var(--orange);
  padding-bottom: 1px;
}

/* ==========================================================================
   05 · BUTTONS & CHIPS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
    border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn svg { flex: none; }

.btn--primary { background: var(--orange); color: var(--ink); }
.btn--secondary { background: var(--ink); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--wa { background: var(--whatsapp); color: #06331a; }
.btn--sm { min-height: 42px; padding: 9px 16px; font-size: 0.875rem; }
.btn--lg {
  min-height: 58px;
  padding: 17px 30px;
  font-size: 1rem;
  letter-spacing: 0.005em;
  border-width: 2px;
}
@media (min-width: 768px) {
  .btn--lg { min-height: 64px; padding: 19px 38px; font-size: 1.0625rem; }
}
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--orange-deep); }
  .btn--secondary:hover { background: var(--ink-soft); }
  .btn--ghost:hover { border-color: var(--orange); color: var(--orange-text); }
  .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.16); }
  .btn--wa:hover { background: #1eb955; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--orange-tint);
  color: var(--orange-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip--blue { background: var(--blue-tint); color: #1c46a8; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   06 · HEADER & NAVIGATION
   ========================================================================== */
.utility {
  display: none;
  background: var(--ink);
  color: #a8b3cf;
  font-size: 0.78rem;
}
@media (min-width: 1024px) {
  .utility { display: block; }
  .utility .container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    align-items: center;
    padding-block: 8px;
  }
  .utility a {
    color: #cfd7ea;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .utility a:hover { color: #fff; text-decoration: underline; }
  .utility span { display: inline-flex; align-items: center; gap: 7px; }
  .utility .utility__gst { margin-left: auto; font-variant-numeric: tabular-nums; }
}

.header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 180ms var(--ease);
}
.header.is-scrolled { box-shadow: 0 6px 22px rgba(11, 19, 50, 0.08); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand img { width: 40px; height: 40px; }
@media (min-width: 768px) { .brand img { width: 44px; height: 44px; } }
.brand__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.94rem, 2.6vw, 1.12rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  display: block;
  white-space: nowrap;
}
.brand__sub {
  display: none;
  font-size: 0.68rem;
  color: var(--orange-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 768px) { .brand__sub { display: block; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 30px; }
  .nav a {
    position: relative;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding-block: 6px;
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms var(--ease);
  }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--orange-text); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 1024px) { .hamburger { display: none; } }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 20px var(--pad-x) 40px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease), visibility 200ms var(--ease);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.mobile-menu__top .brand { color: #fff; }
.mobile-menu__close {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
}
.mobile-menu nav a {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu nav a[aria-current="page"] { color: var(--orange); }
.mobile-menu__foot { margin-top: auto; padding-top: 28px; }
.mobile-menu__foot a { color: #c9d2e8; display: block; margin-bottom: 8px; text-decoration: none; font-size: 0.95rem; }

/* ==========================================================================
   07 · STICKY ACTION BAR — present on every page, every size
   ========================================================================== */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(11, 19, 50, 0.18);
}
.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--bar-h);
  padding: 8px 4px;
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 180ms var(--ease);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { flex: none; }
.actionbar__wa { color: var(--whatsapp) !important; }
.actionbar__label-long { display: none; }
@media (min-width: 400px) {
  .actionbar__label-short { display: none; }
  .actionbar__label-long { display: inline; }
}
@media (hover: hover) {
  .actionbar a:hover { background: rgba(255, 255, 255, 0.08); }
}

@media (min-width: 1024px) {
  .actionbar {
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(640px, calc(100% - 48px));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(11, 19, 50, 0.28);
  }
  .actionbar a { flex-direction: row; gap: 9px; font-size: 0.875rem; min-height: 58px; }
}

/* ==========================================================================
   08 · HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video { z-index: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 19, 50, 0.35), rgba(11, 19, 50, 0.55));
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.16;
}
.hero__inner {
  padding-block: clamp(96px, 16vw, 150px) clamp(40px, 7vw, 84px);
  position: relative;
}
/* A soft ink pool that follows the copy block only. It keeps the small type
   readable while the rest of the frame stays at the light scrim values above,
   so the footage still reads as footage. */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -6% -30% -14% -60%;
  z-index: -1;
  background: radial-gradient(
    115% 85% at 22% 72%,
    rgba(11, 19, 50, 0.5) 0%,
    rgba(11, 19, 50, 0.3) 42%,
    rgba(11, 19, 50, 0) 72%
  );
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero__inner::before {
    inset: -4% -20% -10% -20%;
    background: radial-gradient(
      130% 70% at 50% 78%,
      rgba(11, 19, 50, 0.52) 0%,
      rgba(11, 19, 50, 0.32) 48%,
      rgba(11, 19, 50, 0) 78%
    );
  }
}
/* Keep the copy block clear of the sticky action bar: a full-bleed 64px bar on
   mobile, a floating pill 24px off the bottom on desktop. */
@media (max-width: 1023px) {
  .hero__inner { padding-bottom: clamp(88px, 14vw, 112px); }
}
@media (min-width: 1024px) {
  .hero__inner { padding-bottom: clamp(104px, 10vw, 148px); }
}
/* The scrim is deliberately light, so hero text carries its own shadow (ink
   token at low alpha) instead of relying on a heavy overlay. */
.hero .eyebrow { text-shadow: 0 1px 3px rgba(11, 19, 50, 0.75), 0 2px 12px rgba(11, 19, 50, 0.85); }
.hero h1 {
  color: #fff;
  max-width: 13ch;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(11, 19, 50, 0.45), 0 6px 34px rgba(11, 19, 50, 0.6);
}
.hero__sub {
  color: #fff;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.8vw, 1.3rem);
  /* Sits directly above the hero CTA row. */
  margin-bottom: clamp(22px, 3vw, 30px);
  text-shadow: 0 1px 3px rgba(11, 19, 50, 0.5), 0 4px 22px rgba(11, 19, 50, 0.6);
}

/* Hero CTA row: primary quote button plus a light ghost button that reads on
   the footage, sitting between the sub-headline and the footnote line. */
.hero__cta { margin-bottom: clamp(20px, 2.8vw, 28px); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #b6c0da;
  font-size: 0.84rem;
}
/* Hero variant: a quiet one-line footnote rather than a second content block */
.trust--slim {
  padding-top: 0;
  border-top: 0;
  gap: 6px 14px;
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(11, 19, 50, 0.7), 0 2px 12px rgba(11, 19, 50, 0.85);
}
.trust--slim span { gap: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 18px; }
.trust span:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

/* ==========================================================================
   09 · STAT BAND
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ink);
  padding: clamp(20px, 3vw, 34px) clamp(16px, 2.4vw, 28px);
}
.stat__value {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__value span { color: var(--orange); }
.stat__label {
  margin-top: 10px;
  font-size: 0.83rem;
  color: #a3aecb;
  line-height: 1.4;
}

/* ==========================================================================
   10 · CATEGORY CARDS
   ========================================================================== */
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.cat-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.cat-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 180ms var(--ease);
}
.cat-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.cat-card h3 { margin-bottom: 6px; font-size: 1.05rem; }
.cat-card p { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }
.cat-card__count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cat-card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--orange-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat-card__link::after { content: "→"; transition: transform 180ms var(--ease); }

@media (hover: hover) {
  .cat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 107, 26, 0.4);
    box-shadow: var(--shadow-lift);
  }
  .cat-card:hover .cat-card__media img { transform: scale(1.03); }
  .cat-card:hover .cat-card__link::after { transform: translateX(3px); }
}

/* ==========================================================================
   11 · PRODUCT CARDS & GRID
   ========================================================================== */
.product-grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-grid--featured { grid-template-columns: 1fr; }
@media (min-width: 560px) { .product-grid--featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .product-grid--featured { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 180ms var(--ease);
}
.card__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.card__cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.card h3 { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.card__blurb { font-size: 0.875rem; color: var(--muted); margin: 0; }
/* Pushed to the foot of the card so the CTA row lines up across a grid
   whatever length the blurb runs to. */
.card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.card__actions .btn { flex: 1; }
.card__actions .btn--wa {
  flex: none;
  width: 48px;
  padding-inline: 0;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 107, 26, 0.4);
    box-shadow: var(--shadow-lift);
  }
  .card:hover .card__media img { transform: scale(1.03); }
}


/* ==========================================================================
   12 · FILTERS & SEARCH
   ========================================================================== */
.filterbar {
  position: sticky;
  top: var(--header-h);
  z-index: 700;
  background: rgba(251, 247, 240, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-block: 12px;
}
.filterbar__row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  flex: 1 1 100%;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) { .filter-pills { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; } }
.pill {
  flex: none;
  padding: 8px 15px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease);
}
.pill[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
@media (hover: hover) {
  .pill:hover { border-color: var(--orange); color: var(--orange-text); }
  .pill[aria-pressed="true"]:hover { color: #fff; }
}

.search {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
}
.search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--body);
}
.search input::placeholder { color: #6b7488; }

.result-count {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 20px 0 18px;
}
.empty-state {
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { margin-inline: auto; }

/* ==========================================================================
   13 · VIDEO SECTIONS
   ========================================================================== */
.video-grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }

/* Cards keep one ratio so the six-up grid stays even whatever the source is. */
.video-card { display: flex; flex-direction: column; margin: 0; }
.video-card figcaption { margin-top: auto; }

.video-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.section--ink .video-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.video-card video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #05091c;
}
/* A genuinely portrait card: the clip keeps its own 480x848 shape inside a
   3:4 container and letterboxes onto the dark bed rather than being cropped
   or stretched to match the landscape cells. */
.video-card--portrait video { aspect-ratio: 3 / 4; object-fit: contain; }
/* Mixed-ratio grid: the portrait card occupies two rows so the landscape cells
   beside it stay their natural height instead of leaving a void in the row. */
@media (min-width: 640px) {
  .video-grid--mixed .video-card--portrait { grid-row: span 2; }
}

/* Portrait source: letterbox it rather than crop the print area out of frame */
.video-card--tall video { object-fit: contain; }
.video-card figcaption {
  padding: 14px 16px 16px;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.section--ink .video-card figcaption { color: #b9c2d9; }
.video-card > figure { margin: 0; }

/* ==========================================================================
   14 · CONSUMABLES & INDUSTRIES
   ========================================================================== */
.tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 22px 20px 24px;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.tile h3 { font-size: 1.05rem; margin-bottom: 8px; color: #fff; }
.tile p { font-size: 0.88rem; color: #aab4d0; margin: 0; }
.tile__mark { margin-bottom: 14px; }
@media (hover: hover) {
  .tile:hover { border-color: rgba(255, 107, 26, 0.55); transform: translateY(-3px); }
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }
.industry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.industry svg { color: var(--orange-text); }
@media (hover: hover) {
  .industry:hover { border-color: rgba(255, 107, 26, 0.4); transform: translateY(-3px); }
}

/* ==========================================================================
   15 · WHY / WORKS / CEO
   ========================================================================== */
.why-list {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: 1fr;
  counter-reset: why;
}
@media (min-width: 760px) { .why-list { grid-template-columns: repeat(2, 1fr); } }

.why {
  position: relative;
  counter-increment: why;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 2.8vw, 32px) clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.why::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--orange) 0 34%, var(--blue) 34% 66%, var(--red) 66%);
}
.why__icon {
  display: block;
  color: var(--orange-text);
  margin-bottom: 16px;
}
.why h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1.28;
  margin-bottom: 10px;
}
.why h3::before {
  content: "0" counter(why);
  display: block;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 6px;
}
.why p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}
@media (hover: hover) {
  .why { transition: transform 180ms var(--ease), border-color 180ms var(--ease); }
  .why:hover { transform: translateY(-3px); border-color: rgba(255, 107, 26, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
  .why:hover { transform: none; }
}

.split {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .split { grid-template-columns: 0.85fr 1.15fr; } }
.split--wide { }
@media (min-width: 900px) { .split--wide { grid-template-columns: 1fr 1fr; } }

.portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-width: 420px;
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--orange) 0 34%, var(--blue) 34% 66%, var(--red) 66%);
}
.signature {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.signature strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--ink);
  display: block;
}
.signature span { font-size: 0.85rem; color: var(--muted); }

/* Fact table */
.fact-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 0.92rem;
}
.fact-table th,
.fact-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.fact-table tr:last-child th,
.fact-table tr:last-child td { border-bottom: 0; }
.fact-table th {
  width: 38%;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-body);
  background: #fdfbf7;
}
.fact-table td { color: var(--muted); font-variant-numeric: tabular-nums; }

/* A table cannot shrink below its min-content width, which used to push the
   whole grid column — and the page — wider than the viewport at 320px. */
.split > * { min-width: 0; }
@media (max-width: 430px) {
  .fact-table { font-size: 0.84rem; }
  .fact-table th,
  .fact-table td { padding: 11px 10px; }
  .fact-table th { width: 42%; }
  .fact-table td { overflow-wrap: anywhere; }
}

/* Numbered process steps */
.steps { display: grid; gap: clamp(18px, 3vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 20px 24px;
  box-shadow: var(--shadow);
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange-text);
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   16 · LOCATION & MAP
   ========================================================================== */
.map-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .map-wrap { aspect-ratio: 16 / 10; } }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

address { font-style: normal; }
.addr-block { margin-bottom: 24px; }
.addr-block h3 { font-size: 1rem; margin-bottom: 6px; }
.addr-block address { color: var(--muted); font-size: 0.95rem; max-width: 42ch; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.contact-list svg { flex: none; color: var(--orange-text); margin-top: 3px; }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--orange-text); text-decoration: underline; }
.contact-list span { color: var(--muted); }

/* ==========================================================================
   17 · FORMS & MODAL
   ========================================================================== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3.4vw, 36px);
  box-shadow: var(--shadow);
}
.field-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.field label .req { color: var(--orange-text); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fdfcfa;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--body);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { min-height: 116px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #6b7488; opacity: 1; }
.field select { appearance: none; background-image: none; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.14);
  outline: none;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--orange-deep); }
.field-error {
  font-size: 0.8rem;
  color: var(--orange-text);
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 6px;
}
.field-error.is-shown { display: flex; }
.field-error::before { content: "!"; font-weight: 700; }

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.form-actions .btn { flex: 1 1 200px; }
.form-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.form-success {
  display: none;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--orange-tint);
  border: 1px solid rgba(255, 107, 26, 0.34);
}
.form-success.is-shown { display: block; }
.form-success h3 { font-size: 1.05rem; margin-bottom: 4px; }
.form-success p { font-size: 0.9rem; margin: 0; color: var(--body); }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 19, 50, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88svh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(11, 19, 50, 0.4);
  padding: clamp(20px, 3.4vw, 34px);
  animation: modal-in 200ms var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal__panel h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); padding-right: 44px; }
.modal__panel .form-card {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* ==========================================================================
   18 · GALLERY & LIGHTBOX
   ========================================================================== */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.gallery-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 180ms var(--ease);
}
.gallery-item--tall { grid-row: span 2; }
.gallery-item--tall img { aspect-ratio: 1 / 2.06; }
@media (hover: hover) {
  .gallery-item:hover { transform: translateY(-3px); border-color: rgba(255, 107, 26, 0.4); }
  .gallery-item:hover img { transform: scale(1.03); }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 28, 0.94);
  padding: 16px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(96vw, 1100px);
  max-height: 82svh;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lightbox__cap {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  color: #cfd6e8;
  font-size: 0.88rem;
  padding-inline: 70px;
}
.lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 12px; right: 12px; }

/* ==========================================================================
   19 · FOOTER
   ========================================================================== */
.footer {
  background: var(--ink);
  color: #a8b3cf;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, var(--orange) 0 34%, var(--blue) 34% 66%, var(--red) 66%) 1;
  padding-top: clamp(44px, 6vw, 76px);
  font-size: 0.92rem;
}
.footer__grid {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.footer h2 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: #b6c0da; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand img { width: 56px; height: 56px; }
.footer__brand strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: #fff;
  display: block;
  line-height: 1.2;
}
.footer__brand span { font-size: 0.8rem; color: #8e9ab8; }
.footer address { color: #a8b3cf; line-height: 1.6; margin-bottom: 14px; font-size: 0.88rem; }
.footer__gst { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #8e9ab8;
}

/* ==========================================================================
   20 · PAGE HEADERS & INNER PAGES
   ========================================================================== */
.page-head {
  background: var(--ink);
  color: #c3ccdf;
  padding-block: clamp(40px, 7vw, 74px);
  position: relative;
  isolation: isolate;
}
.page-head h1 { color: #fff; margin-bottom: 12px; }
.page-head p { color: #adb7d1; margin: 0; }
.crumbs {
  font-size: 0.8rem;
  color: #8e9ab8;
  margin-bottom: 16px;
}
.crumbs a { color: #b6c0da; text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: #fff; }

.cta-band { text-align: left; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { max-width: 56ch; }

.photo-frame {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.photo-frame img { width: 100%; display: block; }
/* Tiled photo rows mix landscape and portrait sources — crop to a common ratio
   so the row of cards lines up. */
.photo-frame--tile img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo-frame--tile { display: flex; flex-direction: column; }
.photo-frame--tile figure { display: flex; flex-direction: column; height: 100%; }
.photo-frame--tile figcaption { margin-top: auto; }
.photo-frame figcaption {
  padding: 12px 16px 14px;
  font-size: 0.83rem;
  color: var(--muted);
}
.photo-frame figure { margin: 0; }

.bullets { padding-left: 1.1em; margin: 0 0 1.1em; color: var(--muted); }
.bullets li { margin-bottom: 8px; max-width: 62ch; }
.bullets::marker { color: var(--orange); }

/* ==========================================================================
   21 · MOTION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   22 · PRINT / CATALOGUE
   ========================================================================== */
.print-hint {
  background: var(--ink);
  color: #fff;
  padding: 14px var(--pad-x);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.print-hint .btn { min-height: 42px; }

@media print {
  .print-hint,
  .actionbar,
  .header,
  .utility,
  .footer,
  .skip-link,
  .mobile-menu { display: none !important; }
  body { padding-bottom: 0; background: #fff; font-size: 10pt; }
}