/* Full-bleed strips use svw; clip on BODY (not html, which would detach the
   scroll timelines) so a classic scrollbar cannot add horizontal scroll. */
body { overflow-x: clip; }
/* Home page only (v4/index.html). Loaded after styles.css.
   Shared rules – typography, links, case/process blocks, recommendations,
   contacts, lightbox, zoom – stay in styles.css. */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.site-header--static { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header--static .site-nav a { color: rgb(120, 120, 120); }
.site-nav {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 40px;
  padding: 20px var(--pad-side);
}
.site-nav a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-body);
  transition: color 120ms ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--c-warm); }
.site-header--static .site-nav a:hover,
.site-header--static .site-nav a:focus-visible { color: var(--c-link-hover); }
.site-nav a:focus-visible {
  outline: 2px solid var(--c-warm);
  outline-offset: 4px;
  border-radius: 4px;
}
.site-header--static .site-nav a:focus-visible { outline-color: var(--c-link-hover); }
/* Language switch: base look lives in styles.css; on the homepage it is centred on the first nav line
   (nav padding-top + half the line box − half the circle) */
.lang-switch { top: calc(20px + var(--fs-body) * 0.75 - 32px); }
/* Over the dark footer the circle turns dark: scroll-driven, no JS. The change runs while the
   band's top edge travels across the circle (64px). Browsers without support keep the light circle. */
@supports (animation-timeline: view()) {
  @media (min-width: 769px) {
    body { timeline-scope: --dark-zone; }
    .dark-zone { view-timeline: --dark-zone block; }
    .lang-switch, .lang-switch svg { --ls-top: calc(20px + var(--fs-body) * 0.75 - 32px); animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --dark-zone; animation-range: cover calc(100vh - var(--ls-top) - 64px) cover calc(100vh - var(--ls-top)); }
    .lang-switch { animation-name: lang-switch-dark; }
    .lang-switch svg { animation-name: lang-switch-dark-flag; }
  }
}
@keyframes lang-switch-dark { to { background-color: rgba(60, 60, 60, 0.6); } }
@keyframes lang-switch-dark-flag { to { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } }
@media (max-width: 768px) {
  .site-nav { gap: 4px 20px; padding: 14px var(--pad-side); }
  .lang-switch { top: calc(14px + var(--fs-body) * 0.75 - 28px); }
  .site-header--static .site-nav { padding-right: calc(var(--pad-side) + 56px); }
  .hero-banner { height: 420px; }
}
.hero-banner {
  position: relative;
  width: 100%;
  height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 40px var(--pad-side) 80px;
  overflow: hidden;
  background: rgb(30, 30, 30);
}
.hero-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.hero-layer-bg { z-index: 0; background-image: url("assets/hero-bg.jpg"); }
.hero-layer-people { z-index: 1; background-image: url("assets/hero-people.webp"); }
@supports (animation-timeline: scroll()) {
  .hero-layer {
    animation-timeline: scroll(root);
    animation-range: 0px 550px;
    animation-fill-mode: both;
  }
  .hero-layer-bg { animation-name: hero-parallax-slow; }
  .hero-layer-people { animation-name: hero-parallax-fast; }
}
@keyframes hero-parallax-slow { from { transform: translateY(0); } to { transform: translateY(60px); } }
@keyframes hero-parallax-fast { from { transform: translateY(0); } to { transform: translateY(80px); } }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
}
.hero-title-group {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
  max-width: 640px;
}
.hero-headline { max-width: 600px; color: rgb(255, 255, 255); text-align: center; }
.hero-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 50px;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: opacity 150ms ease;
}
.btn-hero:hover,
.btn-hero:focus-visible { opacity: 0.85; }
.btn-hero:focus-visible { outline: 2px solid var(--c-warm); outline-offset: 3px; }
.btn-hero-primary { background: rgb(255, 255, 255); color: var(--c-text); }
.btn-hero-outline { background: transparent; color: rgb(255, 255, 255); box-shadow: inset 0 0 0 1.5px rgb(255, 255, 255); }
.products-scroll {
  /* Window-wide bleed: escapes main.page's max-width. Safe now that
     viewport-fit=cover makes svw cover the whole screen. */
  width: 100svw;
  margin-inline: calc(50% - 50svw);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}
