/* ==========================================================================
   SS Traders — Steel & Iron Products, Karachi
   Design system: rounded / Apple-like surfaces, Plus Jakarta Sans,
   palette lifted directly from the SS Traders logo (ink black, brass, steel).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the logo */
  --ink:          #0B0C0E;   /* logo wordmark black */
  --ink-soft:     #17191D;
  --graphite:     #23262B;
  --steel-700:    #3A3F47;
  --steel-500:    #6B727C;
  --steel-400:    #8B929C;
  --steel-200:    #D8DCE1;
  --steel-100:    #E9ECEF;
  --mist:         #F4F5F7;
  --white:        #FFFFFF;

  --brass:        #B8863B;   /* logo arc + tagline gold */
  --brass-deep:   #8F6725;
  --brass-light:  #DCB46A;
  --brass-tint:   rgba(184, 134, 59, 0.10);
  --steel-600:    #5A616A;
  --steel-300:    #C7CCD3;
  --brass-line:   rgba(184, 134, 59, 0.28);

  --success:      #1E8E5A;
  --whatsapp:     #25D366;
  --whatsapp-dk:  #128C7E;

  /* Radii — the rounded language of the site */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* Elevation — soft, low-contrast, never harsh */
  --shadow-xs: 0 1px 2px rgba(11, 12, 14, .05);
  --shadow-sm: 0 2px 6px rgba(11, 12, 14, .06);
  --shadow-md: 0 6px 20px rgba(11, 12, 14, .07);
  --shadow-lg: 0 18px 48px rgba(11, 12, 14, .10);
  --shadow-xl: 0 28px 70px rgba(11, 12, 14, .14);

  /* Type */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --section-y: clamp(64px, 8vw, 118px);
  --gutter: clamp(20px, 4vw, 40px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0225rem;
  line-height: 1.65;
  color: var(--steel-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4.05rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.22rem, 2vw, 1.5rem); letter-spacing: -0.024em; }
h4 { font-size: 1.075rem; letter-spacing: -0.018em; font-weight: 700; }

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--brass-deep);
  text-decoration: none;
  transition: color .22s var(--ease);
}
a:hover { color: var(--brass); }

img { max-width: 100%; height: auto; }

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

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

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 14px; top: -70px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 14px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-tight { max-width: 940px; }

.band { padding-block: var(--section-y); }
.band-mist { background: var(--mist); }
.band-ink { background: var(--ink); color: var(--steel-200); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #fff; }
.band-tight { padding-block: clamp(44px, 5vw, 72px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .735rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--brass);
}
.band-ink .eyebrow { color: var(--brass-light); }

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  color: var(--steel-500);
  line-height: 1.68;
  max-width: 62ch;
}
.band-ink .lede { color: var(--steel-400); }

.head-block { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 58px); }
.head-block.centre { margin-inline: auto; text-align: center; }
.head-block.centre .eyebrow { justify-content: center; }
.head-block.centre .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn-ss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.btn-ss:active { transform: scale(.975); }
.btn-ss svg { flex: 0 0 auto; }

.btn-ss--brass {
  background: var(--brass);
  color: #fff;
  box-shadow: 0 8px 22px rgba(184, 134, 59, .28);
}
.btn-ss--brass:hover {
  background: var(--brass-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(184, 134, 59, .34);
}

.btn-ss--ink {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-ss--ink:hover {
  background: var(--graphite);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-ss--wa {
  background: var(--whatsapp);
  color: #06301B;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .3);
}
.btn-ss--wa:hover {
  background: #1FBE5B;
  color: #06301B;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, .36);
}

.btn-ss--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--steel-200);
}
.btn-ss--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ss--ghost-light {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}
.btn-ss--ghost-light:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  transform: translateY(-2px);
}

.btn-ss--sm { padding: 10px 18px; font-size: .865rem; }
.btn-ss--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--ink);
}
.link-arrow span.arw {
  transition: transform .25s var(--ease);
  display: inline-block;
  color: var(--brass);
}
.link-arrow:hover { color: var(--brass-deep); }
.link-arrow:hover span.arw { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--steel-400);
  font-size: .8rem;
  padding: 9px 0;
}
.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--steel-400);
  font-weight: 500;
}
.topbar-item:hover { color: #fff; }
.topbar-sep {
  width: 1px; height: 13px;
  background: rgba(255, 255, 255, .16);
  display: inline-block;
}
.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.topbar strong.badge-years {
  color: var(--brass-light);
  font-weight: 700;
  letter-spacing: .02em;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(11, 12, 14, .07);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.masthead.is-stuck {
  box-shadow: 0 6px 26px rgba(11, 12, 14, .08);
  background: rgba(255, 255, 255, .92);
}
.masthead .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nav-h);
}

.brandmark { display: flex; align-items: center; gap: 12px; }
.brandmark img {
  width: 66px; height: 66px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.brandmark-text { display: flex; flex-direction: column; line-height: 1.05; }
.brandmark-name {
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.brandmark-sub {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: .935rem;
  font-weight: 600;
  color: var(--steel-700);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.nav-main a:hover { background: var(--mist); color: var(--ink); }
.nav-main a.is-active { color: var(--ink); background: var(--brass-tint); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--steel-200);
  background: #fff;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: background-color .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 19px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  display: none;
  border-top: 1px solid var(--steel-100);
  background: #fff;
  padding: 14px var(--gutter) 22px;
}
.nav-drawer.is-open { display: block; }
.nav-drawer .drawer-link {
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--steel-100);
}
.nav-drawer .drawer-link:hover { background: var(--mist); }
.nav-drawer .drawer-cta { margin-top: 16px; display: grid; gap: 10px; }

@media (max-width: 991px) {
  .nav-main { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-desk { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--steel-200);
  overflow: hidden;
  padding-block: clamp(66px, 8vw, 108px) clamp(78px, 9vw, 124px);
  border-bottom-left-radius: var(--r-2xl);
  border-bottom-right-radius: var(--r-2xl);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-bottom-left-radius: var(--r-2xl);
  border-bottom-right-radius: var(--r-2xl);
  background: var(--ink);
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .92;
  filter: brightness(1.32) saturate(.95);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(11, 12, 14, .93) 0%, rgba(11, 12, 14, .78) 42%, rgba(11, 12, 14, .30) 100%),
    radial-gradient(112% 80% at 10% 30%, rgba(11, 12, 14, .58), transparent 66%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(11, 12, 14, .9) 0%, rgba(11, 12, 14, .88) 55%, rgba(11, 12, 14, .93) 100%);
  }
}

.hero::before {
  /* the logo's brass arc, blown up as an ambient motif */
  content: "";
  position: absolute;
  z-index: 1;
  top: -22%;
  right: -14%;
  width: min(760px, 84vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brass-line);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(28deg);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6%;
  right: -22%;
  width: min(620px, 74vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(184, 134, 59, .17), transparent 62%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .8rem;
  font-weight: 600;
  color: var(--steel-200);
  margin-bottom: 26px;
}
.hero-tag em {
  font-style: normal;
  background: var(--brass);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .755rem;
  letter-spacing: .02em;
}

.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 .accent {
  color: var(--brass-light);
  display: inline-block;
}
.hero-sub {
  font-size: clamp(1.04rem, 1.6vw, 1.17rem);
  color: var(--steel-400);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-proof li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .845rem;
  font-weight: 600;
  color: var(--steel-200);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px 15px;
  border-radius: var(--r-pill);
}
.hero-proof li svg { color: var(--brass-light); }
.hero-proof { padding: 0; margin: 0; }

/* Hero side card — the live rate-enquiry panel */
.rate-card {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 34px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.rate-card h2 {
  font-size: 1.18rem;
  color: #fff;
  margin-bottom: 6px;
}
.rate-card .rate-note {
  font-size: .85rem;
  color: var(--steel-400);
  margin-bottom: 20px;
}
.rate-card label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: 7px;
}
.rate-card .field { margin-bottom: 14px; }
.rate-card select,
.rate-card input,
.rate-card textarea {
  width: 100%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-family: var(--font);
  font-size: .93rem;
  font-weight: 500;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.rate-card select option { background: var(--ink-soft); color: #fff; }
.rate-card input::placeholder { color: var(--steel-500); }
.rate-card select:focus,
.rate-card input:focus,
.rate-card textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(255, 255, 255, .12);
}
.rate-card .rate-foot {
  margin-top: 14px;
  font-size: .77rem;
  color: var(--steel-500);
  text-align: center;
}

@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  .rate-card { order: 2; }
}

/* --------------------------------------------------------------------------
   7. Standards ticker
   -------------------------------------------------------------------------- */
.standards {
  background: var(--white);
  border-bottom: 1px solid var(--steel-100);
  padding: 22px 0;
  overflow: hidden;
}
.standards-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.standards-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.standards-chip {
  font-size: .82rem;
  font-weight: 700;
  color: var(--steel-700);
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--mist);
  border: 1px solid var(--steel-100);
  letter-spacing: -.005em;
}

/* --------------------------------------------------------------------------
   8. Cards, generic surfaces
   -------------------------------------------------------------------------- */
.surface {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.surface-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brass-line);
}

.grid-auto {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9. Product cards
   -------------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  padding: 0 26px 24px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.product-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--brass-tint);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brass-line);
}
.product-card:hover::after { opacity: 1; }
.product-card > * { position: relative; z-index: 1; }

