/* ===== tokens.css ===== */
/* ------------------------------------------------------------------ *
   Asia Packaging — design tokens

   Palette sampled directly from the supplied logo:
   navy wordmark #01225B, droplet gradient #0D59C0 -> #0A93DC.
 * ------------------------------------------------------------------ */

:root {
  /* --- brand ------------------------------------------------------ */
  --navy-950: #010e27;
  --navy-900: #011435;
  --navy-850: #011a48;
  --navy-800: #01225b; /* logo wordmark */
  --navy-700: #06306f;
  --navy-600: #0b3f8c;

  --blue-600: #0d59c0; /* droplet, dark stop */
  --blue-500: #1178d4;
  --cyan-400: #0a93dc; /* droplet, light stop */
  --cyan-300: #38b6f0;
  --cyan-200: #7fd0f7;

  /* the single accent motif, used for CTAs, rules and figures */
  --grad-drop: linear-gradient(135deg, var(--blue-600) 0%, var(--cyan-400) 100%);
  --grad-drop-soft: linear-gradient(135deg, rgba(13, 89, 192, 0.12), rgba(10, 147, 220, 0.12));
  --grad-navy: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);

  /* --- cool neutral ramp ------------------------------------------ */
  --n-0: #ffffff;
  --n-25: #fbfcfe;
  --n-50: #f5f8fc;
  --n-100: #eef2f8;
  --n-150: #e6ecf5;
  --n-200: #dbe3ef;
  --n-300: #c2cee1;
  --n-400: #94a3bd;
  --n-500: #64748f;
  --n-600: #47566f;
  --n-700: #313e54;
  --n-800: #1e2939;

  /* --- semantic --------------------------------------------------- */
  --ink: var(--navy-900);
  --ink-2: var(--n-600);
  --ink-3: var(--n-500);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --surface-3: var(--n-100);
  --line: var(--n-200);
  --line-strong: var(--n-300);

  /* damage-mechanism accents (moisture damage grid) */
  --rust: #b4541f;
  --mould: #4a7c46;
  --alert: #c2410c;
  --ok: #15803d;

  /* indicating silica gel, used in the colour-change visual */
  --gel-blue: #1d4ed8;
  --gel-pink: #f9a8d4;
  --gel-orange: #f97316;
  --gel-green: #6bbf7b;
  --gel-white: #f1f5f9;

  /* --- type ------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* fluid scale — clamp(min, preferred, max) */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);
  --t-xl: clamp(1.375rem, 0.8vw + 1.19rem, 1.75rem);
  --t-2xl: clamp(1.7rem, 1.3vw + 1.35rem, 2.25rem);
  --t-3xl: clamp(1.95rem, 2.1vw + 1.4rem, 2.85rem);
  --t-4xl: clamp(2.35rem, 2.9vw + 1.5rem, 3.6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  /* the logo wordmark is widely letter-spaced; headings echo it */
  --track-display: -0.02em;
  --track-eyebrow: 0.16em;

  /* --- space ------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  /* generous vertical rhythm between full-width bands */
  --band: clamp(3.5rem, 7vw, 7rem);
  --band-lg: clamp(4.5rem, 9vw, 9rem);

  /* --- layout ----------------------------------------------------- */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --wrap-wide: 1440px;
  --gutter: clamp(1.125rem, 4vw, 3rem);

  /* --- radii ------------------------------------------------------ */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- elevation — tinted navy, never neutral grey ---------------- */
  --sh-sm: 0 1px 2px rgba(1, 34, 91, 0.06), 0 1px 3px rgba(1, 34, 91, 0.05);
  --sh-md: 0 4px 12px rgba(1, 34, 91, 0.07), 0 2px 4px rgba(1, 34, 91, 0.04);
  --sh-lg: 0 14px 34px rgba(1, 34, 91, 0.1), 0 4px 10px rgba(1, 34, 91, 0.05);
  --sh-xl: 0 28px 64px rgba(1, 34, 91, 0.14), 0 8px 18px rgba(1, 34, 91, 0.06);
  --sh-glow: 0 10px 30px rgba(10, 147, 220, 0.28);

  /* --- motion ----------------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 140ms;
  --d-base: 240ms;
  --d-slow: 460ms;

  --header-h: 76px;
  --header-h-condensed: 62px;
}

/* Motion is decoration here, never information. Strip it entirely
   when the visitor has asked for that. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
  }
}


/* ===== base.css ===== */
/* ------------------------------------------------------------------ *
   Reset, document defaults and layout primitives
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* --- headings ----------------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  font-weight: 700;
}

h2 {
  font-size: var(--t-3xl);
  line-height: 1.12;
  font-weight: 650;
}

h3 {
  font-size: var(--t-xl);
}

h4 {
  font-size: var(--t-lg);
}

h5 {
  font-size: var(--t-md);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--blue-600);
  text-decoration-color: color-mix(in srgb, var(--blue-600) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: color var(--d-fast) var(--e-out),
    text-decoration-color var(--d-fast) var(--e-out);
}

a:hover {
  color: var(--cyan-400);
  text-decoration-color: currentColor;
}

ul,
ol {
  padding-left: 1.15rem;
}

li + li {
  margin-top: 0.35rem;
}

strong,
b {
  font-weight: 600;
  color: var(--ink);
}

small {
  font-size: var(--t-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--cyan-300);
  color: var(--navy-900);
}

/* --- focus -------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--navy-800);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--d-base) var(--e-out);
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* --- layout primitives -------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.wrap--wide {
  max-width: var(--wrap-wide);
}

.band {
  padding-block: var(--band);
}

.band--lg {
  padding-block: var(--band-lg);
}

.band--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.band--alt {
  background: var(--surface-2);
}

.band--line {
  border-top: 1px solid var(--line);
}

/* Dark technical band. Alternating these against light content is the
   main rhythm device across the site. */
.band--dark {
  background: var(--grad-navy);
  color: rgba(255, 255, 255, 0.74);
  position: relative;
  overflow: hidden;
}

.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4,
.band--dark h5 {
  color: #fff;
}

.band--dark a:not(.btn) {
  color: var(--cyan-200);
}

.band--dark strong {
  color: #fff;
}

/* Faint technical grid, echoing a drawing sheet. Purely atmospheric. */
.band--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

.band--dark > .wrap {
  position: relative;
  z-index: 1;
}

/* --- grid --------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.grid--auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

/* Deliberately asymmetric splits — the site avoids 50/50 everywhere. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--7-5 {
  grid-template-columns: 7fr 5fr;
}

.split--5-7 {
  grid-template-columns: 5fr 7fr;
}

.split--8-4 {
  grid-template-columns: 8fr 4fr;
}

.split--4-8 {
  grid-template-columns: 4fr 8fr;
}

.split--top {
  align-items: start;
}

@media (max-width: 900px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split--7-5,
  .split--5-7,
  .split--8-4,
  .split--4-8 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* --- utilities ---------------------------------------------------- */

.stack > * + * {
  margin-top: var(--s-4);
}

.stack-lg > * + * {
  margin-top: var(--s-6);
}

.stack-sm > * + * {
  margin-top: var(--s-2);
}

.flow > * + * {
  margin-top: 1.1em;
}

.center {
  text-align: center;
}

.measure {
  max-width: 62ch;
}

.measure-sm {
  max-width: 48ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

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

.lead {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-2);
}

.band--dark .lead {
  color: rgba(255, 255, 255, 0.8);
}

.muted {
  color: var(--ink-3);
}

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

.list-none {
  list-style: none;
  padding-left: 0;
}

.full-bleed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== components.css ===== */
/* ------------------------------------------------------------------ *
   Components
 * ------------------------------------------------------------------ */

/* --- eyebrow / section heading ------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--s-3);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--grad-drop);
  border-radius: 2px;
}

.band--dark .eyebrow {
  color: var(--cyan-300);
}

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head p {
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: var(--ink-2);
}

.band--dark .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
}

.section-head--split > div:first-child {
  max-width: 56ch;
}

/* --- buttons ------------------------------------------------------ */

.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out), background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--d-base) var(--e-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

/* primary carries the droplet gradient — the site's single accent */
.btn--primary {
  background: var(--grad-drop);
  position: relative;
}

.btn--primary:hover {
  box-shadow: var(--sh-glow);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--blue-500);
  background: var(--n-50);
  color: var(--blue-600);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--navy-800);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn--sm {
  padding: 0.6rem 1.1rem;
  font-size: var(--t-sm);
}

