/* Billman Midstream Trading — site styles (October 2026 rebuild).
   Type: Gloock (a high-contrast serif) for headings, Commissioner for reading and interface text. Colour: white and steel grey, chart navy for dark bands, the logo red for marks only. */

/* Fonts, self-hosted (SIL Open Font License, see /assets/fonts/OFL-*.txt).
   Gloock for headings: one weight, declared for 400-900 so bold headings never get a fake bold.
   Commissioner for text: static instances of the variable font at 400, 600, 700 and 400 slanted. */
@font-face { font-family: 'Gloock'; src: url('/assets/fonts/gloock-regular.woff') format('woff'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('/assets/fonts/commissioner-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('/assets/fonts/commissioner-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('/assets/fonts/commissioner-semibold.woff') format('woff'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('/assets/fonts/commissioner-bold.woff') format('woff'); font-weight: 700 900; font-style: normal; font-display: swap; }

:root {
  --ink: #17212B;
  --navy: #12283C;
  --navy-deep: #0C1D2C;
  --steel: #56626E;
  --rule: #CDD4DB;
  --mist: #EDF0F3;
  --paper: #FFFFFF;
  --red: #D7000F;
  --focus: #3C8DE0;
  --sans: 'Commissioner', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cond: 'Gloock', Georgia, 'Times New Roman', serif; /* headings (the name dates from the earlier condensed face) */
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 76px;
  --space-section: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 64px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-kerning: normal; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }
.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; }

/* ---------- type ---------- */
.display { font-family: var(--cond); font-weight: 700; font-size: clamp(44px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.005em; }
.h1 { font-family: var(--cond); font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 1.0; }
.h2 { font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1.06; letter-spacing: .002em; text-wrap: balance; }
.h3 { font-family: var(--sans); font-weight: 700; font-size: 21px; line-height: 1.3; }
.h4 { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.4; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink); }
.muted { color: var(--steel); }
.small { font-size: 14.5px; line-height: 1.55; }
.measure { max-width: 66ch; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space-section) 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #fff; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section + .section:not(.section--mist):not(.section--navy) { border-top: 1px solid var(--rule); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.stack > * + * { margin-top: 20px; }
.section-head { display: block; max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head .h2 { max-width: 24ch; }
.section-head .h2 + p { margin-top: 16px; }
.section-head p { color: var(--steel); max-width: 62ch; font-size: 18px; line-height: 1.55; }
.section--navy .section-head p, .section--navy .muted { color: #C2CCD6; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border: 2px solid var(--navy); background: var(--navy); color: #fff; font: 700 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--navy); }
.btn--light:hover { background: transparent; color: #fff; }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--red); }
.link:hover { text-decoration-thickness: 2px; }
.section--navy .link { text-decoration-color: rgba(255,255,255,.6); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header__bar { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { flex: 0 0 auto; display: block; }
.brand img { width: 172px; height: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: stretch; list-style: none; gap: 2px; }
.nav__item { position: relative; }
.nav__link, .nav__toggle { display: flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 12px; border: 0; background: none; color: var(--ink); font: 400 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; position: relative; }
.nav__link::after, .nav__toggle::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .15s; }
.nav__link:hover::after, .nav__toggle:hover::after, .nav__toggle[aria-expanded="true"]::after, .nav__item.is-current > .nav__link::after, .nav__item.is-current > .nav__toggle::after { transform: scaleX(1); }
.caret { width: 10px; height: 10px; flex: 0 0 auto; transition: transform .15s; }
[aria-expanded="true"] > .caret { transform: rotate(180deg); }
.nav__panel { position: absolute; left: 0; top: 100%; min-width: 340px; background: var(--paper); border: 1px solid var(--rule); border-top: 0; box-shadow: 0 18px 40px rgba(18, 40, 60, .12); padding: 14px 0; display: none; }
.nav__panel.is-open { display: block; }
.nav__panel a { display: block; padding: 10px 24px; text-decoration: none; color: var(--ink); }
.nav__panel a:hover, .nav__panel a:focus-visible { background: var(--mist); }
.nav__panel strong { display: block; font-size: 15.5px; }
.nav__panel span { display: block; font-size: 13.5px; color: var(--steel); line-height: 1.4; margin-top: 2px; }
.nav__panel .nav__overview { border-bottom: 1px solid var(--rule); margin-bottom: 8px; padding-bottom: 14px; }
.lang { position: relative; margin-left: 4px; }
.lang__toggle { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; }
.lang__toggle:hover { border-color: var(--steel); }
.flag { width: 22px; height: 15px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(18, 40, 60, .12); list-style: none; padding: 6px 0; display: none; z-index: 60; }
.lang__menu.is-open { display: block; }
.lang__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--ink); font-size: 15px; }
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--mist); }
.lang__menu a[aria-current="true"] { font-weight: 700; }
.header-cta { margin-left: 14px; min-height: 44px; padding: 10px 20px; font-size: 15px; }
.menu-button { display: none; margin-left: auto; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 15px/1 var(--sans); cursor: pointer; }
.menu-button svg { width: 18px; height: 18px; }

@media (max-width: 1239px) {
  .menu-button { display: inline-flex; }
  .nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); overflow-y: auto; padding: 8px var(--gutter) 40px; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--rule); }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__link, .nav__toggle { height: auto; width: 100%; padding: 18px 0; font-size: 19px; justify-content: space-between; }
  .nav__link::after, .nav__toggle::after { display: none; }
  .nav__panel { position: static; box-shadow: none; border: 0; min-width: 0; padding: 0 0 12px; }
  .nav__panel a { padding: 10px 0 10px 16px; }
  .lang { margin: 24px 0 0; }
  .lang__toggle { display: none; }
  .lang__menu { display: flex !important; position: static; box-shadow: none; border: 0; padding: 0; gap: 8px; min-width: 0; }
  .lang__menu a { border: 1px solid var(--rule); padding: 10px 14px; }
  .lang__menu a[aria-current="true"] { border-color: var(--navy); }
  .header-cta { margin: 20px 0 0; width: 100%; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 480px) { .brand img { width: 148px; } .menu-button span { display: none; } }

/* ---------- home hero slider ---------- */
.hero { position: relative; height: min(88vh, 860px); min-height: 560px; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 0s linear 1.4s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.4s ease, visibility 0s; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active img { animation: drift 8s ease-out both; }
.hero__slide.is-active .hero__text > * { animation: hero-in .9s cubic-bezier(.2,.7,.2,1) both; }
.hero__slide.is-active .hero__text > *:nth-child(2) { animation-delay: .15s; }
.hero__slide.is-active .hero__text > *:nth-child(3) { animation-delay: .3s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 34, .86) 0%, rgba(9, 22, 34, .62) 42%, rgba(9, 22, 34, .1) 78%), linear-gradient(0deg, rgba(9, 22, 34, .55) 0%, rgba(9, 22, 34, 0) 45%); }
.hero__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(56px, 9vh, 104px); }
.hero__text { max-width: 760px; }
.hero__text .display { margin-bottom: 26px; font-size: clamp(40px, 5.4vw, 80px); }
html[lang="es"] .hero__text .display { font-size: clamp(36px, 4.6vw, 68px); }
.hero__text p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 560px; color: #E3E9EF; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide.is-active { transition: none; }
  .hero__slide.is-active img, .hero__slide.is-active .hero__text > * { animation: none; }
}
@media (max-width: 700px) {
  .hero { height: 86vh; min-height: 520px; }
  .hero__shade { background: linear-gradient(0deg, rgba(9, 22, 34, .92) 0%, rgba(9, 22, 34, .7) 48%, rgba(9, 22, 34, .25) 100%); }
}