.product-figure {
  width: 74px; height: 74px;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--mist), #fff);
  border: 1px solid var(--steel-100);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover .product-figure {
  background: linear-gradient(145deg, #fff, var(--brass-tint));
  border-color: var(--brass-line);
}
.product-figure svg { width: 42px; height: 42px; }

.product-card h3 { margin-bottom: 8px; font-size: 1.14rem; }
.product-card p {
  font-size: .93rem;
  color: var(--steel-500);
  margin-bottom: 16px;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spec-list li {
  font-size: .755rem;
  font-weight: 600;
  color: var(--steel-700);
  background: var(--mist);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  border: 1px solid var(--steel-100);
}

.product-card .card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--steel-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--steel-100);
}
.stat-cell {
  background: #fff;
  padding: 28px 24px;
  text-align: center;
}
.stat-num {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-num .suffix { color: var(--brass); }
.stat-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--steel-500);
  letter-spacing: .01em;
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   11. Split feature
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 66px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.marker-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.marker-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  font-size: .96rem;
}
.marker-list li .tick {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--brass-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.marker-list li strong { display: block; margin-bottom: 2px; }

.frame-stack {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--ink), var(--graphite));
  padding: clamp(28px, 4vw, 44px);
  color: var(--steel-200);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.frame-stack::before {
  content: "";
  position: absolute;
  top: -30%; left: -20%;
  width: 420px; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brass-line);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(35deg);
}
.frame-stack > * { position: relative; }
.frame-quote {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  letter-spacing: -.02em;
  margin-bottom: 22px;
}
.frame-attr { display: flex; align-items: center; gap: 14px; }
.frame-attr .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1rem;
}
.frame-attr .who { font-weight: 700; color: #fff; font-size: .96rem; }
.frame-attr .role { font-size: .82rem; color: var(--steel-400); }

/* --------------------------------------------------------------------------
   12. Weight calculator — the signature module
   -------------------------------------------------------------------------- */
.calc {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-controls { padding: clamp(24px, 3vw, 36px); }
.calc-readout {
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(165deg, var(--ink), var(--graphite));
  color: var(--steel-200);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.calc-readout::before {
  content: "";
  position: absolute;
  right: -34%; bottom: -34%;
  width: 340px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,134,59,.2), transparent 65%);
}
.calc-readout > * { position: relative; }

.shape-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.shape-btn {
  border: 1px solid var(--steel-200);
  background: #fff;
  color: var(--steel-700);
  font-family: var(--font);
  font-weight: 600;
  font-size: .845rem;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.shape-btn:hover { border-color: var(--brass); color: var(--ink); }
.shape-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 480px) { .calc-fields { grid-template-columns: 1fr; } }

.field-set label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 7px;
}
.field-set input,
.field-set select {
  width: 100%;
  border: 1px solid var(--steel-200);
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field-set input:focus,
.field-set select:focus {
  outline: none;
  border-color: var(--brass);
  background: #fff;
}
.field-hint { font-size: .74rem; color: var(--steel-400); margin-top: 6px; }

.calc-presets {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.preset-chip {
  border: 1px dashed var(--steel-200);
  background: #fff;
  color: var(--steel-500);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.preset-chip:hover {
  border-style: solid;
  border-color: var(--brass);
  color: var(--brass-deep);
  background: var(--brass-tint);
}

.calc-shape-view {
  height: 148px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.calc-shape-view svg { height: 148px; width: 215px; }

.calc-total {
  font-size: clamp(2.3rem, 5vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.045em;
  color: #fff;
  line-height: 1;
}
.calc-total small {
  font-size: .34em;
  font-weight: 700;
  color: var(--brass-light);
  letter-spacing: -.01em;
  margin-left: 6px;
}
.calc-caption {
  font-size: .82rem;
  color: var(--steel-400);
  margin-top: 8px;
  margin-bottom: 22px;
}
.calc-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: .88rem;
}
.calc-breakdown li span:first-child { color: var(--steel-400); }
.calc-breakdown li span:last-child { color: #fff; font-weight: 700; }
.calc-readout .btn-ss { margin-top: auto; }

/* --------------------------------------------------------------------------
   13. Feature / value tiles
   -------------------------------------------------------------------------- */
.value-tile {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.value-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass-line);
}
.value-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--brass-light);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.value-tile h3 { font-size: 1.08rem; margin-bottom: 8px; }
.value-tile p { font-size: .93rem; color: var(--steel-500); margin: 0; }

.band-ink .value-tile {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.band-ink .value-tile p { color: var(--steel-400); }
.band-ink .value-tile:hover { border-color: var(--brass-line); background: rgba(255,255,255,.07); }
.band-ink .value-icon { background: var(--brass); color: #fff; }

/* --------------------------------------------------------------------------
   13b. Product list index
   -------------------------------------------------------------------------- */
.plist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.plist-col {
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--r-lg);
  padding: 24px 22px 12px;
}
.plist-col h3 {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--steel-100);
}
.plist-col ul { list-style: none; margin: 0; padding: 0; }
.plist-col li {
  padding: 11px 0;
  border-bottom: 1px solid var(--steel-100);
}
.plist-col li:last-child { border-bottom: 0; }
.plist-col li a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.plist-col li a:hover { color: var(--brass-deep); border-bottom-color: var(--brass-line); }
.plist-col li em {
  display: block;
  font-style: normal;
  font-size: .75rem;
  color: var(--steel-400);
  margin-top: 3px;
}
.plist-foot {
  margin: 26px 0 0;
  text-align: center;
  font-size: .88rem;
  color: var(--steel-500);
}
.plist-foot a { color: var(--brass-deep); font-weight: 700; }

@media (max-width: 991px) { .plist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .plist-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   14. Industries
   -------------------------------------------------------------------------- */
.industry-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 991px) { .industry-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .industry-strip { grid-template-columns: minmax(0, 1fr); } }

.industry-cell {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-md);
  padding: 24px 22px 26px;
  transition: all .28s var(--ease);
}
.industry-cell:hover {
  border-color: var(--brass-line);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.industry-cell svg { color: var(--brass); margin-bottom: 14px; display: block; }
.industry-cell span {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-bottom: 7px;
}
.industry-cell p {
  margin: 0;
  font-size: .83rem;
  line-height: 1.62;
  color: var(--steel-500);
}

/* --------------------------------------------------------------------------
   14b. Photography
   -------------------------------------------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--steel-100);
  box-shadow: var(--shadow-sm);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .7s var(--ease-out);
}
.photo:hover img { transform: scale(1.04); }
.photo--lead { grid-column: span 2; grid-row: span 2; }
.photo--lead img { aspect-ratio: 8 / 5; }

.photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 15px;
  font-size: .8rem;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11, 12, 14, .82) 62%);
  letter-spacing: -.005em;
}
.photo--lead figcaption { font-size: .88rem; padding: 46px 24px 20px; }

.photo-wide {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.photo-wide img { display: block; width: 100%; height: auto; }
.photo-wide figcaption {
  padding: 14px 20px;
  font-size: .8rem;
  color: var(--steel-500);
  background: #fff;
  border-top: 1px solid var(--steel-100);
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo--lead { grid-column: span 2; grid-row: span 1; }
  .photo-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .photo-grid { grid-template-columns: minmax(0, 1fr); }
  .photo--lead { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   15. Leadership
   -------------------------------------------------------------------------- */
.leader-card {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: var(--shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.leader-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.leader-initials {
  width: 68px; height: 68px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--ink), var(--steel-700));
  color: var(--brass-light);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.34rem;
  letter-spacing: -.03em;
}
.leader-card h3 { margin-bottom: 2px; font-size: 1.16rem; }
.leader-role {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 12px;
}
.leader-card p { font-size: .93rem; color: var(--steel-500); margin: 0; }

/* --------------------------------------------------------------------------
   16. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.faq-item {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item.is-open { border-color: var(--brass-line); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.01rem;
  letter-spacing: -.018em;
  color: var(--ink);
  padding: 21px 60px 21px 24px;
  cursor: pointer;
  position: relative;
  display: block;
}
.faq-q::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq-item.is-open .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { display: none; padding: 0 24px 23px; }
.faq-a p { font-size: .95rem; color: var(--steel-500); }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--ink) 0%, var(--graphite) 55%, #2C2A25 100%);
  border-radius: var(--r-2xl);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%; top: -60%;
  transform: translateX(-50%);
  width: min(760px, 110%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brass-line);
  border-bottom-color: transparent;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: var(--steel-400); max-width: 56ch; margin-inline: auto; margin-bottom: 30px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--ink);
  color: var(--steel-400);
  padding-top: clamp(52px, 6vw, 78px);
  margin-top: 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 50px);
  padding-bottom: 46px;
}
@media (max-width: 991px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-brand img {
  width: 62px; height: 62px;
  border-radius: 50%;
  margin-bottom: 18px;
  background: #fff;
}
.foot-brand p { font-size: .92rem; color: var(--steel-400); max-width: 34ch; }

.foot-title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.foot-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.foot-list a { color: var(--steel-400); font-size: .92rem; }
.foot-list a:hover { color: var(--brass-light); }

.foot-contact { display: grid; gap: 14px; }
.foot-contact a, .foot-contact span {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--steel-400);
  font-size: .92rem;
}
.foot-contact a:hover { color: #fff; }
.foot-contact svg { flex: 0 0 auto; color: var(--brass); margin-top: 3px; }

.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  color: var(--steel-200);
  transition: all .25s var(--ease);
}
.social-row a:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
  transform: translateY(-3px);
}

.foot-base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .84rem;
}
.foot-base a { color: var(--steel-400); }
.foot-base a:hover { color: var(--brass-light); }

/* --------------------------------------------------------------------------
   19. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--whatsapp);
  color: #06301B;
  font-weight: 700;
  font-size: .92rem;
  padding: 13px 22px 13px 16px;
  border-radius: var(--r-pill);
  box-shadow: 0 14px 34px rgba(37, 211, 102, .38);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.02);
  color: #06301B;
  box-shadow: 0 18px 42px rgba(37, 211, 102, .46);
}
.wa-float .pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 2px solid var(--whatsapp);
  animation: waPulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .65; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
@media (max-width: 560px) {
  .wa-float { padding: 14px; right: 16px; bottom: 16px; }
  .wa-float .wa-label { display: none; }
  .hero-tag { font-size: .74rem; padding-left: 14px; }
  .hero-tag em { font-size: .7rem; padding: 4px 10px; }
}
@media (max-width: 400px) {
  .hero-tag .tag-text { display: none; }
  .hero-tag { padding: 6px; }
}

.to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1039;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--steel-200);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .3s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --------------------------------------------------------------------------
   20. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--ink);
  color: var(--steel-400);
  padding-block: clamp(52px, 6vw, 84px);
  border-bottom-left-radius: var(--r-2xl);
  border-bottom-right-radius: var(--r-2xl);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  top: -46%; right: -8%;
  width: min(580px, 76vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--brass-line);
  border-right-color: transparent;
  transform: rotate(20deg);
}
.page-head .shell { position: relative; }
.page-head h1 { color: #fff; margin-bottom: 16px; }
.page-head .lede { color: var(--steel-400); }

.crumbs {
  list-style: none;
  display: flex;
  gap: 9px;
  padding: 0;
  margin: 0 0 20px;
  font-size: .82rem;
  color: var(--steel-500);
  flex-wrap: wrap;
}
.crumbs a { color: var(--steel-400); }
.crumbs a:hover { color: var(--brass-light); }
.crumbs li::after { content: "/"; margin-left: 9px; color: var(--steel-700); }
.crumbs li:last-child::after { content: ""; }

/* --------------------------------------------------------------------------
   21. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  background: #fff;
}
.table-scroll { overflow-x: auto; }
table.ss-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
table.ss-table caption {
  caption-side: top;
  text-align: left;
  padding: 20px 24px 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
table.ss-table th,
table.ss-table td {
  padding: 14px 20px;
  text-align: left;
  font-size: .9rem;
  border-bottom: 1px solid var(--steel-100);
}
table.ss-table thead th {
  background: var(--mist);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-500);
}
table.ss-table tbody tr:last-child td { border-bottom: 0; }
table.ss-table tbody tr:hover { background: var(--brass-tint); }
table.ss-table td:first-child { font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   22. Filter bar (products)
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  padding: 10px;
  background: var(--mist);
  border: 1px solid var(--steel-100);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}
.filter-btn {
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-weight: 600;
  font-size: .875rem;
  color: var(--steel-500);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.filter-btn:hover { color: var(--ink); background: #fff; }
.filter-btn.is-on {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   23. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-tile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-md);
  background: #fff;
  transition: all .28s var(--ease);
}
.contact-tile:hover { border-color: var(--brass-line); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.contact-tile .ct-icon {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--brass-tint);
  color: var(--brass-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.contact-tile h4 { margin-bottom: 3px; }
.contact-tile a, .contact-tile span.val {
  font-size: .95rem;
  color: var(--steel-500);
  font-weight: 500;
  display: block;
}
.contact-tile a:hover { color: var(--brass-deep); }

.form-card {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-md);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--steel-700);
  margin-bottom: 7px;
  letter-spacing: -.005em;
}
.form-group label .req { color: var(--brass); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--steel-200);
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-family: var(--font);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-group textarea { resize: vertical; min-height: 118px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: #fff;
}
.form-group input.is-bad,
.form-group textarea.is-bad,
.form-group select.is-bad { border-color: #C4453B; background: #FDF3F2; }
.err-note { font-size: .78rem; color: #C4453B; margin-top: 6px; display: none; }
.err-note.is-on { display: block; }
.form-note {
  font-size: .8rem;
  color: var(--steel-400);
  margin-top: 14px;
  text-align: center;
}

.map-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--steel-100);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: 380px; border: 0; }

/* --------------------------------------------------------------------------
   23b. Get Quote — multi-line request builder
   -------------------------------------------------------------------------- */
.quote-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr);
  gap: 22px;
  align-items: start;
}
.quote-form-side {
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-md);
}

