/* ═══════════════════════════════════════════════════════════════
   THE SENSITIVITY MODEL PAGE
   Loaded only on the "The Sensitivity Model" page template.
   Builds on the shared tokens/components in style.css + malik-main.css.
═══════════════════════════════════════════════════════════════ */

/* This page's Figma frame (222:1373 etc.) uses an 80px gutter / 1280px
   content width throughout (hero head, narrative columns, insight items,
   context/cta blocks all resolve to x=80..1360 at the 1440px frame width),
   not the sitewide 48px gutter / 1344px `--malik-container-max` default.
   Full-bleed backgrounds (map band, video banner, footer) already opt out
   via their own `x=0 width=1440` handling and are unaffected. Desktop only
   — no dedicated mobile Figma frame exists for this page, so mobile keeps
   the sitewide 24px gutter. */
@media (min-width: 901px) {
  .malik-sm .malik-container { max-width: 1440px; padding-inline: 80px; }
}

/* This page's `.malik-eyebrow` instances are Figma's "subtitles & CTA"
   style (19px/100% line-height, 0 letter-spacing) — the shared
   `.malik-eyebrow` in malik-main.css uses 0.14em letter-spacing and no
   explicit line-height instead, which is also relied on by the syntegration
   and fredmund-malik pages, so it's overridden here rather than at the
   source to keep this fix scoped to the Sensitivity Model page only. */
.malik-sm .malik-eyebrow {
  line-height: 1;
  letter-spacing: normal;
}

/* Forced desktop-only line break for the diagnosis heading — see
   malik_person_break_lines() in functions.php (shared helper, already
   used by the fredmund-malik page; `.malik-lb` itself is only styled in
   that page's own malik-people.css, so it's redeclared here rather than
   relying on that file loading on this page too). */
@media (max-width: 900px) {
  .malik-lb { display: none; }
}

/* ── Shared text patterns ─────────────────────────────────────── */
.malik-sm-heading {
  font-family: var(--malik-font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.125rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--malik-black);
}

.malik-sm-centered-heading { text-align: center; max-width: 780px; margin-inline: auto; }

/* Recurring "narrow column, pushed right" body text block */
.malik-sm-col-right {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  max-width: 738px;
  margin-inline-start: auto;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--malik-black);
}

/* Recurring "centered paragraph" block */
.malik-sm-centered {
  font-family: var(--malik-font-ubuntu);
  font-size: 1.1875rem;
  line-height: 22px;
  max-width: 846px;
  margin-inline: auto;
  text-align: center;
  color: var(--malik-black);
}

.malik-sm-col-right + .malik-sm-centered,
.malik-sm-centered + .malik-sm-col-right,
.malik-sm-col-right + .malik-sm-col-right { margin-top: clamp(2rem, 4.1667vw, 60px); } /* Figma: 60px flat at 1440 (narrative paragraph gaps) */

/* Multi-paragraph `.malik-sm-centered` (a Figma text node split by a single
   blank line, not a full paragraph gap) — see .malik-sm-quote for the same
   ~22px blank-line convention. */
.malik-sm-centered--multi p { margin: 0; }
.malik-sm-centered--multi p + p { margin-top: clamp(1.25rem, 1.5278vw, 22px); }

/* Figma node 222:1380: the autopsy text is one text node split by a single
   blank line (not a full paragraph gap) between "...had mapped." and "Those
   structures are real..." — same ~22px blank-line gap as .malik-sm-quote's
   body→quote break, not the 60px gap above (which is for genuinely separate
   narrative paragraphs). Needs the extra class for specificity to win over
   the adjacent-sibling rule above. */
.malik-sm-col-right + .malik-sm-col-right.malik-sm-col-right--continued { margin-top: clamp(1.25rem, 1.5278vw, 22px); }

.malik-sm-quote {
  max-width: 738px;
  margin-inline-start: auto;
  margin-top: clamp(1.25rem, 1.5278vw, 22px); /* Figma: body+quote share one text node with a single blank-line gap (~22px) */
  font-family: var(--malik-font-ubuntu);
}
.malik-sm-quote p {
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--malik-black);
  margin-bottom: 1.75rem;
}
.malik-sm-quote cite {
  font-style: normal;
  font-weight: 700;
  font-size: 1.1875rem;
}

/* Square bullet marker (18px, black, rounded). Figma (222:1392-1395): marker
   left=x730 w18 (right edge 748), label/body text left=x763 — a flat 15px
   gap, not 0.75rem/12px. Marker top and label top are the same y (3202),
   i.e. flush-top aligned, not vertically centered against the label. */
