/* ==========================================================================
   TAR — Teddy Asset Renewal
   DESIGN SYSTEM

   One stylesheet. Ultra-bright white architectural canvas, restrained accents,
   hard-offset shadows, sharp corners, tight display typography. Depth comes
   mainly from the original SVG artwork; the interface stays flat and spacious
   with selective, deliberate relief.
   ========================================================================== */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root {
  color-scheme: light;          /* no dark-mode flash before CSS applies */
  /* colour — identical tokens to the SVG system so artwork never drifts */
  --ink:        #071527;
  --ink-soft:   #0f2740;
  --muted:      #5a6877;
  --muted-2:    #66757f;   /* 4.76:1 on white — was #7c8b9b at 3.49:1 (WCAG 1.4.3 fail) */
  --line:       #dce5ea;   /* decorative dividers */
  --field-line: #738594;   /* form control boundaries — 3.74:1, WCAG 1.4.11 */
  --line-soft:  #edf3f6;
  --paper:      #fbfdff;
  --white:      #ffffff;
  --soft:       #eff9fb;
  --blue:       #1559f6;
  --blue-deep:  #0b318e;
  --blue-pale:  #e4edff;
  --cyan:       #00d9e7;
  --cyan-pale:  #d5fcfc;
  --cyan-soft:  #e7fcfd;
  --lime:       #cbff4d;
  --lime-deep:  #8fbf19;
  --steel:      #9fb2c4;
  --steel-pale: #e8f0f6;
  --recover:    #2fa36b;   /* graphical use only (ticks, rules) — 3:1 class */
  --recover-tx: #1d6b46;   /* the text-safe green: 6.13:1 on the WEEE tint */
  --recover-pl: #e3f6ec;
  --alert:      #d8412f;
  --alert-pale: #fbe6e3;

  /* type */
  --sans: Manrope, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spatial rhythm */
  --shell:  1400px;
  --gutter: 44px;
  --sec:    clamp(72px, 9vw, 132px);

  /* signature relief */
  --lift-cyan: 9px 9px 0 var(--cyan);
  --lift-pale: 7px 7px 0 var(--cyan-pale);
  --lift-blue: 7px 7px 0 var(--blue-pale);
  --hair: 1px solid var(--line);
}

/* --- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 152px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  font-weight: 400; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
  /* Manrope ships every weight this design uses (400-800), so nothing ever
     needs to be faked. If the web font is ever slow or unavailable, this stops
     the browser smearing a system font into an artificial extra-bold, which is
     what made production look heavier than the local preview. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
}
img, svg { max-width: 100%; }
svg { display: block; }
button { font: inherit; color: inherit; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
h1, h2, h3, h4, h5, h6 { font-weight: 800; margin: 0 0 .5em; letter-spacing: -.055em; line-height: 1.08; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
hr { border: 0; border-top: var(--hair); margin: 3rem 0; }
table { border-collapse: collapse; width: 100%; }

/* --- 3. ACCESSIBILITY FOUNDATIONS -------------------------------------- */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
  font-size: 13px; font-weight: 800; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }
:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 1px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4. LAYOUT ---------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec); }
.section--tint { background: var(--soft); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--rule { border-top: var(--hair); }
.grid { display: grid; gap: 34px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 56px; align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.split--flip > :first-child { order: 2; }
.stack-sm > * + * { margin-top: 12px; }

/* --- 5. TYPOGRAPHY ------------------------------------------------------ */
.eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow .pulse {
  width: 7px; height: 7px; background: var(--lime); border-radius: 50%;
  box-shadow: 0 0 0 4px #eefbd0; flex: none;
}
.h-hero { font-size: clamp(44px, 6vw, 91px); line-height: .96; letter-spacing: -.082em; margin: 0 0 26px; }
.h-1 { font-size: clamp(38px, 4.6vw, 62px); letter-spacing: -.072em; }
.h-2 { font-size: clamp(30px, 3.4vw, 45px); letter-spacing: -.068em; }
.h-3 { font-size: clamp(21px, 2vw, 27px); letter-spacing: -.05em; }
.h-4 { font-size: 18px; letter-spacing: -.045em; }
.lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.68; color: var(--muted); max-width: 62ch; }
.body-muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.accent { color: var(--blue); }
.stroke-text { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.measure { max-width: 68ch; }

/* --- 6. BUTTONS & ACTIONS ---------------------------------------------- */
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 22px; justify-content: space-between;
  padding: 17px 20px; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--lift-cyan); }
