/* Section 8 ("work" — recent work / case studies). The intro (below) is a
   plain reveal, same as services.css's. Everything after it is now ONE
   pinned block (.work-pin, like .wipe-panel/.values-panel in hero.css) —
   NOT one sticky element per case study. Moving from case study to case
   study is a pure in-place crossfade (opacity/blur only, nothing slides
   vertically), and the client mark cluster on the side reshuffles like a
   stack of cards: the active client's mark comes to the front, the other
   two recede behind it. See js/modules/work-stories.js for all the timing —
   this file only defines the resting geometry (front/mid/back slots) and
   lets JS toggle which client mark sits in which slot. */

.work-section {
  position: relative;
  /* So the nav's #work jump (see main.js's generic scrollIntoView handler)
     settles below the fixed .site-header instead of tucking the section's
     own top edge — and its heading with it — behind it. */
  scroll-margin-top: 90px;
  background: var(--color-surface);
}

.work-intro {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.work-mask {
  overflow: hidden;
}

.work-heading,
.work-subheading {
  transform: translateY(100%);
  will-change: transform;
}

.work-heading {
  margin-top: clamp(16px, 3vh, 40px);
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: clamp(32px, 5.6vw, 66px);
  line-height: 1.15;
  color: var(--color-ink);
}

.work-subheading {
  margin-top: 16px;
  font-family: var(--font-ar-secondary);
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 22px);
  color: var(--color-ink-muted);
}

/* Client logo wall — fills the open space below the intro subheading.
   Reveals as a staggered grid each time it scrolls into view, and hides
   again on the way out (see initLogoWall() in work-stories.js, a plain
   IntersectionObserver — this doesn't need the pinned-scroll math the rest
   of the file uses), then each tile gets its own punchy hover: lift, pop,
   and un-desaturate. */
.work-logos {
  width: 100%;
  max-width: 1240px;
  margin-top: clamp(48px, 8vh, 88px);
}

.work-logos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

.work-logo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid rgba(26, 26, 26, 0.08);
  box-shadow: 0 6px 16px -10px rgba(20, 16, 40, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.88);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease,
    box-shadow 0.35s ease, border-color 0.35s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}

.work-logos.is-visible .work-logo-tile {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0.25) opacity(0.85);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.work-logo-tile:hover {
  transform: translateY(-10px) scale(1.08);
  box-shadow: 0 26px 44px -18px rgba(107, 79, 160, 0.35);
  border-color: color-mix(in srgb, var(--color-logo-purple) 45%, transparent);
  z-index: 2;
}

.work-logo-tile:hover img {
  transform: scale(1.14) rotate(-3deg);
  filter: grayscale(0) opacity(1);
}

@media (max-width: 900px) {
  .work-logos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  .work-logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The pin: one continuous scroll range split into 3 equal thirds, one per
   case study. Each third used to itself split into 3 beats (challenge ->
   action -> result) at 150vh/company — now that all 3 beats render
   together (see .work-beats above) there's nothing left to page through
   within a company, only the crossfade TO the next one, so 100vh/company
   is plenty (down from 450vh total). Nothing here ever moves the pin
   itself — only the slide crossfade and the mark-stack respond to scroll. */
.work-pin-outer {
  position: relative;
  height: 300vh;
}

.work-pin {
  position: sticky;
  top: 0;
  /* svh instead of plain vh — see the identical comment on .hero-pin in
     hero.css for why (mobile address-bar resize mid-scroll). */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--color-surface);
}

.work-pin-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.work-pin-glow::before {
  content: '';
  position: absolute;
  inset-inline-start: -8%;
  top: 50%;
  width: clamp(360px, 42vw, 680px);
  height: clamp(360px, 42vw, 680px);
  transform: translateY(-50%);
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.2;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  transition: background 0.7s ease;
  animation: work-glow-drift 24s ease-in-out infinite;
}

@keyframes work-glow-drift {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-46%) scale(1.12); }
}

.work-pin-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 100px);
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Client mark cluster (logo placeholder, "playing card" stack) --- */

.work-marks {
  /* Visually placed AFTER .work-slides (order: 2) even though it's first in
     the DOM (kept there so the decorative, aria-hidden marks don't get
     read before the actual case-study content) — this puts the text
     column at the inline-start side (right in Arabic, left in English)
     so it lands at the true edge of the page, not stuck in the middle. */
  order: 2;
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 370px);
  height: clamp(220px, 26vw, 370px);
  margin-inline-end: clamp(16px, 3vw, 40px);
}

.work-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: 62%;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--mark-accent-a), var(--mark-accent-b));
  box-shadow: 0 24px 50px -18px rgba(20, 16, 40, 0.35);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}

/* Real client logo, upright inside the rotated diamond — each logo file's
   own background (see the --mark-accent overrides below) is picked to
   match so there's no visible seam between the image and the diamond. */
.work-mark-logo {
  width: 74%;
  height: 74%;
  object-fit: contain;
  transform: rotate(-45deg);
}

.work-mark.is-front {
  transform: rotate(45deg) translate(0, 0) scale(1);
  z-index: 3;
  opacity: 1;
}