/* ---------- interior page hero ---------- */
.page-hero { position: relative; color: #fff; background: var(--navy-deep); min-height: clamp(360px, 52vh, 520px); display: flex; align-items: flex-end; overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 34, .88) 0%, rgba(9, 22, 34, .6) 50%, rgba(9, 22, 34, .15) 100%); z-index: 1; }
.page-hero .wrap { position: relative; z-index: 2; padding-top: 56px; padding-bottom: clamp(44px, 7vh, 72px); }
.page-hero .h1 { max-width: 16ch; margin: 14px 0 20px; }
.page-hero p { max-width: 640px; color: #E3E9EF; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.page-hero--plain { min-height: 0; background: var(--mist); color: var(--ink); }
.page-hero--plain::before { display: none; }
.page-hero--plain p { color: var(--steel); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; font-size: 14px; color: #C9D3DC; }
.crumbs li + li::before { content: '/'; margin: 0 10px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero--plain .crumbs { color: var(--steel); }

/* ---------- in-page navigation ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.subnav ul { display: flex; gap: 28px; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 18px 0 15px; text-decoration: none; color: var(--steel); font-size: 15px; border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.is-active { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- index rows (service lines, product list) ---------- */
.rows { border-top: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: 300px minmax(0, 1fr) 260px; gap: clamp(24px, 3.5vw, 56px); padding: 36px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.row__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.row__title { font-family: var(--cond); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; margin-bottom: 12px; }
.row__title a { text-decoration: none; }
.row__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--red); }
.row__links { list-style: none; border-top: 1px solid var(--rule); }
.row__links li { border-bottom: 1px solid var(--rule); }
.row__links a { display: block; padding: 10px 0; text-decoration: none; font-size: 15.5px; }
.row__links a:hover { color: var(--red); }
@media (max-width: 1000px) { .row { grid-template-columns: 220px minmax(0, 1fr); } .row__links { grid-column: 2; } }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } .row__links { grid-column: auto; } }

/* ---------- specification table ---------- */
.spec { font-variant-numeric: tabular-nums lining-nums; }
.spec caption { text-align: left; font-size: 14.5px; color: var(--steel); padding-bottom: 12px; caption-side: bottom; padding-top: 14px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--rule); }
.spec thead th { font-size: 13.5px; color: var(--steel); font-weight: 700; border-bottom: 2px solid var(--ink); padding-top: 0; }
.spec tbody th { font-weight: 700; width: 30%; }
.spec td:last-child, .spec th:last-child { padding-right: 0; }
.spec a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.spec a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.section--navy .spec th, .section--navy .spec td { border-color: rgba(255,255,255,.2); }
.section--navy .spec thead th { color: #C2CCD6; border-bottom-color: #fff; }
@media (max-width: 640px) {
  .spec--stack thead { display: none; }
  .spec--stack tr { display: block; border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .spec--stack th, .spec--stack td { display: block; border: 0; padding: 2px 0; width: auto; }
  .spec--stack td::before { content: attr(data-label) ': '; color: var(--steel); }
}

/* ---------- definition grid ---------- */
.defs { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0 clamp(24px, 3.5vw, 48px); }
.defs > div { border-top: 2px solid var(--ink); padding: 18px 0 32px; }
.defs dt { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.defs dd { margin: 0; color: var(--steel); }
.section--navy .defs > div { border-top-color: rgba(255,255,255,.85); }
.section--navy .defs dd { color: #C9D3DC; }
@media (max-width: 900px) { .defs { --cols: 2 !important; } }
@media (max-width: 560px) { .defs { --cols: 1 !important; } }

/* key facts as a ruled two-column table */
.facts { border-top: 2px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* plain ruled list */
.ticks { list-style: none; border-top: 1px solid var(--rule); }
.ticks li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 22px; width: 12px; height: 2px; background: var(--red); }
.section--navy .ticks, .section--navy .ticks li { border-color: rgba(255,255,255,.2); }

/* ---------- transaction route (signature element) ---------- */
.route { position: relative; margin: 8px 0 44px; }
.route__line { position: relative; height: 34px; }
.route__line::before, .route__line::after { content: ''; position: absolute; height: 2px; background: var(--red); }
.route__line::before { top: 9px; left: 0; right: 8%; }
.route__line::after { top: 23px; left: 8%; right: 0; }
.route__node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.route__node--a { left: -2px; top: 4px; }
.route__node--b { right: -2px; top: 18px; }
.route__labels { display: flex; justify-content: space-between; font-size: 14px; color: var(--steel); margin-top: 6px; }
.route__labels span:last-child { text-align: right; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.steps > li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps > li::before { content: counter(step); display: block; font-family: var(--cond); font-size: 40px; line-height: 1; color: var(--red); margin-bottom: 14px; }
.steps h3 { font-size: 18px; margin-bottom: 8px; }
.steps p { color: var(--steel); font-size: 15.5px; }
.steps .docs { margin-top: 12px; font-size: 14.5px; color: var(--ink); }
.steps .docs strong { display: block; font-size: 13.5px; color: var(--steel); }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .route { display: none; } }

/* ---------- photo band ---------- */
.band { position: relative; color: #fff; background: var(--navy-deep); overflow: hidden; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 34, .92) 0%, rgba(9, 22, 34, .78) 55%, rgba(9, 22, 34, .45) 100%); z-index: 1; }
.band .wrap { position: relative; z-index: 2; }

/* ---------- media figure ---------- */
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure figcaption { font-size: 14px; color: var(--steel); margin-top: 10px; }

/* ---------- person ---------- */
.person { border-top: 2px solid var(--ink); padding-top: 22px; }
.person__name { font-family: var(--cond); font-size: clamp(34px, 3.4vw, 48px); line-height: 1.02; }
.person__role { color: var(--steel); margin: 8px 0 18px; font-size: 18px; }

/* ---------- downloads ---------- */
.downloads { list-style: none; border-top: 2px solid var(--ink); }
.downloads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.downloads h3 { font-size: 19px; margin-bottom: 4px; }
.downloads p { color: var(--steel); font-size: 15.5px; }
.downloads .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
@media (max-width: 640px) { .downloads li { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 700; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 28px; width: 12px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 33px; }
.faq details > div { padding: 0 0 22px; color: var(--steel); max-width: 72ch; }

/* ---------- prose (legal and policy pages) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--sans); font-size: 23px; line-height: 1.3; margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 28px 0 10px; }
.prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose .updated { color: var(--steel); font-size: 15px; margin-bottom: 32px; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); }
.toc ol { list-style: none; border-top: 2px solid var(--ink); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: block; padding: 10px 0; text-decoration: none; font-size: 15px; color: var(--steel); }
.toc a:hover { color: var(--ink); }
.with-toc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .with-toc { grid-template-columns: 1fr; } .toc { position: static; } }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; font-size: 15px; }
.field .opt { font-weight: 400; color: var(--steel); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #9AA6B2; border-radius: 0; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field .error { color: var(--red); font-size: 14px; min-height: 0; }
.field-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; grid-column: 1 / -1; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--navy); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.form__foot p { color: var(--steel); font-size: 14.5px; }
.form-status { grid-column: 1 / -1; padding: 16px 18px; border-left: 4px solid var(--navy); background: var(--mist); }
.form-status[hidden] { display: none; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* contact card */
.contact-card { background: var(--navy); color: #fff; padding: clamp(28px, 3vw, 40px); }
.contact-card dl > div { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.contact-card dt { font-size: 14px; color: #C2CCD6; }
.contact-card dd { margin: 4px 0 0; font-size: 18px; }
.contact-card a { text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; }

/* ---------- closing band ---------- */
.closing { background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 112px) 0; }
.closing__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.closing .h2 { max-width: 16ch; }
.closing dl > div { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.closing dt { color: #C2CCD6; }
.closing dd { margin: 0; }
.closing a { text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; }
@media (max-width: 900px) { .closing__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #C9D3DC; font-size: 15px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-body { padding-top: clamp(56px, 7vw, 88px); }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.footer-id__logo { display: inline-block; }
.footer-id__logo img { width: 190px; }
.footer-id__line { margin: 22px 0 28px; max-width: 40ch; color: #C9D3DC; }
.footer-contact { margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
.footer-contact > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-contact dt { color: #93A3B4; font-size: 14px; }
.footer-contact dd { margin: 0; color: #fff; }
.footer-contact address { font-style: normal; }
.social { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #fff; font-weight: 700; }
.social svg { width: 22px; height: 22px; }

.footer-news { background: var(--navy); padding: clamp(28px, 3.4vw, 44px); border-top: 3px solid var(--red); }
.footer-news__title { font-family: var(--cond); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; color: #fff; margin-bottom: 8px; }
.footer-news__text { color: #C9D3DC; margin-bottom: 24px; }
.footer-news__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; }
.footer-news label { display: block; font-size: 14px; color: #C9D3DC; margin-bottom: 6px; }
.footer-news .opt { color: #93A3B4; }
.footer-news input[type="text"], .footer-news input[type="email"] { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.04); color: #fff; font: 16px/1.4 var(--sans); border-radius: 0; }
.footer-news input::placeholder { color: rgba(255,255,255,.5); }
.footer-news input:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: #fff; }
.footer-news [aria-invalid="true"] { border-color: #FF4B55; }
.footer-news__consent { display: flex !important; gap: 12px; align-items: flex-start; margin: 18px 0 0 !important; font-size: 14.5px !important; line-height: 1.5; color: #E3E9EF !important; cursor: pointer; }
.footer-news__consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--red); }
.footer-news__consent input[aria-invalid="true"] { outline: 2px solid #FF4B55; outline-offset: 2px; }
.footer-news__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
.footer-news__note { font-size: 13.5px; color: #93A3B4; margin: 0; max-width: 40ch; }
.footer-news__note a { color: #C9D3DC; text-decoration: underline; text-underline-offset: 3px; }
.footer-news__status { margin: 16px 0 0; padding: 10px 14px; background: rgba(255,255,255,.08); color: #fff; border-left: 3px solid var(--red); }
.footer-news__status[hidden] { display: none; }

.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 72px); padding-top: 36px; padding-bottom: 40px; position: relative; }
.footer-links::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255,255,255,.14); }
.footer-links h2 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: #C9D3DC; }
.footer-links a:hover { color: #fff; }
.footer-legal { position: relative; padding-top: 22px; padding-bottom: 96px; /* clears the floating WhatsApp button at the very bottom of the page */ display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: flex-end; font-size: 13.5px; color: #93A3B4; }
.footer-legal p { margin: 0; }
.nowrap { white-space: nowrap; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; }
.footer-legal a { color: #C9D3DC; }
@media (max-width: 1000px) { .footer-top { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-news__fields { grid-template-columns: 1fr; } .footer-contact > div { grid-template-columns: 1fr; gap: 2px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

/* WhatsApp button */
.wa-button { position: fixed; left: 20px; bottom: 20px; z-index: 45; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wa-button img { width: 30px; height: 30px; }
.wa-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.menu-open .wa-button { display: none; }

/* ---------- responsive grid helpers ---------- */
@media (max-width: 900px) {
  .split, .split--even, .section-head { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
}
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header { position: static; }
  .nav, .menu-button, .subnav, .site-footer, .wa-button, .closing, .skip, .page-hero .actions, .refs .ref__icon { display: none !important; }
  .page-hero { min-height: 0; }
  .page-hero .wrap { padding-top: 40px; padding-bottom: 40px; }
  .section { padding: 36px 0; }
  .standards > div, .defs > div, .ticks li, .facts > div, .steps > li, .section--navy .split, .section:last-child .split { break-inside: avoid; }
  .crumbs { display: none; }
  .print-only { display: block !important; }
  h2, h3 { break-after: avoid; }
  .section-head { margin-bottom: 24px; }
  a { text-decoration: none; }
}

/* ---------- additions for the page templates ---------- */
.section.band + .section, .section + .section.band { border-top: 0; }
.band .section-head p, .band .muted { color: #D2DAE2; }
.band .defs > div { border-top-color: rgba(255,255,255,.85); }
.band .defs dd { color: #D2DAE2; }
.band .link { text-decoration-color: rgba(255,255,255,.6); }
.more { margin-top: 28px; }
.facts--spaced { margin-top: 36px; }
.standards { border-top: 2px solid var(--ink); }
.standards > div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.standards dt { font-weight: 700; }
.standards dd { margin: 0; color: var(--steel); }
.section--navy .standards { border-top-color: #fff; }
.section--navy .standards > div { border-bottom-color: rgba(255,255,255,.2); }
.section--navy .standards dd { color: #C9D3DC; }
@media (max-width: 640px) { .standards > div { grid-template-columns: 1fr; gap: 4px; } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.pair__item { border-top: 2px solid var(--ink); padding-top: 24px; }
.pair__item .h3 { font-family: var(--cond); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; margin-bottom: 14px; max-width: 18ch; }
.pair__item .actions { margin-top: 24px; }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }


/* principles: large condensed names on navy */
.principles { list-style: none; border-top: 1px solid rgba(255,255,255,.3); }
.principles li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.2); align-items: baseline; }
.principles h3 { font-family: var(--cond); font-size: clamp(28px, 3vw, 44px); line-height: 1.04; }
.principles p { color: #C9D3DC; max-width: 52ch; }
@media (max-width: 700px) { .principles li { grid-template-columns: 1fr; gap: 8px; } }

/* a single statement set large */
.statement { font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; max-width: 26ch; }
.callout { border-left: 3px solid var(--red); padding: 4px 0 4px 18px; color: var(--ink); max-width: 66ch; }
.section--navy .callout { color: #fff; }

/* external reference links: official sources, open in a new tab */
.ref { display: inline-flex; align-items: baseline; gap: 4px; color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ref:hover { text-decoration-color: var(--red); }
.ref__icon { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; position: relative; top: 1px; opacity: .7; }
.refs { display: block; margin-top: 8px; font-size: 14.5px; color: var(--steel); }
.refs .ref { color: var(--ink); }
.section--navy .refs, .band .refs { color: #C2CCD6; }
.section--navy .refs .ref, .band .refs .ref { color: #fff; text-decoration-color: rgba(255,255,255,.45); }

/* ---------- leadership ---------- */
.leader { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.leader__title { font-family: var(--cond); font-size: clamp(64px, 9vw, 136px); line-height: .92; letter-spacing: -.01em; }
.leader__role { font-size: clamp(19px, 1.6vw, 22px); color: var(--steel); margin: 18px 0 36px; }
.leader .route { margin-bottom: 0; }
.leader__text .lead { margin-bottom: 32px; }
@media (max-width: 900px) { .leader { grid-template-columns: 1fr; } }

/* ---------- glossary ---------- */
.glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.glossary > div { border-top: 1px solid #B9C3CD; padding: 18px 0 22px; scroll-margin-top: calc(var(--header-h) + 72px); }
.glossary dt { font-weight: 700; margin-bottom: 6px; }
.glossary dd { margin: 0; color: var(--steel); }
.glossary > div:target { background: linear-gradient(90deg, rgba(215, 0, 15, .06), transparent 70%); }
@media (max-width: 760px) { .glossary { grid-template-columns: 1fr; } }

/* ---------- numbered sequence (only where the order matters) ---------- */
.sequence { list-style: none; counter-reset: seq; border-top: 2px solid var(--ink); }
.sequence > li { counter-increment: seq; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.sequence > li::before { content: counter(seq); font-family: var(--cond); font-size: 26px; line-height: 1; color: var(--red); }
.sequence--small > li { padding: 12px 0; font-size: 15.5px; }
.sequence--small > li::before { font-size: 22px; }
.section--navy .sequence { border-top-color: #fff; }
.section--navy .sequence > li { border-bottom-color: rgba(255,255,255,.2); }
.list-title { margin: 32px 0 12px; }

/* ---------- products ---------- */
.plist { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 40px); }
.plist__link { display: block; text-decoration: none; }
.plist__link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plist__name { display: block; font-family: var(--cond); font-weight: 700; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; margin-top: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.plist__link:hover .plist__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--red); }
.plist__spec > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.plist__spec dt { color: var(--steel); }
.plist__spec dd { margin: 0; }
@media (max-width: 1000px) { .plist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plist { grid-template-columns: 1fr; } }

.product { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.product__ask { position: sticky; top: calc(var(--header-h) + 24px); background: var(--mist); padding: clamp(24px, 3vw, 36px); border-top: 3px solid var(--red); }
.product__ask .h3 { margin-bottom: 10px; }
.product__ask .ticks { margin-top: 20px; }
.product__ask .actions { flex-direction: column; align-items: stretch; margin-top: 24px; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } .product__ask { position: static; } }

/* the certificate: reference terms set like a certificate of quality */
.certificate { border-top: 6px double var(--ink); border-bottom: 2px solid var(--ink); }
.certificate tbody th { width: 34%; color: var(--steel); font-weight: 400; font-size: 15.5px; padding-top: 18px; }
.certificate td { font-size: 17px; padding-top: 16px; }
.certificate tr:first-child td { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.1; }
@media (max-width: 560px) { .certificate th, .certificate td { display: block; width: auto !important; border: 0; padding: 4px 0; } .certificate tr { display: block; border-bottom: 1px solid var(--rule); padding: 10px 0; } }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chips a { display: inline-block; padding: 10px 16px; border: 1px solid var(--rule); text-decoration: none; font-size: 15.5px; background: var(--paper); }
.chips a:hover { border-color: var(--ink); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact .h2 { margin-bottom: 32px; }
.contact__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.contact-card .h3 { color: #fff; margin-bottom: 8px; }
.contact-card address { font-style: normal; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact__aside { position: static; } }
.field .hint { font-size: 14px; color: var(--steel); }
.form-privacy { grid-column: 1 / -1; }
.form-privacy a { color: inherit; }
.error:empty { display: none; }
.error--check { grid-column: 1 / -1; margin: -10px 0 0 32px; }
.check .opt { color: var(--steel); }

/* ---------- mandate registration ---------- */
.mandate { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mandate__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.mandate__aside .h2 { margin-bottom: 16px; }
@media (max-width: 1000px) { .mandate { grid-template-columns: 1fr; } .mandate__aside { position: static; } }

.mform { border: 1px solid var(--rule); border-top: 6px double var(--ink); background: var(--paper); padding: clamp(22px, 3.4vw, 48px); box-shadow: 0 30px 60px -40px rgba(18, 40, 60, .35); }
.mform__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mform__title { font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.mform__count { color: var(--steel); font-size: 15px; font-variant-numeric: tabular-nums; }
.mform__route { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 8px; padding-top: 22px; }
.mform__route::before, .mform__route::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--rule); }
.mform__route::before { top: 5px; }
.mform__route::after { top: 11px; }
.mform__route li { position: relative; font-size: 14px; color: var(--steel); }
.mform__route li:last-child { text-align: right; }
.mform__route li:nth-child(2), .mform__route li:nth-child(3) { text-align: center; }
.mform__node { position: absolute; top: -22px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); z-index: 1; }
.mform__route li:nth-child(2) .mform__node, .mform__route li:nth-child(3) .mform__node { left: calc(50% - 7px); }
.mform__route li:last-child .mform__node { left: auto; right: 0; }
.mform__route li.is-current { color: var(--ink); font-weight: 700; }
.mform__route li.is-current .mform__node { border-color: var(--red); box-shadow: 0 0 0 4px rgba(215, 0, 15, .14); }
.mform__route li.is-done .mform__node { background: var(--red); border-color: var(--red); }
.mform__route li.is-done { color: var(--ink); }
.mform__route .progress { display: none; }
.mform.is-stepped .mform__route { background: linear-gradient(var(--red), var(--red)) 6px 5px / var(--done, 0%) 2px no-repeat, linear-gradient(var(--red), var(--red)) 6px 11px / var(--done, 0%) 2px no-repeat; }
.mform__part { border: 0; margin: 0; padding: 32px 0 0; min-width: 0; }
.mform__part + .mform__part { border-top: 1px solid var(--rule); margin-top: 36px; }
.mform.is-stepped .mform__part + .mform__part { border-top: 0; margin-top: 0; }
.mform__part > legend { display: flex; align-items: baseline; gap: 14px; font-family: var(--cond); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; padding: 0; margin-bottom: 24px; float: left; width: 100%; }
.mform__part > legend + * { clear: both; }
.mform__part > legend:focus { outline: none; }
.mform__part > legend:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.mform__no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--red); color: var(--red); border-radius: 50%; font-size: 18px; flex: 0 0 auto; position: relative; top: -2px; }
.mform__nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); }
.mform__nav [data-submit], .mform__nav [data-next] { margin-left: auto; }
.mform__nav [hidden] { display: none; }
.mform .form-status { margin-top: 24px; }
.mform__summary { border-top: 2px solid var(--ink); margin-bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.mform__summary > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.mform__summary dt { color: var(--steel); }
.mform__summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .mform__summary { grid-template-columns: 1fr; } }

/* choice tiles: real radio buttons, larger targets */
.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice > legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 10px; }
.choice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice__item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid #9AA6B2; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.choice__item:hover { border-color: var(--ink); }
.choice__item input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--red); }
.choice__item span { font-size: 14.5px; color: var(--steel); line-height: 1.45; }
.choice__item strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }
.choice__item:has(input:checked) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.choice__item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice__item:has(input[aria-invalid="true"]) { border-color: var(--red); }
@media (max-width: 640px) { .choice__grid, .choice__grid--3 { grid-template-columns: 1fr; } }

/* ---------- footer: Become our mandate ---------- */
.mstrip { position: relative; background: var(--mist); color: var(--ink); padding: clamp(48px, 6vw, 80px) 0 clamp(44px, 5vw, 64px); }
.mstrip__line { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.mstrip__line span { position: absolute; height: 2px; background: var(--red); }
.mstrip__line span:first-child { top: 0; left: 0; right: 22%; }
.mstrip__line span:last-child { top: 6px; left: 22%; right: 0; }
.mstrip__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mstrip__cta { margin-top: 24px; }
.mstrip__steps { padding-top: 6px; }
.mstrip__title { font-family: var(--cond); font-size: clamp(34px, 3.4vw, 50px); line-height: 1.02; margin-bottom: 14px; }
.mstrip__lead p { color: var(--steel); max-width: 44ch; }
.mstrip__steps { list-style: none; counter-reset: ms; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mstrip__steps li { counter-increment: ms; border-top: 2px solid var(--ink); padding-top: 14px; font-size: 15px; color: var(--steel); }
.mstrip__steps li::before { content: counter(ms); display: block; font-family: var(--cond); font-weight: 700; font-size: 30px; line-height: 1; color: var(--red); margin-bottom: 10px; }
.mstrip__steps strong { display: block; color: var(--ink); margin-bottom: 4px; font-size: 16px; }
.site-footer .mstrip a.btn { color: #fff; }
.site-footer .mstrip a.btn:hover { text-decoration: none; }
@media (max-width: 1100px) { .mstrip__grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 640px) { .mstrip__steps { grid-template-columns: 1fr; } }

.social { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #fff; }
.social svg { width: 22px; height: 22px; }

.notfound { padding: clamp(64px, 10vw, 140px) 0; }
.notfound .h1 { max-width: 18ch; }
.site-footer .btn--light { color: var(--navy); text-decoration: none; }
.site-footer .btn--light:hover { color: #fff; }

.print-only { display: none; }

.mform__intro { margin-top: 14px; color: var(--steel); max-width: 60ch; }
.mform__route--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mform__route--3 li:nth-child(3) { text-align: right; }
.mform__route--3 li:nth-child(3) .mform__node { left: auto; right: 0; }
.mform__head p { margin: 0; }

.footer-legal::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255,255,255,.14); }

/* ---------- preloader: every page. The logo appears, then the product line and the payment line draw in opposite
   directions, as on the transaction route. Hidden without JavaScript and for reduced motion. The page underneath is
   never locked: switching the scroll lock off made the scrollbar appear mid-fade, which shifted the page sideways and
   made the overlay flash back for a frame, so the preloader seemed to play twice. ---------- */
.preloader { display: none; }
html.is-preloading .preloader { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--navy-deep);
  transition: opacity .35s ease, visibility 0s linear .35s; animation: preloader-failsafe .35s ease 2.5s forwards; }
html.is-preloading.is-loaded .preloader { opacity: 0; visibility: hidden; }
.preloader__mark { width: min(300px, 64vw); }
.preloader__mark img { width: 100%; height: auto; opacity: 0; transform: translateY(8px); animation: preloader-logo .4s cubic-bezier(.2,.7,.2,1) .02s forwards; }
.preloader__route { position: relative; height: 20px; margin-top: 26px; }
.preloader__line { position: absolute; left: 0; right: 0; height: 2px; background: #FF3B47; transform: scaleX(0); }
.preloader__line--product { top: 4px; transform-origin: left center; animation: preloader-draw .5s cubic-bezier(.65,0,.35,1) .15s forwards, preloader-pulse 1.6s ease-in-out .8s infinite; }
.preloader__line--payment { top: 14px; transform-origin: right center; animation: preloader-draw .5s cubic-bezier(.65,0,.35,1) .25s forwards, preloader-pulse 1.6s ease-in-out .9s infinite; }
.preloader__node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #FF3B47; opacity: 0; }
.preloader__node--a { left: -5px; top: 0; animation: preloader-node .2s ease .15s forwards; }
.preloader__node--b { right: -5px; top: 10px; animation: preloader-node .2s ease .25s forwards; }
@keyframes preloader-logo { to { opacity: 1; transform: none; } }
@keyframes preloader-draw { to { transform: scaleX(1); } }
@keyframes preloader-node { to { opacity: 1; } }
@keyframes preloader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
@media print { .preloader { display: none !important; } }

/* =====================================================================
   Visual layer: tiles, icons, photo splits and diagrams
   ===================================================================== */
.section, .closing { --tile: var(--mist); --tile-fg: var(--ink); --tile-muted: var(--steel); }
.section--mist { --tile: #FFFFFF; }
.section--navy { --tile: rgba(255, 255, 255, .06); --tile-fg: #FFFFFF; --tile-muted: #C9D3DC; }
.band { --tile: rgba(9, 22, 34, .62); --tile-fg: #FFFFFF; --tile-muted: #D2DAE2; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; }

/* definition lists become tiles */
.defs { gap: 16px; }
.defs > div, .section--navy .defs > div, .band .defs > div { background: var(--tile); border-top: 0; padding: 26px 24px 28px; }
.defs dt { color: var(--tile-fg); font-size: 18px; }
.defs dd { color: var(--tile-muted); }
.defs dt .icon { display: block; width: 34px; height: 34px; color: var(--red); margin-bottom: 16px; }
.section--navy .defs dt .icon, .band .defs dt .icon { color: #FF4B55; }
.band .defs > div { backdrop-filter: blur(2px); }

/* steps become tiles with a numbered disc */
.steps > li { border-top: 0; background: var(--tile); padding: 22px 22px 24px; }
.steps > li::before { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; font-size: 24px; margin-bottom: 16px; }
.section--navy .steps h3 { color: #fff; }

/* standards rows carry an icon */
.standards > div { grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); align-items: start; }
.standards dt { display: flex; gap: 14px; align-items: center; }
.standards .std-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--tile); color: var(--red); display: flex; align-items: center; justify-content: center; }
.standards .std-icon .icon { width: 22px; height: 22px; }
@media (max-width: 640px) { .standards dd { padding-left: 54px; } }

/* photo and text side by side */
.media-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.media-split__img { position: sticky; top: calc(var(--header-h) + 32px); }
.media-split--reverse .media-split__img { order: 2; }
.media-split__img { margin: 0; position: relative; }
.media-split__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-split__img::after { content: ''; position: absolute; left: -14px; bottom: -14px; width: 38%; height: 38%; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); pointer-events: none; }
.media-split--reverse .media-split__img::after { left: auto; right: -14px; border-left: 0; border-right: 3px solid var(--red); }
.media-split__body .h2 { margin-bottom: 20px; }
@media (max-width: 900px) { .media-split { grid-template-columns: 1fr; } .media-split--reverse .media-split__img { order: 0; } .media-split__img::after { left: -8px; bottom: -8px; } }

/* a wide photo strip between sections */
.photo-strip { margin: 0; height: clamp(220px, 32vw, 420px); position: relative; overflow: hidden; background: var(--navy-deep); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 0 22px; background: linear-gradient(0deg, rgba(9,22,34,.8), rgba(9,22,34,0)); color: #fff; font-size: 15px; }

/* diagrams */
.diagram { margin: 0; }
.diagram__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram__scroll > svg, .diagram__scroll > .inco { min-width: 720px; }
.diagram figcaption { color: var(--steel); font-size: 14.5px; margin-top: 14px; max-width: 72ch; }
.section--navy .diagram figcaption { color: #C2CCD6; }
.diagram svg:not(.icon):not(.ref__icon) { width: 100%; height: auto; display: block; }
.diagram svg text { font-family: var(--sans); }
.diagram svg .num { font-family: var(--cond); font-weight: 700; }
.diagram svg .title { font-weight: 700; }
.diagram--panel { background: #fff; padding: clamp(18px, 3vw, 36px); box-shadow: 0 24px 50px -36px rgba(18, 40, 60, .45); }

/* seller representation: buyers - Billman - sellers */
.hub__grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.25fr) 64px minmax(0, 1fr); align-items: stretch; }
.hub__side { background: var(--tile); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.hub__side .icon { width: 36px; height: 36px; color: var(--red); }
.hub__title { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--tile-fg); margin: 0; }
.hub__text { color: var(--tile-muted); font-size: 15.5px; margin: 0; }
.hub__tag { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--tile-fg); margin-bottom: 0; }
.hub__tag .icon { width: 22px; height: 22px; }
.hub__core { background: var(--navy); color: #fff; padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.hub__core img { width: 160px; }
.hub__core ul { list-style: none; display: grid; gap: 12px; }
.hub__core li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: #E3E9EF; }
.hub__core li .icon { color: #FF4B55; width: 22px; height: 22px; margin-top: 1px; }
.hub__arrow { position: relative; }
.hub__arrow::before { content: ''; position: absolute; top: 50%; left: 8px; right: 8px; height: 2px; background: var(--red); }
.hub__arrow::after { content: ''; position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); }
.hub__arrow--in::after { right: 9px; transform: rotate(45deg); }
.hub__arrow--out::after { left: 9px; transform: rotate(-135deg); }
.hub__flows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; font-size: 14px; color: var(--steel); }
.hub__flow { display: flex; align-items: center; gap: 12px; }
.hub__flow::before { content: ''; flex: 1; height: 2px; background: var(--red); order: 1; }
.hub__flow--product::before { order: 0; }
.hub__flow--payment { justify-content: flex-end; }
.hub__flow--payment::before { order: 1; background: var(--navy); }
.section--navy .hub__flow--payment::before { background: #fff; }
@media (max-width: 900px) {
  .hub__grid { grid-template-columns: 1fr; }
  .hub__arrow { height: 44px; }
  .hub__arrow::before { left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .hub__arrow::after { left: calc(50% - 6px); right: auto; top: auto; }
  .hub__arrow--in::after { bottom: 8px; transform: rotate(135deg); }
  .hub__arrow--out::after { top: 8px; transform: rotate(-45deg); }
  .hub__flows { grid-template-columns: 1fr; }
}

/* Incoterms: who pays and where the risk passes */
.inco { display: grid; gap: 10px; }
.inco__head, .inco__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.inco__stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.inco__stages span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13.5px; color: var(--steel); padding: 0 4px 10px; line-height: 1.3; }
.inco__stages .icon { width: 28px; height: 28px; color: var(--ink); }
.inco__term strong { display: block; font-family: var(--cond); font-size: 28px; line-height: 1; }
.inco__term span { font-size: 13.5px; color: var(--steel); }
.inco__track { position: relative; height: 46px; background: repeating-linear-gradient(90deg, #DCE2E8 0 calc(20% - 2px), transparent calc(20% - 2px) 20%); }
.inco__cost { position: absolute; left: 0; top: 0; bottom: 0; width: var(--to); background: var(--red); display: flex; align-items: center; padding-left: 14px; color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.inco__risk { position: absolute; top: 50%; left: var(--at); width: 18px; height: 18px; background: var(--navy); border: 3px solid #fff; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 1px var(--navy); }
.inco__ins { position: absolute; top: -10px; left: 60%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12.5px; padding: 3px 9px; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.inco__ins .icon { width: 14px; height: 14px; }
.inco__legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; font-size: 14px; color: var(--steel); padding-left: 190px; }
.inco__legend span { display: inline-flex; align-items: center; gap: 8px; }
.inco__legend i { display: inline-block; width: 26px; height: 12px; }
.inco__legend .k-seller { background: var(--red); }
.inco__legend .k-buyer { background: #DCE2E8; }
.inco__legend .k-risk { width: 12px; height: 12px; background: var(--navy); transform: rotate(45deg); }
@media (max-width: 760px) { .inco__legend { padding-left: 0; } }

/* checkpoints along the route (ethics) */
.checkpoints { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.checkpoints::before, .checkpoints::after { content: ''; position: absolute; left: 28px; right: 28px; height: 2px; background: var(--red); }
.checkpoints::before { top: 25px; }
.checkpoints::after { top: 33px; opacity: .45; }
.checkpoints li { position: relative; }
.checkpoints__icon { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.section--mist .checkpoints__icon { background: var(--mist); }
.checkpoints__icon .icon { width: 28px; height: 28px; }
.checkpoints h3 { font-size: 18px; margin-bottom: 8px; }
.checkpoints p { color: var(--steel); font-size: 15.5px; }
@media (max-width: 900px) {
  .checkpoints { grid-template-columns: 1fr; gap: 26px; }
  .checkpoints::before { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .checkpoints::after { display: none; }
  .checkpoints li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 18px; }
  .checkpoints__icon { grid-row: span 2; margin: 0; }
}

/* the transport modes shown as icons */
.modes { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.modes li { display: inline-flex; align-items: center; gap: 10px; background: var(--tile); padding: 10px 16px 10px 12px; font-size: 15px; color: var(--tile-fg); }
.modes .icon { color: var(--red); width: 26px; height: 26px; }
.pair__img { margin: 0 0 24px; }
.pair__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pair__item { border-top: 0; padding-top: 0; }
.plist__item { background: var(--tile); }
.plist__item .plist__name { padding: 0 20px 14px; border-bottom: 0; }
.plist__item .plist__spec { padding: 0 20px 16px; }
.plist__item .plist__spec > div { border-bottom-color: var(--rule); }
.plist__link img { transition: transform .5s ease; }
.plist__link { overflow: hidden; }
.plist__link:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .plist__link img { transition: none; } .plist__link:hover img { transform: none; } }
.risk-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.risk-layout__wheel { max-width: 380px; width: 100%; margin: 0 auto; }
@media (max-width: 900px) { .risk-layout { grid-template-columns: 1fr; } .risk-layout__wheel { max-width: 300px; } }
.with-icon { display: flex; align-items: center; gap: 12px; }
.with-icon .icon { width: 30px; height: 30px; color: var(--red); }
.band .ticks, .band .ticks li { border-color: rgba(255,255,255,.22); }
@media (max-width: 640px) { .standards > div { grid-template-columns: 1fr; gap: 8px; } .standards dd { padding-left: 54px; } }
.diagram__hint { display: none; font-size: 13.5px; color: var(--steel); margin: 0 0 10px; }
@media (max-width: 760px) { .diagram__hint { display: block; } }

.closing__text { color: #C9D3DC; font-size: 19px; margin-top: 14px; max-width: 40ch; }
.closing .h2 { max-width: 20ch; }

/* home: assurance row under the hero */
.assurance { background: var(--paper); border-bottom: 1px solid var(--rule); }
.assurance__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.assurance__list li { display: flex; gap: 16px; align-items: flex-start; padding: 28px 24px 28px 0; }
.assurance__list li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.assurance__list .icon { width: 34px; height: 34px; color: var(--red); margin-top: 2px; }
.assurance__list strong { display: block; font-size: 16.5px; line-height: 1.3; }
.assurance__list span { display: block; font-size: 14.5px; color: var(--steel); line-height: 1.45; margin-top: 3px; }
@media (max-width: 1000px) { .assurance__list { grid-template-columns: 1fr 1fr; } .assurance__list li:nth-child(3) { padding-left: 0; border-left: 0; } .assurance__list li:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 520px) { .assurance__list { grid-template-columns: 1fr; } .assurance__list li, .assurance__list li + li { padding: 18px 0; border-left: 0; } .assurance__list li + li { border-top: 1px solid var(--rule); } }
.assurance + .section { border-top: 0; }
@media (max-width: 900px) { .media-split__img { position: relative; top: auto; } }

/* =====================================================================
   Image pack layer: one image per place, icon and diagram panels elsewhere
   ===================================================================== */
/* page heroes: taller, the image settles once on load */
.page-hero:not(.page-hero--plain) { min-height: clamp(400px, 60vh, 620px); }
.page-hero:not(.page-hero--plain) > img { animation: settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-hero > img { animation: none !important; } }

/* plain heroes (contact and legal pages): navy with the line motif */
.page-hero--plain { background: var(--navy-deep); color: #fff; }
.page-hero--plain::after { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 100% 120%, transparent 0 34px, rgba(255,255,255,.055) 34px 35px); pointer-events: none; }
.page-hero--plain .wrap { padding-top: 48px; padding-bottom: 56px; }
.page-hero--plain p { color: #D2DAE2; }
.page-hero--plain .crumbs, .page-hero--plain .crumbs a { color: #C2CCD6; }
.page-hero--plain .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.page-hero--plain .btn--ghost:hover { background: #fff; color: var(--ink); }

/* bands without a photograph */
.band--plain { background: var(--navy-deep); }
.band--plain::before { background: repeating-radial-gradient(circle at 0% 0%, transparent 0 46px, rgba(255,255,255,.045) 46px 47px); }

/* wide figure under a section head */
.figure--banner { margin: 0 0 clamp(36px, 4vw, 56px); position: relative; }
.figure--banner img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.figure--banner::after { content: ''; position: absolute; left: 0; bottom: 0; width: 120px; height: 4px; background: var(--red); }
@media (max-width: 700px) { .figure--banner img { aspect-ratio: 16 / 10; } }

/* service rows: icon mark instead of a photograph */
.row { grid-template-columns: 76px minmax(0, 1fr) 260px; }
.row__mark { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); color: #fff; position: relative; }
.row__mark::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.row__mark .icon { width: 36px; height: 36px; }
@media (max-width: 1000px) { .row { grid-template-columns: 76px minmax(0, 1fr); } }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } .row__mark { width: 60px; height: 60px; } .row__mark .icon { width: 28px; height: 28px; } }

/* home pair: diagram and document panels */
.pair__panel { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin: 0 0 24px; background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; text-decoration: none; }
.pair__panel::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 100% 100%, transparent 0 30px, rgba(255,255,255,.05) 30px 31px); }
.pair__panel--flow { gap: 0; padding: 0 clamp(16px, 3vw, 40px); }
.flow__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 30%; }
.flow__node .icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); box-sizing: border-box; }
.flow__node--core .icon { background: var(--red); border-color: var(--red); }
.flow__node b { font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 1.3; color: #E3E9EF; }
.flow__line { position: relative; z-index: 1; flex: 1 1 0; height: 2px; margin-bottom: 40px; background: linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%) 0 0 / 10px 2px repeat-x; }
.pair__panel--doc { perspective: 900px; }
.doc-thumb { position: relative; z-index: 2; width: 34%; aspect-ratio: 1 / 1.414; background: #12283C; box-shadow: 0 18px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; justify-content: space-between; padding: 9% 8%; transform: rotate(-3deg); transition: transform .4s ease; border-left: 4px solid var(--red); }
.doc-thumb img { width: 78%; height: auto; }
.doc-thumb__title { font-family: var(--cond); font-weight: 700; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.05; }
.doc-thumb__rule { display: block; width: 36%; height: 3px; background: var(--red); }
.doc-thumb--back { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -38% -52%; transform: rotate(5deg); background: #EDF0F3; border-left: 0; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 0; }
.pair__panel--doc:hover .doc-thumb:not(.doc-thumb--back) { transform: rotate(0deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .doc-thumb { transition: none; } }

/* buyers and sellers as cards */
.pair--cards .pair__item { background: var(--tile); padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--navy-deep); }
.pair--cards .pair__item + .pair__item { border-top-color: var(--red); }

/* product cards: icon, name, terms */
.plist__item { display: flex; flex-direction: column; border-top: 4px solid var(--navy-deep); transition: border-color .2s ease; }
.plist__item:hover { border-top-color: var(--red); }
.plist__link { padding: 26px 20px 0; overflow: visible; }
.plist__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-deep); color: #fff; }
.plist__mark .icon { width: 28px; height: 28px; }
.plist__item .plist__name { padding: 18px 0 14px; margin-top: 0; }
.plist__item .plist__spec { padding: 0 20px 18px; margin-top: auto; }
.chips a { display: inline-flex; align-items: center; gap: 10px; }
.chips a .icon { width: 20px; height: 20px; color: var(--red); }

/* media splits: framed photograph */
.media-split__img img, .figure img { box-shadow: 0 24px 48px -28px rgba(12, 29, 44, .55); }
.plist { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.plist__item .plist__spec { margin-top: 0; }
.plist__item .plist__spec > div { display: block; padding: 10px 0; }
.plist__item .plist__spec dt { font-size: 13.5px; margin-bottom: 2px; }
.plist__item--cta { background: var(--navy-deep); border-top-color: var(--red); color: #fff; }
.plist__item--cta .plist__mark { background: var(--red); }
.plist__item--cta .plist__name { color: #fff; }
.plist__note { padding: 0 20px 22px; color: #D2DAE2; font-size: 15.5px; line-height: 1.55; }
.figure--banner img { aspect-ratio: 21 / 7; }
@media (max-width: 1100px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plist { grid-template-columns: 1fr; } }
.field-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.plist__go { display: block; margin-top: 14px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.plist__item--cta { position: relative; }
.plist__item--cta .plist__link::after { content: ''; position: absolute; inset: 0; }
.page-hero--plain .btn:not(.btn--ghost) { background: #fff; color: var(--ink); border-color: #fff; }
.page-hero--plain .btn:not(.btn--ghost):hover { background: var(--mist); }

/* ---------- back to top: bottom right, above the live chat bubble ---------- */
.to-top { position: fixed; right: 24px; bottom: 100px; z-index: 44; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); color: #fff; text-decoration: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 24px -8px rgba(12, 29, 44, .55); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility 0s linear .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, background-color .2s ease; }
.to-top .icon { width: 22px; height: 22px; transition: transform .2s ease; }
.to-top:hover { background: var(--red); }
.to-top:hover .icon { transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.to-top__progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--red); transform-origin: left center; transform: scaleX(var(--progress, 0)); }
.to-top:hover .to-top__progress { background: #fff; }
body.menu-open .to-top { display: none; }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 92px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-visible { transform: none; transition: opacity .2s ease, visibility 0s; } .to-top .icon { transition: none; } }
@media print { .to-top { display: none !important; } }

/* =====================================================================
   Submit an inquiry: a trade ticket. Product lines on the left, the ticket
   they add up to on the right.
   ===================================================================== */
.iq-next { border-bottom: 1px solid var(--rule); background: var(--paper); }
.iq-next__list { list-style: none; counter-reset: iq; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iq-next__list li { counter-increment: iq; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 24px 24px 24px 0; }
.iq-next__list li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.iq-next__list li::before { content: counter(iq); grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font: 700 19px/1 var(--cond); }
.iq-next__list strong { font-size: 16px; }
.iq-next__list span { color: var(--steel); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 900px) { .iq-next__list { grid-template-columns: 1fr; } .iq-next__list li, .iq-next__list li + li { padding: 16px 0; border-left: 0; } .iq-next__list li + li { border-top: 1px solid var(--rule); } }

.iq { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.iq__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 1000px) { .iq { grid-template-columns: 1fr; } .iq__aside { position: static; } }

.iqform { border: 1px solid var(--rule); border-top: 6px double var(--ink); background: var(--paper); padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 30px 60px -40px rgba(18, 40, 60, .35); }
.iqform__part { border: 0; margin: 0; padding: 0; min-width: 0; }
.iqform__part + .iqform__part { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 32px; }
.iqform__part > legend { display: flex; align-items: center; gap: 14px; font-family: var(--cond); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; padding: 0; margin-bottom: 22px; float: left; width: 100%; }
.iqform__part > legend + * { clear: both; }
.iqform__intro { color: var(--steel); margin: -8px 0 18px; font-size: 15.5px; }
.iqform .field .hint a { color: inherit; }
.iqform .form-status { margin-top: 4px; }

/* product lines */
.plines { list-style: none; display: grid; gap: 14px; }
.pline { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 54px 18px 18px; background: var(--mist); border-left: 4px solid var(--navy-deep); }
.pline.is-new { animation: pline-in .25s ease-out; }
@keyframes pline-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pline__no { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--navy-deep); color: #fff; font: 700 20px/1 var(--cond); }
.pline__fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 14px; }
.pline__product, .pline__spec { grid-column: span 3; }
.pline__qty, .pline__unit, .pline__basis { grid-column: span 2; }
.pline .field input, .pline .field select { min-height: 46px; padding: 10px 12px; }
.pline .field label { font-size: 14px; }
.pline__remove { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid #9AA6B2; background: var(--paper); color: var(--ink); cursor: pointer; }
.pline__remove:hover { border-color: var(--red); color: var(--red); }
.pline__remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pline__remove .icon { width: 18px; height: 18px; }
.pline__remove[hidden] { display: none; }
.plines__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.plines__add .icon { width: 20px; height: 20px; }
.plines__add:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .pline { grid-template-columns: 1fr; padding: 16px 16px 18px; }
  .pline__no { width: 34px; height: 34px; font-size: 17px; }
  .pline__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pline__product, .pline__spec, .pline__basis { grid-column: 1 / -1; }
  .pline__qty, .pline__unit { grid-column: span 1; }
}

.ticks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.ticks-grid .check { grid-column: auto; }
@media (max-width: 640px) { .ticks-grid { grid-template-columns: 1fr; } }

/* the ticket */
.ticket { position: relative; background: var(--navy-deep); color: #fff; padding: 26px 24px 30px; overflow: hidden; }
.ticket::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 100% 0%, transparent 0 30px, rgba(255,255,255,.04) 30px 31px); pointer-events: none; }
.ticket > * { position: relative; }
.ticket__title { font: 700 26px/1.1 var(--cond); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
.ticket__lines { list-style: none; margin: 4px 0 0; }
.ticket__lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ticket__lines .ticket__empty { display: block; color: #C2CCD6; font-size: 15px; }
.ticket__no { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #FF4B55; color: #FF4B55; font: 700 14px/1 var(--cond); margin-top: 2px; }
.ticket__item { display: grid; gap: 2px; min-width: 0; }
.ticket__item strong { font-size: 15.5px; overflow-wrap: anywhere; }
.ticket__qty { font: 700 22px/1.15 var(--cond); overflow-wrap: anywhere; }
.ticket__qty em { font: italic 400 14.5px/1.4 var(--sans); color: #C2CCD6; }
.ticket__sub { font-size: 13.5px; color: #C2CCD6; overflow-wrap: anywhere; }
.ticket__totals { padding: 14px 0 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ticket__totals[hidden] { display: none; }
.ticket__label { font-size: 13.5px; color: #C2CCD6; margin-bottom: 6px; }
.ticket__totals ul { list-style: none; }
.ticket__totals li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14.5px; }
.ticket__totals li span { color: #C2CCD6; text-align: right; }
.ticket__meta { margin-top: 10px; }
.ticket__meta > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 14.5px; }
.ticket__meta dt { color: #C2CCD6; }
.ticket__meta dd { margin: 0; overflow-wrap: anywhere; }
.ticket__line { position: relative; height: 16px; margin-top: 18px; }
.ticket__line span { position: absolute; left: 0; right: 18%; height: 2px; background: #FF3B47; top: 3px; }
.ticket__line span + span { left: 18%; right: 0; top: 11px; }
.ticket__line::before, .ticket__line::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #FF3B47; }
.ticket__line::before { left: -2px; top: -0.5px; }
.ticket__line::after { right: -2px; top: 7.5px; }

.iq__direct { border: 1px solid var(--rule); padding: 20px 22px; }
.iq__direct-title { font: 700 20px/1.2 var(--cond); margin-bottom: 8px; }
.iq__direct p + p { margin-top: 6px; }
.iq__direct a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15.5px; color: var(--ink); }
.iq__direct a:hover { color: var(--red); }
.iq__direct .icon { width: 20px; height: 20px; color: var(--red); }
@media print { .iq__aside { display: none; } }

/* ---------- Gloock headings: a serif needs more line space and slightly smaller sizes than the old condensed face ---------- */
.display, .hero__text .display { font-size: clamp(40px, 5vw, 74px); line-height: 1.07; letter-spacing: -0.012em; }
html[lang="es"] .hero__text .display { font-size: clamp(36px, 4.3vw, 62px); }
.h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.07; letter-spacing: -0.01em; }
.page-hero .h1 { max-width: 18ch; }
.h2 { line-height: 1.12; letter-spacing: -0.005em; }
.row__title, .footer-news__title, .pair__item .h3, .plist__name, .mform__title, .mstrip__title, .hub__title, .doc-thumb__title { line-height: 1.12; }
.principles h3 { line-height: 1.1; }
.person__name { line-height: 1.08; }
.leader__title { font-size: clamp(56px, 7.6vw, 112px); line-height: 1.0; letter-spacing: -0.015em; }
.statement { line-height: 1.18; }
.certificate tr:first-child td { line-height: 1.15; }

/* ---------- Contact: three routes, then a short message form ---------- */
.routes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.route-card { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 30px; background: var(--tile); border-top: 4px solid var(--navy-deep); }
.route-card:first-child { border-top-color: var(--red); }
.route-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-deep); color: #fff; }
.route-card__icon .icon { width: 26px; height: 26px; }
.route-card__title { font-family: var(--cond); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.12; margin-top: 6px; }
.route-card p { color: var(--steel); flex: 1 1 auto; }
.route-card .btn { align-self: flex-start; margin-top: 8px; }
.contact__intro { margin: -16px 0 28px; max-width: 60ch; }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; } }
.choice > legend .opt { font-weight: 400; color: var(--steel); }
@media (max-width: 480px) { .pline__qty, .pline__unit { grid-column: 1 / -1; } }