/* ==========================================================================
   J.V. TECHNICAL SERVICES — Design system
   Deep forest + brass on warm cream. Serif display, neutral sans body.
   ========================================================================== */

:root {
  /* Brand */
  --forest:        #0E2A1C;
  --forest-800:    #123320;
  --forest-700:    #184028;
  --forest-600:    #225538;
  --emerald:       #004426;   /* label plates on product imagery */
  --emerald-400:   #0B5C36;   /* lift for emerald buttons on hover */
  --emerald-350:   #007F4E;   /* product name plates and the division buttons */
  --emerald-300:   #1E8A55;   /* emerald button standing on a dark band */
  --emerald-200:   #35A96F;   /* its hover */
  --brass:         #BF9D57;
  --brass-400:     #D6B87C;
  --brass-200:     #E9D9B6;
  --cream:         #FAF7F0;
  --sand:          #F1EADC;
  --sand-dark:     #E3D8C3;
  --ink:           #14170F;
  --body:          #4C5247;
  --muted:         #7B8176;

  /* Utility */
  --line:          rgba(14, 42, 28, .13);
  --line-strong:   rgba(14, 42, 28, .22);
  --line-light:    rgba(250, 247, 240, .16);
  --white:         #ffffff;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Metrics */
  --container: 1240px;
  --gutter: 24px;
  --radius: 3px;
  --radius-lg: 6px;
  --topbar-h: 42px;       /* slim utility strip */
  --cap-h: 82px;          /* navigation row */
  --cap-h-sm: 66px;       /* …once scrolled */
  --header-h: calc(var(--topbar-h) + var(--cap-h));

  --shadow-sm: 0 1px 2px rgba(14, 42, 28, .06), 0 4px 14px rgba(14, 42, 28, .05);
  --shadow-md: 0 2px 6px rgba(14, 42, 28, .07), 0 18px 44px rgba(14, 42, 28, .10);
  --shadow-lg: 0 8px 20px rgba(14, 42, 28, .10), 0 34px 80px rgba(14, 42, 28, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* Logos arrive wrapped in <picture> for their WebP. The wrapper takes no part
   in layout, so every rule written for the <img> keeps working as before. */
picture{display:contents}
/* With the wrapper gone its <source> would become a layout item of its own —
   an extra grid row in the seal, an extra flex gap in the header. The browser
   still reads it to choose the file; it never needed a box. */
picture>source{display:none}


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

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

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

/* --------------------------------------------------------------- typography */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--forest);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.025em;
}

.h-xl  { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.03em; }
.h-lg  { font-size: clamp(2.1rem, 3.8vw, 3.25rem); line-height: 1.1; letter-spacing: -.025em; }
.h-md  { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.h-sm  { font-size: clamp(1.22rem, 1.7vw, 1.45rem); line-height: 1.25; }

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

.lede {
  font-size: clamp(1.06rem, 1.45vw, 1.22rem);
  line-height: 1.66;
  color: var(--body);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--brass);
  opacity: .8;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--brass);
  opacity: .8;
}

.text-brass { color: var(--brass); }
.text-cream { color: var(--cream); }
.serif-accent { font-family: var(--display); font-style: normal; font-weight: 400; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 860px; }

.section { padding: clamp(68px, 9vw, 128px) 0; }
.section-sm { padding: clamp(52px, 6vw, 80px) 0; }

.section-head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; }

.grid { display: grid; gap: clamp(22px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.bg-cream  { background: var(--cream); }
.bg-sand   { background: var(--sand); }
.bg-forest { background: var(--forest); color: rgba(250, 247, 240, .76); }
.bg-forest h1, .bg-forest h2, .bg-forest h3, .bg-forest h4 { color: var(--cream); }

.rule { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn i, .btn svg { font-size: .9em; }

.btn-primary { background: var(--emerald); color: var(--cream); }
.btn-primary:hover { background: var(--emerald-400); color: var(--cream); }

/* Emerald on a forest band would disappear, so over dark surfaces the primary
   button steps up to a brighter green and lightens further on hover. */
.hero .btn-primary,
.cta-band .btn-primary,
.bg-forest .btn-primary,
.page-hero .btn-primary { background: var(--emerald-300); color: var(--cream); }
.hero .btn-primary:hover,
.cta-band .btn-primary:hover,
.bg-forest .btn-primary:hover,
.page-hero .btn-primary:hover { background: var(--emerald-200); color: var(--forest); }

.btn-emerald { background: var(--emerald-350); color: var(--cream); }
.btn-emerald:hover { background: var(--emerald-300); color: var(--cream); }
.btn-forest { background: var(--forest); color: var(--cream); }
.btn-forest:hover { background: var(--forest-700); color: var(--brass-200); }

.btn-outline { border-color: var(--line-strong); color: var(--forest); }
.btn-outline:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); }

.btn-ghost { border-color: rgba(250, 247, 240, .34); color: var(--cream); }
.btn-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--forest); }

.btn-sm { padding: 11px 22px; font-size: .71rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--forest);
}
.link-arrow::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
}
.link-arrow:hover { color: var(--brass); }
.link-arrow:hover::after { width: 34px; }
.bg-forest .link-arrow { color: var(--brass-400); }

/* --------------------------------------------------------------- header */
/*  Floating glass capsule. Over a dark hero it is a smoked-forest capsule with
    a brass rim; once scrolled it turns to cream glass. No utility bar — the
    statutory numbers live in the hero foot instead. */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* The off-canvas nav is a child, so its own z-index is capped by this one.
     It must clear .nav-backdrop or the backdrop paints over the open menu. */
  z-index: 90;
}
.is-over::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% + 56px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5, 18, 11, .82) 0%, rgba(5, 18, 11, .62) 48%,
    rgba(5, 18, 11, .28) 78%, rgba(5, 18, 11, 0) 100%);
  transition: opacity .45s var(--ease);
}
.is-over.is-scrolled::before { opacity: 0; }

/* ---- utility strip ---- */
.topbar {
  height: var(--topbar-h);
  overflow: hidden;
  font-size: .745rem;
  letter-spacing: .015em;
  color: rgba(250, 247, 240, .82);
  background: var(--forest-800);
  border-bottom: 1px solid rgba(250, 247, 240, .1);
  transition: height .45s var(--ease), opacity .3s var(--ease),
              background .5s var(--ease), border-color .5s var(--ease);
}
.is-over .topbar {
  background: transparent;
  border-bottom-color: rgba(250, 247, 240, .14);
}
.site-header.is-scrolled .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--topbar-h);
}
.topbar-set { display: flex; align-items: center; }
.topbar-set > * {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid rgba(250, 247, 240, .14);
  white-space: nowrap;
}
.topbar-set > :last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.topbar-set i { color: var(--brass); font-size: .78em; }
.topbar a:hover { color: var(--brass-400); }
.topbar-cred {
  font-size: .645rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .52);
}
.topbar-cred b { color: var(--brass-400); font-weight: 700; letter-spacing: .1em; }

/* Sits where the city line used to. The icons inherit the brass the phone
   and envelope already use, so the set reads as one row rather than a
   separate widget. */
.topbar-social { gap: 2px; }
.topbar-social a {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  transition: background .3s var(--ease);
}
.topbar-social a:hover { background: rgba(250, 247, 240, .1); }
.topbar-social i { font-size: .92em; }
.topbar-social a:hover i { color: var(--brass-400); }

/* ---- navigation bar ---- */
.header-bar {
  background: rgba(250, 247, 240, .93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
}
/* Over a dark hero it is a hairline only. */
.is-over .header-bar {
  background: transparent;
  border-bottom-color: rgba(250, 247, 240, .16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-scrolled .header-bar {
  background: rgba(250, 247, 240, .94);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 14px 34px -22px rgba(14, 42, 28, .34);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: var(--cap-h);
  transition: height .45s var(--ease);
}
.site-header.is-scrolled .header-inner { height: var(--cap-h-sm); }

/* Reserves the height of the fixed header on pages without an overlay hero. */
.header-spacer { height: var(--header-h); }
.site-header.is-scrolled ~ .header-spacer { height: var(--header-h); }

/* ---- logo ---- */
.logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }

/* The client's mark is gold artwork, drawn for a dark ground. Over the hero it
   sits on the photograph; once the bar turns cream it would lose all contrast,
   so it carries its own forest plate there. Padding is constant either way, so
   nothing shifts when the plate fades in. */
.site-header .logo {
  padding: 7px 16px 7px 11px;
  border-radius: 15px;
  background: linear-gradient(140deg, #143522, var(--forest) 58%, #0B2417);
  box-shadow: 0 12px 26px -16px rgba(14, 42, 28, .7);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-over:not(.is-scrolled) .logo {
  background: transparent;
  box-shadow: none;
}
/* The client's globe mark. Width follows the artwork, so only height is set. */
.logo-mark {
  display: block;
  height: 52px;
  width: auto;
  flex-shrink: 0;
  transition: transform .55s var(--ease), height .45s var(--ease);
}
.logo:hover .logo-mark { transform: scale(1.06); }
.site-header.is-scrolled .logo-mark { height: 45px; }

/* The wordmark is now the client's own artwork, so only height is set. */
.logo-word {
  display: block;
  height: 52px;
  width: auto;
  transition: height .45s var(--ease);
}
.site-header.is-scrolled .logo-word { height: 45px; }

/* ---- navigation pill ---- */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav > li { position: relative; }
.nav > li > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  font-size: .855rem;
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  color: var(--body);
  transition: color .35s var(--ease);
}
.nav > li > a:hover { color: var(--forest); }
.is-over:not(.is-scrolled) .nav > li > a {
  color: rgba(250, 247, 240, .94);
  text-shadow: 0 1px 10px rgba(4, 16, 10, .7);
}
.is-over:not(.is-scrolled) .nav > li > a:hover { color: var(--cream); }
.nav > li > a.is-lit { color: var(--forest); }
.is-over:not(.is-scrolled) .nav > li > a.is-lit { color: var(--cream); }
.nav > li > a.is-active { color: var(--forest); }
.is-over:not(.is-scrolled) .nav > li > a.is-active { color: var(--cream); }
.nav .caret { font-size: .58em; opacity: .6; transition: transform .3s var(--ease); }
.nav > li:hover .caret { transform: rotate(180deg); }

/* Sliding brass indicator that tracks the active or hovered item. */
.nav-ind {
  position: absolute;
  z-index: 0;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-200));
  box-shadow: 0 0 12px rgba(191, 157, 87, .7);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1),
              width .45s cubic-bezier(.3, 1.3, .5, 1),
              opacity .3s var(--ease);
}
.nav-ind.is-on { opacity: 1; }

/* ---- mega panel ---- */
.mega {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 680px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 34px 80px -34px rgba(14, 42, 28, .5);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav > li:hover > .mega,
.nav > li:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega-grid { display: grid; gap: 2px; align-content: start; }
.mega-label {
  padding: 10px 12px 6px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.mega-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  transition: background .25s var(--ease);
}
.mega-item:hover { background: var(--sand); }
.mega-item strong { display: block; font-size: .93rem; font-weight: 600; color: var(--forest); line-height: 1.3; }
.mega-item small { display: block; font-size: .795rem; color: var(--muted); }
.mega-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(191, 157, 87, .14);
  color: var(--forest);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.mega-item:hover .mega-ic { background: var(--forest); color: var(--brass-400); transform: scale(1.06) rotate(-4deg); }

.mega-side {
  position: relative;
  min-height: 262px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--forest);
  display: flex;
  align-items: flex-end;
}
/* Two stacked layers so hovering an item cross-fades rather than blinks. */
.mega-side-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .5s var(--ease), transform 1.2s var(--ease);
}
.mega-side-layer.is-on { opacity: 1; transform: scale(1); }
.mega-side::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 32, 21, .2), rgba(8, 26, 17, .93));
}
.mega-side-copy { position: relative; z-index: 2; padding: 20px; color: var(--cream); }
.mega-side-copy small, .mega-side-copy p { transition: opacity .3s var(--ease); }
.mega-side.is-swapping .mega-side-copy small,
.mega-side.is-swapping .mega-side-copy p { opacity: .25; }
.mega-side-copy small {
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-400);
}
.mega-side-copy p { font-size: .98rem; font-weight: 600; line-height: 1.4; margin: 8px 0 14px; color: var(--cream); }
.mega-side-copy .link-arrow { color: var(--brass-400); font-size: .7rem; }

/* ---- right cluster ---- */
.header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-header {
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--cream);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
}
.btn-header:hover {
  background: var(--emerald-400);
  border-color: var(--emerald-400);
  color: var(--cream);
  transform: translateY(-1px);
}
/* The header floats over a dark hero until it is scrolled. */
.site-header.is-over:not(.is-scrolled) .btn-header {
  background: var(--emerald-300);
  border-color: var(--emerald-300);
  color: var(--cream);
}
.site-header.is-over:not(.is-scrolled) .btn-header:hover {
  background: var(--emerald-200);
  border-color: var(--emerald-200);
  color: var(--forest);
}
.site-header.is-scrolled .btn-header { padding: 11px 21px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  background: none;
  border: 1px solid rgba(14, 42, 28, .16);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.is-over:not(.is-scrolled) .nav-toggle { border-color: rgba(250, 247, 240, .26); }
.nav-toggle span {
  position: absolute;
  left: 12px;
  width: 19px; height: 1.6px;
  border-radius: 2px;
  background: var(--forest);
  transition: transform .3s var(--ease), opacity .2s, background .5s var(--ease);
}
.is-over:not(.is-scrolled) .nav-toggle span { background: var(--cream); }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
/* Once the panel is open the button sits on cream, whatever the header state
   behind it — so the bars must be dark or the close control disappears. */
.nav-toggle.is-open { border-color: rgba(14, 42, 28, .18); background: var(--white); }
.is-over:not(.is-scrolled) .nav-toggle.is-open { border-color: rgba(14, 42, 28, .18); }
.nav-toggle.is-open span,
.is-over:not(.is-scrolled) .nav-toggle.is-open span { background: var(--forest); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- reading progress ---- */
.hdr-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.site-header.is-scrolled .hdr-progress { opacity: 1; }
.hdr-progress i {
  display: block;
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brass), var(--brass-200), var(--brass));
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  box-shadow: 0 0 10px rgba(191, 157, 87, .7);
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--forest);
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(0, 0, 0);
  transition: transform 11s linear;
}
.hero-slide.is-active img { transform: scale(1) translate3d(0, 0, 0); }

