:root {
  --core-green: #2c5234;
  --plus-green: #94a596;
  --full-brown: #ceb888;
  --pro-gray: #c8c9c7;
  --dark-blue: #041e42;
  --red: #d6001c;
  --white: #fafafa;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Scania Office", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ---------- Home screen ---------- */

.home {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 900ms ease;
}
#bg-a { z-index: 1; opacity: 1; }
#bg-b { z-index: 2; opacity: 0; }

.bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.brand-symbol {
  position: absolute;
  z-index: 4;
  top: 2vh;
  right: 3.74vw;
  width: 5.86vw;
}

.brand-wordmark {
  position: absolute;
  z-index: 4;
  bottom: 2vh;
  right: 3.58vw;
  width: 22.6vw;
}

.home-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 20.95vh 7.18vw 0;
}

.pyramid {
  flex: 0 0 auto;
  width: min(80.4vw, 46.2vh);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  column-gap: 2.17%;
  row-gap: 2.89%;
}

.tile {
  border-radius: 9.9%;
  cursor: pointer;
  transition: filter 700ms ease, opacity 700ms ease, box-shadow 700ms ease;
}

.tile-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 17.5% 0 0 14%;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  font-size: min(4.2vw, 2.38vh);
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 500ms ease;
}
.tile-label.revealed { opacity: 1; }

.tile { position: relative; }
.tile--active {
  box-shadow: 0 0 min(3vw, 24px) 0 rgba(255,255,255,.55);
  animation: pulse 1.8s ease-in-out infinite;
}
.tile--passed {
  opacity: .3;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.hero-copy {
  margin-top: 7vh;
  color: var(--white);
  max-width: 90vw;
}
.hero-copy h1 {
  margin: 0;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  font-size: 5.09vw;
  text-transform: uppercase;
  line-height: 1.05;
}
.hero-copy .tagline {
  margin: .3vh 0 5.7vh;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 400;
  font-size: 2.04vw;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
}
.hero-copy .cta {
  margin: 0;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  font-size: 2.74vw;
  text-transform: uppercase;
  letter-spacing: .06em;
  animation: cta-pulse 1.8s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ---------- Detail modal ---------- */

/* Proportions below are measured directly from ui-v1.3.pdf (page 9, 1080x1920)
   via PyMuPDF, not eyeballed - font-size/vw values are relative to the full
   viewport width, matching how the PDF's point sizes relate to its 1080pt page. */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(4, 30, 66, .55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  position: relative;
  background: var(--white);
  width: 85.2vw;
  max-height: 81.4vh;
  overflow-y: auto;
  padding: 1.96vh 4.4% 2.5vh;
  color: var(--dark-blue);
}

/* Built as two crossed bars (matches the PDF's vector X icon exactly) rather
   than a text glyph, which doesn't reliably fill its box at a given size. */
.modal-close {
  position: absolute;
  top: 1.96vh;
  right: 4.4%;
  width: min(2.04vw, 1.15vh);
  height: min(2.04vw, 1.15vh);
  min-width: 22px;
  min-height: 22px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 12%;
  background: var(--red);
}
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-eyebrow {
  margin: 0;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: min(2.8vw, 1.6vh);
}
.modal-title {
  margin: 0 0 1vh;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  font-size: min(16.4vw, 9.2vh);
  text-transform: uppercase;
  line-height: .9;
}

.section-heading {
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: min(4.4vw, 2.5vh);
  line-height: 1;
  border-bottom: 2px solid var(--dark-blue);
  padding-bottom: .48vh;
  margin: 1.5vh 0 0;
}

.base-cover-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.base-cover-list li {
  padding: .22vh 0;
  line-height: 1.15;
  border-bottom: 1px solid #ddd;
  font-size: min(3.3vw, 1.9vh);
}
.base-cover-list li:last-child { border-bottom: none; }

.addons-list {
  list-style: none;
  margin: .8vh 0 0;
  padding: .7em 4.6%;
  background: var(--dark-blue);
  border-radius: 10px;
}
.addons-list label {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .45vh 0;
  color: #dfe3ea;
  font-size: min(2.2vw, 1.25vh);
  line-height: 1.1;
  cursor: pointer;
}

/* Round selector matching the PDF: a plain ring plate; the center dot only
   appears when selected, and the row label goes from faded to full opacity.
   Ring/dot geometry (15px / 9.5px, 63% ratio) and colors are measured from
   the PDF's vector paths - they're real circles, not squares. */
.addons-list input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: min(1.4vw, .78vh);
  height: min(1.4vw, .78vh);
  min-width: 11px;
  min-height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.addons-list input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--dark-blue);
  opacity: 0;
  transition: opacity 200ms ease;
}
.addons-list input[type="checkbox"]:checked::after {
  opacity: 1;
}
.addons-list label span {
  opacity: .45;
  transition: opacity 200ms ease;
}
.addons-list input[type="checkbox"]:checked + span {
  opacity: 1;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.35vh auto 0;
  width: 20.35vw;
  min-width: 160px;
  height: 3.05vh;
  min-height: 44px;
  background: var(--dark-blue);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  font-size: min(1.95vw, 1.1vh);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}

