/* GEMCAP · components. Consumes tokens.css + base.css. Rendered and reviewed on the style guide (index.html).
   Motion: transform and opacity only (CLAUDE.md); hover only under (hover: hover) and (pointer: fine).
   Contents: 1 buttons · 2 links · 3 the slant tile · 4 credentials band · 5 forms · 6 cards · 7 FAQ ·
   8 How a load moves (route line) · 9 proof block + map · 10 pre-footer CTA band · 11 footer · 12 phone action bar */

/* ---------- 1 · buttons: pills (one shape language with the nav, round 6 of the hero) -------------------------
   Colours are variables, so a variant is four lines. Hover = a wash layer fading in (opacity), press = scale. */
.btn {
  --btn-h: var(--control-h);
  --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary); --btn-line: transparent;
  --btn-wash: var(--color-gold-hover); --btn-press: var(--color-gold-press); --wash-in: -2px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--space-6);
  border: 2px solid var(--btn-line); border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 var(--text-label) / 1.1 var(--font-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform var(--dur-press) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: var(--wash-in); z-index: -1; border-radius: inherit;
  background: var(--btn-wash); opacity: 0; transition: opacity var(--dur-fast) ease;
}
.btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.btn:active { transform: scale(0.97); }
.btn:active::before { opacity: 1; background: var(--btn-press); transition: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover::before { opacity: 1; } }

.btn-primary { /* gold: the one action that matters (Request a quote / Get a quote) */ }
.btn-accent { --btn-bg: var(--blue-base); --btn-fg: #fff; --btn-wash: #1049B8; --btn-press: #0D3E9E; }   /* the brand blue fill in both themes */
.btn-outline { --btn-bg: var(--color-card); --btn-fg: var(--color-blue); --btn-line: var(--color-blue); --btn-wash: var(--color-tint-blue); --btn-press: var(--color-tint-blue-press); --wash-in: 0px; }
.btn-white { --btn-bg: #fff; --btn-fg: var(--navy-base); --btn-line: #fff; --btn-wash: #E8F0FD; --btn-press: #D3E2FB; }   /* white in both themes */
.btn-on-navy { --btn-bg: transparent; --btn-fg: #fff; --btn-line: rgb(255 255 255 / 0.7); --btn-wash: rgb(255 255 255 / 0.12); --btn-press: rgb(255 255 255 / 0.2); --wash-in: 0px; }
.btn-sm { --btn-h: 44px; padding-inline: var(--space-5); }

.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--color-surface-2); --btn-fg: var(--color-ink-muted); --btn-line: transparent;
  cursor: not-allowed; transform: none;
}
.btn:disabled::before, .btn[aria-disabled="true"]::before { opacity: 0; }
.btn-on-navy:disabled, .btn-on-navy[aria-disabled="true"] { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: var(--color-inverse-muted); }
/* sending: the label stays, a spinner joins it (rotate = transform) */
.btn__spin { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(1turn); } }
.btn[aria-busy="true"] { cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479.98px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}
@media (max-width: 1023.98px) {
  .btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 8px; }   /* text at 200% wraps */
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; } .btn:active { transform: none; }
  .btn__spin { animation-duration: 2.4s; }
}
.on-navy :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--color-focus-inverse); }

/* ---------- 2 · links ------------------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; padding-block: 10px;   /* 44px tall with the line */
  font-weight: 700; color: var(--color-link); text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { text-decoration: underline; }
  .link-arrow:hover .icon { transform: translateX(3px); }
}
.link-arrow:active .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-arrow .icon { transition: none; } .link-arrow:hover .icon, .link-arrow:active .icon { transform: none; } }

/* ---------- 3 · the slant tile: the logo's 25 deg, the brand's one graphic device ------------------------------
   Used by the truck badge's family only: credential decals, the steps of a real sequence (last one gold) and the
   map's markers. Never on buttons, cards, photos or text. The box is drawn skewed; its content stays upright. */
.tile {
  --tile-h: 40px; --tile-w: 44px; --tile-bg: var(--blue-base); --tile-fg: #fff;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: calc(var(--tile-w) + var(--tile-h) * 0.4663); height: var(--tile-h); color: var(--tile-fg);
}
.tile::before {
  content: ""; position: absolute; inset: 0 calc(var(--tile-h) * 0.2332); border-radius: 6px;
  background: var(--tile-bg); transform: skewX(-25deg);
}
.tile > * { position: relative; }
.tile .icon { width: 20px; height: 20px; stroke-width: 2; }
.tile--gold { --tile-bg: var(--color-gold); --tile-fg: var(--color-navy); }
.tile--light { --tile-bg: var(--color-tint-blue); --tile-fg: var(--color-blue); }   /* the credential decals (Arthur, Gate 2) */
.tile__n { font: 800 1.25rem / 1 var(--font-display); font-stretch: 125%; font-variant-numeric: tabular-nums; }