.btn--lg {
  padding: 1.05rem 2rem;
  font-size: var(--t-md);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.btn-row--center {
  justify-content: center;
}

/* text link with an arrow that travels on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--blue-600);
}

.link-arrow svg {
  width: 0.95em;
  height: 0.95em;
  transition: transform var(--d-base) var(--e-out);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* --- header ------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--header-h);
  transition: height var(--d-base) var(--e-out);
}

.header.is-stuck .header__bar {
  height: var(--header-h-condensed);
}

.header__logo {
  flex: none;
  display: block;
  text-decoration: none;
}

.header__logo img {
  height: 38px;
  width: auto;
  transition: height var(--d-base) var(--e-out);
}

.header.is-stuck .header__logo img {
  height: 32px;
}

.header__spacer {
  flex: 1;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  white-space: nowrap;
}

.header__phone svg {
  width: 15px;
  height: 15px;
  color: var(--blue-500);
}

.header__phone:hover {
  color: var(--blue-600);
}

/* --- primary nav + mega menu -------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--n-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.nav__link:hover {
  color: var(--navy-800);
  background: var(--n-50);
}

.nav__link svg {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition: transform var(--d-base) var(--e-out);
}

.nav__item[data-open="true"] .nav__link svg {
  transform: rotate(180deg);
}

/* active-page underline uses the droplet gradient */
.nav__link[aria-current="page"] {
  color: var(--navy-800);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-drop);
}

