/* Start custom CSS *//* ---------- HOMEPAGE (page 54) — measurements from the LANDING mockups (403 / 382 px wide) ---------- */

/* secondary texts (section paragraphs, the WORK subtitle) ~15% smaller than the kit sizes (user 2026-10-11) */
:root body.elementor-page-54 { --fs-body: max(12px, calc(2 * var(--u))); --fs-sub: max(11px, calc(2.05 * var(--u))); }   /* body 32 px at 1600+ (user 2026-10-28; was 2.2u = 35.2 px) */

/* hero: the designer's 3D logo animation (square, beige background = the site cream) centred in a full-width cream band,
   with MINUTE and STREET beside the logo box in the proportions of the master logo (MS_WHITE _HORIZONTAL.svg, user
   2026-10-08). Master logo, in units of the box width B: MINUTE 1.1604 B wide, 0.454 B left of the box; STREET 0.9775 B
   wide, 0.501 B right of it; both centred on the box vertically (box h/w 0.797 — same as in the animation).
   In the animation (S = its square size) the box spans 24.2–75.5% of the width (B = 0.513 S), centred at 51.7% height.
   The whole lockup spans 2.1144 B to the left of the centre, so S is capped to keep it inside the grid margins (L0–L5).
   Loop = AV1 webm / mp4 fallback via the site-chrome script, first frame = poster. */
:root body.elementor-page-54 .ms-hero {
  display: grid; grid-template-columns: var(--m) var(--col) var(--gut) var(--col) var(--gut) var(--col) var(--m); align-items: center;
  container-type: inline-size; margin-top: var(--bar-h);   /* starts below the always-visible header bar */
  /* the band = exactly the first screen under the header bar on every device, so the page opens on the cream logo band only,
     no black section / pixel tiles (user 2026-10-19). svh = the small viewport (mobile address bar shown); vh = fallback */
  --H: calc(100vh - var(--bar-h)); --H: calc(100svh - var(--bar-h));
  --S: min(var(--H), 40.7cqw);                 /* animation square: lockup half-width 2.1144 B = 1.0847 S must fit 44.24cqw */
  --B: calc(.513 * var(--S));                  /* logo box width */
}
:root body.elementor-page-54 .ms-hero-media {
  grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden; padding: 0; height: var(--H);
  background: var(--cream) url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-3d-first-frame.jpg") center / var(--S) var(--S) no-repeat;
  --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/3D-Logo-Anim-1X1-1.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/3D-Logo-Anim-1X1-1.webm";
}
:root body.elementor-page-54 .ms-hero-media .msx-bg-video {   /* the whole square, S x S, centred */
  /* +1 px on every side into the cream band: hides the dark compositor hairline that still flashed on the clip-path
     edge while scrolling (user 2026-10-15; earlier inset(2px) was not enough at fractional DPR). The video's own border
     is plain cream, so the oversize is invisible. object-fit:cover keeps the 1:1 plate filling the slightly larger box. */
  top: calc(50% - var(--S) / 2 - 1px); left: calc(50% - var(--S) / 2 - 1px);
  width: calc(var(--S) + 2px); height: calc(var(--S) + 2px); transform: none; object-fit: cover;
  background-color: var(--cream);
}
/* the hairline came back on the right/bottom edge (user 2026-10-16): the video square sits on fractional pixels, and the
   GPU video layer smears a dark sub-pixel line along its edge. A cream frame ABOVE the video covers its outer 3 px plus
   2 px outside it; the video's border is plain cream in every frame (luma checked), so the frame itself is invisible. */
:root body.elementor-page-54 .ms-hero-media::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: calc(50% - var(--S) / 2 - 3px); left: calc(50% - var(--S) / 2 - 3px);
  width: calc(var(--S) + 6px); height: calc(var(--S) + 6px);
  box-shadow: inset 0 0 0 5px var(--cream);
}
/* MINUTE / STREET = the designer's hand-lettered SVGs (MS_DARK_TYPE_*). The SVGs have a 1080x1080 canvas with the lettering
   in the middle, so the background is scaled/positioned to show just the lettering: size = 1080 / bbox width,
   position = x / (1080 - w). The paragraph text stays for screen readers / SEO (font-size 0). */
