/* ==========================================================================
   INSOURCES EXIM — design system v2
   Photo-led. Tight vertical rhythm. Varied section treatments.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

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

/* --- Tokens --------------------------------------------------------------- */
:root {
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Brand — taken from the INSOURCES logo: near-black + olive/khaki. */
  --ink:       #121212;
  --navy-900:  #171717;  /* dark section ground */
  --navy-800:  #242424;  /* raised dark surface */
  --navy-700:  #333333;

  --brand:     #898757;  /* logo olive, sampled from the supplied artwork */
  --brand-600: #73723F;  /* darker, for hover and text on light */
  --brand-300: #B6B58B;  /* lighter, for text on dark */
  --brand-50:  #F3F2E7;  /* tint */

  --teal:      #898757;  /* accent folded into the olive */
  --teal-50:   #F3F2E7;

  --bg:        #FFFFFF;
  --sand:      #F7F6F1;
  --sand-2:    #EBE9E0;
  --text:      #1C1C1A;
  --muted:     #5E5E58;
  --muted-2:   #8C8C84;
  --line:      #E4E3DC;
  --line-2:    #F1F0EA;

  --radius:    12px;
  --radius-lg: 18px;
  --radius-sm: 8px;

  --shadow:    0 2px 8px rgba(18,18,18,.06), 0 8px 24px rgba(18,18,18,.08);
  --shadow-lg: 0 6px 20px rgba(18,18,18,.10), 0 24px 56px rgba(18,18,18,.15);

  --wrap:      1220px;
  --narrow:    820px;
  --gutter:    clamp(1.1rem, 4vw, 2.25rem);

  /* Tight rhythm — this is the fix for the over-tall page. */
  --sec-y:     clamp(3rem, 5.5vw, 4.75rem);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.034em; line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
h4 { font-size: 1rem; }

p { text-wrap: pretty; }

.lede { font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.6; color: var(--muted); }
.small { font-size: .85rem; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-head);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: .7rem;
}
.on-dark .eyebrow { color: var(--brand-300); }

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

.sec { padding-block: var(--sec-y); position: relative; }
.sec--sm { padding-block: clamp(2rem, 3.5vw, 3rem); }
.sec--sand { background: var(--sand); }
.sec--dark { background: var(--navy-900); color: #D5D4CB; }
.sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark .lede { color: #ADACA2; }

.sec-head { max-width: 44rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: .7rem; }

.sec-head--split { max-width: none; display: grid; gap: 1rem 2.5rem; align-items: end; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: minmax(0,1.4fr) auto; } }

.grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.35rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Explicit column counts. auto-fit decides the count from available width,
   which strands empty cells whenever the item count does not divide by it —
   six cards in a four-column track leaves two dead slots. Use these wherever
   the item count is known. */
.grid--x3, .grid--x4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--x3, .grid--x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .grid--x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid--x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.split { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split--l { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
  .split--r { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .split--flip > *:first-child { order: 2; }
}

.stack > * + * { margin-top: .9rem; }
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.8rem; } .mt-4 { margin-top: 2.5rem; }

/* Label/value pairs inside a card — entity registration details on the About
   page. Two columns so the labels align down the card. */
.deflist { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin-top: .9rem; }
.deflist dt {
  font-family: var(--font-head); font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--brand-600);
  align-self: baseline;
}
.deflist dd { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.text-center { text-align: center; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-size: .9rem; font-weight: 600;
  padding: .78rem 1.4rem; border-radius: 8px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .17s var(--ease), border-color .17s var(--ease),
              color .17s var(--ease), transform .17s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-900); }
.btn--ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--lg { padding: .95rem 1.7rem; font-size: .97rem; }
.btn--sm { padding: .55rem 1rem; font-size: .84rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .65rem; }

.alink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600; font-size: .875rem;
  color: var(--brand-600);
}
.alink svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.alink:hover svg { transform: translateX(3px); }
.on-dark .alink, .sec--dark .alink { color: var(--brand-300); }

