/* The /en and /zh homes, direction "Ordem".
 *
 * A static file under public/, linked by the page that renders it, exactly
 * as the PT home's stylesheet is and for the same reason: /pt, /en and /zh
 * share one route module, so a CSS module imported there would be served on
 * all three. The name carries the file's hash — rename it after every edit
 * and update ordem-home-css.ts; tests/unit/ordem-home-css.test.ts fails
 * otherwise. Everything is scoped under .bm-ordem-home.
 *
 * Colour means one thing each (docs/design/homepage-reinvention/tokens.css):
 * night = stage, paper = documents, signal = action, aqua = execution.
 * The indigo→aqua gradient appears once, on "Brazil moves."
 */

.bm-ordem-home {
  --night: #06112f;
  --night-2: #0a1a47;
  --paper: #f7faff;
  --paper-2: #e6edf9;
  --paper-3: #d5dff1;
  --ink: #0b173b;
  --ink-2: #3e4c74;
  --dim: #aebcdd;
  --mute: #7c8fbd;
  --line: rgba(247, 250, 255, 0.12);
  --line-2: rgba(247, 250, 255, 0.24);
  --pline: rgba(11, 23, 59, 0.14);
  --signal: #046fd3;
  --signal-2: #0a5cb0;
  --aqua: #11c8d6;
  --indigo: #5b45f0;
  --byte: linear-gradient(120deg, var(--indigo), var(--aqua));

  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-voice: var(--font-newsreader), Georgia, "Times New Roman", "Songti SC", serif;
  --f-sys: var(--font-archivo), "Helvetica Neue", Arial, var(--f-cjk);
  --f-data: var(--font-ibm-plex-mono), ui-monospace, "SF Mono", Menlo, monospace, var(--f-cjk);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --r-doc: 3px;
  --r-ui: 6px;
  --r-plate: 5px;
  --gut: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --sec-y: clamp(72px, 11vh, 132px);

  font-family: var(--f-sys);
  color: #fff;
  background: var(--night);
  overflow-wrap: break-word;
}

.bm-ordem-home .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.bm-ordem-home .wrap.narrow { max-width: 820px; }
.bm-ordem-home section { padding-block: var(--sec-y); }
.bm-ordem-home .night { background: var(--night); color: #fff; }
.bm-ordem-home .paper { background: var(--paper); color: var(--ink); }
.bm-ordem-home .paper-2 { background: var(--paper-2); color: var(--ink); }

.bm-ordem-home h1, .bm-ordem-home h2, .bm-ordem-home h3 { margin: 0; letter-spacing: -0.022em; text-wrap: balance; }
.bm-ordem-home h1 { font: 700 clamp(40px, 5.6vw, 84px)/1.02 var(--f-sys); max-width: 16ch; }
.bm-ordem-home h2 { font: 700 clamp(28px, 3.6vw, 52px)/1.08 var(--f-sys); max-width: 22ch; }
.bm-ordem-home h3 { font: 600 19px/1.3 var(--f-sys); }
.bm-ordem-home p { margin: 0; }
.bm-ordem-home .lede { margin-top: 20px; font: 400 clamp(16px, 1.4vw, 19px)/1.62 var(--f-sys); max-width: 62ch; color: var(--dim); }
.bm-ordem-home .paper .lede, .bm-ordem-home .paper-2 .lede { color: var(--ink-2); }
.bm-ordem-home .kicker { font: 500 11px/1.5 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 18px; }
.bm-ordem-home .kicker b { font-weight: 500; color: var(--mute); margin-right: 8px; }
.bm-ordem-home .paper .kicker b, .bm-ordem-home .paper-2 .kicker b { color: var(--ink-2); }
.bm-ordem-home .paper .kicker, .bm-ordem-home .paper-2 .kicker { color: var(--signal-2); }
.bm-ordem-home .note { margin-top: 24px; font: 500 12px/1.7 var(--f-data); color: var(--ink-2); max-width: 70ch; }
.bm-ordem-home .night .note { color: var(--mute); }

/* The visitor's own voice, and the brand line. */
.bm-ordem-home .voice { margin-top: 22px; font: italic 400 clamp(20px, 2.1vw, 28px)/1.4 var(--f-voice); color: var(--dim); }
.bm-ordem-home .voice .byte { background: var(--byte); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; font-family: var(--f-sys); font-weight: 700; }

.bm-ordem-home .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-ui); background: var(--signal); color: #fff; font: 600 16px/1 var(--f-sys); text-decoration: none; cursor: pointer; transition: background var(--ease) .15s; }
.bm-ordem-home .btn:hover { background: var(--signal-2); }
.bm-ordem-home .btn.ghost { background: transparent; border: 1px solid var(--line-2); color: #fff; }
.bm-ordem-home .paper .btn.ghost, .bm-ordem-home .paper-2 .btn.ghost { border-color: var(--pline); color: var(--ink); }
.bm-ordem-home .link { color: var(--aqua); text-decoration: none; font-weight: 600; }
.bm-ordem-home .paper .link, .bm-ordem-home .paper-2 .link { color: var(--signal-2); }
.bm-ordem-home .link:hover { text-decoration: underline; }
.bm-ordem-home :is(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.bm-ordem-home .night :is(a, button, input, textarea, summary):focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--signal); }