.malik-sm-marker {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4.65px;
  background: var(--malik-black);
  flex-shrink: 0;
  margin-right: 15px;
  vertical-align: middle;
}

.malik-sm-label {
  font-family: var(--malik-font-ubuntu);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--malik-black);
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.malik-sm-body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--malik-black);
  max-width: 597px;
  margin-left: calc(18px + 15px);
}

/* ── HERO ─────────────────────────────────────────────────────── */
.malik-sm-hero { padding-block: clamp(2rem, 6vw, 4rem) 0; }

.malik-sm-hero__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  margin-top: 90px;
}
/* Desktop only: `.malik-header` is `position: fixed` here, so this section
   alone is responsible both for clearing it and for matching Figma's real
   gap before the eyebrow (node 222:1374 sits at frame y=248). The vw-scaled
   padding-block above tops out at 64px, undershooting by ~94px. Same fix as
   `.malik-person-hero` (fredmund-malik page) — see malik-people.css. */
@media (min-width: 901px) {
  .malik-sm-hero { padding-top: 248px; }
  .malik-sm-hero__head { margin-top: 0; margin-bottom: 89px; } /* Figma: title bottom y=419, visual top y=508 */
  /* Figma node 222:1375: right-column eyebrow is 413px wide (not the
     shared 305px default) and sits 67px below the body paragraph above it
     (body bottom y=303, eyebrow top y=370), not the flat 1.5rem/24px this
     shared it with the left column's eyebrow. */
  .malik-sm-hero__head-right .malik-sm-hero__eyebrow { max-width: 413px; margin-top: 67px; }
}
.malik-sm-hero__head-left { max-width: 413px; }
.malik-sm-hero__head-right { max-width: 738px; }
.malik-sm-hero__eyebrow { max-width: 305px; }
.malik-sm-hero__head-left .malik-sm-hero__eyebrow { margin-bottom: 1rem; }
.malik-sm-hero__head-right .malik-sm-col-right { max-width: none; margin-inline-start: 0; }
/* Mobile/tablet fallback (no dedicated Figma spec below 901px); desktop's
   real 413px/67px values are set above, after this in source order but at
   equal specificity, so they'd lose to this rule if left unscoped — hence
   the max-width:901px guard here. */
@media (max-width: 900px) {
  .malik-sm-hero__head-right .malik-sm-hero__eyebrow { margin-top: 1.5rem; }
}

.malik-sm-hero__visual {
  width: 100%;
  aspect-ratio: 1280 / 726;
  /* Figma's own crop mask for this panel (node 222:1378, "Rectangle 157")
     exports as a plain <rect> with no rx/ry — sharp corners, not rounded. */
  overflow: hidden;
  background: #d9d9d9;
}
.malik-sm-hero__visual video,
.malik-sm-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
/* The source file (dots-11.mp4) has a ~1-2px black encoding artifact right
   at its own right edge; since the box is proportionally wider than the
   video's native aspect ratio, object-fit:cover scales to match width
   exactly with no horizontal crop margin, so that artifact was showing
   through as a stray vertical line. A small zoom crops it out — confirmed
   absent from Figma's own render of this panel (node 222:1377). */
.malik-sm-hero__visual video { transform: scale(1.02); }

/* ── NARRATIVE ────────────────────────────────────────────────── */
/* Figma: gap from hero visual bottom (y=1234) to the autopsy paragraph
   (y=1334) is 100px; gap from the closing quote block (bottom y=1916) to
   the map band's top (y=2100) is 184px — asymmetric, so top/bottom can't
   share one padding-block value. */
.malik-sm-narrative {
  padding-top: clamp(2.5rem, 6.9444vw, 100px);
  padding-bottom: clamp(3rem, 12.7778vw, 184px);
}

/* ── SYSTEMS MAP (green band + blob) ─────────────────────────── */
.malik-sm-map {
  position: relative;
  overflow: hidden;
  background: #dce4d4;
  padding-block: clamp(4rem, 12vw, 8rem);
  display: flex;
  align-items: center;
  min-height: clamp(420px, 56.25vw, 810px); /* 810/1440 = 56.25vw — was 55vw, undershot the 810px cap */
}
/* Desktop only: Figma's heading/subtitle block is NOT vertically centered
   in the band (its own vertical center sits ~108px below the section's
   actual center, which is where the blob glow is centered) — so desktop
   uses fixed top/bottom offsets instead of the flex-centering above.
   Mobile/tablet keep flex-centering (no dedicated Figma spec below 901px,
   and a fixed 346px offset undersized for a shorter viewport pushed the
   heading up under the sticky mobile header). Heading top y=346 (relative
   to band top), subtitle bottom y=681, band height=810 → padding-top
   346/1440=24.0278vw, padding-bottom (810-681)=129/1440=8.9583vw. */