.mega {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(90vw, 940px);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out),
    visibility var(--d-base);
}

.nav__item[data-open="true"] .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__grid {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: repeat(var(--mega-cols, 2), minmax(200px, 1fr));
}

.mega__link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-out);
}

.mega__link:hover {
  background: var(--n-50);
}

.mega__link strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy-800);
}

.mega__link span {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 0.1rem;
}

.mega__foot {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
}

/* --- mobile nav --------------------------------------------------- */

.burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  flex: none;
}

.burger span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: background-color var(--d-fast) linear;
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform var(--d-base) var(--e-out);
}

.burger span::before {
  top: -5.5px;
}

.burger span::after {
  top: 5.5px;
}

.burger[aria-expanded="true"] span {
  background: transparent;
}

.burger[aria-expanded="true"] span::before {
  transform: translateY(5.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* The panel covers the whole viewport and clears the bar with padding rather
   than starting below it. Offsetting the top by --header-h left a strip of the
   page showing through whenever the header was condensed, and the translucent
   bar let that strip read as a flicker of hero content over the menu. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + var(--s-4)) var(--sbw, 0px) var(--s-9) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out),
    visibility var(--d-base);
}

.header.is-stuck + .drawer {
  padding-top: calc(var(--header-h-condensed) + var(--s-4));
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.drawer__link svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform var(--d-base) var(--e-out);
}

.drawer__group[data-open="true"] .drawer__link svg {
  transform: rotate(180deg);
}

.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--e-out);
}

.drawer__group[data-open="true"] .drawer__sub {
  grid-template-rows: 1fr;
}

.drawer__sub > div {
  overflow: hidden;
}

.drawer__sub a {
  display: block;
  padding: 0.55rem 0 0.55rem var(--s-4);
  font-size: var(--t-base);
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line);
}

.drawer__sub a:hover {
  color: var(--blue-600);
  border-left-color: var(--cyan-400);
}

.drawer__sub > div > :first-child {
  margin-top: var(--s-3);
}

.drawer__sub > div > :last-child {
  margin-bottom: var(--s-3);
}

@media (max-width: 1120px) {
  .nav,
  .header__phone {
    display: none;
  }
  .burger {
    display: flex;
  }
}

@media (max-width: 560px) {
  .header__actions .btn {
    display: none;
  }
}

/* --- cards -------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-strong);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--n-100);
  flex: none;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.card:hover .card__media img {
  transform: scale(1.045);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5);
  gap: var(--s-3);
}

.card__title {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
}

.card__title a {
  color: var(--ink);
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* product card specifics */
.card--product .card__media {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--n-50), var(--n-150));
}

.card--product .card__media img {
  object-fit: cover;
}

.pcard__type {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.pcard__benefit {
  display: flex;
  gap: 0.5rem;
  align-items: start;
  font-size: var(--t-sm);
  color: var(--navy-800);
  font-weight: 550;
  line-height: 1.45;
}

.pcard__benefit svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.18em;
  color: var(--cyan-400);
}

.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* --- chips / badges ----------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--t-xs);
  font-weight: 550;
  line-height: 1.4;
  color: var(--n-600);
  background: var(--n-100);
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.chip--accent {
  color: var(--blue-600);
  background: rgba(13, 89, 192, 0.08);
}

.chip--moq {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--grad-drop);
  color: #fff;
}