.products-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: max-content;
  max-width: 2258px;
  margin: 0 auto;
  padding: 0 20px;
}
.product-card {
  position: relative;
  width: 726px;
  height: 574px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
}
.product-card--cream { background: rgb(232, 231, 222); }
.product-card--grey { background: rgb(237, 237, 237); }
.product-card-head {
  position: absolute;
  left: 40px;
  top: 40px;
  width: calc(100% - 80px);
  max-width: 542px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.product-card--grey .product-card-head { max-width: 502px; }
.product-card--mirrored .product-card-head { max-width: 375px; }
.product-card-head h2 { font-size: var(--fs-title); }
.product-card-head p { color: var(--c-cold); }
.product-card-illustration {
  position: absolute;
  overflow: hidden;
}
.product-card-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-illustration--acronis { left: 0; top: 196px; width: 526px; height: 378px; }
.product-card-illustration--open { left: 0; top: 200px; width: 503px; height: 337px; }
.product-card-illustration--investengine { left: 356px; top: 51px; width: 336px; height: 523px; }
.product-card-illustration--investengine img { object-position: top; }
.product-card-awards {
  position: absolute;
  right: 57px;
  top: 66px;
  width: 120px;
  height: auto;
}
.product-card--grey .product-card-awards { top: 160px; right: 43px; width: 140px; height: auto; }
.product-card-awards--left { right: auto; left: 40px; top: 187px; width: auto; height: auto; }
.product-card-awards--badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.product-card-awards--left.product-card-awards--badges {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  column-gap: 24px;
}
.awards-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  height: 337px;
}
.products-row-mobile { display: none; }
@media (max-width: 768px) {
  .products-row { display: none; }
  .products-row-mobile {
    display: flex; flex-direction: column; gap: 20px;
    width: 100%; padding: 0 20px; box-sizing: border-box;
  }
  .product-card-m {
    border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
    gap: 24px; padding-top: 30px; container-type: inline-size;
  }
  .product-card-m--cream { background: rgb(232, 231, 222); }
  .product-card-m--grey { background: rgb(237, 237, 237); }
  .product-card-m-head { display: flex; flex-direction: column; gap: 12px; padding: 0 25px; }
  .product-card-m-head h2 { font-size: var(--fs-title); color: var(--c-cold); margin: 0; }
  .product-card-m-head p { font-size: var(--fs-body); color: var(--c-cold); margin: 0; }
  .product-card-m-awards {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 5 / 1; box-sizing: border-box;
    gap: 3.5cqw 4cqw; padding: 0 5cqw;
  }
  .product-card-m-awards img { width: auto; height: auto; max-width: 100%; max-height: 16cqw; }
  .product-card-m-awards img[src*="markswebb"] { max-height: 4.5cqw; }
  .product-card-m-awards--acronis { position: relative; flex-wrap: nowrap; gap: 0; padding: 0; }
  .product-card-m-awards--acronis img { position: absolute; width: auto; max-width: none; }
  .product-card-m-awards--acronis img[src*="goldenbridge"] { left: 7.1%; top: 6.4%; height: 87.1%; max-height: none; }
  .product-card-m-awards--acronis img[src*="steviegold"] { left: 26.3%; top: 2.1%; height: 95.7%; max-height: none; }
  .product-card-m-awards--acronis img[src*="pcworld"] { left: 50.3%; top: 0%; height: 100%; max-height: none; }
  .product-card-m-awards--acronis img[src*="pcmagazin"] { left: 69.4%; top: 17.1%; height: 65.7%; max-height: none; }
  .product-card-m-awards--open { position: relative; flex-wrap: nowrap; gap: 0; padding: 0; }
  .product-card-m-awards--open img { position: absolute; width: auto; max-width: none; }
  .product-card-m-awards--open img[src*="tagline"] { left: 7.1%; top: 10%; height: 80%; max-height: none; }
  .product-card-m-awards--open img[src*="wadline"] { left: 30.3%; top: 17.1%; height: 70%; max-height: none; }
  .product-card-m-awards--open img[src*="goldensite"] { left: 52.9%; top: 18.6%; height: 62.9%; max-height: none; }
  .product-card-m-awards--open img[src*="markswebb"] { left: 68.9%; top: 41.4%; height: 17.1%; max-height: none; }
  .product-card-m-awards--investengine { position: relative; flex-wrap: nowrap; gap: 0; padding: 0; }
  .product-card-m-awards--investengine img { position: absolute; width: auto; max-width: none; }
  .product-card-m-awards--investengine img[src*="ft"] { left: 7.1%; top: 10%; height: 80%; max-height: none; }
  .product-card-m-awards--investengine img[src*="which"] { left: 27.4%; top: 10%; height: 80%; max-height: none; }
  .product-card-m-awards--investengine img[src*="finder"] { left: 54.6%; top: 11.4%; height: 77.1%; max-height: none; }
  .product-card-m-awards--investengine img[src*="moneyweek"] { left: 77.4%; top: 11.4%; height: 77.1%; max-height: none; }
  .product-card-m-illustration { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 350 / 252; }
  .product-card-m--grey .product-card-m-illustration { aspect-ratio: 325 / 217; }
  .product-card-m-illustration--tall { aspect-ratio: 390 / 392; }
  .product-card-m-illustration img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .product-card-m-illustration--acronis img { object-fit: cover; }
  .product-card-m-illustration--open img { left: 0; top: 0; width: 92%; height: auto; object-fit: unset; }
  .product-card-m-illustration--tall img { left: 50%; top: 0; width: auto; height: 100%; object-fit: unset; transform: translateX(-50%); }
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: 20px;
  padding-bottom: 0;
}
.about-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
}
.avatar-hi { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.avatar-hi__cb { position: absolute; opacity: 0; pointer-events: none; }
.avatar-hi__hit { display: block; cursor: pointer; }
/* Video introduction: the player lives in an iframe so that opening it counts as a
   user gesture (autoplay with sound); loading="lazy" keeps it unloaded until shown.
   Closing navigates back to the page so the iframe – and its audio – is discarded. */
.lightbox--video { display: none; padding: 0; }
.lightbox--video:target { display: flex; }
.lightbox__video { position: relative; border: 0; width: min(100svw, 1280px); max-width: 1280px; flex: 0 0 auto; aspect-ratio: 16 / 9; max-height: 100svh; background: rgb(20, 20, 20); border-radius: 18px; overflow: hidden; }
@media (max-width: 760px) { .lightbox__video { border-radius: 12px; } }
.avatar-hi__cb:focus-visible + .avatar-hi .avatar-hi__hit img { outline: 2px solid rgb(190,90,60); outline-offset: 4px; }
.avatar-hi__bubble, .avatar-hi__dot {
  position: absolute; opacity: 0; scale: .7; transition: opacity .25s ease, scale .25s ease;
  transform-origin: bottom left; pointer-events: none;
  background: rgba(255,255,255,.7); box-shadow: -2px 2px 4px rgba(43,54,69,.2); border: 1px solid rgba(0,0,0,.05);
}
.avatar-hi__dot { border-radius: 50%; }
.avatar-hi__dot--s { width: 16px; height: 16px; left: calc(50% + 64px); top: 22px; }
.avatar-hi__dot--m { width: 21px; height: 21px; left: calc(50% + 82px); top: 2px; }
.avatar-hi__bubble {
  left: calc(50% + 110px); top: -36px; border-radius: 24px; padding: 11px 18px;
  font-size: 18px; line-height: 1.2; color: rgb(40,45,55);
  width: max-content; max-width: calc(50vw - 118px); min-width: min-content;
}
.avatar-hi:hover .avatar-hi__bubble, .avatar-hi:hover .avatar-hi__dot,
.avatar-hi__cb:checked + .avatar-hi .avatar-hi__bubble,
.avatar-hi__cb:checked + .avatar-hi .avatar-hi__dot { opacity: 1; scale: 1; }
.avatar-hi:hover .avatar-hi__dot--m, .avatar-hi__cb:checked + .avatar-hi .avatar-hi__dot--m { transition-delay: .06s; }
.avatar-hi:hover .avatar-hi__bubble, .avatar-hi__cb:checked + .avatar-hi .avatar-hi__bubble { transition-delay: .12s; }
@media (max-width: 640px) {
  .avatar-hi__dot--s { left: calc(50% + 60px); top: 36px; width: 12px; height: 12px; }
  .avatar-hi__dot--m { left: calc(50% + 74px); top: 4px; width: 20px; height: 20px; }
  .avatar-hi__bubble {
    /* Not enough room right of the avatar on a phone: pin the bubble to the
       container's right edge so it wraps inside the viewport instead of
       overflowing (which caused a horizontal scroll). */
    left: auto; right: 0; top: -26px; font-size: 16px; padding: 9px 14px; border-radius: 20px;
    max-width: calc(100% + 2 * var(--pad-side)); transform-origin: bottom right;
  }
}
.hero-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* Full-bleed band: a body-level block, so it fills the window on any width
   without viewport units (which ignore the scrollbar and safe-area insets). */
.dark-zone {
  margin-top: var(--gap-block);
  padding: calc(var(--gap-block) / 2) calc(var(--pad-side) + env(safe-area-inset-right)) var(--gap-block) calc(var(--pad-side) + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(25, 25, 25);
  --c-text: rgb(190, 190, 190);
  --c-cold: rgb(255, 255, 255);
  --c-link-hover: var(--c-warm);
  color: var(--c-text);
}
.dark-zone__inner { width: 100%; max-width: var(--max-content); display: flex; flex-direction: column; align-items: center; gap: var(--gap-block); }
.dark-zone .chapter h3 { color: rgb(255, 255, 255); }
.dark-zone a { color: inherit; }
.dark-zone .case-arrow { color: var(--c-warm); }
.chapters {
  max-width: 2258px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px var(--gap-chapter);   /* rows sit tighter than columns */
  justify-content: center;
  width: 100%;
}
.chapter {
  display: flex;
  flex-direction: column;
}
.chapter h2,
.chapter h3 {
  /* Chapter lists run at the small 15px step, so their titles sit at body size. */
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-cold);
  letter-spacing: -0.005em;
}
.chapter ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter li,
.chapter li a {
  font-size: 15px;
  line-height: 1.2;
}
.chapter li a {
  display: block;
  /* Body style inherited */
  padding: 0;
  transition: color 120ms ease;
}
.chapter li a:hover,
.chapter li a:focus-visible {
  color: var(--c-link-hover);
}
.chapter li a:focus-visible {
  outline: 2px solid var(--c-link-hover);
  outline-offset: 2px;
}
.about-head--wide { max-width: 840px; }
.about-pics--apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  justify-content: center;
  max-width: 840px;
}
.about-pics--apps img {
  width: 100%;
  aspect-ratio: 698 / 441;
  box-shadow: var(--shadow-img);
}
.case-arrow { color: var(--c-link-hover); }
@media (max-width: 768px) {
  .hero { padding-top: 20px; gap: 48px; }
  .hero-layer-people { background-position: 44% center; }
  .hero-layer-bg { background-position: 44% center; }
  .about-pics--apps { grid-template-columns: 1fr; }
}
.owl-draw { view-timeline-name: --owl; }
@supports (animation-timeline: view()) {
  .owl-draw path {
    fill-opacity: 0;
    stroke: currentColor;
    stroke-width: 0.8;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: owl-stroke, owl-fill;
    animation-fill-mode: both;
    animation-timeline: --owl, --owl;
    animation-range: cover var(--s) cover var(--m), cover var(--m) cover 42%;
    animation-timing-function: linear;
  }
}
@keyframes owl-stroke { to { stroke-dashoffset: 0; } }
@keyframes owl-fill { to { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .owl-draw path { animation: none; fill-opacity: 1; stroke: none; }
}
.logo-wheel {
  margin-top: calc(-1 * var(--sag) - 80px);
  --r: 3500px;
  /* Curvature multiplier: the angles baked into each logo are scaled by --k and
     the radius divided by it, so the arc gets tighter while the spacing between
     logos along the arc stays the same. */
  --k: 1;
  /* Arc rise at the edges is (W/2)^2 / 2R, so the strip has to get taller as
     the viewport widens; stepped rather than computed (CSS cannot square). */
  --sag: 55px;
  --pad: 175px;
  /* Where the middle of the arc sits inside the strip. */
  --anchor: 122px;
  position: relative;
  /* Window-wide bleed: escapes main.page's max-width. Safe now that
     viewport-fit=cover makes svw cover the whole screen. */
  width: 100svw;
  margin-inline: calc(50% - 50svw);
  height: calc(var(--sag) + var(--pad));
  overflow: hidden;
  /* The strip is sized for the arc's highest point, so towards the sides the logos
     sit up to --sag above its bottom edge. Pull the next section up by half of
     that (plus the slack under the lowest, central logo) so the gap below the
     wheel reads like every other block gap. */
  margin-bottom: calc(-1 * var(--sag) / 2 + 28px);
  /* The negative margin-top makes the strip overlap the paragraph above it. */
  pointer-events: none;
}
.logo-wheel__ring {
  position: absolute;
  left: 50%;
  top: calc(var(--sag) + var(--anchor) - var(--r) / var(--k));
  width: 0;
  height: 0;
  animation: logo-drift 57s linear infinite;
}
.logo-wheel img {
  position: absolute;
  left: 0;
  top: 0;
  height: 83px;
  width: auto;
  max-width: none;
  /* Centred by margins, not by a translate inside the transform chain: a
     translate after rotate() would be applied in the rotated frame. */
  margin-left: calc(var(--w) / -2);
  margin-top: -41.5px;
  transform: rotate(calc(var(--a) * var(--k))) translateY(calc(var(--r) / var(--k)));
}
@keyframes logo-drift { to { transform: rotate(calc(41.7015deg * var(--k))); } }
@media (min-width: 1200px) { .logo-wheel { --sag: 95px; } }
@media (min-width: 1600px) { .logo-wheel { --sag: 150px; } }
@media (min-width: 2000px) { .logo-wheel { --sag: 215px; } }
@media (min-width: 2400px) { .logo-wheel { --sag: 310px; } }
@media (min-width: 2900px) { .logo-wheel { --sag: 430px; } }
@media (prefers-reduced-motion: reduce) {
  .logo-wheel__ring { animation: none; }
}
@media (max-width: 768px) {
  .logo-wheel { --k: 2; --sag: 25px; --pad: 140px; --anchor: 78px; margin-top: calc(-1 * var(--sag) - 50px); }
}
.phone-stack { container-type: inline-size; position: relative; width: 100%; max-width: 720px; aspect-ratio: 2048 / 1400; }
.phone { position: absolute; left: 33%; top: 0; width: 34%; aspect-ratio: 1814 / 3658; }
.phone img { display: block; width: 100%; height: 100%; }
.phone--center { z-index: 3; width: 39.6%; left: 30.2%; aspect-ratio: 2113 / 3658; }
.phone--side { animation-timeline: view(); animation-range: cover 0% cover 50%; animation-timing-function: linear; animation-fill-mode: both; }
.phone--left { animation-name: phone-spread-left; }
.phone--right { animation-name: phone-spread-right; }
@keyframes phone-spread-left { to { transform: translate(-31.6cqw, 4.5%) rotate(-10deg) scale(0.98); } }
@keyframes phone-spread-right { to { transform: translate(31.6cqw, 4.5%) rotate(10deg) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .phone--side { animation-timeline: auto; }
}
#principles .about-pics--lead { margin-top: -20px; }
/* Flowchart: blocks are static; each connecting arrow is clipped by a circle at
   its tail, so on scroll the arrow extends from zero to its full length. */
.flowchart { display: block; width: 100%; max-width: 840px; height: auto; margin-top: -20px; margin-bottom: -25px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .flowchart { view-timeline-name: --flow; }
    .flow-reveal {
      r: 0;
      animation: flow-grow linear both;
      animation-timeline: --flow;
      animation-range: cover var(--a) cover var(--b);
    }
    @keyframes flow-grow { to { r: var(--r); } }
  }
}
.award-cards { width: 100%; max-width: 840px; display: flex; flex-direction: column; gap: 20px; }
.award-card { position: relative; background: var(--c-bg); container-type: inline-size; color: inherit; transition: box-shadow 200ms ease, transform 200ms ease; display: flex; flex-wrap: wrap; align-items: center; gap: 40px 0; padding: 40px; border-radius: 18px; box-shadow: var(--shadow-img); }
.award-card__name { flex: 1 1 148px; min-width: 148px; max-width: 224px; }
.award-card__body { flex: 1 1 300px; min-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.award-card__body p { text-align: center; color: var(--c-cold); }
.award-logos { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; }
.award-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26); transform: translateY(-2px); }
.award-logos img { width: auto; }
@media (max-width: 768px) {
  .award-card { padding: 30px 20px; gap: 24px 0; }
  .award-card__body { gap: 24px; }
  /* Horizontal scroller: each card = 80% of the column; 20px bleed keeps hover shadows unclipped */
  .award-cards { container-type: inline-size; flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 16px; align-self: stretch; box-sizing: border-box; width: calc(100% + 40px); max-width: none; padding: 20px 20px 40px; margin: -20px -20px -40px; }
  .award-cards::-webkit-scrollbar { display: none; }
  .award-cards > .award-card { flex: none; width: 80cqw; box-sizing: border-box; }
}
@container (max-width: 447px) {
  .award-card__name { max-width: none; min-width: 0; flex-basis: 100%; text-align: center; }
  .award-card__body { min-width: 0; flex-basis: 100%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck { view-timeline: --deck block; width: 100%; margin: 0 auto; padding-bottom: 55vh; }
    .deck-stage {
      position: relative; display: block; width: min(720px, 100%, 62vh * 698 / 441); aspect-ratio: 698 / 441;
      max-width: none; margin: 0 auto;
      perspective: 1400px; perspective-origin: 50% -50px;
      /* drifts down while the cards flip, so the block travels up-screen at about half the scroll speed */
      animation: deck-drag linear both; animation-timeline: --deck; animation-range: cover 30% cover 65%;
      will-change: translate;
    }
    @keyframes deck-drag { from { translate: 0 0; } to { translate: 0 55vh; } }
    .deck-stage .zoom {
      position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; max-height: none; width: 100%;
      transform-origin: 50% -50px; transform-style: preserve-3d; will-change: translate, rotate, filter;
      animation-timeline: --deck; animation-fill-mode: both; animation-timing-function: linear;
    }
    .deck-stage .zoom img { display: block; width: 100%; aspect-ratio: 698 / 441; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
    .deck-stage .zoom:nth-child(1) { z-index: 6; }
    .deck-stage .zoom:nth-child(2) { z-index: 5; }
    .deck-stage .zoom:nth-child(3) { z-index: 4; }
    .deck-stage .zoom:nth-child(4) { z-index: 3; }
    .deck-stage .zoom:nth-child(5) { z-index: 2; }
    .deck-stage .zoom:nth-child(6) { z-index: 1; }
    /* one animation per card: step forward + brighten, then flip out over the top hinge while sinking back in Z */
    @keyframes deck-1 {
      0% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
      18%, 100% { translate: 0 0 -320px; rotate: x 90deg; filter: brightness(1); }
    }
    @keyframes deck-2 {
      0% { translate: 0 9.9% -220px; rotate: x 0deg; filter: brightness(0.74); }
      18% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
      36%, 100% { translate: 0 0 -320px; rotate: x 90deg; filter: brightness(1); }
    }
    @keyframes deck-3 {
      0% { translate: 0 19.6% -440px; rotate: x 0deg; filter: brightness(0.54); }
      18% { translate: 0 9.9% -220px; rotate: x 0deg; filter: brightness(0.74); }
      36% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
      54%, 100% { translate: 0 0 -320px; rotate: x 90deg; filter: brightness(1); }
    }
    @keyframes deck-4 {
      0% { translate: 0 29.5% -660px; rotate: x 0deg; filter: brightness(0.4); }
      18% { translate: 0 19.6% -440px; rotate: x 0deg; filter: brightness(0.54); }
      36% { translate: 0 9.9% -220px; rotate: x 0deg; filter: brightness(0.74); }
      54% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
      72%, 100% { translate: 0 0 -320px; rotate: x 90deg; filter: brightness(1); }
    }
    @keyframes deck-5 {
      0% { translate: 0 39% -880px; rotate: x 0deg; filter: brightness(0.3); }
      18% { translate: 0 29.5% -660px; rotate: x 0deg; filter: brightness(0.4); }
      36% { translate: 0 19.6% -440px; rotate: x 0deg; filter: brightness(0.54); }
      54% { translate: 0 9.9% -220px; rotate: x 0deg; filter: brightness(0.74); }
      72% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
      90%, 100% { translate: 0 0 -320px; rotate: x 90deg; filter: brightness(1); }
    }
    @keyframes deck-6 {
      0% { translate: 0 48% -1100px; rotate: x 0deg; filter: brightness(0.24); }
      18% { translate: 0 39% -880px; rotate: x 0deg; filter: brightness(0.3); }
      36% { translate: 0 29.5% -660px; rotate: x 0deg; filter: brightness(0.4); }
      54% { translate: 0 19.6% -440px; rotate: x 0deg; filter: brightness(0.54); }
      72% { translate: 0 9.9% -220px; rotate: x 0deg; filter: brightness(0.74); }
      90%, 100% { translate: 0 0 0px; rotate: x 0deg; filter: brightness(1); }
    }
    .deck-stage .zoom { animation-range: cover 30% cover 70%; }
    .deck-stage .zoom:nth-child(1) { animation-name: deck-1; }
    .deck-stage .zoom:nth-child(2) { animation-name: deck-2; }
    .deck-stage .zoom:nth-child(3) { animation-name: deck-3; }
    .deck-stage .zoom:nth-child(4) { animation-name: deck-4; }
    .deck-stage .zoom:nth-child(5) { animation-name: deck-5; }
    .deck-stage .zoom:nth-child(6) { animation-name: deck-6; }
  }
}

/* Story cards under "Simplifying complex scenarios" */
.story-cards { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: 840px; }
.story-card {
  flex: 1 1 300px; min-width: 300px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 40px;
  padding: 40px; border-radius: 18px; background: rgb(255, 255, 255);
  box-shadow: var(--shadow-img); color: var(--c-cold);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.story-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); transform: translateY(-2px); }
.story-card-text { display: flex; flex-direction: column; gap: 20px; }
.story-card-text h3 { margin: 0; font-size: var(--fs-chapter); font-weight: 500; line-height: 1.1; color: var(--c-cold); }
.story-card-text p { margin: 0; color: var(--c-cold); }
.story-card-foot { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; margin-top: auto; }
.story-card-foot img { width: 64px; height: 64px; display: block; flex-shrink: 0; }
.story-card-link { flex: 1 1 auto; text-align: right; color: var(--c-link-hover); }
.story-card:hover .story-card-link { color: rgb(198, 148, 114); }
.story-card:hover .case-arrow { transform: translateX(6px); }
@media (max-width: 768px) {
  .story-card { padding: 25px; gap: 30px; min-width: 0; flex-basis: 100%; }
}