/* Shiiv Imports, Brand Tokens (v4, Maritime Navy)
   Palette: deep navy ink, steel greys, ice surfaces, and brand gold accent.
   Professional import/export feel — reliable, big-company, maritime.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --paper:    #FFFFFF;
  --surface:  #F4F6F8;    /* ice surface */
  --surface-2:#E8ECF1;    /* cooler ice companion for cards */
  --ink:      #0B1F3A;    /* deep navy */
  --ink-2:    #3D4F61;    /* navy-tinted steel, secondary text */
  --mute:     #5B6B7C;    /* steel grey, tertiary text */
  --rule:     #D0D6DE;    /* cool hairline on ice surfaces */

  --brand:    #C4A35A;    /* brand gold, CTAs and accents */
  --brand-2:  #D8BC7A;    /* lighter gold for hover, accent type */
  --brand-dim:#F3EDD8;    /* pale gold tint for backgrounds */
  --brand-dark:#806534;   /* deeper gold for emphasis (AA on ice surfaces) */

  --ink-60: rgba(11, 31, 58, 0.60);
  --ink-40: rgba(11, 31, 58, 0.40);
  --ink-15: rgba(11, 31, 58, 0.10);
  --ink-rgb: 11, 31, 58;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:   clamp(40px, 5.5vw, 72px);
  --fs-1:      clamp(28px, 3.4vw, 40px);
  --fs-2:      clamp(20px, 2vw, 26px);
  --fs-3:      19px;
  --fs-body:   17px;
  --fs-small:  15px;
  --fs-micro:  13px;
  --fs-fine:   12px;

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

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 120px;

  --section-y-desk: 96px;
  --section-y-mob:  56px;

  --max-content: 1200px;
  --max-prose:   680px;
  --gutter:      24px;

  --radius: 6px;
  --hairline: 1px solid var(--rule);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:   150ms;
  --t-normal: 400ms;

  --z-nav: 100;
  --z-nav-backdrop: 98;
  --nav-h: 60px;
  --dock-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { padding: 0; margin: 0; list-style: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink); }
h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: -0.015em; }
h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2); line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-3); line-height: var(--lh-snug); }

.lead { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); font-weight: 400; max-width: var(--max-prose); }
.caption { font-size: var(--fs-micro); color: var(--mute); letter-spacing: 0.02em; }
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-dark); }
.fine { font-size: var(--fs-fine); color: var(--mute); letter-spacing: 0.02em; }

.container { width: 100%; max-width: var(--max-content); margin: 0 auto; padding: 0 var(--gutter); min-width: 0; }
.section { padding: var(--section-y-desk) 0; }
@media (max-width: 768px) { .section { padding: var(--section-y-mob) 0; } }

