@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400&display=swap");
/* ========================================================================
   Dell host page: hide its title block, drop container padding
   ======================================================================== */
.cp-page-top-container,
.cp-page-title {
  display: none !important;
}

div[id*=mcl-custom-code] .cp-container__body {
  padding: 0;
}

/* stacked variant: shown under 1300px, mobile crop only under 980px.
   id-scoped to beat Dell's .rwp-webpart img { display: block } */
/* ========================================================================
   Intro — sticky scrub video, logo build-up, letter-by-letter blocks, promo
   ======================================================================== */
#mc-section {
  position: relative;
  height: 850vh;
}

#mc-video-wrap {
  position: sticky;
  top: 0;
  width: var(--mc-vw, 100vw);
  height: 100vh;
  /* iOS Safari: 100vh is the LARGE viewport — the height with the browser chrome
     collapsed — so while the chrome is showing, the bottom of this box sits under it and
     everything anchored there (the promo, the scroll hint, blocks 2/3) falls below the
     fold. dvh tracks the VISIBLE viewport, which is also what the JS measures with
     window.innerHeight, so the two finally agree. The 100vh above stays as the fallback
     for browsers without dvh; svh would avoid the mid-scroll resize but leaves a strip of
     the next section showing once the chrome collapses. */
  height: 100dvh;
  margin-left: calc(50% - var(--mc-vw, 100vw) / 2);
  overflow: hidden;
  /* video frame 0 as a still behind the hidden video, so the logo build-up plays
     over it and the video fades in seamlessly. same center/cover framing */
  background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)), url("https://i.dell.com/assetlink/img/global/mcl-dell-intro-first-frame-dl2hg8-original.jpg") center/cover no-repeat, #0a0a0a;
}

/* mobile only — desktop carries frame 0 on #mc-video-wrap's background instead */
#mc-intro-poster {
  display: none;
}

#mc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* hidden over the black #mc-video-wrap bg during the intro logo build-up,
     then faded in (JS adds #mc-section.mc-video-in once the logo has moved) */
  opacity: 0;
  transition: opacity 0.4s ease;
}

#mc-section.mc-video-in #mc-video {
  opacity: 1;
}

/* floating Miami promo over the intro video (bottom-left) — fades in with the video */
#mc-intro-promo {
  position: absolute;
  left: 25px;
  bottom: 25px;
  z-index: 4;
  /* Figma 11731:3974 (Austin Promo) — 240x178: a COLUMN, image over the caption, where
     this used to be a 320px row with the image beside the text. The 178 isn't set: it
     falls out of 16 + 90 (image) + 8 (gap) + 48 (two 24px lines) + 16, so a longer
     translation takes a third line instead of clipping. The design node is docked to
     the viewport's left edge (border on 3 sides, right corners rounded) — ours floats,
     so it keeps the full radius and no border. */
  width: 240px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  /* Figma 11881:203295 — light at the top, slate at the bottom (the previous fill ran
     the other way and at half the light stop's alpha). --slate/600 is written as its
     literal fallback; this project has no token layer for these colours. */
  background: linear-gradient(180deg, rgba(197, 212, 227, 0.32) 50%, rgba(41, 59, 77, 0.8) 100%);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.45s ease;
  will-change: transform;
}

#mc-section.mc-video-in #mc-intro-promo {
  opacity: 1;
  pointer-events: auto;
}

/* once triggered, the promo slides itself out to the left (clipped by the
   video-wrap), and slides back in on the same transition when scrolling back up */
#mc-intro-promo.mc-promo-out {
  transform: translateX(-400px);
  pointer-events: none;
}

/* 208x90 in the design (240 less the 16px padding either side). The asset is authored at
   exactly that ratio (416x180, 2x for retina), composited from the Figma layers — orange
   gradient, Austin skyline at 56%, car on top — so nothing crops here. cover is kept only
   so a future asset at another ratio fills rather than distorts. */
#mc-intro-promo img {
  flex: 0 0 auto;
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

#mc-intro-promo .mc-promo-text {
  color: #ffffff;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

#mc-intro-promo .mc-promo-chevron {
  vertical-align: middle;
  margin-left: 6px;
  color: #e6ac28;
}

/* scrub debug HUD (progress track + time/frame bubble); opt in via ?scrub,
   which adds .mc-scrub-enabled */
#mc-scrub-track {
  display: none;
  position: fixed;
  top: 106px;
  bottom: 0;
  right: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 99999;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#mc-scrub-track.mc-scrub-enabled {
  display: block;
}

#mc-scrub-track.mc-scrub-hidden {
  opacity: 0;
}

#mc-scrub-fill {
  width: 100%;
  height: 0%;
  background: #ffb100;
  transition: height 0.08s linear;
}

#mc-scrub-bubble {
  position: absolute;
  right: 10px;
  top: 0;
  transform: translateY(-50%);
  background: #f79f1c;
  color: #000;
  font-size: 11px;
  font-family: "Menlo", "Consolas", monospace;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.35;
  pointer-events: none;
}

/* logo lockup: a row (McLaren F1 Team | divider | Dell Technologies) above the
   official-partner line. Docks at top:149px; builds up centred first
   (.mc-centered, inline top from JS). Every width is a % of the 511px box so
   the whole lockup scales as one at the 70vw cap */
#mc-logo-parts {
  position: absolute;
  top: 149px;
  left: 50%;
  transform: translateX(-50%);
  width: 511px;
  /* fills the viewport bar a 15px inset each side until it hits its 511px size
     (at a 541px viewport); past that the side margins grow instead */
  max-width: calc(100vw - 30px);
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: top 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
}

.mc-logo-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* build-up position: centred in the viewport (top set inline by JS, accounting
   for the Dell masthead) */
#mc-logo-parts.mc-centered {
  transform: translate(-50%, -50%);
}

.mc-logo-part {
  display: block;
  height: auto;
  transition: opacity 0.9s ease, transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* pre-build-up: McLaren fully off-screen left, Dell fully off-screen right —
   they slide in from off screen as the divider and partner line fade in.
   Widths are the two PNGs' own proportions (488 and 516 of the 1035-wide
   lockup), so at equal height they align with the reference artwork */
/* flex: 0 0 auto (basis from the width, no shrinking) — as shrinkable items the
   two logos gave up ~3% of their width to the 1px hairline in the mobile box */
.mc-logo-part-mclaren {
  width: 47.15%;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-100vw);
}

.mc-logo-part-dell {
  width: 49.86%;
  flex: 0 0 auto;
  margin-left: 2.6%;
  opacity: 0;
  transform: translateX(100vw);
}

/* built state (JS adds .mc-built): the sides settle into place */
#mc-logo-parts.mc-built .mc-logo-part-dell,
#mc-logo-parts.mc-built .mc-logo-part-mclaren {
  opacity: 1;
  transform: translateX(0);
}

/* vertical rule between the two logos (replaces the old plus). align-self:
   stretch takes the row's height, which is the logo images' height */