.quote-line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .8fr) 32px;
  gap: 10px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px dashed var(--steel-200);
}
.quote-line:first-child { padding-top: 0; }
.quote-line-no {
  align-self: end;
  margin-bottom: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--steel-200);
  color: var(--steel-500);
  font-size: .72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.ql-field label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--steel-500);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.ql-in {
  width: 100%;
  border: 1px solid var(--steel-200);
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ql-in:focus { outline: none; border-color: var(--brass); background: #fff; }
.ql-drop {
  align-self: end;
  margin-bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--steel-200);
  background: #fff;
  color: var(--steel-400);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ql-drop:hover { color: #C4453B; border-color: #E7BDB9; background: #FDF3F2; }
.quote-lines.is-single .ql-drop { opacity: .28; pointer-events: none; }

.quote-add {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--steel-400);
  background: transparent;
  color: var(--steel-700);
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.quote-add:hover { border-color: var(--brass); color: var(--brass-deep); background: rgba(184, 134, 59, .06); }

.quote-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 20px;
  color: var(--steel-400);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.quote-divider::before,
.quote-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--steel-200);
}

.quote-you {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.quote-you .form-group--wide { grid-column: 1 / -1; }
.quote-you textarea { min-height: 74px; }

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.quote-fineprint {
  margin: 16px 0 0;
  font-size: .8rem;
  color: var(--steel-500);
  line-height: 1.6;
}

.quote-side {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 30px);
  color: var(--steel-200);
  position: relative;
  overflow: hidden;
}
.quote-side h3 { color: #fff; font-size: 1.08rem; margin: 0 0 16px; }
.quote-steps { list-style: none; margin: 0 0 24px; padding: 0; }
.quote-steps li {
  display: flex;
  gap: 11px;
  font-size: .87rem;
  line-height: 1.6;
  color: #C7CCD3;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.quote-steps li:last-child { border-bottom: 0; }
.quote-steps li span {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(184, 134, 59, .16);
  border: 1px solid var(--brass-line);
  color: var(--brass-light);
  font-size: .7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.quote-preview-box {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .035);
  overflow: hidden;
}
.quote-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.quote-live {
  color: var(--brass-light);
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quote-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--whatsapp);
}
.quote-preview {
  margin: 0;
  padding: 14px;
  max-height: 208px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  line-height: 1.7;
  color: var(--steel-200);
  white-space: pre-wrap;
  word-break: break-word;
}

.quote-alt {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.quote-alt p {
  margin: 0 4px 0 0;
  width: 100%;
  font-size: .8rem;
  color: var(--steel-400);
}

@media (max-width: 1080px) {
  .quote-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .quote-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    position: relative;
    padding: 18px 0 20px;
  }
  .quote-line .ql-item { grid-column: 1 / -1; }
  .quote-line-no {
    display: block;
    position: static;
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
    height: auto;
    margin: 0 0 2px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--steel-400);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .quote-line-no::before { content: "Item "; }
  .quote-line:first-child { padding-top: 4px; }
  .ql-drop { position: absolute; top: 12px; right: 0; margin: 0; }
  .quote-you { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   24. Timeline (about)
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 34px; margin-top: 12px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--brass), var(--steel-100));
  border-radius: 2px;
}
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brass);
}
.timeline-item h4 { margin-bottom: 5px; }
.timeline-item p { font-size: .93rem; color: var(--steel-500); margin: 0; }

/* --------------------------------------------------------------------------
   25. Motion
   -------------------------------------------------------------------------- */
.rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.rise.is-in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .07s; }
.rise.d2 { transition-delay: .14s; }
.rise.d3 { transition-delay: .21s; }
.rise.d4 { transition-delay: .28s; }

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

/* --------------------------------------------------------------------------
   26. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 26px; }
.mt-5 { margin-top: 38px; }
.mb-0 { margin-bottom: 0; }
.text-centre { text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.divider {
  height: 1px;
  background: var(--steel-100);
  border: 0;
  margin-block: clamp(34px, 4vw, 54px);
}

/* ==========================================================================
   27. Mobile layer
   Roughly all traffic is on a phone, so everything below is written for the
   small screen first and only reverses desktop rules where it has to.
   ========================================================================== */

/* --- 27.1 Swipe rows -------------------------------------------------------
   Long stacked card lists become a single horizontal row that snaps. Applied
   only on small screens; above 768px these containers stay as CSS grids. */
@media (max-width: 768px) {
  .swipe {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 4px 8px;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
    margin: 0;
  }
  .swipe > *:last-child { margin-inline-end: var(--gutter); }

  /* the photo row reads better slightly wider and all one size */
  .photo-grid.swipe > * { flex: 0 0 86%; }
  .photo-grid.swipe .photo--lead { grid-column: auto; grid-row: auto; }
  .photo-grid.swipe .photo img,
  .photo-grid.swipe .photo--lead img { aspect-ratio: 4 / 3; height: auto; }

  /* product list columns are taller, so let them take more of the screen */
  .plist-grid.swipe > * { flex: 0 0 88%; }

  .swipe-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
  }
  .swipe-dot {
    padding: 0;
    border: 0;
    background: none;
  }
  .swipe-hint {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: .78rem;
    color: var(--steel-400);
  }
}
@media (min-width: 769px) {
  .swipe-nav, .swipe-hint { display: none; }
}

/* --- 27.2 Tap targets ------------------------------------------------------
   Nothing interactive should be under about 44px on a touch screen. */
@media (max-width: 768px) {
  .topbar { font-size: .82rem; padding: 4px 0; }
  .topbar .shell { gap: 0 14px; }
  .topbar-item { padding-block: 11px; }
  .topbar-sep { display: none; }

  .crumbs a,
  .crumbs li { padding-block: 8px; display: inline-block; }
  .link-arrow { padding-block: 10px; }
  .preset-chip { min-height: 42px; padding-inline: 16px; }
  .ql-drop { width: 42px; height: 42px; }
  .foot-list a { display: inline-block; padding-block: 7px; }
  .btn-ss--sm { min-height: 44px; padding-inline: 20px; }
  .filter-btn { min-height: 44px; }
  .shape-btn { min-height: 44px; }
  .faq-q { padding-block: 18px; }
  .social-row a { width: 44px; height: 44px; }
}

/* --- 27.3 Type -------------------------------------------------------------
   Small print was reading at 10-11.8px, which is uncomfortable on a phone. */
@media (max-width: 768px) {
  body { font-size: 1.0325rem; }
  .eyebrow { font-size: .8rem; }
  .brandmark-sub { font-size: .68rem; }
  .foot-title { font-size: .8rem; }
  .form-group label,
  .ql-field label,
  .rate-card label,
  .calc-field label { font-size: .82rem; }
  .field-hint { font-size: .8rem; }
  .quote-divider { font-size: .78rem; }
  .quote-live { font-size: .76rem; }
  .quote-preview { font-size: .8rem; }
  .photo figcaption,
  .photo--lead figcaption { font-size: .82rem; padding: 30px 15px 14px; }
  .hero-tag em { font-size: .76rem; }
  .standards-label { font-size: .78rem; }
  .plist-col li em { font-size: .8rem; }
  .ss-table th { font-size: .8rem; }
}

/* --- 27.4 Rhythm -----------------------------------------------------------
   Desktop section padding is a lot of dead scrolling on a 390px screen. */
@media (max-width: 768px) {
  :root { --section-y: 52px; }
  .band-tight { padding-block: 38px; }
  .head-block { margin-bottom: 26px; }
  .head-block .lede { font-size: 1rem; }
  h1 { letter-spacing: -.035em; }
  h2 { letter-spacing: -.03em; }
}
@media (max-width: 400px) {
  :root { --gutter: 18px; }
}

/* --- 27.5 Tables ----------------------------------------------------------
   A weight table with five columns cannot be read side to side on a phone.
   Below 700px each row becomes its own small card with the column heading
   printed against each value, so nothing has to scroll horizontally. */
@media (max-width: 700px) {
  .table-scroll { overflow-x: visible; }
  table.ss-table { min-width: 0; display: block; }
  table.ss-table thead { display: none; }
  table.ss-table tbody,
  table.ss-table tr,
  table.ss-table td { display: block; width: auto; }

  table.ss-table caption {
    display: block;
    padding: 16px 16px 4px;
    text-align: left;
  }
  table.ss-table tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--steel-100);
  }
  table.ss-table tr:last-child { border-bottom: 0; }
  table.ss-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border: 0;
    padding: 8px 16px;
    text-align: right;
  }
  table.ss-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 52%;
    text-align: left;
    font-size: .8rem;
    font-weight: 700;
    color: var(--steel-500);
    letter-spacing: -.005em;
  }
  /* first cell in each row reads as that row's heading */
  table.ss-table td:first-child {
    background: var(--mist);
    padding-top: 11px;
    padding-bottom: 11px;
    font-weight: 700;
  }
  table.ss-table td:first-child::before { color: var(--steel-400); }
  table.ss-table td code { word-break: break-all; text-align: right; }
}

/* --- 27.6 Remaining touch and legibility fixes ----------------------------- */
@media (max-width: 768px) {
  /* dots keep their small look but get a finger-sized hit area */
  .swipe-nav { gap: 0; }
  .swipe-dot {
    width: 26px;
    height: 30px;
    background: none;
    position: relative;
  }
  .swipe-dot::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--steel-200);
    transition: background .25s var(--ease), width .25s var(--ease);
  }
  .swipe-dot.is-on { background: none; width: 30px; }
  .swipe-dot.is-on::before { background: var(--brass); width: 18px; border-radius: 4px; }
  .band-ink .swipe-dot { background: none; }
  .band-ink .swipe-dot::before { background: rgba(255, 255, 255, .22); }
  .band-ink .swipe-dot.is-on::before { background: var(--brass-light); }

  .field-set label { font-size: .8rem; letter-spacing: .06em; }
  .quote-preview-head { font-size: .76rem; }
  .brandmark-sub { font-size: .72rem; }
  .rate-foot a,
  .rate-foot { line-height: 2.1; }
  .crumbs a, .crumbs li { padding-block: 10px; }
}

/* --- 27.7 Cards and footer -------------------------------------------------
   The leadership card puts the initials beside the text, which squeezes the
   paragraph into a narrow column on a phone. Stack it instead. */
@media (max-width: 560px) {
  .leader-card { display: block; }
  .leader-initials { margin-bottom: 14px; }
  .leader-role { margin-bottom: 8px; }
}

/* A single-column footer runs to about a thousand pixels of scrolling. */
@media (max-width: 768px) and (min-width: 400px) {
  .foot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
}
@media (max-width: 768px) {
  .foot-grid { gap: 28px; }
  .site-foot { padding-block: 44px 30px; }
}

/* --- 27.8 Last pass on touch targets -------------------------------------- */
@media (max-width: 768px) {
  .swipe-dot { width: 34px; height: 42px; }
  .swipe-dot.is-on { width: 38px; }
  .rate-foot a { display: inline-block; padding-block: 10px; }
  .plist-col li a { display: inline-block; padding-block: 8px; }
  .foot-list a { padding-block: 9px; }
  .hero-tag .tag-text { font-size: .82rem; }
}

/* --- 27.9 Top bar ----------------------------------------------------------
   At 320px the bar wrapped onto three lines. The phone number and email are
   what people actually tap, so the descriptive bits step aside first. */
@media (max-width: 560px) {
  .topbar .shell { justify-content: center; row-gap: 0; }
  .topbar-fade { display: none; }
  .topbar-left, .topbar-right { gap: 4px 16px; justify-content: center; }
}
@media (max-width: 400px) {
  .topbar-left { display: none; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .topbar-item { font-size: .8rem; }
}

/* --------------------------------------------------------------------------
   28. Product tiles — photograph-led cards
   Each product family leads with a picture of the material. Four families
   have no honest free-licensed photograph available, so those keep the
   hand-drawn section instead of borrowing a picture of something else.
   -------------------------------------------------------------------------- */
.product-photo {
  position: relative;
  margin: 0 -26px 20px;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--steel-100);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.product-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.product-card:hover .product-photo img { transform: scale(1.05); }
.product-photo::after {
  /* keeps the badge readable over a bright photo */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(11, 12, 14, .34));
  pointer-events: none;
}

