@font-face {
  font-family: Inter;
  src: url("activos/inter-ui.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --field: #121211;
  --paper: #f8f7f3;
  --muted: #85837e;
  --slate: #3a4a49;
  --gutter: clamp(16px, 4.4vw, 80px);
  background: var(--field);
  color: var(--paper);
  font: 400 100%/1.45 Inter, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, figure, fieldset { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
.wrap { width: min(1280px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mast { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; }
.wordmark { font-weight: 500; letter-spacing: -.04em; font-size: 1.27rem; text-decoration: none; }
.wordmark span { font-weight: 300; }
.mast nav { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: clamp(.8rem, 3.3vw, 3rem); }
.mast nav a, .link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .875rem; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mast nav a { text-decoration: none; }
.mast nav a:hover, .link:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.vitrina { display: grid; grid-template-columns: minmax(0,1fr); padding: 10px 0 18px; }
.intro { grid-area: 1 / 1; align-self: end; width: min(35%, 432px); margin-bottom: 65px; z-index: 1; pointer-events: none; }
h1 { font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.intro p { margin-top: 12px; }
.display { grid-area: 1 / 1; width: min(950px, 75%); margin-inline: auto; }
.stage {
  --vehicle-width: min(75cqw, 710px, 76svh, calc(82cqh * 680 / 300));
  --vehicle-center: 57cqw;
  --vehicle-baseline: 18cqh;
  height: clamp(330px, 47svh, 420px);
  position: relative;
  container-type: size;
  isolation: isolate;
  background: var(--slate);
  overflow: hidden;
}
.stage::before { content: ""; position: absolute; inset: 0 0 19%; border-bottom: 1px solid #60716a; z-index: -2; }
.stage::after { content: ""; position: absolute; inset: auto 0 0; height: 19%; background: #31403b; z-index: -2; }
.pedestal {
  position: absolute;
  width: 76%;
  height: 21%;
  bottom: 8%;
  left: 12%;
  border: 1px solid #a0a99b;
  border-radius: 50%;
  background: #4b5a51;
  box-shadow: 0 11px 0 #25322c, 0 12px 0 #738176;
  z-index: -1;
}
.vehicle {
  position: absolute;
  left: var(--vehicle-center);
  bottom: var(--vehicle-baseline);
  translate: -50% 0;
  display: block;
  width: var(--vehicle-width);
  height: auto;
}
.cargo-guide {
  position: absolute;
  /* Anchor the trace at (204, 105) in the 680 × 300 cargo illustration. */
  left: calc(var(--vehicle-center) - var(--vehicle-width) * .2);
  bottom: calc(var(--vehicle-baseline) + var(--vehicle-width) * 195 / 680);
  display: grid;
  justify-items: start;
  font-size: .75rem;
  white-space: nowrap;
  color: var(--paper);
  pointer-events: none;
}
.cargo-guide span { padding: 3px 7px; border: 1px solid #b5c1ad; background: #27342e; }
.cargo-guide::after { content: ""; width: 6px; height: clamp(26px, 7.4svh, 68px); border-left: 1px solid #eee8cf; border-bottom: 2px solid #eee8cf; }
.display figcaption { text-align: right; margin-top: 7px; font-size: .76rem; color: var(--muted); }

.choices { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 0; padding: 0; margin-top: 20px; }
.choices label { position: relative; min-width: 0; }
.choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choices label, .choices input { -webkit-tap-highlight-color: transparent; }
.choices span { display: flex; align-items: center; gap: .45rem; min-height: 62px; border-top: 1px solid #60605c; padding: 8px 18px; color: #a9a79f; font-size: 1rem; white-space: nowrap; }
.choices span::before { content: ""; flex: 0 0 6px; height: 6px; border: 1px solid currentColor; }
.choices label:hover span { color: var(--paper); }
.choices input:checked + span { color: var(--paper); border-color: var(--paper); }
.choices input:checked + span::before { background: currentColor; }
.choices input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: -4px; }

.paper { background: var(--paper); color: var(--field); }
.quote, .service, .footer { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1fr); gap: 24px clamp(22px, 8vw, 110px); }
.quote { padding-block: 32px 48px; align-items: start; row-gap: 0; }
.quote-copy { grid-area: 1 / 2 / span 2; }
#change { justify-self: start; }
h2 { font-size: clamp(1.55rem, 3vw, 2.65rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
#question { font-size: clamp(1rem, 1.4vw, 1.2rem); }
.disclosure { margin-top: 8px; color: #534f47; font-size: .75rem; }
.service { padding-block: 56px; border-top: 1px solid #b5b2aa; }
.service section { display: flex; flex-direction: column; align-items: flex-start; }
.service h2 { margin-bottom: 14px; }
.service .service-note { margin-block: 8px 2px; max-width: 43ch; }
.service address { font-style: normal; }
.service .hours-note { margin-block: 12px 3px; max-width: 36ch; }
.service .directions { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sources { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1fr); gap: 12px clamp(22px, 8vw, 110px); border-top: 1px solid #b5b2aa; padding-block: 36px; }
.sources h2 { font-size: clamp(1.35rem, 2.2vw, 2rem); }
.sources .source-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer { padding-block: 42px 30px; }
.footer p:not(.wordmark) { color: var(--muted); margin-top: 8px; font-size: .875rem; }
.footer div:last-child { display: flex; flex-wrap: wrap; gap: 0 1.4rem; align-items: flex-start; }

@media (max-width: 1180px) {
  .intro { width: auto; margin-bottom: 10px; }
  .intro p { margin-top: 6px; }
  .display { grid-area: auto; width: 100%; }
  .stage { --vehicle-center: 50cqw; height: clamp(288px, 38svh, 350px); }
  .cargo-guide::after { height: clamp(25px, 5svh, 49px); }
  .choices { margin-top: 8px; }
  .vitrina { padding-bottom: 10px; }
  .quote { padding-block: 12px 36px; }
  .quote-copy .disclosure { margin-top: 4px; }
}

@media (max-width: 650px) {
  .mast { min-height: 60px; }
  .wordmark { font-size: 1.09rem; }
  .mast nav a { font-size: .75rem; }
  .vitrina { padding: 11px 0 3px; }
  .intro { margin-bottom: 14px; }
  .intro p { margin-top: 8px; font-size: .875rem; }
  h1 { font-size: calc(clamp(12px, calc(10vw - 23px), 16px) + 1.25rem); }
  .stage { --vehicle-width: min(96cqw, calc(82cqh * 680 / 300)); --vehicle-baseline: 13cqh; height: clamp(172px, 53vw, 270px); }
  .pedestal { width: 89%; left: 5.5%; bottom: 10%; }
  .cargo-guide { font-size: .66rem; }
  .cargo-guide span { padding: 2px 4px; }
  .cargo-guide::after { height: clamp(17px, calc(5.8vw + 4px), 39px); }
  .choices { display: flex; flex-wrap: wrap; margin-top: 4px; }
  .choices label { flex: 1 0 auto; }
  .choices span { min-height: 46px; padding: 7px 6px; font-size: .875rem; gap: .3rem; }
  .quote, .service, .sources, .footer { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .quote { padding-block: 7px 24px; row-gap: 3px; }
  .quote-copy { grid-area: auto; }
  .service { padding-block: 30px; gap: 24px; }
  .service h2 { margin-bottom: 8px; }
  .sources { padding-block: 26px; }
  .footer { padding-block: 24px; }
}

@media (max-width: 350px) {
  .mast nav { column-gap: .55rem; }
}
@media (max-width: 420px) {
  .stage { height: clamp(170px, 41vw, 182px); }
}