.work-mark.is-mid {
  transform: rotate(45deg) translate(-22%, -34%) scale(0.62);
  z-index: 2;
  opacity: 0.88;
}

.work-mark.is-back {
  transform: rotate(45deg) translate(20%, 36%) scale(0.5);
  z-index: 1;
  opacity: 0.6;
}

/* Two extra diamonds that never move and never swap — pure background
   filler so the cluster reads as a fuller pile (like the reference's
   photo wall) instead of just the 3 client marks that actually shuffle.
   No data-mark attribute, so js/modules/work-stories.js's selector
   (.work-mark[data-mark]) skips them entirely. */
.work-mark-static {
  z-index: 0;
  opacity: 0.4;
  background: linear-gradient(150deg, #d8d3e6, #b9b2cf);
  transition: none;
}

.work-mark-static.is-slot-a {
  /* Off the 45deg grid on purpose (35deg, not 45deg) — an irregular pile,
     not a neat grid. Sits in the gap the mid/back marks (upper-left and
     lower-right) DON'T cover, so it peeks out from behind and between them
     instead of hiding fully under the front mark or floating off on its
     own away from the whole pile. */
  transform: rotate(35deg) translate(-42%, 28%) scale(0.36);
}

.work-mark-static.is-slot-b {
  transform: rotate(54deg) translate(40%, -34%) scale(0.34);
}

/* --- Text column (title, story beats, stats) --- */

.work-slides {
  order: 1;
  position: relative;
  flex: 1 1 560px;
  min-width: 0;
  max-width: 620px;
  /* Taller than before: all 3 beats render together now (see .work-beats
     above) instead of one at a time, so .work-slide (position: absolute,
     doesn't contribute to this height on its own) needs more room to
     avoid clipping the longest variant. */
  min-height: clamp(560px, 78vh, 780px);
}

.work-slide {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  padding-top: clamp(104px, 15vh, 140px);
  opacity: 0;
  will-change: opacity, filter;
}

/* The client name sits flush at the true outer edge (no indent); the
   story below it (title, beats, stats) is indented in from THAT edge, so
   the name pokes out a bit further than everything under it instead of
   lining up with it. top: 0 used to mean literally the pin's own top edge
   — right where the fixed .site-header sits — so the name was rendering
   hidden behind/under it instead of visible above the title. */
.work-slide-client {
  position: absolute;
  top: clamp(64px, 9vh, 90px);
  inset-inline-start: 0;
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 32px);
  color: var(--accent);
  text-align: start;
}

.work-slide-body {
  padding-inline-start: clamp(18px, 3.2vw, 40px);
}

.work-card-title {
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.25;
  color: var(--color-ink);
}

/* All 3 beats (challenge/action/result) render together now — one settled
   read of the whole case study instead of a sequential scroll-triggered
   reveal per beat (that was the actual complaint: 3 separate scroll beats
   per company, times 3 companies, felt long). Only the SLIDE itself still
   fades in/out (see updatePin() in work-stories.js) as the user scrolls
   between companies — everything inside it now appears together, laid out
   as a numbered timeline for a settled, professional case-study read. */
.work-beats {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 24px);
  margin-top: clamp(22px, 3.6vh, 36px);
}

.work-beat {
  position: relative;
  display: flex;
  gap: 14px;
}

.work-beat-index {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: var(--accent);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  direction: ltr;
}

/* The connecting timeline line — one per beat, skipped on the last since
   there's nothing below it to connect to. */
.work-beat:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  inset-inline-start: 13px;
  width: 1px;
  height: calc(100% - 14px);
  background: rgba(26, 26, 26, 0.12);
}

.work-beat-content {
  flex: 1 1 auto;
  min-width: 0;
  /* Nudges the label/text down to sit centered against the 28px index
     circle beside it instead of flush with its top edge. */
  padding-top: 3px;
}

.work-beat-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: var(--accent);
  font-family: var(--font-ar-secondary);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
}

.work-beat-text {
  margin-top: 10px;
  font-family: var(--font-ar);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.75;
  color: var(--color-ink);
  max-width: 560px;
}

.work-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 36px);
  margin-top: 20px;
}

.work-stat-number {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--accent);
  line-height: 1;
  direction: ltr;
}

.work-stat-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-ar);
  font-size: clamp(12.5px, 1.05vw, 14px);
  color: var(--color-ink-muted);
  max-width: 160px;
}

.work-slide[data-slide="0"] { --accent: var(--color-logo-navy); }
.work-slide[data-slide="1"] { --accent: var(--color-logo-purple); }
.work-slide[data-slide="2"] { --accent: var(--color-logo-teal); }

/* 90min's own logo file already sits on a navy square, so this diamond
   stays navy too — matched to the jpeg's exact navy (#081058) so there's
   no seam between the image and its diamond. Travel Maker and Homy's logo
   files sit on white, so their diamonds are white instead of the old
   purple/teal fill. */