.btn--primary:hover { color: #fff; background: var(--blue-deep); transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--cyan); }
.btn--primary:active { transform: translate(3px, 3px); box-shadow: 5px 5px 0 var(--cyan); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 9px 9px 0 var(--cyan-pale); }
.btn--ink:hover { color: #fff; transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--cyan-pale); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { color: #fff; background: var(--ink); }
.btn--small { padding: 12px 15px; font-size: 11px; gap: 14px; }
.link-action {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-size: 12.5px; font-weight: 800; text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 5px;
}
.link-action:hover { color: var(--blue); border-color: var(--blue); }
.link-action svg { width: 15px; height: 15px; }
.text-link { color: var(--blue); font-weight: 700; text-decoration: underline; }

/* --- 7. HEADER & NAVIGATION -------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(251, 253, 255, .93);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: var(--hair);
}
.nav {
  height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; flex: none; }
.brand svg { height: 34px; width: auto; aspect-ratio: 1000 / 660; flex: none; }
.brand-name {
  font-size: 16px; font-weight: 800; line-height: 1.05; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.brand:hover .brand-name { color: var(--blue); }
.navlinks { display: flex; align-items: center; gap: 22px; }
.navlinks a {
  color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent;
}
.navlinks a:hover { color: var(--blue); }
.navlinks a[aria-current="page"], .navlinks a.is-active { border-bottom-color: var(--blue); color: var(--blue); }
.nav-cta {
  background: var(--ink); color: #fff; padding: 13px 17px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; flex: none;
}
.nav-cta:hover { color: #fff; background: var(--blue); }
.nav-cta svg { width: 14px; height: 14px; }
.nav-toggle {
  display: none; background: transparent; border: 1.5px solid var(--line);
  width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* left-side drawer navigation — the "left nav" concept where it genuinely helps */
/* The closed drawer is moved off-screen AND taken out of the tab order and the
   accessibility tree. transform alone did neither: the panel was permanently
   present with around twenty focusable links, at every viewport width — so a
   keyboard user tabbing out of the header fell into an invisible menu, and at
   desktop widths (where the toggle that opens it is display:none) there was no
   way to see where focus had gone. visibility is what actually removes it, and
   it is the cross-browser half of the fix; the `inert` attribute the behaviour
   layer toggles is the modern half. Transitioning visibility alongside
   transform keeps the slide-in animation intact. */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(360px, 88vw); background: var(--white);
  border-right: var(--hair); z-index: 80; transform: translateX(-102%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
  overflow-y: auto; padding: 26px 28px 60px;
}
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; }

/* Without JavaScript the toggle cannot open anything, so it is not offered.
   Every link inside the drawer is also in the footer, which needs no script. */
.no-js .nav-toggle { display: none !important; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.drawer-close { background: transparent; border: 1.5px solid var(--line); width: 44px; height: 44px; cursor: pointer; }
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav li { border-bottom: var(--hair); }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: -.03em;
}
.drawer nav a:hover { color: var(--blue); }
.drawer nav a svg { width: 15px; height: 15px; opacity: .45; }
.drawer .drawer-group { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 26px 0 6px; }
.scrim {
  position: fixed; inset: 0; background: rgba(7, 21, 39, .34); z-index: 70;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* --- 8. BREADCRUMBS ----------------------------------------------------- */
.breadcrumbs { border-bottom: var(--hair); }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0; padding: 15px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); }
/* was var(--line) at 1.25:1 on paper — technically decorative, but effectively
   invisible, so the trail read as one run-on string */