.mc-logo-divider {
  /* flex-basis, not width: as a shrinkable item the hairline rounded to 0.5px
     inside the 70vw mobile box */
  flex: 0 0 1px;
  align-self: stretch;
  margin-left: 0.2%;
  background: #fff;
  opacity: 0;
  /* 0.7s delay = just before the sliding logos land (measured: ~98% of travel at
     700ms, home at ~940ms, on the 1.25s cubic-bezier(0.22, 1, 0.36, 1)) */
  transition: opacity 0.9s ease 0.7s;
}

/* "OFFICIAL INNOVATION PARTNER" under the lockup; % margin-top resolves against
   the container width, so the gap scales with the logos */
.mc-logo-partner {
  display: block;
  width: 54.3%;
  height: auto;
  margin-top: 4.4%;
  opacity: 0;
  transition: opacity 0.9s ease 0.7s;
}

/* the divider and the partner line fade in with the sliding logos */
#mc-logo-parts.mc-built .mc-logo-divider,
#mc-logo-parts.mc-built .mc-logo-partner {
  opacity: 1;
}

/* refreshed mid-page: JS adds .mc-skip + the final classes, so the logo appears
   assembled with no motion */
#mc-logo-parts.mc-skip,
#mc-logo-parts.mc-skip * {
  transition: none !important;
  animation: none !important;
}

/* intro vignette: heaviest top/bottom/corners, keeping the horizon band
   (sunset + car) brightest */
#mc-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 14, 20, 0.24) 0%, #0a0e14 100%), linear-gradient(180deg, #0a0e14 14.64%, rgba(10, 14, 20, 0) 50%), linear-gradient(180deg, rgba(10, 14, 20, 0) 50%, #0a0e14 84.82%);
  pointer-events: none;
  /* same duration + easing as the logo's slide-up so the vignette fades in
     lockstep with it and is fully gone exactly when the logo locks at the top */
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the vignette fades out as the logo slides up to dock */
#mc-section.mc-vignette-out #mc-overlay {
  opacity: 0;
}

/* bottom scrim: stays for the whole intro (only the vignette fades out).
   65% #0A0E14 to ~25%, clear by ~60% up */
#mc-intro-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 14, 20, 0.5) 0%, rgba(10, 14, 20, 0.5) 25%, rgba(10, 14, 20, 0) 60%);
}

#mc-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* mobile only (display:block in the mobile block) — sits behind .mc-block-1 and
   is faded out by applyBlock() in step with that block */
#mc-scrim-top {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* dark navy rather than black — rgb(4,20,41) is the top of frame 0 (rgb(8,39,82))
     halved, so this wash deepens the sky instead of neutralising it */
  background: linear-gradient(to bottom, rgba(4, 20, 41, 0.5) 0%, rgba(4, 20, 41, 0.5) 33%, rgba(4, 20, 41, 0) 41.5%);
  pointer-events: none;
}

/* hide text until JS has wrapped the characters — the heavy host page would
   otherwise flash raw text mid-load */
#mc-section:not(.mc-ready) .mc-block {
  opacity: 0;
}

.mc-block {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 960px;
  padding: 0 60px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

.mc-block h1,
.mc-block p {
  margin: 0;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* pinned under the car in frame 0 and scaled to fill the gap to the scroll hint
   — both from layoutBlock1() (desktop/tablet). 65vh is the pre-JS fallback */
.mc-block-1 {
  text-align: left;
  top: 65vh;
  bottom: auto;
}

/* "Scroll to start" hint centred below the intro headline; fades out as the
   hero starts scrubbing (opacity driven by JS) */
.mc-scroll-hint {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #ffffff;
  z-index: 3;
  pointer-events: none;
}

/* SCROLL TO START, one line at every width — no max-width, so nothing depends on the
   copy's measured width and a longer translation just gets wider */
.mc-scroll-hint-text {
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
}

/* chevrons: a papaya highlight sweeps top-to-bottom and repeats */
.mc-scroll-hint svg {
  display: block;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.32);
  animation: mcScrollFlow 1.44s ease-in-out infinite;
}

/* second chevron nests just under the first; its highlight lags behind so the
   colour sweeps downward through the pair */
.mc-scroll-hint .mc-scroll-chevron-2 {
  margin-top: 1px;
  animation-delay: 0.26s;
}

/* hidden through the logo build-up AND the headline type-on; animateBlock1() adds
   .mc-hint-in when the headline finishes. The delay waits out the rules above and below
   the headline, which wipe in over 0.7s on that same cue (h1::before/::after), so the
   hint arrives last. */
#mc-section.mc-hint-in .mc-scroll-hint {
  opacity: 1;
  transition-delay: 0.7s;
}

/* once scrubbing starts, opacity is JS-driven per scroll frame (tick()'s
   PX_HINT_FADE fade) — the 0.7s delay above is for the one-time fade-in only;
   left in place it re-arms on every frame's inline opacity write, so the hint
   never visually catches up during a continuous scroll */
#mc-section.mc-scrolled .mc-scroll-hint {
  transition: none;
}

/* line-height/padding are relative so JS can scale the whole headline by
   setting font-size alone. 80px is the max (current) size. */
.mc-block-1 h1 {
  position: relative;
  font-size: 80px;
  line-height: 1.1;
  padding: 0.25em 0;
  letter-spacing: -0.5px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.mc-block-1 h1::before,
.mc-block-1 h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  transition: clip-path 0.7s ease;
}

/* top line: hidden clipped from the right, wipes in left -> right */
.mc-block-1 h1::before {
  top: 0;
  clip-path: inset(0 100% 0 0);
}

/* bottom line: hidden clipped from the left, wipes in right -> left */
.mc-block-1 h1::after {
  bottom: 0;
  clip-path: inset(0 0 0 100%);
}

.mc-block-1.mc-done h1::before,
.mc-block-1.mc-done h1::after {
  clip-path: inset(0 0 0 0);
}

.mc-block-2 p,
.mc-block-3 p {
  font-size: 40px;
  line-height: 1.2;
}

.mc-word {
  display: inline-block;
  white-space: nowrap;
}

.mc-char {
  display: inline-block;
  opacity: 0;
}

.mc-char.visible {
  opacity: 1;
}

.mc-cursor {
  display: inline-block;
  width: 0;
  overflow: visible;
  white-space: nowrap;
  color: #ff8000;
}

/* ========================================================================
   Nav — fixed segmented pill
   ======================================================================== */
/* top section-nav pill */
#mc-nav {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  /* below the Dell masthead (z 1000) so it never covers it, but above the
     McLaren sections */
  z-index: 999;
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  height: 34px;
  background: transparent;
  font-family: "Roboto", Arial, sans-serif;
  /* one backdrop root for the whole pill rather than one per item: with a blur on
     each item, a neighbour's 20px sample radius reaches across the 2px gap and picks
     up the active item's amber fill, smearing it behind the next label until
     something forces a repaint. Blurring here puts the fills above the blurred layer,
     where they can't be sampled. Clipped to the pill so the corners stay round. */
  border-radius: 9999px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* parked above the viewport until the Dell masthead scrolls away. Hiding is
   instant (transition: none) so it never animates up through the masthead */
