/* ═══════════════════════════════════════════════════════════════
   MALIK THEME — MAIN DESIGN SYSTEM
   Compatible: Hello Elementor + Elementor Pro + ACF + Gutenberg
═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--malik-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--malik-black);
  background: var(--malik-white);
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--malik-olive); outline-offset: 3px; }

/* ── Container ────────────────────────────────────────────────── */
.malik-container {
  width: 100%;
  max-width: var(--malik-container-max);
  margin-inline: auto;
  padding-inline: var(--malik-container-pad);
  position: relative;
}

@media (max-width: 768px) {
  .malik-container { padding-inline: var(--malik-container-pad-sm); }
}

/* ── Typography scale ─────────────────────────────────────────── */
.malik-h1, h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.malik-h2, h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.malik-h3, h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.2; }
.malik-h4, h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; }
.malik-body-lg  { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.65; }
.malik-body     { font-size: 1rem; line-height: 1.65; }
.malik-caption  { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Buttons ──────────────────────────────────────────────────── */
.malik-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--malik-font-ubuntu);
  font-size: clamp(0.7rem, 1.32vw, 19px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 2rem;
  border-radius: var(--malik-radius-pill);
  border: 1.5px solid currentColor;
  cursor: pointer;
  transition: background var(--malik-transition), color var(--malik-transition), border-color var(--malik-transition), transform 0.2s;
  white-space: nowrap;
}

.malik-btn:hover { transform: translateY(-1px); }
.malik-btn:active { transform: translateY(0); }

/* Outline dark (on light bg) */
.malik-btn--outline {
  background: transparent;
  color: var(--malik-black);
  border-color: var(--malik-black);
}
.malik-btn--outline:hover { background: var(--malik-black); color: var(--malik-white); }

/* Outline light (on dark bg) */
.malik-btn--outline-light {
  background: transparent;
  color: var(--malik-white);
  border-color: rgba(255,255,255,0.6);
}
.malik-btn--outline-light:hover { background: var(--malik-white); color: var(--malik-black); }

/* Filled */
.malik-btn--filled {
  background: var(--malik-black);
  color: var(--malik-white);
  border-color: var(--malik-black);
}
.malik-btn--filled:hover { background: var(--malik-dark-2); }

/* Filled light */
.malik-btn--filled-light {
  background: var(--malik-white);
  color: var(--malik-black);
  border-color: var(--malik-white);
}
.malik-btn--filled-light:hover { background: var(--malik-cream); }

/* No hover effect on the buttons that open the contact modal ("Start your
   story" in testimonials, "Talk to an expert" in results, the academy CTA)
   — held equal to each button's own resting state so it overrides
   .malik-btn/.malik-btn--outline's hover rather than just relying on
   absence (those base rules would otherwise still apply). Every other
   .malik-btn on the site keeps its normal hover. */
[data-contact-trigger].malik-btn:hover {
  transform: none !important;
}
[data-contact-trigger].malik-btn--outline:hover {
  background: transparent !important;
  color: var(--malik-black) !important;
}

/* No hover effect on: We Are Malik's "View more", Services' "View More",
   and Letter's "Sign up for monthly management insights" (.malik-letter__cta).
   Same held-equal-to-rest approach as the contact-trigger buttons above —
   .malik-we-are's own CSS block is otherwise locked, so this targets the
   button via its data-we-are-expand attribute rather than editing that
   block. Learn's "Full Course List" (.malik-learn__cta) intentionally keeps
   the normal .malik-btn--outline:hover (black bg / white text). */
[data-we-are-expand],
[data-services-goto="arc"],
.malik-letter__cta {
  transition: none !important;
}
[data-we-are-expand]:hover,
[data-services-goto="arc"]:hover,
.malik-letter__cta:hover {
  transform: none !important;
}
[data-we-are-expand]:hover {
  background: transparent !important;
  color: var(--malik-white) !important;
}
[data-services-goto="arc"]:hover {
  background: transparent !important;
  color: var(--malik-black) !important;
}
.malik-letter__cta:hover {
  background: transparent !important;
  color: var(--malik-white) !important;
}

/* ── Video background ─────────────────────────────────────────── */
.malik-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* transform: translateY(-80px); */
}

.malik-services:has(.malik-services__screen[data-services-screen="intro"].is-active) .malik-services__bg .malik-video-bg {
  transform: translateY(-80px);
}

.malik-section {
  position: relative;
  overflow: hidden;
}

.malik-section__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--malik-section-py);
}

/* ── Section label / eyebrow ──────────────────────────────────── */
.malik-eyebrow {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  /* opacity: 0.6; */
  color: var(--malik-black);
  margin-bottom: 0.75rem;
}

/* ════════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════════ */
.malik-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.0);
  transition: background 0.4s, backdrop-filter 0.4s;
}

/* On mobile the header is its own block, not a transparent bar floating over
   the hero video (that overlay treatment is desktop-only) — so it takes up
   normal document flow and the hero starts right after it, instead of
   underneath it. .malik-hero's own padding-top (meant to clear the fixed
   header) is zeroed out to match, see the mobile .malik-hero rule below.
   `sticky` (not `static`) so the header still pins to the top once scrolled
   past — otherwise it scrolls away with the page and the .is-scrolled mark
   swap (below) never has a chance to be seen. */
@media (max-width: 768px) {
  .malik-header { position: sticky; top: 0; }
  .malik-header.is-scrolled { background: transparent; }
}

/* Three-column grid (mark / logo / actions) instead of flex + a hand-tuned
   absolute-positioned logo — guarantees all three sit on the same vertical
   center line regardless of how wide the left/right columns are, since the
   two 1fr columns are always equal and the middle column just centers itself
   between them. */
.malik-header__inner {
  position: relative;
  z-index: 1001;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem var(--malik-container-pad);
  /* max-width: var(--malik-container-max);
  margin-inline: auto; */
}

/* Secondary mark, pinned left — hidden at the top of the page; becomes active
   once scrolled, swapping in for the center logo/menu (see .is-scrolled below).
   A standalone fixed element, NOT part of .malik-header__inner's grid (see
   header.php for why) — positioned here to land in the same visual spot the
   grid used to place it: header's own padding-block/-inline (1.25rem /
   var(--malik-container-pad)), top-left. */
.malik-header__mark {
  display: flex;
  align-items: center;
  position: fixed;
  top: 1.25rem;
  left: var(--malik-container-pad);
  z-index: 1002;
  width: 167px;
  height: 155px;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0); /* hidden by default; JS reveals it via clip-path as the hero scrolls out */
  /* Figma's "adapts to whatever's behind it" mark: invert the source GIF's
     black-shapes/white-letter art (filter) so the shapes become solid white
     with the letter as a dark cutout, then mix-blend-mode:difference blends
     that against the real page content behind it — white areas invert to
     the backdrop's own inverse (always legible), the letter-hole shows the
     backdrop through unchanged. Requires this element to be the direct,
     unnested thing being blended (see header.php comment) — blend-mode set
     any deeper, behind another stacking context, silently does nothing. */
  mix-blend-mode: difference;
}
/* Mark image — same square 1080x1080 GIF as the main logo, cropped to fill
   this 167x155 box (matches the Figma frame's "Fill" scale mode, node 222:843). */
.malik-header__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: invert(1);
}

/* Logo, centered by grid placement (no more absolute positioning / magic top offset) */
.malik-header__logo {
    grid-column: 2;
    justify-self: center;
    width: 352px;
    height: 107px;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
}

/* Logo image — source GIF is a square 1080x1080 canvas, cropped to fill
   this wide box (matches the Figma frame's "Fill" scale mode). */
.malik-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logo + hamburger crop away (bottom-up) as the hero's own bottom edge
   scrolls up past them, and the mark crops in (top-down) the same way —
   both driven by clip-path scrubbed directly against scroll position in
   initHeader() (malik-main.js), not a class-based opacity crossfade. */
.malik-header__actions {
  clip-path: inset(0 0 0 0);
}
.malik-header.is-scrolled .malik-header__logo,
.malik-header.is-scrolled .malik-header__actions {
  pointer-events: none;
}

/* Once scrolled, the logo/menu fade out and the bar goes fully transparent
   (see .is-scrolled background rules above) — but the header element itself
   still spans the full width/height and was intercepting clicks meant for
   whatever sits underneath it (e.g. a modal close button near the top of the
   page). The mark (a separate fixed sibling now — see header.php — hence
   `~` rather than a descendant selector) is the only thing that should stay
   clickable in that state; everything else lets clicks pass through. */
.malik-header.is-scrolled {
  pointer-events: none;
}
.malik-header.is-scrolled ~ .malik-header__mark {
  pointer-events: auto;
}

/* The footer has its own logos (CTA-band wordmark + white brand mark at the
   very bottom) — once it's on screen the fixed header's left-side mark is
   redundant. Its clip-path is scrubbed continuously by JS (initHeader in
   malik-main.js) as the black footer line scrolls up over it, so it's
   visibly cropped off by the line rather than snapping off; this class
   only takes pointer-events away once that crop has actually finished. */
.malik-header.is-footer ~ .malik-header__mark {
  pointer-events: none;
}

/* Non-home pages (Fredmund Malik, Syntegration, Sensitivity Model, ...) keep
   the pre-crop-feature look instead of the hero-wait/footer-crop choreography
   above: a plain opacity crossfade a few px into scroll, same as before that
   feature existed — see initHeaderLegacy() in malik-main.js, which sets these
   elements' clip-path to fully-visible once so the home-page defaults (mark
   clipped 100% by default, logo/actions crop-scrubbed) don't apply here. */
body:not(.malik-is-home) .malik-header__logo,
body:not(.malik-is-home) .malik-header__actions {
  transition: opacity 0.4s var(--malik-ease);
}
body:not(.malik-is-home) .malik-header.is-scrolled .malik-header__logo,
body:not(.malik-is-home) .malik-header.is-scrolled .malik-header__actions {
  opacity: 0;
}
body:not(.malik-is-home) .malik-header__mark {
  opacity: 0;
  transition: opacity 0.4s var(--malik-ease);
}
body:not(.malik-is-home) .malik-header.is-scrolled ~ .malik-header__mark {
  opacity: 1;
}

/* Nav links */
.malik-header__nav .malik-nav__list {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.malik-header__nav .malik-nav__list a {
  color: var(--malik-white);
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.85;
  transition: opacity var(--malik-transition);
}

.malik-header__nav .malik-nav__list a:hover { opacity: 1; }

/* Header actions */
.malik-header__actions {
  grid-column: 3; /* pinned explicitly so it stays right-aligned even on mobile,
                      where .malik-header__mark is hidden and would otherwise
                      leave column 3 empty and let this auto-place into column 1 */
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 1rem;
}

.malik-header__search-btn {
  background: none;
  border: none;
  color: var(--malik-white);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--malik-transition);
  padding: 0.25rem;
}
.malik-header__search-btn:hover { opacity: 1; }
/* Hamburger */
.malik-hamburger {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 25px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--malik-black);
}

.malik-hamburger svg {
    position: absolute;
    display: block;
    transition: opacity .3s ease;
}

.malik-hamburger .icon-menu {
    opacity: 1;
}

.malik-hamburger .icon-close {
    opacity: 0;
    pointer-events: none;
}

.malik-hamburger.is-open .icon-menu {
    opacity: 0;
}

.malik-hamburger.is-open .icon-close {
    opacity: 1;
}

/* Menu dropdown — always behind the hamburger, on every screen size, since
   the inline nav (.malik-header__nav) doesn't fit 7 items without clipping
   at the viewport edge on desktop. */
.malik-header__nav {
    display: none;
}

.malik-hamburger {
    display: flex;
}

.malik-mobile-menu {
  position: fixed;
  top: 30px;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(280px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: none;
  z-index: 999;
  padding: 7rem 1.5rem 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: opacity 0.35s, transform 0.35s var(--malik-ease), visibility 0.35s;
}
.malik-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.malik-mobile-menu nav { width: 100%; }
.malik-mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.malik-mobile-nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--malik-black);
  color: var(--malik-white);
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--malik-black);
  border-radius: var(--malik-radius-pill);
  padding: 10px 25px;
  transition: background var(--malik-transition), color var(--malik-transition), border-color var(--malik-transition);
}
.malik-mobile-nav__list a:hover {
  background: var(--malik-white);
  color: var(--malik-black);
  border-color: var(--malik-black);
}

@media (max-width: 900px) {
  .malik-header__inner { padding-inline: var(--malik-container-pad-sm); }
  /* Full-size logo (352x107) overlaps the hamburger's clickable area on
     narrow screens, so taps meant for the menu land on the logo instead. */
  .malik-header__logo { width: 250px; height: 50px; }
  /* Scaled down so it doesn't crowd the hamburger on narrow screens. Kept
     square (unlike the desktop 167x155 box) — Figma's mobile mark (node
     223:1463, file urf7OdkfzsZJfT5OsTkXIU) is a plain 620x620 square crop
     with no vertical trim, so a non-square box here would crop it wrong. */
  .malik-header__mark { width: 120px; height: 70px; 
    /* left: var(--malik-container-pad-sm);  */
    left: 0; 
  }
}

/*  HERO SECTION */
.malik-hero {
  background: var(--malik-white);
  min-height: 810px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}

.malik-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.malik-hero__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.55) 100%); */
}

.malik-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 960px;
  padding: 0 1.5rem;
}

.malik-hero__cell {
  border-radius: var(--malik-radius-pill);
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
}

/* Alternate shapes */
.malik-hero__cell:nth-child(1) { aspect-ratio: 1; border-radius: 50%; }
.malik-hero__cell:nth-child(2) { aspect-ratio: 3/4; border-radius: var(--malik-radius-pill); }
.malik-hero__cell:nth-child(3) { aspect-ratio: 1; border-radius: 50%; margin-top: 3rem; }
.malik-hero__cell:nth-child(4) { aspect-ratio: 3/4; border-radius: var(--malik-radius-pill); margin-top: -3rem; }
.malik-hero__cell:nth-child(5) { aspect-ratio: 1; border-radius: var(--malik-radius-lg); }
.malik-hero__cell:nth-child(6) { aspect-ratio: 3/4; border-radius: var(--malik-radius-pill); }

.malik-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--malik-ease);
}
.malik-hero__cell:hover img { transform: scale(1.04); }

@media (max-width: 768px) {
  /* Below this breakpoint the <source media> swap serves the portrait
     1080×1920 mobile video — size the section to that same aspect
     ratio instead of a flat 100svh so the video is never cropped
     tighter (or looser) than it was cut for. */
  /* No longer needs to clear a fixed header on mobile (see .malik-header's
     own mobile rule) — the header now sits above it in normal flow. */
  .malik-hero { min-height: auto; aspect-ratio: 1080 / 1920; padding-top: 0; }
  .malik-hero__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .malik-hero__cell:nth-child(5),
  .malik-hero__cell:nth-child(6) { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   INTRO LINE
════════════════════════════════════════════════════════════════ */
.malik-intro-line {
  /* top: 31px; */
  background: var(--malik-white);
  padding-block: 113px; /* Figma desktop: gap between this text and the We Are Malik section below it (1087 - 974), used symmetrically top/bottom */
}

.malik-intro-line__text {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem); /* 32px to 48px — desktop only, see mobile override below */
  font-style: Medium;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--malik-black);

}

/* ── Mobile (Figma "homepage mob." page, node 59:1317) ───────────────
   Same 1080-wide/@3x-export mobile reference as .malik-tagline-banner
   (see that block's comment for the full "raw-figma-px / 1080 * 100 =
   vw, no clamp ceiling" rationale) — this heading shares the identical
   80px raw Figma size, landing on the same 7.4074vw figure.
   Text box is 1048px wide inside the 1080px frame (16px inset each
   side = 97.04%) — override .malik-container's generic fixed 24px
   mobile gutter locally so the text spans the Figma-specified width.
   Vertical gap to neighboring sections is NOT symmetric in Figma: 101px
   above (hero video ends at y2258, text starts at y2359) vs. 200px
   below (text ends at y2547, We Are Malik mob. starts at y2747) —
   reproduced as separate top/bottom padding instead of desktop's single
   symmetric 113px value. */
@media (max-width: 768px) {
  .malik-intro-line { padding-top: 9.3519vw; padding-bottom: 18.5185vw; }
  .malik-intro-line .malik-container { padding-inline: 1.4815vw; }
  .malik-intro-line__text { font-size: 7.4074vw; }
}

@media (max-width: 480px) {
  .malik-intro-line { padding-top: 9.3519vw; padding-bottom: 18.5185vw; }
  .malik-intro-line .malik-container { padding-inline: 1.4815vw; }
  .malik-intro-line__text { font-size: 7.4074vw; }
}

@media (max-width: 360px) {
  .malik-intro-line { padding-top: 9.3519vw; padding-bottom: 18.5185vw; }
  .malik-intro-line .malik-container { padding-inline: 1.4815vw; }
  .malik-intro-line__text { font-size: 7.4074vw; }
}

/* ════════════════════════════════════════════════════════════════
   WE ARE MALIK
════════════════════════════════════════════════════════════════ */
.malik-we-are {
  position: relative;
  background: var(--malik-white);
  height: 723px;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* 0.6s = collapse target (matches Figma's 600ms "Back") */
}

/* Expanded: the section itself grows to fill the viewport (true full-screen,
   no leftover white space), pushing the rest of the page down/up as it
   resizes. 0.8s = expand target (matches Figma's 800ms "View more"). */
.malik-we-are.is-expanded {
  height: 100vh;
  transition-duration: 0.8s;
}

/* .malik-container is position:relative but height:auto by default; since its only
   child here (.malik-we-are__box) is absolutely positioned and would otherwise
   collapse it to 0px, pin it to the section's own height. */
.malik-we-are > .malik-container {
  height: 100%;
}

/* Default (untouched, do not change): a 1279×612 rounded box inset 57px/54px
   from the section's top/bottom, exactly matching Figma's "Property 1=Default". */
.malik-we-are__box {
    position: absolute;
    top: 57px;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1279px;
    border-radius: 40px;
    overflow: hidden;
    transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Expanded: box fills its now-100vh-tall section edge-to-edge, breaking out of
   .malik-container's own max-width/padding via a viewport-width value so there's
   no leftover side gutters either — true full width, not just full container. */
.malik-we-are.is-expanded .malik-we-are__box {
  top: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  border-radius: 0px;
  transition-duration: 0.8s;
}

.malik-we-are__box .malik-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 56%;
    transform: scale(1.3);
    transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Expanded state blurs the same video and scales it up slightly so the blur
   has no thin edge — this IS the "full screen background", just the one layer */
.malik-we-are.is-expanded .malik-video-bg {
  filter: blur(15px);
  transform: scale(1.10);
  object-position: 0% 68%;
  transition-duration: 0.8s;
}

.malik-we-are__overlay {
  position: absolute;
  inset: 0;
}

.malik-we-are__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  text-align: center;
  padding: 2rem;
  color: var(--malik-white);
  transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Content spans the box edge-to-edge once expanded (Figma has no side inset here) */
.malik-we-are.is-expanded .malik-we-are__inner {
  padding-inline: 0;
  transition-duration: 0.8s;
}

.malik-we-are__heading {
  font-size: clamp(2rem, 4vw, 3.125rem); /* 3.125rem = 50px, matches Figma at desktop width */
  font-weight: 500;
  line-height: 1.18; /* 59px / 50px ratio from Figma */
  margin-bottom: 118px;
  color: var(--malik-white);
}

.malik-we-are__body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  letter-spacing: 0%;
  text-align: center;
  margin-bottom: 35px;
  max-width: 630px;
  margin-inline: auto;
}

/* wpautop() now generates one <p> per paragraph inside .malik-we-are__body
   (was a single <p> before). A <p> is block-level, so it always starts a new
   line regardless of margin — margin:0 alone still left "Decades of
   science…" forced onto its own line instead of continuing on the same line
   as "…confidence." the way Figma's desktop reference actually wraps it.
   display:inline makes both <p>s flow as one continuous piece of text,
   wrapping exactly like a single paragraph. Mobile's own Figma reference DOES
   show a genuine block-level break with a blank line between them, restored
   in the @media block further down. */
.malik-we-are__body p { display: inline; margin: 0 !important; }

.malik-we-are .malik-btn {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  padding: 10px 25px;
  border-width: 1px;
  border-color: #fff;
}

.malik-we-are__state--default,
.malik-we-are__state--expanded {
  position: absolute;
  left: 0;
  right: 0;
  transition-property: opacity, transform;
  transition-duration: 800ms;
  /* Same duration/easing both ways (View more and Back) — a single variant-
     change reaction, not separate expand/collapse timings. */
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default: a plain dissolve only — top/transform never change, opacity is
   the only property that animates, in either direction.
   Expanded: rests translated below its centered position (top:50% +
   translateY(calc(-50% + 60px))) so it floats UP into place on "View more"
   and floats back DOWN out of place on "Back" — vertical translation only,
   no scale/horizontal movement. */
.malik-we-are__state--default   { top: 224px; opacity: 1; transform: translateY(0); }
.malik-we-are__state--expanded  { top: 50%; opacity: 0; transform: translateY(calc(-50% + 60px)); pointer-events: none; }

.malik-we-are.is-expanded .malik-we-are__state--default  { opacity: 0; transform: translateY(0); pointer-events: none; }
.malik-we-are.is-expanded .malik-we-are__state--expanded { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.malik-we-are__state--expanded .malik-we-are__heading {
  max-width: 630px;
  margin-inline: auto;
  margin-bottom: 54px; /* Figma: heading bottom (186) to item row top (240) */
}

/* Figma's expanded panel (Property 1=Variant3, 1440px frame) lays the 3
   item columns out at 413/414/413px with 20px gaps = 1280px total,
   centered with 80px margins either side. The panel itself stretches
   full-bleed (100vw) once expanded, so without this cap the grid's 1fr
   columns are however wide the real viewport is, wrapping each item's
   text at the wrong point. Pinning to 1280px reproduces Figma's exact
   ~413px column width (and therefore its exact line breaks) at any
   viewport wider than that, matching how the heading above it is
   likewise capped + centered (max-width:630px). */
.malik-we-are__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 20px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 44px;
}

.malik-we-are__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.malik-we-are__item:nth-child(4) {
  grid-column: 1 / -1;
  max-width: 414px;
  margin-inline: auto;
}

.malik-we-are__item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #fff;
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  margin-bottom: 20px;
}

.malik-we-are__item-text {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  line-height: 22px;
  /* width: 89%; */
}

@media (max-width: 768px) {
  .malik-we-are__items { grid-template-columns: 1fr; width: 100%; margin-inline: 0; gap: 3.71vw; /* 40px, matches item→item rhythm */ }
  .malik-we-are__item:nth-child(4) { grid-column: auto; max-width: none; }
  /* Mobile's own Figma reference ("we are malik mob.", Variant3) breaks
     item 4 at the same "...not trial and error." / "Build one..." point as
     desktop, so the forced <br> from section-we-are-malik.php stays visible
     here too — it just reflows differently around it at this narrower,
     vw-scaled column width. */
}

@media (max-width: 768px) {
  /* Figma's mobile frame ("we are malik mob."): 1079×1800, box 1048×1785,
     border-radius:100. Uses the SAME crossfade + full-screen-expand mechanism
     as desktop (no more instant-swap fallback) — only the collapsed card's own
     proportions differ here, taken from Figma. All sizes/gaps below are pure
     vw-scaled against that 1079px reference width, so they hold proportion down to
     real phone widths instead of overflowing a 1079px design at 400px screens.

     The expanded state (Property 1=Variant3) has its own heading (64px, not
     80px) and its own gaps — items and the Back button reuse the same 30px
     circle→text / 40px item→item rhythm and button style confirmed in both
     variants, but the heading→items (200px) and last-item→button (80px) gaps
     are each variant's own numbers, not carried over from the default card.

     One structural difference from desktop: desktop's collapsed box can stay
     position:absolute because its 1279×612 box is pinned to a known-fixed
     723px section height (accurate at the reference width). Mobile's box is a
     tall 1048:1785 portrait card that has to stay genuinely fluid across a
     320–480px range of real phone widths, so a single fixed section height
     doesn't work here — the collapsed box goes back to position:relative so
     the section's height is just "however tall the aspect-ratio box needs to
     be," same as web layout normally works. That means the box SIZE morph
     (relative → absolute, aspect-ratio-driven → 100vh) can't be a smooth
     interpolation on mobile the way it is on desktop — position isn't an
     animatable property — but the text crossfade and background blur inside
     it still animate exactly as they do on desktop. */

  .malik-we-are { height: auto; padding-top: 0; padding-bottom: 0; }
  .malik-we-are.is-expanded { height: 100vh; }

  .malik-we-are__box {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    /* max-width: 1048px; */
    max-width: 1350px;
    aspect-ratio: 1048 / 1785;
    margin-inline: auto;
    border-radius: 9.27vw; /* 100px at the 1079px reference — pure vw, no floor, so it stays proportional at every phone width instead of pinning to a fixed px below some breakpoint */
    transition: none;
  }
  .malik-we-are.is-expanded .malik-we-are__box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    aspect-ratio: auto;
    border-radius: 0;
  }

  /* Figma's mobile body text (1048px) spans the box edge-to-edge, so the
     collapsed card's own side padding needs to be tighter than the base
     2rem — expanded already zeroes it out via the existing unconditional
     .is-expanded rule below. */
  .malik-we-are__inner { padding-inline: 1rem; }

  /* All the vw values below are pure (no clamp floor) — deliberately: every
     one I'd clamped with a "readability minimum" turned out to cross over to
     that fixed floor somewhere between 324px and 598px viewport width, i.e.
     on almost every real phone (iPhone SE/12/13/14, most Android), silently
     replacing the proportional Figma value with an arbitrary fixed px and
     breaking the match. Pure vw keeps every one of these exactly
     proportional to Figma's 1079px-wide reference at any width down to a
     320px phone — text gets small on the smallest phones, same as Figma's
     own fluid scaling would, rather than snapping to a floor I picked. */

  .malik-we-are__heading {
    font-size: 7.41vw; /* 80px */
    line-height: 1.175; /* 94/80 */
    margin-bottom: 61.07vw; /* Figma: 659px gap, heading bottom to body top */
  }

  .malik-we-are__body,
  .malik-we-are .malik-btn,
  .malik-we-are__item-num,
  .malik-we-are__item-text {
    font-size: 3.71vw; /* 40px */
  }
  .malik-we-are__body {
    line-height: 1.175; /* 47/40 */
    max-width: 100%;
    margin-bottom: 7.41vw; /* Figma: 80px gap, body bottom to button top */
  }
  /* Mobile-only: Figma's mobile reference shows a genuine block-level break
     with a blank line between the two paragraphs (unlike desktop's
     continuous inline flow) — back to display:block so each one starts on
     its own line, plus 1.175em (one full line-height, per the
     282px-total-height math from that reference) for the visible gap. */
  .malik-we-are__body p { display: block !important; }
  .malik-we-are__body p + p { margin-top: 1.175em !important; }

  .malik-we-are .malik-btn {
    padding: 0.93vw 5.56vw; /* 10px 60px */
    border-width: max(1px, 0.19vw); /* 2px — floor is a rendering necessity (sub-1px borders aren't reliably drawn), not a proportion override */
  }

  .malik-we-are__state--default { top: 15.32%; } /* Figma: 273.5px / 1785px box height */

  /* Property 1=Variant3 gave its own heading (64px, not 80px) and real gaps —
     replaces the item-rhythm estimate from before. */
  .malik-we-are__state--expanded .malik-we-are__heading {
    font-size: 5.93vw; /* 64px */
    line-height: 1.172; /* 75/64 */
    max-width: 84.7%; /* 914px / 1080px frame */
    margin-bottom: 18.54vw; /* Figma: 200px gap, heading bottom to first item */
  }

  .malik-we-are__items {
    margin-bottom: 7.41vw; /* Figma: 80px gap, last item to Back button */
  }

  .malik-we-are__item-num {
    width: 6.02vw; /* 65px */
    height: 6.02vw;
    margin-bottom: 2.78vw; /* 30px, circle to text */
  }
}

/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════════════════════ */
.malik-testimonials {
  background: var(--malik-white);
  padding-block: var(--malik-section-py);
}

.malik-testimonials__heading {
  /* text-align: center;
  margin-bottom: 3rem;
  font-weight: 500;
  font-style: Medium;
  font-size: clamp(2rem, 4.5vw, 50px);
  line-height: 100%;
  letter-spacing: 0%; */
  width: min(630px, 100%);
  margin: 0 auto 3rem;
  text-align: center;

  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 50px);
  line-height: 100%;
  letter-spacing: 0%;
}

/* Carousel — horizontal scroll-snap of photo+quote tile units */
.malik-testimonials__track {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.malik-testimonials__track::-webkit-scrollbar { display: none; }

.malik-testimonials .malik-btn {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
}

.malik-testimonial-unit {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.malik-testimonial-unit__tiles {
  display: flex;
  gap: 8px;
  height: 386px;
}

.malik-testimonial-tile {
  height: 386px;
  border-radius: 26px;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  overflow: hidden;
  flex-shrink: 0;
}

.malik-testimonial-tile--photo {
  width: 183px;
  position: relative;
}
.malik-testimonial-tile--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One decorative shape per photo tile (circle on some, square on others),
   centered in the middle — matching the Ellipse/Rectangle stickers in the
   Figma comp. */
.malik-testimonial-tile__shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: var(--malik-white);
  pointer-events: none;
  z-index: 1;
}
.malik-testimonial-tile__shape--circle { border-radius: 50%; }
.malik-testimonial-tile__shape--square { border-radius: 3px; }

/* Figma pins quote/divider/caption to fixed offsets from the card's own top
   and bottom (56px top, 13px bottom, 115px quote→divider, 30px divider→caption)
   rather than centering them as one group — centering made every card's
   divider/caption drift depending on how long that card's quote was. */
.malik-testimonial-tile--quote {
  width: 285px;
  padding: 56px 0 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.malik-testimonial-tile--quote blockquote {
  font-family: var(--malik-font-ubuntu);
  font-size: 16px;
  line-height: 100%;
  font-weight: 400;
  width: 256px;
  margin-bottom: 115px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
}
.divider {
  width: 256px;
  height: 1px;
  background: rgba(0, 0, 0, 0.21); /* Figma "Line 9": border rgba(0,0,0,0.21) */
  flex-shrink: 0;
  margin: 0 0 30px;
}
.malik-testimonial-unit__caption {
  flex-shrink: 0;
  width: 256px;
  text-align: center;
}
.malik-testimonial-unit__name { font-weight: 600; font-size: 0.8rem; }
/* Figma: Ubuntu Mono 400, 14px/100%, 0 letter-spacing, black. `vertical-align`/
   `horizontal-align` did nothing here (vertical-align only affects inline/
   table-cell boxes; horizontal-align isn't a real CSS property) — centering
   already comes from .malik-testimonial-unit__caption's text-align:center. */
.malik-testimonial-unit__role {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
}

@media (max-width: 600px) {
  .malik-testimonials > .malik-container { padding-inline: 0; }
  .malik-testimonial-unit__tiles { height: 300px; }
  .malik-testimonial-tile { height: 300px; }
  /* Figma gives photo tiles (Rectangle 212) a subtle 26px radius but quote
     cards (Rectangle 209) a much rounder ~58px radius — distinct shapes,
     not the same flat corner shared by both as before. */
  .malik-testimonial-tile--photo { width: 140px; border-radius: 18px; }
  /* The 56/115/30/13px fixed offsets above were measured off the 386px-tall
     desktop card and would overflow this smaller 300px mobile card (no
     Figma numbers for a mobile version of this component were given) — fall
     back to centering the whole quote+divider+caption group as one block,
     which is what this used to do everywhere before that fix. */
  .malik-testimonial-tile--quote {
    width: 220px;
    padding: 1.25rem;
    border-radius: 32px;
    justify-content: center;
  }
  .malik-testimonial-tile--quote blockquote { width: auto; margin-bottom: 0; }
  .malik-testimonial-tile--quote .divider { margin: 1rem 0; }
  .malik-testimonial-unit__caption { width: auto; }
}

/* ── Contact form modal ────────────────────────────────────────── */
/* Open/close motion: a centered zoom + fade (opacity, scale from its own
   center), NOT a slide-up-from-below drawer — confirmed against Figma's
   actual prototype playback, which reads as the panel appearing/growing
   from center, not sliding up from off-screen (an earlier translateY(100%)
   version of this rule looked like a bottom-sheet slide and was wrong).
   Figma's own Prototype panel (checked directly on the "Contact us"/close
   button reactions on both the "malik academy mob." 59:1888→Variant2 and
   its reverse 59:1926→Default interactions — node ids will differ per
   trigger section but the reaction spec is identical) reads: Smart animate,
   Easing "Ease out", Duration 300ms, the SAME in both directions — not the
   asymmetric 800ms/1000ms dual-curve split previously assumed here by
   analogy with the courses/services/values panels' own (separately
   verified) Smart-Animate curves. Those panels have their own real keyframe
   data backing that split; this modal's actual reaction does not, so it
   uses cubic-bezier(0, 0, 0.58, 1) (== CSS `ease-out`, Figma's "Ease out"
   preset) at 300ms for every animated property, open and close alike.
   Only .__backdrop and .__panel-wrap carry visible animation — the
   container itself never appears to move or fade, it only gates
   visibility/interactivity. */
.malik-contact-modal {
  /* Section-scoped overlay, not a viewport-fixed modal: absolute against the
     nearest positioned ancestor, .malik-testimonials itself (position:relative
     comes from the shared .malik-section base rule), so it expands only
     within that section's own box, scrolls away with it, and never covers
     the rest of the page — matches the Figma prototype, where the Contact
     Form belongs to the Testimonials section rather than being a global
     page overlay. .malik-contact-modal--global (footer.php) overrides this
     to position:fixed, since that instance IS meant to be a true full-screen
     page overlay for every other section's CTA. */
  position: absolute;
  inset: 0;
  /* Below .malik-header's z-index:1000 (fixed) — .malik-testimonials has no
     z-index of its own, so this compares directly against the header's
     stack rather than being scoped to a local one; must stay lower so the
     header/logo always paints above the modal when the two visually overlap,
     instead of the modal covering the logo. .malik-contact-modal--global
     overrides this higher, since that instance is meant to cover the header
     too. */
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  /* Delayed visibility instead of transitioning opacity+visibility on the
     container: switches to hidden only once the 300ms close animation has
     actually finished, so nothing is clickable mid-fade-out; switches to
     visible immediately on open via the transition-delay:0 override below. */
  transition: visibility 0s linear .3s;
}
.malik-contact-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* The global modal (footer.php, opened by every CTA outside Testimonials) is
   a true full-screen page overlay, unlike the section instance above (which
   stays position:absolute, scoped to .malik-testimonials's own box, and
   scrolls away with the page along with it — confirmed against the Figma
   "clients" frame, where the Contact Form is a state of the Testimonials
   frame itself, not a separate global overlay) — and it sits above the
   header too, unlike the section instance (z-index:900 above) which stays
   below it. */
.malik-contact-modal--global {
  position: fixed;
  z-index: 1100; /* above .malik-header's fixed z-index:1000 */
}

/* Section instance (not --global) stays position:absolute + inset:0 (base
   rule above) rather than position:fixed: briefly tried fixed (clamped to
   the section's on-screen box via JS) to route around a real bug — with
   align-items:center centering the panel across the section's FULL height,
   opening from a trigger near the section's bottom could in theory center
   the panel above the current scroll position, pushing the close button
   off-screen (reproduced with Playwright at 1440x900/390x844/820x1180) — but
   fixed positioning means the modal no longer scrolls away with the section
   if the page is scrolled while it's open, which contradicts the Figma
   reference (the Contact Form is baked into the Testimonials frame itself).
   Mitigated instead in JS: initContactModal() scrolls the panel into view on
   open (see malik-main.js), so even if centering lands outside the current
   viewport, opening the modal brings it on-screen without changing how it's
   positioned. */

/* Figma "Rectangle 234": animates both the blur AND the wash's own opacity
   together — rgba(255,255,255,0) → rgba(255,255,255,.12) — not just blur.
   inset:0 here is relative to .malik-contact-modal (the section's own box),
   so the blur/wash never extends past the Testimonials section. */
.malik-contact-modal__backdrop {
  position: absolute;
  inset: 0;
  /* Forces its own compositing layer so the blur keeps recomputing on every
     scroll frame instead of freezing/dropping out mid-scroll — a known
     browser quirk where backdrop-filter on an element inside a scrolling
     page stops repainting correctly without this hint. */
  will-change: backdrop-filter;
  transform: translateZ(0);
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .3s cubic-bezier(0, 0, 0.58, 1),
              backdrop-filter .3s cubic-bezier(0, 0, 0.58, 1),
              -webkit-backdrop-filter .3s cubic-bezier(0, 0, 0.58, 1);
}
.malik-contact-modal.is-open .malik-contact-modal__backdrop {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(26.55px);
  -webkit-backdrop-filter: blur(26.55px);
  /* top: 70px;
  bottom: 70px; */
}
.malik-services .malik-contact-modal.is-open .malik-contact-modal__backdrop {
  top: 40px;
  bottom: 40px;
}
.malik-testimonials .malik-contact-modal.is-open .malik-contact-modal__backdrop {
  top: 70px;
  bottom: 70px;
}


.malik-contact-modal__panel-wrap {
  position: relative;
  width: 100%;
  max-width: 414px;
  margin: 1rem auto;
  opacity: 0;
  /* Floats up from the section's own bottom edge into its centered resting
     spot on open, and back down to the bottom on close — translateY(100%)
     shifts it a full panel-height below rest, read against the panel's own
     box since percentage transforms resolve against the element's own
     reference box, not the section's. */
  transform: translateY(100%);
  transition: opacity .8s cubic-bezier(0, 0, 0.58, 1),
              transform .8s cubic-bezier(0, 0, 0.58, 1);
}
.malik-contact-modal.is-open .malik-contact-modal__panel-wrap {
  opacity: 1;
  transform: translateY(0);
}

/* Figma "Rectangle 229": 414×585, rgba(23,23,23,0.47) [same color as the old
   #17171778 hex+alpha, just written as rgba], border-radius 70 (was 26).
   Padding: 51px top (heading's own offset from the panel top), 25px sides
   (content width 364 centered in the 414-wide panel). Bottom padding is a
   reasonable approximation, not a Figma-exact number — see the CSS-below note
   on why per-field vertical rhythm can't be pixel-locked to Figma numbers.
   No animated properties of its own — .__panel-wrap's transform/opacity
   already carries this along with the close button beside it. */
.malik-contact-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 90vh;
  /* max-height: 70vh; */
  overflow-y: auto;
  background: rgba(23, 23, 23, 0.47);
  border-radius: 70px;
  padding: 51px 25px 40px;
  color: var(--malik-white);
  /* Explicit, not left-by-default: whichever section this instance lives in
     may itself set text-align:center (.malik-services, ancestor of the
     Academy CTA's modal — unlike .malik-testimonials, which doesn't), and
     that inherits straight through onto this panel. Harmless for the
     block-level input/textarea fields, but Fluent Forms' own stylesheet
     gives <label> a higher-specificity `display:inline-block`
     (.ff-default .ff-el-input--label label, in fluentform-public-default.css)
     that beats this file's `display:block` on `.malik-contact-modal__panel
     label` below — so as an inline-level box, an inherited center here was
     centering the field labels instead of leaving them flush with the
     (block-level, unaffected) input/textarea below. .__heading and
     .__notice keep their own explicit text-align:center, so they're
     unaffected by resetting it here. */
  text-align: left;
}
.fluentform .ff_t_c {
  margin: 9px !important;
  padding: 2px 5px 0 0 !important;
}
.fluentform .ff-el-group {
  margin-bottom: 10px  !important;
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  display: none;
}
/* Figma "buttons" (the X): 65.41×36 pill, NOT the old 2rem circle, floating
   outside the panel's own top-right corner (its left edge sits ~43px past
   the panel's right edge) — hence being a sibling of .malik-contact-modal__panel
   rather than a child of it, so the panel's own overflow-y:auto can't clip it.
   The X itself is drawn as two rotated lines (Figma "Line 4"/"Line 5",
   19.8px, 1px, ±45deg) instead of an HTML "×" glyph, to match exactly. */
.malik-contact-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 43px); /* was "right: -43px", which positions the RIGHT edge 43px past the panel's right edge — off by the button's own width. This instead places the button's LEFT edge 43px past the panel's right edge, matching Figma's Left:970 (panel Left:513, panel width 414 → 970 − 513 − 414 = 43) exactly. */
  z-index: 2;
  width: 65.41px;
  height: 36px;
  border-radius: 30px;
  border: none;
  background: rgba(0, 0, 0, 0.47);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
  padding: 0;
}
.malik-contact-modal__close::before,
.malik-contact-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19.8px;
  height: 1px;
  background: #fff;
}
.malik-contact-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.malik-contact-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* Desktop draws the X as two hairlines above; Figma's mobile "clients mob."
   close button (node 59:1881) is instead a distinct bolder glyph exported as
   its own asset — swap to that icon at the mobile breakpoint below rather
   than approximating its stroke weight with the hairline pair. */
.malik-contact-modal__close-icon { display: none; }


.malik-contact-modal__heading {
  text-align: center;
  margin-bottom: 30px; /* Figma: heading bottom to first field label top */
  color: var(--malik-white);
  font-family: 'Work Sans', var(--malik-font-sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0%;
}

.malik-contact-modal__notice {
  font-size: 0.85rem;
  opacity: 0.75;
  text-align: center;
}

/* Generic styling so any form plugin's markup (Fluent Forms) fits the design.
   Figma gives exact numbers for the two known fields (email input, message
   textarea) but the plugin's actual field markup/count is dynamic, so the
   vertical rhythm here (label→field, field→field) uses the ~10px/~20px
   Figma averaged those specific fields to, rather than a value that can only
   ever be exactly right for one specific field. */
.malik-contact-modal__panel label {
  display: block;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--malik-white);
  margin-bottom: 10px;
}
.malik-contact-modal__panel input[type="text"],
.malik-contact-modal__panel input[type="email"],
.malik-contact-modal__panel input[type="tel"],
.malik-contact-modal__panel textarea,
.malik-contact-modal__panel select {
  width: 100%;
  background: #F9F9F9;
  color: var(--malik-black);
  border: none;
  border-radius: 999px; /* Figma email input: 67.3px on a 36px-tall box = a full pill at any height */
  padding: 0.75rem 1rem;
  font-family: var(--malik-font-ubuntu);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.malik-contact-modal__panel textarea {
  min-height: 178px;
  border-radius: 18px; /* Figma message box: 18px, not a pill — too tall for that to read as one */
  resize: vertical;
}
/* Figma checkbox: 28.43×27.27, border 1.16px solid white, radius 4.64.
   :has() targets whichever field wraps a checkbox in the plugin's markup and
   lays it out as a row (checkbox + label side by side) instead of the
   default stacked block layout, matching Figma's smaller 14px/117% label. */
/* Fluent Forms loads its own default stylesheet (fluentform-public-default.css)
   which also targets .ff-el-form-check-label etc. — !important here is
   deliberate, to guarantee this wins over that rather than fighting its
   specificity/load-order on every property. */
.malik-contact-modal__panel label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  text-transform: none !important;
  font-size: 14px !important;
  line-height: 117.32% !important;
  margin-bottom: 0 !important;
}
.malik-contact-modal__panel input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28.43px;
  height: 27.27px;
  flex-shrink: 0;
  margin: 0;
  background: transparent;
  border: 1.16px solid #fff;
  border-radius: 4.64px;
  cursor: pointer;
}
/* Native checkboxes render their own check mark via appearance, which
   appearance:none also strips — draw a simple one back in for the checked
   state so the control still gives feedback when ticked. */
.malik-contact-modal__panel input[type="checkbox"]:checked {
  background: #fff;
}
.malik-contact-modal__panel input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  width: 60%;
  height: 30%;
  margin: 26% auto 0;
  border-left: 2px solid #171717;
  border-bottom: 2px solid #171717;
  transform: rotate(-45deg);
}
/* !important throughout: Fluent Forms' own default stylesheet
   (fluentform-public-default.css) also styles .ff-btn-submit — and this
   particular button has "wpf_has_custom_css", meaning it may carry
   admin-configured colors from Fluent's own style editor too. Without
   !important here, its hover state was landing on white-on-white (or
   equivalent), making the label disappear entirely on hover. */
.malik-contact-modal__panel button[type="submit"],
.malik-contact-modal__panel input[type="submit"] {
  display: block !important;
  margin: 20px auto 0 !important;
  background: transparent !important;
  color: var(--malik-white) !important;
  border: 1px solid #fff !important;
  border-radius: 30px !important;
  padding: 10px 25px !important;
  font-family: var(--malik-font-ubuntu) !important;
  font-size: 19px !important;
  line-height: 19px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}
/* No hover effect, matching the rest of the site — held equal to the resting
   state (rather than just deleting this rule) because Fluent Forms' own
   default stylesheet has its own hover styling for this button that would
   otherwise reassert itself. */
.malik-contact-modal__panel button[type="submit"]:hover,
.malik-contact-modal__panel input[type="submit"]:hover {
  background: transparent !important;
  color: var(--malik-white) !important;
}

@media (max-width: 768px) {
  /* Figma's mobile modal ("Property 1=Variant2", Rectangle 229: 854×1206.74)
     is a uniform 2.0628× scale of the desktop one (854/414 = 1206.74/585 =
     2.0628 to 4 decimal places) against a ~1076px-wide mobile reference frame
     (panel Left:111, so 111×2+854=1076) — except border-radius, which was
     hand-set to a rounder 100 rather than scaled (70×2.0628 would've been
     ~144.4, not 100). Every value below is that same desktop px × 2.0628,
     expressed as vw against the 1076px reference (desktop_px × 0.19181) so it
     stays proportional on real 320–480px phones instead of just being a
     giant fixed-px modal — same pure-vw approach (no clamp floor) as the We
     Are Malik mobile section, since floors there previously broke
     proportionality below their crossover width. */

  .malik-contact-modal__panel-wrap { max-width: 79.37vw; /* 854/1076 */ }

  .malik-contact-modal__panel {
    border-radius: 9.29vw; /* 100px, Figma's own mobile value, not derived */
    padding: 9.78vw 4.80vw 7.67vw; /* 51 25 40 × 0.19181 */
  }

  /* The desktop rule floats this outside the panel's top-right corner
     (left: calc(100% + 43px)) — there's nowhere to float to on a phone
     where the panel already spans most of the viewport width, so this pulls
     it fully inside instead. Figma's own mobile close button (node 59:1881,
     51.1055×48.7617px against the 1076px-wide mobile reference frame, left
     840 / top 445 against a panel at left 111 / top 357.41 / width 854) sits
     6.87vw in from the panel's right edge and 8.14vw down from its top edge
     — read directly off that node rather than re-deriving it from the
     desktop pill's own (unrelated) size and position. */
  .malik-contact-modal__close {
    left: auto;
    top: 8.14vw;
    right: 6.87vw;
    width: 4.75vw;   /* 51.1055px */
    height: 4.53vw;  /* 48.7617px */
    border-radius: 0;
    background: transparent; /* Figma's mobile X has no pill behind it, unlike desktop's */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .malik-contact-modal__close::before,
  .malik-contact-modal__close::after {
    display: none; /* mobile uses Figma's own exported icon (below) instead of the desktop hairline approximation */
  }
  .malik-contact-modal__close-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .malik-contact-modal__heading {
    font-size: 6.90vw;   /* 36px */
    line-height: 8.06vw; /* 42px */
    margin-bottom: 5.75vw; /* 30px */
  }

  .malik-contact-modal__panel label {
    font-size: 3.64vw;   /* 19px */
    line-height: 4.22vw; /* 22px */
    margin-bottom: 1.92vw; /* 10px */
  }
  .malik-contact-modal__panel input[type="text"],
  .malik-contact-modal__panel input[type="email"],
  .malik-contact-modal__panel input[type="tel"],
  .malik-contact-modal__panel textarea,
  .malik-contact-modal__panel select {
    padding: 2.30vw 3.07vw; /* 12px 16px */
    font-size: 2.76vw; /* 14.4px */
    margin-bottom: 3.84vw; /* 20px */
  }
  .malik-contact-modal__panel textarea {
    min-height: 34.14vw; /* 178px */
    border-radius: 3.45vw; /* 18px */
  }

  .malik-contact-modal__panel label:has(input[type="checkbox"]) {
    gap: 2.11vw !important; /* 11px */
    font-size: 2.69vw !important; /* 14px */
  }
  .malik-contact-modal__panel input[type="checkbox"] {
    width: 5.45vw;  /* 28.43px */
    height: 5.23vw; /* 27.27px */
    border-width: max(1px, 0.22vw); /* 1.16px */
    border-radius: 0.89vw; /* 4.64px */
  }
  .malik-contact-modal__panel input[type="checkbox"]:checked::after {
    border-left-width: max(1px, 0.38vw); /* 2px */
    border-bottom-width: max(1px, 0.38vw);
  }

  .malik-contact-modal__panel button[type="submit"],
  .malik-contact-modal__panel input[type="submit"] {
    margin-top: 3.84vw !important; /* 20px */
    border-width: max(1px, 0.19vw) !important; /* 1px */
    border-radius: 5.75vw !important; /* 30px */
    padding: 1.92vw 4.80vw !important; /* 10px 25px */
    font-size: 3.64vw !important; /* 19px */
    line-height: 3.64vw !important; /* 19px */
  }
}

/* ════════════════════════════════════════════════════════════════
   SERVICES SECTION
════════════════════════════════════════════════════════════════ */
.malik-services {
  /* Figma specs this section's background as #FEFBE8 explicitly (both
     desktop and mobile dumps) — the sitewide --malik-cream token is
     #f5f0e6, a close but NOT exact match, and it's shared by many other
     unrelated rules/sections, so it's overridden here with the literal
     value rather than touched globally. This is what shows through in the
     empty space above/below the bg video (which doesn't cover the full
     section height), so it needs to be pixel-exact for that gap to read
     as seamless, not just "close enough". */
  background: #FEFBE8;
  /* No section-level padding-block here: the Figma frame is a self-contained
     810px box whose own internal offsets (heading top:50px, footer bottom
     space after the button) already are the full intended spacing. Adding
     the generic --malik-section-py on top of that double-counted it, pushing
     the heading ~160px lower than Figma and stretching the bg video past
     its 744px height to fill the inflated box. */
  padding-block: 0;
  text-align: center;
  min-height: 810px;
  /* Figma's prototype uses "Smart animate / Gentle / 1000ms" on every
     screen-to-screen interaction in this widget (View more, Back, the
     Services<->Academy arrows, opening/closing the detail card). "Gentle"
     here means slow acceleration AND slow deceleration (symmetric ease-
     in-out) — cubic-bezier(0.22,1,0.36,1) is a fast-OUT curve that front-
     loads ~90% of the motion into the first ~150ms of a 1000ms transition,
     which reads as an near-instant snap rather than a smooth 1s morph.
     cubic-bezier(0.45,0,0.55,1) is a proper symmetric ease-in-out with no
     bounce/overshoot, spreading the motion evenly across the full second. */
  --malik-gentle-duration: 1000ms;
  --malik-gentle-ease: cubic-bezier(0.45, 0, 0.55, 1);
  --malik-gentle: var(--malik-gentle-duration) var(--malik-gentle-ease);
  /* The row of circles/tabs/caption/footer need to be fully gone well before
     the panel finishes its 1000ms width morph, or they visibly clip against
     the narrowing panel's own edges mid-transition instead of "softly fading
     into the background" first. */
  --malik-gentle-fast: 500ms var(--malik-gentle-ease);
}

/* Used only on a detached, invisible clone of the arc screen (see
   flyTitle/measureRectInState in malik-main.js) so its target-state classes
   can be applied and measured synchronously with zero animation, without
   ever touching the real, currently-animating panel. */
.malik-no-anim,
.malik-no-anim * {
  transition: none !important;
}

/* This div is a sibling of .malik-container (not nested inside it), so it's
   positioned against the full-bleed <section>, not the 1444px column — left:0
   alone would let it stretch/bleed past Figma's 1444px frame width on any
   viewport wider than that. Center it at the same 1444px reference instead.
   Covers the section's full 810px height/1444px width (not just the raw
   744px asset height) so it reaches every edge of the card. */
.malik-services__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* Safety net matching the section's own #FEFBE8 — guards against any
     transient black/transparent flash from the <video>/<img> before it
     loads, so the gap above/below it (mobile: the video is only
     115.09vw tall inside a 177.78vw section) never shows the wrong color
     even for a frame. */
  background: #FEFBE8;
  transition: transform var(--malik-gentle), opacity var(--malik-gentle);
}
/* Subtly recedes (shifts up, dims slightly) while a detail is open — "the
   large background graphic should subtly shift upward and become less
   dominant... without disappearing abruptly." :has() reaches this bg layer
   from the detail state even though it's a sibling of .malik-container,
   not a descendant of the arc screen. */
.malik-services:has(.malik-services__screen[data-services-screen="arc"].is-blurred) .malik-services__bg {
  transform: translateX(-50%) translateY(-28px);
  opacity: 0.55;
}

.malik-services .malik-container {
  z-index: 1;
}

.malik-services__heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: 50px;
  line-height: 59px;
  text-align: center;
}

/* Dot matrix animation */
.malik-services__dots {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  margin: 0 auto 3rem;
  position: relative;
  background: radial-gradient(circle at center, rgba(107, 122, 58, 0.15) 0%, transparent 70%);
}

.malik-services__dots-canvas {
  position: absolute;
  inset: 0;
}

.malik-services__intro {
  font-family: var(--malik-font-ubuntu);
  max-width: 796px;
  margin-inline: auto;
  font-size: 19px;
  line-height: 22px;
  margin-top: 506px;
  margin-bottom: 27px;
  text-align: center;
}

/* Forced break (injected in section-services.php) matching Figma's mobile
   5-line wrap of the intro copy (node 59:2318) - desktop's own natural
   reflow already matches Figma there, so the break is suppressed above the
   widest mobile tier (max-width: 1024px, see below). */
@media (min-width: 1025px) {
  .malik-services__intro-break { display: none; }
}

/* Buttons (View more / Back / academy CTA) — Figma uses a lighter pill
   than the sitewide .malik-btn default (Ubuntu Mono 19px, 1px border,
   10px/25px padding, fully round) */
.malik-services .malik-btn--outline {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  line-height: 19px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  height: 36px;
  padding: 10px 25px;
  border-width: 1px;
  border-radius: 30px;
}
/* Back and the Academy CTA stay static on hover — no invert, no lift. Width
   DOES transition though: both buttons share one footer slot (see the
   "same fixed footer slot" comment below), and each mirrors the other's
   width for whichever state it *isn't* naturally in, so switching tabs reads
   as one button morphing width (90px <-> 451px) while its label crossfades,
   rather than two unrelated buttons swapping. */
.malik-services__back .malik-btn--outline,
.malik-arc-page[data-arc-page="academy"] > .malik-text-center .malik-btn--outline {
  transition: background 0s, color 0s, transform 0s, width var(--malik-gentle);
}
.malik-services__back .malik-btn--outline:hover,
.malik-arc-page[data-arc-page="academy"] > .malik-text-center .malik-btn--outline:hover {
  background: transparent;
  color: var(--malik-black);
  transform: none;
}
.malik-services__back .malik-btn--outline {
  width: 90px;
}
.malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
  width: 90px;
  max-width: 100%;
}
.malik-services__screen[data-active-page="academy"] .malik-services__back .malik-btn--outline,
.malik-services__screen[data-active-page="academy"] .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
  width: 451px;
}

/* Multi-screen app: intro <-> arc crossfade (Figma: Smart animate / Gentle /
   1000ms on the View more / Back interactions). Both screens are stacked via
   position:absolute so they can fade over one another instead of the old
   instant display:none/block cut; .malik-services__app reserves the frame's
   full 810px height so nothing jumps as the active one changes. */
.malik-services__app { position: relative; min-height: 810px; }
.malik-services__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
  transform-origin: center;
  transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}
.malik-services__screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity var(--malik-gentle), transform var(--malik-gentle);
}
.malik-services__screen[data-services-screen="intro"] {
  padding-top: 50px;
  padding-bottom: 66px;
}
.malik-services__screen[data-services-screen="arc"] {
  /* This selector's higher specificity was overriding the base rule's
     position:absolute back to relative — meaning even while inactive
     (opacity:0) this screen stayed in normal flow, and its child
     .malik-services__tabs (margin-top:99px) collapsed straight through it
     (no padding/border in between) and shoved .malik-container down by
     99px inside the section. Must stay absolute like its sibling; right:0
     is needed alongside the base rule's left:0 for margin:auto to still
     center the fixed 1204px width horizontally. */
  position: absolute;
  right: 0;
  width: 1204px;
  max-width: 100%;
  height: 699px;
  margin: 55px auto 56px;
  border-radius: 40px;
  padding: 0;
  /* No overflow:hidden here — the close button sits deliberately OUTSIDE
     this panel's right edge (Figma), and the row of circles already fades
     out (500ms, .malik-arc-row) well before the 1000ms width morph would
     otherwise clip it, so nothing relies on clipping at this box. */
  background: rgba(160, 148, 168, 0.1);
  backdrop-filter: blur(33.15px);
  -webkit-backdrop-filter: blur(33.15px);
  /* This is the one element Figma's "home (services)" and "Variant4" frames
     share (same glass panel, just narrower in the detail state) — animating
     its own width is what makes the transition read as the card morphing in
     place, not a separate popup appearing over it.
     transition is a shorthand: declaring only "width" here would silently
     REPLACE (not merge with) the base .malik-services__screen rule's own
     opacity/transform/visibility transition for this specific element (a
     more specific selector's shorthand always wins outright) — which is
     exactly what broke the View More/Back crossfade: the arc screen was
     snapping straight to opacity:1 with zero transition instead of fading
     in over 1000ms. Every property this element needs to transition has to
     be listed together in the one place. */
  transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration), width var(--malik-gentle);
}
/* Without this, opening reused the rule above verbatim: its unconditional
   "visibility 0s linear var(--malik-gentle-duration)" delay (needed so the
   panel stays rendered while fading OUT on close) also applied when going
   the other way, holding visibility:hidden for the whole fade-in and only
   flipping to visible right as opacity/scale finished — the glass card and
   its content popped in instead of fading. Opening needs visibility to flip
   immediately so the animating opacity/transform/width are actually
   rendered throughout; closing still falls back to the rule above. */
.malik-services__screen[data-services-screen="arc"].is-active {
  transition: opacity var(--malik-gentle), transform var(--malik-gentle), width var(--malik-gentle);
}
/* Narrows to match Figma's Variant4 "Individual coaching" panel (630px vs
   1204px), same height/top. NOT a purely symmetric shrink-toward-centre
   though: Figma's Variant4 "services" frame sits at local x:417, while
   margin:auto centering a 630px box in the 1444px container gives 407 —
   the real design lands 10px further right than pure centering. Nudging
   with translateX (rather than fighting the margin:auto centering with an
   explicit left/calc) keeps this additive and animatable via the existing
   `transform` transition below without disturbing the open state's centering. */
.malik-services__screen[data-services-screen="arc"].is-blurred {
  width: 630px;
  transform: translateX(10px);
}

/* Tabs (Services / Malik Academy) — the pair keeps a fixed gap and
   slides as a unit so whichever tab is active lands at centre
   (offset computed in JS, see initArcPaging) — synced with arrow paging */
.malik-services__tabs {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 60px;
  margin: 99px 0 0;
  transition: transform var(--malik-gentle), opacity var(--malik-gentle-fast), visibility 0s linear 500ms;
}
.malik-services__tab {
  background: none;
  border: none;
  font-family: var(--malik-font-sans);
  font-size: 50px;
  line-height: 59px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.4;
  color: var(--malik-black);
  white-space: nowrap;
  transition: opacity var(--malik-gentle-fast);
}
.malik-services__tab.is-active { opacity: 1; }

/* Arc: one reusable positioning box, two crossfaded pages (Services /
   Academy). The row's own vertical position differs per page (set below),
   but the caption/page-info/back-button footer that follows is pinned to
   a fixed spot on the PANEL regardless of which page is active or how
   tall its content is — Figma positions that footer independently of the
   row, not stacked after it in flow. */
.malik-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}
.malik-services__pageinfo,
.malik-services__screen[data-services-screen="arc"] .malik-services__arc-content > .malik-text-center {
  transform: translateY(0);
  transition: opacity var(--malik-gentle-fast), transform var(--malik-gentle-fast), visibility 0s linear 500ms;
}
/* The exiting tabs/row/caption/back-button group flows OUT past the card's
   own right edge (visible over the page background beyond the panel, not
   clipped at it — .malik-services__arc-content below is overflow:visible
   on purpose) as it narrows, not just fading in place — a much larger
   throw than the panel's own 40px translateX so it clearly crosses the
   visible edge well before its 500ms opacity fade (.malik-arc-row et al)
   finishes. Tabs
   are opacity-only (no transform) since their own transform is JS-driven
   (centerActiveTab's translateX, which folds in this same 700px on open —
   see initArcPaging) and a CSS transform here would just get clobbered by
   the inline style.
   The opacity delay below is opening-only (declared on the .is-blurred
   selector, not the base rule above) so closing still fades back in
   immediately; opening holds each element fully visible for the first 500ms
   of its rightward throw (synced with .malik-arc-row's own delay below),
   THEN fades over the remaining 500ms — 500+500=1000ms total, matching the
   panel's own width morph and the detail card's own fade (both
   var(--malik-gentle)), so the whole + / × open-close choreography lands
   on the same overall timing instead of the content still visibly finishing
   after the panel/detail already have. */
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__pageinfo,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__arc-content > .malik-text-center {
  transform: translateX(700px);
}
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc {
  transition: opacity var(--malik-gentle-fast) 500ms, transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__pageinfo,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__arc-content > .malik-text-center {
  transition: opacity var(--malik-gentle-fast) 500ms, transform var(--malik-gentle-fast), visibility 0s linear 500ms;
}
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__tabs {
  transition: opacity var(--malik-gentle-fast) 500ms, transform var(--malik-gentle), visibility 0s linear 500ms;
}
/* .malik-arc-page.is-active (further below) declares its OWN undelayed
   1000ms opacity transition and, carrying two classes, out-specifies the
   plain opacity:0 in the shared block below — so without this override
   .malik-arc-page (a DIRECT ancestor of .malik-arc-row) started fading the
   instant .is-blurred was added, no delay, dragging the row's effective
   opacity (they multiply) down well before the row's own delay had even
   started. That's what was making the row look like it was just dissolving
   in place instead of visibly sliding first, even though the row/.malik-arc
   were both already timed correctly on their own. 500ms delay + 500ms fade
   keeps it on the same 1000ms total as the rest of this group. */
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc-page {
  transition: opacity var(--malik-gentle-fast) 500ms, visibility 0s linear var(--malik-gentle-duration);
}
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc-page,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__tabs,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__pageinfo,
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-services__arc-content > .malik-text-center {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Purely a scoping wrapper for the .malik-text-center selectors above (so
   they target the back button specifically, not the academy CTA further
   inside .malik-arc) — NOT a clipping box: overflow stays visible so the
   400px exit throw actually reads as flowing out past the card's edge,
   not folding/disappearing at it. */
.malik-services__arc-content {
  position: absolute;
  inset: 0;
}

/* inset:0 makes this span the whole panel — including the tabs strip
   above the row — purely so its children (row/caption/CTA) can position
   themselves with panel-relative px offsets. The page itself must stay
   pointer-events:none or its full-panel hitbox would swallow clicks on
   the tabs sitting "above" it; only the actually-visible children opt
   back into pointer-events. */
.malik-arc-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}
.malik-arc-page.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--malik-gentle);
}

.malik-arc-row {
  position: absolute;
  pointer-events: auto;
  left: 0;
  right: 0;
  top: 249px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity var(--malik-gentle-fast), filter var(--malik-gentle-fast), transform var(--malik-gentle-fast);
}
.malik-arc-page[data-arc-page="academy"] .malik-arc-row {
  top: 324px;
  align-items: flex-start;
  gap: 74px;
}
/* translateX (not Y) so the row flows off to the right as it disappears,
   matching the .malik-arc/pageinfo/back-button group above (this adds to,
   not replaces, .malik-arc's own 700px — a translate on a child composes
   with its already-translated parent). Runs on the SAME 1000ms/no-delay
   transform timing as that parent (previously 500ms, finishing early and
   fading during the other 500ms while the parent kept moving — two
   overlapping curves landing at different times instead of one continuous
   glide) so the whole rightward throw reads as a single smooth motion.
   Opacity/blur are delayed further (600ms, and blur is much lighter — 4px
   not 10px) so the row travels most of the way while still sharp and
   opaque and the slide is clearly legible, THEN dissolves near the end,
   instead of blurring away almost immediately and masking the motion.
   That delay is opening-only: declared here on .is-blurred rather than the
   base rule below, so closing still fades/unblurs back in immediately
   (simultaneously with the slide) on its own 500ms, which is what already
   reads as a clear "returning from the right" on Back/close. */
.malik-services__screen[data-services-screen="arc"].is-blurred .malik-arc-row {
  opacity: 0;
  filter: blur(4px);
  transform: translateX(175px);
  transition: opacity var(--malik-gentle-fast) 500ms, filter var(--malik-gentle-fast) 500ms, transform var(--malik-gentle);
}

.malik-arc-node {
  font-family: var(--malik-font-roboto);
  position: relative;
  width: 201px;
  height: 201px;
  /* .malik-arc-row spans left:0/right:0 of the panel, so its available
     width tracks the panel's own 630<->1204px morph live, frame by frame.
     Without this, these flex children (default flex-shrink:1) got visibly
     squeezed narrower than their real 201px whenever the row became opaque
     again (closing, 500ms) before the panel had actually finished widening
     back out (1000ms) — "compressed" circles for that ~500ms gap. Staying
     rigid at their real size means they may render into not-yet-widened
     space (fine, nothing clips there) instead of visibly shrinking. */
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--malik-white);
  border: 1px solid #fff;
  color: var(--malik-black);
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform var(--malik-transition), box-shadow var(--malik-transition);
}
.malik-arc-node--static {
  cursor: default;
}
/* The clicked circle grows slightly to indicate selection, on top of
   whatever base transform it already has (is-featured's own scale(1.05),
   or none) — while its title has detached to fly toward the detail heading
   (see JS flipTitle) and the rest of the row fades away around it. */
.malik-arc-node.is-selected {
  transform: scale(1.08);
  transition: transform var(--malik-gentle-fast);
}
.malik-arc-node__title {
  display: inline-block;
}

/* Academy page: plain numbered badges (not circle cards), badge stacked
   above its label instead of a single centred block of text. This is the
   only node variant Figma sets in uppercase Ubuntu Mono — the services
   circles (button or static) keep the plain Roboto Mono label case. */
.malik-arc-page[data-arc-page="academy"] .malik-arc-node--static {
  width: 305px;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  justify-content: flex-start;
  gap: 20px;
  font-family: var(--malik-font-ubuntu);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 19px !important;
  line-height: 19px !important;
}

/* Only the permanently-featured (middle) node is scaled up — no hover-driven
   growth/glow-follow on the row anymore, per request. JS may still toggle
   .is-hover-glow/.is-hovering on interaction; those classes are intentionally
   not styled here so they have no visual effect. */
.malik-arc-node.is-featured {
  transform: scale(1.05);
}
.malik-arc-page[data-arc-page="academy"] .malik-arc-node--static.is-featured {
  box-shadow: none;
}
.malik-arc-page[data-arc-page="academy"] .malik-arc-node--static.is-featured::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 122, 58, 0.35) 0%, rgba(60, 70, 70, 0.18) 45%, transparent 75%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

/* Figma: badge left:904/top:461 vs its node's own left:821/top:304 (both
   frame-relative, 201px node) => node-relative left:83px (dead centre:
   (201-36)/2=82.5) and node-relative top:157px = bottom:8px. Centered
   horizontally, inset 8px from the bottom — not straddling the edge. */
.malik-arc-node__plus {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--malik-white);
  border: 1px solid rgba(0, 0, 0);
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.malik-arc-node__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #000000;
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
}

/* Fixed to the panel (not stacked after the row in flow) so it lands in
   the same spot on both pages regardless of the row's own content height —
   both pages populate this caption (services' intro line and academy's
   own body copy), and Figma places it at the same y on either page. */
.malik-arc-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 533px;
  font-family: var(--malik-font-ubuntu);
  max-width: 829px;
  margin-inline: auto;
  font-size: 19px;
  line-height: 22px;
  font-weight: 400;
}

.malik-services__pageinfo {
  position: absolute;
  left: 0;
  right: 0;
  top: 587px;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  line-height: 22px;
  color: #000000;
}

/* Both the services page's "Back" and the academy page's CTA sit in the
   same fixed footer slot on the panel — not stacked after the row/caption
   in flow, so they land at the same y regardless of row content height. */
.malik-services__back,
.malik-arc-page[data-arc-page="academy"] > .malik-text-center {
  position: absolute;
  pointer-events: auto;
  left: 0;
  right: 0;
  top: 632px;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}

/* Only the services page shows "Back" (returns to the intro screen); the
   academy page shows its own full-width CTA in that same footer slot instead.
   Crossfades on opacity/visibility (matching .malik-arc-page's own fade)
   instead of an instant display:none cut, so it dissolves in sync with the
   width morph above rather than popping. */
.malik-services__screen[data-active-page="academy"] .malik-services__back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--malik-gentle);
}

.malik-services__arrow {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 1px solid #000000;
  background: none;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.malik-arc-row .malik-services__arrow--prev,
.malik-arc-row .malik-services__arrow--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.malik-arc-row .malik-services__arrow--prev { left: 22px; }
.malik-arc-row .malik-services__arrow--next { right: 22px; }

/* This is a component state change, not a modal/page navigation — the
   detail content lives INSIDE the same arc-screen panel (which is doing its
   own width:1204->630 shrink, see .is-blurred above) and just fades/slides
   in over it, instead of a separate position:fixed layer popping up over a
   darkened backdrop. */
.malik-services__details {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.malik-services__details.is-open {
  pointer-events: auto;
}

/* Fills the panel exactly (parent is already the exact 630x699 card size
   once .is-blurred narrows it) — no more independent width/centering or its
   own background/blur, the parent panel's glass look already covers it.
   Slides up from below rather than zooming in. */
.malik-services__detail {
  position: absolute;
  inset: 0;
  padding: 3rem 2.5rem;
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(40px);
  transition: transform var(--malik-gentle), opacity var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
}
.malik-services__detail.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--malik-gentle), opacity var(--malik-gentle);
}
/* Scoped to the overlay also being open (not just the panel's own
   .is-active) — belt-and-suspenders against the panel ever intercepting
   clicks (e.g. Back, other + triggers) while it's supposed to be closed. */
.malik-services__details.is-open .malik-services__detail.is-active {
  pointer-events: auto;
}
.malik-services__detail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(107, 122, 58, 0.3) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

/* Figma: button left:1127/top:55 vs the Variant4 panel's own left:417/top:55
   (both frame-relative) — panel right edge = 417+630=1047, so the button
   floats 1127-1047=80px past the panel's own right edge, top-aligned with
   it (not tucked inside the corner). Hug-width pill (padding 10px/25px),
   fixed 36px height, radius 30 — not the plain circle this used to be. */
.malik-services__close {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 100%;
  margin-left: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 36px;
  padding: 10px 25px;
  border-radius: 30px;
  border: none;
  background: rgba(160, 148, 168, 0.1);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--malik-gentle), transform var(--malik-gentle), background var(--malik-transition);
}
/* Now a single button shared across all service panels (see PHP) — gated
   on the overlay's own .is-open, not a specific panel's .is-active. */
.malik-services__details.is-open .malik-services__close {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
  pointer-events: auto;
}
/* The title itself doesn't fade/slide — it's handled by JS (flipTitle):
   the clicked circle's own title visually detaches and travels to this
   exact spot, so this element just needs a quick, non-jarring handoff
   fade once the flying clone arrives, not the same slide-in as new content. */
.malik-services__detail-title {
  position: relative;
  z-index: 1;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #000;
  margin-bottom: 64px;
  opacity: 1;
  transition: opacity 250ms var(--malik-gentle-ease);
}
/* New elements (not shared with the overview state) flow in from the left,
   staggered ~100ms apart so they arrive sequentially rather than all at
   once — same "content flows in" direction as the title's own FLIP flight
   (see flyTitle() in malik-main.js), instead of a vertical slide. */
.malik-services__detail-tagline {
  position: relative;
  z-index: 1;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  line-height: 19px;
  letter-spacing: 0;
  /* Figma's Variant4 detail state (node 1:2137) has the tagline/body
     left-aligned against the panel's own padding, unlike the centered
     .malik-services__detail-title above them — confirmed against the actual
     design file, not a guess. */
  text-align: center;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--malik-gentle), transform var(--malik-gentle);
}
.malik-services__detail.is-active .malik-services__detail-tagline {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 120ms;
}
.malik-services__detail-body {
  position: relative;
  z-index: 1;
  font-size: 19px;
  line-height: 22px;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  color: #000;
  text-align: left; 
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--malik-gentle), transform var(--malik-gentle);
}
.malik-services__detail.is-active .malik-services__detail-body {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 220ms;
}
.malik-services__detail-body p { margin-bottom: 1rem; }

/* Raised from the site's usual 768px mobile breakpoint to 1024px
   specifically for this section: desktop's fixed-px layout (1204px panel,
   201px circles, absolute footer offsets) only has a max-width:100% safety
   net on the panel itself — its children don't scale down with it, so
   between 769-1024px the panel visibly shrinks while the circles/arrow/
   footer stay full-size, overlapping each other (verified: the next-arrow
   overlapping "Management consulting" text, Back/pageinfo pushed out of
   view at 1024px). There's no dedicated tablet Figma design, so reusing
   this already-Figma-matched, fluid vw-scaled mobile layout up through
   1024px is the correct fix rather than leaving that range broken. */
@media (max-width: 1024px) {
  /* ════════════════════════════════════════════════════════════════
     MOBILE SERVICES — pure vw scaling against Figma's mobile reference
     frame (1080px wide, "services mob." page), the same no-clamp vw
     convention already used elsewhere on mobile in this file (e.g. We Are
     Malik). Every rule here is scoped to this media query only — nothing
     above (desktop) is touched. factor = px / 1080 * 100.
  ════════════════════════════════════════════════════════════════ */

  .malik-services { min-height: 177.78vw; /* 1920px frame height */ }
  /* .malik-services__app's own min-height:810px (desktop, unconditional —
     see base rule) was never overridden here. A child's min-height forces
     its parent to be at least that tall regardless of the parent's own
     (smaller) min-height, so below ~455px viewport (810/1.7778) that fixed
     810px floor was winning over this section's proportional 177.78vw,
     silently decoupling the actual rendered height from Figma's aspect
     ratio at exactly the narrow widths where it matters most. */
  .malik-services__app { min-height: 190.78vw; }
  /* Every variant of this component (intro, services list, academy list,
     individual-coaching detail) shares the SAME 1080x1920 Figma frame, so
     the section's rendered height should be one constant regardless of
     which is active — it was previously inflated only while the Services
     page showed (on the theory its 5-item row needed more room than the
     frame allows), which instead made every variant render at a visibly
     different height on real devices. Removed now that the actual bug
     behind that theory (the tabs' missing top margin, pushing everything
     up and making the bottom look short) is fixed at its source. */
  /* A detail card open (.is-blurred) needs its own, smaller height than
     the 5-item Services row above — without this, the 210vw services-list
     floor kept winning even with a much shorter detail card open, leaving
     a large empty gap below the card before the next section. Comes after
     the rule above so it wins the cascade (equal specificity) whenever
     both are true at once. */
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) {
    min-height: 182vw;
  }
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) .malik-services__app {
    min-height: 180vw;
  }

  /* Figma's mobile spacing (15px panel inset, 16px text-block inset) is
     baked into each element's own margin against the full 1080px frame —
     there's no separate gutter layer. The sitewide .malik-container still
     adds its own 24px mobile padding on top of that, which also caps the
     arc panel's max-width:100% (inherited from desktop) short of its
     intended 97.04vw, collapsing its auto-margins to 0 and erasing the
     inset entirely. Removed here so every vw value below matches Figma
     against the true viewport width, same as desktop matches against the
     1444px container. */
  .malik-services .malik-container { padding-inline: 0; }

  /* .malik-arc-page.is-active sets visibility:visible (needed for the
     services<->academy crossfade) and .malik-arc-row sets pointer-events:
     auto — both explicit, descendant-level overrides that win over an
     ancestor's inherited visibility:hidden/pointer-events:none. On desktop
     this is harmless (the inactive arc screen's absolutely-positioned
     content doesn't happen to land under anything clickable), but mobile's
     much taller stacked-column layout means the (inactive, but still
     internally "is-active") services row overlaps and steals clicks from
     the intro screen's View More button underneath it. Force every
     non-active top-level screen fully inert on mobile regardless of what
     its descendants set. */
  .malik-services__screen:not(.is-active),
  .malik-services__screen:not(.is-active) * {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Figma: 2431.9x1253 video, centered, top:294px — much wider than the
     1080px frame (deliberately bleeds off both edges), so it's centered
     and let the section's own overflow:hidden (.malik-section) clip it. */
  .malik-services__bg {
    width: 225.18vw; /* 2431.9px */
    max-width: 225.18vw;
    height: 115.09vw; /* 1253px */
    top: 27.22vw; /* 294px */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Screen 1: intro */
  .malik-services__screen[data-services-screen="intro"] { padding-top: 0; padding-bottom: 0; }
  .malik-services__heading {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    margin-top: 15.65vw; /* 169px, heading top from screen top */
    margin-bottom: 0;
  }
  .malik-services__intro {
    max-width: 97.04vw; /* 1048px */
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    /* Figma: intro top(1391) - heading bottom(169+94=263) */
    margin-top: 104.44vw;
    margin-bottom: 7.41vw;
  }
  .malik-services .malik-btn--outline {
    height: 7.41vw; /* 80px */
    padding: 0.93vw 5.56vw; /* 10px 60px */
    border-width: max(2px, 0.19vw);
    border-radius: 7.41vw; /* 80px */
    font-size: 3.70vw; /* 40px */
    line-height: 3.70vw;
  }

  /* Screens 2/3: arc panel (Services list / Malik Academy list) */
  .malik-services__screen[data-services-screen="arc"] {
    width: 97.04vw; /* 1048px */
    height: 98%;
    margin: 1.39vw auto; /* 15px inset all around, matches Figma's panel */
    padding: 6.85vw 4.63vw 9.41vw;
    border-radius: 9.26vw; /* 100px */
  }
  /* Desktop takes tabs/row/caption/pageinfo/back fully out of flow
     (position:absolute at fixed px) so the footer lands at a fixed spot
     regardless of active page. Mobile goes back to plain document-flow
     stacking — only the active page contributes layout height. */
  .malik-services__tabs {
    gap: 4.63vw;
    /* margin-top restores the panel's Figma top-inset (Group165 sits at
       panel-relative y:74, i.e. 6.85vw) for this row, the first visible
       child. The panel's own CSS padding-top (same 6.85vw value, further
       up in this file) can't do this job: .malik-services__arc-content
       is position:absolute + inset:0, so its containing block is the
       panel's PADDING box per spec — it renders flush with the panel's
       outer edge regardless of the panel's own padding, which never
       reaches this (or any) of its descendants. Confirmed via computed
       styles: the panel's padding-top resolves to a real px value, but
       .malik-services__tabs still rendered with a 0px gap from the panel
       edge before this rule. Shared by both the Services and Malik
       Academy pages (one tabs bar for both), so this fixes the top gap
       for both at once. */
    margin: 6.85vw 0 7.41vw;
  }
  .malik-services__tab {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    /* position:relative (not absolute, to avoid the documented mid-
       transition position-change bug on .is-entering below) + a baseline
       z-index so entering/active can be lifted above a still-fading
       .is-leaving sibling regardless of DOM order (see z-index comment
       on .is-entering: without this, "Academy"->"Services" rendered the
       incoming label UNDER the still-opaque outgoing one, since Services
       is always first in markup order and paints below by default). */
    position: relative;
    z-index: 1;
    /* width:100% (not just position) so the entering/active label gets the
       SAME full-row reference box .is-leaving already has (it's absolute
       with left:0/right:0, which stretches it) — without this, is-entering
       (deliberately kept position:static, see the comment on that rule)
       only had its own narrow text width to translateX() across, so it
       slid a much shorter distance than the outgoing label and barely read
       as motion. text-align:center (button default) keeps the label
       visually centered inside the wider box either way. */
    width: 100%;
    /* var(--malik-gentle), not the faster token: synced to match the row/
       page crossfade's own 1000ms (PAGE_FADE_MS in malik-main.js) so the
       tab title and the row settle together as one motion instead of the
       title finishing twice as fast and appearing to sit still while the
       row is still visibly changing underneath it. TAB_SLIDE_MS (JS) was
       bumped to 1000 to match. */
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Desktop shows both tabs (the inactive one grayed out, with room to
     spare in the 1204px panel); at mobile's much bigger font-to-panel-
     width ratio the pair together don't fit and the inactive one shows as
     an awkward cut-off peek at the panel's edge instead. Only one heading
     should be visible on mobile: the active screen's own. */
  .malik-services__tab:not(.is-active):not(.is-leaving) {
    display: none;
  }
  /* Slides the tab TITLE itself (nothing else in the row/panel) when
     switching Services<->Malik Academy via the arrows. Same "display can't
     transition" problem as .malik-arc-page's is-leaving/is-entering (see
     that CSS comment) and the same fix, applied to the tab buttons: JS
     (goTo() in malik-main.js) keeps the outgoing label painted long enough
     to slide+fade out, and paints the incoming one at an off-screen
     starting transform for one frame before releasing it into .is-active.
     --malik-tab-slide-dir (set inline by JS, ±1) is which side each half
     of the swap uses, so Services->Academy and Academy->Services read as
     one continuous carousel motion rather than both tabs always entering/
     exiting from the same side. Percentage (not px/vw) transforms so this
     is correct at every mobile breakpoint without retuning per tier. */
  .malik-services__tab.is-leaving,
  .malik-services__tab.is-entering {
    display: block;
  }
  /* is-leaving alone goes position:absolute (out of the flex flow, so the
     entering/active tab below is the row's sole flow item and stays
     centered) — is-entering deliberately does NOT: it's already the same
     position:static it'll have once it becomes .is-active a frame later,
     because a transform transition that ALSO crosses a position:absolute
     -> position:static change mid-flight doesn't reliably animate in
     Chromium/WebKit (confirmed empirically: with is-entering also set to
     position:absolute, the swap to .is-active jumped straight to
     translateX(0) with no visible slide at all, 0ms in). Keeping it
     static throughout means only transform/opacity ever change, so the
     transition has continuity the whole way. */
  .malik-services__tab.is-leaving {
    position: absolute;
    left: 0;
    right: 0;
    /* Full -100%/100% sweep: the outgoing label must clear completely
       (past its own full stretched width, since .is-leaving is absolute
       with left:0/right:0) before the incoming one lands, or the two
       overlap mid-transition on long labels like "Malik Academy" (a
       smaller nudge was tried and visibly overlapped the two labels). */
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * -100%));
    opacity: 0;
  }
  .malik-services__tab.is-entering {
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * 100%));
    opacity: 0;
    transition: none;
    /* Above .is-leaving (z-index:1 from the base rule) so the incoming
       label is always visible sliding in on top of the outgoing one,
       regardless of which is first in DOM order (Services is always
       first in markup - see section-services.php - so without this,
       Academy->Services rendered "Services" entering UNDERNEATH the
       still-opaque, same-width "Academy" exiting on top of it, hiding
       the slide-in almost entirely until the fade-out nearly finished). */
    z-index: 2;
  }
  .malik-services__tab.is-active {
    transform: translateX(0);
    z-index: 2;
  }
  /* Same crossfade pattern as the intro<->arc screen switch above (View
     More button): fade + scale between opacity:0/scale(0.96) and
     opacity:1/scale(1) - no per-page leave/enter class dance needed, since
     both pages stay permanently stacked/rendered (never display:none),
     which sidesteps the "display can't transition" problem entirely.
     Stacking is done via CSS Grid (both pages get grid-column/row:1 below)
     rather than position:absolute: a hardcoded height on .malik-arc would
     only account for the row and ignore the caption/pageinfo text below
     it, which varies with actual CMS content and could overflow if it
     ever wraps to more lines - grid's own auto-sizing instead sizes
     .malik-arc to whichever page's REAL content is tallest (normally
     Services), so it's correct regardless of copy length. Bonus: grid
     items never participate in margin collapsing, which independently
     prevents Academy's own row margin-top from ever leaking out and
     shifting .malik-arc's position (a real bug this exact layout hit
     before, when pages were plain normal-flow instead). */
  .malik-arc { position: relative; display: grid; }
  /* position:static (not position:absolute): grid auto-sizing only
     accounts for items actually participating in grid layout - an
     absolutely positioned child is taken out of grid flow and
     contributes nothing to its cell's size, which would defeat the
     auto-height behaviour above entirely. grid-column/row:1 on both pages
     puts them in the exact same cell, so they overlap and crossfade via
     the transform/transition below, added here (mobile-scoped) rather
     than on the shared base rule further up so desktop keeps its existing
     opacity-only crossfade untouched. */
  .malik-arc-page {
    position: static;
    grid-column: 1;
    grid-row: 1;
    /* align-self:start (not the grid default of stretch): without this,
       Academy's shorter content was being stretched to match Services'
       taller row height, which put scale(0.96)'s center-point (transform-
       origin defaults to the element's own box centre) at the centre of
       that STRETCHED box - well below Academy's actual content, which
       only fills the top portion of it. Scaling around the wrong point
       made Academy's content visibly shift as it grew from 0.96 to 1
       instead of settling cleanly in place. start keeps each page sized
       to its own real content (top-aligned within the taller row), so its
       scale origin always matches its own visual centre. */
    align-self: start;
    transform: scale(0.96);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
  }
  .malik-arc-page.is-active {
    transform: scale(1);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Figma stacks the nodes in a single vertical column, edge-to-edge
     (0 gap — the 277.94px circles sit exactly diameter-apart), with the
     prev/next arrow vertically centered against the whole stack. */
  .malik-arc-row {
    /* Desktop's rule sets position:absolute + top:249px for its own fixed-
       offset layout — position:relative here does NOT clear that top
       value (only position:static ignores top/left/right/bottom), so
       without resetting it explicitly the row renders 249px below its
       true flow position while every later sibling (caption/pageinfo/
       back) still reserves space as if it hadn't moved, overlapping them. */
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 0 7.41vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-row {
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 7.41vw; /* ~222px circle-to-circle rhythm minus each item's own height */
    /* Figma (Group 166, the timeline): top:625 relative to the panel's own
       content box, vs. the tabs' own bottom edge (top:89 + height:94 = 183)
       — a 442px gap, not the ~80px this shared with the services row's tabs-
       to-circles gap. 442 - the 80px the tabs' own margin-bottom already
       contributes = 362px (33.52vw) of ADDITIONAL top margin needed here,
       specific to the academy page. Similarly the gap from the row's own
       bottom (Group166 bottom:1211) to the caption's top (1411) is 200px
       (18.52vw) — much larger than the services page's 52px equivalent. */
    margin: 33.52vw 0 18.52vw;
  }
  .malik-arc-node {
    /* Desktop's circle-node text is Roboto Mono (its own Figma spec says
       so explicitly) — but the mobile "services mob." frame's text layers
       (Change management, HR and organizational development, etc.) are
       each explicitly Ubuntu Mono in Figma, a different typeface with
       different character widths/metrics. Left unset here it silently
       inherited the desktop rule's Roboto Mono, which is why text wrapped/
       sat differently under the circles than Figma shows even at the
       "right" font-size. */
    font-family: var(--malik-font-ubuntu);
    width: 25.74vw; /* 277.94px */
    height: 25.74vw;
    padding: 2vw;
    font-size: 3.12vw !important; /* 33.6753px */
    line-height: 3.15vw !important; /* 34px, ~100% per Figma's line-height:100% */
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-node--static {
    width: 90vw;
    height: auto;
    gap: 2.78vw; /* 30px, badge-to-label */
    /* Desktop's 19px/0.04em (its own Figma spec) never got a mobile
       override — the mobile "services mob." frame's TAILORED/IN-HOUSE/
       BUILT AROUND YOUR ORGANISATION labels are each explicitly font-
       size:40px, line-height:117.32%, plain letter-spacing in Figma, a
       different (much larger) size than desktop's small badge caption. */
    font-size: 3.70vw !important; /* 40px */
    line-height: 117.32% !important;
    letter-spacing: normal;
  }
  .malik-arc-node__num {
    width: 7.02vw; /* 65px */
    height: 7.02vw;
    font-size: 3.70vw; /* 40px */
    border-width: max(1px, 0.09vw);
  }
  /* Corrected: Figma's mobile "services mob." frame DOES show this badge,
     just only on the two circles that actually open a detail overlay
     (Individual Coaching, Management consulting...) - the non-clickable
     circles never render this span at all (see section-services.php's
     $has_detail branch), so no extra scoping is needed here, only a mobile
     size/position override. Figma: badge 56.471px on a 277.938px circle,
     bottom-anchored ~6.4px above the circle's own bottom edge (vs desktop's
     43px / 201px / 8px). The inline plus SVG has a literal 40px width/height
     attribute (sized for desktop's 43px badge) - scaled to a percentage here
     so it fills the smaller mobile badge instead of overflowing it. */
  .malik-arc-node__plus {
    width: 5.23vw; /* 56.47px */
    height: 5.23vw;
    bottom: 0.59vw; /* 6.4px */
  }
  .malik-arc-node__plus svg {
    width: 93%;
    height: 93%;
  }
  .malik-arc-caption {
    position: static;
    max-width: 97.04vw;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    margin: 0 auto 3.70vw;
  }
  .malik-services__pageinfo {
    position: static;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%; /* 47px */
    margin: 0 0 3.70vw;
  }
  /* Figma: BACK sits at left:68/top:920 within the "home (services)" frame
     — top:920 lands almost exactly on the row's own vertical centre (row
     spans 227 to 1614, midpoint ~920.5), i.e. it's NOT a footer button
     below the caption like desktop's Back — it's the row's LEFT-side nav
     element, mirroring the circular "next" arrow's position on the right.
     Absolutely positioned against the panel, taken out of flow entirely. */
  /* Selector specificity bumped to match (and win the cascade against)
     .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content
     > .malik-text-center (the shared exit-transition base rule, ~line 1814)
     which sets transform:translateY(0) at equal specificity (4 selectors)
     but appears earlier in the file — it was silently discarding this
     rule's translateY(-50%) on every real browser (confirmed via computed
     style: transform resolved to the identity matrix), leaving BACK
     rendered ~half its own height too low and visibly unaligned with the
     "next" arrow beside it, which centers correctly via a different,
     uncontested mechanism (top:50% of its own row). */
  .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content > .malik-services__back {
    position: absolute;
    left: 4.91vw; /* (68-15)px panel-relative */
    /* Figma's literal top:920 (row midpoint 920.5) assumes the row starts
       right after the tabs' 74px/94px block with a ~44px gap; the real
       flow gap here is wider (tabs margin-bottom 7.41vw), so the row
       actually renders ~3.5vw lower than that spec. Recalculated from the
       live flow instead (tabs top 6.85vw + height 8.70vw + margin-bottom
       7.41vw + row height 5x25.74vw / 2) so BACK's centre matches the
       "next" arrow's actual centre (top:50% of .malik-arc-row) rather than
       Figma's on-paper number, which is what was leaving BACK visibly
       higher than the arrow beside it. */
    top: 87.31vw;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
  }
  .malik-arc-page[data-arc-page="academy"] > .malik-text-center {
    position: static;
  }
  .malik-services__back .malik-btn--outline,
  .malik-arc-page[data-arc-page="academy"] .malik-btn--outline {
    height: 7.41vw;
    padding: 0.93vw 5.56vw;
    border-width: max(2px, 0.19vw);
    border-radius: 7.41vw;
    font-size: 3.70vw;
    line-height: 3.70vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw; /* 960px */
    max-width: 92vw;
    /* Figma sizes this button exactly to its label at this font-size (960px
       wide, 60px padding each side = 840px text box = the label's own
       Figma width:840/height:40, a single line) — nowrap reproduces that
       intent; since both the button and its font-size scale by the same
       vw factor at every breakpoint, the fit holds everywhere, same as it
       does at the 1080px reference frame. */
    white-space: nowrap;
  }
  /* Desktop's Back/Academy-CTA width morph (90px<->451px, keyed off
     data-active-page, see the comment on the base rule ~line 1654) is a
     desktop-only illusion: those two buttons share ONE absolutely-
     positioned footer slot there, so animating one's width to match the
     other's sells them as a single morphing button. On mobile they're laid
     out independently (own position:absolute rules above/below, never
     sharing a slot), so there's nothing to morph toward — but the base
     rule's width:451px is unconditional (only keyed off data-active-page,
     which mobile sets too) and outranks this tier's own width rules
     whenever academy is actually showing. Confirmed via computed style:
     Back was animating 90px->451px over 500ms while fully invisible
     (opacity:0), pure wasted reflow on every tab switch, and the CTA's
     rendered width was landing on this tier's 92vw max-width clamp
     instead of its real 88.89vw target — an unintended ~15px overshoot at
     every viewport. Repeating both selectors here at equal specificity,
     later in source order, wins the cascade back for this tier's own
     (correct, Figma-derived) widths regardless of which page is active. */
  .malik-services__screen[data-active-page="academy"] .malik-services__back .malik-btn--outline {
    width: auto;
  }
  .malik-services__screen[data-active-page="academy"] .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw;
    max-width: 92vw;
  }
  .malik-services__arrow {
    width: 7.41vw; /* 80px, services-page next arrow */
    height: 7.41vw;
    border-width: max(2px, 0.19vw);
  }
  .malik-arc-page[data-arc-page="academy"] .malik-services__arrow {
    width: 8.56vw; /* 60px, academy-page prev arrow — Figma sizes these differently */
    height: 8.56vw;
    border-width: max(1px, 0.11vw); /* 1.17647px, Figma Ellipse 224 stroke */
  }
  .malik-arc-row .malik-services__arrow--prev,
  .malik-arc-row .malik-services__arrow--next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Figma: academy's prev-arrow (Group 122, 60px) sits inset 126px from
     the panel's left edge = 11.67vw; services' next-arrow (also Group 122,
     but the 80px variant) sits inset 65px from the panel's right edge =
     6.02vw. The previous -1.85vw on both was a negative outset, not an
     inset, pushing each arrow 7-8px PAST the panel's own edge instead of
     inside it (confirmed via computed rects: the next-arrow's right edge
     measured beyond the panel's own right edge, not short of it). --prev
     only ever renders on the academy page and --next only on the services
     page, so these can target each arrow's own real Figma value directly
     without needing extra per-page scoping. */
  .malik-arc-row .malik-services__arrow--prev { left: 11.67vw; }
  .malik-arc-row .malik-services__arrow--next { right: 6.02vw; }
  /* ── Detail card ("Individual coaching", etc.) ──────────────────
     This is a literal scaled-down reproduction of Figma's "services
     mob." Variant5 frame (1080×1920), not a new responsive layout —
     every dimension below is that frame's own px value converted with
     the file's usual factor = px / 1080 * 100 (vw), same convention as
     every other mobile block in this file. Nothing here is clamp()'d,
     capped, or content-driven: the frame is a fixed 100vw × 177.78vw
     (1920/1080) box and the card inside it is a fixed 79.07vw ×
     128.15vw (854×1384) box, centered in it exactly like Figma's own
     `top/left: calc(50% - size/2)` — so at any phone width the whole
     composition is the same shrunk photograph of the artboard, never a
     redrawn one. This ≤1024px block is the only place these rules
     live; the 768/480/390px tiers below just point back here since
     they're strictly narrower and already inherit it unchanged. */
  .malik-services__screen[data-services-screen="arc"].is-blurred {
    width: 100vw;
    max-width: 100vw;
    height: 177.78vw; /* 1920px — the full Figma detail-frame, scaled as one image */
    margin: 0;
    border-radius: 0;
    background: #FEFBE8; /* Figma "Property 1=Variant5" frame fill */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* .malik-services__detail (the card) and .malik-services__close (the
     shared close button) are independent siblings in the markup (see
     PHP), both positioned frame-relative against this same 1080×1920
     box — exactly like Figma, where both are absolute children of the
     same artboard rather than nested inside one another. */
  .malik-services__details {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Mandala blur behind the card — Figma: a 1536×791.4px image, centered
     on the frame and shifted up 39.3px. No such static image exists in
     this build (only "mantala blur (1).mp4" video files, which a CSS
     background-image can't render) — this reuses the same radial-glow
     technique the desktop card already has for the same spot, scaled to
     the real asset's footprint instead of inventing a new one. */
  .malik-services__detail::before {
    display: block;
    width: 142.22vw; /* 1536px */
    height: 73.28vw; /* 791.4px */
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, calc(-50% - 3.64vw)); /* 39.3px above center */
    border-radius: 0;
    filter: blur(2.78vw); /* 30px, scaled */
  }

  /* Figma positions this with calc(50% - size/2) rather than an
     inset+margin:auto centering trick — same result, matched here
     literally with top/left + calc() instead. Deliberately NOT using
     transform for this: .malik-services__detail.is-active (base rule,
     2 classes) sets its own transform: translateY(0) for the open/close
     slide, which beats a 1-class mobile rule's transform on specificity
     alone regardless of media query or source order — a transform-based
     centering here would get silently overridden back to translateY(0)
     the moment a panel opens. top/left + calc() achieves the same
     position without touching transform, leaving it free for that
     slide animation. */
  .malik-services__detail {
    position: absolute;
    top: calc(50% - 64.075vw); /* 50% - 1384px/2 */
    left: calc(50% - 39.535vw); /* 50% - 854px/2 */
    right: auto;
    bottom: auto;
    margin: 0;
    width: 79.07vw; /* 854px */
    max-width: none;
    height: 128.15vw; /* 1384px — fixed, not content-driven; the card defines the layout, matching Figma */
    max-height: none;
    overflow-y: auto;
    padding: 14.81vw 4.81vw 6.48vw; /* top/sides match the title's own Figma inset (160px/52px); bottom matches Figma's card-bottom to body-bottom gap (70px) */
    border-radius: 9.26vw; /* 100px */
    background: rgba(160, 148, 168, 0.1);
    backdrop-filter: blur(3.069vw); /* 33.15px */
    -webkit-backdrop-filter: blur(3.069vw);
  }

  .malik-services__detail-title {
    width: 100%;
    margin: 0 0 9.26vw; /* tagline top(603) - title bottom(428+75=503) = 100px */
    font-size: 5.93vw; /* 64px */
    line-height: 6.94vw; /* 75px */
  }
  .malik-services__detail-tagline {
    /* Respect literal line breaks authored in the content — Figma's own
       wrap ("RESPONSIBILITY," alone on its own line) is deliberate, not
       natural reflow, and won't reproduce reliably via width/font tuning
       across viewports and font-rendering differences. */
    white-space: pre-line;
    max-width: 57.41vw; /* 620px */
    margin-inline: auto;
    margin-bottom: 5.56vw; /* body top(783) - tagline bottom(603+120=723) = 60px */
    font-weight: 400;
    font-size: 3.70vw; /* 40px */
    line-height: 3.70vw; /* 100%, per Figma */
    letter-spacing: 0;
  }
  .malik-services__detail-body {
    /* Figma's dev-mode export for this text layer never lists a
       text-align (unlike the tagline just above, which explicitly says
       "text-align: center") — Figma only lists non-default properties,
       and its own default is left, so this was silently inheriting the
       parent card's text-align:center instead. */
    text-align: left;
    max-width: 57.41vw; /* 620px */
    margin-inline: auto;
    font-weight: 400;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    letter-spacing: 0;
  }
  /* Figma's own body copy is ONE text layer with blank lines built into
     the copy, not separate elements with their own margin — the base
     (desktop) rule's fixed 1rem paragraph gap doesn't scale with this
     vw-driven type size, so it approximates that blank line as one of
     THIS block's own line-heights instead, staying proportional at
     every width the same way the font-size/line-height above already do. */
  .malik-services__detail-body p { margin-bottom: 4.34vw; }
  .malik-services__detail-body p:last-child { margin-bottom: 0; }
  /* The live field content has soft line breaks (wpautop() -> <br>)
     baked in at points Figma's own copy doesn't break at, which is what
     was producing the extra mid-paragraph gaps — confirmed by comparing
     the rendered DOM against the exact paragraph text Figma has (one
     continuous run per paragraph, no internal breaks). A <br> always
     forces a line break regardless of any white-space value, so the only
     way to neutralize it without editing the field content itself is to
     stop it from rendering at all and let the box's own width wrap the
     text naturally instead — which is what Figma's text does too. */
  .malik-services__detail-body br { display: none; }

  /* Figma's actual rendered canvas (not just the raw dev-mode dump) shows
     a plain thin X here, no solid square behind it — same minimal style
     as the desktop pill's own close icon, just without its glass pill.
     Frame-relative position (left:842, top:356 on the 1080×1920 frame),
     not card-relative, since the card is now centered rather than
     filling this box edge-to-edge. Every base-button property that could
     leak through (border, outline, line-height, appearance, the "&times;"
     glyph itself) is reset explicitly here rather than relied on from
     the desktop rule, so nothing upstream can make the glyph reappear. */
  .malik-services__close {
    position: absolute;
    top: 32.96vw; /* 356px */
    left: 77.96vw; /* 842px */
    right: auto;
    bottom: auto;
    margin: 0;
    width: 4.73vw; /* 51.11px */
    height: 4.51vw; /* 48.76px */
    padding: 0;
    border: none;
    outline: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .malik-services__close-glyph { display: none; }
  .malik-services__close-icon {
    display: block;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 768px) {
  /* ════════════════════════════════════════════════════════════════
     MOBILE SERVICES — pure vw scaling against Figma's mobile reference
     frame (1080px wide, "services mob." page), the same no-clamp vw
     convention already used elsewhere on mobile in this file (e.g. We Are
     Malik). Every rule here is scoped to this media query only — nothing
     above (desktop) is touched. factor = px / 1080 * 100.
  ════════════════════════════════════════════════════════════════ */

  .malik-services { min-height: 177.78vw; /* 1920px frame height */ }
  /* .malik-services__app's own min-height:810px (desktop, unconditional —
     see base rule) was never overridden here. A child's min-height forces
     its parent to be at least that tall regardless of the parent's own
     (smaller) min-height, so below ~455px viewport (810/1.7778) that fixed
     810px floor was winning over this section's proportional 177.78vw,
     silently decoupling the actual rendered height from Figma's aspect
     ratio at exactly the narrow widths where it matters most. */
  .malik-services__app { min-height: 190.78vw; }
  /* Every variant of this component (intro, services list, academy list,
     individual-coaching detail) shares the SAME 1080x1920 Figma frame, so
     the section's rendered height should be one constant regardless of
     which is active — it was previously inflated only while the Services
     page showed (on the theory its 5-item row needed more room than the
     frame allows), which instead made every variant render at a visibly
     different height on real devices. Removed now that the actual bug
     behind that theory (the tabs' missing top margin, pushing everything
     up and making the bottom look short) is fixed at its source. */
  /* A detail card open (.is-blurred) needs its own, smaller height than
     the 5-item Services row above — without this, the 210vw services-list
     floor kept winning even with a much shorter detail card open, leaving
     a large empty gap below the card before the next section. Comes after
     the rule above so it wins the cascade (equal specificity) whenever
     both are true at once. */
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) {
    min-height: 182vw;
  }
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) .malik-services__app {
    min-height: 180vw;
  }

  /* Figma's mobile spacing (15px panel inset, 16px text-block inset) is
     baked into each element's own margin against the full 1080px frame —
     there's no separate gutter layer. The sitewide .malik-container still
     adds its own 24px mobile padding on top of that, which also caps the
     arc panel's max-width:100% (inherited from desktop) short of its
     intended 97.04vw, collapsing its auto-margins to 0 and erasing the
     inset entirely. Removed here so every vw value below matches Figma
     against the true viewport width, same as desktop matches against the
     1444px container. */
  .malik-services .malik-container { padding-inline: 0; }

  /* .malik-arc-page.is-active sets visibility:visible (needed for the
     services<->academy crossfade) and .malik-arc-row sets pointer-events:
     auto — both explicit, descendant-level overrides that win over an
     ancestor's inherited visibility:hidden/pointer-events:none. On desktop
     this is harmless (the inactive arc screen's absolutely-positioned
     content doesn't happen to land under anything clickable), but mobile's
     much taller stacked-column layout means the (inactive, but still
     internally "is-active") services row overlaps and steals clicks from
     the intro screen's View More button underneath it. Force every
     non-active top-level screen fully inert on mobile regardless of what
     its descendants set. */
  .malik-services__screen:not(.is-active),
  .malik-services__screen:not(.is-active) * {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Figma: 2431.9x1253 video, centered, top:294px — much wider than the
     1080px frame (deliberately bleeds off both edges), so it's centered
     and let the section's own overflow:hidden (.malik-section) clip it. */
  .malik-services__bg {
    width: 225.18vw; /* 2431.9px */
    max-width: 225.18vw;
    height: 115.09vw; /* 1253px */
    top: 27.22vw; /* 294px */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Screen 1: intro */
  .malik-services__screen[data-services-screen="intro"] { padding-top: 0; padding-bottom: 0; }
  .malik-services__heading {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    margin-top: 15.65vw; /* 169px, heading top from screen top */
    margin-bottom: 0;
  }
  .malik-services__intro {
    max-width: 97.04vw; /* 1048px */
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    /* Figma: intro top(1391) - heading bottom(169+94=263) */
    margin-top: 104.44vw;
    margin-bottom: 7.41vw;
  }
  .malik-services .malik-btn--outline {
    height: 7.41vw; /* 80px */
    padding: 0.93vw 5.56vw; /* 10px 60px */
    border-width: max(2px, 0.19vw);
    border-radius: 7.41vw; /* 80px */
    font-size: 3.70vw; /* 40px */
    line-height: 3.70vw;
  }

  /* Screens 2/3: arc panel (Services list / Malik Academy list) */
  .malik-services__screen[data-services-screen="arc"] {
    width: 97.04vw; /* 1048px */
    height: 98%;
    margin: 1.39vw auto; /* 15px inset all around, matches Figma's panel */
    padding: 6.85vw 4.63vw 7.41vw;
    border-radius: 9.26vw; /* 100px */
  }
  /* Desktop takes tabs/row/caption/pageinfo/back fully out of flow
     (position:absolute at fixed px) so the footer lands at a fixed spot
     regardless of active page. Mobile goes back to plain document-flow
     stacking — only the active page contributes layout height. */
  .malik-services__tabs {
    gap: 4.63vw;
    /* margin-top restores the panel's Figma top-inset (Group165 sits at
       panel-relative y:74, i.e. 6.85vw) for this row, the first visible
       child. The panel's own CSS padding-top (same 6.85vw value, further
       up in this file) can't do this job: .malik-services__arc-content
       is position:absolute + inset:0, so its containing block is the
       panel's PADDING box per spec — it renders flush with the panel's
       outer edge regardless of the panel's own padding, which never
       reaches this (or any) of its descendants. Confirmed via computed
       styles: the panel's padding-top resolves to a real px value, but
       .malik-services__tabs still rendered with a 0px gap from the panel
       edge before this rule. Shared by both the Services and Malik
       Academy pages (one tabs bar for both), so this fixes the top gap
       for both at once. */
    margin: 6.85vw 0 7.41vw;
  }
  .malik-services__tab {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    /* position:relative (not absolute, to avoid the documented mid-
       transition position-change bug on .is-entering below) + a baseline
       z-index so entering/active can be lifted above a still-fading
       .is-leaving sibling regardless of DOM order (see z-index comment
       on .is-entering: without this, "Academy"->"Services" rendered the
       incoming label UNDER the still-opaque outgoing one, since Services
       is always first in markup order and paints below by default). */
    position: relative;
    z-index: 1;
    /* width:100% (not just position) so the entering/active label gets the
       SAME full-row reference box .is-leaving already has (it's absolute
       with left:0/right:0, which stretches it) — without this, is-entering
       (deliberately kept position:static, see the comment on that rule)
       only had its own narrow text width to translateX() across, so it
       slid a much shorter distance than the outgoing label and barely read
       as motion. text-align:center (button default) keeps the label
       visually centered inside the wider box either way. */
    width: 100%;
    /* var(--malik-gentle), not the faster token: synced to match the row/
       page crossfade's own 1000ms (PAGE_FADE_MS in malik-main.js) so the
       tab title and the row settle together as one motion instead of the
       title finishing twice as fast and appearing to sit still while the
       row is still visibly changing underneath it. TAB_SLIDE_MS (JS) was
       bumped to 1000 to match. */
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Desktop shows both tabs (the inactive one grayed out, with room to
     spare in the 1204px panel); at mobile's much bigger font-to-panel-
     width ratio the pair together don't fit and the inactive one shows as
     an awkward cut-off peek at the panel's edge instead. Only one heading
     should be visible on mobile: the active screen's own. */
  .malik-services__tab:not(.is-active):not(.is-leaving) {
    display: none;
  }
  /* Slides the tab TITLE itself (nothing else in the row/panel) when
     switching Services<->Malik Academy via the arrows. Same "display can't
     transition" problem as .malik-arc-page's is-leaving/is-entering (see
     that CSS comment) and the same fix, applied to the tab buttons: JS
     (goTo() in malik-main.js) keeps the outgoing label painted long enough
     to slide+fade out, and paints the incoming one at an off-screen
     starting transform for one frame before releasing it into .is-active.
     --malik-tab-slide-dir (set inline by JS, ±1) is which side each half
     of the swap uses, so Services->Academy and Academy->Services read as
     one continuous carousel motion rather than both tabs always entering/
     exiting from the same side. Percentage (not px/vw) transforms so this
     is correct at every mobile breakpoint without retuning per tier. */
  .malik-services__tab.is-leaving,
  .malik-services__tab.is-entering {
    display: block;
  }
  /* is-leaving alone goes position:absolute (out of the flex flow, so the
     entering/active tab below is the row's sole flow item and stays
     centered) — is-entering deliberately does NOT: it's already the same
     position:static it'll have once it becomes .is-active a frame later,
     because a transform transition that ALSO crosses a position:absolute
     -> position:static change mid-flight doesn't reliably animate in
     Chromium/WebKit (confirmed empirically: with is-entering also set to
     position:absolute, the swap to .is-active jumped straight to
     translateX(0) with no visible slide at all, 0ms in). Keeping it
     static throughout means only transform/opacity ever change, so the
     transition has continuity the whole way. */
  .malik-services__tab.is-leaving {
    position: absolute;
    left: 0;
    right: 0;
    /* Full -100%/100% sweep: the outgoing label must clear completely
       (past its own full stretched width, since .is-leaving is absolute
       with left:0/right:0) before the incoming one lands, or the two
       overlap mid-transition on long labels like "Malik Academy" (a
       smaller nudge was tried and visibly overlapped the two labels). */
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * -100%));
    opacity: 0;
  }
  .malik-services__tab.is-entering {
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * 100%));
    opacity: 0;
    transition: none;
    /* Above .is-leaving (z-index:1 from the base rule) so the incoming
       label is always visible sliding in on top of the outgoing one,
       regardless of which is first in DOM order (Services is always
       first in markup - see section-services.php - so without this,
       Academy->Services rendered "Services" entering UNDERNEATH the
       still-opaque, same-width "Academy" exiting on top of it, hiding
       the slide-in almost entirely until the fade-out nearly finished). */
    z-index: 2;
  }
  .malik-services__tab.is-active {
    transform: translateX(0);
    z-index: 2;
  }
  /* Same crossfade pattern as the intro<->arc screen switch above (View
     More button): fade + scale between opacity:0/scale(0.96) and
     opacity:1/scale(1) - no per-page leave/enter class dance needed, since
     both pages stay permanently stacked/rendered (never display:none),
     which sidesteps the "display can't transition" problem entirely.
     Stacking is done via CSS Grid (both pages get grid-column/row:1 below)
     rather than position:absolute: a hardcoded height on .malik-arc would
     only account for the row and ignore the caption/pageinfo text below
     it, which varies with actual CMS content and could overflow if it
     ever wraps to more lines - grid's own auto-sizing instead sizes
     .malik-arc to whichever page's REAL content is tallest (normally
     Services), so it's correct regardless of copy length. Bonus: grid
     items never participate in margin collapsing, which independently
     prevents Academy's own row margin-top from ever leaking out and
     shifting .malik-arc's position (a real bug this exact layout hit
     before, when pages were plain normal-flow instead). */
  .malik-arc { position: relative; display: grid; }
  /* position:static (not position:absolute): grid auto-sizing only
     accounts for items actually participating in grid layout - an
     absolutely positioned child is taken out of grid flow and
     contributes nothing to its cell's size, which would defeat the
     auto-height behaviour above entirely. grid-column/row:1 on both pages
     puts them in the exact same cell, so they overlap and crossfade via
     the transform/transition below, added here (mobile-scoped) rather
     than on the shared base rule further up so desktop keeps its existing
     opacity-only crossfade untouched. */
  .malik-arc-page {
    position: static;
    grid-column: 1;
    grid-row: 1;
    /* align-self:start (not the grid default of stretch): without this,
       Academy's shorter content was being stretched to match Services'
       taller row height, which put scale(0.96)'s center-point (transform-
       origin defaults to the element's own box centre) at the centre of
       that STRETCHED box - well below Academy's actual content, which
       only fills the top portion of it. Scaling around the wrong point
       made Academy's content visibly shift as it grew from 0.96 to 1
       instead of settling cleanly in place. start keeps each page sized
       to its own real content (top-aligned within the taller row), so its
       scale origin always matches its own visual centre. */
    align-self: start;
    transform: scale(0.96);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
  }
  .malik-arc-page.is-active {
    transform: scale(1);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Figma stacks the nodes in a single vertical column, edge-to-edge
     (0 gap — the 277.94px circles sit exactly diameter-apart), with the
     prev/next arrow vertically centered against the whole stack. */
  .malik-arc-row {
    /* Desktop's rule sets position:absolute + top:249px for its own fixed-
       offset layout — position:relative here does NOT clear that top
       value (only position:static ignores top/left/right/bottom), so
       without resetting it explicitly the row renders 249px below its
       true flow position while every later sibling (caption/pageinfo/
       back) still reserves space as if it hadn't moved, overlapping them. */
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 0 7.41vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-row {
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 7.41vw; /* ~222px circle-to-circle rhythm minus each item's own height */
    /* Figma (Group 166, the timeline): top:625 relative to the panel's own
       content box, vs. the tabs' own bottom edge (top:89 + height:94 = 183)
       — a 442px gap, not the ~80px this shared with the services row's tabs-
       to-circles gap. 442 - the 80px the tabs' own margin-bottom already
       contributes = 362px (33.52vw) of ADDITIONAL top margin needed here,
       specific to the academy page. Similarly the gap from the row's own
       bottom (Group166 bottom:1211) to the caption's top (1411) is 200px
       (18.52vw) — much larger than the services page's 52px equivalent. */
    margin: 33.52vw 0 18.52vw;
  }
  .malik-arc-node {
    /* Desktop's circle-node text is Roboto Mono (its own Figma spec says
       so explicitly) — but the mobile "services mob." frame's text layers
       (Change management, HR and organizational development, etc.) are
       each explicitly Ubuntu Mono in Figma, a different typeface with
       different character widths/metrics. Left unset here it silently
       inherited the desktop rule's Roboto Mono, which is why text wrapped/
       sat differently under the circles than Figma shows even at the
       "right" font-size. */
    font-family: var(--malik-font-ubuntu);
    width: 25.74vw; /* 277.94px */
    height: 25.74vw;
    padding: 2vw;
    font-size: 3.12vw !important; /* 33.6753px */
    line-height: 3.15vw !important; /* 34px, ~100% per Figma's line-height:100% */
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-node--static {
    width: 90vw;
    height: auto;
    gap: 2.78vw; /* 30px, badge-to-label */
    /* Desktop's 19px/0.04em (its own Figma spec) never got a mobile
       override — the mobile "services mob." frame's TAILORED/IN-HOUSE/
       BUILT AROUND YOUR ORGANISATION labels are each explicitly font-
       size:40px, line-height:117.32%, plain letter-spacing in Figma, a
       different (much larger) size than desktop's small badge caption. */
    font-size: 3.70vw !important; /* 40px */
    line-height: 117.32% !important;
    letter-spacing: normal;
  }
  .malik-arc-node__num {
    width: 7.02vw; /* 65px */
    height: 7.02vw;
    font-size: 3.70vw; /* 40px */
    border-width: max(1px, 0.09vw);
  }
  /* Corrected: Figma's mobile "services mob." frame DOES show this badge,
     just only on the two circles that actually open a detail overlay
     (Individual Coaching, Management consulting...) - the non-clickable
     circles never render this span at all (see section-services.php's
     $has_detail branch), so no extra scoping is needed here, only a mobile
     size/position override. Figma: badge 56.471px on a 277.938px circle,
     bottom-anchored ~6.4px above the circle's own bottom edge (vs desktop's
     43px / 201px / 8px). The inline plus SVG has a literal 40px width/height
     attribute (sized for desktop's 43px badge) - scaled to a percentage here
     so it fills the smaller mobile badge instead of overflowing it. */
  .malik-arc-node__plus {
    width: 5.23vw; /* 56.47px */
    height: 5.23vw;
    bottom: 0.59vw; /* 6.4px */
  }
  .malik-arc-node__plus svg {
    width: 93%;
    height: 93%;
  }
  .malik-arc-caption {
    position: static;
    max-width: 97.04vw;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    margin: 0 auto 3.70vw;
  }
  .malik-services__pageinfo {
    position: static;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%; /* 47px */
    margin: 0 0 3.70vw;
  }
  /* Figma: BACK sits at left:68/top:920 within the "home (services)" frame
     — top:920 lands almost exactly on the row's own vertical centre (row
     spans 227 to 1614, midpoint ~920.5), i.e. it's NOT a footer button
     below the caption like desktop's Back — it's the row's LEFT-side nav
     element, mirroring the circular "next" arrow's position on the right.
     Absolutely positioned against the panel, taken out of flow entirely. */
  /* Selector specificity bumped to match (and win the cascade against)
     .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content
     > .malik-text-center (the shared exit-transition base rule, ~line 1814)
     which sets transform:translateY(0) at equal specificity (4 selectors)
     but appears earlier in the file — it was silently discarding this
     rule's translateY(-50%) on every real browser (confirmed via computed
     style: transform resolved to the identity matrix), leaving BACK
     rendered ~half its own height too low and visibly unaligned with the
     "next" arrow beside it, which centers correctly via a different,
     uncontested mechanism (top:50% of its own row). */
  .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content > .malik-services__back {
    position: absolute;
    left: 4.91vw; /* (68-15)px panel-relative */
    /* Figma's literal top:920 (row midpoint 920.5) assumes the row starts
       right after the tabs' 74px/94px block with a ~44px gap; the real
       flow gap here is wider (tabs margin-bottom 7.41vw), so the row
       actually renders ~3.5vw lower than that spec. Recalculated from the
       live flow instead (tabs top 6.85vw + height 8.70vw + margin-bottom
       7.41vw + row height 5x25.74vw / 2) so BACK's centre matches the
       "next" arrow's actual centre (top:50% of .malik-arc-row) rather than
       Figma's on-paper number, which is what was leaving BACK visibly
       higher than the arrow beside it. */
    top: 87.31vw;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
  }
  .malik-arc-page[data-arc-page="academy"] > .malik-text-center {
    position: static;
  }
  .malik-services__back .malik-btn--outline,
  .malik-arc-page[data-arc-page="academy"] .malik-btn--outline {
    height: 7.41vw;
    padding: 0.93vw 5.56vw;
    border-width: max(2px, 0.19vw);
    border-radius: 7.41vw;
    font-size: 3.70vw;
    line-height: 3.70vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw; /* 960px */
    max-width: 92vw;
    /* Figma sizes this button exactly to its label at this font-size (960px
       wide, 60px padding each side = 840px text box = the label's own
       Figma width:840/height:40, a single line) — nowrap reproduces that
       intent; since both the button and its font-size scale by the same
       vw factor at every breakpoint, the fit holds everywhere, same as it
       does at the 1080px reference frame. */
    white-space: nowrap;
  }
  /* Desktop's Back/Academy-CTA width morph (90px<->451px, keyed off
     data-active-page, see the comment on the base rule ~line 1654) is a
     desktop-only illusion: those two buttons share ONE absolutely-
     positioned footer slot there, so animating one's width to match the
     other's sells them as a single morphing button. On mobile they're laid
     out independently (own position:absolute rules above/below, never
     sharing a slot), so there's nothing to morph toward — but the base
     rule's width:451px is unconditional (only keyed off data-active-page,
     which mobile sets too) and outranks this tier's own width rules
     whenever academy is actually showing. Confirmed via computed style:
     Back was animating 90px->451px over 500ms while fully invisible
     (opacity:0), pure wasted reflow on every tab switch, and the CTA's
     rendered width was landing on this tier's 92vw max-width clamp
     instead of its real 88.89vw target — an unintended ~15px overshoot at
     every viewport. Repeating both selectors here at equal specificity,
     later in source order, wins the cascade back for this tier's own
     (correct, Figma-derived) widths regardless of which page is active. */
  .malik-services__screen[data-active-page="academy"] .malik-services__back .malik-btn--outline {
    width: auto;
  }
  .malik-services__screen[data-active-page="academy"] .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw;
    max-width: 92vw;
  }
  .malik-services__arrow {
    width: 7.41vw; /* 80px, services-page next arrow */
    height: 7.41vw;
    border-width: max(2px, 0.19vw);
  }
  .malik-arc-page[data-arc-page="academy"] .malik-services__arrow {
    width: 5.56vw; /* 60px, academy-page prev arrow — Figma sizes these differently */
    height: 5.56vw;
    border-width: max(1px, 0.11vw); /* 1.17647px, Figma Ellipse 224 stroke */
  }
  .malik-arc-row .malik-services__arrow--prev,
  .malik-arc-row .malik-services__arrow--next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Figma: academy's prev-arrow (Group 122, 60px) sits inset 126px from
     the panel's left edge = 11.67vw; services' next-arrow (also Group 122,
     but the 80px variant) sits inset 65px from the panel's right edge =
     6.02vw. The previous -1.85vw on both was a negative outset, not an
     inset, pushing each arrow 7-8px PAST the panel's own edge instead of
     inside it (confirmed via computed rects: the next-arrow's right edge
     measured beyond the panel's own right edge, not short of it). --prev
     only ever renders on the academy page and --next only on the services
     page, so these can target each arrow's own real Figma value directly
     without needing extra per-page scoping. */
  .malik-arc-row .malik-services__arrow--prev { left: 11.67vw; }
  .malik-arc-row .malik-services__arrow--next { right: 6.02vw; }
  /* Detail card (.malik-services__detail / .malik-services__close):
     rules now live once in the ≤1024px block above — this tier is
     narrower and inherits them unchanged, so nothing is redeclared here. */
}
@media (max-width: 480px) {
  /* ════════════════════════════════════════════════════════════════
     MOBILE SERVICES — pure vw scaling against Figma's mobile reference
     frame (1080px wide, "services mob." page), the same no-clamp vw
     convention already used elsewhere on mobile in this file (e.g. We Are
     Malik). Every rule here is scoped to this media query only — nothing
     above (desktop) is touched. factor = px / 1080 * 100.
  ════════════════════════════════════════════════════════════════ */

  .malik-services { min-height: 177.78vw; /* 1920px frame height */ }
  /* .malik-services__app's own min-height:810px (desktop, unconditional —
     see base rule) was never overridden here. A child's min-height forces
     its parent to be at least that tall regardless of the parent's own
     (smaller) min-height, so below ~455px viewport (810/1.7778) that fixed
     810px floor was winning over this section's proportional 177.78vw,
     silently decoupling the actual rendered height from Figma's aspect
     ratio at exactly the narrow widths where it matters most. */
  .malik-services__app { min-height: 190.78vw; }
  /* Every variant of this component (intro, services list, academy list,
     individual-coaching detail) shares the SAME 1080x1920 Figma frame, so
     the section's rendered height should be one constant regardless of
     which is active — it was previously inflated only while the Services
     page showed (on the theory its 5-item row needed more room than the
     frame allows), which instead made every variant render at a visibly
     different height on real devices. Removed now that the actual bug
     behind that theory (the tabs' missing top margin, pushing everything
     up and making the bottom look short) is fixed at its source. */
  /* A detail card open (.is-blurred) needs its own, smaller height than
     the 5-item Services row above — without this, the 210vw services-list
     floor kept winning even with a much shorter detail card open, leaving
     a large empty gap below the card before the next section. Comes after
     the rule above so it wins the cascade (equal specificity) whenever
     both are true at once. */
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) {
    min-height: 182vw;
  }
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) .malik-services__app {
    min-height: 180vw;
  }

  /* Figma's mobile spacing (15px panel inset, 16px text-block inset) is
     baked into each element's own margin against the full 1080px frame —
     there's no separate gutter layer. The sitewide .malik-container still
     adds its own 24px mobile padding on top of that, which also caps the
     arc panel's max-width:100% (inherited from desktop) short of its
     intended 97.04vw, collapsing its auto-margins to 0 and erasing the
     inset entirely. Removed here so every vw value below matches Figma
     against the true viewport width, same as desktop matches against the
     1444px container. */
  .malik-services .malik-container { padding-inline: 0; }

  /* .malik-arc-page.is-active sets visibility:visible (needed for the
     services<->academy crossfade) and .malik-arc-row sets pointer-events:
     auto — both explicit, descendant-level overrides that win over an
     ancestor's inherited visibility:hidden/pointer-events:none. On desktop
     this is harmless (the inactive arc screen's absolutely-positioned
     content doesn't happen to land under anything clickable), but mobile's
     much taller stacked-column layout means the (inactive, but still
     internally "is-active") services row overlaps and steals clicks from
     the intro screen's View More button underneath it. Force every
     non-active top-level screen fully inert on mobile regardless of what
     its descendants set. */
  .malik-services__screen:not(.is-active),
  .malik-services__screen:not(.is-active) * {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Figma: 2431.9x1253 video, centered, top:294px — much wider than the
     1080px frame (deliberately bleeds off both edges), so it's centered
     and let the section's own overflow:hidden (.malik-section) clip it. */
  .malik-services__bg {
    width: 225.18vw; /* 2431.9px */
    max-width: 225.18vw;
    height: 115.09vw; /* 1253px */
    top: 27.22vw; /* 294px */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Screen 1: intro */
  .malik-services__screen[data-services-screen="intro"] { padding-top: 0; padding-bottom: 0; }
  .malik-services__heading {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    margin-top: 15.65vw; /* 169px, heading top from screen top */
    margin-bottom: 0;
  }
  .malik-services__intro {
    max-width: 97.04vw; /* 1048px */
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    /* Figma: intro top(1391) - heading bottom(169+94=263) */
    margin-top: 104.44vw;
    margin-bottom: 7.41vw;
  }
  .malik-services .malik-btn--outline {
    height: 7.41vw; /* 80px */
    padding: 0.93vw 5.56vw; /* 10px 60px */
    /* border-width: max(2px, 0.19vw); */
    border-width: max(1px, 0.19vw);
    border-radius: 7.41vw; /* 80px */
    font-size: 3.70vw; /* 40px */
    line-height: 3.70vw;
  }

  /* Screens 2/3: arc panel (Services list / Malik Academy list) */
  .malik-services__screen[data-services-screen="arc"] {
    width: 97.04vw; /* 1048px */
    height: 98%;
    margin: 1.39vw auto; /* 15px inset all around, matches Figma's panel */
    padding: 6.85vw 4.63vw 9.41vw;
    border-radius: 9.26vw; /* 100px */
  }
  /* Desktop takes tabs/row/caption/pageinfo/back fully out of flow
     (position:absolute at fixed px) so the footer lands at a fixed spot
     regardless of active page. Mobile goes back to plain document-flow
     stacking — only the active page contributes layout height. */
  .malik-services__tabs {
    gap: 4.63vw;
    /* margin-top restores the panel's Figma top-inset (Group165 sits at
       panel-relative y:74, i.e. 6.85vw) for this row, the first visible
       child. The panel's own CSS padding-top (same 6.85vw value, further
       up in this file) can't do this job: .malik-services__arc-content
       is position:absolute + inset:0, so its containing block is the
       panel's PADDING box per spec — it renders flush with the panel's
       outer edge regardless of the panel's own padding, which never
       reaches this (or any) of its descendants. Confirmed via computed
       styles: the panel's padding-top resolves to a real px value, but
       .malik-services__tabs still rendered with a 0px gap from the panel
       edge before this rule. Shared by both the Services and Malik
       Academy pages (one tabs bar for both), so this fixes the top gap
       for both at once. */
    margin: 6.85vw 0 7.41vw;
  }
  .malik-services__tab {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    /* position:relative (not absolute, to avoid the documented mid-
       transition position-change bug on .is-entering below) + a baseline
       z-index so entering/active can be lifted above a still-fading
       .is-leaving sibling regardless of DOM order (see z-index comment
       on .is-entering: without this, "Academy"->"Services" rendered the
       incoming label UNDER the still-opaque outgoing one, since Services
       is always first in markup order and paints below by default). */
    position: relative;
    z-index: 1;
    /* width:100% (not just position) so the entering/active label gets the
       SAME full-row reference box .is-leaving already has (it's absolute
       with left:0/right:0, which stretches it) — without this, is-entering
       (deliberately kept position:static, see the comment on that rule)
       only had its own narrow text width to translateX() across, so it
       slid a much shorter distance than the outgoing label and barely read
       as motion. text-align:center (button default) keeps the label
       visually centered inside the wider box either way. */
    width: 100%;
    /* var(--malik-gentle), not the faster token: synced to match the row/
       page crossfade's own 1000ms (PAGE_FADE_MS in malik-main.js) so the
       tab title and the row settle together as one motion instead of the
       title finishing twice as fast and appearing to sit still while the
       row is still visibly changing underneath it. TAB_SLIDE_MS (JS) was
       bumped to 1000 to match. */
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Desktop shows both tabs (the inactive one grayed out, with room to
     spare in the 1204px panel); at mobile's much bigger font-to-panel-
     width ratio the pair together don't fit and the inactive one shows as
     an awkward cut-off peek at the panel's edge instead. Only one heading
     should be visible on mobile: the active screen's own. */
  .malik-services__tab:not(.is-active):not(.is-leaving) {
    display: none;
  }
  /* Slides the tab TITLE itself (nothing else in the row/panel) when
     switching Services<->Malik Academy via the arrows. Same "display can't
     transition" problem as .malik-arc-page's is-leaving/is-entering (see
     that CSS comment) and the same fix, applied to the tab buttons: JS
     (goTo() in malik-main.js) keeps the outgoing label painted long enough
     to slide+fade out, and paints the incoming one at an off-screen
     starting transform for one frame before releasing it into .is-active.
     --malik-tab-slide-dir (set inline by JS, ±1) is which side each half
     of the swap uses, so Services->Academy and Academy->Services read as
     one continuous carousel motion rather than both tabs always entering/
     exiting from the same side. Percentage (not px/vw) transforms so this
     is correct at every mobile breakpoint without retuning per tier. */
  .malik-services__tab.is-leaving,
  .malik-services__tab.is-entering {
    display: block;
  }
  /* is-leaving alone goes position:absolute (out of the flex flow, so the
     entering/active tab below is the row's sole flow item and stays
     centered) — is-entering deliberately does NOT: it's already the same
     position:static it'll have once it becomes .is-active a frame later,
     because a transform transition that ALSO crosses a position:absolute
     -> position:static change mid-flight doesn't reliably animate in
     Chromium/WebKit (confirmed empirically: with is-entering also set to
     position:absolute, the swap to .is-active jumped straight to
     translateX(0) with no visible slide at all, 0ms in). Keeping it
     static throughout means only transform/opacity ever change, so the
     transition has continuity the whole way. */
  .malik-services__tab.is-leaving {
    position: absolute;
    left: 0;
    right: 0;
    /* Full -100%/100% sweep: the outgoing label must clear completely
       (past its own full stretched width, since .is-leaving is absolute
       with left:0/right:0) before the incoming one lands, or the two
       overlap mid-transition on long labels like "Malik Academy" (a
       smaller nudge was tried and visibly overlapped the two labels). */
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * -100%));
    opacity: 0;
  }
  .malik-services__tab.is-entering {
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * 100%));
    opacity: 0;
    transition: none;
    /* Above .is-leaving (z-index:1 from the base rule) so the incoming
       label is always visible sliding in on top of the outgoing one,
       regardless of which is first in DOM order (Services is always
       first in markup - see section-services.php - so without this,
       Academy->Services rendered "Services" entering UNDERNEATH the
       still-opaque, same-width "Academy" exiting on top of it, hiding
       the slide-in almost entirely until the fade-out nearly finished). */
    z-index: 2;
  }
  .malik-services__tab.is-active {
    transform: translateX(0);
    z-index: 2;
  }
  /* Same crossfade pattern as the intro<->arc screen switch above (View
     More button): fade + scale between opacity:0/scale(0.96) and
     opacity:1/scale(1) - no per-page leave/enter class dance needed, since
     both pages stay permanently stacked/rendered (never display:none),
     which sidesteps the "display can't transition" problem entirely.
     Stacking is done via CSS Grid (both pages get grid-column/row:1 below)
     rather than position:absolute: a hardcoded height on .malik-arc would
     only account for the row and ignore the caption/pageinfo text below
     it, which varies with actual CMS content and could overflow if it
     ever wraps to more lines - grid's own auto-sizing instead sizes
     .malik-arc to whichever page's REAL content is tallest (normally
     Services), so it's correct regardless of copy length. Bonus: grid
     items never participate in margin collapsing, which independently
     prevents Academy's own row margin-top from ever leaking out and
     shifting .malik-arc's position (a real bug this exact layout hit
     before, when pages were plain normal-flow instead). */
  .malik-arc { position: relative; display: grid; }
  /* position:static (not position:absolute): grid auto-sizing only
     accounts for items actually participating in grid layout - an
     absolutely positioned child is taken out of grid flow and
     contributes nothing to its cell's size, which would defeat the
     auto-height behaviour above entirely. grid-column/row:1 on both pages
     puts them in the exact same cell, so they overlap and crossfade via
     the transform/transition below, added here (mobile-scoped) rather
     than on the shared base rule further up so desktop keeps its existing
     opacity-only crossfade untouched. */
  .malik-arc-page {
    position: static;
    grid-column: 1;
    grid-row: 1;
    /* align-self:start (not the grid default of stretch): without this,
       Academy's shorter content was being stretched to match Services'
       taller row height, which put scale(0.96)'s center-point (transform-
       origin defaults to the element's own box centre) at the centre of
       that STRETCHED box - well below Academy's actual content, which
       only fills the top portion of it. Scaling around the wrong point
       made Academy's content visibly shift as it grew from 0.96 to 1
       instead of settling cleanly in place. start keeps each page sized
       to its own real content (top-aligned within the taller row), so its
       scale origin always matches its own visual centre. */
    align-self: start;
    transform: scale(0.96);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
  }
  .malik-arc-page.is-active {
    transform: scale(1);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Figma stacks the nodes in a single vertical column, edge-to-edge
     (0 gap — the 277.94px circles sit exactly diameter-apart), with the
     prev/next arrow vertically centered against the whole stack. */
  .malik-arc-row {
    /* Desktop's rule sets position:absolute + top:249px for its own fixed-
       offset layout — position:relative here does NOT clear that top
       value (only position:static ignores top/left/right/bottom), so
       without resetting it explicitly the row renders 249px below its
       true flow position while every later sibling (caption/pageinfo/
       back) still reserves space as if it hadn't moved, overlapping them. */
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 0 7.41vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-row {
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 7.41vw; /* ~222px circle-to-circle rhythm minus each item's own height */
    /* Figma (Group 166, the timeline): top:625 relative to the panel's own
       content box, vs. the tabs' own bottom edge (top:89 + height:94 = 183)
       — a 442px gap, not the ~80px this shared with the services row's tabs-
       to-circles gap. 442 - the 80px the tabs' own margin-bottom already
       contributes = 362px (33.52vw) of ADDITIONAL top margin needed here,
       specific to the academy page. Similarly the gap from the row's own
       bottom (Group166 bottom:1211) to the caption's top (1411) is 200px
       (18.52vw) — much larger than the services page's 52px equivalent. */
    margin: 33.52vw 0 18.52vw;
  }
  .malik-arc-node {
    /* Desktop's circle-node text is Roboto Mono (its own Figma spec says
       so explicitly) — but the mobile "services mob." frame's text layers
       (Change management, HR and organizational development, etc.) are
       each explicitly Ubuntu Mono in Figma, a different typeface with
       different character widths/metrics. Left unset here it silently
       inherited the desktop rule's Roboto Mono, which is why text wrapped/
       sat differently under the circles than Figma shows even at the
       "right" font-size. */
    font-family: var(--malik-font-ubuntu);
    width: 25.74vw; /* 277.94px */
    height: 25.74vw;
    padding: 2vw;
    font-size: 3.12vw !important; /* 33.6753px */
    line-height: 3.15vw !important; /* 34px, ~100% per Figma's line-height:100% */
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-node--static {
    width: 90vw;
    height: auto;
    gap: 2.78vw; /* 30px, badge-to-label */
    /* Desktop's 19px/0.04em (its own Figma spec) never got a mobile
       override — the mobile "services mob." frame's TAILORED/IN-HOUSE/
       BUILT AROUND YOUR ORGANISATION labels are each explicitly font-
       size:40px, line-height:117.32%, plain letter-spacing in Figma, a
       different (much larger) size than desktop's small badge caption. */
    font-size: 3.70vw !important; /* 40px */
    line-height: 117.32% !important;
    letter-spacing: normal;
  }
  .malik-arc-node__num {
    width: 7.02vw; /* 65px */
    height: 7.02vw;
    font-size: 3.70vw; /* 40px */
    border-width: max(1px, 0.09vw);
  }
  /* Corrected: Figma's mobile "services mob." frame DOES show this badge,
     just only on the two circles that actually open a detail overlay
     (Individual Coaching, Management consulting...) - the non-clickable
     circles never render this span at all (see section-services.php's
     $has_detail branch), so no extra scoping is needed here, only a mobile
     size/position override. Figma: badge 56.471px on a 277.938px circle,
     bottom-anchored ~6.4px above the circle's own bottom edge (vs desktop's
     43px / 201px / 8px). The inline plus SVG has a literal 40px width/height
     attribute (sized for desktop's 43px badge) - scaled to a percentage here
     so it fills the smaller mobile badge instead of overflowing it. */
  .malik-arc-node__plus {
    width: 5.23vw; /* 56.47px */
    height: 5.23vw;
    bottom: 0.59vw; /* 6.4px */
  }
  .malik-arc-node__plus svg {
    width: 93%;
    height: 93%;
  }
  .malik-arc-caption {
    position: static;
    max-width: 97.04vw;
    font-size: 3.70vw; /* 40px */
    font-weight: 400;
    line-height: 117.32%;
    margin: 0 auto 3.70vw;
  }
  .malik-services__pageinfo {
    position: static;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%; /* 47px */
    margin: 0 0 3.70vw;
  }
  /* Figma: BACK sits at left:68/top:920 within the "home (services)" frame
     — top:920 lands almost exactly on the row's own vertical centre (row
     spans 227 to 1614, midpoint ~920.5), i.e. it's NOT a footer button
     below the caption like desktop's Back — it's the row's LEFT-side nav
     element, mirroring the circular "next" arrow's position on the right.
     Absolutely positioned against the panel, taken out of flow entirely. */
  /* Selector specificity bumped to match (and win the cascade against)
     .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content
     > .malik-text-center (the shared exit-transition base rule, ~line 1814)
     which sets transform:translateY(0) at equal specificity (4 selectors)
     but appears earlier in the file — it was silently discarding this
     rule's translateY(-50%) on every real browser (confirmed via computed
     style: transform resolved to the identity matrix), leaving BACK
     rendered ~half its own height too low and visibly unaligned with the
     "next" arrow beside it, which centers correctly via a different,
     uncontested mechanism (top:50% of its own row). */
  .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content > .malik-services__back {
    position: absolute;
    left: 4.91vw; /* (68-15)px panel-relative */
    /* Figma's literal top:920 (row midpoint 920.5) assumes the row starts
       right after the tabs' 74px/94px block with a ~44px gap; the real
       flow gap here is wider (tabs margin-bottom 7.41vw), so the row
       actually renders ~3.5vw lower than that spec. Recalculated from the
       live flow instead (tabs top 6.85vw + height 8.70vw + margin-bottom
       7.41vw + row height 5x25.74vw / 2) so BACK's centre matches the
       "next" arrow's actual centre (top:50% of .malik-arc-row) rather than
       Figma's on-paper number, which is what was leaving BACK visibly
       higher than the arrow beside it. */
    top: 87.31vw;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
  }
  .malik-arc-page[data-arc-page="academy"] > .malik-text-center {
    position: static;
  }
  .malik-services__back .malik-btn--outline,
  .malik-arc-page[data-arc-page="academy"] .malik-btn--outline {
    height: 7.41vw;
    padding: 0.93vw 5.56vw;
    /* No max(1px, ...) floor at this tier: the true proportional value
       here (0.19vw) is already ~0.75-0.84px across the iPhone 16/17 range
       (393-440px) — a 1px floor inflates that by 25-33%, reading as a
       visibly heavier ring than Figma's 2px-at-1080-reference stroke
       (confirmed against the raw exported SVG's stroke-width:2, viewBox
       0 0 80 80). Retina screens render sub-1px borders crisply, so unlike
       the floor's general justification elsewhere in this file, it isn't
       needed here. */
    border-width: 0.19vw;
    border-radius: 7.41vw;
    font-size: 3.70vw;
    line-height: 3.70vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw; /* 960px */
    max-width: 92vw;
    /* Figma sizes this button exactly to its label at this font-size (960px
       wide, 60px padding each side = 840px text box = the label's own
       Figma width:840/height:40, a single line) — nowrap reproduces that
       intent; since both the button and its font-size scale by the same
       vw factor at every breakpoint, the fit holds everywhere, same as it
       does at the 1080px reference frame. */
    white-space: nowrap;
  }
  /* Desktop's Back/Academy-CTA width morph (90px<->451px, keyed off
     data-active-page, see the comment on the base rule ~line 1654) is a
     desktop-only illusion: those two buttons share ONE absolutely-
     positioned footer slot there, so animating one's width to match the
     other's sells them as a single morphing button. On mobile they're laid
     out independently (own position:absolute rules above/below, never
     sharing a slot), so there's nothing to morph toward — but the base
     rule's width:451px is unconditional (only keyed off data-active-page,
     which mobile sets too) and outranks this tier's own width rules
     whenever academy is actually showing. Confirmed via computed style:
     Back was animating 90px->451px over 500ms while fully invisible
     (opacity:0), pure wasted reflow on every tab switch, and the CTA's
     rendered width was landing on this tier's 92vw max-width clamp
     instead of its real 88.89vw target — an unintended ~15px overshoot at
     every viewport. Repeating both selectors here at equal specificity,
     later in source order, wins the cascade back for this tier's own
     (correct, Figma-derived) widths regardless of which page is active. */
  .malik-services__screen[data-active-page="academy"] .malik-services__back .malik-btn--outline {
    width: auto;
  }
  .malik-services__screen[data-active-page="academy"] .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw;
    max-width: 92vw;
  }
  .malik-services__arrow {
    width: 7.41vw; /* 80px, services-page next arrow */
    height: 7.41vw;
    /* See the matching comment on .malik-services__back .malik-btn--outline
       above — same floor-inflation issue, same Figma stroke-width:2 source. */
    border-width: 0.19vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-services__arrow {
    width: 8.56vw; /* 60px, academy-page prev arrow — Figma sizes these differently */
    height: 8.56vw;
    border-width: max(1px, 0.11vw); /* 1.17647px, Figma Ellipse 224 stroke */
  }
  .malik-arc-row .malik-services__arrow--prev,
  .malik-arc-row .malik-services__arrow--next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Figma: academy's prev-arrow (Group 122, 60px) sits inset 126px from
     the panel's left edge = 11.67vw; services' next-arrow (also Group 122,
     but the 80px variant) sits inset 65px from the panel's right edge =
     6.02vw. The previous -1.85vw on both was a negative outset, not an
     inset, pushing each arrow 7-8px PAST the panel's own edge instead of
     inside it (confirmed via computed rects: the next-arrow's right edge
     measured beyond the panel's own right edge, not short of it). --prev
     only ever renders on the academy page and --next only on the services
     page, so these can target each arrow's own real Figma value directly
     without needing extra per-page scoping. */
  .malik-arc-row .malik-services__arrow--prev { left: 11.67vw; }
  .malik-arc-row .malik-services__arrow--next { right: 6.02vw; }
  /* Detail card (.malik-services__detail / .malik-services__close):
     rules now live once in the ≤1024px block above — this tier is
     narrower and inherits them unchanged, so nothing is redeclared here. */
}

@media (max-width: 390px) {
  /* ════════════════════════════════════════════════════════════════
     MOBILE SERVICES — pure vw scaling against Figma's mobile reference
     frame (1080px wide, "services mob." page), the same no-clamp vw
     convention already used elsewhere on mobile in this file (e.g. We Are
     Malik). Every rule here is scoped to this media query only — nothing
     above (desktop) is touched. factor = px / 1080 * 100.
  ════════════════════════════════════════════════════════════════ */

  .malik-services { min-height: 177.78vw; /* 1920px frame height */ }
  /* .malik-services__app's own min-height:810px (desktop, unconditional —
     see base rule) was never overridden here. A child's min-height forces
     its parent to be at least that tall regardless of the parent's own
     (smaller) min-height, so below ~455px viewport (810/1.7778) that fixed
     810px floor was winning over this section's proportional 177.78vw,
     silently decoupling the actual rendered height from Figma's aspect
     ratio at exactly the narrow widths where it matters most. */
  .malik-services__app { min-height: 180.78vw; }
  /* Every variant of this component (intro, services list, academy list,
     individual-coaching detail) shares the SAME 1080x1920 Figma frame, so
     the section's rendered height should be one constant regardless of
     which is active — it was previously inflated only while the Services
     page showed (on the theory its 5-item row needed more room than the
     frame allows), which instead made every variant render at a visibly
     different height on real devices. Removed now that the actual bug
     behind that theory (the tabs' missing top margin, pushing everything
     up and making the bottom look short) is fixed at its source. */
  /* A detail card open (.is-blurred) needs its own, smaller height than
     the 5-item Services row above — without this, the 210vw services-list
     floor kept winning even with a much shorter detail card open, leaving
     a large empty gap below the card before the next section. Comes after
     the rule above so it wins the cascade (equal specificity) whenever
     both are true at once. */
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) {
    min-height: 182vw;
  }
  .malik-services:has(.malik-services__screen[data-services-screen="arc"].is-active.is-blurred) .malik-services__app {
    min-height: 180vw;
  }

  /* Figma's mobile spacing (15px panel inset, 16px text-block inset) is
     baked into each element's own margin against the full 1080px frame —
     there's no separate gutter layer. The sitewide .malik-container still
     adds its own 24px mobile padding on top of that, which also caps the
     arc panel's max-width:100% (inherited from desktop) short of its
     intended 97.04vw, collapsing its auto-margins to 0 and erasing the
     inset entirely. Removed here so every vw value below matches Figma
     against the true viewport width, same as desktop matches against the
     1444px container. */
  .malik-services .malik-container { padding-inline: 0; }

  /* .malik-arc-page.is-active sets visibility:visible (needed for the
     services<->academy crossfade) and .malik-arc-row sets pointer-events:
     auto — both explicit, descendant-level overrides that win over an
     ancestor's inherited visibility:hidden/pointer-events:none. On desktop
     this is harmless (the inactive arc screen's absolutely-positioned
     content doesn't happen to land under anything clickable), but mobile's
     much taller stacked-column layout means the (inactive, but still
     internally "is-active") services row overlaps and steals clicks from
     the intro screen's View More button underneath it. Force every
     non-active top-level screen fully inert on mobile regardless of what
     its descendants set. */
  .malik-services__screen:not(.is-active),
  .malik-services__screen:not(.is-active) * {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Figma: 2431.9x1253 video, centered, top:294px — much wider than the
     1080px frame (deliberately bleeds off both edges), so it's centered
     and let the section's own overflow:hidden (.malik-section) clip it. */
  .malik-services__bg {
    width: 225.18vw; /* 2431.9px */
    max-width: 225.18vw;
    height: 115.09vw; /* 1253px */
    top: 27.22vw; /* 294px */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Screen 1: intro */
  .malik-services__screen[data-services-screen="intro"] { padding-top: 0; padding-bottom: 0; }
  .malik-services__heading {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    margin-top: 15.65vw; /* 169px, heading top from screen top */
    margin-bottom: 0;
  }
  .malik-services__intro {
    max-width: 97.04vw; /* 1048px */
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    /* Figma: intro top(1391) - heading bottom(169+94=263) */
    margin-top: 104.44vw;
    margin-bottom: 7.41vw;
  }
  .malik-services .malik-btn--outline {
    height: 7.41vw; /* 80px */
    padding: 0.93vw 5.56vw; /* 10px 60px */
    border-width: max(1px, 0.19vw);
    border-radius: 7.41vw; /* 80px */
    font-size: 3.70vw; /* 40px */
    line-height: 3.70vw;
  }

  /* Screens 2/3: arc panel (Services list / Malik Academy list) */
  .malik-services__screen[data-services-screen="arc"] {
    width: 97.04vw; /* 1048px */
    height: 98%;
    margin: 1.39vw auto; /* 15px inset all around, matches Figma's panel */
    padding: 6.85vw 4.63vw 7.41vw;
    border-radius: 9.26vw; /* 100px */
  }
  /* Desktop takes tabs/row/caption/pageinfo/back fully out of flow
     (position:absolute at fixed px) so the footer lands at a fixed spot
     regardless of active page. Mobile goes back to plain document-flow
     stacking — only the active page contributes layout height. */
  .malik-services__tabs {
    gap: 4.63vw;
    /* margin-top restores the panel's Figma top-inset (Group165 sits at
       panel-relative y:74, i.e. 6.85vw) for this row, the first visible
       child. The panel's own CSS padding-top (same 6.85vw value, further
       up in this file) can't do this job: .malik-services__arc-content
       is position:absolute + inset:0, so its containing block is the
       panel's PADDING box per spec — it renders flush with the panel's
       outer edge regardless of the panel's own padding, which never
       reaches this (or any) of its descendants. Confirmed via computed
       styles: the panel's padding-top resolves to a real px value, but
       .malik-services__tabs still rendered with a 0px gap from the panel
       edge before this rule. Shared by both the Services and Malik
       Academy pages (one tabs bar for both), so this fixes the top gap
       for both at once. */
    margin: 6.85vw 0 7.41vw;
  }
  .malik-services__tab {
    font-size: 7.41vw; /* 80px */
    line-height: 8.70vw; /* 94px */
    /* position:relative (not absolute, to avoid the documented mid-
       transition position-change bug on .is-entering below) + a baseline
       z-index so entering/active can be lifted above a still-fading
       .is-leaving sibling regardless of DOM order (see z-index comment
       on .is-entering: without this, "Academy"->"Services" rendered the
       incoming label UNDER the still-opaque outgoing one, since Services
       is always first in markup order and paints below by default). */
    position: relative;
    z-index: 1;
    /* width:100% (not just position) so the entering/active label gets the
       SAME full-row reference box .is-leaving already has (it's absolute
       with left:0/right:0, which stretches it) — without this, is-entering
       (deliberately kept position:static, see the comment on that rule)
       only had its own narrow text width to translateX() across, so it
       slid a much shorter distance than the outgoing label and barely read
       as motion. text-align:center (button default) keeps the label
       visually centered inside the wider box either way. */
    width: 100%;
    /* var(--malik-gentle), not the faster token: synced to match the row/
       page crossfade's own 1000ms (PAGE_FADE_MS in malik-main.js) so the
       tab title and the row settle together as one motion instead of the
       title finishing twice as fast and appearing to sit still while the
       row is still visibly changing underneath it. TAB_SLIDE_MS (JS) was
       bumped to 1000 to match. */
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Desktop shows both tabs (the inactive one grayed out, with room to
     spare in the 1204px panel); at mobile's much bigger font-to-panel-
     width ratio the pair together don't fit and the inactive one shows as
     an awkward cut-off peek at the panel's edge instead. Only one heading
     should be visible on mobile: the active screen's own. */
  .malik-services__tab:not(.is-active):not(.is-leaving) {
    display: none;
  }
  /* Slides the tab TITLE itself (nothing else in the row/panel) when
     switching Services<->Malik Academy via the arrows. Same "display can't
     transition" problem as .malik-arc-page's is-leaving/is-entering (see
     that CSS comment) and the same fix, applied to the tab buttons: JS
     (goTo() in malik-main.js) keeps the outgoing label painted long enough
     to slide+fade out, and paints the incoming one at an off-screen
     starting transform for one frame before releasing it into .is-active.
     --malik-tab-slide-dir (set inline by JS, ±1) is which side each half
     of the swap uses, so Services->Academy and Academy->Services read as
     one continuous carousel motion rather than both tabs always entering/
     exiting from the same side. Percentage (not px/vw) transforms so this
     is correct at every mobile breakpoint without retuning per tier. */
  .malik-services__tab.is-leaving,
  .malik-services__tab.is-entering {
    display: block;
  }
  /* is-leaving alone goes position:absolute (out of the flex flow, so the
     entering/active tab below is the row's sole flow item and stays
     centered) — is-entering deliberately does NOT: it's already the same
     position:static it'll have once it becomes .is-active a frame later,
     because a transform transition that ALSO crosses a position:absolute
     -> position:static change mid-flight doesn't reliably animate in
     Chromium/WebKit (confirmed empirically: with is-entering also set to
     position:absolute, the swap to .is-active jumped straight to
     translateX(0) with no visible slide at all, 0ms in). Keeping it
     static throughout means only transform/opacity ever change, so the
     transition has continuity the whole way. */
  .malik-services__tab.is-leaving {
    position: absolute;
    left: 0;
    right: 0;
    /* Full -100%/100% sweep: the outgoing label must clear completely
       (past its own full stretched width, since .is-leaving is absolute
       with left:0/right:0) before the incoming one lands, or the two
       overlap mid-transition on long labels like "Malik Academy" (a
       smaller nudge was tried and visibly overlapped the two labels). */
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * -100%));
    opacity: 0;
  }
  .malik-services__tab.is-entering {
    transform: translateX(calc(var(--malik-tab-slide-dir, 1) * 100%));
    opacity: 0;
    transition: none;
    /* Above .is-leaving (z-index:1 from the base rule) so the incoming
       label is always visible sliding in on top of the outgoing one,
       regardless of which is first in DOM order (Services is always
       first in markup - see section-services.php - so without this,
       Academy->Services rendered "Services" entering UNDERNEATH the
       still-opaque, same-width "Academy" exiting on top of it, hiding
       the slide-in almost entirely until the fade-out nearly finished). */
    z-index: 2;
  }
  .malik-services__tab.is-active {
    transform: translateX(0);
    z-index: 2;
  }
  /* Same crossfade pattern as the intro<->arc screen switch above (View
     More button): fade + scale between opacity:0/scale(0.96) and
     opacity:1/scale(1) - no per-page leave/enter class dance needed, since
     both pages stay permanently stacked/rendered (never display:none),
     which sidesteps the "display can't transition" problem entirely.
     Stacking is done via CSS Grid (both pages get grid-column/row:1 below)
     rather than position:absolute: a hardcoded height on .malik-arc would
     only account for the row and ignore the caption/pageinfo text below
     it, which varies with actual CMS content and could overflow if it
     ever wraps to more lines - grid's own auto-sizing instead sizes
     .malik-arc to whichever page's REAL content is tallest (normally
     Services), so it's correct regardless of copy length. Bonus: grid
     items never participate in margin collapsing, which independently
     prevents Academy's own row margin-top from ever leaking out and
     shifting .malik-arc's position (a real bug this exact layout hit
     before, when pages were plain normal-flow instead). */
  .malik-arc { position: relative; display: grid; }
  /* position:static (not position:absolute): grid auto-sizing only
     accounts for items actually participating in grid layout - an
     absolutely positioned child is taken out of grid flow and
     contributes nothing to its cell's size, which would defeat the
     auto-height behaviour above entirely. grid-column/row:1 on both pages
     puts them in the exact same cell, so they overlap and crossfade via
     the transform/transition below, added here (mobile-scoped) rather
     than on the shared base rule further up so desktop keeps its existing
     opacity-only crossfade untouched. */
  .malik-arc-page {
    position: static;
    grid-column: 1;
    grid-row: 1;
    /* align-self:start (not the grid default of stretch): without this,
       Academy's shorter content was being stretched to match Services'
       taller row height, which put scale(0.96)'s center-point (transform-
       origin defaults to the element's own box centre) at the centre of
       that STRETCHED box - well below Academy's actual content, which
       only fills the top portion of it. Scaling around the wrong point
       made Academy's content visibly shift as it grew from 0.96 to 1
       instead of settling cleanly in place. start keeps each page sized
       to its own real content (top-aligned within the taller row), so its
       scale origin always matches its own visual centre. */
    align-self: start;
    transform: scale(0.96);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle), visibility 0s linear var(--malik-gentle-duration);
  }
  .malik-arc-page.is-active {
    transform: scale(1);
    transition: opacity var(--malik-gentle), transform var(--malik-gentle);
  }
  /* Figma stacks the nodes in a single vertical column, edge-to-edge
     (0 gap — the 277.94px circles sit exactly diameter-apart), with the
     prev/next arrow vertically centered against the whole stack. */
  .malik-arc-row {
    /* Desktop's rule sets position:absolute + top:249px for its own fixed-
       offset layout — position:relative here does NOT clear that top
       value (only position:static ignores top/left/right/bottom), so
       without resetting it explicitly the row renders 249px below its
       true flow position while every later sibling (caption/pageinfo/
       back) still reserves space as if it hadn't moved, overlapping them. */
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 0 7.41vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-row {
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    flex-direction: column;
    align-items: center;
    gap: 7.41vw; /* ~222px circle-to-circle rhythm minus each item's own height */
    /* Figma (Group 166, the timeline): top:625 relative to the panel's own
       content box, vs. the tabs' own bottom edge (top:89 + height:94 = 183)
       — a 442px gap, not the ~80px this shared with the services row's tabs-
       to-circles gap. 442 - the 80px the tabs' own margin-bottom already
       contributes = 362px (33.52vw) of ADDITIONAL top margin needed here,
       specific to the academy page. Similarly the gap from the row's own
       bottom (Group166 bottom:1211) to the caption's top (1411) is 200px
       (18.52vw) — much larger than the services page's 52px equivalent. */
    margin: 33.52vw 0 18.52vw;
  }
  .malik-arc-node {
    /* Desktop's circle-node text is Roboto Mono (its own Figma spec says
       so explicitly) — but the mobile "services mob." frame's text layers
       (Change management, HR and organizational development, etc.) are
       each explicitly Ubuntu Mono in Figma, a different typeface with
       different character widths/metrics. Left unset here it silently
       inherited the desktop rule's Roboto Mono, which is why text wrapped/
       sat differently under the circles than Figma shows even at the
       "right" font-size. */
    font-family: var(--malik-font-ubuntu);
    width: 25.74vw; /* 277.94px */
    height: 25.74vw;
    padding: 2vw;
    font-size: 3.12vw !important; /* 33.6753px */
    line-height: 3.15vw !important; /* 34px, ~100% per Figma's line-height:100% */
  }
  .malik-arc-page[data-arc-page="academy"] .malik-arc-node--static {
    width: 90vw;
    height: auto;
    gap: 2.78vw; /* 30px, badge-to-label */
    /* Desktop's 19px/0.04em (its own Figma spec) never got a mobile
       override — the mobile "services mob." frame's TAILORED/IN-HOUSE/
       BUILT AROUND YOUR ORGANISATION labels are each explicitly font-
       size:40px, line-height:117.32%, plain letter-spacing in Figma, a
       different (much larger) size than desktop's small badge caption. */
    font-size: 3.70vw !important; /* 40px */
    line-height: 117.32% !important;
    letter-spacing: normal;
  }
  .malik-arc-node__num {
    width: 7.02vw; /* 65px */
    height: 7.02vw;
    font-size: 3.70vw; /* 40px */
    border-width: max(1px, 0.09vw);
  }
  /* Corrected: Figma's mobile "services mob." frame DOES show this badge,
     just only on the two circles that actually open a detail overlay
     (Individual Coaching, Management consulting...) - the non-clickable
     circles never render this span at all (see section-services.php's
     $has_detail branch), so no extra scoping is needed here, only a mobile
     size/position override. Figma: badge 56.471px on a 277.938px circle,
     bottom-anchored ~6.4px above the circle's own bottom edge (vs desktop's
     43px / 201px / 8px). The inline plus SVG has a literal 40px width/height
     attribute (sized for desktop's 43px badge) - scaled to a percentage here
     so it fills the smaller mobile badge instead of overflowing it. */
  .malik-arc-node__plus {
    width: 5.23vw; /* 56.47px */
    height: 5.23vw;
    bottom: 0.59vw; /* 6.4px */
  }
  .malik-arc-node__plus svg {
    width: 93%;
    height: 93%;
  }
  .malik-arc-caption {
    position: static;
    max-width: 97.04vw;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%;
    margin: 0 auto 3.70vw;
  }
  .malik-services__pageinfo {
    position: static;
    font-size: 3.70vw; /* 40px */
    line-height: 117.32%; /* 47px */
    margin: 0 0 3.70vw;
  }
  /* Figma: BACK sits at left:68/top:920 within the "home (services)" frame
     — top:920 lands almost exactly on the row's own vertical centre (row
     spans 227 to 1614, midpoint ~920.5), i.e. it's NOT a footer button
     below the caption like desktop's Back — it's the row's LEFT-side nav
     element, mirroring the circular "next" arrow's position on the right.
     Absolutely positioned against the panel, taken out of flow entirely. */
  /* Selector specificity bumped to match (and win the cascade against)
     .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content
     > .malik-text-center (the shared exit-transition base rule, ~line 1814)
     which sets transform:translateY(0) at equal specificity (4 selectors)
     but appears earlier in the file — it was silently discarding this
     rule's translateY(-50%) on every real browser (confirmed via computed
     style: transform resolved to the identity matrix), leaving BACK
     rendered ~half its own height too low and visibly unaligned with the
     "next" arrow beside it, which centers correctly via a different,
     uncontested mechanism (top:50% of its own row). */
  .malik-services__screen[data-services-screen="arc"] .malik-services__arc-content > .malik-services__back {
    position: absolute;
    left: 4.91vw; /* (68-15)px panel-relative */
    /* Figma's literal top:920 (row midpoint 920.5) assumes the row starts
       right after the tabs' 74px/94px block with a ~44px gap; the real
       flow gap here is wider (tabs margin-bottom 7.41vw), so the row
       actually renders ~3.5vw lower than that spec. Recalculated from the
       live flow instead (tabs top 6.85vw + height 8.70vw + margin-bottom
       7.41vw + row height 5x25.74vw / 2) so BACK's centre matches the
       "next" arrow's actual centre (top:50% of .malik-arc-row) rather than
       Figma's on-paper number, which is what was leaving BACK visibly
       higher than the arrow beside it. */
    top: 87.31vw;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
  }
  .malik-arc-page[data-arc-page="academy"] > .malik-text-center {
    position: static;
  }
  .malik-services__back .malik-btn--outline,
  .malik-arc-page[data-arc-page="academy"] .malik-btn--outline {
    height: 9.41vw;
    padding: 0.93vw 5.56vw;
    border-width: max(2px, 0.19vw);
    border-radius: 7.41vw;
    font-size: 3.70vw;
    line-height: 3.70vw;
  }
  .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw; /* 960px */
    max-width: 92vw;
    /* Figma sizes this button exactly to its label at this font-size (960px
       wide, 60px padding each side = 840px text box = the label's own
       Figma width:840/height:40, a single line) — nowrap reproduces that
       intent; since both the button and its font-size scale by the same
       vw factor at every breakpoint, the fit holds everywhere, same as it
       does at the 1080px reference frame. */
    white-space: nowrap;
  }
  /* Desktop's Back/Academy-CTA width morph (90px<->451px, keyed off
     data-active-page, see the comment on the base rule ~line 1654) is a
     desktop-only illusion: those two buttons share ONE absolutely-
     positioned footer slot there, so animating one's width to match the
     other's sells them as a single morphing button. On mobile they're laid
     out independently (own position:absolute rules above/below, never
     sharing a slot), so there's nothing to morph toward — but the base
     rule's width:451px is unconditional (only keyed off data-active-page,
     which mobile sets too) and outranks this tier's own width rules
     whenever academy is actually showing. Confirmed via computed style:
     Back was animating 90px->451px over 500ms while fully invisible
     (opacity:0), pure wasted reflow on every tab switch, and the CTA's
     rendered width was landing on this tier's 92vw max-width clamp
     instead of its real 88.89vw target — an unintended ~15px overshoot at
     every viewport. Repeating both selectors here at equal specificity,
     later in source order, wins the cascade back for this tier's own
     (correct, Figma-derived) widths regardless of which page is active. */
  .malik-services__screen[data-active-page="academy"] .malik-services__back .malik-btn--outline {
    width: auto;
  }
  .malik-services__screen[data-active-page="academy"] .malik-arc-page[data-arc-page="academy"] .malik-text-center .malik-btn--outline {
    width: 88.89vw;
    max-width: 92vw;
  }
  .malik-services__arrow {
    width: 7.41vw; /* 80px, services-page next arrow */
    height: 7.41vw;
    border-width: max(2px, 0.19vw);
  }
  .malik-arc-page[data-arc-page="academy"] .malik-services__arrow {
    width: 8.56vw; /* 60px, academy-page prev arrow — Figma sizes these differently */
    height: 8.56vw;
    border-width: max(1px, 0.11vw); /* 1.17647px, Figma Ellipse 224 stroke */
  }
  .malik-arc-row .malik-services__arrow--prev,
  .malik-arc-row .malik-services__arrow--next {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Figma: academy's prev-arrow (Group 122, 60px) sits inset 126px from
     the panel's left edge = 11.67vw; services' next-arrow (also Group 122,
     but the 80px variant) sits inset 65px from the panel's right edge =
     6.02vw. The previous -1.85vw on both was a negative outset, not an
     inset, pushing each arrow 7-8px PAST the panel's own edge instead of
     inside it (confirmed via computed rects: the next-arrow's right edge
     measured beyond the panel's own right edge, not short of it). --prev
     only ever renders on the academy page and --next only on the services
     page, so these can target each arrow's own real Figma value directly
     without needing extra per-page scoping. */
  .malik-arc-row .malik-services__arrow--prev { left: 11.67vw; }
  .malik-arc-row .malik-services__arrow--next { right: 6.02vw; }
  /* Detail card (.malik-services__detail / .malik-services__close):
     rules now live once in the ≤1024px block above — this tier is
     narrower and inherits them unchanged, so nothing is redeclared here. */
}

/* ════════════════════════════════════════════════════════════════
   TAGLINE BANNER
════════════════════════════════════════════════════════════════ */
.malik-tagline-banner {
  /* Figma frame is 1440x810 (exactly 16:9). Driving height off viewport
     WIDTH (not vh, and not a flat 810px) is what keeps every desktop/Mac
     size pixel-perfect: it equals exactly 810px at the 1440px reference
     width, scales down proportionally on narrower desktops (1280px -> 720,
     1024px -> 576), and holds flat at 810 for anything wider (1920/2560/
     4K/ultrawide) so the hero doesn't balloon in height — object-fit:cover
     on the video just crops wider on those screens, same as any hero. */
  min-height: clamp(500px, 56.25vw, 810px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--malik-white);
  color: var(--malik-white);
  text-align: center;
}

.malik-tagline-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}

/* Figma: video layer is 1624.44x913.75 vs. the 1440x810 frame — wider and
   taller, but top-aligned (its top matches the frame's top, all the extra
   height spills off the bottom). object-position "center top" reproduces
   that anchor once object-fit:cover scales it to fill the section. */
.malik-tagline-banner .malik-video-bg {
  object-position: center top;
}

.malik-tagline-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1064px;
  margin-inline: auto;
  padding-block: var(--malik-section-py);
}

.malik-tagline-banner__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.175;
  color: var(--malik-white);
  margin-bottom: 0;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  text-align: center;
}

.malik-tagline-banner__sub {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.175;
  font-weight: 500;
  opacity: 1;
  margin-bottom: 0;
}

/* Suppressed here; re-enabled only in the mobile breakpoint below — desktop
   keeps each line flowing as a single row (see section-tagline.php). */
.malik-tagline-banner__mobile-break {
  display: none;
}

.malik-tagline-banner__inner > .malik-btn {
  margin-top: 2.5rem;
}

/* inset:0 only (no `bottom` here) — the container is itself position:absolute,
   so it would become the dots' containing block and a `bottom` set on BOTH
   this and .malik-tagline-banner__dot would apply the offset twice, landing
   the row ~2x further from the section's bottom edge than Figma specifies. */
.malik-tagline-banner__dots {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.malik-tagline-banner__dot {
  position: absolute;
  bottom: clamp(1.5rem, 3.2vw, 2.875rem);
  width: 12px;
  height: 12px;
  border-radius: 4.65px;
  background: var(--malik-white);
}

.malik-tagline-banner__dot:nth-child(1) { left: 5.56%; width: 18px; height: 18px; }
.malik-tagline-banner__dot:nth-child(2) { left: 16.74%; width: 18px; height: 18px; }
.malik-tagline-banner__dot:nth-child(3) { left: 17.99%; width: 18px; height: 18px; border-radius: 50%; }
.malik-tagline-banner__dot:nth-child(4) { left: 20.63%; width: 18px; height: 18px; border-radius: 50%; }
.malik-tagline-banner__dot:nth-child(5) { left: 58.19%; width: 18px; height: 18px; }
.malik-tagline-banner__dot:nth-child(6) { left: 80.76%; width: 18px; height: 18px; }
.malik-tagline-banner__dot:nth-child(7) { left: 93.19%; width: 18px; height: 18px; }

/* ── Mobile (Figma "mobile design" page) ─────────────────────────
   That page's frame is 1080x1920 — a @3x export, so every raw value
   below is the Figma number /3 to get real CSS px (1080/3 = 360,
   confirmed against the 80px "mobile" heading spec: 80/3 = 26.67px,
   a sane mobile heading size, vs. a nonsensical 80px one otherwise).
   Expressed as vw (raw-figma-px / 1080 * 100) that /3 falls out for
   free and the values land exactly on Figma's numbers at 360px width.

   PURE vw, no clamp() ceiling — same "no-clamp vw" convention already
   used elsewhere on mobile in this file (.malik-services,
   .malik-one-system): capping at a fixed px ceiling (what an earlier
   version of this block did) freezes font-size/dot-size at the 360px-
   reference value for the entire 360-768px range. Desktop can get away
   with capping at its 1440px reference because 1440->2560 is a modest
   ~1.8x jump; mobile's own range is 360->768, a much bigger ~2.1x jump,
   so a frozen cap reads as obviously undersized/floating in dead space
   well before 768px.

   Structured as three explicit tiers (768/480/360px) matching this
   file's own convention (see .malik-services) instead of one wide
   range, so each tier can be hand-tuned independently later if a
   distinct Figma frame ever shows up for it. Figma currently only
   supplies the one 360px-equivalent mobile reference, so all three
   tiers share identical math for now. */
@media (max-width: 768px) {
  .malik-tagline-banner {
    /* height (not min-height): the heading/sub below are positioned with
       percentage `top` values, and a box sized only by min-height counts as
       having an indefinite height for CSS percentage-resolution purposes —
       descendant top:% silently computes to 0 unless height is definite. */
    height: 177.78vw; /* 1920/1080 raw, exact 640px at 360px width */
  }

  .malik-tagline-banner .malik-video-bg {
    /* Figma's video crop is off-center (40.3% from the left, not centered) */
    object-position: 40% top;
  }

  /* Heading/sub sit far apart on mobile (not a tight 2-line block like
     desktop) and need independent vertical placement, so pull them out
     of .malik-container/.malik-tagline-banner__inner's normal flow —
     those become inert wrappers and .malik-tagline-banner (already
     position:relative via .malik-section) becomes the coordinate frame.
     .inner also carries the .malik-reveal scroll-fade class, which sets a
     `transform` — and ANY element with an active transform becomes a
     containing block for absolutely-positioned descendants, even at
     position:static. Left in place, heading/sub would position against
     .inner's now-empty 0-height box instead of the section, so its
     transform has to be neutralized too (harmless: .inner has no visible
     content left to animate once its children go absolute). */
  .malik-tagline-banner .malik-container,
  .malik-tagline-banner__inner {
    position: static;
    max-width: none;
    padding-block: 0;
    /* !important: same tie as the .malik-reveal note above — .inner's own
       .malik-reveal transform is equal specificity and later in the file,
       so it would otherwise win and keep .inner as the containing block. */
    transform: none !important;
  }

  /* Figma text box is 1048px wide inside the 1080px frame (97.04%) — that's
     actually wide enough to fit each full line on one row at this font-size,
     so the "Transform with / Malik OS" wrap isn't width-driven; it's a
     deliberate authored break (see malik_tagline_mobile_break() in
     section-tagline.php, re-enabled below). left:50%+translateX(-50%)
     centers the narrower box (left:0/right:0 would stretch it full-width).
     .sub also carries .malik-reveal itself, which sets its OWN competing
     `transform` (translateY(32px), then `none` once .is-visible lands) —
     same specificity as this rule, so without !important it would win on
     source order and silently strip our centering transform. */
  .malik-tagline-banner__heading,
  .malik-tagline-banner__sub {
    position: absolute;
    left: 50%;
    width: 97.04%;
    margin: 0;
    transform: translate(-50%, -50%) !important;
    font-size: 7.4074vw; /* 80/1080 raw, exact 26.67px at 360px width */
  }

  .malik-tagline-banner__heading { top: 19.64%; }
  .malik-tagline-banner__sub { top: 75.63%; }

  .malik-tagline-banner__mobile-break {
    display: block;
  }

  .malik-tagline-banner__dots {
    bottom: 11.633vw; /* dots row bottom offset, exact 41.88px at 360px width */
  }

  /* Extra .malik-tagline-banner__dots ancestor qualifier matches the
     desktop nth-child rules' specificity (two classes) so these mobile
     values reliably win instead of depending on source-order tie-breaks. */
  .malik-tagline-banner__dots .malik-tagline-banner__dot {
    bottom: 0;
    width: 3.553vw; /* 38.37/1080 raw, exact 12.79px at 360px width */
    height: 3.553vw;
    border-radius: 0.917vw; /* 9.90151/1080 raw */
  }

  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(1) { left: 1.48%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(2) { left: 21.3%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(3) { left: 24.85%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(4) { left: 35.65%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(5) { left: 60.83%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(6) { left: 80.56%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(7) { left: 95%; }
}

/* Same Figma reference and math as the 768px tier above, restated per this
   file's explicit-per-tier convention (see .malik-services) rather than
   relying on the 768px block alone — lets this tier be hand-tuned on its
   own later without touching 768px or 360px. See the 768px block above for
   the full reasoning behind each rule. */
@media (max-width: 480px) {
  .malik-tagline-banner { height: 177.78vw; }
  .malik-tagline-banner .malik-video-bg { object-position: 40% top; }
  .malik-tagline-banner .malik-container,
  .malik-tagline-banner__inner {
    position: static;
    max-width: none;
    padding-block: 0;
    transform: none !important;
  }
  .malik-tagline-banner__heading,
  .malik-tagline-banner__sub {
    position: absolute;
    left: 50%;
    width: 97.04%;
    margin: 0;
    transform: translate(-50%, -50%) !important;
    font-size: 7.4074vw;
  }
  .malik-tagline-banner__heading { top: 19.64%; }
  .malik-tagline-banner__sub { top: 75.63%; }
  .malik-tagline-banner__mobile-break { display: block; }
  .malik-tagline-banner__dots { bottom: 11.633vw; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot {
    bottom: 0;
    width: 3.553vw;
    height: 3.553vw;
    border-radius: 0.917vw;
  }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(1) { left: 1.48%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(2) { left: 21.3%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(3) { left: 24.85%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(4) { left: 35.65%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(5) { left: 60.83%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(6) { left: 80.56%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(7) { left: 95%; }
}

/* Same as the 480px tier — this is the exact Figma reference width itself. */
@media (max-width: 360px) {
  .malik-tagline-banner { height: 177.78vw; }
  .malik-tagline-banner .malik-video-bg { object-position: 40% top; }
  .malik-tagline-banner .malik-container,
  .malik-tagline-banner__inner {
    position: static;
    max-width: none;
    padding-block: 0;
    transform: none !important;
  }
  .malik-tagline-banner__heading,
  .malik-tagline-banner__sub {
    position: absolute;
    left: 50%;
    width: 97.04%;
    margin: 0;
    transform: translate(-50%, -50%) !important;
    font-size: 7.4074vw;
  }
  .malik-tagline-banner__heading { top: 19.64%; }
  .malik-tagline-banner__sub { top: 75.63%; }
  .malik-tagline-banner__mobile-break { display: block; }
  .malik-tagline-banner__dots { bottom: 11.633vw; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot {
    bottom: 0;
    width: 3.553vw;
    height: 3.553vw;
    border-radius: 0.917vw;
  }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(1) { left: 1.48%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(2) { left: 21.3%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(3) { left: 24.85%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(4) { left: 35.65%; border-radius: 50%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(5) { left: 60.83%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(6) { left: 80.56%; }
  .malik-tagline-banner__dots .malik-tagline-banner__dot:nth-child(7) { left: 95%; }
}


/* ════════════════════════════════════════════════════════════════
   ONE SYSTEM — INFINITE APPLICATIONS
════════════════════════════════════════════════════════════════ */
.malik-one-system {
  position: relative;
  overflow: hidden;
  /* min-height: clamp(640px, 90vh, 860px); */
  min-height: 810px;
  background: #dce4d4;
  /* Same 600ms Gentle curve as the screen/blob crossfade — this bg swap
     rides the same click reaction, not a separately-timed effect. */
  transition: background-color 600ms cubic-bezier(0.45,0,0.55,1);
}

.malik-one-system.is-explore {
  background: #d3d5dc;
}

/* ── Screens: stacked, crossfaded ──────────────────────────────── */
/* Figma's own Prototype panel on the model button's click reaction (node
   1:2249 "syntegration", read directly via Interactions: Trigger "On
   click" → Action "Change to" → Property 1 "syntegration" → Animation
   "Smart animate" → Easing "Gentle" → Duration "600ms") is the literal
   spec for this hero<->explore swap — replacing the earlier 900ms/
   split-delay guess. "Gentle" is Figma's named preset for
   cubic-bezier(0.45,0,0.55,1), the same curve already used elsewhere in
   this file for symmetric fades (see malik-theme-animation-tokens). */
.malik-one-system__screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 600ms cubic-bezier(0.45,0,0.55,1),
    transform 600ms cubic-bezier(0.45,0,0.55,1),
    visibility 0s linear 600ms;
  will-change: opacity, transform;
}

.malik-one-system__screen.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 600ms cubic-bezier(0.45,0,0.55,1),
    transform 600ms cubic-bezier(0.45,0,0.55,1),
    visibility 0s linear 0s;
}

.malik-one-system.is-explore .malik-one-system__screen[data-os2-screen="hero"] {
  transform: translate3d(0, 0, 0);
}

.malik-one-system__screen[data-os2-screen="hero"].is-transitioning-out {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition:
    visibility 0s linear 600ms;
}

.malik-one-system__screen[data-os2-screen="hero"].is-transitioning-out .malik-one-system__center,
.malik-one-system__screen[data-os2-screen="hero"].is-transitioning-out .malik-one-system__model {
  opacity: 0;
}

/* Inherit height from the section (single source of truth) instead of
   recomputing the clamp() independently — keeps the blob and the
   hero/explore content centered on the exact same box. */
.malik-one-system .malik-container { height: 100%; }

/* Figma's "malik OS" frame is 1444px wide with every child positioned
   relative to that FULL width (e.g. the corner dots sit exactly 82px from
   the frame edge). --malik-container-max is also 1444px, but the
   container's own 48px inline padding insets its content box to 1348px —
   so every absolutely-positioned child below was silently drifting ~48px
   off its Figma coordinate. Zeroed here (mirroring the padding-inline:0
   override already applied at the mobile/tablet breakpoints below) so the
   hero's local (0,0) lines up with the Figma frame's (0,0) and the
   percentage math on __feature/__model/__center is exact. */
.malik-one-system .malik-container { padding-inline: 0; }

/* ── Hero layout ───────────────────────────────────────────────── */
.malik-one-system__hero {
  position: relative;
  height: 100%;
}

.malik-one-system__features {
  /* transform (even this static no-op one, for the slide-out motion below)
     and will-change:transform both establish a new containing block for
     position:absolute descendants — so .malik-one-system__feature's percentage
     `top` values (below) resolve against THIS element's own height instead of
     skipping past it to .malik-one-system__hero's. Since every child here is
     itself position:absolute (out of flow) and this element had no explicit
     height of its own, that height collapsed to 0 — making every child's
     percentage `top` resolve to 0 regardless of which corner it's meant for,
     stacking all five on top of each other. Explicit height:100% (matching
     .malik-one-system__hero, its own positioned ancestor) restores the real
     containing-block height so the percentages resolve correctly again. */
  height: 100%;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 600ms cubic-bezier(0.45,0,0.55,1),
    transform 600ms cubic-bezier(0.45,0,0.55,1);
  will-change: opacity, transform;
}

.malik-one-system__screen[data-os2-screen="hero"].is-transitioning-out .malik-one-system__features {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

/* Positions/widths below are literal Figma node 1:2225 px converted to
   %-of-1444 (x) / %-of-810 (y) — exact at the reference 1444px container
   width (--malik-container-max), and scaling proportionally below it.
   The dot for each corner block sits at the frame's true edge; the text
   starts 33px inside it (18px dot + 15px gap) — Figma positions these as
   two independent absolutely-placed layers, not a flex pair, so the block
   itself spans the full 82px-to-edge width (273px = 33 + the 240px text
   box) with the dot pinned to its own inner edge via padding. */
.malik-one-system__feature {
  position: absolute;
  width: 273px;
  color: var(--malik-black);
}

.malik-one-system__feature--top-left     { left: 5.6787%; top: 8.3951%; padding-left: 33px; }
.malik-one-system__feature--bottom-left  { left: 5.6787%; top: 78.0247%; padding-left: 33px; }
.malik-one-system__feature--top-right    { right: 5.6787%; top: 8.3951%; padding-right: 33px; text-align: right; }
.malik-one-system__feature--bottom-right { right: 5.6787%; top: 78.1481%; padding-right: 33px; text-align: right; }
.malik-one-system__feature--bottom-center{ left: 41.5512%; top: 78.0247%; width: 240px; text-align: center; }

.malik-one-system__feature-dot {
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  opacity: 1;
  border-radius: 4.65px;
  background: var(--malik-black);
  flex-shrink: 0;
}

.malik-one-system__feature--top-left .malik-one-system__feature-dot,
.malik-one-system__feature--bottom-left .malik-one-system__feature-dot { left: 0; }

.malik-one-system__feature--top-right .malik-one-system__feature-dot,
.malik-one-system__feature--bottom-right .malik-one-system__feature-dot { right: 0; }

/* "Adapt instantly." (bottom-center) is the one block where Figma places
   the dot immediately adjacent to the text (~2px apart) rather than the
   33px edge-offset used everywhere else — a tight inline pair, so this
   one block keeps the flex+gap layout instead of absolute dot placement. */
.malik-one-system__feature--bottom-center .malik-one-system__feature-dot {
  position: static;
  margin-right: 1.6rem;
}
.malik-one-system__feature--bottom-center .malik-one-system__feature-body {
  margin-left: 2.1rem;
}

.malik-one-system__feature-title {
  font-family: var(--malik-font-ubuntu);
  font-family: Ubuntu Mono;
  font-weight: 700;
  font-style: Bold;
  font-size: 19px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.malik-one-system__feature--bottom-center .malik-one-system__feature-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.malik-one-system__feature-body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-style: Regular;
  font-size: 19px;
  line-height: 117%;
  letter-spacing: 0%;

}

/* Figma gives "Perform at your peak."'s body its own narrower 195px box
   (vs. the shared 240px everywhere else), producing its 3-line wrap. */
.malik-one-system__feature--top-right .malik-one-system__feature-body {
  width: 195px;
  margin-left: auto;
}

/* Figma: eyebrow "malik os" top edge at y=338, heading box (top=372,
   width=707) both centered at frame-x=722.5 — i.e. left=369px of the
   1444px frame. Positioned directly (no translate/50% centering trick)
   since the exact px are already known, avoiding rounding drift. */
.malik-one-system__center {
  position: absolute;
  top: 41.7284%;
  left: 25.5540%;
  text-align: center;
  width: 707px;
}

/* Exact Figma exports from node 1:324. The old CSS blur approximation was
   close in spirit but could not match the filtered SVG pixels. */
.malik-one-system__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 785.101px;
  height: 785.101px;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 0;
}

.malik-one-system__blob-img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  pointer-events: none;
  /* Matches the screen crossfade above: Figma's click reaction on the
     model buttons is Smart Animate / Gentle / 600ms, not 900ms. */
  transition: opacity 600ms cubic-bezier(0.45,0,0.55,1), transform 600ms cubic-bezier(0.45,0,0.55,1);
  will-change: opacity, transform;
}

.malik-one-system__blob-img--default {
  width: 785.101px;
  height: 785.101px;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.malik-one-system__blob-img--variant {
  width: 620.316px;
  height: 706.183px;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) rotate(21.73deg);
}

/* Figma's own Interactions panel on this component (node 1:2215, the
   "malik OS motion" frame with Default 1:2216 / Variant2 1:2220) is wired
   to "After delay 1ms" → Smart Animate → Variant2, Easing "Slow", 1000ms —
   an auto-play loop, not a hover/click reaction — and Variant2 also has the
   same reaction back to Default, so it's a genuine infinite back-and-forth,
   not a one-shot autoplay. So independent of the explore click flow below,
   the blob keeps auto-morphing between the round Default shape and
   Variant2's rounded-hexagon shape forever at rest. Figma's "Slow" is a
   named spring preset, not a literal curve; cubic-bezier(.65,0,.35,1) is
   used as its closest symmetric ease-in-out equivalent (same idea as the
   documented "Gentle" curve elsewhere in this file, just more pronounced).

   Desktop swaps in Figma's own rasterized WebP export of each state (see
   the <picture> sources above) instead of the live-blurred SVG — the
   browser's own feGaussianBlur at this radius renders visibly grainier
   than Figma's blur engine, so the WebP is pixel-for-pixel what Figma
   itself renders, including Variant2's true rounded-hexagon silhouette
   (confirmed via get_screenshot on 1:2220 — it is NOT just a rotated/
   resized circle, which an earlier version of this fix wrongly assumed).
   Each export is flattened against its own frame's exact background fill
   (#dce4d4 default / #d3d5dc Variant2) rather than true alpha, so the
   section's own background is pulsed in lockstep (same keyframe timing/
   easing) to keep those flattened edges invisible — this mirrors Figma's
   own two states, which really do each carry their own frame background.

   Desktop only per scope — gated to min-width so the mobile/tablet blob
   overrides below (which keep the original SVG crossfade, untouched)
   never inherit it. The .is-ambient gate is toggled from JS
   (initOneSystemApp in malik-main.js) so this loop never fights the
   explore/back 600ms Gentle crossfade transition on the same opacity
   property (see .malik-one-system__blob-img above). */
@media (min-width: 1025px) {
  .malik-one-system.is-ambient:not(.is-explore) .malik-one-system__blob-img--default {
    animation: malik-os-blob-default 3000ms cubic-bezier(.65, 0, .35, 1) infinite;
  }
  .malik-one-system.is-ambient:not(.is-explore) .malik-one-system__blob-img--variant {
    animation: malik-os-blob-variant 3000ms cubic-bezier(.65, 0, .35, 1) infinite;
  }
  .malik-one-system.is-ambient:not(.is-explore) {
    animation: malik-os-blob-bg 3000ms cubic-bezier(.65, 0, .35, 1) infinite;
  }

  /* Both images share one 785.101px canvas (matching the box already
     verified correct for Default) so their opaque bg-matched edges always
     align exactly during the crossfade — a same-size canvas is required
     even though the two blobs render at different sizes within it.
     Variant2 isn't just Default resized/rotated: measured directly off
     Figma's own rendered pixels (scanline edge-detection against the
     frame's own bg fill, through the true center, both axes), its visible
     bleed is ~646px against Default's ~785px, ~18% SMALLER overall — not
     the ~8% growth the raw layer w/h metadata briefly suggested, which
     turned out to be the pre-blur core shape only (Variant2 clearly uses a
     tighter blur/falloff than Default). So the Variant2 export here is the
     true ~646px blob, transparent-free-padded out to the same 785.101px
     canvas with more of its own edge color (#d3d5dc) so the padding is
     invisible against itself — giving an accurate smaller blob without
     reintroducing a mismatched-box-size seam during the crossfade. */
  .malik-one-system__blob-img--default,
  .malik-one-system__blob-img--variant {
    width: 785.101px;
    height: 785.101px;
    transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes malik-os-blob-default {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes malik-os-blob-variant {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes malik-os-blob-bg {
  0%, 100% { background-color: #dce4d4; }
  50% { background-color: #d3d5dc; }
}

.malik-one-system.is-explore .malik-one-system__blob-img--default {
  opacity: 0;
}

.malik-one-system.is-explore .malik-one-system__blob-img--variant {
  opacity: 1;
}

.malik-one-system__eyebrow {
  font-family: var(--malik-font-ubuntu);
  font-weight: 450;
  font-style: Regular;
  font-size: 19px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;

  color: var(--malik-black);
  /* opacity: 0.6; */
  margin-bottom: 15px;
}

.malik-one-system__heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-style: Medium;
  font-size: clamp(1.75rem, 4.5vw, 50px);
  line-height: 1.15;
  letter-spacing: 0%;
  text-align: center;

  color: var(--malik-black);
}

/* ── Model buttons + hover card ───────────────────────────────── */
/* Figma: both "sensitivity model" (1:2227) and "syntegration" (1:2249)
   component boxes sit at y=220 of the 810px frame (top:27.160%) — NOT
   vertically centered on the frame (center=405); the box's own center
   (349) sits 56px above frame-center. Horizontally each is centered
   82px+98.5px (half of 197) from its edge, mirrored: left model center =
   180.5/1444 = 12.4989%, right model center = 1263.5/1444 = 87.5011%.
   width:max-content + transform:translateX(-50%) (rather than width:197px)
   is deliberate: Figma's "sensitivity model" label (whitespace-nowrap,
   per get_design_context) is wider than the 197px box and overflows it
   symmetrically on both sides — a real 197px-wide box would instead force
   that label to wrap, which Figma does not do. (text-align:center on a
   width:0 box does NOT achieve this — Chrome anchors the overflowing
   inline content's left edge to the box, not its center — hence the
   translateX(-50%) approach instead, same technique already used by
   .malik-one-system__center.) */
.malik-one-system__model {
  position: absolute;
  top: 53.161%;
  width: max-content;
  transform: translateX(-50%);
}
.malik-one-system__model--left  { left: 12.4989%; }
.malik-one-system__model--right { left: 87.5011%; }

.malik-one-system__model-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--malik-black);
  background: transparent;
  border: 1px solid var(--malik-black);
  border-radius: var(--malik-radius-pill);
  padding: 0.625rem 1.5625rem;
  cursor: pointer;
  transition: background var(--malik-transition), color var(--malik-transition);
}
.malik-one-system__model-btn:hover { background: var(--malik-black); color: var(--malik-white); }

/* Invisible hover bridge: spans the 30px gap between the button and the
   card plus the card's own footprint, so the pointer never crosses a
   dead zone (no hoverable box under it) on its way from the button up to
   the card itself — without it, :hover on .malik-one-system__model (and
   so the card's opacity) drops the instant the cursor leaves the button,
   before it ever reaches the card. */
.malik-one-system__model::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 197px;
  height: 222px; /* 30px gap + 192px card height */
}

.malik-one-system__model-card {
  position: absolute;
  bottom: calc(100% + 30px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 197px;
  height: 192px;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s var(--malik-ease), transform 0.3s var(--malik-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.malik-one-system__model:hover .malik-one-system__model-card {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.malik-one-system__model-card-gradient {
  position: absolute;
  inset: 0;
}

.malik-one-system__model-card-photo {
  position: absolute;
  /* inset: 0;
  width: 100%;
  height: 100%; */
  max-width: none; /* theme's global img{max-width:100%} would otherwise cap this back down to the card's own width */
  object-fit: cover;
  filter: blur(46px);
}
/* Decorative texture layered above the photo */
.malik-one-system__model-card-overlay {
  position: absolute;
  max-width: none;
}

/* Frosted-glass layer between the texture and the gif */
.malik-one-system__model-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.malik-one-system__model-card-gif {
  position: relative;
  z-index: 1;
  width: 197px;
  height: 200px;
  object-fit: contain;
}

.malik-one-system__model-card-logo {
  position: relative;
  z-index: 1;
  transform: translateY(-30px);
}

/* Sensitivity Model card (model index 0) */
.malik-one-system__model-card--m0 .malik-one-system__model-card-photo,
.malik-one-system__model-card--m0 .malik-one-system__model-card-overlay {
  width: 1046px;
  height: 588px;
  left: -458px;
  top: -396px;
}
/* Syntegration card (model index 1) */
.malik-one-system__model-card--m1 .malik-one-system__model-card-photo,
.malik-one-system__model-card--m1 .malik-one-system__model-card-overlay {
  width: 340px;
  height: 192px;
  left: -72px;
  top: -0.04px;
}

/* ── "MALIK" letter-pill logo badge ───────────────────────────── */
.malik-letter-pill {
  display: inline-flex;
  align-items: center;
}
.malik-letter-pill__char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  color: var(--malik-white);
  font-size: 0.8125rem;
  font-weight: 600;
}
.malik-letter-pill__char:first-child { margin-left: 0; }

/* ── Explore screens ───────────────────────────────────────────── */
.malik-one-system__explore {
  color: var(--malik-black);
}

.malik-one-system__constellation {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.4) 1.5px, transparent 1.6px);
  background-size: 42px 42px;
  background-position: 0 0;
  mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 70%);
}

.malik-one-system__explore-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: back-button box is vertically centered on the frame (y-center
   405 = exactly frame-center) but horizontally differs per model —
   sensitivity-model sits 82px from the left edge (1:2315), syntegration
   113px from the right edge (1:2288, x=1331 of 1444) — not a mirrored
   pair, so each needs its own left value rather than a shared side. */
.malik-one-system__back {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5.6787%;
  z-index: 2;
  background: transparent;
  border: 1px solid var(--malik-black);
  border-radius: var(--malik-radius-pill);
  padding: 10px 25px;
  font-size: 19px;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--malik-black);
  cursor: pointer;
  transition: background var(--malik-transition), color var(--malik-transition);
}
[data-os2-screen="model-1"] .malik-one-system__back { left: 92.1745%; }
.malik-one-system__back:hover { background: var(--malik-black); color: var(--malik-white); }

.malik-one-system__tags {
  position: absolute;
  top: 16.3%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: 5.7%;
  z-index: 1;
}

.malik-one-system__tag {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.1875rem;
  font-weight: 700;
  /* letter-spacing: 0.02em; */
  letter-spacing: 0%;
  text-transform: uppercase;
  font-family: var(--malik-font-ubuntu);
  line-height: 100%;
}

/* Figma: ACCELERATE's dot sits after the label, mirroring AMPLIFY/ALIGN's
   dot-before-label order, so the group's dot stays flush with the same
   5.7% edge inset on both sides (1:2284/1:2286). */
.malik-one-system__tag:last-child { flex-direction: row-reverse; }
.malik-one-system__tag:nth-child(2) { gap: 50px; }

.malik-one-system__tag-dot {
  width: 18px;
  height: 18px;
  border-radius: 4.65px;
  background: var(--malik-black);
}

/* Figma: the model-info heading (frame "6") starts at a fixed y=580 of
   the 810px frame for BOTH explore variants regardless of the badge's own
   height above it, and is centered on the frame (x-center 722, box
   width 414) — so this is positioned directly rather than centered as a
   flex group with the badge. Was `.malik-container` before, which added
   an unwanted 48px inline padding inside a 414px box; plain absolute
   positioning replaces it. */
.malik-one-system__explore-inner {
  position: absolute;
  top: 71.6049%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 414px;
}

/* Figma: "MALIK" letter-pill badge (an authored GIF/video asset, not the
   live .malik-letter-pill CSS component — confirmed via get_design_context
   on 1:2317/1:2287) sits centered on the frame at its own exact box per
   model: sensitivity 341×151 (1:2317), syntegration 260×144 (1:2287).
   object-fit:cover (not contain) so it fills that box exactly like
   Figma's own export, instead of the old padding-based inline-flex box
   that let the media stretch/shrink to whatever the padding left over. */
.malik-one-system__explore-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 341px;
  height: 151px;
  overflow: hidden;
}
[data-os2-screen="model-1"] .malik-one-system__explore-logo { width: 260px; height: 144px; }

.malik-one-system__explore-logo-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.malik-one-system__explore-heading {
  font-family: var(--malik-font-ubuntu);
  font-weight: 700;
  font-style: Bold;
  font-size: 19px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;

  margin-bottom: 8px;
}

.malik-one-system__explore-body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-style: Regular;
  font-size: 19px;
  line-height: 117%;
  letter-spacing: 0%;
  text-align: center;

  margin-bottom: 1.875rem;
}

/* The shared sitewide .malik-btn is Work Sans by default (see the base
   button component) — Figma specs this "explore the model" CTA (and the
   .malik-one-system__back button below) in Ubuntu Mono, same as every
   other label in this section, so both need their own override here
   rather than inheriting the wrong typeface. */
.malik-one-system .malik-btn--outline,
.malik-one-system__back {
  font-family: var(--malik-font-ubuntu);
}

/* Figma node 1:2316 ("buttons" / EXPLORE THE MODEL pill, get_design_context-
   verified): Ubuntu Mono Regular 19px/100%, 0 letter-spacing, 1px solid
   border, 10px/25px padding (Hug 212 × 36). The shared .malik-btn base
   component (malik-main.css ~line 51) is sized for the sitewide Work Sans
   500 16px/0.04em CTA scale with 1.5px border and 0.6rem/2rem padding
   instead — right for every other section's buttons, but this section has
   its own Ubuntu Mono 19px type scale (.__explore-heading/.__explore-body
   above), so the CTA needs the same per-property override rather than
   inheriting the sitewide button's numbers. Scoped to .__explore-inner, not
   all of .malik-one-system, so .__back (a different button, its own spec,
   intentionally left alone) is unaffected. */
.malik-one-system__explore-inner .malik-btn--outline {
  font-size: 19px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  padding: 10px 25px;
  border-width: 1px;
}

@media (max-width: 1024px) {
  /* ════════════════════════════════════════════════════════════════
     MOBILE MALIK OS — pure vw scaling against Figma's mobile reference
     frame (1080px wide: "malik OS mob." hero + the two explore screens,
     "Property 1=Default/Variant2/Variant3"), same no-clamp-floor vw
     convention used elsewhere on mobile in this file (We Are Malik,
     Services). factor = px / 1080 * 100. Every element below is
     positioned at the exact frame-relative offset Figma gives it,
     rather than the previous grid/flex approximation. Raised to 1024px
     (not the site's usual 768px) for the same reason as Services: there
     is no separate tablet Figma design, and the old desktop absolute-px
     layout (scattered around the blob) started overlapping well above
     768px.
  ════════════════════════════════════════════════════════════════ */

  /* The base (desktop) rule's fixed `min-height: 810px` is unconditional
     and was never overridden here — since it's a flat px floor while the
     active screen's own height below is vw-based, at narrow widths the
     vw value computes to LESS than 810px and this stray floor wins,
     stretching the section and leaving dead space below the screen's
     real content. Zeroing it lets the active screen's own min-height be
     the only thing that determines the section's height. */
  .malik-one-system { padding-block: 0; min-height: 0; }
  .malik-one-system .malik-container { padding-inline: 0; height: auto; }

  /* Each screen is its own full-height Figma frame; only one is ever
     display:block at a time, so it alone determines the section's
     rendered height. */
  .malik-one-system__screen {
    position: static;
    display: none;
  }
  .malik-one-system__screen.is-active {
    display: block;
    position: relative;
  }
  .malik-one-system__screen[data-os2-screen="hero"] { min-height: 244.444vw; /* 2640px */ }
  .malik-one-system__screen[data-os2-screen^="model-"] { min-height: 178.778vw; /* 1920px */ }

  /* Both explore screens are a flat black frame in Figma (the dots/edres
     background media plays on top of it, covering it edge to edge) —
     the shared desktop .is-explore tint (#d3d5dc) is a different, lighter
     look meant only for the wider-viewport experience. */
  .malik-one-system.is-explore { background: #000; }

  /* Figma node 1:324 pins the blob center at y=505 in a 1080px-wide frame. */
  .malik-one-system__blob {
    top: 46.759vw; /* 505px */
  }
  .malik-one-system.is-explore .malik-one-system__blob {
    transform: translate3d(-50%, -50%, 0);
  }

  /* ── Hero screen ───────────────────────────────────────────────── */
  /* Its children are all position:absolute (no normal-flow height of
     their own) — the section's real height comes from the screen-level
     min-height above; this just establishes the positioning context. */
  .malik-one-system__hero { position: relative; height: auto; }

  /* Stays a plain, non-positioning wrapper so its two children (below) can
     anchor their position:absolute directly to .malik-one-system__hero
     using the same hero-frame-relative offsets Figma gives them, instead
     of being offset a second time relative to this box. */
  .malik-one-system__center {
    position: static;
    width: auto;
    transform: none;
  }
  .malik-one-system__eyebrow {
    position: absolute;
    top: 10.093vw; /* 109px */
    left: 50%;
    transform: translateX(-50%);
    width: 18.148vw; /* 196px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    margin-bottom: 0;
  }
  .malik-one-system__heading {
    position: absolute;
    top: 35vw; /* 378px */
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 7.407vw; /* 80px */
    line-height: 8.704vw; /* 94px */
  }

  /* Model buttons: exact Figma left offsets (not a mirrored 4%/4%) —
     the two pills are different widths and don't sit symmetrically. */
  .malik-one-system__model {
    position: absolute;
    top: 68.981vw; /* 745px */
    transform: none;
    right: auto;
  }
  .malik-one-system__model--left  { left: 10.185vw; width: 42.593vw; } /* 110px / 460px */
  .malik-one-system__model--right { left: 56.481vw; width: 33.333vw; } /* 610px / 360px */
  .malik-one-system__model-card { display: none; } /* hover-only card; no hover on touch, and Figma's mobile hero doesn't show it */

  .malik-one-system__model-btn {
    width: 100%;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
    white-space: nowrap;
  }

  /* Features panel (Figma "Group 167" / Rectangle 229) */
  .malik-one-system__features {
    position: absolute;
    left: 1.481vw;  /* 16px */
    top: 88.889vw;  /* 960px */
    width: 97.037vw; /* 1048px */
    height: 153.704vw; /* 1660px */
    margin: 0;
    padding: 0;
    max-width: none;
    background: rgba(160, 148, 168, 0.1);
    backdrop-filter: blur(3.069vw); /* 33.15px */
    -webkit-backdrop-filter: blur(3.069vw);
    border-radius: 9.259vw; /* 100px */
    text-align: center;
  }
  .malik-one-system__feature {
    position: absolute;
    left: 19.815vw; /* 214px, panel-relative */
    width: 57.407vw; /* 620px */
    text-align: center;
    transform: none;
  }
  /* Panel-relative tops (frame top minus the panel's own 960px offset) */
  .malik-one-system__feature--top-left      { top: 14.907vw; } /* Decide with precision. */
  .malik-one-system__feature--top-right     { top: 40.278vw; } /* Perform at your peak. */
  .malik-one-system__feature--bottom-left   { top: 70vw; }     /* Coordinate effortlessly. */
  .malik-one-system__feature--bottom-center { top: 95.370vw; } /* Adapt instantly. */
  .malik-one-system__feature--bottom-right  { top: 120.741vw; } /* Replace chaos with clarity. */

  .malik-one-system__feature-title,
  .malik-one-system__feature--top-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    display: block;
    position: absolute;
    top: 0;
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .malik-one-system__feature-dot {
    position: absolute;
    /* Figma pins the dot to the item's own left edge, 62px left of the
       (independently centered) title box that's its actual containing
       block here — offset back out by that same 62px. */
    left: -5.741vw;
    top: 0.702vw; /* 7.58px */
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }
  /* Desktop turns "Adapt instantly."'s dot into a static, tightly-hugging
     inline dot+text pair (see the unscoped base rule) — but mobile's own
     Figma frame gives this item the exact same absolute dot-at-frame-left
     treatment as every other item, no exception. That base rule shares
     this selector's specificity, so it must be restated here (this later
     rule wins) rather than relying on the generic .feature-dot rule above,
     which alone can't out-specify it. Left unset (position:static's
     `left` from the base rule would otherwise stick) so the absolute
     `left` above applies. */
  /* Desktop hugs each dot to its own quadrant's outer edge (left:0 on the
     left column, right:0 on the right column) and special-cases
     "Adapt instantly." as a static inline pair — all of it desktop-only
     layout logic that doesn't apply to mobile's stacked list. Those rules
     share this selector's specificity, so restating it here (later in
     the cascade) is what makes it win: every dot on mobile sits at the
     same fixed frame-relative x (Figma: calc(20% + 14px)), regardless of
     each item's title length. */
  .malik-one-system__feature--top-left .malik-one-system__feature-dot,
  .malik-one-system__feature--top-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-left .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    right: auto;
    top: 0.702vw;
    width: 3.138vw;
    height: 3.138vw;
    border-radius: 0.810vw;
    margin-right: 0;
  }
  /* Figma auto-sizes this one title's box to its shorter text (451.868px
     vs. the shared 558px), left-anchored at the same edge as every other
     item — so its centered text sits visibly closer to the dot than the
     others'. */
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    width: 41.840vw; /* 451.868px */
  }
  /* Desktop's unscoped base rule gives this item's body a 2.1rem
     margin-left to hug its static inline dot (see line ~4931). Mobile's
     dot goes back to the shared absolute layout above, so this item's
     body must match every other item's padding too — restated here to
     out-cascade that same-specificity base rule. */
  .malik-one-system__feature--bottom-center .malik-one-system__feature-body {
    margin-left: 0;
  }
  .malik-one-system__feature-body {
    position: absolute;
    top: 9.259vw; /* 100px below the title */
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    text-align: center;
  }

  /* ── Explore screens (shared) ─────────────────────────────────── */
  .malik-one-system__explore-inner {
    position: static;
    display: block;
    max-width: none;
    /* Desktop's centering trick (left:50% + this transform) is a no-op
       for a position:static box, but `transform` still applies and still
       establishes a containing block for the position:absolute heading/
       body/button inside it, silently shifting them ~207px left (half of
       the leftover desktop `width: 414px`, also neutralized below). */
    width: auto;
    transform: none;
  }
  .malik-one-system__back {
    position: absolute;
    top: 50%;
    right: auto;
    transform: translateY(-50%);
    width: 18.519vw; /* 200px */
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }
  [data-os2-screen="model-0"] .malik-one-system__back { left: 1.481vw; }  /* 16px */
  [data-os2-screen="model-1"] .malik-one-system__back { left: auto; right: 1.481vw; } /* 16px */

  .malik-one-system__explore-logo {
    position: absolute;
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Desktop's `translate(-50%, -50%)` centering trick was never reset
       here, so it silently double-applied on top of the per-model
       frame-relative left/top below, offsetting the badge by half its
       own box size. */
    transform: none;
  }

  .malik-one-system__explore-heading {
    position: absolute;
    left: 1.481vw; /* 16px */
    width: 97.037vw; /* 1048px */
    margin-bottom: 0;
  }
  .malik-one-system__explore-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    margin-bottom: 0;
  }
  .malik-one-system .malik-btn--outline {
    /* Figma's Layout panel gives this button "Width: Hug (460px)" — the
       460px is just this instance's own content-fit result, not a fixed
       box — so it hugs its text via padding and stays centered via
       left:50%, instead of a fixed width paired with a fixed left. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }

  /* ── Model 0: Sensitivity Model explore screen ────────────────── */
  [data-os2-screen="model-0"] .malik-one-system__explore-logo {
    left: 20.939vw; /* 226.15px */
    top: 73.710vw;  /* 796.07px */
    width: 68.862vw; /* 743.71px */
    height: 30.463vw; /* 329px */
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 4.444vw; /* 48px */
    line-height: 4.444vw;
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-body { top: 136.204vw; } /* 1471px */
  [data-os2-screen="model-0"] .malik-btn--outline { top: 156.574vw; } /* 1691px */

  /* ── Model 1: Syntegration explore screen ─────────────────────── */
  .malik-one-system__tags {
    position: absolute;
    top: 11.944vw; /* 129px */
    left: 0;
    right: 0;
    padding-inline: 1.481vw; /* 16px */
    gap: 0;
  }
  .malik-one-system__tag {
    gap: 2.593vw; /* ~28px */
    font-size: 3.704vw; /* 40px */
  }
  .malik-one-system__tag:last-child { flex-direction: row-reverse; }
  .malik-one-system__tag-dot {
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }

  [data-os2-screen="model-1"] .malik-one-system__explore-logo {
    left: 23.241vw; /* 251px */
    top: 74.352vw;  /* 803px */
    width: 52.778vw; /* 570px */
    height: 29.183vw; /* 315.17px */
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-body { top: 135.463vw; } /* 1463px */
  [data-os2-screen="model-1"] .malik-btn--outline { top: 155.833vw; } /* 1683px */
}

@media (max-width: 1024px) {
  .malik-one-system__blob {
    top: 46.759vw; /* 505px / 1080 */
    width: 72.695vw; /* 785.101px / 1080 */
    height: 72.695vw;
  }

  .malik-one-system__blob-img--default {
    width: 72.695vw; /* 785.101px / 1080 */
    height: 72.695vw;
  }

  .malik-one-system__blob-img--variant {
    width: 57.437vw; /* 620.316px / 1080 */
    height: 65.387vw; /* 706.183px / 1080 */
  }
}

/* Same vw-scaled Malik OS ruleset as the 1024px block above, repeated per
   breakpoint rather than left as one range — matching this file's own
   convention (see Services). Every value is still pure vw against the
   1080px reference, so it's identical math at each width; duplicating it
   here just makes each breakpoint independently auditable/tweakable the
   way the rest of the file already does. */
@media (max-width: 768px) {
  /* The base (desktop) rule's fixed `min-height: 810px` is unconditional
     and was never overridden here — since it's a flat px floor while the
     active screen's own height below is vw-based, at narrow widths the
     vw value computes to LESS than 810px and this stray floor wins,
     stretching the section and leaving dead space below the screen's
     real content. Zeroing it lets the active screen's own min-height be
     the only thing that determines the section's height. */
  .malik-one-system { padding-block: 0; min-height: 0; }
  .malik-one-system .malik-container { padding-inline: 0; height: auto; }

  .malik-one-system__screen {
    position: static;
    display: none;
  }
  .malik-one-system__screen.is-active {
    display: block;
    position: relative;
  }
  .malik-one-system__screen[data-os2-screen="hero"] { min-height: 244.444vw; /* 2640px */ }
  .malik-one-system__screen[data-os2-screen^="model-"] { min-height: 178.778vw; /* 1920px */ }

  .malik-one-system.is-explore { background: #000; }

  .malik-one-system__blob {
    top: 46.759vw; /* 505px */
  }
  .malik-one-system.is-explore .malik-one-system__blob {
    transform: translate3d(-50%, -50%, 0);
  }

  .malik-one-system__hero { position: relative; height: auto; }

  .malik-one-system__center {
    position: static;
    width: auto;
    transform: none;
  }
  .malik-one-system__eyebrow {
    position: absolute;
    top: 10.093vw; /* 109px */
    left: 50%;
    transform: translateX(-50%);
    width: 18.148vw; /* 196px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    margin-bottom: 0;
  }
  .malik-one-system__heading {
    position: absolute;
    top: 35vw; /* 378px */
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 7.407vw; /* 80px */
    line-height: 8.704vw; /* 94px */
  }

  .malik-one-system__model {
    position: absolute;
    top: 68.981vw; /* 745px */
    transform: none;
    right: auto;
  }
  .malik-one-system__model--left  { left: 10.185vw; width: 42.593vw; } /* 110px / 460px */
  .malik-one-system__model--right { left: 56.481vw; width: 33.333vw; } /* 610px / 360px */
  .malik-one-system__model-card { display: none; }

  .malik-one-system__model-btn {
    width: 100%;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
    white-space: nowrap;
  }

  .malik-one-system__features {
    position: absolute;
    left: 1.481vw;  /* 16px */
    top: 88.889vw;  /* 960px */
    width: 97.037vw; /* 1048px */
    height: 153.704vw; /* 1660px */
    margin: 0;
    padding: 0;
    max-width: none;
    background: rgba(160, 148, 168, 0.1);
    backdrop-filter: blur(3.069vw); /* 33.15px */
    -webkit-backdrop-filter: blur(3.069vw);
    border-radius: 9.259vw; /* 100px */
    text-align: center;
  }
  .malik-one-system__feature {
    position: absolute;
    left: 19.815vw; /* 214px, panel-relative */
    width: 57.407vw; /* 620px */
    text-align: center;
    transform: none;
  }
  .malik-one-system__feature--top-left      { top: 14.907vw; } /* Decide with precision. */
  .malik-one-system__feature--top-right     { top: 40.278vw; } /* Perform at your peak. */
  .malik-one-system__feature--bottom-left   { top: 70vw; }     /* Coordinate effortlessly. */
  .malik-one-system__feature--bottom-center { top: 95.370vw; } /* Adapt instantly. */
  .malik-one-system__feature--bottom-right  { top: 120.741vw; } /* Replace chaos with clarity. */

  .malik-one-system__feature-title,
  .malik-one-system__feature--top-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    display: block;
    position: absolute;
    top: 0;
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    top: 0.702vw; /* 7.58px */
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }
  /* Desktop hugs each dot to its own quadrant's outer edge (left:0 on the
     left column, right:0 on the right column) and special-cases
     "Adapt instantly." as a static inline pair — all of it desktop-only
     layout logic that doesn't apply to mobile's stacked list. Those rules
     share this selector's specificity, so restating it here (later in
     the cascade) is what makes it win: every dot on mobile sits at the
     same fixed frame-relative x (Figma: calc(20% + 14px)), regardless of
     each item's title length. */
  .malik-one-system__feature--top-left .malik-one-system__feature-dot,
  .malik-one-system__feature--top-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-left .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    right: auto;
    top: 0.702vw;
    width: 3.138vw;
    height: 3.138vw;
    border-radius: 0.810vw;
    margin-right: 0;
  }
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    width: 41.840vw; /* 451.868px */
  }
  /* Desktop's unscoped base rule gives this item's body a 2.1rem
     margin-left to hug its static inline dot (see line ~4931). Mobile's
     dot goes back to the shared absolute layout above, so this item's
     body must match every other item's padding too — restated here to
     out-cascade that same-specificity base rule. */
  .malik-one-system__feature--bottom-center .malik-one-system__feature-body {
    margin-left: 0;
  }
  .malik-one-system__feature-body {
    position: absolute;
    top: 9.259vw; /* 100px below the title */
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    text-align: center;
  }

  .malik-one-system__explore-inner {
    position: static;
    display: block;
    max-width: none;
    /* Desktop's centering trick (left:50% + this transform) is a no-op
       for a position:static box, but `transform` still applies and still
       establishes a containing block for the position:absolute heading/
       body/button inside it, silently shifting them ~207px left (half of
       the leftover desktop `width: 414px`, also neutralized below). */
    width: auto;
    transform: none;
  }
  .malik-one-system__back {
    position: absolute;
    top: 50%;
    right: auto;
    transform: translateY(-50%);
    width: 18.519vw; /* 200px */
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }
  [data-os2-screen="model-0"] .malik-one-system__back { left: 1.481vw; }  /* 16px */
  [data-os2-screen="model-1"] .malik-one-system__back { left: auto; right: 1.481vw; } /* 16px */

  .malik-one-system__explore-logo {
    position: absolute;
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Desktop's `translate(-50%, -50%)` centering trick was never reset
       here, so it silently double-applied on top of the per-model
       frame-relative left/top below, offsetting the badge by half its
       own box size. */
    transform: none;
  }

  .malik-one-system__explore-heading {
    position: absolute;
    left: 1.481vw; /* 16px */
    width: 97.037vw; /* 1048px */
    margin-bottom: 0;
  }
  .malik-one-system__explore-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    margin-bottom: 0;
  }
  .malik-one-system .malik-btn--outline {
    /* Figma's Layout panel gives this button "Width: Hug (460px)" — the
       460px is just this instance's own content-fit result, not a fixed
       box — so it hugs its text via padding and stays centered via
       left:50%, instead of a fixed width paired with a fixed left. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }

  [data-os2-screen="model-0"] .malik-one-system__explore-logo {
    left: 20.939vw; /* 226.15px */
    top: 73.710vw;  /* 796.07px */
    width: 68.862vw; /* 743.71px */
    height: 30.463vw; /* 329px */
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 4.444vw; /* 48px */
    line-height: 4.444vw;
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-body { top: 136.204vw; } /* 1471px */
  [data-os2-screen="model-0"] .malik-btn--outline { top: 156.574vw; } /* 1691px */

  .malik-one-system__tags {
    position: absolute;
    top: 11.944vw; /* 129px */
    left: 0;
    right: 0;
    padding-inline: 1.481vw; /* 16px */
    gap: 0;
  }
  .malik-one-system__tag {
    gap: 2.593vw; /* ~28px */
    font-size: 3.704vw; /* 40px */
  }
  .malik-one-system__tag:last-child { flex-direction: row-reverse; }
  .malik-one-system__tag-dot {
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }

  [data-os2-screen="model-1"] .malik-one-system__explore-logo {
    left: 23.241vw; /* 251px */
    top: 74.352vw;  /* 803px */
    width: 52.778vw; /* 570px */
    height: 29.183vw; /* 315.17px */
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-body { top: 135.463vw; } /* 1463px */
  [data-os2-screen="model-1"] .malik-btn--outline { top: 155.833vw; } /* 1683px */
}

@media (max-width: 480px) {
  /* The base (desktop) rule's fixed `min-height: 810px` is unconditional
     and was never overridden here — since it's a flat px floor while the
     active screen's own height below is vw-based, at narrow widths the
     vw value computes to LESS than 810px and this stray floor wins,
     stretching the section and leaving dead space below the screen's
     real content. Zeroing it lets the active screen's own min-height be
     the only thing that determines the section's height. */
  .malik-one-system { padding-block: 0; min-height: 0; }
  .malik-one-system .malik-container { padding-inline: 0; height: auto; }

  .malik-one-system__screen {
    position: static;
    display: none;
  }
  .malik-one-system__screen.is-active {
    display: block;
    position: relative;
  }
  .malik-one-system__screen[data-os2-screen="hero"] { min-height: 244.444vw; /* 2640px */ }
  .malik-one-system__screen[data-os2-screen^="model-"] { min-height: 178.778vw; /* 1920px */ }

  .malik-one-system.is-explore { background: #000; }

  .malik-one-system__blob {
    top: 46.759vw; /* 505px */
  }
  .malik-one-system.is-explore .malik-one-system__blob {
    transform: translate3d(-50%, -50%, 0);
  }

  .malik-one-system__hero { position: relative; height: auto; }

  .malik-one-system__center {
    position: static;
    width: auto;
    transform: none;
  }
  .malik-one-system__eyebrow {
    position: absolute;
    top: 10.093vw; /* 109px */
    left: 50%;
    transform: translateX(-50%);
    width: 18.148vw; /* 196px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    margin-bottom: 0;
  }
  .malik-one-system__heading {
    position: absolute;
    top: 35vw; /* 378px */
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 7.407vw; /* 80px */
    line-height: 8.704vw; /* 94px */
  }

  .malik-one-system__model {
    position: absolute;
    top: 68.981vw; /* 745px */
    transform: none;
    right: auto;
  }
  .malik-one-system__model--left  { left: 10.185vw; width: 42.593vw; } /* 110px / 460px */
  .malik-one-system__model--right { left: 56.481vw; width: 33.333vw; } /* 610px / 360px */
  .malik-one-system__model-card { display: none; }

  .malik-one-system__model-btn {
    width: 100%;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
    white-space: nowrap;
  }

  .malik-one-system__features {
    position: absolute;
    left: 1.481vw;  /* 16px */
    top: 88.889vw;  /* 960px */
    width: 97.037vw; /* 1048px */
    height: 153.704vw; /* 1660px */
    margin: 0;
    padding: 0;
    max-width: none;
    background: rgba(160, 148, 168, 0.1);
    backdrop-filter: blur(3.069vw); /* 33.15px */
    -webkit-backdrop-filter: blur(3.069vw);
    border-radius: 9.259vw; /* 100px */
    text-align: center;
  }
  .malik-one-system__feature {
    position: absolute;
    left: 19.815vw; /* 214px, panel-relative */
    width: 57.407vw; /* 620px */
    text-align: center;
    transform: none;
  }
  .malik-one-system__feature--top-left      { top: 14.907vw; } /* Decide with precision. */
  .malik-one-system__feature--top-right     { top: 40.278vw; } /* Perform at your peak. */
  .malik-one-system__feature--bottom-left   { top: 70vw; }     /* Coordinate effortlessly. */
  .malik-one-system__feature--bottom-center { top: 95.370vw; } /* Adapt instantly. */
  .malik-one-system__feature--bottom-right  { top: 120.741vw; } /* Replace chaos with clarity. */

  .malik-one-system__feature-title,
  .malik-one-system__feature--top-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    display: block;
    position: absolute;
    top: 0;
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    top: 0.702vw; /* 7.58px */
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }
  /* Desktop hugs each dot to its own quadrant's outer edge (left:0 on the
     left column, right:0 on the right column) and special-cases
     "Adapt instantly." as a static inline pair — all of it desktop-only
     layout logic that doesn't apply to mobile's stacked list. Those rules
     share this selector's specificity, so restating it here (later in
     the cascade) is what makes it win: every dot on mobile sits at the
     same fixed frame-relative x (Figma: calc(20% + 14px)), regardless of
     each item's title length. */
  .malik-one-system__feature--top-left .malik-one-system__feature-dot,
  .malik-one-system__feature--top-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-left .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    right: auto;
    top: 0.702vw;
    width: 3.138vw;
    height: 3.138vw;
    border-radius: 0.810vw;
    margin-right: 0;
  }
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    width: 41.840vw; /* 451.868px */
  }
  /* Desktop's unscoped base rule gives this item's body a 2.1rem
     margin-left to hug its static inline dot (see line ~4931). Mobile's
     dot goes back to the shared absolute layout above, so this item's
     body must match every other item's padding too — restated here to
     out-cascade that same-specificity base rule. */
  .malik-one-system__feature--bottom-center .malik-one-system__feature-body {
    margin-left: 0;
  }
  .malik-one-system__feature-body {
    position: absolute;
    top: 9.259vw; /* 100px below the title */
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    text-align: center;
  }

  .malik-one-system__explore-inner {
    position: static;
    display: block;
    max-width: none;
    /* Desktop's centering trick (left:50% + this transform) is a no-op
       for a position:static box, but `transform` still applies and still
       establishes a containing block for the position:absolute heading/
       body/button inside it, silently shifting them ~207px left (half of
       the leftover desktop `width: 414px`, also neutralized below). */
    width: auto;
    transform: none;
  }
  .malik-one-system__back {
    position: absolute;
    top: 50%;
    right: auto;
    transform: translateY(-50%);
    width: 18.519vw; /* 200px */
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }
  [data-os2-screen="model-0"] .malik-one-system__back { left: 1.481vw; }  /* 16px */
  [data-os2-screen="model-1"] .malik-one-system__back { left: auto; right: 1.481vw; } /* 16px */

  .malik-one-system__explore-logo {
    position: absolute;
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Desktop's `translate(-50%, -50%)` centering trick was never reset
       here, so it silently double-applied on top of the per-model
       frame-relative left/top below, offsetting the badge by half its
       own box size. */
    transform: none;
  }

  .malik-one-system__explore-heading {
    position: absolute;
    left: 1.481vw; /* 16px */
    width: 97.037vw; /* 1048px */
    margin-bottom: 0;
  }
  .malik-one-system__explore-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    margin-bottom: 0;
  }
  .malik-one-system .malik-btn--outline {
    /* Figma's Layout panel gives this button "Width: Hug (460px)" — the
       460px is just this instance's own content-fit result, not a fixed
       box — so it hugs its text via padding and stays centered via
       left:50%, instead of a fixed width paired with a fixed left. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }

  [data-os2-screen="model-0"] .malik-one-system__explore-logo {
    left: 20.939vw; /* 226.15px */
    top: 73.710vw;  /* 796.07px */
    width: 68.862vw; /* 743.71px */
    height: 30.463vw; /* 329px */
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 4.444vw; /* 48px */
    line-height: 4.444vw;
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-body { top: 136.204vw; } /* 1471px */
  [data-os2-screen="model-0"] .malik-btn--outline { top: 156.574vw; } /* 1691px */

  .malik-one-system__tags {
    position: absolute;
    top: 11.944vw; /* 129px */
    left: 0;
    right: 0;
    padding-inline: 1.481vw; /* 16px */
    gap: 0;
  }
  .malik-one-system__tag {
    gap: 2.593vw; /* ~28px */
    font-size: 3.704vw; /* 40px */
  }
  .malik-one-system__tag:last-child { flex-direction: row-reverse; }
  .malik-one-system__tag-dot {
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }

  [data-os2-screen="model-1"] .malik-one-system__explore-logo {
    left: 23.241vw; /* 251px */
    top: 74.352vw;  /* 803px */
    width: 52.778vw; /* 570px */
    height: 29.183vw; /* 315.17px */
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-body { top: 135.463vw; } /* 1463px */
  [data-os2-screen="model-1"] .malik-btn--outline { top: 155.833vw; } /* 1683px */
}

@media (max-width: 360px) {
  /* The base (desktop) rule's fixed `min-height: 810px` is unconditional
     and was never overridden here — since it's a flat px floor while the
     active screen's own height below is vw-based, at narrow widths the
     vw value computes to LESS than 810px and this stray floor wins,
     stretching the section and leaving dead space below the screen's
     real content. Zeroing it lets the active screen's own min-height be
     the only thing that determines the section's height. */
  .malik-one-system { padding-block: 0; min-height: 0; }
  .malik-one-system .malik-container { padding-inline: 0; height: auto; }

  .malik-one-system__screen {
    position: static;
    display: none;
  }
  .malik-one-system__screen.is-active {
    display: block;
    position: relative;
  }
  .malik-one-system__screen[data-os2-screen="hero"] { min-height: 244.444vw; /* 2640px */ }
  .malik-one-system__screen[data-os2-screen^="model-"] { min-height: 178.778vw; /* 1920px */ }

  .malik-one-system.is-explore { background: #000; }

  .malik-one-system__blob {
    top: 46.759vw; /* 505px */
  }
  .malik-one-system.is-explore .malik-one-system__blob {
    transform: translate3d(-50%, -50%, 0);
  }

  .malik-one-system__hero { position: relative; height: auto; }

  .malik-one-system__center {
    position: static;
    width: auto;
    transform: none;
  }
  .malik-one-system__eyebrow {
    position: absolute;
    top: 10.093vw; /* 109px */
    left: 50%;
    transform: translateX(-50%);
    width: 18.148vw; /* 196px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    margin-bottom: 0;
  }
  .malik-one-system__heading {
    position: absolute;
    top: 35vw; /* 378px */
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 7.407vw; /* 80px */
    line-height: 8.704vw; /* 94px */
  }

  .malik-one-system__model {
    position: absolute;
    top: 68.981vw; /* 745px */
    transform: none;
    right: auto;
  }
  .malik-one-system__model--left  { left: 10.185vw; width: 42.593vw; } /* 110px / 460px */
  .malik-one-system__model--right { left: 56.481vw; width: 33.333vw; } /* 610px / 360px */
  .malik-one-system__model-card { display: none; }

  .malik-one-system__model-btn {
    width: 100%;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
    white-space: nowrap;
  }

  .malik-one-system__features {
    position: absolute;
    left: 1.481vw;  /* 16px */
    top: 88.889vw;  /* 960px */
    width: 97.037vw; /* 1048px */
    height: 153.704vw; /* 1660px */
    margin: 0;
    padding: 0;
    max-width: none;
    background: rgba(160, 148, 168, 0.1);
    backdrop-filter: blur(3.069vw); /* 33.15px */
    -webkit-backdrop-filter: blur(3.069vw);
    border-radius: 9.259vw; /* 100px */
    text-align: center;
  }
  .malik-one-system__feature {
    position: absolute;
    left: 19.815vw; /* 214px, panel-relative */
    width: 57.407vw; /* 620px */
    text-align: center;
    transform: none;
  }
  .malik-one-system__feature--top-left      { top: 14.907vw; } /* Decide with precision. */
  .malik-one-system__feature--top-right     { top: 40.278vw; } /* Perform at your peak. */
  .malik-one-system__feature--bottom-left   { top: 70vw; }     /* Coordinate effortlessly. */
  .malik-one-system__feature--bottom-center { top: 95.370vw; } /* Adapt instantly. */
  .malik-one-system__feature--bottom-right  { top: 120.741vw; } /* Replace chaos with clarity. */

  .malik-one-system__feature-title,
  .malik-one-system__feature--top-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-title,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    display: block;
    position: absolute;
    top: 0;
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    top: 0.702vw; /* 7.58px */
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }
  /* Desktop hugs each dot to its own quadrant's outer edge (left:0 on the
     left column, right:0 on the right column) and special-cases
     "Adapt instantly." as a static inline pair — all of it desktop-only
     layout logic that doesn't apply to mobile's stacked list. Those rules
     share this selector's specificity, so restating it here (later in
     the cascade) is what makes it win: every dot on mobile sits at the
     same fixed frame-relative x (Figma: calc(20% + 14px)), regardless of
     each item's title length. */
  .malik-one-system__feature--top-left .malik-one-system__feature-dot,
  .malik-one-system__feature--top-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-left .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-right .malik-one-system__feature-dot,
  .malik-one-system__feature--bottom-center .malik-one-system__feature-dot {
    position: absolute;
    left: -5.741vw;
    right: auto;
    top: 0.702vw;
    width: 3.138vw;
    height: 3.138vw;
    border-radius: 0.810vw;
    margin-right: 0;
  }
  .malik-one-system__feature--bottom-center .malik-one-system__feature-title {
    width: 41.840vw; /* 451.868px */
  }
  /* Desktop's unscoped base rule gives this item's body a 2.1rem
     margin-left to hug its static inline dot (see line ~4931). Mobile's
     dot goes back to the shared absolute layout above, so this item's
     body must match every other item's padding too — restated here to
     out-cascade that same-specificity base rule. */
  .malik-one-system__feature--bottom-center .malik-one-system__feature-body {
    margin-left: 0;
  }
  .malik-one-system__feature-body {
    position: absolute;
    top: 9.259vw; /* 100px below the title */
    left: 5.741vw; /* 62px, item-relative */
    width: 51.667vw; /* 558px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    text-align: center;
  }

  .malik-one-system__explore-inner {
    position: static;
    display: block;
    max-width: none;
    /* Desktop's centering trick (left:50% + this transform) is a no-op
       for a position:static box, but `transform` still applies and still
       establishes a containing block for the position:absolute heading/
       body/button inside it, silently shifting them ~207px left (half of
       the leftover desktop `width: 414px`, also neutralized below). */
    width: auto;
    transform: none;
  }
  .malik-one-system__back {
    position: absolute;
    top: 50%;
    right: auto;
    transform: translateY(-50%);
    width: 18.519vw; /* 200px */
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }
  [data-os2-screen="model-0"] .malik-one-system__back { left: 1.481vw; }  /* 16px */
  [data-os2-screen="model-1"] .malik-one-system__back { left: auto; right: 1.481vw; } /* 16px */

  .malik-one-system__explore-logo {
    position: absolute;
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Desktop's `translate(-50%, -50%)` centering trick was never reset
       here, so it silently double-applied on top of the per-model
       frame-relative left/top below, offsetting the badge by half its
       own box size. */
    transform: none;
  }

  .malik-one-system__explore-heading {
    position: absolute;
    left: 1.481vw; /* 16px */
    width: 97.037vw; /* 1048px */
    margin-bottom: 0;
  }
  .malik-one-system__explore-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    margin-bottom: 0;
  }
  .malik-one-system .malik-btn--outline {
    /* Figma's Layout panel gives this button "Width: Hug (460px)" — the
       460px is just this instance's own content-fit result, not a fixed
       box — so it hugs its text via padding and stays centered via
       left:50%, instead of a fixed width paired with a fixed left. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    letter-spacing: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(2px, 0.185vw);
    border-radius: 7.407vw; /* 80px */
  }

  [data-os2-screen="model-0"] .malik-one-system__explore-logo {
    left: 20.939vw; /* 226.15px */
    top: 73.710vw;  /* 796.07px */
    width: 68.862vw; /* 743.71px */
    height: 30.463vw; /* 329px */
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 4.444vw; /* 48px */
    line-height: 4.444vw;
  }
  [data-os2-screen="model-0"] .malik-one-system__explore-body { top: 136.204vw; } /* 1471px */
  [data-os2-screen="model-0"] .malik-btn--outline { top: 156.574vw; } /* 1691px */

  .malik-one-system__tags {
    position: absolute;
    top: 11.944vw; /* 129px */
    left: 0;
    right: 0;
    padding-inline: 1.481vw; /* 16px */
    gap: 0;
  }
  .malik-one-system__tag {
    gap: 2.593vw; /* ~28px */
    font-size: 3.704vw; /* 40px */
  }
  .malik-one-system__tag:last-child { flex-direction: row-reverse; }
  .malik-one-system__tag-dot {
    width: 3.138vw;  /* 33.89px */
    height: 3.138vw;
    border-radius: 0.810vw; /* 8.746px */
  }

  [data-os2-screen="model-1"] .malik-one-system__explore-logo {
    left: 23.241vw; /* 251px */
    top: 74.352vw;  /* 803px */
    width: 52.778vw; /* 570px */
    height: 29.183vw; /* 315.17px */
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-heading {
    top: 128.056vw; /* 1383px */
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
  }
  [data-os2-screen="model-1"] .malik-one-system__explore-body { top: 135.463vw; } /* 1463px */
  [data-os2-screen="model-1"] .malik-btn--outline { top: 155.833vw; } /* 1683px */
}

/* ════════════════════════════════════════════════════════════════
   LEARN MANAGEMENT
════════════════════════════════════════════════════════════════ */
.malik-learn {
  background: var(--malik-white);
  padding-block: var(--malik-section-py);
  /* Desktop's "courses" component (node 1:1745) drives the gallery -> list/
     detail switch with On Click -> Change to Variant2/3/4, Dissolve, Ease
     In, 300ms — a plain cross-fade, confirmed directly from Figma's own
     Interaction panel. This is the default (applies at all widths); the
     mobile "courses mob." component instead uses Smart Animate/Gentle/800ms
     for the same switch (a real matched-layer tween, not a dissolve), so
     that spec is restored as an override inside the mobile media query
     below instead of living here as the base value. */
  --malik-courses-gentle-duration: 300ms;
  --malik-courses-gentle-ease: ease-in;
  --malik-courses-gentle: var(--malik-courses-gentle-duration) var(--malik-courses-gentle-ease);
}

/* The mosaic needs its full 1440px to hit the Figma 1217px height via its
   aspect-ratio below; the shared .malik-container inline padding otherwise
   eats ~96px and caps it short. The mosaic already keeps a ~5.56% inset on
   every tile, so it doesn't need the container gutter on top of that. */
.malik-learn .malik-container { padding-inline: 0; }

/* Scattered mosaic — locked to the Figma design ratio (1440×1217) so the
   tile percentages below line up exactly; text block sized/positioned to
   match the Figma spec (heading 50/59, eyebrow+body 19/22, all centered). */
.malik-learn__mosaic {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 1217;
  margin: 0 auto;
}

.malik-learn__center {
  position: absolute;
  z-index: 2;
  left: 28.12%;
  right: 28.12%;
  top: 39%;
  text-align: center;
}

/* Figma (node 222:820, "myMalik Your pace, Your path. Malik certified"):
   414px wide vs. the 630px-wide heading/body below it, so it wraps onto
   its own 3 lines instead of running the full center-column width.
   65.71% = 414/630, i.e. that 414px as a share of the shared centered
   column (.malik-learn__center), which itself already scales with the
   mosaic so this stays proportional at any viewport. */
.malik-learn__eyebrow {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: clamp(0.7rem, 1.32vw, 19px);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  width: 65.71%;
  margin-inline: auto;
  margin-bottom: clamp(0.5rem, 0.9vw, 13px);
}

.malik-learn__heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.47vw, 50px);
  line-height: 1.18;
  letter-spacing: 0;
  margin-bottom: clamp(0.75rem, 4.1vw, 60px);
}

.malik-learn__body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: clamp(0.7rem, 1.32vw, 19px);
  line-height: 1.16;
  opacity: 0.85;
  margin-bottom: clamp(0.75rem, 2.1vw, 30px);
}

.malik-learn__cta {
  font-family: var(--malik-font-ubuntu);
  font-size: clamp(0.7rem, 1.32vw, 19px);
  padding: 0.55rem 1.5rem;
  border-radius: 30px;
}

/* Floating tiles — image fills the card, caption (if any) pinned to its
   bottom edge, exactly per the Figma "course N" layers (all border-radius 20px). */
.malik-learn__tile {
  position: absolute;
  z-index: 1;
  display: block;
  background: var(--malik-white);
  border: none;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s var(--malik-ease);
}
button.malik-learn__tile { cursor: pointer; }
button.malik-learn__tile:hover { transform: translateY(-4px); }

.malik-learn__tile-image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; /* clip the ACF zoom/rotate transform below to the tile */
}
.malik-learn__tile-image img,
.malik-learn__tile-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-course ACF Zoom/Rotation (set inline on the wrapper) */
  transform: rotate(var(--malik-media-rotate, 0deg)) scale(var(--malik-media-zoom, 1));
}

/* Caption sits off-screen below the tile; hovering slides the green
   overlay up from the bottom to cover the image, with the title
   revealed on top of it. */
.malik-learn__tile-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em;
  background: var(--malik-olive);
  font-family: var(--malik-font-ubuntu);
  font-size: clamp(0.6rem, 1.25vw, 18px);
  line-height: 1.2;
  text-align: center;
  color: var(--malik-white);
  transform: translateY(100%);
  transition: transform 0.45s var(--malik-ease);
}
button.malik-learn__tile:hover .malik-learn__tile-caption,
button.malik-learn__tile:focus-visible .malik-learn__tile-caption {
  transform: translateY(0);
}

/* Exact Figma slots, % of the 1440×1217 mosaic box */
.malik-learn__tile--1 { left: 28.12%; top: 11.5%;  width: 13.69%; height: 19.72%; } /* course 8 */
.malik-learn__tile--2 { left: 73.26%; top: 25.55%; width: 21.18%; height: 18.99%; } /* course 9 */
.malik-learn__tile--3 { left: 80.76%; top: 61.54%; width: 13.68%; height: 12.49%; } /* course 10 */
.malik-learn__tile--4 { left: 50.69%; top: 14.3%;  width: 13.69%; height: 16.02%; } /* course 14 */
.malik-learn__tile--5 { left: 43.19%; top: 81.02%; width: 13.62%; height: 18.98%; } /* course 11 */
.malik-learn__tile--6 { left: 13.06%; top: 58.92%; width: 13.61%; height: 18.98%; } /* course 12 */
.malik-learn__tile--7 { left: 5.56%;  top: 31.22%; width: 13.68%; height: 16.77%; } /* course 13 */

/* Figma crops the course-9 (MPO) photo asymmetrically within its card:
   the 2000x3000 source sits at top:-89px inside the 231px-tall tile, so
   89px is cropped off the top vs. 138px off the bottom (not centered).
   object-position keeps that same vertical bias at any rendered size. */
.malik-learn__tile--2 .malik-learn__tile-image img { object-position: 50% 39.21%; }

/* ── Mobile (Figma "courses mob." frame, 1080×2526) ───────────────
   Not the scattered desktop mosaic: mobile stacks eyebrow, two tile
   rows, the heading/body/cta, then a third tile row, all absolutely
   placed against the mosaic box so the layout matches Figma exactly.
   factor = px / 1080 * 100 (see .malik-services for the convention).
   Section's own padding-block is zeroed here because the frame's
   109px eyebrow offset already IS the top breathing room — keeping
   --malik-section-py on top would double it up. */
@media (max-width: 900px) {
  .malik-learn { padding-block: 0; }

  .malik-learn__mosaic {
    max-width: none;
    aspect-ratio: auto;
    min-height: 233.889vw; /* 2526px frame height */
  }

  .malik-learn__center {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: none;
    margin: 0;
  }

  .malik-learn__eyebrow,
  .malik-learn__heading,
  .malik-learn__body,
  .malik-learn__cta {
    position: absolute;
    margin: 0;
  }
  .malik-learn__eyebrow,
  .malik-learn__heading,
  .malik-learn__body {
    left: 50%;
    transform: translateX(-50%);
  }

  .malik-learn__eyebrow {
    top: 10.093vw; /* 109px */
    width: 57.407vw; /* 620px */
    font-size: 3.704vw; /* 40px */
  }

  .malik-learn__heading {
    top: 118.732vw; /* 1282.31px */
    width: 97.037vw; /* 1048px */
    font-size: 7.407vw; /* 80px */
    line-height: 107.14%;
  }

  .malik-learn__body {
    top: 140.214vw; /* 1514.31px */
    width: 97.037vw; /* 1048px */
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    opacity: 1;
  }

  /* left:50%+translateX(-50%) would look equivalent at rest, but
     .malik-learn__cta:hover sets transform:none !important (see the "no
     hover effect" rule near the top of this file) — on hover that wipes
     out a translateX-based centering entirely, snapping the button to the
     left. A plain computed `left` needs no transform, so it can't be
     knocked off-center by any hover/active state. Same fix as
     .malik-learn__tile--1 below and .malik-academy's contact-trigger CTA. */
  .malik-learn__cta {
    top: 165.214vw; /* 1784.31px */
    left: 29.630vw; /* (1080-440)/2 = 320px, centered */
    width: 40.741vw; /* 440px */
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    font-size: 3.704vw; /* 40px */
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw); /* Figma: 2px — base .malik-btn is 1.5px */
    /* Figma's rounded-[80px] on an 80px-tall button is a full capsule; the
       desktop rule's flat 30px (line ~5442) falls short of that here since
       it's more than a literal half-height, so mobile needs its own radius
       to actually reach the pill shape instead of a rounded rectangle. */
    border-radius: 7.407vw; /* 80px, fully rounded on an 80px-tall button */
  }

  /* Tiles keep their desktop numbering (same course, same tile--N
     across breakpoints) — only the on-screen slot changes. Numbers
     below match Figma's own "course N mob." naming 1:1. */
  .malik-learn__tile {
    display: block;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* Row 1: tile 7 (left), tile 1 (center, tallest), tile 2 (right) */
  .malik-learn__tile--7 {
    top: 43.704vw; left: 1.481vw; /* 472px, 16px */
    width: 27.870vw; height: 28.861vw; /* 301x311.7 */
    border-radius: 2.829vw;
  }
  .malik-learn__tile--1 {
    top: 39.722vw; left: 36.111vw; /* 429px, (1080-300)/2 centered */
    width: 27.778vw; height: 33.841vw; /* 300x365.48 */
    border-radius: 2.820vw;
  }
  .malik-learn__tile--2 {
    top: 42.870vw; left: 70.648vw; /* 463px, 763px */
    width: 27.870vw; height: 27.587vw; /* 301x297.94 */
    border-radius: 2.829vw;
  }

  /* Row 2: tile 3 (left), tile 4 (right) */
  .malik-learn__tile--3 {
    top: 81.019vw; left: 1.481vw; /* 875px, 16px */
    width: 37.685vw; height: 28.542vw; /* 407x308.25 */
    border-radius: 2.471vw;
  }
  .malik-learn__tile--4 {
    top: 81.019vw; left: 60.833vw; /* 875px, 657px */
    width: 37.685vw; height: 28.503vw; /* 407x307.83 */
    border-radius: 3.826vw;
  }

  /* Row 3: tile 5 (left), tile 6 (right) */
  .malik-learn__tile--5 {
    top: 181.852vw; left: 1.481vw; /* 1964px, 16px */
    width: 37.685vw; height: 44.415vw; /* 407x479.68 */
    border-radius: 3.845vw;
  }
  .malik-learn__tile--6 {
    top: 181.852vw; left: 60.833vw; /* 1964px, 657px */
    width: 37.685vw; height: 44.415vw; /* 407x479.68 */
    border-radius: 3.845vw;
  }

  /* "courses mob." (Figma's mobile variant of this component) specifies
     Smart Animate/Gentle/800ms for its own gallery<->detail reaction,
     unlike desktop's plain 300ms Dissolve above — restore that spec here
     since flipHeroFromTile() (malik-main.js) only runs at this breakpoint. */
  .malik-learn {
    --malik-courses-gentle-duration: 800ms;
    --malik-courses-gentle-ease: cubic-bezier(0.45, 0, 0.55, 1);
  }
}

/* ── Courses overlay: course list <-> course detail (summary/expanded) ── */
.malik-courses-overlay {
  /* Section-scoped, like .malik-contact-modal (testimonials): absolute
     against .malik-learn itself (position:relative via the shared
     .malik-section base rule), so it spans and scrolls away with the
     section's own box instead of covering the whole page. z-index:900
     matches the testimonials pattern too — below .malik-header's fixed
     z-index:1000, not above it. */
  position: absolute;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Matches "Rectangle 234" — the full-bleed dim/blur layer that only
     exists in Variant2/3, so Figma cross-dissolves it in (no matched
     layer in Default to tween a position/size from). visibility is
     delayed to the end of the 800ms fade on close (the "cross"/close
     button's Change to Default reaction) — without the delay it snaps
     invisible at t=0 instead of playing the fade-out. */
  transition: opacity var(--malik-courses-gentle),
              visibility 0s linear var(--malik-courses-gentle-duration);
  /* background: rgba(10, 10, 10, 0.35); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(40px);
  /* Same fix as .malik-contact-modal__backdrop (testimonials): now that
     this overlay lives inside the normal scrolling page instead of being
     position:fixed, backdrop-filter needs its own compositing layer or it
     stops repainting correctly mid-scroll in some browsers, leaving stale
     unblurred frames of the page behind it visible through the blur. */
  will-change: backdrop-filter;
  transform: translateZ(0);
}
.malik-learn.is-overlay .malik-courses-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.malik-learn.is-overlay { overflow: visible; }

/* Video-backed mosaic tiles (e.g. course thumbnails using an mp4) sit on
   their own compositor layer in most browsers and are NOT captured by the
   overlay's backdrop-filter, so they'd stay sharp behind the blur while
   image tiles blur correctly. Hide just the <video> — the tile's own
   white background still reads as part of the blurred backdrop. */
.malik-learn.is-overlay .malik-learn__tile-image video { visibility: hidden; }

/* Replaced by the plain transparent/blurred overlay above — no longer
   showing the course thumbnails as a static backdrop grid. */
.malik-courses-overlay__backdrop { display: none; }

.malik-courses-panel,
.malik-course-detail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Course-detail ("Frame 3") has no matching layer in Variant2, so Figma
     just cross-dissolves it in; the list panel below overrides this with
     an added slide since it DOES have a matched layer to tween. visibility
     is delayed to the end of the fade so closing (the "cross" button's
     Change to Default reaction) fades out over the full 800ms instead of
     vanishing instantly. */
  transition: opacity var(--malik-courses-gentle),
              visibility 0s linear var(--malik-courses-gentle-duration);
}
.malik-courses-panel.is-active,
.malik-course-detail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.malik-courses-panel.is-active { transform: translateY(0); }

/* .malik-course-detail only — NOT .malik-courses-panel (the course list
   screen), which keeps the shared inset:0 above untouched. inset:0 on the
   shared rule fills .malik-courses-overlay's full padding-box, i.e. the
   mosaic's content height PLUS .malik-learn's sitewide 80px top+bottom
   section padding (--malik-section-py) — ~160px taller than Figma's own
   1193px course-detail frame. That's invisible while .__bg's photo/scrim
   still paints edge-to-edge across it, but it means every Figma-exact vw
   offset below (.__bg's img crop, .__sheet's 230px top gap) was measured
   against the WRONG box, leaving ~160px of unaccounted dead space (mostly
   landing below the sheet once its position stopped being flex-centered
   over top of it). Insetting by --malik-section-py top/bottom here makes
   .malik-course-detail's own box match the mosaic's content height
   directly — within ~24px of Figma's 1193px frame (the residual gap
   between Figma's course-detail frame height and the *gallery* frame
   height this shared section is actually built to, which this
   shared-container architecture can't close any further without resizing
   .malik-learn itself per-screen). .__bg/.__scrim below stay inset:0
   against THIS smaller box, so they keep covering it edge-to-edge with no
   white gap — only .malik-courses-overlay's outer 80px strips (still
   covered by its own backdrop-blur over the dimmed gallery, not the plain
   white .malik-learn background) are no longer part of this course's own
   photo/scrim. */
.malik-course-detail {
  inset: var(--malik-section-py) 0;
}
/* .malik-learn zeroes its own top+bottom section padding below 900px (see
   that rule), so the desktop subtraction above would over-shrink this box
   by 160px for nothing at that width — restored to plain inset:0 to match. */
@media (max-width: 900px) {
  .malik-course-detail { inset: 0; }
}

/* Course list panel — Figma's own layer (named "Group 160") is the same
   instance in both Default and Variant2, just at a different y (off past
   the bottom of the section vs. resting in view), so Smart Animate tweens
   its position rather than cross-dissolving a fresh element. Reproduced
   here as a rise-in-place slide (translateY) rather than the literal Figma
   offset, since that offset only makes sense inside Figma's tall inline
   mock frame — here the panel is a fixed, viewport-centered card, so a
   literal pixel-for-pixel translate would fling it off past the modal's
   own edges instead of reading as a gentle rise into place. */
/* Figma node 1:1784 ("courses" group, Variant4): 630-wide card, centered
   both ways in the 1440x1217 frame (top:466 = (1217-285)/2 exactly). Padding
   is a symmetric 60px top/bottom (item2's own bottom sits exactly 60px above
   the card's bottom edge, matching the heading's 60px top inset) — list
   itself is NOT centered, it's left-aligned starting 110px from the card's
   left edge (Component1/2 in Figma start at the same x regardless of their
   different rendered widths, i.e. a fixed indent, not a centered block). */
.malik-courses-panel {
  position: relative;
  z-index: 1;
  width: min(43.75vw, 630px); /* 630px */
  max-width: none;
  margin: 1.5rem;
  transform: translateY(2.5rem);
  transition: opacity var(--malik-courses-gentle), transform var(--malik-courses-gentle),
              visibility 0s linear var(--malik-courses-gentle-duration);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(23, 23, 23, 0.47);
  /* backdrop-filter: blur(min(2.108vw, 30.35px)); 30.35px, same as every card on the detail screens */
  /* -webkit-backdrop-filter: blur(min(2.108vw, 30.35px)); */
  border-radius: min(5vw, 72px); /* 72px */
  padding: min(4.167vw, 60px) 0; /* 60px top/bottom; sides are per-child (see heading/list below) */
  text-align: center;
  color: var(--malik-white);
  scrollbar-width: none; /* Firefox — Figma shows no scroll indicator (see mobile, where this panel scrolls if the list grows) */
  -ms-overflow-style: none;
}
.malik-courses-panel::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* Close button (Figma "buttons" instance, 65.414x36): floats OUTSIDE the
   card — 92px to the right of its right edge, top-aligned with the card's
   own top edge — not a corner X inside the card. Identical relationship on
   .malik-course-detail__sheet below (same 630-wide card, same 92px gap). */
.malik-courses-panel__close,
.malik-course-detail__close {
  position: absolute;
  top: 0;
  left: 100%;
  right: auto;
  margin-left: min(6.389vw, 92px); /* 92px */
  width: min(4.542vw, 65.414px); /* 65.414px */
  height: min(2.5vw, 36px); /* 36px */
  border-radius: min(1.25vw, 18px);
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: var(--malik-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
/* Desktop keeps the plain "×" glyph; mobile swaps in the exact Figma vector
   (see the @media block below) since Figma's close icon is a mitered X
   polygon, not two straight rotated bars — the glyph and svg are both
   always in the markup, toggled per breakpoint. */
.malik-courses-panel__close-icon { display: none; }
.malik-courses-panel__heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: min(2.5vw, 36px); /* 36px */
  line-height: 1.2;
  width: min(38.889vw, 560px); /* 560px, i.e. 35px inset each side */
  margin: 0 0 min(4.444vw, 64px); /* list-top(167) minus heading-top(60) minus the heading's own ~43px rendered
    line height (36px Work Sans Medium @ line-height:1.2) = ~64px gap below the heading's own box */
}
.malik-courses-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  margin-left: min(7.639vw, 110px); /* 110px from the card's own left edge */
  gap: min(1.389vw, 20px); /* 20px, item1-bottom to item2-top */
  text-align: left;
}
.malik-courses-panel__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  background: none;
  border: none;
  color: var(--malik-white);
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: normal;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.25s;
  white-space: nowrap; /* Figma: both list rows are explicitly whitespace-nowrap, not reflowed to fit */
}
.malik-courses-panel__item:hover .malik-courses-panel__item-title,
.malik-courses-panel__item:hover .malik-courses-panel__item-num { color: var(--malik-black); }
.malik-courses-panel__item-num {
  flex: 0 0 min(4.653vw, 67px); /* 67px fixed column, same value mobile already uses */
  text-align: left;
  opacity: 1; /* Figma: number is plain text-white, same as the title — no dimming */
}

/* Course detail screen — full-bleed background + summary / expanded states */
.malik-course-detail__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Fallback for course-87 below: its bg image is capped to a fixed 99.33vh
     (see the vw/vh comment on that rule) so its hand-tuned crop doesn't
     stretch, but this box itself still spans the whole (now section-tall,
     not viewport-tall) container — without a matching fill color, the gap
     below the image's bottom edge exposed the blurred mosaic behind the
     overlay as a hard seam. A plain dark fill reads as part of the existing
     scrim gradient (inset:0, same box) fading to black instead. Harmless
     for every other course, whose bg image already covers this box's full
     height via object-fit:cover. */
  background: #0d0d0d;
}
/* Mobile-only background override (course_bg_media_mobile) — hidden by
   default; shown in its place of the desktop one only ≤1024px, see the
   @media block further down. No courses use this today, so this is a
   no-op until one sets a Mobile Background in ACF. */
.malik-course-detail__bg--mobile { display: none; }
.malik-course-detail__bg .malik-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-course ACF Zoom/Rotation (set inline on .malik-course-detail__bg).
     Also composes with the hand-tuned absolute boxes on course-87 below. */
  transform: rotate(var(--malik-media-rotate, 0deg)) scale(var(--malik-media-zoom, 1));
}

/* EMP® course detail (node 1:1943): Figma builds this background by
   rotating a 1315x1440 frame -90deg and placing the photo inside it at
   left:0.73% top:-18.65% w:99.33% h:136.1% (relative to the pre-rotation
   frame), and that rotated 1440x1315 box itself sits at top:-56px inside
   the 1440x1193 course-detail frame (confirmed directly from Figma's own
   dev-mode box model, not eyeballed). Working the -90deg rotation through
   properly (rotating the img's 4 corners about the box's own center, then
   adding the box's -56px offset) gives the exact final box in the SAME
   1440-basis vw units the rest of this component already uses for every
   other absolute-positioned value: left:-18.65vw top:-3.944vw
   width:136.1vw height:90.708vw. (A prior version of this rule used
   top:0/height:100% of the live DOM container as a stand-in — but that
   container is fixed to the gallery state's 1217px aspect-ratio, not
   Variant2's 1193px frame, so it silently fought the vw math everywhere
   else in this component; a translateY(20px) fudge papered over the gap
   without fully closing it. No actual rotation is needed in CSS —
   object-fit:cover can't reproduce this asymmetric stretch/crop anyway,
   so this replaces it with the exact box.) */
[data-courses-screen="course-87"] .malik-course-detail__bg .malik-video-bg {
  position: absolute;
  left: -18.65vw;
  top: -3.944vw; /* -56.789px at the 1440 basis */
  width: 136.1vw;
  height: 90.708vw; /* 1306.19px at the 1440 basis */
  max-width: none;
  object-fit: fill;
}
.malik-course-detail__card--date-rows
.malik-course-detail__row.malik-course-detail__row--fee {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100%;
    gap: 7.5vw;

    border-top: 1px solid rgba(255, 255, 255, 0.669);
    border-bottom: 1px solid rgba(255, 255, 255, 0.669);

    margin-top: 30px;
    margin-bottom: 50px;
    padding: 20px 0;

    text-transform: none !important;
}

.malik-course-detail__card--date-rows
.malik-course-detail__row--fee span:first-child {
    flex: 0 0 auto;
    margin: 0 !important;
    text-align: left !important;
}

.malik-course-detail__card--date-rows
.malik-course-detail__row--fee span:last-child {
    flex: 0 0 auto;
    margin: 0 !important;
    text-align: left !important;
}
.malik-btn.malik-btn--outline-light.malik-course-detail__learnMore {
    color: var(--malik-black);
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-style: Regular;
    font-size: clamp(0.7rem, 1.32vw, 19px);
    line-height: 117%;
    letter-spacing: 0%;
    text-align: center;
}

/* .malik-course-detail__learnMore is on the WRAPPING div (see
   section-learn.php), not the <a> itself, so a compound class chain here
   (.malik-btn.malik-btn--outline-light.malik-course-detail__learnMore, as
   above) never matches any real element — the hover silently fell through
   to .malik-btn--outline-light's own generic hover (white bg/black text),
   the opposite of Figma's black bg/white text for this button. Descendant
   selector instead, so it actually targets the <a>. */
.malik-course-detail__learnMore .malik-btn.malik-btn--outline-light:hover {
    color: var(--malik-white);
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    background: var(--malik-black);
    font-style: Regular;
    font-size: clamp(0.7rem, 1.32vw, 19px);
    line-height: 117%;
    letter-spacing: 0%;
    text-align: center;
}
.malik-btn.malik-btn--outline-light.malik-course-detail__summary-book:hover {
    color: var(--malik-white);
    background: var(--malik-black);
}
.malik-btn.malik-btn--outline-light.malik-course-detail__summary-book {
  height: 36px;
}

/* MPO® course detail (node 1:1790): a plain top-anchored cover crop — no
   rotation trick needed here, Figma's own numbers (100.02% wide, 181.22%
   tall, left/top ~0) resolve to exactly object-fit:cover with the focal
   point pinned to the top rather than centered. */
[data-courses-screen="course-88"] .malik-course-detail__bg .malik-video-bg {
  object-position: 50% 0%;
}
.malik-course-detail__scrim {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%); */
}
/* Desktop keeps the plain "×" glyph; mobile swaps in the exact Figma
   vector (see the @media block below) — same reasoning as
   .malik-courses-panel__close-icon above. */
.malik-course-detail__close-icon { display: none; }

/* Figma node 1:1945/1:1792 ("6" wrapper containing the whole scrollable
   stack): a 630x718 window with its own 50px corner radius clipping the
   cards as they scroll past the top/bottom edge. This wrapper is the
   positioned anchor for the close button (92px gap, top-aligned — see
   the shared rule above).
   Figma places it at top:calc(50% - 7.5px) (translateY(-50%)) inside its
   own 1193px-tall course-detail frame — a 230px top gap vs 245px bottom
   gap, confirmed straight from Figma's dev-mode box model. .malik-learn's
   live box isn't 1193px tall though: .malik-courses-overlay/.__bg span
   .malik-learn's full padded box (mosaic content height, itself vw-scaled
   off Figma's separate 1217px gallery frame, PLUS the sitewide
   --malik-section-py 80px top+bottom), so the old "flex-center the sheet
   in .malik-course-detail, then nudge" approach centered it in a box
   ~180px taller than Figma's own frame, leaving a big extra gap above and
   below no matter how the nudge was tuned. Positioning the sheet directly
   off .malik-course-detail's own top edge (the same reference point
   .malik-course-detail__bg's img already measures its own Figma-exact
   top/height from, two rules above) sidesteps that mismatch entirely:
   230px at the 1440 basis, same vw convention as everything else in this
   component. */
.malik-course-detail__sheet {
  position: absolute;
  z-index: 2;
  top: 15.972vw; /* 230px at the 1440 basis */
  left: 50%;
  transform: translateX(-50%);
  width: min(43.75vw, 630px); /* 630px */
}
.malik-course-detail__close-wrap { display: contents; }

.malik-course-detail__expanded {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.malik-course-detail__scroll {
  width: 100%;
  /* max-height, not height: 718px is Figma's own scroll-window size for a
     FULLY populated course (every card present), but most courses have far
     less content (some are just the summary card) — a fixed height left a
     big empty gap below short stacks and made them scrollable when there
     was nothing to scroll to. max-height keeps the 718px cap (and the
     internal scroll) for courses that actually exceed it, while shorter
     ones size to their real content instead. */
  /* calc(100vh - 120px) is the added safety clamp: with the sheet centered
     plus its own top offset (see .malik-course-detail__sheet above), a
     flat 718px cap could still run past the bottom of a short viewport
     with no way to scroll the fixed overlay itself back into view — this
     makes the box shrink to fit instead once the viewport is too short for
     the full 718px, so overflow content is still reachable via this box's
     own overflow-y:auto rather than being pushed off-screen entirely. */
  max-height: min(49.861vw, 718px, calc(100vh - 120px)); /* 718px, Figma's own scroll-window height */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* stop wheel scroll chaining through to the
    page behind the modal once this inner stack hits its own scroll limit */
  border-radius: min(3.472vw, 50px); /* 50px */
  display: flex;
  flex-direction: column;
  gap: min(1.667vw, 24px); /* 24px, confirmed identical gap between every card */
  padding: 0;
  cursor: grab;
  touch-action: none;
  /* Figma shows a clean rounded-clip window with no visible scroll
     indicator at all (scrolling is driver-blind, via drag or wheel) —
     hide the native OS scrollbar cross-browser rather than letting it cut
     a straight line through the 50px-rounded corner. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.malik-course-detail__scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.malik-course-detail__scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Every card in the stack shares this exact chrome: 630 wide, 72px radius,
   rgba(23,23,23,.47) @ 30.35px blur. The title/badge/book summary is just
   the stack's first card in Figma, not a separate collapsed state (see
   section-learn.php), but unlike the flow-based cards below it, Figma
   places its children at fixed absolute y-coordinates (60/184/263/556)
   that do NOT shift with the title's line count — EMP's 1-line title and
   MPO's 2-line title both still land their subtitle at exactly top:184, so
   this is reproduced as literal absolute positions (fixed 646px card
   height) rather than margin-flow, which would only be correct for one of
   the two courses' title lengths. */
.malik-course-detail__card {
  width: 100%;
  background: rgba(23, 23, 23, 0.47);
  backdrop-filter: blur(min(2.108vw, 30.35px)); /* 30.35px */
  -webkit-backdrop-filter: blur(min(2.108vw, 30.35px));
  border-radius: min(5vw, 72px); /* 72px */
  padding: min(4.167vw, 60px) min(2.431vw, 35px); /* 60px / 35px */
  color: var(--malik-white);
  text-align: center;
  flex: none;
}
.malik-course-detail__summary {
  position: relative;
  width: 100%;
  height: min(44.861vw, 646px); /* 646px, Figma's own card height */
  background: rgba(23, 23, 23, 0.47);
  backdrop-filter: blur(min(2.108vw, 30.35px));
  -webkit-backdrop-filter: blur(min(2.108vw, 30.35px));
  border-radius: min(5vw, 72px);
  color: var(--malik-white);
  text-align: center;
  flex: none;
}
.malik-course-detail__title {
  position: absolute;
  top: min(4.167vw, 60px); /* 60px */
  left: min(2.431vw, 35px);
  right: min(2.431vw, 35px);
  margin: 0;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: min(2.5vw, 36px); /* 36px */
  line-height: 1.2;
}
.malik-course-detail__subtitle {
  position: absolute;
  top: min(12.778vw, 184px); /* 184px, fixed regardless of title line count */
  left: min(2.431vw, 35px);
  right: min(2.431vw, 35px);
  margin: 0;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1;
}
.malik-course-detail__badge {
  position: absolute;
  top: min(18.264vw, 263px); /* 263px */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(32.5vw, 468px); /* 468px */
  height: min(19.028vw, 274px); /* 274px */
  background: var(--malik-white);
  color: var(--malik-black);
  border-radius: min(1.736vw, 25px); /* 25px */
  padding: 0;
}
.malik-course-detail__badge img {
  position: absolute;
  top: min(1.528vw, 22px); /* 22px, Figma "image 2" y=285 inside card top y=263 */
  left: min(9.583vw, 138px); /* 138px, Figma "image 2" x=219 inside card left x=81 (not horizontally centered in Figma) */
  width: min(14.917vw, 214.795px); /* 214.795px */
  height: min(15.911vw, 229.115px); /* 229.115px */
  object-fit: contain;
}
/* Figma's badge is a single flattened image with its caption already baked
   into the bitmap (no separate text layer) — audience_label has no
   counterpart here, same reasoning as the mobile override below. */
.malik-course-detail__badge span { display: none; }
.malik-course-detail__summary-actions {
  position: absolute;
  top: min(38.611vw, 556px); /* 556px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.malik-course-detail__card-heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: min(2.5vw, 36px); /* 36px, same as the panel/title heading */
  line-height: 1.2;
  margin: 0 0 min(4.097vw, 59px); /* heading-top to body-top gap, confirmed across every card */
}
.malik-course-detail__card-body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  opacity: 1;
  /* Figma centers every plain card-body paragraph in this stack (What It
     Is node 1:1998, How It Works node 1:1972, and the Dates card's own
     intro/format/duration/note, confirmed via Figma's dev-mode box model)
     — this was left-aligned, silently fighting .malik-course-detail__card's
     own text-align:center above it and never matching Figma for What It
     Is / How It Works, which don't use the --center modifier below (it
     only ever existed for the Dates card's uppercase, not for centering
     — this rule alone already covers every plain usage). */
  text-align: center;
}
.malik-course-detail__card-body--center { text-align: center; text-transform: uppercase; }
.malik-course-detail__card-body--note   { opacity: 0.6; }

/* WYSIWYG module lists ("What you learn"): Figma pins each item's number to
   a fixed left column (x:35px) while the title text centers independently
   across the full card width — the number never shifts the text's center
   point. Reproduced with li stretched full-width and the counter absolutely
   positioned at the left edge, out of the centered text's flow, rather than
   an inline "N. " prefix (which would drag the number along with however
   far each title's own centered block happens to sit). */
.malik-course-detail__rich {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  text-align: center;
  /* text-transform: uppercase; */
  opacity: 1;
}
.malik-course-detail__rich h1,
.malik-course-detail__rich h2,
.malik-course-detail__rich h3,
.malik-course-detail__rich h4 {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(1.319vw, 19px); /* 19px, same as the list items — Figma's
    module-group labels ("Basics" etc.) are plain Ubuntu Mono, not a
    separate Work Sans heading style */
  letter-spacing: 0;
  margin: min(1.181vw, 17px) 0 min(1.181vw, 17px);
  opacity: 1;
}
.malik-course-detail__rich h1:first-child,
.malik-course-detail__rich h2:first-child,
.malik-course-detail__rich h3:first-child,
.malik-course-detail__rich h4:first-child { margin-top: 0; }
.malik-course-detail__rich ul,
.malik-course-detail__rich ol {
  list-style: none;
  counter-reset: malik-course-item;
  padding-left: 0;
  margin: 0 0 min(1.181vw, 17px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: min(1.528vw, 22px); /* 22px, row-to-row gap */
}
.malik-course-detail__rich ol li {
  counter-increment: malik-course-item;
  position: relative;
}
.malik-course-detail__rich ol li::before {
  content: counter(malik-course-item) ".";
  position: absolute;
  left: 0;
  top: 0;
}
/* MPO® course detail (node 399:1158): every module-group sub-list numbers
   its items "01." "02." … zero-padded, restarting per group — unlike EMP®'s
   plain "1." "2." single flat list. Driven by the "Zero-pad List Numbers"
   ACF field (course_learn_zero_pad), not a hardcoded course slug, so any
   admin can turn it on/off per course without a code change. */
.malik-course-detail__rich--zero-pad ol li::before {
  content: counter(malik-course-item, decimal-leading-zero) ".";
}

.malik-course-detail__foundation {
  display: flex;
  gap: min(2.083vw, 30px); /* 30px, gap between foundation cards */
  flex-wrap: wrap;
  justify-content: center;
  margin-top: min(1.389vw, 20px);
}
.malik-course-detail__foundation-item { flex: 0 1 min(18.394vw, 264.869px); max-width: min(18.394vw, 264.869px); }
.malik-course-detail__foundation-image {
  background: var(--malik-white);
  border-radius: min(1.736vw, 25px); /* 25px, same as the summary badge */
  overflow: hidden;
  aspect-ratio: 264.869 / 253.578;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: min(1.319vw, 19px);
}
.malik-course-detail__foundation-image img { max-width: 80%; max-height: 80%; object-fit: contain; }
.malik-course-detail__foundation-item p,
.malik-course-detail__foundation-item a {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325;
  opacity: 1;
}
.malik-course-detail__foundation-item a {
  display: block;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.malik-course-detail__rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; }
.malik-course-detail__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: max(0.5px, 0.046vw) solid rgba(255, 255, 255, 0.669); /* Figma: white hairline divider, ~0.67px */
  padding-block: min(1.319vw, 19px);
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  text-transform: uppercase;
}
/* Figma (node 399:1113, e.g. "English:"/"June 9, 2026"): the label stays
   plain sentence case, positioned normally at the row's own left edge —
   only the value is uppercase, AND it's centered on the row's own
   horizontal midpoint via its own absolute position, completely
   independent of the label's width (confirmed: both the English and
   German rows' dates sit at the exact same centered x despite their
   labels being different lengths). Not the flush-right "space-between"
   layout this used to have — display/justify-content above are now inert
   for layout (the value's positioned out of flow below) but left alone
   since they're harmless and still center a lone flex item correctly. */
.malik-course-detail__row span:first-child { text-transform: none; }
.malik-course-detail__row span:last-child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.malik-course-detail__row + .malik-course-detail__row { border-top: none; }

/* MPO® course detail (node 399:1113, confirmed via Figma's own dev-mode
   box model, not eyeballed): Format and Note are plain sentence-case
   lines — still centered like every other line in this card (the shared
   --center modifier already gets that half right), just not uppercase.
   Duration, right next to them, genuinely IS uppercase in Figma (its own
   text layer, typed in lowercase, has Figma's text-case style applied —
   Format's and Note's don't), so it keeps plain --center untouched.
   --no-caps is a new, opt-in modifier (see section-learn.php) that only
   cancels --center's uppercase; scoped to this course since no other
   course's Format/Note text has been confirmed to want the same
   treatment. Every block in the card also sits on a uniform 40px rhythm
   that no shared class reproduces on desktop. */
[data-courses-screen="course-88"] .malik-course-detail__card-body--center.malik-course-detail__card-body--no-caps {
  text-transform: none;
}
/* Figma's Note text is full-strength white, not the shared --note
   modifier's dimmed 60% opacity (that dimming may still be correct for
   other courses' notes — unconfirmed — so this only lifts it here). */
[data-courses-screen="course-88"] .malik-course-detail__card-body--note {
  opacity: 1;
}
[data-courses-screen="course-88"] .malik-course-detail__card-body--center,
[data-courses-screen="course-88"] .malik-course-detail__rows {
  margin-bottom: min(2.778vw, 40px); /* 40px, confirmed rhythm between every block in this card */
}
/* Note's own gap to the button below is handled by .malik-text-center's
   margin-top just below instead of this 40px rhythm. */
[data-courses-screen="course-88"] .malik-course-detail__card-body--note {
  margin-bottom: 0;
}
/* Overrides the shared, all-courses fee-row rule's 30px/50px margins (see
   .malik-course-detail__card--date-rows .row--fee above) with this card's
   own confirmed 40px/40px rhythm — matches that rule's own selector plus
   the course-88 attribute, so it's specific enough to win the cascade
   without touching what any other course's fee row uses. */
[data-courses-screen="course-88"] .malik-course-detail__card--date-rows .malik-course-detail__row.malik-course-detail__row--fee {
  margin-top: min(2.778vw, 40px);
  margin-bottom: min(2.778vw, 40px);
}
[data-courses-screen="course-88"] .malik-course-detail__card .malik-text-center {
  margin-top: min(2.083vw, 30px); /* 30px, Note-to-button gap */
}

/* MPO® course detail (node 399:1118): the Dates card's CTA is a plain
   external link ("You can read more about the program here.") styled as an
   underlined, solid-white-bordered pill — not the plain unlined pill EMP®
   uses for its own "LEARN MORE" button (node 394:1116), so this is scoped
   to course-88 rather than restyling .malik-btn globally. */
[data-courses-screen="course-88"] .malik-course-detail__card .malik-text-center .malik-btn {
  text-decoration: underline;
  border-color: #fff;
}

/* ── Mobile (Figma "courses mob." frame, 1080×2526 — "Property
   1=Variant2" for the course-list modal, "Property 1=Variant3" for
   the course-detail screen) ──────────────────────────────────────
   factor = px / 1080 * 100 (see .malik-services for the convention).
   One breakpoint covers 1024/768/480/360 (see .malik-footer__mobile
   for the same reasoning) — Figma supplies a single 1080px-wide
   mobile reference, so nothing differs between those widths.

   Two deliberate departures from a literal 1:1 layer dump, both
   disclosed here rather than silently "fixed":
   1) Figma nests the course-detail's close (X) INSIDE the first
      scrollable card, i.e. it scrolls away with the content rather
      than staying pinned — reproduced as-is below (position:absolute
      inside the now-scrolling .malik-course-detail), since that's
      what the layer tree actually specifies.
   2) Figma's course-detail mock shows summary + every card in one
      continuous scroll with no separate "tap to expand" step (no
      second CTA next to Book, no collapsed state) — reproduced by
      forcing .__summary/.__expanded permanently visible and hiding
      the expand/collapse toggle buttons on mobile, rather than
      keeping the desktop card-flip interaction. The "Back" arrow has
      no counterpart in this mock either (only the X exists), so it's
      hidden too. */
@media (max-width: 1024px) {
  .malik-courses-overlay {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2.458vw); /* 26.55px */
    -webkit-backdrop-filter: blur(2.458vw);
  }

  /* ── Course list modal ("Courses", Variant2) ────────────────────── */
  .malik-courses-panel {
    width: 79.074vw;      /* 854px */
    min-height: 56.852vw; /* 614px — Figma's own height, kept as a floor
      (not a fixed height) so a real course list longer than the 2 items
      shown in the mock grows the card instead of clipping it */
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: none;
    margin: 0;
    padding: 12.647vw 0 13.148vw; /* 136.59px top (heading's own inset),
      142px bottom (panel height minus the list's own content height) */
    background: rgba(23, 23, 23, 0.47);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0.370vw 0.370vw rgba(0, 0, 0, 0.25); /* 0 4px 4px */
    border-radius: 9.259vw; /* 100px */
  }
  .malik-courses-panel__close {
    top: 8.110vw;   /* 87.59px, panel-relative */
    right: 6.842vw; /* 73.89px, panel-relative */
    left: auto;
    width: 4.732vw;  /* 51.1055px — exact Figma "close" vector bounding box */
    height: 4.515vw; /* 48.7627px */
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .malik-courses-panel__close-glyph { display: none; }
  .malik-courses-panel__close-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .malik-courses-panel__heading {
    font-family: var(--malik-font-sans);
    font-weight: 500;
    font-size: 5.926vw;  /* 64px */
    line-height: 6.944vw; /* 75px */
    margin-bottom: 9.259vw; /* 100px, heading bottom to list top */
  }
  .malik-courses-panel__list {
    width: 57.407vw; /* 620px */
    gap: 7.370vw;    /* 79.59px, row-to-row gap */
  }
  .malik-courses-panel__item {
    /* Figma's "1."/"2." number boxes report different widths for the same
       2-char string (53.1px vs 40px — a per-layer bounding-box quirk, not a
       real content difference), but the title always starts at the same
       fixed x regardless (list-left + 67px in both rows), so the number is
       a fixed-width left-aligned column rather than a content-based gap. */
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    padding: 0;
    font-size: 3.704vw;  /* 40px */
    line-height: 3.704vw; /* 40px */
    letter-spacing: 0;
    white-space: nowrap; /* Figma: whitespace-nowrap on both rows */
  }
  .malik-courses-panel__item-num {
    flex: 0 0 6.204vw; /* 67px fixed column (297-230 in the Figma spec) */
    text-align: left;
    opacity: 1; /* Figma: number is plain text-white, same as the title —
      no dimming (the base rule's opacity:0.6 is a desktop-only treatment) */
  }

  /* ── Course detail screen (Variant3) ─────────────────────────────
     Figma's "Frame 3" (856×1529, top:233px, rounded-80, overflow-y:auto)
     is its OWN scroll container, distinct from the full 1080×2526 screen —
     the bg/scrim/blurred overlay live outside it and never move; only this
     rounded sheet scrolls. See .malik-course-detail__sheet below. */
  .malik-course-detail {
    /* .__sheet below is position:absolute, so the flex alignment this
       rule used when the outer screen itself scrolled no longer applies
       to anything — overflow:hidden is the only thing still doing work. */
    overflow: hidden;
  }

  /* course-87's mobile bg (node 496:1600, Variant3): Figma's own exported
     React/CSS for this image reports left:-152.18% top:-92.3%
     width:334.44% height:282.15% (a "pan/zoom" transform). Two earlier
     passes here tried to reproduce that transform in different units, but
     a pixel-diff between Figma's own rendered screenshot of this node and
     a PLAIN, UNSCALED 1080×1920 crop of the raw uploaded source image
     (avg per-channel diff 3.97/255, i.e. a match) proves Figma displays
     this photo with NO pan/zoom at all — the exported percentages don't
     correspond to the actual rendered crop (an artifact of how Figma's
     exporter serializes this image fill's transform matrix). The intended
     fix was to let the plain base rule apply (~line 7443: width:100%;
     height:100%; object-fit:cover), confirmed correct by simulating that
     exact center-cropped cover against this container's real
     (taller-than-1080:1920) aspect ratio. But simply deleting the
     course-87 override (as a first attempt did) left nothing in this
     @media block to beat the UNCONDITIONAL desktop course-87 rule two
     rules up ([data-courses-screen="course-87"] .malik-course-detail__bg
     .malik-video-bg, no media query, (0,3,0) specificity, width:136.1vw/
     height:90.708vw on the 1440 desktop basis) — that rule has higher
     specificity than the plain (0,2,0) base rule and has no media guard,
     so it kept winning at mobile widths too once this override was gone,
     rendering a tiny ~547×365px box (136.1vw/90.708vw at a 402px
     viewport) and exposing the #0d0d0d fallback fill as a hard black
     cutoff partway down the first card. Fix: explicitly restate
     width:100%/height:100%/cover here (same specificity as the desktop
     rule, (0,3,0), but later in source order within this @media block, so
     it wins) instead of relying on cascade fallthrough to the lower-
     specificity base rule. */
  [data-courses-screen="course-87"] .malik-course-detail__bg--mobile .malik-video-bg {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .malik-course-detail__bg--desktop { display: none; }
  .malik-course-detail__bg--mobile { display: block; }

  .malik-course-detail__sheet {
    position: absolute;
    /* Replaces the old outer .malik-course-detail's flex centering (now
       dead — see the comment on that rule above) so .__summary/.__expanded
       (854px, 2px narrower than this 856px sheet) still center correctly. */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma's own "Frame 3" node (mobile component, Property1=Variant3,
       node 496:1615/1599 in the Malik design file) reports top:233px, not
       536px — re-verified directly against that node 2026-09-22 (the old
       536 figure had no traceable source and put ~300px more background
       photo above the card than Figma shows). 233/1080*100 = 21.574vw. */
    top: 21.574vw;     /* 233px — Figma's Frame 3 y-offset; hero stays
      visible above this exactly like Figma since the outer screen is
      static and this offset is fixed, not a scroll-revealed padding */
    left: 10.370vw;    /* 112px */
    width: 79.259vw;   /* 856px, Frame 3's own width */
    /* Desktop's own rule above centers via left:50%+translateX(-50%); this
       tier repositions with a plain `left` instead but never resets that
       transform, so it silently carried over and shifted the sheet an
       extra half its own width to the left of the intended left:10.370vw
       spot — on narrow viewports that pushed it mostly off-screen (both
       edges clipped, unreadable). Same bug/fix as the values-modal
       backdrop (.malik-values-modal__backdrop) elsewhere in this file. */
    transform: none;
    /* Figma's literal reference height (1529px) is the target — but Frame 3
       plus its 536px offset (2065px) is taller than real phone viewports,
       so this caps to whatever's actually left below the offset. On a
       viewport tall enough to fit the full 2065px, this renders at exactly
       1529px, pixel-for-pixel; below that it degrades to "fill remaining
       space" rather than overflowing off-screen and unreachable, since the
       outer screen is deliberately no longer scrollable. */
    height: min(141.574vw, calc(100% - 21.574vw));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 7.407vw; /* 80px — Figma's Frame 3 corner radius; content
      clips to this while scrolling via the overflow+radius combination */
    padding: 0 0 7.407vw; /* 80px bottom rest space at the end of scroll —
      not a Figma-measured value (the mock doesn't show a scrolled-to-
      bottom state), kept consistent with the card-rhythm gap used
      throughout this screen */
  }
  .malik-course-detail__sheet::-webkit-scrollbar { display: none; }

  .malik-course-detail__close-wrap {
    display: block; /* overrides the desktop-only display:contents above */
    position: absolute;
    top: 8.148vw;      /* 88px, card-relative — Figma's own wrapper inset */
    right: 6.842vw;    /* 73.89px, card-relative (854-729-51.105) */
    width: 4.732vw;    /* 51.1055px */
    height: 109.815vw; /* 1186px — Figma's own wrapper height, spanning the
      rest of the summary card; this is what makes the sticky button below
      stop sticking once the card has fully scrolled past, same as Figma */
    pointer-events: none; /* Figma: pointer-events-none on this wrapper */
  }
  .malik-course-detail__close {
    position: sticky; /* Figma: "sticky top-0" on the button itself, inside
      the wrapper above — stays pinned to the sheet's top edge while
      scrolling through the summary card, then scrolls away once the
      1186px-tall wrapper has fully passed, exactly like Figma */
    top: 0;
    right: auto;
    left: auto;
    width: 100%;
    height: 4.515vw; /* 48.7627px */
    border-radius: 0;
    background: transparent;
    padding: 0;
    pointer-events: auto;
    z-index: 3;
    margin-left: min(3.389vw, 92px);
  }
  .malik-course-detail__close-glyph { display: none; }
  .malik-course-detail__close-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .malik-course-detail__summary {
    display: flex; /* always visible on mobile, see the note above */
    flex-direction: column;
    align-items: center;
    width: 79.074vw;      /* 854px */
    max-width: 79.074vw;
    min-height: 111.963vw; /* 1274px, Figma's own card height as a floor */
    background: rgba(23, 23, 23, 0.47);
    border-radius: 9.259vw; /* 100px */
    padding: 14.167vw 4.259vw 7.407vw; /* 153px top (clearance under the
      close X), 46px sides (854 - 2×46 = 762, the same text-width math
      every card below shares), 80px bottom (standard card-rhythm gap) */
    /* No margin-bottom here: .malik-course-detail__scroll's own gap (below)
       supplies the 80px card-rhythm space now that summary lives inside it
       as the stack's first card, same as every other card. */
  }

  .malik-course-detail__title {
    position: static; /* desktop's position:absolute (with fixed top/left/
      right) otherwise leaks through and pulls this out of the mobile flex
      stack, so it stops reflowing when a sibling wraps to more lines */
    font-family: var(--malik-font-sans);
    font-weight: 500;
    font-size: 5.926vw;  /* 64px */
    line-height: 6.944vw; /* 75px */
    width: 69.524vw;     /* 750.86px */
    margin-bottom: 7.407vw; /* 80px, heading-to-subtitle gap */
  }
  .malik-course-detail__subtitle {
    position: static; /* see .malik-course-detail__title above */
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw;  /* 40px */
    /* Figma's own subtitle text node (496:1464, re-verified via
       get_metadata 2026-10-06) is an 80px-tall box for this 2-line text,
       i.e. exactly 40px per line (3.704vw, same as font-size, no extra
       leading) — not the 50px/line previously used here "for 3rd-line
       safety". That 50px buffer pushed every element below (badge, BOOK
       button) down by the same ~20px excess, confirmed via live
       boundingBox measurement against Figma: badge/button top-offset was
       off by exactly the subtitle's height overshoot, nothing else. Courses
       whose subtitle wraps to 3 lines will render a bit taller than this
       course's Figma reference, which only accounts for 2 — an acceptable
       per-course difference rather than permanently mis-positioning every
       course to hedge against one hypothetical case. */
    line-height: 3.704vw; /* 40px */
    letter-spacing: 0;
    opacity: 1;
    width: 70.556vw; /* 762px */
    margin-bottom: 5.556vw; /* 60px, subtitle-to-badge gap */
  }
  .malik-course-detail__badge {
    position: static; /* see .malik-course-detail__title above */
    left: auto;
    transform: none; /* neutralizes desktop's left:50%/translateX(-50%)
      centering trick — redundant and harmful once static, since the mobile
      .__summary parent already centers children via flex align-items */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Figma's Rectangle 230 (the badge card, node 496:1621) is 750px wide
       at the 1080 basis — re-verified directly against that node
       2026-09-22 (750/1080=69.444vw). This was previously `width:70%`, a
       percentage of the FLEX PARENT's padded content box (~762px at 1080,
       so ~533px) rather than a share of the viewport like every other
       measurement in this component — wrong reference frame entirely, and
       the reason the badge rendered far smaller than Figma regardless of
       the separate @media(max-width:480px) override bug fixed alongside
       this. */
    width: min(69.444vw, 750px);
    height: auto;
    flex-shrink: 0; /* this badge AND its img child (see below) both got
      silently compressed by flexbox's default flex-shrink:1 — overflow:
      hidden below flips a flex item's implicit min-height:auto to 0,
      which lets it shrink under flex pressure from the .__summary column
      even though there's no visible overflow forcing it to. Confirmed via
      live boundingBox measurement against Figma's own get_metadata values
      2026-10-06: badge rendered ~152px tall vs Figma's 511px-equivalent
      (~190px at test viewport scale) until flex-shrink:0 was added here
      AND on the img below — together they restore the full intended size. */
    background: #fff;
    border-radius: 3.438vw; /* 37.1304px */
    padding: 3.611vw 4.259vw;
    overflow: hidden; /* keeps oversized/odd-aspect course_logo_image assets
      from escaping the white card, since only max-width/max-height (not a
      fixed box) constrain the img below */
    /* 80px, the same card-rhythm gap used everywhere else on this screen —
       confirmed exactly by the summary card's own stack arithmetic: 153
       (top pad) + 150 (2-line title) + 80 + 80 (2-line subtitle) + 60 + 511
       (badge) + X + 80 (book) + 80 (bottom pad) = 1274 only closes at X=80. */
    margin: 0 0 7.407vw;
  }
  .malik-course-detail__badge img {
    position: static; /* neutralizes desktop's absolute top/left offset now
      that the mobile badge is a flex container centering this img itself */
    /* Figma's "image 2" node (496:1464, re-verified via get_metadata
       2026-10-06) is a FIXED 361.059×432.929px box, and internally fills it
       by scaling its source to 112.3%/99.9% of that box with overflow
       clipped — i.e. a cover-style fill, not a contain/letterbox fit.
       max-width/max-height here only ever shrink an oversized image, never
       grow a smaller one to fill the box — so with the current (lower-res)
       course_logo_image upload the badge rendered far smaller than Figma
       (confirmed via Playwright boundingBox: ~60×64px live vs ~134×161px
       expected at a 402px test viewport, i.e. well under half size), which
       in turn shrank the auto-height badge card and pulled the BOOK button
       above its correct position. width/height (not max-*) + cover fixes
       both: the image now always fills this exact box regardless of the
       uploaded file's native resolution or aspect ratio. */
    width: 37.431vw;  /* 361.06px */
    height: 40.086vw; /* 432.93px */
    flex-shrink: 0; /* see the badge's own flex-shrink:0 above — without
      this on the img too, flexbox still compresses it below the explicit
      height set here (confirmed empirically: height stuck at the image's
      native-aspect-ratio-derived size until this was added). */
    object-fit: cover;
  }
  .malik-course-detail__badge span {
    /* Figma's badge for this course is a single flattened image with its
       caption ("Executive managers") baked into the bitmap — Group176 has
       exactly 2 children (the white card + the image), no separate text
       layer — so audience_label has no counterpart here and would add an
       extra caption + gap Figma doesn't show. */
    display: none;
  }
  .malik-course-detail__summary-actions {
    position: static; /* see .malik-course-detail__title above */
    left: auto;
    transform: none; /* neutralizes desktop's left:50%/translateX(-50%)
      centering trick (same bug/fix as .__badge above and
      .__course-detail__sheet/.malik-values-modal__backdrop elsewhere in
      this file): transform still applies to a static element, so the
      inherited translateX(-50%) silently shifted the BOOK button ~37px
      left of the card's true center — confirmed via live getComputedStyle
      (matrix(1,0,0,1,-37.22,0)) 2026-10-06. The mobile .__summary parent's
      own flex align-items:center already centers this shrink-wrapped
      container correctly once the stray transform is removed. */
    display: flex;
    justify-content: center;
  }
  .malik-course-detail__summary-actions .malik-btn.malik-course-detail__summary-book {
    /* The extra .malik-course-detail__summary-book class here (present on
       the button's own markup) isn't needed to select it — it's needed to
       WIN: the desktop-only, unconditioned rule
       ".malik-btn.malik-btn--outline-light.malik-course-detail__summary-book
       { height: 36px; }" below is also 3 classes (0,3,0) specificity, same
       as this selector once this class is added, and tie-breaks by source
       order in this block's favor since it's later in the file. Without it
       (previously ".malik-course-detail__summary-actions .malik-btn", only
       0,2,0) the desktop rule's fixed 36px height silently won even inside
       this @media(max-width:1024px) block, confirmed via a CSSOM dump of
       every rule matching the live button element 2026-10-06. */
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw;  /* 40px */
    line-height: 3.704vw; /* 40px */
    /* Figma's own "buttons" frame (node 496:1464, re-verified via
       get_metadata 2026-10-06): x:327 y:1114 w:200 h:80, relative to the
       854-wide summary card — an explicit 200×80 box, not a padding-derived
       auto-size. The previous padding:10px 60px let the box grow/shrink
       with content instead, under-sizing it (~64px tall) versus Figma's
       fixed 80px. Width/height here replace that padding for sizing;
       .malik-btn's own align-items/justify-content (inline-flex, centered)
       still centers the label inside this fixed box. */
    width: 18.519vw;  /* 200px */
    height: 7.407vw;  /* 80px */
    padding: 0;
    gap: 0.926vw; /* 10px */
    border-width: max(1px, 0.185vw); /* 2px */
    border-radius: 7.407vw; /* 80px */
    /* Figma: border-white (solid, full opacity) — .malik-btn--outline-light's
       shared base color is rgba(255,255,255,0.6), dimmer than the spec here. */
    border-color: #fff;
  }
  .malik-course-detail__expanded {
    display: flex;
    width: 79.074vw; /* 854px */
    max-width: 79.074vw;
    max-height: none;
    margin: 0;
  }
  .malik-course-detail__scroll {
    overflow: visible;
    max-height: none;
    gap: 7.407vw; /* 80px, confirmed identical between every card on this screen */
    padding: 0;
    cursor: auto;
    touch-action: auto;
  }

  .malik-course-detail__card {
    width: 100%;
    background: rgba(23, 23, 23, 0.47);
    border-radius: 9.259vw; /* 100px */
    padding: 9.259vw 4.259vw 7.407vw; /* 100px top (clears the heading),
      46px sides, 80px bottom — identical across every card on this screen */
  }
  .malik-course-detail__card-heading {
    font-family: var(--malik-font-sans);
    font-weight: 500;
    font-size: 5.926vw;  /* 64px */
    line-height: 6.944vw; /* 75px */
    margin-bottom: 7.407vw; /* 80px, heading-to-body gap, confirmed
      identical across every card on this screen */
  }
  .malik-course-detail__card-body {
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    opacity: 1;
    width: 70.556vw; /* 762px */
    margin-inline: auto;
  }
  .malik-course-detail__card-body--center {
    text-transform: uppercase;
    line-height: 3.704vw; /* 40px, not the 117.32% the plain body uses */
    width: 69.444vw; /* 750px */
  }
  .malik-course-detail__card-body--note { font-size: 3.704vw; opacity: 0.7; }

  .malik-course-detail__rich {
    text-align: center;
    font-size: 3.704vw;
    line-height: 117.32%;
    opacity: 1;
  }
  .malik-course-detail__rich ol {
    list-style: none;
    counter-reset: malik-course-item;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4.607vw; /* 49.76px, row-to-row gap confirmed across all 8 items */
  }
  .malik-course-detail__rich ol li {
    counter-increment: malik-course-item;
    position: relative;
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw;  /* 40px */
    line-height: 3.704vw; /* 40px */
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .malik-course-detail__rich ol li::before {
    content: counter(malik-course-item) ".";
    position: absolute;
    left: 0;
    top: 0;
  }
  .malik-course-detail__rich--zero-pad ol li::before {
    content: counter(malik-course-item, decimal-leading-zero) ".";
  }

  .malik-course-detail__foundation {
    flex-direction: column;
    align-items: center;
    gap: 7.407vw; /* 80px, gap between foundation items */
    margin-top: 0;
  }
  .malik-course-detail__foundation-item { flex: none; width: 100%; max-width: none; }
  .malik-course-detail__foundation-image {
    width: 69.444vw;  /* 750px */
    height: 47.315vw; /* 511px */
    max-width: 100%;
    aspect-ratio: auto;
    background: #fff;
    border-radius: 3.438vw; /* 37.1304px */
    margin-bottom: 3.704vw; /* 40px, image-to-caption gap */
  }
  /* Figma: item 1's image sits vertically centered in its white card
     (39px/39px top+bottom), but item 2's is bottom-flush (76px above, 0
     below) — an explicit, non-centered placement, not just a side-effect
     of the base rule's default centering. */
  .malik-course-detail__foundation-item:nth-child(2) .malik-course-detail__foundation-image {
    align-items: flex-end;
  }
  .malik-course-detail__foundation-item p {
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    color: #fff;
    opacity: 1;
  }

  .malik-course-detail__rows { gap: 0; margin-bottom: 0; }
  .malik-course-detail__row {
    /* Figma's divider is an exported hairline SVG, stroke="white" at full
       opacity (0.669642px wide) — not the 70%-alpha guess this used to be.
       Sub-pixel stroke widths can't render reliably in a browser, so this
       floors to the nearest whole device pixel via max(), same as before. */
    border-bottom: max(1px, 0.062vw) solid #fff; /* 0.669642px */
    border-top: max(1px, 0.062vw) solid #fff;
    padding-block: 2.870vw;
    font-size: 3.704vw; /* 40px */
  }
  .malik-course-detail__rows .malik-course-detail__row + .malik-course-detail__row { border-top: none; }
  /* 80px card-rhythm gap, confirmed by the Dates card's own stack math
     (100 top pad + 75 heading + 80 + 280 body + 80 = exactly the offset
     where the Fee row starts) — only needed before the Fee row itself,
     since the numbered/date rows table has no Figma counterpart on this
     screen to verify a value against. */
  .malik-course-detail__card-body--center + .malik-course-detail__row {
    margin-top: 7.407vw;
  }

  .malik-course-detail__card .malik-text-center { margin-top: 7.407vw; /* 80px */ }
  .malik-course-detail__card .malik-text-center .malik-btn {
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw;  /* 40px */
    line-height: 3.704vw; /* 40px */
    text-decoration: underline;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    border-width: max(1px, 0.185vw); /* 2px */
    border-radius: 7.407vw; /* 80px */
    border-color: #fff; /* Figma: border-white, not outline-light's 60%-alpha default */
    width: 62.963vw; /* 680px, hug-width for "more about the program here." */
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════════
   MALIK ACADEMY
════════════════════════════════════════════════════════════════ */
.malik-academy {
  background: var(--malik-white);
  color: var(--malik-black);
  text-align: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.malik-academy__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.4);
}

.malik-academy__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--malik-section-py);
}

.malik-academy__heading {
  width: 630px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 50px);
  line-height: 1.15;
  letter-spacing: 0%;
  text-align: center;

  color: var(--malik-black);
  margin-bottom: 30px;
}

/* Figma: Ubuntu Mono, matching the mobile override below — base .malik-btn
   is Work Sans, which was left over on desktop only. */
.malik-academy [data-contact-trigger] {
  font-family: var(--malik-font-ubuntu);
  font-size: 19px;
  font-weight: 400;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;

}

/* Suppressed here; re-enabled only in the mobile breakpoint below — desktop
   keeps the heading flowing as a single wrap (see section-academy.php). */
.malik-academy__mobile-break {
  display: none;
}

/* ── Mobile (Figma "malik academy mob." frame, 1080×1920) ─────────
   factor = px / 1080 * 100 (see .malik-services for the convention).
   Section's own padding-block is zeroed here because both the heading
   and the CTA are placed by their exact frame-relative `top`, so any
   extra padding would just double-count against that offset.

   PURE vw, no clamp — same "no-clamp vw" convention used elsewhere on
   mobile in this file (.malik-services, .malik-one-system, .malik-we-are).

   Structured as four explicit tiers (1024/768/480/360px) matching this
   file's own convention (see .malik-services / .malik-one-system) instead
   of one wide max-width range, so each tier can be hand-tuned
   independently later if a distinct Figma frame ever shows up for it.
   Figma currently only supplies the one 1080px-wide mobile reference, so
   all four tiers share identical math for now. */
@media (max-width: 1024px) {
  /* display:flex + align-items:center (base rule) vertically centers
     .malik-container within the section — harmless when its content
     determines the section's height, but here .malik-academy__inner's
     children go absolute and collapse it to 0 height, so the centered
     (now-empty) container would float at mid-section instead of
     sitting at the frame's true top, throwing every top:Xvw below off
     by half the section height. display:block pins it back to y:0. */
  .malik-academy { min-height: 177.778vw; display: block; /* 1920px frame height */ }
  .malik-academy__inner { position: static; padding-block: 0; }

  .malik-academy__heading {
    position: absolute;
    top: 72.778vw; /* 786px */
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw; /* 1048px */
    max-width: none;
    font-size: 7.407vw; /* 80px */
    line-height: 1.175; /* 94/80 */
    margin: 0;
  }
  .malik-academy__mobile-break { display: block; }

  /* left:50%+translateX(-50%) would look equivalent at rest, but
     [data-contact-trigger].malik-btn:hover sets transform:none !important
     (see the "no hover effect on contact-modal buttons" rule near the top
     of this file) — on hover that wipes out a translateX-based centering
     entirely, snapping the button to the left. A plain computed `left`
     needs no transform, so it can't be knocked off-center by any hover/
     active state. Same fix as .malik-learn__tile--1 in the courses mosaic. */
  .malik-academy [data-contact-trigger] {
    position: absolute;
    top: 97.593vw; /* 1054px */
    left: 35.185vw; /* (1080-320)/2 = 380px, centered */
    width: 29.630vw; /* 320px */
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    font-family: var(--malik-font-ubuntu); /* Figma: Ubuntu Mono — base .malik-btn is Work Sans, which
      renders "Contact us" wider and eats into the 60px side padding */
    font-size: 3.704vw; /* 40px */
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw); /* Figma: 2px — base .malik-btn is 1.5px */
  }
}

/* Same Figma reference and math as the 1024px tier above, restated per
   this file's explicit-per-tier convention — see it for the full
   reasoning behind each rule. */
@media (max-width: 768px) {
  .malik-academy { min-height: 177.778vw; display: block; }
  .malik-academy__inner { position: static; padding-block: 0; }

  .malik-academy__heading {
    position: absolute;
    top: 72.778vw;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.175;
    margin: 0;
  }
  .malik-academy__mobile-break { display: block; }

  .malik-academy [data-contact-trigger] {
    position: absolute;
    top: 97.593vw;
    left: 35.185vw; /* (1080-320)/2 = 380px, centered — see 1024px tier above for why not translateX */
    width: 29.630vw;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    font-family: var(--malik-font-ubuntu); /* Figma: Ubuntu Mono — see 1024px tier above */
    font-size: 3.704vw;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw); /* Figma: 2px — base .malik-btn is 1.5px */
  }
}
/* Same Figma reference and math as the 1024px tier above, restated per this
   file's explicit-per-tier convention (see .malik-services) rather than
   relying on the 768px block alone — lets this tier be hand-tuned on its
   own later without touching 768px or 360px. See the 1024px block above for
   the full reasoning behind each rule. */
@media (max-width: 480px) {
  .malik-academy { min-height: 177.778vw; display: block; }
  .malik-academy__inner { position: static; padding-block: 0; }

  .malik-academy__heading {
    position: absolute;
    top: 72.778vw;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.175;
    margin: 0;
  }
  .malik-academy__mobile-break { display: block; }

  .malik-academy [data-contact-trigger] {
    position: absolute;
    top: 97.593vw;
    left: 35.185vw; /* (1080-320)/2 = 380px, centered — see 1024px tier above for why not translateX */
    width: 29.630vw;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    font-family: var(--malik-font-ubuntu); /* Figma: Ubuntu Mono — see 1024px tier above */
    font-size: 3.704vw;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw); /* Figma: 2px — base .malik-btn is 1.5px */
  }
  .malik-course-detail__badge {
      /* position: static (and left/transform reset) inherited from the
         1024px tier above — restating position:absolute here reintroduced
         desktop's out-of-flow badge, which collapsed the BOOK button up
         under the subtitle since flow no longer reserved space for it.

         width/margin restated here (not just inherited) to fix a bug: this
         rule previously read width:auto + margin:150px 0 7.407vw, which
         had no basis in Figma or in the 1024px tier's own proven math (see
         that tier's comment: "confirmed exactly by the summary card's own
         stack arithmetic... only closes at X=80") and doesn't correspond to
         anything else on this screen — width:auto let the badge shrink-
         wrap to its logo image's own (sometimes tiny) intrinsic size
         instead of the intended 70%-of-card white panel, and the stray
         150px margin blew a large gap in above it. Restoring the 1024px
         tier's actual values fixes both; this affects every viewport
         ≤480px, since this block's later position in the cascade was
         overriding the 1024px tier's correct width/margin for all of them.
         (width itself corrected again 2026-09-22 on the 1024px tier from
         70% to min(69.444vw,750px) — see that rule's own comment — so
         restated here to match.) */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: min(69.444vw, 750px);
      height: auto;
      background: #fff;
      border-radius: 3.438vw;
      padding: 3.611vw 4.259vw;
      overflow: hidden;
      margin: 0 0 7.407vw;
  }

}

/* Same Figma reference and math as the 768px tier above — see it for the
   full reasoning behind each rule. */
@media (max-width: 360px) {
  .malik-academy { min-height: 177.778vw; display: block; }
  .malik-academy__inner { position: static; padding-block: 0; }

  .malik-academy__heading {
    position: absolute;
    top: 72.778vw;
    left: 50%;
    transform: translateX(-50%);
    width: 97.037vw;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.175;
    margin: 0;
  }
  .malik-academy__mobile-break { display: block; }

  .malik-academy [data-contact-trigger] {
    position: absolute;
    top: 97.593vw;
    left: 35.185vw; /* (1080-320)/2 = 380px, centered — see 1024px tier above for why not translateX */
    width: 29.630vw;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    font-family: var(--malik-font-ubuntu); /* Figma: Ubuntu Mono — see 1024px tier above */
    font-size: 3.704vw;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw); /* Figma: 2px — base .malik-btn is 1.5px */
  }
}

/* ════════════════════════════════════════════════════════════════
   THE MALIK LETTER
════════════════════════════════════════════════════════════════ */
.malik-letter {
  /* Figma frame is 1440x370 (370/1440 = 25.694vw at the reference width) —
     70vh was sized off the VIEWPORT'S height instead, with no relation to
     the frame's own aspect ratio, making the section balloon to ~2.3x
     Figma's height on typical desktop viewports (e.g. 840px measured at a
     1440x1200 viewport vs. Figma's 370px) and leaving the card floating in
     a huge band of empty background. Same clamp(min, Nvw, max) pattern as
     .malik-tagline-banner (also min-height, also a full-bleed photo/video
     band) — holds the exact 370px height at the 1440px reference width and
     scales proportionally on narrower desktops, instead of chasing
     whatever height the browser window happens to be. */
  min-height: clamp(300px, 25.694vw, 370px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--malik-white);
  background: var(--malik-black);
}

.malik-letter__video-wrap {
  position: absolute;
  inset: 0;
}

/* Figma node 416:1417/1418 (desktop "newsletter" card, 1440 frame): fixed
   630x232 box, flex-centered content — replaces the old padding-driven
   block (which also had blur doubled at 60.7px; Figma's actual background
   blur radius is 30.35px). Desktop only; mobile keeps its own absolute-
   position block below untouched. */
.malik-letter__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 27px; /* Figma: 27px between heading bottom and button top */
  width: 630px;
  height: 232px;
  max-width: 92vw;
  margin-inline: auto;
  background: rgba(23, 23, 23, 0.47);
  backdrop-filter: blur(30.35px);
  -webkit-backdrop-filter: blur(30.35px);
  border-radius: 20px;
}

.malik-letter__heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 3.47vw, 50px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--malik-white);
}

/* Figma node 416:1419 ("buttons" in the newsletter frame): Ubuntu Mono,
   19px, weight 400, 36px-tall pill, 10px/25px padding, 1px solid white
   border — confirmed via get_design_context/get_variable_defs. Desktop
   only; the four mobile tiers below have their own already-matched
   Figma "newsletter mob." values. */
.malik-letter__cta {
  height: 36px;
  padding: 10px 25px;
  border-width: 1px;
  border-color: #FFFFFF; /* Figma: solid white — base .malik-btn--outline-light is 60%-alpha */
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
}

/* ── Mobile (Figma "newsletter mob." frame, 1080×1618) ─────────────
   factor = px / 1080 * 100 (see .malik-academy for the convention).
   .malik-letter__inner becomes the visible glass card (Figma
   "Rectangle 229") and the positioned ancestor for the heading/CTA
   below, so their `top` values are card-relative (frame top minus
   the card's own 616px offset) — same "panel + panel-relative
   children" pattern as .malik-one-system__features.
   Figma currently only supplies the one 1080px-wide mobile reference,
   so all four tiers below share identical math. */
@media (max-width: 1024px) {
  .malik-letter { min-height: 149.815vw; display: block; } /* 1618px frame height */

  .malik-letter__inner {
    position: absolute;
    left: 1.481vw;    /* 16px */
    top: 57.037vw;    /* 616px */
    width: 97.037vw;  /* 1048px */
    height: 42.222vw; /* 456px */
    max-width: none;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(4.675vw); /* 50.487px */
    -webkit-backdrop-filter: blur(4.675vw);
    border-radius: 3.081vw; /* 33.2698px */
  }

  .malik-letter__heading {
    position: absolute;
    top: 9.259vw; /* 100px, card-relative (716 - 616) */
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 7.407vw; /* 80px */
    line-height: 1.175; /* 94/80 */
  }

  /* Figma "buttons" node is a fixed 900×80 box (x:90/y:913 in the 1080
     frame), not a hug-width pill — width:fit-content let the browser's own
     text-metric-dependent width diverge from Figma's fixed 900px, so this
     uses the same literal left+width as .malik-learn__cta instead. */
  .malik-letter__cta {
    position: absolute;
    top: 27.5vw; /* 297px, card-relative (913 - 616) */
    left: 6.852vw; /* 74px, card-relative (90 - 16) */
    width: 83.333vw; /* 900px */
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    gap: 0.926vw; /* 10px */
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw; /* 40px */
    line-height: 1; /* 40/40 */
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw); /* Figma: 2px */
    border-color: #FFFFFF; /* Figma: solid white, not the desktop 60%-alpha border */
  }
}

/* Same Figma reference and math as the 1024px tier above, restated per
   this file's explicit-per-tier convention (see .malik-academy) — see
   it for the full reasoning behind each rule. */
@media (max-width: 768px) {
  .malik-letter { min-height: 149.815vw; display: block; }

  .malik-letter__inner {
    position: absolute;
    left: 1.481vw;
    top: 57.037vw;
    width: 97.037vw;
    height: 42.222vw;
    max-width: none;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(4.675vw);
    -webkit-backdrop-filter: blur(4.675vw);
    border-radius: 3.081vw;
  }

  .malik-letter__heading {
    position: absolute;
    top: 9.259vw;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 7.407vw;
    line-height: 1.175;
  }

  .malik-letter__cta {
    position: absolute;
    top: 27.5vw;
    left: 6.852vw; /* 74px, card-relative (90 - 16) */
    width: 83.333vw; /* 900px */
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* Same Figma reference and math as the 1024px tier above — see it for
   the full reasoning behind each rule. */
@media (max-width: 480px) {
  .malik-letter { min-height: 149.815vw; display: block; }

  .malik-letter__inner {
    position: absolute;
    left: 1.481vw;
    top: 57.037vw;
    width: 97.037vw;
    height: 42.222vw;
    max-width: none;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(4.675vw);
    -webkit-backdrop-filter: blur(4.675vw);
    border-radius: 3.081vw;
  }

  .malik-letter__heading {
    position: absolute;
    top: 9.259vw;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 7.407vw;
    line-height: 1.175;
  }

  .malik-letter__cta {
    position: absolute;
    top: 27.5vw;
    left: 6.852vw; /* 74px, card-relative (90 - 16) */
    width: 83.333vw; /* 900px */
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.104vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* Same Figma reference and math as the 1024px tier above — see it for
   the full reasoning behind each rule. */
@media (max-width: 360px) {
  .malik-letter { min-height: 149.815vw; display: block; }

  .malik-letter__inner {
    position: absolute;
    left: 1.481vw;
    top: 57.037vw;
    width: 97.037vw;
    height: 42.222vw;
    max-width: none;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(4.675vw);
    -webkit-backdrop-filter: blur(4.675vw);
    border-radius: 3.081vw;
  }

  .malik-letter__heading {
    position: absolute;
    top: 9.259vw;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 7.407vw;
    line-height: 1.175;
  }

  .malik-letter__cta {
    position: absolute;
    top: 27.5vw;
    left: 6.852vw; /* 74px, card-relative (90 - 16) */
    width: 83.333vw; /* 900px */
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* ════════════════════════════════════════════════════════════════
   INSIDE MALIK
   Figma "inside malik" desktop frame is a fixed 1440×810 box (node
   1:2012 → Property 1=Default / =Variant2). Every position/size below
   is that frame's literal px value expressed as min(Xvw, Ypx): Xvw = px
   / 1440 * 100 scales the whole composition down proportionally below
   a 1440px viewport (same convention the mobile tiers use against their
   1080px frame), while the Ypx cap holds it exactly at the Figma value
   from 1440px up — never approximated, never a generic clamp() guess.
════════════════════════════════════════════════════════════════ */
.malik-inside {
  position: relative;
  background: var(--malik-white);
  /* No section-level padding-block: like .malik-services, this frame is a
     self-contained 810px box whose own internal offsets (heading top:50,
     footer buttons top:754) already are the full intended spacing. */
  padding-block: 0;
  min-height: min(64.25vw, 900px); /* 810/1440 */
  text-align: center;
}
.malik-inside .malik-container {
  /* Figma frame is 1440px wide; the sitewide container is 1444px with
     48px inline padding — both zeroed/capped here so every absolute
     Figma-px child below lands on the frame's real (0,0) instead of
     drifting by the padding inset or the 4px width mismatch. */
  max-width: 1440px;
  padding-inline: 0;
}

.malik-inside__heading {
  position: absolute;
  left: 0;
  right: 0;
  top: min(3.472vw, 50px); /* 50px */
  width: min(36.111vw, 520px); /* 520px */
  margin: 0 auto;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: min(3.472vw, 50px); /* 50px */
  line-height: 1.18; /* 59/50 */
  letter-spacing: 0;
  text-align: center;
  color: var(--malik-black);
}

/* Scattered city dots + central rotating photo — .malik-inside__map is the
   only normal-flow element in .malik-container, so its own fixed 810px
   height is what gives the section its Figma-exact height; __body/__actions/
   the values panel below are all position:absolute siblings anchored to
   that same (0,0)-to-(1440,810) box. */
.malik-inside__map {
  position: relative;
  width: min(100%, 1440px);
  height: min(56.25vw, 810px); /* 810px */
  margin: 0 auto;
}

.malik-inside__city {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma: uniform 19.461px gap between every dot's bottom edge and its
     label's top edge (measured across all 7 markers), not a round number. */
  gap: min(1.351vw, 19.461px);
  transform: translateX(-50%);
}
.malik-inside__city-dot {
  width: min(0.991vw, 14.269px);
  height: min(0.991vw, 14.269px);
  border-radius: 50%;
  background: var(--malik-black);
  /* Smart-Animate takeover: .malik-inside__tween-dot renders the actual
     visible dot (including here in the Default/closed state, at this same
     position) so it can glide to its Values-panel corner on open; this one
     stays reserved (not display:none) purely to hold the flex gap so the
     label doesn't jump up into the space it would otherwise leave. */
  visibility: hidden;
}
.malik-inside__city-label {
  font-weight: 400;
  line-height: 1;
  text-align: center;
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  letter-spacing: 0; /* Figma: 0, not a tracking value */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--malik-black);
}

/* left = dot's Figma center-x, top = dot's Figma top edge (the flex column
   above centers the dot under that point with no top offset of its own). */
.malik-inside__city--1 { left: min(9.444vw, 136.080px); top: min(6.181vw, 89px); }    /* Hanoi */
.malik-inside__city--2 { left: min(76.830vw, 1106.350px); top: min(21.528vw, 310px); } /* St. Gallen */
.malik-inside__city--3 { left: min(24.527vw, 353.188px); top: min(21.528vw, 310px); }  /* London */
.malik-inside__city--4 { left: min(81.472vw, 1173.188px); top: min(33.264vw, 479px); } /* Tokyo */
.malik-inside__city--5 { left: min(6.194vw, 89.188px); top: min(36.806vw, 530px); }    /* Mumbai */
.malik-inside__city--6 { left: min(18.694vw, 269.188px); top: min(33.264vw, 479px); }  /* New York */
.malik-inside__city--7 { left: min(93.547vw, 1347.080px); top: min(36.806vw, 530px); } /* Beijing */

/* Smart-Animate dot markers (Figma: "view more" button's prototype reaction
   is On Click → Change to Variant2, Smart Animate, Gentle, 800ms; "back"
   reverses it). Ellipse 8/9/10/11/12/13/14 are the same-named layers in
   both variants, so Figma tweens each one from its city-marker position
   here to a Values-panel corner position under .is-values-open below,
   rather than two separate dot sets cross-fading. "Gentle" is a spring
   curve in Figma; cubic-bezier can't reproduce that exactly — this is the
   closest common ease-out stand-in, matching the mobile tiers' choice. */
.malik-inside__tween-dot {
  display: block;
  position: absolute;
  z-index: 1300; /* above .malik-values-modal's 1200: stays crisp, not blurred by its backdrop-filter */
  width: min(0.991vw, 14.269px);
  height: min(0.991vw, 14.269px);
  border-radius: 50%;
  background: var(--malik-black);
  transition: left 800ms cubic-bezier(0.22, 1, 0.36, 1), top 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.malik-inside__tween-dot--1 { left: min(8.955vw, 128.945px); top: min(6.181vw, 89px); }     /* Hanoi: 128.945,89 */
.malik-inside__tween-dot--2 { left: min(76.334vw, 1099.215px); top: min(21.528vw, 310px); } /* St. Gallen: 1099.215,310 */
.malik-inside__tween-dot--3 { left: min(24.031vw, 346.053px); top: min(21.528vw, 310px); }  /* London: 346.053,310 */
.malik-inside__tween-dot--4 { left: min(80.976vw, 1166.053px); top: min(33.264vw, 479px); } /* Tokyo: 1166.053,479 */
.malik-inside__tween-dot--5 { left: min(5.698vw, 82.053px); top: min(36.806vw, 530px); }    /* Mumbai: 82.053,530 */
.malik-inside__tween-dot--6 { left: min(18.198vw, 262.053px); top: min(33.264vw, 479px); }  /* New York: 262.053,479 */
.malik-inside__tween-dot--7 { left: min(93.052vw, 1339.945px); top: min(36.806vw, 530px); } /* Beijing: 1339.945,530 */

/* This is the full "inside malik motion" component instance box (Figma:
   414×362, Clip content on), not just the one visible photo — the other
   5 rotation shapes (node 1:2624 Property1=Variant2..6) occupy the rest
   of that canvas and are individually positioned as __photo-shape--2..6
   below; shape--1 (the always-cover photo) sits at its own top:56 inset
   within this box, same as every other shape. */
.malik-inside__photo {
  position: absolute;
  left: 0;
  right: 0;
  width: min(28.75vw, 414px); /* 414px */
  height: min(25.139vw, 362px); /* 362px */
  margin: 0 auto;
  top: min(9.514vw, 137px); /* 137px */
  overflow: hidden;
  transition: top 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each rotator slide is a "shape" wrapper (the Figma mask: rectangle,
   circle, rounded-rect, ...) with an img inside it — all six exist
   simultaneously, pre-clipped to their own mask, and only the active one
   is visible (opacity crossfade) — not a single rectangular image being
   swapped for another. Position/size are % of the 414×362 parent (Figma
   node 1:2624's "Property 1=Default..Variant6" component variants), so
   they scale exactly with .malik-inside__photo at any width; corner radii
   use the file's usual min(vw,px) 1440-basis since percentage radii would
   be interpreted against each shape's own (differing) box instead. Most
   shapes crop their image with a hand-placed offset/zoom (Figma's own
   image-fill transform), not a plain object-fit:cover — those percentages
   are relative to the shape's own box and so need no unit conversion.
   These 6 variants are static Figma properties; get_motion_context returns
   no keyframe data for this component, but the Prototype panel's own
   Interaction on the variant node (checked directly in Figma: Trigger
   "After delay" 400ms → Action "Change to" → Animation "Instant") confirms
   the rotation itself IS an authored Figma spec, and it's a hard cut, not a
   crossfade. A cross-dissolve was tried here previously, but the 6 shapes
   differ wildly in position/size/mask (rectangle → circle → tall
   rounded-rect → wide rounded-rect → circle → rounded-square), so any fade
   leaves two differently-shaped, differently-placed photos both partially
   visible at once — at the spec's own 400ms interval that overlap read as a
   distracting shape "ghosting" behind the incoming photo. No transition
   matches Figma and removes the artifact. */
.malik-inside__photo-shape {
  position: absolute;
  overflow: hidden;
  opacity: 0;
}
.malik-inside__photo-shape.is-active { opacity: 1; z-index: 1; }
.malik-inside__photo-shape img {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none; /* theme's global img{max-width:100%} would otherwise cap shapes 2/4/5/6's oversized manual-crop percentages back down to 100% */
  object-fit: cover;
}

.malik-inside__photo-shape--1 { left: 0; top: 15.470%; width: 100%; height: 68.619%; border-radius: 0; } /* malik_Teresa-Zoetl, plain rectangle */

.malik-inside__photo-shape--2 { left: 16.237%; top: 11.602%; width: 67.783%; height: 77.348%; border-radius: 50%; } /* pexels-pixworthmedia, circle */
.malik-inside__photo-shape--2 img { height: 125.27%; width: 100%; left: 0; top: -25.14%; }

.malik-inside__photo-shape--3 { left: 23.454%; top: 0; width: 53.360%; height: 91.510%; border-radius: min(1.479vw, 21.3px); } /* pexels-kaiya-inouye, tall rounded rect */

.malik-inside__photo-shape--4 { left: 0.516%; top: 12.155%; width: 99.484%; height: 63.727%; border-radius: min(1.319vw, 19px); } /* pexels-eberhardgross ("Screen Recording..." layer name, actual fill is this photo); top corrected to the native symbol's top:44px (unscaled, matching shapes 1/2's confirmed top-pinned behavior) — the hidden layer's own recorded position (top:294.69) put most of this shape below the 362px clip bounds */
.malik-inside__photo-shape--4 img { height: 231.2%; width: 100.06%; left: -0.03%; top: -46.4%; }

.malik-inside__photo-shape--5 { left: 7.475%; top: 1.657%; width: 85.567%; height: 97.858%; border-radius: 50%; } /* pexels-cottonbro, circle */
.malik-inside__photo-shape--5 img { height: 150.04%; width: 100%; left: 0; top: -49.96%; }

.malik-inside__photo-shape--6 { left: 20.103%; top: 15.470%; width: 63.919%; height: 73.099%; border-radius: min(5.625vw, 81px); } /* pexels-kelly, rounded square */
.malik-inside__photo-shape--6 img { height: 514.68%; width: 343.16%; left: -129.35%; top: -216.48%; }

.malik-inside__body {
  /* This div also carries .malik-reveal (translateY scroll-fade), so
     left:50%+transform:translateX would get clobbered by
     .malik-reveal.is-visible{transform:none} — center via left/right/
     margin-auto instead, same technique the mobile tiers use. */
  position: absolute;
  left: 0;
  right: 0;
  top: min(36.597vw, 527px); /* 527px */
  width: min(43.75vw, 630px); /* 630px */
  margin: 0 auto;
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  letter-spacing: 0;
  text-align: center;
  color: var(--malik-black);
}
/* Figma's two body paragraphs are separated by a blank third line (an
   empty paragraph), not a small margin — so the gap is one full line-
   height (19px * 1.17325), not an arbitrary 1rem. */
.malik-inside__body p + p { margin-top: min(1.547vw, 22.292px); }

.malik-inside__actions {
  /* Same .malik-reveal transform conflict as __body above. The pair isn't
     individually left/right-symmetric (view-more center 613.05px, meet
     center 808.05px) but IS centered as a whole (350px combined width,
     40px gap, centered in the 1440px frame) — so center the wrapper via
     auto margins and let the two buttons sit in a plain gapped row. */
  position: absolute;
  left: 0;
  right: 0;
  top: min(52.361vw, 754px); /* 754px */
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: min(2.778vw, 40px); /* 40px */
}
.malik-inside .malik-btn--outline,
.malik-inside__btn {
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 19px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  height: min(2.5vw, 36px); /* 36px */
  padding: min(0.694vw, 10px) min(1.736vw, 25px); /* 10px 25px */
  border-width: max(1px, min(0.069vw, 1px));
  border-radius: min(2.083vw, 30px); /* 30px */
}

/* Default-only content cross-fades out under .is-values-open; fades back
   in on close (with a short delay so the Values copy clears first — Figma
   has no explicit timing for this side, only for the matched-layer tween
   above: "view more" → Smart Animate / Gentle / 800ms). Matches that
   800ms/Gentle timing exactly (was 400ms var(--malik-ease), a plain
   ease-out) so this fade finishes in step with the photo/dots' own 800ms
   position tween instead of visibly settling first while they're still
   moving. Photo is NOT in this group — the same "inside malik motion"
   instance stays visible in both variants, just sliding to a new top
   (handled by its own transition above), rather than fading out. */
.malik-inside__heading,
.malik-inside__city-label,
.malik-inside__body,
.malik-inside__actions {
  transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1) 300ms;
}
.malik-inside.is-values-open .malik-inside__heading,
.malik-inside.is-values-open .malik-inside__city-label,
.malik-inside.is-values-open .malik-inside__body,
.malik-inside.is-values-open .malik-inside__actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
}

.malik-inside.is-values-open .malik-inside__tween-dot--1 { left: min(11.319vw, 163px); top: min(27.639vw, 398px); } /* Hanoi → 163,398 */
.malik-inside.is-values-open .malik-inside__tween-dot--2 { left: min(88.472vw, 1274px); top: min(3.889vw, 56px); }  /* St. Gallen → 1274,56 */
.malik-inside.is-values-open .malik-inside__tween-dot--3 { left: min(11.319vw, 163px); top: min(3.889vw, 56px); }   /* London → 163,56 */
.malik-inside.is-values-open .malik-inside__tween-dot--4 { left: min(88.472vw, 1274px); top: min(27.639vw, 398px); } /* Tokyo → 1274,398 */
.malik-inside.is-values-open .malik-inside__tween-dot--5 { left: min(11.319vw, 163px); top: min(51.389vw, 740px); } /* Mumbai → 163,740 */
.malik-inside.is-values-open .malik-inside__tween-dot--6 { left: min(49.514vw, 713px); top: min(27.639vw, 398px); }  /* New York → 713,398 */
.malik-inside.is-values-open .malik-inside__tween-dot--7 { left: min(88.472vw, 1274px); top: min(51.389vw, 740px); } /* Beijing → 1274,740 */

.malik-inside.is-values-open .malik-inside__photo { top: min(11.597vw, 167px); } /* 167px */

/* ── Mobile (Figma "inside malik mob." frame, 1080×1920) ──────────
   factor = px / 1080 * 100 (see .malik-academy for the convention).
   .malik-inside__map is pinned to position:relative/height:0 so it stays
   the (0,0) anchor for the heading/cities/photo without contributing any
   flow height of its own — same "panel + panel-relative children" idea
   as .malik-academy, except here the anchor is the map div instead of
   the section, because the body copy and action buttons that follow are
   positioned against .malik-container directly (frame-relative too,
   since .malik-container's padding-box spans the full frame width — see
   .malik-academy's __inner for why padding-inline doesn't shift that).
   Structured as four explicit tiers (1024/768/480/360px) matching this
   file's own convention; Figma currently only supplies the one
   1080px-wide mobile reference, so all four tiers share identical math. */
@media (max-width: 1024px) {
  .malik-inside { padding-block: 0; min-height: 190.778vw; /* 1920px frame height */ }
  /* .malik-container's padding-inline insets normal-flow children (unlike
     absolutely-positioned descendants, which use its full padding-box —
     see .malik-academy__inner) — .malik-inside__map is a normal-flow
     child, so without this it renders narrower and shifted right of the
     frame's true left edge, throwing every left/top:Xvw below off by
     that inset and clipping content against the viewport's right edge. */
  .malik-inside > .malik-container { padding-inline: 0; }
  /* .malik-inside__map/__body/__actions all carry .malik-reveal, whose
     transform:translateY(32px) (pre-reveal) would otherwise make each
     one its own containing block, hijacking where its absolutely
     positioned children/siblings resolve against — and .is-visible's
     transform:none can't be relied on to have fired yet. Kill the
     reveal transform for this section on mobile so positioning is
     stable from first paint. */
  .malik-inside .malik-reveal { opacity: 1; transform: none; }

  .malik-inside__map { position: relative; height: 0; margin: 0; }

  /* Base rule makes .malik-inside__actions itself position:absolute (desktop
     top:754px) — left un-overridden, it becomes the containing block for its
     own button children below instead of .malik-container, so each button's
     large top:1XXvw mobile offset was compounding on top of the actions
     wrapper's own (unrelated, desktop-derived) offset and landing far below
     the section's visible box, off-screen. Neutralized to a plain zero-height
     in-flow anchor, same technique as .malik-inside__map above, so the
     buttons' position:absolute resolves against .malik-container like every
     other absolutely-positioned child in this section. */
  .malik-inside__actions { position: static; margin: 0; }

  /* left:0/right:0 + margin-inline:auto centers the fixed-width box
     without touching transform — this h2 also carries .malik-reveal, and
     .malik-reveal.is-visible{transform:none} (2 classes) would otherwise
     beat a plain .malik-inside__heading{transform:translateX(-50%)} (1
     class) on specificity regardless of source order, snapping the
     heading to the left half of the frame (same fix as the buttons). */
  .malik-inside__heading {
    position: absolute;
    top: 8.241vw; /* 89px */
    left: 0;
    right: 0;
    width: 97.037vw; /* 1048px */
    margin: 0 auto;
    max-width: none;
    font-size: 7.407vw; /* 80px */
    line-height: 1.075; /* 86/80 */
  }

  .malik-inside__city {
    position: absolute;
    transform: translateX(-50%);
    gap: 1.3vw; /* ~14px, dot bottom to label top */
  }
  .malik-inside__city-dot { width: 1.852vw; height: 1.852vw; /* 20px */ }
  .malik-inside__city-label {
    font-size: 3.704vw; /* 40px */
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
  }

  /* Row 1 (dot top 818px / label top 852.12px): Hanoi, St. Gallen (dead
     center), London, Mumbai, Tokyo — column centers from the Figma
     label boxes (e.g. Hanoi: left16+width194/2=113px). Row 2 (dot top
     995.12px / label top 1029.12px): New York under the London column,
     Beijing under the Mumbai column. */
  .malik-inside__city--1 { left: 10.463vw; top: 75.741vw; } /* Hanoi */
  .malik-inside__city--2 { left: 50vw;     top: 75.741vw; } /* St. Gallen */
  .malik-inside__city--3 { left: 30.231vw; top: 75.741vw; } /* London */
  .malik-inside__city--4 { left: 89.537vw; top: 75.741vw; } /* Tokyo */
  .malik-inside__city--5 { left: 69.769vw; top: 75.741vw; } /* Mumbai */
  .malik-inside__city--6 { left: 30.231vw; top: 92.141vw; } /* New York */
  .malik-inside__city--7 { left: 69.769vw; top: 92.141vw; } /* Beijing */

  /* Only "St. Gallen" is wide enough to need the Figma-specified wrap
     onto two lines ("ST." / "GALLEN") — the other labels fit their
     column on one line at this font size, matching the screenshot. */
  .malik-inside__city--2 .malik-inside__city-label {
    width: 17.963vw; /* 194px */
    white-space: normal;
  }

  /* Container = Figma's "inside malik motion mob." frame (620×540.1px):
     bigger than any single photo so every shape below has room to sit at
     its own Figma-exact offset without being cropped by the box itself
     (the frame's own overflow:hidden still clips the rotated video shape,
     same as Figma's "clip content" would). Background is transparent here,
     overriding the base rule's black fill — with the frame now much bigger
     than any one shape, that fill would otherwise show as a black box
     around whichever (smaller, masked) shape is currently active. */
  .malik-inside__photo {
    position: absolute;
    left: 21.296vw; /* 230px */
    top: 21.852vw;  /* 236px */
    width: 57.407vw; /* 620px */
    height: 50.009vw; /* 540.1px */
    transform: none;
    box-shadow: none;
    background: transparent; /* base .malik-inside__photo's black fill would otherwise
      show through the areas the (smaller, masked) active shape doesn't cover */
  }

  /* Six masks exist at once, each positioned/shaped exactly per Figma
     (percentages there are of the 620px-wide frame, converted here to
     the file's usual px/1080*100 vw so they sit correctly against the
     .malik-inside__photo container above). Only .is-active is visible;
     JS (initInsideRotator) cycles which shape carries that class. */
  .malik-inside__photo-shape--1 { left: 0vw;      top: 8.285vw; width: 57.407vw; height: 34.459vw; border-radius: 0; transform: none; } /* rectangle */
  .malik-inside__photo-shape--2 { left: 9.323vw;  top: 6.214vw; width: 38.882vw; height: 38.795vw; border-radius: 50%; transform: none; } /* circle */
  .malik-inside__photo-shape--3 { left: 13.462vw; top: 0vw;     width: 30.604vw; height: 45.901vw; border-radius: 2.959vw; transform: none; } /* rounded rect, 31.959px radius */
  .malik-inside__photo-shape--4 { left: 0.296vw;  top: 6.510vw; width: 56.964vw; height: 36.989vw; border-radius: 2.959vw; transform: none; } /* pexels-eberhardgross, plain rounded rect — not a rotated screen-recording as the "Variant4" shape had been assumed to be */
  .malik-inside__photo-shape--5 { left: 4.288vw;  top: 0.888vw; width: 49.123vw; height: 49.122vw; border-radius: 50%; transform: none; } /* circle */
  .malik-inside__photo-shape--6 { left: 11.539vw; top: 8.285vw; width: 36.695vw; height: 36.694vw; border-radius: 11.245vw; transform: none; } /* rounded rect */

  /* Same transform-free centering as .malik-inside__heading above — this
     div also carries .malik-reveal, so left:50%+transform:translateX
     would get clobbered by .malik-reveal.is-visible{transform:none}. */
  .malik-inside__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 108.252vw; /* 1169.12px */
    width: 97.037vw; /* 1048px */
    margin: 0 auto;
    max-width: none;
    font-size: 1.759vw; /* 19px */
    line-height: 1.158; /* 22/19 */
    opacity: 1;
  }
  .malik-inside__body p + p { margin-top: 1.481vw; /* 16px */ }

  /* Qualified with .malik-inside__actions (not just the bare button
     classes) so this tier's specificity (0,2,0) matches/beats the base
     desktop rule ".malik-inside .malik-btn--outline" (also 0,2,0, but
     earlier in source) — a bare ".malik-inside__btn--view-more" selector
     (0,1,0) previously LOST that fight, so the base desktop's
     min(2.5vw,36px) height / min(1.319vw,19px) font-size were winning at
     every mobile width instead of this block's 80px/40px, rendering the
     buttons as an unreadable ~10px-tall sliver on phones. */
  .malik-inside__actions .malik-inside__btn--view-more,
  .malik-inside__actions .malik-inside__btn--meet {
    position: absolute;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    gap: 0.926vw; /* 10px */
    font-family: var(--malik-font-ubuntu); /* Figma: Ubuntu Mono — base .malik-btn is Work Sans */
    font-size: 3.704vw; /* 40px */
    line-height: 1;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw); /* Figma: 2px */
    /* Figma: rounded-[80px] on an 80px-tall box (i.e. radius >= height,
       browsers auto-clamp to a full pill) — matches height so it stays a
       full pill at every mobile tier's own vw scale, same value already
       used correctly on .malik-values-modal__back below. The base desktop
       rule's min(2.083vw,30px) is too small once the button's real 80px
       height wins (was invisible before because the un-fixed ~25px-tall
       button happened to still round fully at 30px by coincidence). */
    border-radius: 7.407vw;
  }
  .malik-inside__btn--view-more { top: 152.315vw; } /* 1645px */
  .malik-inside__btn--meet      { top: 163.426vw; } /* 1765px */

  /* Standalone dots take over the visual role of .malik-inside__city-dot
     (kept, not display:none, so the label doesn't reflow up into the gap
     left behind — see .malik-inside__tween-dot below). */
  .malik-inside__city-dot { visibility: hidden; }

  /* Smart-Animate dot markers (Figma: the "view more" button's prototype
     reaction is On Click → Change to Variant2, Smart Animate, Gentle,
     800ms; "back" reverses it). Ellipse 8/9/10/11/12/13/14 are the same
     named layers in both variants, so Figma tweens each one from its
     city-marker position here to a Values-panel corner position under
     .is-values-open below, rather than two separate dot sets cross-
     fading. "Gentle" is a spring curve in Figma; cubic-bezier can't
     reproduce that exactly — this is the closest common ease-out stand-in. */
  .malik-inside__tween-dot {
    display: block;
    position: absolute;
    /* Above .malik-values-modal's z-index:1200 so the dots land in front of
       (not behind) its backdrop-filter blur once they reach their Values
       corner position — Figma's own layer order paints these dots after
       the frosted rectangle, so they stay crisp on top of it rather than
       being blurred/washed out by it. */
    z-index: 1300;
    width: 1.852vw; /* 20px */
    height: 1.852vw;
    border-radius: 50%;
    background: var(--malik-black);
    transition: left 800ms cubic-bezier(0.22, 1, 0.36, 1), top 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .malik-inside__tween-dot--1 { left: 8.796vw;  top: 75.752vw; } /* Hanoi: 95,818.125 */
  .malik-inside__tween-dot--2 { left: 48.796vw; top: 75.752vw; } /* St. Gallen: 527,818.125 */
  .malik-inside__tween-dot--3 { left: 29.167vw; top: 75.752vw; } /* London: 315,818.125 */
  .malik-inside__tween-dot--4 { left: 89.352vw; top: 75.752vw; } /* Tokyo: 965,818.125 */
  .malik-inside__tween-dot--5 { left: 68.981vw; top: 75.752vw; } /* Mumbai: 745,818.125 */
  .malik-inside__tween-dot--6 { left: 29.167vw; top: 92.141vw; } /* New York: 315,995.125 */
  .malik-inside__tween-dot--7 { left: 68.981vw; top: 92.141vw; } /* Beijing: 745,995.125 */

  /* Shared hero photo instance also glides (Figma: the same-named "inside
     malik motion mob." instance sits at y=236 in Default, y=690 in
     Variant2) rather than a second copy fading in behind the Values panel. */
  .malik-inside__photo { transition: top 800ms cubic-bezier(0.22, 1, 0.36, 1); }

  /* Default-only content cross-fades out under .is-values-open; fades
     back in on close (with a short delay so the Values copy clears
     first — Figma has no explicit timing for this side, only for the
     matched-layer tween above). */
  .malik-inside__heading,
  .malik-inside__city-label,
  .malik-inside__body,
  .malik-inside__actions {
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1) 300ms;
  }
  .malik-inside.is-values-open .malik-inside__heading,
  .malik-inside.is-values-open .malik-inside__city-label,
  .malik-inside.is-values-open .malik-inside__body,
  .malik-inside.is-values-open .malik-inside__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }

  .malik-inside.is-values-open .malik-inside__tween-dot--1 { left: 1.481vw;  top: 8.241vw; }   /* 16,89 */
  .malik-inside.is-values-open .malik-inside__tween-dot--2 { left: 48.796vw; top: 63.333vw; }  /* 527,684 */
  .malik-inside.is-values-open .malik-inside__tween-dot--3 { left: 1.481vw;  top: 63.333vw; }  /* 16,684 */
  .malik-inside.is-values-open .malik-inside__tween-dot--4 { left: 96.667vw; top: 8.241vw; }   /* 1044,89 */
  .malik-inside.is-values-open .malik-inside__tween-dot--5 { left: 96.667vw; top: 63.333vw; }  /* 1044,684 */
  .malik-inside.is-values-open .malik-inside__tween-dot--6 { left: 1.481vw;  top: 175.081vw; } /* 16,1890.875 */
  .malik-inside.is-values-open .malik-inside__tween-dot--7 { left: 96.667vw; top: 175.081vw; } /* 1044,1890.875 */
  .malik-inside.is-values-open .malik-inside__photo { top: 63.889vw; /* 690px */ }
}

/* Same Figma reference and math as the 1024px tier above, restated per
   this file's explicit-per-tier convention — see it for the full
   reasoning behind each rule. */
@media (max-width: 768px) {
  .malik-inside { padding-block: 0; min-height: 190.778vw; }
  .malik-inside > .malik-container { padding-inline: 0; }
  .malik-inside .malik-reveal { opacity: 1; transform: none; }

  .malik-inside__map { position: relative; height: 0; margin: 0; }
  .malik-inside__actions { position: static; margin: 0; }

  .malik-inside__heading {
    position: absolute;
    top: 8.241vw;
    left: 0;
    right: 0;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.075;
  }

  .malik-inside__city {
    position: absolute;
    transform: translateX(-50%);
    gap: 1.3vw;
  }
  .malik-inside__city-dot { width: 1.852vw; height: 1.852vw; }
  .malik-inside__city-label {
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
  }

  .malik-inside__city--1 { left: 10.463vw; top: 75.741vw; }
  .malik-inside__city--2 { left: 50vw;     top: 75.741vw; }
  .malik-inside__city--3 { left: 30.231vw; top: 75.741vw; }
  .malik-inside__city--4 { left: 89.537vw; top: 75.741vw; }
  .malik-inside__city--5 { left: 69.769vw; top: 75.741vw; }
  .malik-inside__city--6 { left: 30.231vw; top: 92.141vw; }
  .malik-inside__city--7 { left: 69.769vw; top: 92.141vw; }

  .malik-inside__city--2 .malik-inside__city-label {
    width: 17.963vw;
    white-space: normal;
  }

  .malik-inside__photo {
    position: absolute;
    left: 21.296vw;
    top: 21.852vw;
    width: 57.407vw;
    height: 50.009vw;
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  .malik-inside__photo-shape--1 { left: 0vw;      top: 8.285vw; width: 57.407vw; height: 34.459vw; border-radius: 0; transform: none; }
  .malik-inside__photo-shape--2 { left: 9.323vw;  top: 6.214vw; width: 38.882vw; height: 38.795vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--3 { left: 13.462vw; top: 0vw;     width: 30.604vw; height: 45.901vw; border-radius: 2.959vw; transform: none; } /* 31.959px, was mis-measured as 3.403vw */
  .malik-inside__photo-shape--4 { left: 0.296vw;  top: 6.510vw; width: 56.964vw; height: 36.989vw; border-radius: 2.959vw; transform: none; } /* pexels-eberhardgross — not a rotated screen-recording, see below */
  .malik-inside__photo-shape--5 { left: 4.288vw;  top: 0.888vw; width: 49.123vw; height: 49.122vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--6 { left: 11.539vw; top: 8.285vw; width: 36.695vw; height: 36.694vw; border-radius: 11.245vw; transform: none; }

  .malik-inside__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 108.252vw;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 1.759vw;
    line-height: 1.158;
    opacity: 1;
  }
  .malik-inside__body p + p { margin-top: 1.481vw; }

  .malik-inside__actions .malik-inside__btn--view-more,
  .malik-inside__actions .malik-inside__btn--meet {
    position: absolute;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw);
    border-radius: 7.407vw; /* full pill, matches height */
  }
  .malik-inside__btn--view-more { top: 152.315vw; }
  .malik-inside__btn--meet      { top: 163.426vw; }

  .malik-inside__city-dot { visibility: hidden; }

  .malik-inside__tween-dot {
    display: block;
    position: absolute;
    width: 1.852vw;
    height: 1.852vw;
    border-radius: 50%;
    background: var(--malik-black);
    transition: left 800ms cubic-bezier(0.22, 1, 0.36, 1), top 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .malik-inside__tween-dot--1 { left: 8.796vw;  top: 75.752vw; }
  .malik-inside__tween-dot--2 { left: 48.796vw; top: 75.752vw; }
  .malik-inside__tween-dot--3 { left: 29.167vw; top: 75.752vw; }
  .malik-inside__tween-dot--4 { left: 89.352vw; top: 75.752vw; }
  .malik-inside__tween-dot--5 { left: 68.981vw; top: 75.752vw; }
  .malik-inside__tween-dot--6 { left: 29.167vw; top: 92.141vw; }
  .malik-inside__tween-dot--7 { left: 68.981vw; top: 92.141vw; }

  .malik-inside__photo { transition: top 800ms cubic-bezier(0.22, 1, 0.36, 1); }

  .malik-inside__heading,
  .malik-inside__city-label,
  .malik-inside__body,
  .malik-inside__actions {
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1) 300ms;
  }
  .malik-inside.is-values-open .malik-inside__heading,
  .malik-inside.is-values-open .malik-inside__city-label,
  .malik-inside.is-values-open .malik-inside__body,
  .malik-inside.is-values-open .malik-inside__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }

  .malik-inside.is-values-open .malik-inside__tween-dot--1 { left: 1.481vw;  top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--2 { left: 48.796vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--3 { left: 1.481vw;  top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--4 { left: 96.667vw; top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--5 { left: 96.667vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--6 { left: 1.481vw;  top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--7 { left: 96.667vw; top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__photo { top: 63.889vw; }
}

/* Same Figma reference and math as the 1024px tier above, restated per
   this file's explicit-per-tier convention (see .malik-academy) rather
   than relying on the 768px block alone — lets this tier be hand-tuned
   on its own later without touching 768px or 360px. See the 1024px
   block above for the full reasoning behind each rule. */
@media (max-width: 480px) {
  .malik-inside { padding-block: 0; min-height: 190.778vw; }
  .malik-inside > .malik-container { padding-inline: 0; }
  .malik-inside .malik-reveal { opacity: 1; transform: none; }

  .malik-inside__map { position: relative; height: 0; margin: 0; }
  .malik-inside__actions { position: static; margin: 0; }

  .malik-inside__heading {
    position: absolute;
    top: 8.241vw;
    left: 0;
    right: 0;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.075;
  }

  .malik-inside__city {
    position: absolute;
    transform: translateX(-50%);
    gap: 1.3vw;
  }
  .malik-inside__city-dot { width: 1.852vw; height: 1.852vw; }
  .malik-inside__city-label {
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
  }

  .malik-inside__city--1 { left: 10.463vw; top: 75.741vw; }
  .malik-inside__city--2 { left: 50vw;     top: 75.741vw; }
  .malik-inside__city--3 { left: 30.231vw; top: 75.741vw; }
  .malik-inside__city--4 { left: 89.537vw; top: 75.741vw; }
  .malik-inside__city--5 { left: 69.769vw; top: 75.741vw; }
  .malik-inside__city--6 { left: 30.231vw; top: 92.141vw; }
  .malik-inside__city--7 { left: 69.769vw; top: 92.141vw; }

  .malik-inside__city--2 .malik-inside__city-label {
    width: 17.963vw;
    white-space: normal;
  }

  .malik-inside__photo {
    position: absolute;
    /* left: 21.296vw; */
    left: 0;
    top: 21.852vw;
    width: 57.407vw;
    height: 50.009vw;
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  .malik-inside__photo-shape--1 { left: 0vw;      top: 8.285vw; width: 57.407vw; height: 34.459vw; border-radius: 0; transform: none; }
  .malik-inside__photo-shape--2 { left: 9.323vw;  top: 6.214vw; width: 38.882vw; height: 38.795vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--3 { left: 13.462vw; top: 0vw;     width: 30.604vw; height: 45.901vw; border-radius: 2.959vw; transform: none; } /* 31.959px, was mis-measured as 3.403vw */
  .malik-inside__photo-shape--4 { left: 0.296vw;  top: 6.510vw; width: 56.964vw; height: 36.989vw; border-radius: 2.959vw; transform: none; } /* pexels-eberhardgross — not a rotated screen-recording, see below */
  .malik-inside__photo-shape--5 { left: 4.288vw;  top: 0.888vw; width: 49.123vw; height: 49.122vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--6 { left: 11.539vw; top: 8.285vw; width: 36.695vw; height: 36.694vw; border-radius: 11.245vw; transform: none; }

  .malik-inside__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 108.252vw;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 1.759vw;
    line-height: 1.158;
    opacity: 1;
  }
  .malik-inside__body p + p { margin-top: 1.481vw; }

  .malik-inside__actions .malik-inside__btn--view-more,
  .malik-inside__actions .malik-inside__btn--meet {
    position: absolute;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw);
    border-radius: 7.407vw; /* full pill, matches height */
  }
  .malik-inside__btn--view-more { top: 152.315vw; }
  .malik-inside__btn--meet      { top: 163.426vw; }

  .malik-inside__city-dot { visibility: hidden; }

  .malik-inside__tween-dot {
    display: block;
    position: absolute;
    width: 1.852vw;
    height: 1.852vw;
    border-radius: 50%;
    background: var(--malik-black);
    transition: left 800ms cubic-bezier(0.22, 1, 0.36, 1), top 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .malik-inside__tween-dot--1 { left: 8.796vw;  top: 75.752vw; }
  .malik-inside__tween-dot--2 { left: 48.796vw; top: 75.752vw; }
  .malik-inside__tween-dot--3 { left: 29.167vw; top: 75.752vw; }
  .malik-inside__tween-dot--4 { left: 89.352vw; top: 75.752vw; }
  .malik-inside__tween-dot--5 { left: 68.981vw; top: 75.752vw; }
  .malik-inside__tween-dot--6 { left: 29.167vw; top: 92.141vw; }
  .malik-inside__tween-dot--7 { left: 68.981vw; top: 92.141vw; }

  .malik-inside__photo { transition: top 800ms cubic-bezier(0.22, 1, 0.36, 1); }

  .malik-inside__heading,
  .malik-inside__city-label,
  .malik-inside__body,
  .malik-inside__actions {
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1) 300ms;
  }
  .malik-inside.is-values-open .malik-inside__heading,
  .malik-inside.is-values-open .malik-inside__city-label,
  .malik-inside.is-values-open .malik-inside__body,
  .malik-inside.is-values-open .malik-inside__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }

  .malik-inside.is-values-open .malik-inside__tween-dot--1 { left: 1.481vw;  top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--2 { left: 48.796vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--3 { left: 1.481vw;  top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--4 { left: 96.667vw; top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--5 { left: 96.667vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--6 { left: 1.481vw;  top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--7 { left: 96.667vw; top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__photo { top: 63.889vw; }
}

/* Same Figma reference and math as the 768px tier above — see it for
   the full reasoning behind each rule. */
@media (max-width: 360px) {
  .malik-inside { padding-block: 0; min-height: 190.778vw; }
  .malik-inside > .malik-container { padding-inline: 0; }
  .malik-inside .malik-reveal { opacity: 1; transform: none; }

  .malik-inside__map { position: relative; height: 0; margin: 0; }
  .malik-inside__actions { position: static; margin: 0; }

  .malik-inside__heading {
    position: absolute;
    top: 8.241vw;
    left: 0;
    right: 0;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 7.407vw;
    line-height: 1.075;
  }

  .malik-inside__city {
    position: absolute;
    transform: translateX(-50%);
    gap: 1.3vw;
  }
  .malik-inside__city-dot { width: 1.852vw; height: 1.852vw; }
  .malik-inside__city-label {
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
  }

  .malik-inside__city--1 { left: 10.463vw; top: 75.741vw; }
  .malik-inside__city--2 { left: 50vw;     top: 75.741vw; }
  .malik-inside__city--3 { left: 30.231vw; top: 75.741vw; }
  .malik-inside__city--4 { left: 89.537vw; top: 75.741vw; }
  .malik-inside__city--5 { left: 69.769vw; top: 75.741vw; }
  .malik-inside__city--6 { left: 30.231vw; top: 92.141vw; }
  .malik-inside__city--7 { left: 69.769vw; top: 92.141vw; }

  .malik-inside__city--2 .malik-inside__city-label {
    width: 17.963vw;
    white-space: normal;
  }

  .malik-inside__photo {
    position: absolute;
    left: 21.296vw;
    top: 21.852vw;
    width: 57.407vw;
    height: 50.009vw;
    transform: none;
    box-shadow: none;
    background: transparent;
  }

  .malik-inside__photo-shape--1 { left: 0vw;      top: 8.285vw; width: 57.407vw; height: 34.459vw; border-radius: 0; transform: none; }
  .malik-inside__photo-shape--2 { left: 9.323vw;  top: 6.214vw; width: 38.882vw; height: 38.795vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--3 { left: 13.462vw; top: 0vw;     width: 30.604vw; height: 45.901vw; border-radius: 2.959vw; transform: none; } /* 31.959px, was mis-measured as 3.403vw */
  .malik-inside__photo-shape--4 { left: 0.296vw;  top: 6.510vw; width: 56.964vw; height: 36.989vw; border-radius: 2.959vw; transform: none; } /* pexels-eberhardgross — not a rotated screen-recording, see below */
  .malik-inside__photo-shape--5 { left: 4.288vw;  top: 0.888vw; width: 49.123vw; height: 49.122vw; border-radius: 50%; transform: none; }
  .malik-inside__photo-shape--6 { left: 11.539vw; top: 8.285vw; width: 36.695vw; height: 36.694vw; border-radius: 11.245vw; transform: none; }

  .malik-inside__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 108.252vw;
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 1.759vw;
    line-height: 1.158;
    opacity: 1;
  }
  .malik-inside__body p + p { margin-top: 1.481vw; }

  .malik-inside__actions .malik-inside__btn--view-more,
  .malik-inside__actions .malik-inside__btn--meet {
    position: absolute;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0;
    border-width: max(1px, 0.185vw);
    border-radius: 7.407vw; /* full pill, matches height */
  }
  .malik-inside__btn--view-more { top: 152.315vw; }
  .malik-inside__btn--meet      { top: 163.426vw; }

  .malik-inside__city-dot { visibility: hidden; }

  .malik-inside__tween-dot {
    display: block;
    position: absolute;
    width: 1.852vw;
    height: 1.852vw;
    border-radius: 50%;
    background: var(--malik-black);
    transition: left 800ms cubic-bezier(0.22, 1, 0.36, 1), top 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .malik-inside__tween-dot--1 { left: 8.796vw;  top: 75.752vw; }
  .malik-inside__tween-dot--2 { left: 48.796vw; top: 75.752vw; }
  .malik-inside__tween-dot--3 { left: 29.167vw; top: 75.752vw; }
  .malik-inside__tween-dot--4 { left: 89.352vw; top: 75.752vw; }
  .malik-inside__tween-dot--5 { left: 68.981vw; top: 75.752vw; }
  .malik-inside__tween-dot--6 { left: 29.167vw; top: 92.141vw; }
  .malik-inside__tween-dot--7 { left: 68.981vw; top: 92.141vw; }

  .malik-inside__photo { transition: top 800ms cubic-bezier(0.22, 1, 0.36, 1); }

  .malik-inside__heading,
  .malik-inside__city-label,
  .malik-inside__body,
  .malik-inside__actions {
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1) 300ms;
  }
  .malik-inside.is-values-open .malik-inside__heading,
  .malik-inside.is-values-open .malik-inside__city-label,
  .malik-inside.is-values-open .malik-inside__body,
  .malik-inside.is-values-open .malik-inside__actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }

  .malik-inside.is-values-open .malik-inside__tween-dot--1 { left: 1.481vw;  top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--2 { left: 48.796vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--3 { left: 1.481vw;  top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--4 { left: 96.667vw; top: 8.241vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--5 { left: 96.667vw; top: 63.333vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--6 { left: 1.481vw;  top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__tween-dot--7 { left: 96.667vw; top: 175.081vw; }
  .malik-inside.is-values-open .malik-inside__photo { top: 63.889vw; }
}

/* ── Values panel, desktop (Figma "inside malik" → Property 1=Variant2,
   same 1440×810 frame as .malik-inside above) — an in-place state, not a
   page-blocking modal: nested inside .malik-container (see the PHP
   template) so inset:0 here is exactly the same 1440×810 box the
   map/body/actions above are positioned against. */
.malik-values-modal {
  position: absolute;
  inset: 0;
  /* Below .malik-header's fixed z-index:1000 (same reasoning/convention as
     .malik-contact-modal's section instance, ~line 1124) so the header/logo
     always paints above this panel when the two visually overlap (any
     viewport ≤1440px, where .malik-container has no letterboxing and this
     panel's box reaches all the way to the header's mark) instead of the
     panel's backdrop-filter blurring/washing it out from underneath. Was
     1200 (above the header) — that let the blur visibly smear the header
     mark into a grey blob and hide it entirely. .malik-inside__tween-dot
     (z-index:1300) still lands above this panel either way, matching Figma's
     own layer order for the dots. */
  z-index: 900;
  color: var(--malik-black);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
}
.malik-inside.is-values-open .malik-values-modal {
  opacity: 1;
  pointer-events: auto;
  /* No opening delay: Figma's own reaction for "view more" is a single
     synchronized Smart Animate/Gentle/800ms, not a staged sequence, and a
     delay here left the photo reading as "stuck" sharp/unfaded for a
     moment before the blur kicked in. Closing (the base rule above) keeps
     its own no-delay fade too, so open/close are symmetric. */
  transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
}

.malik-values-modal__inner {
  position: absolute;
  inset: 0;
}

/* Full-section frosted blur, matching the pattern every other panel in this
   theme uses (testimonials/courses/services modals, and this same panel's
   own mobile tiers below) — a backdrop that covers the whole section rather
   than a smaller inset "card" (Figma's own Rectangle 145 at 118,56/1204×699
   with 42px corners). That bounded-card shape put a visible rounded blur
   edge right across the site header's mark logo (top-left, 48,20/167×155),
   framing it instead of letting it sit cleanly over an evenly blurred
   section, so it's discarded in favor of an edge-to-edge blur.

   inset:0 alone only reaches .malik-values-modal's own box, i.e.
   .malik-container's 1440px frame — on any viewport wider than that
   (+ its side padding), .malik-container is letterboxed and this backdrop
   left visible, un-blurred strips of the section on both sides instead of
   covering it edge-to-edge. Break out of that box the same way the mobile
   tiers below already do (their __inner going width:100vw) so this always
   spans the full width of .malik-inside regardless of viewport, while
   .malik-values-modal__inner (and everything positioned against it) stays
   put, still sized to the 1440px Figma frame. */
.malik-values-modal__backdrop {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  border-radius: 0;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 800ms cubic-bezier(0.45, 0, 0.55, 1), backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1), -webkit-backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1);
}
.malik-inside.is-values-open .malik-values-modal__backdrop {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(min(3.240vw, 46.65px));
  -webkit-backdrop-filter: blur(min(3.240vw, 46.65px));
  /* No opening delay — see .malik-inside.is-values-open .malik-values-modal
     above; the blur should ramp in immediately with everything else, not
     after a pause. */
}

.malik-values-modal__heading {
  position: absolute;
  left: 0;
  right: 0;
  top: min(3.889vw, 56px); /* 56px */
  width: fit-content;
  margin: 0 auto;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: min(3.472vw, 50px); /* 50px */
  line-height: 1.18; /* 59/50 */
  white-space: nowrap;
  color: var(--malik-black);
}

.malik-values-modal__intro {
  position: absolute;
  left: 0;
  right: 0;
  top: min(9.306vw, 134px); /* 134px */
  width: min(43.75vw, 630px); /* 630px */
  margin: 0 auto;
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  letter-spacing: 0;
  color: var(--malik-black);
}

.malik-values-modal__grid { position: static; }

/* Each item's own absolute box (Figma frame extents); num/label/desc
   below are positioned relative to that box, sharing near-identical
   internal offsets across all 4 (circle at 189,0; number center at 202,10;
   label at 0,56; desc at 0,84 — item 2's label is the one exception, see
   its override below). */
.malik-values-modal__item {
  position: absolute;
  height: 0;
}
.malik-values-modal__item--1 { left: min(13.056vw, 188px); top: min(20.625vw, 297px); width: min(28.75vw, 414px); }
.malik-values-modal__item--2 { left: min(58.194vw, 838px); top: min(20.625vw, 297px); width: min(28.75vw, 414px); }
.malik-values-modal__item--3 { left: min(20.625vw, 297px); top: min(32.431vw, 467px); width: min(28.681vw, 413px); }
.malik-values-modal__item--4 { left: min(50.694vw, 730px); top: min(32.431vw, 467px); width: min(28.681vw, 413px); }

.malik-values-modal__num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: min(13.125vw, 189px);
  top: 0;
  width: min(2.5vw, 36px); /* 36px */
  height: min(2.5vw, 36px); /* 36px */
  border: 1px solid var(--malik-black);
  border-radius: 50%;
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  color: var(--malik-black);
}
.malik-values-modal__label {
  position: absolute;
  left: 0;
  top: min(3.889vw, 56px); /* 56px */
  width: 100%;
  font-family: var(--malik-font-ubuntu);
  font-weight: 700;
  text-transform: uppercase;
  font-size: min(1.25vw, 18px); /* 18px */
  letter-spacing: 0;
  text-align: center;
  color: var(--malik-black);
}
/* Figma insets item 2's label 10px in on a narrower (388px) box — its
   text is shorter than the others, so the layer was sized to content
   rather than sharing the full 414px column. */
.malik-values-modal__item--2 .malik-values-modal__label {
  left: min(0.694vw, 10px);
  width: min(26.944vw, 388px);
}
.malik-values-modal__desc {
  position: absolute;
  left: 0;
  top: min(5.833vw, 84px); /* 84px */
  width: 100%;
  font-family: var(--malik-font-ubuntu);
  font-size: min(1.319vw, 19px); /* 19px */
  line-height: 1.17325; /* Figma: 117.325% */
  text-align: center;
  color: var(--malik-black);
}

.malik-values-modal__back {
  position: absolute;
  left: 0;
  right: 0;
  top: min(47.431vw, 683px); /* 683px */
  width: fit-content;
  margin: 0 auto;
}

/* ── Values panel, mobile (Figma "inside malik mob." → Property
   1=Variant2, same 1080×1920 frame as .malik-inside above) ──────────
   factor = px / 1080 * 100, same convention as .malik-inside. Placed
   after (not inside) the base .malik-values-modal rules above so these
   media-scoped overrides win the cascade regardless of where
   .malik-inside's own mobile tiers sit in the file. Four explicit tiers
   matching this file's convention; Figma only supplies the one
   1080px-wide mobile reference so all four share identical math — see
   .malik-inside's mobile block for the full reasoning behind that
   choice. Every element below is positioned absolute against the
   1080×1920 frame, mirroring .malik-inside's own approach, using the
   exact node coordinates read from Figma (get_design_context /
   get_metadata on node 59:2182, "Malik design" file).

   This is an in-place overlay confined to .malik-inside's own box
   (position:absolute, not a viewport-fixed modal) rather than a
   page-blocking popup: that keeps its (0,0) origin aligned with
   .malik-inside__map's, which is what lets the shared dots/photo
   (.malik-inside__tween-dot / __photo, in .malik-inside's own mobile
   tiers above) glide seamlessly into this panel's coordinate space,
   and it avoids colliding with the site's own position:fixed header —
   Figma's prototype reaction (view-more → Smart Animate → Variant2)
   assumes no such site chrome exists over the frame. The dots/photo
   themselves are NOT re-declared here — they're the same shared
   elements tweening under .malik-inside.is-values-open above. */
@media (max-width: 1024px) {
  .malik-values-modal {
    position: absolute;
    inset: 0;
    display: block;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }
  .malik-inside.is-values-open .malik-values-modal {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); /* no opening delay, see desktop rule */
  }
  .malik-values-modal__inner {
    position: relative;
    z-index: auto;
    width: 100vw;
    max-width: none;
    min-height: 177.778vw; /* 1920px frame height */
    padding: 0;
  }

  .malik-values-modal__backdrop {
    display: block;
    position: absolute;
    left: -16.759vw; /* -181px */
    top: 0;
    width: 133.426vw; /* 1441px */
    height: 177.778vw; /* 1920px */
    /* Base (desktop) rule's left:50%+translateX(-50%) centering doesn't
       apply to this tier's plain `left` offset, but the transform isn't
       reset by any property here, so it silently carried over and shifted
       the backdrop an extra half its own (133.426vw) width to the left —
       covering only the left portion of the screen and leaving the rest
       of the photo unblurred. */
    transform: none;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* Blur itself ramps in (not just the container's opacity) so the photo
       behind visibly, gradually blurs — same pattern as
       .malik-contact-modal__backdrop, avoiding the "jump" a constant
       backdrop-filter faded only via ancestor opacity can show. */
    transition: background 800ms cubic-bezier(0.45, 0, 0.55, 1),
                backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1),
                -webkit-backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1);
  }
  .malik-inside.is-values-open .malik-values-modal__backdrop {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2.458vw); /* 26.55px */
    -webkit-backdrop-filter: blur(2.458vw);
    /* no opening delay, see desktop rule */
  }

  .malik-values-modal__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 8.241vw; /* 89px — same formula as .malik-inside__heading */
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 7.407vw; /* 80px */
    line-height: 1.071;
  }

  .malik-values-modal__intro {
    position: absolute;
    left: 0;
    right: 0;
    top: 25.556vw; /* 276px */
    width: 97.037vw;
    margin: 0 auto;
    max-width: none;
    font-size: 3.704vw; /* 40px */
    line-height: 1.173;
    color: var(--malik-black);
    opacity: 1;
  }

  .malik-values-modal__grid {
    display: block;
    width: 97.037vw;
    max-width: none;
    margin: 0 auto;
  }
  /* Circle→label (30px), label→desc (10px) and desc→next-circle (30px)
     gaps are identical across all 4 items regardless of how many lines
     the description wraps to — only each item's own top anchor differs. */
  /* width:auto neutralizes the desktop .malik-values-modal__item--N
     rules' own explicit per-item width (min(28.75vw,414px) etc, same
     0,1,0 specificity but earlier in source so it would otherwise still
     apply here, over-constraining left+right+width and shrinking the
     item box to its desktop content width). The item box itself doesn't
     visually matter for label/desc (they use their own absolute
     97.037vw width, independent of this parent), but .malik-values-
     modal__num centers itself at left:50% *relative to this box* — a
     narrowed, left-stuck box was pulling every circle off-center from
     its label instead of centering it on the full frame width. */
  .malik-values-modal__item {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 0;
  }
  .malik-values-modal__item:nth-child(1) { top: 68.889vw; }  /* 744px */
  .malik-values-modal__item:nth-child(2) { top: 90.093vw; }  /* 973px */
  .malik-values-modal__item:nth-child(3) { top: 115.648vw; } /* 1249px */
  .malik-values-modal__item:nth-child(4) { top: 141.204vw; } /* 1525px */

  .malik-values-modal__num {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 6.019vw; /* 65px */
    height: 6.019vw;
    margin-bottom: 0;
    border-width: max(1px, 0.185vw); /* 2px */
    font-size: 3.704vw; /* 40px */
  }
  /* Item 4's Figma node is an ellipse (68.12×65), not a circle. */
  .malik-values-modal__item:nth-child(4) .malik-values-modal__num { width: 6.307vw; /* 68.12px */ }

  .malik-values-modal__label {
    position: absolute;
    left: 0;
    right: 0;
    top: 8.796vw; /* 95px below the item's own top */
    width: 97.037vw;
    margin: 0 auto;
    font-size: 3.704vw; /* 40px */
    line-height: 1.173;
  }
  /* Desktop's ".malik-values-modal__item--2 .malik-values-modal__label"
     rule (0,2,0 specificity) narrows/insets item 2's label to a 388px
     desktop-content-sized box — that beats the generic mobile
     ".malik-values-modal__label" above (0,1,0), so without this reset
     item 2's label rendered as an off-center ~105px sliver stuck to the
     left edge on mobile instead of the full-width centered block every
     other item gets (same class of specificity bug as the buttons fix
     above, just the reverse direction: here it's the DESKTOP rule
     incorrectly winning on mobile). */
  .malik-values-modal__item--2 .malik-values-modal__label {
    left: 0;
    width: 97.037vw;
  }

  .malik-values-modal__desc {
    position: absolute;
    left: 0;
    right: 0;
    top: 14.074vw; /* 152px below the item's own top */
    width: 97.037vw;
    margin: 0 auto;
    font-size: 3.704vw; /* 40px */
    line-height: 1.173;
    opacity: 1;
  }

  /* Qualified with .malik-values-modal (same fix/reasoning as
     .malik-inside__actions on the view-more/meet buttons above): a bare
     ".malik-values-modal__back" selector (0,1,0) loses to the base desktop
     rule ".malik-inside .malik-btn--outline" (0,2,0), which this button
     also matches (it carries .malik-btn--outline too) — so the desktop
     36px-height/19px-font values were winning at every mobile width. */
  .malik-values-modal .malik-values-modal__back {
    position: absolute;
    left: 0;
    right: 0;
    top: 169.537vw; /* 1831px */
    width: fit-content;
    margin-inline: auto;
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    gap: 0.926vw;
    border-width: max(1px, 0.185vw); /* 2px */
    border-radius: 7.407vw;
    font-family: var(--malik-font-ubuntu);
    font-size: 3.704vw; /* 40px */
    line-height: 1;
    letter-spacing: 0;
  }
}

@media (max-width: 768px) {
  .malik-values-modal { position: absolute; inset: 0; display: block; background: transparent; opacity: 0; pointer-events: none; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal { opacity: 1; pointer-events: auto; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); /* no opening delay, see desktop rule */ }
  .malik-values-modal__inner { position: relative; z-index: auto; width: 100vw; max-width: none; min-height: 177.778vw; padding: 0; }

  .malik-values-modal__backdrop { display: block; position: absolute; left: -16.759vw; top: 0; width: 133.426vw; height: 177.778vw; transform: none; /* base rule's left:50%+translateX(-50%) centering isn't reset by this tier's plain `left`, so it silently carried over and shifted the backdrop half its own width left, leaving the right portion of the screen unblurred */ background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 800ms cubic-bezier(0.45, 0, 0.55, 1), backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1), -webkit-backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal__backdrop { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2.458vw); -webkit-backdrop-filter: blur(2.458vw); /* no opening delay, see desktop rule */ }

  .malik-values-modal__heading { position: absolute; left: 0; right: 0; top: 8.241vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 7.407vw; line-height: 1.071; }
  .malik-values-modal__intro { position: absolute; left: 0; right: 0; top: 25.556vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 3.704vw; line-height: 1.173; color: var(--malik-black); opacity: 1; }

  .malik-values-modal__grid { display: block; width: 97.037vw; max-width: none; margin: 0 auto; }
  .malik-values-modal__item { position: absolute; left: 0; right: 0; width: auto; height: 0; }
  .malik-values-modal__item:nth-child(1) { top: 68.889vw; }
  .malik-values-modal__item:nth-child(2) { top: 90.093vw; }
  .malik-values-modal__item:nth-child(3) { top: 115.648vw; }
  .malik-values-modal__item:nth-child(4) { top: 141.204vw; }

  .malik-values-modal__num { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6.019vw; height: 6.019vw; margin-bottom: 0; border-width: max(1px, 0.185vw); font-size: 3.704vw; }
  .malik-values-modal__item:nth-child(4) .malik-values-modal__num { width: 6.307vw; }

  .malik-values-modal__label { position: absolute; left: 0; right: 0; top: 8.796vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; }
  .malik-values-modal__item--2 .malik-values-modal__label { left: 0; width: 97.037vw; }
  .malik-values-modal__desc { position: absolute; left: 0; right: 0; top: 14.074vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; opacity: 1; }

  .malik-values-modal .malik-values-modal__back { position: absolute; left: 0; right: 0; top: 169.537vw; width: fit-content; margin-inline: auto; height: 7.407vw; padding: 0.926vw 5.556vw; gap: 0.926vw; border-width: max(1px, 0.185vw); border-radius: 7.407vw; font-family: var(--malik-font-ubuntu); font-size: 3.704vw; line-height: 1; letter-spacing: 0; }
}

@media (max-width: 480px) {
  .malik-values-modal { position: absolute; inset: 0; display: block; background: transparent; opacity: 0; pointer-events: none; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal { opacity: 1; pointer-events: auto; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); /* no opening delay, see desktop rule */ }
  .malik-values-modal__inner { position: relative; z-index: auto; width: 100vw; max-width: none; min-height: 177.778vw; padding: 0; }

  .malik-values-modal__backdrop { display: block; position: absolute; left: -16.759vw; top: 0; width: 133.426vw; height: 177.778vw; transform: none; /* base rule's left:50%+translateX(-50%) centering isn't reset by this tier's plain `left`, so it silently carried over and shifted the backdrop half its own width left, leaving the right portion of the screen unblurred */ background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 800ms cubic-bezier(0.45, 0, 0.55, 1), backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1), -webkit-backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal__backdrop { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2.458vw); -webkit-backdrop-filter: blur(2.458vw); /* no opening delay, see desktop rule */ }

  .malik-values-modal__heading { position: absolute; left: 0; right: 0; top: 8.241vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 7.407vw; line-height: 1.071; }
  .malik-values-modal__intro { position: absolute; left: 0; right: 0; top: 25.556vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 3.704vw; line-height: 1.173; color: var(--malik-black); opacity: 1; }

  .malik-values-modal__grid { display: block; width: 97.037vw; max-width: none; margin: 0 auto; }
  .malik-values-modal__item { position: absolute; left: 0; right: 0; width: auto; height: 0; }
  .malik-values-modal__item:nth-child(1) { top: 68.889vw; }
  .malik-values-modal__item:nth-child(2) { top: 90.093vw; }
  .malik-values-modal__item:nth-child(3) { top: 115.648vw; }
  .malik-values-modal__item:nth-child(4) { top: 141.204vw; }

  .malik-values-modal__num { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6.019vw; height: 6.019vw; margin-bottom: 0; border-width: max(1px, 0.185vw); font-size: 3.704vw; }
  .malik-values-modal__item:nth-child(4) .malik-values-modal__num { width: 6.307vw; }

  .malik-values-modal__label { position: absolute; left: 0; right: 0; top: 8.796vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; }
  .malik-values-modal__item--2 .malik-values-modal__label { left: 0; width: 97.037vw; }
  .malik-values-modal__desc { position: absolute; left: 0; right: 0; top: 14.074vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; opacity: 1; }

  .malik-values-modal .malik-values-modal__back { position: absolute; left: 0; right: 0; top: 169.537vw; width: fit-content; margin-inline: auto; height: 7.407vw; padding: 0.926vw 5.556vw; gap: 0.926vw; border-width: max(1px, 0.185vw); border-radius: 7.407vw; font-family: var(--malik-font-ubuntu); font-size: 3.704vw; line-height: 1; letter-spacing: 0; }
}

@media (max-width: 360px) {
  .malik-values-modal { position: absolute; inset: 0; display: block; background: transparent; opacity: 0; pointer-events: none; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal { opacity: 1; pointer-events: auto; transition: opacity 800ms cubic-bezier(0.45, 0, 0.55, 1); /* no opening delay, see desktop rule */ }
  .malik-values-modal__inner { position: relative; z-index: auto; width: 100vw; max-width: none; min-height: 177.778vw; padding: 0; }

  .malik-values-modal__backdrop { display: block; position: absolute; left: -16.759vw; top: 0; width: 133.426vw; height: 177.778vw; transform: none; /* base rule's left:50%+translateX(-50%) centering isn't reset by this tier's plain `left`, so it silently carried over and shifted the backdrop half its own width left, leaving the right portion of the screen unblurred */ background: rgba(255, 255, 255, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 800ms cubic-bezier(0.45, 0, 0.55, 1), backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1), -webkit-backdrop-filter 800ms cubic-bezier(0.45, 0, 0.55, 1); }
  .malik-inside.is-values-open .malik-values-modal__backdrop { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2.458vw); -webkit-backdrop-filter: blur(2.458vw); /* no opening delay, see desktop rule */ }

  .malik-values-modal__heading { position: absolute; left: 0; right: 0; top: 8.241vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 7.407vw; line-height: 1.071; }
  .malik-values-modal__intro { position: absolute; left: 0; right: 0; top: 25.556vw; width: 97.037vw; margin: 0 auto; max-width: none; font-size: 3.704vw; line-height: 1.173; color: var(--malik-black); opacity: 1; }

  .malik-values-modal__grid { display: block; width: 97.037vw; max-width: none; margin: 0 auto; }
  .malik-values-modal__item { position: absolute; left: 0; right: 0; width: auto; height: 0; }
  .malik-values-modal__item:nth-child(1) { top: 68.889vw; }
  .malik-values-modal__item:nth-child(2) { top: 90.093vw; }
  .malik-values-modal__item:nth-child(3) { top: 115.648vw; }
  .malik-values-modal__item:nth-child(4) { top: 141.204vw; }

  .malik-values-modal__num { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6.019vw; height: 6.019vw; margin-bottom: 0; border-width: max(1px, 0.185vw); font-size: 3.704vw; }
  .malik-values-modal__item:nth-child(4) .malik-values-modal__num { width: 6.307vw; }

  .malik-values-modal__label { position: absolute; left: 0; right: 0; top: 8.796vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; }
  .malik-values-modal__item--2 .malik-values-modal__label { left: 0; width: 97.037vw; }
  .malik-values-modal__desc { position: absolute; left: 0; right: 0; top: 14.074vw; width: 97.037vw; margin: 0 auto; font-size: 3.704vw; line-height: 1.173; opacity: 1; }

  .malik-values-modal .malik-values-modal__back { position: absolute; left: 0; right: 0; top: 169.537vw; width: fit-content; margin-inline: auto; height: 7.407vw; padding: 0.926vw 5.556vw; gap: 0.926vw; border-width: max(1px, 0.185vw); border-radius: 7.407vw; font-family: var(--malik-font-ubuntu); font-size: 3.704vw; line-height: 1; letter-spacing: 0; }
}

/* ════════════════════════════════════════════════════════════════
   RESULTS SECTION
════════════════════════════════════════════════════════════════ */
/* Single unified easing for the whole hover reaction — Figma's Prototype
   panel gives this interaction as one "Smart animate" reaction (Trigger:
   While hovering, Easing: Gentle, Duration: 1200ms) applied to the whole
   "work with us" frame at once, not a per-layer staggered crossfade. Every
   property below that participates in the morph shares this exact timing
   so it reads as one coordinated Smart Animate tween. */
.malik-results {
  --malik-results-ease: cubic-bezier(0.45, 0, 0.55, 1);
  --malik-results-duration: 1.2s;
  position: relative;
  background: #FEFBE8;
  color: var(--malik-white);
  text-align: center;
  overflow: hidden;
  min-height: clamp(560px, 64.86vw, 934px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--malik-results-duration) var(--malik-results-ease),
              color var(--malik-results-duration) var(--malik-results-ease);
}
/* Gated to desktop widths (matches this section's own >1024px/<=1024px
   split below) AND real-hover/fine-pointer input. Tapping the CTA to
   open the contact modal matches :hover on touch (often "sticky" until
   a later tap elsewhere), and a mouse-driven narrow/resized viewport
   still reports hover:hover, so width alone or pointer alone isn't
   enough — either one firing this Smart Animate morph reverse-animates
   the blurred blob layers when the modal closes and hover clears, a
   glitchy effect with no Figma mobile counterpart (mobile hides/
   flattens these layers anyway, see the @media (max-width: 1024px)
   block below). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) {
  background: #A7CAD6;
  color: #000000;
}
}

/* "gradient" layer in Figma — a blurred clone of the card sitting behind
   it, producing the soft glow halo. Tracks the card's own color/geometry
   so the halo stays in sync through the hover morph. */
.malik-results__glow-base {
  position: absolute;
  top: calc(50% + 3.93px);
  left: calc(50% - 0.46px);
  width: min(1031.64px, 71.64vw);
  height: min(599.87px, 41.66vw);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: clamp(60px, 19.75vw, 284.4px);
  background: #0B1634;
  border: clamp(18px, 3.82vw, 55px) solid #F4C996;
  filter: blur(40.2px);
  z-index: 0;
  pointer-events: none;
  transition: left var(--malik-results-duration) var(--malik-results-ease),
              top var(--malik-results-duration) var(--malik-results-ease),
              width var(--malik-results-duration) var(--malik-results-ease),
              height var(--malik-results-duration) var(--malik-results-ease),
              border-radius var(--malik-results-duration) var(--malik-results-ease),
              background-color var(--malik-results-duration) var(--malik-results-ease),
              border-color var(--malik-results-duration) var(--malik-results-ease);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__glow-base {
  left: 50%;
  top: 50%;
  width: min(1406px, 97.64vw);
  height: min(934px, 64.86vw);
  border-radius: clamp(40px, 7.78vw, 112px);
  background: #EFFFCF;
  border-color: #BDFFA5;
}
}

/* Wrapper for card + both rings, blurred together as one unit (matches
   Figma's "gradient" group). Morphs position/size on hover in sync with
   glow-base — same Smart Animate reaction, one shared frame. */
.malik-results__card-group {
  position: absolute;
  top: calc(50% + 3.93px);
  left: calc(50% - 0.46px);
  width: min(1031.64px, 71.64vw);
  height: min(599.87px, 41.66vw);
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: blur(40.2px);
  pointer-events: none;
  transition: left var(--malik-results-duration) var(--malik-results-ease),
              top var(--malik-results-duration) var(--malik-results-ease),
              width var(--malik-results-duration) var(--malik-results-ease),
              height var(--malik-results-duration) var(--malik-results-ease);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__card-group {
  left: 50%;
  top: 50%;
  width: min(1406px, 97.64vw);
  height: min(934px, 64.86vw);
}
}

/* Rectangle 207's fill — crisp navy, no border of its own. Morphs to the
   lime fill (#EFFFCF) + smaller radius (112px) of Variant2 on hover. */
.malik-results__card {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: clamp(60px, 19.75vw, 284.4px);
  background: #0B1634;
  transition: border-radius var(--malik-results-duration) var(--malik-results-ease),
              background-color var(--malik-results-duration) var(--malik-results-ease);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__card {
  border-radius: clamp(40px, 7.78vw, 112px);
  background: #EFFFCF;
}
}

/* Both borders live on their OWN transparent-fill layers, so blurring
   them only smears that border's color band — the navy fill and the
   text (a separate sibling entirely) stay perfectly crisp. */
.malik-results__ring {
  position: absolute;
  box-sizing: border-box;
  background: transparent;
  transition: border-radius var(--malik-results-duration) var(--malik-results-ease),
              border-color var(--malik-results-duration) var(--malik-results-ease),
              left var(--malik-results-duration) var(--malik-results-ease),
              top var(--malik-results-duration) var(--malik-results-ease),
              width var(--malik-results-duration) var(--malik-results-ease),
              height var(--malik-results-duration) var(--malik-results-ease);
}
.malik-results__ring--outer {
  inset: 0;
  border-radius: clamp(60px, 19.75vw, 284.4px);
  border: clamp(18px, 3.82vw, 55px) solid #F4C996;
  filter: blur(14px);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__ring--outer {
  border-radius: clamp(40px, 7.78vw, 112px);
  border-color: #BDFFA5;
}
}
.malik-results__ring--inner {
  left: calc(50% - 4px);
  top: calc(50% + 4px);
  width: min(932px, 64.72vw);
  height: min(484px, 33.61vw);
  transform: translate(-50%, -50%);
  border-radius: clamp(40px, 19.75vw, 284.4px);
  border: clamp(14px, 3.82vw, 55px) solid #657D7D;
  filter: blur(12px);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__ring--inner {
  left: calc(50% + 11px);
  top: calc(50% - 2px);
  width: min(1336px, 92.78vw);
  height: min(844px, 58.61vw);
  border-radius: clamp(50px, 11.74vw, 169px);
  border-color: #D3FF7B;
}
}

.malik-results__inner {
  position: relative;
  z-index: 1;
}

.malik-results__eyebrow {
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: currentColor;
  transition: color var(--malik-results-duration) var(--malik-results-ease);
}

.malik-results__heading {
  max-width: 630px;
  margin-inline: auto;
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 50px);
  line-height: 1.18;
  color: currentColor;
  margin-bottom: 2.5rem;
  transition: color var(--malik-results-duration) var(--malik-results-ease);
}

/* CTA label is hard-coded white in both Figma variants (only the button's
   own fill/border swap) — it must NOT inherit the section's white->black
   text-color flip like the eyebrow/heading do. */
.malik-results__cta {
  position: relative;
  z-index: 1;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  font-weight: 400;
  padding: 10px 25px;
  border-radius: 30px;
  transition: background-color var(--malik-results-duration) var(--malik-results-ease),
              border-color var(--malik-results-duration) var(--malik-results-ease);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.malik-results:has(.malik-results__cta:hover) .malik-results__cta {
  background: #000000;
  border-color: #000000;
}
}

/* ── Mobile (Figma "malik universe mob." frame, 1080×1920) ─────────
   factor = px / 1080 * 100 (see .malik-academy for the convention).
   Figma only supplies the one 1080px-wide mobile reference, so all
   four tiers below share identical math (see .malik-letter).
   Layer stack, back → front: section bg (#FEFBE8) → .glow-base (a
   dedicated clone of Rectangle 207 — same size/fill/border/radius —
   carrying the ONLY blur, flat 37.1px, Figma's literal value, not
   vw-scaled) → .card (Rectangle 207: navy fill + F4C996 border,
   crisp) → .ring--inner (Rectangle 208: transparent fill + #657D7D
   border, crisp) → text → button. Borders are real layered
   rectangles, not box-shadow/outline fakes. .ring--outer has no
   Figma counterpart on this frame and stays hidden. */
@media (max-width: 1024px) {
  .malik-results {
    display: block;
    min-height: 177.778vw; /* 1920px frame height */
    padding-block: 0;
    background: #FEFBE8; /* Figma mobile frame fill */
  }
  .malik-results > .malik-container { padding-inline: 0; }

  /* Confirmed via Figma's own panels (Rectangle 207 selected alone has
     no "Shadows and blurs" section at all — only the parent "gradient"
     group does): "gradient" is a group whose ONLY children are
     Rectangle 208 and Rectangle 207, with Layer blur (74.2 Figma
     units = 37.1px CSS) on the GROUP. There is no separate crisp copy
     of either rectangle anywhere else in the tree, so Figma's actual
     rendered pixels are the two of them blurred together as one soft
     unit — .card-group plays that group's role; .card/.ring--inner
     carry no filter of their own since the group blur already covers
     them. .glow-base has no equivalent layer here and is hidden. */
  .malik-results__glow-base { display: none; }

  .malik-results__card-group {
    width: 95.522vw;   /* 1031.64px */
    height: 141.574vw; /* 1529px */
    filter: blur(10.1px); /* group blur, tuned per direct instruction */
  }

  .malik-results__card {
    border-radius: 26.333vw; /* 284.401px */
    border: 5.093vw solid #F4C996; /* 55.0036px */
  }

  .malik-results__ring--outer { display: none; } /* no Figma counterpart */

  .malik-results__ring--inner {
    inset: auto;
    left: calc(50% - 43.148vw - 0.370vw); /* 932px/2 + 4px, center-relative */
    top: calc(50% - 69.414vw + 1.327vw);  /* 1499.34px/2 - 14.33px, center-relative */
    width: 86.296vw;   /* 932px */
    height: 138.828vw; /* 1499.34px */
    border-radius: 26.333vw;
    transform: none;

    border-width: 5.093vw; /* 55.0036px */
    filter: none; /* base rule's blur(12px) was leaking through unblocked — .card-group's own 37.1px group blur already covers this, so an extra individual blur here was double-softening only the ring, not the fill, reading as a mismatched "gap" between them */
  }

  /* Transform-free centering (left/right + margin-inline:auto, not
     left:50%+translateX) — these three carry .malik-reveal, whose own
     translateY entrance transform would otherwise get clobbered by a
     translateX centering transform (same issue/fix as
     .malik-inside__body). */
  .malik-results__eyebrow {
    position: absolute;
    left: 0;
    right: 0;
    top: 66.574vw;   /* 719px */
    width: 57.407vw; /* 620px */
    margin: 0 auto;
    font-size: 3.704vw; /* 40px */
    line-height: 1;     /* 40/40 */
  }

  .malik-results__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 80.463vw;    /* 869px */
    width: 97.037vw;  /* 1048px */
    max-width: none;
    margin: 0 auto;
    font-size: 7.407vw;  /* 80px */
    line-height: 1.0714; /* 107.14% */
    letter-spacing: 0; /* the generic h2 selector (this IS an <h2>) applies -0.025em otherwise, tightening text enough to change the Figma wrap point */
  }

  .malik-results__cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 103.796vw;  /* 1121px */
    width: 42.593vw; /* 460px hug = padding + text, fixed for exactness */
    margin-inline: auto;
    height: 7.407vw; /* 80px */
    padding: 0.926vw 5.556vw; /* 10px 60px */
    gap: 0.926vw;             /* 10px */
    font-size: 3.704vw; /* 40px */
    line-height: 1;     /* 40/40 */
    border-width: max(1px, 0.185vw); /* Figma: 2px */
    border-color: #FFFFFF; /* Figma: solid white, not desktop currentColor */
  }
}

/* Same Figma reference and math as the 1024px tier above, restated per
   this file's explicit-per-tier convention (see .malik-academy) — see
   it for the full reasoning behind each rule. */
@media (max-width: 768px) {
  .malik-results {
    display: block;
    min-height: 177.778vw;
    padding-block: 0;
    background: #FEFBE8;
  }
  .malik-results > .malik-container { padding-inline: 0; }

  .malik-results__glow-base { display: none; }

  .malik-results__card-group {
    width: 95.522vw;
    height: 141.574vw;
    filter: blur(10.1px);
  }

  .malik-results__card {
    border-radius: 26.333vw;
    border: 5.093vw solid #F4C996;
  }

  .malik-results__ring--outer { display: none; }

  .malik-results__ring--inner {
    inset: auto;
    left: calc(50% - 43.148vw - 0.370vw);
    top: calc(50% - 69.414vw + 1.327vw);
    width: 86.296vw;
    height: 138.828vw;
    transform: none;
    border-radius: 26.333vw;
    border-width: 5.093vw;
    filter: none;
  }

  .malik-results__eyebrow {
    position: absolute;
    left: 0;
    right: 0;
    top: 66.574vw;
    width: 57.407vw;
    margin: 0 auto;
    font-size: 3.704vw;
    line-height: 1;
  }

  .malik-results__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 80.463vw;
    width: 97.037vw;
    max-width: none;
    margin: 0 auto;
    font-size: 7.407vw;
    line-height: 1.0714;
    letter-spacing: 0;
  }

  .malik-results__cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 103.796vw;
    width: 42.593vw;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* Same Figma reference and math as the 1024px tier above — see it for
   the full reasoning behind each rule. */
@media (max-width: 480px) {
  .malik-results {
    display: block;
    min-height: 177.778vw;
    padding-block: 0;
    background: #FEFBE8;
  }
  .malik-results > .malik-container { padding-inline: 0; }

  .malik-results__glow-base { display: none; }

  .malik-results__card-group {
    width: 95.522vw;
    height: 141.574vw;
    filter: blur(10.1px);
  }

  .malik-results__card {
    border-radius: 26.333vw;
    border: 5.093vw solid #F4C996;
  }

  .malik-results__ring--outer { display: none; }

  .malik-results__ring--inner {
    inset: auto;
    left: calc(50% - 43.148vw - 0.370vw);
    top: calc(50% - 69.414vw + 1.327vw);
    width: 86.296vw;
    height: 138.828vw;
    transform: none;
    border-radius: 26.333vw;
    border-width: 5.093vw;
    filter: none;
  }

  .malik-results__eyebrow {
    position: absolute;
    left: 0;
    right: 0;
    top: 66.574vw;
    width: 57.407vw;
    margin: 0 auto;
    font-size: 3.704vw;
    line-height: 1;
  }

  .malik-results__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 80.463vw;
    width: 97.037vw;
    max-width: none;
    margin: 0 auto;
    font-size: 7.407vw;
    line-height: 1.0714;
    letter-spacing: 0;
  }

  .malik-results__cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 103.796vw;
    width: 42.593vw;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* Same Figma reference and math as the 1024px tier above — see it for
   the full reasoning behind each rule. */
@media (max-width: 360px) {
  .malik-results {
    display: block;
    min-height: 177.778vw;
    padding-block: 0;
    background: #FEFBE8;
  }
  .malik-results > .malik-container { padding-inline: 0; }

  .malik-results__glow-base { display: none; }

  .malik-results__card-group {
    width: 95.522vw;
    height: 141.574vw;
    filter: blur(10.1px);
  }

  .malik-results__card {
    border-radius: 26.333vw;
    border: 5.093vw solid #F4C996;
  }

  .malik-results__ring--outer { display: none; }

  .malik-results__ring--inner {
    inset: auto;
    left: calc(50% - 43.148vw - 0.370vw);
    top: calc(50% - 69.414vw + 1.327vw);
    width: 86.296vw;
    height: 138.828vw;
    border-radius: 26.333vw;
    border-width: 5.093vw;
    filter: none;
  }

  .malik-results__eyebrow {
    position: absolute;
    left: 0;
    right: 0;
    top: 66.574vw;
    width: 57.407vw;
    margin: 0 auto;
    font-size: 3.704vw;
    line-height: 1;
  }

  .malik-results__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 80.463vw;
    width: 97.037vw;
    max-width: none;
    margin: 0 auto;
    font-size: 7.407vw;
    line-height: 1.0714;
    letter-spacing: 0;
  }

  .malik-results__cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 103.796vw;
    width: 42.593vw;
    margin-inline: auto;
    height: 7.407vw;
    padding: 0.926vw 5.556vw;
    gap: 0.926vw;
    font-size: 3.704vw;
    line-height: 1;
    letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
    border-width: max(1px, 0.185vw);
    border-color: #FFFFFF;
  }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER CTA (Library)
════════════════════════════════════════════════════════════════ */
.malik-footer__cta {
  position: relative;
  background: var(--malik-black);
  min-height: clamp(420px, 51.667vw, 744px); /* 744px = Figma "work with us" frame height */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background media — hidden by default, fades in when the CTA button
   is hovered (supports image, video, or gif). */
.malik-footer__cta-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--malik-ease);
}
.malik-footer__cta-media img,
.malik-footer__cta-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.malik-footer__cta:has(.malik-footer__cta-btn:hover) .malik-footer__cta-media {
  opacity: 1;
}

.malik-footer__cta-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma (node 222:809): logo-heading, heading-button, button-org gaps are
   20px/60px/120px, not a uniform gap — set as explicit margins instead of
   the flex `gap` this used to have (which flattened them all to 28px and
   left the button sitting right under the heading with no breathing room). */
.malik-footer__cta-logo {
  display: flex;
  margin-bottom: clamp(0.75rem, 1.389vw, 20px);
}

.malik-footer__cta-title {
  font-family: var(--malik-font-sans);
  font-size: clamp(1.5rem, 2.778vw, 2.5rem); /* 2.5rem = 40px, Figma exact at 1440 */
  line-height: 1.175; /* Figma text box: 94px / 2 lines / 40px */
  color: var(--malik-white);
  font-weight: 500;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4.167vw, 60px);
}

/* Suppressed here; re-enabled only in the mobile breakpoint below — desktop
   keeps the heading flowing as a natural wrap (see footer.php). */
.malik-footer__cta-mobile-break {
  display: none;
}


.malik-footer__cta-btn {
  border: 1px solid var(--malik-white);
  background: transparent;
  color: var(--malik-white);
  font-family: var(--malik-font-ubuntu);
  font-size: 19px; /* Figma exact */
  line-height: 1; /* Figma: 100% — base .malik-btn inherits body's 1.6, which puffs the pill out to ~50px tall vs Figma's 36px */
  letter-spacing: 0; /* Figma spec has none; base .malik-btn adds 0.04em tracking */
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 30px;
  transition: background 0.3s var(--malik-ease), color 0.3s var(--malik-ease);
}
.malik-footer__cta:has(.malik-footer__cta-btn:hover) .malik-footer__cta-btn {
  background: var(--malik-white);
  color: var(--malik-black);
}

.malik-footer__cta-org {
  font-family: var(--malik-font-ubuntu);
  font-size: 14px; /* Figma exact */
  color: var(--malik-white);
  opacity: 0.65;
  margin-top: clamp(3rem, 8.333vw, 120px); /* Figma: 120px below the button */
}

/* ── Mobile (Figma "malik universe mob." frame, 1080×1920) ─────────
   factor = px / 1080 * 100 (see .malik-academy for the convention).
   Desktop's hover-to-reveal background media is a desktop-only
   interaction — Figma's mobile frame shows the photo always visible,
   full-bleed, with the logo/heading/button/org text absolutely
   positioned over it at their exact frame-relative offsets, so this
   drops the hover gate and the flex/gap layout entirely in favor of
   the same "static wrapper + absolutely positioned children against
   the section" pattern used by .malik-academy/.malik-letter. Every
   element below uses a plain `left`/`top` (not `left:50% +
   transform:translateX`) specifically for .malik-footer__cta-btn,
   since the base .malik-btn:hover rule sets its own `transform:
   translateY(-1px)` — a transform-based centering would get wiped by
   that hover state and the button would jump left (same class of bug
   already fixed elsewhere in this file, e.g. .malik-learn__cta); kept
   consistent across every element here rather than mixing approaches. */
@media (max-width: 1024px) {
  .malik-footer__cta {
    min-height: 177.778vw; /* 1920px frame height */
    display: block;
    border-top: none;
  }

  .malik-footer__cta-media {
    opacity: 1; /* always visible on mobile — no hover gate */
    width: 316.111vw;  /* 3414px */
    height: 177.778vw; /* 1920px, fills the section exactly */
    left: 50%;
    top: 0;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
  }

  .malik-footer__cta-inner {
    position: static;
    display: block;
    width: auto;
    text-align: center;
    gap: 0;
    padding-inline: 0;
    max-width: none;
  }

  .malik-footer__cta-logo {
    position: absolute;
    left: 50%;
    top: 62.500vw; /* 675px */
    width: 37.870vw;  /* 409px */
    height: 8.161vw;  /* 88.14px */
    transform: translateX(-50%);
    justify-content: center;
  }
  .malik-footer__cta-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .malik-footer__cta-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 74.365vw; /* 803.14px */
    width: 97.037vw; /* 1048px */
    max-width: none;
    margin: 0 auto;
    font-size: 7.407vw;  /* 80px */
    line-height: 8.704vw; /* 94px */
  }
  .malik-footer__cta-mobile-break { display: block; }

  .malik-footer__cta-btn {
    position: absolute;
    left: calc(50% - 38.519vw); /* 800/2 + 16px, per Figma's own offset */
    top: 107.883vw; /* 1165.14px */
    width: 74.074vw; /* 800px */
    height: 7.407vw; /* 80px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.926vw 5.556vw; /* 10px 60px */
    gap: 0.926vw; /* 10px */
    font-size: 3.704vw;  /* 40px */
    line-height: 3.704vw;
    border-width: max(1px, 0.185vw); /* 2px */
    border-radius: 7.407vw; /* 80px */
  }

  .malik-footer__cta-org {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40.265vw; /* 434.86px */
    width: 57.407vw;  /* 620px */
    margin: 0 auto;
    font-size: 3.704vw; /* 40px */
    line-height: 3.704vw;
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER MAIN
════════════════════════════════════════════════════════════════ */
.malik-footer__main {
  background: #000000;
  box-shadow: 0 4px 2px rgba(0,0,0,0.25);
  padding-block: 52px 44px;
}

.malik-footer__grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  gap: 20px;
  max-width: 1440px;
  padding-inline: 80px;
  margin-inline: auto;
  align-items: start;
}

/* Mobile-only rebuild of the footer (Figma "Frame 2", 1080x2190) — three
   independent stacked sections, not a narrowed version of the desktop
   grid above. Hidden here; shown (and the desktop grid hidden) in the
   ≤1024px block near the bottom of this FOOTER MAIN section. */
.malik-footer__mobile {
  display: none;
}

.malik-footer__logo-mark {
  width: 83px;
  height: 43px;
}

.malik-footer__col-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--malik-font-ubuntu);
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: var(--malik-white);
    margin-bottom: 20px;
}

.malik-footer__col-marker {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--malik-white);
  border-radius: 4.645px;
}

.malik-footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 23px;
  font-family: var(--malik-font-ubuntu);
  line-height: 1;
  padding-left: 34px;
}

.malik-footer__nav-list a {
  font-size: 16px;
  line-height: 1;
  color: #fff;
  transition: color var(--malik-transition);
  font-weight: 700;
  text-transform: uppercase;
}
.malik-footer__nav-list a:hover { color: var(--malik-white); }

.malik-footer__contact-list {
    gap: 0;
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.17325;
    letter-spacing: 0;
    text-transform: none;
    color: #d9d9d9;
}
.malik-footer__contact-list li + li {
  margin-top: 1.17325em;
}
.malik-footer__contact-list a {
  font-size: 19px;
  line-height: 1.17325;
  font-weight: 400;
  text-transform: none;
  color: #d9d9d9;
}
.malik-footer__contact-list a:hover { color: var(--malik-white); }

.malik-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
}

.malik-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.malik-footer__copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}

.malik-footer__legal {
  display: flex;
  gap: 1.5rem;
}

.malik-footer__legal a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  transition: color var(--malik-transition);
}
.malik-footer__legal a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 1100px) {
  .malik-footer__grid { grid-template-columns: 1fr 1fr; }
  .malik-footer__brand { grid-column: span 2; }
}

@media (max-width: 600px) {
  .malik-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .malik-footer__brand { grid-column: span 2; }
  .malik-footer__bottom-inner { flex-direction: column; text-align: center; }
}

/* ── Mobile footer (Figma "Frame 2", 1080x2190) ───────────────────
   Exact Figma dev-mode export, converted to pure vw against the
   1080px reference frame (factor = px/1080*100 — see .malik-services
   for the site's own convention). One breakpoint covers 1024/768/480/360
   per the brief: Figma supplies a single 1080px-wide mobile reference,
   so there is nothing that differs between those four widths — a
   single ≤1024px query already renders correctly at all of them.

   Structure: three independent absolutely-positioned sections (icon +
   heading + list), NOT the desktop's responsive column grid — the
   desktop .malik-footer__grid is hidden outright here rather than
   reflowed, and this dedicated markup (see footer.php) takes over. */
@media (max-width: 1024px) {
  .malik-footer__main { padding-block: 0; }
  .malik-footer__grid { display: none; }

  .malik-footer__mobile {
    display: block;
    position: relative;
    width: 100%;
    height: 202.778vw; /* 2190px */
    background: #000000;
    overflow: hidden;
  }

  .malik-footer__mobile-logo {
    position: absolute;
    left: 41.667vw;  /* 450px */
    top: 14.074vw;   /* 152px */
    width: 16.481vw; /* 178px */
    height: 8.611vw; /* 93px */
  }
  .malik-footer__mobile-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Deliberately NOT position:relative — every child below is absolutely
     positioned, so this wrapper has zero in-flow height. Making it a
     positioning root would anchor those children's `top` values (which
     are frame-relative, e.g. 922px for "Find us") against this collapsed
     0-height box instead of the frame, stacking all three sections on
     top of one another. .malik-footer__mobile (the frame) is the only
     positioned ancestor, left as the containing block on purpose. */
  .malik-footer__mobile-section { position: static; }

  /* Rectangle 158: 33.89x33.89, radius 8.74584 — fixed to the frame's
     own 16px left gutter regardless of where the (centered) heading
     text lands, offset 3px below the section top to sit centered
     against the heading's 40px line ((40-33.89)/2 = 3.055 ≈ 3px). */
  .malik-footer__mobile-marker {
    position: absolute;
    left: 1.481vw;  /* 16px */
    width: 3.138vw; /* 33.89px */
    height: 3.138vw;
    background: #fff;
    border-radius: 0.810vw; /* 8.74584px */
  }

  .malik-footer__mobile-heading {
    position: absolute;
    left: 21.296vw;  /* 230px */
    width: 57.407vw; /* 620px */
    margin: 0;
    font-family: var(--malik-font-ubuntu);
    font-weight: 700;
    font-size: 3.704vw; /* 40px */
    line-height: 1;      /* Figma: "identical to box height" */
    text-align: center;
    text-transform: uppercase;
    color: #fff;
  }

  .malik-footer__mobile-list {
    position: absolute;
    left: 21.296vw;  /* 230px */
    width: 57.407vw; /* 620px */
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .malik-footer__mobile-list li {
    font-family: var(--malik-font-ubuntu);
    font-weight: 400;
    font-size: 3.704vw; /* 40px */
    line-height: 117.32%;
    color: #fff;
  }
  .malik-footer__mobile-list a { color: inherit; }

  /* Section 1: Partners — icon/heading/list tops per Figma (402/405/522),
     item-to-item deltas (598-522=76, 675-598=77) reproduced exactly
     rather than averaged. */
  .malik-footer__mobile-section--1 .malik-footer__mobile-marker  { top: 37.500vw; } /* 405px */
  .malik-footer__mobile-section--1 .malik-footer__mobile-heading { top: 37.222vw; } /* 402px */
  .malik-footer__mobile-section--1 .malik-footer__mobile-list    { top: 48.333vw; } /* 522px */
  .malik-footer__mobile-section--1 .malik-footer__mobile-list li:nth-child(2) { margin-top: 2.692vw; } /* 76px gap - line-height */
  .malik-footer__mobile-section--1 .malik-footer__mobile-list li:nth-child(3) { margin-top: 2.784vw; } /* 77px gap - line-height */

  /* Section 2: Find us — same rhythm, offset by the 922px section top. */
  .malik-footer__mobile-section--2 .malik-footer__mobile-marker  { top: 85.648vw; }  /* 925px */
  .malik-footer__mobile-section--2 .malik-footer__mobile-heading { top: 85.370vw; }  /* 922px */
  .malik-footer__mobile-section--2 .malik-footer__mobile-list    { top: 96.481vw; }  /* 1042px */
  .malik-footer__mobile-section--2 .malik-footer__mobile-list li:nth-child(2) { margin-top: 2.692vw; }
  .malik-footer__mobile-section--2 .malik-footer__mobile-list li:nth-child(3) { margin-top: 2.784vw; }

  /* Section 3: Contact us — Figma models this as one 620x423 text block
     (not five separate layers); 423px / 46.928px line-height = ~9 lines,
     matching 5 content lines separated by a blank line each (4 gaps) —
     so each item after the first gets one full extra line-height as
     margin-top, not the tighter partners/find-us rhythm above. Color is
     #D9D9D9 here (not the white used by the other two sections), and
     each line is forced to one row (no browser-chosen wrapping), per spec. */
  .malik-footer__mobile-section--3 .malik-footer__mobile-marker  { top: 133.796vw; } /* 1445px */
  .malik-footer__mobile-section--3 .malik-footer__mobile-heading { top: 133.519vw; } /* 1442px */
  .malik-footer__mobile-contact {
    top: 144.630vw;  /* 1562px */
    height: 39.167vw; /* 423px */
  }
  .malik-footer__mobile-contact li {
    color: #D9D9D9;
    white-space: nowrap;
  }
  .malik-footer__mobile-contact a { color: #D9D9D9; }
  .malik-footer__mobile-contact li:not(:first-child) { margin-top: 4.345vw; } /* one full line-height, the "blank line" gap */
}

/* ════════════════════════════════════════════════════════════════
   FLUENT FORMS — MALIK STYLE
════════════════════════════════════════════════════════════════ */
.malik-form .ff-el-input--label label {
  font-family: var(--malik-font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.malik-form .ff-el-form-control {
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: var(--malik-radius-sm);
  font-family: var(--malik-font-sans);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s;
  width: 100%;
  background: var(--malik-white);
}

.malik-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--malik-black);
}

.malik-form .ff_submit_btn_container button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--malik-font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border-radius: var(--malik-radius-pill);
  border: 1.5px solid var(--malik-black);
  background: var(--malik-black);
  color: var(--malik-white);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.malik-form .ff_submit_btn_container button:hover {
  background: var(--malik-dark-2);
}

/* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
════════════════════════════════════════════════════════════════ */
.malik-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--malik-ease), transform 0.7s var(--malik-ease);
}

.malik-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.malik-reveal--delay-1 { transition-delay: 0.1s; }
.malik-reveal--delay-2 { transition-delay: 0.2s; }
.malik-reveal--delay-3 { transition-delay: 0.35s; }
.malik-reveal--delay-4 { transition-delay: 0.5s; }

/* ════════════════════════════════════════════════════════════════
   MISC / UTILITIES
════════════════════════════════════════════════════════════════ */
.malik-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.malik-text-center { text-align: center; }
.malik-text-white  { color: var(--malik-white); }
.malik-text-cream  { color: var(--malik-cream); }
.malik-bg-black    { background: var(--malik-black); }
.malik-bg-cream    { background: var(--malik-cream); }
.malik-bg-dark     { background: var(--malik-dark); }

/* ════════════════════════════════════════════════════════════════
   ELEMENTOR OVERRIDES (compatibility layer)
════════════════════════════════════════════════════════════════ */
.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100%;
}

/* Elementor buttons inherit Malik style */
.elementor-button-wrapper .elementor-button.malik-btn {
  font-family: var(--malik-font-sans);
}

/* Make Elementor editor background match theme */
.elementor-editor-active body {
  background: var(--malik-cream);
}

/* ════════════════════════════════════════════════════════════════
   WORDPRESS BLOCK EDITOR STYLES
════════════════════════════════════════════════════════════════ */
.wp-block-cover .malik-tagline-banner__inner h2 { color: var(--malik-white); }

.has-malik-black-background-color  { background-color: var(--malik-black) !important; }
.has-malik-dark-background-color   { background-color: var(--malik-dark) !important; }
.has-malik-cream-background-color  { background-color: var(--malik-cream) !important; }
.has-malik-white-background-color  { background-color: var(--malik-white) !important; }
.has-malik-olive-background-color  { background-color: var(--malik-olive) !important; }
.has-malik-black-color             { color: var(--malik-black) !important; }
.has-malik-white-color             { color: var(--malik-white) !important; }
.has-malik-olive-color             { color: var(--malik-olive) !important; }
.has-malik-gold-color              { color: var(--malik-gold) !important; }

/* ════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════ */
@media print {
  .malik-header,
  .malik-footer,
  .malik-video-bg { display: none !important; }
  body { font-size: 11pt; }
}