/* ---------- 4 · credentials band: our own decals (no government seals), 2x2 on phones, 4 across from 768 -----------
   Edge to edge (the four cells split the whole width). Three looks (presentation option "Credentials", html[data-creds]):
   Tiles = the default in both themes (no attribute, production); Alternating (client 2026-10-05: "cores do tema alternadas pra dar um highlight maior") = navy and GEMCAP Blue
   cells (a checkerboard on the 2x2 phone grid) with gold decals; Tiles = the light strip with navy / blue decals
   (Arthur: "mais conservadora"); Light = the Gate 2 strip (tint tiles, hairlines).
   Hover (pointer devices) / press: the cell brightens, the decal lifts and a gold bar runs along the cell's foot. */
.creds { position: relative; background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); }
/* a tab with soft shoulders rises from the strip into the hero photo, an arrow inside (Arthur 2026-10-05: "vai dar uma
   quebrada nesse corte quadrado da imagem pra faixa"); decoration only, a cue to scroll - not a link */
.creds__notch { --notch-bg: var(--color-canvas); position: absolute; left: 50%; top: 0; z-index: 2; display: grid; justify-items: center; width: 136px; height: 27px; pointer-events: none; transform: translate(-50%, -26px); color: var(--color-blue); }
.creds__notch svg.shape { position: absolute; top: 0; left: 0; width: 136px; height: 27px; fill: var(--notch-bg); }
.creds__notch .icon { position: relative; width: 18px; height: 18px; margin-top: 5px; stroke-width: 2.25; }
@media (prefers-reduced-motion: no-preference) { .creds__notch .icon { animation: notch-nudge 2.4s var(--ease-in-out) infinite; } }
@keyframes notch-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.creds__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cred { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-2); text-align: center; }
.cred:nth-child(odd) { border-right: 1px solid var(--color-hairline); }
.cred:nth-child(-n+2) { border-bottom: 1px solid var(--color-hairline); }
.cred .tile { --tile-h: 36px; --tile-w: 40px; transition: transform 320ms var(--ease-out); }
.cred__label { font-size: var(--text-overline); font-weight: 700; line-height: 1.3; letter-spacing: var(--tracking-overline); text-transform: uppercase; }
@media (max-width: 359.98px) { .cred__label { letter-spacing: 0.03em; } }   /* "CUSTOMS-BONDED" has to fit a 127px cell */
/* the hover layers: a wash over the cell and a gold bar along its foot (opacity / transform only) */
.cred::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-tint-blue); opacity: 0; transition: opacity 240ms var(--ease-out); }
.cred::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cred:hover::before { opacity: 1; }
  .cred:hover::after { transform: none; }
  .cred:hover .tile { transform: translateY(-4px) scale(1.06); }
}
@media (min-width: 768px) {   /* tablets: four across, still stacked (a row of tile + label is too tight under 1024) */
  .creds__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .creds__list .cred { border-bottom: 0; border-right: 1px solid var(--color-hairline); }
  .creds__list .cred:last-child { border-right: 0; }
}
@media (min-width: 1024px) {
  .cred { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-3); text-align: left; }
}
@media (min-width: 1280px) { .cred__label { white-space: nowrap; } }   /* each label on its two authored lines */

/* Alternating: navy / blue cells, gold decals, white labels */
html[data-creds="alt"] .creds { border-bottom: 0; background: var(--navy-base); }
html[data-creds="alt"] .creds__notch { --notch-bg: var(--color-gold); color: var(--navy-base); }
html[data-creds="alt"] .cred { border: 0; background: var(--navy-base); color: #fff; }
html[data-creds="alt"] .cred:nth-child(2), html[data-creds="alt"] .cred:nth-child(3) { background: var(--blue-base); }   /* phones: a checkerboard */
html[data-creds="alt"] .cred .tile { --tile-bg: var(--color-gold); --tile-fg: var(--navy-base); }
html[data-creds="alt"] .cred::before { background: rgb(255 255 255 / 0.10); }
@media (min-width: 768px) {
  html[data-creds="alt"] .creds__list .cred { border: 0; }
  html[data-creds="alt"] .cred:nth-child(3) { background: var(--navy-base); }
  html[data-creds="alt"] .cred:nth-child(4) { background: var(--blue-base); }
}
/* Tiles (the default since 2026-10-05, Arthur: "deixa o tiles como principal"): the light strip, only the decals alternate navy / blue (same checkerboard on phones) */
/* the pair of decal colours is a token pair: navy + blue in the light theme, blue + gold in the dark one (Arthur) */
html:not([data-creds="alt"]):not([data-creds="light"]) .cred .tile { --tile-bg: var(--creds-tile-1-bg); --tile-fg: var(--creds-tile-1-fg); }
html:not([data-creds="alt"]):not([data-creds="light"]) .cred:nth-child(2) .tile, html:not([data-creds="alt"]):not([data-creds="light"]) .cred:nth-child(3) .tile { --tile-bg: var(--creds-tile-2-bg); --tile-fg: var(--creds-tile-2-fg); }
@media (min-width: 768px) {
  html:not([data-creds="alt"]):not([data-creds="light"]) .cred:nth-child(3) .tile { --tile-bg: var(--creds-tile-1-bg); --tile-fg: var(--creds-tile-1-fg); }
  html:not([data-creds="alt"]):not([data-creds="light"]) .cred:nth-child(4) .tile { --tile-bg: var(--creds-tile-2-bg); --tile-fg: var(--creds-tile-2-fg); }
}
@media (prefers-reduced-motion: reduce) {
  .cred .tile { transition: none; }
  .cred:hover .tile { transform: none; }
  .cred::after { transform: none; opacity: 0; transition: opacity 240ms ease; }
  .cred:hover::after { opacity: 1; }
}

/* ---------- 5 · forms --------------------------------------------------------------------------------------- */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start; }
.field__label { font: 700 var(--text-label) / 1.25 var(--font-text); color: var(--color-ink); }
.field__label .opt { font-weight: 400; color: var(--color-ink-muted); }
.field__hint { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-ink-muted); }
.field__error { display: none; align-items: flex-start; gap: 6px; font-size: var(--text-small); line-height: var(--leading-small); font-weight: 600; color: var(--color-error); }
.field__error .icon { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2; }
.field.is-error .field__error { display: flex; }