#mc-nav.mc-nav-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

.mc-nav-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30px;
  font-size: 16px;
  line-height: 24px;
  color: #c3c7cc;
  background: rgba(64, 88, 109, 0.24);
  /* border on the outer edges only, never on the side facing another item */
  border-top: 1px solid rgba(164, 184, 205, 0.15);
  border-bottom: 1px solid rgba(164, 184, 205, 0.15);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease;
}

/* see the JS comment on the .mc-scrubbing toggle in tick() — a live blur recomputed
   every scroll tick against the changing video stalled the GPU compositor on real
   devices. The items' flat background still shows through, just without the blur */
html.mc-scrubbing #mc-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* amber active fill lives on a pseudo-element so it can cross-fade */
.mc-nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ff8000;
  background: linear-gradient(135deg, rgba(255, 128, 0, 0.7) 0%, rgba(255, 181, 15, 0.7) 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mc-nav-item.is-active::before {
  opacity: 1;
}

.mc-nav-item:first-child {
  border-left: 1px solid rgba(164, 184, 205, 0.15);
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.mc-nav-item:last-child {
  border-right: 1px solid rgba(164, 184, 205, 0.15);
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.mc-nav-item.is-active {
  color: #fff;
  font-weight: 600;
}

/* win over Dell's global anchor colour/underline (higher specificity) */
#mc-nav .mc-nav-item,
#mc-nav .mc-nav-item:visited {
  color: #c3c7cc;
  text-decoration: none;
}

#mc-nav .mc-nav-item:not(.is-active):hover {
  color: #ffb100;
}

#mc-nav .mc-nav-item.is-active {
  color: #fff;
}

/* nav labels: full wording on desktop, short on mobile */
.mc-nav-short {
  display: none;
}

/* ========================================================================
   Team / Mission / Factory — shared sticky-section frame + bg video
   ======================================================================== */
/* each slide-over section is pulled up a viewport so it covers the still-pinned
   previous one; ascending z-index keeps the newer one on top */
/* team is pulled up an extra viewport so it pins exactly as the intro scrub
   ends, then fades in (opacity driven by JS) over the still-visible intro */
#mc-team-outer {
  position: relative;
  z-index: 2;
  margin-top: -200vh;
}

#mc-mission-control-outer {
  position: relative;
  z-index: 3;
  margin-top: -100vh;
}

#mc-factory-outer {
  position: relative;
  z-index: 4;
}

#mc-team,
#mc-mission-control,
#mc-factory {
  position: sticky;
  top: 0;
  width: var(--mc-vw, 100vw);
  margin-left: calc(50% - var(--mc-vw, 100vw) / 2);
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* mobile readability overlay: #0A0E14 at the bottom fading up through the
   headline. Stops are geometry-dependent — JS sets it inline (sizeBgVideosToHeadline) */
.mc-mobile-bg-overlay {
  display: none;
}

/* Figma 11881:203624 — decorative glow behind the Future section's text. Mobile only. */
.mc-section-glow {
  display: none;
}

/* ========================================================================
   The Team
   ======================================================================== */
#mc-team {
  background-image: url("https://i.dell.com/assetlink/img/en/mclaren-team-bg-dl11h3qt-original.jpg");
  opacity: 0;
  /* fade-out (class removed): quicker, so it completes within FADE_OUT_LEAD of
     scroll while the section is still pinned */
  transition: opacity 0.35s ease;
}

/* revealed automatically once the intro scrub ends (see JS) */
#mc-team.mc-revealed {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.mc-carousel-heading .mc-team-headline {
  margin: 0;
}

#mc-factory-video,
#mc-team-video,
#mc-mission-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* the mission clip is mobile-only — above 979 the section's still image is the bg,
   so keep the (source-less) element out of the box model entirely */
@media (min-width: 980px) {
  #mc-mission-video {
    display: none;
  }
}
#mc-team-scroller,
#mc-mission-control-scroller,
#mc-factory-scroller {
  will-change: transform;
}

.mc-team-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 200px 60px 150px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  min-height: 100vh;
  align-items: flex-start;
}

#mc-team .mc-product:hover .mc-product-title,
#mc-mission-control .mc-product:hover .mc-product-title,
#mc-factory .mc-product:hover .mc-product-title {
  background-position: 100% 0;
}

#mc-team .mc-product-desc,
#mc-mission-control .mc-product-desc,
#mc-factory .mc-product-desc {
  color: rgba(255, 255, 255, 0.82);
}

.mc-team-content {
  flex: 1;
  min-width: 0;
  max-width: 600px;
}

.mc-team-headline {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 32px !important;
  line-height: 40px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  /* !important to beat the Dell platform's global h2 margin reset */
  margin: 0 0 40px !important;
}

/* horizontal separator between the headline and the stats */
.mc-team-stats {
  display: flex;
  gap: 48px;
}

.mc-team-stat {
  position: relative;
  flex: 1;
}

/* vertical separator in the gap between the two stats */
.mc-team-stat + .mc-team-stat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
}

.mc-team-stat-number {
  font-family: "Bebas Neue", Arial, sans-serif;
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  color: #5cc1ee;
  margin: 0 0 12px 0 !important;
  /* line-height is 1, so a numeral's box is exactly 1em. Pinning that as a minimum
     means an icon in place of a number occupies the same band and the body copy
     underneath stays top-aligned across the stats */
  min-height: 1em;
}
.mc-team-stat-number .stat-unit {
  font-size: 50px;
}

/* Icon in place of a stat number. 0.7em is Bebas Neue's cap height, so the icon's
   artwork (which fills its viewBox edge to edge) matches the numerals' ink rather than
   their 1em line box; sitting it on the baseline then puts it in exactly the same cap
   band as the digits next to it. Both track the font-size, so there are no magic
   offsets and no per-breakpoint values. The <p> keeps the number's 1em min-height and
   12px bottom margin, so the body copy still top-aligns across the stats. Both axes are
   stated explicitly: width:auto on an <svg> resolves to 100%, not to the viewBox ratio,
   which blows the icon up to the column width. */
.mc-team-stat-icon svg {
  display: inline-block;
  vertical-align: baseline;
  width: 0.7em;
  height: 0.7em;
}

/* the factory's 75x49 icon — width is 0.7em x 75/49 so it keeps its own ratio */
.mc-team-stat-icon svg.mc-stat-icon-wide {
  width: 1.071em;
}

/* the factory's 55x53 icon — near square, but not square: 0.7em x 55/53 */
.mc-team-stat-icon svg.mc-stat-icon-sq {
  width: 0.726em;
}

/* 53x66 viewBox, and unlike the other icons its artwork carries a stem above the dial.
   Sized so the DIAL (52.6 of the 66 units) matches the cap height rather than the whole
   icon — at whole-icon height the dial came out 40px with 1.9px strokes and its three
   concentric rings read as ragged. Width tracks the 53/66 aspect. */