.product-badge {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 3px 12px rgba(11, 12, 14, .22);
}
.product-badge svg { width: 26px; height: 26px; }

/* the drawn stand-in, sized and framed exactly like a photo tile */
.product-photo--drawn {
  background:
    linear-gradient(135deg, #F7F8F9 0%, #E4E7EB 42%, #F2F3F5 62%, #D9DDE2 100%);
}
.product-photo--drawn::after { display: none; }
.product-photo--drawn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg,
              rgba(255, 255, 255, .55) 0 2px, rgba(0, 0, 0, .012) 2px 5px);
  opacity: .7;
}
.product-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.product-plate svg { width: 84px; height: 84px; }

@media (max-width: 768px) {
  .product-photo { margin-inline: -26px; }
  .product-plate svg { width: 72px; height: 72px; }
}

/* ==========================================================================
   29. Loader — the mark assembles itself, then the curtain lifts
   ========================================================================== */
.ss-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.ss-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ss-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.ss-loader-mark {
  width: clamp(190px, 42vw, 300px);
  height: auto;
  overflow: visible;
}

/* the two arcs draw themselves */
.ld-brass,
.ld-ink {
  opacity: 0;
  animation: ldInk .55s var(--ease-out) forwards;
}
.ld-brass { animation-delay: .30s; }
.ld-ink   { animation-delay: .10s; }
@keyframes ldInk {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the coil rolls in from the right and settles */
.ld-coil {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 30% 50%;
  animation: ldCoil .8s var(--ease-out) .34s forwards;
}
@keyframes ldCoil {
  from { opacity: 0; transform: translateX(16px) scale(.86); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* a slow highlight travelling round the coil face, so it reads as turning */
.ld-ring {
  animation: ldRing 1.9s linear 1s infinite;
}
@keyframes ldRing {
  0%   { opacity: .2; stroke-width: .5; }
  50%  { opacity: .9; stroke-width: .9; }
  100% { opacity: .2; stroke-width: .5; }
}

.ss-loader-bar {
  width: clamp(150px, 34vw, 230px);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.ss-loader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--brass-light), transparent);
  animation: ldBar 1.15s var(--ease) .5s infinite;
}
@keyframes ldBar {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

/* a visitor who has asked for less motion gets the mark, held still */
@media (prefers-reduced-motion: reduce) {
  .ld-brass, .ld-ink, .ld-coil { opacity: 1; animation: none; transform: none; }
  .ld-ring, .ss-loader-bar span { animation: none; }
}

/* ==========================================================================
   30. Product pages — page-head with a photograph behind it
   ========================================================================== */
.phead-media { position: relative; overflow: hidden; }
.phead-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phead-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  transform: scale(1.04);
  animation: pheadDrift 18s var(--ease) infinite alternate;
}
@keyframes pheadDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}
.phead-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11,12,14,.95) 0%, rgba(11,12,14,.82) 46%, rgba(11,12,14,.44) 100%),
    radial-gradient(110% 80% at 8% 30%, rgba(11,12,14,.6), transparent 68%);
}
/* when the family has no photograph, a brushed steel plate stands in */
.phead-plate {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, #1A1E23 0%, #2B3138 40%, #191D22 60%, #23282E 100%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.045) 0 2px, transparent 2px 6px);
}
.phead-media .shell { position: relative; z-index: 2; }
.phead-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.centre-cta { justify-content: center; }

/* --- specification list --------------------------------------------------- */
.pspec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 0;
}
.pspec {
  padding: 14px 0;
  border-bottom: 1px solid var(--steel-100);
}
.pspec dt {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: 5px;
}
.pspec dd {
  margin: 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
}
.pnotes { margin-top: 24px; }
.pnotes p {
  font-size: .93rem;
  line-height: 1.68;
  color: var(--steel-500);
  margin-bottom: 14px;
}