.input, .select, .textarea {
  width: 100%; min-width: 0; min-height: var(--control-h); padding: 0 14px;
  border: 1.5px solid var(--color-border-input); border-radius: var(--radius-md);
  background: var(--color-field); color: var(--color-ink);
  font: 400 1rem / 1.3 var(--font-text);   /* 16px: below that iOS zooms on focus */
}
.textarea { min-height: 112px; padding-block: 12px; resize: vertical; line-height: var(--leading-body); }
.input::placeholder, .textarea::placeholder { color: var(--color-ink-muted); opacity: 1; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--color-field) var(--icon-chev) no-repeat right 14px center / 18px 18px;
}
.input[type="date"] { appearance: none; -webkit-appearance: none; display: flex; align-items: center; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-blue); }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea, .input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--color-surface-1); color: var(--color-ink-muted); border-color: var(--color-hairline); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .input:hover:not(:disabled):not(:focus-visible), .select:hover:not(:disabled):not(:focus-visible),
  .textarea:hover:not(:disabled):not(:focus-visible) { border-color: var(--color-ink-muted); }
}
.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* chips: single choice (radio inputs underneath, so keyboard and forms work without script) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 639.98px) {   /* phones: options as full-width rows (one thumb, no ragged wrap); 2 across from 480 */
  .chips { display: grid; grid-template-columns: minmax(0, 1fr); }
  .chip, .chip span { width: 100%; }
  .chip span { min-height: 48px; padding: 8px 14px; line-height: 1.2; }
}
@media (min-width: 480px) and (max-width: 639.98px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-field);
  font: 600 var(--text-label) / 1.2 var(--font-text); color: var(--color-ink);
  transition: transform var(--dur-press) var(--ease-out);
}
.chip span::before {   /* the indicator, always reserved (no reflow when picked): hollow when off, blue with a white check when on */
  content: ""; width: 16px; height: 16px; flex: none; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--color-border-input); background: var(--color-field) center / 10px 10px no-repeat;
}
.chip input:checked + span { background: var(--color-tint-blue); border-color: var(--color-blue); color: var(--color-blue-press); box-shadow: inset 0 0 0 1px var(--color-blue); }
.chip input:checked + span::before {
  border-color: var(--color-blue); background-color: var(--color-blue);
  background-image: var(--icon-check-on-blue);
}
.chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip input:active + span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip input:hover:not(:checked) + span { border-color: var(--color-ink-muted); } }

/* radio and checkbox */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: var(--text-label); line-height: 1.35; }
.choice--top { align-items: flex-start; font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-ink-muted); }
.choice--top input { margin-top: 1px; }
.choice input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center;
  width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--color-border-input); background: var(--color-field); cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="checkbox"] { border-radius: var(--radius-sm); }