/* Cinematic wash — dense bottom-left, open on the right. */
.hero-slides::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(5, 18, 11, .34) 0%, rgba(5, 18, 11, .08) 26%, rgba(5, 18, 11, 0) 50%),
    radial-gradient(104% 90% at 0% 68%,
      rgba(5, 18, 11, .66) 0%, rgba(6, 22, 14, .44) 26%,
      rgba(7, 26, 17, .16) 54%, rgba(8, 30, 19, .02) 100%),
    linear-gradient(to top, rgba(5, 18, 11, .44) 0%, rgba(5, 18, 11, .08) 32%, rgba(5, 18, 11, 0) 58%),
    linear-gradient(to bottom, rgba(5, 18, 11, .16) 0%, rgba(5, 18, 11, 0) 20%);
}

/* Fine film grain keeps large flat areas from banding. */
.hero-grain {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(24px, 3.4vw, 48px));
  padding-bottom: clamp(24px, 3vw, 48px);
}

.hero-copy { position: relative; max-width: 740px; }
.hero-copy::before {
  content: "";
  position: absolute;
  left: -7%; right: -16%; top: -9%; bottom: -11%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(72% 78% at 26% 52%,
    rgba(4, 16, 10, .76) 0%, rgba(4, 16, 10, .5) 44%, rgba(4, 16, 10, .18) 68%, rgba(4, 16, 10, 0) 84%);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-bottom: clamp(14px, 1.9vw, 24px);
  text-shadow: 0 1px 14px rgba(4, 16, 10, .6);
}
.hero-kicker::before {
  content: "";
  width: 46px; height: 1px;
  background: linear-gradient(to right, transparent, var(--brass));
}

.hero-title {
  font-size: clamp(2.7rem, 5.3vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 15ch;
  color: var(--cream);
  margin-bottom: clamp(16px, 2vw, 26px);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(4, 16, 10, .72), 0 1px 4px rgba(4, 16, 10, .45);
}
.hero-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--brass-400);
}

.hero-lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.18vw, 1.135rem);
  line-height: 1.72;
  color: rgba(250, 247, 240, .88);
  text-shadow: 0 1px 14px rgba(4, 16, 10, .9), 0 0 2px rgba(4, 16, 10, .5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* ---- credential card on the hero foot ---- */
.hero-foot {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(16px, 2.4vh, 28px);
}

.hero-foot-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
  padding: 6px;
  border-radius: 22px;
  background: rgba(8, 26, 17, .44);
  border: 1px solid rgba(250, 247, 240, .14);
  backdrop-filter: saturate(165%) blur(16px);
  -webkit-backdrop-filter: saturate(165%) blur(16px);
  box-shadow: 0 28px 64px -32px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(250, 247, 240, .1);
}
/* Same masked brass rim as the header capsule. */
.hero-foot-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(224, 192, 136, .6), transparent 28%,
                              transparent 72%, rgba(224, 192, 136, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.hero-cred {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 16px;
  border-right: 1px solid rgba(250, 247, 240, .1);
  transition: background .35s var(--ease);
}
.hero-cred:nth-of-type(4) { border-right: 0; }
.hero-cred:hover { background: rgba(250, 247, 240, .05); }

.hero-cred-ic {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(191, 157, 87, .34);
  background: rgba(191, 157, 87, .14);
  color: var(--brass-400);
  font-size: .98rem;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .4s var(--ease);
}
.hero-cred:hover .hero-cred-ic {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--forest);
  transform: scale(1.05) rotate(-4deg);
}

.hero-cred-text { min-width: 0; }
.hero-cred-text small {
  display: block;
  font-size: .615rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .56);
}
.hero-cred-text b {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(.86rem, .95vw, .99rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.hero-scroll {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: auto 10px auto 14px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 240, .24);
  color: rgba(250, 247, 240, .78);
  font-size: .82rem;
  flex-shrink: 0;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hero-scroll:hover { background: var(--brass); border-color: var(--brass); color: var(--forest); }
.hero-scroll i { animation: scrollNudge 2.2s var(--ease) infinite; }
@keyframes scrollNudge {
  0%, 62%, 100% { transform: translateY(0); opacity: .85; }
  30%           { transform: translateY(4px); opacity: 1; }
}

/* Page banner (inner pages) — full-bleed photograph, held short, closed by a
   brass keyline and a strip of facts. The nav above it stays solid cream, so
   the two never read as one dark block. */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  /* Fixed across every inner page, so the band never jumps between pages.
     The tallest content (two-line title + two-line lede + strip) measures
     ~336px at any width, so this flat value always wins. */
  min-height: 344px;
  padding-block: clamp(32px, 3.4vw, 50px) 0;
  background: var(--forest);
  overflow: hidden;
}
.page-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .88;                       /* the photograph should carry the band */
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  /* Only as much wash as the text needs: heavier on the left where the words
     sit, then clearing so the photograph reads on the right. */
  background:
    linear-gradient(94deg, rgba(5, 20, 12, .74) 0%, rgba(6, 24, 15, .46) 32%,
                    rgba(8, 30, 19, .14) 62%, rgba(8, 30, 19, .24) 100%),
    linear-gradient(to top, rgba(5, 20, 12, .5), rgba(5, 20, 12, 0) 46%);
}
.page-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.page-hero h1 {
  color: var(--cream);
  max-width: 26ch;
  font-size: clamp(1.75rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  text-shadow: 0 2px 20px rgba(4, 16, 10, .75), 0 1px 3px rgba(4, 16, 10, .45);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Article titles come from the database and run to ~65 characters, so they get
   a smaller size, more measure and a third line. There is room: an article
   hero carries no lede. */
.page-hero.is-article h1 {
  max-width: 40ch;
  font-size: clamp(1.4rem, 1.95vw, 1.72rem);
  -webkit-line-clamp: 3;
}
.page-hero .lede {
  color: rgba(250, 247, 240, .88);
  max-width: 62ch;
  margin-top: 11px;
  font-size: clamp(.92rem, 1.02vw, 1rem);
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(4, 16, 10, .8), 0 1px 2px rgba(4, 16, 10, .5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---- the fact strip that closes the band ---- */
.phm {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;                   /* pinned to the foot of the band */
  padding-top: clamp(18px, 2.1vw, 28px);
  border-top: 1px solid rgba(224, 192, 136, .38);
}
.phm li {
  display: grid;
  gap: 5px;
  padding: clamp(10px, 1.1vw, 14px) clamp(18px, 2.2vw, 30px);
  border-left: 1px solid rgba(224, 192, 136, .18);
}
.phm li:first-child { padding-left: 0; border-left: 0; }
.phm small {
  text-shadow: 0 1px 6px rgba(4, 16, 10, .7);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass-400);
}
.phm b {
  text-shadow: 0 1px 8px rgba(4, 16, 10, .7);
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -.005em;
  /* one line always — a wrapping value would make the band taller on one page */
  max-width: 30ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 620px) {
  .pdp-blocks, .pdp-blocks.is-wide { grid-template-columns: 1fr; }

  .page-hero { min-height: 0; padding-block: clamp(24px, 5.5vw, 34px) 0; }
  .phm li { padding-inline: 16px; }
  .phm li:first-child { padding-left: 0; }
}

.breadcrumb {
  text-shadow: 0 1px 6px rgba(4, 16, 10, .6);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: .755rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .58);
  margin-bottom: 14px;
}
.breadcrumb a:hover { color: var(--brass-400); }
.breadcrumb .sep { opacity: .45; }
.breadcrumb .is-current { color: var(--brass-400); }

/* ------------------------------------------------------------- trust strip */
.trust-strip { background: var(--forest-800); padding: 26px 0; }
.trust-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 34px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(250, 247, 240, .74);
}
.trust-item i { color: var(--brass); font-size: 1.15rem; }
.trust-item b {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: .03em;
}
.trust-item span {
  display: block;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .5);
}

/* ------------------------------------------------------------------ stats */
/* ------------------------------------------------------------ media split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 78px);
  align-items: center;
}
.split.is-reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--radius-lg); }
.split-media .frame {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--brass);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.badge-float {
  position: absolute;
  right: -22px;
  bottom: 30px;
  background: var(--forest);
  color: var(--cream);
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 220px;
}
.badge-float .n {
  font-family: var(--display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--brass-400);
}
.badge-float p {
  margin: 8px 0 0;
  font-size: .73rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .7);
}

.check-list { display: grid; gap: 14px; margin-top: 30px; }
.check-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: .96rem;
}
.check-list i {
  color: var(--brass);
  margin-top: 5px;
  font-size: .85rem;
  flex-shrink: 0;
}
.bg-forest .check-list li { color: rgba(250, 247, 240, .8); }

/* ------------------------------------------------------------ who we are */
.wwa { position: relative; overflow: hidden; isolation: isolate; background: var(--cream); }
.wwa-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 440px at 0% 8%,  rgba(191, 157, 87, .12), transparent 70%),
    radial-gradient(720px 520px at 100% 92%, rgba(14, 42, 28, .06), transparent 70%);
}
.wwa-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14, 42, 28, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 42, 28, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(62% 56% at 46% 42%, #000, transparent 76%);
          mask-image: radial-gradient(62% 56% at 46% 42%, #000, transparent 76%);
}

.wwa-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 6.5vw, 104px);
  align-items: center;
}

/* ---- layered media ---- */
.wwa-col { min-width: 0; }
.wwa-media { position: relative; aspect-ratio: 1 / 0.92; }
.wwa-frame {
  position: absolute;
  left: 7%; top: -22px;
  width: 68%; height: 78%;
  border: 1.5px solid var(--brass);
  border-radius: 28px;
  opacity: .55;
}
.wwa-main, .wwa-sub {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: var(--sand-dark);
  box-shadow: 0 40px 80px -42px rgba(14, 42, 28, .55);
}
.wwa-main { left: 0; top: 0; width: 72%; height: 84%; }
.wwa-sub  { right: 0; bottom: 0; width: 50%; height: 48%; border: 9px solid var(--cream); border-radius: 28px; }
.wwa-main img, .wwa-sub img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.wwa-media:hover .wwa-main img { transform: scale(1.05); }
.wwa-media:hover .wwa-sub img  { transform: scale(1.08); }

/* Rotating credential seal. */
.wwa-seal {
  position: absolute;
  right: 10%; top: 13%;
  display: grid; place-items: center;
  width: 146px; height: 146px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 24px 50px -20px rgba(14, 42, 28, .7), 0 0 0 6px rgba(250, 247, 240, .92);
}
.wwa-seal-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealSpin 26s linear infinite; }
.wwa-seal-text text { fill: var(--brass-400); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; font-family: var(--sans); }
.wwa-seal-mark { display: block; width: 72px; height: auto; }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wwa-seal-text { animation: none; } }

/* Floating establishment badge. */
.wwa-years {
  position: absolute;
  left: 4%; bottom: 5%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  color: var(--cream);
  background: rgba(10, 32, 21, .84);
  border: 1px solid rgba(250, 247, 240, .14);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 24px 50px -20px rgba(14, 42, 28, .7);
}
.wwa-years strong {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}
.wwa-years small {
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(250, 247, 240, .74);
  padding-left: 14px;
  border-left: 1px solid rgba(250, 247, 240, .2);
  max-width: 15ch;
}

/* ---- sourcing card under the media ---- */
.wwa-source {
  position: relative;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 24px 54px -34px rgba(14, 42, 28, .45);
}
.wwa-source > small {
  display: block;
  font-size: .615rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.wwa-source ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.wwa-source li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: .9rem;
  color: var(--forest);
  font-weight: 500;
}
.wwa-source li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.wwa-source li span { color: var(--muted); font-weight: 400; font-size: .82rem; }

/* ---- copy ---- */
.wwa-copy h2 { font-size: clamp(2.05rem, 3.7vw, 3.1rem); line-height: 1.07; letter-spacing: -.032em; }
.wwa-lead {
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  line-height: 1.68;
  color: var(--body);
  margin: 20px 0 24px;
  max-width: 54ch;
}

/* Pull quote from the proprietor. */
.wwa-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 24px 24px 22px 74px;
  border-radius: 18px;
  background: var(--sand);
  border-left: 3px solid var(--brass);
}
.wwa-quote-ic {
  position: absolute;
  left: 22px; top: 24px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--brass-400);
  font-size: .82rem;
}
.wwa-quote p {
  margin: 0 0 12px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.08rem, 1.4vw, 1.26rem);
  line-height: 1.5;
  color: var(--forest);
}
.wwa-quote footer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wwa-quote footer strong { font-size: .92rem; color: var(--forest); font-weight: 600; }
.wwa-quote footer small { font-size: .82rem; color: var(--muted); }

/* Pillars — richer than a row of small cards. */
.wwa-pillars { display: grid; gap: 10px; margin: 0 0 28px; }
.wwa-pillars li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.wwa-pillars li:hover {
  border-color: rgba(191, 157, 87, .55);
  box-shadow: 0 20px 44px -28px rgba(14, 42, 28, .42);
  transform: translateX(6px);
}
.wwa-pillar-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--sand);
  color: var(--forest);
  font-size: .95rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.wwa-pillars li:hover .wwa-pillar-ic { background: var(--forest); color: var(--brass-400); }
.wwa-pillars strong {
  display: block;
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 3px;
}
.wwa-pillars small { display: block; font-size: .88rem; line-height: 1.55; color: var(--muted); }

