/* Tramas Logistics
   Palette from Seville: albero (bullring sand), almagra (façade red), cal (whitewash), asfalto (road). */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --asfalto: #121311; --asfalto-2: #1d1e1b; --line-dark: #3a3b35;
  --cal: #f3efe6; --cal-2: #e6e0d1; --line-light: #c4bdab;
  --albero: #e9ae2c; --almagra: #a63a21; --error: #6b1a0b;
  --on-dark-2: #b4b0a3; --on-light-2: #57534a;
  --gut: clamp(16px, 4vw, 56px);
  --sec: clamp(88px, 12vw, 180px);
  --header: 72px;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --h1: 8.3vw;
}
html[lang^="pt"] { --h1: 9.6vw; }
html[lang="en"] { --h1: 12.4vw; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--asfalto); color: var(--cal); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.nav-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--albero); outline-offset: 3px; }
.net :focus-visible, .co :focus-visible, .mani :focus-visible, .legal :focus-visible, .ct :focus-visible { outline-color: var(--asfalto); }

.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background: var(--albero); color: var(--asfalto); transform: translateY(-200%); }
.skip:focus { transform: none; }

.mono { font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.mono-h { font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-2); }
.kicker { font: 500 13px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.h2 { font: 800 clamp(42px, 7vw, 118px)/.92 var(--sans); font-stretch: 80%; text-transform: uppercase; letter-spacing: -.012em; margin-top: 18px; text-wrap: balance; }
.lede { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.45; max-width: 36em; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; flex: none; transition: transform .3s var(--ease); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 24px; border: 2px solid transparent; font: 700 15.5px/1.1 var(--sans); text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; }
.btn:hover .ico { transform: translateX(5px); }
.btn--albero { background: var(--albero); color: var(--asfalto); }
.btn--albero:hover { background: var(--cal); }
.btn--ghost { border-color: var(--cal); color: var(--cal); }
.btn--ghost:hover { background: var(--cal); color: var(--asfalto); }
.btn--dark { background: var(--asfalto); color: var(--cal); }
.btn--dark:hover { background: var(--almagra); }

.weave { height: 36px; background-color: var(--asfalto); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36'%3E%3Cg fill='%23e9ae2c'%3E%3Crect x='2' y='3' width='32' height='12'/%3E%3Crect x='38' y='21' width='32' height='12'/%3E%3C/g%3E%3Cg fill='%23a63a21'%3E%3Crect x='2' y='21' width='32' height='12'/%3E%3Crect x='38' y='3' width='32' height='12'/%3E%3C/g%3E%3C/svg%3E"); }

/* Header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header); padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; color: var(--cal); transition: background-color .3s; }
.hdr.is-solid, .page-legal .hdr { background: var(--asfalto); }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; min-height: 44px; }
.logo__mark { width: 30px; height: 30px; fill: var(--albero); }
.logo__word { font: 800 25px/1 var(--sans); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 4px; }
.nav__list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; background: linear-gradient(var(--albero), var(--albero)) 12px calc(100% - 9px) / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.nav__list a:hover { background-size: calc(100% - 24px) 2px; }
.lang { display: flex; }
.lang a { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; font: 500 13px/1 var(--mono); text-decoration: none; opacity: .72; }
.lang a:hover { opacity: 1; }
.lang a[aria-current] { opacity: 1; color: var(--albero); text-decoration: underline; text-underline-offset: 4px; }
.hdr__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: var(--albero); color: var(--asfalto); font: 700 14.5px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .25s; }
.hdr__cta:hover { background: var(--cal); }
.hdr__cta:hover .ico { transform: translateX(4px); }
.burger { display: none; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; padding: 0 2px; background: none; border: 0; font: 500 13px/1 var(--mono); text-transform: uppercase; position: relative; z-index: 2; }
.burger__lines { display: block; width: 26px; height: 12px; position: relative; }
.burger__lines i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger__lines i:first-child { top: 0; }
.burger__lines i:last-child { top: 10px; }
.burger[aria-expanded="true"] .burger__lines i:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .hdr__cta { display: none; }
  .nav { position: fixed; inset: 0; margin: 0; padding: calc(var(--header) + 24px) var(--gut) 32px; background: var(--asfalto); flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 32px; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; overflow-y: auto; }
  .nav.is-open { visibility: visible; opacity: 1; }
  .nav__list { flex-direction: column; gap: 6px; width: 100%; }
  .nav__list a { padding: 8px 0; font: 800 clamp(38px, 11vw, 64px)/1 var(--sans); font-stretch: 78%; letter-spacing: 0; background: none; }
  .lang a { font-size: 16px; min-width: 52px; }
  .logo { position: relative; z-index: 2; }
}

/* Odometer */
.odo { position: fixed; right: 10px; top: 50%; z-index: 40; writing-mode: vertical-rl; transform: translateY(-50%); font: 500 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--cal); background: var(--asfalto); padding: 10px 5px; pointer-events: none; }
.odo b { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 1279px) { .odo { display: none; } }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding: calc(var(--header) + 20px) var(--gut) 24px; display: flex; flex-direction: column; overflow: hidden; background: var(--asfalto); color: var(--cal); }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--asfalto) url("../img/highway-poster-1600.webp") center / cover no-repeat; }
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgb(18 19 17 / .08) 0 1px, transparent 1px 5px), linear-gradient(180deg, rgb(18 19 17 / .66), rgb(18 19 17 / .12) 34%, rgb(18 19 17 / .58) 66%, rgb(18 19 17 / .9)); }
.hero__weft { display: none; position: absolute; inset: 0; z-index: 30; flex-direction: column; pointer-events: none; }
.js .hero__weft { display: flex; }
.js:not(.ready) .hero__weft { animation: failsafe 0s 3s forwards; }
@keyframes failsafe { to { visibility: hidden; } }
.hero__weft i { flex: 1; background: var(--asfalto); margin-bottom: -1px; }
.hero__def { align-self: flex-end; width: min(350px, 100%); padding: 14px 16px; background: rgb(18 19 17 / .78); font: 400 13px/1.5 var(--mono); }
.hero__def p + p { margin-top: 6px; }
.hero__def span { color: var(--albero); font-weight: 500; }
.hero__word { font-size: 15px; }
.hero__word b { font-weight: 500; color: var(--albero); }
.hero__word em { font-style: italic; opacity: .85; }
.hero__title { --wd: 125; margin-top: auto; padding-top: 28px; font: 900 min(var(--h1), 19vh)/.86 var(--sans); font-stretch: calc(var(--wd) * 1%); text-transform: uppercase; letter-spacing: -.02em; }
.line { display: block; overflow: hidden; padding-top: .04em; white-space: nowrap; }
.line__in { display: inline-block; will-change: transform; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: end; margin-top: clamp(20px, 3vw, 36px); }
.hero__lede { max-width: 26em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.4; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.vid-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: var(--cal); background: rgb(18 19 17 / .55); border: 1px solid rgb(243 239 230 / .6); transition: background-color .2s, color .2s; }
.vid-btn:hover { background: var(--cal); color: var(--asfalto); }
.vid-btn .ico--play { display: none; fill: currentColor; stroke: none; }
.vid-btn.is-paused .ico--play { display: block; }
.vid-btn.is-paused .ico--pause { display: none; }
@media (max-width: 860px) {
  :root { --h1: 13.1vw; }
  html[lang^="pt"] { --h1: 15.6vw; }
  html[lang="en"] { --h1: 20.4vw; }
  .hero__title { --wd: 74; line-height: .9; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero__meta { justify-content: space-between; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__def { align-self: stretch; width: auto; max-width: 340px; padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 860px) and (max-height: 720px) { .hero__def p:last-child { display: none; } }

/* Manifesto */
.mani { background: var(--cal); color: var(--asfalto); padding: var(--sec) var(--gut); }
.mani__text { margin-top: 28px; max-width: 21em; margin-left: auto; font: 600 clamp(30px, 4.7vw, 76px)/1.08 var(--sans); font-stretch: 88%; letter-spacing: -.012em; }
.mani__text .w { display: inline-block; white-space: pre; }

.sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
@media (max-width: 860px) { .sec-head--split { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Services */
.svc { background: var(--asfalto); color: var(--cal); padding: var(--sec) var(--gut); }
.svc .kicker { color: var(--albero); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 6vw, 88px); }
.svc__stage { position: sticky; top: calc(var(--header) + 20px); align-self: start; height: min(74vh, 640px); overflow: hidden; background: var(--asfalto-2); }
.svc__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity .55s, transform 1.2s var(--ease); }
.svc__stage img.is-on { opacity: 1; transform: none; }
.svc-row { display: block; padding: clamp(22px, 2.6vw, 38px) 0; border-top: 1px solid var(--line-dark); }
.svc-row:last-child { border-bottom: 1px solid var(--line-dark); }
.svc-row__img { display: none; }
.svc-row__top { color: var(--on-dark-2); }
.svc-row h3 { display: flex; align-items: flex-end; min-height: 2lh; margin-top: 10px; font: 800 clamp(32px, 3.9vw, 68px)/1 var(--sans); font-stretch: 72%; text-transform: uppercase; transition: font-stretch .5s var(--ease), color .3s; }
.svc-row.is-on h3 { font-stretch: 100%; color: var(--albero); }
.svc-row p { max-width: 34em; margin-top: 8px; color: var(--on-dark-2); }
@media (max-width: 1023px) {
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .svc__stage { display: none; }
  .svc-row__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; }
  .svc-row h3 { min-height: 0; font-stretch: 80%; color: var(--cal); }
  .svc-row.is-on h3 { font-stretch: 80%; color: var(--cal); }
}

/* Network */
.net { background: var(--cal); color: var(--asfalto); padding: var(--sec) var(--gut); }
.net .kicker { color: var(--almagra); }
.net__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 5vw, 72px); align-items: start; }
.net__panel { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.readout { width: 100%; border-top: 2px solid var(--asfalto); padding-top: 14px; }
.readout .mono { color: var(--on-light-2); }
.readout__dest strong { display: block; margin-top: 4px; font: 900 clamp(48px, 6.2vw, 100px)/.95 var(--sans); font-stretch: 78%; text-transform: uppercase; color: var(--almagra); overflow-wrap: anywhere; }
.readout__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.readout__stats dd { margin-top: 6px; font: 500 clamp(16px, 1.3vw, 19px)/1.1 var(--sans); }
.readout__stats b { font: 800 clamp(30px, 3.1vw, 50px)/1 var(--sans); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.chips .mono-h { color: var(--on-light-2); }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { min-height: 44px; padding: 8px 14px; background: transparent; border: 1px solid var(--asfalto); font: 500 14px/1.1 var(--mono); transition: background-color .2s, color .2s; }
.chip:hover { background: var(--cal-2); }
.chip[aria-pressed="true"] { background: var(--asfalto); color: var(--albero); }
.net__map figcaption { margin-top: 14px; font: 400 12.5px/1.5 var(--mono); color: var(--on-light-2); max-width: 70ch; }
.map { width: 100%; height: auto; overflow: visible; }
.map__weft { fill: none; stroke: var(--asfalto); stroke-opacity: .3; stroke-width: 3; }
.route { fill: none; stroke: var(--almagra); stroke-opacity: .32; stroke-width: 1.5; stroke-linejoin: round; }
.route-live { fill: none; stroke: var(--almagra); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.city { cursor: pointer; }
.city__hit { fill: transparent; }
.city__dot { fill: var(--asfalto); transition: fill .2s; }
.city text { font: 500 18px var(--mono); fill: var(--asfalto); paint-order: stroke; stroke: var(--cal); stroke-width: 5px; stroke-linejoin: round; }
.city:hover .city__dot { fill: var(--almagra); }
.city.is-on .city__dot { fill: var(--almagra); }
.city.is-on text { fill: var(--almagra); font-weight: 500; }
.origin__ring { fill: none; stroke: var(--asfalto); stroke-width: 2; }
.origin__dot { fill: var(--albero); stroke: var(--asfalto); stroke-width: 2; }
.origin text { font: 500 18px var(--mono); fill: var(--asfalto); paint-order: stroke; stroke: var(--cal); stroke-width: 5px; stroke-linejoin: round; }
@media (max-width: 1023px) {
  .net__grid { grid-template-columns: minmax(0, 1fr); }
  .net__map { order: -1; }
}
@media (max-width: 640px) {
  .city text { font-size: 36px; stroke-width: 9px; display: none; }
  .city.is-on text { display: block; }
  .origin text { font-size: 34px; stroke-width: 9px; }
  .map__weft { stroke-width: 4; }
  .route { stroke-width: 2.5; }
  .route-live { stroke-width: 8; }
  .city__dot { r: 9px; }
}

/* Stages */
.tramos { background: var(--asfalto); color: var(--cal); }
.tramos__pin { padding: var(--sec) var(--gut); }
.tramos__track { display: grid; gap: 56px; }
.tramo--head .kicker { color: var(--albero); }
.tramo__fig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--asfalto-2); }
.tramo__fig img, .tramo__fig video { width: 100%; height: 100%; object-fit: cover; }
.tramo__video { position: absolute; inset: 0; }
.tramo__video .vid-btn { position: absolute; right: 12px; bottom: 12px; }
.tramo__txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 16px; }
.tramo__txt .mono { color: var(--albero); }
.tramo__txt h3 { font: 800 clamp(32px, 3.5vw, 56px)/1 var(--sans); font-stretch: 80%; text-transform: uppercase; }
.tramo__txt p { max-width: 32em; color: var(--on-dark-2); }
.tramos__bar { display: none; }
@media (min-width: 1024px) {
  .tramos__pin { height: 100vh; min-height: 620px; padding: calc(var(--header) + 12px) 0 28px; display: flex; flex-direction: column; overflow: hidden; }
  .tramos__track { display: flex; flex: 1; min-height: 0; gap: clamp(28px, 3.4vw, 56px); width: 100%; padding: 0 var(--gut); overflow-x: auto; }
  .motion .tramos__track { width: max-content; overflow: visible; will-change: transform; }
  .tramo { flex: 0 0 clamp(460px, 52vw, 820px); display: flex; flex-direction: column; min-height: 0; }
  .tramo--head { flex-basis: clamp(420px, 40vw, 640px); justify-content: center; }
  .tramo__fig { flex: 1; min-height: 0; aspect-ratio: auto; }
  .tramo__fig img { position: absolute; inset: 0; }
  .tramo__txt { grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: baseline; }
  .tramo__txt h3 { white-space: nowrap; }
  .motion .tramos__bar { display: block; height: 2px; margin: 18px var(--gut) 0; background: var(--line-dark); }
  .tramos__bar i { display: block; height: 100%; background: var(--albero); transform: scaleX(0); transform-origin: left; }
}