/* --- Topbar & header ------------------------------------------------------ */
.topbar {
  background: var(--ink); color: #9B9A90; font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: 36px; flex-wrap: wrap;
}
.topbar__grp { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.topbar__it { display: inline-flex; align-items: center; gap: .35rem; }
.topbar__it svg { width: 13px; height: 13px; opacity: .65; flex: none; }
.topbar a:hover { color: #fff; }
.topbar__live { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal); font-weight: 600; }
.topbar__live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(137,135,87,.22);
}
@media (max-width: 900px) { .topbar__hide { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 2px 18px rgba(18,18,18,.09); }
.header__in { display: flex; align-items: center; gap: 1.1rem; min-height: 68px; }

/* Logo lockup — the supplied artwork. The wordmark is part of the image, so
   there is no separate text to style; a light variant with the dark strokes
   recoloured white is used on the near-black footer. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 34px; width: auto; }
@media (max-width: 480px) { .logo img { height: 28px; } }
.footer .logo img { height: 38px; }

.nav { margin-left: auto; display: none; }
@media (min-width: 1100px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .28rem;
  font-family: var(--font-head); font-size: .875rem; font-weight: 600;
  color: var(--ink); padding: .55rem .7rem; border-radius: 7px;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link { color: var(--brand-600); background: var(--brand-50); }
.nav__link[aria-current="page"] { color: var(--brand-600); }
.nav__link svg { width: 10px; height: 10px; opacity: .5; transition: transform .2s var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 6px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.1rem; min-width: 19rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.mega::before { content: ''; position: absolute; inset: -10px 0 auto; height: 12px; }
.nav__item:hover .mega, .nav__item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.mega--wide { min-width: min(66rem, 92vw); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; }
.mega__col { min-width: 0; }
.mega__h {
  font-family: var(--font-head); font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
  padding: 0 .6rem .5rem; border-bottom: 1px solid var(--line-2); margin-bottom: .35rem;
}
.mega__link { display: block; padding: .5rem .6rem; border-radius: 8px; transition: background-color .14s var(--ease); }
.mega__link:hover { background: var(--sand); }
.mega__link strong { display: block; font-family: var(--font-head); font-size: .865rem; font-weight: 600; color: var(--ink); }
.mega__link span { display: block; font-size: .765rem; color: var(--muted); line-height: 1.42; margin-top: 1px; }
.mega__link--flag { background: linear-gradient(135deg, var(--brand-50), #fff); border: 1px solid var(--brand-300); }
.mega__link--flag strong::after {
  content: 'Flagship'; display: inline-block; margin-left: .45rem;
  font-size: .58rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--brand); color: #fff; padding: .1rem .38rem; border-radius: 4px; vertical-align: middle;
}

.header__cta { display: none; margin-left: auto; gap: .5rem; }
@media (min-width: 1100px) { .header__cta { display: flex; margin-left: .6rem; } }

.burger { margin-left: auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); }
@media (min-width: 1100px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background-color .22s var(--ease); }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(23rem, 88vw);
  background: #fff; z-index: 100; transform: translateX(101%);
  transition: transform .3s var(--ease); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-lg); padding: 1rem 1rem 2.5rem;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.drawer__x { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); font-size: 1.1rem; }
.drawer details { border-bottom: 1px solid var(--line-2); }
.drawer summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem .2rem; font-family: var(--font-head); font-weight: 600;
  cursor: pointer; list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: '+'; font-size: 1.2rem; color: var(--muted-2); font-weight: 400; }
.drawer details[open] summary::after { content: '\2013'; }
.drawer__sub { padding: 0 .2rem .8rem; }
.drawer__sub a { display: block; padding: .45rem; font-size: .88rem; color: var(--muted); border-radius: 6px; }
.drawer__sub a:hover { background: var(--sand); color: var(--ink); }
.drawer__flat { display: block; padding: .85rem .2rem; font-family: var(--font-head); font-weight: 600; border-bottom: 1px solid var(--line-2); }
.drawer__cta { display: grid; gap: .5rem; margin-top: 1.2rem; }

.scrim {
  position: fixed; inset: 0; background: rgba(12,12,12,.5); z-index: 99;
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
}
.scrim.is-open { opacity: 1; visibility: visible; }
body.no-scroll { overflow: hidden; }

/* --- HERO (photo-led) ----------------------------------------------------- */
/* Fills the screen. The topbar (37px, static) and the header (69px, sticky but
   still in flow) sit above it, so the hero only needs the remainder — otherwise
   the next section showed as a white band under the fold.

   Measured at 106px and identical from 375px up to 1425px, so it is a constant
   rather than a per-breakpoint value. Flex centring rather than top-aligned
   padding, so the extra height on a tall screen is shared above and below the
   content instead of all falling underneath it. The media and scrim are
   absolutely positioned and stay unaffected. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900);
  min-height: calc(100vh - 106px);
  display: flex; flex-direction: column; justify-content: center;
}
/* svh is the small viewport height: on mobile it excludes the browser chrome
   that retracts on scroll, so the hero does not overflow at first paint. */
@supports (height: 100svh) {
  .hero { min-height: calc(100svh - 106px); }
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;

  /* Slow drift. Deliberately long and small: at 34s the movement reads as
     the image breathing rather than panning, which is the difference
     between looking expensive and looking like a slideshow. It starts at
     1.06 so the translate never exposes an edge, and alternates so there
     is no jump when the cycle restarts. */
  transform-origin: 58% 45%;
  animation: heroDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: scale(1.02); will-change: auto; }
}
/* Scrim: dark enough on the left to carry the headline, then clearing quickly
   so the photograph is actually legible rather than a grey wash. The form is
   opaque white, so it needs no help from the scrim behind it. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(8,8,8,.90) 0%,
      rgba(8,8,8,.72) 26%,
      rgba(8,8,8,.34) 52%,
      rgba(8,8,8,.10) 78%,
      rgba(8,8,8,.04) 100%),
    linear-gradient(0deg, rgba(8,8,8,.55) 0%, transparent 32%);
}
.hero__in { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.hero__cols { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 1020px) { .hero__cols { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); } }

.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero__lede {
  color: #D3D2C9; font-size: clamp(1rem, 1.5vw, 1.14rem);
  max-width: 33rem; margin-top: 1.05rem; line-height: 1.6;
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
}

.hero__stats {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden;
}
.hero__stat { background: rgba(16,16,16,.72); padding: 1rem 1.15rem; backdrop-filter: blur(6px); }
.hero__stat b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; letter-spacing: -.03em; line-height: 1.05;
}
.hero__stat span { display: block; font-size: .765rem; color: #949389; margin-top: .2rem; }

/* RFQ card — solid white. A glass card over photography made the placeholder
   text unreadable, so this is deliberately opaque. */
