/* ============================================================================
   Use Cases — the list (use-cases.html) and the case study pages
   (use-case-*.html), generated by figma-export/gen-cases.js.
   Built on services.css: the same head, card, banner, points and outro as the
   service pages, with ds.css tokens throughout. What is added here: the
   featured pair, the category filter and groups, the coming-soon card, the
   SAJA laptop, and the case study chapters.
   ============================================================================ */

.cs-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---- the list's head: copy, and three projects fanned out --------------- */
.cs-hero .phero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.cs-hero .h1{ max-width:14ch }
.cs-stack{ position:relative; aspect-ratio:1.5/1 }
.cs-stack > *{
  position:absolute; display:block; border-radius:var(--r-md);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.25);
}
/* height:auto, or the height attribute wins over aspect-ratio */
.cs-stack > img{ height:auto; object-fit:cover; background:#fff }
.cs-stack__a{ left:0; top:4%; width:58%; aspect-ratio:16/9; transform:rotate(-4deg) }
.cs-stack__b{ right:0; top:0; width:56%; aspect-ratio:16/9; transform:rotate(3deg) }
.cs-stack__c{ left:18%; bottom:0; width:66%; box-shadow:none; filter:drop-shadow(0 24px 26px rgba(0,0,0,.45)) }
@media (max-width:900px){
  .cs-hero .phero__in{ grid-template-columns:1fr }
  .cs-stack{ max-width:560px }
}

/* ---- a laptop: the SAJA stages' machine, with a screen in its display --- */
.cs-lap{ position:relative; display:block; aspect-ratio:1896 / 1151 }
.cs-lap__screen{ position:absolute; left:10.127%; top:2.433%; width:79.747%; height:85.317%; overflow:hidden; background:#fff }
.cs-lap__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
.cs-lap__frame{ position:absolute; inset:0; width:100%; height:100% }

/* ---- card media -------------------------------------------------------- */
/* the tag stays above a laptop that rises into the corner */
.cs-media .svc-card__tag{ z-index:3 }
.svc-card__media img.is-contain{ object-fit:contain; padding:6% 5% }
/* a laptop (or two) standing in the card's picture */
.cs-media--lap{ display:grid; place-items:center }
.cs-laps{ position:relative; display:block; width:82%; transition:transform 1.1s var(--ease-out) }
.cs-laps .cs-lap{ filter:drop-shadow(0 14px 16px rgba(10,16,32,.28)) }
.cs-laps .cs-lap--back{ position:absolute; width:74%; right:-8%; top:-12%; opacity:.96 }
.cs-laps .cs-lap--front{ position:relative; width:80%; left:-6%; top:8%; z-index:1 }
.svc-card:hover .cs-laps{ transform:translateY(-3%) scale(1.03) }
/* the media box rules in services.css scale any img; the laptop's own
   images stay put and the laptop moves as one */
.svc-card:hover .cs-laps img{ transform:none }
.cs-laps img{ transform:none; transition:none }

/* coming soon: the client's name set large, on the card's own ground */
.cs-mono{
  position:absolute; inset:0; display:grid; place-items:center; padding:0 8%;
  font:600 clamp(26px,3vw,40px)/1 var(--font-display); letter-spacing:-.02em; text-align:center;
  color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--c-accent) 55%,transparent);
}
.cs-card--soon{ cursor:default }
.cs-card--soon .svc-card__tag{ color:var(--ink-muted-80) }
.cs-card--soon:hover{ border-color:var(--hairline); box-shadow:none }
.cs-card--soon:hover::after{ opacity:0 }

.cs-client{
  margin:0; font:var(--t-caption-strong); letter-spacing:var(--track-caption); color:var(--c-accent-text);
}
.cs-client span{ font-weight:400; color:var(--ink-muted-48) }
/* the client's logo, and the type of work beside it */
.cs-client{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.cs-client .cs-logo{ display:inline-flex; align-items:center; height:26px }
.cs-client .cs-logo img{ height:100%; width:auto; max-width:120px; object-fit:contain }
.cs-client .cs-logo--word{ font:700 15px/1 var(--font-display); letter-spacing:-.01em; color:var(--ink) }
.cs-client .cs-type{ font:600 11px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-accent-text,var(--c-accent)); padding:7px 10px; border-radius:99px;
  background:color-mix(in srgb,var(--c-accent) 9%,transparent) }