/* --- related products ---------------------------------------------------- */
.rel-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rel-chip {
  border: 1px solid var(--steel-200);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rel-chip:hover {
  border-color: var(--brass);
  color: var(--brass-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.rel-chip--all { background: var(--ink); border-color: var(--ink); color: #fff; }
.rel-chip--all:hover { background: var(--graphite); color: #fff; border-color: var(--graphite); }

@media (max-width: 640px) {
  .pspec-grid { grid-template-columns: minmax(0, 1fr); }
  .phead-bg img { animation: none; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .phead-bg img { animation: none; }
}

/* ==========================================================================
   31. Additional motion
   All of it opt-out via prefers-reduced-motion, and all of it cheap —
   transform and opacity only, nothing that forces layout.
   ========================================================================== */

/* --- staggered reveal for anything inside a revealed group ---------------- */
.rise-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.rise-group.is-in > * { opacity: 1; transform: none; }
.rise-group.is-in > *:nth-child(1) { transition-delay: .04s; }
.rise-group.is-in > *:nth-child(2) { transition-delay: .10s; }
.rise-group.is-in > *:nth-child(3) { transition-delay: .16s; }
.rise-group.is-in > *:nth-child(4) { transition-delay: .22s; }
.rise-group.is-in > *:nth-child(5) { transition-delay: .28s; }
.rise-group.is-in > *:nth-child(6) { transition-delay: .34s; }
.rise-group.is-in > *:nth-child(7) { transition-delay: .40s; }
.rise-group.is-in > *:nth-child(8) { transition-delay: .46s; }

/* --- headline words lifting in ------------------------------------------- */
.word-lift { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-lift > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .7s var(--ease-out);
}
.is-lifted .word-lift > span { transform: none; }

/* --- brass rule that draws itself under a section heading ---------------- */
.eyebrow::before { transform-origin: left center; }
.rise.is-in .eyebrow::before { animation: ruleIn .6s var(--ease-out) both; }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- link underline sweep ------------------------------------------------- */
.link-arrow .arw { transition: transform .28s var(--ease); }
.link-arrow:hover .arw { transform: translateX(5px); }

/* --- standards chips drift gently on hover ------------------------------- */
.standards-chip { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.standards-chip:hover { transform: translateY(-3px); border-color: var(--brass-line); }

/* --- product / value / industry cards lift as a set ---------------------- */
.value-tile, .industry-cell, .leader-card, .plist-col {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.value-tile:hover, .industry-cell:hover { transform: translateY(-5px); }

/* --- the floating WhatsApp button breathes once, on arrival -------------- */
.wa-float { animation: waPop .5s var(--ease-out) 1.2s both; }
@keyframes waPop {
  from { opacity: 0; transform: scale(.8) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- sticky nav shrinks slightly once you start scrolling ---------------- */
.masthead { transition: box-shadow .3s var(--ease), background .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rise-group > *, .word-lift > span { opacity: 1; transform: none; transition: none; }
  .wa-float { animation: none; }
  .rise.is-in .eyebrow::before { animation: none; }
}

/* product pages use a plain marker list with no tick icon */
.marker-list--plain li { grid-template-columns: 9px 1fr; align-items: baseline; }
.marker-list--plain li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brass);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .lede a, .pnotes a { display: inline-block; padding-block: 8px; }
}

/* ==========================================================================
   32. Desktop density
   The site was built with generous magazine spacing. On a 1366x768 laptop that
   meant fourteen screens of scrolling on the home page. Everything below
   tightens the rhythm so a section reads as roughly one screenful, without
   touching the mobile layout, which was tuned separately in section 27.
   ========================================================================== */
@media (min-width: 769px) {

  /* --- global rhythm ----------------------------------------------------- */
  :root { --section-y: clamp(52px, 4.4vw, 76px); }
  .band-tight { padding-block: clamp(38px, 3vw, 52px); }

  .head-block { margin-bottom: clamp(26px, 2.4vw, 34px); max-width: 660px; }
  .head-block h2 { margin-bottom: 10px; }
  .head-block .lede { font-size: 1.02rem; line-height: 1.55; }

  h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); }

  /* --- hero: fit the fold, rate card included ---------------------------- */
  .hero { padding-block: clamp(64px, 6vw, 96px) clamp(56px, 5vw, 82px); }
  .hero-sub { margin-bottom: 24px; font-size: 1.02rem; }
  .hero-cta { margin-bottom: 22px; }
  .rate-card { padding: 26px 26px 22px; }
  .rate-card .field { margin-bottom: 11px; }
  .rate-card select, .rate-card input { padding: 11px 14px; }
  .hero-proof li { padding: 8px 14px; }

  /* --- product cards: shorter photo, tighter body ------------------------ */
  .product-photo { aspect-ratio: 16 / 9; margin-bottom: 16px; }
  .product-card { padding: 0 22px 20px; }
  .product-photo { margin-inline: -22px; }
  .product-card h3 { font-size: 1.06rem; margin-bottom: 6px; }
  .product-card p {
    font-size: .89rem;
    line-height: 1.55;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .spec-list { gap: 6px; margin-bottom: 14px; }
  .spec-list li { padding: 5px 11px; font-size: .74rem; }
  .product-card .card-foot { margin-top: auto; padding-top: 4px; }

  /* the catalogue runs to 13 cards — four across turns five rows into four */
  #catalogueGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 769px) and (max-width: 1100px) {
  #catalogueGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 769px) {
  /* --- contact tiles sit two across rather than stacking ----------------- */
  .contact-tile { padding: 18px 20px; }
  .ct-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* --- product list, FAQ, industries, values ---------------------------- */
  .plist-col { padding: 20px 20px 8px; }
  .plist-col li { padding: 9px 0; }
  .faq-q { padding-block: 16px; }
  .faq-a { padding-bottom: 16px; }
  .industry-cell { padding: 20px 20px 22px; }
  .value-tile { padding: 24px 22px; }
  .leader-card { padding: 26px; }
  .photo-grid { gap: 14px; }

  /* --- quote builder ----------------------------------------------------- */
  .quote-form-side { padding: 26px; }
  .quote-line { padding: 11px 0; }
  .quote-divider { margin: 20px 0 16px; }
  .quote-you { gap: 0 16px; }
  .form-group { margin-bottom: 13px; }
  .quote-side { padding: 24px; }
  .quote-preview { max-height: 168px; }

  /* --- calculator -------------------------------------------------------- */
  .calc-fields { gap: 13px; }
  .field-set input, .field-set select { padding: 10px 13px; }

  /* --- product detail pages --------------------------------------------- */
  .pspec { padding: 11px 0; }
  .marker-list { gap: 11px; margin-top: 20px; }
  .pnotes { margin-top: 18px; }
  .pnotes p { margin-bottom: 11px; }

  /* --- tables ------------------------------------------------------------ */
  table.ss-table td, table.ss-table th { padding-block: 10px; }

  /* --- footer ------------------------------------------------------------ */
  .site-foot { padding-block: 52px 26px; }
  .foot-grid { gap: 32px; }
  .foot-list { gap: 8px; }
}

@media (min-width: 769px) {
  /* the About story photo was running to full width at full height */
  .photo-wide img { max-height: 340px; object-fit: cover; }

  /* the home page product grid repeats the catalogue, so it carries the
     headline detail only — the full spec lives on each product page */
  #products .spec-list { display: none; }
  #products .product-card p { -webkit-line-clamp: 2; }
}

/* a stat cell that carries a word rather than a counted figure */
.stat-word { font-size: .82em; letter-spacing: -.03em; }

/* ==========================================================================
   33. Video-backed bands
   A reusable background layer. Drop <div class="band-media"> as the first
   child of any .band and it plays behind the content. Swap the file in
   assets/video/ for real mill or yard footage and nothing else changes.
   ========================================================================== */
.has-media { position: relative; overflow: hidden; isolation: isolate; }
.band-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}
.band-media video,
.band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .55;
}
.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.84) 48%, rgba(11,12,14,.58) 100%),
    radial-gradient(120% 90% at 12% 25%, rgba(11,12,14,.55), transparent 70%);
}
.has-media > .shell { position: relative; z-index: 2; }

/* on a light band the footage sits behind a near-white veil instead */
.band-media--light::after {
  background:
    linear-gradient(100deg, rgba(244,245,247,.96) 0%, rgba(244,245,247,.9) 46%, rgba(244,245,247,.72) 100%);
}
.band-media--light video, .band-media--light img { opacity: .5; }

@media (max-width: 900px) {
  .band-media::after {
    background: linear-gradient(180deg, rgba(11,12,14,.9), rgba(11,12,14,.93));
  }
  .band-media--light::after {
    background: linear-gradient(180deg, rgba(244,245,247,.94), rgba(244,245,247,.96));
  }
}

/* ==========================================================================
   34. Applications strip
   ========================================================================== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.app-card {
  position: relative;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 26px 24px 28px;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease);
}
.app-card:hover {
  transform: translateY(-5px);
  border-color: var(--brass-line);
  background: rgba(184, 134, 59, .07);
}
.app-card svg { color: var(--brass-light); margin-bottom: 14px; display: block; }
.app-card h3 { color: #fff; font-size: 1.02rem; margin: 0 0 8px; letter-spacing: -.02em; }
.app-card p { margin: 0 0 12px; font-size: .87rem; line-height: 1.6; color: #C7CCD3; }
.app-card .app-mats {
  font-size: .76rem;
  color: var(--brass-light);
  font-weight: 700;
  letter-spacing: .01em;
}
.app-lead-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brass);
  color: #12130F;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
@media (max-width: 991px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-grid { grid-template-columns: minmax(0, 1fr); } }

/* the CTA band already has its own rounded panel, so the footage clips to it */
.cta-band { isolation: isolate; }
.cta-media { border-radius: inherit; }
.cta-band > *:not(.cta-media) { position: relative; z-index: 2; }
.cta-media::after {
  background:
    linear-gradient(140deg, rgba(11,12,14,.93) 0%, rgba(35,38,43,.86) 55%, rgba(44,42,37,.8) 100%);
}
.app-foot {
  margin: 28px 0 0;
  text-align: center;
  font-size: .9rem;
  color: var(--steel-400);
}
.app-foot a { color: var(--brass-light); font-weight: 700; }

/* the flagged card keeps its icon aligned with the rest of the row */
.app-card--flag .app-lead-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
}
@media (max-width: 400px) {
  .app-card--flag .app-lead-tag { position: static; margin-bottom: 12px; }
}

/* let the footage read a little more strongly behind dark bands */
.band-media::after {
  background:
    linear-gradient(100deg, rgba(11,12,14,.90) 0%, rgba(11,12,14,.78) 48%, rgba(11,12,14,.44) 100%),
    radial-gradient(120% 90% at 12% 25%, rgba(11,12,14,.5), transparent 70%);
}
.band-media video, .band-media img { opacity: .68; }

/* ==========================================================================
   35. Light theme
   The site was first built dark-led. This section flips every dark surface to
   the white treatment, keeping the ink/brass palette for type and accents.
   It is written as a final override so the original component rules stay
   readable above; nothing here changes layout, only colour.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.hero {
  background: #fff;
  color: var(--steel-700);
}
.hero-media { background: var(--mist); }
.hero-video { opacity: .5; filter: brightness(1.06) saturate(.82); }
.hero-scrim {
  background:
    linear-gradient(102deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 44%, rgba(255,255,255,.62) 100%),
    radial-gradient(112% 80% at 10% 30%, rgba(255,255,255,.75), transparent 68%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.92) 55%, rgba(255,255,255,.96) 100%);
  }
}
.hero::before { border-color: rgba(184,134,59,.34); border-right-color: transparent; }
.hero::after { background: radial-gradient(circle, rgba(184,134,59,.16), transparent 66%); }
.hero h1 { color: var(--ink); }
.hero h1 .accent { color: var(--brass-deep); }
.hero-sub { color: var(--steel-600, #5A616A); }
.hero-tag {
  background: #fff;
  border-color: var(--steel-200);
  color: var(--steel-700);
  box-shadow: var(--shadow-sm);
}
.hero-tag em { background: var(--brass); color: #fff; }
.hero-proof li {
  background: #fff;
  border-color: var(--steel-200);
  color: var(--steel-700);
  box-shadow: var(--shadow-xs);
}
.hero-proof li svg { color: var(--brass-deep); }

/* --- hero rate card ------------------------------------------------------ */
.rate-card {
  background: #fff;
  border: 1px solid var(--steel-200);
  box-shadow: var(--shadow-xl);
  backdrop-filter: none;
}
.rate-card h2 { color: var(--ink); }
.rate-card .rate-note { color: var(--steel-500); }
.rate-card label { color: var(--steel-500); }
.rate-card select,
.rate-card input,
.rate-card textarea {
  background: var(--mist);
  border-color: var(--steel-200);
  color: var(--ink);
}
.rate-card select option { background: #fff; color: var(--ink); }
.rate-card input::placeholder { color: var(--steel-400); }
.rate-card .rate-foot { color: var(--steel-500); }
.rate-card .rate-foot a { color: var(--brass-deep) !important; }

/* --- dark bands become light ---------------------------------------------- */
.band-ink { background: var(--mist); color: var(--steel-600, #5A616A); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--ink); }
.band-ink .eyebrow { color: var(--brass-deep); }
.band-ink .lede { color: var(--steel-500); }
.band-ink .value-tile {
  background: #fff;
  border-color: var(--steel-100);
  box-shadow: var(--shadow-xs);
}
.band-ink .value-tile p { color: var(--steel-500); }
.band-ink .value-tile:hover { border-color: var(--brass-line); background: #fff; }
.band-ink .value-icon { background: var(--brass-tint); color: var(--brass-deep); }

/* footage behind a light band sits under a white veil */
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(100deg, rgba(244,245,247,.95) 0%, rgba(244,245,247,.88) 48%, rgba(244,245,247,.7) 100%),
    radial-gradient(120% 90% at 12% 25%, rgba(244,245,247,.6), transparent 70%);
}
.band-ink .band-media video { opacity: .55; filter: brightness(1.08) saturate(.8); }
@media (max-width: 900px) {
  .band-ink .band-media::after {
    background: linear-gradient(180deg, rgba(244,245,247,.93), rgba(244,245,247,.95));
  }
}

/* --- applications cards --------------------------------------------------- */
.app-card {
  background: #fff;
  border-color: var(--steel-100);
  box-shadow: var(--shadow-xs);
}
.app-card:hover { border-color: var(--brass-line); background: #fff; }
.app-card svg { color: var(--brass-deep); }
.app-card h3 { color: var(--ink); }
.app-card p { color: var(--steel-500); }
.app-card .app-mats { color: var(--brass-deep); }
.app-foot { color: var(--steel-500); }
.app-foot a { color: var(--brass-deep); }

/* --- quote side panel ------------------------------------------------------ */
.quote-side {
  background: #fff;
  border: 1px solid var(--steel-200);
  box-shadow: var(--shadow-md);
}
.quote-side h3 { color: var(--ink); }
.quote-steps li { color: var(--steel-600, #5A616A); border-bottom-color: var(--steel-100); }
.quote-steps li span { background: var(--brass-tint); border-color: var(--brass-line); color: var(--brass-deep); }
.quote-preview-box { border-color: var(--steel-200); background: var(--mist); }
.quote-preview-head { border-bottom-color: var(--steel-200); color: var(--steel-500); }
.quote-preview { color: var(--steel-700); }
.quote-alt p { color: var(--steel-500); }

/* --- calculator readout ---------------------------------------------------- */
.calc-readout {
  background: linear-gradient(150deg, #FBFAF8 0%, #F1EEE8 55%, #F6F4F0 100%);
  color: var(--steel-600, #5A616A);
  border: 1px solid var(--steel-200);
}
.calc-readout::before { opacity: .5; }
.calc-total { color: var(--ink); }
.calc-total .unit { color: var(--brass-deep); }
.calc-sub { color: var(--steel-500); }
.calc-caption { color: var(--steel-500); }
.calc-breakdown li { border-bottom-color: var(--steel-200); }
.calc-breakdown li span:first-child { color: var(--steel-500); }
.calc-breakdown li span:last-child { color: var(--ink); }
.calc-total small { color: var(--brass-deep); }
.calc-shape-view svg { color: var(--steel-500); }

/* --- page heads ------------------------------------------------------------ */
.page-head { background: var(--mist); color: var(--steel-500); }
.page-head h1 { color: var(--ink); }
.page-head .lede { color: var(--steel-600, #5A616A); }
.crumbs, .crumbs a { color: var(--steel-500); }
.crumbs a:hover { color: var(--brass-deep); }
.phead-bg img { opacity: .3; }
.phead-bg::after {
  background:
    linear-gradient(100deg, rgba(244,245,247,.96) 0%, rgba(244,245,247,.88) 46%, rgba(244,245,247,.66) 100%),
    radial-gradient(110% 80% at 8% 30%, rgba(244,245,247,.7), transparent 68%);
}
.phead-plate {
  background:
    linear-gradient(118deg, #FAFBFC 0%, #E7EAEE 40%, #F3F5F7 62%, #DFE3E8 100%),
    repeating-linear-gradient(112deg, rgba(0,0,0,.028) 0 2px, transparent 2px 6px);
}

/* --- closing CTA panel ------------------------------------------------------ */
.cta-band {
  background: linear-gradient(140deg, #FBF9F6 0%, #F3EEE4 55%, #EFE6D6 100%);
  border: 1px solid var(--brass-line);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--steel-600, #5A616A); }
.cta-band::before { border-color: rgba(184,134,59,.3); }
.cta-media video { opacity: .35; filter: brightness(1.1) saturate(.8); }
.cta-media::after {
  background: linear-gradient(140deg, rgba(251,249,246,.94) 0%, rgba(243,238,228,.9) 55%, rgba(239,230,214,.88) 100%);
}
.cta-band .btn-ss--ghost-light {
  border-color: var(--steel-300, #C7CCD3);
  color: var(--ink);
}
.cta-band .btn-ss--ghost-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- footer ----------------------------------------------------------------- */
.site-foot {
  background: var(--mist);
  color: var(--steel-500);
  border-top: 1px solid var(--steel-200);
}
.site-foot h4, .foot-title { color: var(--ink); }
.foot-list a { color: var(--steel-600, #5A616A); }
.foot-list a:hover { color: var(--brass-deep); }
.foot-about, .foot-note { color: var(--steel-500); }
.social-row a {
  background: #fff;
  border: 1px solid var(--steel-200);
  color: var(--steel-700);
}
.social-row a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.foot-bottom { border-top-color: var(--steel-200); color: var(--steel-400); }
.foot-contact a { color: var(--steel-600, #5A616A); }
.foot-contact a:hover { color: var(--brass-deep); }
.foot-contact svg { color: var(--brass-deep); }

/* --- section 27/33 mobile veils follow the light treatment ------------------ */
.band-media::after {
  background:
    linear-gradient(100deg, rgba(244,245,247,.94) 0%, rgba(244,245,247,.86) 48%, rgba(244,245,247,.66) 100%),
    radial-gradient(120% 90% at 12% 25%, rgba(244,245,247,.55), transparent 70%);
}
.band-media video, .band-media img { opacity: .55; filter: brightness(1.08) saturate(.8); }
.band-media { background: var(--mist); }

/* the ghost button was drawn for dark surfaces; on the light theme it needs ink */
.hero .btn-ss--ghost-light,
.page-head .btn-ss--ghost-light,
.band-ink .btn-ss--ghost-light,
.band-mist .btn-ss--ghost-light {
  border-color: var(--steel-300);
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
}
.hero .btn-ss--ghost-light:hover,
.page-head .btn-ss--ghost-light:hover,
.band-ink .btn-ss--ghost-light:hover,
.band-mist .btn-ss--ghost-light:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.quote-alt .btn-ss--ghost-light {
  border-color: var(--steel-200);
  color: var(--ink);
  background: #fff;
}

/* keep the CTA panel warm rather than grey */
.cta-media::after {
  background: linear-gradient(140deg, rgba(252,249,244,.93) 0%, rgba(244,236,222,.9) 52%, rgba(238,227,206,.9) 100%);
}
.cta-band { background: linear-gradient(140deg, #FCFAF6 0%, #F4ECDE 55%, #EFE4D2 100%); }

/* ==========================================================================
   36. Video product tiles
   The still stays underneath as the poster and the fallback. The clip fades in
   on top once it is actually playing, so a slow connection or a blocked
   autoplay just shows the photograph.
   ========================================================================== */
.tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.tile-video.is-playing { opacity: 1; }
.product-photo img { position: relative; z-index: 0; }

/* the badge and the shade sit above the clip */
.product-photo::after, .product-badge { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .tile-video { display: none; }
}

/* the page-head background layer also accepts video */
.phead-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .32;
}

/* ==========================================================================
   37. Letting the footage show
   The first pass of the white theme washed a flat veil over the whole of every
   clip, which killed it. The veil is now shaped: strong where words sit, clear
   everywhere else, so the footage reads while the type stays legible.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.hero-video {
  opacity: 1;
  filter: none;
}
.hero-scrim {
  background:
    linear-gradient(96deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.90) 26%,
      rgba(255,255,255,.62) 48%,
      rgba(255,255,255,.20) 70%,
      rgba(255,255,255,.06) 100%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.78) 38%,
        rgba(255,255,255,.42) 68%,
        rgba(255,255,255,.30) 100%);
  }
}

/* --- bands --------------------------------------------------------------- */
.band-media video,
.band-media img {
  opacity: 1;
  filter: none;
}
.band-ink .band-media video { opacity: 1; filter: none; }

/* the wash sits behind the heading block and thins out across the section */
.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(96deg,
      rgba(244,245,247,.94) 0%,
      rgba(244,245,247,.86) 30%,
      rgba(244,245,247,.52) 55%,
      rgba(244,245,247,.18) 80%,
      rgba(244,245,247,.06) 100%);
}
@media (max-width: 900px) {
  .band-media::after,
  .band-ink .band-media::after {
    background:
      linear-gradient(180deg,
        rgba(244,245,247,.92) 0%,
        rgba(244,245,247,.74) 40%,
        rgba(244,245,247,.40) 100%);
  }
}

/* a centred heading needs cover under it rather than to one side */
.band-ink .head-block.centre {
  position: relative;
}
.band-ink .head-block.centre::before {
  content: "";
  position: absolute;
  inset: -30px -8% -18px;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 45%,
              rgba(244,245,247,.94) 0%, rgba(244,245,247,.72) 55%, transparent 100%);
  pointer-events: none;
}

/* --- page heads ----------------------------------------------------------- */
.phead-bg img,
.phead-bg video {
  opacity: 1;
  filter: none;
}
.phead-bg::after {
  background:
    linear-gradient(96deg,
      rgba(244,245,247,.95) 0%,
      rgba(244,245,247,.88) 28%,
      rgba(244,245,247,.58) 52%,
      rgba(244,245,247,.22) 78%,
      rgba(244,245,247,.08) 100%);
}
@media (max-width: 900px) {
  .phead-bg::after {
    background:
      linear-gradient(180deg,
        rgba(244,245,247,.92) 0%,
        rgba(244,245,247,.78) 45%,
        rgba(244,245,247,.45) 100%);
  }
}

/* --- closing panel: centred text, so a soft centre wash --------------------- */
.cta-media video { opacity: 1; filter: none; }
.cta-media::after {
  background:
    radial-gradient(85% 95% at 50% 50%,
      rgba(252,249,244,.93) 0%, rgba(248,241,229,.86) 45%,
      rgba(244,236,222,.62) 75%, rgba(240,231,212,.42) 100%);
}

/* --- type sitting directly over footage gets a little lift ----------------- */
.hero h1,
.page-head h1,
.band-ink .head-block h2,
.cta-band h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.hero-sub,
.page-head .lede,
.band-ink .head-block .lede,
.cta-band p {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

/* a left-aligned heading block needs the wash held further across */
.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(96deg,
      rgba(244,245,247,.96) 0%,
      rgba(244,245,247,.92) 34%,
      rgba(244,245,247,.78) 52%,
      rgba(244,245,247,.34) 74%,
      rgba(244,245,247,.08) 100%);
}
.phead-bg::after {
  background:
    linear-gradient(96deg,
      rgba(244,245,247,.96) 0%,
      rgba(244,245,247,.92) 32%,
      rgba(244,245,247,.74) 50%,
      rgba(244,245,247,.30) 74%,
      rgba(244,245,247,.08) 100%);
}
@media (max-width: 900px) {
  .band-media::after,
  .band-ink .band-media::after,
  .phead-bg::after {
    background:
      linear-gradient(180deg,
        rgba(244,245,247,.93) 0%,
        rgba(244,245,247,.80) 42%,
        rgba(244,245,247,.42) 100%);
  }
}

/* ==========================================================================
   38. Footage forward
   White washes over video were hiding the footage. Every clip now sits under a
   dark scrim instead, with white type over it — the page around it stays white.
   ========================================================================== */

/* --- hero: one column, full-bleed clip, smaller headline ------------------- */
.hero {
  background: var(--ink);
  min-height: min(78vh, 660px);
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 7vw, 92px);
}
.hero-media { background: var(--ink); }
.hero-video { opacity: 1; filter: none; }
.hero-scrim {
  background:
    linear-gradient(94deg, rgba(11,12,14,.80) 0%, rgba(11,12,14,.62) 42%,
                    rgba(11,12,14,.38) 70%, rgba(11,12,14,.30) 100%),
    linear-gradient(180deg, rgba(11,12,14,.36) 0%, transparent 32%,
                    transparent 62%, rgba(11,12,14,.48) 100%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(11,12,14,.62) 0%, rgba(11,12,14,.56) 45%,
                      rgba(11,12,14,.72) 100%);
  }
}

.hero-grid--solo { grid-template-columns: minmax(0, 1fr) !important; }
.hero-grid--solo > div { max-width: 720px; }

.hero h1 {
  color: #fff;
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 14px rgba(11, 12, 14, .45);
}
.hero h1 .accent { color: var(--brass-light); }
.hero-sub {
  color: #DFE3E8;
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
  max-width: 620px;
  text-shadow: 0 1px 10px rgba(11, 12, 14, .5);
}
.hero-tag {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.hero-tag em { background: var(--brass); color: #12130F; }
.hero-proof li {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.hero-proof li svg { color: var(--brass-light); }
.hero .btn-ss--ghost-light {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
.hero .btn-ss--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- bands with footage go dark too --------------------------------------- */
.band-media { background: var(--ink); }
.band-media video, .band-media img { opacity: 1; filter: none; }
.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.84) 0%, rgba(11,12,14,.66) 44%,
                    rgba(11,12,14,.42) 72%, rgba(11,12,14,.34) 100%);
}
@media (max-width: 900px) {
  .band-media::after,
  .band-ink .band-media::after {
    background: linear-gradient(180deg, rgba(11,12,14,.72), rgba(11,12,14,.78));
  }
}
.has-media .head-block h2,
.has-media .head-block h3 { color: #fff; text-shadow: 0 2px 12px rgba(11,12,14,.5); }
.has-media .head-block .lede { color: #D8DCE1; text-shadow: 0 1px 10px rgba(11,12,14,.55); }
.has-media .eyebrow { color: var(--brass-light); }
.band-ink .head-block.centre::before { display: none; }

/* --- page heads ------------------------------------------------------------ */
.page-head { background: var(--ink); }
.phead-bg img, .phead-bg video { opacity: 1; filter: none; }
.phead-bg::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.84) 0%, rgba(11,12,14,.66) 44%,
                    rgba(11,12,14,.44) 72%, rgba(11,12,14,.34) 100%);
}
@media (max-width: 900px) {
  .phead-bg::after { background: linear-gradient(180deg, rgba(11,12,14,.74), rgba(11,12,14,.8)); }
}
.phead-media h1 { color: #fff; text-shadow: 0 2px 14px rgba(11,12,14,.5); }
.phead-media .lede { color: #D8DCE1; text-shadow: 0 1px 10px rgba(11,12,14,.55); }
.phead-media .crumbs, .phead-media .crumbs a { color: #AEB5BE; }
.phead-media .crumbs a:hover { color: var(--brass-light); }
.phead-media .btn-ss--ghost-light {
  border-color: rgba(255,255,255,.38); color: #fff; background: rgba(255,255,255,.06);
}
.phead-media .btn-ss--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- closing panel --------------------------------------------------------- */
.cta-band { background: var(--ink); border-color: transparent; }
.cta-media video { opacity: 1; filter: none; }
.cta-media::after {
  background: radial-gradient(90% 100% at 50% 50%,
              rgba(11,12,14,.78) 0%, rgba(11,12,14,.66) 55%, rgba(11,12,14,.58) 100%);
}
.cta-band h2 { color: #fff; text-shadow: 0 2px 12px rgba(11,12,14,.5); }
.cta-band p { color: #D8DCE1; text-shadow: 0 1px 10px rgba(11,12,14,.5); }
.cta-band .btn-ss--ghost-light {
  border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.06);
}
.cta-band .btn-ss--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* white cards still sit on the dark bands and read fine */
.band-ink .value-tile, .app-card { background: #fff; }

/* the industries photo strip sits above the cards and needs breathing room */
#industries .photo-strip,
.industry-strip + .photo-strip,
.photo-strip { margin-bottom: 26px; }
.band .photo-wide { border-radius: var(--r-lg); }

/* ==========================================================================
   39. Page heads match the hero
   Every page head now uses the same type scale, weight and treatment as the
   home page hero, so the pages read as one site rather than six.
   ========================================================================== */
.page-head {
  min-height: min(46vh, 400px);
  display: flex;
  align-items: center;
  padding-block: clamp(54px, 6vw, 86px);
}
.page-head > .shell { width: 100%; }
.page-head h1,
.phead-media h1 {
  color: #fff;
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  margin-bottom: 16px;
  max-width: 20ch;
  text-shadow: 0 2px 14px rgba(11, 12, 14, .45);
}
.page-head .lede,
.phead-media .lede {
  color: #DFE3E8;
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
  max-width: 620px;
  text-shadow: 0 1px 10px rgba(11, 12, 14, .5);
}
.page-head .crumbs,
.page-head .crumbs a { color: #AEB5BE; }
.page-head .crumbs a:hover { color: var(--brass-light); }
.phead-cta { margin-top: 26px; }

/* ==========================================================================
   40. Video cards
   Clips shown as ordinary boxes rather than full-bleed backgrounds, so the
   footage reads as content on its own.
   ========================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.video-card {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-md);
}
.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ink);
}
.video-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 16px;
  color: #fff;
  font-size: .88rem;
  line-height: 1.45;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, transparent, rgba(11, 12, 14, .82) 62%);
}
.video-card .vc-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

/* wide variant shows the whole 16:9 frame with nothing cropped away */
.video-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-grid--wide .video-card video { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .video-grid--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   41. Product list with thumbnails
   ========================================================================== */
.plist-col li { padding: 0; border-bottom: 1px solid var(--steel-100); }
.plist-col li:last-child { border-bottom: 0; }
.plist-col li a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  padding: 11px 0;
  text-decoration: none;
  border: 0;
}
.plist-col li a picture {
  grid-row: 1 / 3;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--steel-100);
}
.plist-col li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease-out);
}
.plist-col li a:hover img { transform: scale(1.09); }
.plist-col li .pl-name {
  align-self: end;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.012em;
  transition: color .2s var(--ease);
}
.plist-col li a:hover .pl-name { color: var(--brass-deep); }
.plist-col li em {
  display: block;
  align-self: start;
  margin-top: 2px;
  font-style: normal;
  font-size: .78rem;
  color: var(--steel-400);
}
@media (max-width: 768px) {
  .plist-col li a { padding: 12px 0; grid-template-columns: 56px minmax(0, 1fr); }
  .plist-col li a picture { width: 56px; height: 56px; }
  .plist-col li .pl-name { font-size: .95rem; }
  .plist-col li em { font-size: .82rem; }
}

/* ==========================================================================
   42. Full range index
   Twenty small tiles, sized so the supplied photographs display at their
   native resolution rather than being enlarged.
   ========================================================================== */
.range-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.range-tile {
  display: block;
  text-decoration: none;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease),
              border-color .26s var(--ease);
}
.range-tile:hover {
  transform: translateY(-4px);
  border-color: var(--brass-line);
  box-shadow: var(--shadow-md);
}
.range-tile picture {
  display: block;
  aspect-ratio: 29 / 20;
  overflow: hidden;
  background: var(--steel-100);
}
.range-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.range-tile:hover img { transform: scale(1.06); }
.range-name {
  display: block;
  padding: 12px 13px 0;
  font-size: .87rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  transition: color .2s var(--ease);
}
.range-tile:hover .range-name { color: var(--brass-deep); }
.range-size {
  display: block;
  padding: 3px 13px 14px;
  font-size: .76rem;
  color: var(--steel-400);
}

@media (max-width: 1100px) { .range-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; } }
@media (max-width: 560px) {
  /* three across on a phone: 20 tiles in seven rows rather than ten, and the
     tiles are still larger than they display so they stay sharp */
  .range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .range-name { padding: 9px 9px 0; font-size: .78rem; }
  .range-size { padding: 2px 9px 10px; font-size: .7rem; }
}

/* Hold the grid to a width where each tile lands at 145px, which is exactly
   290px on a retina screen — the native size of the supplied photographs.
   Any wider and they would be enlarged and go soft. */
@media (min-width: 861px) {
  .range-grid { max-width: 820px; margin-inline: auto; }
}

/* FAQ panels sit on footage now, so they need a solid surface of their own */
.has-media .faq-item {
  background: #fff;
  border-color: var(--steel-100);
}
.has-media .faq-q { color: var(--ink); }
.has-media .faq-a p { color: var(--steel-500); }

/* ==========================================================================
   43. Loader and brand mark
   The loader shows the real logo artwork rather than a traced outline, and it
   is larger. The animation is now on the mark as a whole: it settles into
   place while a brass ring draws itself around it.
   ========================================================================== */
img.ss-loader-mark {
  width: clamp(200px, 48vw, 300px);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.94);
  animation: ldMark .42s var(--ease-out) forwards;
  filter: drop-shadow(0 0 34px rgba(255, 255, 255, .14));
}
@keyframes ldMark {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* a brass ring that sweeps around the badge while it loads */
.ss-loader-inner { position: relative; }
/* the ring is a child of the mark's own wrapper and sized with inset, so it is
   always concentric. It used to sit on the whole column, and its offset used a
   clamp whose minimum was larger than its maximum, so it rotated off centre. */
.ss-loader-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.ss-loader-ring::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--brass);
  border-right-color: rgba(184, 134, 59, .28);
  animation: ldRing2 1.15s linear .4s infinite;
  pointer-events: none;
}
@keyframes ldRing2 { to { transform: rotate(360deg); } }

/* the loader bar sits below the ring */
.ss-loader-inner { gap: 40px; }

/* the header and footer marks are round badges now */
.brandmark img { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  img.ss-loader-mark { opacity: 1; transform: none; animation: none; }
  .ss-loader-inner::before { animation: none; border-color: rgba(184,134,59,.3); }
}

/* a larger brand mark needs a slightly taller bar to sit in */
.masthead .shell { min-height: 84px; }
.foot-brand img { width: 92px; height: 92px; border-radius: 50%; background: #fff; }
@media (max-width: 768px) {
  .brandmark img { width: 54px; height: 54px; }
  .masthead .shell { min-height: 72px; }
}

/* ==========================================================================
   44. Footage lift
   The clips were shot flat and read dull against the brightened stills, so
   they get a small lift in the browser rather than being re-encoded.
   ========================================================================== */
.hero-video,
.band-media video,
.phead-bg video,
.video-card video,
.tile-video {
  filter: brightness(1.14) saturate(1.16) contrast(1.03);
}

/* ==========================================================================
   45. Mobile hero
   The hero was carrying a tag, a three line headline, a five line paragraph,
   three stacked buttons and three proof chips, which left almost none of the
   clip visible. On a phone it now keeps the headline, two lines of copy and
   two buttons, and gives the footage room to read.
   ========================================================================== */
@media (max-width: 640px) {
  .hero {
    min-height: 88vh;
    padding-block: 30px 34px;
  }

  .hero-tag {
    padding: 5px 6px 5px 12px;
    margin-bottom: 16px;
  }
  .hero-tag .tag-text { display: none; }
  .hero-tag em { font-size: .72rem; }

  .hero h1 {
    font-size: clamp(1.6rem, 7.6vw, 2.05rem);
    line-height: 1.14;
    margin-bottom: 12px;
  }

  .hero-sub {
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  /* two buttons side by side; the third is a duplicate of the nav */
  .hero-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 0;
  }
  .hero-cta .btn-ss {
    width: 100%;
    padding-inline: 12px;
    font-size: .88rem;
    min-height: 50px;
  }
  .hero-cta .btn-ss:nth-of-type(3) { display: none; }

  /* the proof chips repeat the why-us section further down the page */
  .hero-proof { display: none; }
}

/* very small phones: give the clip even more of the frame */
@media (max-width: 400px) {
  .hero h1 { font-size: 1.52rem; }
  .hero-sub { font-size: .88rem; }
  /* side by side the labels wrap to two lines on a narrow phone, so stack them */
  .hero-cta { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .hero-cta .btn-ss { min-height: 48px; }
}

/* the hero carries a full sentence on desktop and a shorter one on phones,
   so the copy ends cleanly instead of being cut mid-word */
.sub-short { display: none; }
@media (max-width: 640px) {
  .sub-full { display: none; }
  .sub-short { display: inline; }
}

/* ==========================================================================
   46. Dropdown navigation
   ========================================================================== */
.has-drop { position: relative; display: inline-flex; }
.drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.drop-toggle svg { transition: transform .22s var(--ease); opacity: .6; }
.has-drop:hover .drop-toggle svg,
.has-drop:focus-within .drop-toggle svg { transform: rotate(180deg); opacity: 1; }

.drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(680px, 86vw);
  background: #fff;
  border: 1px solid var(--steel-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: 22px 24px 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 60;
}
.drop-panel::before {
  /* keeps the pointer inside the menu while travelling from the link */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
}
.has-drop:hover .drop-panel,
.has-drop:focus-within .drop-panel,
.drop-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.drop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 20px;
}
.drop-head {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--steel-100);
}
.drop-col a {
  display: block;
  padding: 7px 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--steel-700);
  text-decoration: none;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.drop-col a:hover { color: var(--brass-deep); transform: translateX(3px); }
.drop-all {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--steel-100);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.drop-all:hover { color: var(--brass-deep); }

/* --- inside the mobile drawer -------------------------------------------- */
.drawer-group { border-bottom: 1px solid var(--steel-100); }
.drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.drawer-toggle svg { transition: transform .25s var(--ease); opacity: .55; }
.drawer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.drawer-sub > * { overflow: hidden; }
.drawer-group.is-open .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub a {
  display: block;
  padding: 11px 0 11px 16px;
  font-size: .95rem;
  color: var(--steel-600);
  text-decoration: none;
  border-left: 2px solid var(--steel-100);
  margin-left: 4px;
}
.drawer-sub a:hover, .drawer-sub a:focus { color: var(--brass-deep); border-left-color: var(--brass); }
.drawer-sub { padding-bottom: 6px; }

@media (max-width: 991px) {
  .drop-panel { display: none; }
}

/* ==========================================================================
   47. Loader behaviour
   ========================================================================== */
.is-loading body { overflow: hidden; }          /* no scrolling behind the curtain */
.ss-loader {
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
.ss-loader.is-done { opacity: 0; visibility: hidden; }

/* the mark holds still until it has actually loaded, so it cannot flash */
img.ss-loader-mark { will-change: transform, opacity; }

.ss-loader-bar { margin-top: 4px; }

/* ==========================================================================
   48. Numbered step cards
   ========================================================================== */
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-lg);
  padding: 26px 22px 24px;
  box-shadow: var(--shadow-xs);
  transition: transform .28s var(--ease), border-color .28s var(--ease),
              box-shadow .28s var(--ease);
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--brass-line);
  box-shadow: var(--shadow-md);
}
.step-n {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brass-tint);
  border: 1px solid var(--brass-line);
  color: var(--brass-deep);
  font-size: .85rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.step-card h3 { font-size: 1.02rem; margin: 0 0 8px; letter-spacing: -.02em; }
.step-card p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--steel-500); }

/* ==========================================================================
   49. About page — timeline and standards
   ========================================================================== */
.tl {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brass), var(--steel-200));
}
.tl-item {
  position: relative;
  padding: 0 0 30px 8px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--steel-300);
}
.tl-item--now::before { border-color: var(--brass); box-shadow: 0 0 0 5px var(--brass-tint); }
.tl-year {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 6px;
}
.tl-item h3 { font-size: 1.12rem; margin: 0 0 7px; letter-spacing: -.02em; }
.tl-item p { margin: 0; font-size: .93rem; line-height: 1.66; color: var(--steel-500); max-width: 62ch; }

/* one continuous line reads better than two columns of floating dots */
@media (min-width: 900px) {
  .tl { max-width: 780px; }
  .tl-item { padding-bottom: 34px; }
  .tl-item h3 { font-size: 1.18rem; }
}

/* --- standards ------------------------------------------------------------ */
.std-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.std-card {
  background: #fff;
  border: 1px solid var(--steel-100);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  transition: transform .26s var(--ease), border-color .26s var(--ease);
}
.std-card:hover { transform: translateY(-3px); border-color: var(--brass-line); }
.std-code {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.std-note { display: block; font-size: .83rem; color: var(--steel-500); }

@media (max-width: 900px) { .std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .std-grid { grid-template-columns: minmax(0, 1fr); } .tl { padding-left: 26px; } }

/* each leader carries the line they actually answer on */
.leader-contact {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--steel-100);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.leader-contact a {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--brass-deep);
  text-decoration: none;
  letter-spacing: -.015em;
}
.leader-contact a:hover { text-decoration: underline; }
.leader-contact span { font-size: .78rem; color: var(--steel-400); }
.leader-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.leader-card:hover { border-color: var(--brass-line); }
.leader-initials {
  background: linear-gradient(140deg, var(--ink), var(--graphite));
  color: var(--brass-light);
}

/* ==========================================================================
   50. Brighter footage
   The clips still read dark against the lifted stills, so the browser filter
   goes up and the scrims that sit over them come down a little. Text keeps a
   shadow, so legibility holds.
   ========================================================================== */
.hero-video,
.band-media video,
.phead-bg video,
.video-card video,
.tile-video {
  filter: brightness(1.34) saturate(1.22) contrast(1.02);
}

/* the hero scrim thins out so more of the lifted footage comes through */
.hero-scrim {
  background:
    linear-gradient(94deg, rgba(11,12,14,.72) 0%, rgba(11,12,14,.52) 42%,
                    rgba(11,12,14,.28) 70%, rgba(11,12,14,.20) 100%),
    linear-gradient(180deg, rgba(11,12,14,.30) 0%, transparent 34%,
                    transparent 64%, rgba(11,12,14,.42) 100%);
}
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(11,12,14,.54) 0%, rgba(11,12,14,.46) 45%,
                      rgba(11,12,14,.64) 100%);
  }
}

.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.76) 0%, rgba(11,12,14,.56) 44%,
                    rgba(11,12,14,.34) 72%, rgba(11,12,14,.26) 100%);
}
@media (max-width: 900px) {
  .band-media::after,
  .band-ink .band-media::after {
    background: linear-gradient(180deg, rgba(11,12,14,.64), rgba(11,12,14,.70));
  }
}

.phead-bg::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.76) 0%, rgba(11,12,14,.56) 44%,
                    rgba(11,12,14,.36) 72%, rgba(11,12,14,.26) 100%);
}
@media (max-width: 900px) {
  .phead-bg::after { background: linear-gradient(180deg, rgba(11,12,14,.66), rgba(11,12,14,.72)); }
}