:root body.elementor-page-54 .ms-hero-side {
  grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: center; position: relative; z-index: 2;   /* above the cream frame (z 1); the "e" of MINUTE reaches into the video square */
  margin: calc(.034 * var(--S)) 0 0; padding: 0; font-size: 0; color: transparent; height: auto;
  background-repeat: no-repeat;
}
:root body.elementor-page-54 .ms-hero-left {   /* bbox x402.7 y488.2 w274.6 h63.7 → 4.311 : 1 */
  width: calc(1.1604 * var(--B)); margin-left: calc(50cqw - 2.1144 * var(--B)); aspect-ratio: 274.6 / 63.7;
  background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/MS_DARK_TYPE_MINUTE.svg");
  background-size: 393.3% auto; background-position: 50% 48.04%;
}
:root body.elementor-page-54 .ms-hero-right {  /* bbox x424.2 y488.6 w231.7 h63.6 → 3.643 : 1 */
  width: calc(.9775 * var(--B)); margin-left: calc(50cqw + 1.001 * var(--B)); aspect-ratio: 231.7 / 63.6;
  background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/MS_DARK_TYPE_STREET.svg");
  background-size: 466.1% auto; background-position: 50% 48.07%;
}

/* reel */
:root body.elementor-page-54 .ms-reel { padding-top: calc(5 * var(--u)); padding-bottom: calc(8 * var(--u)); }
:root body.elementor-page-54 .ms-reel .ms-h2 { margin-left: var(--m); }
/* the intro text sits above the "REEL" heading (user 2026-10-12 / -13) */
:root body.elementor-page-54 .ms-reel > .ms-body:not(.ms-right) { margin: 0 var(--m) 0 auto; max-width: var(--span2); text-align: right; align-self: flex-end; }   /* right-aligned on cols 2–3 (user 2026-10-13) */
:root body.elementor-page-54 .ms-reel > .ms-body:not(.ms-right) a { color: inherit; }   /* "roster of directors" → /directors/: underline only, no link blue (user 2026-10-16) */
/* workflows dropdown: the picture (its first frame) plays the Kinopravda × YouTube loop (user 2026-10-14, media 1152/1153,
   AV1; poster 1157) — the site-chrome widget lays the video over any dropdown picture that sets --ms-bg-video */