/* ---------- Lead form + confirm/thank-you dialogs ---------- */
/* Geometry measured from ui-v1.3.pdf pages 17 (form) and 19/21 (dialogs). */

.form-card { padding-top: 1.2vh; }

.form-title {
  margin: 0 0 1vh;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 700;
  font-size: min(7.41vw, 4.17vh);
  text-transform: uppercase;
  line-height: .95;
}

.form-copy {
  margin: 0 0 1vh;
  font-family: "Scania Office Headline", sans-serif;
  font-weight: 400;
  font-size: min(1.67vw, .94vh);
  text-transform: uppercase;
  line-height: 1.3;
}

.field-row {
  height: 3.27vh;
}
.field-row:nth-child(odd) {
  background: rgba(4, 30, 66, .05);
}
.field-row input,
.field-row select {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: "Scania Office", sans-serif;
  font-size: min(2.81vw, 1.58vh);
  color: #000;
  padding: 0 2vw;
}
.field-row select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23041e42' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2vw center;
  background-size: 1vw;
}
.field-row--textarea {
  height: 16.2vh;
  background: rgba(4, 30, 66, .05) !important;
}
.field-row--textarea textarea {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  resize: none;
  font-family: "Scania Office", sans-serif;
  font-size: min(2.81vw, 1.58vh);
  color: #000;
  padding: 1.5vh 2vw;
}

.terms-row {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  margin: 1.19vh 0 0;
  cursor: pointer;
}
.terms-row input[type="checkbox"] {
  appearance: none;
  width: min(1.14vw, .64vh);
  height: min(1.14vw, .64vh);
  min-width: 12px;
  min-height: 12px;
  margin-top: .3em;
  flex-shrink: 0;
  border: 1.5px solid var(--dark-blue);
  background: var(--white);
}
.terms-row input[type="checkbox"]:checked {
  background: var(--dark-blue);
}
.terms-row span {
  font-style: italic;
  font-size: min(1.14vw, .64vh);
  color: #000;
}

.form-error {
  margin: 1vh 0 0;
  color: var(--red);
  font-size: min(1.5vw, .85vh);
  text-align: center;
}
.form-error[hidden] { display: none; }

#lead-form .cta-button { margin-top: 1.7vh; }

.confirm-card { text-align: left; }

.confirm-actions {
  display: flex;
  gap: 1vw;
  margin-top: 3vh;
}
.confirm-actions .cta-button {
  width: auto;
  margin: 0;
  padding: 0 1.4em;
  white-space: nowrap;
}
.cta-button--secondary {
  background: rgba(4, 30, 66, .05);
  color: var(--dark-blue);
}