.badge--quiet {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- stats -------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.band--dark .stats {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}

.stat {
  background: #fff;
  padding: var(--s-6) var(--s-5);
}

.band--dark .stat {
  background: color-mix(in srgb, var(--navy-900) 82%, transparent);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-drop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.band--dark .stat__label {
  color: #fff;
}

.stat__detail {
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

.band--dark .stat__detail {
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 860px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- spec table --------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.spec-table th,
.spec-table td {
  padding: 0.8rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.spec-table thead th {
  background: var(--n-50);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.spec-table tbody tr:hover {
  background: var(--n-25);
}

.spec-table th[scope="row"] {
  font-weight: 500;
  color: var(--ink-2);
  width: 45%;
}

.spec-table td {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
}

.spec-table td.is-text {
  font-family: var(--font-body);
}

/* --- colour-change indicator strip -------------------------------- */

.colour-change {
  display: grid;
  gap: var(--s-4);
}

.cc {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--n-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.cc__swatches {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.cc__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--sh-sm), inset 0 -4px 8px rgba(0, 0, 0, 0.12);
}

.cc__arrow {
  color: var(--n-400);
  display: flex;
}

.cc__arrow svg {
  width: 18px;
  height: 18px;
}

.cc__text {
  min-width: 0;
}

.cc__state {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.cc__note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: 0.1rem;
}

/* interactive: drag the range to see the transition */
.cc-demo {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.cc-demo__swatch {
  height: 74px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 -10px 22px rgba(0, 0, 0, 0.1);
  transition: background-color var(--d-base) linear;
}

.cc-demo__range {
  width: 100%;
  margin-top: var(--s-4);
  accent-color: var(--blue-600);
}

.cc-demo__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: 0.35rem;
}

/* --- accordion ---------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--line);
}

.acc__item {
  border-bottom: 1px solid var(--line);
}

.acc__btn {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: 1.35rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  transition: color var(--d-fast) var(--e-out);
}

.acc__btn:hover {
  color: var(--blue-600);
}

.acc__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: var(--blue-600);
  border-radius: 2px;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}

.acc__icon::before {
  width: 13px;
  height: 1.5px;
}

.acc__icon::after {
  width: 1.5px;
  height: 13px;
}

.acc__btn[aria-expanded="true"] .acc__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-base) var(--e-out);
}

.acc__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding-bottom: 1.35rem;
  max-width: 72ch;
  color: var(--ink-2);
}

/* --- tabs --------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  padding: 0.85rem 1.1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}

.tab:hover {
  color: var(--navy-800);
}

.tab[aria-selected="true"] {
  color: var(--navy-800);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: -1px;
  height: 2px;
  background: var(--grad-drop);
  border-radius: 2px 2px 0 0;
}

.tab-panel[hidden] {
  display: none;
}

/* --- filter bar --------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  background: var(--n-50);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill {
  padding: 0.5rem 0.95rem;
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--n-600);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: all var(--d-fast) var(--e-out);
}

.pill:hover {
  border-color: var(--blue-500);
  color: var(--blue-600);
}

.pill[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

.pill__count {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  margin-left: 0.2rem;
}

.search {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--n-400);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  font-size: var(--t-sm);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}

.search input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(17, 120, 212, 0.14);
}

.result-count {
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.is-hidden {
  display: none !important;
}

.empty-state {
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}

/* --- forms -------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.field .req {
  color: var(--alert);
}

.field .hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: var(--t-base);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748f' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 11px;
  padding-right: 2.2rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(17, 120, 212, 0.14);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--n-400);
}

.field .error {
  display: none;
  font-size: var(--t-xs);
  font-weight: 550;
  color: var(--alert);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--alert);
}

.field.is-invalid .error {
  display: block;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.field-grid .field--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.fieldset legend {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: var(--s-6);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--n-25);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.dropzone:hover,
.dropzone.is-drag {
  border-color: var(--blue-500);
  background: rgba(17, 120, 212, 0.04);
}

.dropzone svg {
  width: 26px;
  height: 26px;
  color: var(--blue-500);
}

.dropzone input[type="file"] {
  display: none;
}

.form-success {
  padding: var(--s-8) var(--s-6);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.form-success__mark {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--s-5);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-drop);
  color: #fff;
}

.form-success__mark svg {
  width: 28px;
  height: 28px;
}

/* --- breadcrumb --------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.crumbs li + li::before {
  content: "/";
  color: var(--n-400);
}

.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--blue-600);
}

.crumbs [aria-current] {
  color: var(--ink-2);
  font-weight: 550;
}

.band--dark .crumbs a,
.pagehead--dark .crumbs a {
  color: rgba(255, 255, 255, 0.6);
}

.band--dark .crumbs [aria-current],
.pagehead--dark .crumbs [aria-current] {
  color: rgba(255, 255, 255, 0.9);
}

.band--dark .crumbs li + li::before,
.pagehead--dark .crumbs li + li::before {
  color: rgba(255, 255, 255, 0.35);
}

/* --- footer ------------------------------------------------------- */

.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--t-sm);
}

.footer a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}

.footer a:hover {
  color: #fff;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
  padding-block: var(--s-9) var(--s-8);
}

.footer__logo img {
  height: 46px;
  width: auto;
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}

.footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer__list li {
  margin: 0;
}

.footer__contact {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.footer__contact-row {
  display: flex;
  gap: 0.7rem;
  align-items: start;
  line-height: 1.6;
}

.footer__contact-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.22em;
  color: var(--cyan-300);
}

.footer__social {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--s-5);
}

.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  transition: all var(--d-fast) var(--e-out);
}

.footer__social a:hover {
  border-color: var(--cyan-400);
  background: rgba(10, 147, 220, 0.14);
  color: #fff;
}

.footer__social svg {
  width: 17px;
  height: 17px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-xs);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* --- CTA band ----------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy);
  color: rgba(255, 255, 255, 0.76);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: var(--band);
}

.cta-band h2 {
  color: #fff;
}

.cta-band__glow {
  position: absolute;
  width: 640px;
  height: 640px;
  right: -180px;
  top: -280px;
  background: radial-gradient(circle, rgba(10, 147, 220, 0.32), transparent 62%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
  }
}

/* --- scroll reveal ------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Never let the reveal hide content if JS fails or motion is off. */
.no-js [data-reveal],
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ===== pages.css ===== */
/* ------------------------------------------------------------------ *
   Page-level compositions
 * ------------------------------------------------------------------ */