:root body.elementor-page-54 .ms-acc-body img[src*="kinopravda-youtube-casestudy-first-frame"] { --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Kinopravda-Youtube-Casestudy-Beauty-002.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Kinopravda-Youtube-Casestudy-Beauty-002.webm"; }
/* the "REEL" heading under the reel was removed again (user 2026-10-14): the h2 "Reel" stays for screen readers / SEO,
   visually hidden (.ms-sr) */
/* reel: muted loop (AV1 webm / mp4, first frame = poster); hover = dark veil + play button following the mouse,
   click = the full reel in the Vimeo overlay player (site-chrome script, same as the project hero) */
:root body.elementor-page-54 .ms-reel-media {
  display: block; position: relative; overflow: hidden; padding: 0; width: calc(100% + 2 * var(--g)); max-width: none; margin: calc(6 * var(--u)) calc(-1 * var(--g)) 0;
  aspect-ratio: 16 / 9; max-height: 88vh; /* 1440p: never taller than the screen */
  background: var(--ink) url("https://minutestreet.tv/wp-content/uploads/2026/10/minute-street-reel-first-frame.jpg") center / cover no-repeat;   /* ink, not #000: no black line where the video edge leaves a sub-pixel uncovered (user 2026-10-19) */
  --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Minute-Street-REEL-loop.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Minute-Street-REEL-loop.webm";
}
/* the box ends on fractional pixels (16:9 of the width, e.g. 721.92): the video runs 1 px past its top and bottom (the box clips
   it) so its edge never stops short of the box edge and leaves a gap above the dark section (user 2026-10-19) */
:root body.elementor-page-54 .ms-reel-media .msx-bg-video { top: -1px; height: calc(100% + 2px); }
:root body.elementor-page-54 .ms-reel .ms-body { margin: calc(5.7 * var(--u)) auto 0 var(--m); max-width: max(300px, var(--span2)); text-align: left; align-self: flex-start; }   /* cols 1-2, starts on L0 (user 2026-10-09) */
/* "let's talk." button under the reel text → contact page: the designer's lettering (letstalk.svg, bbox x99.7 y54.5
   w333.7 h64 in a 532.9 x 173 canvas) as a mask in ink on a cream box; the paragraph text stays for screen readers */
:root body.elementor-page-54 .ms-letstalk {
  display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; width: auto; min-width: 0;
  margin: calc(3 * var(--u)) 0 0 var(--m); padding: calc(.03485 * var(--col)) calc(.0816 * var(--col));   /* 15% smaller (user 2026-10-10) */
  background: var(--cream); color: var(--ink); text-decoration: none; transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
:root body.elementor-page-54 .ms-letstalk:hover, :root body.elementor-page-54 .ms-letstalk:focus-visible { transform: translateY(-2px); background: var(--tint); color: var(--cream); }   /* hover: tint blue box, cream lettering (user 2026-10-09) */
:root body.elementor-page-54 .ms-letstalk p { font-size: 0; margin: 0; }
:root body.elementor-page-54 .ms-letstalk::after {
  content: ""; position: static; display: block; height: max(22.1px, calc(.13175 * var(--col))); aspect-ratio: 333.7 / 64; background-color: currentColor;
  -webkit-mask: url("https://minutestreet.tv/wp-content/uploads/2026/10/letstalk.svg") 50.05% 50% / 159.69% auto no-repeat;
  mask: url("https://minutestreet.tv/wp-content/uploads/2026/10/letstalk.svg") 50.05% 50% / 159.69% auto no-repeat;
}

/* work */
:root body.elementor-page-54 .ms-work { padding-top: calc(3.7 * var(--u)); padding-bottom: calc(12.5 * var(--u)); }   /* bottom space halved (user 2026-10-07) */
:root body.elementor-page-54 .ms-work .ms-head-right { margin-right: var(--m); }
:root body.elementor-page-54 .ms-work .ms-sub br { display: none; }   /* one line on desktop; phones break after the first sentence (below) */
/* designer grid (user 2026-10-07; 8 projects since 2026-10-13):
   row 1: card1 cols 1-2 · card2 col 3 / row 2: card3 cols 1-3 / row 3: card4 col 1 · card5 cols 2-3 / row 4: card6 cols 1-3 /
   row 5: card7 cols 1-2 · card8 col 3
   1 YouTube shopping · 2 BYD (placeholder, details + video coming) · 3 Wega Green Goose · 4 CUPRA · 5 Patagonia ·
   6 Budapest finals (full width, user 2026-10-13) · 7 BWIN · 8 METEOR */
:root body.elementor-page-54 .ms-work-grid {
  display: grid; grid-template-columns: repeat(3, var(--col)); grid-auto-rows: calc(26 * var(--u));
  column-gap: var(--gut); row-gap: calc(4.6 * var(--u)); padding: 0;
  width: var(--content); margin: calc(6.7 * var(--u)) 0 0 var(--m);
}
/* every card = its project's looping preview (site-chrome script): first frame as poster until it plays, AV1 webm
   (VP9 where --ms-bg-webm-codec says so) with the mp4 as fallback. */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(1) { grid-column: 1 / 3; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/youtube-shopping-rtb2-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Ytshopping-Rtb2-15S-16X9-Clean-Transition.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/YTShopping_RTB2_15s_16x9_CLEAN_transition.webm"; --ms-bg-webm-codec: "vp9"; }   /* new loop (user 2026-10-12, media 830/831) */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(2) { grid-column: 3 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/byd-clean-to-webpage-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Byd-Clean-To-Webpage.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Byd-Clean-To-Webpage.webm"; }   /* BYD website loop (user 2026-10-14, media 1154/1155, AV1; poster 1156) */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(3) { grid-column: 1 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/wega-green-goose-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Wgg-V01-01-Short-002_2.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Wgg-V01-01-Short-002_2.webm"; }
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(4) { grid-column: 1 / 2; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/cupra-003-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Cupra-Short-003.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Cupra-Short-003.webm"; }   /* new loop (user 2026-10-13, media 847/848, AV1) */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(5) { grid-column: 2 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/patagonia-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Patagonia-V001-Short-001.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/patagonia_v001_short_001.webm"; --ms-bg-webm-codec: "vp9"; }
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(6) { grid-column: 1 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/visit-budapest-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Visit-Budapest-Promotion-Short-002_2.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Visit-Budapest-Promotion-Short-002_2.webm"; }   /* Budapest finals, one per row (user 2026-10-13) */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(7) { grid-column: 1 / 3; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/bwin-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Bwin-V01-01-Short-01_2.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Bwin-V01-01-Short-01_2.webm"; }
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(8) { grid-column: 3 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/meteor-002-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/Meteor-Short-002.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/Meteor-Short-002.webm"; }   /* new loop (user 2026-10-13, media 845/846, AV1) */
:root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(9) { grid-column: 1 / 4; background-image: url("https://minutestreet.tv/wp-content/uploads/2026/10/gym-symphony-first-frame.jpg"); --ms-bg-video: "https://minutestreet.tv/wp-content/uploads/2026/10/00-Gym-Cover.mp4"; --ms-bg-webm: "https://minutestreet.tv/wp-content/uploads/2026/10/00_GYM_cover.webm"; --ms-bg-webm-codec: "vp9"; }   /* GYM SYMPHONY, full width (user 2026-10-14); cover loop media 1437/1438 (VP9), first frame 1439 (user 2026-10-17) */

/* about */
:root body.elementor-page-54 .ms-about { padding-top: calc(11 * var(--u)); padding-bottom: calc(10 * var(--u)); }   /* top space doubled (user 2026-10-07) */
:root body.elementor-page-54 .ms-about > .ms-h2 { margin-left: var(--m); }
/* about text: the full content width (L0→L5), left-aligned under the heading (user 2026-10-11: wider, the ragged
   right-aligned lines looked misaligned) */
:root body.elementor-page-54 .ms-about > .ms-body.ms-right { margin: calc(6 * var(--u)) 0 0 var(--m); width: var(--content); max-width: none; text-align: left; align-self: flex-start; }
:root body.elementor-page-54 .ms-about .ms-acc { width: var(--span2); margin: calc(7 * var(--u)) 0 0 var(--m); }   /* cols 1-2 */
:root body.elementor-page-54 .ms-about .ms-acc-text { font-size: var(--fs-body); line-height: 1.4; }   /* = the about us text size (user 2026-10-13) */
:root body.elementor-page-54 .ms-acc-text a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }   /* Infrastructure company links (2026-10-14) */
:root body.elementor-page-54 .ms-acc-text a:hover, :root body.elementor-page-54 .ms-acc-text a:focus-visible { text-decoration-thickness: 2px; }
:root body.elementor-page-54 .ms-about .ms-acc-label { font-size: var(--fs-body); line-height: 1.3; }   /* titles too (user 2026-10-13) */

/* brand logos: cream boxes in ONE marquee row moving right (user 2026-10-13: the two rows merged, placeholders dropped) */
:root body.elementor-page-54 .ms-brands {
  display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: 0;
  margin: calc(9.4 * var(--u)) calc(-1 * var(--g)) 0; width: calc(100% + 2 * var(--g));
}
:root body.elementor-page-54 .ms-marquee { display: block; padding: 0; overflow: hidden; width: 100%; }
:root body.elementor-page-54 .ms-track { display: flex; flex-wrap: nowrap; width: max-content; padding: 0; animation: ms-marquee 50s linear infinite; }
:root body.elementor-page-54 .ms-marquee-right .ms-track { animation-direction: reverse; margin-left: var(--m); }
:root body.elementor-page-54 .ms-marquee-left .ms-track { animation-duration: 50s; margin-left: calc(-6 * var(--u)); }
:root body.elementor-page-54 .ms-marquee:hover .ms-track { animation-play-state: paused; }
@keyframes ms-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
:root body.elementor-page-54 .ms-pill {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0;
  width: max(84px, calc(15.7 * var(--u))); height: max(42px, calc(7.9 * var(--u))); margin-right: calc(3.9 * var(--u));
  background: var(--cream); color: var(--ink); border: 0; border-radius: 0;
}
:root body.elementor-page-54 .ms-pill-text { font-family: var(--display); font-weight: var(--display-w); font-size: max(10px, calc(1.6 * var(--u))); white-space: nowrap; }
/* brand logos (.ms-pill-logo; black & white PNGs trimmed to the artwork, max 600 x 300): the image is contained inside the
   box's padding; the paragraph keeps the brand name for screen readers / SEO (font-size 0 = visually hidden).
   9 logos, each followed in the track by its loop duplicate set (the same 9 again): --logo is chosen by position (9n+k). */
:root body.elementor-page-54 .ms-pill-logo {
  padding: calc(1.4 * var(--u)) calc(2.2 * var(--u));
  background: var(--cream) var(--logo) center / contain no-repeat; background-origin: content-box;
}
:root body.elementor-page-54 .ms-pill-logo .ms-pill-text { font-size: 0; }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+1) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-cupra-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+2) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-bosch-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+3) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-green-goose-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+4) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-disney-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+5) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-lidl-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+6) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-ikea-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+7) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-youtube-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n+8) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-bmw-web.png"); }
:root body.elementor-page-54 .ms-track > .ms-pill:nth-child(9n) { --logo: url("https://minutestreet.tv/wp-content/uploads/2026/10/logo-unicef-web.png"); }
/* "reduce motion" (e.g. Windows Animation effects off): keep the carousels moving, but 3x slower; hover still pauses */
@media (prefers-reduced-motion: reduce) { :root body.elementor-page-54 .ms-track { animation-duration: 150s; } }