.rfq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.rfq h3 { color: var(--ink); font-size: 1.22rem; }
.rfq > p { color: var(--muted); font-size: .87rem; margin-top: .3rem; }
.rfq form { margin-top: 1.15rem; display: grid; gap: .6rem; }
.rfq .f2 { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .rfq .f2 { grid-template-columns: 1fr; } }
.rfq input, .rfq select, .rfq textarea {
  width: 100%; background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 7px; padding: .72rem .85rem;
  color: var(--text); font-size: .885rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rfq input::placeholder, .rfq textarea::placeholder { color: var(--muted-2); }
.rfq select { color: var(--text); }
.rfq select option { background: #fff; color: var(--text); }
.rfq input:focus, .rfq select:focus, .rfq textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(137,135,87,.16);
}
.rfq .btn { width: 100%; }
.rfq__note { font-size: .74rem; color: var(--muted-2); line-height: 1.5; }
.rfq__note a { color: var(--brand-600); font-weight: 600; }

/* Lane ticker */
.lanes { border-top: 1px solid rgba(255,255,255,.1); background: rgba(10,10,10,.55); padding-block: .8rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marq 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee__item { font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: #8C8B81; white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; }
.marquee__item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }

/* --- Page hero (inner pages) ---------------------------------------------- */
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); color: #C1C0B7; }
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(16,16,16,.95) 0%, rgba(16,16,16,.84) 50%, rgba(16,16,16,.55) 100%); }
.phero__in { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.phero h1 { color: #fff; }
.phero .lede { color: #ADACA2; margin-top: .85rem; max-width: 44rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: #86857B; margin-bottom: .9rem; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: #D5D4CB; }
.crumbs .sep { opacity: .45; }

/* --- MEDIA CARD (photo + text) -------------------------------------------- */
.mcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-width: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.mcard__fig { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sand-2); }
.mcard__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
a.mcard:hover .mcard__fig img { transform: scale(1.045); }
/* Not currently rendered. The artwork on these cards is itself an icon, so the
   badge put an icon on top of an icon. Kept for a quick revert. */
.mcard__ico {
  position: absolute; left: .8rem; bottom: .8rem;
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--brand-600); backdrop-filter: blur(4px);
}
.mcard__ico svg { width: 19px; height: 19px; }
.mcard__body { padding: 1.05rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.mcard__body h3 { font-size: 1.05rem; }
.mcard__body p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.mcard__foot { margin-top: auto; padding-top: .5rem; }

.mcard--flag { border-color: var(--brand); }
.flag-tag {
  position: absolute; top: .7rem; right: .7rem; z-index: 1;
  font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--brand); color: #fff; padding: .2rem .48rem; border-radius: 4px;
}

/* Plain card (no photo) */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.card h3 { font-size: 1.02rem; }
.card p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.card__foot { margin-top: auto; padding-top: .4rem; }
.card--dark { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.card--dark h3 { color: #fff; }
.card--dark p { color: #ADACA2; }

.ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); flex: none;
}
.ico svg { width: 20px; height: 20px; }
.ico--teal { background: var(--teal-50); color: #73723F; }
.ico--dark { background: rgba(137,135,87,.16); color: var(--brand-300); }

/* --- Photo split ---------------------------------------------------------- */
.pfig { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand-2); }
.pfig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.pfig--tall img { aspect-ratio: 3/4; }
.pfig--wide img { aspect-ratio: 16/9; }
.pfig__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  padding: .5rem .85rem; border-radius: 8px;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600; color: var(--ink);
}

/* --- Band with photo background ------------------------------------------- */
.band { position: relative; isolation: isolate; overflow: hidden; color: #D5D4CB; }
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(16,16,16,.95), rgba(16,16,16,.8) 55%, rgba(16,16,16,.62)); }
.band h2, .band h3 { color: #fff; }
.band .lede { color: #ADACA2; }

/* --- Lists ---------------------------------------------------------------- */
/* Point lists.
   Three attempts on this. Circled green checkmarks down a column was the house
   style of every generated marketing page. Individual keyline cards were no
   better: six identical boxes of eight words each still read as filler,
   whatever the border.

   So it is one panel now, divided by hairlines, the way a specification table
   is divided. The rules do the work the boxes were failing to do: they group
   the points into a single object instead of scattering them, and a reader
   scans a table without being asked to.

   The class name is kept so every existing call site and layout override still
   applies. */
.ticks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;                       /* the hairlines: cells sit on the panel */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  list-style: none; padding: 0; margin: 0;
}
.ticks li {
  background: var(--bg);
  padding: 1.05rem 1.2rem;
  font-size: .875rem; line-height: 1.55; color: var(--text);
  display: flex; align-items: flex-start; gap: .7rem;
}
.ticks li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: .52rem;
  border-radius: 50%;
  background: var(--brand);
}

/* On a sand band the panel inverts so it still reads as a panel. */
.sec--sand .ticks { background: #DEDDD4; border-color: #DEDDD4; }
.sec--sand .ticks li { background: var(--sand); }

.sec--dark .ticks, .band .ticks, .on-dark .ticks {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}
.sec--dark .ticks li, .band .ticks li, .on-dark .ticks li {
  background: #171717; color: #D8D7CE;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: .775rem; padding: .32rem .72rem; border-radius: 6px;
  background: var(--sand); border: 1px solid var(--line); color: var(--muted);
}
.chip--brand { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-600); font-weight: 600; }
.sec--dark .chip, .band .chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #ADACA2; }

.pill {
  display: inline-flex; align-items: center; font-size: .67rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .22rem .5rem;
  border-radius: 4px; background: var(--sand); color: var(--muted);
}
.pill--brand { background: var(--brand-50); color: var(--brand-600); }

/* --- Stats ---------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.stats__i { background: #fff; padding: 1.1rem 1.2rem; }
.stats__v { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem,2.8vw,2rem); color: var(--ink); letter-spacing: -.03em; line-height: 1.05; }
.stats__l { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.stats--dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.stats--dark .stats__i { background: rgba(16,16,16,.7); }
.stats--dark .stats__v { color: #fff; }
.stats--dark .stats__l { color: #949389; }

/* --- Steps ---------------------------------------------------------------- */
.steps { display: grid; gap: 0; }
@media (min-width: 900px) { .steps--2 { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2.5rem; } }
.step { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; padding-bottom: 1.6rem; position: relative; }
.step:last-child { padding-bottom: 0; }
.step__n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  background: #fff; border: 2px solid var(--brand); color: var(--brand-600); flex: none; position: relative; z-index: 1;
}
.step::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(var(--brand-300), var(--line)); }
.step:last-child::before { display: none; }
.step h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.step p { font-size: .875rem; color: var(--muted); line-height: 1.55; }

/* Process, as a zig-zag against one spine.

   Three passes to get here. The original drew a connector inside every grid
   cell, anchored to that cell's own bottom edge, so each column stopped its
   line at a different height. Then the numbers sat 10px off the spine, because
   .zig is an <ol> and .prose ol was putting 1.2rem of padding on it while the
   spine measured from the padding box. Then the numbers sat above their own
   headings, because the text block carried a top padding the circle did not.

   Now: the step sits in a card, the circle is nudged down to line up with the
   heading's first line rather than with the card's top edge, and the spine runs
   between the first and last circles instead of the full height of the list. */