/* --- home hero -----------------------------------------------------
   A single photograph carries the whole section: quayside, product and
   the export story in one frame. Everything else in here exists to keep
   type legible on top of it - a wash that goes near-solid white under
   the copy and releases completely over the product, so the photograph
   is never dimmed as a whole.
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--n-50);
  color: var(--ink);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* off-centre so the bowl and sachet survive the crop on narrow desktops */
  object-position: 58% 50%;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.95) 30%,
      rgba(248, 251, 255, 0.84) 44%,
      rgba(248, 251, 255, 0.38) 58%,
      rgba(255, 255, 255, 0) 72%),
    /* softens the seam where the sticky white header meets the sky */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%);
}

.hero__inner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(33rem, 76vh, 46rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}

.hero__copy {
  max-width: 41rem;
}

.hero__kicker {
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--n-500);
}

.hero__kicker span {
  color: var(--cyan-400);
  padding-inline: 0.2rem;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--navy-900);
}

.hero__title em {
  font-style: normal;
  color: var(--blue-500);
}

.hero__lead {
  margin-top: var(--s-5);
  max-width: 33rem;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

/* one primary action, one secondary - no third competing button */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* the standard ghost button is transparent; over photography it needs a
   surface of its own to stay readable */
.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(1, 34, 91, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero .btn--ghost:hover {
  background: #fff;
  border-color: var(--blue-500);
}

.hero__helper {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.hero__helper a {
  color: var(--blue-600);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--blue-600) 40%, transparent);
}

.hero__helper a:hover {
  color: var(--navy-800);
}

/* --- credentials, not statistics -----------------------------------
   The counted numbers live in the band directly below; repeating them
   here would put the same four figures on screen twice. */

.hero__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  margin: clamp(1.75rem, 4vw, 2.6rem) 0 0;
  border-top: 1px solid rgba(1, 34, 91, 0.13);
}

.hero__marks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.hero__marks li + li {
  padding-left: var(--s-4);
  border-left: 1px solid rgba(1, 34, 91, 0.13);
}

.hero__marks svg {
  width: 25px;
  height: 25px;
  flex: none;
  color: var(--blue-500);
}

.hero__marks b {
  display: block;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

.hero__marks li > span {
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--ink-3);
}

/* --- section index -------------------------------------------------- */

.hero__index {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 3vw, 3rem);
  transform: translateY(-50%);
  z-index: 1;
  min-width: 11.5rem;
  overflow: hidden;
  padding-inline: 1.25rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-md);
  box-shadow: 0 20px 48px rgba(1, 34, 91, 0.16);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.hero__index a {
  position: relative;
  display: block;
  padding-block: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(1, 34, 91, 0.1);
}

.hero__index a:last-child {
  border-bottom: 0;
}

.hero__index a::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-drop);
  transform: scaleY(0);
  transition: transform var(--d-base) var(--e-out);
}

.hero__index a:hover::before,
.hero__index a:focus-visible::before {
  transform: scaleY(1);
}

.hero__index i {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--n-500);
}

.hero__index span {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--navy-800);
  transition: color var(--d-fast) var(--e-out);
}

.hero__index a:hover span,
.hero__index a:focus-visible span {
  color: var(--navy-900);
}

/* --- scroll cue ------------------------------------------------------ */

.hero__base {
  position: absolute;
  inset: auto 0 clamp(1.25rem, 3vw, 2.25rem) 0;
  pointer-events: none;
}

.hero__scroll {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
  text-decoration: none;
}

.hero__scroll svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--blue-500);
  animation: hero-nudge 2.4s var(--e-in-out) infinite;
}

.hero__scroll::after {
  content: "";
  width: clamp(3rem, 8vw, 7rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(1, 34, 91, 0.3), rgba(1, 34, 91, 0));
}

.hero__scroll:hover {
  color: var(--navy-900);
}

@keyframes hero-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

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

/* --- responsive ------------------------------------------------------
   Three states, in the order the photograph stops working:
   1280+  copy left, product right, index rail on the viewport edge
   1024+  same split, but the wash has to run much further right
   below  stacked - copy on white, photograph as a band underneath
 * ------------------------------------------------------------------ */

/* the rail needs clear air to the right of the headline to earn its place */
@media (max-width: 1279px) {
  .hero__index {
    display: none;
  }
}

/* Narrower copy rather than a wider wash: washing out to 86% would leave
   nothing of the product visible on a 1100px laptop. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__copy {
    max-width: 33rem;
  }
  .hero__lead {
    max-width: 29rem;
  }
  .hero__veil {
    background:
      linear-gradient(98deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.95) 34%,
        rgba(248, 251, 255, 0.86) 50%,
        rgba(248, 251, 255, 0.42) 66%,
        rgba(255, 255, 255, 0) 80%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 20%);
  }
  .hero__bg img {
    object-position: 70% 50%;
  }
}

@media (max-width: 1023px) {
  /* Stacked. The photograph stops being a backdrop and becomes a band
     under the copy, so nothing is ever set over the sachet. */
  .hero {
    --hero-photo: clamp(14rem, 58vw, 21rem);
    background: #fff;
  }
  .hero__bg,
  .hero__veil {
    inset: auto 0 0 0;
    height: var(--hero-photo);
  }
  .hero__bg img {
    object-position: 50% 88%;
  }
  .hero__veil {
    background: linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0.72) 22%,
      rgba(255, 255, 255, 0.18) 52%,
      rgba(255, 255, 255, 0) 72%);
  }
  .hero__inner {
    min-height: 0;
    padding-block: clamp(2rem, 5vw, 3rem) var(--hero-photo);
  }
  .hero__base {
    display: none;
  }
}