.wwa-founder {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 26px;
  padding: 11px 20px 11px 11px;
  border-radius: 18px;
  background: var(--sand);
  border: 1px solid var(--line);
}
.wwa-founder-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--forest);
  color: var(--brass-400);
  font-size: .95rem;
}
.wwa-founder small {
  display: block;
  font-size: .645rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.wwa-founder strong {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem; font-weight: 600;
  letter-spacing: .015em;
  color: var(--forest);
}

.wwa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.wwa-call { display: flex; align-items: center; gap: 13px; }
.wwa-call-ic {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--forest);
  font-size: .95rem;
  flex-shrink: 0;
}
.wwa-call-ic::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(191, 157, 87, .5);
  animation: callPulse 2.2s var(--ease) infinite;
}
@keyframes callPulse {
  0%   { transform: scale(.9); opacity: .9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.wwa-call small { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.wwa-call strong { display: block; font-size: 1.04rem; font-weight: 600; color: var(--forest); }

/* ---- dark stats panel ---- */
.wwa-stats {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 7vw, 96px);
  border-radius: 26px;
  background: linear-gradient(305deg, var(--emerald-350), #00633E 55%, #00502F);
  box-shadow: 0 40px 84px -44px rgba(14, 42, 28, .72);
}
.wwa-stats::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 240px at 100% 0%, rgba(191, 157, 87, .24), transparent 70%);
}
/* On inner pages the card is the whole section, so it needs no lead-in gap. */
.wwa-stats.is-standalone { margin-top: 0; }
.wwa-stat { position: relative; padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px); }
.wwa-stat + .wwa-stat::before {
  content: "";
  position: absolute; left: 0; top: 26%; bottom: 26%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(224, 192, 136, .5), transparent);
}
.wwa-stat-n {
  display: block;
  font-size: .645rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #EFE1C4;
  margin-bottom: 14px;
}
.wwa-stat strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.wwa-stat strong .suffix { color: var(--brass-200); margin-left: 2px; }
.wwa-stat small { display: block; margin-top: 10px; font-size: .88rem; color: var(--cream); }

/* ---- the sibling division, shown at the foot of a division listing ---- */
.xdiv { display: grid; gap: 18px; }
.xdiv.is-multi { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.xdiv-card {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: stretch;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #143522, var(--forest) 62%, #0B2417);
  box-shadow: 0 34px 72px -46px rgba(14, 42, 28, .7);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.xdiv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 44px 88px -44px rgba(14, 42, 28, .78);
}
/* Brass rim, the same one the division cards upstairs wear. */
.xdiv-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(214, 184, 124, .3);
  pointer-events: none;
}

.xdiv-media { position: relative; overflow: hidden; min-height: 230px; }
.xdiv-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.xdiv-card:hover .xdiv-media img { transform: scale(1.08); }
/* Carry the photograph into the copy panel rather than cutting it off. */
.xdiv-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 42, 28, .12) 0%, rgba(14, 42, 28, .55) 58%, var(--forest) 100%);
}

.xdiv-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 44px);
}
.xdiv-copy .eyebrow { color: var(--brass-400); }
.xdiv-copy strong {
  display: flex; align-items: center; gap: 13px;
  color: var(--cream);
  font-weight: 600;
}
.xdiv-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--emerald-350);
  color: var(--cream);
  font-size: .95rem;
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.xdiv-card:hover .xdiv-ic { background: var(--brass); color: var(--forest); transform: rotate(-5deg); }
.xdiv-text {
  display: block;
  max-width: 46ch;
  font-size: .93rem;
  line-height: 1.65;
  color: rgba(250, 247, 240, .76);
}
.xdiv-go {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-400);
}
.xdiv-go i { transition: transform .4s var(--ease); }
.xdiv-card:hover .xdiv-go i { transform: translateX(5px); }

@media (max-width: 860px) {
  .xdiv-card { grid-template-columns: 1fr; }
  .xdiv-media { min-height: 190px; }
  .xdiv-media::after { background: linear-gradient(180deg, rgba(14, 42, 28, .14) 0%, rgba(14, 42, 28, .5) 58%, var(--forest) 100%); }
}

/* --------------------------------------------------------------- cards */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--sand-dark); }

.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }

.card-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(14, 42, 28, .88);
  color: var(--brass-200);
  padding: 6px 12px;
  border-radius: 2px;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.24rem; margin-bottom: 6px; }
.card-botanical {
  font-family: var(--display);
  font-style: italic;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.card-body p { font-size: .92rem; color: var(--body); }
.card-foot {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.card-hs {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Category card — large */
.cat-card {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--forest);
}
.cat-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .58;
  transition: transform .9s var(--ease), opacity .5s var(--ease);
}
.cat-card:hover img { transform: scale(1.06); opacity: .48; }
.cat-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 24, 16, .95) 8%, rgba(10, 30, 20, .55) 48%, rgba(10, 30, 20, .22) 100%);
}
.cat-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3vw, 40px);
}
.cat-card-body h3 { color: var(--cream); font-size: clamp(1.6rem, 2.2vw, 2rem); }
.cat-card-body p { color: rgba(250, 247, 240, .78); margin: 12px 0 0; font-size: .95rem; max-width: 42ch; }
.cat-card-count {
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-bottom: 14px;
}
.cat-card .link-arrow { color: var(--brass-400); margin-top: 22px; }

/* Divisions section — warm sand plate, one shade off the cream around it */
.dvn-sec {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sand) 0%, #F6F1E6 50%, var(--sand) 100%);
}

.dvn-sec-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 480px at 88% 2%, rgba(191, 157, 87, .20), transparent 68%),
    radial-gradient(660px 440px at 2% 98%, rgba(14, 42, 28, .05), transparent 70%);
}
/* Faint survey grid, faded out towards the edges. */
.dvn-sec-glow::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14, 42, 28, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 42, 28, .045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(68% 58% at 50% 38%, #000, transparent 76%);
          mask-image: radial-gradient(68% 58% at 50% 38%, #000, transparent 76%);
}
/* Brass hairlines top and bottom. */
.dvn-sec::before, .dvn-sec::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 157, 87, .5), transparent);
}
.dvn-sec::before { top: 0; }
.dvn-sec::after  { bottom: 0; }

/* Product card — image plate with a glass name strip, specs and origin */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 30px 66px -34px rgba(14, 42, 28, .45);
}

.pcard-media {
  position: relative;
  aspect-ratio: 7 / 6;
  overflow: hidden;
  background: var(--sand);
  /* The plate below trims its own gutters when the card gets narrow. */
  container-type: inline-size;
}
.pcard-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.25s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.08); }
.pcard-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 20, 12, .45) 0%, rgba(6, 24, 15, .1) 34%, rgba(8, 30, 19, 0) 60%);
}

.pcard-tag, .pcard-hs {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pcard-tag {
  left: 14px;
  background: rgba(191, 157, 87, .92);
  color: var(--forest);
}
.pcard-hs {
  right: 14px;
  background: rgba(7, 24, 15, .58);
  border: 1px solid rgba(250, 247, 240, .18);
  color: rgba(250, 247, 240, .88);
  letter-spacing: .1em;
}

.pcard-name {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  padding: 11px 15px 12px;
  border-radius: 13px;
  background: var(--emerald-350);
  border: 1px solid rgba(250, 247, 240, .1);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .75);
}
/* Brass hairline across the top edge of the plate. */
.pcard-name::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 192, 136, .5), transparent);
}
.pcard-name h3 {
  color: var(--cream);
  font-size: 1.04rem;
  line-height: 1.22;
  letter-spacing: -.012em;
}
.pcard-name em {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-style: italic;
  font-size: .765rem;
  /* Full cream: against the lighter plate a translucent one falls under 4.5:1. */
  color: var(--cream);
}

.pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 20px 20px 18px;
}
.pcard-body > p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--body); }

.pcard-specs { display: flex; flex-wrap: wrap; gap: 7px; }
.pcard-specs i {
  font-style: normal;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid var(--line);
  font-size: .7rem;
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.pcard:hover .pcard-specs i { border-color: rgba(191, 157, 87, .4); }
.pcard-specs i b { font-weight: 500; color: var(--muted); }

.pcard-origin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .795rem;
  line-height: 1.5;
  color: var(--muted);
}
.pcard-origin i { color: var(--brass); font-size: .72rem; margin-top: 4px; flex-shrink: 0; }

.pcard-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pcard-cta {
  font-size: .695rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
}
.pcard-arrow {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--forest);
  font-size: .7rem;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.pcard:hover .pcard-arrow {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--brass-400);
  transform: translateX(3px);
}

/* One overlay link keeps the whole card clickable without nesting anchors. */
.pcard-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}
.pcard-overlay:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }

/* Quality & compliance */
.qly { position: relative; overflow: hidden; isolation: isolate; }
.qly-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(660px 440px at 4% 6%,   rgba(191, 157, 87, .14), transparent 70%),
    radial-gradient(700px 460px at 96% 94%, rgba(14, 42, 28, .05), transparent 72%);
}

.qly-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}

/* ---- media with a floating analysis card ---- */
.qly-media { position: relative; }
.qly-media figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 36px 76px -44px rgba(14, 42, 28, .6);
}
.qly-media img { width: 100%; display: block; aspect-ratio: 4 / 3.2; object-fit: cover; }
.qly-media .frame {
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid var(--brass);
  border-radius: 24px;
  opacity: .5;
  z-index: -1;
}

.qly-coa {
  position: absolute;
  right: clamp(-18px, -1.4vw, -8px);
  bottom: clamp(-16px, -1.2vw, -8px);
  width: min(290px, 78%);
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(250, 247, 240, .93);
  border: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 30px 62px -30px rgba(14, 42, 28, .58);
}
.qly-coa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.qly-coa-head i {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--brass-400);
  font-size: .68rem;
  flex-shrink: 0;
}
.qly-coa-head b {
  display: block;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass);
}
.qly-coa-head span { display: block; font-size: .73rem; color: var(--muted); margin-top: 2px; }

.qly-coa dl { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; margin: 0; }
.qly-coa dt, .qly-coa dd {
  margin: 0;
  padding: 8px 0;
  font-size: .795rem;
  border-bottom: 1px solid rgba(14, 42, 28, .07);
}
.qly-coa dt { color: var(--muted); }
.qly-coa dd { color: var(--forest); font-weight: 600; text-align: right; }
.qly-coa dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---- capability cards ---- */
.qly-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: clamp(22px, 2.6vw, 30px) 0;
}
.qly-cap {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.qly-cap:hover {
  transform: translateY(-4px);
  border-color: rgba(191, 157, 87, .55);
  box-shadow: 0 22px 46px -30px rgba(14, 42, 28, .42);
}
.qly-cap-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--sand);
  color: var(--forest);
  font-size: .95rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.qly-cap:hover .qly-cap-ic { background: var(--forest); color: var(--brass-400); }
.qly-cap strong {
  font-family: var(--display);
  font-size: 1rem; font-weight: 600;
  color: var(--forest);
}
.qly-cap small { font-size: .825rem; line-height: 1.5; color: var(--muted); }

/* ---- testing strip ---- */
.qly-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(38px, 4.6vw, 62px);
  padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 24px 52px -36px rgba(14, 42, 28, .4);
}
.qly-strip-label { max-width: 190px; }
.qly-strip-label b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 600;
  color: var(--forest);
}
.qly-strip-label span { display: block; margin-top: 3px; font-size: .795rem; color: var(--muted); }

.qly-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qly-chips i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 500;
  color: var(--forest);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.qly-chips i::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.qly-chips i:hover { border-color: rgba(191, 157, 87, .5); background: var(--white); }

/* Order flow — light plate with a connected four-step timeline */
.flow-sec {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--cream) 0%, #FFFDF8 48%, var(--cream) 100%);
}
.flow-sec::before, .flow-sec::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 157, 87, .5), transparent);
}
.flow-sec::before { top: 0; }
.flow-sec::after  { bottom: 0; }

.flow-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 440px at 82% 4%,  rgba(191, 157, 87, .16), transparent 70%),
    radial-gradient(620px 420px at 6% 96%,  rgba(14, 42, 28, .05), transparent 72%);
}
.flow-glow::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14, 42, 28, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 42, 28, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(64% 58% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(64% 58% at 50% 42%, #000, transparent 78%);
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 26px);
}

.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 46px -34px rgba(14, 42, 28, .38);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.flow-step:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 28px 58px -32px rgba(14, 42, 28, .42);
}

/* Brass connector across the gap between steps. */
.flow-step::after {
  content: "";
  position: absolute;
  top: calc(clamp(22px, 2.4vw, 30px) + 22px);
  right: calc(-1 * clamp(18px, 2vw, 26px));
  width: clamp(18px, 2vw, 26px);
  height: 1px;
  background: linear-gradient(90deg, rgba(191, 157, 87, .75), rgba(191, 157, 87, .2));
}
.flow-step:last-child::after { display: none; }

.flow-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flow-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--sand);
  color: var(--forest);
  font-size: .98rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.flow-step:hover .flow-ic { background: var(--forest); color: var(--brass-400); }

.flow-num {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(191, 157, 87, .7);
  transition: color .45s var(--ease);
}
.flow-step:hover .flow-num { color: rgba(191, 157, 87, .2); }

.flow-step h3 { font-size: 1.1rem; letter-spacing: -.012em; }
.flow-step p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }

/* Division showcase head — badge, ruled title and a ruled standfirst */
.dvs-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(26px, 4vw, 66px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.dvs-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.dvs-badge.is-plain { padding: 8px 17px; }
.dvs-badge.is-plain::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.dvs-badge b {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--brass-400);
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
}

.dvs-head h2 {
  font-size: clamp(2.05rem, 3.7vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -.032em;
}
.dvs-head h2::after {
  content: "";
  display: block;
  width: 58px; height: 2px;
  margin-top: clamp(16px, 1.8vw, 22px);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, .18));
}

.dvs-head-side { padding-bottom: 4px; }
.dvs-standfirst {
  position: relative;
  margin: 0 0 20px;
  padding-left: 22px;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.72;
  color: var(--body);
  max-width: 48ch;
}
.dvs-standfirst::before {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brass), rgba(191, 157, 87, .12));
}
.dvs-standfirst b { color: var(--forest); font-weight: 600; }

/* Soft decorative bubbles behind section content.
   --bub / --bub-line are set per section so each band keeps its own tint. */
.bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --bub: rgba(191, 157, 87, .02);
  --bub-line: rgba(191, 157, 87, .045);
}
.bubbles b {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--bub);
  border: 1px solid var(--bub-line);
}
.bubbles b:nth-child(1) { width: 240px; height: 240px; left: -70px;  top: 12%; }
.bubbles b:nth-child(2) { width: 120px; height: 120px; left: 13%;    bottom: 14%; }
.bubbles b:nth-child(3) { width: 330px; height: 330px; right: -110px; top: 22%; }
.bubbles b:nth-child(4) { width: 76px;  height: 76px;  right: 16%;   bottom: 18%; }
.bubbles b:nth-child(5) { width: 160px; height: 160px; left: 44%;    top: -60px; }

.bubbles-sand { --bub: rgba(250, 247, 240, .3); --bub-line: rgba(250, 247, 240, .42); }
.bubbles-dark { --bub: rgba(250, 247, 240, .03);  --bub-line: rgba(250, 247, 240, .07); }