@media (min-width: 901px) {
  .malik-sm-map {
    display: block;
    padding-top: clamp(216px, 24.0278vw, 346px);
    padding-bottom: clamp(80px, 8.9583vw, 129px);
  }
}
.malik-sm-map__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 901px) {
  .malik-sm-map__inner { gap: clamp(58px, 6.3889vw, 92px); } /* Figma: heading bottom y=523 → subtitle top y=615, a 92px gap */
}
.malik-sm-map__heading,
.malik-sm-map .malik-sm-centered-heading { max-width: 707px; }

/* Same 785.101px canvas as the homepage's .malik-one-system__blob (node
   1:324) — scaled the same proportional way (785.101/1440 = 54.5209vw) so
   it reaches its native size at this design's own 1440px width. */
.malik-sm-map__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(360px, 54.5209vw, 785.101px);
  height: clamp(360px, 54.5209vw, 785.101px);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 0;
}
.malik-sm-map__blob picture { position: absolute; inset: 0; display: block; }
.malik-sm-map__blob-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Same 600ms Gentle crossfade token as the homepage version. */
  transition: opacity 600ms cubic-bezier(0.45, 0, 0.55, 1);
}
.malik-sm-map__blob-img--default { opacity: 1; }
.malik-sm-map__blob-img--variant { opacity: 0; transform: rotate(21.73deg); }

/* Desktop-only ambient morph — same 3000ms Slow-ease loop and keyframe
   names (`malik-os-blob-*`, defined once in malik-main.css) as the
   homepage's Malik OS blob; this page has no "explore" interaction to gate
   it behind, so it just runs continuously, matching that component's own
   resting/ambient state. */
@media (min-width: 1025px) {
  .malik-sm-map__blob-img--default { animation: malik-os-blob-default 3000ms cubic-bezier(.65, 0, .35, 1) infinite; }
  .malik-sm-map__blob-img--variant { animation: malik-os-blob-variant 3000ms cubic-bezier(.65, 0, .35, 1) infinite; transform: none; }
  .malik-sm-map { animation: malik-os-blob-bg 3000ms cubic-bezier(.65, 0, .35, 1) infinite; }
}

/* ── INSIGHTS (five-item list) ───────────────────────────────── */
/* Figma: intro→map-band gap 100px (top), closing→video-banner gap 250px
   (bottom, same "next section is full-bleed so this IS the whole gap"
   pattern as the narrative/map boundary above). Every internal gap
   (intro→item1, item→item, item5→closing) measures a flat 60px. */
.malik-sm-insights {
  padding-top: clamp(2.5rem, 6.9444vw, 100px);
  padding-bottom: clamp(3rem, 17.3611vw, 250px);
}
/* Scoped to the intro (before the list) and the closing (after the list)
   individually — a blanket `.malik-sm-centered` rule would also give the
   closing paragraph an unwanted trailing margin-bottom before the
   section's own padding-bottom, double-spacing the closing→video-banner
   gap. */
.malik-sm-insights > .malik-container > .malik-sm-centered:first-child { margin-bottom: clamp(2.5rem, 4.1667vw, 60px); }
.malik-sm-insights__list + .malik-sm-centered { margin-top: clamp(2.5rem, 4.1667vw, 60px); }

/* Figma (222:1392 etc.): this 630px-wide list sits at x=730, flush against
   the container's right inset (1360 = 1440-80, minus the 630 width) — NOT
   centered in the frame like the intro/closing paragraphs above/below it,
   despite how it looks at a glance. Matches the same right-flush pattern
   as .malik-sm-col-right elsewhere on this page. */
.malik-sm-insights__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4.1667vw, 60px);
  max-width: 630px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
@media (max-width: 900px) {
  .malik-sm-insights__list { margin-inline: auto; } /* no dedicated mobile Figma spec — keep it centered/stacked there */
}