.surface { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.ink-bg { background: var(--ink); color: #fff; }
.ink-bg h1, .ink-bg h2, .ink-bg h3 { color: #fff; }
.ink-bg .eyebrow { color: var(--brand-2); }
.ink-bg .lead { color: rgba(255,255,255,0.78); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
/* Primary: gold fill with ink text. Hover: ink fill with gold text. */
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--brand); }
.btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink-15); }
.btn--secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Glass variant for use on dark imagery (hero CTAs, overlay buttons). */
.btn--glass {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.btn--glass:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.btn--inverse { background: #fff; color: var(--ink); }
.btn--inverse:hover { background: var(--brand); color: var(--ink); }
.btn--ghost { padding: 8px 0; color: var(--ink); border-bottom: 1px solid var(--ink); }
.btn--ghost:hover { color: var(--brand-dark); border-color: var(--brand-dark); }

.card { background: var(--paper); border: var(--hairline); padding: var(--s-4); border-radius: var(--radius); }

@media (prefers-reduced-motion: no-preference) {
  /* Page entrance - body fades in on load to prevent FOUC.
     Only kicks in when JS is ready, so no-JS clients see content. */
  html.js-ready:not(.is-loaded) body { opacity: 0; }
  html.js-ready body { transition: opacity 400ms var(--ease); }

  /* Reveal-on-scroll. Only hide when JS is ready - no-JS crawlers and users
     see content immediately. */
  html.js-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
    will-change: opacity, transform;
  }
  html.js-ready [data-reveal].is-in { opacity: 1; transform: translateY(0); }
  /* Phone: keep lander blocks visible. Root overflow-x clip plus IO
     left navy proof/CTA bands and the footer blank at ~390. */
  @media (max-width: 720px) {
    html.js-ready [data-reveal] {
      opacity: 1 !important;
      transform: none !important;
      transition: none;
      will-change: auto;
    }
  }

  /* Variants for richer scenes */
  [data-reveal="left"] { transform: translateX(-22px); }
  [data-reveal="right"] { transform: translateX(22px); }
  [data-reveal="scale"] { transform: scale(0.96); }
  [data-reveal="left"].is-in,
  [data-reveal="right"].is-in,
  [data-reveal="scale"].is-in { transform: none; }

  /* Blur-in: copy resolves into focus as it enters */
  html.js-ready [data-reveal="blur"] {
    transform: translateY(10px);
    filter: blur(12px);
    transition: opacity var(--t-normal) var(--ease), transform var(--t-normal) var(--ease), filter var(--t-normal) var(--ease);
  }
  html.js-ready [data-reveal="blur"].is-in { filter: blur(0); }

  /* Wipe: an ink panel covers the element, then slides away to uncover it.
     We overlay rather than clip the element itself, because clipping the
     observed node to zero area makes IntersectionObserver never fire (it sees
     0% visible) and the reveal would deadlock. The node stays full-size; only
     a ::after panel animates. */
  html.js-ready [data-reveal="wipe"] { opacity: 1; transform: none; position: relative; overflow: hidden; }
  html.js-ready [data-reveal="wipe"]::after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: var(--ink);
    transform: scaleX(1); transform-origin: right;
    transition: transform 900ms var(--ease);
    will-change: transform;
  }
  html.js-ready [data-reveal="wipe"].is-in::after { transform: scaleX(0); }

  /* Image fade-in once loaded - removes pop-in */
  img.is-loading { opacity: 0; transform: scale(1.02); }
  img { transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
  img.is-loaded { opacity: 1; transform: none; }

  /* Hero parallax bg - translated by JS via CSS var */
  [data-parallax] { will-change: transform; }

  /* Smooth focus rings */
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable any JS-set parallax transforms */
  [data-parallax] { transform: none !important; }
}

/* ------------------------------------------------------------------
   Image-on-copy readability
   Dual navy scrims (left column + bottom ramp). Photos stay rich on
   the open side. Overlay is static so first paint, wipe-in, and
   prefers-reduced-motion all keep the same contrast.
   ------------------------------------------------------------------ */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-video__overlay,
.cat__veil,
.feat-cat__veil,
.page-hero--copy .page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
.hero-video__overlay,
.page-hero--copy .page-hero__veil {
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.86) 0%, rgba(var(--ink-rgb), 0.56) 36%, rgba(var(--ink-rgb), 0.22) 58%, rgba(var(--ink-rgb), 0.08) 78%, rgba(var(--ink-rgb), 0.04) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.40) 0%, rgba(var(--ink-rgb), 0.18) 32%, rgba(var(--ink-rgb), 0.50) 72%, rgba(var(--ink-rgb), 0.72) 100%);
}
.cat__veil,
.feat-cat__veil {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.72) 0%, rgba(var(--ink-rgb), 0.40) 42%, rgba(var(--ink-rgb), 0.10) 72%, rgba(var(--ink-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.38) 0%, rgba(var(--ink-rgb), 0.22) 28%, rgba(var(--ink-rgb), 0.58) 58%, rgba(var(--ink-rgb), 0.90) 100%);
}
.cat.is-bright .cat__veil,
.feat-cat.is-bright .feat-cat__veil {
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.78) 0%, rgba(var(--ink-rgb), 0.48) 42%, rgba(var(--ink-rgb), 0.14) 72%, rgba(var(--ink-rgb), 0.04) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.42) 0%, rgba(var(--ink-rgb), 0.28) 26%, rgba(var(--ink-rgb), 0.68) 56%, rgba(var(--ink-rgb), 0.93) 100%);
}
.cat__body,
.feat-cat__body {
  text-shadow: 0 1px 14px rgba(var(--ink-rgb), 0.65), 0 0 2px rgba(var(--ink-rgb), 0.4);
}
.cat__desc,
.feat-cat__desc { color: rgba(255, 255, 255, 0.94); }

/* Poster sits under the video so first paint and reduced-motion still
   have a photo + the same overlay, not a washed video frame. */
.hero {
  background-color: var(--ink);
  background-image: url('/assets/hero-poster.jpg');
  background-size: cover;
  background-position: center;
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Default page-hero veil for pages the audit left as-is. */
.page-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(var(--ink-rgb), 0.88) 0%,
      rgba(var(--ink-rgb), 0.70) 50%,
      rgba(var(--ink-rgb), 0.80) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--ink-rgb), 0.20) 0%,
      rgba(var(--ink-rgb), 0.10) 42%,
      rgba(var(--ink-rgb), 0.32) 100%
    );
}