@media (max-width: 760px) {
  .bubbles b:nth-child(2), .bubbles b:nth-child(4), .bubbles b:nth-child(5) { display: none; }
  .bubbles b:nth-child(1) { width: 150px; height: 150px; }
  .bubbles b:nth-child(3) { width: 200px; height: 200px; right: -80px; }
}

/* Soft side gradients for the otherwise flat bands.
   Each section sets --edge to a deeper tint of its own background. */
.has-edges { position: relative; overflow: hidden; isolation: isolate; }
.edge-fade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.edge-fade::before, .edge-fade::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(70px, 16vw, 280px);
}
.edge-fade::before { left: 0;  background: linear-gradient(90deg,  var(--edge), transparent); }
.edge-fade::after  { right: 0; background: linear-gradient(270deg, var(--edge), transparent); }

.edges-cream { --edge: rgba(227, 216, 195, .62); }
.edges-sand  { --edge: rgba(201, 185, 156, .5); }

/* Division showcase — plain wide grid, kept short on the page */
.dvs-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}

/* Compact variant of the product card for the 4-up homepage grids. */
.pcard-sm .pcard-media { aspect-ratio: 9 / 8; }
.pcard-sm .pcard-name { left: 9px; right: 9px; bottom: 9px; padding: 9px 12px 10px; border-radius: 11px; }
.pcard-sm .pcard-name::before { left: 12px; right: 12px; }
.pcard-sm .pcard-name h3 { font-size: .93rem; }

/* Around 900px the three-up grid leaves a 266px card, where the longest
   names need about 10px more than the plate gives them. The gutters come
   in rather than the type going down. */
@container (max-width: 300px) {
  .pcard:not(.pcard-sm) .pcard-name { left: 9px; right: 9px; padding-left: 11px; padding-right: 11px; }
  .pcard:not(.pcard-sm) .pcard-name::before { left: 11px; right: 11px; }
}
.pcard-sm .pcard-name em { font-size: .73rem; margin-top: 2px; }
.pcard-sm .pcard-tag, .pcard-sm .pcard-hs { top: 10px; padding: 5px 10px; font-size: .575rem; }
.pcard-sm .pcard-tag { left: 10px; }
.pcard-sm .pcard-hs  { right: 10px; }
.pcard-sm .pcard-body { padding: 15px 15px 13px; gap: 11px; }
.pcard-sm .pcard-body > p {
  font-size: .845rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-sm .pcard-specs i { font-size: .655rem; padding: 4px 9px; }
.pcard-sm .pcard-foot { padding-top: 12px; }
.pcard-sm .pcard-cta { font-size: .645rem; letter-spacing: .14em; }
.pcard-sm .pcard-arrow { width: 30px; height: 30px; font-size: .64rem; }

/* Division cards — image plate, glass panel, product thumbnail stack */
.dvn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.6vw, 34px); }

.dvn {
  position: relative;
  display: block;
  min-height: 620px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--forest);
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dvn:hover { transform: translateY(-6px); box-shadow: 0 48px 92px -46px rgba(14, 42, 28, .6); }

.dvn-media { position: absolute; inset: 0; }
.dvn-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.3s var(--ease);
}
.dvn:hover .dvn-media img { transform: scale(1.09); }
.dvn-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(5, 20, 12, .72) 0%, rgba(6, 24, 15, .34) 30%,
    rgba(8, 30, 19, .08) 58%, rgba(8, 30, 19, 0) 100%);
}

/* Outlined numeral, filled in on hover. */
.dvn-num {
  position: absolute;
  top: 24px; left: 30px;
  z-index: 2;
  font-family: var(--display);
  font-size: 4.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 247, 240, .55);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.dvn:hover .dvn-num { color: rgba(224, 192, 136, .22); -webkit-text-stroke-color: var(--brass-400); }

.dvn-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: 620px;
  padding: 18px;
}

.dvn-panel {
  position: relative;
  width: 100%;
  padding: 19px 22px 17px;
  border-radius: 20px;
  background: rgba(7, 24, 15, .62);
  border: 1px solid rgba(250, 247, 240, .14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(250, 247, 240, .1);
}
.dvn-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(224, 192, 136, .75), transparent 30%,
                              transparent 70%, rgba(224, 192, 136, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity .45s var(--ease);
}
.dvn:hover .dvn-panel::before { opacity: 1; }

.dvn-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.dvn-title h3 {
  color: var(--cream);
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  letter-spacing: -.02em;
}
.dvn-count {
  flex-shrink: 0;
  font-size: .635rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-400);
  white-space: nowrap;
}
/* Both paragraphs reserve a fixed two lines so the two panels stay the same
   height whatever length the category tagline and product list happen to be. */
.dvn-panel > p {
  margin: 9px 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(250, 247, 240, .76);
  max-width: 44ch;
  min-height: calc(2 * 1.6em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Overlapping product thumbnails — shows the depth of the range at a glance. */
.dvn-thumbs { display: flex; align-items: center; margin-top: 15px; }
.dvn-thumbs i {
  width: 42px; height: 42px;
  margin-right: -11px;
  border-radius: 50%;
  border: 2px solid rgba(250, 247, 240, .9);
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
  transition: transform .4s var(--ease), margin .4s var(--ease);
}
.dvn:hover .dvn-thumbs i { margin-right: -6px; }
.dvn-thumbs i:hover { transform: translateY(-4px) scale(1.06); }
.dvn-thumbs .dvn-more {
  display: grid; place-items: center;
  margin-right: 0;
  margin-left: 18px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brass-400);
  background: rgba(191, 157, 87, .16);
  border-color: rgba(191, 157, 87, .45);
  font-style: normal;
}

.dvn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(250, 247, 240, .14);
}
.dvn-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-400);
}
.dvn-arrow {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(224, 192, 136, .42);
  color: var(--brass-400);
  font-size: .72rem;
  flex-shrink: 0;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.dvn:hover .dvn-arrow {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--forest);
  transform: translateX(4px);
}

/* Bespoke sourcing strip beneath the two cards. */
.dvn-bespoke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px -34px rgba(14, 42, 28, .4);
}
.dvn-bespoke-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--forest);
  color: var(--brass-400);
  font-size: 1rem;
  flex-shrink: 0;
}
.dvn-bespoke-text { flex: 1 1 340px; min-width: 0; }
.dvn-bespoke-text strong {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--forest);
}
.dvn-bespoke-text span { display: block; margin-top: 3px; font-size: .9rem; color: var(--muted); }

/* Feature / process cards */
.feature {
  padding: clamp(26px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--sand);
  color: var(--forest);
  border-radius: var(--radius);
  font-size: 1.22rem;
  margin-bottom: 22px;
}
.feature h3 { font-size: 1.18rem; margin-bottom: 10px; }
.feature p { font-size: .93rem; }
.bg-forest .feature {
  background: rgba(250, 247, 240, .045);
  border-color: var(--line-light);
}
.bg-forest .feature-icon { background: rgba(191, 157, 87, .16); color: var(--brass-400); }
.bg-forest .feature p { color: rgba(250, 247, 240, .72); }

/* --------------------------------------------------------------- filters */
.cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 14px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px -36px rgba(14, 42, 28, .4);
}

.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-tabs a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--body);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter-tabs a:hover { background: var(--sand); color: var(--forest); }
.filter-tabs a.is-active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.filter-tabs a b { font-weight: 600; opacity: .55; }
.filter-tabs a.is-active b { color: var(--brass-400); opacity: 1; }

.search-field { position: relative; min-width: 280px; flex: 1 1 260px; max-width: 360px; }
.search-field input {
  width: 100%;
  padding: 12px 44px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sand);
  font-size: .86rem;
  color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(191, 157, 87, .16);
}
.search-field button {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; background: none;
  color: var(--brass);
  font-size: .82rem;
  cursor: pointer;
}

.filter-count {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------- product detail */
.pdp-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4.4vw, 66px);
  align-items: start;
}

/* ---- media ---- */
.pdp-media { position: relative; }
.pdp-media figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 34px 74px -44px rgba(14, 42, 28, .58);
}
.pdp-media img { width: 100%; display: block; aspect-ratio: 4 / 3.1; object-fit: cover; }
.pdp-media .frame {
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--brass);
  border-radius: 24px;
  opacity: .6;
  z-index: -1;
}
.pdp-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---- specification table ---- */
.spec-table { margin-top: 20px; border-top: 1px solid var(--line); }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:hover td, .spec-table tr:hover th { background: rgba(191, 157, 87, .05); }
.spec-table th, .spec-table td { padding: 13px 10px; text-align: left; vertical-align: top; font-size: .92rem; }
.spec-table th { width: 46%; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.spec-table td { color: var(--forest); font-weight: 600; }

/* ---- trade detail cards ---- */
.pdp-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
.pdp-blocks.is-wide { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 0; }
.pdp-block {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pdp-blocks.is-wide .pdp-block { padding: clamp(22px, 2.2vw, 28px); }
.pdp-blocks.is-wide .pdp-block:hover {
  transform: translateY(-4px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 24px 50px -34px rgba(14, 42, 28, .45);
}
.pdp-block-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .95rem;
  transition: background .45s var(--ease);
}
.pdp-block:hover .pdp-block-ic { background: var(--forest); }
.pdp-block h3 {
  font-family: var(--sans);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
}
.pdp-block p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--body); }

/* ---- sticky enquiry panel ---- */
.sticky-card {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 34px);
  box-shadow: 0 30px 66px -40px rgba(14, 42, 28, .48);
}
.sticky-card h2 { font-size: 1.32rem; letter-spacing: -.018em; }
.sticky-card h2::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  margin: 14px 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, .18));
}
.pdp-assure { display: grid; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pdp-assure li { display: flex; gap: 11px; align-items: flex-start; font-size: .855rem; color: var(--body); }
.pdp-assure i { color: var(--brass); font-size: .74rem; margin-top: 5px; flex-shrink: 0; }

.pdp-contact { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pdp-contact a { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--forest); }
.pdp-contact .ic {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--sand);
  color: var(--forest);
  font-size: .78rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.pdp-contact a:hover .ic { background: var(--emerald); color: var(--brass-400); }

.prose h3 { font-size: 1.24rem; margin: 28px 0 12px; }
.prose p { font-size: .98rem; line-height: 1.75; }
.prose em { font-style: italic; }
.prose ul { margin: 0 0 1em; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 1px; background: var(--brass);
}

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.is-full { grid-column: 1 / -1; }
.field label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--brass); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(191, 157, 87, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #A9AEA3; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ---- validation states ---- */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .78rem;
  line-height: 1.45;
  color: #A8412C;
}
.field-error i { font-size: .72rem; margin-top: 3px; flex-shrink: 0; }

.field.has-error label { color: #A8412C; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #D9A395;
  background: #FDF6F4;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  border-color: #C0614A;
  box-shadow: 0 0 0 3px rgba(168, 65, 44, .14);
}

.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea { border-color: rgba(52, 143, 92, .55); }

/* ---- arithmetic captcha ---- */
.captcha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--sand);
  border: 1px solid var(--line);
}
.captcha-sum {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--forest);
  letter-spacing: .02em;
  user-select: none;
}
.captcha-sum i { font-style: normal; color: var(--brass); font-weight: 600; }
.captcha input {
  width: 76px;
  flex: 0 0 auto;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
}
.captcha-hint { font-size: .76rem; color: var(--muted); flex: 1 1 auto; min-width: 120px; }
.field.has-error .captcha { border-color: #D9A395; background: #FDF6F4; }

@media (max-width: 480px) {
  .captcha-hint { flex-basis: 100%; }
}

.alert {
  padding: 15px 18px;
  border-radius: var(--radius);
  font-size: .92rem;
  margin-bottom: 22px;
  border: 1px solid;
}
.alert-success { background: #EDF5EE; border-color: #BBD9C1; color: #1D5B32; }
.alert-error   { background: #FBEEEC; border-color: #E6C2BB; color: #8A3020; }

/* ---------------------------------------------------------------- posts */
.pst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }

.pst-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pst-card:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 30px 64px -34px rgba(14, 42, 28, .42);
}

.pst-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.pst-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.25s var(--ease);
}
.pst-card:hover .pst-media img { transform: scale(1.07); }
.pst-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 20, 12, .5), transparent 52%);
}
.pst-chip {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(191, 157, 87, .94);
  color: var(--forest);
  font-size: .615rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pst-body { display: flex; flex-direction: column; flex: 1; gap: 11px; padding: 20px 20px 18px; }
.pst-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.pst-meta span::before { content: "·"; margin-right: 9px; color: var(--brass); }
.pst-meta > :first-child::before { content: none; margin: 0; }

.pst-body h3 { font-size: 1.14rem; line-height: 1.3; letter-spacing: -.012em; }
.pst-body > p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }

.pst-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pst-cta {
  font-size: .695rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
}
.pst-arrow {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--forest);
  font-size: .7rem;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.pst-card:hover .pst-arrow {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--brass-400);
  transform: translateX(3px);
}
.pst-overlay { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.pst-overlay:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }

/* ------------------------------------------------------------ testimonial */
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }

.tst-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px -36px rgba(14, 42, 28, .4);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.tst-card:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 157, 87, .55);
  box-shadow: 0 30px 62px -34px rgba(14, 42, 28, .45);
}

.tst-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.tst-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--brass);
  font-size: .85rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.tst-card:hover .tst-mark { background: var(--forest); color: var(--brass-400); }
.tst-stars { color: var(--brass); font-size: .8rem; letter-spacing: 3px; }

.tst-quote {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  line-height: 1.56;
  color: var(--forest);
}

.tst-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tst-avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--forest);
  color: var(--brass-400);
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.tst-who { min-width: 0; }
.tst-who b { display: block; font-size: .95rem; font-weight: 600; color: var(--forest); }
.tst-who span { display: block; font-size: .82rem; color: var(--muted); margin-top: 1px; }
.tst-where {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.tst-where::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------- cta */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--forest); }
.cta-band > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 8% 20%, rgba(5, 20, 12, .9), transparent 72%),
    linear-gradient(100deg, rgba(6, 22, 14, .92), rgba(8, 28, 18, .66));
}
.cta-rule {
  position: absolute; left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(191, 157, 87, .55), transparent);
}
.cta-rule.is-top { top: 0; }
.cta-rule.is-bottom { bottom: 0; }

.cta-band .container { position: relative; z-index: 2; }
.cta-inner { padding: clamp(52px, 6.4vw, 92px) 0; }