/* The hairline separators only work while all three sit on one line; as
   soon as the row wraps the leading one reads as a stray tick, so below
   the width where they are guaranteed to fit this becomes a grid. */
@media (max-width: 1279px) {
  .hero__marks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s-4);
  }
  .hero__marks li + li {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .hero__lead {
    font-size: var(--t-md);
  }
  .hero__actions .btn {
    flex: 1 1 13rem;
  }
  .hero__marks {
    gap: var(--s-3);
  }
}

/* --- page header (interior pages) --------------------------------- */

.pagehead {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy);
  color: rgba(255, 255, 255, 0.74);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.pagehead--dark {
  color: rgba(255, 255, 255, 0.74);
}

.pagehead__bg {
  position: absolute;
  inset: 0;
}

.pagehead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* Heavy where the heading sits, light on the right so the photograph is
   actually visible - a flat 80% scrim hid it completely. */
.pagehead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--navy-950) 0%,
    rgba(1, 20, 53, 0.95) 34%,
    rgba(1, 34, 91, 0.72) 62%,
    rgba(1, 34, 91, 0.42) 100%
  );
}

.pagehead > .wrap {
  position: relative;
  z-index: 1;
}

.pagehead h1 {
  color: #fff;
  margin-top: var(--s-4);
  font-size: var(--t-3xl);
  max-width: 26ch;
}

.pagehead p {
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: rgba(255, 255, 255, 0.76);
  max-width: 60ch;
}

/* --- moisture damage grid ----------------------------------------- */

/* The panel is one flat surface with hairline rules between the cards. The
   rules are drawn by each card's own 1px outline, overlapping at shared edges,
   rather than by letting a lighter container colour show through 1px gaps:
   the card count differs per page (eight here, five on an industry page) and
   never divides evenly into every column count, so the old construction left
   the leftover tracks of the last row showing as lighter empty boxes. Now a
   partial row simply ends in panel colour. */
.damage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  background: color-mix(in srgb, var(--navy-900) 88%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Eight cards read as a deliberate 4x2 block. Left to auto-fill they break
   5 + 3 on a full-width wrap, which is a whole row of dead space. */
@media (min-width: 1000px) {
  .damage-grid:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The five-card grids on the industry pages sit in one row at full width, but
   through the laptop band auto-fill finds room for four columns and strands a
   single card on its own row. Three and two is the more even break. */
@media (min-width: 900px) and (max-width: 1160px) {
  .damage-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.damage {
  position: relative;
  display: block;
  padding: var(--s-5);
  background: color-mix(in srgb, var(--navy-900) 88%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background-color var(--d-base) var(--e-out);
}

.damage:hover {
  background: color-mix(in srgb, var(--navy-700) 76%, transparent);
}

.damage__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(10, 147, 220, 0.16);
  color: var(--cyan-300);
  margin-bottom: var(--s-4);
}

.damage__icon svg {
  width: 19px;
  height: 19px;
}

.damage__title {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

.damage__desc {
  margin-top: 0.45rem;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

.damage__fix {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--cyan-300);
}

.damage__fix svg {
  width: 12px;
  height: 12px;
  transition: transform var(--d-base) var(--e-out);
}

.damage:hover .damage__fix svg {
  transform: translateX(3px);
}

/* --- process / how it works --------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  counter-reset: step;
}

.step {
  position: relative;
  counter-increment: step;
  padding: var(--s-5) var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

/* connector line between steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.35rem;
  right: calc(var(--s-4) * -1 - 1px);
  width: var(--s-4);
  height: 1px;
  background: var(--line-strong);
}

.step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-drop);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.step__num::before {
  content: "0" counter(step);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.step__desc {
  margin-top: 0.4rem;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

@media (max-width: 1080px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
  }
  .step:nth-child(3n)::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
  .step::after {
    display: none;
  }
}

/* numbered step list (solution pages) */
.steps-list {
  list-style: none;
  padding: 0;
  counter-reset: n;
  display: grid;
  gap: 0;
}

.steps-list li {
  counter-increment: n;
  position: relative;
  margin: 0;
  padding: var(--s-5) 0 var(--s-5) 3.75rem;
  border-bottom: 1px solid var(--line);
}

.steps-list li:last-child {
  border-bottom: 0;
}

.steps-list li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-5);
  width: 2.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blue-600);
  padding-top: 0.1rem;
}

.steps-list h3 {
  font-size: var(--t-md);
  margin-bottom: 0.35rem;
}

.steps-list p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

/* --- feature / value list ----------------------------------------- */

.feature {
  display: flex;
  gap: var(--s-4);
  align-items: start;
}

.feature__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-drop-soft);
  color: var(--blue-600);
  border: 1px solid rgba(13, 89, 192, 0.14);
}