.breadcrumbs li + li::before { content: "/"; color: var(--steel); margin-right: 10px; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* --- 9. HERO ------------------------------------------------------------ */
.hero { padding: 68px 0 52px; position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: 40px; }
.hero-art { position: relative; }
.hero-art .tar-svg { width: 100%; height: auto; }
/* The two spec cards sit in their own row beneath the artwork rather than
   floating on top of it, so they can never collide with the labels drawn
   inside the illustration at any screen size. */
.hero-metrics { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.metric {
  background: #fff; border: var(--hair); padding: 12px 16px;
  box-shadow: var(--lift-pale); flex: 1 1 190px; min-width: 0;
}
.metric b { display: block; font-size: 18px; letter-spacing: -.06em; line-height: 1.2; }
.metric span { color: var(--muted); font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; display: block; margin-top: 3px; }
.metric--b { box-shadow: var(--lift-blue); }
.trust-line {
  display: flex; gap: 21px; align-items: center; margin-top: 54px; color: var(--muted);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.45; max-width: 560px;
}
.trust-line::before { content: ""; width: 47px; height: 1px; background: var(--ink); flex: none; }

/* page hero (interior pages) */
.page-hero { padding: 64px 0 46px; border-bottom: var(--hair); }
.page-hero .split { align-items: center; }
.page-hero .tar-svg { width: 100%; height: auto; }

/* --- 10. TICKER --------------------------------------------------------- */
.ticker { background: var(--ink); color: #fff; overflow: hidden; }
.ticker-inner { min-height: 92px; display: flex; align-items: center; gap: 34px; padding-block: 18px; }
.ticker-title {
  font-size: 13px; font-weight: 800; white-space: nowrap; margin: 0; flex: none;
  position: relative; z-index: 2; padding-right: 26px;
  border-right: 1px solid rgba(255,255,255,.16);
}
.ticker-title em { color: var(--lime); font-style: normal; }
/* The moving list lives inside its own clipped box, so it can never reach or
   overlap the fixed headline. The list is rendered twice and the track is
   moved by exactly half its width, which makes the loop seamless. */
.ticker-marquee {
  flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.ticker-track { display: flex; width: max-content; animation: tar-marquee 34s linear infinite; will-change: transform; }
.ticker-marquee:hover .ticker-track { animation-play-state: paused; }
/* WCAG 2.2.2 — a mechanism to pause that a keyboard or touch user can reach.
   Hover is not one. The button is hidden until scripted. */
.ticker[data-paused="true"] .ticker-track { animation-play-state: paused; }
.ticker-pause {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #dbe6f2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; min-height: 24px; cursor: pointer;
}
.ticker-pause:hover { border-color: var(--cyan); color: #fff; }
.ticker-pause[hidden] { display: none; }
.ticker-pause-icon {
  width: 9px; height: 10px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* play triangle when paused */
.ticker-pause[aria-pressed="true"] .ticker-pause-icon {
  border: 0; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
}
.ticker-run { display: flex; flex: none; }
.ticker-item {
  color: #c4d0de; white-space: nowrap; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .05em; padding-right: 42px; display: inline-flex; align-items: center;
}
.ticker-item i { display: inline-block; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; margin-right: 9px; flex: none; }
@keyframes tar-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* --- 11. LANES (spatial alternative to card walls) ---------------------- */
.lanes { border-top: var(--hair); }
.lane {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 190px 60px; align-items: center; gap: 22px;
  border-bottom: var(--hair); padding: 26px 0; text-decoration: none; color: inherit;
  position: relative; transition: background .2s ease;
}
.lane > * { transition: transform .2s ease; }
a.lane:hover { background: var(--soft); }
a.lane:hover > * { transform: translateX(8px); }
.lane-num { font-family: var(--mono); font-size: 10px; color: var(--blue); letter-spacing: .1em; }
.lane h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.055em; }
.lane p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lane-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.lane-go { justify-self: end; width: 20px; height: 20px; color: var(--blue); }
a.lane:hover .lane-go { transform: translateX(12px); }
.lane-go { transition: transform .2s ease; }
/* Electronics Recovery / WEEE carries a soft recovery-green tint so it reads as
   the emphasised route, while keeping exactly the same box metrics and hover
   behaviour as every other lane. */
.lane--feature {
  background: linear-gradient(90deg, #f1fbf6 0%, #f7fdfa 62%, #ffffff 100%);
}
a.lane--feature:hover { background: #e8f7ef; }
.lane--feature .lane-num { color: var(--recover-tx); }
.lane-badge {
  display: inline-block; margin-left: 10px; vertical-align: middle; line-height: 1;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #1d6b46; background: var(--recover-pl); border: 1px solid #bfe6d1;
  padding: 3px 7px; font-weight: 500;
}
.card--feature {
  background: linear-gradient(180deg, #f1fbf6 0%, #ffffff 78%);
  border-color: #bfe6d1; box-shadow: inset 0 3px 0 var(--recover);
}
a.card--feature:hover { border-color: var(--recover); box-shadow: inset 0 3px 0 var(--recover), 7px 7px 0 var(--recover-pl); }
.card--feature .card-index { color: var(--recover-tx); }

/* --- 12. CARDS (used selectively) --------------------------------------- */
.card {
  background: #fff; border: var(--hair); padding: 30px 28px; display: block;
  text-decoration: none; color: inherit; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card:hover { transform: translate(-3px, -3px); box-shadow: var(--lift-pale); border-color: var(--cyan); }
.card h3 { font-size: 19px; margin: 0 0 10px; }
.card p { color: var(--muted); font-size: 13.5px; line-height: 1.62; margin: 0; }
.card .card-mark { width: 100%; height: auto; margin-bottom: 18px; }
.card--inset { background: var(--soft); border-color: transparent; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(7,21,39,.05); }
.card-index { font-family: var(--mono); font-size: 10px; color: var(--blue); letter-spacing: .12em; display: block; margin-bottom: 12px; }

/* product tiles — artwork-led, not icon-led */
.tile {
  background: #fff; border: var(--hair); text-decoration: none; color: inherit; display: block;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.tile:hover { transform: translate(-3px, -3px); box-shadow: var(--lift-pale); border-color: var(--cyan); }
.tile-art { padding: 22px 22px 6px; background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); }
.tile-art .tar-svg { width: 100%; height: auto; }
.tile-body { padding: 18px 22px 24px; border-top: var(--hair); }
.tile-body h3 { font-size: 17px; margin: 0 0 6px; }
.tile-body p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* --- 13. FEATURE / STAT BLOCKS ----------------------------------------- */
.statline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair); border-bottom: var(--hair); }
.statline > div { padding: 26px 24px; border-right: var(--hair); }
.statline > div:last-child { border-right: 0; }
.statline b { display: block; font-size: 26px; letter-spacing: -.07em; margin-bottom: 4px; }
.statline span { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; line-height: 1.5; overflow-wrap: anywhere; }

.answer {
  border-left: 3px solid var(--blue); background: var(--soft); padding: 22px 26px; margin: 0 0 26px;
}
.answer p:last-child { margin-bottom: 0; }
.answer p { font-size: 16.5px; line-height: 1.6; }

.note {
  border: var(--hair); border-left: 3px solid var(--lime-deep); background: #fff;
  padding: 20px 24px; font-size: 14px; color: var(--muted);
}
.note strong { color: var(--ink); }
.note--placeholder { border-left-color: var(--steel); background: repeating-linear-gradient(135deg, #fff, #fff 9px, var(--line-soft) 9px, var(--line-soft) 18px); }

/* --- 14. PROCESS STEPS -------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--hair); background: #fff; }
.step { padding: 30px 26px 34px; border-right: var(--hair); position: relative; }
.step:last-child { border-right: 0; }
.step .tar-svg { width: 100%; height: auto; margin-bottom: 20px; }
.step-num { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--blue); display: block; margin-bottom: 10px; }
.step h3 { font-size: 17px; margin: 0 0 8px; }
.step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58; }

/* --- 15. CONDITION MATRIX (HDD intake) ---------------------------------- */
.condition { border: var(--hair); background: #fff; padding: 28px 30px 32px; }
.condition + .condition { margin-top: 26px; }
.condition--yes { border-top: 4px solid var(--recover); }
.condition--no { border-top: 4px solid var(--alert); }
.condition h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 6px; }
.condition h3 svg { width: 24px; height: 24px; flex: none; }
.condition--yes h3 svg { color: var(--recover); }
.condition--no h3 svg { color: var(--alert); }
.condition .tar-svg { width: 100%; height: auto; margin: 20px 0 6px; }
.condition ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.condition li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  border: var(--hair); padding: 8px 12px; background: var(--paper);
}
.condition--yes li { border-color: #bfe6d1; background: var(--recover-pl); color: #1d6b46; }
.condition--no li { border-color: #f2c9c3; background: var(--alert-pale); color: #9c2d20; }

/* homepage HDD intake strip — same condition language, compact layout */
.hdd-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.hdd-panel { background: #fff; border: var(--hair); padding: 24px 26px 28px; }
.hdd-panel--yes { border-top: 4px solid var(--recover); }
.hdd-panel--no { border-top: 4px solid var(--alert); }
.hdd-panel h3 { display: flex; align-items: center; gap: 11px; font-size: 18px; margin-bottom: 6px; }
.hdd-panel h3 svg { width: 22px; height: 22px; flex: none; }
.hdd-panel--yes h3 svg { color: var(--recover); }
.hdd-panel--no h3 svg { color: var(--alert); }
.hdd-panel > p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 4px; }
.hdd-panel .tar-svg, .hdd-panel img { width: 100%; height: auto; margin: 16px 0 4px; }
.hdd-panel ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 9px; }
.hdd-panel li {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: var(--hair); padding: 7px 11px; background: var(--paper);
}
.hdd-panel--yes li { border-color: #bfe6d1; background: var(--recover-pl); color: #1d6b46; }
.hdd-panel--no li { border-color: #f2c9c3; background: var(--alert-pale); color: #9c2d20; }

/* --- 16. MARKET / FLAG LISTS ------------------------------------------- */
.tar-flag {
  width: 36px; height: 24px; flex: none;
  border: 1px solid #c4d3dc; background: #fff;
  box-shadow: 0 1px 2px rgba(7,21,39,.10);
}
/* Auto-fitting columns mean a long country name such as "United Arab Emirates"
   always has room, at every screen width, without shrinking the type.
   Each cell draws its own hairline and overlaps its neighbour by 1px, so the
   dividers read as a single clean grid however many columns fit — and a row
   that is only part filled simply ends, with no panel showing behind the
   empty cells. */
.markets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 0; background: transparent; border: 0;
}
.market {
  display: flex; align-items: center; gap: 14px; padding: 17px 18px;
  background: #fff; min-width: 0;
  border: var(--hair); margin: 0 -1px -1px 0;
}
.market b {
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -.012em;
  line-height: 1.25; color: var(--ink); display: block;
}
.market span {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--muted-2); display: block; margin-top: 2px;
}

/* --- 17. TABLES & DEFINITION LISTS ------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--hair); background: #fff; }
table caption { text-align: left; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 14px 18px; border-bottom: var(--hair); }
th, td { text-align: left; padding: 14px 18px; border-bottom: var(--hair); font-size: 14px; vertical-align: top; }
th { font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; background: var(--paper); }
tbody tr:last-child td { border-bottom: 0; }

.glossary { border-top: var(--hair); }
.glossary-item { border-bottom: var(--hair); padding: 26px 0; display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: 30px; }
.glossary-item dt { font-size: 19px; font-weight: 800; letter-spacing: -.05em; margin: 0; }
.glossary-item dd { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.glossary-item dd p:last-child { margin-bottom: 0; }

/* --- 18. FAQ ------------------------------------------------------------ */
.faq { border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-size: 18px; font-weight: 800; letter-spacing: -.045em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 32px; width: 14px; height: 14px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 36px; }
.faq summary:hover { color: var(--blue); }
.faq-body { padding: 0 60px 26px 0; color: var(--muted); font-size: 15px; line-height: 1.72; }
.faq-body p:last-child { margin-bottom: 0; }

/* --- 19. CONTEXTUAL LEFT NAVIGATION (long pages) ----------------------- */
.with-rail { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.rail { position: sticky; top: 134px; }
.rail p { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.rail ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.rail li a {
  display: block; padding: 9px 0 9px 16px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: -.02em;
}
.rail li a:hover { color: var(--ink); }
.rail li a.is-current { color: var(--blue); border-left-color: var(--blue); }

/* --- 20. PROSE ---------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin-top: 2.2em; }
.prose h3 { font-size: 20px; margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.78; color: #26364a; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 3px solid var(--cyan); color: var(--muted); font-size: 17px; }
.prose .tar-svg { width: 100%; height: auto; margin: 2em 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 20px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-bottom: 22px; border-bottom: var(--hair); margin-bottom: 34px; }

/* --- 21. FORMS ---------------------------------------------------------- */
.form { background: #fff; border: var(--hair); padding: 34px 34px 38px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.field .hint { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.field .req { color: var(--blue); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea {
  font: inherit; font-size: 14.5px; padding: 13px 14px; border: 1.5px solid var(--field-line);
  background: var(--paper); color: var(--ink); width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--steel); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); background: #fff; box-shadow: 4px 4px 0 var(--cyan-pale);
}
textarea { min-height: 132px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
input[type=file] { font-size: 13px; padding: 11px; border: 1.5px dashed var(--field-line); background: var(--paper); width: 100%; }
.field-error { color: #a52a1c; font-size: 12px; font-weight: 700; display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--alert); background: var(--alert-pale); }
.field[data-invalid="true"] .field-error { display: block; }
.form-foot { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--muted); max-width: 44ch; }
.form-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }
.form-status { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--blue); background: var(--soft); font-size: 14px; display: none; }
.form-status[data-visible="true"] { display: block; }
.form-status--error { border-left-color: var(--alert); background: var(--alert-pale); color: #8f2618; }
.form-status--ok { border-left-color: var(--recover); background: var(--recover-pl); color: #1d6b46; }
.form-consent { flex: 1 1 260px; }
.form-consent[data-invalid="true"] { color: #a52a1c; font-weight: 600; }
.form-consent[data-invalid="true"] input { outline: 2px solid var(--alert); outline-offset: 2px; }
.form-busy { opacity: .6; pointer-events: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 22. CTA BANDS ------------------------------------------------------ */
.cta-band { background: var(--cyan-soft); position: relative; overflow: hidden; padding-block: 80px; }
.cta-band::after {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  border: 1px solid #a7dfe6; right: -125px; top: -320px;
  box-shadow: 0 0 0 34px rgba(21,89,246,.04), 0 0 0 68px rgba(21,89,246,.035), 0 0 0 102px rgba(21,89,246,.025);
}
.cta-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.cta-inner h2 { max-width: 620px; margin-bottom: 0; }
.cta-side { max-width: 300px; flex: none; }
.cta-side p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 0 18px; }
.cta-band--ink { background: var(--ink); }
.cta-band--ink::after { border-color: rgba(255,255,255,.14); box-shadow: 0 0 0 34px rgba(0,217,231,.05), 0 0 0 68px rgba(0,217,231,.035), 0 0 0 102px rgba(0,217,231,.02); }
.cta-band--ink h2, .cta-band--ink .eyebrow { color: #fff; }
.cta-band--ink .cta-side p { color: #a9b8c8; }

/* dual path chooser (supplier vs buyer) */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--hair); background: #fff; }
.path { padding: 40px 38px 44px; border-right: var(--hair); text-decoration: none; color: inherit; transition: background .2s ease; }
.path:last-child { border-right: 0; }
.path:hover { background: var(--soft); }
.path .eyebrow { color: var(--blue); }
.path h3 { font-size: 25px; margin-bottom: 10px; }
.path p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

/* --- 23. FOOTER --------------------------------------------------------- */
.site-footer { background: var(--ink); color: #c4d0de; padding-top: 76px; }
.site-footer h2, .site-footer h3 { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 42px; padding-bottom: 58px; }
.footer-brand svg { height: 46px; width: auto; aspect-ratio: 1000 / 660; margin-bottom: 18px; }
.footer-brand strong { color: #fff; font-size: 18px; letter-spacing: -.06em; display: block; }
.footer-brand p { font-size: 13px; line-height: 1.7; margin: 14px 0 0; max-width: 34ch; color: #a9b8c8; }
.footer-col p.footer-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #7f909f; margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #c4d0de; text-decoration: none; font-size: 13.5px; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact li { display: flex; align-items: flex-start; gap: 11px; }
.footer-contact svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--cyan); }
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0 30px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: #7f909f;
}
.footer-bar a { color: #7f909f; text-decoration: none; }
.footer-bar a:hover { color: var(--cyan); }
.footer-bar nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* --- 24. PERSISTENT CONTACT (WhatsApp) --------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 65;
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 14px 18px; font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 6px 6px 0 var(--lime); border: 1.5px solid var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-fab:hover { color: #fff; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--lime); }
/* WCAG 2.2 2.4.11 (Focus Not Obscured): a fixed button in the bottom-right
   corner will sit on top of whatever the keyboard user has just focused down
   there. Reserving the strip underneath the last footer row at every width —
   not only below 560px, which was the previous rule — keeps focused footer
   links clear of it. */
.footer-bar { padding-bottom: 96px; }
.whatsapp-fab svg { width: 20px; height: 20px; color: var(--lime); }
.whatsapp-fab .fab-label { white-space: nowrap; }

/* --- 25. ARTWORK BEHAVIOUR --------------------------------------------- */
.tar-svg { width: 100%; height: auto; }
.tar-icon { width: 1em; height: 1em; }
.art-frame {
  background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
  border: var(--hair); padding: 30px;
  /* large illustrations always sit below the fold: skip their render work
     until they approach the viewport. `auto` remembers the real size after
     first paint, so this cannot introduce layout shift. */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.art-frame .tar-svg { width: 100%; }
.art-caption { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.art-full { width: 100%; }
/* highly detailed artwork stays meaningful on small screens: secondary detail
   layers are dropped rather than the whole illustration being shrunk */
@media (max-width: 720px) {
  .tar-art-tag, .tar-map-key text, .tar-dc-ceiling { display: none; }
  .tar-map-land circle { r: 2.1; }
}

/* --- 26. MOTION (GSAP drives the rest) --------------------------------- */
/* Nothing on this site is hidden until JavaScript runs. Reveal animations are
   applied by GSAP to elements that are already painted and already present in
   the server-rendered HTML, so crawlers, AI retrieval systems and visitors
   without JavaScript see the full page. (A `.reveal { opacity: 0 }` rule lived
   here previously; it was unused and would have hidden content had anyone
   applied the class, so it has been removed.) */
@keyframes tar-spin { to { transform: rotate(360deg); } }
@keyframes tar-dash { to { stroke-dashoffset: -220; } }
.tar-loop-dash { animation: tar-dash 14s linear infinite; }
.tar-spin { animation: tar-spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.tar-spin-slow { animation-duration: 13s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none !important; transform: none !important; flex-wrap: wrap; width: 100%; }
  /* This used to be `overflow-x: auto`, which turns the ribbon into a
     scrollable region. A scrollable region has to be keyboard operable
     (WCAG 2.1.1) — but this one is aria-hidden decorative duplication, and
     putting tabindex on an aria-hidden element is itself a violation. Wrapping
     the items instead means there is nothing to scroll and nothing to trap. */
  .ticker-marquee { overflow-x: hidden; -webkit-mask-image: none; mask-image: none; }
  .ticker-run:last-child { display: none; }   /* the duplicate exists only for the loop */
  .ticker-pause { display: none !important; } /* nothing is moving to pause */
}

/* --- 27. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 1340px) {
  .navlinks { gap: 15px; }
  .navlinks a { font-size: 11px; }
}
@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticker-inner { gap: 24px; }
}
/* The full company name in the header needs more room than the old short mark,
   so the inline links hand over to the drawer a little earlier. */
@media (max-width: 1240px) {
  .navlinks, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav { justify-content: space-between; }
}
@media (max-width: 1024px) {
  .with-rail { grid-template-columns: 1fr; gap: 30px; }
  .rail { position: static; }
  .rail ul { display: flex; flex-wrap: wrap; border-left: 0; border-top: 2px solid var(--line); }
  .rail li a { border-left: 0; border-top: 2px solid transparent; margin: -2px 0 0; padding: 10px 16px 10px 0; }
  .rail li a.is-current { border-left-color: transparent; border-top-color: var(--blue); }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .split, .split--even { grid-template-columns: 1fr; gap: 34px; }
  .split--flip > :first-child { order: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: var(--hair); }
  .statline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statline > div:nth-child(2n) { border-right: 0; }
  .statline > div:nth-child(-n+2) { border-bottom: var(--hair); }
  .cta-inner { display: block; }
  .cta-side { margin-top: 26px; max-width: none; }
  .paths { grid-template-columns: 1fr; }
  .hero-metrics { margin-top: 22px; }
  .path { border-right: 0; border-bottom: var(--hair); }
  .path:last-child { border-bottom: 0; }
}
@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lane { grid-template-columns: 40px minmax(0, 1fr) 26px; gap: 14px; padding: 20px 0; }
  .lane-meta { display: none; }
  .glossary-item { grid-template-columns: 1fr; gap: 10px; }
  .form { padding: 26px 22px 30px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .trust-line { margin-top: 34px; }
  .art-frame { padding: 18px; }
  .ticker-inner { display: block; padding-block: 20px; min-height: 0; }
  .ticker-title { border-right: 0; padding-right: 0; white-space: normal; margin-bottom: 14px; }
  .ticker-marquee { width: 100%; }
  .hdd-strip { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav { height: 76px; }
  .brand strong { font-size: 17px; }
  .h-hero { font-size: 42px; letter-spacing: -.07em; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: var(--hair); }
  .step:last-child { border-bottom: 0; }
  .statline { grid-template-columns: 1fr; }
  .statline > div { border-right: 0; border-bottom: var(--hair); }
  .markets { grid-template-columns: 1fr; }
  /* the ribbon keeps scrolling on small phones — slightly slower and with
     a little more air between items so it stays readable at this width */
  .ticker-item { font-size: 10px; padding-right: 34px; }
  .ticker-track { animation-duration: 26s; }
  .ticker-title { font-size: 12px; margin-bottom: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .whatsapp-fab .fab-label { display: none; }
  .whatsapp-fab { padding: 15px; right: 16px; bottom: 16px; }
  /* keep the floating WhatsApp button clear of the last line of the footer */
  .footer-bar { padding-bottom: 84px; }
  .btn { width: 100%; }
  .brand svg { height: 28px; }
  .brand-name { font-size: 13.5px; letter-spacing: .035em; white-space: normal; }
  .hero-metrics { gap: 12px; }
  .metric { flex: 1 1 100%; }
}

/* --- 27a. TARGET SIZE (WCAG 2.2 - 2.5.8) -------------------------------
   Every standalone navigation target clears 24x24 CSS px. Links inside running
   prose are exempt under the "inline" exception and are left alone so line
   spacing is not disturbed. */
.navlinks a { min-height: 24px; display: inline-flex; align-items: center; }
.breadcrumbs a, .breadcrumbs [aria-current="page"] {
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-col li { margin-bottom: 6px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-bar nav a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 24px; }
.rail li a { min-height: 24px; display: flex; align-items: center; }
.faq summary { min-height: 44px; }

/* --- 27b. COLLISION SAFEGUARDS ----------------------------------------- */
/* Long words and long headings can never push out of their container. */
.h-hero, .h-1, .h-2, .h-3, .lane h3, .card h3, .tile-body h3, .step h3,
.glossary-item dt, .faq summary { overflow-wrap: break-word; }
.lane-meta, .market b, .market span, .ticker-title { overflow-wrap: anywhere; }
.metric b { overflow-wrap: anywhere; }
.split > *, .grid > *, .hero-grid > * { min-width: 0; }
.table-wrap { max-width: 100%; }
.prose img, .prose svg { max-width: 100%; height: auto; }
.condition ul { margin-top: 14px; }
.form-foot { row-gap: 18px; }
.breadcrumbs ol { row-gap: 4px; }
.actions > * { max-width: 100%; }

/* --- 28. PRINT ---------------------------------------------------------- */
@media print {
  .site-header, .whatsapp-fab, .drawer, .scrim, .cta-band, .ticker { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}