/* Documents on paper. */
.bm-ordem-home .doc { background: var(--paper); color: var(--ink); border: 1px solid var(--pline); border-radius: var(--r-doc); padding: 22px; }
.bm-ordem-home .doc-title { font: 500 11px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }

/* ---- § 01 hero ---------------------------------------------------- */
.bm-ordem-home .hero { padding-top: clamp(96px, 13vh, 150px); }
.bm-ordem-home .hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.bm-ordem-home .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bm-ordem-home .cred { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 32px 0 0; padding: 0; list-style: none; font: 500 11px/1.6 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.bm-ordem-home .start-card dl { margin: 14px 0 0; display: grid; gap: 0; }
.bm-ordem-home .start-card div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px dotted var(--pline); }
.bm-ordem-home .start-card div:first-child { border-top: 0; }
.bm-ordem-home .start-card dt { font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .start-card dd { margin: 0; font: 500 15px/1.45 var(--f-sys); color: var(--ink); }

.bm-ordem-home .logos { padding-block: 26px; border-block: 1px solid var(--line); }
.bm-ordem-home .logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.bm-ordem-home .logos-row p { font: 500 11px/1.5 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.bm-ordem-home .logos-row ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--dim); }

/* ---- § 02 from outside -------------------------------------------- */
.bm-ordem-home .slips { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .slips li { background: #fff; border: 1px solid var(--pline); border-radius: var(--r-doc); padding: 14px 18px; font: italic 400 16px/1.45 var(--f-voice); color: var(--ink-2); max-width: 38ch; box-shadow: 0 1px 0 rgba(11, 23, 59, .06); }
.bm-ordem-home .slips li:nth-child(2n) { transform: rotate(-.7deg); }
.bm-ordem-home .slips li:nth-child(3n) { transform: rotate(.6deg); }
.bm-ordem-home .shout { margin-top: clamp(32px, 5vw, 64px); font: 800 clamp(56px, 13vw, 190px)/0.92 var(--f-sys); letter-spacing: -0.03em; color: var(--ink); }
.bm-ordem-home .turn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bm-ordem-home .turn-lines { display: grid; gap: 4px; font: 700 clamp(30px, 4.4vw, 62px)/1.06 var(--f-sys); letter-spacing: -0.022em; }
.bm-ordem-home .edge { font: italic 400 clamp(18px, 1.8vw, 24px)/1.4 var(--f-voice); color: var(--aqua); }
.bm-ordem-home .cjk .edge { font-family: "Songti SC", "Noto Serif SC", var(--f-cjk); font-style: normal; }

/* ---- § 03 Brazil on one screen ------------------------------------ */
.bm-ordem-home .brazil-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px; }
.bm-ordem-home .map { width: 100%; height: auto; max-height: 460px; }
.bm-ordem-home .map-edges line { stroke: var(--line-2); stroke-width: 1; }
.bm-ordem-home .map-arcs path { fill: none; stroke: var(--indigo); stroke-width: 1.2; opacity: .55; }
.bm-ordem-home .map-node { fill: var(--mute); }
.bm-ordem-home .map-live circle:first-child { fill: var(--aqua); opacity: .18; }
.bm-ordem-home .map-live circle:last-child { fill: var(--aqua); }
.bm-ordem-home .figures { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.bm-ordem-home .figures li { display: grid; gap: 4px; }
.bm-ordem-home .figures b { font: 700 clamp(26px, 3vw, 40px)/1 var(--f-sys); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bm-ordem-home .figures span { font-size: 15px; color: var(--dim); }
.bm-ordem-home .figures small { font: 500 10.5px/1.6 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.bm-ordem-home .plates-title { margin-top: 34px; font: 500 11px/1.5 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); }
.bm-ordem-home .plates { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .plates li { display: grid; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--r-plate); padding: 8px 12px; }
.bm-ordem-home .plates span { font: 500 10px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.bm-ordem-home .plates b { font: 500 13px/1.4 var(--f-data); color: #fff; }
.bm-ordem-home .closing { margin-top: 36px; }
.bm-ordem-home .atmosphere { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .atmosphere img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-doc); display: block; }

/* ---- § 04 from plan to street -------------------------------------- */
.bm-ordem-home .street-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bm-ordem-home .channels { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.bm-ordem-home .channels li { border-bottom: 1px solid var(--line); }
.bm-ordem-home .channels :is(a, div) { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 18px 0; text-decoration: none; color: inherit; min-height: 44px; }
.bm-ordem-home .channels b { font: 600 17px/1.3 var(--f-sys); color: #fff; }
.bm-ordem-home .channels span { font-size: 14.5px; color: var(--dim); }
.bm-ordem-home .channels i { color: var(--aqua); font-style: normal; }
.bm-ordem-home .channels a:hover b { color: var(--aqua); }

/* ---- § 05 market entry / § 06 proof / how it works ------------------ */
.bm-ordem-home .docs, .bm-ordem-home .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .docs .doc, .bm-ordem-home .steps li { background: #fff; border: 1px solid var(--pline); border-radius: var(--r-doc); padding: 22px; }
.bm-ordem-home .num { font: 500 12px/1.5 var(--f-data); letter-spacing: 0.12em; color: var(--signal); }
.bm-ordem-home .docs h3, .bm-ordem-home .steps h3 { margin-top: 10px; }
.bm-ordem-home .docs p, .bm-ordem-home .steps p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem-home .steps small { display: block; margin-top: 14px; font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .entry .btn { margin-top: 28px; }
.bm-ordem-home .records { margin: 40px 0 0; border-top: 1px solid var(--pline); }
.bm-ordem-home .records > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--pline); }
.bm-ordem-home .records dt { font: 500 11px/1.6 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .records dd { margin: 0; display: grid; gap: 4px; }
.bm-ordem-home .records dd b { font: 600 16px/1.4 var(--f-sys); }
.bm-ordem-home .records dd span { font-size: 14px; color: var(--ink-2); }
.bm-ordem-home .cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .cases li { background: #fff; border: 1px solid var(--pline); border-radius: var(--r-doc); padding: 24px; }
.bm-ordem-home .cases .tag { font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-2); }
.bm-ordem-home .cases h3 { margin-top: 8px; font-size: 22px; }
.bm-ordem-home .kpi { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; }
.bm-ordem-home .kpi b { font: 700 30px/1 var(--f-sys); font-variant-numeric: tabular-nums; }
.bm-ordem-home .kpi span { font: 500 11px/1.5 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .cases p:not(.tag):not(.kpi) { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem-home .cases blockquote { margin: 16px 0 0; padding-top: 14px; border-top: 1px dotted var(--pline); }
.bm-ordem-home .cases blockquote p { font: italic 400 15px/1.55 var(--f-voice); color: var(--ink); }
.bm-ordem-home .cases blockquote footer { margin-top: 8px; font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .commitments { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 44px 0 0; padding: 0; list-style: none; }
.bm-ordem-home .commitments p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---- FAQ ------------------------------------------------------------ */
.bm-ordem-home .faq dl { margin: 32px 0 0; border-top: 1px solid var(--pline); }
.bm-ordem-home .faq > .wrap > dl > div, .bm-ordem-home .faq dl > div { padding: 22px 0; border-bottom: 1px solid var(--pline); }
.bm-ordem-home .faq dt { font: 600 17px/1.4 var(--f-sys); }
.bm-ordem-home .faq dd { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }

/* ---- your turn ------------------------------------------------------- */
.bm-ordem-home .turn-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bm-ordem-home .question { font: italic 400 clamp(30px, 4vw, 56px)/1.08 var(--f-voice); letter-spacing: -0.01em; }
.bm-ordem-home .cjk .question { font-family: "Songti SC", "Noto Serif SC", var(--f-cjk); font-style: normal; }
.bm-ordem-home .points { display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--dim); }
.bm-ordem-home .points li::before { content: "·"; color: var(--aqua); margin-right: 8px; }
.bm-ordem-home .alt { margin-top: 22px; font-size: 15px; color: var(--dim); }
.bm-ordem-home .form-doc { display: grid; gap: 16px; }
.bm-ordem-home .field { display: grid; gap: 6px; min-width: 0; }
.bm-ordem-home .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bm-ordem-home .field label { font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .field :is(input, textarea) { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid var(--pline); border-radius: var(--r-ui); background: #fff; color: var(--ink); font: 400 16px/1.5 var(--f-sys); }
.bm-ordem-home .voice-field textarea { font: italic 400 17px/1.6 var(--f-voice); }
.bm-ordem-home .cjk .voice-field textarea { font-family: "Songti SC", "Noto Serif SC", var(--f-cjk); font-style: normal; }
.bm-ordem-home .field :is(input, textarea)[aria-invalid="true"] { border-color: #b3261e; }
.bm-ordem-home .field-error { font-size: 13px; color: #b3261e; }
.bm-ordem-home .form-doc .btn { width: 100%; justify-content: center; }
.bm-ordem-home .form-doc .btn:disabled { opacity: .6; cursor: not-allowed; }
.bm-ordem-home .hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.bm-ordem-home .thanks { text-align: center; padding-block: 40px; }
.bm-ordem-home .thanks h3 { font-size: 22px; }
.bm-ordem-home .thanks p { margin-top: 8px; color: var(--ink-2); }

.bm-ordem-home .partners { padding-block: clamp(40px, 6vh, 72px); border-top: 1px solid var(--line); }
.bm-ordem-home .partners-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.bm-ordem-home .partners-row p { max-width: 62ch; color: var(--dim); font-size: 16px; }

.bm-ordem-home .radar-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.bm-ordem-home .radar ul { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--pline); }
.bm-ordem-home .radar li { border-bottom: 1px solid var(--pline); }
.bm-ordem-home .radar a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; text-decoration: none; color: var(--ink); }
.bm-ordem-home .radar a span { font-weight: 500; line-height: 1.4; }
.bm-ordem-home .radar a small { flex-shrink: 0; font: 500 10.5px/1.5 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); max-width: 35%; text-align: right; }
.bm-ordem-home .radar a:hover span { color: var(--signal-2); }

/* CJK: the Latin tracking of the display rules is wrong for Chinese. */
.bm-ordem-home.cjk :is(h1, h2, h3, .turn-lines, .shout) { letter-spacing: 0; }
.bm-ordem-home.cjk :is(h1, h2) { line-height: 1.18; }
.bm-ordem-home.cjk .slips li { font-family: "Songti SC", "Noto Serif SC", var(--f-cjk); font-style: normal; }
.bm-ordem-home.cjk .voice { font-family: "Songti SC", "Noto Serif SC", var(--f-cjk); font-style: normal; }

@media (max-width: 980px) {
  .bm-ordem-home .hero-grid, .bm-ordem-home .turn-grid, .bm-ordem-home .brazil-grid,
  .bm-ordem-home .street-grid, .bm-ordem-home .turn-form-grid { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .map-box { max-width: 420px; }
}
@media (max-width: 640px) {
  .bm-ordem-home { font-size: 16px; }
  .bm-ordem-home .field-row { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .actions .btn { width: 100%; justify-content: center; }
  .bm-ordem-home .slips li { max-width: none; transform: none; }
  .bm-ordem-home .records > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bm-ordem-home .channels :is(a, div) { grid-template-columns: minmax(0, 1fr) auto; }
  .bm-ordem-home .channels span { grid-column: 1 / -1; }
  .bm-ordem-home .radar a { flex-direction: column; gap: 6px; }
  .bm-ordem-home .radar a small { max-width: none; text-align: left; }
  /* The shell's dock is fixed at the foot; keep it off the last content. */
  .bm-ordem-home .radar, .bm-ordem-home .partners:last-child { padding-bottom: calc(var(--sec-y) + 72px); }
}
@media (prefers-reduced-motion: reduce) { .bm-ordem-home * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .bm-ordem-home :focus-visible { outline-color: Highlight; } }