.cta-media::after {
  background: radial-gradient(90% 100% at 50% 50%,
              rgba(11,12,14,.70) 0%, rgba(11,12,14,.58) 55%, rgba(11,12,14,.50) 100%);
}

/* the heading side needs more cover now the footage is brighter; the right
   hand side of the frame stays as it is */
.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.88) 0%, rgba(11,12,14,.74) 38%,
                    rgba(11,12,14,.44) 66%, rgba(11,12,14,.26) 100%);
}
.phead-bg::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.88) 0%, rgba(11,12,14,.72) 38%,
                    rgba(11,12,14,.44) 68%, rgba(11,12,14,.26) 100%);
}
@media (max-width: 900px) {
  .band-media::after,
  .band-ink .band-media::after {
    background: linear-gradient(180deg, rgba(11,12,14,.72), rgba(11,12,14,.76));
  }
  .phead-bg::after { background: linear-gradient(180deg, rgba(11,12,14,.74), rgba(11,12,14,.78)); }
}

/* a firmer shadow under type that sits directly on footage */
.has-media .head-block h2,
.phead-media h1,
.hero h1,
.cta-band h2 { text-shadow: 0 2px 16px rgba(11, 12, 14, .7); }
.has-media .head-block .lede,
.phead-media .lede,
.hero-sub,
.cta-band p { text-shadow: 0 1px 12px rgba(11, 12, 14, .8); }