.feature__icon svg {
  width: 20px;
  height: 20px;
}

.band--dark .feature__icon {
  background: rgba(10, 147, 220, 0.14);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--cyan-300);
}

.feature h3 {
  font-size: var(--t-md);
  margin-bottom: 0.3rem;
}

.feature p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.band--dark .feature p {
  color: rgba(255, 255, 255, 0.66);
}

/* tick list */
.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.ticks li {
  position: relative;
  margin: 0;
  padding-left: 1.85rem;
  font-size: var(--t-base);
  line-height: 1.6;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--grad-drop);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.72em;
  width: 0.5rem;
  height: 0.26rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* --- product detail ----------------------------------------------- */

.pdp {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The whole left column sticks, not just the image — the image alone makes
   too short a containing block for sticky to have any travel. Only engage it
   when the viewport is actually tall enough to show the column in full. */
.pdp__aside {
  align-self: start;
}

@media (min-height: 860px) and (min-width: 901px) {
  .pdp__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.pdp__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--n-50), var(--n-150));
  border: 1px solid var(--line);
}

.pdp__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pdp__keyfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-5);
}

.keyfact {
  background: #fff;
  padding: var(--s-4);
}

.keyfact dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.keyfact dd {
  margin: 0.3rem 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .pdp {
    grid-template-columns: 1fr;
  }
}

.pdp__title {
  font-size: var(--t-2xl);
}

.pdp__benefit {
  display: flex;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  background: var(--grad-drop-soft);
  border: 1px solid rgba(13, 89, 192, 0.16);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--r-sm);
  font-size: var(--t-md);
  font-weight: 550;
  color: var(--navy-800);
  line-height: 1.5;
}

.pdp__section {
  padding-top: var(--s-7);
  margin-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.pdp__section h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-5);
}

.size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.size-chip {
  padding: 0.45rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.quote-cta-box {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--grad-navy);
  color: rgba(255, 255, 255, 0.76);
}

.quote-cta-box h3 {
  color: #fff;
  font-size: var(--t-lg);
}

.quote-cta-box p {
  margin: var(--s-3) 0 var(--s-5);
  font-size: var(--t-sm);
}

/* --- comparison table --------------------------------------------- */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 760px;
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
}

.compare-table th:last-child,
.compare-table td:last-child {
  border-right: 0;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  z-index: 1;
}

.compare-table tbody th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  background: var(--n-50);
  white-space: nowrap;
}

.compare-table td {
  font-variant-numeric: tabular-nums;
}

/* --- calculator & finder ------------------------------------------ */

.tool {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

.tool__head {
  padding: var(--s-5) var(--s-6);
  background: var(--n-50);
  border-bottom: 1px solid var(--line);
}

.tool__head h2 {
  font-size: var(--t-lg);
}

.tool__head p {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-top: 0.3rem;
}

.tool__body {
  padding: var(--s-6);
}

.tool__result {
  padding: var(--s-6);
  background: var(--grad-navy);
  color: rgba(255, 255, 255, 0.76);
}

.tool__result h3 {
  color: #fff;
  font-size: var(--t-md);
}

.result-figure {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-drop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block: var(--s-3) var(--s-2);
}

.result-note {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.result-recs {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.result-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: background-color var(--d-fast) var(--e-out);
}

.result-rec:hover {
  background: rgba(255, 255, 255, 0.12);
}

.result-rec strong {
  color: #fff;
  font-weight: 600;
}

.result-rec span {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--t-xs);
  font-family: var(--font-mono);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--s-4);
}

/* wizard */
.wizard__progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: var(--s-6);
}

.wizard__dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--n-200);
  transition: background-color var(--d-base) var(--e-out);
}

.wizard__dot.is-done {
  background: var(--grad-drop);
}

.wizard__step[hidden] {
  display: none;
}

.wizard__q {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-5);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--s-3);
}

.choice {
  padding: var(--s-5);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: all var(--d-fast) var(--e-out);
}

.choice:hover {
  border-color: var(--blue-500);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.choice strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.choice span {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* --- gallery ------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--s-4);
}

.gallery__item {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-100);
  cursor: zoom-in;
  border: 1px solid var(--line);
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(1, 20, 53, 0.88), transparent);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 550;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap {
  opacity: 1;
  transform: none;
}

.gallery__item--tall {
  grid-row: span 2;
}

.gallery__item--tall img {
  aspect-ratio: 2 / 3;
  height: 100%;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: rgba(1, 14, 39, 0.93);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
}

.lightbox__cap {
  margin-top: var(--s-4);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--t-sm);
}