.mc-team-stat-icon svg.mc-stat-icon-tall {
  width: 0.705em;
  height: 0.878em;
  /* the extra 0.178em is the stem: let it overflow ABOVE the cap line instead of
     growing the line box, or this stat's body copy drops out of line with its
     neighbour's (the two are top-aligned) */
  margin-top: -0.178em;
}

.mc-team-stat-body {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  color: #fff;
  margin: 5px 0 0 0 !important;
}

/* ========================================================================
   Mission Control / The Data
   ======================================================================== */
#mc-mission-control {
  background-image: url("https://i.dell.com/assetlink/img/global/mcl-dell-mission-bg-dl2hg7-original.jpg");
}

/* ========================================================================
   Flying Lap telemetry widget (in Mission / The Data)
   ======================================================================== */
/* Self-contained widget — every selector is namespaced fl-. The palette sits on
   .fl-wrap rather than :root: names like --card / --ink / --accent are generic
   enough to collide with Dell's own custom properties on the host page.
   --font-sans is the documented hook for matching the host typography.
   .fl-wrap also takes the slot the mission FPO image used to fill. */
/* the widget's CSS is authored against a border-box reset (the standalone demo had
   a global one, which we dropped when embedding). Scoped here rather than globally
   so it can't affect Dell's page: without it, padding is added on top of the
   240px card height and every card comes out 288px */
.fl-wrap,
.fl-wrap *,
.fl-wrap *::before,
.fl-wrap *::after {
  box-sizing: border-box;
}

/* The widget sits in the text column, right after the headline, so the stacked
   layout reads headline -> dash -> stats. The >=1350px rule lifts it out of flow
   into the right-hand column. */
.fl-wrap {
  --font-sans: "Roboto", Arial, sans-serif;
  --page: #070a0f;
  --card: #0f1521;
  --card-line: #1e2836;
  --ink: #e8edf4;
  --label: #8492a5;
  --muted: #6f7d90;
  --accent: #ff6a13;
  width: 100%;
  max-width: 684px;
  margin: 30px 0 0;
  font-family: var(--font-sans);
  color: var(--ink);
}

/* Figma 11549:2036 — a card's own label sits at the BOTTOM, over a centred
   gradient rule (the same divider idiom as .mc-product), in Bebas Neue */
.fl-card > .fl-label {
  position: relative;
  padding-top: 5px;
  font-family: "Bebas Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  letter-spacing: normal;
  text-transform: uppercase;
}

/* desktop: two cards, the video full-width between them, two cards below */
.fl-dash {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "track speed" "video video" "data tire";
}

/* Figma 11549:2036 — same card treatment as #mc-intro-promo / the carousel cards
   (translucent gradient + blur + 1px gradient ring), but the ramp runs the other
   way here: light at 37.23% -> dark at the bottom */
.fl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  /* fixed 240px: 25 padding + 134 graphic band + 16 gap + 40 label + 25 padding */
  height: 240px;
  padding: 25px 25px 15px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(197, 212, 227, 0.16) 37.23%, rgba(20, 29, 40, 0.4) 100%);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

/* 1px gradient ring, masked so the translucent card bg shows through unchanged.
   Figma's "Stroke gradient" style doesn't expose its stops over MCP, so these are
   measured off the design: cool at the top-left (warm -19) warming right and down
   to amber (warm +24 on the right edge) — the same cool->amber 135deg ring the
   carousel cards and #mc-intro-promo already use, with Orange/400 as the warm end.
   On ::after (not ::before) because it's out of flow. */
.fl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(164, 184, 205, 0.48) 0%, rgba(216, 152, 81, 0.26) 46%, rgba(230, 127, 1, 0.21) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.fl-track {
  grid-area: track;
}

.fl-speed {
  grid-area: speed;
}

/* The clip is preload="none" and only starts downloading when the play-on-scroll
   observer fires, so on a cold load there's a beat where the card has no frame to show.
   Its first frame sits behind as a CSS background (not a poster attribute) — the video
   covers it the moment it paints, and it also stands in if the clip fails outright. */
.fl-video {
  grid-area: video;
  overflow: hidden;
  background-image: url("https://i.dell.com/assetlink/img/global/track-side-first-frame-dl2cry-original.jpg");
  background-size: cover;
  background-position: center;
}

.fl-data {
  grid-area: data;
}

.fl-tire {
  grid-area: tire;
}

/* the SVGs fill the 136px graphic band and fit inside it (preserveAspectRatio
   defaults to meet, so the art scales down and centres — no distortion) */
.fl-track svg,
.fl-speed svg,
.fl-data svg {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* track-side footage: fills the card edge to edge, under the label. Sits behind
   the 1px ring (z-index 2) and the label (z-index 2) */
.fl-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the car fills the graphic band and is centred by object-fit, like the other
   cards' SVGs — no absolute positioning to keep in sync with the card height */
.fl-tire .fl-car {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PSI readouts. `top` is set by layoutTire() from the car image's drawn box, so each
   one sits level with the centre of its tyre at any card size. */
.fl-tv {
  position: absolute;
  transform: translateY(-50%);
  /* one line always: in a 320px viewport the card's content column is only 82px
     wide, so "23.5" wrapped to two lines and dropped into the label */
  white-space: nowrap;
  font-family: "Bebas Neue", Arial, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.fl-u {
  margin-left: 0.3em;
}

/* connector from each readout toward its tyre, level with the text. Length and
   offsets come from layoutTire() as custom properties, because the whole
   text + connector + gap run is measured back from the car's edge */
.fl-tv::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--fl-conn, 18px);
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.fl-tv.fl::after,
.fl-tv.rl::after {
  left: 100%;
  margin-left: var(--fl-conn-m, 8px);
}

.fl-tv.fr::after,
.fl-tv.rr::after {
  right: 100%;
  margin-right: var(--fl-conn-m, 8px);
}

/* the left pair is right-aligned so it grows away from the car, the right pair
   left-aligned — layoutTire() pins the inner edge of each to the car */
.fl-tv.fl,
.fl-tv.rl {
  text-align: right;
}

/* the footage runs to the card edge (the placeholder divs are inset:0), so the
   label sits straight on it with no rule above */
.fl-video > .fl-label {
  z-index: 2;
  padding-top: 0;
}

.fl-video > .fl-label::before {
  display: none;
}

/* ========================================================================
   The Factory / The Future
   ======================================================================== */
/* factory uses a looping background video instead of a still image. Navy-tinted rather
   than neutral black to match the section's own fixed overlay gradient (rgb(10,14,20),
   same value) and the Figma reference (future-gradient.png, sampled flat #0a0e14). */
#mc-factory {
  background-color: #0a0e14;
}

/* orbs start invisible; JS fades --orb-opacity 0->1 as the content rises */
#mc-team .mc-bg-overlay,
#mc-mission-control .mc-bg-overlay,
#mc-factory .mc-bg-overlay {
  --orb-opacity: 0;
}