/* ==========================================================================
   51. Footage more visible, mobile hero fits one screen
   ========================================================================== */

/* --- thinner overlays so more of the clip shows through -------------------- */
.hero-scrim {
  background:
    linear-gradient(94deg, rgba(11,12,14,.62) 0%, rgba(11,12,14,.38) 44%,
                    rgba(11,12,14,.14) 72%, rgba(11,12,14,.06) 100%),
    linear-gradient(180deg, rgba(11,12,14,.24) 0%, transparent 30%,
                    transparent 66%, rgba(11,12,14,.34) 100%);
}
.band-media::after,
.band-ink .band-media::after,
.band-media--light::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.80) 0%, rgba(11,12,14,.60) 38%,
                    rgba(11,12,14,.26) 66%, rgba(11,12,14,.10) 100%);
}
.phead-bg::after {
  background:
    linear-gradient(94deg, rgba(11,12,14,.80) 0%, rgba(11,12,14,.58) 40%,
                    rgba(11,12,14,.26) 68%, rgba(11,12,14,.10) 100%);
}
.cta-media::after {
  background: radial-gradient(90% 100% at 50% 50%,
              rgba(11,12,14,.62) 0%, rgba(11,12,14,.50) 55%, rgba(11,12,14,.42) 100%);
}

/* the type keeps its own protection, so the overlay does not have to do it all */
.hero h1, .phead-media h1, .has-media .head-block h2, .cta-band h2 {
  text-shadow: 0 2px 4px rgba(11,12,14,.55), 0 4px 22px rgba(11,12,14,.75);
}
.hero-sub, .phead-media .lede, .has-media .head-block .lede, .cta-band p {
  text-shadow: 0 1px 3px rgba(11,12,14,.7), 0 2px 16px rgba(11,12,14,.85);
}