.cta-lead { max-width: 760px; }
.cta-lead h2 {
  color: var(--cream);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -.034em;
}
.cta-lead h2::after {
  content: "";
  display: block;
  width: 58px; height: 2px;
  margin-top: clamp(18px, 2vw, 24px);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, .18));
}
.cta-lead p {
  margin: clamp(18px, 2vw, 24px) 0 0;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.7;
  color: rgba(250, 247, 240, .82);
  max-width: 52ch;
}

.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 38px); }

/* glass contact rail along the foot of the band */
.cta-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(34px, 4vw, 52px);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(7, 24, 15, .46);
  border: 1px solid rgba(250, 247, 240, .15);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(250, 247, 240, .1);
}
.cta-rail > * {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-right: 1px solid rgba(250, 247, 240, .12);
  transition: background .35s var(--ease);
}
.cta-rail > :last-child { border-right: 0; }
.cta-rail a:hover { background: rgba(250, 247, 240, .05); }
.cta-rail-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  border: 1px solid rgba(191, 157, 87, .34);
  background: rgba(191, 157, 87, .14);
  color: var(--brass-400);
  font-size: .92rem;
}
.cta-rail small {
  display: block;
  font-size: .625rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(250, 247, 240, .55);
}
.cta-rail b {
  display: block;
  margin-top: 4px;
  font-family: var(--display);
  font-size: .96rem; font-weight: 600;
  color: var(--cream);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- footer */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Layered gradient: a warm brass sheen over a deepening forest wash. */
  background:
    linear-gradient(152deg, rgba(191, 157, 87, .14) 0%, rgba(191, 157, 87, .03) 34%, transparent 58%),
    linear-gradient(180deg, #14351F 0%, #102C1D 26%, #0C2317 58%, #081B11 100%);
  color: rgba(250, 247, 240, .7);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 157, 87, .55), transparent);
}
.footer-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 500px at 84% -6%,  rgba(224, 192, 136, .22), transparent 68%),
    radial-gradient(700px 460px at 2% 104%,  rgba(191, 157, 87, .12), transparent 72%),
    radial-gradient(1100px 380px at 50% 0%,  rgba(250, 247, 240, .06), transparent 74%);
}
/* A soft brass beam across the upper edge. */
.footer-glow::before {
  content: "";
  position: absolute;
  top: -12%; left: -10%; right: -10%;
  height: 58%;
  transform: rotate(-7deg);
  background: linear-gradient(90deg, transparent, rgba(224, 192, 136, .1) 45%, transparent 78%);
  filter: blur(42px);
}
.footer-glow::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(250, 247, 240, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 247, 240, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 34%, #000, transparent 78%);
          mask-image: radial-gradient(70% 62% at 50% 34%, #000, transparent 78%);
}

.footer-top { padding: clamp(56px, 6.4vw, 90px) 0 clamp(38px, 4vw, 54px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(30px, 4vw, 58px);
}

/* ---- brand block ---- */
.footer-brand .logo-mark { height: 56px; }
.footer-brand .logo-word { height: 56px; }
.footer-brand > p {
  margin-top: 22px;
  font-size: .92rem;
  line-height: 1.7;
  max-width: 38ch;
  color: rgba(250, 247, 240, .7);
}

.footer-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.footer-cred {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(250, 247, 240, .16);
  border-radius: 999px;
  font-size: .645rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .58);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.footer-cred:hover { border-color: rgba(191, 157, 87, .5); color: rgba(250, 247, 240, .82); }
.footer-cred b { color: var(--brass-400); font-weight: 700; letter-spacing: .08em; }

/* ---- link columns ---- */
.footer-col h3 {
  font-family: var(--sans);
  font-size: .645rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(250, 247, 240, .12);
}
.footer-col li { margin-bottom: 11px; font-size: .9rem; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(250, 247, 240, .72);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer-col a::before {
  content: "";
  width: 0; height: 1px;
  background: var(--brass);
  transition: width .3s var(--ease);
}
.footer-col a:hover { color: var(--cream); }
.footer-col a:hover::before { width: 12px; }

/* ---- contact column ---- */
.footer-contact li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size: .9rem;
  line-height: 1.6;
}
.footer-contact .ic {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid rgba(191, 157, 87, .3);
  background: rgba(191, 157, 87, .12);
  color: var(--brass-400);
  font-size: .76rem;
}
.footer-contact small {
  display: block;
  font-size: .615rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .48);
  margin-bottom: 3px;
}
.footer-contact a:hover { color: var(--brass-400); }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 247, 240, .16);
  border-radius: 50%;
  color: rgba(250, 247, 240, .72);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.socials a:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--forest);
  transform: translateY(-3px);
}

/* ---- bottom bar ---- */
.footer-bottom {
  border-top: 1px solid rgba(250, 247, 240, .12);
  padding: 22px 0;
  font-size: .82rem;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.footer-bottom span { color: rgba(250, 247, 240, .58); }
.footer-bottom a:hover { color: var(--brass-400); }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .645rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .6);
  transition: color .3s var(--ease);
}
.to-top i {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 240, .2);
  font-size: .7rem;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.to-top:hover { color: var(--cream); }
.to-top:hover i {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--forest);
  transform: translateY(-3px);
}

/* --------------------------------------------------- live activity widget */
.proof {
  position: fixed;
  left: 22px; bottom: 22px;
  z-index: 68;
  display: grid;
  gap: 10px;
  justify-items: start;
  width: min(340px, calc(100vw - 44px));
  pointer-events: none;
}
.proof > * { pointer-events: auto; }