/* ---- featured: two large cards ------------------------------------------- */
.cs-feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--s-xl) }
.cs-feature .svc-card__media{ aspect-ratio:16/10 }
.cs-feature .svc-card__body{ padding:var(--s-xl) }
.cs-feature h3{ font:var(--t-display-md); letter-spacing:var(--track-md) }
.cs-facts{ list-style:none; margin:var(--s-sm) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.cs-facts li{
  font:600 12.5px/1 var(--font-text); padding:8px 12px; border-radius:var(--r-pill);
  color:var(--c-accent-text); background:color-mix(in srgb,var(--c-accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--c-accent) 20%,transparent);
}
.cs-feature .svc-card__more{ margin-top:var(--s-md) }
@media (max-width:860px){ .cs-feature-grid{ grid-template-columns:1fr } }

/* ---- every use case: the filter, then one group per category ------------ */
.cs-all__head{ display:flex; justify-content:space-between; align-items:end; gap:var(--s-lg); flex-wrap:wrap }
.cs-filter{ margin:var(--s-xl) 0 0 }
/* a plain row of tabs: the names, their counts, a line under the chosen one */
.cs-filter ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px clamp(18px,2.2vw,32px);
  border-bottom:1px solid var(--hairline);
}
.cs-chip{
  display:flex; align-items:baseline; gap:6px; white-space:nowrap; cursor:pointer;
  font:500 15px/1 var(--font-text); color:var(--ink-muted-80);
  background:none; border:0; border-radius:0; padding:14px 0 13px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cs-chip small{ font:500 12px/1 var(--font-text); color:var(--ink-muted-48); background:none; padding:0 }
.cs-chip:hover{ color:var(--ink) }
.cs-chip[aria-pressed="true"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--c-accent) }
.cs-chip[aria-pressed="true"] small{ color:var(--c-accent-text) }
.cs-chip:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
.cs-status{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

.cs-group{ margin-top:clamp(48px,6vw,80px); scroll-margin-top:calc(var(--nav-h) + 90px) }
.cs-group[hidden]{ display:none }
.cs-group__head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end;
  column-gap:clamp(16px,2.4vw,32px); padding-bottom:var(--s-md); border-bottom:1px solid var(--hairline);
}
.cs-group__n{
  font:600 clamp(44px,5vw,72px)/.8 var(--font-display); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.3px color-mix(in srgb,var(--c-accent) 60%,transparent);
  font-variant-numeric:tabular-nums;
}
.cs-group__head .h2{ margin:0 }
.cs-group__head p{ margin:var(--s-xs) 0 0; font:var(--t-body); color:var(--ink-muted-80); max-width:60ch }
.cs-group__count{ font:var(--t-caption-strong); color:var(--ink-muted-48); white-space:nowrap }
.cs-grid{ margin-top:var(--s-xl) }
@media (max-width:620px){
  .cs-group__head{ grid-template-columns:1fr }
  .cs-group__n{ margin-bottom:var(--s-sm) }
  .cs-group__count{ margin-top:var(--s-xs) }
}