/* SKU photo badges: stay readable on pale pack shots. */
.sku__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(var(--ink-rgb), 0.30) 0%,
      rgba(var(--ink-rgb), 0.04) 40%,
      rgba(var(--ink-rgb), 0.10) 100%
    );
}
.sku__badge {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 1px 10px rgba(var(--ink-rgb), 0.28);
  border: 1px solid rgba(255, 255, 255, 0.95);
}
.sku__badge--cap {
  background: var(--ink);
  color: var(--brand);
  border-color: rgba(196, 163, 90, 0.42);
  box-shadow: 0 1px 10px rgba(var(--ink-rgb), 0.40);
}

/* Nav */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.nav.is-scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 var(--rule); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--gutter); max-width: var(--max-content); margin: 0 auto; flex-wrap: nowrap; min-width: 0; }
.nav__inner > a { flex-shrink: 0; line-height: 0; }
.nav__logo { display: block; height: 32px; width: auto; flex-shrink: 0; }
.nav__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; min-width: 0; }
.nav__links { display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; }
.nav__links > li { flex-shrink: 0; }
.nav__links a { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); transition: color var(--t-fast) var(--ease); white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-current { color: var(--brand-dark); }
.nav__cta { padding: 9px 18px; font-size: var(--fs-small); font-weight: 600; background: var(--ink); color: #fff !important; border-radius: var(--radius); white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav__cta:hover { background: var(--brand); color: var(--ink) !important; }
.nav__cta-item { list-style: none; }

.nav__drop { position: relative; }
.nav__drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__drop-toggle:hover,
.nav__drop.is-open > .nav__drop-toggle,
.nav__drop-toggle.is-current { color: var(--ink); }
.nav__drop-toggle.is-current { color: var(--brand-dark); }
.nav__drop-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease);
}
.nav__drop.is-open > .nav__drop-toggle::after { transform: rotate(-135deg) translateY(-1px); }
.nav__drop-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 236px;
  padding: 8px 0;
  background: #fff;
  border: var(--hairline);
  border-radius: 8px;
  box-shadow: 0 18px 40px -18px rgba(11,31,58,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 2;
}
.nav__drop-menu a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
}
.nav__drop-menu a:hover { background: var(--surface); color: var(--ink); }
.nav__drop.is-open > .nav__drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .nav__drop:hover > .nav__drop-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav__drop:hover > .nav__drop-toggle { color: var(--ink); }
}
.nav__backdrop {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(11, 31, 58, 0.42);
  z-index: var(--z-nav-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.nav__backdrop.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  position: relative;
  margin-left: 4px;
  border-radius: 6px;
}
.nav__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav__toggle__bar { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-fast) var(--ease); }
.nav__toggle__bar:nth-child(1) { top: 14px; }
.nav__toggle__bar:nth-child(2) { top: 19px; }
.nav__toggle__bar:nth-child(3) { top: 24px; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__toggle { display: block; }
  .nav__right { gap: 8px; }
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 8px var(--gutter) 20px;
    border-bottom: var(--hairline);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
    z-index: var(--z-nav);
    max-height: calc(100dvh - var(--nav-h));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links > li { border-top: var(--hairline); }
  .nav__links > li:first-child { border-top: 0; }
  .nav__links a { display: flex; align-items: center; min-height: 48px; padding: 12px 4px; font-size: 17px; font-weight: 500; color: var(--ink); white-space: normal; }
  .nav__cta-item { padding: 12px 0 4px; border-top: var(--hairline); }
  .nav__links .nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    text-align: center;
    white-space: normal;
  }
  .nav__drop-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 4px;
    font-size: 17px;
    color: var(--ink);
  }
  .nav__drop-menu {
    position: static;
    left: auto;
    transform: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
  }
  .nav__drop.is-open > .nav__drop-menu {
    display: block;
    transform: none;
  }
  .nav__drop-menu a { min-height: 44px; padding: 10px 4px; }
  @media (hover: hover) and (pointer: fine) {
    .nav__drop:hover > .nav__drop-menu { display: none; transform: none; }
    .nav__drop.is-open:hover > .nav__drop-menu { display: block; }
  }
}
body.nav-open { overflow: hidden; }
body.nav-open .persist-cta {
  transform: translateY(110%);
  pointer-events: none;
}

