/* ── HYPER RACER — RESPONSIVE / MOBILE LAYER ───────────────────────────────
 * Linked on every page AFTER each page's inline <style>, so equal-specificity
 * rules here win when a media query matches. Class names are global, so one
 * file covers every page (rules for classes a page doesn't use are inert).
 *
 * Pairs with js/nav.js, which wraps the nav links/CTAs in .nav-menu and adds
 * the .nav-toggle hamburger button.
 * ------------------------------------------------------------------------- */

/* Nav scaffolding — transparent to layout on desktop */
.nav-menu   { display: contents; }
.nav-toggle { display: none; }

/* Proof-bar marquee scaffolding — transparent on desktop (js/marquee builds it) */
.proof-marquee, .proof-track { display: contents; }
.proof-clone { display: none; }
@keyframes proofscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===========================================================================
   DESKTOP ONLY (≥ 901px) — tighten section sub-text leading by ~20%
   (base .sb is line-height 1.8 / 1.75; mobile keeps its looser leading)
   ======================================================================== */
@media (min-width: 901px) {
  .sb { line-height: 1.44; }
}

/* ===========================================================================
   TABLET / MOBILE  (≤ 900px) — collapse multi-column layouts, mobile nav
   ======================================================================== */
@media (max-width: 900px) {

  /* ---- NAV (hamburger) ---- */
  nav { padding: 0 20px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; z-index: 2;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; }
  nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,8,8,.98); border-bottom: 1px solid var(--border); padding: 6px 0 14px;
  }
  nav.nav-open .nav-menu { display: flex; }
  .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-menu .nav-links li { width: 100%; }
  .nav-menu .nav-links a { display: block; padding: 14px 24px; font-size: 15px; }
  .nav-menu .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 24px 4px; }
  .nav-menu .nav-cta, .nav-menu .nav-cta-ghost { display: block; text-align: center; padding: 14px; }

  /* ---- INDEX ---- */
  .cam-s, .ethos-inner { grid-template-columns: 1fr; }
  /* car/racing are now image-as-background (positioned) on desktop — revert to
     stacked flow on mobile and pull the image back out of absolute positioning */
  .car-s, .racing-s { display: flex; flex-direction: column; }
  .car-s > div:last-child { position: static; }
  .start-grid { grid-template-columns: 1fr; }
  .car-s > div:first-child,
  .racing-s > div:not(.racing-ph) { padding: 64px 24px; }
  .cam-c { padding: 48px 24px; }
  .car-ph, .racing-ph, .cam-img { min-height: 300px; }
  /* drop the desktop side fade-to-carbon on the stacked mobile images */
  .car-ph::after, .racing-ph::after, .cam-img::after { display: none; }
  /* racing image is moved under the heading by JS; reset its desktop order
     and give it breathing room inside the text column */
  .racing-ph { order: 0; margin: 20px 0 8px; position: static; }
  /* keep the three stats as a 3-wide panel, not stacked */
  .three-stats { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  /* proof bar becomes a thin auto-sliding marquee strip */
  .proof-bar { display: block; overflow: hidden; padding: 13px 0; }
  .proof-marquee { display: flex; width: max-content; animation: proofscroll 24s linear infinite; }
  .proof-track, .proof-clone { display: flex; align-items: center; flex: 0 0 auto; }
  .proof-bar .pi { padding: 0 18px; flex: 0 0 auto; }
  /* articles → swipeable carousel (saves vertical space) */
  .ah-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px; padding-bottom: 6px; scrollbar-width: none;
  }
  .ah-grid::-webkit-scrollbar { display: none; }
  .ah-card { flex: 0 0 86%; scroll-snap-align: start; }
  .ah-head { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* ---- START PAGE (index) — mobile fixes ---- */
  /* Hero (start page only — scoped via the scroll-hint so the racing page's
     .hero, which has .hero-content instead, keeps its own full-height treatment):
     show the full-width 16:9 image (no crop/zoom), below the solid nav. */
  .hero:has(.scroll-hint) { height: auto; min-height: 0; max-height: none; padding-top: 64px; }
  .hero:has(.scroll-hint) .hero-bg { position: static; }
  .hero:has(.scroll-hint) .hero-bg img { height: auto; }

  /* Proof bar: put "bhp/ton" beside the 500 (not stacked) so the centre stat
     matches every other stat in the scrolling strip. */
  .proof-bar .pi-big { flex-direction: row; gap: 10px; text-align: left; }
  .proof-bar .pi-big .pi-n { font-size: clamp(21px, 2.6vw, 36px); line-height: 1; }
  .proof-bar .pi-big .pi-l { font-size: clamp(10px, 1.04vw, 14.3px); }

  /* Racing: show the whole image at full width (24px gutters from the text
     column) instead of a cropped cover-fill, and drop the desktop -50px lift. */
  .racing-s > div:not(.racing-ph) { transform: none; }
  .racing-ph { min-height: 0; }
  .racing-ph img { position: static; width: 100%; height: auto; }

  /* The X1 section: reorder to label → title → image → body → button (mirrors
     the racing section) and show the full, uncropped car image. display:contents
     lifts the text column's children into the section's flex flow so the image
     can sit between the heading and the body via order. */
  .car-s { padding: 64px 24px; text-align: left; }
  .car-s > div:first-child { display: contents; text-align: left; }
  .car-s .sl { order: 1; flex-direction: row; }
  .car-s .st { order: 2; }
  .car-s > div:last-child { order: 3; }
  .car-s .sb { order: 4; max-width: none; }
  .car-s > div:first-child > div:last-child { order: 5; }
  .car-ph { min-height: 0; }
  .car-ph img { position: static; width: 100%; height: auto; }
  .car-ph::before { display: none; }

  /* ---- X1 ---- */
  /* hero: content-height, stats flow in (not pinned), heading text is small already */
  /* solid black header so the hero image can start below it */
  nav { background: var(--black); }
  /* x1 hero: image starts under the nav (gains vertical room); title pinned to
     the very top, button dropped to just above the stats (moved by JS so it can
     sink with margin-top:auto), car visible in the gap between. */
  .page-hero:has(.page-hero-text) { margin-top: 64px; min-height: calc(100vh - 64px); justify-content: flex-start; }
  .page-hero-text { padding: 18px 20px 0; }
  /* smaller hero title so it stops covering the car */
  .page-hero-text .st { font-size: clamp(24px, 6.2vw, 32px); line-height: 1.02; }
  .hero-btns { margin-top: auto; margin-bottom: 12px; position: relative; z-index: 2; display: flex; justify-content: center; }
  .hero-btns .btn-p { padding: 9px 22px; font-size: 11px; width: auto; }
  /* stats: one compact row pinned to the BOTTOM of the hero (scroll hint hidden) */
  .hero-stats-bar { position: static; margin-top: auto; width: 100%; flex-wrap: nowrap; justify-content: space-around; gap: 8px; padding: 10px 12px 30px; }
  .hstat { flex: 1 1 0; min-width: 0; }
  .hstat-n { font-size: 22px; }
  .hstat-u { font-size: 11px; }
  .hstat-l { font-size: 8px; letter-spacing: .05em; margin-top: 4px; }
  .hero-scroll-hint { display: none; }
  .spec-grid { grid-template-columns: 1fr; }
  .body-grid { grid-template-columns: 1fr; }

  /* Cameron Waters: video on top (full-width 16:9, autoplays), quote underneath */
  .cam-s { grid-template-columns: 1fr; -webkit-mask: none; mask: none; margin-top: 24px; }
  .cam-img { order: 1; min-height: 0; aspect-ratio: 16 / 9; }
  .cam-img::after { display: none; }
  .cam-c { order: 2; padding: 34px 24px; }

  /* Performance: shift the frame so the car sits centred (full title sizing below) */
  .perf-img { object-position: 30% 50%; }

  /* Safety/chassis: the hover x-ray reveal can't work on touch, and the top layer
     covers the base when there's no pointer — show the bare chassis cleanly
     (full width, uncropped) and drop the hover-only layers + the "hover" hint. */
  .chassis-reveal-base { position: static; width: 100%; height: auto; transform: none; }
  .chassis-reveal-top, .cs-part { display: none; }
  .chassis-reveal-hint { display: none; }

  /* Studio carousel: smaller arrows, tucked nearer the edges */
  .studio-arrow { width: 30px; height: 30px; }
  .studio-arrow svg { width: 13px; height: 13px; }
  .studio-arrow.prev { left: 10px; }
  .studio-arrow.next { right: 10px; }

  /* "Start racing your X1" tile: centre the image (desktop nudges it up 100px) */
  .cta-wide .cta-img { background-position: center center !important; }

  /* aero: reorder to label -> title -> image -> body (image was below all the
     copy). display:contents lifts the text wrapper's children into the section
     flex flow so the image can sit between the heading and the body via order. */
  .aero-s { display: flex; flex-direction: column; min-height: 0; padding: 56px 24px; -webkit-mask: none; mask: none; }
  .aero-text { display: contents; }
  .aero-text .sl { order: 1; }
  .aero-text .st { order: 2; }
  .aero-img { order: 3; position: relative; min-height: 0; width: 100%; margin: 6px 0 26px; }
  .aero-img img { position: static; width: 100%; height: auto; transform: none; object-position: center; }
  .aero-img::after { display: none; }
  .aero-text .sb { order: 4; }
  /* aero copy gets the same Read-more clamp as the racing feature sections
     (built by the inline script on x1.html); keep it ordered after the image */
  .aero-text .m-clamp { order: 4; }
  .aero-text .m-more { order: 5; }
  /* accordion: stack text under image, kill the big left indent */
  .accord-content { grid-template-columns: 1fr; padding: 22px 20px 28px; gap: 20px; }
  .accord-header { padding: 20px 18px; gap: 14px; }
  .accord-title { font-size: 18px; }
  .accord-icon { width: 30px; height: 30px; }
  .accord-text { font-size: 15px; }
  /* chassis safety callouts → single column */
  .callout-grid { grid-template-columns: 1fr; }
  .films-grid .video-card.feature,
  .video-card.featured { grid-template-columns: 1fr; }

  /* ---- DEALERS ---- */
  .dealers-grid { grid-template-columns: 1fr; }
  /* badge ("Distributor"/"Sales Agent") was absolute top-right and overlapped the
     orange region text on narrow cards — flow it in at the top-left instead, with
     the flag still pinned top-right; the region text then sits cleanly below. */
  .dealer-card { padding: 24px 20px; }
  .dealer-badge { position: static; display: inline-block; margin-bottom: 12px; }
  .dealer-flag { top: 22px; right: 20px; }
  /* stack the 2-row become grid in a logical order: heading, benefits, apply, form */
  .become-inner { display: flex; flex-direction: column; }
  .become-head-l { order: 1; } .become-body-l { order: 2; }
  /* align-self:end (desktop) pushed this heading to the right on mobile — reset it */
  .become-head-r { order: 3; margin-top: 28px; align-self: stretch; } .become-body-r { order: 4; }
  .become-form-title { text-align: left; }
  .map-s { height: auto; position: relative; }
  .map-wrap { position: relative; aspect-ratio: 4 / 3; flex: none; }
  /* phone swipe hint over the map (element added by initDealerMap on ≤600px) */
  .map-swipe-hint { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 4;
    display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-size: 11px; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase; color: #fff; background: rgba(8,8,8,.66);
    border: 1px solid rgba(255,255,255,.22); padding: 9px 16px; white-space: nowrap; pointer-events: none; }
  .map-swipe-hint span { color: var(--red); font-size: 14px; }

  /* ---- GARAGE ---- */
  /* quick-links were a horizontal overflow strip (most hidden off-screen) — lay
     them out as a 2-col grid so all six are visible at once, no sideways scroll */
  .quick-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0; overflow: visible; background: var(--border); }
  .quick-link { padding: 15px 12px; text-align: center; white-space: normal; background: var(--dark); border-bottom: none; }
  .doc-grid, .video-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .contact-strip { grid-template-columns: 1fr; gap: 24px; }
  .contact-methods { align-items: flex-start; }
  .mech { max-width: none; }

  /* ---- ARTICLES ---- */
  .articles-grid { grid-template-columns: 1fr; }
  .article-card.featured { grid-template-columns: 1fr; }

  /* ---- RACING ---- */
  /* hero: clean full-bleed image + title only — drop the left fade, the side
     stats, and the buttons (scroll down for what they linked to). */
  .hero-content { grid-template-columns: 1fr; gap: 22px; padding: 96px 24px 0; }
  .hero:has(.hero-content) .hero-bg::after { background: linear-gradient(to bottom, rgba(8,8,8,.55) 0%, transparent 34%, transparent 64%, rgba(8,8,8,.94) 100%); }
  .hero-content .hero-stats { display: none; }
  .hero-content .btn-p, .hero-content .btn-g { display: none; }
  .two-col, .framework-inner { grid-template-columns: 1fr; gap: 40px; }

  /* Racing the X1 (concept): same title -> full-width image -> text stack as the
     ADC/USA/UK blocks (was a background image with the copy overlaid). */
  .racing-concept { display: flex; flex-direction: column; padding: 56px 24px; }
  .racing-concept-bg { position: relative; order: 3; width: calc(100% + 48px); margin: 8px -24px 24px; height: auto; }
  .racing-concept-bg img { position: static; width: 100%; height: auto; object-fit: cover; transform: none; object-position: center; }
  .racing-concept-bg::after { display: none; }
  .racing-concept .pw { display: contents; }
  .racing-concept .sl { order: 1; }
  .racing-concept .st { order: 2; }
  .racing-concept .m-clamp { order: 4; }
  .racing-concept .m-more { order: 5; }

  /* ADC + USA + UK feature sections: stack to one column and place the media
     (image OR the USA video) full-bleed directly under the heading, body below.
     display:contents lifts each text wrapper's children into the section flex
     flow so the media (their sibling) can sit between them via order. */
  .adc-s, .intl-fb { display: flex; flex-direction: column; min-height: 0; padding: 56px 24px; }
  .adc-s-text, .intl-fb-text, .intl-fb-text-r { display: contents; }
  .adc-s-text > *, .intl-fb-text > *, .intl-fb-text-r > * { order: 4; }   /* body copy */
  .adc-s .sl, .intl-fb .country-badge { order: 1; }                       /* label / badge */
  .adc-s .st, .intl-fb .st { order: 2; }                                  /* heading */
  .adc-s-img, .intl-fb-img, .usa-video {                                  /* full-bleed media */
    order: 3; position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: calc(100% + 48px); margin: 8px -24px 26px; aspect-ratio: 16 / 10; height: auto; overflow: hidden;
  }
  .usa-video { aspect-ratio: 16 / 9; }
  .adc-s-img img, .intl-fb-img img { transform: none; object-position: center; }
  /* (USA iframe keeps its absolute-centred rule; the page's cover() JS fills the 16:9 box) */
  .intl-fb .country-badge, .intl-fb .status-badge { align-self: flex-start; } /* keep pills hugging content */
  .adc-s-img::after, .intl-fb-img.fade-right::after, .intl-fb-img.fade-left::after,
  .intl-fb-img.half-right::after, .intl-fb-img.half-left::after, .usa-video::after { display: none; }

  /* Long feature copy → clamp to ~the first paragraph with a fade + a "Read more"
     toggle (the clamp wrapper + button are built by the inline script on
     racing.html; these styles only ever apply once that markup exists). */
  .m-clamp { position: relative; overflow: hidden; max-height: 8em; transition: max-height .45s ease; }
  .m-open .m-clamp { max-height: 1600px; }
  .m-clamp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; pointer-events: none; transition: opacity .3s ease; }
  .m-open .m-clamp::after { opacity: 0; }
  .racing-concept .m-clamp::after, #international .m-clamp::after { background: linear-gradient(to bottom, transparent, var(--black)); }
  .adc-s .m-clamp::after, #uk .m-clamp::after, .aero-s .m-clamp::after { background: linear-gradient(to bottom, transparent, var(--carbon)); }
  .m-more { order: 4; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 6px 0; background: none; border: 0; cursor: pointer; font-family: var(--fd); font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--red); }
  .m-more::after { content: '\2193'; font-size: 14px; transition: transform .3s ease; }
  .m-open .m-more::after { transform: rotate(180deg); }

  /* page-width wrapper: use the standard mobile gutter instead of the 66vw desktop cap */
  .pw { max-width: none; padding-left: 24px; padding-right: 24px; }

  /* 2026 calendar: stack the round tiles into one centred column, more compact */
  .calendar-grid { grid-template-columns: 1fr; max-width: 420px; margin: 32px auto 0; }
  .round-card { padding: 16px 20px; text-align: center; }
  .round-num { font-size: 30px; margin-bottom: 4px; }

  /* ADC article carousel → native one-at-a-time swipe strip. The JS auto-advance
     sets an inline transform on the track; transform:none !important neutralises
     it so native horizontal scroll-snap drives the swipe instead. display:contents
     on each slide lifts its 3 articles into the track as individual snap items. */
  .adc-carousel { max-width: 100% !important; margin-top: -70px; overflow: visible; padding: 0 0 36px; }
  .adc-track { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .adc-track::-webkit-scrollbar { display: none; }
  .adc-slide { display: contents !important; }
  .adc-art { flex: 0 0 84%; scroll-snap-align: center; min-width: 0; }
  .adc-dots { display: none; }

  /* ---- CONFIGURE ---- */
  .config-layout { display: block; min-height: 0; }
  .config-main { padding: 32px 20px; border-right: 0; }
  .config-sidebar { position: static; height: auto; }
  .region-grid { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  /* hero: just the image + "Configure your X1." heading — drop the
     description and the general-enquiry prompt on mobile */
  .car-visual-bottom { display: none; }

  /* ---- FOOTER (all pages) ---- */
  .fg-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .f-bot { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ===========================================================================
   PHONE  (≤ 600px) — single column everywhere, tighter spacing
   ======================================================================== */
/* Tablet headings — pull the clamp floors down a notch */
@media (max-width: 768px) {
  .st { font-size: clamp(28px, 6vw, 40px); }
  .page-hero-content h1 { font-size: clamp(34px, 8vw, 56px) !important; }
  /* X1 Performance feature: bigger title that fills the width and wraps, with a
     thinner outline on "warping" (3px reads as too heavy on a phone). */
  .perf-feature { height: clamp(480px, 80vh, 720px); }
  .perf-title { white-space: normal; font-size: clamp(44px, 13.5vw, 84px); line-height: .9; }
  .perf-title .warp-outline { -webkit-text-stroke-width: 1.5px; }
  .perf-lead { font-size: clamp(16px, 4.3vw, 20px); }
}

@media (max-width: 600px) {
  nav { padding: 0 16px; }

  /* tighten the big horizontal + vertical section padding */
  .accord-s, .spec-s, .comp-s, .lap-s, .body-s, .aero-s, .chassis-s,
  .garage-s, .dealers-s, .become-s, .enq-s, .start-s, .ethos-s,
  .warn-s, .contact-strip, .map-legend, .map-hero-overlay,
  footer, .page-hero, .page-hero-content, .articles-home, .partner {
    padding-left: 20px; padding-right: 20px;
  }
  .accord-s, .spec-s, .comp-s, .lap-s, .body-s, .aero-s,
  .garage-s, .dealers-s, .become-s, .enq-s, .start-s, .ethos-s, .articles-home {
    padding-top: 56px; padding-bottom: 56px;
  }
  .car-s, .racing-s > div:not(.racing-ph), .cam-c { padding-top: 48px; padding-bottom: 48px; }
  .page-hero { min-height: auto; }
  .page-hero-content { padding-top: 104px; padding-bottom: 48px; }

  .fgrid, .fg-grid, .service-grid, .region-grid, .opt-grid { grid-template-columns: 1fr; }

  /* ---- TYPOGRAPHY: scale the big stuff down for phones ---- */
  .st                         { font-size: clamp(24px, 7.5vw, 32px); word-break: break-word; }
  .sb, .cam-ctx               { font-size: 14px; }
  .hero-h1                    { font-size: clamp(28px, 9vw, 40px); }
  .page-hero-content h1       { font-size: clamp(30px, 10vw, 44px) !important; }
  .cam-q                      { font-size: clamp(20px, 6vw, 28px); }
  .warn-text                  { font-size: clamp(22px, 7vw, 32px); word-break: break-word; }
  .result-title               { font-size: clamp(30px, 10vw, 44px); }
  /* three-stat panel: shrink internals so 3 fit across a phone */
  .tsb                        { padding: 16px 8px; }
  .tsb-n                      { font-size: 24px; }
  .tsb-u                      { font-size: 13px; }
  .tsb-l                      { font-size: 8.5px; letter-spacing: .08em; margin-top: 4px; }
  .pi-n, .pi-big .pi-n        { font-size: 22px; }
  .hstat-n                    { font-size: 18px; }
  .service-interval           { font-size: 28px; }
  .track-time                 { font-size: 34px; }
  .track-name                 { font-size: 20px; }
  .doc-title, .dealer-name    { font-size: 18px; }

  /* forms / buttons full width */
  .fsub, .btn-p, .btn-g { width: 100%; text-align: center; }
  .hero-ctas, .hero-btns { flex-direction: column; align-items: stretch; }

  /* x1 hero: drop the Engineering-story link, make "Build yours" a compact button */
  .hero-btns { flex-direction: row; align-items: center; justify-content: center; }
  .hero-btns .btn-g { display: none; }
  .hero-btns .btn-p { width: auto; padding: 14px 44px; }

  /* lap-time carousel: comfortable single-card view */
  .track-tile { width: 80vw; }

  /* ---- DEALERS MAP (phones) ----
     Hide the overlay eyebrow/title/subtext. The world map is sized to 2x the
     viewport height (zoomed in) and vertically centred in the 100dvh frame so
     the pins stay visible; pan horizontally to see the rest. overflow-y is
     hidden but touch-action allows pan-y, so vertical swipes scroll the page on
     to the dealer list; tapping a pin still calls focusDealer() to jump down. */
  .map-hero-overlay, .map-subtext { display: none; }
  .map-particle-layer { display: none; }
  .map-wrap {
    aspect-ratio: auto;
    flex: none;
    height: 100vh;
    height: 100dvh;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .map-wrap svg {
    position: relative;
    inset: auto;
    transform: none;
    height: 200vh;
    height: 200dvh;
    width: calc(200vh * 1394.7 / 774.7);
    width: calc(200dvh * 1394.7 / 774.7);
    top: -50vh;
    top: -50dvh;
    max-width: none;
  }
}