/* the team — desktop: 5 per row; each photo = 4 x 4 tiles, no gaps → 5·4 = 20 tiles = the full content width (L0→L5).
   Phones: 2 per row of 10 x 10 tiles. The tile overlay is drawn by the site-chrome script (shuffles while scrolling);
   the ::after pattern below is only the no-script fallback. */
:root body.elementor-page-54 .ms-team-h { margin: calc(12 * var(--u)) var(--m) 0 auto; align-self: flex-end; text-align: right; }
:root body.elementor-page-54 .ms-people-intro { margin: calc(4.5 * var(--u)) var(--m) 0 auto; max-width: max(280px, var(--span2)); text-align: right; align-self: flex-end; }   /* right-aligned under THE TEAM, cols 2–3 (user 2026-10-12) */
:root body.elementor-page-54 .ms-people {
  position: relative; display: grid; grid-template-columns: repeat(5, calc(4 * var(--tile))); gap: 0; padding: 0;
  width: var(--content); margin: calc(6 * var(--u)) 0 0 var(--m);
}
:root body.elementor-page-54 .ms-person { position: static; display: block; padding: 0; cursor: pointer; aspect-ratio: 1 / 1; outline: none; min-width: 0; }
:root body.elementor-page-54 .ms-photo {
  /* no CSS filter: it would tint the cream blocks too. Upload real photos already in B&W. */
  position: relative; width: 100%; height: 100%; padding: 0;
  background:
    radial-gradient(circle at 50% 40%, #4d4a4b 0 17%, transparent 17.5%),
    radial-gradient(ellipse 34% 30% at 50% 100%, #3f3c3d 0 99%, transparent 100%),
    linear-gradient(160deg, #d6d6d6, #9b9b9b);
}
/* real team photos (user 2026-10-12, media 817–826, 640 px webp): an e-image inside each .ms-photo, filling the square */
:root body.elementor-page-54 .ms-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; }
:root body.elementor-page-54 .ms-person:nth-child(2n) .ms-photo { background-color: #b9b9b9; background-blend-mode: normal, normal, multiply; }
:root body.elementor-page-54 .ms-person:nth-child(3n) .ms-photo { background-color: #8f8f8f; background-blend-mode: normal, normal, multiply; }
/* every face shows its own slice of the tile pattern; the hovered/focused face clears */
:root body.elementor-page-54 .ms-photo::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  background-image: var(--ms-people-pixels); background-size: 500% 400%; background-repeat: no-repeat;
  transition: opacity .25s steps(3, end);
}
:root body.elementor-page-54 .ms-person:hover .ms-photo::after, :root body.elementor-page-54 .ms-person:focus-within .ms-photo::after { opacity: 0; }
/* info card: exactly one photo row tall, full grid width — top-row people → over row 2; everyone else → over row 1 */
:root body.elementor-page-54 .ms-info {
  position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: auto; min-height: calc(4 * var(--tile)); z-index: 3;   /* grows when a bio needs more (user 2026-10-16: tagline + bio); the widget opens the rows by the card's real height */
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 80px;   /* bio far from the icons (user 2026-10-14): 80 px desktop + landscape tablet, 64 px upright tablet, 40 px phone */
  padding: calc(1.6 * var(--u)) calc(2 * var(--u)); background: var(--cream); color: var(--ink); border: 0; outline: 0;   /* no frame (user) */
  /* smooth in AND out: eased fade + small rise; visibility flips only after the fade-out has finished */
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s;
}
:root body.elementor-page-54 .ms-person:hover .ms-info, :root body.elementor-page-54 .ms-person:focus-within .ms-info, :root body.elementor-page-54 .ms-person.is-pinned .ms-info {
  opacity: 1; visibility: visible; transform: none; z-index: 4;   /* the incoming card sits above the one fading out */
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* the OPEN card takes the mouse: it is inside its .ms-person, so moving from the photo onto the card keeps the hover and
   the card stays open (its icon links are clickable). A closed / fading-out card never catches the mouse, so it can't
   "steal" the hover from the photo under the cursor. Clicking a photo pins its card (site-chrome widget JS, for touch). */
:root body.elementor-page-54 .ms-info { pointer-events: none; }
:root body.elementor-page-54 .ms-person:hover .ms-info, :root body.elementor-page-54 .ms-person:focus-within .ms-info { pointer-events: auto; }
:root body.elementor-page-54 .ms-person.is-pinned .ms-info { pointer-events: auto; z-index: 5; }
/* invisible bridges on both edges: while the card is still rising into place (first ~0.2 s) there would be a strip
   between photo and card where a quick mouse lands on the NEXT person's photo and switches the card (user bug 2026-10-07) */
:root body.elementor-page-54 .ms-info::before, :root body.elementor-page-54 .ms-info::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; }
:root body.elementor-page-54 .ms-info::before { top: auto; bottom: 100%; }   /* Elementor styles e-con ::before/::after itself — reset the other edge */
:root body.elementor-page-54 .ms-info::after { top: 100%; bottom: auto; }
/* …and once the card has settled (0.5 s) the bridges fold away so they never cover the neighbouring photos */
:root body.elementor-page-54 .ms-person:hover .ms-info::before, :root body.elementor-page-54 .ms-person:hover .ms-info::after,
:root body.elementor-page-54 .ms-person.is-pinned .ms-info::before, :root body.elementor-page-54 .ms-person.is-pinned .ms-info::after { height: 0; transition: height 0s linear .5s; }
@media (prefers-reduced-motion: reduce) {
  :root body.elementor-page-54 .ms-person:hover .ms-info::before, :root body.elementor-page-54 .ms-person:hover .ms-info::after,
  :root body.elementor-page-54 .ms-person.is-pinned .ms-info::before, :root body.elementor-page-54 .ms-person.is-pinned .ms-info::after { transition-delay: .5s !important; }
}
:root body.elementor-page-54 .ms-person.is-pinned .ms-photo::after { opacity: 0; }
/* Elementor's frontend.css zeroes EVERY transition (html * { transition-duration: 0s !important }) under
   prefers-reduced-motion — the user's machine has it on. Keep this gentle fade anyway (user request, like the carousels). */
@media (prefers-reduced-motion: reduce) {
  :root body.elementor-page-54 .ms-info { transition-duration: .45s, .55s, 0s !important; transition-delay: 0s, 0s, .55s !important; }
  :root body.elementor-page-54 .ms-person:hover .ms-info, :root body.elementor-page-54 .ms-person:focus-within .ms-info, :root body.elementor-page-54 .ms-person.is-pinned .ms-info { transition-delay: 0s, 0s, 0s !important; }
  :root body.elementor-page-54 .ms-photo::after { transition-duration: .25s !important; }
}
:root body.elementor-page-54 .ms-info-name { grid-column: 1 / -1; justify-self: end; font-family: var(--display); font-weight: var(--display-w); text-transform: uppercase; font-size: max(20px, calc(3.6 * var(--u))); line-height: 1; margin: 0; }
:root body.elementor-page-54 .ms-info-sur { grid-column: 1 / -1; justify-self: end; font-size: max(11px, calc(1.8 * var(--u))); margin: calc(.3 * var(--u)) 0 0; }
:root body.elementor-page-54 .ms-info-role { grid-column: 1; align-self: end; font-weight: var(--body-w); font-size: max(11px, calc(1.5 * var(--u))); line-height: 1.3; margin: 0; }   /* role + bio; smaller so the longest bios fit the one-row card (2026-10-11) */
:root body.elementor-page-54 .ms-info .ms-social { grid-column: 2; align-self: end; }
@media (min-width: 768px), (orientation: landscape) {   /* = everything that is not a phone held upright */
  :root body.elementor-page-54 .ms-person:nth-child(-n+5) .ms-info { top: calc(4 * var(--tile)); }
  /* name + surname + icons in the right column, role + bio in the left one from the very top (user 2026-10-16: the
     empty space beside the name made the cards taller than a photo row) — every card fits one row again */
  :root body.elementor-page-54 .ms-info-name { grid-column: 2; grid-row: 1; }
  :root body.elementor-page-54 .ms-info-sur { grid-column: 2; grid-row: 2; }
  :root body.elementor-page-54 .ms-info-role { grid-column: 1; grid-row: 1 / -1; }
  :root body.elementor-page-54 .ms-info .ms-social { grid-column: 2; grid-row: 3; justify-self: end; }
  /* pattern = 5 x 4 photos of 4 x 4 tiles */
  :root body.elementor-page-54 .ms-person:nth-child(5n+1) .ms-photo::after { background-position-x: 0%; }
  :root body.elementor-page-54 .ms-person:nth-child(5n+2) .ms-photo::after { background-position-x: 25%; }
  :root body.elementor-page-54 .ms-person:nth-child(5n+3) .ms-photo::after { background-position-x: 50%; }
  :root body.elementor-page-54 .ms-person:nth-child(5n+4) .ms-photo::after { background-position-x: 75%; }
  :root body.elementor-page-54 .ms-person:nth-child(5n) .ms-photo::after { background-position-x: 100%; }
  :root body.elementor-page-54 .ms-person:nth-child(-n+5) .ms-photo::after { background-position-y: 0%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+6):nth-child(-n+10) .ms-photo::after { background-position-y: 33.333%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+11):nth-child(-n+15) .ms-photo::after { background-position-y: 66.667%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+16) .ms-photo::after { background-position-y: 100%; }
}

/* phones held upright: same composition, readable minimums; team grid 2 per row (a phone on its side gets the desktop layout) */
@media (max-width: 767px) and (orientation: portrait) {
  /* hero on phones = the master VERTICAL logo (MS_WHITE_VERTICAL.svg, user 2026-10-08): MINUTE centred ABOVE the box,
     STREET centred BELOW it, each 0.532 B from the box (lockup 2.389 B tall, symmetric around the box). The animation is
     S = 86% of the width, centred in a 50:71 band (all values below in band widths, cqw):
     B = .4412 · box top 54.92 / bottom 90.01 · MINUTE top = box top − .532 B − its height (.2692 B) = 19.57 ·
     STREET top = box bottom + .532 B = 113.48 · STREET bottom 125.32 of 142.
     MINUTE / STREET 15% smaller (user 2026-10-09), same distance from the box: MINUTE .9863 B wide (.2288 B tall) →
     top = 54.92 − 23.47 − 10.10 = 21.35; STREET .8309 B wide, top still 113.48 */
  /* the band fills the screen (at least the 50:71 composition, 142cqw); the lockup is laid out for 142cqw and moved down by
     --off so it stays centred in a taller band */
  :root body.elementor-page-54 .ms-hero { --S: 86cqw; --off: max(0px, calc((var(--H) - 142cqw) / 2)); }
  :root body.elementor-page-54 .ms-hero-media { height: max(var(--H), 142cqw); }
  :root body.elementor-page-54 .ms-hero-side { align-self: start; }
  :root body.elementor-page-54 .ms-hero-left { width: calc(.98634 * var(--B)); margin: calc(21.35cqw + var(--off)) 0 0 calc(50cqw - .49317 * var(--B)); }
  :root body.elementor-page-54 .ms-hero-right { width: calc(.830875 * var(--B)); margin: calc(113.48cqw + var(--off)) 0 0 calc(50cqw - .415438 * var(--B)); }
  /* 1.5x the space between the sections (user 2026-10-10) */
  :root body.elementor-page-54 .ms-reel { padding-top: calc(7.5 * var(--u)); padding-bottom: calc(12 * var(--u)); }
  :root body.elementor-page-54 .ms-work { padding-top: calc(5.55 * var(--u)); padding-bottom: calc(18.75 * var(--u)); }
  :root body.elementor-page-54 .ms-about { padding-top: calc(16.5 * var(--u)); padding-bottom: calc(15 * var(--u)); }
  :root body.elementor-page-54 .ms-team-h { margin-top: calc(18 * var(--u)); }
  :root body.elementor-page-54 .ms-reel .ms-body, :root body.elementor-page-54 .ms-about > .ms-body.ms-right { max-width: var(--content); margin-left: var(--m); }   /* L0→L5 */
  :root body.elementor-page-54 .ms-reel > .ms-body:not(.ms-right) { margin-left: var(--m); max-width: var(--content); }   /* intro: the full content width, still right-aligned (user 2026-10-13: wider, less margin on the left) */
  :root body.elementor-page-54 .ms-about .ms-acc { width: auto; align-self: stretch; margin-right: var(--m); }
  /* work subtitle: two lines, larger (user 2026-10-12: it was tiny on one line) */
  :root body.elementor-page-54 .ms-work .ms-sub { font-size: 14px; line-height: 1.35; }
  :root body.elementor-page-54 .ms-work .ms-sub br { display: inline; }
  /* work: one card per row, full content width (user 2026-10-09) */
  :root body.elementor-page-54 .ms-work-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 32px; }   /* more space between projects (user 2026-10-09) */
  :root body.elementor-page-54 .ms-work-grid .ms-card:nth-child(n) { grid-column: 1 / -1; aspect-ratio: 1; }   /* square (user 2026-10-14; was 6:5) */
  /* team: 2 per row, each photo 7 x 7 of the bigger phone tiles (2·7 = 14 tiles = content width). The card is one row tall and covers
     the row ABOVE the tapped person (first row → the row below), so it opens right next to the photo. */
  :root body.elementor-page-54 .ms-people { grid-template-columns: repeat(2, calc(7 * var(--tile))); gap: 0; }
  :root body.elementor-page-54 .ms-person { --row: 0; }
  :root body.elementor-page-54 .ms-person:nth-child(n+3) { --row: 1; }
  :root body.elementor-page-54 .ms-person:nth-child(n+5) { --row: 2; }
  :root body.elementor-page-54 .ms-person:nth-child(n+7) { --row: 3; }
  :root body.elementor-page-54 .ms-person:nth-child(n+9) { --row: 4; }
  :root body.elementor-page-54 .ms-person:nth-child(n+11) { --row: 5; }
  :root body.elementor-page-54 .ms-person:nth-child(n+13) { --row: 6; }
  :root body.elementor-page-54 .ms-person:nth-child(n+15) { --row: 7; }
  :root body.elementor-page-54 .ms-person:nth-child(n+17) { --row: 8; }
  :root body.elementor-page-54 .ms-person:nth-child(n+19) { --row: 9; }
  :root body.elementor-page-54 .ms-person .ms-info { top: calc((var(--row) - 1) * 7 * var(--tile)); height: auto; min-height: calc(7 * var(--tile)); }   /* grows with the larger bio text (user 2026-10-13) */
  :root body.elementor-page-54 .ms-person:nth-child(-n+2) .ms-info { top: calc(7 * var(--tile)); }
  :root body.elementor-page-54 .ms-info { padding: 14px 16px; column-gap: 40px; }
  /* fallback pattern (no script): 2 x 5 photos */
  :root body.elementor-page-54 .ms-photo::after { background-image: var(--ms-people-pixels-sm); background-size: 200% 500%; }
  :root body.elementor-page-54 .ms-person:nth-child(2n+1) .ms-photo::after { background-position-x: 0%; }
  :root body.elementor-page-54 .ms-person:nth-child(2n) .ms-photo::after { background-position-x: 100%; }
  :root body.elementor-page-54 .ms-person:nth-child(-n+2) .ms-photo::after { background-position-y: 0%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+3):nth-child(-n+4) .ms-photo::after { background-position-y: 25%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+5):nth-child(-n+6) .ms-photo::after { background-position-y: 50%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+7):nth-child(-n+8) .ms-photo::after { background-position-y: 75%; }
  :root body.elementor-page-54 .ms-person:nth-child(n+9) .ms-photo::after { background-position-y: 100%; }
}

/* tablets held upright (768–1199 px portrait; designer's tablet layout, user 2026-10-12): the desktop composition with
   a stacked hero lockup, the reel text + "let's talk." on the right, full-width dropdowns and 4 team photos per row */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  /* hero = the master VERTICAL logo, as on phones but smaller: box B = 25% of the width (S = 48.75cqw) in a 50:64 band
     (H = 128cqw); MINUTE / STREET centred above / below the box, each .7 B from it (the mockup's spacing). Box centre =
     H/2 + .017 S; box half-height .3985 B; MINUTE .2288 B tall, STREET .2281 B. */
  :root body.elementor-page-54 .ms-hero { --S: 48.75cqw; --off: max(0px, calc((var(--H) - 128cqw) / 2)); }   /* band fills the screen, at least 128cqw */
  :root body.elementor-page-54 .ms-hero-media { height: max(var(--H), 128cqw); }
  :root body.elementor-page-54 .ms-hero-side { align-self: start; }
  :root body.elementor-page-54 .ms-hero-left { width: calc(.98634 * var(--B)); margin: calc(64cqw + var(--off) + .017 * var(--S) - 1.3273 * var(--B)) 0 0 calc(50cqw - .49317 * var(--B)); }
  :root body.elementor-page-54 .ms-hero-right { width: calc(.830875 * var(--B)); margin: calc(64cqw + var(--off) + .017 * var(--S) + 1.0985 * var(--B)) 0 0 calc(50cqw - .415438 * var(--B)); }
  /* reel: the text under the video and "let's talk." right-aligned, ending on L5 */
  :root body.elementor-page-54 .ms-reel .ms-body.ms-right { margin: calc(5.7 * var(--u)) var(--m) 0 auto; max-width: var(--span2); text-align: right; align-self: flex-end; }
  :root body.elementor-page-54 .ms-letstalk { align-self: flex-end; margin: calc(3 * var(--u)) var(--m) 0 auto; }
  /* dropdowns: the full content width */
  :root body.elementor-page-54 .ms-about .ms-acc { width: var(--content); }
  /* team: 4 per row, each photo 5 x 5 tiles (4·5 = 20 tiles = content width); the card is one photo row tall and covers
     the row above (the first row → the row below), as on desktop */
  :root body.elementor-page-54 .ms-people { grid-template-columns: repeat(4, calc(5 * var(--tile))); }
  :root body.elementor-page-54 .ms-person { --row: 0; }
  :root body.elementor-page-54 .ms-person:nth-child(n+5) { --row: 1; }
  :root body.elementor-page-54 .ms-person:nth-child(n+9) { --row: 2; }
  :root body.elementor-page-54 .ms-person:nth-child(n+13) { --row: 3; }
  :root body.elementor-page-54 .ms-person:nth-child(n+17) { --row: 4; }
  :root body.elementor-page-54 .ms-person:nth-child(n) .ms-info { top: calc((var(--row) - 1) * 5 * var(--tile)); height: auto; min-height: calc(5 * var(--tile)); }
  :root body.elementor-page-54 .ms-person:nth-child(-n+4) .ms-info { top: calc(5 * var(--tile)); }
  :root body.elementor-page-54 .ms-info { column-gap: 64px; }
}

/* about accordion: 16:9 picture under the text (pre-production placeholder for now, user 2026-10-09) — styled in the kit (edge to edge) *//* End custom CSS */