/* #mc-team / #mc-mission-control / #mc-factory scope wins over Dell's global anchor/heading colour */
#mc-team .mc-product-title,
#mc-mission-control .mc-product-title,
#mc-factory .mc-product-title {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  /* hover: amber fill slides in from the right behind a ~20% white->amber blend
     band. Image is 220% wide (1 text-width white + band + 1 amber), clipped to text */
  background-image: linear-gradient(to right, #fff 0%, #fff 45.45%, #ffb100 54.55%, #ffb100 100%);
  background-size: 220% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.45s ease;
}

/* ========================================================================
   Carousel
   ======================================================================== */
#mc-carousel-outer {
  position: relative;
  z-index: 5;
}

#mc-carousel {
  position: relative;
  width: var(--mc-vw, 100vw);
  margin-left: calc(50% - var(--mc-vw, 100vw) / 2);
  /* content-sized; cards are pushed down a width-proportional amount (see
     .mc-carousel-strip) to hold a constant gap to the car's nose */
  padding: 0 0 100px;
  overflow: hidden;
  background-color: #0a0a0a;
  z-index: 1;
}

.mc-carousel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 220px);
  background-image: url("https://i.dell.com/assetlink/img/en/mclaren-carousel-parallax-bg-dl11h3qq-original.jpg");
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* dim over the bg image: #0A0E14 at the bottom, clear at the card tops. Above
   the bg (z0), below cards/heading (z2). JS sets its top to the strip's offset */
.mc-carousel-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #0a0e14 20%, rgba(10, 14, 20, 0) 80%);
}

#mc-carousel .mc-carousel-title {
  font-size: 48px !important;
  line-height: 56px !important;
}

.mc-carousel-heading {
  /* absolute overlay in the space above the cards (over the nose/wing of the
     bg); doesn't affect where the cards sit */
  position: absolute;
  top: 100px;
  left: 60px;
  max-width: 520px;
  z-index: 2;
}

/* @Delltech links out to Instagram — keep the headline's white instead of Dell's global
   anchor blue (the same override the product titles need) */
#mc-carousel .mc-carousel-title a {
  color: inherit;
  text-decoration: none;
}

#mc-carousel .mc-carousel-title a:hover {
  text-decoration: underline;
}

/* ========================================================================
   Video lightbox (carousel video cards)
   ======================================================================== */
/* MUST come with the display:flex below: an author `display` beats the `hidden`
   attribute's UA display:none, so without this the closed modal stays laid out over the
   whole viewport at opacity 0 and its scrim swallows every click on the page */
.mc-video-modal[hidden] {
  display: none;
}

/* above the nav (999) but below the debug scrub HUD (99999) */
.mc-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mc-video-modal.mc-video-modal-open {
  opacity: 1;
}

.mc-video-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* No overflow clipping here — the close button sits OUTSIDE this box, so the rounding and
   clipping live on the frame instead. The margin reserves the button's width on the right
   and mirrors it on the left, so the VIDEO stays centred in the viewport rather than
   being pushed off-centre by the button. Being a shrinkable flex item, the video narrows
   on a phone instead of pushing the button off screen. */
.mc-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 32px;
  aspect-ratio: 16/9;
}

.mc-video-modal-frame {
  position: absolute;
  inset: 0;
  /* top-right squared off so the close button meets a straight edge */
  border-radius: 6px 0 6px 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px 8px rgba(0, 0, 0, 0.5);
}

.mc-video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* an orange square immediately to the right of the video, top-aligned: left:100% puts its
   left edge flush against the video's right edge */
.mc-video-modal-close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff8038;
  border: 0;
  /* rounded on the right only — the left edge stays flush to the video */
  border-radius: 0 4px 4px 0;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 1;
}

.mc-video-modal-close:hover {
  background: #ff6a13;
}

.mc-video-modal-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

.mc-carousel-strip {
  position: relative;
  /* cards sit 700px down at 1600px wide, scaling as 43.75vw so the gap to the
     car's nose stays constant */
  margin-top: 43.75vw;
  z-index: 2;
}

.mc-carousel-track {
  display: flex;
  align-items: center;
  gap: 15px;
  will-change: transform;
}

/* static row — added by the script when the whole card set fits the current tier's
   slots (3-up >=1100, 2-up >=768, 1-up mobile), i.e. nothing to scroll through. The
   set is laid out once across the content width (1500/60 to match .mc-team-inner) with
   the cards sharing it equally, so they read as a row rather than a clipped filmstrip.
   Add a card past the slot count and the class drops, bringing the carousel back. */
.mc-carousel-track.mc-carousel-static {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
  will-change: auto;
}

.mc-carousel-track.mc-carousel-static .mc-carousel-card {
  flex: 1 1 0;
  width: auto;
}

.mc-carousel-logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  z-index: 2;
  pointer-events: none;
}

.mc-carousel-logo {
  display: block;
  width: 443px;
  max-width: 70vw;
  height: auto;
}

.mc-carousel-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 0 40px 6px rgba(0, 0, 0, 0.3);
  /* 3 full cards + ~32% peek each side: (100vw - 4 gaps) / 3.64. Capped at the
     430px design max — past ~1625px the peeks grow instead. 430x300 ratio.
     Divisor targets a hair over 30% so a persistent scrollbar can't drop below it */
  width: min(430px, (100vw - 60px) / 3.64);
  height: auto;
  aspect-ratio: 430/300;
  border-radius: 8px;
  border: 1px solid transparent;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* fallback tint behind the card <img> (shown while it loads / if it fails) */
  background-image: linear-gradient(180deg, #293b4d 0%, rgba(255, 181, 15, 0.1) 100%);
  text-decoration: none;
}

/* card image: a real <img> (was a CSS background) so it can be localized.
   Fills the card, above the fallback tint, below glow (z2) / title (z3) */
.mc-carousel-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.mc-carousel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, var(--dim, 0.75));
}

.mc-carousel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0) 55%);
}

/* amber radial glow, centred 20% in / 20% up, ~half the card; fades in on hover */
.mc-carousel-card-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 20% 80%, #e67f01 0%, rgba(230, 127, 1, 0) 60%);
  transition: opacity 0.45s ease;
}

.mc-carousel-card:hover .mc-carousel-card-glow {
  opacity: 0.6;
}

.mc-carousel-card-title {
  position: absolute;
  left: 24px;
  right: 74px;
  bottom: 20px;
  z-index: 3;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
  text-align: left;
  color: #fff;
}

.mc-carousel-nowrap {
  white-space: nowrap;
}

.mc-carousel-arrow {
  display: inline-block;
  margin-left: 10px;
}

/* CTA icon. Both are authored in every card and CSS picks one, so the choice is a class
   on the card and the script's cloneNode carries it: the chevron is the default, and
   .mc-carousel-card-video swaps in the circled play. The two need different sizes — the
   chevron is a 9x15 portrait glyph, the play a 16x16 square where 0.65em reproduces the
   Figma's ratio of a 16px icon against ~24.7px type. */
.mc-carousel-arrow svg {
  vertical-align: middle;
  width: auto;
}

.mc-carousel-icon-chevron {
  height: 0.58em;
}

