/* =====================================================================
   Tokens. Measurements are taken from the 1920px-wide reference page.
   ===================================================================== */
 :root {
   --black: #000;
   --white: #fff;
   --mist: #f6f6f6;
   /* light bands and version cards */
   --muted: #666;
   /* card descriptions */
   --idle: #a8a8a8;
   /* disabled carousel arrow */
   --slot: #1c1c1c;
   /* empty image slot on black */
   --slot-light: #e3e3e3;
   /* empty image slot on light */

   --font: "Nissan Brand", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

   --container: 1280px;
   --pad: clamp(20px, 4vw, 48px);
   --gap: 16px;
   --card: 416px;
   /* (1280 - 2 x 16) / 3 */

   --s-20: 20px;
   --s-32: 32px;
   --s-52: 52px;
   --s-64: 64px;
   --s-68: 68px;
   --s-80: 80px;
   --s-108: 108px;

   box-sizing: border-box;
   padding-top: env(safe-area-inset-top, 0px);
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }

 @media (max-width: 720px) {
   :root {
     --s-52: 40px;
     --s-64: 40px;
     --s-68: 48px;
     --s-80: 48px;
     --s-108: 64px;
   }
 }

 /* ---------- Base ---------- */
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }


 h1,
 h2,
 h3,
 p,
 ul {
   margin: 0;
 }

 #tekton-main-content {
   color: var(--white);
 }

 #tekton-main-content ul {
   padding: 0;
   list-style: none;
 }

 #tekton-main-content a {
   color: inherit;
 }

 #tekton-main-content img {
   display: block;
   max-width: 100%;
 }

 :focus-visible {
   outline: 2px solid #c3002f;
   outline-offset: 3px;
 }

 .wrap {
   width: min(100% - 2 * var(--pad), var(--container));
   margin-inline: auto;
 }

 .wrap--wide {
   --container: 1600px;
 }

 /* ---------- Type ---------- */
 .h-xl {
   font-weight: 450;
   font-size: clamp(2rem, 1.2rem + 1.5vw, 3rem);
   line-height: 1.15;
   color: var(--white);
 }

 .h-lg {
   font-weight: 500;
   font-size: clamp(1.625rem, 1rem + 1.2vw, 2.375rem);
   line-height: 1.2;
   text-transform: uppercase;
   color: var(--white);
 }

 .h-md {
   font-weight: 500;
   font-size: clamp(1.25rem, .9rem + .6vw, 1.625rem);
   line-height: 1.25;
   text-transform: uppercase;
   color: var(--white);
 }

 .keep-case {
   text-transform: none;
 }

 /* ---------- Buttons ---------- */
 .agency-pro-red button:hover {
    background-color: unset !important;
 }
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   padding: 0 28px;
   border: 2px solid var(--white);
   border-radius: 999px;
   background: var(--white);
   color: var(--black);
   font: 700 .875rem/1 var(--font);
   letter-spacing: .05em;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .2s, color .2s;
 }

 .btn:hover {
   background: transparent;
   color: var(--white);
 }

 .btn--outline {
   width: 100%;
   border-color: var(--black);
   background: transparent;
   color: var(--black);
 }

 .btn--outline:hover {
   background: var(--black);
   color: var(--white);
 }

 /* ---------- Image slots ----------
   A slot shows its image once one is available. If none loads,
   it stays a flat block with a label saying what belongs there. */
 .media {
   position: relative;
   overflow: hidden;
   background: var(--slot);
 }

 .media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .media.is-empty::before {
   content: attr(data-label);
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   padding: 16px;
   text-align: center;
   font-size: .8125rem;
   color: #8b8b8b;
 }

 .media--wide {
   aspect-ratio: 2680 / 1200;
 }

 .media--intro {
   aspect-ratio: 2400 / 1056;
 }

 /* ---------- Hero ---------- */
 .hero {
   position: relative;
   height: max(440px, calc(100vw * 895 / 1920));
   background: var(--black);
 }

 .hero__media {
   position: absolute;
   inset: 0;
 }

 .hero__media img {
   object-position: 50% 100%;
 }

 .hero::after {
   content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 34%;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
 }

 .hero__content {
   position: relative;
   z-index: 1;
   text-align: center;
   padding-top: clamp(28px, 2.5vw, 48px);
 }

 .hero__price {
   margin-top: 10px;
   font-size: .875rem;
 }

 .hero__title .w {
   display: inline-block;
   overflow: hidden;
   vertical-align: bottom;
   padding-bottom: .12em;
   margin-bottom: -.12em;
 }

 .hero__title .w>span {
   display: inline-block;
   transform: translateY(110%);
   animation: rise .8s cubic-bezier(.2, .7, .1, 1) forwards;
   animation-delay: calc(var(--i) * 80ms + 120ms);
 }

 .hero__price {
   opacity: 0;
   animation: fade .5s ease .6s forwards;
 }

 @keyframes rise {
   to {
     transform: none;
   }
 }

 @keyframes fade {
   to {
     opacity: 1;
   }
 }

 /* ---------- Bands ---------- */
 .band {
   padding-block: var(--s-32) var(--s-68);
 }

 .band--dark {
   background: var(--black);
   color: var(--white);
   --img-gap: var(--s-64);
   --story-gap: var(--s-32);
 }

 .band--light {
   background: var(--mist);
   color: var(--black);
 }

 .band--white {
   background: var(--white);
   color: var(--black);
 }

 .band--light .media,
 .band--white .media {
   background: var(--slot-light);
 }

 .band--overview {
   padding-bottom: var(--s-80);
 }

 .band--interior {
   padding-block: var(--s-80) var(--s-32);
   --img-gap: var(--s-80);
   --story-gap: var(--s-80);
 }

 .band--safety {
   padding-block: var(--s-80) var(--s-108);
 }

 .band--adas {
   padding-bottom: var(--s-20);
 }

 .band--disclaimer {
   padding-bottom: var(--s-80);
 }

 /* Centred heading + copy (+ button) */
 .intro {
   text-align: center;
   
 }

  .intro a{
    color: var(--black);
  }
 .intro>p {
   margin-top: 16px;
 }

 .intro>.btn {
   margin-top: 20px;
 }

 .cta-row {
   text-align: center;
   margin-bottom: var(--s-32);
 }

 .intro--compact>p {
   margin-top: 24px;
 }

 /* Left-aligned heading + copy, then a wide image */
 .figure {
   margin-top: var(--img-gap);
 }

 .story {
   margin-top: var(--story-gap);
 }

 .story>p {
   margin-top: 20px;
 }

 /* ---------- Carousels ---------- */
 .carousel--after-head {
   margin-top: var(--s-64);
 }

 .carousel+.carousel {
   margin-top: var(--s-52);
 }

 .subhead {
   text-align: center;
   margin-block: 60px var(--s-64);
 }

 .rail {
   --gutter: max(var(--pad), calc((100% - var(--container)) / 2));
   display: flex;
   gap: var(--gap);
   padding-inline: var(--gutter);
   scroll-padding-inline: var(--gutter);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
 }

 .rail::-webkit-scrollbar {
   display: none;
 }

 .rail>li {
   flex: 0 0 min(var(--card), 78vw);
   scroll-snap-align: start;
 }

 .card .media {
   aspect-ratio: 4 / 5;
 }

 .card__title {
   margin-top: 24px;
   font-size: .875rem;
   font-weight: 500;
   line-height: 1.5;
   text-transform: uppercase;
 }

 .card__text {
   font-size: .875rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--muted);
 }

 .card__note {
   margin-top: 10px;
 }

 .arrows {
   display: flex;
   justify-content: flex-end;
   gap: 20px;
   margin-top: var(--s-32);
 }

 .arrow {
   width: 49px;
   padding: 12px 0;
   border: 0;
   background: none;
   color: var(--black);
   cursor: pointer;
   transition: color .2s;
 }

 .arrow svg {
   display: block;
   width: 49px;
   height: 14px;
 }

 .arrow:disabled {
   color: var(--idle);
   cursor: default;
 }

 /* ---------- Versions ---------- */
 .versions__title {
   text-align: center;
   margin-bottom: 28px;
 }

 .grade {
   display: flex;
   flex-direction: column;
   min-height: 685px;
   padding: 80px 32px 72px;
   background: var(--mist);
   border-radius: 8px;
 }

 .grade__name {
   font-size: 1.75rem;
   font-weight: 450;
   line-height: 1.2;
 }

 .grade__label {
   font-weight: 700;
 }

 .grade__list {
   margin-top: 22px;
   margin-bottom: 32px;
 }

 .grade__list li::before {
   content: "\2022\00a0";
 }

 .grade .media {
   margin-top: auto;
   aspect-ratio: 1160 / 600;
   background: transparent;
 }

 .grade .media img {
   object-fit: contain;
 }

 .grade .btn {
   margin-top: 24px;
 }

 /* ---------- Disclaimer ---------- */
 .disclaimer {
   text-align: center;
 }

 .disclaimer p {
   margin-top: 16px;
 }

 .disclaimer a {
   font-size: .875rem;
 }

 /* ---------- Small screens ---------- */
 @media (max-width: 720px) {
   .rail>li.grade {
     flex-basis: 84vw;
     min-height: 0;
     padding: 48px 24px 40px;
   }

   .grade .media {
     margin-top: 8px;
   }

   .subhead {
     margin-top: 44px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .hero__title .w>span {
     animation: none;
     transform: none;
   }

   .hero__price {
     animation: none;
     opacity: 1;
   }

   .btn,
   .arrow {
     transition: none;
   }
 }