.work-mark[data-mark="0"] { --mark-accent-a: #081058; --mark-accent-b: #081058; }
.work-mark[data-mark="1"] { --mark-accent-a: #ffffff; --mark-accent-b: #ffffff; }
.work-mark[data-mark="2"] { --mark-accent-a: #ffffff; --mark-accent-b: #ffffff; }

/* Travel Maker's logo file has a lot of empty white margin baked in, so at
   the shared 74% size it reads tiny inside its diamond. Its background is
   the same white as the diamond, so scaling the image up (and letting the
   diamond's overflow: hidden crop the excess white) is a seamless zoom. */
.work-mark[data-mark="1"] .work-mark-logo {
  transform: rotate(-45deg) scale(1.9);
}

@media (max-width: 900px) {
  .work-pin-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
  }

  /* All 3 beats now render together (see .work-beats) instead of one at a
     time — text sizing/line-height/gaps below come down a notch from their
     desktop values so the longest case study's action paragraph (5-6
     lines) still fits .work-slides' own height. Sizes/dimensions here
     (.work-marks, .work-slides) are deliberately left alone per the user —
     only vertical POSITIONING (padding-top, top, margin-top) is tuned. */
  .work-marks {
    align-self: center;
    margin-top: -120px;
    width: clamp(160px, 42vw, 220px);
    height: clamp(160px, 42vw, 220px);
    flex: 0 0 auto;
  }

  .work-slides {
    width: 100%;
    max-width: 100%;
    min-height: clamp(500px, 82vh, 680px);
  }

  .work-slide {
    /* Was clamp(56px, 8vh, 76px) — tight enough that the client name/title
       actually rendered under the fixed .site-header instead of below it. */
    padding-top: clamp(108px, 15vh, 134px);
  }

  .work-slide-client {
    top: clamp(64px, 9vh, 80px);
    font-size: clamp(15px, 4vw, 18px);
  }

  .work-slide-body {
    padding-inline-start: 14px;
  }

  .work-card-title {
    font-size: clamp(19px, 5.2vw, 25px);
  }

  .work-beats {
    gap: 10px;
    margin-top: 14px;
  }

  .work-beat-index {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .work-beat:not(:last-child)::after {
    top: 22px;
    inset-inline-start: 10px;
  }

  .work-beat-label {
    padding: 3px 10px;
    font-size: 11px;
  }

  .work-beat-text {
    margin-top: 6px;
    font-size: clamp(12.5px, 3.4vw, 14px);
    line-height: 1.55;
  }

  .work-stats {
    gap: 14px;
    margin-top: 12px;
  }

  .work-stat-number {
    font-size: clamp(22px, 6vw, 28px);
  }

  .work-stat-label {
    margin-top: 4px;
    font-size: 11.5px;
  }
}

/* ---------------------------------------------------------------------
   Phones / small tablets: pinned case-study layout, rebuilt.
   The old version absolutely positioned each slide inside a fixed-height
   box and dragged the logo cluster up into it with a hard-coded negative
   margin — that only lined up for one particular text length + screen
   height, so on other phones (shorter screens, longer English copy) the
   logos landed on top of the stats and the text ran under the header or
   off the bottom. Now:
   - slides are stacked in one grid cell, so the box is exactly as tall as
     the tallest case study, and text simply flows (client, title, beats,
     stats) with no absolute offsets;
   - the logo cluster lives in its own reserved top corner, and the title +
     first beat are pushed clear of it;
   - work-stories.js scales the whole block down (--work-fit) whenever it
     is still taller than the screen, so it always fits, whatever the
     language or device.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .work-pin {
    align-items: flex-start;
    box-sizing: border-box;
    padding-top: 68px;
  }

  .work-pin-row {
    --mk: clamp(88px, 12vw, 130px);
    display: block;
    flex: none;
    max-width: none;
    /* auto block margins centre it when there is spare height (tall tablets)
       and collapse to top-aligned when it is already full-height (phones). */
    margin-block: auto;
    transform-origin: top center;
    transform: scale(var(--work-fit, 1));
    width: calc(100% / var(--work-fit, 1));
    margin-inline: calc((1 - 1 / var(--work-fit, 1)) * 50%);
  }

  .work-slides {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  .work-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    padding-top: 0;
  }

  .work-slide-client {
    position: static;
    display: block;
    margin-bottom: 4px;
  }

  .work-card-title {
    padding-inline-end: calc(var(--mk) + 14px);
  }

  .work-beats {
    margin-top: max(22px, calc(var(--mk) - 60px));
  }

  .work-marks {
    position: absolute;
    top: 0;
    inset-inline-end: 24px;
    order: 0;
    align-self: auto;
    width: var(--mk);
    height: var(--mk);
    margin: 0;
    z-index: 2;
  }
}

/* Landscape phones: two columns (text | logos) instead of stacking — far
   fewer wrapped lines, so it fits the very short screen. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
  .work-pin {
    padding-top: 60px;
  }

  .work-pin-row {
    --mk: clamp(110px, 32vh, 160px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  .work-slides {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .work-card-title {
    padding-inline-end: 0;
  }

  .work-beats {
    margin-top: 12px;
  }

  .work-marks {
    position: relative;
    inset-inline-end: auto;
    order: 2;
    flex: 0 0 auto;
    align-self: center;
    margin-inline-end: 12px;
  }
}