.choice input::before { content: ""; transform: scale(0); transition: transform 120ms var(--ease-out); }
.choice input[type="radio"]::before { width: 10px; height: 10px; border-radius: 50%; background: var(--color-blue); }
.choice input[type="checkbox"]::before { width: 12px; height: 12px; background: var(--color-on-blue); clip-path: polygon(14% 44%, 0 59%, 39% 96%, 100% 25%, 85% 11%, 38% 66%); }
.choice input:checked { border-color: var(--color-blue); }
.choice input[type="checkbox"]:checked { background: var(--color-blue); }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .choice input::before, .chip span { transition: none; } }
/* Windows High Contrast / forced colors: our blues and whites are replaced, so the states are drawn with system colors */
@media (forced-colors: active) {
  .chip span::before { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
  .chip input:checked + span { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
  .chip input:checked + span::before { border-color: Highlight; background: Highlight; box-shadow: inset 0 0 0 3px Canvas; }   /* ring + dot, no image needed */
  .choice input { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
  .choice input:checked { border-color: Highlight; }
  .choice input[type="radio"]::before { background: Highlight; }
  .choice input[type="checkbox"]:checked { background: Highlight; }
  .choice input[type="checkbox"]::before { background: HighlightText; }
}

/* the form card (quote, pre-qualification): raised, roomy, one column on phones */
.form-card {
  display: grid; gap: var(--space-6); padding: clamp(20px, 3vw, 40px);
  background: var(--color-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.form-card__head { display: grid; gap: var(--space-3); }
.form-card__step { font-size: var(--text-small); color: var(--color-ink-muted); }
.form-card__step b { color: var(--color-ink); }
.progress { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-2); }
.progress > span { position: absolute; inset: 0; border-radius: inherit; background: var(--color-blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0.5)); transition: transform var(--dur-sheet) var(--ease-out); }
.form-card__foot { display: grid; gap: var(--space-3); justify-items: start; }
.form-card__note { font-size: var(--text-small); color: var(--color-ink-muted); }
@media (max-width: 479.98px) { .form-card__foot .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .progress > span { transition: none; } }

/* ---------- 6 · cards: only where the content is a card (reviews, the form) ------------------------------------ */
.review {
  display: flex; flex-direction: column; gap: var(--space-5); height: 100%; margin: 0; padding: var(--space-6);
  background: var(--color-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.review__mark { width: 28px; height: 28px; color: var(--color-blue); }
.review blockquote { margin: 0; flex: 1; font-size: var(--text-lead); line-height: var(--leading-lead); }
.review figcaption { display: grid; gap: 2px; font-size: var(--text-small); color: var(--color-ink-muted); }
.review figcaption b { font-size: var(--text-label); color: var(--color-ink); }

/* ---------- 7 · FAQ: details/summary (no script; find-in-page opens it) -------------------------------------- */
.faq { border-top: 1px solid var(--color-hairline); }
.faq__item { border-bottom: 1px solid var(--color-hairline); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding-block: var(--space-4); cursor: pointer; list-style: none;
  font: 700 var(--text-h3) / var(--leading-title) var(--font-text); color: var(--color-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }
.faq__chev { width: 22px; height: 22px; color: var(--color-blue); stroke-width: 2; transition: transform var(--dur-fast) var(--ease-out); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--space-6); max-width: 68ch; color: var(--color-ink-muted); }
@media (prefers-reduced-motion: reduce) { .faq__chev { transition: none; } }

/* ---------- 8 · How a load moves: the route line (the home's one authored moment) -------------------------------
   Each step owns the stretch of road to the next one, so no script measures anything. Phones and tablets: a vertical
   road that weaves down the left, the text beside it. From 1024px: the road winds left to right, steps 1 and 3 in the
   troughs with their text below, 2 and 4 on the crests with their text above (the text takes the side with room).
   Scroll (site.js, only below the fold and without reduced motion): a cover in the section's colour slides off each
   stretch (transform) as the page scrolls, and each tile and text fades up when the road reaches it; scrubbed both
   ways; no script = everything visible. */
.route { --route-bg: var(--color-canvas); --rail: 64px; --tile-h: 40px; --road: var(--blue-base); position: relative; display: grid; margin: 0; padding: 0; }
.section--alt .route { --route-bg: var(--color-surface-1); }
.route__step { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--space-4); padding-bottom: var(--space-8); }
.route__step:last-child { padding-bottom: 0; }
.route__mark { position: relative; grid-column: 1; grid-row: 1; display: flex; justify-content: center; align-self: stretch; }
.route__mark .tile { --tile-h: 40px; --tile-w: 40px; }
.route__text { grid-column: 2; grid-row: 1; display: grid; gap: var(--space-2); align-content: start; padding-top: 6px; }
.route__text p { color: var(--color-ink-muted); max-width: 44ch; }
/* the stretch of road to the next tile: from this tile's centre to the next one's */
.route__seg { position: absolute; overflow: hidden; pointer-events: none; }
.route__seg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__seg path { fill: none; stroke: var(--road); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route__seg .lane { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 7 7; }
.route__cover { position: absolute; inset: -8px; background: var(--route-bg); transform: translate(0, -105%); }
.route__seg--h { display: none; }
.route__seg--v { left: 50%; top: calc(var(--tile-h) / 2); width: 48px; height: calc(100% + var(--space-8)); transform: translateX(-50%); }
.route__step:last-child .route__seg { display: none; }

@media (min-width: 1024px) {
  .route { --band: 132px; --tile-h: 44px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto var(--band) auto; }
  .route__step { grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; padding: 0; column-gap: 0; }
  .route__mark { grid-row: 2; grid-column: 1; align-items: flex-end; }
  .route__mark .tile { --tile-h: 44px; --tile-w: 46px; }
  .route__step:nth-child(even) .route__mark { align-items: flex-start; }
  .route__text { grid-column: 1; justify-items: center; padding: 0 var(--space-3); text-align: center; }
  .route__step:nth-child(odd) .route__text { grid-row: 3; padding-top: var(--space-5); }
  .route__step:nth-child(even) .route__text { grid-row: 1; align-self: end; padding-bottom: var(--space-5); }
  .route__text p { max-width: 30ch; }
  .route__seg--v { display: none; }
  .route__seg--h { display: block; left: 50%; top: 0; width: 100%; height: 100%; }
  .route__cover { transform: translate(-105%, 0); }
}

/* scroll states (site.js adds .is-scrub, then --k (0-1: how much of this step's stretch is drawn) and .is-in per step) */
.route.is-scrub .tile, .route.is-scrub .route__text { opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--ease-out), transform 260ms var(--ease-out); }
.route.is-scrub .route__step.is-in .tile, .route.is-scrub .route__step.is-in .route__text { opacity: 1; transform: none; }
.route.is-scrub .route__cover { transform: translate(0, calc(var(--k, 0) * 105%)); }
@media (min-width: 1024px) { .route.is-scrub .route__cover { transform: translate(calc(var(--k, 0) * 105%), 0); } }

/* ---------- 9 · proof block: the claim, four figures, the U.S. + Canada map ---------------------------------------- */
.proof__grid { display: grid; gap: var(--space-10); }
.proof__text .lead { margin-top: var(--space-4); }
.authority { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-small); line-height: var(--leading-small); font-weight: 600; color: var(--color-ink); }
.authority .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--color-blue); stroke-width: 2; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin-block: var(--space-8) var(--space-6); }
.figs > div { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.figs dt { font: 800 var(--text-figure) / 1 var(--font-display); font-stretch: var(--display-stretch); color: var(--color-blue); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.figs dd { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-ink-muted); }
.map { margin: 0; }
.map__frame { position: relative; aspect-ratio: var(--map-ar, 1000 / 670); }
.map__frame > img, .map__arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__frame > img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }
.map__arcs stop { stop-color: var(--color-blue); }   /* the theme's blue (the markup's #1559D6 is the no-CSS fallback) */
.map__routes path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map__hq { position: absolute; left: var(--hq-x); top: var(--hq-y); transform: translate(-50%, -50%); --tile-h: 20px; --tile-w: 16px; }
.map__hq::before { box-shadow: 0 0 0 2.5px var(--color-navy); border-radius: 3px; }
.map__label {
  position: absolute; left: var(--hq-x); top: var(--hq-y); transform: translate(20px, -50%);
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-canvas);
  font-size: var(--text-small); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
@media (max-width: 479.98px) { .map__label { transform: translate(calc(-100% - 20px), -50%); } }   /* narrow maps: no room over the ocean */
.map figcaption { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-ink-muted); }
@media (min-width: 1024px) {
  .proof__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: var(--space-12); }
}