.zig {
  --zig-spine: 46px;
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 1rem;
}
.zig::before {
  content: '';
  position: absolute;
  top: calc(var(--zig-spine) / 2);
  bottom: calc(var(--zig-spine) / 2);
  left: calc(var(--zig-spine) / 2);
  width: 2px; background: var(--line);
  border-radius: 2px;
}
.zig__item {
  display: grid;
  grid-template-columns: var(--zig-spine) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.zig__n {
  grid-column: 1; grid-row: 1;
  width: var(--zig-spine); height: var(--zig-spine);
  display: grid; place-items: center;
  /* Solid olive, the same fill as the buttons, so the sequence reads as part
     of the brand rather than as five grey outlines. The ring is the page
     colour, which opens a gap between the circle and the spine instead of
     letting the line die into its edge. */
  background: var(--brand);
  border: 0;
  box-shadow: 0 0 0 6px var(--bg);
  border-radius: 50%;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: #fff;
  /* Line the circle up with the heading, not with the top of the card. */
  margin-top: .3rem;
}
.zig__card {
  grid-column: 2; grid-row: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.zig__card h3 { font-size: 1rem; margin: 0 0 .35rem; line-height: 1.3; }
.zig__card p { font-size: .875rem; color: var(--muted); line-height: 1.6; margin: 0; }

.sec--sand .zig__card { background: var(--sand); }
.sec--sand .zig__n { box-shadow: 0 0 0 6px var(--sand); }

/* From tablet up the cards alternate either side of a centred spine. */
@media (min-width: 900px) {
  .zig { gap: .75rem; }
  .zig::before { left: 50%; transform: translateX(-50%); }
  .zig__item {
    grid-template-columns: minmax(0, 1fr) var(--zig-spine) minmax(0, 1fr);
    gap: 1.75rem;
  }
  .zig__n { grid-column: 2; }
  .zig__card { grid-column: 1; }
  .zig__item:nth-child(even) .zig__card { grid-column: 3; }
}
.field { display: grid; gap: .3rem; min-width: 0; }
.field label { font-family: var(--font-head); font-size: .8rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 7px;
  padding: .7rem .85rem; font-size: .9rem; background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(137,135,87,.14);
}
.field__hint { font-size: .75rem; color: var(--muted-2); }
.field--check { display: flex; gap: .55rem; align-items: flex-start; }
.field--check input { width: auto; margin-top: .25rem; flex: none; }
.field--check label { font-weight: 400; font-family: var(--font-body); font-size: .83rem; color: var(--muted); line-height: 1.5; }

/* --- CTA ------------------------------------------------------------------ */
.cta { position: relative; isolation: isolate; overflow: hidden; color: #ADACA2; }
.cta__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(34rem 20rem at 12% 118%, rgba(137,135,87,.3), transparent 62%),
    radial-gradient(32rem 18rem at 88% -25%, rgba(137,135,87,.22), transparent 64%),
    linear-gradient(115deg, #141414, #2A2A26);
}
.cta__in { padding-block: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .cta__in { grid-template-columns: minmax(0,1.4fr) auto; } }
.cta h2 { color: #fff; }
.cta p { margin-top: .7rem; color: #ADACA2; max-width: 36rem; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--ink); color: #9B9A90; font-size: .875rem; }
.footer__top { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.footer__grid { display: grid; gap: 2rem 1.75rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .footer__grid { grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); } }
.footer__brand p { margin-top: .9rem; max-width: 25rem; line-height: 1.6; }
.footer .logo { color: #fff; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: #6E6D64; }
.footer__h { font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.footer__links { display: grid; gap: .5rem; }
.footer__links a { color: #9B9A90; font-size: .855rem; transition: color .15s var(--ease); }
.footer__links a:hover { color: var(--brand-300); }
.footer__contact { display: grid; gap: .55rem; margin-top: 1.2rem; }
.footer__contact a, .footer__contact > span { display: flex; gap: .5rem; align-items: flex-start; font-size: .855rem; }
.footer__contact svg { width: 15px; height: 15px; margin-top: .16rem; flex: none; color: var(--brand); }
.socials { display: flex; gap: .45rem; margin-top: 1.2rem; }
.socials a {
  width: 35px; height: 35px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .17s var(--ease), border-color .17s var(--ease), transform .17s var(--ease);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); color: #fff; }
.socials svg { width: 16px; height: 16px; }
.footer__bot {
  border-top: 1px solid rgba(255,255,255,.09); padding-block: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; font-size: .79rem;
}
.footer__bot nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer__bot a:hover { color: #fff; }

/* --- Floating WhatsApp ---------------------------------------------------- */
.fab {
  position: fixed; right: clamp(.9rem,3vw,1.5rem); bottom: clamp(.9rem,3vw,1.5rem);
  z-index: 80; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 6px 20px rgba(37,211,102,.4);
  transition: transform .2s var(--ease);
}
.fab:hover { transform: scale(1.07); }
.fab svg { width: 25px; height: 25px; }

/* --- Utility -------------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  background: var(--brand); color: #fff; padding: .65rem 1.2rem;
  border-radius: 0 0 8px 8px; z-index: 200; font-weight: 600; transition: top .2s var(--ease);
}
.skip:focus { top: 0; }
hr.div { height: 1px; background: var(--line); border: 0; }

/* Only hide these when JS is available to bring them back. Without the
   guard, a blocked script leaves every revealed element invisible. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

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

/* ==========================================================================
   B2B components
   Industrial buyers qualify a supplier fast: are you real, can you handle my
   spec, how do I get a price. These components answer those three, in order.
   ========================================================================== */


/* --- Fact grid (terms at a glance) ----------------------------------------
   Lead time, payment, Incoterms and inspection are the questions that decide
   whether a buyer sends an RFQ. Answering them unprompted removes a round trip. */
.facts {
  display: grid;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  /* Explicit column counts, not auto-fit: six items across four columns leaves
     two dead cells. Two and three divide six exactly. */
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.fact {
  background: #fff; padding: 1.35rem 1.4rem 1.45rem;
  position: relative; isolation: isolate;
  transition: background-color .2s var(--ease);
}
.fact::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.fact:hover { background: var(--sand); }
.fact:hover::after { transform: scaleX(1); }

.fact__ico {
  width: 36px; height: 36px; border-radius: 9px; margin-bottom: .85rem;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.fact__ico svg { width: 18px; height: 18px; }
.fact:hover .fact__ico { background: var(--brand); color: #fff; }

.fact__k {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem;
}
.fact__v {
  font-family: var(--font-head); font-size: 1.18rem; font-weight: 700;
  color: var(--ink); line-height: 1.25; letter-spacing: -.022em;
}
.fact__d { font-size: .835rem; color: var(--muted); margin-top: .5rem; line-height: 1.55; }

/* --- Product finder --------------------------------------------------------
   Findability is the single highest-value interaction on a catalogue site. */
.finder {
  display: flex; gap: .6rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem;
  box-shadow: var(--shadow);
}
.finder__field { position: relative; flex: 1 1 16rem; min-width: 0; }
.finder__field svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted-2); pointer-events: none;
}
.finder input {
  width: 100%; border: 1.5px solid transparent; background: var(--sand);
  border-radius: 8px; padding: .8rem .9rem .8rem 2.6rem; font-size: .92rem;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.finder input:focus {
  outline: none; background: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(137,135,87,.15);
}
.finder__hint { flex-basis: 100%; font-size: .78rem; color: var(--muted-2); padding: 0 .2rem .1rem; }

/* --- Sticky enquiry bar (mobile) -------------------------------------------
   The header CTA is hidden below 1100px, so on the devices where buyers most
   often land there is otherwise no persistent route to an enquiry. */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: rgba(18,18,18,.97); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  display: flex; gap: .5rem; align-items: center;
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.stickybar.is-on { transform: translateY(0); }
.stickybar .btn { flex: 1; }
.stickybar__tel {
  width: 44px; height: 44px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.stickybar__tel svg { width: 18px; height: 18px; }
@media (min-width: 1100px) { .stickybar { display: none; } }
/* Keep the WhatsApp button clear of the bar once it appears. */
@media (max-width: 1099px) { body.has-stickybar .fab { bottom: 4.75rem; } }

/* --- Spec table ------------------------------------------------------------ */
.spec { font-size: .875rem; }
.spec tr { border-bottom: 1px solid var(--line-2); }
.spec tr:last-child { border-bottom: 0; }
.spec th, .spec td { padding: .7rem .2rem; text-align: left; vertical-align: top; }
.spec th { width: 42%; color: var(--muted); font-weight: 500; }
.spec td { font-family: var(--font-head); font-weight: 600; color: var(--ink); }

/* --- Accessibility ---------------------------------------------------------
   Larger hit areas and unambiguous focus, both of which matter more on the
   industrial-site audience (gloves, tablets, older devices). */
a, button, input, select, textarea { touch-action: manipulation; }
.nav__link:focus-visible, .mega__link:focus-visible, .footer__links a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (max-width: 1099px) {
  .drawer__flat, .drawer summary, .drawer__sub a { min-height: 44px; display: flex; align-items: center; }
}

/* ==========================================================================
   Case study slider
   A horizontally scrolling track of uniform cards. Uniform beats bespoke here:
   the earlier tabbed layout left ragged whitespace whenever one case had less
   copy than another. Native scroll-snap, so it works with JavaScript off.
   ========================================================================== */
.cs { position: relative; }

.cs__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 1.1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .35rem;
  -webkit-overflow-scrolling: touch;
}
.cs__track::-webkit-scrollbar { display: none; }
@media (min-width: 640px)  { .cs__track { grid-auto-columns: 46%; } }
@media (min-width: 1000px) { .cs__track { grid-auto-columns: calc((100% - 2.2rem) / 3); } }
/* All four visible at desktop width — nothing worth hiding behind a scroll. */
@media (min-width: 1180px) { .cs__track { grid-auto-columns: calc((100% - 3.3rem) / 4); overflow-x: visible; } }

.cs__card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; min-width: 0;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.cs__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-300); }

.cs__fig { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sand-2); display: block; }
.cs__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.cs__card:hover .cs__fig img { transform: scale(1.045); }
.cs__fig-tag {
  position: absolute; left: .75rem; top: .75rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  padding: .26rem .6rem; border-radius: 5px;
  font-family: var(--font-head); font-size: .67rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}

.cs__body { padding: 1.1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

/* Meta line — plain text, not a chip. */
.cs__meta {
  font-family: var(--font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}

.cs__title { font-size: .875rem; line-height: 1.4; letter-spacing: -.01em; color: var(--muted); font-weight: 600; }
.cs__title a:hover { color: var(--brand-600); }
.cs__card:hover .cs__title { color: var(--ink); }

/* The result is the most interesting thing on the card, so it is the
   visually dominant text — darker, larger and heavier than everything
   around it. Highlighted by hierarchy rather than by a tinted container. */
.cs__result {
  font-size: 1.035rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.005em;
  margin-top: .15rem;
}
.cs__result-k {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--brand-600);
}
/* Everything else on the card recedes so the result carries. */
.cs__card:hover .cs__result { color: var(--ink); }

/* Metrics as a typographic run, separated by rules rather than pills. */
.cs__figures {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-top: .35rem; padding-top: .7rem;
  border-top: 1px solid var(--line-2);
  font-size: .78rem; color: var(--muted);
}
.cs__figure { display: inline-flex; align-items: baseline; gap: .32rem; }
.cs__figure + .cs__figure { margin-left: .7rem; padding-left: .7rem; border-left: 1px solid var(--line); }
.cs__figure b {
  font-family: var(--font-head); font-size: .88rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}

/* Quote — a hairline and a change of colour, no italics, no quote glyph. */
.cs__said {
  margin-top: auto; padding-top: .85rem;
  border-top: 1px solid var(--line-2);
  font-size: .805rem; line-height: 1.6; color: var(--muted);
}
.cs__said cite {
  display: block; margin-top: .3rem; font-style: normal;
  font-size: .73rem; color: var(--muted-2);
}

.cs__more { padding-top: .9rem; }

/* --- Controls --------------------------------------------------------------- */
.cs__nav { display: flex; align-items: center; gap: .7rem; margin-top: 1.35rem; }
.cs__arrow {
  width: 40px; height: 40px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .17s var(--ease), opacity .17s var(--ease);
}
.cs__arrow:hover:not(:disabled) { border-color: var(--ink); }
.cs__arrow:disabled { opacity: .3; cursor: not-allowed; }
.cs__arrow svg { width: 16px; height: 16px; }
.cs__arrow--prev svg { transform: rotate(180deg); }
.cs__rail { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 16rem; }
.cs__rail-on { display: block; height: 100%; background: var(--brand); border-radius: 2px; transition: width .3s var(--ease); }
.cs__hint { font-size: .76rem; color: var(--muted-2); margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .cs__track { scroll-behavior: auto; }
  .cs__rail-on { transition: none; }
}

/* ==========================================================================
   Order flow
   These six facts are not independent — they are the stages of a transaction
   in order. Drawn as a connected sequence so a buyer reads the process, not
   a grid of disconnected boxes.
   ========================================================================== */
.flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .4rem;
  -webkit-overflow-scrolling: touch;
}
.flow::-webkit-scrollbar { display: none; }

@media (max-width: 780px) {
  /* Stack into a vertical sequence rather than forcing a sideways scroll. */
  .flow { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}

.flow__step { position: relative; padding: 0 1.15rem 0 0; min-width: 0; }
.flow__step:last-child { padding-right: 0; }

/* Connector between nodes. */
.flow__step::before {
  content: '';
  position: absolute;
  top: 17px; left: 34px; right: -2px;
  height: 2px; background: var(--line);
}
.flow__step:last-child::before { display: none; }
.flow__step--done::before { background: var(--brand-300); }

.flow__n {
  position: relative; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--brand);
  color: var(--brand-600);
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  margin-bottom: .9rem;
}
.flow__step:last-child .flow__n { background: var(--brand); border-color: var(--brand); color: #fff; }

.flow__k {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-size: .655rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: .35rem;
}
.flow__k svg { width: 13px; height: 13px; flex: none; color: var(--brand-600); }

.flow__v {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); line-height: 1.25; letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.flow__d { font-size: .805rem; color: var(--muted); line-height: 1.55; padding-right: .5rem; }

@media (max-width: 780px) {
  .flow__step { padding: 0 0 1.4rem 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 .9rem; }
  .flow__step::before { top: 36px; bottom: -2px; left: 17px; right: auto; width: 2px; height: auto; }
  .flow__n { margin-bottom: 0; grid-row: span 3; }
  .flow__d { padding-right: 0; }
}

.flow-hint { font-size: .77rem; color: var(--muted-2); margin-top: 1rem; }
@media (min-width: 781px) { .flow-hint { display: none; } }

/* ==========================================================================
   Single-page additions
   ========================================================================== */

/* --- Active section in the nav --------------------------------------------- */
.nav__link.is-here { color: var(--brand-600); background: var(--brand-50); }

/* --- Our brands ------------------------------------------------------------
   Divisions of the group. Rendered as a plain wall rather than photo cards —
   these are names and remits, not products. */
.brands {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr;
}
/* 1 / 2 / 4 columns. There is deliberately no three-column step: with eight
   desks, three columns leaves the last row two-thirds empty, and because the
   cells are separated by a 1px background gap an empty cell reads as a gap in
   the panel rather than as whitespace. */
@media (min-width: 620px)  { .brands { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .brands { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.brand {
  background: #fff; padding: 1.5rem 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: .55rem;
  transition: background-color .2s var(--ease);
}
.brand:hover { background: var(--sand); }
/* Four across is a narrower column than three, so the padding comes in. */
@media (min-width: 1080px) { .brand { padding: 1.25rem 1.2rem 1.35rem; } }

.brand__mark {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem;
}
.brand__mark img { width: auto; height: 26px; flex: none; object-fit: contain; }
.brand__name {
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); text-transform: uppercase;
}
.brand__name em { font-style: normal; color: var(--brand); }
.brand__remit {
  font-family: var(--font-head); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.brand__d { font-size: .865rem; color: var(--muted); line-height: 1.58; }
.brand__tags { margin-top: auto; padding-top: .7rem; }

/* --- Enquiry ---------------------------------------------------------------
   Centred rather than two-column. A tall form beside a short contact list
   left the two columns ending ~160px apart, which read as broken alignment.
   Centring removes the problem and gives the site's only conversion point
   the focus it deserves. */
.enq { background: var(--navy-900); color: #D5D4CB; }
.enq h2 { color: #fff; }
.enq .lede { color: #ADACA2; }

.enq__head { max-width: 40rem; margin-inline: auto; text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.enq__card {
  background: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  max-width: 46rem; margin-inline: auto;
}
.enq__card h3 { color: var(--ink); font-size: 1.18rem; }
.enq__card > p { color: var(--muted); font-size: .875rem; margin-top: .3rem; }

/* Contact routes, below the form, as an even row. */
.enq__contact {
  max-width: 46rem; margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  display: grid; gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .enq__contact { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.enq__row {
  background: var(--navy-900);
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1.05rem 1.15rem;
  transition: background-color .18s var(--ease);
}
a.enq__row:hover { background: var(--navy-800); }
.enq__row svg { width: 16px; height: 16px; margin-top: .18rem; flex: none; color: var(--brand-300); }
.enq__k {
  display: block; font-size: .63rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #7E7E74; margin-bottom: .22rem;
}
.enq__v { display: block; font-family: var(--font-head); font-size: .875rem; font-weight: 600; color: #EDECE4; word-break: break-word; }
.enq__v small { display: block; font-weight: 400; font-size: .74rem; color: #96968C; margin-top: .12rem; }
a.enq__row:hover .enq__v { color: var(--brand-300); }

.enq__assure {
  max-width: 46rem; margin: 1.1rem auto 0;
  font-size: .78rem; color: #7E7E74; line-height: 1.6; text-align: center;
}

/* Success / error message on the form. */
.enq__msg { margin-top: .9rem; font-size: .85rem; line-height: 1.55; }
.enq__msg[data-state="ok"]  { color: #4B7A2E; }
.enq__msg[data-state="err"] { color: var(--brand-600); }

/* Cards that open the enquiry form with a subject preselected. */
.mcard[data-preselect] { cursor: pointer; }

/* Registration disclosure — one line. The licence number is a genuine
   verification hook for trade buyers, so it stays; it just does not need
   a stacked definition list to say four short things. */
.footer__legal {
  margin-top: .3rem;
  font-size: .73rem;
  line-height: 1.5;
  color: #6E6D64;
}
.footer__bot { align-items: flex-start; }
@media (max-width: 620px) { .footer__legal { max-width: 26rem; } }

/* --- Hero video ------------------------------------------------------------
   Layered over the still, never in place of it. The optimised image is what
   paints first and remains the LCP element; the video fades in on top only
   once it can actually play, and only where it is wanted. Anyone on Safari,
   a metered connection, a small screen or reduced-motion simply keeps the
   still and downloads nothing extra. */
.hero__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
.hero__vid.is-playing { opacity: 1; }

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

/* ==========================================================================
   Form controls on dark sections
   The enquiry card is white but sits inside .enq, which sets light text for
   the dark ground. Without an explicit reset the <option> elements inherit
   that light colour and render at 1.49:1 on the white popup — effectively
   invisible. Reset at the card, then state option colours outright rather
   than relying on inheritance.
   ========================================================================== */
.enq__card,
.rfq {
  color: var(--text);
  /* Tell the OS to draw native popups and controls in light mode. */
  color-scheme: light;
}

.enq__card select,
.rfq select,
.enq__card input,
.rfq input,
.enq__card textarea,
.rfq textarea {
  color-scheme: light;
}

/* Dropdown list items — stated explicitly for both forms. */
.enq__card select option,
.rfq select option {
  background-color: #fff;
  color: var(--text);
}

.enq__card select optgroup,
.rfq select optgroup {
  background-color: #fff;
  color: var(--muted);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
}

/* The placeholder row reads as a prompt, not a choice. */
.enq__card select option[value=""],
.rfq select option[value=""] { color: var(--muted-2); }

/* Selected and hovered rows in the brand olive rather than the OS blue.
   Honoured by Firefox and Chromium where the popup is engine-drawn; on
   platforms that hand the popup to the OS this is ignored and the system
   highlight is used instead. */
.enq__card select option:checked,
.rfq select option:checked,
.enq__card select option:hover,
.rfq select option:hover {
  background: var(--brand) linear-gradient(0deg, var(--brand), var(--brand));
  color: #fff;
}

/* Native control accents — checkbox tick, and the highlight in engines that
   derive it from accent-color. */
.enq__card,
.rfq,
.form,
.rfq form { accent-color: var(--brand); }

/* Selection highlight inside text fields, for the same reason. */
.enq__card ::selection,
.rfq ::selection { background: var(--brand); color: #fff; }

/* ==========================================================================
   Custom select
   Chrome draws the native <select> popup itself and ignores option:hover, so
   the OS blue highlight cannot be styled away. This replaces the popup on
   pointer devices while leaving the real <select> in the DOM and functional —
   form submission, validation and the card preselect all keep working, and
   touch devices keep the native picker, which is better on mobile.
   ========================================================================== */
.csel { position: relative; }

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

.csel__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border: 1.5px solid var(--line); border-radius: 7px;
  padding: .72rem .85rem;
  background: #fff; color: var(--text);
  font-size: .885rem; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.csel__btn:hover { border-color: var(--muted-2); }
.csel__btn[aria-expanded="true"],
.csel__btn:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(137,135,87,.16);
}
.csel__btn svg { width: 14px; height: 14px; flex: none; color: var(--muted-2); transition: transform .2s var(--ease); }
.csel__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.csel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__value[data-empty] { color: var(--muted-2); }

.csel__list {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .3rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.csel__list[hidden] { display: none; }
.csel__list::-webkit-scrollbar { width: 10px; }
.csel__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid #fff; }

.csel__grp {
  display: block; padding: .55rem .65rem .3rem;
  font-family: var(--font-head); font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
}
.csel__grp + .csel__opt { margin-top: 0; }

.csel__opt {
  display: block; padding: .5rem .65rem;
  border-radius: 6px; font-size: .875rem; color: var(--text);
  cursor: pointer; user-select: none;
}
/* Theme colours throughout — no OS highlight anywhere in this list. */
.csel__opt:hover,
.csel__opt[data-active] { background: var(--brand-50); color: var(--brand-600); }
.csel__opt[aria-selected="true"] { background: var(--brand); color: #fff; font-weight: 600; }
.csel__opt[aria-selected="true"]:hover,
.csel__opt[aria-selected="true"][data-active] { background: var(--brand-600); color: #fff; }
.csel__opt[data-placeholder] { color: var(--muted-2); }




/* ==========================================================================
   Presence band
   The offices and the commercial terms used to sit in two separate strips
   under the hero which, with the stats card above them, put three
   differently-styled bands in a row. One band now, in the sand tone — the
   hero above is near-black and the services section below is white, so a
   third value is what separates it from both.
   ========================================================================== */
.presence {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* One panel, cells divided by a 1px gap showing the panel colour through —
   the same treatment as the trading-desk grid, so the two read as one system.
   Four detached cards made four offices look like four companies. */
.presence__panel {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .presence__panel { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .presence__panel { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.presence__office {
  position: relative;
  background: #fff;
  padding: 1.1rem 1.2rem 1.2rem;
  min-width: 0;
  /* Cells stretch to the tallest in the row. Without this the shorter ones
     centre their content and the city names stop lining up across the panel. */
  display: flex; flex-direction: column; align-items: stretch;
  transition: background-color .2s var(--ease);
}
.presence__office > * { width: 100%; }

/* The role sits on the cell floor, so the rules above it align across the row
   even when one country name wraps to two lines and another does not. */
.presence__office .presence__role { margin-top: auto; }
.presence__office:hover { background: var(--sand); }

/* The head office carries an olive edge. Everything else about the cell is
   identical, so the emphasis comes from one line rather than a different card. */
.presence__office--hq { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 559px) {
  .presence__office--hq { box-shadow: inset 0 3px 0 var(--brand); }
}

.presence__tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: .3rem;
}

.presence__city {
  display: block;
  font-family: var(--font-head);
  font-size: 1.08rem; font-weight: 700; line-height: 1.2;
  color: var(--ink);
}

.presence__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
  margin-top: .22rem;
  font-size: .735rem; color: var(--muted);
}
/* The offset is the practically useful part of this block — a buyer works out
   when they can call. Given its own weight so it is findable at a glance. */
.presence__utc {
  font-family: var(--font-head);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-600);
  background: var(--brand-50);
  border-radius: 4px;
  padding: .08rem .3rem;
}

.presence__role {
  display: block;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--line-2);
  font-size: .82rem; line-height: 1.45; color: var(--muted);
}

/* A footer row of the same panel rather than a second strip beneath it. */
.presence__facts {
  grid-column: 1 / -1;
  background: var(--sand);
  padding: .8rem 1.2rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
}
.presence__fact {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .775rem; color: var(--muted);
}
.presence__fact svg { width: 15px; height: 15px; flex: none; color: var(--brand); }

/* --- PRODUCT TILES (compact, artwork + title) ----------------------------- */
/* The verticals below the featured eight. Explicit column counts rather than
   auto-fit: twelve items under auto-fit resolve to a count that strands two or
   three in a short final row. */
.ptiles { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px)  { .ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ptiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* All twenty verticals in one grid. 20 divides evenly by 2, 4 and 5, so no
   row is ever left short — which six columns would do, leaving two stranded. */
.ptiles--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .ptiles--all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ptiles--all { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ptile {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ptile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.ptile__fig { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--sand-2); }
.ptile__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.ptile:hover .ptile__fig img { transform: scale(1.05); }
.ptile--flag { border-color: var(--brand); }
.ptile__flag {
  position: absolute; left: .5rem; top: .5rem; z-index: 1;
  font-family: var(--font-head); font-size: .625rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .42rem; border-radius: 4px;
  background: var(--brand); color: #fff;
}
.ptile__t {
  display: block; padding: .5rem .6rem .6rem;
  font-family: var(--font-head, inherit);
  font-size: .8rem; font-weight: 600; line-height: 1.32; color: var(--ink);
  /* Three lines' worth whether the title needs them or not. "Construction &
     Building Materials" wraps to three at this column width and dragged its
     whole row taller than the others; reserving the worst case keeps all
     twenty tiles identical, and holds if a longer name is added later. */
  min-height: calc(3 * 1.32em);
}


/* --- Q&A ACCORDION (FAQs, and per-page question blocks) ------------------- */
/* <details> rather than JS: it is keyboard accessible, searchable by the
   browser's find-in-page when open, and works with the script blocked. */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .95rem 0;
  font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 10px; height: 10px; margin-top: .35rem;
  border-right: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--brand-600); }
.qa__a { padding: 0 0 1.25rem; font-size: .885rem; line-height: 1.62; color: var(--muted); max-width: 62ch; }

/* Group spacing.
   The shortcode prints a heading, then its list, then the next heading right
   against the previous list's last border. With every row the same height and
   no gap between groups, twenty questions read as one undifferentiated ladder
   and the group headings disappeared into it.

   So: air above each new group, a rule to close the group before it, and a
   little more height per row. */
.qa + h3,
.prose .qa + h3 {
  margin-top: 3rem;
  padding-top: 0;
}
.qa + h3::before,
.prose .qa + h3::before {
  content: '';
  display: block;
  width: 34px; height: 2px;
  background: var(--brand);
  margin-bottom: .85rem;
}
h3 + .qa,
.prose h3 + .qa { margin-top: 1rem; }

.qa summary { padding: 1.15rem 0; }

/* Numbered eyebrow for repeated service blocks. */
.numlabel { font-variant-numeric: tabular-nums; }


/* Editor content on the Editable page template. The plain .prose column is
   sized for reading; shortcode sections (office panel, entity cards, stats)
   are full-width components and must not inherit that clamp. */
.prose--wide { max-width: none; }
.prose--wide > p,
.prose--wide > ul,
.prose--wide > ol,
.prose--wide > h2,
.prose--wide > h3,
.prose--wide > h4 { max-width: 62ch; }
.prose--wide > h2 { margin-top: 2.6rem; }
.prose--wide > h3 { margin-top: 1.8rem; }
.prose--wide .grid,
.prose--wide .presence__panel,
.prose--wide .stats,
.prose--wide .ticks { margin-block: 1.4rem; }


/* A CTA placed via [ins_cta] sits inside the editor column. Cancel the column's
   flow margin so the band keeps its own padding rather than gaining a second
   gap above it. */
.prose--wide .cta { margin-top: 2.4rem; border-radius: var(--radius); overflow: hidden; }
.prose--wide .cta .wrap { padding-inline: clamp(1.25rem, 3vw, 2.5rem); }


/* One service or vertical rendered in full by [ins_services_full] /
   [ins_products_full]. They repeat down a page, so each needs its own vertical
   rhythm and a rule between them rather than relying on section padding. */
.svc-block + .svc-block { margin-top: 3.2rem; padding-top: 3.2rem; border-top: 1px solid var(--line); }
.prose--wide .svc-block .sec-head { margin-bottom: 0; }
.prose--wide .band { margin-block: 2.4rem; border-radius: var(--radius); overflow: hidden; }
.prose--wide .brands { margin-block: 1.8rem; }
.prose--wide .split { margin-block: 1.8rem; }
.prose--wide .rfq { margin-block: 1.8rem; }