/* the play icon is a direct child of the card, not part of the title, so it can sit in
   the card's own bottom-right corner (the title is absolutely positioned, so it would
   otherwise be the containing block). Its size is in px rather than em for the same
   reason: out here it would inherit the card's font-size, not the title's 32px.
   bottom sits the icon on the last line's BASELINE, not on the title's box: the baseline
   is 9px above that box (32px type in a 40px line box), and `bottom` resolves against
   the padding box, which is 1px in from the card's border. */
.mc-carousel-icon-play {
  position: absolute;
  right: 24px;
  bottom: 29px;
  z-index: 3;
  height: 28px;
}

.mc-carousel-card .mc-carousel-icon-play,
.mc-carousel-card-video .mc-carousel-arrow,
.mc-carousel-card-video .mc-carousel-icon-chevron {
  display: none;
}

.mc-carousel-card-video .mc-carousel-icon-play {
  display: block;
}

/* ========================================================================
   Featured Products panel (shared by team/mission/factory)
   ======================================================================== */
/* Featured Products panel (replaces the old team paragraphs) */
.mc-products {
  position: relative;
  margin-top: 48px;
  padding: 72px 32px 28px;
  border-radius: 16px;
  background: rgba(150, 156, 163, 0.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* gradient border drawn as a masked 1px ring on ::after, so it's independent
   of the panel's semi-transparent background (no bleed into the fill) */
.mc-products::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgb(164, 184, 205) 0%, rgba(255, 181, 15, 0.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.mc-products-tab {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 11px 24px;
  border-radius: 16px 0 16px 0;
  /* same fill as the active nav item */
  background: linear-gradient(135deg, rgba(255, 128, 0, 0.7) 0%, rgba(255, 181, 15, 0.7) 50%);
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.mc-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  text-decoration: none;
}

/* divider between rows — same centred gradient as .mc-team-divider */
.mc-product + .mc-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
}

.mc-product-img {
  flex: 0 0 150px;
  width: 150px;
  height: auto;
}

/* video product: alpha-channel clip (HEVC+alpha for Safari, VP9+alpha webm
   for Chrome/Firefox) — transparent background, no blend needed */
.mc-product-video {
  display: block;
}

.mc-product-arrow {
  margin-left: 8px;
}

/* keeps the last word of a product title glued to the arrow so the arrow is
   never left alone on its own wrapped line */
.mc-product-nowrap {
  white-space: nowrap;
}

.mc-product-arrow svg {
  vertical-align: middle;
}

.mc-product-desc {
  margin: 5px 0 0 0 !important;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}

/* ========================================================================
   Misc / utilities
   ======================================================================== */
#mc-text-layer {
  position: absolute;
  inset: 0;
}

.mc-scroll-chevrons {
  display: block;
  margin-top: 8px;
}

/* readability overlay: base dim 60% across the left 25% (where the content is),
   easing to 30% right; amber top-left + navy lower-left glows above the video */
.mc-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.1) 100%);
}

/* glow orbs on their own layer so opacity animates independently of the base dim.
   Visible by default; team starts hidden and fades in (--orb-opacity from JS) */
.mc-bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--orb-opacity, 1);
  background: radial-gradient(57% 85% at 0% 0%, rgba(134, 86, 30, 0.9) 0%, rgba(134, 86, 30, 0.9) 48%, rgba(134, 86, 30, 0) 78%), radial-gradient(60% 60% at 0% 82%, rgba(34, 52, 70, 0.9) 0%, rgba(34, 52, 70, 0.9) 48%, rgba(34, 52, 70, 0) 80%);
}

/* ========================================================================
   Keyframes
   ======================================================================== */
@keyframes mcScrollFlow {
  0%, 60%, 100% {
    color: rgba(255, 255, 255, 0.32);
  }
  28% {
    color: #ff8000;
  }
}
/* reveal: slide down from above (under the masthead) into place */
@keyframes mcNavReveal {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(-100% - 40px));
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* hide: quick fade out + small 10px slide up */
@keyframes mcNavHide {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}
/* ========================================================================
   Responsive — mobile ≤979 | tablet 980–1199 | tablet-x 1200–1399 | desktop ≥1400
   ======================================================================== */
/* intro-only mobile rules. Split from the page-wide block right below purely so the
   intro's own rules stay together — both cut at the same 979 now. */