.proof-online {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(250, 247, 240, .94);
  border: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 16px 38px -22px rgba(14, 42, 28, .5);
  font-size: .765rem;
  font-weight: 600;
  color: var(--forest);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.proof-online.is-in { opacity: 1; transform: none; }
.proof-dot {
  position: relative;
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #34B36B;
}
.proof-dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 179, 107, .55);
  animation: proofPing 2.4s var(--ease) infinite;
}
@keyframes proofPing {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.proof-pop {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(250, 247, 240, .96);
  border: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 22px 52px -26px rgba(14, 42, 28, .55);
  opacity: 0;
  transform: translateX(-16px) scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.proof-pop.is-in { opacity: 1; transform: none; }

.proof-avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--brass-400);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.proof-body { min-width: 0; }
.proof-body b {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proof-body span {
  display: block;
  font-size: .715rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proof-body em { font-style: normal; font-weight: 600; color: var(--brass); }

.proof-close {
  position: relative;
  z-index: 2;
  align-self: start;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: .62rem;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.proof-close:hover { background: var(--sand); color: var(--forest); }
.proof-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

@media (max-width: 620px) {
  .proof { left: 12px; bottom: 84px; width: calc(100vw - 88px); }
  .proof-pop { padding: 11px 12px; gap: 11px; }
  .proof-avatar { width: 36px; height: 36px; }
}
@media print { .proof { display: none; } }

/* WhatsApp float */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  font-size: 1.55rem;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 211, 102, .5);
  animation: waPing 2.6s var(--ease) infinite;
}
@keyframes waPing {
  0%   { transform: scale(.82); opacity: .85; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.wa-float:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 14px 38px -8px rgba(37, 211, 102, .7);
}
@media (max-width: 620px) {
  .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 1.42rem; }
}

/* --------------------------------------------------------------- reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------- blog / misc */
.post-card .card-body h3 { font-size: 1.16rem; line-height: 1.32; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.post-meta .cat { color: var(--brass); font-weight: 600; }

.empty-state {
  text-align: center;
  padding: clamp(50px, 7vw, 90px) 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty-state i { font-size: 2rem; color: var(--sand-dark); margin-bottom: 16px; }

.map-embed {
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(.28) contrast(1.04);
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--forest);
}
.faq-q i { color: var(--brass); font-size: .85rem; transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.is-open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a > div { padding-bottom: 24px; font-size: .96rem; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .cta-rail { grid-template-columns: 1fr; }
  .cta-rail > * { border-right: 0; border-bottom: 1px solid rgba(250, 247, 240, .12); }
  .cta-rail > :last-child { border-bottom: 0; }

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

  .qly-grid { grid-template-columns: 1fr; }
  .qly-media { max-width: 560px; }
  .qly-strip { grid-template-columns: 1fr; }
  .qly-strip-label { max-width: none; }

  .dvs-head { grid-template-columns: 1fr; align-items: start; }

  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step:nth-child(2)::after { display: none; }
}

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

  .qly-caps { grid-template-columns: 1fr; }
  .qly-cap { grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; }
  .qly-cap-ic { grid-row: span 2; }
  .qly-coa { position: static; width: auto; margin-top: 14px; }
  .qly-media .frame { display: none; }

  .flow { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }
}

@media (max-width: 1100px) {
  .dvs-products { grid-template-columns: repeat(3, 1fr); }
}

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

@media (max-width: 1100px) {
  .dvn-grid { grid-template-columns: 1fr; }
  .dvn-grid > :nth-child(2) { margin-top: 0; }

  .wwa-grid { grid-template-columns: 1fr; }
  .wwa-media { max-width: 560px; width: 100%; margin: 0 auto; }
  .wwa-stats { grid-template-columns: repeat(2, 1fr); }
  .wwa-stat:nth-child(3)::before { display: none; }
  .wwa-stat:nth-child(n+3) { border-top: 1px solid rgba(250, 247, 240, .1); }

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

/* Short laptop viewports: scale the hero down so the credential card still lands
   above the fold rather than being cropped in half. */
@media (min-width: 1021px) and (max-height: 900px) {
  .hero-title { font-size: clamp(2.3rem, 4.1vw, 3.6rem); }
  .hero-lede  { font-size: 1rem; line-height: 1.62; }
  .hero-inner { padding-top: calc(var(--header-h) + 16px); padding-bottom: 20px; }
  .hero-kicker { margin-bottom: 14px; }
  .hero-actions { margin-top: 24px; }
  .hero-cred { padding: 11px 16px; }
  .hero-cred-ic { width: 38px; height: 38px; }
}

@media (min-width: 1021px) and (max-height: 760px) {
  .hero-title { font-size: clamp(2.1rem, 3.5vw, 3rem); }
}

@media (max-width: 1020px) {
  .hero-foot-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-cred:nth-of-type(2) { border-right: 0; }
  .hero-cred:nth-of-type(1), .hero-cred:nth-of-type(2) { border-bottom: 1px solid rgba(250, 247, 240, .1); }
  .hero-scroll { grid-column: 1 / -1; margin: 6px auto 10px; }

  .hero-inner { align-items: end; }
}

@media (max-width: 1080px) {
  .nav > li > a { padding: 9px 12px; font-size: .845rem; }
  .logo-mark { height: 42px; }
  .logo-word { height: 42px; }
}

@media (max-width: 1240px) {
  .topbar-hide-md { display: none !important; }
}

@media (max-width: 980px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-blocks.is-wide { grid-template-columns: repeat(2, 1fr); }
  .sticky-card { position: static; }

  :root { --topbar-h: 38px; --cap-h: 64px; --cap-h-sm: 58px; --cap-gap: 12px; }

  .topbar { font-size: .7rem; }
  .topbar-creds { display: none; }
  .topbar-inner { justify-content: center; }
  /* The bar clips what will not fit, and the address is the one item here
     that is not also in the header or the footer. */
  .topbar-hide-sm { display: none; }
  .topbar-social a { width: 24px; height: 24px; }
  .header-inner { gap: 12px; }
  .header-cta .btn-header { display: none; }
  .header-inner { padding: 0 8px 0 12px; border-radius: 22px; }
  .nav-toggle { display: grid; position: relative; z-index: 85; }
  .nav-ind { display: none; }
  .hdr-progress { left: 20px; right: 20px; }

  /* Off-canvas panel: always cream, so links revert to ink whatever the header state. */
  .nav {
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 88vw);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 92px 18px 40px;
    overflow-y: auto;
    background: var(--cream);
    border: 0;
    border-radius: 0;
    transform: translateX(105%);
    transition: transform .45s var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 80;
  }
  .nav.is-open { transform: none; }
  .is-over:not(.is-scrolled) .nav { background: var(--cream); border-color: transparent; }
  /* The panel is cream whatever the header is doing behind it, so the active
     link cannot keep the light colour it wears over a dark hero. */
  .nav > li > a.is-active,
  .is-over:not(.is-scrolled) .nav > li > a.is-active {
    color: var(--forest);
    background: var(--sand);
  }
  .nav > li > a,
  .is-over:not(.is-scrolled) .nav > li > a {
    width: 100%;
    justify-content: space-between;
    padding: 14px 14px;
    font-size: 1rem;
    border-radius: 12px;
    color: var(--forest);
    /* The over-hero styling lights the links cream and gives them a dark
       halo so they stay legible on the photograph. Inside the cream drawer
       that halo reads as a blur, and the cream text all but disappears. */
    text-shadow: none;
  }
  .nav > li > a:hover,
  .nav > li > a.is-lit,
  .is-over:not(.is-scrolled) .nav > li > a:hover,
  .is-over:not(.is-scrolled) .nav > li > a.is-lit {
    color: var(--forest);
    background: var(--sand);
  }

  .mega {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    padding: 4px 0 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav > li.is-expanded > .mega { display: grid; }
  /* The desktop panel is absolutely positioned and centred with a -50%
     translate. In the drawer it is static and full width, so that same
     translate — which :hover/:focus-within still apply on tap — would
     drag it half its width off the left edge. */
  .nav > li:hover > .mega,
  .nav > li:focus-within > .mega,
  .nav > li.is-expanded > .mega { transform: none; }
  .mega-side { display: none; }

  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 32, 21, .55);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
    z-index: 75;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .product-layout { grid-template-columns: 1fr; }
  .sticky-card { position: static; }
  .split { grid-template-columns: 1fr; }
  .split.is-reverse .split-media { order: 0; }
  .split-media .frame { display: none; }
  .badge-float { right: 16px; bottom: 16px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* Three cards in an 880px window leaves each one about 250px, which is
   narrower than the name plate can carry. Two is the honest step, and the
   760px block below still takes them to one. */
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 760px) {
  .cat-toolbar { flex-direction: column; align-items: stretch; }
  .search-field { flex: 0 0 auto; max-width: none; min-width: 0; }

  .dvn, .dvn-body { min-height: 470px; }
  .dvn-panel { padding: 18px; }
  .dvn-title { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dvn-num { font-size: 3.2rem; top: 18px; left: 22px; }
  .dvn-thumbs i { width: 40px; height: 40px; }
  .dvn-bespoke { padding: 18px; }

  .wwa-quote { padding: 62px 18px 18px; }
  .wwa-quote-ic { top: 18px; left: 18px; }
  .wwa-pillars li { padding: 14px; gap: 13px; }
  .wwa-source ul { gap: 9px 16px; }
  .wwa-seal { width: 104px; height: 104px; right: 5%; top: 9%; }
  .wwa-seal-text text { font-size: 15px; }
  .wwa-seal-mark { font-size: 1.15rem; }
  .wwa-years { padding: 12px 15px; gap: 11px; }
  .wwa-years strong { font-size: 2rem; }
  .wwa-years small { font-size: .72rem; padding-left: 11px; }
  .wwa-sub { border-width: 6px; }
  .wwa-stats { grid-template-columns: 1fr; }
  .wwa-stat + .wwa-stat::before { display: none; }
  .wwa-stat + .wwa-stat { border-top: 1px solid rgba(250, 247, 240, .1); }
  .wwa-actions { gap: 16px; }

  body { font-size: 16px; }
  :root { --gutter: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-inner { padding-bottom: 34px; }
  .hero-copy { max-width: none; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-foot-card { grid-template-columns: 1fr; padding: 4px; }
  .hero-cred { padding: 13px 14px; border-right: 0; border-bottom: 1px solid rgba(250, 247, 240, .1); }
  .hero-cred:nth-of-type(4) { border-bottom: 0; }
  .hero-scroll { display: none; }
  .cat-card, .cat-card-body { min-height: 340px; }
  .search-field { min-width: 0; }
}

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

@media print {
  .site-header, .site-footer, .wa-float, .cta-band { display: none; }
  body { background: #fff; }
}

/* ===================================================== global reach: markets */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mkt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.mkt-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.mkt-card:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 30px 62px -40px rgba(14, 42, 28, .5);
}
.mkt-card:hover::before { transform: scaleX(1); }
.mkt-no {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(14, 42, 28, .06);
  pointer-events: none;
}
.mkt-ic {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: 1.05rem;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.mkt-card:hover .mkt-ic { background: var(--forest); transform: translateY(-2px); }
.mkt-card h3 { font-size: 1.16rem; letter-spacing: -.015em; }
.mkt-text { font-size: .9rem; line-height: 1.68; margin: 0; }
.mkt-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%;
  margin: auto 0 0;                 /* pinned to the card foot, so rows line up */
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mkt-tags li {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sand);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--forest);
}

/* ====================================================== global reach: ports */
.prt-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}
.prt-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.prt-media { position: relative; margin-top: 30px; }
.prt-media img {
  width: 100%; display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 32px 70px -44px rgba(14, 42, 28, .55);
}
.prt-media .frame {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--brass);
  border-radius: 22px;
  opacity: .6;
  z-index: -1;
}
.prt-list { display: grid; gap: 14px; }
.prt-card {
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.prt-card:hover {
  transform: translateX(5px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 26px 54px -38px rgba(14, 42, 28, .48);
}
.prt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.prt-anchor {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--sand);
  color: var(--forest);
  font-size: .88rem;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.prt-card:hover .prt-anchor { background: var(--emerald); color: var(--brass-400); }
.prt-head h3 { font-size: 1.05rem; letter-spacing: -.012em; }
.prt-state {
  display: block; margin-top: 2px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.prt-code {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(191, 157, 87, .42);
  font-family: var(--display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--brass);
}
.prt-card p { margin: 0; font-size: .9rem; line-height: 1.68; }

/* ================================================== global reach: logistics */
.lgx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lgx-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.lgx-card:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 30px 62px -40px rgba(14, 42, 28, .5);
}
.lgx-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--sand);
  color: var(--forest);
  font-size: 1rem;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.lgx-card:hover .lgx-ic { background: var(--emerald); color: var(--brass-400); }
.lgx-card h3 { font-size: 1.1rem; letter-spacing: -.015em; }
.lgx-card p { margin: 0; font-size: .9rem; line-height: 1.7; }

@media (max-width: 1080px) {
  .mkt-grid, .lgx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .prt-layout { grid-template-columns: 1fr; }
  .prt-intro { position: static; }
}
@media (max-width: 640px) {
  .mkt-grid, .lgx-grid { grid-template-columns: 1fr; }
  .prt-head { flex-wrap: wrap; }
  .prt-code { margin-left: 0; }
}

/* ========================================================= blog: lead post */
.lead-post {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 30px 66px -46px rgba(14, 42, 28, .5);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.lead-post:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 40px 84px -48px rgba(14, 42, 28, .55);
}
.lead-media { position: relative; overflow: hidden; min-height: 320px; }
.lead-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lead-post:hover .lead-media img { transform: scale(1.05); }
.lead-flag {
  position: absolute;
  top: 18px; left: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.lead-body {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(28px, 3.4vw, 48px);
}
.lead-cat {
  justify-self: start;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(191, 157, 87, .42);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.lead-body h2 {
  font-size: clamp(1.4rem, 2.1vw, 1.92rem);
  line-height: 1.22;
  letter-spacing: -.022em;
  color: var(--forest);
}
.lead-body > p { margin: 0; font-size: .96rem; line-height: 1.72; }
.lead-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
}
.lead-meta span { display: inline-flex; align-items: center; gap: 7px; }
.lead-meta i { color: var(--brass); font-size: .72rem; }
.lead-overlay { position: absolute; inset: 0; z-index: 3; }

@media (max-width: 860px) {
  .lead-post { grid-template-columns: 1fr; }
  .lead-media { min-height: 240px; }
}

/* =========================================================== article: layout */
.art-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 68px);
  align-items: start;
}
.art-side-inner {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 22px;
}
.art-author {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.art-author-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .92rem;
}
.art-author small {
  display: block;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.art-author b {
  display: block; margin-top: 3px;
  font-family: var(--display);
  font-size: .95rem; font-weight: 600;
  color: var(--forest);
}
.art-facts { display: grid; gap: 12px; margin: 0; }
.art-facts > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.art-facts dt {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.art-facts dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--forest); text-align: right; }

.art-share { padding-top: 20px; border-top: 1px solid var(--line); }
.art-share-label {
  display: block; margin-bottom: 12px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.art-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.art-share-row a, .art-copy {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 13px;
  background: var(--sand);
  border: 1px solid transparent;
  color: var(--forest);
  font-size: .88rem;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.art-share-row a:hover, .art-copy:hover {
  background: var(--emerald);
  color: var(--brass-400);
  transform: translateY(-2px);
}
.art-copy.is-copied { background: var(--emerald); color: var(--brass-400); }

.art-ask {
  padding: 22px;
  border-radius: 20px;
  background: var(--sand);
  border: 1px solid var(--line);
}
.art-ask h3, .art-ask .art-ask-h { font-size: 1rem; line-height: 1.35; letter-spacing: -.012em; }
.art-ask p { margin: 10px 0 16px; font-size: .84rem; line-height: 1.6; }

/* ============================================================= article: body */
.art-lede {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.58;
  color: var(--forest);
  padding: 0 0 28px 22px;
  border-left: 2px solid var(--brass);
  margin: 0 0 34px;
}
.prose.is-article { max-width: 68ch; }
.prose.is-article > p:first-of-type::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: .82;
  font-weight: 600;
  color: var(--brass);
}
.prose.is-article h2, .prose.is-article h3 {
  position: relative;
  margin: 40px 0 14px;
  padding-top: 18px;
  font-size: 1.28rem;
  letter-spacing: -.018em;
}
.prose.is-article h2::before, .prose.is-article h3::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 38px; height: 2px;
  border-radius: 2px;
  background: var(--brass);
}
.prose.is-article blockquote {
  margin: 30px 0;
  padding: 24px 26px;
  border-radius: 18px;
  background: var(--sand);
  border-left: 3px solid var(--brass);
  font-family: var(--display);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--forest);
}
.prose.is-article blockquote p:last-child { margin-bottom: 0; }

.art-foot {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 20px;
  margin-top: 46px; padding-top: 28px;
  border-top: 1px solid var(--line);
}

.art-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
/* First and last article have only one neighbour — that card takes the full row. */
.art-nav.is-single { grid-template-columns: 1fr; }
.art-nav-link {
  display: grid; gap: 8px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.art-nav-link:hover {
  transform: translateY(-3px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 22px 46px -34px rgba(14, 42, 28, .45);
}
.art-nav-link span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.art-nav-link b {
  font-family: var(--display);
  font-size: .95rem; font-weight: 600;
  line-height: 1.4;
  color: var(--forest);
}
.art-nav-link.is-next { text-align: right; justify-items: end; }

@media (max-width: 1000px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-side-inner { position: static; grid-template-columns: repeat(2, 1fr); align-items: start; }
  .art-ask { grid-column: 1 / -1; }
  .prose.is-article { max-width: none; }
}
@media (max-width: 620px) {
  .art-side-inner { grid-template-columns: 1fr; }
  .art-nav { grid-template-columns: 1fr; }
  .art-nav-link.is-next { text-align: left; justify-items: start; }
}

/* ============================================================ contact page */
.ctc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Four routes to the desk. Stacked rather than side by side, so the longest
   value — the email — gets the full width of the card instead of breaking
   after the @, and all four keep the same rhythm whatever their length. */
.ctc-qcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(170deg, var(--white), var(--cream));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
/* A brass wash from the corner the arrow sits in. */
.ctc-qcard::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(191, 157, 87, .18), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.ctc-qcard::after {
  content: "";
  position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
a.ctc-qcard:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 30px 60px -38px rgba(14, 42, 28, .5);
}
a.ctc-qcard:hover::before,
a.ctc-qcard:hover::after { opacity: 1; transform: scaleX(1); }

.ctc-qic {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, #143522, var(--forest) 60%, #0B2417);
  color: var(--brass-400);
  font-size: 1.05rem;
  box-shadow: 0 14px 30px -18px rgba(14, 42, 28, .85);
  transition: background .45s var(--ease), color .45s var(--ease),
              transform .45s var(--ease);
}
a.ctc-qcard:hover .ctc-qic {
  background: linear-gradient(140deg, var(--brass-400), var(--brass));
  color: var(--forest);
  transform: rotate(-4deg) scale(1.05);
}

.ctc-qtxt { position: relative; z-index: 1; min-width: 0; }
.ctc-qtxt small {
  display: block;
  font-size: .615rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.ctc-qtxt b {
  display: block; margin-top: 7px;
  font-family: var(--display);
  font-size: 1rem; font-weight: 600;
  line-height: 1.4;
  color: var(--forest);
  overflow-wrap: break-word;
}

.ctc-qgo {
  position: absolute; top: 24px; right: 24px;
  z-index: 1;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--brass);
  font-size: .62rem;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              border-color .45s var(--ease), background .45s var(--ease);
}
a.ctc-qcard:hover .ctc-qgo {
  opacity: 1;
  transform: none;
  background: var(--forest);
  border-color: var(--forest);
  color: var(--brass-400);
}

.ctc-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: start;
}
.ctc-aside-inner {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 16px;
}

/* ---- the desk card: photograph over the introduction ---- */
.ctc-desk {
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 30px 66px -44px rgba(14, 42, 28, .48);
}
.ctc-desk img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ctc-desk-body { padding: clamp(22px, 2.4vw, 28px); }
.ctc-desk-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(191, 157, 87, .42);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass);
}
.ctc-desk-body h2 {
  margin-top: 14px;
  font-size: clamp(1.32rem, 1.9vw, 1.62rem);
  line-height: 1.18;
  letter-spacing: -.022em;
}
.ctc-desk-body p { margin: 12px 0 0; font-size: .91rem; line-height: 1.66; }

/* ---- contact rows ---- */
.ctc-rows {
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 6px clamp(20px, 2.2vw, 26px);
}
.ctc-row {
  display: flex; gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.ctc-row:last-child { border-bottom: 0; }
.ctc-row-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--sand);
  color: var(--forest);
  font-size: .86rem;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.ctc-row:hover .ctc-row-ic { background: var(--emerald); color: var(--brass-400); }
.ctc-row small {
  display: block;
  font-size: .615rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.ctc-row p { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--forest); }

/* ---- statutory plate: the credentials read as a record, not a table ---- */
.ctc-statutory {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: 24px;
  background: linear-gradient(140deg, #143522, var(--forest) 58%, #17402a);
  box-shadow: 0 34px 72px -46px rgba(14, 42, 28, .7);
}
.ctc-statutory::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px 220px at 100% 0%, rgba(191, 157, 87, .24), transparent 70%);
}
.ctc-statutory-head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(224, 192, 136, .26);
}
.ctc-statutory-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(214, 184, 124, .16);
  color: var(--brass-400);
  font-size: .9rem;
}
.ctc-statutory-head small {
  display: block;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass-400);
}
.ctc-statutory-head b {
  display: block; margin-top: 3px;
  font-family: var(--display);
  font-size: 1rem; font-weight: 600;
  color: var(--cream);
}
.ctc-statutory dl { display: grid; gap: 13px; margin: 0; }
.ctc-statutory dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline;
}
.ctc-statutory dt {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250, 247, 240, .56);
}
.ctc-statutory dd {
  margin: 0; text-align: right;
  font-family: var(--display);
  font-size: .86rem; font-weight: 600;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.ctc-form-card {
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 44px);
  box-shadow: 0 34px 74px -46px rgba(14, 42, 28, .5);
}
.ctc-form-card h2::after {
  content: "";
  display: block;
  width: 52px; height: 2px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, .18));
}

.ctc-map { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.ctc-map .map-embed { display: block; width: 100%; border: 0; }
.ctc-map-card {
  position: absolute;
  top: 24px; left: 24px;
  max-width: 290px;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 26px 56px -36px rgba(14, 42, 28, .5);
}
.ctc-map-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .86rem;
}
.ctc-map-card b {
  display: block;
  font-family: var(--display);
  font-size: 1rem; font-weight: 600;
  color: var(--forest);
}
.ctc-map-card p { margin: 8px 0 14px; font-size: .86rem; line-height: 1.6; }

@media (max-width: 1080px) { .ctc-quick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .ctc-grid { grid-template-columns: 1fr; }
  .ctc-aside-inner { position: static; }
}
@media (max-width: 620px) {
  .ctc-quick { grid-template-columns: 1fr; }
  .ctc-map-card { position: static; max-width: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); }
}