/* ---- a case study page ------------------------------------------------------ */
.cs-idx{ margin-right:var(--s-xs); color:var(--ink-muted-48); font-variant-numeric:tabular-nums }
.cs-story .h2{ max-width:22ch }
.cs-story__body{ margin:var(--s-md) 0 0; font:var(--t-lead-airy); color:var(--ink-muted-80); max-width:62ch }
.cs-points{
  list-style:none; margin:var(--s-xxl) 0 0; padding:0; counter-reset:pt;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
}
.cs-points li{
  counter-increment:pt; display:flex; align-items:center; gap:12px;
  padding:16px 18px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-md);
  font:var(--t-body-strong); letter-spacing:var(--track-body);
  transition:transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease);
}
.cs-points li::before{
  content:counter(pt, decimal-leading-zero); flex:none;
  font:600 12px/1 var(--font-text); letter-spacing:.08em; color:var(--c-accent-text);
  padding:6px 8px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--c-accent) 9%,#fff);
}
.cs-points li:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--c-accent) 32%,transparent) }
.cs-figure img{ background:#fff; border:1px solid var(--hairline) }
.cs-out{ margin-top:var(--s-xl) }
.cs-out svg{ width:14px; height:14px; margin-left:6px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* the result beside a phone, when the case has one */
.cs-result--phone{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,80px); align-items:center }
.cs-phone{ margin:0; width:clamp(200px,20vw,260px) }
.cs-phone img{
  display:block; width:100%; height:auto; border-radius:34px;
  border:8px solid #1D1F24; box-shadow:0 40px 70px -40px rgba(10,16,32,.55);
}
@media (max-width:760px){
  .cs-result--phone{ grid-template-columns:1fr }
  .cs-phone{ justify-self:center }
}

.cs-stats{
  display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); margin:var(--s-xxl) 0 0; padding:0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.cs-stats div{ padding:var(--s-lg) var(--s-lg) var(--s-lg) 0 }
.cs-stats div + div{ padding-left:var(--s-lg); border-left:1px solid var(--hairline) }
.cs-stats dt{ font:600 clamp(36px,4.4vw,56px)/1 var(--font-display); letter-spacing:-.03em; color:var(--c-accent-text) }
.cs-stats dd{ margin:var(--s-xs) 0 0; font:var(--t-caption); color:var(--ink-muted-80) }
@media (max-width:760px){
  .cs-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cs-stats div:nth-child(3){ padding-left:0; border-left:0 }
  .cs-stats div:nth-child(n+3){ border-top:1px solid var(--hairline) }
}

@media (prefers-reduced-motion:reduce){
  .cs-laps, .cs-points li{ transition:none }
  .svc-card:hover .cs-laps, .cs-points li:hover{ transform:none }
}

/* ============================================================================
   One client, one flow (use-case-menarini.html). The page stands on the SAJA
   case study's stylesheet (usecases.css: head, facts, section nav, the scale,
   numbered platform heads, pills); these are the pieces it adds.
   ============================================================================ */

/* ---- the head: three projects fanned, each on a white plate -------------- */
.mn-fan{ position:relative; aspect-ratio:1.4/1 }
.mn-fan > figure{
  position:absolute; margin:0; background:#fff; border-radius:var(--r-md); padding:1.4%;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.25);
}
/* height:auto, or the height attribute wins */
.mn-fan img{ display:block; width:100%; height:auto; border-radius:calc(var(--r-md) - 4px) }
.mn-fan__a{ left:0; top:4%; width:58%; padding:0; transform:rotate(-4deg) }
.mn-fan__a img{ border-radius:var(--r-md) }
.mn-fan__b{ right:0; top:0; width:44%; transform:rotate(3.5deg) }
.mn-fan__c{ left:20%; bottom:0; width:60%; z-index:2 }
@media (max-width:900px){ .mn-fan{ max-width:560px } }

/* ---- at a glance: the projects as a numbered index, not cards ------------ */
.mn-index{ list-style:none; margin:clamp(28px,3vw,40px) 0 0; padding:0; border-top:1px solid var(--hairline) }
.mn-index a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto 20px; align-items:center;
  column-gap:clamp(14px,2.4vw,32px); padding:18px 4px;
  border-bottom:1px solid var(--hairline); text-decoration:none; color:var(--ink);
  transition:background var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
}
.mn-index a:hover{ background:color-mix(in srgb,var(--c-accent) 5%,#fff); padding-inline:14px }
.mn-index a:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
.mn-index__n{
  font:600 clamp(26px,2.6vw,36px)/1 var(--font-display); letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--c-accent) 60%,transparent);
  font-variant-numeric:tabular-nums;
}
.mn-index__t{ font:var(--t-tagline); letter-spacing:.1px }
.mn-index__k{ font:var(--t-caption); color:var(--ink-muted-48); text-align:right }
.mn-index svg{ width:18px; height:18px; fill:none; stroke:var(--c-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
               transition:transform var(--dur-2) var(--ease) }
.mn-index a:hover svg{ transform:translateX(4px) }
@media (max-width:620px){
  .mn-index a{ grid-template-columns:auto minmax(0,1fr) 20px }
  .mn-index__k{ grid-column:2; grid-row:2; text-align:left; margin-top:4px }
  .mn-index svg{ grid-column:3; grid-row:1 / span 2 }
}

/* ---- a project: the lead picture on a white plate ------------------------- */
.mn-lead{
  margin:clamp(28px,3.4vw,48px) 0 0; background:#fff; border-radius:var(--r-lg);
  padding:clamp(12px,2vw,28px); border:1px solid var(--hairline);
  box-shadow:0 40px 80px -50px rgba(10,16,32,.4);
}
.mn-lead img{ display:block; width:100%; height:auto; border-radius:var(--r-sm) }

/* the screens, feature by feature: two wide, then three */
.mn-gallery{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(18px,2vw,28px);
}
.mn-shot{
  grid-column:span 2; margin:0; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
}
.mn-shot--wide{ grid-column:span 3 }
.mn-shot img, .mn-shot video{ display:block; width:100%; height:auto; background:#fff }
/* each row shares one frame shape, so the captions line up: the screens sit
   whole on white, the clip fills its frame (its sides are empty screen) */
.mn-shot > img{ aspect-ratio:1.36; object-fit:contain }
.mn-shot--wide > img, .mn-shot--wide .mn-loop{ aspect-ratio:1.5 }
.mn-loop video{ width:100%; height:100%; object-fit:cover }
.mn-shot figcaption{
  display:flex; flex-direction:column; gap:4px; margin-top:auto;
  padding:14px 18px 16px; border-top:1px solid var(--hairline);
  font:var(--t-caption); color:var(--ink-muted-80);
}
.mn-shot figcaption b{ font:var(--t-caption-strong); color:var(--c-accent-text) }
@media (max-width:900px){ .mn-shot, .mn-shot--wide{ grid-column:span 3 } }
@media (max-width:620px){ .mn-shot, .mn-shot--wide{ grid-column:1 / -1 } }

/* the short loop, and the control that stops it */
.mn-loop{ position:relative }
.mn-loop__btn{
  position:absolute; right:12px; bottom:12px;
  font:var(--t-caption-strong); color:#fff; cursor:pointer;
  background:rgba(10,16,32,.62); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:7px 12px;
}
.mn-loop__btn:hover{ background:rgba(10,16,32,.8) }
.mn-loop__btn:focus-visible{ outline:2px solid var(--c-accent-on-dark); outline-offset:2px }

/* challenge, approach and result, side by side */
.mn-story{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
  margin-top:clamp(32px,4vw,56px); padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--hairline);
}
.mn-story h3{ margin:var(--s-xs) 0 0; font:var(--t-tagline); letter-spacing:.1px }
.mn-story p:not(.eyebrow){ margin:var(--s-sm) 0 0; font:var(--t-body); letter-spacing:var(--track-body); color:var(--ink-muted-80) }
@media (max-width:900px){ .mn-story{ grid-template-columns:1fr } }
.uc-plat .cs-stats{ margin-top:clamp(28px,3.4vw,44px) }

/* a project still to come: its place kept */
.mn-soon{
  margin-top:clamp(28px,3.4vw,48px); padding:clamp(40px,6vw,80px) var(--s-lg);
  border:1.5px dashed color-mix(in srgb,var(--c-accent) 30%,var(--hairline)); border-radius:var(--r-lg);
  text-align:center; display:grid; justify-items:center; gap:var(--s-sm);
  background:color-mix(in srgb,var(--c-accent) 3%,transparent);
}
.mn-soon svg{ width:44px; height:44px; fill:none; stroke:var(--c-accent); stroke-width:1.5;
              stroke-linecap:round; stroke-linejoin:round; opacity:.8 }
.mn-soon h3{ font:var(--t-tagline); margin:0 }
.mn-soon p{ font:var(--t-body); color:var(--ink-muted-48); margin:0; max-width:44ch }

@media (prefers-reduced-motion:reduce){
  .mn-index a, .mn-index svg{ transition:none }
  .mn-index a:hover svg{ transform:none }
}

/* ---- a tall screen (an email, a long page), framed ------------------------
   The frame shows the top; hovering or focusing it scrolls through the whole
   page, taking longer the longer it is (--pan), and it opens full size. On
   touch, and under reduced motion, it stays at the top and still opens. */
.mn-scroll{
  position:relative; display:block; aspect-ratio:var(--ar, 3 / 4); overflow:hidden;
  container-type:size; background:#fff; color:inherit;
}
.mn-scroll img{
  display:block; width:100%; height:auto;
  transition:transform var(--pan, 5s) cubic-bezier(.45,0,.55,1);
}
.mn-scroll:focus-visible{ outline:3px solid var(--c-accent); outline-offset:-3px }
.mn-scroll__hint{
  position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:6px;
  font:var(--t-caption-strong); color:#fff; padding:6px 11px; border-radius:var(--r-pill);
  background:rgba(10,16,32,.62); transition:opacity var(--dur-2) var(--ease);
}
.mn-scroll__hint::after{
  content:''; width:8px; height:8px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mn-scroll:hover img, .mn-scroll:focus-visible img{ transform:translateY(calc(-100% + 100cqh)) }
  .mn-scroll:hover .mn-scroll__hint, .mn-scroll:focus-visible .mn-scroll__hint{ opacity:0 }
}
@media (hover:none), (prefers-reduced-motion:reduce){ .mn-scroll__hint{ display:none } }

/* ---- a case page: a smaller picture beside the challenge ---------------- */
.cs-figure--small{ max-width:560px }
.cs-figure--small figcaption{ margin-top:var(--s-sm); font:var(--t-caption); color:var(--ink-muted-48) }

/* ---- the cover: the work itself, running past ------------------------------
   A headline and three numbers over the brand navy, then two rows of the
   projects drifting in opposite directions on a slight tilt, each carrying
   its client's mark. The rows pause under the pointer so a tile can be read. */
.cs-cover{
  position:relative; overflow:hidden; color:var(--on-dark);
  padding:calc(var(--nav-h) + clamp(40px,6vh,72px)) 0 clamp(60px,8vh,100px);
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(19,174,219,.28) 0%, transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(47,107,255,.25) 0%, transparent 60%),
    linear-gradient(160deg,#14307A 0%,#1B3A8C 45%,#10265F 100%);
}
.cs-cover__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad-x);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-xl) clamp(32px,6vw,96px); align-items:end;
}
.cs-cover .eyebrow{ color:var(--c-accent-on-dark,#8FD8F5) }
.cs-cover .h1{ color:#fff; font-size:clamp(38px,4.6vw,68px); line-height:1.02; letter-spacing:-.035em; max-width:15ch; margin:0 }
.cs-cover .lede{ color:#C6D2EC; max-width:48ch; margin:var(--s-lg) 0 0 }
.cs-cover__stats{ display:flex; gap:clamp(22px,3vw,44px); margin:0 }
.cs-cover__stats div{ display:grid; gap:6px }
.cs-cover__stats dt{ font:700 clamp(40px,4.6vw,68px)/.9 var(--font-display); letter-spacing:-.04em; color:#fff }
.cs-cover__stats dd{ margin:0; font:600 11px/1 var(--font-text); letter-spacing:.16em; text-transform:uppercase; color:#8FD8F5 }

.cs-reel{
  margin-top:clamp(40px,5vw,72px); display:grid; gap:clamp(12px,1.4vw,20px);
  transform:rotate(-3.5deg) scale(1.08); transform-origin:50% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cs-reel__track{ display:flex; gap:clamp(12px,1.4vw,20px); width:max-content; padding-right:clamp(12px,1.4vw,20px);
  animation:cs-reel 70s linear infinite; will-change:transform }
.cs-reel__row--rev .cs-reel__track{ animation-direction:reverse; animation-duration:80s }
.cs-reel:hover .cs-reel__track{ animation-play-state:paused }
@keyframes cs-reel{ to{ transform:translateX(-50%) } }
.cs-tile{
  position:relative; flex:none; display:block; width:clamp(230px,23vw,350px); aspect-ratio:16/10;
  border-radius:18px; overflow:hidden; background:#fff; color:#fff; text-decoration:none;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.cs-tile > img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform 1s cubic-bezier(.2,.8,.2,1) }
.cs-tile--contain{ background:linear-gradient(160deg,#F4F7FD,#DCE6F8) }
.cs-tile--contain > img{ object-fit:contain; padding:6% 8% 18% }
.cs-tile:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.2) }
.cs-tile:hover > img{ transform:scale(1.05) }
.cs-tile__cap{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px;
  padding:34px 14px 12px; background:linear-gradient(transparent, rgba(8,16,40,.82));
}
.cs-tile__cap .cs-logo{ flex:none; height:28px; padding:0 10px; border-radius:8px; background:#fff; display:grid; place-items:center;
  font:700 11px/1 var(--font-text); color:var(--ink) }
.cs-tile__cap .cs-logo img{ height:16px; width:auto; max-width:80px; object-fit:contain; display:block }
.cs-tile__cap b{ font:600 14px/1.2 var(--font-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (prefers-reduced-motion:reduce){ .cs-reel__track{ animation:none } }
@media (max-width:900px){
  .cs-cover__in{ grid-template-columns:1fr }
  .cs-cover__stats dt{ font-size:40px }
  .cs-tile{ width:220px }
}

/* the chatbot's avatar is a character, not a screen: small, on a soft ground */
.mn-lead--avatar{ display:grid; place-items:center; padding:clamp(24px,4vw,48px); border-radius:28px;
  background:radial-gradient(60% 70% at 50% 40%, #fff, transparent 70%), linear-gradient(160deg,#F4F7FD,#DCE6F8) }
.mn-lead--avatar img{ width:min(300px,60%); height:auto; box-shadow:none; border:0; background:none;
  filter:drop-shadow(0 26px 30px rgba(10,16,32,.22)); animation:mn-bob 3.6s ease-in-out infinite }
@keyframes mn-bob{ 50%{ transform:translateY(-10px) rotate(-2deg) } }
@media (prefers-reduced-motion:reduce){ .mn-lead--avatar img{ animation:none } }

/* two pictures side by side under a platform: the product and its system */
.uc-built{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-lg); margin-top:var(--s-xxl) }
.uc-built figure{ margin:0; border-radius:22px; overflow:hidden; background:#EEF1F6; box-shadow:0 30px 60px -36px rgba(10,16,32,.4) }
.uc-built img{ display:block; width:100%; height:100%; aspect-ratio:3/2; object-fit:cover }
@media (max-width:760px){ .uc-built{ grid-template-columns:1fr } }

/* a project shown by its client's mark, where there is no screen to show */
.cs-media--logo{ display:grid; place-items:center; background:linear-gradient(160deg,#F4F7FD,#DCE6F8) }
.cs-media--logo img{ width:auto !important; height:auto !important; max-width:52%; max-height:34%; object-fit:contain; position:static !important }

/* ---- from idea to implementation ------------------------------------------
   The paper sketch draws itself (a pencil runs along the line it leaves),
   the design settles over it, then the built screen opens out of the middle.
   The steps underneath follow along, and can be clicked to hold any stage. */
.sk{ margin:var(--s-xxl) 0 0 }
.sk__stage{
  position:relative; aspect-ratio:var(--ar,3/2); border-radius:22px; overflow:hidden;
  background:#FAF8F2; box-shadow:0 34px 70px -38px rgba(10,16,32,.45), 0 0 0 1px rgba(10,16,32,.06);
}
.sk__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.sk__mid, .sk__final{ clip-path:inset(0 100% 0 0) }
.sk__sketch{ clip-path:inset(0 100% 0 0); z-index:1 }
/* each stage opens over the one before it */
.sk__mid{ z-index:2 } .sk__final{ z-index:3; background:#EEF1F6 } .sk__pencil{ z-index:4 !important }
.sk__pencil{ position:absolute; left:0; top:0; width:clamp(34px,4vw,54px); z-index:3; pointer-events:none; opacity:0;
  transform:translate(-18%,-88%); filter:drop-shadow(0 8px 10px rgba(10,16,32,.3)) }
.sk__pencil svg{ display:block; width:100% }
.sk__steps{ list-style:none; margin:var(--s-md) 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.sk__steps button{
  display:flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--hairline); background:#fff;
  font:600 13px/1 var(--font-text); color:var(--ink-muted-80); padding:9px 14px; border-radius:var(--r-pill);
  transition:background .3s, color .3s, border-color .3s;
}
.sk__steps b{ font:700 11px/1 var(--font-text); color:var(--ink-muted-48) }
.sk__steps button.is-on{ background:var(--c-accent); border-color:var(--c-accent); color:#fff }
.sk__steps button.is-on b{ color:#8FD8F5 }
.sk figcaption{ margin-top:var(--s-sm); text-align:center; font:var(--t-caption); color:var(--ink-muted-48) }
@media (prefers-reduced-motion:reduce){ .sk__final{ clip-path:none } .sk__pencil{ display:none } }

/* ---- SAJA: the story, from the first sketch ------------------------------- */
.sj-steps{ list-style:none; margin:var(--s-xl) auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.sj-steps li{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--hairline); font:600 13px/1 var(--font-text); color:var(--ink) }
.sj-steps b{ font:700 11px/1 var(--font-text); color:var(--c-accent) }
.sj-ch{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 clamp(16px,2vw,32px);
  margin-top:clamp(56px,7vw,110px); padding-top:var(--s-xl); border-top:1px solid var(--hairline) }
.sj-ch > :not(.sj-ch__n){ grid-column:2 }
.sj-ch__n{ grid-row:1 / span 9; font:700 clamp(40px,4vw,64px)/.9 var(--font-display); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--c-accent) }
.sj-ch__txt h3{ margin:var(--s-xs) 0 0; font:600 clamp(24px,2.4vw,34px)/1.12 var(--font-display); letter-spacing:-.02em }
.sj-ch__txt > p:last-child, .sj-ch__txt > p:not(.eyebrow){ margin:var(--s-sm) 0 0; max-width:62ch; font:var(--t-body); color:var(--ink-muted-80) }
.sj-ch .sk{ margin-top:var(--s-xl) }
.sj-sketches{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-md); margin-top:var(--s-lg) }
.sj-sketches figure{ margin:0 }
.sj-sketches img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:14px;
  background:#FAF8F2; box-shadow:0 18px 36px -24px rgba(10,16,32,.4); transform:rotate(-1deg) }
.sj-sketches figure:nth-child(2) img{ transform:rotate(1.2deg) }
.sj-sketches figcaption, .sj-pair figcaption, .sj-film figcaption{ margin-top:10px; font:var(--t-caption); color:var(--ink-muted-48) }
.sj-sketches figcaption b{ display:block; color:var(--ink); font-weight:600 }
/* renders made on black: the black takes the brand blue instead */
.sj-frame{ margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--hairline); box-shadow:0 26px 60px -34px rgba(10,16,32,.3) }
.sj-frame img, .sj-frame video{ display:block; width:100%; height:auto }
.sj-frame .mn-loop{ border-radius:0 }
.sj-frame figcaption{ padding:10px 14px 12px; margin:0 !important; border-top:1px solid var(--hairline) }
.sj-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-md); margin-top:var(--s-xl) }
.sj-film{ margin-top:var(--s-md) }
.sj-film .mn-loop{ overflow:hidden }
.sj-ds{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-xl); margin-top:var(--s-xl); align-items:start }
.sj-sw{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; grid-column:1 / -1 }
.sj-sw li{ border-radius:14px; padding:64px 14px 12px; background:var(--c); color:#fff; font:500 12px/1.3 var(--font-text) }
.sj-sw li.is-light{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline) }
.sj-sw b{ display:block; font:600 14px/1.2 var(--font-text) }
.sj-type{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.sj-type li{ font:var(--fw) clamp(12px,var(--fs),var(--fs))/1.1 var(--font-display); color:#22472B; letter-spacing:-.01em;
  padding-bottom:14px; border-bottom:1px solid var(--hairline) }
.sj-type span{ display:block; margin-bottom:6px; font:600 10.5px/1 var(--font-text); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted-48) }
.sj-comp{ display:grid; gap:12px; justify-items:start }
.sj-comp img{ display:block; width:auto; max-width:100%; height:44px }
.sj-comp__card{ height:auto !important; width:min(300px,100%) !important; border-radius:14px; box-shadow:0 18px 36px -22px rgba(10,16,32,.35) }
.sj-ch--quote{ grid-template-columns:72px minmax(0,1fr) auto; align-items:center }
.sj-ch--quote .sj-phone{ grid-column:3 }
.sj-quote{ margin:var(--s-lg) 0 0; padding:var(--s-md) var(--s-lg); border-left:3px solid #0D6635; background:#F3F8F4; border-radius:0 14px 14px 0;
  font:600 clamp(20px,2vw,26px)/1.3 var(--font-display); color:#22472B }
.sj-quote cite{ display:block; margin-top:6px; font:500 13px/1.3 var(--font-text); font-style:normal; color:var(--ink-muted-48) }
.sj-phone{ margin:0; width:clamp(170px,17vw,230px) }
.sj-phone img{ display:block; width:100%; border-radius:28px; border:7px solid #1D1F24; box-shadow:0 34px 60px -30px rgba(10,16,32,.55) }
@media (max-width:820px){
  .sj-ch, .sj-ch--quote{ grid-template-columns:1fr } .sj-ch > *, .sj-ch--quote .sj-phone{ grid-column:1 !important }
  .sj-ch__n{ grid-row:auto; margin-bottom:var(--s-sm) }
  .sj-sketches, .sj-pair, .sj-ds{ grid-template-columns:1fr } .sj-sw{ grid-template-columns:repeat(2,1fr) }
  .sj-phone{ margin-top:var(--s-lg); justify-self:center }
}
/* the deck's films on the case pages */
.cs-film{ margin:var(--s-lg) 0 0 }
.cs-film .mn-loop{ border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(10,16,32,.45); background:#EEF1F6 }
.cs-film figcaption{ margin-top:10px; font:var(--t-caption); color:var(--ink-muted-48) }
.cs-films{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-md); margin-top:var(--s-lg) }
.cs-films .cs-film{ margin:0 } .cs-films .cs-film--wide{ grid-column:1 / -1 }
@media (max-width:760px){ .cs-films{ grid-template-columns:1fr } }
.mn-lead--avatar .mn-loop{ width:min(340px,70%); background:none }
.mn-lead--avatar video{ mix-blend-mode:multiply; display:block; width:100% }
.sj-mobile{ margin:var(--s-lg) 0 0; display:flex; align-items:center; gap:var(--s-lg) }
.sj-mobile__phone{ width:clamp(170px,17vw,230px); border-radius:30px; overflow:hidden; border:7px solid #1D1F24; box-shadow:0 34px 60px -30px rgba(10,16,32,.55); flex:none }
.sj-mobile__phone .mn-loop{ aspect-ratio:auto } .sj-mobile__phone video{ display:block; width:100% }
.sj-mobile figcaption{ font:var(--t-body); color:var(--ink-muted-80) } .sj-mobile figcaption b{ display:block; color:var(--ink); font:600 18px/1.3 var(--font-display) }

/* SAJA: the dashboard behind Saja Connect */
.sj-admin{ margin-top:clamp(56px,7vw,96px); display:grid; gap:var(--s-xl) }
.sj-admin__txt h3{ margin:var(--s-xs) 0 0; font:600 clamp(24px,2.4vw,34px)/1.12 var(--font-display); letter-spacing:-.02em }
.sj-admin__txt > p:not(.eyebrow){ margin:var(--s-sm) 0 var(--s-md); max-width:66ch; font:var(--t-body); color:var(--ink-muted-80) }
.sj-admin .sk{ margin:0 }
.sj-admin .sk__stage{ background:#fff }
.sj-admin__ds{ background:#fff }

/* the sketch figure, settled: a before/after with a bar to drag */
.sk__cmp{ position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; transition:opacity .4s }
.sk.is-cmp .sk__cmp{ opacity:1; pointer-events:auto }
.sk__bar{ position:absolute; top:0; bottom:0; left:var(--sk-x,50%); width:2px; margin-left:-1px; background:#fff;
  box-shadow:0 0 0 1px rgba(10,16,32,.12), 0 0 18px rgba(10,16,32,.25) }
.sk__bar i{ position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  display:grid; place-items:center; background:var(--c-accent); box-shadow:0 0 0 4px #fff, 0 10px 24px -8px rgba(10,16,32,.5) }
.sk__bar svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.sk__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; touch-action:pan-y }
.sk__range:focus-visible + *, .sk__cmp:focus-within .sk__bar i{ box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--c-accent) }
.sk__tag{ position:absolute; top:14px; padding:6px 11px; border-radius:var(--r-pill); font:600 11px/1 var(--font-text); letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 4px 14px -6px rgba(10,16,32,.35); pointer-events:none }
.sk__tag--l{ left:14px } .sk__tag--r{ right:14px; background:var(--c-accent); color:#fff }

/* device mockups from the design files: each sits whole on a soft ground */
.dk-row{ display:grid; gap:var(--s-md); margin:var(--s-xl) 0 0 }
.dk-row--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.dk-row--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.dk-row--1{ grid-template-columns:minmax(0,560px); justify-content:center }
.dk-row figure{ margin:0; display:grid; grid-template-rows:auto 1fr }
.dk-row img{ display:block; width:100%; height:clamp(220px,24vw,340px); object-fit:contain; padding:clamp(14px,2vw,26px);
  border-radius:20px; background:radial-gradient(90% 80% at 70% 10%, #fff 0%, transparent 60%), linear-gradient(160deg,#F4F7FD,#DCE6F8);
  filter:drop-shadow(0 0 0 transparent) }
.section--sunken .dk-row img{ background:radial-gradient(90% 80% at 70% 10%, #fff 0%, transparent 60%), linear-gradient(160deg,#FFFFFF,#E3EAF8) }
.dk-row--tall img{ height:clamp(320px,34vw,480px) }
.dk-row--1 img{ height:clamp(300px,34vw,460px) }
.dk-row figcaption{ margin-top:12px; font:var(--t-caption); color:var(--ink-muted-48) }
.dk-row figcaption b{ display:block; color:var(--ink); font-weight:600 }
@media (max-width:900px){ .dk-row--2, .dk-row--3{ grid-template-columns:1fr } .dk-row img, .dk-row--tall img{ height:auto; max-height:420px } }
.sj-screens{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-md) }
.sj-screen{ background:#fff }
.sj-screen__in{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--hairline) }
/* a tall screen shows its top, and scrolls down on hover */
.sj-screen__in img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:object-position 4s cubic-bezier(.45,0,.25,1) }
.sj-screen:hover .sj-screen__in img{ object-position:50% 100% }
.sj-screen figcaption b{ display:block; color:var(--ink); font-weight:600 }
@media (max-width:900px){ .sj-screens{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ .sj-screen__in img{ transition:none } }

/* SAJA, delivered: the desktop film and the phone film side by side */
.sj-devices{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-lg); align-items:end; margin-top:var(--s-md) }
.sj-devices .sj-film{ margin:0 }
.sj-devices .sj-frame figcaption b, .sj-devices .sj-mobile figcaption b{ display:block; color:var(--ink); font:600 14px/1.3 var(--font-text) }
.sj-devices .sj-mobile{ margin:0; flex-direction:column; align-items:center; gap:12px; text-align:center }
.sj-devices .sj-mobile figcaption{ font:var(--t-caption); color:var(--ink-muted-48) }
.sj-devices .sj-mobile__phone{ width:clamp(130px,16vw,240px) }
/* the design system after the sketch */
.cs-ds{ margin-top:var(--s-xl); background:#fff }
.cs-ds img{ display:block; width:100%; height:auto }
.cs-ds figcaption{ font:var(--t-caption); color:var(--ink-muted-48) }
@media (max-width:640px){ .sj-devices{ grid-template-columns:minmax(0,1fr) 34%; gap:var(--s-sm) } .sj-devices .sj-mobile__phone{ width:100%; border-width:4px; border-radius:18px } }
@media (max-width:640px){ .sj-devices .mn-loop__btn{ font-size:0; width:30px; height:30px; padding:0; right:8px; bottom:8px }
  .sj-devices .mn-loop__btn::before{ content:'❚❚'; font-size:10px; letter-spacing:-1px } }

/* Menarini: the webinar series, filtered by therapy area */
.wb-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--s-xl) 0 var(--s-md) }
.wb-filter button{ padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:#fff;
  font:600 13px/1 var(--font-text); color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s }
.wb-filter button:hover{ border-color:var(--c-accent) }
.wb-filter button.is-on{ background:var(--c-accent); border-color:var(--c-accent); color:#fff }
.wb-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-md) }
.wb-card{ border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--hairline), 0 22px 44px -32px rgba(10,16,32,.35);
  transition:opacity .3s, transform .3s }
.wb-card[hidden]{ display:none }
.wb-card img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
.wb-card__body{ padding:16px 18px 20px }
.wb-card__body > p:first-child{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0; font:500 12px/1 var(--font-text); color:var(--ink-muted-48) }
.wb-tag{ padding:5px 9px; border-radius:var(--r-pill); background:#FDECEC; color:#B4232A; font:600 10.5px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase }
.wb-card h3{ margin:12px 0 0; font:600 18px/1.25 var(--font-display); letter-spacing:-.01em }
.wb-card__txt{ margin:8px 0 0; font:var(--t-caption); color:var(--ink-muted-80) }
@media (max-width:1100px){ .wb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .wb-grid{ grid-template-columns:1fr } }
.wb-mails{ margin-top:var(--s-xl) }
.wb-mails{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.wb-mails .sj-screen__in{ aspect-ratio:3/4 }
@media (max-width:1100px){ .wb-mails{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .wb-mails{ grid-template-columns:1fr } }
.wb-mails .sj-screen__in img{ transition-duration:6s }