@media (max-width: 979px) {
  /* mobile: anchor to the bottom, span the width with side margins */
  #mc-intro-promo {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 24px;
    padding: 6px;
    /* desktop is a column now (Figma 11731:3974); mobile keeps its bottom-anchored row */
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  /* height-led here: width follows the image's own ratio (252x160 -> 78.75px), so the
     box matches the asset and desktop's object-fit:cover is a no-op */
  #mc-intro-promo img {
    width: auto;
    height: 50px;
  }
  #mc-intro-promo .mc-promo-text {
    font-size: 14px;
    line-height: 20px;
  }
  /* inside the phone-frame mockup, clear the mock Safari bottom toolbar */
  .mc-framed #mc-intro-promo {
    bottom: 100px;
  }
  /* mobile: sit the scroll hint 50px higher */
  /* WIP mobile intro layout: the video is no longer a full-bleed cover — it's a
     full-width band centred vertically in the sticky viewport. Height comes from the
     clip's own 16:9, and object-fit:contain keeps the whole frame visible instead of
     cropping it. The wrap still fills the viewport, so its first-frame background is
     squared off to the same band; everything outside it is flat #0a0a0a. */
  /* bottom scrim sampled from the bottom of frame 0 — rgb(23,21,22), tarmac in shadow,
     so it's near-neutral rather than a hue. Mobile only; desktop keeps plain black. */
  #mc-scrim {
    background: linear-gradient(to bottom, rgba(23, 21, 22, 0) 0%, rgba(23, 21, 22, 0.5) 100%);
  }
  /* the video's mask fades its top edge into whatever sits behind, so this colour is
     what the sky dissolves into. Sampled from the top of frame 0 — rgb(8,39,82) — and
     taken to 60% so it reads as a darker continuation of the sky rather than black. */
  #mc-video-wrap {
    background: linear-gradient(to bottom, #051731 0%, #0e0d0d 100%);
  }
  #mc-video,
  #mc-intro-poster {
    position: absolute;
    inset: 50% auto auto 50%;
    /* centred, then lifted 40px */
    transform: translate(-50%, calc(-50% - 40px));
    /* the band no longer fills the viewport, so its top edge met the flat #0a0a0a behind
       it as a hard line. Fading the top of the video itself dissolves that edge — the
       stops are percentages of the VIDEO's box, so this needs no numbers kept in step
       with the width or the 40px lift. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    /* twice full width, so the band grows and the sides crop against the wrap's
       overflow rather than the whole frame shrinking to fit */
    width: 200%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: contain;
  }
  /* the cursor is a literal " _" so its leading space (8.44px at 36px) sets the distance
     from the final "s" — pull it back in with a negative margin. The span is width:0 with
     overflow visible, so scaleX narrows the glyph without shifting the text. */
  .mc-cursor {
    margin-left: -2px;
    transform: scaleX(0.65);
    transform-origin: left center;
  }
  /* same 50% wash desktop uses, so the car sits faintly behind the logo build-up */
  #mc-intro-poster {
    display: block;
    background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)), url("https://i.dell.com/assetlink/img/global/mcl-dell-intro-first-frame-dl2hg8-original.jpg") center/cover no-repeat;
  }
  /* copy on two lines, sitting to the LEFT of the chevrons rather than above them.
     The max-width is what forces the wrap — narrower than "Scroll to start" on one line,
     wider than "Scroll to" — so a longer translation simply takes another line. */
  /* top is set in layoutBlock1() — 10px under the headline, whose height depends on how
     the copy wraps. This bottom is only the pre-JS fallback. */
  .mc-scroll-hint {
    bottom: 101px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mc-scroll-chevrons {
    margin-top: 0;
  }
  .mc-block {
    padding: 0 28px;
    bottom: 110px;
  }
  /* The headline starts at the bottom of the car, so it can never overlap it. KEEP THIS
     IN STEP WITH #mc-video ABOVE — it's derived from that band's geometry:
       height        = 200vw x 9/16      = 112.5vw
       bottom edge   = 50% - 40px + half = 50% - 40px + 56.25vw
       car bottom    = 32.56% of the height up from that edge (100px of 307.13px measured
                       at a 390px viewport)  = 36.63vw
       so top        = 50% + 19.62vw - 40px
     All in vw, so it tracks the video as the viewport changes. The h1's own 14px top
     padding is the visible gap. */
  .mc-block-1 {
    top: calc(50% + 19.62vw - 40px);
    bottom: auto;
  }
  #mc-scrim-top {
    display: block;
  }
  .mc-block-1 h1 {
    font-size: 36px;
    line-height: 1.1667;
    padding: 0.3889em 0;
  }
  .mc-block-2 p,
  .mc-block-3 p {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  /* raise blocks 2/3 clear of the bottom-anchored promo (which sits higher in the
     phone-frame mockup: bottom:100px vs 24px) */
  .mc-block-2,
  .mc-block-3 {
    bottom: 124px;
  }
  .mc-framed .mc-block-2,
  .mc-framed .mc-block-3 {
    bottom: 200px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  #mc-intro-promo {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 979px) {
  /* mobile: sections flow at content height — no pinning, no parallax, bg scrolls
     with content. Team keeps opacity:0 + the -200vh overlap so it still fades in */
  #mc-team,
  #mc-mission-control,
  #mc-factory {
    position: relative;
    height: auto;
    overflow: visible;
  }
  #mc-mission-control-outer {
    margin-top: 0;
  }
  /* swap the desktop side-dim overlay for the mobile top-to-bottom one */
  .mc-bg-overlay {
    display: none;
  }
  .mc-mobile-bg-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  /* Figma 11881:203624 (originally spec'd for Future/factory, since replicated onto
     Team and Mission/Data by request) — a soft round glow centred exactly on the
     section's left edge (each section spans the full viewport width), so only the right
     half is visible. Same DOM slot in all three (after the video/overlay, before the
     scroller) puts it above them but behind the text, no z-index needed. One shared rule,
     so all three sections get an identical glow. */
  .mc-section-glow {
    display: block;
    position: absolute;
    /* was a 400x400 circle under filter: blur(100px). That blur was the cause of the
       real-device scroll freeze (bisected to b7d67ee; isolated by disabling it alone),
       so the softness is painted directly instead: the box is grown to the size the
       blur used to spread to (700 = 400 + ~2x the 100px radius) and the falloff comes
       from two stacked radial gradients — amber high, navy low, both fading to zero
       alpha. Centre stays put: left:-350/top:50 keeps it on the section's left edge at
       the same 400px down, so only the right half shows, as before. */
    width: 700px;
    height: 700px;
    aspect-ratio: 1/1;
    left: -350px;
    top: 50px;
    background: radial-gradient(closest-side circle at 50% 35%, rgba(230, 127, 1, 0.22) 0%, rgba(230, 127, 1, 0) 100%), radial-gradient(closest-side circle at 50% 72%, rgba(0, 42, 88, 0.6) 0%, rgba(0, 42, 88, 0) 100%);
    pointer-events: none;
  }
  /* the factory clip is authored square (1080x1080) and its overlay is a fixed
     gradient (not headline-derived — see bgVideoSections), so unlike team/mission it
     doesn't need sizeBgVideosToHeadline's forced pixel height. object-fit:cover (the
     shared rule) would crop its left/right edges to fill that height; sizing by its
     own aspect instead shows it at the section's full width with nothing cropped. */
  #mc-factory-video {
    /* the shared rule's inset:0 pins both top and bottom; an absolutely-positioned
       element with both constrained STRETCHES to fill regardless of height:auto, so
       bottom has to go back to auto for the aspect-ratio to actually size it */
    bottom: auto;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    /* the video is now shorter than the section (contain, not stretched to fill), so
       its bottom edge met the section's black background as a hard raster line. Fade
       the video's own last 25% into transparent so it blends into that black instead. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  }
  .mc-team-inner {
    flex-direction: column;
    /* stretch so the column fills the inner width (Mission's wider stat numbers
       pushed it past the box otherwise) */
    align-items: stretch;
    padding: 400px 24px 100px;
    gap: 40px;
    min-height: 0;
  }
  /* factory only: content sits 50px higher than the shared 400px top padding */
  #mc-factory .mc-team-inner {
    padding-top: 350px;
  }
  /* stacked, so the text column is the whole width — the 600px desktop cap would
     otherwise leave headline/stats/products short of the edge from 768 up */
  .mc-team-content {
    max-width: none;
  }
  /* the dashboard keeps its own 684px cap, so centre it in that full width */
  #mc-mission-control .fl-wrap {
    margin-left: auto;
    margin-right: auto;
  }
  .mc-team-headline {
    font-size: 24px !important;
    line-height: 32px !important;
    margin-bottom: 32px !important;
  }
  .mc-team-stat-body {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .mc-product-img {
    flex: 0 0 90px;
    width: 90px;
  }
  .mc-products {
    padding: 72px 20px 28px;
  }
  /* id-scoped to beat the desktop #mc-... .mc-product-title rule */
  #mc-team .mc-product-title,
  #mc-mission-control .mc-product-title,
  #mc-factory .mc-product-title {
    font-size: 16px;
    line-height: 24px;
  }
  .mc-product-desc {
    font-size: 15px;
    line-height: 20px;
  }
  #mc-nav {
    top: 20px;
    max-width: calc(100vw - 24px);
  }
  .mc-nav-item {
    padding: 0 16px;
    font-size: 12px;
  }
  .mc-nav-full {
    display: none;
  }
  .mc-nav-short {
    display: inline;
  }
}
/* the carousel keeps its desktop layout down to 768 — it only goes mobile below
   that, so these sit in their own narrower block */