/* Footer */
.footer { background: var(--ink); color: #fff; padding: var(--s-7) 0 var(--s-4); }
.footer a { color: rgba(255,255,255,0.85); transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--brand); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr 0.9fr; gap: var(--s-6) var(--s-5); }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.footer__title { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-2); margin-bottom: var(--s-2); }
.footer__list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
.footer__offices { color: rgba(255,255,255,0.72); line-height: 1.45; }
.footer__lede { max-width: 36ch; color: rgba(255,255,255,0.72); font-size: var(--fs-small); }
.footer__logo { height: 44px; width: auto; margin-bottom: var(--s-3); background: #FFFFFF; padding: 8px 12px; border-radius: 6px; }
.footer__fine { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-fine); color: rgba(255,255,255,0.55); }
.footer__social { display: flex; gap: 14px; margin-top: 18px; }
.footer__social a {
  color: rgba(255,255,255,0.7); display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__social a:hover { color: var(--brand); background: rgba(196,163,90,0.14); border-color: rgba(196,163,90,0.35); transform: translateY(-2px); }

/* Glass utilities - opt-in on dark/imagery backgrounds */
.glass-dark {
  background: rgba(11, 31, 58, 0.42);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(196, 163, 90, 0.22);
  border-radius: 14px;
}
.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  box-shadow: 0 16px 40px -20px rgba(11,31,58,0.18);
}

/* Accordion (FAQ) — native details, no colour-token changes */
.acc { border-top: var(--hairline); }
.acc:last-of-type { border-bottom: var(--hairline); }
.acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 400;
  color: var(--brand-dark);
  line-height: 1;
}
.acc[open] summary { color: var(--brand-dark); }
.acc[open] summary::after { content: '\2212'; }
.acc__body { padding: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; max-width: 62ch; }
.acc__body p + p { margin-top: 10px; }
.acc__body a { color: var(--brand-dark); border-bottom: 1px solid var(--brand-dark); font-weight: 500; }

/* Generic grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Scroll progress bar - thin gold line tracking page position (JS-injected) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 55%, var(--brand-2));
  z-index: 999; pointer-events: none;
  box-shadow: 0 0 12px rgba(196,163,90,0.5);
  transition: width 90ms linear;
}

/* Marquee - edge-masked infinite strip. Track is duplicated in markup so the
   -50% translate loops seamlessly. Pauses on hover, static under reduced motion. */
.marquee { overflow: hidden; }
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; }
.marquee__item::after {
  content: '\00B7'; margin: 0 var(--s-4); color: var(--brand); opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marqueeScroll 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Persistent RFQ / private-label / catalogue dock */
.persist-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(11, 31, 58, 0.96);
  border-top: 1px solid rgba(196, 163, 90, 0.28);
  padding: 10px var(--gutter);
  transition: transform var(--t-fast) var(--ease);
}
.persist-cta__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.persist-cta__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-2);
  white-space: nowrap;
}
.persist-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.persist-cta__ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 10px 16px;
}
.persist-cta__ghost:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.persist-cta.is-keyboard-hidden {
  transform: translateY(110%);
  pointer-events: none;
}
body.has-persist-cta {
  --dock-h: 76px;
  padding-bottom: var(--dock-h);
}
body.has-persist-cta.keyboard-open,
body.has-persist-cta.panel-open { --dock-h: 0px; padding-bottom: 0; }
body.panel-open .persist-cta { transform: translateY(110%); pointer-events: none; }
@media (max-width: 720px) {
  /* Dock covered cards, CTAs and the footer on phones. Pages already have
     a closing CTA band; hide the bar rather than stack another chrome layer. */
  .persist-cta { display: none; }
  body.has-persist-cta {
    --dock-h: 0px;
    padding-bottom: 0;
  }
}