.lightbox__close {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lightbox__close svg {
  width: 18px;
  height: 18px;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lightbox__nav svg {
  width: 20px;
  height: 20px;
}

.lightbox__nav--prev {
  left: var(--s-5);
}

.lightbox__nav--next {
  right: var(--s-5);
}

@media (max-width: 640px) {
  .lightbox__nav {
    display: none;
  }
}

/* --- article ------------------------------------------------------ */

.article {
  font-size: var(--t-md);
  line-height: 1.75;
  color: var(--ink-2);
}

.article > * + * {
  margin-top: 1.35em;
}

.article h2 {
  font-size: var(--t-xl);
  margin-top: 2.4em;
  margin-bottom: 0.1em;
}

.article h3 {
  font-size: var(--t-lg);
  margin-top: 2em;
}

.article ul,
.article ol {
  padding-left: 1.3rem;
}

.article li + li {
  margin-top: 0.5rem;
}

.article strong {
  color: var(--ink);
}

.article em {
  font-style: italic;
}

.article a {
  font-weight: 550;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.66);
}

.article-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.article-hero {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: calc(var(--s-8) * -1);
  position: relative;
  z-index: 2;
  box-shadow: var(--sh-lg);
}

.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--s-5);
}

@media (max-width: 940px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-aside {
    position: static;
  }
}

.aside-box {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--n-25);
}

.aside-box h4 {
  font-size: var(--t-sm);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--s-4);
}

.aside-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.aside-list li {
  margin: 0;
}

.aside-list a {
  font-size: var(--t-sm);
  font-weight: 550;
  text-decoration: none;
  color: var(--navy-800);
}

.aside-list a:hover {
  color: var(--blue-600);
}

/* post card */
.postcard .card__media {
  aspect-ratio: 16 / 10;
}

.postcard__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --- misc --------------------------------------------------------- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.logo-chip {
  padding: 0.7rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  transition: all var(--d-base) var(--e-out);
}

.logo-chip:hover {
  color: #fff;
  border-color: rgba(10, 147, 220, 0.5);
  background: rgba(10, 147, 220, 0.1);
}

/* --- customer logo wall -------------------------------------------
   Every logo is pre-fitted into an identical 420x150 transparent canvas
   and reduced to white ink, so a fixed render height gives them equal
   optical weight without any per-logo CSS.
 * ------------------------------------------------------------------ */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.logo-wall__cell {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: var(--s-5) var(--s-4);
  background: color-mix(in srgb, var(--navy-900) 88%, transparent);
  transition: background-color var(--d-base) var(--e-out);
}

.logo-wall__cell:hover {
  background: color-mix(in srgb, var(--navy-700) 74%, transparent);
}

.logo-wall img {
  height: clamp(42px, 4.4vw, 58px);
  width: auto;
  max-width: 100%;
  opacity: 0.66;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

.logo-wall__cell:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.logo-wall__note {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.44);
}

@media (max-width: 1000px) {
  .logo-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Ten logos across three columns leaves a gap in the last row, and the
     container colour shows through it as a lighter block. Let the final
     cell run the full width instead. */
  .logo-wall__cell:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .logo-wall__cell {
    min-height: 88px;
  }
  /* Ten logos divide evenly into two columns, so the full-width last cell the
     three-column layout needs would strand the ninth logo beside an empty
     square. Put it back in the flow. */
  .logo-wall__cell:last-child {
    grid-column: auto;
  }
}

.quote-block {
  position: relative;
  padding: var(--s-7);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.quote-block__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--cyan-300);
  opacity: 0.5;
}

.quote-block blockquote {
  margin: var(--s-4) 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.quote-block cite {
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.quote-block cite strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-base);
}

.note {
  padding: var(--s-5);
  border-left: 3px solid var(--cyan-400);
  background: var(--n-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.note strong {
  color: var(--ink);
}

.placeholder-box {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-height: 190px;
  padding: var(--s-6);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--n-25);
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.placeholder-box svg {
  width: 26px;
  height: 26px;
  color: var(--n-400);
}

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--n-100);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

.contact-card {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 100%;
}

.contact-card h3 {
  font-size: var(--t-md);
}

.contact-card__type {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--s-3);
}

.contact-row {
  display: flex;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.6;
}

.contact-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.25em;
  color: var(--blue-500);
}

.contact-row a {
  text-decoration: none;
  color: var(--ink-2);
}

.contact-row a:hover {
  color: var(--blue-600);
}

/* --- print -------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .cta-band,
  .drawer,
  .lightbox,
  .hero__bg,
  .hero__veil,
  .btn {
    display: none !important;
  }
  body {
    color: #000;
  }
  .band--dark,
  .pagehead,
  .hero {
    background: none !important;
    color: #000 !important;
  }
}

/* quick-link cards (blog "Prefer the quick version?") - whole card is the
   title's stretched link; sits on a light band so it never reads as the dark CTA */
.quicklink {
  position: relative;
}

.quicklink .card__foot {
  border-top: 0;
  padding-top: var(--s-2);
}

.quicklink:hover .link-arrow svg {
  transform: translateX(4px);
}