/* ---------- 10 · pre-footer CTA band (navy): the navy rig's trailer front - the gold blade at 25 deg -------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--color-inverse-canvas); color: var(--color-inverse-ink); padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.cta-band h2 { color: #fff; max-width: 22ch; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); }   /* the client's long CTA line (staging copy) */
.cta-band p { margin-top: var(--space-4); max-width: 44ch; font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-inverse-muted); }
.cta-band p a { color: #fff; font-weight: 700; }
.cta-band .btn-row { margin-top: var(--space-8); }
.cta-band__blade { position: absolute; z-index: -1; top: -26%; right: clamp(16px, 9vw - 60px, 96px); height: 100%; width: auto; aspect-ratio: 94.6 / 133; fill: var(--color-gold); }
@media (max-width: 1023.98px) { .cta-band__blade { display: none; } }   /* a wide-screen flourish: phones and tablets get the plain band */

/* ---------- 11 · footer (deep navy): exit navigation, contact, authority --------------------------------------- */
.site-footer { background: var(--color-band-deep); color: var(--color-inverse-muted); font-size: var(--text-small); line-height: var(--leading-small); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.site-footer a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; } }
.site-footer__top { display: grid; gap: var(--space-10); }
.site-footer__brand { display: grid; gap: var(--space-4); align-content: start; }
.site-footer__logo { justify-self: start; }
.site-footer__logo img { width: 176px; height: auto; }
.site-footer__tag { color: var(--color-inverse-ink); }
.site-footer__contact { display: grid; gap: var(--space-2); font-style: normal; }
.site-footer__contact a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }   /* white link vs muted text is 1.77:1: not colour alone (WCAG 1.4.1) */
.site-footer__dispatch { display: inline-grid; gap: 2px; justify-self: start; padding-block: 4px; }
.site-footer__dispatch small { font-size: 13px; font-weight: 600; color: var(--color-inverse-muted); }
.site-footer__dispatch b { font: 800 1.375rem / 1.1 var(--font-display); font-stretch: var(--display-stretch); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.site-footer__col h2 { max-width: none; margin-bottom: var(--space-2); font: 700 var(--text-label) / 1.3 var(--font-text); letter-spacing: 0; color: #fff; }
.site-footer__col a { display: inline-block; padding-block: 11px; color: var(--color-inverse-muted); }
.site-footer__col .ext { display: inline-flex; align-items: center; gap: 6px; }
.site-footer__col .ext .icon { width: 14px; height: 14px; }
.site-footer__legal { display: grid; gap: var(--space-1); margin-top: var(--space-10); padding-block: var(--space-6); border-top: 1px solid rgb(255 255 255 / 0.12); }
.site-footer__legal b { color: #fff; font-weight: 600; }
.site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(255 255 255 / 0.12); }
.site-footer__bar ul { display: flex; align-items: center; gap: var(--space-5); }
.site-footer__social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.site-footer__social svg { width: 20px; height: 20px; }
@media (max-width: 1023.98px) {   /* 44px touch targets on phones and tablets */
  .site-footer__col a, .site-footer__contact a:not(.site-footer__dispatch), .site-footer__bar li > a:not(.site-footer__social) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: var(--space-12); }
  .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 12 · phone action bar: Call | Get a quote | Apply to drive, after the hero buttons leave the screen ---- */
.action-bar { display: none; }
@media (max-width: 1023.98px) {
  html { scroll-padding-bottom: 88px; }   /* focus never hides under the action bar (WCAG 2.4.11) */
  .action-bar {
    position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; z-index: var(--z-nav, 100);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px;
    border-radius: 24px; background: var(--frost-bg, rgb(255 255 255 / 0.8));
    -webkit-backdrop-filter: blur(var(--frost-blur, 8px)) saturate(140%); backdrop-filter: blur(var(--frost-blur, 8px)) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--frost-line, rgb(11 31 68 / 0.09)), var(--nav-shadow);
    transform: translateY(calc(100% + 24px)); transition: transform var(--d-ui, 240ms) var(--e-out, ease-out);
  }
  .action-bar[data-state="shown"] { transform: none; }
  .action-bar .btn { --btn-h: 48px; padding-inline: var(--space-4); white-space: nowrap; }
  .action-bar__call { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-tint-blue); color: var(--color-blue); font-weight: 700; text-decoration: none; }
  .action-bar__call .icon { width: 18px; height: 18px; stroke-width: 2; }
  .action-bar__call:active { transform: scale(0.97); }
  .action-bar .lbl-short { display: none; }
  @media (max-width: 429.98px) {   /* 320-429: Call becomes its icon (the label stays for screen readers): "Get a quote" wrapped at 390 (site review 2026-10-04) */
    .action-bar__call { width: 48px; padding: 0; justify-content: center; }
    .action-bar__call .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .action-bar .btn { padding-inline: var(--space-3); }
  }
  .site-footer { padding-bottom: 76px; }
  @media (max-width: 374.98px) { .action-bar .lbl-long { display: none; } .action-bar .lbl-short { display: inline; } }
  @media (min-width: 640px) { .action-bar { left: 50%; right: auto; width: min(560px, calc(100% - 16px)); translate: -50% 0; } }
  @media (prefers-reduced-motion: reduce) { .action-bar { transition: opacity var(--d-ui, 240ms) ease; } .action-bar:not([data-state="shown"]) { opacity: 0; } }
}