/* Phone-first layout: keep page chrome clear of content, no sideways scroll. */
@media (max-width: 720px) {
  :root { --gutter: 16px; }

  html, body { max-width: 100%; }
  .container { width: 100%; max-width: 100%; min-width: 0; }

  html body .page-hero {
    padding-top: 88px !important;
    padding-bottom: 40px !important;
    min-height: 0 !important;
    display: block !important;
    align-items: stretch;
  }
  html body .page-hero h1 { max-width: none; }
  html body .page-hero .lead { font-size: var(--fs-body); max-width: none; }
  html body .page-hero .hero-note { font-size: var(--fs-small); max-width: none; }

  .btn { min-height: 44px; }

  html body .footer { padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
  html body .footer__title { font-size: 14px; letter-spacing: 0.14em; margin-bottom: 12px; }
  html body .footer__lede { font-size: 16px; max-width: none; line-height: 1.55; }
  html body .footer__list { font-size: 16px; gap: 2px; }
  html body .footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  html body .footer__offices { font-size: 16px; line-height: 1.5; }
  html body .footer__social a { width: 44px; height: 44px; }

  .acc summary { min-height: 52px; padding: 16px 0; font-size: 20px; }

  input, select, textarea { font-size: 16px; }

  .cta-row,
  .beyond-ctas,
  .pack-actions,
  .hero__ctas,
  .page-hero__ctas {
    gap: 10px;
  }
  .cta-row,
  .beyond-ctas,
  .pack-actions,
  .hero__ctas,
  .page-hero__ctas { flex-direction: column; align-items: stretch; }
  .cta-row .btn,
  .beyond-ctas .btn,
  .pack-actions .btn,
  .hero__ctas .btn,
  .page-hero__ctas .btn {
    justify-content: center;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   Shared lander layout
   Calm proof bands, related-page lists and answer cards so SEO pages
   match private-label / quality / homepage rhythm.
   ------------------------------------------------------------------ */
.related {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--hairline);
}
.related ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px var(--s-6);
  margin-top: var(--s-3);
  max-width: 72ch;
}
@media (max-width: 700px) { .related ul { grid-template-columns: 1fr; gap: 4px; } }
.related a {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  display: block;
}
.related a:hover { color: var(--brand-dark); border-color: var(--brand-dark); }
.ink-bg .related,
.proof .related,
.process .related {
  border-top-color: rgba(255,255,255,0.12);
}
.ink-bg .related a,
.proof .related a,
.process .related a {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.18);
}
.ink-bg .related a:hover,
.proof .related a:hover,
.process .related a:hover {
  color: var(--brand-2);
  border-bottom-color: var(--brand-2);
}

.soft-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: var(--s-4);
  row-gap: 16px;
}
.soft-links a {
  color: var(--brand-dark);
  font-size: var(--fs-small);
  font-weight: 500;
  border-bottom: 1px solid var(--brand-dark);
  padding: 4px 0;
  line-height: 1.4;
}

.answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 800px) { .answer-grid { grid-template-columns: 1fr; } }
.answer-card {
  background: var(--paper);
  border: var(--hairline);
  border-radius: 8px;
  padding: var(--s-4);
  border-top: 3px solid var(--brand);
}
.answer-card h2 {
  margin-top: 8px;
  font-size: clamp(24px, 2.4vw, 30px);
}
.answer-card p {
  color: var(--ink-2);
  margin-top: 10px;
  font-size: var(--fs-3);
  line-height: 1.6;
}

.cta-band {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: var(--s-5) 0;
}
.cta-band h2 { color: #fff; max-width: 32ch; margin: 12px auto 0; }
.cta-band .lead { color: rgba(255,255,255,0.85); margin: var(--s-3) auto var(--s-4); }
.cta-band .eyebrow { color: var(--brand-2); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.process + .cta-band { padding-top: var(--s-4); }

@media (max-width: 1100px) {
  html body .page-hero {
    padding-top: 120px;
    padding-bottom: 72px;
    min-height: 0;
  }
}

.hero-note {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 12px;
}

/* Force lander cards to stack. Page-level grids otherwise stay 3-up on phones. */
@media (max-width: 720px) {
  html body .proof,
  html body .process,
  html body .cta-band,
  html body .chain { padding: var(--s-5) 0; }
  html body .process + .cta-band { padding-top: var(--s-4); padding-bottom: var(--s-5); }

  html body .proof__grid,
  html body .process__grid,
  html body .bay-grid,
  html body .who-grid,
  html body .line-grid,
  html body .fam-grid,
  html body .brief-grid,
  html body .tier-grid,
  html body .cmp-grid,
  html body .cap-grid,
  html body .why-grid,
  html body .triple,
  html body .split,
  html body .answer-grid,
  html body .work-grid,
  html body .cat-list,
  html body .related ul,
  html body .stories__grid,
  html body .pack-grid,
  html body .grid-2,
  html body .grid-3,
  html body .grid-4 {
    grid-template-columns: 1fr !important;
    gap: var(--s-4) !important;
  }

  html body .proof__item,
  html body .bay,
  html body .who,
  html body .line,
  html body .fam,
  html body .brief,
  html body .tier,
  html body .cmp,
  html body .answer-card,
  html body .split__col,
  html body .work,
  html body .step { min-width: 0; width: auto; max-width: 100%; }

  html body .proof__stat { font-size: clamp(24px, 7vw, 32px); }
  html body .related { margin-top: var(--s-4); padding-top: var(--s-3); }
  html body .soft-links { gap: 12px 20px; }
  html body .soft-links a { display: inline-flex; min-height: 36px; align-items: center; }
}