/* ============================================================ quality page */
.qc-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qc-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
  padding: clamp(26px, 2.6vw, 34px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.qc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 30px 62px -40px rgba(14, 42, 28, .5);
}
.qc-card-no {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--display);
  font-size: 2.4rem; font-weight: 600; line-height: 1;
  color: rgba(14, 42, 28, .06);
}
.qc-card-ic {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: 1.05rem;
  transition: background .5s var(--ease);
}
.qc-card:hover .qc-card-ic { background: var(--forest); }
.qc-card h3 { font-size: 1.1rem; line-height: 1.32; letter-spacing: -.015em; }
.qc-card p { margin: 0; font-size: .9rem; line-height: 1.68; }

/* ---- the six-stage chain ---- */
.qc-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qc-step {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.qc-step:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 30px 62px -40px rgba(14, 42, 28, .5);
}
.qc-step-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 14px; }
.qc-step-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 15px;
  background: var(--sand);
  color: var(--forest);
  font-size: 1rem;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.qc-step:hover .qc-step-ic { background: var(--emerald); color: var(--brass-400); }
.qc-step-no {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
  color: rgba(14, 42, 28, .14);
}
.qc-step h3 { font-size: 1.06rem; letter-spacing: -.015em; }
.qc-step p { margin: 0; font-size: .89rem; line-height: 1.66; }

/* ---- testing scope panels ---- */
.qc-tests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.qc-test {
  padding: clamp(28px, 3vw, 40px);
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
}
.qc-test.is-dark {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: linear-gradient(140deg, #143522, var(--forest) 58%, #17402a);
  box-shadow: 0 36px 76px -46px rgba(14, 42, 28, .7);
}
.qc-test.is-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(520px 260px at 100% 0%, rgba(191, 157, 87, .22), transparent 70%);
}
.qc-test-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(191, 157, 87, .42);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass);
}
.qc-test.is-dark .qc-test-tag { border-color: rgba(214, 184, 124, .5); color: var(--brass-400); }
.qc-test h3 { margin-top: 16px; font-size: 1.32rem; letter-spacing: -.02em; }
.qc-test.is-dark h3 { color: var(--cream); }
.qc-test > p { margin: 10px 0 0; font-size: .9rem; line-height: 1.6; }
.qc-test.is-dark > p { color: rgba(250, 247, 240, .74); }
.qc-test ul {
  display: grid; gap: 13px;
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.qc-test.is-dark ul { border-top-color: rgba(250, 247, 240, .16); }
.qc-test li { display: flex; gap: 12px; align-items: flex-start; font-size: .91rem; line-height: 1.55; }
.qc-test.is-dark li { color: rgba(250, 247, 240, .84); }
.qc-test li i { color: var(--brass); font-size: .74rem; margin-top: 5px; flex-shrink: 0; }
.qc-test.is-dark li i { color: var(--brass-400); }

/* ---- documentation ---- */
.qc-docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qc-doc {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 11px;
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.qc-doc:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 26px 54px -38px rgba(14, 42, 28, .45);
}
.qc-doc-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--forest);
  font-size: .95rem;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.qc-doc:hover .qc-doc-ic { background: var(--emerald); color: var(--brass-400); }
.qc-doc h3 { font-size: .98rem; line-height: 1.3; letter-spacing: -.012em; }
.qc-doc p { margin: 0; font-size: .85rem; line-height: 1.6; }

/* ---- FAQ as cards ---- */
.faq-item.is-card {
  margin-bottom: 12px;
  padding: 0 clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.faq-item.is-card:hover { border-color: rgba(191, 157, 87, .45); }
.faq-item.is-card.is-open {
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 24px 52px -38px rgba(14, 42, 28, .42);
}
.faq-item.is-card .faq-q { padding: 20px 0; font-size: 1.02rem; }

@media (max-width: 1100px) { .qc-docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px)  { .qc-three, .qc-chain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px)  { .qc-tests { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .qc-three, .qc-chain, .qc-docs { grid-template-columns: 1fr; } }

/* ================================================================= splash */
/*  Shown once per session while the first page loads. It hides itself on
    window load, and a CSS failsafe clears it even if that never fires. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(760px 420px at 50% 34%, rgba(191, 157, 87, .16), transparent 68%),
    linear-gradient(160deg, #143522, var(--forest) 56%, #081B11);
  animation: splashFailsafe 0s linear 5s forwards;
}
.splash-inner { display: grid; justify-items: center; gap: 30px; padding: 24px; }
.splash-inner img {
  display: block;
  width: clamp(190px, 30vw, 290px);
  height: auto;
  animation: splashLogo .9s var(--ease) both;
}
.splash-bar {
  position: relative;
  display: block;
  width: clamp(150px, 22vw, 210px);
  height: 2px;
  border-radius: 2px;
  background: rgba(224, 192, 136, .2);
  overflow: hidden;
}
.splash-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--brass-400), transparent);
  animation: splashBar 1.15s var(--ease) infinite;
}

@keyframes splashLogo {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes splashBar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; } }

.splash.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility 0s linear .55s;
}
/* Already seen this session, or the visitor asked for less motion. */
.splash-seen .splash { display: none; }
@media (prefers-reduced-motion: reduce) {
  .splash-inner img, .splash-bar i { animation: none; }
  .splash { animation-delay: .4s; }
}


/* ================================================== order consignment card */
/*  A dark panel on the light band: From → To with the vessel riding a line
    that fills as the section scrolls, and four stages that light up in turn. */
.ordc {
  position: relative;
  isolation: isolate;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 28px;
  background: linear-gradient(158deg, #143522, var(--forest) 55%, #081B11);
  box-shadow: 0 46px 96px -48px rgba(14, 42, 28, .78);
  color: rgba(250, 247, 240, .78);
}
.ordc::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(760px 380px at 92% 0%, rgba(191, 157, 87, .2), transparent 68%);
}

/* ---- head ---- */
.ordc-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(250, 247, 240, .13);
}
.ordc-ic {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--brass);
  color: var(--forest);
  font-size: 1.12rem;
  box-shadow: 0 12px 26px -12px rgba(191, 157, 87, .8);
}
.ordc-head-t { min-width: 0; }
.ordc-head-t strong {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 600;
  color: var(--cream);
  letter-spacing: -.015em;
}
.ordc-head-t small { display: block; margin-top: 4px; font-size: .84rem; color: rgba(250, 247, 240, .6); }
.ordc-play {
  margin-left: auto;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(250, 247, 240, .08);
  border: 1px solid rgba(214, 184, 124, .34);
  color: var(--brass-400);
  font-size: .76rem;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.ordc-play:hover { background: var(--brass); color: var(--forest); }

/* ---- the route ---- */
.ordc-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(26px, 3vw, 38px) 0;
}
.ordc-pt small {
  display: block;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(250, 247, 240, .5);
}
.ordc-pt strong {
  display: flex; align-items: center; gap: 9px;
  margin-top: 6px;
  font-family: var(--display);
  font-size: .96rem; font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}
.ordc-pt i { color: var(--brass-400); font-size: .84rem; }
.ordc-pt.is-right { text-align: right; }
.ordc-pt.is-right strong { justify-content: flex-end; }

.ordc-line {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
              rgba(250, 247, 240, .3) 0 7px, transparent 7px 14px);
}
.ordc-fill {
  position: absolute; left: 0; top: 0;
  height: 2px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-400));
  transition: width 1s var(--ease);
}
.ordc-stop {
  position: absolute; top: 50%;
  padding: 0;
  cursor: pointer;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #0E2A1C;
  border: 2px solid rgba(250, 247, 240, .34);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ordc-stop.is-done { background: var(--brass-400); border-color: var(--brass-400); }
.ordc-stop.is-now  { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 0 6px rgba(191, 157, 87, .22); }
.ordc-ship {
  position: absolute; top: 50%; left: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--forest);
  font-size: .76rem;
  box-shadow: 0 10px 22px -8px rgba(191, 157, 87, .9);
  transition: left 1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .ordc-fill, .ordc-ship { transition: none; }
}

/* ---- the stage that is playing ---- */
.ordc-stagebox {
  position: relative;
  min-height: 210px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: rgba(250, 247, 240, .05);
  border: 1px solid rgba(250, 247, 240, .1);
}
.ordc-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: center;
  animation: ordcIn .55s var(--ease) both;
}
.ordc-stage[hidden] { display: none; }
@keyframes ordcIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.ordc-stage-ic {
  display: grid; place-items: center;
  width: clamp(72px, 7vw, 96px);
  height: clamp(72px, 7vw, 96px);
  border-radius: 26px;
  background: linear-gradient(140deg, var(--brass-400), var(--brass));
  color: var(--forest);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  box-shadow: 0 18px 40px -16px rgba(191, 157, 87, .8);
}
/* Each stage moves in its own small way. */
.ordc-stage-ic.is-write i { animation: ordcWrite 2.4s var(--ease) infinite; }
.ordc-stage-ic.is-tilt  i { animation: ordcTilt  2.8s var(--ease) infinite; }
.ordc-stage-ic.is-spin  i { animation: ordcSpin  6s linear infinite; }
.ordc-stage-ic.is-bob   i { animation: ordcBob   2.6s var(--ease) infinite; }
@keyframes ordcWrite { 0%,70%,100% { transform: none; } 80% { transform: translate(2px, -2px) rotate(-8deg); } }
@keyframes ordcTilt  { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes ordcSpin  { to { transform: rotate(360deg); } }
@keyframes ordcBob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.ordc-day {
  display: block;
  font-size: .63rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-400);
}
.ordc-stage-body h3 {
  margin: 9px 0 10px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--cream);
  letter-spacing: -.02em;
}
.ordc-stage-body p {
  margin: 0 0 16px;
  font-size: .93rem; line-height: 1.68;
  color: rgba(250, 247, 240, .74);
  max-width: 62ch;
}
.ordc-doc {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(214, 184, 124, .12);
  border: 1px solid rgba(214, 184, 124, .28);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--brass-400);
}
.ordc-doc i { font-size: .72rem; }

/* ---- the tab strip that drives it ---- */
.ordc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.ordc-tab {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: rgba(250, 247, 240, .04);
  border: 1px solid rgba(250, 247, 240, .09);
  text-align: left;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.ordc-tab:hover { background: rgba(250, 247, 240, .08); }
.ordc-tab.is-on { background: rgba(250, 247, 240, .09); border-color: rgba(214, 184, 124, .4); }
.ordc-tab-n {
  font-family: var(--display);
  font-size: .78rem; font-weight: 700;
  color: rgba(250, 247, 240, .4);
}
.ordc-tab.is-on .ordc-tab-n { color: var(--brass-400); }
.ordc-tab-l {
  font-size: .84rem; font-weight: 600;
  line-height: 1.32;
  color: rgba(250, 247, 240, .72);
}
.ordc-tab.is-on .ordc-tab-l { color: var(--cream); }
.ordc-tab-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(250, 247, 240, .12);
  overflow: hidden;
}
.ordc-tab-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brass-400); }
.ordc-tab.is-on .ordc-tab-bar i { animation: ordcTick var(--ordc-dwell, 5s) linear forwards; }
.ordc-tab.is-done .ordc-tab-bar i { width: 100%; }
.ordc.is-paused .ordc-tab.is-on .ordc-tab-bar i { animation-play-state: paused; }
@keyframes ordcTick { from { width: 0; } to { width: 100%; } }

@media (max-width: 860px) {
  .ordc-tabs { grid-template-columns: repeat(2, 1fr); }
  .ordc-stage { grid-template-columns: 1fr; }
  .ordc-stagebox { min-height: 0; }
}
@media (max-width: 720px) {
  .ordc-head { flex-wrap: wrap; }
  .ordc-play { margin-left: 0; }
  .ordc-route { grid-template-columns: 1fr; gap: 16px; }
  .ordc-pt.is-right, .ordc-pt.is-right strong { text-align: left; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ordc-stage { animation: none; }
  .ordc-stage-ic i { animation: none !important; }
  .ordc-tab.is-on .ordc-tab-bar i { animation: none; width: 100%; }
}

/* ============================================================== 404 page */
.nf { position: relative; overflow: hidden; }
.nf-head { position: relative; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
/* The numeral leads instead of an eyebrow, so it never sits under the words. */
.nf-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
  background: linear-gradient(150deg, var(--brass-400), var(--brass) 45%, rgba(191, 157, 87, .35));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none;
}
.nf-head h1 { margin-top: 10px; }
.nf-head .lede { margin: 20px auto 0; max-width: 56ch; }
.nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

.nf-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin-inline: auto; }
.nf-link {
  display: flex; align-items: center; gap: 15px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.nf-link:hover {
  transform: translateY(-4px);
  border-color: rgba(191, 157, 87, .5);
  box-shadow: 0 26px 54px -38px rgba(14, 42, 28, .45);
}
.nf-link-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--sand);
  color: var(--forest);
  font-size: 1rem;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.nf-link:hover .nf-link-ic { background: var(--emerald); color: var(--brass-400); }