/* ── DIAGNOSIS BANNER ─────────────────────────────────────────── */
/* The source file (9722533-uhd_4096_1742_25fps.mp4) has a ~1-2px black
   encoding artifact right at its own top edge; object-fit:cover here scales
   to match the section's height exactly (video is proportionally wider than
   the box, so cover crops left/right, not top/bottom), so that artifact was
   showing through as a stray horizontal line under the header. Same fix as
   `.malik-sm-hero__visual video` (dots-11.mp4, same artifact, see above). */
.malik-sm-diagnosis .malik-video-bg { transform: scale(1.02); }

.malik-sm-diagnosis {
  position: relative;
  min-height: 802px; /* Figma 222:1412 "Group 123" frame height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--malik-white);
  text-align: center;
}
.malik-sm-diagnosis__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 0;
}
.malik-sm-diagnosis .malik-container { position: relative; z-index: 1; }
.malik-sm-diagnosis__heading {
  max-width: 630px;
  margin-inline: auto;
  text-align: center;
  color: var(--malik-black);
}

.malik-sm-diagnosis__dots {
  position: absolute;
  z-index: 1;
  inset: 0;
  bottom: clamp(1.5rem, 2.9167vw, 42px); /* Figma 222:1414 row sits 42px above the section's bottom edge at 1440 */
  pointer-events: none;
}
.malik-sm-diagnosis__dot {
  position: absolute;
  bottom: clamp(1.5rem, 2.9167vw, 42px); /* Figma 222:1414 row sits 42px above the section's bottom edge at 1440 */
  width: 18px;
  height: 18px;
  border-radius: 4.65px;
  background: var(--malik-white);
}
/* Figma "Group 83" (222:1414), 7 shapes at these x/1440 percentages; the
   two middle ones (Ellipse 184/185) are circles, the rest rounded squares. */
.malik-sm-diagnosis__dot:nth-child(1) { left: 5.56%; }
.malik-sm-diagnosis__dot:nth-child(2) { left: 16.74%; }
.malik-sm-diagnosis__dot:nth-child(3) { left: 17.99%; border-radius: 50%; }
.malik-sm-diagnosis__dot:nth-child(4) { left: 20.625%; border-radius: 50%; }
.malik-sm-diagnosis__dot:nth-child(5) { left: 58.19%; }
.malik-sm-diagnosis__dot:nth-child(6) { left: 80.76%; }
.malik-sm-diagnosis__dot:nth-child(7) { left: 93.19%; }

/* ── CONTEXT ──────────────────────────────────────────────────── */
/* Figma: diagnosis-video-bottom → contextCentered gap is 100px (top, same
   full-bleed-neighbor pattern as narrative/insights above). The
   context→cta gap (250px total) isn't attributable to a single full-bleed
   edge the way the others are, so it's split as bottom:100 (matching this
   section's own top) / cta top:150 (remainder) — a reasonable interpolation
   rather than a directly-measured Figma boundary. */
.malik-sm-context {
  padding-top: clamp(2.5rem, 6.9444vw, 100px);
  padding-bottom: clamp(2.5rem, 6.9444vw, 100px);
}

/* ── CTA (heading left, body right) ──────────────────────────── */
/* Figma: ctaBody bottom → footer top is a clean 250px (footer is
   full-bleed, so this whole gap is this section's own bottom padding). */
.malik-sm-cta {
  padding-top: clamp(2.5rem, 10.4167vw, 150px);
  padding-bottom: clamp(3rem, 17.3611vw, 250px);
}
.malik-sm-cta__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 20px; /* Figma: heading right edge x=927, body left edge x=947 — a 20px column-gap, not 3rem */
}
.malik-sm-cta__heading { max-width: 847px; flex: 1 1 480px; } /* Figma 222:1451: 847×118 (2 lines) */
.malik-sm-cta__body {
  font-family: var(--malik-font-ubuntu);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 22px;
  color: var(--malik-black);
  max-width: 413px;
  flex: 1 1 320px;
}
.malik-sm-cta__body p { margin: 0; }
.malik-sm-cta__body p + p { margin-top: 22px; } /* Figma: blank-line gap between the two paragraphs */

/* ── Shared responsive tweaks ─────────────────────────────────── */
@media (max-width: 900px) {
  .malik-sm-hero__head { flex-direction: column; }
  .malik-sm-hero__head-left,
  .malik-sm-hero__head-right { max-width: none; }
  .malik-sm-cta__inner { flex-direction: column; }
}
@media (max-width: 480px) {
  .malik-sm-body { max-width: none; }
}