@media (max-width: 767px) {
  #mc-carousel {
    padding: 280px 0 30px;
  }
  .mc-carousel-bg {
    background-image: url("https://i.dell.com/assetlink/img/en/mclaren-carousel-mobile-dl11h3r2-original.jpg");
    height: 100%;
  }
  /* mobile keeps the flow layout (heading above the cards); the width-scaled
     cover crops differently here so alignNose keeps the nose above the cards */
  .mc-carousel-heading {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 30px 24px;
    max-width: 80vw;
  }
  .mc-carousel-strip {
    margin-top: 0;
  }
  .mc-carousel-logo-container {
    margin-top: 30px;
  }
  /* 50vw cards (195px at our 390px mockup width). 300x210 desktop ratio. border-box
     so 50vw is the card's on-screen width — it carries a 1px border, and the other
     tiers size content-box. The focused card is centred, so each neighbour peeks by
     (100vw - card)/2 - gap: at 50vw that's 25vw - 8px, ~46% of a card */
  .mc-carousel-card {
    box-sizing: border-box;
    width: 50vw;
    height: auto;
    aspect-ratio: 300/210;
  }
  .mc-carousel-card-title {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    top: auto;
    right: 10px;
    left: 10px;
    bottom: 10px;
  }
  .mc-carousel-track {
    gap: 8px;
  }
  .mc-carousel-icon-chevron {
    height: 0.9em;
  }
  /* baseline is 5px above the title's box here (14px type in a 20px line box) */
  .mc-carousel-icon-play {
    right: 10px;
    bottom: 15px;
    height: 17px;
  }
  /* video lightbox: 10px either side of the video, and the close button moves from
     beside it to directly above its top-right corner. The vertical padding has to clear
     the button's 32px so it can't be cut off at the top of the viewport. */
  .mc-video-modal {
    padding: 42px 15px;
  }
  /* no horizontal space to reserve now the button sits above */
  .mc-video-modal-inner {
    margin: 0;
  }
  .mc-video-modal-close {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 0;
    /* joins the video along its bottom edge, so only the top corners round */
    border-radius: 4px 4px 0 0;
  }
  #mc-carousel .mc-carousel-title {
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 32px !important;
  }
}
/* flying-lap widget: 2x2 with the track-side video dropped. Was the widget's own
   700px breakpoint; moved to the page's 979 so the video is gone across all of mobile */
@media (max-width: 979px) {
  .fl-dash {
    grid-template-areas: "track speed" "data tire";
    /* Figma 11549:1662 — 8px between the cards both ways, not the desktop's 12 */
    gap: 8px;
  }
  .fl-video {
    display: none;
  }
  /* Figma 11549:1662, measured off the 400px frame: card 172x148 with 16px padding, a
     16px gap and a 20px label box — which makes the graphic band exactly 80px
     (148 - 16 - 16 - 20 - 16). Replaces a clamp() that floored the height at 190px and
     left the cards portrait: 165x190 at a 390px viewport against the design's landscape
     172x148. Height is flat rather than derived from the column width, so it holds the
     design's proportion at phone sizes; the cards simply get wider toward 700px. */
  .fl-card {
    padding: 16px;
    height: 148px;
  }
  /* the design's label box is 20px tall; ours was 24px line-height + 5px padding = 29 */
  .fl-card > .fl-label {
    padding-top: 0;
    line-height: 20px;
  }
}
/* below ~560px the tire card is under 250px wide, and "24.4 PSI" either side of the
   car stops fitting — drop the unit and bring the type down there, not at the
   widget's 700px breakpoint (at 690 the card is still 315px wide) */
@media (max-width: 560px) {
  .fl-tv {
    font-size: 13px;
  }
  .fl-u {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* below 1100px: 2 full cards + ~32% peek ((100vw - 3 gaps) / 2.64) so cards
   stay large. Mobile has its own sizing below */
  .mc-carousel-card {
    width: min(430px, (100vw - 45px) / 2.64);
  }
}
@media (min-width: 1100px) and (max-width: 1250px) {
  .mc-carousel-card-title {
    font-size: 28px;
    line-height: 34px;
  }
}
@media (min-width: 1024px) {
  .mc-block-2,
  .mc-block-3 {
    max-width: min(960px, 100vw - 450px);
  }
}
@media (max-width: 1099px) {
  /* stacked: the widget is inside the text column, so it lands between the headline
     and the stats on its own — the only thing to set is the gap below it, and since
     .mc-team-stats has no top margin that's the widget's own bottom margin. Mobile
     and tablet share it. */
  #mc-mission-control .fl-wrap {
    margin-bottom: 40px;
  }
}
/* the docked logo fades out once scrubbing starts (JS toggles .mc-scrolled on
   #mc-section past the first nudge) and fades back in — same 0.65s opacity transition,
   in reverse — when the scrub returns to the beginning. Every width behaves alike. */
#mc-section.mc-scrolled #mc-logo-parts {
  opacity: 0;
}

/* >=1350px: the widget becomes the right-hand column. Taken out of flow so it can
   sit beside the WHOLE text column while living after the headline in the DOM —
   top/right match .mc-team-inner's padding, and .mc-team-inner is the positioned
   ancestor, so the offsets resolve against the inner.
   The slot is given as left+right rather than a fixed width: left is the text
   column's right edge plus the 30px minimum column gap (60px padding + its 600px
   max-width + 30), so from 1350 up the widget takes the space that's actually left
   instead of eating into that gap. width:auto lets the offsets size it; max-width
   still caps it at 684 and margin-left:auto keeps it on the right edge once the slot
   is wider than that — so the gap is exactly 30px to 1434px and grows past it. */
@media (min-width: 1100px) {
  #mc-mission-control .fl-wrap {
    position: absolute;
    top: 200px;
    left: 690px;
    right: 60px;
    width: auto;
    margin: 0 0 0 auto;
  }
}
/* 1100–1300: split the inner evenly instead of leaving the text column on its 600px
   cap and giving the widget whatever's left (350px at 1100, which broke the tire
   card). Both columns get (vw - 120 padding - 30 gap) / 2, so the widget's left edge
   is that column plus 60 + 30. The text column's cap applies to every section, not
   just Mission, so Team and Factory line up with the column beside the widget. */
@media (min-width: 1100px) and (max-width: 1300px) {
  .mc-team-content {
    max-width: calc((var(--mc-vw, 100vw) - 150px) / 2);
  }
  #mc-mission-control .fl-wrap {
    left: calc((var(--mc-vw, 100vw) - 150px) / 2 + 90px);
  }
}
/* the card row caps at 1500 and centres, so past that its left edge is
   (100% - 1500)/2 + 60 rather than 60. #mc-carousel is the heading's containing block
   and is 100vw wide, the same box the row centres in, so 50% - 690px lands the heading
   on exactly that edge. At 1500 it resolves to 60px, so the two rules meet seamlessly */
@media (min-width: 1500px) {
  .mc-carousel-heading {
    left: calc(50% - 690px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-scroll-hint svg {
    animation: none;
  }
  /* flying-lap: the script freezes the telemetry loop on the first frame, and
     leaves the track-side clip paused (see the reduce check on the observer) */
}