/* Company */
.co { background: var(--cal); color: var(--asfalto); padding: var(--sec) var(--gut); }
.co .kicker { color: var(--almagra); }
.co__title { margin-top: 18px; font: 900 clamp(44px, 9.6vw, 170px)/.9 var(--sans); font-stretch: 76%; text-transform: uppercase; letter-spacing: -.012em; }
.co__title span { display: block; }
.co__title span:last-child { text-align: right; color: var(--almagra); }
.co__fig { margin-top: clamp(32px, 5vw, 72px); aspect-ratio: 21 / 9; overflow: hidden; background: var(--cal-2); }
.co__fig img { width: 100%; height: 100%; object-fit: cover; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 72px); }
.co__data > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-light); }
.co__data > div:last-child { border-bottom: 1px solid var(--line-light); }
.co__data dt { color: var(--on-light-2); padding-top: 4px; }
.co__values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(48px, 7vw, 112px); }
.co__values li { padding-top: 14px; border-top: 2px solid var(--asfalto); }
.co__values h3 { font: 800 clamp(24px, 2.2vw, 34px)/1.05 var(--sans); font-stretch: 84%; text-transform: uppercase; }
.co__values p { margin-top: 8px; color: var(--on-light-2); }
@media (max-width: 860px) {
  .co__title span:last-child { text-align: left; }
  .co__fig { aspect-ratio: 16 / 10; }
  .co__grid, .co__values { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) { .co__data > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Contact */
.ct { background: var(--albero); color: var(--asfalto); padding: var(--sec) var(--gut); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 120px); }
.ct__title { margin-top: 18px; font: 900 clamp(52px, 7.2vw, 128px)/.92 var(--sans); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.01em; }
.ct__intro .lede { margin-top: 22px; }
.ct__mail { margin-top: 26px; font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); overflow-wrap: anywhere; }
.ct__mail a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ct__intro address { margin-top: 10px; }
.form { display: grid; gap: 20px; align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field label { display: block; font: 500 13px/1.3 var(--mono); }
.field__opt { opacity: .78; }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 46px; margin-top: 4px; padding: 8px 2px; font-size: 18px; background: transparent; border: 0; border-bottom: 2px solid var(--asfalto); border-radius: 0; }
.field textarea { resize: vertical; }
.field select { padding-right: 24px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--asfalto); outline-offset: 1px; }
.field__help { margin-top: 4px; font-size: 14px; }
.field__err { margin-top: 5px; font-weight: 700; font-size: 15px; color: var(--error); }
[aria-invalid="true"] { border-color: var(--error) !important; border-bottom-width: 3px !important; }
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--asfalto); }
.check a, .form__layer a { text-decoration: underline; text-underline-offset: 2px; }
.check .field__err { grid-column: 2; margin-top: 0; }
.hp { position: absolute; left: -9999px; }
.form__submit { justify-self: start; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { padding: 12px 14px; background: var(--asfalto); color: var(--cal); font-weight: 600; }
.form__layer { font-size: 13.5px; line-height: 1.5; }
@media (max-width: 860px) { .ct { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .form__row { grid-template-columns: minmax(0, 1fr); } .form__submit { justify-self: stretch; } }

/* Footer */
.ftr { background: var(--asfalto); color: var(--cal); padding: clamp(56px, 7vw, 96px) var(--gut) 24px; overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr__brand p { margin-top: 12px; max-width: 22em; color: var(--on-dark-2); }
.ftr ul { margin-top: 12px; }
.ftr ul a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.ftr ul a:hover { color: var(--albero); }
.ftr address { margin-top: 12px; color: var(--on-dark-2); font-size: 15.5px; overflow-wrap: anywhere; }
.ftr__giant { margin-top: 48px; font: 900 16vw/.78 var(--sans); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.03em; color: var(--albero); white-space: nowrap; }
.ftr__copy { margin-top: 28px; color: var(--on-dark-2); font: 400 12.5px/1.5 var(--mono); }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .ftr__grid { grid-template-columns: minmax(0, 1fr); } }

/* Legal pages */
.legal { background: var(--cal); color: var(--asfalto); padding: calc(var(--header) + clamp(40px, 6vw, 88px)) var(--gut) clamp(64px, 8vw, 120px); display: grid; grid-template-columns: 250px minmax(0, 72ch); gap: clamp(32px, 6vw, 96px); justify-content: center; }
.legal__toc nav { position: sticky; top: calc(var(--header) + 24px); }
.legal__toc .mono-h { color: var(--on-light-2); }
.legal__toc ol { margin-top: 10px; }
.legal__toc a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.3; text-decoration: none; }
.legal__toc a:hover { color: var(--almagra); text-decoration: underline; }
.legal .kicker { color: var(--almagra); }
.legal h1 { margin-top: 14px; font: 900 clamp(42px, 6vw, 84px)/.95 var(--sans); font-stretch: 76%; text-transform: uppercase; overflow-wrap: break-word; }
.legal__date { margin-top: 14px; font: 400 13.5px/1.4 var(--mono); color: var(--on-light-2); }
.legal__intro { margin-top: 22px; font-size: 19px; line-height: 1.5; }
.legal section { margin-top: 44px; scroll-margin-top: calc(var(--header) + 20px); }
.legal h2 { font: 800 clamp(23px, 2.1vw, 30px)/1.1 var(--sans); font-stretch: 88%; }
.legal__body p, .legal__body ul { margin-top: 12px; }
.legal__body ul { padding-left: 20px; list-style: square; }
.legal__body li + li { margin-top: 8px; }
.legal__body section a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: var(--almagra); overflow-wrap: anywhere; }
.legal-data { margin-top: 14px; }
.legal-data > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-light); }
.legal-data > div:last-child { border-bottom: 1px solid var(--line-light); }
.legal-data dt { font-weight: 600; }
.table-wrap { margin-top: 14px; overflow-x: auto; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; }
.legal th { text-align: left; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--asfalto); font: 500 12.5px/1.3 var(--mono); text-transform: uppercase; }
.legal td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-light); vertical-align: top; }
mark.todo { background: var(--albero); color: var(--asfalto); padding: 0 4px; font-weight: 600; }
.legal__back { margin-top: 56px; }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { order: 2; display: none; }
}
@media (max-width: 520px) { .legal-data > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* 404 */
.page-404 { background: var(--asfalto); }
.nf { min-height: 100vh; padding: var(--gut); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.nf h1 { font: 900 clamp(64px, 14vw, 220px)/.9 var(--sans); font-stretch: 80%; text-transform: uppercase; color: var(--albero); }
.nf__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

html:not(.js) .vid-btn, html:not(.js) .odo { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .hero__weft { display: none; }
}