/* ---------- 13 · buttons inside the dark bands (base.css re-maps --color-blue to a light blue there) ---------- */
:is(.section--navy, .section--blue) .btn-accent { --btn-bg: #fff; --btn-fg: var(--navy-base); --btn-wash: #E8F0FD; --btn-press: #D3E2FB; }
:is(.section--navy, .section--blue) .btn-outline { --btn-bg: transparent; --btn-fg: #fff; --btn-line: rgb(255 255 255 / 0.7); --btn-wash: rgb(255 255 255 / 0.12); --btn-press: rgb(255 255 255 / 0.2); }
.section--blue .tile--light { --tile-bg: rgb(255 255 255 / 0.16); --tile-fg: #fff; }

/* ---------- 14 · motion layer (feedback 2026-10-05: "muito estatico"). CLAUDE.md: transform/opacity only, space
   reserved, nothing above the fold waits, reduced motion = fades only. site.js arms .rv-pre only on elements that
   start below the fold (no script = everything visible). ---------- */
.rv-pre { opacity: 0; transform: translateY(12px); }
.rv-pre.rv-in {   /* quicker still (Arthur 2026-10-05, second pass): 240 / 320 ms, 30 ms between siblings */
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 30ms);
}
.rv-pre.rv-fast { transform: translateY(8px); }
.rv-pre.rv-fast.rv-in { transform: none; transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out); transition-delay: 0ms; }   /* the review cards */
.rv-pre.rv-left { transform: translateX(-20px); }
.rv-pre.rv-right { transform: translateX(20px); }
.rv-pre.rv-left.rv-in, .rv-pre.rv-right.rv-in { transform: none; }
/* photos settle into their frame as they arrive */
.frame.rv-pre img { transform: scale(1.06); }
.frame.rv-pre.rv-in img { transform: none; transition: transform 600ms var(--ease-out) calc(var(--rv-i, 0) * 30ms); }
/* figures count up (site.js); the final value stays in the markup for screen readers */
.count-up { font-variant-numeric: tabular-nums; }
/* cards answer the pointer: a lift, the shadow fading in on a layer (opacity, not box-shadow) */
.lift { position: relative; transition: transform 260ms var(--ease-out); }
.lift::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; transition: opacity 260ms var(--ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .lift:hover { transform: translateY(-4px); }
  .lift:hover::after { opacity: 1; }
  .frame--zoom img { transition: transform 700ms var(--ease-out); }
  a:hover .frame--zoom img, .frame--zoom:hover img { transform: scale(1.04); }
}
/* scroll-linked drift on big photos (CSS scroll timeline; browsers without it just show the still photo) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frame--drift img { animation: drift linear both; animation-timeline: view(); animation-range: cover; scale: 1.12; }
  }
}
@keyframes drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
@media (prefers-reduced-motion: reduce) {
  .rv-pre, .rv-pre.rv-left, .rv-pre.rv-right { transform: none; }
  .rv-pre.rv-in { transition: opacity 200ms ease; }
  .rv-pre.rv-fast { transform: none; }
  .frame.rv-pre img { transform: none; }
  .lift, .lift::after { transition: none; }
  .lift:hover { transform: none; }
}

/* ---------- 15 · services stage (ported from TMC's #services: one card shows the lit service, the list picks it;
   on desktop the section pins and scrolling walks the list). Desktop (2026-10-05): the card is the photo alone in its
   own shape (3:2, widened with more scene) - every photo the same size, nothing cropped tight - inside a white border; the lit service's text sits
   under the list (all texts share one cell, so switching never moves the page). Phones: the cards stack and slide
   under each other (CSS sticky), each with its photo and text. */
.svc__body { display: grid; gap: var(--space-4); }
.svc-panel { display: grid; overflow: hidden; padding: 10px; border-radius: var(--radius-xl); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-hairline), var(--shadow-2); color: var(--color-ink); }
.svc-panel__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); background: var(--color-surface-2); }   /* the widened photos are 3:2 */
.svc-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 55%); }
.svc-panel__body { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5) clamp(12px, 2vw, 22px) clamp(14px, 2vw, 22px); }
.svc-panel h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }   /* a title (DESIGN.md: text face 700), not a headline */
.svc-panel__desc { color: var(--color-ink-muted); max-width: 46ch; }
.svc-panel .link-arrow { justify-self: start; }
.svc__list { display: none; }
@media (max-width: 1023.98px) {
  /* the stack: each card 8px lower than the one under it, so only its white border peeks out (12px showed a sliver of
     photo); the stage keeps a short run after the last card so it settles on the stack like the others */
  .svc-panel { position: sticky; top: calc(var(--topbar-h, 56px) + 20px + var(--k, 0) * 8px); margin-bottom: var(--space-4); }
  .svc-panel { grid-template-rows: auto 1fr; }   /* equal heights (site.js): the text area takes the extra, never the photo */
  .svc__stage::after { content: ""; display: block; height: 22vh; }   /* in-flow run (padding would not count for sticky) */
  .svc-panel:last-of-type, html:not(.x-on) .svc-panel:has(+ [data-extra]:last-child) { margin-bottom: 0; }
  @media (max-height: 599.98px) { .svc-panel { position: relative; top: auto; } }
}
@media (min-width: 1024px) {
  .svc__body { grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
  .svc__stage { position: relative; width: min(640px, calc((100vh - 310px) * 1.5)); aspect-ratio: 3 / 2; }   /* lower than the 4:3 card (Arthur: "não TÃO alta") */
  .svc-panel { position: absolute; inset: 0; padding: 16px; grid-template-rows: minmax(0, 1fr); }
  .svc-panel__media { aspect-ratio: auto; }
  .svc-panel__body { display: none; }
  .svc:not(.is-armed) .svc-panel:not([data-active="true"]), .svc:not(.is-armed) .svc-detail:not([data-active="true"]) { display: none; }
  .svc.is-armed .svc-panel, .svc.is-armed .svc-detail { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
  .svc.is-armed .svc-panel[data-active="true"] { z-index: 2; opacity: 1; visibility: visible; transition: opacity 180ms ease; }
  .svc.is-armed .svc-panel[data-active="true"] .svc-panel__media img { animation: svc-photo 900ms var(--ease-out) both; }
  .svc.is-armed .svc-detail[data-active="true"] { opacity: 1; visibility: visible; transition: opacity 180ms ease; }
  .svc.is-armed .svc-detail[data-active="true"] > * { animation: svc-line 420ms var(--ease-out) both; }
  .svc.is-armed .svc-detail[data-active="true"] > :nth-child(2) { animation-delay: 60ms; }
  .svc__list { display: grid; gap: var(--space-5); align-content: center; }
  .svc__items { position: relative; padding-left: 26px; }
  .svc__rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--color-hairline); overflow: hidden; }
  .svc__rail i { display: block; height: 100%; background: var(--color-blue); transform-origin: 50% 0; transform: scaleY(var(--p, 0.25)); transition: transform 240ms var(--ease-out); }
  .svc-list { display: grid; gap: 6px; }
  .svc-item {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
    width: 100%; padding: 10px 18px; border: 0; border-radius: var(--radius-lg); background: none; text-align: left; color: var(--color-ink); cursor: pointer;
    transition: transform var(--dur-press) var(--ease-out);
  }
  .svc-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-tint-blue); box-shadow: inset 0 0 0 1px var(--color-hairline); opacity: 0; transition: opacity 240ms var(--ease-out); }
  .svc-item[aria-pressed="true"]::before { opacity: 1; }
  .svc-item .tile { --tile-h: 40px; --tile-w: 44px; }
  .svc-item:not([aria-pressed="true"]) .tile { --tile-bg: var(--color-surface-2); --tile-fg: var(--color-ink-muted); }
  .svc-item b { display: block; font-size: var(--text-h3); line-height: var(--leading-title); }
  .svc-item:not([aria-pressed="true"]) b { color: var(--color-ink-muted); }
  .svc-item b + span { display: block; margin-top: 2px; font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-ink-muted); }
  .svc-item:active { transform: scale(0.98); }
  @media (hover: hover) and (pointer: fine) { .svc-item:hover::before { opacity: 0.55; } }
  /* the lit service's text: every text in the same cell, so the block is as tall as the longest and never jumps */
  .svc__detail { display: grid; padding-left: 26px; }
  .svc-detail { grid-area: 1 / 1; display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
  .svc-detail p { color: var(--color-ink-muted); max-width: 48ch; }
  /* the pin: the section is taller than the screen and its content sticks while the list walks (site.js) */
  .svc.is-pinned { padding-block: 0; height: calc(100vh + var(--svc-n, 4) * 32vh); }
  .svc.is-pinned > .svc__pin { position: sticky; top: 0; display: grid; align-content: center; min-height: 100vh; padding-top: calc(var(--nav-top, 16px) + var(--nav-h, 60px) + var(--space-4)); padding-bottom: var(--space-6); }
  .svc.is-pinned .section__head { margin-bottom: var(--space-6); }
}
@keyframes svc-line { from { opacity: 0; transform: translateY(10px); } }
@keyframes svc-photo { from { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .svc.is-armed .svc-panel[data-active="true"] .svc-panel__media img, .svc.is-armed .svc-detail[data-active="true"] > * { animation: none; }
}

/* ---------- 16 · ticker: the client's own checklist running across a gold band (pauses on hover; reduced motion = a
   static wrapped list) ---------- */
.ticker { --ticker-gap: clamp(28px, 4vw, 56px); overflow: hidden; background: var(--color-gold); color: var(--navy-base); padding-block: 18px; }
.ticker__row { display: flex; width: max-content; }
.ticker ul { display: flex; flex: none; gap: var(--ticker-gap); padding-right: var(--ticker-gap); }
.ticker li { display: inline-flex; align-items: center; gap: var(--ticker-gap); font: 800 clamp(1rem, 0.9rem + 0.5vw, 1.25rem) / 1.2 var(--font-display); font-stretch: var(--display-stretch); white-space: nowrap; }
.ticker li::after { content: ""; width: 12px; height: 16px; background: currentColor; transform: skewX(calc(-1 * var(--slant))); }
@media (prefers-reduced-motion: no-preference) {
  .ticker__row { animation: ticker var(--ticker-dur, 48s) linear infinite; }
  .ticker:hover .ticker__row, .ticker:focus-within .ticker__row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__row { width: auto; }
  .ticker ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-inline: var(--gutter); }
  .ticker ul[aria-hidden] { display: none; }
  .ticker li { white-space: normal; }
}
@keyframes ticker { to { transform: translateX(-50%); } }