.nf-link-t { min-width: 0; }
.nf-link-t strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem; font-weight: 600;
  color: var(--forest);
  letter-spacing: -.012em;
}
.nf-link-t small { display: block; margin-top: 4px; font-size: .83rem; line-height: 1.5; color: var(--muted); }
.nf-link-go {
  margin-left: auto;
  font-size: .78rem;
  color: var(--brass);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.nf-link:hover .nf-link-go { opacity: 1; transform: none; }

@media (max-width: 720px) { .nf-links { grid-template-columns: 1fr; } }

/* ================================================= about: four commitments */
.cmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cmt-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 13px;
  padding: clamp(26px, 2.8vw, 38px);
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.cmt-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(191, 157, 87, 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.cmt-card:hover {
  transform: translateY(-6px);
  border-color: rgba(191, 157, 87, .45);
  box-shadow: 0 32px 66px -42px rgba(14, 42, 28, .5);
}
.cmt-card:hover::before { transform: scaleX(1); }
.cmt-no {
  position: absolute;
  top: 20px; right: 26px;
  font-family: var(--display);
  font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: rgba(14, 42, 28, .06);
}
.cmt-ic {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 17px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: 1.1rem;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.cmt-card:hover .cmt-ic { background: var(--forest); transform: translateY(-2px); }
.cmt-card h3 { font-size: 1.18rem; letter-spacing: -.018em; }
.cmt-card p { margin: 0; font-size: .92rem; line-height: 1.68; }

/* ===================================================== about: sourcing belts */
.belt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.belt {
  display: flex; flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.belt:hover { border-color: rgba(191, 157, 87, .45); }
.belt-media { position: relative; display: block; overflow: hidden; }
.belt-media img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.belt:hover .belt-media img { transform: scale(1.06); }
.belt-no {
  position: absolute;
  left: 16px; bottom: 14px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--emerald);
  color: var(--brass-400);
  font-family: var(--display);
  font-size: .82rem; font-weight: 700;
}
.belt-body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: clamp(20px, 2.2vw, 28px);
}
.belt-kicker {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass);
}
.belt-body h3 { font-size: 1.12rem; letter-spacing: -.018em; }
.belt-body p { margin: 0; font-size: .89rem; line-height: 1.66; }
.belt-crops {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.belt-crops li { display: flex; }
.belt-crops a {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid transparent;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .03em;
  color: var(--forest);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.belt-crops a:hover { background: var(--emerald); border-color: var(--emerald); color: var(--brass-400); }
.belt-crops a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (max-width: 980px) { .belt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cmt-grid, .belt-grid { grid-template-columns: 1fr; } }

/* Keyboard users land here first and can jump past the navigation. */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--emerald);
  color: var(--cream);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; outline: 2px solid var(--brass-400); outline-offset: 3px; }

/* ------------------------------------------------- accents in headings */
/*  Editable headings mark their accent with a plain <em>, so the client never
    has to type a class. .hero-title em and .cta-lead h2 em keep their own
    lighter brass, which suits a dark ground. */
.section-head h2 em,
.dvs-head h2 em,
.h-lg em, .h-md em, .h-sm em, .h-xl em,
.ctc-desk-body h2 em,
.wwa-copy h2 em,
.qly-copy h2 em,
.prt-intro h2 em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--brass);
}
/* On a dark band the accent lifts to the lighter brass. */
.page-hero h1 em,
.bg-forest .h-lg em, .bg-forest .h-md em,
.cta-lead h2 em,
.ordc h3 em { color: var(--brass-400); }

/* =========================================== touch targets and small text */
/*  Google asks for roughly 48px of tappable area. Where a control is small by
    design, the hit area is widened with a transparent ::after rather than by
    changing how it looks. */

/* The route stations are 11px dots; give them a 44px reach. */
.ordc-stop::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.ordc-play { width: 44px; height: 44px; }

/* Arrow links read as one line but should be as tappable as a button. */
.link-arrow {
  min-height: 44px;
  padding-block: 4px;
}

.btn { min-height: 44px; }
.btn-sm { min-height: 40px; }

.to-top { min-height: 44px; }

/* The dismiss control on the activity pop-up. */
.proof-close { min-width: 40px; min-height: 40px; }

@media (max-width: 760px) {
  /* Tracked micro-labels sit near 10px on desktop, which is too small to read
     on a phone. One step up across the board, nothing else changes. */
  .dvs-badge, .dvn-count, .wwa-stat-n,
  .qc-test-tag, .pdp-badge, .pcard-hs, .pcard-tag, .pcard-cta,
  .ordc-day, .pst-chip, .belt-kicker, .lead-flag, .lead-cat,
  .ctc-desk-tag, .footer-cred, .prt-state, .prt-code,
  .pcard-sm .pcard-tag, .pcard-sm .pcard-hs, .pcard-sm .pcard-cta, .to-top,
  .phm small, .ctc-qtxt small, .ctc-row small, .pdp-block h4,
  .art-author small, .art-facts dt, .art-share-label,
  .rail-doc, .ordc-doc, .qc-doc h3 { font-size: .7rem; }

  /* The two floating widgets share the bottom edge — keep them clear of it
     and of each other. */
  .proof { max-width: calc(100vw - 96px); }

  /* The two floating widgets share the bottom edge — keep them clear of it
     and of each other. */
  .proof { max-width: calc(100vw - 96px); }
}

/* ========================================================= trade routes map */
.tmap-sec {
  position: relative;
  isolation: isolate;
  background: linear-gradient(162deg, #10301E, var(--forest) 52%, #061A10);
  color: rgba(250, 247, 240, .74);
}
.tmap-sec::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(880px 460px at 84% 4%, rgba(191, 157, 87, .2), transparent 68%);
}

.tmap-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.tmap-head h2 { color: var(--cream); }
.eyebrow.is-light { color: var(--brass-400); }
.tmap-head-side p { margin: 0; font-size: .95rem; line-height: 1.7; color: rgba(250, 247, 240, .74); }
.tmap-stats { display: flex; gap: clamp(24px, 3vw, 44px); margin-top: 20px; }
.tmap-stats strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600; line-height: 1;
  color: var(--brass-400);
  font-variant-numeric: tabular-nums;
}
.tmap-stats small {
  display: block; margin-top: 6px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(250, 247, 240, .5);
}

.tmap-card {
  border-radius: 26px;
  background: rgba(250, 247, 240, .045);
  border: 1px solid rgba(250, 247, 240, .12);
  overflow: hidden;
}
.tmap-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 14px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid rgba(250, 247, 240, .1);
}
.tmap-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-400);
}
.tmap-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass-400);
  box-shadow: 0 0 0 4px rgba(214, 184, 124, .18);
}
.tmap-key { display: flex; gap: 18px; }
.tmap-key li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; color: rgba(250, 247, 240, .6);
}
.tmap-key i { width: 9px; height: 9px; border-radius: 50%; }
.tmap-key .is-hub  { background: var(--brass); box-shadow: 0 0 0 3px rgba(191, 157, 87, .25); }
.tmap-key .is-dest { background: rgba(250, 247, 240, .5); }

/* ---- the map itself ---- */
.tmap { position: relative; padding: clamp(10px, 1.6vw, 22px); }
.tmap-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmap-dots { opacity: .22; }

.tmap-arc {
  fill: none;
  stroke: url(#tmArc);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(191, 157, 87, .5));
}
.tmap.is-on .tmap-arc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s var(--ease);
  transition-delay: var(--d);
}
.tmap-runner { opacity: 0; transition: opacity .7s 1.5s; }
.tmap.is-on .tmap-runner { opacity: 1; }

/* ---- markers ---- */
.tmap-pin {
  position: absolute;
  width: 0; height: 0;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  z-index: 2;
}
.tmap-pin > i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 50%;
  transition: transform .3s var(--ease);
}
.tmap-pin.is-hub > i {
  width: 11px; height: 11px;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(191, 157, 87, .28), 0 0 12px rgba(191, 157, 87, .7);
}
.tmap-pin.is-dest > i {
  width: 7px; height: 7px;
  background: rgba(250, 247, 240, .72);
  box-shadow: 0 0 0 3px rgba(250, 247, 240, .12);
}
/* A 34px reach around a 7px dot, so it can be tapped. */
.tmap-pin::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -50%);
}
.tmap-pin:hover > i, .tmap-pin:focus-visible > i { transform: translate(-50%, -50%) scale(1.5); }

.tmap-tip {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translate(-50%, 6px);
  min-width: 132px;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(6, 22, 14, .96);
  border: 1px solid rgba(214, 184, 124, .32);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .8);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  z-index: 4;
}
.tmap-pin:hover .tmap-tip, .tmap-pin:focus-visible .tmap-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition-delay: 0s;
}
.tmap-tip b { display: block; font-family: var(--display); font-size: .88rem; color: var(--cream); white-space: nowrap; }
.tmap-tip small { display: block; margin-top: 2px; font-size: .72rem; color: rgba(250, 247, 240, .6); white-space: nowrap; }
.tmap-tip em {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(250, 247, 240, .14);
  font-style: normal; font-size: .7rem; color: var(--brass-400); white-space: nowrap;
}

.tmap-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
}
.tmap-foot li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; color: rgba(250, 247, 240, .78);
}
.tmap-foot-ic {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(214, 184, 124, .14);
  color: var(--brass-400);
  font-size: .68rem;
}
.tmap-foot-more { margin-left: auto; font-size: .72rem; color: rgba(250, 247, 240, .5); }

@media (max-width: 900px) {
  .tmap-head { grid-template-columns: 1fr; align-items: start; }
  .tmap-foot-more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tmap.is-on .tmap-arc { transition: none; }
  .tmap-runner { display: none; }
}

/* ============================================================ enquiry list */
.pcard-add {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 240, .3);
  background: rgba(7, 24, 15, .72);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.pcard:hover .pcard-add,
.pcard-add:focus-visible,
.pcard-add.is-on { opacity: 1; transform: none; }
.pcard-add:hover { background: var(--emerald); border-color: var(--emerald); }
.pcard-add.is-on { background: var(--emerald); border-color: var(--emerald); color: var(--brass-400); }
.pcard-add i { font-size: .62rem; }
/* The HS chip already sits top-right on the compact card. */
.pcard-sm .pcard-add { top: 10px; right: 10px; padding: 6px 10px; font-size: .6rem; }
.pcard-sm .pcard-hs { display: none; }

.pdp-add { margin-top: 18px; }
.pdp-add.is-on { background: var(--emerald); border-color: var(--emerald); color: var(--brass-400); }

/* ---- the floating tray ---- */
.rfq {
  position: fixed;
  right: 22px; bottom: 96px;
  z-index: 70;
  display: flex; flex-direction: column-reverse; align-items: flex-end;
  gap: 10px;
}
.rfq-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(214, 184, 124, .4);
  background: linear-gradient(140deg, #143522, var(--forest) 60%, #0B2417);
  color: var(--cream);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 40px -20px rgba(14, 42, 28, .8);
}
.rfq-tab i { color: var(--brass-400); font-size: .8rem; }
.rfq-tab b {
  display: grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--forest);
  font-size: .7rem;
}
.rfq-panel {
  width: min(320px, calc(100vw - 44px));
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 30px 66px -30px rgba(14, 42, 28, .55);
  overflow: hidden;
}
.rfq-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.rfq-head strong { font-family: var(--display); font-size: .92rem; color: var(--forest); }
.rfq-x {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: .8rem;
}
.rfq-x:hover { color: var(--forest); }
.rfq-list { max-height: 264px; overflow-y: auto; }
.rfq-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
  color: var(--forest);
}
.rfq-list li:last-child { border-bottom: 0; }
.rfq-list span { flex: 1; min-width: 0; }
.rfq-del {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: .64rem;
}
.rfq-del:hover { color: #B4452F; border-color: #B4452F; }
.rfq-foot { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.rfq-clear {
  border: 0; background: none; cursor: pointer;
  font-size: .72rem; letter-spacing: .06em;
  color: var(--muted);
}
.rfq-clear:hover { color: #B4452F; }

/* ---- the same list, shown inside the contact form ---- */
.rfq-picked {
  margin-bottom: 22px;
  border-radius: 16px;
  border: 1px solid rgba(191, 157, 87, .38);
  background: var(--sand);
  overflow: hidden;
}
.rfq-picked-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(191, 157, 87, .28);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass);
}
.rfq-picked-head i { margin-right: 8px; }
.rfq-picked li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(191, 157, 87, .18);
  font-size: .88rem;
  color: var(--forest);
}
.rfq-picked li:last-child { border-bottom: 0; }
.rfq-picked li span { flex: 1; }

@media (max-width: 760px) {
  /* Sit above the WhatsApp button rather than beside it. */
  .rfq { right: 16px; bottom: 150px; }
  .rfq-tab { padding: 10px 14px; font-size: .68rem; }
  .pcard-add { opacity: 1; transform: none; }
  .ctc-qgo { opacity: 1; transform: none; }
}

/* Three fixed widgets share the bottom edge of a 390px screen, so on a phone
   they give up the space their wording costs: the tray keeps only its icon
   and count, and the activity card drops to a single compact line. Placed
   after the earlier phone blocks so these win on order, not specificity. */
@media (max-width: 620px) {
  .rfq { right: 14px; bottom: 78px; }
  .rfq-tab {
    position: relative;
    width: 48px; height: 48px;
    padding: 0; gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  /* Hidden to the eye, not to a screen reader — it is the button's name. */
  .rfq-tab span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .rfq-tab i { font-size: 1.05rem; }
  .rfq-tab b {
    position: absolute; top: -3px; right: -3px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    font-size: .66rem;
    border: 2px solid var(--cream);
  }

  .proof {
    left: 12px; bottom: 14px;
    width: min(268px, calc(100vw - 92px));
    gap: 6px;
  }
  .proof-online {
    padding: 5px 10px 5px 8px;
    gap: 7px;
    font-size: .625rem;
    letter-spacing: .01em;
  }
  .proof-dot { width: 6px; height: 6px; }
  .proof-dot::after { inset: -4px; }
  .proof-pop { padding: 7px 9px; gap: 9px; border-radius: 12px; }
  .proof-avatar { width: 26px; height: 26px; font-size: .58rem; }
  .proof-body b { font-size: .70rem; line-height: 1.3; }
  .proof-body span { font-size: .625rem; line-height: 1.35; margin-top: 1px; }
  .proof-close {
    width: 26px; height: 26px;
    min-width: 26px; min-height: 26px;
    margin: -5px -3px -5px 0;
    font-size: .54rem;
  }
}

.footer-by a {
  color: var(--brass-400);
  border-bottom: 1px solid rgba(214, 184, 124, .32);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-by a:hover { color: var(--cream); border-color: var(--cream); }

/* ====================================================== quick enquiry band */
.qenq {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.qenq-intro p { margin-top: 16px; font-size: .95rem; line-height: 1.7; max-width: 46ch; }
.qenq-points { display: grid; gap: 12px; margin-top: 24px; }
.qenq-points li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--forest); }
.qenq-points i { color: var(--brass); font-size: .76rem; margin-top: 5px; flex-shrink: 0; }

.qenq-call {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 26px;
  padding: 14px 20px 14px 14px;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.qenq-call:hover { border-color: rgba(191, 157, 87, .5); transform: translateY(-2px); }
.qenq-call-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--emerald);
  color: var(--brass-400);
  font-size: .86rem;
}
.qenq-call small {
  display: block;
  font-size: .615rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.qenq-call strong {
  display: block; margin-top: 3px;
  font-family: var(--display);
  font-size: .95rem; font-weight: 600;
  color: var(--forest);
}

.qenq-card {
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 34px 74px -46px rgba(14, 42, 28, .5);
}

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