/* --- mobile hero: one screenful, no scroll to reach the buttons ------------ */
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(11,12,14,.42) 0%, rgba(11,12,14,.34) 42%,
                      rgba(11,12,14,.58) 100%);
  }
  .band-media::after,
  .band-ink .band-media::after {
    background: linear-gradient(180deg, rgba(11,12,14,.60), rgba(11,12,14,.68));
  }
  .phead-bg::after { background: linear-gradient(180deg, rgba(11,12,14,.62), rgba(11,12,14,.70)); }
}

@media (max-width: 640px) {
  /* fill exactly what is left under the bars, using the small viewport unit so
     the browser chrome cannot push the buttons off screen */
  .hero {
    min-height: calc(100svh - 116px);
    height: auto;
    padding-block: 24px 26px;
    align-items: center;
  }
  .hero-tag { margin-bottom: 13px; }
  .hero h1 { font-size: clamp(1.5rem, 7vw, 1.95rem); margin-bottom: 10px; }
  .hero-sub { margin-bottom: 17px; }
  .hero-cta .btn-ss { min-height: 48px; }
}

/* older browsers without svh fall back to vh */
@supports not (height: 100svh) {
  @media (max-width: 640px) { .hero { min-height: calc(100vh - 116px); } }
}

/* short screens (older phones, and any phone in landscape) need the hero to
   give up a little more before the buttons drop below the fold */
@media (max-width: 640px) and (max-height: 700px) {
  .hero { min-height: calc(100svh - 108px); padding-block: 16px 18px; }
  .hero-tag { margin-bottom: 10px; padding-block: 4px; }
  .hero h1 { font-size: clamp(1.34rem, 6.4vw, 1.6rem); margin-bottom: 8px; }
  .hero-sub { font-size: .85rem; margin-bottom: 13px; }
  .hero-cta .btn-ss { min-height: 44px; font-size: .85rem; }
  .hero-cta { gap: 8px; }
}
@media (max-width: 640px) and (max-height: 580px) {
  .hero-tag { display: none; }
  .hero-sub { display: none; }
}
.mb-4 { margin-bottom: 26px; }

/* ==========================================================================
   52. Card captions
   The captions on the video cards and photo tiles were set as small print.
   They carry the message of each section, so they read as headings now:
   larger, bolder, and with a deeper shade beneath so they stay legible.
   ========================================================================== */
.video-card figcaption,
.photo figcaption,
.photo--lead figcaption {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.018em;
  padding: 54px 20px 18px;
  text-shadow: 0 1px 10px rgba(11, 12, 14, .6);
  background: linear-gradient(180deg,
              transparent 0%, rgba(11,12,14,.30) 34%, rgba(11,12,14,.86) 100%);
}
.photo--lead figcaption { font-size: 1.18rem; padding: 62px 26px 22px; }

/* the wide photo caption sits on white under the picture, so it needs weight
   rather than a shade */
.photo-wide figcaption {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--steel-700);
  padding: 16px 22px;
  letter-spacing: -.012em;
}

/* the tag chip on a video card grows with the caption */
.vc-tag { font-size: .74rem; padding: 6px 13px; }

@media (max-width: 900px) {
  .video-card figcaption,
  .photo figcaption,
  .photo--lead figcaption {
    font-size: .98rem;
    padding: 46px 16px 15px;
  }
  .photo--lead figcaption { font-size: 1.04rem; }
  .photo-wide figcaption { font-size: .94rem; padding: 14px 16px; }
}
@media (max-width: 560px) {
  .video-card figcaption,
  .photo figcaption,
  .photo--lead figcaption { font-size: 1rem; }
}

/* the credits table stacks on a phone, so its licence and source links need to
   be finger sized rather than inline text */
@media (max-width: 700px) {
  table.ss-table td a {
    display: inline-block;
    padding: 9px 0;
    min-height: 40px;
    line-height: 22px;
  }
  table.ss-table td { padding-block: 6px; }
}

/* ==========================================================================
   53. Brightness dialled back
   The lift on the clips was set to 1.34, which was too hot once the stills
   were corrected. This brings the footage in line with the photographs.
   ========================================================================== */
.hero-video,
.band-media video,
.phead-bg video,
.video-card video,
.tile-video {
  filter: brightness(1.10) saturate(1.08) contrast(1.02);
}

/* with the clip sources removed on a phone, the poster is what shows, so it
   must fill the frame the same way the video would */
video[poster] { background-size: cover; background-position: center; }

/* the figures now sit under the two leadership cards, where they read as
   proof of the people rather than decoration beside the story */
.stat-row--lead {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--steel-100);
}

/* ==========================================================================
   54. Footer back to dark
   The light-theme pass turned the footer to mist. It should close the page the
   way the dark bands do, so it returns to ink with light type on it.
   ========================================================================== */
.site-foot {
  background: var(--ink);
  color: var(--steel-400);
  border-top: 0;
}
.site-foot h4,
.foot-title { color: #fff; }
.foot-brand p,
.foot-about,
.foot-note { color: var(--steel-400); }
.foot-list a,
.foot-contact a { color: var(--steel-300); }
.foot-list a:hover,
.foot-contact a:hover { color: var(--brass-light); }
.foot-contact svg { color: var(--brass-light); }
.social-row a {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.social-row a:hover { background: var(--brass); border-color: var(--brass); color: #12130F; }
.foot-bottom {
  border-top-color: rgba(255, 255, 255, .12);
  color: var(--steel-500);
}
.foot-bottom a { color: var(--steel-400); }
.foot-bottom a:hover { color: var(--brass-light); }
.foot-brand img { background: #fff; }

/* the closing CTA sits directly above, so it keeps its own edge */
.cta-band { margin-bottom: 0; }

/* ==========================================================================
   55. Mobile menu
   It used to be a block inside the header, so opening it made the page 1,374px
   long and the whole document scrolled. It is now a fixed panel that fills the
   screen under the header and scrolls inside itself.
   ========================================================================== */
@media (max-width: 991px) {
  .nav-drawer {
    display: block;                 /* always in the DOM; visibility does the work */
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mh, 72px);
    bottom: 0;
    z-index: 1020;                  /* below the header, so the close button stays */
    background: #fff;
    border-top: 1px solid var(--steel-100);
    padding: 10px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* stops the page behind from scrolling too */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    pointer-events: none;
  }
  .nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* the page behind must not move while the panel is open */
  body.nav-open { overflow: hidden; }

  /* the product submenu is long, so it gets its own breathing room */
  .drawer-sub a { padding: 12px 0 12px 16px; }
  /* it sits at the end of the list, not pinned: pinned it covered the
     Products toggle whenever the list was shorter than the panel */
  .nav-drawer .drawer-cta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--steel-100);
  }
}

/* on a desktop the panel never applies */
@media (min-width: 992px) {
  .nav-drawer { display: none !important; }
}

/* the Products toggle is a <button>, so it needs the browser defaults cleared
   to sit level with the anchors either side of it */
.nav-drawer .drawer-toggle {
  width: 100%;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--steel-100);
  border-radius: var(--r-sm);
  font: inherit;          /* matches the anchors exactly, including size */
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ==========================================================================
   56. Standards strip in black
   The client asked for this band dark, carrying "all grades available".
   ========================================================================== */
.standards {
  background: var(--ink);
  border-top: 0;
  border-bottom: 0;
}
.standards-label { color: var(--steel-400); }
.standards-chip {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #E7EAEE;
}
/* the closing chip is the message, so it takes the brass */
.standards-chip--all {
  background: var(--brass);
  border-color: var(--brass);
  color: #12130F;
  font-weight: 800;
}

/* sixteen tiles sit as four rows of four; the width is held so each tile lands
   near its native 290px and does not go soft */
@media (min-width: 861px) {
  /* fifteen tiles: five across, three rows, each landing near its native 290px */
  .range-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 820px; }
}